/* ========================================
   FLEX GLP - Hoja de estilos · versión 1.1
   Valores tomados del Manual de Identidad Visual FLEX GLP 2025:
     · Verde institucional  #27AE60
     · Blanco predominante  #FFFFFF
     · Negro profundo       #111111
     · Tipografía oficial   Montserrat
       Títulos ExtraBold (mayúsculas) · Subtítulos Medium/Regular · Cuerpo Regular
   Restricciones respetadas: el logotipo no rota, no se distorsiona,
   no lleva sombras ni efectos, y conserva su espacio libre mínimo.
   Marketools
   ======================================== */

/* -- 1. TOKENS ---------------------------------------- */
:root{
  /* Marca */
  --verde:       #27AE60;
  --verde-claro: #3ECB78;   /* uso exclusivo sobre fondo negro, para contraste */
  --verde-hondo: #1B7A43;
  --verde-tenue: #E7F4EC;
  --ink:         #111111;
  --blanco:      #FFFFFF;

  /* Color de sistema (avisos y errores) - PENDIENTE de aprobación del cliente,
     el manual sólo define tres colores corporativos. */
  --alerta:      #C77700;
  --error:       #C0431F;

  /* Neutros con ligero sesgo verde para que lean como elegidos */
  --superficie:  #FFFFFF;
  --superficie2: #F3F6F3;
  --superficie3: #E9EEE9;
  --linea:       #DDE4DD;
  --linea-dark:  rgba(255,255,255,.12);

  --texto:       #1A211C;
  --texto-2:     #4C564E;
  --texto-3:     #7E8880;
  --texto-light:   #F4F6F4;
  --texto-light-2: rgba(244,246,244,.70);

  --font: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --gutter: 24px;
  /* Ritmo vertical de las secciones. Se reduce en pantallas chicas para
     compactar la pagina sin tocar el contenido. */
  --pad-sec: 104px;
  --pad-sec-xl: 112px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-sm: 0 2px 8px rgba(17,17,17,.05);
  --sh:    0 10px 30px -12px rgba(17,17,17,.16);
  --sh-lg: 0 30px 70px -30px rgba(17,17,17,.28);
  --sh-verde: 0 16px 36px -16px rgba(39,174,96,.55);

  --ease: cubic-bezier(.22,.85,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* -- 2. RESET ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-weight:400;
  background:var(--superficie);
  color:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--verde);color:#fff}

svg[viewBox="0 0 24 24"]{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* -- 3. TIPOGRAFÍA ---------------------------------------- */
/* El manual pide títulos en ExtraBold y mayúsculas. Se aplica en los
   títulos de sección; los titulares largos van en caja normal para no
   sacrificar la legibilidad de frases de más de cuatro palabras. */
.h2{
  font-weight:800;
  font-size:clamp(1.9rem,4vw,3.05rem);
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--light{color:var(--texto-light)}
.h2 .muted{color:var(--texto-3);font-weight:500;display:block}

.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--texto-2);max-width:62ch;font-weight:400}
.lead--light{color:var(--texto-light-2)}
.lead strong{color:var(--texto);font-weight:600}
.lead--light strong{color:var(--texto-light)}

.kicker{
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--verde-hondo);
  margin-bottom:18px;
}
.kicker--light{color:var(--verde-claro)}

.verde{color:var(--verde)}
.h2--light .verde,.hero__title .verde{color:var(--verde-claro)}

.sec-head{max-width:760px;margin-bottom:52px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .lead{margin-inline:auto}
.sec-head .lead{margin-top:20px}

.cita{
  margin:28px 0 0;
  padding:18px 0 18px 22px;
  border-left:3px solid var(--verde);
  font-size:1.15rem;
  font-weight:600;
  font-style:italic;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:34ch;
}

/* -- 4. ANIMACIÓN ---------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0) * 85ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:var(--verde);
  transition:width .1s linear;
}

/* -- 5. BOTONES ---------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-weight:700;font-size:.95rem;letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
  overflow:hidden;
}
.btn svg{width:18px;height:18px;stroke-width:2.2;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
/* Los botones de WhatsApp llevan el icono al inicio: no debe desplazarse */
.btn[data-wa] svg{stroke-width:1.7}
.btn[data-wa]:hover svg{transform:none}
.btn--sm{padding:13px 24px;font-size:.88rem}
.btn--full{width:100%}

.btn--primary{background:var(--verde);color:#fff;box-shadow:var(--sh-verde)}
.btn--primary:hover{background:var(--verde-hondo);transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(39,174,96,.7)}

.btn--ghost{
  border:1.5px solid rgba(17,17,17,.20);
  color:var(--ink);
  background:transparent;
}
.btn--ghost:hover{border-color:var(--verde);color:var(--verde-hondo);transform:translateY(-3px)}
.hero .btn--ghost,.safety .btn--ghost,.contact .btn--ghost{
  border-color:rgba(255,255,255,.24);color:var(--texto-light);background:rgba(255,255,255,.04);
}
.hero .btn--ghost:hover,.safety .btn--ghost:hover,.contact .btn--ghost:hover{
  border-color:var(--verde-claro);color:var(--verde-claro);
}

/* -- 6. CHIP ---------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  font-size:.82rem;font-weight:500;
  color:var(--texto-light-2);
}
.chip__dot{
  width:8px;height:8px;border-radius:50%;background:var(--verde-claro);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(62,203,120,.6)}
  70%{box-shadow:0 0 0 10px rgba(62,203,120,0)}
  100%{box-shadow:0 0 0 0 rgba(62,203,120,0)}
}

/* -- 7. NAVBAR ---------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--container);margin-inline:auto;
  padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(17,17,17,.88);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--linea-dark);
}
/* CLAVE PARA iOS: un ancestro con backdrop-filter se vuelve el marco de
   referencia de sus hijos position:fixed. Con la barra desenfocada, el
   menu se medía contra la barra (60px) en vez de contra la pantalla.
   Mientras el menu esta abierto se retira el efecto. */
.nav.menu-abierto,
.nav.menu-abierto.is-stuck{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:transparent;
  border-bottom-color:transparent;
}
.nav.is-stuck .nav__inner{padding-block:12px}

/* Logotipo oficial en imagen. El manual pide conservar el espacio
   libre alrededor: se resuelve con el padding. */
.logo{display:inline-flex;align-items:center;padding:8px 18px 8px 0;position:relative;z-index:1002}
/* Alto fijo y ancho automatico: el logotipo nunca se deforma ni se
   desborda, aunque el archivo venga a mayor resolucion. */
.logo img{height:26px;width:auto;max-width:none;display:block}
.nav.is-stuck .logo img{height:24px}

.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a{
  position:relative;font-size:.93rem;font-weight:500;
  color:var(--texto-light-2);transition:color .3s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--verde-claro);transition:width .35s var(--ease);
}
.nav__links a:hover{color:var(--texto-light)}
.nav__links a:hover::after{width:100%}

.nav__cta{
  padding:11px 22px;border-radius:100px;
  background:var(--verde);color:#fff!important;font-weight:700;
  transition:background .3s,transform .3s var(--ease);
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--verde-hondo);transform:translateY(-2px)}

/* Boton de cerrar dentro del menu movil */
.nav__cerrar{
  display:none;
  position:fixed;top:14px;right:16px;
  width:48px;height:48px;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:var(--texto-light);
  /* Por encima del menu (1001) y del hamburguesa (1002) */
  z-index:1003;
}
.nav__cerrar svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.nav__cerrar:active{background:rgba(255,255,255,.16)}

.nav__burger{
  display:none;width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:6px;padding:0 10px;
  /* Por encima del overlay del menu (z-index 1001), o el boton
     queda tapado y no se puede cerrar lo que se abrio. */
  position:relative;z-index:1002;
}
.nav__burger span{display:block;height:2px;background:var(--texto-light);border-radius:2px;transition:transform .35s var(--ease),opacity .25s,width .35s}
.nav__burger span:nth-child(2){width:70%;margin-left:auto}
/* Con el menu abierto manda la X: el hamburguesa se retira para que
   no queden dos controles encimados en la misma esquina. */
.nav__burger.is-open{opacity:0;pointer-events:none}

/* -- 8. HERO ---------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:120px 0 84px;
  background:
    radial-gradient(90% 70% at 84% 6%,rgba(39,174,96,.16) 0%,transparent 54%),
    linear-gradient(168deg,#181C18 0%,var(--ink) 58%,#0A0C0A 100%);
  overflow:hidden;
  color:var(--texto-light);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.40}
.hero__grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%,#000 20%,transparent 80%);
}
.hero__glow{
  position:absolute;top:-15%;right:-8%;width:54vw;height:54vw;max-width:800px;max-height:800px;
  background:radial-gradient(circle,rgba(39,174,96,.20) 0%,transparent 62%);
  filter:blur(50px);animation:float 16s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5%,6%) scale(1.1)}
}

.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;
}
/* Hero sin panel lateral: una sola columna, con el titular al frente */
.hero__inner--solo{grid-template-columns:1fr;gap:0}
.hero__inner--solo .hero__content{max-width:52rem}
.hero__inner--solo .hero__title{font-size:clamp(2.6rem,6.4vw,5rem)}
.hero__inner--solo .hero__lead{max-width:60ch}
.hero__inner--solo .hero__trust{
  flex-direction:row;flex-wrap:wrap;gap:14px 34px;max-width:none;
}
.hero__inner--solo .hero__trust li{flex:0 1 auto}
.hero__title{
  font-weight:800;
  font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.04em;
  margin:22px 0 20px;
  text-wrap:balance;
}
.hero__lead{font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--texto-light-2);max-width:54ch}
.hero__lead strong{color:var(--texto-light);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.hero__trust{
  display:flex;flex-direction:column;gap:11px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--linea-dark);
}
.hero__trust li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.87rem;color:var(--texto-light-2);
}
.hero__trust svg{width:18px;height:18px;color:var(--verde-claro);flex:none;margin-top:2px}

/* -- 9. RECIBO (panel del hero) ---------------------------------------- */
.recibo{
  position:relative;
  border-radius:var(--r-xl);
  padding:26px;
  background:var(--blanco);
  color:var(--texto);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.recibo__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--linea);
}
.recibo__marca{display:flex;align-items:center}
.recibo__marca img{height:22px;width:auto;max-width:none;display:block}
.recibo__tit{
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-2);white-space:nowrap;
}
.recibo__folio{
  font-size:.66rem;font-weight:600;letter-spacing:.1em;
  color:var(--texto-3);white-space:nowrap;
}
/* Fila de folio / referencia / departamento */
.recibo__datos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:14px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--linea);
}
.recibo__datos span{
  display:block;font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:3px;
}
.recibo__datos b{font-size:.82rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.recibo__periodo{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 6px;
}
.recibo__periodo span{
  font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3);
}
.recibo__periodo b{font-size:.8rem;font-weight:600;color:var(--texto-2)}

.recibo__lineas{display:flex;flex-direction:column}
.recibo__lineas li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linea);
  font-size:.92rem;
}
.recibo__lineas span{color:var(--texto-2)}
.recibo__lineas b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.recibo__lineas .destacada{border-bottom:0;padding-top:14px}
.recibo__lineas .destacada span{color:var(--texto);font-weight:600}
.recibo__lineas .destacada b{
  font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--verde-hondo);
}
.recibo__lineas .destacada b i{font-style:normal}
.recibo__lineas .sutil{padding-top:0;border-bottom:0;font-size:.82rem}
.recibo__lineas .sutil span,.recibo__lineas .sutil b{color:var(--texto-3);font-weight:500}

.recibo__evidencia{
  display:flex;align-items:center;gap:14px;
  background:var(--superficie2);border:1px solid var(--linea);
  border-radius:var(--r);padding:13px;margin:6px 0 18px;
}
.recibo__medidor{
  width:92px;flex:none;border-radius:9px;
  background:var(--ink);padding:9px 7px;text-align:center;
}
.medidor__caratula{
  background:#F4F6F4;border-radius:4px;padding:5px 2px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap;overflow:hidden;
}
.medidor__pie{display:block;font-size:.55rem;letter-spacing:.14em;color:var(--verde-claro);margin-top:5px;font-weight:600}
.recibo__evidencia-txt b{display:block;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:3px}
.recibo__evidencia-txt span{font-size:.76rem;color:var(--texto-2);line-height:1.45;display:block}

.recibo__total{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:2px solid var(--ink);
}
.recibo__total span{
  display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:4px;font-weight:600;
}
.recibo__total > div > b{
  font-size:1.7rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.recibo__total > div > b i{font-style:normal}
.recibo__ref{text-align:right}
.recibo__ref b{font-size:.92rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--texto-2)}
.recibo__pie{margin-top:14px;font-size:.68rem;color:var(--texto-3);line-height:1.45}

/* -- 10. MARQUEE ---------------------------------------- */
.marquee{
  display:flex;overflow:hidden;user-select:none;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;align-items:center;flex:none;animation:scrollx var(--dur,42s) linear infinite}
.marquee--reverse .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.phrase-marquee{background:var(--ink);padding:20px 0;position:relative;z-index:3}
.phrase-marquee .marquee__track span{
  font-weight:800;
  font-size:clamp(1.2rem,2.6vw,1.9rem);
  letter-spacing:-.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(244,246,244,.38);
  padding-inline:24px;white-space:nowrap;
  transition:color .4s,-webkit-text-stroke-color .4s;
}
.phrase-marquee .marquee__track span:hover{color:var(--verde-claro);-webkit-text-stroke-color:transparent}
.phrase-marquee .marquee__track i{
  width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none;
}

/* -- 11. CLIENTES ---------------------------------------- */
.partners{padding:92px 0 84px;background:var(--superficie)}
.partners__kicker{
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde-hondo);text-align:center;margin-bottom:14px;
}
.partners__title{
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.16;letter-spacing:-.03em;
  text-align:center;max-width:24ch;margin:0 auto 44px;text-wrap:balance;
}
.marquee--logos{padding-block:9px}
.marquee--logos + .marquee--logos{margin-top:13px}

.plogo{
  flex:none;display:flex;align-items:center;justify-content:center;gap:13px;
  height:96px;min-width:262px;margin-inline:8px;padding:0 28px;
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--blanco);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.plogo:hover{transform:translateY(-5px);border-color:var(--verde);box-shadow:var(--sh)}
.plogo__mark{
  width:42px;height:42px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  font-weight:800;font-size:.95rem;color:#fff;letter-spacing:-.02em;
  background:var(--ink);
  transition:background .4s;
}
.plogo:hover .plogo__mark{background:var(--verde)}
.plogo__name{font-weight:700;font-size:1rem;letter-spacing:-.025em;color:var(--texto);line-height:1.2}
.plogo__name small{
  display:block;font-weight:500;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3);margin-top:3px;
}
.plogo__img{max-height:46px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.66;transition:filter .4s,opacity .4s}
.plogo:hover .plogo__img{filter:none;opacity:1}
.plogo--empty{border-style:dashed;background:transparent}
.plogo--empty .plogo__mark{background:var(--superficie3);color:var(--texto-3)}

.partners__note{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:40px;font-size:.88rem;color:var(--texto-3);text-align:center;
}
.partners__note .dot{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}
.partners__note a{color:var(--verde-hondo);font-weight:600;border-bottom:1px solid rgba(39,174,96,.4)}

/* -- 12. MÉTRICAS ---------------------------------------- */
.metrics{background:var(--superficie);padding-bottom:96px}
.metrics__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;background:var(--blanco);
}
.metric{padding:36px 28px;border-right:1px solid var(--linea);transition:background .4s}
.metric:last-child{border-right:0}
.metric:hover{background:var(--verde-tenue)}
.metric__num{
  display:block;font-weight:800;
  font-size:clamp(2.2rem,4vw,3rem);line-height:1;letter-spacing:-.045em;
  color:var(--verde);margin-bottom:13px;font-variant-numeric:tabular-nums;
}
.metric span{font-size:.89rem;color:var(--texto-2);line-height:1.5;display:block}

/* -- 13. NOSOTROS ---------------------------------------- */
.about{padding:var(--pad-sec) 0;background:var(--superficie2)}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:66px;align-items:center}
.about__left p{color:var(--texto-2);margin-top:16px}
.about__left .lead{margin-top:20px}

.about__pillars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.about__pillars article{
  padding:24px;border-radius:var(--r-lg);background:var(--blanco);border:1px solid var(--linea);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.about__pillars article:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.about__pillars h3{
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-hondo);margin-bottom:10px;
}
.about__pillars p{font-size:.88rem;margin-top:0;line-height:1.55}

.stack-card{
  position:relative;padding:30px;border-radius:var(--r-xl);
  background:var(--ink);color:var(--texto-light);box-shadow:var(--sh-lg);overflow:hidden;
}
.stack-card__glow{
  position:absolute;top:-40%;right:-30%;width:70%;height:120%;
  background:radial-gradient(circle,rgba(39,174,96,.26),transparent 65%);filter:blur(30px);
}
.stack-card__tag{
  position:relative;display:inline-block;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-claro);margin-bottom:22px;
}
.stack-card__rows{position:relative;display:flex;flex-direction:column}
.srow{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea-dark);font-size:.89rem;
}
.srow:last-child{border-bottom:0}
.srow span{color:var(--texto-light-2)}
.srow b{font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:100px;white-space:nowrap}
.srow b.ok{color:var(--verde-claro);background:rgba(62,203,120,.14)}
.srow b.warn{color:#F0A93B;background:rgba(240,169,59,.14)}
.stack-card__foot{position:relative;margin-top:22px;font-size:.79rem;color:var(--texto-3);line-height:1.5}

/* -- 14. SERVICIO ---------------------------------------- */
.solutions{padding:var(--pad-sec) 0;background:var(--superficie)}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sol-card{
  position:relative;
  padding:32px 28px;border-radius:var(--r-lg);
  background:var(--blanco);border:1px solid var(--linea);
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
}
.sol-card--accent{grid-column:span 2;background:var(--ink);border-color:transparent;color:var(--texto-light)}
.sol-card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:rgba(39,174,96,.4)}
.sol-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(39,174,96,.10),transparent 65%);
}
.sol-card:hover::before{opacity:1}

.sol-card__icon{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--verde-tenue);color:var(--verde-hondo);margin-bottom:20px;
  transition:background .4s,color .4s;
}
.sol-card__icon svg{width:24px;height:24px}
.sol-card:hover .sol-card__icon{background:var(--verde);color:#fff}
.sol-card h3{font-size:1.2rem;font-weight:700;letter-spacing:-.028em;line-height:1.25;margin-bottom:11px;position:relative}
.sol-card p{font-size:.93rem;color:var(--texto-2);position:relative}
.sol-card--accent h3{color:var(--texto-light);font-size:1.5rem}
.sol-card--accent p{color:var(--texto-light-2);max-width:52ch}
.sol-card--accent .sol-card__icon{background:rgba(62,203,120,.15);color:var(--verde-claro)}
.sol-card--accent:hover .sol-card__icon{background:var(--verde);color:#fff}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;position:relative}
.tags li{
  font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:100px;
  background:var(--superficie2);color:var(--texto-2);border:1px solid var(--linea);
}
.sol-card--accent .tags li{background:rgba(255,255,255,.07);border-color:var(--linea-dark);color:var(--texto-light-2)}

/* -- Bloque del recibo (seccion de servicio) -- */
.recibo-bloque{
  display:grid;grid-template-columns:1fr .8fr;gap:52px;align-items:center;
  margin-top:64px;padding-top:56px;border-top:1px solid var(--linea);
}
.recibo-bloque__txt h3{
  font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.16;letter-spacing:-.032em;color:var(--ink);
  margin-bottom:14px;text-wrap:balance;
}
.recibo-bloque__txt p{font-size:.98rem;color:var(--texto-2);max-width:52ch}
.recibo-bloque__txt .checks{margin-top:22px}
.recibo-bloque__vis{display:flex;justify-content:center}
.recibo-bloque__vis .recibo{
  max-width:400px;width:100%;
  box-shadow:0 30px 70px -30px rgba(17,17,17,.35);
  border:1px solid var(--linea);
}

.asesoria{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-top:16px;padding:32px 34px;
  border:1px solid var(--linea);border-left:4px solid var(--verde);
  border-radius:var(--r-lg);background:var(--verde-tenue);
}
.asesoria h3{font-size:1.2rem;font-weight:700;letter-spacing:-.025em;margin-bottom:9px;color:var(--ink)}
.asesoria p{font-size:.93rem;color:var(--texto-2);max-width:68ch}
.asesoria strong{color:var(--ink);font-weight:600}

/* -- 15. SECTORES ---------------------------------------- */
.sectors{padding:var(--pad-sec) 0;background:var(--superficie2)}
.sectors__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.stab{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:100px;
  border:1px solid var(--linea);background:var(--blanco);
  font-weight:600;font-size:.9rem;
  color:var(--texto-2);
  transition:all .4s var(--ease);
}
.stab svg{width:19px;height:19px;color:var(--texto-3);transition:color .3s}
.stab:hover{border-color:var(--verde);color:var(--texto)}
.stab.is-active{background:var(--verde);border-color:transparent;color:#fff;box-shadow:var(--sh-verde)}
.stab.is-active svg{color:#fff}

.spanel{
  display:none;grid-template-columns:1.5fr .8fr;gap:42px;
  padding:44px;border-radius:var(--r-xl);
  background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sh);
}
.spanel.is-active{display:grid;animation:panelIn .55s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.spanel__badge{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--verde-hondo);background:var(--verde-tenue);
  padding:6px 13px;border-radius:100px;margin-bottom:16px;
}
.spanel h3{
  font-weight:800;font-size:clamp(1.3rem,2.3vw,1.8rem);
  line-height:1.2;letter-spacing:-.032em;margin-bottom:15px;text-wrap:balance;
}
.spanel p{color:var(--texto-2);font-size:.97rem;max-width:60ch}
.spanel .btn{margin-top:26px}

.checks{margin-top:24px;display:flex;flex-direction:column;gap:11px}
.checks li{position:relative;padding-left:29px;font-size:.93rem;color:var(--texto-2)}
.checks li::before{
  content:'';position:absolute;left:0;top:6px;width:17px;height:17px;border-radius:50%;
  background:var(--verde-tenue);
}
.checks li::after{
  content:'';position:absolute;left:5px;top:10px;width:7px;height:4px;
  border-left:2px solid var(--verde-hondo);border-bottom:2px solid var(--verde-hondo);
  transform:rotate(-45deg);
}
.spanel__side{display:flex;flex-direction:column;gap:15px;justify-content:center}
.spanel__stat{padding:26px;border-radius:var(--r-lg);background:var(--ink);color:var(--texto-light)}
.spanel__stat b{
  display:block;font-weight:800;font-size:2.3rem;line-height:1;
  letter-spacing:-.045em;color:var(--verde-claro);margin-bottom:9px;
}
.spanel__stat span{font-size:.81rem;color:var(--texto-light-2);line-height:1.5}

/* -- 16. BENTO ---------------------------------------- */
.why{padding:var(--pad-sec) 0;background:var(--superficie)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bento__item{
  position:relative;grid-column:span 2;
  padding:34px 30px;border-radius:var(--r-lg);
  background:var(--blanco);border:1px solid var(--linea);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;
}
.bento__item--lg{grid-row:span 2}
.bento__item:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(39,174,96,.35)}
.bento__item::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(39,174,96,.10),transparent 65%);
}
.bento__item:hover::before{opacity:1}
.bento__item h3{
  font-weight:700;font-size:clamp(1.1rem,1.8vw,1.45rem);
  line-height:1.24;letter-spacing:-.03em;margin-bottom:11px;position:relative;text-wrap:balance;
}
.bento__item p{font-size:.94rem;color:var(--texto-2);position:relative}
.bento__viz{display:flex;gap:9px;margin-top:28px;position:relative}
.bento__viz span{
  flex:1;height:70px;border-radius:11px;
  background:var(--verde-tenue);border:1px solid rgba(39,174,96,.22);
  position:relative;overflow:hidden;
}
.bento__viz span::after{
  content:'';position:absolute;left:0;right:0;bottom:0;background:var(--verde);
  animation:barGrow 2.6s var(--ease-out) infinite alternate;
}
.bento__viz span:nth-child(1)::after{height:64%}
.bento__viz span:nth-child(2)::after{height:82%;animation-delay:.25s}
.bento__viz span:nth-child(3)::after{height:72%;animation-delay:.5s}
@keyframes barGrow{from{transform:translateY(30%)}to{transform:translateY(0)}}

.bento__item--accent{background:var(--ink);border-color:transparent;color:var(--texto-light)}
.bento__item--accent h3{color:var(--texto-light)}
.bento__item--accent p{color:var(--texto-light-2)}

.distintos{margin-top:64px;padding-top:48px;border-top:1px solid var(--linea)}
.distintos__tit{font-weight:800;font-size:1.45rem;letter-spacing:-.03em;margin-bottom:26px;color:var(--ink)}
.distintos__list{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.distintos__list li{
  padding:22px;border-radius:var(--r);background:var(--superficie2);border:1px solid var(--linea);
  transition:border-color .4s,transform .4s var(--ease);
}
.distintos__list li:hover{border-color:var(--verde);transform:translateY(-4px)}
.distintos__list b{display:block;font-weight:700;font-size:.94rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:7px;line-height:1.3}
.distintos__list span{font-size:.83rem;color:var(--texto-2);line-height:1.5}

/* -- 17. PROCESO ---------------------------------------- */
.process{padding:var(--pad-sec) 0;background:var(--superficie2);overflow:hidden}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:56px}
.timeline__line{position:absolute;top:20px;left:10%;right:10%;height:2px;background:var(--linea);border-radius:2px}
.timeline__line span{display:block;height:100%;width:0%;border-radius:2px;background:var(--verde);transition:width .5s var(--ease)}
.tstep{position:relative;text-align:center;padding:0 8px}
.tstep__dot{
  position:absolute;top:-56px;left:50%;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--blanco);border:2px solid var(--linea);
  font-weight:800;font-size:.9rem;color:var(--texto-3);
  transition:all .5s var(--ease);
}
.tstep.is-in .tstep__dot{background:var(--verde);border-color:transparent;color:#fff}
.tstep h3{font-weight:700;font-size:1.04rem;letter-spacing:-.025em;margin-bottom:9px}
.tstep p{font-size:.86rem;color:var(--texto-2);line-height:1.55}
.tstep__meta{
  display:inline-block;margin-top:13px;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--verde-hondo);
  background:var(--verde-tenue);padding:5px 11px;border-radius:100px;
}

.proceso-cta{
  margin-top:64px;padding:44px;border-radius:var(--r-xl);
  background:var(--verde);color:#fff;text-align:center;
}
.proceso-cta h3{font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em;margin-bottom:24px;text-wrap:balance}
.proceso-cta__pasos{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:28px;
  counter-reset:paso;
}
.proceso-cta__pasos li{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  padding:11px 20px;border-radius:100px;font-size:.88rem;font-weight:500;
}
.proceso-cta__pasos li::before{
  counter-increment:paso;content:counter(paso);
  width:21px;height:21px;border-radius:50%;background:#fff;color:var(--verde-hondo);
  display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none;
}
.proceso-cta .btn--primary{background:var(--ink);box-shadow:none}
.proceso-cta .btn--primary:hover{background:#000}
.proceso-cta__frase{margin-top:22px;font-size:1rem;font-weight:600;font-style:italic;color:rgba(255,255,255,.9)}

/* -- 18. SEGURIDAD ---------------------------------------- */
.safety{position:relative;padding:var(--pad-sec-xl) 0;background:var(--ink);color:var(--texto-light);overflow:hidden}
.safety__bg{
  position:absolute;inset:0;
  background:radial-gradient(70% 60% at 15% 0%,rgba(39,174,96,.18),transparent 60%);
}
.safety__bg::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(80% 60% at 50% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 50%,#000,transparent 75%);
}
.safety__inner{position:relative;z-index:2}
.safety__head{max-width:760px;margin-bottom:52px}
.safety__head .lead{margin-top:20px}

.safety__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{
  position:relative;padding:28px 25px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid var(--linea-dark);
  overflow:hidden;
  transition:transform .5s var(--ease),background .4s,border-color .4s;
}
.scard:hover{transform:translateY(-6px);background:rgba(255,255,255,.08);border-color:rgba(62,203,120,.35)}
.scard::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(62,203,120,.14),transparent 65%);
}
.scard:hover::before{opacity:1}
.scard svg{width:27px;height:27px;color:var(--verde-claro);margin-bottom:16px;position:relative}
.scard h3{font-weight:700;font-size:1.02rem;letter-spacing:-.025em;margin-bottom:9px;position:relative}
.scard p{font-size:.87rem;color:var(--texto-light-2);line-height:1.55;position:relative}

.values{margin-top:72px;padding-top:52px;border-top:1px solid var(--linea-dark)}
.values__title{font-weight:800;font-size:1.45rem;letter-spacing:-.03em;margin-bottom:30px;color:var(--texto-light)}
.values__list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea-dark);border:1px solid var(--linea-dark);
  border-radius:var(--r-lg);overflow:hidden;
}
.values__list li{padding:26px 24px;background:var(--ink);transition:background .4s}
.values__list li:hover{background:#1C221D}
.values__list b{display:block;font-weight:700;font-size:1rem;letter-spacing:-.02em;color:var(--verde-claro);margin-bottom:8px}
.values__list span{font-size:.85rem;color:var(--texto-light-2);line-height:1.55}

/* -- 19. APRENDE ---------------------------------------- */
.learn{padding:var(--pad-sec) 0;background:var(--superficie)}
.learn__social{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.social-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:100px;
  border:1px solid var(--linea);background:var(--blanco);
  font-size:.87rem;font-weight:600;color:var(--texto-2);
  transition:all .35s var(--ease);
}
.social-btn svg{width:17px;height:17px}
.social-btn:hover{border-color:var(--verde);color:var(--verde-hondo);transform:translateY(-3px)}
/* Redes aun sin cuenta: sin enlace, para que no salten al inicio */
.social-btn[aria-disabled],.footer__socials a[aria-disabled]{cursor:default;opacity:.55}
.social-btn[aria-disabled]:hover{
  border-color:var(--linea);color:var(--texto-2);transform:none;box-shadow:none;
}
.footer__socials a[aria-disabled]:hover{
  background:transparent;border-color:var(--linea-dark);color:var(--texto-light-2);transform:none;
}

.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.vcard{
  position:relative;aspect-ratio:9/14;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink);border:1px solid var(--linea);cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;text-align:left;color:var(--texto-light);
  transition:transform .55s var(--ease),box-shadow .55s;
}
.vcard:hover{transform:translateY(-8px) scale(1.012);box-shadow:var(--sh-lg)}
.vcard__bg{
  position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 18%,rgba(39,174,96,.32),transparent 62%);
  transition:transform .8s var(--ease);
}
.vcard:hover .vcard__bg{transform:scale(1.12)}
.vcard::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(17,17,17,.78) 78%,rgba(17,17,17,.96));
}
.vcard > *{position:relative;z-index:2}
.vcard__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  transition:transform .45s var(--ease),background .35s;z-index:3;
}
.vcard__play::before{
  content:'';border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.08);background:var(--verde)}
.vcard__cat{
  position:absolute;top:18px;left:18px;z-index:3;
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
  background:rgba(17,17,17,.6);border:1px solid rgba(255,255,255,.18);
  color:var(--verde-claro);
}
.vcard__title{font-weight:700;font-size:1rem;line-height:1.26;letter-spacing:-.025em}
.vcard__desc{font-size:.79rem;color:var(--texto-light-2);margin-top:7px;line-height:1.45}
.vcard__meta{
  display:flex;align-items:center;gap:8px;margin-top:13px;
  font-size:.66rem;font-weight:600;letter-spacing:.1em;color:var(--texto-3);
}
.vcard--soon{cursor:default;border-style:dashed;border-color:rgba(255,255,255,.16)}
.vcard--soon .vcard__play{background:rgba(255,255,255,.06);border-style:dashed}
.vcard--soon:hover{transform:none;box-shadow:none}
.vcard--soon:hover .vcard__play{transform:translate(-50%,-50%) scale(.92);background:rgba(255,255,255,.06)}

.vmodal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(17,17,17,.88);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .4s var(--ease);
}
.vmodal[hidden]{display:none}
.vmodal.is-open{opacity:1}
.vmodal__stage{
  width:min(430px,92vw);max-height:88vh;overflow:auto;border-radius:var(--r-lg);
  background:#000;transform:scale(.94);transition:transform .45s var(--ease-out);
}
.vmodal.is-open .vmodal__stage{transform:scale(1)}
.vmodal__stage iframe{width:100%;height:min(760px,84vh);border:0;display:block}
.vmodal__close{
  position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.7rem;line-height:1;display:grid;place-items:center;
  transition:background .3s,transform .3s;
}
.vmodal__close:hover{background:var(--verde);transform:rotate(90deg)}

/* -- 20. FAQ ---------------------------------------- */
.faq{padding:var(--pad-sec) 0;background:var(--superficie2)}
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:66px;align-items:start}
.faq__left p{color:var(--texto-2);margin-top:16px;max-width:38ch}
.faq__left .btn{margin-top:24px}
.faq__list{display:flex;flex-direction:column;gap:11px}
.faq__item{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;transition:border-color .4s,box-shadow .4s;
}
.faq__item[open]{border-color:rgba(39,174,96,.45);box-shadow:var(--sh)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:21px 62px 21px 25px;
  font-weight:600;font-size:.99rem;letter-spacing:-.018em;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--verde-hondo)}
.faq__item summary::after{
  content:'';position:absolute;right:26px;top:50%;
  width:11px;height:11px;
  border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq__answer{padding:0 25px 23px;animation:faqIn .45s var(--ease-out)}
.faq__answer p{font-size:.93rem;color:var(--texto-2);max-width:64ch}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* -- 21. CONTACTO ---------------------------------------- */
.contact{
  padding:var(--pad-sec-xl) 0;color:var(--texto-light);position:relative;overflow:hidden;
  background:
    radial-gradient(80% 70% at 12% 10%,rgba(39,174,96,.20),transparent 58%),
    var(--ink);
}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;position:relative;z-index:2}
.contact__list{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.contact__list li{display:flex;align-items:flex-start;gap:16px}
.contact__list svg{width:22px;height:22px;color:var(--verde-claro);flex:none;margin-top:4px}
.contact__list span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:4px}
.contact__list a,.contact__list b{
  display:block;font-weight:700;font-size:1.06rem;letter-spacing:-.02em;
  color:var(--texto-light);transition:color .3s;font-variant-numeric:tabular-nums;
}
.contact__list a:hover{color:var(--verde-claro)}
/* Los telefonos van agrupados por zona: la segunda etiqueta necesita
   separarse del numero que la precede. */
.contact__list .contact__zona{margin-top:16px}

.form{
  padding:34px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:15px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:8px}
.field > span{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-light-2)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  color:var(--texto-light);font-size:.93rem;
  transition:border-color .3s,background .3s,box-shadow .3s;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,246,244,.32)}
.field select option{background:var(--ink);color:var(--texto-light)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--verde-claro);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(62,203,120,.15);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--error);box-shadow:0 0 0 4px rgba(192,67,31,.16);
}

.check{display:flex;align-items:flex-start;gap:11px;font-size:.81rem;color:var(--texto-light-2);line-height:1.5;margin-top:4px}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--verde)}
.check a{color:var(--verde-claro);text-decoration:underline;text-underline-offset:3px}

/* Campo trampa anti-spam: fuera de pantalla, no oculto con display:none */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form .btn{margin-top:8px}
.form__status{font-size:.87rem;min-height:1.2em;text-align:center}
.form__status.ok{color:var(--verde-claro)}
.form__status.err{color:#F09A78}
.form__legal{font-size:.75rem;color:var(--texto-3);text-align:center;line-height:1.5}

/* -- 21b. FACTURACION ---------------------------------------- */
.factura{background:var(--superficie2);padding:0 0 88px}
.factura__caja{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:36px 40px;border-radius:var(--r-xl);
  background:var(--blanco);border:1px solid var(--linea);
  border-left:5px solid var(--verde);box-shadow:var(--sh);
}
.factura__txt{flex:1;min-width:280px}
.factura__txt h2{
  font-weight:800;font-size:clamp(1.25rem,2.4vw,1.6rem);
  letter-spacing:-.03em;color:var(--ink);margin-bottom:8px;
}
.factura__txt p{font-size:.94rem;color:var(--texto-2);margin-bottom:14px}
.factura__lista{display:flex;flex-direction:column;gap:8px}
.factura__lista li{
  position:relative;padding-left:26px;font-size:.92rem;
  font-weight:600;color:var(--texto);
}
.factura__lista li::before{
  content:'';position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:4px;background:var(--verde-tenue);border:1px solid rgba(39,174,96,.3);
}
.factura__lista li::after{
  content:'';position:absolute;left:5px;top:10px;width:6px;height:3px;
  border-left:2px solid var(--verde-hondo);border-bottom:2px solid var(--verde-hondo);
  transform:rotate(-45deg);
}

/* -- 22. FOOTER ---------------------------------------- */
.footer{background:var(--ink);color:var(--texto-light);padding:72px 0 28px;border-top:1px solid var(--linea-dark)}
.footer .logo{padding-left:0}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:46px;padding-bottom:52px}
.footer__tagline{
  font-size:1rem;font-weight:600;font-style:italic;color:var(--verde-claro);
  margin-top:16px;
}
.footer__brand > p:not(.footer__tagline){font-size:.87rem;color:var(--texto-light-2);margin-top:12px;max-width:42ch;line-height:1.6}
.logo--footer img{height:32px}
.footer__socials{display:flex;gap:10px;margin-top:24px}
.footer__socials a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea-dark);color:var(--texto-light-2);
  transition:all .35s var(--ease);
}
.footer__socials svg{width:18px;height:18px}
.footer__socials a:hover{background:var(--verde);border-color:transparent;color:#fff;transform:translateY(-4px)}

.footer__col h4{
  font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde-claro);margin-bottom:18px;
}
.footer__col a{display:block;font-size:.89rem;color:var(--texto-light-2);padding:7px 0;transition:color .3s,transform .3s}
.footer__col a:hover{color:var(--verde-claro);transform:translateX(4px)}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--linea-dark);
  font-size:.81rem;color:var(--texto-3);
}
.footer__by a{color:var(--verde-claro);font-weight:600}

/* -- 23. WHATSAPP ---------------------------------------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:9000;
  display:flex;align-items:center;
  width:58px;height:58px;border-radius:100px;
  background:var(--ink);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.6);
  overflow:hidden;padding-left:16px;
  transition:width .5s var(--ease),transform .4s var(--ease),background .35s;
}
.wa svg{width:26px;height:26px;flex:none;stroke:none}
.wa__tip{white-space:nowrap;font-weight:600;font-size:.89rem;opacity:0;margin-left:12px;transition:opacity .35s .1s}
.wa:hover{width:212px;transform:translateY(-4px);background:#000}
.wa:hover .wa__tip{opacity:1}

/* -- 24. RESPONSIVE ---------------------------------------- */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:48px}
  .recibo{max-width:480px}
  .recibo-bloque{grid-template-columns:1fr;gap:36px;margin-top:48px;padding-top:44px}
  .recibo-bloque__vis .recibo{max-width:420px}
  .about__grid,.faq__grid,.contact__grid{grid-template-columns:1fr;gap:46px}
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .sol-card--accent{grid-column:span 2}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__item--lg{grid-row:span 1}
  .safety__grid{grid-template-columns:repeat(2,1fr)}
  .metrics__grid{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .values__list{grid-template-columns:repeat(2,1fr)}
  .distintos__list{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:56px 22px;padding-top:0}
  .timeline__line{display:none}
  .tstep{text-align:left;padding-left:58px}
  .tstep__dot{top:0;left:0;transform:none}
  .spanel{grid-template-columns:1fr;gap:30px;padding:32px}
  .spanel__side{flex-direction:row}
  .spanel__stat{flex:1}
  .asesoria{flex-direction:column;align-items:flex-start}
}

@media (max-width:860px){
  .nav__burger{display:flex}
  .nav__cerrar{display:flex}

  .nav__links{
    position:fixed;
    /* Medidas explicitas en vez de inset:0: iOS calcula mejor asi.
       dvh se ajusta a la barra de Safari cuando aparece o se oculta. */
    top:0;left:0;
    width:100vw;height:100vh;height:100dvh;
    z-index:1001;
    flex-direction:column;justify-content:center;gap:24px;
    /* Color solido: sin backdrop-filter, que en iOS causa el problema */
    background:#111111;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:104px 24px 48px;
    transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .55s var(--ease),opacity .4s;
  }
  .nav__links.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__links a{font-size:1.42rem;font-weight:600}
  .nav__cta{font-size:1.02rem;padding:15px 32px;margin-top:8px}
}

@media (max-width:720px){
  .factura__caja{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .factura__caja .btn{width:100%}
  body{font-size:16px}
  .hero{padding:110px 0 76px;min-height:auto}
  .hero__actions .btn{flex:1 1 100%}
  .about__pillars{grid-template-columns:1fr}
  .sol-grid{grid-template-columns:1fr}
  .sol-card--accent{grid-column:span 1}
  .bento,.safety__grid,.values__list,.metrics__grid,.distintos__list{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--linea)}
  .metric:last-child{border-bottom:0}
  .timeline{grid-template-columns:1fr}
  .spanel__side{flex-direction:column}
  .form__row{grid-template-columns:1fr}
  .form{padding:24px 20px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer__brand{grid-column:span 2}
  .sectors__tabs{
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;
    margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
  }
  .stab{flex:none;padding:12px 18px;font-size:.85rem}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .proceso-cta{padding:32px 22px}
  .proceso-cta__pasos li{width:100%}
  .recibo__total{flex-direction:column;align-items:flex-start}
  .recibo__ref{text-align:left}
  .wa{right:16px;bottom:16px}
}

@media (max-width:460px){
  .video-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{grid-column:span 1}
  .plogo{min-width:210px;height:84px}
}

/* -- 25. CARRUSEL ---------------------------------------- */
/* Un solo componente para todos los grupos de tarjetas que se recorren
   de lado. En escritorio la maqueta NO cambia: la rejilla sigue siendo
   rejilla. Por debajo de 860px se convierte en una pista deslizable con
   scroll-snap, que es el gesto natural del telefono y recorta el alto de
   la pagina sin quitar una sola palabra de contenido.

   El carrusel lo hace el CSS por si solo: el JavaScript unicamente agrega
   los puntos y el aviso de "desliza", asi que la pagina sigue siendo
   utilizable aunque el script no cargue. */
.carrusel{position:relative}
.carrusel__nav{display:none}

@media (max-width:860px){
  .carrusel__pista{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    /* Sangra hasta el borde de la pantalla: al asomar la siguiente tarjeta
       queda claro que hay mas contenido de lado. */
    margin-inline:calc(var(--gutter) * -1);
    padding:6px var(--gutter) 14px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .carrusel__pista::-webkit-scrollbar{display:none}
  .carrusel__pista > *{
    flex:0 0 min(var(--ancho,86%),420px);
    scroll-snap-align:start;
    min-width:0;
  }
  /* Sin hover en tactil: se evita el salto de las tarjetas al tocarlas */
  .carrusel__pista > *:hover{transform:none;box-shadow:none}

  /* En carrusel las tarjetas ya nacen visibles. La animacion de entrada
     depende de cruzar el borde inferior de la pantalla, y de lado eso no
     pasa nunca: las tarjetas de la derecha se quedarian en blanco. */
  .carrusel__pista > .reveal,
  .carrusel__pista > .tstep{opacity:1;transform:none;transition:none}

  /* Los puntos y el aviso van juntos a la izquierda: a la derecha vive el
     boton flotante de WhatsApp y ahi se taparian. */
  .carrusel__nav{
    display:flex;align-items:center;justify-content:flex-start;gap:16px;
    margin-top:6px;
  }
  .carrusel__puntos{display:flex;align-items:center;gap:7px}
  .carrusel__punto{
    position:relative;
    width:7px;height:7px;border-radius:100px;
    background:var(--superficie3);
    transition:width .45s var(--ease),background .3s;
  }
  /* Area de toque de 44px sin engordar el punto */
  .carrusel__punto::before{content:'';position:absolute;inset:-16px -6px}
  .carrusel__punto[aria-current="true"]{width:22px;background:var(--verde)}

  .carrusel__pie{
    display:flex;align-items:center;
    font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--texto-3);font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .carrusel__aviso{display:inline-flex;align-items:center;gap:7px;color:var(--verde-hondo)}
  .carrusel__aviso svg{width:15px;height:15px;animation:desliza 1.9s var(--ease) infinite}
  @keyframes desliza{0%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}
  .carrusel__pie [hidden]{display:none}

  /* Sobre fondo oscuro (seccion de seguridad) */
  .safety .carrusel__punto{background:rgba(255,255,255,.18)}
  .safety .carrusel__punto[aria-current="true"]{background:var(--verde-claro)}
  .safety .carrusel__aviso{color:var(--verde-claro)}

  /* -- Ancho de tarjeta por seccion -- */
  .carrusel--servicio .carrusel__pista > *{flex-basis:min(87%,400px)}
  .carrusel--servicio .sol-card--accent{flex-basis:min(93%,430px)}
  .carrusel--ventajas .carrusel__pista > *{flex-basis:min(87%,400px)}
  .carrusel--seguridad .carrusel__pista > *{flex-basis:min(82%,360px)}
  .carrusel--proceso .carrusel__pista > *{flex-basis:min(80%,340px)}
  .carrusel--videos .carrusel__pista > *{flex-basis:min(59%,236px)}

  /* Los pasos del proceso se leen como tarjeta cuando van en carrusel */
  .carrusel--proceso .timeline{padding-top:0}
  .carrusel--proceso .tstep{
    padding:24px 22px 26px;border-radius:var(--r-lg);
    background:var(--blanco);border:1px solid var(--linea);
  }
  .carrusel--proceso .tstep__dot{position:relative;top:auto;left:auto;margin-bottom:15px}

  /* Tarjetas de video mas angostas: se achica el play y el texto para que
     no se encimen dentro de la tarjeta. */
  .carrusel--videos .vcard{padding:16px}
  .carrusel--videos .vcard__cat{top:12px;left:12px;font-size:.55rem;padding:4px 9px}
  .carrusel--videos .vcard__play{width:44px;height:44px;top:37%}
  .carrusel--videos .vcard__play::before{border-width:6px 0 6px 10px;margin-left:2px}
  .carrusel--videos .vcard__title{font-size:.88rem;line-height:1.3}
  .carrusel--videos .vcard__desc{font-size:.72rem;margin-top:5px;line-height:1.4}
  .carrusel--videos .vcard__meta{margin-top:9px;font-size:.6rem}

  /* El bento pierde el alto doble: en carrusel todas miden igual */
  .carrusel--ventajas .bento__item{grid-column:auto;grid-row:auto}
  .carrusel--ventajas .bento__viz{margin-top:20px}
  .carrusel--ventajas .bento__viz span{height:54px}
}

/* -- 26. COMPACTACION MOVIL ----------------------------------------
   Mismo contenido, menos altura: se ajustan los respiros entre bloques
   y las listas largas cambian a un formato mas denso. */
@media (max-width:860px){
  :root{--pad-sec:76px;--pad-sec-xl:82px}
  .sec-head{margin-bottom:34px}
  .recibo-bloque{margin-top:44px;padding-top:38px}
  .distintos{margin-top:46px;padding-top:34px}
  .values{margin-top:50px;padding-top:36px}
  .proceso-cta{margin-top:40px;padding:34px 26px}
  .asesoria{margin-top:22px;padding:26px 24px}
  .learn__social{margin-top:20px}
}

@media (max-width:720px){
  :root{--pad-sec:66px;--pad-sec-xl:72px}
  .metrics{padding-bottom:66px}

  /* Metricas en 2x2 en vez de una columna de cuatro filas */
  .metrics__grid{grid-template-columns:repeat(2,1fr)}
  .metric{padding:24px 20px;border-right:1px solid var(--linea);border-bottom:0}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .metric__num{margin-bottom:9px}
  .metric span{font-size:.82rem}

  /* "Que nos hace distintos": de tarjetas apiladas a lista con palomita */
  .distintos__list{grid-template-columns:1fr;gap:0}
  .distintos__list li{
    position:relative;
    padding:14px 0 14px 30px;
    background:transparent;border:0;border-bottom:1px solid var(--linea);
    border-radius:0;
  }
  .distintos__list li:last-child{border-bottom:0}
  .distintos__list li:hover{transform:none;border-color:var(--linea)}
  .distintos__list li::before{
    content:'';position:absolute;left:0;top:19px;width:17px;height:17px;
    border-radius:50%;background:var(--verde-tenue);
  }
  .distintos__list li::after{
    content:'';position:absolute;left:5px;top:23px;width:7px;height:4px;
    border-left:2px solid var(--verde-hondo);border-bottom:2px solid var(--verde-hondo);
    transform:rotate(-45deg);
  }

  /* Valores institucionales: misma idea, sin la caja de cada uno */
  .values__list{
    grid-template-columns:1fr;gap:0;
    background:transparent;border:0;border-radius:0;
  }
  .values__list li{padding:15px 0;background:transparent;border-bottom:1px solid var(--linea-dark)}
  .values__list li:last-child{border-bottom:0}
  .values__list li:hover{background:transparent}
  .values__list b{font-size:.95rem;margin-bottom:4px}
  .values__list span{font-size:.81rem;line-height:1.5}

  .distintos__tit,.values__title{font-size:1.25rem;margin-bottom:18px}
}

/* Los anclas de la pagina no deben quedar debajo de la barra fija */
section[id],#facturacion{scroll-margin-top:88px}
@media (max-width:860px){section[id],#facturacion{scroll-margin-top:74px}}

/* Enlace de texto hacia el area de facturacion: evita duplicar el boton
   de WhatsApp en la seccion de contacto. */
.form__factura{
  font-size:.82rem;line-height:1.55;text-align:center;
  color:var(--texto-light-2);
  padding-top:14px;margin-top:2px;
  border-top:1px solid rgba(255,255,255,.10);
}
.form__factura a{
  color:var(--verde-claro);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(62,203,120,.45);
  transition:text-decoration-color .3s,color .3s;
}
.form__factura a:hover{text-decoration-color:var(--verde-claro)}
.form__factura a::after{content:' ↓';text-decoration:none}


/* -- 27. CURSOR PERSONALIZADO ----------------------------------------
   Solo en equipos con raton. Son dos piezas: un punto que sigue al
   cursor al instante y un anillo que llega un poco despues, con lo que
   se produce el arrastre. Al pasar sobre algo en lo que se puede dar
   clic, el anillo crece.

   Cada pieza es un contenedor y un hijo <i>: el contenedor lo mueve el
   JavaScript con transform, y el hijo se encarga del crecimiento. Asi
   una animacion no le pisa la otra. */
.cursor{
  position:fixed;inset:0;z-index:10001;
  pointer-events:none;   /* nunca intercepta un clic */
  opacity:0;transition:opacity .35s var(--ease);
}
.cursor.esta-dentro{opacity:1}
.cursor.sobre-texto{opacity:0}   /* en campos de formulario manda el cursor del sistema */

.cursor__anillo,.cursor__punto{position:absolute;top:0;left:0;will-change:transform}
.cursor__anillo{width:38px;height:38px;margin:-19px 0 0 -19px}
.cursor__punto{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.cursor__anillo i,.cursor__punto i{display:block;width:100%;height:100%;border-radius:50%}
.cursor__anillo i{
  border:1.5px solid var(--verde);
  transition:transform .38s var(--ease),background .38s,border-color .3s,opacity .3s;
}
.cursor__punto i{
  background:var(--verde);
  transition:transform .3s var(--ease),opacity .3s;
}

/* Sobre un enlace o un boton: el anillo crece y se llena, el punto se retira */
.cursor.sobre-activo .cursor__anillo i{transform:scale(1.75);background:rgba(39,174,96,.12)}
.cursor.sobre-activo .cursor__punto i{transform:scale(.35);opacity:0}
/* Mientras se mantiene presionado el boton del raton */
.cursor.presionado .cursor__anillo i{transform:scale(.8)}
.cursor.presionado.sobre-activo .cursor__anillo i{transform:scale(1.45)}

/* Sobre fondo negro el verde institucional pierde contraste: se usa el claro */
.cursor.sobre-oscuro .cursor__anillo i{border-color:var(--verde-claro)}
.cursor.sobre-oscuro.sobre-activo .cursor__anillo i{background:rgba(62,203,120,.16)}
.cursor.sobre-oscuro .cursor__punto i{background:var(--verde-claro)}

/* Se oculta el cursor del sistema, menos en los campos donde hace falta
   ver donde va a caer el texto. */
html.cursor-propio,
html.cursor-propio *:not(input):not(textarea):not(select){cursor:none}

/* Sin raton (telefono y tableta) el cursor no existe */
@media (hover:none),(pointer:coarse){
  .cursor{display:none}
  html.cursor-propio,html.cursor-propio *{cursor:auto}
}


a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--verde);outline-offset:3px;border-radius:6px;
}
.safety a:focus-visible,.contact a:focus-visible,.hero a:focus-visible,
.form :focus-visible,.footer a:focus-visible{outline-color:var(--verde-claro)}