/* ===================== TOKENS ===================== */
:root{
    --bg:        #06120c;
    --bg-2:      #0a1a11;
    --bg-3:      #0e2317;
    --surface:   rgba(255,255,255,.03);
    --surface-2: rgba(255,255,255,.05);
    --line:      rgba(255,255,255,.08);
    --green:     #22e07a;
    --green-2:   #16c06a;
    --green-deep:#0e9e57;
    --text:      #eaf4ee;
    --muted:     #8aa395;
    --radius:    20px;
    --maxw:      1180px;
    --ease:      cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
body::before{
    content:"";position:fixed;inset:0;z-index:-2;
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(34,224,122,.10), transparent 60%),
        radial-gradient(900px 600px at -10% 30%, rgba(22,192,106,.07), transparent 55%),
        var(--bg);
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.accent{color:var(--green)}

.container{width:min(var(--maxw),92%);margin-inline:auto}
.container--narrow{max-width:780px}

/* ===================== BUTTONS ===================== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    font-weight:600;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
    font-size:.95rem;
}
.btn--primary{
    background:linear-gradient(135deg,var(--green),var(--green-deep));
    color:#04130b;padding:.95rem 1.8rem;
    box-shadow:0 12px 34px -10px rgba(34,224,122,.6);
}
.btn--primary::before{content:"";width:18px;height:18px;border-radius:50%;
    background:#04130b;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 00-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1012 2zm0 2a8 8 0 11-4.1 14.9l-.3-.2-2.5.7.7-2.4-.2-.3A8 8 0 0112 4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px -10px rgba(34,224,122,.75)}
.btn--lg{padding:1.05rem 2.2rem;font-size:1.02rem}
.btn--ghost{border-color:var(--line);color:var(--text);padding:.6rem 1.3rem;background:var(--surface)}
.btn--ghost:hover{border-color:var(--green);color:var(--green)}

/* miniaturas reales de YouTube */
.has-thumb{background-size:cover!important;background-position:center!important;
    background-repeat:no-repeat!important}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:55;
    background:rgba(255,255,255,.05)}
.scroll-progress span{display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--green-deep),var(--green));
    box-shadow:0 0 14px var(--green);border-radius:0 3px 3px 0;
    transition:width .12s linear}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.1rem 0;
    transition:background .3s, padding .3s, border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(6,18,12,.82);backdrop-filter:blur(14px);border-color:var(--line);padding:.7rem 0}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:'Space Grotesk';
    font-weight:700;letter-spacing:.04em;font-size:.95rem}
.brand__dot{width:11px;height:11px;border-radius:50%;background:var(--green);
    box-shadow:0 0 14px var(--green)}
.nav__links{display:flex;gap:2rem}
.nav__links a{color:var(--muted);font-size:.9rem;transition:color .25s}
.nav__links a:hover{color:var(--text)}
@media(max-width:880px){.nav__links{display:none}}

/* ===================== HERO ===================== */
.hero{position:relative;padding:9.5rem 0 5rem;overflow:hidden}
.hero__glow{position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;
    background:radial-gradient(circle,rgba(34,224,122,.16),transparent 60%);filter:blur(40px);z-index:-1}
.hero__grid{display:grid;grid-template-columns:.92fr 1.28fr;gap:3.5rem;align-items:center}
.eyebrow{color:var(--green);font-weight:600;letter-spacing:.18em;font-size:.78rem;text-transform:uppercase;margin-bottom:1.3rem}
.hero__title{font-size:clamp(2.7rem,6vw,4.6rem);font-weight:700}
.hero__title span{color:#fff}
.hero__title .accent{color:var(--green)}
.hero__sub{color:var(--muted);font-size:1.12rem;max-width:30rem;margin:1.5rem 0 2rem}
.hero__social{display:flex;align-items:center;gap:.9rem;margin-bottom:2rem}
.avatars{display:flex}
.avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--bg-2);margin-left:-12px;
    background:linear-gradient(135deg,var(--bg-3),var(--green-deep));}
.avatar:first-child{margin-left:0}
.avatar[style*="--i:0"]{background:linear-gradient(135deg,#1f3a2a,#2c5f44)}
.avatar[style*="--i:1"]{background:linear-gradient(135deg,#26503a,#39a06b)}
.avatar[style*="--i:2"]{background:linear-gradient(135deg,#2f6347,var(--green))}
.hero__social-text{display:flex;flex-direction:column;font-size:.9rem}
.hero__social-text strong{color:var(--green)}
.hero__social-text span{color:var(--muted)}
.hero__note{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.82rem;margin-top:.9rem}
.hero__note::before{content:"";width:14px;height:14px;border-radius:50%;
    background:var(--green);box-shadow:0 0 10px var(--green);opacity:.8}

/* CTA debajo del video, alineado a la derecha */
.hero__media-cta{display:flex;flex-direction:column;align-items:flex-end;margin-top:1.6rem}
.hero__media-cta .hero__note{margin-top:.8rem}
@media(max-width:880px){.hero__media-cta{align-items:stretch}.hero__media-cta .btn{width:100%}}

/* player mockup */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
    background:
        linear-gradient(180deg,rgba(6,18,12,.2),rgba(6,18,12,.85)),
        repeating-linear-gradient(90deg,rgba(34,224,122,.05) 0 2px,transparent 2px 16px),
        linear-gradient(135deg,#08160e,#0b2417);
    border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);cursor:pointer}
.player::after{content:"";position:absolute;inset:0;
    background:
        linear-gradient(115deg,transparent 40%,rgba(34,224,122,.10) 50%,transparent 60%),
        radial-gradient(60% 40% at 50% 60%,rgba(34,224,122,.12),transparent)}
.player__badge{position:absolute;top:1.2rem;left:1.2rem;display:flex;align-items:center;gap:.7rem;
    background:rgba(6,18,12,.7);backdrop-filter:blur(8px);border:1px solid var(--line);
    padding:.7rem .95rem;border-radius:14px;max-width:62%;z-index:2}
.player__badge strong{display:block;color:var(--green);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.player__badge span{font-size:.8rem;color:var(--muted);line-height:1.3}
.player__play-sm{width:22px;height:22px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative}
.player__play-sm::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
    border-left:7px solid #04130b;border-top:5px solid transparent;border-bottom:5px solid transparent}
.player__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:92px;height:92px;border-radius:50%;border:2px solid rgba(255,255,255,.6);
    background:rgba(34,224,122,.18);backdrop-filter:blur(4px);cursor:pointer;z-index:2;
    transition:transform .3s var(--ease),background .3s}
.player__play::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
    border-left:22px solid var(--green);border-top:14px solid transparent;border-bottom:14px solid transparent}
.player__play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(34,224,122,.3)}
.player__bar{display:none}
.player__bar-time{font-size:.78rem;color:var(--muted);white-space:nowrap}
.player__bar-track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.player__bar-track span{display:block;width:42%;height:100%;background:var(--green);border-radius:4px}

@media(max-width:880px){.hero__grid{grid-template-columns:1fr;gap:2.5rem}.hero{padding-top:7.5rem}}

/* ===================== ROADMAP / 3 FASES ===================== */
.roadmap{padding-top:5rem}
.section__head--center{margin-inline:auto;text-align:center;max-width:760px}

.features{display:flex;justify-content:center;flex-wrap:wrap;gap:2.6rem;margin-bottom:3.4rem}
.feature{display:flex;align-items:center;gap:.85rem}
.feature__num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    font-family:'Space Grotesk';font-weight:700;color:var(--green);
    border:1.5px solid rgba(34,224,122,.5);background:rgba(34,224,122,.07)}
.feature strong{display:block;font-family:'Space Grotesk';font-size:1rem}
.feature span{color:var(--muted);font-size:.86rem}

.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.phase{position:relative;display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
    transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.phase:hover{transform:translateY(-6px)}
.phase__visual{order:-1;position:relative;height:150px;opacity:.9;flex-shrink:0}
.phase__body{padding:1.8rem 1.7rem;display:flex;flex-direction:column;flex:1}
.phase__badge{align-self:flex-start;font-family:'Space Grotesk';font-weight:700;font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;padding:.36rem .8rem;border-radius:8px;margin-bottom:1rem}
.phase__title{font-size:1.55rem;font-weight:700;margin-bottom:.3rem}
.phase__subtitle{font-weight:600;color:#dfeae4;margin-bottom:.55rem;font-size:.98rem}
.phase__desc{color:var(--muted);margin-bottom:1.3rem;font-size:.94rem}
.phase__tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto}
.pill{font-size:.82rem;padding:.45rem .85rem;border-radius:10px;border:1px solid var(--line);
    background:rgba(255,255,255,.03);color:#dfeae4;transition:border-color .3s,background .3s}
.phase__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;
    padding:1rem 1.7rem;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
.phase__meta span{color:var(--muted);font-size:.84rem;position:relative}
.phase__meta span+span::before{content:"";position:absolute;left:-.7rem;top:50%;transform:translateY(-50%);
    width:1px;height:13px;background:var(--line)}

/* candlestick visual */
.phase__visual::before{content:"";position:absolute;inset:0;
    background:
        repeating-linear-gradient(90deg,transparent 0 20px,rgba(255,255,255,.04) 20px 22px),
        linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%)}
.phase__visual::after{content:"";position:absolute;right:10%;bottom:18%;width:62%;height:3px;
    background:currentColor;transform:rotate(-24deg);transform-origin:right;
    box-shadow:0 0 18px currentColor;border-radius:3px;opacity:.65}

/* color por fase */
.phase--green{color:var(--green)}
.phase--green .phase__badge{background:rgba(34,224,122,.14);color:var(--green)}
.phase--green .phase__title{color:var(--green)}
.phase--green:hover{border-color:rgba(34,224,122,.45);box-shadow:0 30px 70px -40px rgba(34,224,122,.5)}
.phase--green .phase__visual{background:radial-gradient(80% 80% at 70% 30%,rgba(34,224,122,.18),transparent 60%)}
.phase--green .pill:hover{border-color:rgba(34,224,122,.5);background:rgba(34,224,122,.08)}

.phase--blue{color:#4f9dff}
.phase--blue .phase__badge{background:rgba(79,157,255,.14);color:#4f9dff}
.phase--blue .phase__title{color:#4f9dff}
.phase--blue:hover{border-color:rgba(79,157,255,.45);box-shadow:0 30px 70px -40px rgba(79,157,255,.5)}
.phase--blue .phase__visual{background:radial-gradient(80% 80% at 70% 30%,rgba(79,157,255,.18),transparent 60%)}
.phase--blue .pill:hover{border-color:rgba(79,157,255,.5);background:rgba(79,157,255,.08)}

.phase--gold{color:#e8b04b}
.phase--gold .phase__badge{background:rgba(232,176,75,.16);color:#e8b04b}
.phase--gold .phase__title{color:#e8b04b}
.phase--gold:hover{border-color:rgba(232,176,75,.45);box-shadow:0 30px 70px -40px rgba(232,176,75,.5)}
.phase--gold .phase__visual{background:radial-gradient(80% 80% at 70% 30%,rgba(232,176,75,.2),transparent 60%)}
.phase--gold .pill:hover{border-color:rgba(232,176,75,.5);background:rgba(232,176,75,.08)}

@media(max-width:920px){.phases{grid-template-columns:1fr}.phase__visual{height:130px}}
@media(max-width:820px){.features{gap:1.6rem 2rem}}

/* ===================== SECTION BASE ===================== */
.section{padding:6.5rem 0}
.section--alt{background:
    linear-gradient(180deg,transparent,rgba(34,224,122,.025),transparent)}
.section__head{max-width:640px;margin-bottom:3.2rem}
.section__head h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:700}
.section__head p{color:var(--muted);font-size:1.08rem;margin-top:1rem}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--green);font-weight:600;padding:.4rem .9rem;border:1px solid var(--line);
    border-radius:999px;margin-bottom:1.2rem;background:var(--surface)}

/* ===================== PROBLEMAS ===================== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.problem-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.7rem;transition:transform .4s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden}
.problem-card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;
    background:linear-gradient(var(--green),transparent);opacity:.5;transition:opacity .4s}
.problem-card:hover{transform:translateY(-6px);border-color:rgba(34,224,122,.35);background:var(--surface-2)}
.problem-card:hover::before{opacity:1}
.problem-card__num{font-family:'Space Grotesk';font-size:1.5rem;font-weight:700;color:var(--green);opacity:.6}
.problem-card p{margin-top:.8rem;color:#cfe0d7;font-size:.97rem}
.realidad__message{margin-top:2.6rem;padding:2.2rem 2.6rem;border-radius:var(--radius);
    border:1px solid rgba(34,224,122,.3);background:linear-gradient(160deg,rgba(34,224,122,.08),rgba(255,255,255,.01));
    box-shadow:0 30px 70px -45px rgba(34,224,122,.5);position:relative;overflow:hidden}
.realidad__message::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;
    background:linear-gradient(var(--green),transparent)}
.realidad__message p{font-family:'Space Grotesk';font-size:clamp(1.2rem,2.4vw,1.6rem);
    font-weight:600;color:#fff;line-height:1.4}

/* ===================== HISTORIA (Ayer / Hoy) ===================== */
.historia__split{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:stretch}
.hcard{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:24px;
    overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
    transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.hcard:hover{transform:translateY(-5px)}
.hcard__content{padding:2.4rem}

/* imagen vertical con carrusel por boton */
.hcard__media{position:relative;overflow:hidden;border-right:1px solid var(--line);min-height:420px;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    transition:background-image .3s ease}
.hcard__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,rgba(6,18,12,.85))}
.hcard__year{position:absolute;bottom:1.3rem;left:1.5rem;z-index:2;font-family:'Space Grotesk';
    font-weight:700;font-size:2.2rem;color:#fff;letter-spacing:.03em;
    text-shadow:0 4px 20px rgba(0,0,0,.6)}
.hcard__year--hoy{color:var(--green)}
.hcard__media-btn{position:absolute;bottom:1.3rem;right:1.3rem;z-index:3;width:44px;height:44px;
    border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(6,18,12,.6);
    backdrop-filter:blur(5px);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;
    display:grid;place-items:center;transition:border-color .25s,background .25s,color .25s,transform .25s}
.hcard__media-btn:hover{border-color:var(--green);color:var(--green);
    background:rgba(34,224,122,.16);transform:scale(1.08)}
.hcard__counter{position:absolute;top:1.1rem;right:1.2rem;z-index:3;font-size:.78rem;color:#eaf4ee;
    padding:.3rem .65rem;border-radius:999px;background:rgba(6,18,12,.6);border:1px solid var(--line)}

/* AYER: escena sobria, esfuerzo, tonos frios y apagados */
.hcard__media--ayer{
    background:
        radial-gradient(70% 90% at 25% 20%,rgba(120,140,160,.18),transparent 60%),
        repeating-linear-gradient(125deg,rgba(255,255,255,.03) 0 14px,transparent 14px 30px),
        linear-gradient(160deg,#11161b,#0b0f13);
    filter:saturate(.7)}
.hcard__media--ayer::before{content:"";position:absolute;left:8%;bottom:0;width:42%;height:70%;
    background:linear-gradient(180deg,rgba(60,72,86,.5),transparent);
    clip-path:polygon(0 100%,15% 30%,40% 55%,55% 18%,80% 48%,100% 25%,100% 100%);opacity:.6}

/* HOY: escena de exito, luces y brillo verde */
.hcard__media--hoy{
    background:
        radial-gradient(60% 70% at 75% 25%,rgba(34,224,122,.35),transparent 60%),
        radial-gradient(50% 60% at 20% 80%,rgba(22,192,106,.25),transparent 60%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px),
        linear-gradient(160deg,#0a2418,#0d3623)}
.hcard__media--hoy::before{content:"";position:absolute;right:8%;bottom:14%;width:60%;height:4px;
    background:var(--green);transform:rotate(-26deg);transform-origin:right;border-radius:4px;
    box-shadow:0 0 22px var(--green),0 0 6px #fff;opacity:.9}
.hcard p{color:var(--muted);margin-bottom:1rem;font-size:.98rem}
.hcard__label{display:inline-block;font-family:'Space Grotesk';font-weight:700;font-size:.72rem;
    letter-spacing:.14em;text-transform:uppercase;padding:.4rem .9rem;border-radius:8px;
    margin-bottom:1.1rem;border:1px solid var(--line);color:var(--muted)}
.hcard__title{font-size:1.7rem;font-weight:700;margin-bottom:1.2rem}
.hcard__title--big{font-size:2.6rem;letter-spacing:.02em}

/* AYER (mas sobrio) */
.hcard--ayer{background:rgba(255,255,255,.02)}
.hcard--ayer:hover{border-color:rgba(255,255,255,.18)}
.hcard--ayer .hcard__title{color:#cfe0d7}

/* HOY (destacado en verde) */
.hcard--hoy{border-color:rgba(34,224,122,.32);
    background:linear-gradient(160deg,rgba(34,224,122,.08),rgba(255,255,255,.01));
    box-shadow:0 30px 70px -45px rgba(34,224,122,.5)}
.hcard--hoy:hover{border-color:rgba(34,224,122,.5)}
.hcard__label--hoy{color:var(--green);border-color:rgba(34,224,122,.4);background:rgba(34,224,122,.1)}
.hcard--hoy .hcard__title{color:#fff}
.hcard__highlight{color:var(--green)!important;font-weight:600}
.hcard__list{list-style:none;display:grid;gap:.7rem;margin:.4rem 0 1.4rem}
.hcard__list li{position:relative;padding-left:1.6rem;color:#cfe0d7;font-size:.96rem}
.hcard__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
    border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.hcard__close{padding-top:1.2rem;border-top:1px solid var(--line);color:#cfe0d7!important;margin-bottom:0}

/* conector AYER -> HOY (vertical, apunta hacia abajo) */
.historia__arrow{display:flex;align-items:center;justify-content:center;height:44px}
.historia__arrow span{position:relative;width:2px;height:30px;background:linear-gradient(180deg,var(--line),var(--green))}
.historia__arrow span::after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) rotate(45deg);
    width:9px;height:9px;border-bottom:2px solid var(--green);border-right:2px solid var(--green)}

@media(max-width:720px){
    .hcard{grid-template-columns:1fr}
    .hcard__media{min-height:260px;border-right:none;border-bottom:1px solid var(--line)}
}

/* ===================== CARRUSEL ===================== */
.carousel{margin-top:1rem}
.carousel__viewport{overflow:hidden;width:min(var(--maxw),92%);margin-inline:auto}
.carousel__track{display:flex;gap:1.4rem;transition:transform .6s var(--ease)}
.case{flex:0 0 calc((100% - 2.8rem)/3);min-width:0;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;overflow:hidden;
    transition:border-color .35s,transform .35s}
.case:hover{border-color:rgba(34,224,122,.35);transform:translateY(-4px)}

/* video del testimonio */
.case__video{position:relative;aspect-ratio:16/10;margin:-1.6rem -1.6rem 1.4rem;
    border-bottom:1px solid var(--line);cursor:pointer;overflow:hidden;
    background:
        radial-gradient(60% 70% at 50% 40%,rgba(34,224,122,.16),transparent 60%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px),
        linear-gradient(160deg,#08160e,#0b2417)}
.case__video::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(6,18,12,.7))}
.case__video-tag{position:absolute;top:.8rem;left:.8rem;z-index:2;font-size:.66rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-weight:600;
    padding:.3rem .6rem;border-radius:7px;background:rgba(6,18,12,.65);border:1px solid var(--line)}
.case__duration{position:absolute;bottom:.7rem;right:.8rem;z-index:2;font-size:.72rem;
    color:#dfeae4;padding:.2rem .5rem;border-radius:6px;background:rgba(6,18,12,.7)}
.case__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.6);
    background:rgba(34,224,122,.18);backdrop-filter:blur(3px);cursor:pointer;
    transition:transform .3s var(--ease),background .3s}
.case__play::after{content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
    border-left:16px solid var(--green);border-top:10px solid transparent;border-bottom:10px solid transparent}
.case__video:hover .case__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(34,224,122,.32)}

.case__top{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.case__avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
    font-family:'Space Grotesk';font-weight:700;color:#04130b;
    background:linear-gradient(135deg,var(--green),var(--green-deep));flex-shrink:0}
.case__top h3{font-size:1.05rem}
.case__age{color:var(--muted);font-size:.8rem}
.case__metric{margin-left:auto;font-family:'Space Grotesk';font-weight:700;color:var(--green);
    background:rgba(34,224,122,.1);border:1px solid rgba(34,224,122,.25);
    padding:.3rem .7rem;border-radius:10px;font-size:.9rem;white-space:nowrap}
.case__row{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--line)}
.case__row span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.case__row p{font-size:.9rem;color:#cfe0d7}
.case__row--res p{color:var(--green);font-weight:500}
@media(max-width:880px){.case{flex-basis:calc((100% - 1.4rem)/2)}}
@media(max-width:600px){.case{flex-basis:100%}}

.carousel__controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem}
.carousel__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
    background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;
    transition:border-color .25s,background .25s,color .25s}
.carousel__btn:hover{border-color:var(--green);color:var(--green);background:var(--surface-2)}
.carousel__dots{display:flex;gap:.5rem}
.carousel__dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;
    background:var(--line);transition:width .3s,background .3s}
.carousel__dots button.active{width:26px;border-radius:6px;background:var(--green)}

/* ===================== GALERIA INFINITA ===================== */
.gallery{margin-top:3.5rem}
.gallery__head{margin-bottom:1.6rem}
.gallery__head .tag{margin-bottom:.8rem}
.gallery__head h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}
.marquee-wrap{position:relative}
.marquee-wrap::before,.marquee-wrap::after{content:"";position:absolute;top:0;bottom:0;width:16%;
    z-index:3;pointer-events:none}
.marquee-wrap::before{left:0;
    background:linear-gradient(90deg,var(--bg) 0%,rgba(6,18,12,.75) 35%,transparent 100%)}
.marquee-wrap::after{right:0;
    background:linear-gradient(270deg,var(--bg) 0%,rgba(6,18,12,.75) 35%,transparent 100%)}
@media(max-width:560px){.marquee-wrap::before,.marquee-wrap::after{width:12%}}
.marquee{position:relative;overflow-x:auto;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing}
.marquee__track{display:flex;gap:1.1rem;width:max-content}

.gtile{position:relative;flex:0 0 320px;height:210px;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);padding:0;pointer-events:none;
    background-size:cover;background-position:center;background-repeat:no-repeat}

/* 8 escenas distintas generadas con CSS */
.gtile--1{background:radial-gradient(60% 70% at 30% 30%,rgba(34,224,122,.3),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),linear-gradient(160deg,#08160e,#0c2a1a)}
.gtile--2{background:radial-gradient(70% 60% at 70% 40%,rgba(79,157,255,.28),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px),linear-gradient(160deg,#0a131f,#0d2236)}
.gtile--3{background:radial-gradient(60% 70% at 50% 30%,rgba(232,176,75,.28),transparent 60%),linear-gradient(160deg,#1a1407,#2a200c)}
.gtile--4{background:radial-gradient(70% 80% at 25% 40%,rgba(34,224,122,.22),transparent 60%),radial-gradient(50% 60% at 80% 70%,rgba(22,192,106,.2),transparent 60%),linear-gradient(160deg,#09160f,#0e2a1c)}
.gtile--5{background:conic-gradient(from 200deg at 60% 40%,rgba(34,224,122,.25),transparent 40%),linear-gradient(160deg,#0a1a12,#10301f)}
.gtile--6{background:radial-gradient(60% 70% at 40% 60%,rgba(79,157,255,.2),transparent 60%),radial-gradient(50% 60% at 75% 25%,rgba(34,224,122,.2),transparent 60%),linear-gradient(160deg,#0a1620,#0d2630)}
.gtile--7{background:repeating-linear-gradient(115deg,rgba(34,224,122,.08) 0 8px,transparent 8px 22px),linear-gradient(160deg,#08160e,#0b2417)}
.gtile--8{background:radial-gradient(70% 80% at 70% 70%,rgba(232,176,75,.22),transparent 60%),radial-gradient(50% 60% at 25% 30%,rgba(34,224,122,.18),transparent 60%),linear-gradient(160deg,#11140a,#10220f)}

/* modal imagen */
.imodal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
    padding:2rem;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.imodal.open{opacity:1;visibility:visible}
.imodal__backdrop{position:absolute;inset:0;background:rgba(2,8,5,.85);backdrop-filter:blur(8px)}
.imodal__close{position:absolute;top:1.2rem;right:1.2rem;z-index:5}
.imodal__figure{position:relative;margin:0;width:min(960px,100%);max-height:88vh;display:flex;
    flex-direction:column;transform:scale(.96);transition:transform .4s var(--ease)}
.imodal.open .imodal__figure{transform:none}
.imodal__img{width:100%;height:82vh;border-radius:18px;border:1px solid var(--line);
    box-shadow:0 50px 120px -40px rgba(0,0,0,.85);background-color:#06120c;
    background-size:contain;background-position:center;background-repeat:no-repeat}
.imodal__caption{text-align:center;color:#dfeae4;margin-top:1rem;font-size:1rem;font-weight:500}

@media(max-width:560px){.gtile{flex-basis:240px;height:160px}}

/* ===================== SISTEMA (cards con imagen) ===================== */
.system-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.3rem}
.syscard{position:relative;min-height:380px;border-radius:22px;overflow:hidden;
    border:1px solid var(--line);display:flex;align-items:flex-end;
    transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.syscard::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(6,18,12,.15) 0%,rgba(6,18,12,.55) 55%,rgba(4,12,8,.95) 100%)}
.syscard:hover{transform:translateY(-6px);border-color:rgba(34,224,122,.5);
    box-shadow:0 40px 80px -40px rgba(34,224,122,.45)}
.syscard__overlay{position:relative;z-index:2;padding:2rem 2rem 2.2rem}
.syscard__kicker{display:inline-block;font-family:'Space Grotesk';font-weight:700;font-size:.74rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:.9rem}
.syscard__title{font-size:1.5rem;font-weight:700;line-height:1.12;color:#fff;margin-bottom:.7rem}
.syscard__desc{color:#c4d6cc;font-size:.95rem;line-height:1.55}

/* escenas de fondo (estilo foto, generadas con CSS) */
.syscard::before{content:"";position:absolute;inset:0;z-index:0;
    transition:transform .6s var(--ease)}
.syscard:hover::before{transform:scale(1.06)}
.syscard--1::before{background:
    radial-gradient(70% 60% at 75% 25%,rgba(34,224,122,.32),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px),
    linear-gradient(160deg,#06140d,#0a2417)}
.syscard--2::before{background:
    radial-gradient(60% 70% at 25% 30%,rgba(79,157,255,.26),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 18px),
    linear-gradient(160deg,#091420,#0b1f30)}
.syscard--3::before{background:
    radial-gradient(75% 70% at 70% 35%,rgba(34,224,122,.34),transparent 60%),
    radial-gradient(40% 50% at 30% 80%,rgba(22,192,106,.22),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),
    linear-gradient(160deg,#05130c,#0a2719)}
.syscard--4::before{background:
    conic-gradient(from 210deg at 65% 35%,rgba(34,224,122,.24),transparent 45%),
    linear-gradient(160deg,#07160e,#0e2c1d)}
.syscard--5::before{background:
    radial-gradient(60% 70% at 50% 30%,rgba(232,176,75,.24),transparent 60%),
    radial-gradient(50% 60% at 80% 75%,rgba(34,224,122,.18),transparent 60%),
    linear-gradient(160deg,#0d1208,#10240f)}
.syscard--6::before{background:
    radial-gradient(70% 70% at 30% 35%,rgba(34,224,122,.26),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 8px,transparent 8px 22px),
    linear-gradient(160deg,#06140d,#0b2417)}
/* destello tipo neon / linea de tendencia */
.syscard__overlay::before{content:"";position:absolute;right:1.5rem;top:-7rem;width:62%;height:3px;
    background:var(--green);transform:rotate(-20deg);transform-origin:right;border-radius:3px;
    box-shadow:0 0 20px var(--green);opacity:.5}

/* ===================== INCLUYE ===================== */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem}
.include{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.3rem;border-radius:14px;
    background:var(--surface);border:1px solid var(--line);font-size:.96rem;color:#dfeae4;
    transition:border-color .3s,background .3s}
.include:hover{border-color:rgba(34,224,122,.4);background:var(--surface-2)}
.include__mark{width:22px;height:22px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--green),var(--green-deep));position:relative}
.include__mark::after{content:"";position:absolute;top:46%;left:50%;width:5px;height:9px;
    border:solid #04130b;border-width:0 2px 2px 0;transform:translate(-50%,-55%) rotate(45deg)}

/* ===================== PARA QUIEN ===================== */
.forwhom{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.forwhom__col{padding:2rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.forwhom__col h3{font-size:1.25rem;margin-bottom:1.3rem}
.forwhom__col ul{list-style:none;display:grid;gap:1rem}
.forwhom__col li{position:relative;padding-left:2rem;color:#cfe0d7;font-size:.96rem}
.forwhom__col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:1.1rem;line-height:1.4}
.forwhom__col--no{border-color:rgba(255,90,90,.2)}
.forwhom__col--no li::before{content:"\00d7";color:#ff6b6b}
.forwhom__col--yes{border-color:rgba(34,224,122,.3);background:rgba(34,224,122,.04)}
.forwhom__col--yes li::before{content:"\2713";color:var(--green)}
@media(max-width:760px){.forwhom{grid-template-columns:1fr}}

/* ===================== CAMINOS ===================== */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.path{padding:2.2rem;border-radius:var(--radius);border:1px solid var(--line);position:relative}
.path h3{font-size:1.4rem;margin-bottom:1.4rem}
.path ul{list-style:none;display:grid;gap:.9rem}
.path li{position:relative;padding-left:1.6rem;color:#cfe0d7;font-size:.96rem}
.path li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%}
.path--malo{background:var(--surface);opacity:.85}
.path--malo li::before{background:#ff6b6b}
.path--bueno{background:linear-gradient(160deg,rgba(34,224,122,.1),rgba(34,224,122,.02));
    border-color:rgba(34,224,122,.4);box-shadow:0 30px 70px -40px rgba(34,224,122,.5)}
.path--bueno h3{color:var(--green)}
.path--bueno li::before{background:var(--green);box-shadow:0 0 8px var(--green)}
@media(max-width:760px){.paths{grid-template-columns:1fr}}

/* ===================== FAQ ===================== */
.faq{display:grid;gap:.8rem}
.faq__item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;
    transition:border-color .3s}
.faq__item.open{border-color:rgba(34,224,122,.35)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.3rem 1.5rem;background:none;border:none;color:var(--text);font-size:1rem;
    font-weight:600;text-align:left;cursor:pointer;font-family:inherit}
.faq__icon{position:relative;width:18px;height:18px;flex-shrink:0}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--green);
    border-radius:2px;transition:transform .3s}
.faq__icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}
.faq__icon::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.faq__item.open .faq__icon::after{transform:translateX(-50%) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 1.5rem 1.3rem;color:var(--muted);font-size:.95rem}

/* ===================== CTA ===================== */
.cta{position:relative;padding:6rem 0;overflow:hidden}
.cta__glow{position:absolute;inset:0;z-index:-1;
    background:radial-gradient(60% 100% at 50% 100%,rgba(34,224,122,.18),transparent 70%)}
.cta__inner{text-align:center;max-width:680px;margin-inline:auto;
    background:linear-gradient(160deg,rgba(34,224,122,.08),var(--surface));
    border:1px solid rgba(34,224,122,.25);border-radius:28px;padding:3.5rem 2rem;
    box-shadow:0 40px 90px -40px rgba(34,224,122,.4)}
.cta__inner h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.cta__inner p{color:var(--muted);margin:1rem 0 2rem}
.cta__note{display:block;margin-top:1.2rem;color:var(--muted);font-size:.85rem}

/* ===================== FOOTER ===================== */
.footer{border-top:1px solid var(--line);padding:3rem 0;background:var(--bg-2)}
.footer__inner{display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center}
.footer__inner p{color:var(--muted);font-size:.92rem}
.footer__inner small{color:var(--muted);opacity:.7;font-size:.8rem}

/* ===================== WHATSAPP FLOAT ===================== */
.whatsapp-float{position:fixed;bottom:1.6rem;right:1.6rem;z-index:60;width:58px;height:58px;
    border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-deep));
    box-shadow:0 14px 34px -8px rgba(34,224,122,.7);display:grid;place-items:center;
    transition:transform .3s var(--ease)}
.whatsapp-float::after{content:"";width:28px;height:28px;background:#04130b;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1012 2zm5 13.6c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .2-3-1-2.4-1.2-3.9-3.8-4-4-.1-.2-1-1.3-1-2.5s.6-1.7.9-2c.2-.2.4-.3.6-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.2 0 .4 0 .5l-.4.5c-.2.2-.3.4-.1.7.2.3.8 1.3 1.7 2 .9.8 1.6 1 1.9 1.2.3.1.5.1.7-.1l.7-.9c.2-.2.4-.2.6-.1l1.8.9c.3.1.5.2.5.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.whatsapp-float:hover{transform:scale(1.1) rotate(6deg)}

/* ===================== MODAL VIDEO ===================== */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
    padding:1.5rem;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,8,5,.8);backdrop-filter:blur(8px)}
.modal__dialog{position:relative;width:min(880px,100%);border:1px solid var(--line);border-radius:22px;
    overflow:hidden;background:var(--bg-2);box-shadow:0 50px 120px -40px rgba(0,0,0,.85);
    transform:translateY(20px) scale(.97);transition:transform .4s var(--ease)}
.modal.open .modal__dialog{transform:none}
.modal__close{position:absolute;top:.9rem;right:.9rem;z-index:5;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:rgba(6,18,12,.7);color:#fff;font-size:1.5rem;line-height:1;
    cursor:pointer;transition:border-color .25s,background .25s}
.modal__close:hover{border-color:var(--green);color:var(--green);background:rgba(34,224,122,.1)}
.modal__stage{position:relative;aspect-ratio:16/9;
    background:
        radial-gradient(60% 70% at 50% 40%,rgba(34,224,122,.18),transparent 60%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px),
        linear-gradient(160deg,#08160e,#0b2417)}
.modal__stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(115deg,transparent 40%,rgba(34,224,122,.1) 50%,transparent 60%)}
.modal__stage.has-video::after{display:none}
.modal__stage .player__play{width:96px;height:96px}
.modal__stage video,.modal__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
    display:block;z-index:4}
.modal__bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:.8rem;z-index:2;
    padding:.9rem 1.1rem;background:linear-gradient(transparent,rgba(6,18,12,.9))}
.modal__bar-time{font-size:.78rem;color:var(--muted);white-space:nowrap}
.modal__bar-track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.modal__bar-track span{display:block;width:0;height:100%;background:var(--green);border-radius:4px;
    transition:width .25s}
.modal__info{display:flex;align-items:center;gap:.9rem;padding:1.3rem 1.6rem}
.modal__avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    font-family:'Space Grotesk';font-weight:700;color:#04130b;
    background:linear-gradient(135deg,var(--green),var(--green-deep))}
.modal__info h3{font-size:1.1rem}
.modal__age{color:var(--muted);font-size:.85rem}
.modal__badge{margin-left:auto;font-size:.78rem;color:var(--green);padding:.4rem .8rem;border-radius:8px;
    background:rgba(34,224,122,.1);border:1px solid rgba(34,224,122,.25)}
body.modal-open{overflow:hidden}
@media(max-width:520px){.modal__badge{display:none}}

/* ===================== REVEAL ANIMATION ===================== */
.reveal{opacity:0;transform:translateY(34px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}