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

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

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

--texture:url("assets/textures/camaleon-textura-v2.webp");



  --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-y:auto;

}

.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:18px;

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:58px;

font-size:25px;

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{

width:100%;

max-width:320px;

justify-content:center;

padding:16px 22px;

font-size:17px;

}

/* 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 Desktop
------------------- */
.hero { position: relative; min-height: 88vh; isolation: isolate; overflow: hidden; background: #000; }
.hero__slides { position: absolute; inset: 0; z-index: 1; }
#heroLCP { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: translateZ(0); }
.hero__slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation: fadeCycle 18s infinite; }
.hero__slides .hero__slide:nth-of-type(1){ animation-delay: 0s }
.hero__slides .hero__slide:nth-of-type(2){ animation-delay: 3s }
.hero__slides .hero__slide:nth-of-type(3){ animation-delay: 6s }
.hero__slides .hero__slide:nth-of-type(4){ animation-delay: 9s }
.hero__slides .hero__slide:nth-of-type(5){ animation-delay: 12s }
.hero__slides .hero__slide:nth-of-type(6){ animation-delay: 15s }

@keyframes fadeCycle { 0%{opacity:0;transform:scale(1)}6%{opacity:1}28%{opacity:1;transform:scale(1.03)}34%{opacity:0;transform:scale(1.04)}100%{opacity:0} }

.hero::before { content:""; position:absolute; inset:0; z-index:2; background:radial-gradient(120% 120% at 70% 30%, #00000020 0%, #00000075 60%, #000000a0 100%); }

.hero .wrap { position: relative; z-index: 3; min-height: 88vh; display: grid; grid-template-rows: 1fr auto; }

/* -------------------
   HERO Desktop (Texto centrado y más dominante)
------------------- */

.hero__text {
  margin: 0 auto;
  max-width: 1100px;
  width: 90%;
  padding-top: 120px;
  text-align: center;
}

.eyebrow {
  letter-spacing: .12em;
  font-weight: 800;
  color: #bfead0;
  margin-bottom: 1.2rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.15;        /* un poco más de aire */
  max-width: 1100px;        /* menos ancho = mejor lectura */
  margin: 0 auto 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;     /* da presencia */
}

.hero__text p {
  color: var(--muted);
  max-width: 820px;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 1.1rem;
}

.cta-row {
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .95rem 1.35rem;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  cursor: pointer;

  /* FIX animaciones */
  will-change: transform, opacity;
  transition: transform .18s ease, opacity .18s ease;
}

.btn--primary {
  background: #99cc33;
  color: #062a16;
}

.btn--primary:hover {
  transform: translateY(-1px) scale(1.02);
  opacity: .96;
  background: var(--brand-dark); /* cambio instantáneo, sin transición */
}


/* -------------------
   MÉTRICAS Desktop
------------------- */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; align-self: end; padding: 0 0 18px;   margin-top: 45px; }
.metric { background: #13261f; border: 1px solid #00000040; border-radius: 28px; text-align: center; padding: 38px 20px; box-shadow: 0 24px 48px rgba(0,0,0,.40), inset 0 0 0 1px #ffffff0e; transition: transform .18s, box-shadow .18s; }
.metric .ico { width: 82px; height: 82px; margin: 0 auto 8px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.metric .big { font-size: clamp(3.4rem,6.8vw,5.2rem); font-weight: 800; margin: .15rem 0; }
.metric .lab { opacity: .95; font-size: 1.2rem; }

/* -------------------
   MÉTRICAS Mobile slider + Hero adaptado
------------------- */
@media (max-width: 820px){
  .hero { min-height: 55vh; }
  #heroLCP { position: relative; width: 100%; height: auto; object-fit: cover; }
  .hero__slides { position: relative; }
  .hero__slide { display: none !important; animation: none !important; }

  .hero__text { width: 100%; padding: 16px; margin: 0; }
  .eyebrow, .hero h1, .hero p { text-align: left; }
  .cta-row { justify-content: flex-start; margin-top: 10px; }

  /* Métricas: slider horizontal */
  .metrics {
    display: flex;
    overflow: hidden;
    gap: 14px;
    padding: 0 16px 18px;
    scroll-snap-type: x mandatory;
  }
  .metric {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 24px;
    padding: 28px 20px;
    margin-right: 14px;
  }

  .metric .big { font-size: 2.8rem }
  .metric .lab { font-size: 1.05rem }

  /* Ocultar scrollbar */
  .metrics::-webkit-scrollbar { display: none; }
  .metrics { -ms-overflow-style: none; scrollbar-width: none; }
}


    /* Píldora “Cotizar aquí” */
.pill-left{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  padding-left: 1.25rem;

  /* sombra fija (no animada) */
  box-shadow: 0 10px 24px rgba(0,0,0,.35);

  /* animaciones optimizadas */
  animation: pillFloat 6s ease-in-out infinite, pillScale 2.4s ease-in-out infinite;

  will-change: transform;
}

/* movimiento suave */
@keyframes pillFloat{
  0%,100%{
    transform: translateY(-50%);
  }
  50%{
    transform: translateY(calc(-50% - 6px));
  }
}

/* efecto de respiración */
@keyframes pillScale{
  0%,100%{
    transform: translateY(-50%) scale(1);
  }
  50%{
    transform: translateY(-50%) scale(1.04);
  }
}



    /* =======================
       PARTNERS + PERSONALIZA
    ======================== */
    /* =======================
   PARTNERS
======================= */
.partners{
  background:#ffffff;
  color:#111;
  padding:46px 0 28px;
}

.partners h2{
  text-align:center;
  font-size:clamp(22px,2.6vw,28px);
  margin:0 0 14px;
}

/* Contenedor */
.belt{
  overflow:hidden;
  position:relative;
}

/* Cinta */
.track{
  display:flex;
  align-items:center;
  gap:110px;
  padding:18px 0;
  animation:marq 28s linear infinite;
  will-change:transform;
}

/* Logos */
.track img{
  height:56px;          /* COINCIDE con height del HTML */
  width:auto;           /* respeta proporción */
  opacity:.55;
  filter:grayscale(1) contrast(.9);
  transition:
    transform .35s ease,
    opacity .35s ease,
    filter .35s ease;
}

/* Logo central destacado */
.track img.is-center{
  transform:scale(1.35);
  opacity:1;
  filter:none;
}

/* Animación */
@keyframes marq{
  to{ transform:translateX(-50%) }
}


/* =======================
   PARTNERS — MOBILE
======================= */
@media (max-width: 768px){

  .partners{
    padding:32px 0 20px;
  }

  .track{
    gap:56px;
    padding:12px 0;
    animation-duration:22s;
  }

  .track img{
    height:56px;
    opacity:.6;
  }

  .track img.is-center{
    transform:scale(1.15);
  }
}
/* ===============================
   PERSONALIZA V2 – GALERÍA FADE
=============================== */

.personaliza-v2__media{
  position: relative;
  height: 376px;        /* igual al tamaño real */
  overflow: hidden;
  border-radius: 18px;
}

.personaliza-v2__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  opacity:0;
  transition: opacity .8s ease;
}

.personaliza-v2__media img.is-active{
  opacity:1;
}


 .personaliza-v2{
  background:#fff;
  padding:80px 0;
}
    .personaliza-v2__col{ display:flex; gap:26px; align-items:center }
    .personaliza-v2__col--left{ justify-content:flex-end }
    .personaliza-v2__col--right{ justify-content:flex-start }
    .personaliza-v2__img{ width:200px; height:140px; object-fit:cover; border-radius:18px; margin-right:-12px; }
.personaliza-v2__center{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;

  display:grid;
  grid-template-columns:420px 1fr;
  gap:40px;
  align-items:center;
}


    .personaliza-v2__title{ margin:0 0 8px; font-size:clamp(28px,3.2vw,40px); font-weight:800; color:#101610 }
    .personaliza-v2__title span{ color: #2f8f3a }
    .personaliza-v2__desc{ max-width:56ch; color:#2b3b2f; font-size:clamp(14px,1.3vw,16px); line-height:1.45 }
    .personaliza-v2__cta{ padding:.85rem 1.35rem; border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.20) }
    @media (max-width:900px){ .personaliza-v2{ grid-template-columns:1fr; gap:18px } .personaliza-v2__col{ justify-content:center } }
    @media (max-width:620px){ .personaliza-v2__img{ width:150px; height:110px } }

    /* =======================
       CARTA
    ======================== */
    .menu-intro {
      background-image: none;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment:scroll;
      color: #000;
      padding: 38px 0;
    }
    
    .menu-intro .title{font-size:clamp(34px,5vw,56px);text-align:center;font-weight:800;margin:0 0 16px}
    .menu-intro .panel{
      background:#ffffff52;border:1px solid #0000002f;color:#fff;border-radius:26px;padding:18px;
      max-width:min(1100px,94vw);margin:0 auto;text-align:center
    }
    .menu-intro .panel p:first-of-type { font-size: 24px; line-height: 1.6; }

    section.section{padding:60px 0}
    .row{display:grid;gap:28px;align-items:center;margin-bottom:52px}
    .row--left{grid-template-columns:1.1fr 1fr}
    .row--right{grid-template-columns:1fr 1.1fr}
    .photo{position:relative;width:100%;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#0d0d0d}
    .photo--slider{ position:relative; overflow:hidden; border-radius:24px; height:min(75vh, 720px); box-shadow:0 16px 36px rgba(0,0,0,.38) }
    .photo__slides{ position:absolute; inset:0 }
    .photo__slide{
      position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
      opacity:0; animation:cartaCycle 15s infinite;
    }
    .photo__slide:nth-child(1){ animation-delay:0s }
    .photo__slide:nth-child(2){ animation-delay:2.5s }
    .photo__slide:nth-child(3){ animation-delay:5s }
    .photo__slide:nth-child(4){ animation-delay:7.5s }
    .photo__slide:nth-child(5){ animation-delay:10s }
    .photo__slide:nth-child(6){ animation-delay:12.5s }
    @keyframes cartaCycle{
      0%{opacity:0; transform:scale(1)}
      6%{opacity:1}
      40%{opacity:1; transform:scale(1.02)}
      46%{opacity:0; transform:scale(1.03)}
      100%{opacity:0}
    }

    /* En móvil: sin animación pesada de sliders */
    @media (max-width:820px){
  .photo__slide{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  .photo__slide:not(:first-child){
    display:none !important;
  }

  .photo--slider{
    height:44vh;
    max-height:520px;
    border-radius:16px;
  }

  .row--left,
  .row--right{
    grid-template-columns:1fr;
  }
}


    .panel{background:linear-gradient(180deg,#ffffff10,#0000);border:1px solid #ffffff2a;border-radius:20px;padding:22px}
    .panel h3{margin:0 0 6px;color:#35de7d;font-size:clamp(22px,2.2vw,28px)}
    .panel p{margin:0 0 12px;color:#000}
    .list{display:flex;flex-direction:column;gap:10px}
    .item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:#ffffff10;border:1px solid #ffffff1c;border-radius:14px;padding:10px}
    .thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid #ffffff2a;cursor:zoom-in;background:#0d0d0d}
    .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .name{font-weight:800}
    .cta{background:#ffffff;color:#062a16;border:none;border-radius:12px;padding:8px 14px;font-weight:800;cursor:pointer}
    .cta:hover{background:var(--brand-dark)}

    /* Modal */
    dialog::backdrop{background:rgba(0,0,0,.6)}
    dialog{border:none;border-radius:24px;padding:0;overflow:hidden}
    .modal{background:#0b100c;display:grid;grid-template-rows:auto 1fr;width:min(1020px,92vw);height:min(78vh,900px)}
    .modal header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #223025;color:#dfeee4}
    .modal .body img{width:100%;height:100%;object-fit:cover}
    .close{background:#18231b;color:#cfe8d6;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}

    /* Panel quote */
    .panel-quote{
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: min(440px, 94vw);
  height: 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}

 /* =======================
   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 */
    .scroll-lock{ overflow:hidden; height:100dvh; }

    /* 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; }
    }

/* =======================
   TRUST – BARRA (BADGES GRANDES)
======================= */
.trust{
  background:#070a08;
  border-top:1px solid #ffffff14;
  display:flex;
  align-items:center;
  padding:24px 0;            /* control de altura */
}

.trust__container{
  display:grid;
  grid-template-columns: minmax(220px,1fr) auto minmax(260px,1fr);
  align-items:center;
  gap:28px;
}

/* Título */
.trust__title{
  margin:0;
  font-size:clamp(20px,2.5vw,26px);
  color:#eafff1;
}

/* Badges */
.trust__badges{
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:center;
}

.trust__badge{
  width:120px;
  height:120px;
  object-fit:contain;
}

/* Pago (lado derecho) */
.trust__pay{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:360px;
  justify-content:flex-start; /* antes era center */
  align-self:flex-start;      /* se alinea al top de la fila */
  text-align:left;
}
.trust__pay{
  margin-top: -20px; /* ajusta según necesidad */
}


.trust__logo{
  width:170px;               /* más presencia */
  display:block;
  margin:0;
  margin-bottom: -55px;
  margin-top:-20px;
}

.trust__copy{
  margin:0;
  font-size:13.5px;
  line-height:1.3;
  color:#cfe3d6;
}

.trust__btn{
  padding:.75rem 1.6rem;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  background:#99cc33;
  color:#062a16;
  text-decoration:none;
  align-self:flex-start;
  margin-top:4px;
}

.trust__small{
  margin:0;
  font-size:12.5px;
  color:#9fb8aa;
}

/* Mobile */
@media (max-width:768px){
  .trust{
    padding:28px 0;
  }

  .trust__container{
    grid-template-columns:1fr;
    text-align:center;
    gap:24px;
  }

  .trust__badge{
    width:100px;            /* mobile un poco menor */
    height:100px;
  }

  .trust__pay{
    align-items:center;
    text-align:center;
  }

  .trust__btn{
    align-self:center;
  }
}




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

footer{
  background:#0a0a0a;
  color:#ddd;
  padding:22px 0;
  text-align:center;
}

.footer-social{
  margin-top:10px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.footer-social a{
  display:inline-flex;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ffffff22;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}

.footer-social a:hover{
  background:#ffffff30;
}

.footer-social img{
  width:32px;
  height:32px;
}

/* =======================
   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;
  }

}

/* ===============================
   PARTNERS + PERSONALIZA – OPTIMIZADO
=============================== */

/* ===============================
   PARTNERS – DESKTOP
=============================== */
.partners {
  background: #f7fff9;
  color: #111;
  padding: 46px 0 28px;
}

.partners h2 {
  text-align: center;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 14px;
}

/* Contenedor cinta */
.belt {
  overflow: hidden;
  position: relative;
}

/* Cinta con logos */
.track {
  display: flex;
  align-items: center;
  gap: 110px;
  padding: 18px 0;
  animation: marq 28s linear infinite;
  will-change: transform;
}

/* Logos */
.track img {
  height: 56px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) contrast(0.9);
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

/* Logo central destacado */
.track img.is-center {
  transform: scale(1.35);
  opacity: 1;
  filter: none;
}

/* Animación marquee */
@keyframes marq {
  to { transform: translateX(-50%); }
}

/* ===============================
   PARTNERS – MOBILE
=============================== */
@media (max-width: 768px) {
  .partners {
    padding: 32px 0 20px;
  }

  .track {
    gap: 56px;
    padding: 12px 0;
    animation-duration: 22s;
  }

  .track img {
    height: 56px;
    opacity: 0.6;
  }

  .track img.is-center {
    transform: scale(1.15);
  }
}

/* ===============================
   PARTNERS + PERSONALIZA – LAYOUT
=============================== */

.partners__grid{
    display:block;
    margin-top:18px;
}

/* Mantiene el carrusel dentro del container */
.partners .belt{
  width:100%;
}


/* ===============================
   RESPONSIVE (NO SE ROMPE MOBILE)
=============================== */
@media (max-width:900px){

  .partners__grid{
    grid-template-columns:1fr;
    gap:26px;
  }

} /* ← FALTABA ESTA LLAVE */

 /* ===============================
   PERSONALIZA V2 – SECCIÓN BASE
=============================== */

.personaliza-v2{
  background:#ffffff;
  padding:80px 0;
}

/* Contenedor centrado */
.personaliza-v2__center{
  max-width:1100px;
  margin:0 auto;

  display:grid;
  grid-template-columns:420px 1fr;
  gap:48px;
  align-items:center;
}

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

.personaliza-v2__media{
  position:relative;
  width:100%;
  height:460px;
  overflow:hidden;
  border-radius:18px;
}

.personaliza-v2__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  max-width:none;
  display:block;

  opacity:0;
  transition:opacity .8s ease;
}

.personaliza-v2__media img.is-active{
  opacity:1;
}

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

.personaliza-v2__content{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.personaliza-v2__title{
  font-size:32px;
  line-height:1.1;
}

.personaliza-v2__desc{
  font-size:16px;
  color:#333;
  max-width:520px;
}

/* ===============================
   MOBILE – CARD
=============================== */

@media (max-width:900px){

  .personaliza-v2{
    padding:40px 0;
  }

  .personaliza-v2__center{
    grid-template-columns:1fr;
    gap:24px;

    padding:26px;
    background:#ffffff;
    border-radius:22px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
  }

  .personaliza-v2__media{
    height:320px;
    border-radius:16px;
  }

  .personaliza-v2__content{
    text-align:center;
    align-items:center;
  }

  .personaliza-v2__desc{
    max-width:none;
  }
}


@media (max-width:768px){
  .pill-left{
    animation:none;
  }
}

/* =================================
   POPUP JUNIO CAMALEON
================================= */

.popup-overlay{
  position:fixed;
  inset:0;

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

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

  z-index:999999;

  opacity:0;
  visibility:hidden;

  transition:.3s ease;
}

.popup-overlay.show{
  opacity:1;
  visibility:visible;
}

.popup-container{
  position:relative;

  width:min(92vw,650px);

  animation:popupShow .35s ease;
}

.popup-image{
  width:100%;
  display:block;
  border-radius:20px;
}

.popup-close{
  position:absolute;
  top:-12px;
  right:-12px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#fff;
  color:#000;

  font-size:22px;
  font-weight:700;

  cursor:pointer;
}

.popup-whatsapp{
  position:absolute;

  left:50%;
  bottom:25px;

  transform:translateX(-50%);

  background:#25D366;
  color:#fff;

  text-decoration:none;

  padding:14px 28px;

  border-radius:999px;

  font-weight:700;
}

@keyframes popupShow{

  from{
    opacity:0;
    transform:scale(.9);
  }

  to{
    opacity:1;
    transform:scale(1);
  }

}

@media(max-width:768px){

  .popup-container{
    width:92vw;
  }

  .popup-whatsapp{
    width:80%;
    text-align:center;
    font-size:14px;
  }

}