/* --- 1. CONFIGURACIÓN Y VARIABLES --- */
/* Importamos fuentes de Google: 
   'Playfair Display' para títulos (elegante, clásica)
   'Lato' para texto (limpia, moderna) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');

:root {
  /* Aquí definimos nuestra paleta de colores "Mid-Century" */
  --fondo-crema: #FDFBF7;       /* Como una pared bien iluminada */
  --madera-oscura: #5D4037;     /* Para textos y contrastes fuertes */
  --madera-clara: #D7CCC8;      /* Para detalles sutiles */
  --verde-planta: #556B2F;      /* Verde oliva/musgo para acentos */
  --acento-teja: #A0522D;       /* Un toque de color cálido */
  
  --ancho-maximo: 800px;        /* Para que el texto no se "desparrame" */
}

/* --- 2. ESTILOS GENERALES (El ambiente) --- */
body {
  background-color: var(--fondo-crema);
  color: var(--madera-oscura);
  font-family: 'Lato', sans-serif;
  line-height: 1.6;             /* Espacio entre líneas para respirar */
  margin: 0;
  padding: 0;
}

/* --- 3. TIPOGRAFÍA (Los muebles) --- */
h2, h3 {
  font-family: 'Playfair Display', serif; /* Títulos con personalidad */
  color: var(--verde-planta);
  margin-top: 0;
}
h1 {
  font-family: 'Playfair Display', serif;
  color: var(--verde-planta);
  margin-top: 0;
  
  /* AÑADE ESTAS LÍNEAS DEBAJO: */
  text-transform: uppercase; /* Lo pone todo en mayúsculas automáticamente */
  letter-spacing: 4px;       /* Separa las letras, muy elegante */
  font-size: 2.5em;          /* Un poco más grande */
}

a {
  color: var(--acento-teja);
  text-decoration: none; /* Quitamos el subrayado típico */
  font-weight: bold;
}

a:hover {
  /* Cuando pasas el ratón por encima */
  color: var(--verde-planta);
  text-decoration: underline;
}

/* --- 4. ESTRUCTURA (La arquitectura) --- */
/* Centramos todo el contenido como una columna de revista */
header, nav, main, footer {
  max-width: var(--ancho-maximo);
  margin: 0 auto; /* Auto a los lados centra el bloque */
  padding: 20px;
}

header {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--madera-clara); /* Una línea sutil */
}

nav ul {
  list-style: none; /* Quitamos los puntos de la lista */
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline-block; /* Ponemos los elementos uno al lado del otro */
  margin: 0 15px;
}

/* Estilo para las "cajas" de contenido */
section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff; /* Un blanco puro para resaltar sobre el crema */
  border: 1px solid var(--madera-clara);
  box-shadow: 4px 4px 0px var(--madera-clara); /* Sombra dura estilo retro */
}

footer {
  text-align: center;
  font-size: 0.9em;
  opacity: 0.7;
  margin-top: 50px;
}

/* --- 5. IMÁGENES --- */
.portada-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.foto-principal {
  max-width: 100%;       /* Que no se salga del ancho */
  height: auto;          /* Que no se deforme */
  border-radius: 4px;    /* Bordes un pelín redondeados, muy años 50 */
  filter: sepia(20%) contrast(90%); /* TRUCO: Un filtro suave para dar calidez "vintage" a cualquier foto */
}

/* --- 6. DISEÑO DE LA PÁGINA DE INICIO (GRID) --- */

.grid-inicio {
  display: flex;        /* ¡MAGIA! Esto activa el modo flexible */
  gap: 20px;            /* Espacio entre las dos columnas */
  align-items: flex-start; /* Alinea las cajas arriba */
}

.caja-blog, .caja-arte {
  flex: 1;              /* Significa: "repartíos el espacio a partes iguales" */
  /* Mantenemos los estilos de borde que pusimos antes en 'section' */
}

/* ESTILO RESPONSIVE (Para móviles) */
/* Esto dice: "Si la pantalla es pequeña (menos de 600px), vuelve a ponerlo en vertical" */
@media (max-width: 600px) {
  .grid-inicio {
    flex-direction: column;
  }
}

/* --- 7. DETALLES ESTÉTICOS (Botones y Fechas) --- */

.fecha {
  font-size: 0.8em;
  color: var(--verde-planta);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.boton-leer {
  display: inline-block;
  margin-top: 15px;
  background-color: var(--fondo-crema);
  border: 1px solid var(--acento-teja);
  padding: 5px 10px;
  font-size: 0.9em;
  transition: 0.3s; /* Suaviza el cambio de color */
}

.boton-leer:hover {
  background-color: var(--acento-teja);
  color: white;
  text-decoration: none;
}

/* --- 8. ESTILOS DEL BLOG (Página de lista) --- */

/* La clase "activo" marca en negrita en qué página estás */
nav a.activo {
  color: var(--verde-planta);
  border-bottom: 2px solid var(--verde-planta);
}

.entrada-lista {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--madera-clara); /* Una línea fina separando posts */
}

/* Quitamos la línea al último elemento para que quede limpio */
.entrada-lista:last-of-type {
  border-bottom: none;
}

.entrada-lista h3 {
  margin-bottom: 5px;
  font-size: 1.5em;
}

.entrada-lista h3 a {
  color: var(--madera-oscura);
}

.entrada-lista h3 a:hover {
  color: var(--acento-teja);
}

.leer-mas {
  font-size: 0.9em;
  font-style: italic;
  color: var(--acento-teja);
}

/* --- 9. ESTILOS DEL ARTÍCULO INDIVIDUAL --- */

.articulo-completo {
  max-width: 700px; /* Hacemos la columna un poco más estrecha para leer mejor */
  margin: 0 auto;   /* Centrado */
}

.post-header {
  text-align: center;
  margin-bottom: 30px;
}

.subtitulo {
  font-style: italic;
  color: #666;
  font-size: 1.1em;
}

/* Estilos para los párrafos del artículo */
.contenido-texto p {
  font-size: 1.1em;     /* Letra un poco más grande que el resto de la web */
  line-height: 1.8;     /* Más espacio entre líneas = lectura relajada */
  margin-bottom: 20px;
  text-align: justify;  /* Opcional: justifica el texto a ambos lados */
}

/* LA CITA (Blockquote) - ¡Toque clave de diseño! */
blockquote {
  margin: 40px 0;           /* Espacio arriba y abajo */
  padding: 20px 40px;       /* Espacio interior */
  border-left: 4px solid var(--acento-teja); /* Línea vertical a la izquierda */
  background-color: #f4f1ea; /* Un crema un poco más oscuro para resaltar */
  font-family: 'Playfair Display', serif; /* Fuente elegante */
  font-size: 1.2em;
  font-style: italic;
  color: var(--madera-oscura);
}

/* --- 10. ESTILOS DEL PORTAFOLIO (NIVEL 1: COLECCIONES) --- */

.grid-colecciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Esto crea columnas automáticas */
  gap: 20px;
}

.tarjeta-coleccion {
  display: block;
  background-color: #fff;
  border: 1px solid var(--madera-clara);
  padding: 40px 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none; /* Quitamos el subrayado general */
}

/* Efecto al pasar el ratón: se levanta un poco */
.tarjeta-coleccion:hover {
  transform: translateY(-5px);
  box-shadow: 6px 6px 0px var(--madera-clara);
  border-color: var(--verde-planta);
}

.tarjeta-coleccion h3 {
  margin-top: 0;
  color: var(--madera-oscura);
  border-bottom: 1px solid var(--madera-clara);
  padding-bottom: 10px;
  display: inline-block;
}

.tarjeta-coleccion p {
  color: #666;
  font-size: 0.9em;
  font-weight: normal;
}

.tarjeta-coleccion span {
  font-size: 0.8em;
  color: var(--acento-teja);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- 11. ESTILOS MASONRY (NIVEL 2: LA SALA) --- */

.masonry-muro {
  /* Aquí está el truco: */
  column-count: 3;        /* Queremos 3 columnas */
  column-gap: 20px;       /* Espacio entre columnas */
}

/* En móviles, bajamos a 1 columna */
@media (max-width: 700px) {
  .masonry-muro {
    column-count: 1;
  }
}

.pieza-arte {
  /* Esto evita que una imagen se parta entre dos columnas */
  break-inside: avoid;
  margin-bottom: 20px;    /* Espacio debajo de cada cuadro */
  
  /* Estilo visual */
  background-color: #fff;
  padding: 10px;          /* Un pequeño marco blanco tipo Polaroid */
  border: 1px solid var(--madera-clara);
}

.pieza-arte img {
  width: 100%;            /* Que ocupe todo el ancho de su columna */
  height: auto;           /* Que mantenga su proporción */
  display: block;
}

.titulo-obra {
  font-size: 0.85em;
  color: #666;
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

/* Estilo para las citas intercaladas */
.cita-arte {
  background-color: var(--verde-planta);
  color: #fff;
  text-align: center;
  padding: 30px;
  font-family: 'Playfair Display', serif;
}

/* --- 12. PÁGINA SOBRE MÍ (Editorial Style) --- */

.perfil-container {
  display: flex;
  gap: 40px;
  align-items: center; /* Centra verticalmente texto y foto */
  margin-top: 20px;
}

.perfil-foto {
  flex: 1; /* Ocupa 1 parte del espacio */
}

.perfil-foto img {
  width: 100%;
  border-radius: 50% 50% 0 0; /* TRUCO: Borde superior curvo (arco), muy arquitectónico */
  border: 1px solid var(--madera-clara);
  padding: 10px;
  background-color: white;
}

.perfil-texto {
  flex: 1.5; /* El texto ocupa un poco más de espacio (1.5 partes) */
}

.perfil-texto .intro {
  font-size: 1.2em;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
  color: var(--madera-oscura);
}

.lista-herramientas {
  list-style: square; /* Puntos cuadrados, más geométricos */
  color: #666;
  padding-left: 20px;
}

.contacto-caja {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border: 1px dashed var(--acento-teja); /* Borde punteado como un recorte */
  display: inline-block;
}

/* RESPONSIVE: En móvil, foto arriba y texto abajo */
@media (max-width: 700px) {
  .perfil-container {
    flex-direction: column;
  }
  .perfil-foto img {
    max-width: 300px; /* Que no sea gigante en móvil */
  }
}