/* ============================================================
   GALERIACANO.COM — Sistema visual v2 «Del oro al archivo»
   Rediseño inmersivo basado en el prototipo Lovable (gold-memory):
   editorial · cinematográfico · archivístico.
   Paleta: carbón cálido · marfil · papel envejecido · oro envejecido
   como acento restringido · terracota documental para la caída.
   Contrastes AA sobre --bg:
     --ivory 12.9:1 · --ivory-dim 7.2:1 · --gold 6.0:1 · --terracota 5.4:1
   Tipografía: Fraunces (serif editorial) · Inter (cuerpo) ·
   JetBrains Mono (fechas, metadata, fuentes, evidencias).
   ============================================================ */
:root{
  --bg:          #131110;
  --surface:     #1b1815;
  --surface-2:   #221e19;
  --line:        #2b261f;
  --ivory:       #eae3d3;
  --ivory-dim:   #a99f8c;
  --papel:       #d9d0bd;
  --gold:        #c4a265;
  --gold-suave:  #dcc79a;
  --gold-prof:   #8a6f3e;
  --terracota:   #c98263;
  --terracota-prof: #7d4630;
  --ivory-tenue: #8f8676; /* atenuado AA (5.2:1) para estados inactivos con texto legible */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --medida: 62ch;            /* ancho máximo de lectura */
  --ancho-max: 87.5rem;      /* 1400px — contenedor amplio */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); }
[id]{ scroll-margin-top:4.5rem; } /* compensación de la cabecera sticky */

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--gold); color:var(--bg); }

a{ color:var(--ivory); text-decoration-color:color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset:3px; transition:color .3s ease; }
a:hover{ color:var(--gold); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:1px; }

strong{ font-weight:500; color:var(--ivory); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--gold); color:var(--bg); padding:.6rem 1rem; font-weight:500;
}
.skip-link:focus{ left:0; }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4,.serif{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-0.02em; }
h1{ font-size:clamp(3rem, 9vw, 7rem); line-height:.92; }
h2{ font-size:clamp(2.2rem, 5.5vw, 4.25rem); line-height:.98; }
h3{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); }

.mono{ font-family:var(--mono); letter-spacing:.02em; }

.kicker{
  font-family:var(--mono);
  font-size:.72rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}

/* Regla dorada con desvanecimiento (firma visual del sistema) */
.regla-oro{
  display:inline-block; height:1px; width:3.5rem; vertical-align:middle;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.separador-oro{
  max-width:75rem; margin-inline:auto; padding:0 1.5rem;
}
.separador-oro::after{
  content:""; display:block; height:1px; opacity:.4;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

/* Texto con degradado dorado (titulares, acento restringido) */
.texto-oro, .hero-titulo-oro{
  background:linear-gradient(180deg, var(--gold-suave), var(--gold-prof));
  -webkit-background-clip:text; background-clip:text;
  color:var(--gold); /* fallback */
}
@supports (-webkit-background-clip:text){
  .texto-oro, .hero-titulo-oro{ color:transparent; }
}

/* Grano de papel (textura sutil de archivo) */
.grano, .hero-grano{
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.02), transparent 40%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.025), transparent 40%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.02), transparent 40%);
}

/* ---------- Barra de progreso de lectura (creada por main.js) ---------- */
.progreso-lectura{
  position:fixed; top:0; left:0; z-index:120;
  height:2px; width:100%;
  transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, var(--gold-prof), var(--gold));
  pointer-events:none;
}

/* ---------- Barra de independencia ---------- */
.aviso-independencia{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  color:var(--ivory-dim);
  font-size:.8rem; letter-spacing:.04em;
  text-align:center;
  padding:.55rem 1rem;
}
.aviso-independencia strong{ color:var(--ivory); font-weight:500; }

/* ---------- Cabecera de navegación ---------- */
.cabecera{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.cabecera.desplazada{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.cabecera-inner{
  max-width:var(--ancho-max); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.5rem;
}
.cabecera-marca{ display:flex; align-items:baseline; gap:.8rem; text-decoration:none; flex-wrap:wrap; }
.cabecera-nombre{ font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; color:var(--ivory); white-space:nowrap; }
@media (max-width:520px){ .cabecera-lema{ display:none; } }
.cabecera-lema{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ivory-dim);
}
.cabecera-nav ul{ list-style:none; display:flex; align-items:center; gap:1.4rem; }
.cabecera-nav a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--ivory-dim);
  padding:.35rem 0; border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .3s ease, border-color .3s ease;
}
@media (max-width:1299px){
  .cabecera-lema{ display:none; }
  .cabecera-nav ul{ gap:1.05rem; }
}
.cabecera-nav a:hover{ color:var(--gold); }
.cabecera-nav a.activo{ color:var(--gold); border-bottom-color:var(--gold); }
.cabecera-menu-btn{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--ivory);
  padding:.55rem 1rem; cursor:pointer; min-height:44px;
}
.cabecera-menu-btn[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold); }
.menu-movil{
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.menu-movil ul{ list-style:none; max-width:var(--ancho-max); margin-inline:auto; padding:0 1.5rem; }
.menu-movil li + li{ border-top:1px solid var(--line); }
.menu-movil a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; min-height:44px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--papel);
}
.menu-movil a:hover{ color:var(--gold); }
.menu-anio{ color:var(--ivory-dim); }
@media (max-width:1023px){
  .cabecera-nav{ display:none; }
  .js .cabecera-menu-btn{ display:inline-flex; align-items:center; }
}
@media (min-width:1024px){
  .cabecera-menu-btn, .menu-movil{ display:none !important; }
}

/* ---------- Línea de tiempo lateral (desktop amplio) ---------- */
.tl-lateral{ display:none; }
@media (min-width:1200px){
  .js .tl-lateral{
    display:block; position:fixed; right:1.2rem; top:50%; z-index:90;
    transform:translateY(-50%);
  }
  .tl-lateral ol{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
  .tl-item{ display:flex; align-items:center; justify-content:flex-end; gap:.7rem; }
  .tl-rotulo{
    font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--papel);
    opacity:0; transition:opacity .5s ease;
  }
  .tl-item:hover .tl-rotulo{ opacity:.7; }
  .tl-item.activo .tl-rotulo{ opacity:1; color:var(--gold); }
  .tl-anio{
    font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
    text-decoration:none; color:var(--ivory-dim);
    padding:.15rem .1rem;
    transition:color .5s ease;
  }
  .tl-anio:hover{ color:var(--papel); }
  .tl-item.activo .tl-anio{ color:var(--gold); }
  .tl-guion{
    display:block; height:1px; width:.8rem; background:var(--line);
    transition:width .5s ease, background .5s ease;
  }
  .tl-item.activo .tl-guion{ width:2rem; background:var(--gold); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}
.hero-figura{
  position:absolute; inset:0; z-index:-3; margin:0;
}
.hero-figura img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:72% 42%;
  opacity:.62;
  filter:sepia(.28) saturate(.9) brightness(.72) contrast(1.15);
}
.hero-velo{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 85%, transparent) 45%, color-mix(in srgb, var(--bg) 10%, transparent) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%, color-mix(in srgb, var(--bg) 40%, transparent) 100%);
}
.hero-grano{ position:absolute; inset:0; z-index:-1; opacity:.4; mix-blend-mode:overlay; pointer-events:none; }
.hero-inner{
  position:relative;
  width:100%;
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding:7rem 1.5rem 6rem;
}
.hero-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.hero h1{ max-width:12ch; color:var(--ivory); }
.hero-titulo-oro{
  display:block; margin-top:1.2rem;
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  line-height:1.12; letter-spacing:-.01em;
  font-style:italic;
  max-width:22ch;
}
.hero-sub{
  margin-top:2rem;
  max-width:52ch;
  font-size:clamp(1rem, 1.8vw, 1.15rem);
  color:var(--papel);
}
.hero-acciones{
  margin-top:2.8rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2rem;
}
.boton-oro{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  border:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  padding:1rem 1.5rem; min-height:44px;
  transition:background .3s ease, color .3s ease;
}
.boton-oro:hover{ background:var(--gold); color:var(--bg); }
.boton-oro span{ transition:transform .3s ease; }
.boton-oro:hover span{ transform:translateY(2px); }
.enlace-metodo{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-dim);
  text-decoration-color:color-mix(in srgb, var(--gold) 40%, transparent);
  text-underline-offset:8px;
}
.enlace-metodo:hover{ color:var(--papel); }
.hero-disclaimer{
  margin-top:2.6rem;
  font-size:.85rem;
  color:var(--ivory-dim);
  max-width:56ch;
}
.hero-scrollcue{
  position:absolute; z-index:2;
  left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.scrollcue-linea{
  display:block; width:1px; height:2rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, transparent), transparent);
}
.hero-credito{
  position:absolute; z-index:2;
  right:1.5rem; bottom:1.4rem;
  font-size:.68rem; letter-spacing:.05em;
  color:var(--ivory-dim); text-align:right; max-width:38ch;
}
@media (max-width:700px){
  .hero-figura img{ object-position:70% 30%; opacity:.42; }
  .hero-credito{ position:static; display:block; margin:2.2rem 1.5rem 4.5rem; text-align:left; max-width:60ch; }
  .hero{ flex-direction:column; justify-content:center; }
  .hero-inner{ padding:6.5rem 1.5rem 0; }
}

/* Animación de emergencia del hero (la pieza sale de la oscuridad) */
@keyframes emerger{
  from{ opacity:0; transform:scale(1.04); filter:sepia(.28) saturate(.9) brightness(.72) contrast(1.15) blur(6px); }
  to  { opacity:.62; transform:scale(1);   filter:sepia(.28) saturate(.9) brightness(.72) contrast(1.15) blur(0); }
}
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: no-preference){
  .hero-figura img{ animation:emerger 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .hero-inner > *{ animation:aparecer .9s ease-out both; }
  .hero-inner > *:nth-child(2){ animation-delay:.15s; }
  .hero-inner > *:nth-child(3){ animation-delay:.3s; }
  .hero-inner > *:nth-child(4){ animation-delay:.45s; }
  .hero-inner > *:nth-child(5){ animation-delay:.6s; }
}

/* ---------- Secciones ---------- */
section{ padding:clamp(5rem, 10vw, 8.5rem) 1.5rem; }
.contenido{ max-width:var(--medida); margin-inline:auto; }
.contenido > * + *{ margin-top:1.2rem; }
.encabezado-cap{ margin-bottom:2.6rem; }
.encabezado-cap .kicker{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem;
}
.encabezado-cap .kicker::before{
  content:""; display:block; height:1px; width:2.5rem;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.encabezado-cap .epoca{
  display:block; margin-top:.9rem;
  font-family:var(--mono); font-style:normal;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ivory-dim);
}

/* ---------- Marcadores de certeza (+ tooltip accesible vía main.js) ---------- */
.certeza{
  display:inline-block;
  font-size:.8em;
  font-style:normal;
  color:var(--ivory-dim);
  transform:translateY(-.08em);
}
.certeza-btn{
  display:inline-block;
  background:none; border:0; padding:0 .15em; cursor:help;
  font:inherit; color:inherit;
  border-bottom:1px dotted color-mix(in srgb, var(--gold) 50%, transparent);
}
.certeza-btn:hover, .certeza-btn:focus-visible{ color:var(--gold); }
.tooltip-certeza{
  position:absolute; z-index:150;
  width:min(19rem, calc(100vw - 2rem));
  background:#0d0b0a; border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding:.85rem 1rem;
  font-family:var(--sans); font-size:.82rem; line-height:1.55; color:var(--papel);
}
.tooltip-certeza .tooltip-titulo{
  display:block; margin-bottom:.3rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.leyenda-certeza{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  font-size:.9rem; color:var(--ivory-dim);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}

/* ---------- Cronología (encabezado de la fundación) ---------- */
.cronologia{ padding:clamp(5rem, 10vw, 8rem) 0 0; }
.cronologia-encabezado{ max-width:var(--medida); margin-inline:auto; padding:0 1.5rem 2.2rem; }

/* ---------- Capítulos ---------- */
.capitulo{ padding:clamp(4.5rem, 9vw, 7.5rem) 1.5rem; border-bottom:1px solid var(--line); }
.cita-fuente{
  font-size:.82rem; color:var(--ivory-dim);
  border-left:2px solid color-mix(in srgb, var(--gold) 40%, transparent);
  padding-left:.9rem;
  line-height:1.7;
}
figure.lamina{
  margin:2.4rem 0 0;
  border:1px solid var(--line);
  background:var(--surface);
  padding:2.2rem;
  text-align:center;
}
figure.lamina svg{ max-width:220px; height:auto; opacity:.7; }
figure.lamina figcaption{
  margin-top:1.2rem;
  font-size:.82rem; font-style:italic;
  color:var(--ivory-dim);
}
figure.lamina--foto{ padding:0; overflow:hidden; text-align:left; }
figure.lamina--foto img{ display:block; width:100%; height:auto; filter:saturate(.92); }
figure.lamina--foto figcaption{ margin-top:0; padding:1rem 1.3rem 1.2rem; }
figure.lamina--documento{ position:relative; }
figure.lamina--documento img{
  display:block; width:min(100%, 420px); height:auto;
  margin-inline:auto; border:1px solid var(--line);
}
figure.lamina--documento::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.6;
}

/* ---------- Capítulo eje (Dory / 1968 — momento editorial central) ---------- */
.capitulo--eje{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0d0b0a;
  border-top:1px solid var(--line);
  text-align:center;
  padding:clamp(6rem, 14vw, 11rem) 1.5rem;
}
.capitulo--eje::before, .capitulo--eje::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.capitulo--eje::before{ top:0; }
.capitulo--eje::after{ bottom:0; }
.capitulo--eje .contenido{
  max-width:56rem; border:0; padding:0;
}
.capitulo--eje .encabezado-cap .kicker{ justify-content:center; }
.capitulo--eje .encabezado-cap .kicker::before{ display:none; }
.eje-anio{
  font-family:var(--serif);
  font-size:clamp(5.5rem, 16vw, 12rem);
  line-height:.86; letter-spacing:-.03em;
  color:var(--ivory);
  margin:2rem 0 0;
}
.eje-lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem, 3.6vw, 2.6rem);
  line-height:1.18; color:var(--papel);
  max-width:34ch; margin:2.6rem auto 2.2rem;
}
.eje-lead .certeza{ font-style:normal; }
.eje-lead cite{
  display:block; margin-top:1.2rem;
  font-family:var(--mono); font-style:normal;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.capitulo--eje p{ max-width:58ch; margin-inline:auto; }
.capitulo--eje p + p{ margin-top:1.2rem; }
.capitulo--eje .cita-fuente{
  max-width:48ch; margin:2.2rem auto 0;
  border-left:0; border-top:1px solid var(--line); padding:1.1rem 0 0;
}

/* ---------- Interludio (Dos Guillermo Cano) ---------- */
.interludio{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.interludio .contenido{
  border:1px solid var(--line);
  outline:1px solid var(--line);
  outline-offset:6px;
  padding:2.6rem 2.2rem;
  background:var(--bg);
}
.faq{ margin-top:1.8rem; }
.faq dt{ font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.25; margin-top:1.7rem; }
.faq dd{ margin:.65rem 0 0; }

/* ---------- FE-2 · Mundo precolombino (galería museográfica) ---------- */
.fe2{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.fe2-apertura{ padding:clamp(4.5rem,9vw,7rem) 1.5rem clamp(2rem,4vw,3rem); }
.fe2-apertura .kicker{ display:block; margin-bottom:1.1rem; }
.fe2-apertura p + p{ margin-top:1.1rem; }

.galeria-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding-bottom:2.2rem;
}
.galeria-tabs button{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  background:none; cursor:pointer; min-height:44px;
  border:1px solid var(--line); color:var(--ivory-dim);
  padding:.6rem 1.2rem;
  transition:border-color .3s ease, color .3s ease;
}
.galeria-tabs button:hover{ border-color:var(--ivory-dim); color:var(--papel); }
.galeria-tabs button[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); }

.cultura{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
  max-width:80rem; margin-inline:auto;
  padding:clamp(3rem, 6vw, 5.5rem) 1.5rem;
  border-top:1px solid var(--line);
}
.js .galeria-paneles .cultura[hidden]{ display:none; }
.js .galeria-paneles .cultura{ border-top:0; padding-top:1rem; }
.cultura-figura{ margin:0; position:relative; }
.cultura-figura img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.cultura-figura figcaption{
  margin-top:.85rem;
  font-size:.74rem; font-style:italic; line-height:1.5;
  color:var(--ivory-dim);
}
.cultura-texto{ margin-inline:0; }
.cultura-texto .kicker{ display:block; margin-bottom:.7rem; }
.cultura-texto h3{ font-size:clamp(2.2rem, 4.5vw, 3.4rem); line-height:.95; margin-bottom:1.2rem; }
.cultura-ficha{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; line-height:1.9;
  color:var(--papel);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:.9rem 0; margin-bottom:1.4rem;
}
.cultura:nth-of-type(even) .cultura-figura{ order:2; }
.js .galeria-paneles .cultura:nth-of-type(even) .cultura-figura{ order:0; }
.cultura-video{ margin:1.6rem 0 0; }
.cultura-video video{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.cultura-video figcaption{ margin-top:.6rem; font-size:.8rem; color:var(--ivory-dim); }

@media (max-width:760px){
  .cultura{ grid-template-columns:1fr; gap:1.6rem; }
  .cultura:nth-of-type(even) .cultura-figura{ order:0; }
}

/* Transición suave al cambiar de cultura */
@media (prefers-reduced-motion: no-preference){
  .js .cultura.entrando{ animation:aparecer .7s ease-out both; }
}

/* ---------- FE-3 · Cera perdida (escena scroll-driven) ---------- */
.fe3{ border-bottom:1px solid var(--line); }
.fe3-apertura{ padding:clamp(4.5rem,9vw,7rem) 1.5rem clamp(1.5rem,3vw,2.5rem); }
.fe3-apertura .kicker{ display:block; margin-bottom:1.1rem; }
.fe3-diagrama{ max-width:75rem; margin-inline:auto; padding:0 1.5rem clamp(2rem,4vw,3rem); }

.cera{
  margin:0;
  display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.cera-visual{ position:sticky; top:5.5rem; display:flex; flex-direction:column; gap:1.2rem; }
.cera-lamina{
  position:relative; aspect-ratio:1/1;
  border:1px solid var(--line);
  background:linear-gradient(135deg, #16130f, #0d0b0a);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  display:grid; place-items:center;
}
.cera-svg{ width:72%; height:72%; }
.cera-molde{ transition:opacity 1s ease, stroke-dasharray 1s ease; opacity:.7; }
.cera-cera, .cera-vacio, .cera-fundido{ transition:opacity 1s ease; }
.cera-cera{ opacity:.9; }
.cera-vacio{ opacity:0; }
.cera-fundido{ opacity:0; }
.cera-grietas{ opacity:0; transition:opacity 1s ease; }
/* Estados del molde según el paso activo (main.js pone data-estado en .cera) */
.cera[data-estado="2"] .cera-cera{ opacity:0; }
.cera[data-estado="2"] .cera-vacio{ opacity:.95; }
.cera[data-estado="3"] .cera-cera, .cera[data-estado="4"] .cera-cera,
.cera[data-estado="5"] .cera-cera, .cera[data-estado="6"] .cera-cera{ opacity:0; }
.cera[data-estado="3"] .cera-fundido, .cera[data-estado="4"] .cera-fundido,
.cera[data-estado="5"] .cera-fundido, .cera[data-estado="6"] .cera-fundido{ opacity:1; }
.cera[data-estado="3"] .cera-molde, .cera[data-estado="4"] .cera-molde{ stroke-dasharray:4 4; }
.cera[data-estado="5"] .cera-molde, .cera[data-estado="6"] .cera-molde{ stroke-dasharray:4 4; opacity:.25; }
.cera[data-estado="5"] .cera-grietas, .cera[data-estado="6"] .cera-grietas{ opacity:.5; }
.cera-lamina-pie{
  position:absolute; left:1rem; right:1rem; bottom:.9rem;
  display:flex; align-items:baseline; justify-content:space-between;
}
.cera-contador{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.cera-etiqueta{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim); }
.cera-progreso{ height:1px; width:100%; background:var(--line); }
.cera-progreso-barra{
  display:block; height:100%; width:14.3%;
  background:var(--gold);
  transition:width .7s ease;
}
.cera-titulo-activo{ font-size:1.5rem; line-height:1.2; color:var(--ivory); min-height:2.2em; }
.cera-pasos{ list-style:none; }
.js .cera-pasos{ padding:12vh 0 18vh; }
.cera-paso{ max-width:34rem; }
.js .cera-paso + .cera-paso{ margin-top:38vh; }
.no-js .cera-paso + .cera-paso, html:not(.js) .cera-paso + .cera-paso{ margin-top:2.6rem; }
/* Atenuación del paso inactivo por COLOR (no por opacity) para conservar
   contraste AA (--ivory-tenue 5.2:1) también en el estado atenuado. */
.paso-kicker{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); transition:color .7s ease; }
.paso-titulo{ margin-top:.8rem; font-size:clamp(1.7rem, 3.2vw, 2.6rem); line-height:1.05; color:var(--ivory); transition:color .7s ease; }
.paso-texto{ margin-top:.9rem; color:var(--ivory-dim); max-width:46ch; transition:color .7s ease; }
.js .cera-paso:not(.activo) .paso-kicker,
.js .cera-paso:not(.activo) .paso-titulo,
.js .cera-paso:not(.activo) .paso-texto{ color:var(--ivory-tenue); }
.proceso-fuente{
  grid-column:1 / -1;
  margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.78rem; font-style:italic; color:var(--ivory-dim);
}
@media (max-width:900px){
  .cera{ grid-template-columns:1fr; }
  .cera-visual{ position:sticky; top:4.2rem; z-index:5;
    background:var(--bg); padding-bottom:.8rem; border-bottom:1px solid var(--line); }
  .cera-lamina{ aspect-ratio:auto; height:min(38vh, 20rem); }
  .cera-svg{ height:86%; width:auto; }
  .cera-titulo-activo{ display:none; }
  .js .cera-paso + .cera-paso{ margin-top:26vh; }
  .js .cera-pasos{ padding:6vh 0 10vh; }
}

/* Fallback estático sin JS: todos los pasos visibles, visual no sticky */
html:not(.js) .cera-visual{ position:static; }
html:not(.js) .cera-titulo-activo{ display:none; }

/* Video reconstrucción visual (⟁) */
.fe3-video{ max-width:75rem; margin:0 auto clamp(2.5rem,5vw,4rem); padding:0 1.5rem; }
.fe3-video video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  border:1px solid var(--line); background:var(--surface);
}
.fe3-video figcaption{
  margin-top:.9rem; max-width:62ch;
  font-size:.82rem; line-height:1.6; color:var(--ivory-dim);
}
.fe3-video figcaption strong{ color:var(--ivory); font-weight:500; }
.fe3-video-desc{ margin-top:.6rem; }
.fe3-video-desc summary{ cursor:pointer; color:var(--gold); font-size:.8rem; }
.fe3-video-desc p{ margin-top:.5rem; }
.fe3-notas{ padding-bottom:clamp(3rem,6vw,5rem); }
.fe3-notas > * + *{ margin-top:1.1rem; }
.fe3-notas strong{ color:var(--ivory); font-weight:500; }
.fe3-cierre{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--gold-suave); }

/* ---------- FE-4 · Expansión, museo y crisis ---------- */
.fe4{ border-bottom:1px solid var(--line); }
.fe4-apertura{ padding:clamp(4.5rem,9vw,7rem) 1.5rem clamp(1.5rem,3vw,2.5rem); }
.fe4-apertura .kicker{ display:block; margin-bottom:1.1rem; }
.fe4-viz{ max-width:75rem; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 1.5rem; }

/* Preguntas abiertas del museo perdido */
.museo-preguntas{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
}
.pregunta-abierta{
  position:relative;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 60%, transparent);
  padding:2rem 1.8rem 1.6rem;
  transition:border-color .4s ease;
}
.pregunta-abierta:hover{ border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
.pregunta-glifo{
  position:absolute; right:1rem; top:.4rem;
  font-family:var(--serif); font-size:3.5rem; line-height:1;
  color:color-mix(in srgb, var(--gold) 20%, transparent);
  transition:color .4s ease;
}
.pregunta-abierta:hover .pregunta-glifo{ color:color-mix(in srgb, var(--gold) 40%, transparent); }
.pregunta-abierta p{
  font-family:var(--serif); font-size:1.45rem; line-height:1.15; color:var(--papel);
  max-width:16ch;
}
.pregunta-meta{
  display:block; margin-top:1.6rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-dim);
}

/* Red de expansión (visualización abstracta propia) */
.red{ margin:0; }
.red-stats{ display:flex; flex-wrap:wrap; gap:2.5rem 3rem; border-bottom:1px solid var(--line); padding-bottom:1.6rem; }
.red-stat{ display:flex; flex-direction:column; gap:.35rem; }
.red-num{ font-family:var(--serif); font-size:clamp(3rem,7vw,5rem); line-height:.9; color:var(--gold); }
.red-lbl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); max-width:24ch; line-height:1.8; }
.red-origen{ margin-top:1.6rem; color:var(--ivory-dim); }
.red-paises{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:.9rem; }
.red-paises li{ font-family:var(--serif); font-size:1.3rem; color:var(--ivory); position:relative; padding-left:1rem; }
.red-paises li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.red-fuente{ margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.78rem; font-style:italic; color:var(--ivory-dim); }

/* Contraste financiero (cifras del auto oficial; barras animadas al entrar) */
.finanzas{ margin:0; max-width:52rem; }
.finanza{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.4rem 1rem; padding:1.1rem 0; }
.finanza-lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim); }
.finanza-val{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.4rem); color:var(--ivory); text-align:right; white-space:nowrap; line-height:1; }
.finanza-unidad{ font-size:.32em; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); white-space:nowrap; }
.finanza-barra{
  grid-column:1 / -1; height:3px; background:var(--ivory-dim); opacity:.75;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.finanza:nth-of-type(2) .finanza-barra{ background:var(--terracota-prof); opacity:1; transition-delay:.2s; }
.visible .finanza-barra, html:not(.js) .finanza-barra{ transform:scaleX(1); }
.finanza:nth-of-type(2) .finanza-lbl{ color:var(--terracota); }
.finanza:nth-of-type(2) .finanza-val{ color:var(--terracota); }
.finanza--resultado{ border-top:1px solid var(--line); margin-top:.4rem; padding-top:1.4rem; }
.finanza-val--neg{ color:var(--gold); }
.finanzas-nota{ margin-top:1.5rem; color:var(--ivory-dim); font-size:.95rem; max-width:54ch; }
.finanzas-fuente{ margin-top:1rem; font-size:.78rem; font-style:italic; color:var(--ivory-dim); }

/* ---------- FE-5 · Continuidad y presente ---------- */
.fe5{ border-bottom:1px solid var(--line); }
.fe5-apertura{ padding:clamp(4.5rem,9vw,7rem) 1.5rem clamp(1.5rem,3vw,2.5rem); }
.fe5-apertura .kicker{ display:block; margin-bottom:1.1rem; }
.fe5-viz{ max-width:52rem; margin:2.8rem auto 0; }

/* Matriz de continuidad — las cinco continuidades, siempre visibles */
.matriz-intro{ color:var(--ivory-dim); font-size:.95rem; max-width:54ch; margin-bottom:1.6rem; }
.matriz{ border-top:1px solid var(--line); }
.matriz-cab{
  display:grid; grid-template-columns:minmax(0,14rem) 1fr; gap:1rem 2rem;
  padding:.9rem 0;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-dim); border-bottom:1px solid var(--line);
}
.matriz-fila{
  display:grid; grid-template-columns:minmax(0,14rem) 1fr; gap:.6rem 2rem;
  padding:1.7rem 0; border-bottom:1px solid var(--line); align-items:start;
  transition:background .4s ease;
}
.matriz-nombre{ display:block; font-family:var(--serif); font-size:1.4rem; color:var(--ivory); line-height:1.1; }
.matriz-pregunta{ display:block; margin-top:.45rem; font-style:italic; font-size:.9rem; color:var(--ivory-dim); }
.matriz-etiqueta{
  display:inline-block;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory-dim); border:1px solid var(--line); border-radius:2px; padding:.3rem .7rem;
}
.matriz-etiqueta--sin_evidencia{ color:var(--gold); border-color:var(--gold); }
.matriz-texto{ margin-top:.8rem; color:var(--ivory-dim); font-size:.95rem; max-width:60ch; }
.matriz-fila--vacio{ background:var(--surface); border-left:3px solid var(--gold); padding-left:1.2rem; margin-left:-1.2rem; }
.matriz-fila--vacio .matriz-texto{ color:var(--ivory); }

/* Cronología de cierre — secuencia sobria 2016–2025 */
.cierre-cronologia-wrap{ margin:2.8rem 0 0; text-align:left; }
.cierre-cronologia{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.cierre-hito{ position:relative; padding:0 0 1.8rem 1.8rem; }
.cierre-hito:last-child{ padding-bottom:0; }
.cierre-hito::before{
  content:""; position:absolute; left:-4px; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--gold);
}
.cierre-anio{ display:block; font-family:var(--serif); font-size:1.7rem; color:var(--gold); line-height:1; }
.cierre-tipo{ display:block; margin-top:.35rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); }
.cierre-rotulo{ display:block; margin-top:.35rem; color:var(--ivory); font-size:.98rem; max-width:48ch; }
.fe5-cierre-firma{
  margin-top:2rem; font-family:var(--serif); font-style:italic;
  font-size:1.25rem; color:var(--gold-suave);
}
/* El capítulo de cierre reutiliza .capitulo--eje pero con lectura alineada a la izquierda */
#cap-cierre{ text-align:left; }
#cap-cierre .encabezado-cap .kicker{ justify-content:flex-start; }
#cap-cierre p, #cap-cierre .cita-fuente{ margin-inline:0; }

@media (max-width:640px){
  .matriz-cab{ display:none; }
  .matriz-fila{ grid-template-columns:1fr; gap:.5rem; }
  .matriz-fila--vacio{ margin-left:0; }
}

/* ---------- Método y fuentes / Footer ---------- */
.metodo{ border-bottom:1px solid var(--line); background:color-mix(in srgb, #0d0b0a 60%, var(--bg)); }
.fuentes-lista{ list-style:none; margin-top:1.6rem; font-size:.9rem; }
.fuentes-lista li{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem; align-items:baseline;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.fuentes-lista .src-id{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--gold); min-width:5rem; }
.fuentes-lista li > span:nth-child(2){ flex:1 1 24ch; }
.fuentes-lista .conf{
  margin-left:auto; white-space:nowrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory-dim);
}

footer{
  padding:4rem 1.5rem 4.5rem;
  font-size:.85rem;
  color:var(--ivory-dim);
  border-top:1px solid var(--line);
}
footer .contenido > * + *{ margin-top:.9rem; }
footer .contenido::before{
  content:"« ¿Qué sobrevivió realmente: la empresa, la familia, la marca o la historia? »";
  display:block; margin-bottom:2rem;
  font-family:var(--serif); font-style:italic;
  font-size:1.3rem; line-height:1.35; color:var(--gold-suave);
}

/* Texto pendiente de redacción — visualmente declarado como no final */
.pendiente{
  border:1px dashed var(--line);
  background:var(--surface);
  padding:1.1rem 1.3rem;
  font-size:.92rem;
  color:var(--ivory-dim);
}
.pendiente .etiqueta{
  display:block;
  font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.45rem;
}

/* ---------- Aparición al hacer scroll (respeta reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .revelar{ opacity:0; transform:translateY(22px); transition:opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.2,1); }
  .js .revelar.visible{ opacity:1; transform:none; }
}

/* ---------- Reduced motion global ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .finanza-barra{ transform:scaleX(1); }
  .hero-figura img{ opacity:.62; }
}