/* v6 · La portada es el prisma; lo que sigue cambia en cada propuesta. Se apoya en ../p.css y ../v4/shared.css. */
.hero6{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero6 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.h6t{position:absolute;left:50%;top:clamp(108px,17vh,170px);transform:translateX(-50%);width:min(92vw,880px);text-align:center;z-index:5}
.h6d{position:absolute;left:0;right:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding-left:.2em;pointer-events:none;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.h6d i{position:relative;display:block;width:1px;height:30px}
/* la lucecita que baja por la línea */
.h6d i::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px 2px rgba(217,163,27,.7);animation:luz 1.9s cubic-bezier(.45,0,.25,1) infinite}
@keyframes luz{0%{transform:translateY(-2px);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translateY(28px);opacity:0}}
@media (prefers-reduced-motion:reduce){.h6d i::after{animation:none;opacity:1;transform:translateY(12px)}}
.cab .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
.cab .acts .btn{margin-left:0}
@media (max-width:900px){.cab .acts .btn.sec{display:none}}
/* el titular cambia solo: qué es, de dónde es y cuánto hay (los tres ocupan el mismo lugar) */
.t-sw{display:grid}
.t-sw .sw{grid-area:1/1;align-self:center;animation:swA 20s ease-in-out infinite}
.t-sw .sw.b{animation-name:swB;opacity:0}
.t-sw .sw.c{animation-name:swC;opacity:0}
.t-sw .sw.d{animation-name:swD;opacity:0}
@keyframes swA{0%{opacity:0;transform:translateY(10px);filter:blur(6px)}3%,22%{opacity:1;transform:none;filter:none}25%,100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes swB{0%,25%{opacity:0;transform:translateY(10px);filter:blur(6px)}28%,47%{opacity:1;transform:none;filter:none}50%,100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes swC{0%,50%{opacity:0;transform:translateY(10px);filter:blur(6px)}53%,72%{opacity:1;transform:none;filter:none}75%,100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes swD{0%,75%{opacity:0;transform:translateY(10px);filter:blur(6px)}78%,97%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.t-sw .sw{animation:none}.t-sw .sw.b,.t-sw .sw.c,.t-sw .sw.d{display:none}}
@media (max-width:640px){.h6t{top:142px}}
/* celular: las frases se apoyan abajo del bloque, así el espacio hasta el prisma es el mismo con cualquiera */
@media (max-width:760px){.t-sw .sw{align-self:end}}

/* títulos de sección comunes */
.sec6{position:relative;padding:clamp(70px,11vw,150px) var(--pad)}
.eyebrow{margin:0 0 16px;font:500 12px/1 var(--caps);letter-spacing:.28em;color:var(--gold)}
.h2{margin:0;font:400 clamp(28px,4.4vw,64px)/1.02 var(--titulo);letter-spacing:-.04em;text-wrap:balance}
.h2 em{font-style:normal;color:var(--gold)}
.lead6{margin:18px 0 0;max-width:54ch;color:var(--mute)}

/* cierre común: bases, advertencia y llamada */
.cierre{padding:clamp(70px,10vw,130px) var(--pad) 70px;border-top:1px solid var(--line)}
.cierre .bs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(34px,5vw,64px)}
.cierre .bs span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;font:500 11.5px/1 var(--caps);letter-spacing:.16em}
.cierre .bs i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.cierre .adv{max-width:30ch;margin:0 0 28px;font:400 clamp(28px,4.4vw,62px)/1.02 var(--titulo);letter-spacing:-.04em;text-wrap:balance}
.cierre .adv em{font-style:normal;color:var(--gold)}
.cierre .sub{max-width:62ch;margin:0 0 30px;color:var(--mute);font-size:14.5px}
.cierre .marcaf{margin-top:clamp(40px,7vw,90px);font-size:clamp(46px,12vw,200px);color:rgba(241,238,230,.8);line-height:.86}
.idx6{position:fixed;right:14px;bottom:14px;z-index:80;padding:9px 15px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(var(--bg-rgb),.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;color:var(--mute)}
.idx6:hover{color:var(--gold);border-color:var(--gold)}

/* luces de fondo: tres manchas cálidas (dorado, naranja y bordeaux), desenfocadas, que derivan muy despacio */
.luces{position:fixed;inset:0;opacity:.55;z-index:-1;overflow:hidden;pointer-events:none}
.luces i{position:absolute;border-radius:50%;filter:blur(90px)}
.luces i:nth-child(1){left:-8vw;bottom:-12vw;width:40vw;height:40vw;background:radial-gradient(circle,rgba(var(--gold-rgb),.5),rgba(201,88,54,.24) 52%,transparent 72%);animation:luzA 40s ease-in-out infinite alternate}
.luces i:nth-child(2){right:-6vw;top:-6vw;width:36vw;height:36vw;background:radial-gradient(circle,rgba(201,88,54,.42),rgba(160,36,60,.24) 55%,transparent 74%);animation:luzA 52s ease-in-out infinite alternate-reverse}
.luces i:nth-child(3){left:34vw;top:46vh;width:28vw;height:28vw;background:radial-gradient(circle,rgba(160,36,60,.36),transparent 70%);animation:luzA 46s ease-in-out infinite alternate}
@keyframes luzA{to{transform:translate3d(5vw,-4vh,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.luces i{animation:none}}
html[data-tema="claro"] .luces{opacity:.5}
html[data-tema="claro"] .luces i{animation:none!important}
html:not([data-tema="claro"]) .luces{display:none}

body{background:transparent}   /* el color lo pone <html>: así se ven las luces de fondo */