/* Maestro Martín Valverde · hoja de estilos (rediseño oct-2026)
   Noche cálida, un solo acento oro viejo, Gloock + Atkinson Hyperlegible. Texto mínimo 18 px. */
@font-face{font-family:"Gloock";font-weight:400;font-display:swap;src:url(media/fonts/gloock-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(media/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(media/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --noche:#17120E; --noche-2:#1D1611; --noche-3:#261D16; --veta:#3A2E23; --veta-2:#5A4836;
  --cera:#F1E7D6; --ceniza:#C2B5A1; --oro:#C9A35B; --oro-vivo:#DDBA72; --oro-tenue:rgba(201,163,91,.5);
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --texto:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --g:20px; --max:1200px; --sec:76px;
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .62 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media(min-width:720px){:root{--g:40px}}
@media(min-width:960px){:root{--sec:120px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--noche)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:clip}
body{margin:0;background:var(--noche);color:var(--cera);font:400 19px/1.65 var(--texto);padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:960px){body{font-size:20px;padding-bottom:0}}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.008em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
:focus-visible{outline:3px solid var(--cera);outline-offset:3px;border-radius:3px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--cera);color:var(--noche);padding:12px 16px;z-index:100;font-weight:700;text-decoration:none}
.saltar:focus{left:8px}
.icono{width:22px;height:22px;flex:none}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:14px 28px;font:700 19px/1.15 var(--texto);text-decoration:none;border-radius:6px;border:1.5px solid var(--oro);transition:background-color .2s,border-color .2s,color .2s}
.btn svg{width:22px;height:22px;flex:none}
.btn-oro{background:var(--oro);color:var(--noche)}
.btn-oro:hover{background:var(--oro-vivo);border-color:var(--oro-vivo)}
.btn-linea{background:transparent;color:var(--cera)}
.btn-linea:hover{background:rgba(201,163,91,.14)}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.acciones .btn{flex:1 1 220px}
@media(min-width:560px){.acciones .btn{flex:0 0 auto}}

/* ---------- cabecera ---------- */
.top{position:relative;z-index:40;background:var(--noche);border-bottom:1px solid var(--veta)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.marca{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;text-decoration:none;line-height:1.1}
.marca small{font:400 21px/1.1 var(--display);color:var(--ceniza)}
.marca span{font:400 21px/1.1 var(--display);color:var(--cera)}
.top nav{display:flex;gap:28px;font-size:18px}
.top nav a{text-decoration:none;color:var(--ceniza);padding:6px 0;border-bottom:1.5px solid transparent}
.top nav a:hover{color:var(--cera)}
.top nav a[aria-current]{color:var(--cera);border-bottom-color:var(--oro)}
.contacto-top{display:flex;align-items:center;gap:12px}
.tel-top{display:inline-flex;align-items:center;gap:8px;font:700 18px/1 var(--texto);text-decoration:none;color:var(--noche);background:var(--oro);padding:12px 16px;border-radius:6px;white-space:nowrap}
.tel-top:hover{background:var(--oro-vivo)}
.tel-top svg{width:19px;height:19px}
.wa-top{display:none}
@media(max-width:959px){.tel-top{display:none}}
@media(min-width:960px){
  .top{position:sticky;top:0;background:rgba(23,18,14,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .marca small,.marca span{font-size:23px}
  .wa-top{display:inline-flex;align-items:center;gap:8px;font:700 18px/1 var(--texto);text-decoration:none;color:var(--cera);border:1.5px solid var(--oro);padding:11px 15px;border-radius:6px}
  .wa-top:hover{background:rgba(201,163,91,.14)}
  .wa-top svg{width:19px;height:19px}
}
@media(max-width:959px){
  .top .wrap{flex-wrap:wrap;padding-top:12px;row-gap:0}
  .top nav{order:3;width:100%;overflow-x:auto;gap:22px;padding:8px 0 10px;margin-top:10px;border-top:1px solid var(--veta);white-space:nowrap;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
}

/* ---------- textos comunes ---------- */
.titulo{font-size:clamp(38px,5vw,62px)}
.entrada{font-size:21px;color:var(--ceniza);max-width:36rem;margin-top:22px}
.pista{display:block;font:700 18px/1.3 var(--texto);color:var(--oro);margin:0 0 18px}
.nota{margin-top:36px;font-size:18px;color:var(--ceniza);max-width:44rem}
.ia{font-size:18px;color:var(--ceniza);margin:16px 0 0;text-align:center}
section{padding:var(--sec) 0}
.tono{background:var(--noche-2)}

/* ---------- héroe del inicio ---------- */
.heroe{padding:0;position:relative;isolation:isolate;overflow:hidden;background-color:var(--noche);background-image:radial-gradient(ellipse 70% 60% at 72% 48%,rgba(150,96,40,.20),transparent 70%),var(--grano)}
.heroe-3d{position:absolute;inset:0;z-index:0;pointer-events:none}
.heroe-3d canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
.heroe-3d.vivo canvas{opacity:1}
.heroe .wrap{position:relative;display:grid;align-items:center;gap:0}
.heroe-texto{position:relative;z-index:2;text-shadow:0 2px 28px var(--noche),0 0 2px var(--noche)}
.heroe-arte{position:relative;z-index:1;aspect-ratio:1;pointer-events:none}
.heroe-arte svg{width:100%;height:100%;transition:opacity 1.6s ease}
.heroe-3d.vivo ~ .wrap .heroe-arte svg{opacity:0}
.heroe h1{font-size:clamp(42px,4.7vw,68px);line-height:1.05}
.heroe h1 .sigue{display:block}
.heroe .lead{font-size:clamp(20px,1.5vw,22px);color:var(--ceniza);margin-top:22px;max-width:34rem}
.heroe-texto .btn{text-shadow:none}
.cifra{display:inline-block;margin-top:28px;font:400 clamp(48px,5.2vw,76px)/1 var(--display);color:var(--oro);text-decoration:none;letter-spacing:.005em}
.cifra small{display:block;font:400 19px/1.4 var(--texto);color:var(--ceniza);margin-bottom:8px;letter-spacing:0}
.cifra:hover{color:var(--oro-vivo)}
.heroe-inicio{min-height:calc(100svh - 77px)}
.heroe-inicio .wrap{padding-top:28px;padding-bottom:64px}
@media(min-width:960px){
  .heroe-inicio{display:flex;align-items:center}
  .heroe-inicio .wrap{width:100%;grid-template-columns:1.12fr .88fr;gap:24px;padding-top:52px;padding-bottom:52px}
  .heroe-inicio .heroe-arte{width:min(100%,560px,70vh);justify-self:end}
}
@media(min-width:960px) and (max-height:860px){
  /* laptops con pantalla baja: que el teléfono y los botones queden en la primera vista */
  .heroe h1{font-size:clamp(40px,min(4.7vw,7.4vh),68px)}
  .heroe .lead{margin-top:16px;max-width:38rem}
  .heroe .cifra{margin-top:20px;font-size:clamp(44px,min(5.2vw,8.4vh),76px)}
  .heroe .acciones{margin-top:22px}
  .heroe-inicio .wrap{padding-top:32px;padding-bottom:32px}
}
@media(max-width:959px){
  .heroe-inicio .heroe-arte{order:-1;width:min(66vw,300px);margin:0 auto -34px}
}

/* trazo del mandala fijo */
.mandala{fill:none;stroke:var(--oro);stroke-width:2.2;stroke-linecap:round}
.mandala .tenue{stroke-opacity:.55}
@media(max-width:959px){.mandala{stroke-width:3}}
@media(prefers-reduced-motion:no-preference){
  .mandala.traza circle,.mandala.traza line{stroke-dasharray:1;stroke-dashoffset:1;animation:traza 2.4s cubic-bezier(.4,.1,.2,1) forwards}
  .mandala.traza .r1{animation-delay:.25s}.mandala.traza .r2{animation-delay:.5s}.mandala.traza .r3{animation-delay:.8s}.mandala.traza .r4{animation-delay:1.05s}
  .heroe-texto > *{animation:aparece .9s ease-out both}
  .heroe-texto > :nth-child(2){animation-delay:.1s}.heroe-texto > :nth-child(3){animation-delay:.2s}.heroe-texto > :nth-child(4){animation-delay:.3s}.heroe-texto > :nth-child(5){animation-delay:.4s}
}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- oficios (línea estática bajo el héroe) ---------- */
.oficios{border-block:1px solid var(--veta);background:var(--noche-2);padding:22px 0}
.oficios ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;font:400 clamp(20px,2vw,24px)/1.2 var(--display);color:var(--cera)}
.oficios li{display:flex;align-items:center}
.oficios li+li::before{content:"";width:7px;height:7px;margin:0 22px;background:var(--oro);transform:rotate(45deg);flex:none}
@media(max-width:719px){
  .oficios ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;text-align:center;font-size:19px}
  .oficios li{justify-content:center}
  .oficios li+li::before{display:none}
}

/* ---------- nicho (marco de arco con filete dorado) ---------- */
.nicho{margin:0;padding:8px;border:1px solid var(--oro-tenue);border-radius:999px 999px 6px 6px;background:var(--noche-3)}
.nicho img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 3px 3px}
.nicho figcaption{font:400 26px/1.1 var(--display);text-align:center;color:var(--cera);padding:16px 6px 10px}

/* ---------- servicios ---------- */
.servicios{display:grid;gap:64px;margin-top:64px}
.servicio{display:grid;gap:26px;align-content:start}
.servicio h3{font-size:clamp(30px,3vw,38px)}
.servicio p{color:var(--ceniza);margin:14px 0 0}
.servicio .nicho{max-width:320px}
.enlaces{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
.enlaces a{font-weight:700;font-size:19px}
.enlaces .mas{color:var(--cera);text-decoration:underline;text-decoration-color:var(--veta-2)}
.enlaces .mas:hover{text-decoration-color:var(--cera)}
.enlaces .wa{color:var(--oro);text-decoration:underline;text-decoration-color:var(--oro-tenue)}
.enlaces .wa:hover{color:var(--oro-vivo)}
@media(min-width:700px){.servicios{grid-template-columns:1fr 1fr;gap:72px 48px}}
@media(min-width:1080px){
  .servicio{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:32px;align-items:start}
  .servicio .nicho{max-width:none}
}

/* ---------- principios ---------- */
.principios{display:grid;gap:44px;margin-top:60px}
.principio{display:grid;grid-template-columns:44px 1fr;column-gap:20px;align-content:start}
.principio svg{width:44px;height:44px;color:var(--oro);grid-row:span 2;margin-top:2px}
.principio h3{font-size:clamp(27px,2.6vw,33px)}
.principio p{color:var(--ceniza);margin-top:10px;max-width:30rem}
@media(min-width:880px){.principios{grid-template-columns:1fr 1fr;gap:56px 72px}}

/* ---------- pasos (secuencia real) ---------- */
.pasos{list-style:none;margin:60px 0 0;padding:0;display:grid;gap:40px;counter-reset:p}
.pasos li{counter-increment:p;position:relative;padding-left:74px}
.pasos li::before{content:counter(p);position:absolute;left:0;top:-6px;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--oro);border-radius:50%;font:400 28px/1 var(--display);color:var(--oro)}
.pasos h3{font-size:clamp(26px,2.4vw,31px);margin-bottom:10px}
.pasos p{color:var(--ceniza);margin:0}
.pasos.solo-texto p{color:var(--cera)}
@media(min-width:960px){
  .pasos{grid-template-columns:repeat(3,1fr);gap:48px}
  .pasos li{padding-left:0;padding-top:84px}
  .pasos li::before{top:0;width:58px;height:58px;font-size:30px}
  .pasos li:not(:last-child)::after{content:"";position:absolute;top:29px;left:74px;right:-32px;height:1px;background:linear-gradient(90deg,var(--oro-tenue),transparent)}
}

/* ---------- la voz (video) ---------- */
.voz .wrap{display:grid;gap:52px;align-items:center}
.pantalla{max-width:300px;width:100%;margin:0 auto;padding:7px;border:1px solid var(--oro-tenue);border-radius:10px;background:#000}
.pantalla video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:5px}
.cita{font:400 clamp(30px,3.4vw,42px)/1.2 var(--display);margin:30px 0 0;color:var(--cera)}
.cita cite{display:block;font:400 19px/1.4 var(--texto);font-style:normal;color:var(--ceniza);margin-top:16px}
@media(min-width:960px){.voz .wrap{grid-template-columns:.7fr 1.3fr;gap:88px}}

/* ---------- consejo de la puerta ---------- */
.consejo .wrap{display:grid;gap:56px;align-items:center}
.puerta{margin:0 auto;width:100%;max-width:min(380px,82vw);aspect-ratio:4/5;padding:8px;border:1px solid var(--oro-tenue);border-radius:999px 999px 6px 6px}
.puerta div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border-radius:999px 999px 3px 3px;background:radial-gradient(ellipse 60% 48% at 50% 62%,rgba(214,150,70,.30),transparent 72%),var(--noche-3);text-align:center;padding:40px 20px 24px}
.puerta p{font:400 clamp(40px,5vw,54px)/1.05 var(--display);color:var(--oro);margin:0}
.puerta small{font:400 22px/1 var(--display);color:var(--ceniza)}
.ingredientes{list-style:none;margin:30px 0 0;padding:0}
.ingredientes li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--veta);font-size:21px}
.ingredientes li:last-child{border-bottom:1px solid var(--veta)}
.ingredientes li::before{content:"";width:8px;height:8px;background:var(--oro);transform:rotate(45deg) translateY(-3px);flex:none}
@media(min-width:960px){.consejo .wrap{grid-template-columns:.8fr 1.2fr;gap:96px}}

/* ---------- preguntas ---------- */
.faq .wrap{display:grid;gap:40px}
details{border-top:1px solid var(--veta)}
details:last-child{border-bottom:1px solid var(--veta)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font:400 clamp(23px,2.2vw,27px)/1.25 var(--display);color:var(--cera)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--oro),var(--oro)) center/16px 1.5px no-repeat,linear-gradient(var(--oro),var(--oro)) center/1.5px 16px no-repeat;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
summary:hover{color:var(--oro-vivo)}
details .r{padding:0 0 26px;color:var(--ceniza);max-width:40rem}
@media(min-width:960px){.faq .wrap{grid-template-columns:.75fr 1.25fr;gap:96px}.faq .wrap > div:first-child{position:sticky;top:110px;align-self:start}}

/* ---------- cierre ---------- */
.cierre{position:relative;isolation:isolate;overflow:hidden;text-align:center;border-top:1px solid var(--veta);background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(150,96,40,.22),transparent 72%),var(--grano),var(--noche)}
.cierre::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(130vw,980px);aspect-ratio:1;transform:translate(-50%,-50%);background:url(media/mandala.svg) center/contain no-repeat;opacity:.13}
.cierre .titulo{max-width:40rem;margin:0 auto}
.cierre .cifra{margin-top:36px;font-size:clamp(56px,11vw,132px)}
.cierre .acciones{justify-content:center}
.datos{list-style:none;margin:44px auto 0;padding:0;display:grid;gap:14px;max-width:46rem;font-size:19px;color:var(--ceniza)}
.datos b{color:var(--cera);font-weight:700}
@media(min-width:960px){.datos{grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}}

/* ---------- pie ---------- */
footer{background:var(--noche);border-top:1px solid var(--veta);color:var(--ceniza);padding:56px 0 48px;font-size:18px}
.pie{display:grid;gap:36px}
.pie .nombre{font:400 26px/1.1 var(--display);color:var(--cera);margin-bottom:12px}
.pie h2{font:700 18px/1.2 var(--texto);color:var(--cera);margin:4px 0 12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:8px 0}
.pie a{text-decoration:underline;text-decoration-color:var(--veta-2)}
.pie a:hover{color:var(--cera);text-decoration-color:var(--cera)}
.legalito{margin-top:40px;padding-top:24px;border-top:1px solid var(--veta);font-size:18px}
.legalito p{max-width:52rem}
@media(min-width:960px){.pie{grid-template-columns:1.3fr 1fr 1fr}}

/* ---------- barra fija celular ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(23,18,14,.97);border-top:1px solid var(--veta)}
.barra .btn{min-height:58px;padding:8px 6px;font-size:19px}
@media(min-width:960px){.barra{display:none}}

/* ---------- páginas internas ---------- */
.migas{font-size:18px;color:var(--ceniza);margin-bottom:26px}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.migas li+li::before{content:"/";margin-right:8px;color:var(--veta-2)}
.migas a{text-decoration:underline;text-decoration-color:var(--veta-2)}
.heroe-interna{background-image:radial-gradient(ellipse 50% 60% at 78% 40%,rgba(150,96,40,.18),transparent 70%),var(--grano)}
.heroe-interna .wrap{padding-top:32px;padding-bottom:72px;gap:52px}
.heroe-interna h1{font-size:clamp(38px,4.4vw,62px)}
.heroe-interna .nicho{max-width:400px;margin:0 auto;width:100%}
@media(min-width:960px){.heroe-interna .wrap{grid-template-columns:1.15fr .85fr;gap:80px;padding-top:64px;padding-bottom:104px}}
.heroe-interna.sin-foto .wrap{display:block}
.doble .wrap{display:grid;gap:40px}
@media(min-width:960px){.doble .wrap{grid-template-columns:.85fr 1.15fr;gap:96px}}
.prosa p,.prosa li{color:var(--ceniza);max-width:40rem}
.prosa h2{font-size:clamp(32px,3.8vw,46px);margin:0 0 20px}
.prosa ul{padding-left:1.1em}
.prosa li{margin:8px 0}
.marcas{list-style:none;margin:0;padding:0}
.marcas li{padding:18px 0 18px 34px;border-top:1px solid var(--veta);position:relative;font-size:21px}
.marcas li:last-child{border-bottom:1px solid var(--veta)}
.marcas li::before{content:"";position:absolute;left:4px;top:30px;width:8px;height:8px;background:var(--oro);transform:rotate(45deg)}
.otros{display:grid;gap:0 48px;margin-top:52px}
.otros a{display:block;text-decoration:none;padding:26px 0 28px;border-top:1px solid var(--veta)}
.otros b{display:block;font:400 clamp(26px,2.4vw,31px)/1.1 var(--display);color:var(--cera)}
.otros span{display:block;color:var(--ceniza);margin-top:10px}
.otros small{display:inline-block;margin-top:14px;font:700 18px/1.2 var(--texto);color:var(--oro);text-decoration:underline;text-decoration-color:var(--oro-tenue);text-underline-offset:.2em}
.otros a:hover b{color:var(--oro-vivo)}
@media(min-width:720px){.otros{grid-template-columns:1fr 1fr}}
.zonas{list-style:none;margin:0;padding:0;display:grid;gap:0 56px}
.zonas li{display:flex;flex-direction:column;gap:4px;padding:22px 0;border-top:1px solid var(--veta);font:400 clamp(26px,2.4vw,30px)/1.2 var(--display);color:var(--cera)}
.zonas li span{font:400 19px/1.45 var(--texto);color:var(--ceniza)}
@media(min-width:720px){.zonas{grid-template-columns:1fr 1fr}}
.legal .wrap{max-width:860px}
.legal h1{font-size:clamp(40px,5.4vw,64px);margin-bottom:28px}
.legal h2{font-size:clamp(27px,2.6vw,32px);margin:44px 0 12px}
.noencontrado{min-height:62vh;display:flex;align-items:center}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- intro del inicio: una vela que se enciende ----------
   Solo existe si el script del <head> pone html.con-intro (inicio, una vez por sesión, sin "reducir movimiento").
   Todo es CSS: si js/intro.js no carga, igual termina sola a los 2.2 s (se encoge a 0 y deja de recibir toques;
   visibility/display animados no se aplican en Chromium, por eso no se usan). */
.intro{display:none}
html.con-intro .intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;--S:min(64vw,44vh,400px);animation:intro-cierra 10ms linear 2190ms forwards}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(150,96,40,.2),transparent 55%),var(--noche);animation:intro-desvanece .4s ease 1.8s forwards}
.intro-escena{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px}
.intro-flor{position:relative;width:var(--S);height:var(--S);animation:intro-desvanece .4s ease 1.4s forwards}
.intro.viaja .intro-flor{animation:intro-viaja .65s cubic-bezier(.65,0,.25,1) 1.25s forwards,intro-desvanece .2s ease 2s forwards}
.intro-flor > svg{width:100%;height:100%}
.intro-mandala{stroke-linecap:butt}
.intro-mandala circle,.intro-mandala line{stroke-dasharray:1 2;stroke-dashoffset:1.01;animation:intro-traza .6s cubic-bezier(.45,.05,.25,1) .2s forwards}
.intro-mandala .r2{animation-delay:.38s;animation-duration:.57s}
.intro-mandala .r3{animation-delay:.56s;animation-duration:.49s}
.intro-mandala .r4{animation-delay:.72s;animation-duration:.38s}
.intro-luz{position:absolute;left:50%;top:50%;width:calc(var(--S)*.075);aspect-ratio:1/2;translate:-50% -64%;animation:intro-enciende .38s cubic-bezier(.2,.7,.3,1) both,intro-apaga .3s ease 1.2s forwards}
.intro-luz::before{content:"";position:absolute;left:50%;top:62%;width:calc(var(--S)*.95);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(242,185,104,.32),rgba(242,185,104,.07) 38%,transparent 66%)}
.intro-luz svg{position:relative;width:100%;height:100%;transform-origin:50% 92%;animation:intro-titila .8s ease-in-out infinite}
.intro-nombre{margin:clamp(4px,1.5vh,14px) 0 0;font:400 clamp(30px,4.2vw,56px)/1.1 var(--display);letter-spacing:.035em;color:var(--cera)}
.intro-nombre span{white-space:nowrap}
.intro-lugar{margin:10px 0 0;font:400 clamp(18px,1.6vw,21px)/1.3 var(--texto);letter-spacing:.04em;color:var(--ceniza)}
.intro-nombre,.intro-lugar{opacity:0;animation:intro-aparece .4s ease .7s forwards,intro-desvanece .35s ease 1.2s forwards}
.intro-lugar{animation-delay:.82s,1.22s}
.intro-saltar{position:absolute;right:clamp(20px,3vw,40px);bottom:calc(24px + env(safe-area-inset-bottom));z-index:2;min-height:48px;padding:10px 24px;font:700 18px/1 var(--texto);color:var(--cera);background:rgba(23,18,14,.6);border:1.5px solid var(--oro-tenue);border-radius:6px;cursor:pointer;animation:intro-desvanece .4s ease 1.8s forwards}
.intro-saltar:hover{border-color:var(--oro)}
@media(max-width:959px){.intro-saltar{right:auto;left:50%;translate:-50% 0}}
html.intro-fin .intro{animation:intro-sale .25s ease forwards;pointer-events:none}
/* el mandala del héroe ya dibujado debajo, para que la flor de la intro aterrice encima sin saltos */
html.con-intro .mandala.traza circle,html.con-intro .mandala.traza line{animation:none;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){html.con-intro .intro{display:none}}
@keyframes intro-cierra{to{pointer-events:none;scale:0}}
@keyframes intro-traza{to{stroke-dashoffset:0}}
@keyframes intro-enciende{from{opacity:0;scale:.25}to{opacity:1;scale:1}}
@keyframes intro-apaga{from{opacity:1;scale:1}to{opacity:0;scale:.55}}
@keyframes intro-titila{0%,100%{transform:none}25%{transform:scale(.96,1.05) skewX(1.6deg)}50%{transform:scale(1.03,.97) skewX(-1.2deg)}75%{transform:scale(.98,1.03) skewX(.7deg)}}
@keyframes intro-aparece{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes intro-desvanece{from{opacity:1}to{opacity:0}}
@keyframes intro-viaja{to{translate:var(--dx,0px) var(--dy,0px);scale:var(--s,1)}}
@keyframes intro-sale{from{opacity:1}to{opacity:0;pointer-events:none}}