/* =====================================
   aleehcat
   Sketchbook personal
   Arte · Pinturas · Gatos · Naturaleza
===================================== */

/* PALETA DE COLORES
   Bone:          #E6E0D6
   Merlot:        #4B1E23
   Olive:         #6B6F4E
   Midnight Blue: #1C2430
   Tobacco:       #8A5A2B
   Graphite:      #121212
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  background-color: #121212; /* Graphite */
  color: #E6E0D6; /* Bone */
  font-family: Georgia, serif;
  text-align: center;
}

/* CONTENEDOR PRINCIPAL (Efecto Cuadro/Libreta) */
.card {
  background: #1C2430; /* Midnight Blue */
  border: 3px solid #6B6F4E; /* Olive */
  border-radius: 20px;
  padding: 40px 30px;
  margin: 30px auto;
  max-width: 850px;
  box-shadow: 10px 10px 0px #4B1E23; /* Merlot */
  position: relative;
}

/* TÍTULOS */
h1 {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 52px;
  letter-spacing: 4px;
  color: #E6E0D6; /* Bone */
  margin-bottom: 5px;
  text-shadow: 2px 2px 0px #4B1E23; /* Detalle pro */
}

h2 {
  font-family: "Trebuchet MS", sans-serif;
  color: #8A5A2B; /* Tobacco */
  font-size: 28px;
  margin-top: 30px;
}

/* TEXTOS */
p {
  font-size: 18px;
  line-height: 1.8;
  color: #E6E0D6;
}

.tag {
  color: #6B6F4E; /* Olive */
  letter-spacing: 4px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
}

.firma {
  color: #8A5A2B; /* Tobacco */
  font-size: 26px;
  font-style: italic;
  margin-top: 20px;
}

/* BOTONES */
.boton {
  display: inline-block;
  background: #4B1E23; /* Merlot */
  color: #E6E0D6; /* Bone */
  padding: 14px 28px;
  margin: 10px;
  border-radius: 12px;
  text-decoration: none;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: bold;
  border: 2px solid #8A5A2B; /* Tobacco */
  box-shadow: 4px 4px 0px #6B6F4E; /* Olive */
  transition: all 0.3s ease;
}

.boton:hover {
  background: #8A5A2B; /* Tobacco */
  color: #121212;
  border-color: #6B6F4E;
  box-shadow: 2px 2px 0px #4B1E23;
  transform: translateY(-3px);
}

/* GALERÍA DE ARTE (Efecto Marcos / Cuadros) */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
}

.gallery img {
  width: 280px;
  max-width: 90%;
  background: #E6E0D6; /* Marco estilo lámina */
  padding: 8px; /* Crea el marco alrededor de la foto */
  border-radius: 12px;
  border: 2px solid #6B6F4E; /* Olive */
  box-shadow: 6px 6px 0px #4B1E23; /* Merlot */
  transition: all 0.3s ease;
  object-fit: cover;
}

.gallery img:hover {
  transform: rotate(-2deg) scale(1.04);
  box-shadow: 8px 12px 15px rgba(0, 0, 0, 0.5);
  border-color: #8A5A2B;
}

/* BOCETOS (Galería secundaria más pequeña) */
.sketch-gallery img {
  width: 170px;
  padding: 5px;
  box-shadow: 4px 4px 0px #6B6F4E;
}

.sketch-gallery img:hover {
  transform: rotate(2deg) scale(1.05);
}

/* SEPARADORES Y FOOTER */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6B6F4E, transparent);
  width: 80%;
  margin: 40px auto;
}

footer {
  color: #6B6F4E; /* Olive */
  font-size: 14px;
  margin-top: 20px;
}

/* ADAPTABILIDAD A MÓVILES */
@media (max-width: 700px) {
  body {
    padding: 15px 10px;
  }

  h1 {
    font-size: 36px;
    letter-spacing: 2px;
  }

  .card {
    padding: 22px 15px;
    box-shadow: 6px 6px 0px #4B1E23;
  }
  
  
  
  /* Pequeños extras para el nuevo HTML */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}

main .card {
  transition: transform 0.2s ease;
}

/* Efecto sutil cuando pasas por encima de cada cuadro */
main .card:hover {
  transform: translateY(-2px);
}


  .boton {
    width: 90%;
    margin: 8px 0;
  }
}