:root{
  --brand:#18c96b;
  --brand-dark:#0ea75a;

  --ink:#0b0b0b;
  --text:#f5fff7;
  --muted:#cfe3d6;

  --shadow:0 16px 36px rgba(0,0,0,.38);
  --container:1240px;




  --nav-offset:64px;
}

@media (max-width:820px){
  :root{
    --nav-offset:72px;
  }
}

   
/* ===============================
   BASE GLOBAL (FINAL LIMPIO)
=============================== */

*{
  box-sizing:border-box;
}

html{
  width:100%;
}

body{
  margin:0;
  color:var(--text);
font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


  background:#070b08;
  background-image:var(--texture);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:scroll;

  overflow-x:clip; /* ✔ NO rompe sticky */
}

/* Imágenes nunca empujan layout */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Contenedor */
.container{
  width:min(var(--container),92vw);
  margin:0 auto;
}

 /* ==========================================================
   NAVBAR 2026 - PARTE 1
   Reemplaza TODO el CSS actual del NAV
========================================================== */

nav{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:#071107;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* Estado al hacer scroll */

nav.scrolled{

    background:rgba(7,17,7,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(140,255,0,.08);

    box-shadow:
    0 10px 35px rgba(0,0,0,.35);

}

/* ==========================================================
   BARRA LED SUPERIOR
========================================================== */

nav::before{

content:"";

position:absolute;

top:0;
left:0;

width:var(--scroll-progress,0%);

height:3px;

background:
linear-gradient(
90deg,
#46d800,
#5ef500,
#84ff00,
#b4ff39,
#84ff00,
#5ef500,
#46d800
);

background-size:300% 100%;

animation:ledFlow 4s linear infinite;

box-shadow:

0 0 6px rgba(94,245,0,.55),

0 0 12px rgba(94,245,0,.35),

0 0 18px rgba(94,245,0,.15);

transition:width .12s linear;

z-index:5;

}

@keyframes ledFlow{

0%{

background-position:0% 50%;

}

100%{

background-position:300% 50%;

}

}

/* ==========================================================
   CONTENEDOR
========================================================== */

.nav-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

min-height:85px;

padding:0 22px;

position:relative;

}

/* ==========================================================
   LOGO
========================================================== */

.brand{

display:flex;

align-items:center;

flex-shrink:0;

text-decoration:none;

}

.brand img{
    width:80px;
    height:auto;
    display:block;
    transition:transform .28s ease;
}

nav.scrolled .brand img{
    transform:scale(.94);
}

/* ==========================================================
   PANEL DESKTOP
========================================================== */

.nav-panel{

display:flex;

align-items:center;

justify-content:flex-end;

gap:34px;

flex:1;

}

/* ==========================================================
   MENU
========================================================== */

.menu{

display:flex;

align-items:center;

gap:28px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

margin:0;

padding:0;

}

.menu a{

position:relative;

display:flex;

align-items:center;

height:44px;

padding:0 4px;

font-size:15px;

font-weight:700;

letter-spacing:.2px;

color:#ffffff;

text-decoration:none;

transition:

color .25s ease,

transform .25s ease;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:5px;

width:0;

height:2px;

border-radius:999px;

background:#8dff00;

transition:width .28s ease;

}

.menu a:hover{

color:#9fff32;

}

.menu a:hover::after{

width:100%;

}

/* ==========================================================
   REDES
========================================================== */

.header-social{

    display:flex;
    align-items:center;
    gap:10px;

}

.header-social a{

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    flex-shrink:0;

    border-radius:50%;

    color:#ffffff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}

.header-social svg{

    width:18px;
    height:18px;

    display:block;

    fill:currentColor;

    color:inherit;

    transition:
        transform .25s ease,
        color .25s ease;

}

.header-social a:hover{

    color:#b9ff3b;

    background:rgba(130,255,0,.12);

    border-color:rgba(130,255,0,.35);

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(130,255,0,.18);

}

.header-social a:hover svg{

    transform:scale(1.12);

}

.header-social a:focus-visible{

    outline:2px solid #b9ff3b;

    outline-offset:3px;

}

/* ==========================================================
   CTA
========================================================== */

.nav-cta{

display:inline-flex;
align-items:center;
justify-content:center;

gap:10px;

padding:0 24px;

height:52px;

border-radius:999px;

font-size:15px;

font-weight:800;

white-space:nowrap;

background:linear-gradient(
135deg,
#b9ff3b,
#8df000
);

color:#071107;

text-decoration:none;

box-shadow:

0 8px 20px rgba(120,255,0,.22);

transition:.25s;

}

.nav-cta:hover{

transform:translateY(-2px);

box-shadow:

0 14px 28px rgba(120,255,0,.35);

}

.nav-cta svg{

width:18px;

height:18px;

fill:#081108;

flex-shrink:0;

}

nav.scrolled .nav-row{

min-height:68px;

}
/* ==========================================================
   NAVBAR 2026 - PARTE 2
========================================================== */

/* ===========================
   HAMBURGUESA
=========================== */

.nav-burger{

display:none;

align-items:center;
justify-content:center;

flex-direction:column;

gap:5px;

width:48px;
height:48px;

border:none;

border-radius:14px;

cursor:pointer;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.08);

transition:
background .25s ease,
transform .25s ease,
border-color .25s ease;

}

.nav-burger:hover{

background:rgba(255,255,255,.14);

border-color:rgba(120,255,0,.25);

}

.nav-burger span{

display:block;

width:22px;

height:2px;

background:#fff;

border-radius:10px;

transition:
transform .28s ease,
opacity .25s ease;

}

.nav-burger.is-open span:nth-child(1){

transform:
translateY(7px)
rotate(45deg);

}

.nav-burger.is-open span:nth-child(2){

opacity:0;

}

.nav-burger.is-open span:nth-child(3){

transform:
translateY(-7px)
rotate(-45deg);

}

/* ===========================
   DESKTOP
=========================== */

@media (min-width:821px){

.nav-panel{

display:flex !important;

align-items:center;

justify-content:flex-end;

gap:34px;

}

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:820px){

nav{

overflow:visible;

}

.nav-row{

min-height:64px;

padding:10px 18px;

display:flex;

align-items:center;

justify-content:space-between;

gap:0;

}

.brand{

z-index:130;

}

.brand img{

width:88px;

height:auto;

}

.nav-burger{

display:flex;

z-index:140;

}

/* PANEL */

.nav-panel{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    background:#071107;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:34px;

    padding:90px 28px 40px;

    transform:translateY(-100%);

    opacity:0;

    pointer-events:none;

    transition:
        transform .35s ease,
        opacity .28s ease;

    z-index:120;

    overflow:hidden;

}

.nav-panel.is-open{

    transform:translateY(0);

    opacity:1;

    pointer-events:auto;

}

/* MENU */

.menu{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

margin:0;

padding:0;

}

.menu li{

width:100%;

list-style:none;

}

.menu a{

display:flex;

justify-content:center;

align-items:center;

width:100%;

min-height:52px;

font-size:22px;

font-weight:700;

border-radius:18px;

background:rgba(255,255,255,.04);

}

.menu a::after{

display:none;

}

.menu a:hover{

background:rgba(120,255,0,.08);

}

/* CTA */

.nav-cta{

    max-width:290px;

    height:52px;

    padding:0 22px;

    font-size:16px;

}

/* REDES */

.header-social{

justify-content:center;

flex-wrap:wrap;

gap:14px;

}

.header-social a{

width:46px;

height:46px;

}

.header-social svg{

width:20px;

height:20px;

}

}

/* ===========================
   DESKTOP GRANDE
=========================== */

@media (min-width:1280px){

.nav-row{

padding:0 36px;

}

.menu{

gap:34px;

}

}

/* ===========================
   ACCESIBILIDAD
=========================== */

.menu a:focus-visible,
.nav-cta:focus-visible,
.header-social a:focus-visible,
.nav-burger:focus-visible{

outline:2px solid #8fff00;

outline-offset:3px;

}

/* ===========================
   MOTION SAFE
=========================== */

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================================
   HERO 2026
   PARTE 1 - DESKTOP
========================================================== */

.hero{

    position:relative;

    min-height:760px;

    background:#050505;

    overflow:visible;

    isolation:isolate;

}

/* ==========================================================
   IMAGEN
========================================================== */

.hero__media{

    position:absolute;

    inset:0;

    z-index:1;

}

#heroLCP{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:75% center !important;

}

/* ==========================================================
   OVERLAY
========================================================== */

.hero__overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.84) 22%,
        rgba(0,0,0,.58) 48%,
        rgba(0,0,0,.20) 74%,
        rgba(0,0,0,0) 100%
    );

}

/* ==========================================================
   CONTENEDOR
========================================================== */

.hero .wrap{

    position:relative;

    z-index:5;

    min-height:760px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

/* ==========================================================
   CONTENIDO
========================================================== */

.hero__content{

    flex:1;

    display:flex;

    align-items:center;

    padding-top:110px;

}

.hero__text{

    width:100%;

    max-width:610px;

    margin-left:70px;

    padding-top:0;

}

/* ==========================================================
   EYEBROW
========================================================== */

.eyebrow{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(177,255,54,.08);

    border:1px solid rgba(177,255,54,.18);

    color:#C7FF38;

    font-size:13px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

    margin-bottom:22px;

}

/* ==========================================================
   TITULO
========================================================== */

.hero h1{

    margin:0;

    font-size:clamp(60px,5vw,76px);

    line-height:.92;

    font-weight:900;

    letter-spacing:-3px;

}

.hero h1 span{

    display:block;

    color:#C7FF38;

}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

.hero__description{

    margin-top:18px;

    max-width:560px;

    font-size:18px;

    line-height:1.65;

    color:rgba(255,255,255,.90);

}

/* ==========================================================
   BOTONES
========================================================== */

.cta-row{

    display:flex;

    gap:16px;

    margin-top:24px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    font-size:16px;

    font-weight:800;

    text-decoration:none;

    transition:all .25s ease;

}

.btn--primary{

    color:#071107;

    background:linear-gradient(180deg,#C7FF38,#9AE600);

    box-shadow:0 14px 30px rgba(150,255,0,.25);

}

.btn--primary:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 36px rgba(150,255,0,.35);

}

.btn--secondary{

    color:#fff;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

}

.btn--secondary:hover{

    background:rgba(255,255,255,.14);

}

/* ==========================================================
   BARRA MÉTRICAS
========================================================== */

.hero__metrics{

    position:relative;

    z-index:20;

    margin-top:48px;

    margin-bottom:-60px;

}

.metrics{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    border-radius:26px;

    background:rgba(15,15,15,.96);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    box-shadow:0 30px 60px rgba(0,0,0,.45);

}

.metric{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:34px 24px;

}

.metric:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:22%;

    width:1px;

    height:56%;

    background:rgba(255,255,255,.08);

}

.metric .ico{

    width:40px;

    height:40px;

    margin-bottom:16px;
  filter:brightness(0) saturate(100%) invert(83%) sepia(87%) saturate(706%) hue-rotate(32deg) brightness(105%) contrast(104%);
}

.metric .big{

    font-size:52px;

    font-weight:900;

    line-height:1;

    margin-bottom:10px;

}

.metric .lab{

    font-size:16px;

    line-height:1.45;

    color:rgba(255,255,255,.72);

}

/* ==========================================================
   HERO LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

.hero__text{

    margin-left:0;

}

}

/* ==========================================================
   HERO 2026
   PARTE 2 - RESPONSIVE
========================================================== */

@media (max-width:1200px){

.hero{

    min-height:700px;

}

/* ...resto de tu código... */

}
/* ==========================================================
   HERO 2026
   PARTE 2 - RESPONSIVE
========================================================== */

@media (max-width:1200px){

.hero{

    min-height:700px;

}

.hero .wrap{

    min-height:700px;

}

.hero__text{

    margin-left:40px;

    max-width:560px;

}

.hero h1{

    font-size:58px;

}

.hero__description{

    font-size:17px;

    max-width:520px;

}

.hero__metrics{

    margin-top:42px;

    margin-bottom:-50px;

}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.hero{

    min-height:760px;

}

.hero .wrap{

    min-height:760px;

}

.hero__content{

    align-items:flex-start;

    padding-top:80px;

}

.hero__text{

    margin-left:30px;

    max-width:500px;

}

.hero h1{

    font-size:50px;

    line-height:.95;

}

.hero__description{

    font-size:16px;

    line-height:1.65;

}

.hero__metrics{

    margin-top:38px;

    margin-bottom:-40px;

}

.metrics{

    grid-template-columns:repeat(2,1fr);

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:820px){

.hero{

    min-height:auto;

}

.hero .wrap{

    min-height:auto;

    padding:110px 20px 40px;

}

.hero__media{

    position:absolute;

    inset:0;

}

#heroLCP{

    object-fit:cover;

    object-position:68% center;

}

.hero__overlay{

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.28) 35%,
        rgba(0,0,0,.65) 100%
    );

}

.hero__content{

    display:block;

    padding-top:0;

}

.hero__text{

    margin:0;

    max-width:100%;

}

.eyebrow{

    margin-bottom:16px;

    font-size:12px;

}

.hero h1{

    font-size:38px;

    line-height:.95;

    letter-spacing:-1px;

}

.hero__description{

    margin-top:16px;

    font-size:15px;

    line-height:1.65;

    max-width:100%;

}

.cta-row{

    flex-direction:column;

    gap:14px;

    margin-top:24px;

}

.btn{

    width:100%;

    max-width:320px;

    height:56px;

}

/* ===========================
   MÉTRICAS MOBILE
=========================== */

.hero__metrics{

    margin-top:35px;

    margin-bottom:0;

}

.metrics{

    display:flex;

    gap:14px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    background:transparent;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    padding-bottom:10px;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.metrics::-webkit-scrollbar{

    display:none;

}

.metric{

    min-width:100%;

    flex:0 0 100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:160px;

    padding:20px;

    border-radius:22px;

    background:#121212;

    border:1px solid rgba(255,255,255,.08);

}

.metric::after{

    display:none !important;

}

.metric .ico{

     width:64px;

    height:64px;

    margin:0 auto 14px;
    object-fit:contain;

    filter:brightness(0) saturate(100%) invert(83%) sepia(87%) saturate(706%) hue-rotate(32deg) brightness(105%) contrast(104%);

}

.metric .big{

    font-size:68px;

    line-height:1;

    margin-bottom:8px;

    font-weight:900;

}

.metric .lab{

    font-size:20px;

    line-height:1.2;

    text-align:center;

    max-width:220px;

    margin:0 auto;

}

}

/* ==========================================================
   MOBILE PEQUEÑO
========================================================== */

@media (max-width:480px){

.hero .wrap{

    padding:100px 18px 30px;

}

.hero h1{

    font-size:32px;

}

.hero__description{

    font-size:15px;

}

.btn{

    max-width:100%;

}

.metric{

    padding:24px 18px;

}

.metric .ico{

    width:30px;

    height:30px;

}

.metric .big{

    font-size:40px;

}

.metric .lab{

    font-size:14px;

}

}

/* ==========================================================
   NOTEBOOKS
========================================================== */

@media (min-width:1024px) and (max-width:1600px){

    #heroLCP{

        object-position:40% center;

    }

}
   
   /* ==========================================================
   PARTNERS 2026
========================================================== */

.partners{

    position:relative;

    z-index:1;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #f5f8f4 0%,
        #f8faf7 55%,
        #ffffff 100%
    );

    color:#111;

    padding:170px 0 90px;

}

.hero{

    z-index:2;

}

.hero .wrap{

    z-index:3;

}

.metrics{

    position:relative;

    z-index:50;

}

/* ==========================================================
   HEADER
========================================================== */

.partners__heading{

    max-width:980px;

    margin:0 auto 70px;

    text-align:center;

}

.partners__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 22px;

    border-radius:999px;

    background:rgba(183,255,56,.12);

    border:1px solid rgba(183,255,56,.20);

    color:#5E9A00;

    font-size:13px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

    margin-bottom:24px;

}

.partners h2{

    margin:0;

    font-size:clamp(42px,5vw,64px);

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

}

.partners h2 span{

    display:block;

    margin-top:8px;

    animation:greenFlow 8s ease-in-out infinite;

}

.partners__heading p{

    max-width:760px;

    margin:28px auto 0;

    font-size:20px;

    line-height:1.8;

    color:#666;

}

/* ==========================================================
   CARRUSEL
========================================================== */

.partners__grid{

    position:relative;

}

.belt{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:16px 0;

}





/* ==========================================================
   TRACK
========================================================== */

.track{

    display:flex;

    align-items:center;

    gap:90px;

    width:max-content;

    animation:marq 30s linear infinite;

    will-change:transform;

}

.track:hover{

    animation-play-state:paused;

}

/* ==========================================================
   LOGOS
========================================================== */

.track img{

    height:72px;

    width:auto;

    flex-shrink:0;

    opacity:.60;

    filter:grayscale(100%);

    transition:

        transform .35s ease,

        opacity .35s ease,

        filter .35s ease;

}

.track img:hover{

    opacity:1;

    filter:none;

    transform:scale(1.10);

}

/* ==========================================================
   ANIMACIONES
========================================================== */

@keyframes marq{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes greenFlow{

    0%{

        color:#4E8E00;

    }

    30%{

        color:#78B900;

    }

    65%{

        color:#B7FF38;

    }

    100%{

        color:#4E8E00;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.partners{

    padding:150px 0 60px;

}

.partners__heading{

    margin-bottom:55px;

}

.partners h2{

    font-size:46px;

}

.partners__heading p{

    font-size:17px;

}

.track{

    gap:70px;

}

.track img{

    height:62px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.partners{

    padding:60px 0 45px;

}

.partners__heading{

    margin-bottom:34px;

    padding:0 20px;

}

.partners__eyebrow{

    font-size:11px;

    padding:10px 18px;

    margin-bottom:18px;

}

.partners h2{

    font-size:34px;

    line-height:1.15;

    letter-spacing:-1px;

}

.partners__heading p{

    margin-top:18px;

    font-size:15px;

    line-height:1.7;

}

.belt::before,
.belt::after{

    width:50px;

}

.track{

    gap:42px;

    animation-duration:22s;

}

.track img{

    height:54px;

}

}

/* ==========================================================
   WHY 2026
   PARTE 1 - DESKTOP
========================================================== */

.why{

    position:relative;

    padding:120px 0;

    background:
    radial-gradient(circle at top,#f9fff8 0%,#f4faf5 45%,#f8fbf8 100%);

    overflow:hidden;

}

.why::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 50% 0%,
    rgba(199,255,56,.10),
    transparent 60%);

    pointer-events:none;

}

.why .container{

    position:relative;

    z-index:2;

}

/* ==========================================================
   HEADING
========================================================== */

.why__heading{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.why__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(199,255,56,.08);

    border:1px solid rgba(155,215,40,.25);

    color:#4a8f1d;

    font-size:13px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

    margin-bottom:26px;

}

.why__heading h2{

    margin:0;

    font-size:clamp(46px,4vw,68px);

    line-height:1.02;

    font-weight:900;

    letter-spacing:-2px;

    color:#111;

}

.why__heading h2 span{

    display:block;

    color:#7acb18;

}

.why__heading p{

    margin:28px auto 0;

    max-width:760px;

    font-size:22px;

    line-height:1.7;

    color:#606060;

}

/* ==========================================================
   GRID
========================================================== */

.why__grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    align-items:stretch;

}

/* ==========================================================
   CARD
========================================================== */

.why__card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:44px 34px 42px;

    min-height:430px;

    border-radius:34px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

    0 18px 40px rgba(0,0,0,.06);

    transition:

    transform .35s ease,

    box-shadow .35s ease;

    overflow:hidden;

}

/* Shine Border */

.why__card::before{

    content:"";

    position:absolute;

    inset:-2px;

    padding:2px;

    border-radius:34px;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(199,255,56,.9),
    transparent);

    opacity:0;

    transition:opacity .35s ease;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.why__card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}

.why__card:hover::before{

    opacity:1;

}

/* ==========================================================
   ICONO
========================================================== */

.why__icon{

    width:128px;

    height:128px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    transition:.35s;

}

.why__icon img{

    width:128px;

    height:128px;

    display:block;

}

.why__card:hover .why__icon{

    transform:scale(1.08);

}

/* ==========================================================
   WHY 2026
   PARTE 2
========================================================== */

/* ==========================================================
   TITULO CARD
========================================================== */

.why__card h3{

    margin:0;

    font-size:36px;

    line-height:1.15;

    font-weight:800;

    color:#111;

    min-height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   LINEA VERDE
========================================================== */

.why__line{

    width:44px;

    height:4px;

    border-radius:999px;

    background:#B7FF36;

    margin:22px auto 26px;

    transition:.35s;

}

.why__card:hover .why__line{

    width:70px;

}

/* ==========================================================
   TEXTO
========================================================== */

.why__card p{

    margin:0;

    font-size:18px;

    line-height:1.75;

    color:#666;

}

/* ==========================================================
   SHINE ANIMATION
========================================================== */

.why__card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:60%;

    height:320%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:rotate(25deg);

    opacity:0;

}

.why__card:hover::after{

    animation:whyShine .9s ease;

}

@keyframes whyShine{

    0%{

        left:-80%;

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        left:170%;

        opacity:0;

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .why__grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

}

@media (max-width:768px){

    .why{

        padding:90px 0;

    }

    .why__heading{

        margin-bottom:50px;

    }

    .why__heading h2{

        font-size:42px;

        line-height:1.05;

        letter-spacing:-1px;

    }

    .why__heading p{

        font-size:17px;

        line-height:1.7;

    }

    .why__grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .why__card{

        min-height:370px;

        padding:36px 28px;

        border-radius:28px;

    }

    .why__icon{

        width:110px;

        height:110px;

        margin-bottom:22px;

    }

    .why__icon img{

        width:110px;

        height:110px;

    }

    .why__card h3{

        font-size:31px;

        min-height:auto;

    }

    .why__line{

        margin:18px auto 22px;

    }

    .why__card p{

        font-size:17px;

        line-height:1.7;

    }

}

@media (max-width:480px){

    .why{

        padding:70px 0;

    }

    .why__heading h2{

        font-size:34px;

    }

    .why__heading p{

        font-size:16px;

    }

    .why__card{

        min-height:350px;

        padding:34px 24px;

    }

    .why__icon{

        width:100px;

        height:100px;

    }

    .why__icon img{

        width:100px;

        height:100px;

    }

    .why__card h3{

        font-size:28px;

    }

    .why__card p{

        font-size:16px;

    }

}

/* ==========================================================
   EVENTS 2026
   PARTE 1 - BASE DESKTOP
========================================================== */

.events{

    position:relative;

    padding:110px 0 120px;

    background:#f6f7f4;

    overflow:hidden;

}

.events .container{

    position:relative;

    z-index:2;

}

/* ==========================================================
   HEADING
========================================================== */

.events__heading{

    max-width:920px;

    margin:0 auto 70px;

    text-align:center;

}

.events__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    background:rgba(199,255,56,.10);

    border:1px solid rgba(132,212,37,.20);

    color:#5c9816;

    font-size:13px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:26px;

}

.events__heading h2{

    margin:0;

    font-size:clamp(50px,4vw,68px);

    line-height:1.02;

    font-weight:900;

    letter-spacing:-2px;

    color:#101010;

}

.events__heading h2 span{

    display:block;

    color:#7ED321;

}

.events__heading p{

    max-width:760px;

    margin:30px auto 0;

    font-size:22px;

    line-height:1.7;

    color:#666;

}

/* ==========================================================
   GRID
========================================================== */

.events__grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(250px,1fr));

    gap:26px;

    justify-content:center;

    align-items:stretch;

}

/* ==========================================================
   CARD
========================================================== */

.event-card{

    position:relative;

    height:378px;

    border-radius:30px;

    overflow:hidden;

    background:#111;

    isolation:isolate;

    cursor:pointer;

    transition:

    transform .45s ease,

    box-shadow .45s ease;

    box-shadow:

    0 18px 40px rgba(0,0,0,.10);

}

.event-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.18);

}

/* ==========================================================
   IMAGEN
========================================================== */

.event-card__image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .8s cubic-bezier(.2,.8,.2,1);

}

.event-card:hover .event-card__image{

    transform:scale(1.08);

}

/* ==========================================================
   OVERLAY
========================================================== */

.event-card__overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.08) 0%,

        rgba(0,0,0,.18) 28%,

        rgba(0,0,0,.55) 62%,

        rgba(0,0,0,.90) 100%

    );

    transition:.45s;

}

.event-card:hover .event-card__overlay{

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.22) 0%,

        rgba(0,0,0,.38) 25%,

        rgba(0,0,0,.72) 58%,

        rgba(0,0,0,.96) 100%

    );

}

/* ==========================================================
   CONTENIDO
========================================================== */

.event-card__content{

    position:absolute;

    inset:0;

    z-index:3;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

    text-align:center;

    padding:26px;

}

/* ==========================================================
   ICONO
========================================================== */

.event-card__icon{

    width:86px;

    height:86px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    background:

    radial-gradient(circle at center,#214d0b,#103704);

    border:2px solid rgba(255,255,255,.18);

    box-shadow:

    0 10px 25px rgba(0,0,0,.25);

    transition:

    transform .45s ease;

}

.event-card__icon img{

    width:68px;

    height:68px;

    display:block;

}

.event-card:hover .event-card__icon{

    transform:translateY(-8px) scale(1.08);

}

/* ==========================================================
   TITULO
========================================================== */

.event-card h3{

    margin:0;

    color:#fff;

    font-size:24px;

    line-height:1.12;

    font-weight:900;

    letter-spacing:-1px;

    transition:.45s;

}

/* ==========================================================
   EVENTS 2026
   PARTE 2 - HOVER PREMIUM
========================================================== */


/* ==========================================================
   TEXTO
========================================================== */

.event-card h3{

    transition:

    transform .45s ease,

    opacity .35s ease;

}

.event-card p{

    margin:16px 0 0;

    color:rgba(255,255,255,.90);

    font-size:15px;

    line-height:1.6;

    opacity:0;

    max-height:0;

    overflow:hidden;

    transform:translateY(20px);

    transition:

    opacity .45s ease,

    transform .45s ease,

    max-height .45s ease;

}

/* ==========================================================
   BOTÓN
========================================================== */

.event-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    width:100%;

    height:52px;

    border-radius:999px;

    background:linear-gradient(180deg,#C7FF38,#9AE600);

    color:#111;

    text-decoration:none;

    font-size:15px;

    font-weight:800;

    opacity:0;

    transform:translateY(20px);

    transition:

    opacity .45s ease,

    transform .45s ease,

    box-shadow .35s ease;

    box-shadow:

    0 14px 30px rgba(150,255,0,.25);

}

.event-card__button:hover{

    box-shadow:

    0 18px 40px rgba(150,255,0,.35);

}

/* ==========================================================
   HOVER
========================================================== */

.event-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

}

.event-card:hover h3{

    transform:translateY(-6px);

}

.event-card:hover p{

    opacity:1;

    max-height:120px;

    transform:translateY(0);

}

.event-card:hover .event-card__button{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width:1500px){

.events__grid{

    gap:20px;

}

.event-card{

    height:350px;

}

.event-card h3{

    font-size:22px;

}

.event-card__icon{

    width:80px;

    height:80px;

}

.event-card__icon img{

    width:64px;

    height:64px;

}

}

/* ==========================================================
   DESKTOP PEQUEÑO
========================================================== */

@media (max-width:1300px){

.events__grid{

    gap:18px;

}

.event-card{

    height:340px;

}

.event-card h3{

    font-size:21px;

}

.event-card p{

    font-size:14px;

}

}

/* ==========================================================
   EVENTS 2026
   PARTE 3 - RESPONSIVE
========================================================== */

/* ==========================
   NOTEBOOK
========================== */

@media (max-width:1400px){

.events__grid{

    gap:18px;

}

.event-card{

    height:350px;

}

.event-card h3{

    font-size:22px;

}

}

/* ==========================
   TABLET
========================== */

@media (max-width:1100px){

.events{

    padding:90px 0;

}

.events__heading{

    margin-bottom:50px;

}

.events__heading h2{

    font-size:48px;

}

.events__heading p{

    font-size:18px;

}

.events__grid{

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.event-card{

    height:360px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.events{

    padding:75px 0;

}

.events__heading{

    margin-bottom:36px;

}

.events__heading h2{

    font-size:36px;

    letter-spacing:-1px;

}

.events__heading p{

    font-size:16px;

    line-height:1.65;

}

/* Una sola card */

.events__grid{

    display:block;

}

.event-card{

    display:none;

    width:100%;

    max-width:390px;

    margin:0 auto;

    height:430px;

}

.event-card.active{

    display:block;

    animation:eventFade .35s ease;

}

/* Información siempre visible */

.event-card p{

    opacity:1;

    max-height:100px;

    transform:none;

}

.event-card__button{

    opacity:1;

    transform:none;

}

.event-card:hover{

    transform:none;

}

.event-card:hover .event-card__image{

    transform:none;

}

/* Controles */

.events__controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:26px;

}

.events__prev,
.events__next{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#C7FF38;

    color:#111;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

}

.events__dots{

    display:flex;

    align-items:center;

    gap:10px;

}

.events__dot{

    width:10px;

    height:10px;

    border:none;

    border-radius:50%;

    background:#d2d2d2;

    transition:.3s;

}

.events__dot.active{

    width:28px;

    border-radius:999px;

    background:#C7FF38;

}

}

/* Ocultar controles escritorio */

@media (min-width:769px){

.events__controls{

    display:none;

}

}

/* ==========================================================
   MOBILE PEQUEÑO
========================================================== */

@media (max-width:480px){

.event-card{

    height:410px;

}

.event-card__content{

    padding:22px;

}

.event-card h3{

    font-size:23px;

}

.event-card__icon{

    width:68px;

    height:68px;

}

.event-card__icon img{

    width:54px;

    height:54px;

}

}

@keyframes eventFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   MARQUEE EXPERIENCE
========================================================== */

.marquee{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            #9BE000 0%,
            #C7FF38 50%,
            #9BE000 100%
        );

    border-top:1px solid rgba(255,255,255,.15);

    border-bottom:1px solid rgba(0,0,0,.08);

    padding:18px 0;

}

.marquee__inner{

    display:flex;

    overflow:hidden;

    white-space:nowrap;

}

.marquee__track{

    display:flex;

    align-items:center;

    flex-shrink:0;

    min-width:fit-content;

    animation:marqueeMove 26s linear infinite;

}

.marquee__track span{

    display:flex;

    align-items:center;

    margin-right:80px;

    font-size:28px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#111;

    user-select:none;

}

.marquee__track span::after{

    content:"✦";

    margin-left:80px;

    font-size:18px;

    opacity:.8;

}

/* Hover pausa la animación */

.marquee:hover .marquee__track{

    animation-play-state:paused;

}

/* Animación */

@keyframes marqueeMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.marquee{

    padding:16px 0;

}

.marquee__track span{

    font-size:22px;

    margin-right:60px;

}

.marquee__track span::after{

    margin-left:60px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.marquee{

    padding:14px 0;

}

.marquee__track{

    animation-duration:20s;

}

.marquee__track span{

    font-size:18px;

    margin-right:42px;

    letter-spacing:.05em;

}

.marquee__track span::after{

    margin-left:42px;

    font-size:14px;

}

}

/* ==========================================================
   PERSONALIZA
   PARTE 1 - BASE
========================================================== */

.personaliza{

    position:relative;

    padding:120px 0;

    background:#0f1113;

    overflow:hidden;

}

.personaliza .container{

    max-width:1500px;

}

/* ==========================================================
   HEADING
========================================================== */

.personaliza__heading{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.personaliza__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(199,255,56,.08);

    border:1px solid rgba(199,255,56,.18);

    color:#C7FF38;

    font-size:13px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:24px;

}

.personaliza__heading h2{

    margin:0;

    color:#fff;

    font-size:clamp(48px,4vw,66px);

    line-height:1.02;

    font-weight:900;

    letter-spacing:-2px;

}

.personaliza__heading h2 span{

    display:block;

    color:#C7FF38;

}

.personaliza__heading p{

    max-width:760px;

    margin:28px auto 0;

    color:rgba(255,255,255,.70);

    font-size:20px;

    line-height:1.75;

}

/* ==========================================================
   BULLETS
========================================================== */

.personaliza__list{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px 18px;

    margin:36px 0 42px;

    padding:0;

    list-style:none;

}

.personaliza__list li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#ededed;

    font-size:16px;

    font-weight:500;

}

.personaliza__list li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#C7FF38;

    box-shadow:0 0 10px rgba(199,255,56,.6);

}

/* ==========================================================
   BOTÓN
========================================================== */

.personaliza__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:56px;

    padding:0 34px;

    border-radius:999px;

    background:linear-gradient(180deg,#C7FF38,#9EE600);

    color:#111;

    text-decoration:none;

    font-size:15px;

    font-weight:800;

    transition:.35s;

    box-shadow:

    0 18px 35px rgba(155,255,0,.20);

}

.personaliza__button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 22px 45px rgba(155,255,0,.35);

}

/* ==========================================================
   GALERÍA
========================================================== */

.personaliza__gallery{

    display:flex;

    gap:12px;

    height:480px;

    margin-top:80px;

}

/* ==========================================================
   ITEMS
========================================================== */

.personaliza__item{

    position:relative;

    flex:1;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:#1b1b1b;

}

.personaliza__item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ==========================================================
   PERSONALIZA
   PARTE 2 - HOVER GALLERY
========================================================== */

/* ==========================================================
   EXPANSIÓN
========================================================== */

.personaliza__item{

    transition:

        flex .65s cubic-bezier(.22,.61,.36,1),

        transform .45s ease,

        box-shadow .45s ease;

}

.personaliza__gallery:hover .personaliza__item{

    flex:.75;

}

.personaliza__gallery .personaliza__item:hover{

    flex:3.2;

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}

/* ==========================================================
   IMAGEN
========================================================== */

.personaliza__item img{

    transition:

        transform .8s ease,

        filter .45s ease;

}

.personaliza__item:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   OVERLAY
========================================================== */

.personaliza__overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    padding:28px;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,0) 15%,

            rgba(0,0,0,.20) 45%,

            rgba(0,0,0,.90) 100%

        );

    opacity:0;

    transition:

        opacity .4s ease,

        background .4s ease;

}

.personaliza__item:hover .personaliza__overlay{

    opacity:1;

}

/* ==========================================================
   TEXTO
========================================================== */

.personaliza__overlay span{

    color:#fff;

    font-size:22px;

    font-weight:800;

    letter-spacing:-.5px;

    transform:translateY(18px);

    transition:

        transform .4s ease,

        opacity .4s ease;

    opacity:0;

}

.personaliza__item:hover .personaliza__overlay span{

    transform:translateY(0);

    opacity:1;

}

/* ==========================================================
   EFECTO BRILLO
========================================================== */

.personaliza__item::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent 20%,

            rgba(255,255,255,.18) 50%,

            transparent 80%

        );

    transform:translateX(-180%);

    transition:transform .8s ease;

}

.personaliza__item:hover::after{

    transform:translateX(180%);

}

/* ==========================================================
   HOVER GENERAL
========================================================== */

.personaliza__gallery:hover .personaliza__item:not(:hover){

    filter:saturate(.7);

}

.personaliza__gallery:hover .personaliza__item:not(:hover) img{

    transform:scale(1.02);

}

/* ==========================================================
   PERSONALIZA
   PARTE 3 - RESPONSIVE
========================================================== */

/* ==========================================================
   DESKTOP XL
========================================================== */

@media (min-width:1600px){

.personaliza .container{

    max-width:1650px;

}

.personaliza__gallery{

    height:520px;

}

}

/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width:1450px){

.personaliza{

    padding:100px 0;

}

.personaliza__gallery{

    height:430px;

    gap:10px;

}

.personaliza__heading h2{

    font-size:56px;

}

.personaliza__heading p{

    font-size:18px;

}

.personaliza__overlay span{

    font-size:20px;

}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

.personaliza{

    padding:90px 0;

}

.personaliza__heading{

    margin-bottom:55px;

}

.personaliza__gallery{

    height:360px;

    gap:8px;

}

.personaliza__overlay{

    padding:20px;

}

.personaliza__overlay span{

    font-size:18px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.personaliza{

    padding:75px 0;

}

.personaliza__heading{

    margin-bottom:38px;

}

.personaliza__heading h2{

    font-size:36px;

    letter-spacing:-1px;

}

.personaliza__heading p{

    font-size:16px;

    line-height:1.7;

}

.personaliza__list{

    gap:12px;

    margin:28px 0 36px;

}

.personaliza__list li{

    width:100%;

    justify-content:center;

    font-size:15px;

}

/* =========================
   SLIDER
========================= */

.personaliza__gallery{

    position:relative;

    height:360px;

}

.personaliza__item{

    display:none;

    width:100%;

    height:100%;

    border-radius:24px;

}

.personaliza__item.active{

    display:block;

}

.personaliza__overlay{

    opacity:1;

    padding:24px;

}

.personaliza__overlay span{

    opacity:1;

    transform:none;

    font-size:18px;

}

/* =========================
   CONTROLES
========================= */

.personaliza__controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:24px;

}

.personaliza__prev,
.personaliza__next{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#C7FF38;

    color:#111;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.personaliza__prev:hover,
.personaliza__next:hover{

    transform:scale(1.08);

}

.personaliza__dots{

    display:flex;

    gap:10px;

}

.personaliza__dots button{

    width:10px;

    height:10px;

    border:none;

    border-radius:50%;

    background:#666;

    padding:0;

    cursor:pointer;

    transition:.3s;

}

.personaliza__dots button.active{

    background:#C7FF38;

    transform:scale(1.25);

}

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:769px){

.personaliza__controls{

    display:none;

}

}

/* ==========================================================
   MOBILE PEQUEÑO
========================================================== */

@media (max-width:480px){

.personaliza{

    padding:65px 0;

}

.personaliza__gallery{

    height:320px;

}

.personaliza__heading h2{

    font-size:30px;

}

.personaliza__heading p{

    font-size:15px;

}

.personaliza__button{

    width:100%;

}

}

/* ==========================================================
   PAYMENT 2026
   PARTE 1 - BASE
========================================================== */

.payment{

    position:relative;

    padding:70px 0;

    background:
        radial-gradient(circle at top left,
        rgba(199,255,56,.06),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(255,255,255,.03),
        transparent 45%),

        #101214;

    overflow:hidden;

}

.payment::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("assets/noise.webp") center center / cover no-repeat;

    opacity:.12;   /* Ajusta entre .03 y .08 */

    pointer-events:none;

    z-index:0;

}

.payment .container{

    position:relative;

    z-index:1;

    max-width:1450px;

}

/* ==========================================================
   CARD
========================================================== */

.payment__card{

    position:relative;

    display:flex;

    align-items:center;

    min-height:340px;

    padding:42px 60px 42px 360px;

    border-radius:34px;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

    0 28px 70px rgba(0,0,0,.28);

    overflow:visible;

}

/* ==========================================================
   PHONE
========================================================== */

.payment__phone{

    position:absolute;

    left:55px;

    top:-45px;

    width:250px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.payment__phoneGlow{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(199,255,56,.18),
    transparent 70%);

    filter:blur(22px);

}

.payment__phone img{

    position:relative;

    width:210px;

    display:block;

}

/* ==========================================================
   CONTENT
========================================================== */

.payment__content{

    width:100%;

}



/* ==========================================================
   TITULO
========================================================== */

.payment__content h2{

    margin:0;

    color:#fff;

    font-size:clamp(34px,2.6vw,46px);

    line-height:1.05;

    font-weight:900;

    letter-spacing:-1px;

}

.payment__content h2 span{

    display:block;

    color:#C7FF38;

}

/* ==========================================================
   TEXTO
========================================================== */

.payment__content p{

    max-width:620px;

    margin:18px 0 22px;

    color:rgba(255,255,255,.72);

    font-size:17px;

    line-height:1.7;

}

/* ==========================================================
   FEATURES
========================================================== */

.payment__features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:24px;

}

.payment__features span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#ededed;

    font-size:15px;

    font-weight:600;

}

.payment__features span::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:#C7FF38;

    box-shadow:

    0 0 8px rgba(199,255,56,.6);

}

/* ==========================================================
   BOTON
========================================================== */

.payment__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:50px;

    padding:0 30px;

    border-radius:999px;

    background:

    linear-gradient(
    180deg,
    #C7FF38,
    #9BE500);

    color:#111;

    text-decoration:none;

    font-size:15px;

    font-weight:800;

    margin-bottom:26px;

}

/* ==========================================================
   LOGOS
========================================================== */

.payment__logos{

    display:flex;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

.payment__logos img{

    height:32px;

    width:auto;

    display:block;

}

/* ==========================================================
   PAYMENT 2026
   PARTE 2 - EFECTOS
========================================================== */

/* ==========================================================
   CARD
========================================================== */

.payment__card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.payment__card:hover{

    transform:translateY(-4px);

    border-color:rgba(199,255,56,.14);

    box-shadow:
        0 35px 90px rgba(0,0,0,.38);

}

/* ==========================================================
   GLOW
========================================================== */

.payment__phoneGlow{

    animation:paymentGlow 6s ease-in-out infinite;

}

@keyframes paymentGlow{

    0%{

        opacity:.45;
        transform:scale(1);

    }

    50%{

        opacity:.8;
        transform:scale(1.08);

    }

    100%{

        opacity:.45;
        transform:scale(1);

    }

}

/* ==========================================================
   TELEFONO
========================================================== */

.payment__phone img{

    animation:paymentFloat 7s ease-in-out infinite;

    filter:
        drop-shadow(0 25px 45px rgba(0,0,0,.35));

    transition:
        transform .35s ease;

}

.payment__card:hover .payment__phone img{

    transform:scale(1.02);

}

@keyframes paymentFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   TITULO
========================================================== */

.payment__content h2 span{

    position:relative;

}

.payment__content h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:90px;

    height:3px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #C7FF38,
            transparent);

}

/* ==========================================================
   FEATURES
========================================================== */

.payment__features span{

    transition:
        color .3s ease,
        transform .3s ease;

}

.payment__features span:hover{

    color:#C7FF38;

    transform:translateY(-2px);

}

/* ==========================================================
   BOTÓN
========================================================== */

.payment__button{

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    box-shadow:
        0 14px 30px rgba(199,255,56,.18);

}

.payment__button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(199,255,56,.30);

}

/* ==========================================================
   LOGOS
========================================================== */

.payment__logos img{

    opacity:.82;

    filter:grayscale(.1);

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.payment__logos img:hover{

    opacity:1;

    transform:translateY(-3px);

    filter:none;

}

/* ==========================================================
   BRILLO SUPERIOR
========================================================== */

.payment__card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(199,255,56,.25),
            transparent);

    opacity:.7;

}

/* ==========================================================
   PAYMENT 2026
   PARTE 3 - RESPONSIVE
========================================================== */

/* ==========================================================
   DESKTOP XL
========================================================== */

@media (min-width:1600px){

.payment .container{

    max-width:1600px;

}

.payment__card{

    min-height:400px;

    padding:65px 80px 60px 420px;

}

.payment__phone{

    left:65px;

    top:-85px;

}

.payment__phone img{

    width:480px;

}
.payment__logos{

    gap:38px;

}

.payment__logos img{

    height:55px;

}

}

/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width:1536px){

.payment{

    padding:70px 0;

}

.payment__card{

    min-height:460px;

    padding:55px 50px 50px 420px;

}

.payment__phone{

    left:55px;

    top:-60px;

}

.payment__phone img{

    width:280px;

}

.payment__content h2{

    font-size:45px;

}

.payment__content p{

    font-size:16px;

}
.payment__logos{

    gap:36px;
    
}
.payment__logos img{

    height:48px;

}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

.payment{

    padding:60px 0;

}

.payment__card{

    min-height:auto;

    padding:230px 40px 45px;

    text-align:center;

}

.payment__phone{

    left:50%;

    top:-55px;

    transform:translateX(-50%);

}

.payment__phone img{

    width:230px;

}

.payment__content h2{

    font-size:48px;

}

.payment__content p{

    font-size:18px;

}

.payment__features{

    justify-content:center;

    grid-template-columns:repeat(2,1fr);

}

.payment__features li{

    justify-content:center;

}

.payment__logos{

    justify-content:center;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.payment{

    padding:68px 0;

}

.payment__card{

    position:relative;

    min-height:auto;

    padding:150px 24px 34px;

    border-radius:28px;

    text-align:center;

    overflow:visible;

}

/* ==========================================
   TELEFONO
========================================== */

.payment__phone{

    position:absolute;

    left:50%;

    top:-90px;

    transform:translateX(-50%);

    width:auto;

    z-index:2;

}

.payment__phone img{

    width:155px;

}

.payment__phoneGlow{

    width:200px;

    height:200px;

}

/* ==========================================
   CONTENIDO
========================================== */

.payment__content{

    position:relative;

    z-index:5;

}



/* ==========================================
   TITULO
========================================== */

.payment__content h2{

    font-size:30px;

    line-height:1.08;

}

/* ==========================================
   TEXTO
========================================== */

.payment__content p{

    margin:18px 0 22px;

    font-size:15px;

    line-height:1.7;

}

/* ==========================================
   BENEFICIOS
========================================== */

.payment__features{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:max-content;

    margin:0 auto 26px;

    gap:12px;

}

.payment__features span{

    display:flex;

    align-items:center;

    gap:10px;

    justify-content:flex-start;

}

/* ==========================================
   BOTON
========================================== */

.payment__button{

    width:100%;

    margin-bottom:28px;

}

/* ==========================================
   LOGOS
========================================== */

.payment__logos{

    justify-content:center;

    gap:18px;

}

.payment__logos img{

    height:24px;

}

}

/* ==========================================================
   MOBILE PEQUEÑO
========================================================== */

@media (max-width:480px){

.payment{

    padding:65px 0;

}

.payment__card{

    position:relative;

    padding:145px 20px 28px;

    border-radius:24px;

    overflow:visible;

}

/* TELEFONO */

.payment__phone{

    top:-85px;

}

.payment__phone img{

    width:150px;

}

.payment__phoneGlow{

    width:190px;

    height:190px;

}

/* TITULO */

.payment__content h2{

    font-size:28px;

    line-height:1.08;

}

/* TEXTO */

.payment__content p{

    margin:18px 0;

    font-size:14px;

    line-height:1.7;

}

/* BENEFICIOS */

.payment__features{

    gap:10px;

    margin:0 auto 22px;

}

.payment__features span{

    font-size:15px;

}

/* BOTON */

.payment__button{

    height:48px;

    font-size:15px;

    margin-bottom:22px;

}

/* LOGOS */

.payment__logos{

    gap:16px;

}

.payment__logos img{

    height:24px;

}

}

/* ==========================================================
   MARQUEE MENU
========================================================== */

.marquee-menu{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            #9BE000 0%,
            #C7FF38 50%,
            #9BE000 100%
        );

    border-top:1px solid rgba(255,255,255,.15);

    border-bottom:1px solid rgba(0,0,0,.08);

    padding:18px 0;

}

.marquee-menu__inner{

    display:flex;

    overflow:hidden;

    white-space:nowrap;

}

.marquee-menu__track{

    display:flex;

    align-items:center;

    flex-shrink:0;

    min-width:fit-content;

    animation:marqueeMove 26s linear infinite;

}

.marquee-menu__track span{

    display:flex;

    align-items:center;

    margin-right:80px;

    font-size:28px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#111;

    user-select:none;

}

.marquee-menu__track span::after{

    content:"✦";

    margin-left:80px;

    font-size:18px;

    opacity:.8;

}

/* Hover pausa */

.marquee-menu:hover .marquee-menu__track{

    animation-play-state:paused;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.marquee-menu{

    padding:16px 0;

}

.marquee-menu__track span{

    font-size:22px;

    margin-right:60px;

}

.marquee-menu__track span::after{

    margin-left:60px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.marquee-menu{

    padding:14px 0;

}

.marquee-menu__track{

    animation-duration:20s;

}

.marquee-menu__track span{

    font-size:18px;

    margin-right:42px;

    letter-spacing:.05em;

}

.marquee-menu__track span::after{

    margin-left:42px;

    font-size:14px;

}

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 01
SECTION + BACKGROUND
==================================================*/

.carta{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    isolation:isolate;

    background:

        radial-gradient(
            circle at 12% 18%,
            rgba(116,211,74,.14),
            transparent 34%
        ),

        radial-gradient(
            circle at 88% 82%,
            rgba(116,211,74,.10),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #2f652d 0%,
            #255623 45%,
            #1d461d 100%
        );

}


/*==================================================
LIGHT
==================================================*/

.carta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            transparent 30%,

            transparent 70%,

            rgba(0,0,0,.10)

        );

    pointer-events:none;

}


/*==================================================
BOTTOM GLOW
==================================================*/

.carta::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-260px;

    width:900px;

    height:900px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(111,255,0,.10),

            transparent 70%

        );

    filter:blur(50px);

    pointer-events:none;

}


/*==================================================
CONTAINER
==================================================*/

.carta .container{

    position:relative;

    z-index:2;

    width:min(1280px,92%);

    margin:auto;

}


/*==================================================
SAFE
==================================================*/

.carta *{

    box-sizing:border-box;

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 02
HEADER
==================================================*/


/*==================================================
HEADER
==================================================*/

.carta-header{

    position:relative;

    max-width:840px;

    margin:0 auto 70px;

    text-align:center;

}


/*==================================================
EYEBROW
==================================================*/

.carta-header .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    margin-bottom:22px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    color:rgba(255,255,255,.90);

    font-size:.74rem;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    backdrop-filter:blur(10px);

}


/*==================================================
TITLE
==================================================*/

.carta-header h2{

    margin:0;

    color:#fff;

    font-size:clamp(3rem,5vw,5rem);

    font-weight:800;

    line-height:.95;

    letter-spacing:-.05em;

    text-transform:uppercase;

}

.carta-header h2 span{

    display:block;

    color:#7DFF3A;

}


/*==================================================
DESCRIPTION
==================================================*/

.carta-header p{

    max-width:680px;

    margin:24px auto 0;

    color:rgba(255,255,255,.78);

    font-size:1.02rem;

    line-height:1.9;

}


/*==================================================
SELECTION DISABLED
==================================================*/

.carta-header h2,
.carta-header p,
.carta-header .section-tag{

    user-select:none;

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 03
TABS
==================================================*/


/*==================================================
NAV
==================================================*/

.carta-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    width:fit-content;

    margin:42px auto 70px;

    padding:14px;

    background:rgba(0,0,0,.32);

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    backdrop-filter:blur(10px);

}


/*==================================================
TAB
==================================================*/

.carta-tab{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:150px;

    height:112px;

    padding:12px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:transparent;

    transition:
        transform .30s ease,
        background .30s ease;

}


/*==================================================
ICON
==================================================*/

.carta-tab img{

    width:60px;

    height:60px;

    object-fit:contain;

    transition:
        transform .30s ease;

}


/*==================================================
TEXT
==================================================*/

.carta-tab span{

    color:rgba(255,255,255,.82);

    font-size:.82rem;

    font-weight:700;

    line-height:1;

}


/*==================================================
HOVER
==================================================*/

.carta-tab:hover{

    transform:translateY(-3px);

}


.carta-tab:hover img{

    transform:scale(1.10);

}


/*==================================================
ACTIVE
==================================================*/

.carta-tab.active{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(126,255,66,.35);

    box-shadow:
        inset 0 3px 0 #7eff42;

}


.carta-tab.active img{

    transform:scale(1.08);

}


.carta-tab.active::after{

    content:"";

    position:absolute;

    left:16px;

    right:16px;

    bottom:0;

    height:3px;

    border-radius:999px;

    background:#7eff42;

}


/*==================================================
ACTIVE BAR
==================================================*/

.carta-tab.active::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:0;

    height:3px;

    border-radius:999px;

    background:#7eff42;

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 04
CONTENT + GRID
==================================================*/


/*==================================================
CONTENT
==================================================*/

.carta-content{

    position:relative;

    width:100%;

}


/*==================================================
PANELS
==================================================*/

.carta-panel{

    display:none;

    animation:cartaFade .45s ease;

}


.carta-panel.active{

    display:block;

}


/*==================================================
GRID
==================================================*/

.carta-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:28px;

    align-items:stretch;

}


/*==================================================
ANIMATION
==================================================*/

@keyframes cartaFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
LARGE DESKTOP
==================================================*/

@media (min-width:1600px){

    .carta-grid{

        gap:34px;

    }

}


/*==================================================
TABLET
==================================================*/

@media (max-width:1100px){

    .carta-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:24px;

    }

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .carta-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 05
CARD
==================================================*/


/*==================================================
CARD
==================================================*/

.carta-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:20px;

    background:linear-gradient(
        180deg,
        #315c2c 0%,
        #284d25 100%
    );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 18px 40px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.carta-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 28px 55px rgba(0,0,0,.26);

}


/*==================================================
IMAGE
==================================================*/

.carta-card__image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

    background:#1b1b1b;

}


.carta-card__image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .45s ease;

}


.carta-card:hover .carta-card__image img{

    transform:scale(1.05);

}


/*==================================================
BODY
==================================================*/

.carta-card__body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}


/*==================================================
TYPE
==================================================*/

.carta-card__type{

    display:block;

    margin-bottom:8px;

    color:rgba(255,255,255,.55);

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}


/*==================================================
TITLE
==================================================*/

.carta-card__body h3{

    margin:0 0 18px;

    color:#fff;

    font-size:1.85rem;

    font-weight:900;

    line-height:1.05;

}


/*==================================================
DESCRIPTION
==================================================*/

.carta-card__description{

    margin:0;

    color:rgba(255,255,255,.78);

    line-height:1.75;

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 06
BODY + LISTA + FOOTER
==================================================*/


/*==================================================
MENU
==================================================*/

.carta-card__menu{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:0;

    padding:0;

    list-style:none;

}


/*==================================================
ITEM
==================================================*/

.carta-card__menu li{

    position:relative;

    padding-left:28px;

    color:rgba(255,255,255,.88);

    font-size:.95rem;

    line-height:1.55;

}


/*==================================================
CHECK
==================================================*/

.carta-card__menu li::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:9px;

    height:9px;

    border-radius:50%;

    background:#7DFF3A;

    box-shadow:

        0 0 12px rgba(125,255,58,.45);

}


/*==================================================
FOOTER
==================================================*/

.carta-card__footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:auto;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.08);

}


/*==================================================
PEOPLE
==================================================*/

.carta-card__people{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:.82rem;

    font-weight:700;

    white-space:nowrap;

}


/*==================================================
BUTTON
==================================================*/

.btn-cotizar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:125px;

    height:44px;

    padding:0 22px;

    border:none;

    border-radius:999px;

    background:#7DFF3A;

    color:#163116;

    font-size:.84rem;

    font-weight:800;

    letter-spacing:.04em;

    cursor:pointer;

    transition:
        transform .30s ease,
        background .30s ease,
        box-shadow .30s ease;

}


.btn-cotizar:hover{

    transform:translateY(-2px);

    background:#95ff5e;

    box-shadow:

        0 10px 24px rgba(125,255,58,.28);

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 07
EFECTOS PREMIUM
==================================================*/


/*==================================================
LIGHT BORDER
==================================================*/

.carta-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.16),
        rgba(255,255,255,0)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}


/*==================================================
TOP GLOW
==================================================*/

.carta-card::after{

    content:"";

    position:absolute;

    top:-80px;

    left:-60px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.12),
        transparent 70%
    );

    opacity:.45;

    pointer-events:none;

}


/*==================================================
IMAGE OVERLAY
==================================================*/

.carta-card__image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,.30) 100%
    );

    pointer-events:none;

}


/*==================================================
HOVER
==================================================*/

.carta-card:hover{

    border-color:rgba(125,255,58,.18);

}


.carta-card:hover::after{

    opacity:.75;

}


.carta-card:hover .carta-card__image img{

    transform:scale(1.08);

}


/*==================================================
BUTTON
==================================================*/

.btn-cotizar{

    position:relative;

    overflow:hidden;

}


.btn-cotizar::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:left .7s ease;

}


.btn-cotizar:hover::before{

    left:150%;

}


/*==================================================
IMAGE RENDER
==================================================*/

.carta-card__image img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/*==================================================
🛒 CARTA PREMIUM 2026
PARTE 08
RESPONSIVE + DETALLES FINALES
==================================================*/


/*==================================================
CARD SPACING
==================================================*/

.carta-card{

    height:100%;

}


.carta-card__body{

    gap:18px;

}


/*==================================================
IMAGE
==================================================*/

.carta-card__image{

    border-bottom:1px solid rgba(255,255,255,.06);

}


/*==================================================
MENU
==================================================*/

.carta-card__menu li{

    transition:transform .25s ease,color .25s ease;

}


.carta-card:hover .carta-card__menu li{

    transform:translateX(3px);

}


/*==================================================
BUTTON
==================================================*/

.btn-cotizar{

    flex-shrink:0;

}


.btn-cotizar:active{

    transform:scale(.98);

}


/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

    .carta{

        padding:90px 0;

    }

    .carta-header{

        margin-bottom:55px;

    }

    .carta-card__body{

        padding:20px;

    }

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .carta{

        padding:70px 0;

    }

    .carta-header h2{

        line-height:1;

    }

    .carta-card{

        border-radius:18px;

    }

    .carta-card__body{

        padding:18px;

    }

    .carta-card__footer{

        flex-direction:column;

        align-items:stretch;

        gap:16px;

    }

    .carta-card__people{

        justify-content:center;

    }

    .btn-cotizar{

        width:100%;

        height:48px;

    }

}


/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .carta-header{

        margin-bottom:45px;

    }

    .carta-grid{

        gap:18px;

    }

    .carta-card__body h3{

        font-size:1.55rem;

    }

    .carta-card__menu li{

        font-size:.9rem;

    }

}

/*==================================================
📱 MOBILE
TABS CARTA
==================================================*/

@media (max-width:768px){

.carta-nav{

    width:100%;

    margin:28px 0 40px;

    padding:12px;

    gap:10px;

    justify-content:flex-start;

    overflow-x:auto;

    overflow-y:hidden;

    flex-wrap:nowrap;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}

.carta-nav::-webkit-scrollbar{

    display:none;

}

.carta-tab{

    flex:0 0 auto;

    width:118px;

    height:96px;

    padding:10px;

}

.carta-tab img{

    width:48px;

    height:48px;

}

.carta-tab span{

    font-size:.78rem;

}

}
/*==================================================
🟢 MINI COTIZADOR PREMIUM 2026
==================================================*/


/*==================================================
OVERLAY
==================================================*/

.miniquote{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    z-index:99999;

    transition:.35s ease;

}


.miniquote.active{

    opacity:1;

    visibility:visible;

}


.miniquote__overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(10px);

}


/*==================================================
BOX
==================================================*/

.miniquote__box{

    position:relative;

    width:100%;

    max-width:480px;

    padding:38px;

    border-radius:24px;

    background:linear-gradient(
        180deg,
        #315c2c 0%,
        #274a22 100%
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 30px 80px rgba(0,0,0,.45);

    transform:translateY(25px) scale(.96);

    transition:.35s ease;

    z-index:2;

}


.miniquote.active .miniquote__box{

    transform:none;

}


/*==================================================
TAG
==================================================*/

.miniquote__tag{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(125,255,58,.12);

    color:#7DFF3A;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.12em;

}


/*==================================================
TITLE
==================================================*/

.miniquote h3{

    margin:18px 0 10px;

    color:#fff;

    font-size:2rem;

    font-weight:900;

    line-height:1;

}


.miniquote p{

    margin:0 0 30px;

    color:rgba(255,255,255,.78);

    line-height:1.7;

}


/*==================================================
FORM
==================================================*/

#miniQuoteForm{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/*==================================================
GROUP
==================================================*/

.miniquote__group{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.miniquote__group label{

    color:#fff;

    font-size:.82rem;

    font-weight:700;

}


/*==================================================
INPUTS
==================================================*/

.miniquote input,
.miniquote select{

    width:100%;

    height:54px;

    padding:0 18px;

    border:none;

    outline:none;

    border-radius:14px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1rem;

    transition:.25s;

}
/* Windows - opciones del select */
.miniquote select option{

    background:#16351c;

    color:#fff;

}

.miniquote input::placeholder{

    color:rgba(255,255,255,.45);

}


.miniquote input:focus,
.miniquote select:focus{

    background:rgba(255,255,255,.12);

    box-shadow:0 0 0 3px rgba(125,255,58,.22);

}


/*==================================================
READONLY
==================================================*/

#miniProductoView{

    background:rgba(125,255,58,.10);

    color:#7DFF3A;

    font-weight:700;

}


/*==================================================
BUTTON
==================================================*/

.miniquote__submit{

    height:56px;

    border:none;

    border-radius:999px;

    background:#7DFF3A;

    color:#163116;

    font-size:1rem;

    font-weight:900;

    cursor:pointer;

    transition:.3s;

}


.miniquote__submit:hover{

    transform:translateY(-2px);

    background:#95ff5e;

    box-shadow:

        0 12px 30px rgba(125,255,58,.28);

}


/*==================================================
CLOSE
==================================================*/

.miniquote__close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1.1rem;

    cursor:pointer;

    transition:.25s;

}


.miniquote__close:hover{

    background:#7DFF3A;

    color:#163116;

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .miniquote{

        padding:18px;

    }

    .miniquote__box{

        padding:28px 22px;

        border-radius:20px;

    }

    .miniquote h3{

        font-size:1.6rem;

    }

    .miniquote__submit{

        height:52px;

    }

}

/*======================================
    CTA FINAL
======================================*/

.carta-cta{

    position:relative;

    max-width:1100px;

    margin:90px auto 0;

    padding:70px 60px;

    overflow:hidden;

    text-align:center;

    border-radius:32px;

    background:
    radial-gradient(circle at top right,rgba(95,245,0,.14),transparent 42%),
    radial-gradient(circle at bottom left,rgba(255,255,255,.04),transparent 45%),
    linear-gradient(180deg,#181818 0%,#0f0f0f 100%);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 35px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

}

.carta-cta::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
    135deg,
    rgba(95,245,0,.25),
    transparent,
    rgba(255,255,255,.08));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

.carta-cta::after{

    content:"CAMALEÓN";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    font-size:clamp(90px,14vw,190px);

    font-weight:900;

    letter-spacing:8px;

    color:#fff;

    opacity:.025;

    white-space:nowrap;

    pointer-events:none;

    user-select:none;

}

/*============================*/

.carta-cta h3{

    position:relative;

    z-index:2;

    margin:0;

    color:#fff;

    font-size:clamp(34px,4vw,52px);

    font-weight:800;

    line-height:1.15;

}

/*============================*/

.carta-cta p{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:22px auto 38px;

    color:#d6d6d6;

    font-size:1.15rem;

    line-height:1.8;

}

/*============================*/

.btn-carta{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:260px;

    height:60px;

    padding:0 34px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    background:linear-gradient(135deg,#5ff500,#39d000);

    color:#111;

    font-size:1rem;

    font-weight:800;

    letter-spacing:.4px;

    transition:.35s ease;

    box-shadow:

    0 18px 35px rgba(95,245,0,.28);

}

.btn-carta:hover{

    transform:translateY(-5px);

    box-shadow:

    0 28px 50px rgba(95,245,0,.42);

}

/*============================*/

.btn-carta:active{

    transform:translateY(-2px);

}

/*============================*/

@media (max-width:991px){

    .carta-cta{

        padding:55px 35px;

        border-radius:26px;

    }

}

/*============================*/

@media (max-width:768px){

    .carta-cta{

        margin-top:60px;

        padding:45px 25px;

        border-radius:22px;

    }

    .carta-cta::after{

        font-size:82px;

        letter-spacing:4px;

    }

    .carta-cta h3{

        font-size:30px;

    }

    .carta-cta p{

        font-size:1rem;

        margin:18px auto 30px;

        line-height:1.7;

    }

    .btn-carta{

        width:100%;

        min-width:unset;

        height:56px;

    }

}

/*============================*/

@media (max-width:480px){

    .carta-cta{

        padding:38px 20px;

    }

    .carta-cta::after{

        font-size:58px;

    }

    .carta-cta h3{

        font-size:26px;

    }

}
 
/*======================================
    BOTÓN VOLVER ARRIBA
======================================*/

.back-to-top{

    position:fixed;

    left:28px;

    bottom:28px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#5ff500,#39d000);

    color:#111;

    font-size:26px;

    font-weight:900;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 15px 35px rgba(95,245,0,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:9999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

.back-to-top:hover{

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(95,245,0,.45);

}

@media(max-width:768px){

    .back-to-top{

        right:18px;

        bottom:18px;

        width:50px;

        height:50px;

        font-size:22px;

    }

} 
   
/* Panel quote */
    .panel-quote{
  position: fixed;
  top: 82px;
  right: 0;
  transform: translateX(100%);
  width: min(440px, 94vw);
  height: calc(100vh - 82px);   /* antes era 100vh */
  background: #0f1110;
  border-left: 1px solid #ffffff20;
  box-shadow: -16px 0 32px rgba(0,0,0,.5);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease;
}

.panel-quote.open{
  transform: translateX(0);
}

    .panel-quote header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #ffffff20;color:#e9f7ee}
    .panel-quote .body{flex:1;padding:16px;overflow:auto}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
    .field input,.field select,.field textarea{background:#0e1010;color:#fff;border:1px solid #ffffff24;border-radius:10px;padding:12px;font-size:16px}
    .field small{opacity:.8}
    .submit{display:block;margin:10px auto 0;background:var(--brand);color:#062a16;border:none;padding:12px 18px;border-radius:14px;font-weight:800;cursor:pointer}
    .submit[disabled]{opacity:.6;cursor:not-allowed}

/*==================================================
  FLOATING QUOTE PILL
==================================================*/

.quote-pill{

    position:fixed;

    top:50%;

    left:18px;

    transform:translateY(-50%);

    width:210px;

    height:64px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:14px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#C8FF2C 0%,#A7F000 100%);

    color:#07110B;

    cursor:pointer;

    z-index:9999;

    font-family:Inter,sans-serif;

    box-shadow:
        0 12px 30px rgba(0,0,0,.30),
        0 0 25px rgba(184,255,0,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    animation:quotePulse 2.4s infinite;

}

.quote-pill:hover{

    transform:translateY(-50%) scale(1.05);

    box-shadow:
        0 18px 40px rgba(0,0,0,.40),
        0 0 35px rgba(184,255,0,.50);

}

.quote-pill:active{

    transform:translateY(-50%) scale(.97);

}

.quote-pill i{

    font-size:24px;

    flex:none;

}

.quote-pill__content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    line-height:1.1;

}

.quote-pill strong{

    font-size:17px;

    font-weight:900;

}

.quote-pill small{

    margin-top:4px;

    font-size:12px;

    font-weight:600;

    opacity:.75;

}

/*==========================
  PULSE
==========================*/

@keyframes quotePulse{

    0%{

        transform:translateY(-50%) scale(1);

        box-shadow:
            0 12px 30px rgba(0,0,0,.30),
            0 0 0 0 rgba(184,255,0,.45);

    }

    70%{

        transform:translateY(-50%) scale(1.04);

        box-shadow:
            0 18px 40px rgba(0,0,0,.35),
            0 0 0 18px rgba(184,255,0,0);

    }

    100%{

        transform:translateY(-50%) scale(1);

        box-shadow:
            0 12px 30px rgba(0,0,0,.30),
            0 0 0 0 rgba(184,255,0,0);

    }

}

/*==================================================
  MOBILE
==================================================*/

@media (max-width:768px){

.quote-pill{

    left:50%;

    top:auto;

    bottom:20px;

    transform:translateX(-50%);

    width:230px;

    height:56px;

    padding:0 18px;

    border-radius:999px;

    justify-content:center;

    animation:quotePulseMobile 2.4s infinite;

}

.quote-pill:hover{

    transform:translateX(-50%) scale(1.03);

}

.quote-pill__content{

    align-items:center;

    text-align:center;

}

.quote-pill small{

    display:none;

}

}

@keyframes quotePulseMobile{

    0%{

        transform:translateX(-50%) scale(1);

    }

    50%{

        transform:translateX(-50%) scale(1.05);

    }

    100%{

        transform:translateX(-50%) scale(1);

    }

}

 /* =======================
   FAQ
======================= */
.faq{
  background:#0b0f0c;
  padding:56px 0;            /* ❌ NO se toca */
  letter-spacing:.2px;      /* escala visual sin altura */
}

.faq h2{
  margin:0 0 16px;
  text-align:center;
  font-size:clamp(24px,3vw,32px);
}

/* Tabs */
.tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}

/* Chip */
.chip{
  padding:14px 26px;        /* más cuerpo interno */
  border-radius:999px;
  background:#171a1c;
  border:1px solid #2a2f33;
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  transition:all .25s ease;
}

.chip:hover{
  background:#1e2225;
}

.chip.active{
  background:#fff;
  color:#000;
  border-color:#f0c200;
  box-shadow:0 0 0 3px #f0c200 inset;
}

/* FAQ Content */
.faq-section{
  display:none;
  max-width:1100px;         /* se ve más grande sin crecer en alto */
  margin:0 auto;
}

.faq-section.active{
  display:block;
}

/* Details */
details{
  background:#101412;
  border:1px solid #1d2a20;
  border-radius:12px;
  padding:16px 18px;        /* crecimiento interno */
  margin:10px 0;            /* NO aumentar */
}

details[open]{
  background:#0e1511;
}

/* Pregunta */
summary{
  cursor:pointer;
  font-weight:800;
  font-size:16px;
  list-style:none;
}

/* Respuesta */
details p{
  font-size:15px;
  line-height:1.45;
  margin:8px 0 0;
  color:#d7e6dd;
}

/* Mobile */
@media (max-width:768px){
  .faq{
    padding:48px 0;         /* levemente menor en mobile */
  }

  .chip{
    padding:12px 22px;
    font-size:14px;
  }

  summary{
    font-size:15px;
  }

  details p{
    font-size:14px;
  }
}

/* WhatsApp */
.wa{
position:fixed;
right:20px;
bottom:20px;
z-index:95;
width:60px;
height:60px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow);
}

.wa svg{
width:28px;
height:28px;
display:block;
}

.quote{
position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);
z-index:95;
}

@media (max-width:980px){
.quote{display:none}
}

    /* Bloqueo scroll */
    body.scroll-lock{

    overflow:hidden;

    

}

    /* Pintado perezoso en secciones largas */
    .section, .faq, .partners { content-visibility: auto; contain-intrinsic-size: 900px; }

    /* Respeto reduce motion */
    @media (prefers-reduced-motion: reduce){
      .track{ animation: none !important; }
      .hero__slide, .photo__slide{ animation: none !important; }
    }

/* =======================
   MOBILE — FAQ + TRUST + FOOTER
======================== */
@media (max-width: 768px){

  /* FAQ */
  .faq{
    padding:42px 0;
  }

  .faq h2{
    font-size:22px;
  }

  .faq summary{
    font-size:16px;
  }

  .faq p{
    font-size:15px;
    line-height:1.55;
  }

} /* ← FALTABA ESTA LLAVE */

@media (max-width:560px){

  .track img{
    height:48px;
  }

}

/* ========================================
FOOTER PREMIUM 2026
======================================== */

.footer{

    margin:0;

    background:#0a0a0a;

    border-top:1px solid rgba(255,255,255,.06);

    padding:42px 0 18px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1.1fr .8fr .8fr .7fr;

    gap:45px;

    align-items:flex-start;

}

/* LOGO */

.footer-logo{

    display:inline-block;

}

.footer-logo img{

    width:135px;

    display:block;

}

.footer-text{

    margin-top:16px;

    max-width:260px;

    color:#b8b8b8;

    line-height:1.7;

    font-size:15px;

}

/* TITULOS */

.footer h4{

    color:#fff;

    font-size:20px;

    margin-bottom:14px;

    font-weight:800;

}

/* LISTAS */

.footer ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer li{

    margin-bottom:10px;

}

.footer a{

    color:#c9c9c9;

    text-decoration:none;

    transition:.25s;

}

.footer a:hover{

    color:var(--primary);

}

.footer-links ul{

    margin:0;
    padding:0;
    list-style:none;

}

.footer-links li{

    margin-bottom:10px;

}

.footer-links a{

    color:#c9c9c9;
    text-decoration:none;
    transition:.25s;

}

.footer-links a:hover{

    color:var(--primary);

}

/* REDES */

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.footer-social a:hover{

    background:rgba(95,245,0,.12);

    border-color:rgba(95,245,0,.35);

    transform:translateY(-3px);

}

.footer-social img{

    width:18px;

    height:18px;

    filter:brightness(0) invert(1);

}

/* COPYRIGHT */

.footer-copy{

    margin-top:34px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.06);

    text-align:center;

    color:#8f8f8f;

    font-size:14px;

}

/* MOBILE */

@media(max-width:900px){

.footer{

    padding:35px 0 20px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-logo img{

    margin:auto;

}

.footer-text{

    margin:15px auto 0;

}

.footer-social{

    justify-content:center;

}

}