/* ————— Camino a Casa · landing —————
   Diseño "Vela y Noche", mobile-first.
   Las capas de animación (móvil y escritorio) se suman encima en los pasos 3 y 4. */

/* ————— Fuentes propias (sin Google Fonts: más rápido y sin enviar datos a terceros) —————
   Archivos variables, solo juego latino (incluye tildes, ñ, ¿¡, «», —, …, €) */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:500 600; font-display:swap;
  src:url("../assets/fuentes/cormorant.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:400 500; font-display:swap;
  src:url("../assets/fuentes/cormorant-italica.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../assets/fuentes/inter.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Paleta del libro */
  --abismo:#070b14;
  --tinta:#0b1220;
  --noche:#0d1526;
  --noche-2:#131f36;
  --noche-3:#1c2a47;
  --oro:#c9973f;
  --oro-claro:#e2bd76;
  --oro-palido:#f0d9a8;
  --crema:#f2e8d5;
  --crema-suave:#cfc4ae;
  --crema-tenue:rgba(207,196,174,.72);
  --linea:rgba(201,151,63,.28);
  --resplandor:rgba(226,189,118,.5);

  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --gutter:clamp(1.25rem,5vw,2.5rem);
  --ancho:72rem;
  --ancho-estrecho:44rem;
  --seccion:clamp(5rem,14vw,9rem);
  --cabecera:4rem;
  --curva:cubic-bezier(.22,.61,.36,1);

  /* Grano de papel oscuro (ruido SVG, se repite en mosaico) */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Separador: línea · vela · línea */
  --ornamento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23c9973f' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c9973f' stop-opacity='.75'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23c9973f' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c9973f' stop-opacity='.75'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23e2bd76' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23e2bd76' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='0' y='25' width='80' height='1' fill='url(%23a)'/%3E%3Crect x='120' y='25' width='80' height='1' fill='url(%23b)'/%3E%3Ccircle cx='100' cy='15' r='15' fill='url(%23g)'/%3E%3Cpath d='M100 5c3 4 5 7 5 10a5 5 0 0 1-10 0c0-3 2-6 5-10z' fill='%23f0d9a8'/%3E%3Crect x='98' y='21' width='4' height='11' rx='1' fill='%23e8dcc0'/%3E%3C/svg%3E");
  /* Hilo de humo ondulado */
  --humo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='44' viewBox='0 0 14 44'%3E%3Cpath d='M7 44c-5-6 5-10 0-16s5-10 0-16 3-8 0-12' fill='none' stroke='%23cfc4ae' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ————— Reset ————— */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-padding-top:var(--cabecera);
  /* De la noche a la luz: el fondo se entibia muy despacio hacia el final de la página */
  background:linear-gradient(180deg,var(--abismo) 0%,var(--tinta) 18%,#0c1424 45%,#0f182b 72%,#141b2c 90%,#171c28 100%);
  background-color:var(--abismo);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; min-height:100vh; background:transparent; color:var(--crema);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Grano: capa fija, sin mezcla de modos para no costar al hacer scroll */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:var(--grano); background-size:180px; opacity:.045;
}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
a{color:var(--oro-claro);text-underline-offset:.2em}
em{font-style:italic}
::selection{background:rgba(226,189,118,.35);color:var(--crema)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:4px}

.solo-lector{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:fixed; left:1rem; top:-4rem; z-index:100;
  background:var(--oro); color:var(--abismo); padding:.7rem 1.1rem; border-radius:6px;
  font-weight:600; text-decoration:none;
}
.saltar:focus{top:1rem}

/* ————— Maquetación ————— */
.contenedor{width:100%;max-width:calc(var(--ancho) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.contenedor--estrecho{max-width:calc(var(--ancho-estrecho) + 2 * var(--gutter))}
.seccion{position:relative;padding-block:var(--seccion)}
/* Separador con vela entre secciones */
.gancho::before,.autora::before,.vista::before,.faq::before{
  content:""; position:absolute; top:0; left:50%; width:200px; height:36px; margin:-18px 0 0 -100px;
  background:var(--ornamento) center/contain no-repeat;
}
.seccion__cabecera{text-align:center;margin-bottom:clamp(2.5rem,7vw,4.5rem)}
.seccion__cabecera h2{font-size:clamp(2.3rem,8.5vw,3.6rem)}
.seccion__intro{
  margin:1.1rem auto 0; max-width:32rem;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,4.4vw,1.4rem);
  line-height:1.5; color:var(--crema-suave);
}
.antetitulo{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--oro);
  margin:0 0 1.1rem;
}

/* ————— Botones ————— */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3.5rem; padding:.95rem 1.8rem;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; text-align:center; line-height:1.2; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn--principal{
  width:100%;
  background:linear-gradient(180deg,#f1d494 0%,var(--oro-claro) 38%,var(--oro) 100%);
  color:#1b1307;
  box-shadow:0 0 0 1px rgba(240,217,168,.4) inset, 0 1px 0 rgba(255,246,216,.6) inset;
}
/* Halo de vela detrás del botón (en el paso 3 "respira") */
.btn--principal::before{
  content:""; position:absolute; z-index:-1; inset:-40% -12%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(226,189,118,.55),rgba(226,189,118,.18) 55%,rgba(226,189,118,0));
  opacity:.8; pointer-events:none;
}
.btn--linea{border-color:rgba(201,151,63,.55);color:var(--oro-claro);background:rgba(13,21,38,.35)}
.btn--sm{min-height:2.75rem;padding:.55rem 1.1rem;font-size:.82rem;font-weight:500}

/* ————— Cabecera ————— */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--cabecera);
  display:flex; align-items:center;
}
/* Fondo que aparece al bajar (la clase la pone main.js); solo se anima su opacidad */
.cabecera::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,rgba(7,11,20,.96),rgba(9,14,26,.9));
  border-bottom:1px solid rgba(201,151,63,.14);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  opacity:0; transition:opacity .45s var(--curva);
}
.cabecera.con-fondo::before{opacity:1}
.cabecera__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cabecera__marca{
  font-family:var(--serif); font-size:1.3rem; font-weight:500; color:var(--crema);
  text-decoration:none; white-space:nowrap;
}

/* ————— Assets ambiente (imagen fija + video opcional encima) ————— */
.ambient{position:absolute;inset:0;overflow:hidden}
.ambient > img,.ambient > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ambient > video{opacity:0;transition:opacity 1.4s var(--curva)}
.ambient > video.is-listo{opacity:1}

/* ————— 1 · Hero ————— */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--cabecera) + 1.5rem) 0 3.5rem;
}
.hero__fondo{position:absolute;inset:0;z-index:-1}
.hero__fondo .ambient > img,.hero__fondo .ambient > video{object-position:50% 100%;opacity:.85}
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(7,11,20,.6) 0%,rgba(7,11,20,0) 28%,rgba(7,11,20,0) 72%,var(--tinta) 100%);
}
.hero__inner{display:grid;gap:1.25rem}
.hero__cabeza{position:relative;z-index:1;text-align:center}
/* Resplandor cálido detrás del título */
.hero__cabeza::before{
  content:""; position:absolute; z-index:-1; left:50%; top:1.5rem; width:130%; height:12rem;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side,rgba(226,189,118,.16),rgba(226,189,118,0));
  pointer-events:none;
}
.hero .antetitulo{letter-spacing:.2em;font-size:.68rem}
.hero__titulo{
  font-size:clamp(3.1rem,14vw,7rem); font-weight:500; line-height:.92;
  letter-spacing:-.015em; color:var(--crema); margin-bottom:1.1rem;
  text-shadow:0 0 42px rgba(226,189,118,.22);
}
.hero__sub{
  font-family:var(--serif); font-size:clamp(1.14rem,4.3vw,1.5rem); line-height:1.5;
  color:var(--crema-suave); max-width:34rem; margin-inline:auto;
}
.hero__visual{
  position:relative; margin:-.5rem calc(var(--gutter) * -1) -1.5rem;
  aspect-ratio:1/1; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%);
}
.hero__visual > img,.hero__visual > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:30% 52%; transform:scale(1.18); transform-origin:34% 50%;
}
.hero__visual > video{opacity:0;transition:opacity 1.4s var(--curva)}
.hero__visual > video.is-listo{opacity:1}
.hero__compra{position:relative;z-index:1}

/* ————— Bloque de compra ————— */
.compra{display:grid;gap:.9rem;justify-items:center;text-align:center}
.precio{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25rem .7rem}
.precio__valor{
  font-family:var(--serif); font-size:2.4rem; font-weight:600; line-height:1; color:var(--oro-claro);
  text-shadow:0 0 24px rgba(226,189,118,.3);
}
.precio__antes{font-family:var(--serif);font-size:1.4rem;color:var(--crema-tenue);text-decoration:line-through;text-decoration-thickness:1px}
.precio__nota{flex-basis:100%;font-size:.82rem;color:var(--crema-tenue);letter-spacing:.02em}
.compra__confianza{margin:0;font-size:.8rem;color:var(--crema-tenue)}

/* ————— 2 · Gancho ————— */
.gancho{text-align:center;overflow:hidden}
/* Una luz lejana detrás de la frase */
.gancho::after{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(60rem,140vw); height:34rem;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side,rgba(226,189,118,.09),rgba(226,189,118,0));
  pointer-events:none;
}
.gancho{isolation:isolate}
.gancho__pregunta{
  font-size:clamp(1.9rem,7vw,2.8rem); font-style:italic; font-weight:500;
  color:var(--crema); margin-bottom:clamp(2.5rem,8vw,4rem);
}
.frase-luz{
  font-family:var(--serif); font-size:clamp(2.1rem,8.6vw,4.2rem); line-height:1.15;
  color:var(--oro-claro); text-wrap:balance; margin:0 0 clamp(2.5rem,8vw,4rem);
  text-shadow:0 0 38px rgba(226,189,118,.28);
}
.gancho__texto{
  font-family:var(--serif); font-size:clamp(1.2rem,4.4vw,1.45rem); line-height:1.6;
  color:var(--crema-suave); max-width:36rem; margin-inline:auto;
}
.gancho__texto em{color:var(--crema)}

/* ————— 3 · Qué vas a encontrar ————— */
.cifras{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  max-width:34rem; margin:0 auto 1.2rem; text-align:center;
}
.cifra{
  display:grid; gap:.25rem; padding:1.1rem .25rem;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.cifra__num{
  font-family:var(--serif); font-size:clamp(2.6rem,11vw,3.6rem); font-weight:500; line-height:1;
  color:var(--oro-claro); font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 0 26px rgba(226,189,118,.3);
}
.cifra__txt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crema-tenue);line-height:1.35}
.viaje__ritmo{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--crema-suave);margin:0 auto clamp(3rem,9vw,5rem)}

/* El camino: una línea que va de la noche a la luz y une las tres velas */
.partes{position:relative;display:grid;gap:clamp(3rem,10vw,4.5rem)}
.partes::before{
  content:""; position:absolute; top:2rem; bottom:2rem; left:1.75rem; width:1px;
  background:linear-gradient(to bottom,rgba(201,151,63,.06),rgba(201,151,63,.35) 50%,var(--oro-claro));
}
.parte{position:relative;display:grid;grid-template-columns:3.5rem 1fr;gap:1.1rem}
.parte__marca{
  position:relative; z-index:1; display:grid; place-items:end center;
  width:3.5rem; height:5rem; padding-bottom:.4rem;
  background:radial-gradient(closest-side,#0c1424 70%,rgba(12,20,36,0));
}
.parte__num{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem}
.parte__num span{color:var(--crema-tenue);letter-spacing:.08em;text-transform:none}
.parte__titulo{font-size:clamp(2.1rem,8vw,2.8rem);margin-bottom:1rem}
.parte[data-tramo="luz"] .parte__titulo{color:var(--oro-palido);text-shadow:0 0 30px rgba(226,189,118,.25)}
.parte__epigrafe{
  font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1.5;
  color:var(--crema); border-left:1px solid var(--oro); padding-left:1rem; margin-bottom:1.1rem;
}
.parte__texto > p{color:var(--crema-suave)}
.parte__caps{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.parte__caps li{
  font-size:.78rem; color:var(--crema-suave); line-height:1.3;
  border:1px solid var(--linea); border-radius:999px; padding:.4rem .75rem;
  background:rgba(13,21,38,.5);
}
.viaje__cierre{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--crema-tenue);margin:clamp(3rem,9vw,4.5rem) 0 0}

.llevas{
  position:relative; isolation:isolate;
  margin:clamp(4rem,12vw,6rem) auto 0; max-width:40rem;
  padding:clamp(2.2rem,7vw,3.2rem) clamp(1.4rem,6vw,3rem);
  border:1px solid var(--linea); border-radius:8px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%,rgba(226,189,118,.12),rgba(226,189,118,0)),
    linear-gradient(180deg,rgba(19,31,54,.75),rgba(11,18,32,.55));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  display:grid; gap:1.6rem;
}
.llevas__titulo{font-size:clamp(1.9rem,7vw,2.5rem);text-align:center}
.llevas .btn{justify-self:center}

/* Lista con pequeña llama como viñeta */
.lista-vela{display:grid;gap:.95rem}
.lista-vela li{position:relative;padding-left:1.9rem;color:var(--crema)}
.lista-vela li::before{
  content:""; position:absolute; left:.3rem; top:.42em;
  width:.62rem; height:.9rem; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 78%,#fff6d8 0 22%,var(--oro-claro) 48%,var(--oro) 70%,transparent 72%);
  box-shadow:0 0 12px rgba(226,189,118,.45);
}

/* ————— Vela dibujada en CSS (motivo recurrente) ————— */
.vela{position:relative;display:block;width:1rem;height:4.2rem}
.vela::before{ /* halo */
  content:""; position:absolute; left:50%; top:-.6rem; width:5rem; height:5rem; margin-left:-2.5rem;
  border-radius:50%; background:radial-gradient(closest-side,rgba(226,189,118,.5),rgba(226,189,118,0));
  opacity:0;
}
.vela__cuerpo{
  position:absolute; left:0; bottom:0; width:1rem; height:2.5rem; border-radius:3px 3px 2px 2px;
  background:linear-gradient(90deg,#a8966f 0%,#efe3c6 42%,#d9c8a2 70%,#9d8b66 100%);
}
.vela__cuerpo::after{ /* mecha */
  content:""; position:absolute; left:50%; top:-.35rem; width:2px; height:.4rem; margin-left:-1px;
  background:#2a2016; border-radius:1px;
}
.vela__llama{
  position:absolute; left:50%; bottom:2.62rem; width:.72rem; height:1.3rem; margin-left:-.36rem;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 80%,#fffbe9 0 20%,#f7d37e 42%,#e39a3b 66%,rgba(227,154,59,0) 72%);
  transform-origin:50% 90%;
}
.vela__humo{
  position:absolute; left:50%; bottom:2.8rem; width:14px; height:44px; margin-left:-7px;
  background:var(--humo) center bottom/contain no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);
          mask-image:linear-gradient(to top,#000 30%,transparent);
  opacity:0;
}
/* apagada → humo; brasa → una chispa roja en la mecha; encendida → llama y halo */
.vela[data-vela="apagada"] .vela__llama{opacity:0}
.vela[data-vela="apagada"] .vela__humo{opacity:.8}
.vela[data-vela="apagada"] .vela__cuerpo{filter:brightness(.5) saturate(.7)}
.vela[data-vela="brasa"] .vela__llama{
  width:.34rem; height:.34rem; margin-left:-.17rem; bottom:2.55rem; border-radius:50%;
  background:radial-gradient(circle,#ffd29a 0 25%,#e0662b 60%,rgba(224,102,43,0) 72%);
}
.vela[data-vela="brasa"] .vela__humo{opacity:.35}
.vela[data-vela="brasa"]::before{opacity:.28;transform:scale(.6)}
.vela[data-vela="brasa"] .vela__cuerpo{filter:brightness(.72)}
.vela[data-vela="encendida"]::before{opacity:1}
.vela[data-vela="encendida"] .vela__llama{filter:drop-shadow(0 0 6px rgba(247,211,126,.9))}

/* ————— 4 · Autora ————— */
.autora__grid{display:grid;gap:2.5rem;align-items:center}
.autora__foto{
  position:relative; width:min(72%,19rem); margin-inline:auto; aspect-ratio:3/4;
  border-radius:999px 999px 6px 6px; overflow:hidden;
  border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--noche-2),var(--tinta));
  box-shadow:0 0 0 6px rgba(11,18,32,.9), 0 0 0 7px rgba(201,151,63,.18), 0 30px 70px -30px rgba(226,189,118,.25);
}
/* Ventana con vela (Higgsfield): imagen fija en móvil; en escritorio, su video en loop encima */
.autora__foto > img,.autora__foto > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.autora__foto > video{opacity:0;transition:opacity 1.4s var(--curva)}
.autora__foto > video.is-listo{opacity:1}
/* Sin foto: una ventana en arco, de noche, con una vela encendida en el alféizar */
.autora__foto:not(.tiene-imagen){
  display:grid; place-items:end center; padding-bottom:16%;
  background:
    radial-gradient(ellipse 75% 42% at 50% 100%,rgba(226,189,118,.3),rgba(226,189,118,0) 72%),
    radial-gradient(circle at 30% 22%,rgba(242,232,213,.5) 0 1px,transparent 1.5px),
    radial-gradient(circle at 68% 14%,rgba(242,232,213,.4) 0 1px,transparent 1.5px),
    radial-gradient(circle at 58% 34%,rgba(242,232,213,.3) 0 1px,transparent 1.5px),
    linear-gradient(180deg,#081020 0%,var(--noche-2) 62%,#1b1a1f 100%);
}
.autora__foto:not(.tiene-imagen)::before{ /* parteluces de la ventana */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(201,151,63,.22) calc(50% - .5px),rgba(201,151,63,.22) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(36% - .5px),rgba(201,151,63,.22) calc(36% - .5px),rgba(201,151,63,.22) calc(36% + .5px),transparent calc(36% + .5px));
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 50%);
          mask-image:linear-gradient(to bottom,#000 30%,transparent 50%);
}
.autora__vela{transform:scale(2.3);transform-origin:50% 100%}
.autora__foto.tiene-imagen .autora__vela{display:none}
.autora__texto h2{font-size:clamp(2.1rem,8vw,3rem);margin-bottom:1.4rem}
.autora__texto > p{color:var(--crema-suave)}
.autora__cita{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,5vw,1.65rem); line-height:1.45;
  color:var(--oro-palido); margin:1.8rem 0; padding-left:1.1rem; border-left:1px solid var(--oro);
}
.redes{display:flex;flex-wrap:wrap;gap:.75rem}
.redes__link{
  display:inline-flex; align-items:center; min-height:2.9rem; padding:.55rem 1.1rem;
  border:1px solid var(--linea); border-radius:999px; background:rgba(13,21,38,.5);
  color:var(--crema); text-decoration:none; font-size:.92rem;
}
.redes__link::before{
  content:""; width:1rem; height:1rem; margin-right:.6rem; border-radius:.3rem;
  border:1.5px solid var(--oro-claro);
  background:radial-gradient(circle at 50% 50%,transparent 0 .2rem,var(--oro-claro) .2rem .29rem,transparent .3rem);
}

/* ————— 5 · Vista previa ————— */
.paginas{
  display:grid; grid-auto-flow:column; grid-auto-columns:76%; gap:1rem;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  margin-inline:calc(var(--gutter) * -1); padding:1rem var(--gutter) 1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--linea) transparent;
}
.paginas > li{scroll-snap-align:center}
.pagina{
  position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:4px;
  background:
    radial-gradient(ellipse 90% 45% at 50% 100%,rgba(226,189,118,.13),rgba(226,189,118,0)),
    linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 55%,var(--tinta) 100%);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(201,151,63,.16);
}
.pagina::before{ /* filete dorado, como en la portada */
  content:""; position:absolute; inset:7%; border:1px solid rgba(201,151,63,.42); pointer-events:none;
}
.pagina::after{ /* grano de papel */
  content:""; position:absolute; inset:0; background-image:var(--grano); background-size:140px; opacity:.07; pointer-events:none;
}
.pagina > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagina__texto{
  position:absolute; inset:7%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:12% 10%; text-align:center;
}
.pagina__kicker{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);margin-bottom:.8rem}
.pagina__titulo{font-family:var(--serif);font-size:clamp(1.5rem,6vw,1.9rem);line-height:1.1;color:var(--crema);margin-bottom:1rem}
.pagina__lead{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--crema-suave)}
/* Con la página real del libro: sin filete ni grano; el texto del capítulo queda en su franja oscura inferior */
.pagina.tiene-imagen::before,.pagina.tiene-imagen::after{display:none}
.pagina.tiene-imagen .pagina__texto{inset:auto 0 0;padding:0 9% 12%}

/* Tráiler: horizontal en pantallas anchas, vertical en móvil (solo se reproduce al tocarlo) */
.trailer{margin:0 auto clamp(3.5rem,9vw,5rem);max-width:56rem}
.trailer__marco{
  position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--abismo);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(201,151,63,.25);
}
.trailer--vertical .trailer__marco{aspect-ratio:9/16;width:min(100%,calc(78vh * 9 / 16));margin-inline:auto}
.trailer__marco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--abismo)}
.trailer__play{
  position:absolute; z-index:2; left:50%; top:50%; width:5rem; height:5rem; margin:-2.5rem 0 0 -2.5rem;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid rgba(240,217,168,.65); background:rgba(7,11,20,.55);
  box-shadow:0 0 40px rgba(226,189,118,.35);
  transition:opacity .4s var(--curva),transform .2s var(--curva);
}
.trailer__play::before{
  content:""; margin-left:.35rem;
  border-left:1.35rem solid var(--oro-claro); border-top:.85rem solid transparent; border-bottom:.85rem solid transparent;
}
.trailer__play:active{transform:scale(.94)}
.trailer.reproduciendo .trailer__play{opacity:0;pointer-events:none}

/* ————— 6 · Testimonios ————— */
.testimonios__lista{display:grid;gap:1.2rem}
.testimonio{
  height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
  padding:2rem 1.6rem 1.6rem; border:1px solid var(--linea); border-radius:8px;
  background:linear-gradient(180deg,rgba(19,31,54,.6),rgba(13,21,38,.35));
}
.testimonio blockquote{position:relative;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--crema)}
.testimonio blockquote::before{
  content:"“"; display:block; font-family:var(--serif); font-size:3.4rem; line-height:.6;
  color:var(--oro); margin-bottom:.6rem; text-shadow:0 0 18px rgba(226,189,118,.4);
}
.testimonio figcaption{font-size:.82rem;color:var(--crema-tenue)}
.testimonio__nombre{color:var(--oro-claro);font-weight:500}
[data-placeholder] .testimonio{border-style:dashed}

/* ————— 7 · Oferta ————— */
/* La vela ocupa la franja inferior de la sección: la frase de cierre queda justo sobre la llama */
.oferta{
  --vela-h:36rem;
  isolation:isolate; overflow:hidden;
  padding-bottom:calc(var(--vela-h) * .5);
}
.oferta__fondo{position:absolute;left:0;right:0;bottom:0;height:var(--vela-h);z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 84%,transparent 100%);
}
.oferta__fondo .ambient > img,.oferta__fondo .ambient > video{object-position:50% 62%}
.oferta .seccion__cabecera h2 em{color:var(--oro-claro)}
.oferta__tarjeta{
  position:relative; display:grid; gap:1.5rem;
  padding:clamp(2.4rem,7vw,3.4rem) clamp(1.3rem,6vw,3rem) clamp(1.8rem,6vw,3rem);
  border:1px solid rgba(201,151,63,.38); border-radius:10px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(226,189,118,.10),rgba(226,189,118,0)),
    linear-gradient(180deg,rgba(19,31,54,.96),rgba(11,18,32,.94));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(7,11,20,.6);
}
/* Pequeña llama coronando la tarjeta */
.oferta__tarjeta::before{
  content:""; position:absolute; left:50%; top:0; width:200px; height:36px; margin:-18px 0 0 -100px;
  background:var(--ornamento) center/contain no-repeat;
}
.oferta__desc{font-family:var(--serif);font-size:clamp(1.18rem,4.3vw,1.35rem);line-height:1.6;color:var(--crema-suave)}
.oferta__subtitulo{font-size:1.6rem;color:var(--crema)}
.compra--final{padding-top:1.6rem;border-top:1px solid var(--linea)}
.precio--grande .precio__valor{font-size:3rem}
.garantias{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;font-size:.8rem;color:var(--crema-tenue)}
.garantias li{position:relative;padding-left:1rem}
.garantias li::before{content:"✦";position:absolute;left:0;top:0;font-size:.6rem;line-height:2.1;color:var(--oro)}
.frase-cierre{
  margin:clamp(3.5rem,10vw,5rem) auto 0; max-width:32rem; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,6.4vw,2.3rem); line-height:1.35;
  color:var(--oro-palido); text-shadow:0 0 30px rgba(226,189,118,.35), 0 2px 12px rgba(7,11,20,.9);
}

/* ————— 8 · FAQ ————— */
.faq__lista{border-top:1px solid var(--linea)}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:3.75rem; padding:1.1rem 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.25rem,4.6vw,1.45rem); font-weight:500; line-height:1.3; color:var(--crema);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+"; flex:none; display:grid; place-items:center; width:2rem; height:2rem;
  border:1px solid var(--linea); border-radius:50%;
  font-family:var(--sans); font-size:1.1rem; font-weight:400; color:var(--oro-claro);
}
.faq__item[open] summary{color:var(--oro-palido)}
.faq__item[open] summary::after{content:"−"}
.faq__resp{padding:0 0 1.4rem;color:var(--crema-suave)}
.faq__mas{margin-top:2.5rem;text-align:center;color:var(--crema-tenue);font-size:.95rem}

/* ————— Pie ————— */
.pie{
  padding:4rem 0 3rem; text-align:center;
  border-top:1px solid rgba(201,151,63,.16);
  background:linear-gradient(180deg,rgba(7,11,20,.2),rgba(7,11,20,.75));
}
.pie__inner{display:grid;gap:1rem;justify-items:center}
.pie__marca{font-family:var(--serif);font-size:1.7rem;color:var(--crema);margin:0}
.pie__lema{font-family:var(--serif);font-style:italic;color:var(--crema-suave);margin:0}
.redes--pie{justify-content:center;margin:.6rem 0}
.pie__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;font-size:.85rem}
.pie__legal a{color:var(--crema-tenue)}
.pie__copy,.pie__hotmart{font-size:.78rem;color:rgba(207,196,174,.6);margin:0}

/* ═════════════ Tablet ═════════════ */
@media (min-width:640px){
  .btn--principal{width:auto;min-width:20rem}
  .testimonios__lista{grid-template-columns:repeat(2,1fr)}
  .paginas{grid-auto-columns:44%}
  .hero__visual{aspect-ratio:5/4;margin-inline:0}
  .oferta{--vela-h:46rem}
}

/* ═════════════ Escritorio (≥1024px) ═════════════ */
@media (min-width:1024px){
  :root{--cabecera:4.5rem}

  /* El mockup ocupa la mitad izquierda a sangre (sin bordes a la vista) y su lado vacío,
     la cortina, se funde con la noche por debajo del texto. */
  .hero{min-height:100vh;display:flex;align-items:center;padding:calc(var(--cabecera) + 1.5rem) 0 3.5rem}
  .hero__inner{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-areas:". cabeza" ". compra";
    align-items:end; column-gap:clamp(2rem,4vw,4rem); row-gap:2.4rem;
  }
  .hero__cabeza{grid-area:cabeza;text-align:left}
  .hero__cabeza::before{left:40%;top:3rem;width:120%;height:16rem}
  .hero .antetitulo{letter-spacing:.26em;font-size:.72rem}
  .hero__titulo{margin-bottom:1.4rem}
  .hero__sub{margin-inline:0}
  .hero__compra{grid-area:compra;justify-items:start;text-align:left;align-self:start}
  .hero__compra .precio{justify-content:flex-start}
  .hero__visual{
    position:absolute; top:0; bottom:0; left:0; width:52vw; margin:0; aspect-ratio:auto; z-index:0;
    -webkit-mask-image:radial-gradient(ellipse 100% 95% at 0% 42%,#000 58%,transparent 100%);
            mask-image:radial-gradient(ellipse 100% 95% at 0% 42%,#000 58%,transparent 100%);
  }
  .hero__visual > img,.hero__visual > video{transform:none;object-position:0% 45%}

  .partes{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .partes::before{
    top:2.9rem; bottom:auto; left:1.75rem; right:1.75rem; width:auto; height:1px;
    background:linear-gradient(to right,rgba(201,151,63,.06),rgba(201,151,63,.35) 50%,var(--oro-claro));
  }
  .parte{grid-template-columns:1fr;gap:1.4rem}

  .autora__grid{grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,7vw,6rem)}
  .autora__foto{width:100%;max-width:24rem}

  .paginas{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0;gap:clamp(1.5rem,3vw,2.5rem)}
  .paginas > li:nth-child(2){transform:translateY(2.5rem)}

  .testimonios__lista{grid-template-columns:repeat(3,1fr)}

  .oferta{--vela-h:56.25vw}
}

/* ═════════════ Capa de animación base (paso 3) ═════════════
   Solo transform y opacity. Todo cuelga de .js-anim, que no existe con "reducir movimiento". */

/* Aparición al hacer scroll (mismo listado que animaciones.js) */
.js-anim :is(.hero__cabeza > :not(.hero__titulo),.hero__visual,.hero__compra,.seccion__cabecera > *,.gancho__pregunta,.frase-luz,.gancho__texto,
  .cifra,.viaje__ritmo,.parte,.viaje__cierre,.llevas,.lista-vela > li,.autora__foto,.autora__texto > *,.pagina,
  .testimonios__lista > li,.oferta__tarjeta,.frase-cierre,.faq__item,.faq__mas){
  transition:opacity .9s var(--curva),transform .9s var(--curva);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-anim :is(.hero__cabeza > :not(.hero__titulo),.hero__visual,.hero__compra,.seccion__cabecera > *,.gancho__pregunta,.frase-luz,.gancho__texto,
  .cifra,.viaje__ritmo,.parte,.viaje__cierre,.llevas,.lista-vela > li,.autora__foto,.autora__texto > *,.pagina,
  .testimonios__lista > li,.oferta__tarjeta,.frase-cierre,.faq__item,.faq__mas):not(.visible){
  opacity:0; transform:translate3d(0,1.6rem,0);
}
/* La frase de cierre y la frase-luz "se encienden": suben menos y tardan más */
.js-anim :is(.frase-luz,.frase-cierre){transition-duration:1.6s}
.js-anim :is(.frase-luz,.frase-cierre):not(.visible){transform:translate3d(0,.6rem,0)}

/* Mecha de progreso: se llena de oro con el scroll y una llamita marca el avance */
.mecha{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;background:rgba(201,151,63,.1)}
.mecha__relleno{
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,rgba(201,151,63,.35),var(--oro-claro));
  box-shadow:0 0 8px rgba(226,189,118,.6);
}
.mecha__llama{
  position:absolute; top:-7px; left:-5px; width:10px; height:13px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 80%,#fffbe9 0 20%,#f7d37e 45%,#e39a3b 68%,rgba(227,154,59,0) 72%);
  filter:drop-shadow(0 0 5px rgba(247,211,126,.9));
  opacity:0; transition:opacity .4s;
}
.mecha.encendida .mecha__llama{opacity:1}

/* Rótulo de la sección actual, bajo la cabecera */
.rotulo{
  position:fixed; top:var(--cabecera); left:0; right:0; z-index:49; display:flex; justify-content:center;
  pointer-events:none; opacity:0; transform:translate3d(0,-.5rem,0);
  transition:opacity .4s var(--curva),transform .4s var(--curva);
}
.rotulo.visible{opacity:1;transform:none}
.rotulo span{
  font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--oro);
  background:rgba(9,14,26,.94); border:1px solid rgba(201,151,63,.2); border-top:0;
  border-radius:0 0 10px 10px; padding:.35rem 1rem .4rem;
}

/* Barra de compra fija (móvil y tablet) */
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(9,14,26,.9),rgba(7,11,20,.98));
  border-top:1px solid rgba(201,151,63,.22);
  box-shadow:0 -12px 30px -10px rgba(0,0,0,.8);
  transform:translate3d(0,110%,0); transition:transform .45s var(--curva);
}
.barra-compra.visible{transform:none}
.barra-compra__precio{margin:0;display:grid;line-height:1.1}
.barra-compra__precio span{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--oro-claro)}
.barra-compra__precio small{font-size:.7rem;color:var(--crema-tenue)}
.btn--barra{width:auto;min-width:0;min-height:3rem;padding:.7rem 1.3rem;font-size:.92rem}
.btn--barra::before{inset:-30% -8%}
/* Con la barra a la vista, el botón de la cabecera sobra en móvil */
.cabecera .btn--sm{transition:opacity .3s var(--curva),visibility 0s}
@media (max-width:1023.98px){.con-barra-compra .cabecera .btn--sm{opacity:0;visibility:hidden;transition:opacity .3s var(--curva),visibility 0s .3s}}

/* Botones: brillo que respira y hundimiento al tocar */
@keyframes respirar{
  0%,100%{opacity:.5;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.05)}
}
.js-anim .btn--principal::before{animation:respirar 4.2s ease-in-out infinite}
.btn{transition:transform .18s var(--curva)}
.btn:active{transform:scale(.97)}
.btn--principal:active::before{opacity:1}
@media (hover:hover){
  .btn--principal:hover{transform:translate3d(0,-2px,0)}
  .btn--principal:active{transform:scale(.97)}
}

/* FAQ: el contenido baja y aparece; al cerrar, se desvanece antes de plegarse */
@keyframes desplegar{from{opacity:0;transform:translate3d(0,-.5rem,0)}to{opacity:1;transform:none}}
.js-anim .faq__item[open] .faq__resp{animation:desplegar .5s var(--curva)}
.js-anim .faq__item.cerrando .faq__resp{opacity:0;transform:translate3d(0,-.5rem,0);transition:opacity .25s,transform .25s}
.faq__item summary::after{content:"+";transition:transform .35s var(--curva)}
.faq__item[open] summary::after{content:"+";transform:rotate(45deg)}

/* Velas del mapa del viaje: humo que sube, brasa que late, llama que titila */
@keyframes titilar{
  0%,100%{transform:scale(1,1) rotate(-1deg)}
  20%{transform:scale(1.04,.96) rotate(1.5deg)}
  45%{transform:scale(.97,1.06) rotate(-.6deg)}
  70%{transform:scale(1.02,.98) rotate(1deg)}
}
@keyframes latir{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes humear{0%{opacity:0;transform:translate3d(0,.3rem,0)}35%{opacity:.8}100%{opacity:0;transform:translate3d(0,-.7rem,0)}}
.js-anim .vela[data-vela="encendida"] .vela__llama{animation:titilar 2.6s ease-in-out infinite}
.js-anim .vela[data-vela="encendida"]::before{animation:respirar 3.6s ease-in-out infinite}
.js-anim .vela[data-vela="brasa"] .vela__llama{animation:latir 2.2s ease-in-out infinite}
.js-anim .vela[data-vela="apagada"] .vela__humo{animation:humear 4.5s ease-out infinite}
.js-anim .vela[data-vela="brasa"] .vela__humo{animation:humear 5.5s ease-out 1s infinite}

@media (min-width:1024px){
  .barra-compra{display:none}
}

/* ═════════════ Capa de escritorio con GSAP (paso 4) ═════════════
   .js-escritorio la pone el <head> en pantallas ≥1024 px sin "reducir movimiento".
   Si GSAP no llegara a cargar, el <head> la retira y queda la capa base. */
@media (min-width:1024px){
  /* La portada espera oculta a su intro (evita el parpadeo) */
  .js-escritorio:not(.hero-encendido) .hero :is(.hero__cabeza > *,.hero__visual,.hero__compra){opacity:0!important}
  /* Lo que mueve GSAP no lleva transiciones CSS (se pelearían) */
  .js-escritorio :is(.hero__cabeza > *,.hero__visual,.hero__compra,.gancho__texto,.parte,.autora__foto){transition:none}

  /* Título partido en letras */
  .partido .palabra{display:inline-block;white-space:nowrap}
  .hero__titulo .letra{display:inline-block}

  /* Cita a pantalla completa */
  .js-escritorio .gancho{min-height:100vh;display:flex;align-items:center;padding-block:7rem}
  .js-escritorio .gancho > .contenedor{width:100%}

  /* Las 3 partes en una pista horizontal */
  .js-escritorio .partes{display:flex;gap:clamp(4rem,8vw,8rem);width:max-content}
  .js-escritorio .parte{width:min(34rem,40vw)}

  /* Resplandor que crece desde abajo al salir de la portada */
  .hero__resplandor{
    position:absolute; z-index:0; left:50%; bottom:-22vh; width:120vw; height:62vh; margin-left:-60vw;
    border-radius:50%; transform-origin:50% 100%; opacity:0; pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,189,118,.34),rgba(226,189,118,.08) 55%,rgba(226,189,118,0));
  }
  /* Brillo cálido que sigue al cursor sobre el mockup */
  .hero__brillo{
    position:absolute; z-index:1; left:0; top:0; width:30rem; height:30rem; margin:-15rem 0 0 -15rem;
    border-radius:50%; pointer-events:none; opacity:0; transition:opacity .6s var(--curva);
    background:radial-gradient(closest-side,rgba(255,236,190,.16),rgba(255,236,190,0));
  }
  .hero__brillo.activo{opacity:1}

  /* Máscara de luz que revela los títulos de izquierda a derecha (solo transform) */
  .barrido{display:inline-block;position:relative;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .barrido__in{display:inline-block}
  .barrido__luz{
    position:absolute; top:0; bottom:0; right:0; width:3px; opacity:0; pointer-events:none;
    background:linear-gradient(to bottom,rgba(240,217,168,0),var(--oro-palido),rgba(240,217,168,0));
    box-shadow:0 0 18px 5px rgba(226,189,118,.45);
  }

  /* Sendero de velas */
  .js-escritorio main{position:relative}
  .sendero{position:absolute;top:0;left:0;z-index:1;pointer-events:none;overflow:visible}
  .sendero__guia{fill:none;stroke:rgba(201,151,63,.16);stroke-width:1;stroke-dasharray:2 10;stroke-linecap:round}
  .sendero__brillo{fill:none;stroke:rgba(226,189,118,.13);stroke-width:7;stroke-linecap:round}
  .sendero__linea{fill:none;stroke:var(--oro-claro);stroke-width:1.3;stroke-linecap:round;opacity:.85}
  .sendero__punta{transition:opacity .4s}
  .sendero__vela .cuerpo{fill:#e8dcc0;opacity:.35;transition:opacity 1s}
  .sendero__vela .llama{fill:#f0d9a8;opacity:0;transition:opacity 1s}
  .sendero__vela .halo{opacity:0;transition:opacity 1.4s}
  .sendero__vela.encendida .cuerpo{opacity:1}
  .sendero__vela.encendida :is(.llama,.halo){opacity:1}
  /* Las velas del sendero sustituyen a los separadores fijos */
  .con-sendero :is(.gancho,.autora,.vista)::before{opacity:0}

  /* Llegada: la frase de cierre se ilumina cuando el sendero alcanza la llama */
  .frase-cierre{position:relative}
  .frase-cierre::before{
    content:""; position:absolute; z-index:-1; inset:-60% -25%; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,189,118,.22),rgba(226,189,118,0));
    opacity:0; transition:opacity 1.8s var(--curva);
  }
  .oferta.llegada .frase-cierre::before{opacity:1}

  /* Amanecer: una luz cálida sube desde abajo a medida que se avanza */
  .amanecer{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
    background:
      radial-gradient(ellipse 120% 70% at 50% 115%,rgba(226,189,118,.16),rgba(226,189,118,0) 70%),
      linear-gradient(180deg,rgba(40,52,80,0) 30%,rgba(40,52,80,.32));
  }

  /* Partículas doradas: pocas, grandes y lentas */
  .particulas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .particulas i{
    position:absolute; bottom:0; left:var(--x); width:var(--t); height:var(--t); border-radius:50%;
    background:radial-gradient(circle,rgba(247,211,126,.95),rgba(226,189,118,.35) 42%,rgba(226,189,118,0) 70%);
    opacity:0; animation:flotar var(--d) linear var(--r) infinite;
  }
  @keyframes flotar{
    0%{transform:translate3d(0,8vh,0);opacity:0}
    12%{opacity:var(--o)}
    50%{transform:translate3d(var(--s),-50vh,0)}
    88%{opacity:var(--o)}
    100%{transform:translate3d(0,-112vh,0);opacity:0}
  }

  /* Luz dorada que sigue al ratón */
  .cursor-luz{
    position:fixed; z-index:45; left:0; top:0; width:36rem; height:36rem; margin:-18rem 0 0 -18rem;
    border-radius:50%; pointer-events:none; opacity:0; transition:opacity .8s var(--curva);
    background:radial-gradient(closest-side,rgba(226,189,118,.075),rgba(226,189,118,0));
  }
  .cursor-luz.activa{opacity:1}
}

/* ═════════════ Páginas legales ═════════════ */
.legal{padding:calc(var(--cabecera) + 3.5rem) 0 5rem}
.legal h1{font-size:clamp(2.4rem,8vw,3.6rem);margin-bottom:.6rem}
.legal__fecha{font-size:.85rem;color:var(--crema-tenue);margin-bottom:2.5rem}
.legal__intro{font-family:var(--serif);font-size:1.3rem;line-height:1.55;color:var(--crema-suave);margin-bottom:2.5rem}
.legal h2{font-size:clamp(1.6rem,5.5vw,2rem);color:var(--oro-palido);margin:2.8rem 0 1rem}
.legal h3{font-size:1.3rem;margin:1.8rem 0 .6rem}
.legal p,.legal li{color:var(--crema-suave)}
.legal ul{margin:0 0 1em;display:grid;gap:.5rem}
.legal ul li{position:relative;padding-left:1.2rem}
.legal ul li::before{content:"✦";position:absolute;left:0;top:.1em;font-size:.6rem;line-height:2.2;color:var(--oro)}
.legal a{color:var(--oro-claro)}
.legal strong{color:var(--crema);font-weight:600}
.legal__datos{
  display:grid; grid-template-columns:minmax(8rem,auto) 1fr; gap:.55rem 1.4rem; margin:0 0 1.5rem;
  padding:1.4rem 1.5rem; border:1px solid var(--linea); border-radius:8px; background:rgba(19,31,54,.5);
}
.legal__datos dt{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--oro);padding-top:.2rem}
.legal__datos dd{margin:0;color:var(--crema)}
/* Datos pendientes de completar: bien visibles para no publicarlos por error */
.completar{
  background:rgba(226,160,106,.14); color:#f0b98a; border:1px dashed rgba(226,160,106,.6);
  border-radius:4px; padding:0 .35em; font-style:normal;
}
.legal__nav{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:.92rem}
@media (max-width:520px){.legal__datos{grid-template-columns:1fr;gap:.2rem}.legal__datos dd{margin-bottom:.7rem}}

/* ═════════════ Página 404 ═════════════ */
.error404{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem var(--gutter); text-align:center; gap:0;
}
.error404__vela{transform:scale(1.8);transform-origin:50% 100%;margin-bottom:3.5rem}
.error404 h1{font-size:clamp(2.2rem,8vw,3.4rem);margin-bottom:1rem}
.error404__texto{font-family:var(--serif);font-size:1.3rem;line-height:1.55;color:var(--crema-suave);max-width:30rem;margin-bottom:2.2rem}
.error404 .btn--principal{width:auto}