/* ============================================================
   LANDING PAGE — RENACIMIENTO
   Sistema de diseño (tokens) + estilos base
   ============================================================ */

:root {
  /* --- Color: paleta pergamino / óleo renacentista --- */
  --color-fondo:            #F2E8D5; /* pergamino */
  --color-fondo-alt:        #E8DCC0; /* marfil cálido, para secciones alternas */
  --color-superficie:       #FBF6EC; /* "lienzo" para tarjetas/marcos */
  --color-rojo-veneciano:   #8B2E2E; /* acento principal */
  --color-dorado:           #C6A24C; /* pan de oro — detalles, no fondos grandes */
  --color-azul-ultramar:    #1F3A5F; /* lapislázuli — usar con moderación */
  --color-terracota:        #A85C32; /* sombras cálidas */
  --color-texto:            #3B2A1E; /* sepia oscuro */
  --color-texto-suave:      #6B5844;
  --color-borde:            #C9B896;

  /* --- Tipografía --- */
  --fuente-titulo: "Cormorant Garamond", "Playfair Display", serif;
  --fuente-cuerpo: "EB Garamond", Georgia, serif;

  /* Escala tipográfica (fluida, referencia áurea) */
  --tam-h1: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
  --tam-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --tam-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --tam-cuerpo: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --tam-detalle: 0.9rem;

  /* --- Espaciado (progresión áurea × 1.618) --- */
  --esp-1: 0.5rem;
  --esp-2: 0.809rem;
  --esp-3: 1.309rem;
  --esp-4: 2.118rem;
  --esp-5: 3.427rem;
  --esp-6: 5.545rem;
  --esp-7: 8.972rem;

  /* --- Layout --- */
  --ancho-contenido: 1200px;
  --ancho-texto: 68ch; /* línea de lectura < 80 caracteres */
  --radio-marco: 2px;  /* casi sin border-radius: marcos de cuadro, no "tarjetas SaaS" */

  /* --- Movimiento --- */
  --duracion-revelado: 900ms;
}

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--tam-cuerpo);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  color: var(--color-texto);
  line-height: 1.15;
  margin: 0 0 var(--esp-3) 0;
}
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); }

p { max-width: var(--ancho-texto); }

a { color: var(--color-rojo-veneciano); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible accesible (no eliminar el outline) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-azul-ultramar);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--esp-4);
}

section { padding: var(--esp-6) 0; }
.fondo-alt { background-color: var(--color-fondo-alt); }

/* Filete dorado: separador entre secciones, sin usar un simple <hr> gris */
.filete {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-dorado), transparent);
  margin: 0;
}

/* ============================================================
   NAVEGACIÓN — estilo "placa / índice de manuscrito"
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
}
.nav .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--esp-2);
  padding-bottom: var(--esp-2);
}
.nav__marca {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  color: var(--color-rojo-veneciano);
}
.nav__lista {
  display: flex;
  gap: var(--esp-4);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__lista a { color: var(--color-texto); font-family: var(--fuente-titulo); font-size: 1.05rem; }
.nav__lista a:hover { color: var(--color-rojo-veneciano); }

.nav__boton {
  display: none;
  background: none;
  border: 1px solid var(--color-texto);
  padding: var(--esp-1) var(--esp-2);
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  cursor: pointer;
}

/* ============================================================
   HERO — sección "Nombre del movimiento"
   ============================================================ */
.hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--esp-6) var(--esp-4);
  position: relative;
  overflow: hidden;
}
.hero__contenido {
  max-width: 46rem;
  opacity: 0;
  transform: scale(0.98);
  animation: revelarFresco var(--duracion-revelado) ease-out forwards;
  animation-delay: 150ms;
}
.hero__frase {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--tam-h3);
  color: var(--color-texto-suave);
  margin-top: var(--esp-3);
}

@keyframes revelarFresco {
  from { opacity: 0; transform: scale(0.98); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* ============================================================
   CARACTERÍSTICAS
   ============================================================ */
.caracteristicas__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-5) var(--esp-5);
  margin-top: var(--esp-4);
}
.caracteristica {
  border-left: 3px solid var(--color-dorado);
  padding-left: var(--esp-3);
}
.caracteristica h3 { color: var(--color-rojo-veneciano); }

/* ============================================================
   ARTISTAS — retrato tipo tondo (medalla renacentista)
   ============================================================ */
.artistas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-5);
  margin-top: var(--esp-4);
}

/* --- Tarjeta con giro 3D (frente: retrato / reverso: biografía) --- */
.artista {
  background: transparent;
  border: 0;
  padding: 0;
  perspective: 1400px;
  min-height: 340px;
  cursor: pointer;
}
.artista__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  transition: transform 700ms cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.artista.volteada .artista__inner { transform: rotateY(180deg); }

.artista__frente,
.artista__reverso {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.artista__reverso {
  transform: rotateY(180deg);
  justify-content: center;
  text-align: left;
  overflow-y: auto;
}
.artista__reverso p { font-size: var(--tam-detalle); margin: 0 0 var(--esp-2); max-width: none; }
.artista__reverso .artista__nombre { margin-bottom: var(--esp-3); }

.artista__foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-dorado);
  margin: 0 auto var(--esp-3);
  transition: box-shadow 300ms ease;
}
.artista:hover .artista__foto {
  box-shadow: 0 0 0 4px var(--color-fondo), 0 0 0 6px var(--color-dorado);
}
.artista__foto img { width: 100%; height: 100%; object-fit: cover; }
.artista__nombre { text-align: center; }
.artista__aportacion { color: var(--color-texto-suave); font-size: var(--tam-detalle); }
.artista__pista {
  display: block;
  text-align: center;
  margin-top: var(--esp-2);
  font-size: var(--tam-detalle);
  color: var(--color-dorado);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ============================================================
   FILTROS de la galería de obras
   ============================================================ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  justify-content: center;
  margin: var(--esp-4) 0 var(--esp-3);
}
.filtro {
  background: transparent;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--tam-detalle);
  letter-spacing: 0.03em;
  padding: var(--esp-1) var(--esp-3);
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}
.filtro:hover { border-color: var(--color-dorado); }
.filtro--activo {
  background: var(--color-rojo-veneciano);
  border-color: var(--color-rojo-veneciano);
  color: var(--color-fondo);
}

/* ============================================================
   OBRAS — galería enmarcada
   ============================================================ */
.obras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}
.obra {
  background: var(--color-superficie);
  border: 8px solid var(--color-superficie);
  outline: 1px solid var(--color-dorado);
  outline-offset: -6px;
  transition: opacity 400ms ease, transform 400ms ease;
}
.obra img { aspect-ratio: 4 / 5; object-fit: cover; }
.obra__ficha { padding: var(--esp-2) var(--esp-2) var(--esp-3); }
.obra__ficha h3 { font-size: 1.1rem; margin-bottom: 2px; }
.obra__meta { font-size: var(--tam-detalle); color: var(--color-texto-suave); }

/* Obra oculta por el filtro activo */
.obra--oculta {
  display: none;
}
/* Micro-animación al reaparecer tras filtrar */
.obra--entra {
  animation: obra-entra 450ms var(--curva, ease) both;
}
@keyframes obra-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Solo las imágenes de la galería de OBRAS son clicables para verse en grande */
.obra img { cursor: zoom-in; }

/* ============================================================
   VISOR DE IMAGEN COMPLETA (lightbox) — solo galería de obras
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-4);
  background-color: rgba(59, 42, 30, 0.92); /* sepia oscuro translúcido */
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease;
}
.lightbox.abierto {
  opacity: 1;
  visibility: visible;
}
.lightbox__marco {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  max-width: min(92vw, 1100px);
}
.lightbox__img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  width: auto;
  object-fit: contain;
  outline: 2px solid var(--color-dorado);
  outline-offset: 6px;
  background-color: var(--color-superficie);
  cursor: zoom-in; /* activar lupa */
}
.lightbox__img.con-zoom { cursor: zoom-out; }
.lightbox__leyenda {
  color: var(--color-fondo);
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.lightbox__cerrar {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-4);
  background: none;
  border: 1px solid var(--color-dorado);
  color: var(--color-fondo);
  font-family: var(--fuente-titulo);
  font-size: 1.8rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 2;
}
.lightbox__cerrar:hover { background-color: var(--color-rojo-veneciano); }

/* Flechas de navegación */
.lightbox__nav {
  background: none;
  border: 1px solid var(--color-dorado);
  color: var(--color-fondo);
  font-family: var(--fuente-titulo);
  font-size: 2.4rem;
  line-height: 1;
  width: 54px;
  height: 54px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 200ms ease;
}
.lightbox__nav:hover { background-color: var(--color-rojo-veneciano); }
.lightbox__nav--prev { margin-right: var(--esp-3); }
.lightbox__nav--next { margin-left: var(--esp-3); }

@media (max-width: 600px) {
  .lightbox__nav {
    position: absolute;
    bottom: var(--esp-3);
    margin: 0;
  }
  .lightbox__nav--prev { left: var(--esp-3); }
  .lightbox__nav--next { right: var(--esp-3); }
}

/* ============================================================
   LÍNEA DEL TIEMPO — friso horizontal
   ============================================================ */
.linea-tiempo {
  position: relative;
  padding-top: var(--esp-5);
}
.linea-tiempo::before {
  content: "";
  position: absolute;
  top: calc(var(--esp-5) - 2px);
  left: 0; right: 0;
  height: 3px;
  background-color: var(--color-dorado);
}
.linea-tiempo__lista {
  display: flex;
  gap: var(--esp-5);
  overflow-x: auto;
  list-style: none;
  margin: 0; padding: var(--esp-2) var(--esp-1) var(--esp-2);
  scroll-snap-type: x proximity;
}
.evento {
  flex: 0 0 240px;
  position: relative;
  scroll-snap-align: start;
}
.evento::before {
  content: "";
  position: absolute;
  top: calc(var(--esp-5) * -1 + 2px);
  left: 4px;
  width: 14px; height: 14px;
  background: var(--color-rojo-veneciano);
  border: 2px solid var(--color-fondo);
  border-radius: 50%;
}
.evento__anio {
  font-family: var(--fuente-titulo);
  color: var(--color-rojo-veneciano);
  font-size: 1.3rem;
}

.evento__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  outline: 1px solid var(--color-dorado);
  outline-offset: -4px;
  margin-bottom: var(--esp-2);
}

/* ============================================================
   INFLUENCIA ACTUAL
   ============================================================ */
.influencia__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}
.influencia__item {
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
}
.influencia__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  outline: 1px solid var(--color-dorado);
  outline-offset: -4px;
  margin-bottom: var(--esp-3);
  cursor: zoom-in;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-azul-ultramar);
  color: var(--color-fondo);
  text-align: center;
  padding: var(--esp-4);
}
.footer a { color: var(--color-dorado); }

/* ============================================================
   Reveal al hacer scroll (un único efecto discreto, no cascada)
   ============================================================ */
.al-revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.al-revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — Tablet 768×1024
   ============================================================ */
@media (max-width: 1024px) {
  .caracteristicas__lista { grid-template-columns: 1fr; }
  .influencia__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — Celular 390×844
   ============================================================ */
@media (max-width: 600px) {
  .nav__lista {
    position: fixed;
    inset: 56px 0 0 0;
    background-color: var(--color-fondo);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--esp-4);
    gap: var(--esp-3);
    transform: translateX(100%);
    transition: transform 300ms ease;
  }
  .nav__lista.abierto { transform: translateX(0); }
  .nav__boton { display: block; }

  .influencia__grid { grid-template-columns: 1fr; }
  .contenedor { padding: 0 var(--esp-3); }
  section { padding: var(--esp-5) 0; }
}

/* ============================================================
   BARRA DE PROGRESO DE LECTURA
   ============================================================ */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(to right, var(--color-dorado), var(--color-rojo-veneciano));
  z-index: 200;
  transition: width 120ms linear;
}