/* =====================================================================
   ROOTS, hoja de estilos del sitio. Identidad version 2, septiembre 2026.
   Reemplaza por completo la anterior (crema y terracota).

   Reglas del sistema que este archivo hace cumplir:
   1. Blanco y neutros frios ocupan la superficie. El color aparece poco.
   2. Los cuatro colores de servicio significan SOLO servicios. Paises,
      industrias, equipo y decoracion van en neutros.
   3. Radio 4px. Pildora unicamente en chips. Nada de 20px.
   4. Los bloques se separan con hairline de 1px, no con sombra.
   5. Todo par de color de este archivo esta medido contra el fondo real.
   ===================================================================== */

:root{
  /* ---- neutros: una sola rampa fria, H=225, croma muy bajo ---- */
  --n0:#FFFFFF;   --n25:#F8FAFC;  --n50:#F2F6F8;   --n100:#E8EEF0;
  --n200:#D9E0E3; --n300:#C5CED2; --n400:#96A0A5;  --n500:#758186;
  --n600:#5B676C; --n700:#434D51; --n800:#293338;  --n900:#152025; --n950:#071217;

  /* ---- roles semanticos (lo unico que usan los componentes) ---- */
  --bg:var(--n25);
  --surface:var(--n0);
  --surface-sunk:var(--n50);
  --ink:var(--n900);            /* texto principal y secciones oscuras */
  --ink-deep:var(--n950);
  --text:var(--n900);
  --text-2:var(--n600);         /* 5,83:1 sobre blanco */
  --text-on-dark:var(--n0);
  --text-2-on-dark:var(--n400); /* 6,22:1 sobre tinta 900 */
  --line:var(--n200);
  --line-strong:var(--n300);

  /* ---- servicios: el acento de marca es el de EOR, el servicio insignia ---- */
  --eor:#0A7E83;  --eor-sf:#E4F9FA; --eor-bd:#BBE8EA; --eor-hv:#066E73; --eor-dk:#8ACBCE;
  --pay:#33419D;  --pay-sf:#F1F4FE; --pay-bd:#D3DDFE; --pay-hv:#28328D; --pay-dk:#A9BBF8;
  --con:#750459;  --con-sf:#FFEFF8; --con-bd:#FFCDEB; --con-hv:#610049; --con-dk:#E9A5CF;
  --rec:#805C03;  --rec-sf:#FDF3E3; --rec-bd:#EFDBB9; --rec-hv:#6E4F02; --rec-dk:#D5BA89;

  --halo:#FFFFFF;          /* fondo detras de la palabra del logo */
  --brand:var(--eor);
  --brand-hover:var(--eor-hv);
  --brand-on-dark:var(--eor-dk);
  --brand-surface:var(--eor-sf);

  /* ---- forma ---- */
  --r:4px;
  --r-lg:6px;
  --pill:999px;
  --shadow-float:0 10px 28px -12px rgba(7,18,23,.30);
  --shadow-modal:0 30px 70px -24px rgba(7,18,23,.55);

  /* ---- tipografia ---- */
  --display:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  /* ---- movimiento ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:120ms; --t-mid:200ms; --t-slow:400ms;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ max-width:100%; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--display); margin:0; color:var(--text);
             letter-spacing:-0.02em; text-wrap:balance; font-weight:700; }
h1{ letter-spacing:-0.03em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
svg{ display:block; }

section{ padding:clamp(56px,7.5vw,104px) clamp(20px,5vw,64px); position:relative; }
.wrap{ max-width:1160px; margin:0 auto; position:relative; z-index:2; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
       padding:12px 18px; z-index:100; border-radius:0 0 var(--r) 0; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

/* ---------- tipografia de seccion ---------- */
.eyebrow{ font-family:var(--display); font-size:11.5px; font-weight:600;
          letter-spacing:.16em; text-transform:uppercase; color:var(--brand); }
.lede{ color:var(--text-2); font-size:17px; max-width:62ch; }
h2{ font-size:clamp(25px,3.4vw,38px); }

/* secciones claras alternadas */
.section-light{ background:var(--surface); }
.section-light .eyebrow{ color:var(--brand); }
.section-light h1, .section-light h2{ color:var(--text); }
.section-light .lede{ color:var(--text-2); }

/* secciones oscuras */
.on-dark{ background:var(--ink); color:var(--text-on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--text-on-dark); }
.on-dark .lede{ color:var(--n300); }
.on-dark .eyebrow{ color:var(--brand-on-dark); }

/* ---------- botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      font-family:var(--display); font-weight:600; font-size:14.5px;
      padding:13px 22px; border-radius:var(--r); cursor:pointer; border:1px solid transparent;
      transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                 color var(--t-fast) var(--ease); }
.btn.primary{ background:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-hover); }
.btn.ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.btn.ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.btn.outline{ background:var(--surface); border-color:var(--line-strong); color:var(--text); }
.btn.outline:hover{ border-color:var(--ink); }

/* ---------- barra de navegacion ---------- */
/* La barra no es una franja: es una pildora blanca que flota sobre la
   seccion de arriba. El header va sin fondo y se monta encima con margen
   negativo; la primera seccion compensa con padding. */
#nav{ position:sticky; top:0; z-index:40; background:transparent; border-bottom:none;
      padding:14px clamp(12px,3vw,28px) 0; margin-bottom:-72px; }
.nav-row{ max-width:1240px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--pill);
  padding:9px 9px 9px 22px; gap:20px;
  box-shadow:0 10px 30px -14px rgba(7,18,23,.35);
  display:flex; align-items:center; justify-content:space-between; }
main > section:first-child,
.pagina > section:first-child{ padding-top:calc(clamp(56px,7.5vw,104px) + 64px); }
.nav-cta .btn{ border-radius:var(--pill); }
a.brand-block{ display:flex; align-items:center; gap:11px; color:var(--ink); }
/* La marca es el logo contenido: la palabra montada sobre Sudamerica.
   El continente es vertical, asi que para que la palabra quede legible en
   una barra horizontal tiene que ser mas grande que en el logo original y
   sobresalir a los costados. El halo blanco la despega del trazo. */
.brand{ display:flex; align-items:center; }
.brand .lockup{ position:relative; width:41px; flex-shrink:0; color:var(--n600); }
.brand .lockup .mapa{ display:block; width:100%; height:auto; }
.brand .word{ position:absolute; left:50%; top:49.5%; translate:-50% -50%;
              font-family:var(--display); font-weight:700; font-size: 23px;
              letter-spacing:-0.045em; color:var(--ink); line-height:1;
              display:flex; align-items:baseline; white-space:nowrap;
              text-shadow:0 0 4px var(--halo),0 0 4px var(--halo),
                          0 0 3px var(--halo),0 0 3px var(--halo); }
.brand .pin{ width:.56em; height:.72em; margin:0 .015em -.19em; flex-shrink:0;
             filter:drop-shadow(0 0 3px var(--halo)) drop-shadow(0 0 3px var(--halo)); }
.brand .pin path{ fill:var(--brand); }
.brand-tagline{ display:none; }   /* la bajada vive en el hero, no en la barra */
.nav-links{ display:flex; gap:26px; font-size:14px; font-weight:500; }
.nav-links a{ color:var(--text-2); padding-block:6px;
              transition:color var(--t-fast) var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
#menuBtn{ display:none; background:var(--surface); border:1px solid var(--line-strong);
          border-radius:var(--pill); width:40px; height:38px; font-size:15px;
          color:var(--ink); cursor:pointer; flex-shrink:0; }
@media (max-width:900px){
  .nav-links{ display:none; }
  #menuBtn{ display:block; }
  .nav-links.open{ display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-float); }
  .nav-links.open a{ padding:13px 22px; border-top:1px solid var(--line); }
  .nav-links.open a:first-child{ border-top:none; }
}
@media (max-width:460px){
  #nav{ padding-inline:10px; }
  .nav-row{ padding:8px 8px 8px 16px; gap:10px; }
  .nav-cta .btn{ padding:10px 14px; font-size:13px; }
}

/* ---------- hero ---------- */
#hero{ position:relative; display:flex; align-items:flex-start; overflow:hidden;
       background:var(--ink); min-height:78vh;
       padding-top:calc(clamp(64px,8vw,104px) + 60px);   /* deja lugar a la pildora */
       padding-bottom:clamp(64px,8vw,104px); }
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--ink-deep); }
.hero-bg .map-video{ position:absolute; inset:0; width:100%; height:100%;
                     object-fit:cover; opacity:.55; }
.hero-bg-tint{ display:none; }
.hero-bg-overlay{ position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,18,23,.96) 0%, rgba(7,18,23,.86) 38%,
                                     rgba(7,18,23,.45) 72%, rgba(7,18,23,.25) 100%); }
.map-beam,.map-pin,.map-hint{ display:none; }
.hero-content{ position:relative; z-index:2; max-width:620px; margin-right:auto;
                margin-block:auto; }
#hero h1{ font-size:clamp(34px,5.2vw,58px); font-weight:700; line-height:1.05;
          color:#fff; max-width:17ch; }
#hero .lede{ color:var(--n300); margin-top:18px; font-size:17.5px; max-width:48ch; }
#hero .badge{ display:none; }
.hero-ctas{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.proof-row{ display:flex; align-items:center; gap:14px; margin-top:40px;
            padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.proof-text b{ display:block; font-family:var(--display); font-size:14.5px;
               font-weight:600; color:#fff; }
.proof-text span{ font-size:12.5px; color:var(--text-2-on-dark); }
.avatar-stack{ display:flex; }
.avatar-stack span{ width:32px; height:32px; border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  border:2px solid var(--ink); margin-left:-9px; font-family:var(--display);
  font-weight:600; color:#fff; background:var(--n700); }
.avatar-stack span:first-child{ margin-left:0; }

/* aparicion del titulo, palabra por palabra */
@keyframes heroFadeUp{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }
@keyframes heroWordIn{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
#hero h1 .word{ display:inline-block; opacity:0; }
#hero .lede,#hero .hero-ctas,#hero .proof-row,#hero .intent-chips{ opacity:0; }
#hero.hero-live h1 .word{ animation:heroWordIn .5s var(--ease) forwards; }
#hero.hero-live h1 .word:nth-child(1){ animation-delay:.05s; }
#hero.hero-live h1 .word:nth-child(2){ animation-delay:.11s; }
#hero.hero-live h1 .word:nth-child(3){ animation-delay:.17s; }
#hero.hero-live h1 .word:nth-child(4){ animation-delay:.23s; }
#hero.hero-live h1 .word:nth-child(5){ animation-delay:.29s; }
#hero.hero-live h1 .word:nth-child(6){ animation-delay:.35s; }
#hero.hero-live h1 .word:nth-child(7){ animation-delay:.41s; }
#hero.hero-live h1 .word:nth-child(8){ animation-delay:.47s; }
#hero.hero-live .lede{ animation:heroFadeUp var(--t-slow) var(--ease) .55s forwards; }
#hero.hero-live .intent-chips{ animation:heroFadeUp var(--t-slow) var(--ease) .65s forwards; }
#hero.hero-live .hero-ctas{ animation:heroFadeUp var(--t-slow) var(--ease) .75s forwards; }
#hero.hero-live .proof-row{ animation:heroFadeUp var(--t-slow) var(--ease) .85s forwards; }

/* chips de intencion */
.intent-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.intent-q{ display:block; width:100%; font-family:var(--display); font-size:11.5px;
           font-weight:600; letter-spacing:.14em; text-transform:uppercase;
           color:var(--text-2-on-dark); margin-bottom:10px; }
.intent-chip{ font-family:var(--body); font-size:13px; font-weight:500;
  display:inline-block; text-decoration:none;
  padding:8px 14px; border-radius:var(--pill); cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:var(--n100);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.intent-chip:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); }

/* ---------- franja de industrias (neutra: no son servicios) ---------- */
#industries{ padding-block:26px; background:var(--surface);
             border-top:1px solid var(--line); border-bottom:1px solid var(--line);
             overflow:hidden; }
#industries .wrap{ display:flex; align-items:center; gap:26px; }
#industries .label{ font-family:var(--display); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
  white-space:nowrap; flex-shrink:0; }
.ind-viewport{ flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); }
.ind-track{ display:flex; gap:10px; width:max-content; animation:ind-drift 34s linear infinite; }
.ind-viewport:hover .ind-track{ animation-play-state:paused; }
@keyframes ind-drift{ from{ translate:0 0; } to{ translate:-50% 0; } }
.chip{ padding:7px 15px; border-radius:var(--pill); flex-shrink:0; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--text-2);
  background:var(--n50); border:1px solid var(--line); }
@media (max-width:640px){ #industries .wrap{ flex-direction:column; align-items:flex-start; gap:12px; } }

/* ---------- problema ---------- */
#problem .wrap{ max-width:760px; }
#problem h1,#problem h2{ font-size:clamp(27px,3.8vw,42px); margin-top:12px; }
#problem > .wrap > p{ margin-top:16px; color:var(--text-2); font-size:17px; }

/* sin Roots / con Roots */
.contrast{ display:grid; grid-template-columns:1fr 1fr; margin-top:44px;
           border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (max-width:760px){ .contrast{ grid-template-columns:1fr; } }
.ct-col{ padding:28px 30px; background:var(--surface); }
.ct-col:first-child{ border-right:1px solid var(--line); }
@media (max-width:760px){ .ct-col:first-child{ border-right:none; border-bottom:1px solid var(--line); } }
.ct-col.is-with{ background:var(--ink); }
.ct-col.is-with h3{ color:#fff; }
.ct-col.is-with li{ color:var(--n300); }
.ct-col h3{ font-size:16.5px; font-weight:600; }
.ct-col ul{ margin-top:16px; display:flex; flex-direction:column; gap:11px; }
.ct-col li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px;
            color:var(--text-2); line-height:1.5; }
.ct-badge{ flex-shrink:0; width:20px; height:20px; border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:var(--n100); color:var(--n600); margin-top:2px; }
.ct-col.is-with .ct-badge{ background:var(--brand); color:#fff; }

/* ---------- carrusel de soluciones ---------- */
.svc-head{ max-width:640px; }
.solutions-reel{ margin-top:40px; }
.reel-viewport{ overflow:hidden; margin:0 -2px; padding:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%); }
.reel-track{ display:flex; gap:14px; width:max-content; animation:reel-drift 44s linear infinite; }
.reel-viewport:hover .reel-track{ animation-play-state:paused; }
@keyframes reel-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.reel-slide{ flex:0 0 clamp(230px,24vw,300px); border-radius:var(--r);
  padding:24px; min-height:330px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--sc, var(--brand));
  transition:border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
             opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); }
.reel-slide:hover{ box-shadow:var(--shadow-float); }
.reel-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.reel-num{ font-family:var(--display); font-weight:600; font-size:11.5px;
           letter-spacing:.14em; color:var(--text-2); }
.reel-icon{ width:40px; height:40px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--sc-sf, var(--eor-sf)); }
.reel-icon svg{ width:20px; height:20px; stroke:var(--sc, var(--brand)); fill:none;
                stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.reel-slide h3{ font-size:20px; font-weight:600; margin-top:auto; line-height:1.2;
                max-width:15ch; color:var(--text); }
.reel-slide p{ font-size:13.5px; margin-top:12px; color:var(--text-2);
               max-width:32ch; line-height:1.55; }
.reel-tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px; }
.reel-tags span{ font-size:11px; font-weight:500; padding:4px 10px; border-radius:var(--pill);
  background:var(--sc-sf, var(--eor-sf)); color:color-mix(in srgb, var(--sc, var(--brand)) 86%, #000); white-space:nowrap; }
@media (max-width:640px){
  .reel-slide{ flex-basis:min(80vw,310px); }
  .reel-track{ animation-duration:34s; }
}

/* ---------- tarjetas de solucion (indice) ---------- */
.sol-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px; }
@media (max-width:760px){ .sol-grid{ grid-template-columns:1fr; } }
.sol-card{ display:flex; gap:18px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:24px;
  border-left:3px solid var(--sc, var(--brand));
  transition:box-shadow var(--t-mid) var(--ease); }
.sol-card:hover{ box-shadow:var(--shadow-float); }
.sol-card h3{ font-size:17.5px; font-weight:600; }
.sol-card p{ font-size:13.5px; color:var(--text-2); margin-top:8px; line-height:1.55; }
.n-go{ display:inline-block; margin-top:12px; font-family:var(--display);
       font-size:13.5px; font-weight:600; color:var(--sc, var(--brand)); }

/* ---------- pagina de servicio ---------- */
.crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
         font-size:12.5px; color:var(--text-2-on-dark); }
.crumbs a{ color:var(--text-2-on-dark); display:inline-block; padding-block:4px; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs [aria-current]{ color:#fff; font-weight:600; }
.svc-hero{ background:var(--ink); color:#fff; }
.svc-hero .eyebrow{ color:var(--sc-dk, var(--brand-on-dark)); }
.svc-hero h1{ font-size:clamp(30px,4.6vw,52px); color:#fff; margin-top:12px; max-width:16ch; }
.svc-hero .lede{ color:var(--n300); margin-top:16px; font-size:17.5px; max-width:48ch; }
.svc-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr;
                gap:clamp(24px,4vw,56px); align-items:center; margin-top:26px; }
.svc-hero-grid > *{ min-width:0; }
@media (max-width:880px){ .svc-hero-grid{ grid-template-columns:1fr; } }
.svc-hero .reel-tags{ margin-top:22px; }
.svc-hero .reel-tags span{ background:rgba(255,255,255,.09); color:var(--sc-dk, var(--brand-on-dark)); }
.svc-hero .hero-ctas{ margin-top:28px; }
.svc-art{ border-radius:var(--r); min-height:280px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:24px; background-size:cover;
  background-position:center; }
.svc-art .reel-icon{ width:52px; height:52px; background:rgba(255,255,255,.92); }
.svc-art .reel-icon svg{ width:25px; height:25px; }
@media (max-width:880px){ .svc-art{ min-height:190px; } }

.inc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:32px;
           background:var(--line); border:1px solid var(--line); border-radius:var(--r);
           overflow:hidden; }
@media (max-width:700px){ .inc-grid{ grid-template-columns:1fr; } }
.inc-item{ display:flex; gap:14px; align-items:flex-start; background:var(--surface);
           padding:22px 24px; }
.inc-check{ flex-shrink:0; width:22px; height:22px; border-radius:var(--pill);
  background:var(--sc, var(--brand)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.inc-item span:last-child{ font-size:14.5px; line-height:1.5; }

.svc-price{ margin-top:32px; background:var(--ink); border-radius:var(--r);
  padding:clamp(22px,3vw,30px); display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svc-price h3{ color:#fff; font-size:17px; font-weight:600; }
.svc-price p{ color:var(--text-2-on-dark); font-size:13.5px; margin-top:6px; max-width:46ch; }
.svc-price .pc-range{ font-family:var(--display); font-weight:700; font-size:27px;
                      color:var(--sc-dk, var(--brand-on-dark)); }
.svc-price .pc-unit{ font-size:12px; color:var(--text-2-on-dark); margin-top:2px; }

.next-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
@media (max-width:760px){ .next-grid{ grid-template-columns:1fr; } }
.next-card{ display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; border-top:3px solid var(--nc, var(--brand));
  transition:box-shadow var(--t-mid) var(--ease); }
.next-card:hover{ box-shadow:var(--shadow-float); }
.next-card .n-num{ font-family:var(--display); font-weight:600; font-size:11.5px;
                   letter-spacing:.14em; color:var(--text-2); }
.next-card h3{ font-size:16.5px; font-weight:600; margin-top:10px; }
.next-card p{ font-size:13px; color:var(--text-2); margin-top:8px; line-height:1.5; }
.next-card .n-go{ color:var(--nc, var(--brand)); }

/* link "ver todo" */
.section-more{ margin-top:32px; display:flex; }
.section-more a{ display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:14px; padding:12px 20px;
  border-radius:var(--r); border:1px solid var(--line-strong); color:var(--text);
  background:var(--surface); transition:border-color var(--t-fast) var(--ease); }
.section-more a:hover{ border-color:var(--ink); }
.section-more a::after{ content:'\2192'; }
.on-dark .section-more a, #coverage .section-more a{
  background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.on-dark .section-more a:hover, #coverage .section-more a:hover{ border-color:#fff; }

/* ---------- necesidad / solucion ---------- */
.match-table{ margin-top:36px; border:1px solid var(--line); border-radius:var(--r);
              overflow:hidden; background:var(--surface); }
.match-row{ display:grid; grid-template-columns:1fr 22px 1fr; align-items:center;
  gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); font-size:15px;
  transition:background var(--t-mid) var(--ease); }
.match-row:last-child{ border-bottom:none; }
.match-row:hover{ background:var(--n50); }
.match-row .need{ color:var(--text-2); }
.match-row .arrow{ color:var(--text-2); text-align:center; }
.match-row .sol{ font-family:var(--display); font-weight:600; color:var(--rc, var(--brand)); }
.match-row:hover .need{ color:var(--text); }
@media (max-width:640px){
  .match-row{ grid-template-columns:1fr; gap:4px; }
  .match-row .arrow{ display:none; }
}

/* ---------- precios ---------- */
#pricing{ background:var(--ink); }
#pricing h1,#pricing h2{ color:#fff; }
#pricing .eyebrow{ color:var(--brand-on-dark); }
#pricing .lede{ color:var(--n300); }
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:40px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden; }
@media (max-width:1000px){ .price-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--ink); padding:26px 24px; display:flex; flex-direction:column; }
.price-card.is-featured{ background:#1B282E; }
.pc-tag{ font-family:var(--display); font-size:10.5px; font-weight:600;
         letter-spacing:.12em; text-transform:uppercase; color:var(--pc-dk, var(--brand-on-dark)); }
.price-card h3{ font-size:17.5px; font-weight:600; color:#fff; margin-top:10px; }
.pc-desc{ font-size:13px; color:var(--text-2-on-dark); margin-top:8px; line-height:1.5; }
.pc-amount{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.pc-range{ font-family:var(--display); font-weight:700; font-size:24px;
           color:var(--pc-dk, var(--brand-on-dark)); }
.pc-unit{ font-size:12px; color:var(--text-2-on-dark); margin-top:3px; }
.pc-note{ display:inline-block; font-size:10.5px; font-weight:600; margin-top:9px;
  padding:3px 8px; border-radius:var(--r); background:rgba(255,255,255,.09);
  color:var(--n300); }
.pc-list{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.pc-list span{ font-size:13px; color:var(--n300); line-height:1.45;
               padding-left:18px; position:relative; }
.pc-list span::before{ content:'\2713'; position:absolute; left:0;
                       color:var(--pc-dk, var(--brand-on-dark)); font-weight:700; font-size:11px; }
.pc-cta{ margin-top:auto; padding-top:22px; }
.pc-cta a{ font-family:var(--display); font-weight:600; font-size:13.5px;
           color:var(--pc-dk, var(--brand-on-dark)); display:inline-block; padding-block:4px; }
.pc-cta a:hover{ text-decoration:underline; }
.price-foot{ margin-top:26px; font-size:13px; color:var(--text-2-on-dark); max-width:74ch; }
.stories-ph{ display:inline-flex; align-items:center; gap:6px; font-size:11px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rec); background:var(--rec-sf); padding:5px 11px;
  border-radius:var(--r); margin-top:12px; }
#pricing .stories-ph, #coverage .stories-ph{
  color:var(--rec-dk); background:rgba(213,186,137,.14); }

/* ---------- why roots: carrusel centrado ----------
   Reemplaza la pila en abanico. La tarjeta del medio es la protagonista y
   las vecinas quedan atenuadas y mas chicas, como en la referencia de Humand.
   El desplazamiento se limita a los bordes: nunca queda hueco a los costados. */
.why-head{ max-width:640px; }
.why-carousel{ position:relative; margin-top:40px; }
.wc-viewport{ overflow:hidden; padding-block:20px; padding-inline:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); }
.wc-track{ display:flex; gap:20px; will-change:transform;
           transition:transform .5s var(--ease); }
.wc-card{ flex:0 0 clamp(250px,26vw,306px); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transform:scale(.94);
  transition:transform .4s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease); }
.wc-card.is-active{ transform:scale(1);
  border-color:var(--line-strong); box-shadow:0 18px 44px -18px rgba(7,18,23,.28); }
.wc-cap{ height:104px; background:var(--brand-surface); display:flex;
         align-items:flex-end; padding:0 20px 14px; }
.wc-card.is-active .wc-cap{ background:var(--brand); }
.wc-num{ font-family:var(--display); font-weight:700; font-size:34px;
         letter-spacing:-0.03em; color:var(--brand); line-height:1; }
.wc-card.is-active .wc-num{ color:#fff; }
.wc-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.wc-body h3{ font-size:17.5px; font-weight:600; line-height:1.25; }
.wc-body p{ font-size:13.5px; color:var(--text-2); line-height:1.55; margin-top:9px; }
.wc-tags{ margin-top:auto; padding-top:16px; display:flex; gap:6px; flex-wrap:wrap; }
.wc-tags span{ font-size:11px; font-weight:500; padding:4px 10px; border-radius:var(--pill);
               background:var(--n50); border:1px solid var(--line); color:var(--text-2);
               white-space:nowrap; }
.wc-card.is-active .wc-tags span{ background:var(--brand-surface);
  border-color:var(--eor-bd); color:var(--eor-hv); }

.wc-arrow{ position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:42px; height:42px; border-radius:var(--pill); cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);
  font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -8px rgba(7,18,23,.3);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.wc-arrow:hover{ border-color:var(--ink); }
.wc-arrow[disabled]{ opacity:.35; cursor:default; box-shadow:none; }
.wc-arrow.prev{ left:-10px; }
.wc-arrow.next{ right:-10px; }
@media (max-width:760px){ .wc-arrow.prev{ left:2px; } .wc-arrow.next{ right:2px; } }

.wc-dots{ display:flex; justify-content:center; gap:7px; margin-top:22px; }
.wc-dots button{ width:7px; height:7px; border-radius:var(--pill); border:none; padding:0;
  background:var(--n300); cursor:pointer; position:relative;
  transition:background var(--t-fast) var(--ease), width var(--t-fast) var(--ease); }
.wc-dots button::after{ content:''; position:absolute; inset:-9px; border-radius:var(--pill); }
.wc-dots button[aria-current="true"]{ background:var(--brand); width:20px; }

@media (prefers-reduced-motion: reduce){
  .wc-track{ transition:none; }
  .wc-card{ transform:none; }
}

/* ---------- proceso ---------- */
.process-grid{ display:grid; grid-template-columns:1fr; gap:56px;
               align-items:center; margin-top:44px; max-width:660px; }
@media (max-width:900px){ .process-grid{ grid-template-columns:1fr; gap:40px; } }
.timeline{ display:flex; flex-direction:column; gap:32px; position:relative; }
.timeline::before{ content:''; position:absolute; top:8px; bottom:8px; left:19px;
                   width:1px; background:var(--line-strong); }
.tl-step{ position:relative; z-index:1; padding-left:62px; min-height:40px; }
.tl-node{ width:40px; height:40px; border-radius:var(--pill); display:flex;
  align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:15px; color:#fff; background:var(--ink);
  position:absolute; left:0; top:0; }
.tl-node::after{ display:none; }
.tl-step h3{ font-size:17px; font-weight:600; }
.tl-step p{ font-size:14px; color:var(--text-2); margin-top:7px; max-width:52ch; }

/* ---------- cobertura (neutra: los paises no son servicios) ---------- */
#coverage{ background:var(--ink); overflow:hidden; }
#coverage h1,#coverage h2{ color:#fff; }
#coverage .eyebrow{ color:var(--brand-on-dark); }
#coverage .lede{ color:var(--n300); }
.coverage-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.coverage-video{ position:absolute; inset:0; width:100%; height:100%;
                 object-fit:cover; opacity:.55; }
/* Velo direccional: denso sobre la columna de texto (izquierda) y suave
   a la derecha, donde no hay nada encima y el mapa puede verse. */
.coverage-video-tint{ position:absolute; inset:0;
  background:
    linear-gradient(103deg, rgba(21,32,37,.94) 0%, rgba(21,32,37,.88) 32%,
                           rgba(21,32,37,.66) 60%, rgba(21,32,37,.50) 100%),
    linear-gradient(180deg, rgba(21,32,37,.30) 0%, rgba(21,32,37,0) 26%,
                            rgba(21,32,37,0) 74%, rgba(21,32,37,.42) 100%); }
.coverage-ring,.coverage-blob{ display:none; }
.country-grid{ margin-top:38px; display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); overflow:hidden; }
@media (max-width:900px){ .country-grid{ grid-template-columns:repeat(3,1fr); } }
.country-card{ background:var(--ink); padding:24px 16px; text-align:center; }
.cc-av{ width:88px; height:88px; border-radius:6px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:20px; color:#fff; position:relative; flex-shrink:0;
  background:var(--n700) !important; }
.cc-av .flag{ position:absolute; bottom:-3px; right:-3px; width:20px; height:20px;
  border-radius:var(--pill); background:var(--ink); display:flex; align-items:center;
  justify-content:center; font-size:11px; box-shadow:0 0 0 2px var(--ink); }
.country-card h3{ color:#fff; font-size:15.5px; font-weight:600; margin-top:14px; }
.cc-lead{ font-size:10px; color:var(--text-2-on-dark); text-transform:uppercase;
          letter-spacing:.12em; margin-top:6px; font-weight:600; }
.country-card p{ font-size:12px; color:var(--n400); margin-top:10px; line-height:1.5; }
/* En el telefono las cinco tarjetas en dos columnas quedan apretadas y la
   quinta deja un hueco al lado. Van en una sola columna, con la foto a la
   izquierda y el nombre sobre el cargo, para que la pagina no se alargue. */
@media (max-width:560px){
  .country-grid{ grid-template-columns:1fr; }
  .country-card{ display:grid; grid-template-columns:auto 1fr;
                 grid-template-areas:"foto nombre" "foto cargo";
                 align-items:center; column-gap:16px; row-gap:3px;
                 text-align:left; padding:14px 16px; }
  .country-card .cc-av{ grid-area:foto; width:60px; height:60px;
                        margin:0; font-size:15px; }
  .country-card h3{ grid-area:nombre; margin-top:0; align-self:end; }
  .country-card .cc-lead{ grid-area:cargo; margin-top:0; align-self:start; }
}
/* ---------- equipo (neutro) ---------- */
#team{ background:var(--surface-sunk); }
#team::before{ display:none; }
.team-card{ position:relative; z-index:1; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,4.5vw,52px) clamp(20px,4.5vw,48px); }
.team-card > .eyebrow{ text-align:center; }
.team-card h1,.team-card h2{ text-align:center; font-size:clamp(24px,3.4vw,36px);
  margin-top:10px; max-width:26ch; margin-inline:auto; }
.team-grid{ margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.team-member{ padding:0 26px; border-left:1px solid var(--line); }
.team-member:first-child{ border-left:none; padding-left:0; }
.team-member .av{ width:56px; height:56px; border-radius:var(--pill); display:flex;
  align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:16px; color:#fff; background:var(--n700) !important; }
.team-member .av.con-foto{ overflow:hidden; padding:0; background:var(--n800) !important; }
.team-member .av.con-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-member .role{ margin-top:16px; font-family:var(--display); font-size:10.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); }
.team-member h3{ font-size:16px; font-weight:600; margin-top:6px; }
.team-member .title{ font-size:12.5px; color:var(--text-2); margin-top:2px; }
.team-member p{ font-size:13.5px; color:var(--text-2); line-height:1.55; margin-top:14px; }
.team-ctas{ display:flex; justify-content:center; gap:12px; margin-top:38px; flex-wrap:wrap; }
.team-ctas .team-ghost{ background:var(--surface); border:1px solid var(--line-strong);
                        color:var(--text); }
.team-ctas .team-ghost:hover{ border-color:var(--ink); }
@media (max-width:760px){
  .team-grid{ grid-template-columns:1fr; gap:26px; }
  .team-member{ border-left:none; padding:26px 0 0; border-top:1px solid var(--line); }
  .team-member:first-child{ border-top:none; padding-top:0; }
}

/* ---------- testimonios ---------- */
.stories-carousel{ position:relative; margin-top:30px; overflow:hidden; padding:10px 0 6px; }
.stories-track{ display:flex; gap:16px; transition:transform .5s var(--ease); }
.story-card{ flex:0 0 256px; min-height:264px; border-radius:var(--r); padding:24px;
  background:var(--surface); border:1px solid var(--line); opacity:.55;
  transition:opacity var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease);
  display:flex; flex-direction:column; }
.story-card.active{ opacity:1; border-color:var(--line-strong); box-shadow:var(--shadow-float); }
.story-glow{ display:none; }
.story-tag{ align-self:flex-start; font-size:10.5px; font-weight:600; padding:4px 10px;
  border-radius:var(--pill); background:var(--n100); color:var(--text-2); }
.story-card h3{ font-size:17px; margin-top:44px; color:var(--text); font-weight:600; }
.story-card p{ font-size:13.5px; margin-top:10px; color:var(--text-2); line-height:1.55; }
.story-by{ font-family:var(--display); font-size:11.5px; font-weight:600; margin-top:16px;
           color:var(--text-2); }
.stories-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.stories-arrow{ width:36px; height:36px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--t-fast) var(--ease); }
.stories-arrow:hover{ border-color:var(--ink); }
.stories-dots{ display:flex; gap:7px; }
.stories-dot{ width:7px; height:7px; border-radius:var(--pill); border:none;
  background:var(--n300); cursor:pointer; padding:0; position:relative;
  transition:background var(--t-fast) var(--ease); }
.stories-dot::after{ content:''; position:absolute; inset:-9px; border-radius:var(--pill); }
.stories-dot.active{ background:var(--ink); }
@media (max-width:520px){ .story-card{ flex-basis:78vw; } }

/* ---------- calculadora ---------- */
#calc{ background:var(--surface); border-top:1px solid var(--line);
       border-bottom:1px solid var(--line); }
.calc-grid{ display:grid; grid-template-columns:.85fr 1.15fr;
            gap:clamp(24px,4vw,52px); align-items:start; margin-top:36px; }
.calc-grid > *{ min-width:0; }
@media (max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-intro p{ font-size:14.5px; line-height:1.55; color:var(--text-2); max-width:46ch; }
.calc-trust{ margin-top:24px; display:flex; flex-direction:column; }
.ct-item{ display:flex; align-items:flex-start; gap:14px; position:relative; padding-bottom:18px; }
.ct-item:last-child{ padding-bottom:0; }
.ct-item:not(:last-child)::before{ content:''; position:absolute; left:12px; top:26px;
  bottom:-2px; width:1px; background:var(--line-strong); }
.ct-node{ flex-shrink:0; width:25px; height:25px; border-radius:var(--pill);
  background:var(--ink); color:#fff; font-family:var(--display); font-weight:600;
  font-size:11.5px; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; }
.ct-pill{ flex:1; background:var(--n50); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 14px; margin-top:1px; font-size:13.5px;
  color:var(--text); line-height:1.45; }
.calc-card{ background:var(--ink); border-radius:var(--r); padding:clamp(20px,2.6vw,30px); }
.calc-label{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em;
             text-transform:uppercase; color:var(--text-2-on-dark); margin-bottom:10px; }
.calc-countries{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.calc-country-btn{ font-family:var(--body); font-size:13px; font-weight:500;
  padding:9px 15px; border-radius:var(--r); border:1px solid rgba(255,255,255,.2);
  background:transparent; color:var(--n300); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.calc-country-btn.active{ background:var(--brand); border-color:var(--brand);
                          color:#fff; font-weight:600; }
.calc-country-btn:hover:not(.active){ border-color:rgba(255,255,255,.5); color:#fff; }
.calc-input-row{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.calc-currency{ display:flex; align-items:center; flex:1; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:0 14px;
  transition:border-color var(--t-fast) var(--ease); }
.calc-currency:focus-within{ border-color:var(--brand-on-dark); }
.calc-currency span{ color:var(--text-2-on-dark); font-size:15px; font-weight:500; }
.calc-currency input{ flex:1; background:transparent; border:none; outline:none; color:#fff;
  font-family:var(--body); font-size:20px; font-weight:600; padding:12px 8px;
  font-variant-numeric:tabular-nums; min-width:0; }
.calc-bar-wrap{ height:30px; border-radius:var(--r); overflow:hidden; display:flex;
                background:rgba(255,255,255,.08); margin-bottom:14px; }
.calc-bar-base{ background:var(--n600); display:flex; align-items:center;
  justify-content:flex-end; padding-right:8px; transition:width var(--t-mid) var(--ease); }
.calc-bar-extra{ background:var(--brand); display:flex; align-items:center;
  justify-content:flex-start; padding-left:8px; transition:width var(--t-mid) var(--ease); }
.calc-bar-base span,.calc-bar-extra span{ font-size:11px; font-weight:600; color:#fff;
                                          white-space:nowrap; }
.calc-legend{ display:flex; gap:18px; margin-bottom:20px; }
.calc-legend-item{ display:flex; align-items:center; gap:7px; font-size:12px;
                   color:var(--text-2-on-dark); }
.calc-legend-dot{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.calc-results{ display:flex; flex-direction:column; gap:10px; padding-top:18px;
               border-top:1px solid rgba(255,255,255,.14); }
.calc-row2{ display:flex; justify-content:space-between; align-items:baseline;
            font-size:13.5px; color:var(--text-2-on-dark); }
.calc-row2 .v{ font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.calc-row2.total{ font-size:16px; padding-top:10px;
                  border-top:1px solid rgba(255,255,255,.14); }
.calc-row2.total .v{ font-size:22px; color:var(--brand-on-dark); }
.calc-note{ margin-top:20px; padding:14px 16px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  font-size:12.5px; line-height:1.5; color:var(--n300); }
.calc-source{ margin-top:12px; font-size:10.5px; line-height:1.5; color:var(--text-2-on-dark); }
.calc-capture{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.calc-capture-row{ display:flex; gap:8px; }
.calc-capture-row input{ flex:1; min-width:0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:11px 14px;
  color:#fff; font-family:var(--body); font-size:13.5px; outline:none; }
.calc-capture-row input:focus{ border-color:var(--brand-on-dark); }
.calc-capture-row button{ font-family:var(--display); font-weight:600; font-size:13px;
  padding:11px 18px; border-radius:var(--r); border:none; background:var(--brand);
  color:#fff; cursor:pointer; white-space:nowrap; }
.calc-capture-row button:hover{ background:var(--brand-hover); }
.calc-capture-msg{ margin-top:10px; font-size:12px; min-height:16px; }
.calc-capture-msg.err{ color:var(--rec-dk); }
.calc-capture-msg.ok{ color:var(--brand-on-dark); }

/* ---------- novedades ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } }
.news-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; display:flex; flex-direction:column;
  transition:box-shadow var(--t-mid) var(--ease); }
.news-card:hover{ box-shadow:var(--shadow-float); }
.news-date{ font-family:var(--display); font-size:11px; font-weight:600;
            letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); }
.news-card h3{ font-size:16.5px; font-weight:600; margin-top:10px; line-height:1.3; }
.news-card p{ font-size:13.5px; color:var(--text-2); margin-top:9px; line-height:1.55; }
.news-manage-hint{ margin-top:24px; font-size:12.5px; color:var(--text-2); }
.news-manage-hint a{ display:inline-block; padding-block:5px; color:var(--brand);
                     font-weight:600; }

/* ---------- cierre con video de fondo ----------
   El clip son los primeros 5 segundos del material, recortados y virados
   hacia el teal de la marca. El velo encima es lo que garantiza que el
   texto se lea: sin el, el brillo del video varia y el contraste tambien. */
#cta{ background:var(--ink); text-align:center; overflow:hidden; position:relative; }
.cta-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cta-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
            opacity:.52; }
.cta-veil{ position:absolute; inset:0;
  background:
    radial-gradient(58% 72% at 50% 52%, rgba(7,18,23,.74) 0%,
                                        rgba(7,18,23,.56) 52%,
                                        rgba(7,18,23,.30) 100%),
    linear-gradient(180deg, rgba(21,32,37,.55) 0%, rgba(21,32,37,0) 22%,
                            rgba(21,32,37,0) 78%, rgba(21,32,37,.55) 100%); }

#cta .wrap{ max-width:640px; }
#cta .eyebrow{ color:var(--brand-on-dark); }
#cta h2{ font-size:clamp(27px,3.8vw,42px); color:#fff; }
#cta p{ color:var(--n300); margin-top:12px; }
#cta .hero-ctas{ justify-content:center; margin-top:26px; }

/* ---------- pie ---------- */
footer{ background:var(--ink-deep); color:var(--text-2-on-dark);
        padding:44px clamp(20px,5vw,64px) 28px; }
footer .brand{ --halo:#071217; }
footer .brand .lockup{ width:66px; color:#C5CED2; }
footer .brand .word{ color:#fff; font-size:37px; }
footer .brand .pin path{ fill:var(--brand-on-dark); }

.foot-grid{ max-width:1160px; margin:0 auto; display:flex; justify-content:space-between;
            gap:28px; flex-wrap:wrap; align-items:flex-start; }
.foot-links{ display:flex; gap:28px; flex-wrap:wrap; font-size:13.5px; }
footer a{ display:inline-block; padding-block:5px; color:var(--n400); }
footer a:hover{ color:#fff; }
.foot-bottom{ max-width:1160px; margin:26px auto 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--n500); }

/* ---------- panel de noticias ---------- */
#newsAdmin{ position:fixed; inset:0; z-index:90;
  background:rgba(7,18,23,.72); display:none; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto; }
#newsAdmin.open{ display:flex; }
.admin{ background:var(--surface); border-radius:var(--r); width:100%;
  max-width:560px; padding:clamp(24px,3.5vw,36px); position:relative;
  box-shadow:var(--shadow-modal); max-height:92vh; overflow-y:auto; }
.admin-close{ position:absolute; top:16px; right:16px; width:32px; height:32px;
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); font-size:14px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
.admin-close:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- aparicion al hacer scroll ---------- */
.reveal{ transition:opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); }
.reveal.pending{ opacity:0; translate:0 16px; }
.reveal.pending.stagger-in{ opacity:1; translate:0 0; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  /* NOTA para el equipo: si en Windows tenes desactivados los efectos de
     animacion, el sitio entra aca y no vas a ver ninguna animacion. El
     contenido igual queda completamente visible, que es el punto. */
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal.pending{ opacity:1 !important; translate:none !important; }
  #hero h1 .word,#hero .lede,#hero .hero-ctas,#hero .proof-row,#hero .intent-chips{ opacity:1 !important; }
  .ind-track,.reel-track{ animation:none !important; }
  /* Sin animacion el riel no se desplaza, asi que las tarjetas que quedan
     fuera de pantalla son inalcanzables: pasa a grilla y se ocultan las
     copias que solo existen para que el loop sea continuo. */
  .reel-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:auto; }
  .reel-track > *{ min-width:0; }
  .reel-slide[aria-hidden="true"]{ display:none; }
  .reel-viewport{ -webkit-mask-image:none; mask-image:none; }
  .ind-track{ width:auto; flex-wrap:wrap; justify-content:center; }
}

/* ---------- las tarjetas del carrusel de soluciones son enlaces ----------
   Cada una lleva a la pagina de su servicio, igual que las del indice. */
a.reel-slide{ color:inherit; text-decoration:none; cursor:pointer; }
a.reel-slide:hover{ border-color:var(--sc, var(--brand)); }
.reel-go{ margin-top:14px; font-family:var(--display); font-weight:600; font-size:13px;
          color:var(--sc, var(--brand)); }
a.reel-slide:hover .reel-go{ text-decoration:underline; }
a.reel-slide:focus-visible{ outline:2px solid var(--sc, var(--brand)); outline-offset:3px; }

/* la grilla del riel sin animacion se adapta igual que el resto del sitio */
@media (prefers-reduced-motion: reduce) and (max-width:1020px){
  .reel-track{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) and (max-width:620px){
  .reel-track{ grid-template-columns:1fr; }
}

/* ================= pagina de contacto =================
   Reemplaza al modal: la invitacion a la izquierda, el
   formulario a la derecha, una sola columna en celular. */
#contact{ background:var(--n50); scroll-margin-top:104px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(30px,4.5vw,66px); align-items:start; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-aside h2{ font-size:clamp(28px,3.8vw,42px); margin-top:10px; letter-spacing:-0.02em; }
.contact-aside .lede{ margin-top:14px; }

.contact-points{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px; }
.contact-points li{ display:flex; gap:11px; align-items:flex-start;
  font-size:14.5px; line-height:1.55; color:var(--text-2); }
.cp-tick{ color:var(--brand); font-weight:700; flex-shrink:0; line-height:1.4; }

.contact-direct{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; font-size:14px; }
.contact-direct span{ color:var(--text-2); }
.contact-direct a{ color:var(--brand); font-weight:600; padding-block:4px; }

/* El logo contenido: la palabra vive adentro del continente. */
.lockup{ position:relative; width:186px; color:var(--n600); }
.lockup > svg{ display:block; width:100%; height:auto; }
.lockup-word{ position:absolute; transform:translate(-50%,-50%);
  font-family:var(--display); font-weight:700; letter-spacing:-0.045em; line-height:1;
  display:flex; align-items:baseline; white-space:nowrap; font-size:56px; color:var(--text);
  text-shadow:0 0 3px var(--n50),0 0 3px var(--n50),0 0 3px var(--n50),0 0 3px var(--n50); }
.lockup .pin{ width:.56em; height:.72em; margin:0 .015em -.19em; flex-shrink:0;
  filter:drop-shadow(0 0 2px var(--n50)) drop-shadow(0 0 2px var(--n50)); }
.lockup-contacto{ margin-top:38px; }
@media (max-width:920px){ .lockup-contacto{ display:none; } }

.contact-panel{ background:var(--n0); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(22px,3vw,34px);
  box-shadow:0 18px 44px -28px rgba(7,18,23,.35); }

/* Estos estilos vivian en el bloque del modal. El modal se fue, los
   campos siguen: son los mismos que usa el formulario de contacto. */
.f-field.full{ grid-column:1/-1; }
.f-field label{ display:block; font-family:var(--display); font-size:10.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:6px; }
.f-field input,.f-field textarea{ width:100%; background:var(--n25);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:11px 13px;
  font-family:var(--body); font-size:14.5px; color:var(--text); outline:none;
  transition:border-color var(--t-fast) var(--ease); }
.f-field input:focus,.f-field textarea:focus{ border-color:var(--brand); }
.f-field input:user-invalid{ border-color:#9B1C1C; }
.f-field textarea{ min-height:96px; resize:vertical; }

/* El modal nunca definio .f-grid, asi que los campos se apilaban
   a lo ancho. Aca la grilla existe de verdad. */
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media (max-width:560px){ .f-grid{ grid-template-columns:1fr; } }

.contact-submit{ width:100%; margin-top:20px; }
.contact-note{ margin-top:12px; font-size:12px; color:var(--text-2); text-align:center; }
.contact-note.is-error{ color:#9B1C1C; font-weight:600; }

.contact-success{ text-align:center; padding:26px 4px; }
.contact-success .tick{ width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:21px; margin:0 auto 16px; }
.contact-success h3{ font-size:20px; color:var(--text); }
.contact-success p{ margin-top:8px; font-size:14.5px; color:var(--text-2); }

/* Sin esto el bloque de exito se ve siempre, que es lo que pasaba antes. */
[hidden]{ display:none !important; }

/* En pantallas chicas la marca se achica para que la barra no se coma
   media pantalla, manteniendo la proporcion entre mapa y palabra. */
@media (max-width:620px){
  .brand .lockup{ width:34px; }
  .brand .word{ font-size:19px; }
}

/* ================= visa sponsorship ================= */
.visa-head{ max-width:720px; }
.visa-sub{ font-family:var(--display); font-size:16px; font-weight:600;
           margin-top:36px; color:var(--text); }
.visa-avail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  margin-top:28px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; }
.visa-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); padding:15px 18px; font-size:14.5px; color:var(--text); }
.visa-status{ font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--pill); white-space:nowrap; }
.visa-status.si{ background:var(--eor-sf); color:var(--eor); }
.visa-status.no{ background:var(--n100); color:var(--n600); }
/* nombres viejos, para que la pagina de soluciones tambien se vea bien */
.visa-status.available{ background:var(--eor-sf); color:var(--eor); }
.visa-status.soon{ background:var(--rec-sf); color:var(--rec); }
.visa-status.unavailable{ background:var(--n100); color:var(--n600); }

.visa-scope{ margin-top:26px; padding:18px 22px; background:var(--eor-sf);
  border-left:3px solid var(--eor); border-radius:0 var(--r) var(--r) 0;
  font-size:14.5px; color:var(--text-2); line-height:1.6; max-width:82ch; }
.visa-scope b{ color:var(--text); font-weight:600; }

.visa-blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
@media (max-width:900px){ .visa-blocks{ grid-template-columns:1fr; } }
.visa-block{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); border-top:3px solid var(--eor); padding:22px 24px; min-width:0; }
.visa-block h3{ font-family:var(--display); font-size:16px; font-weight:600; color:var(--text); }
.visa-block p{ font-size:14px; color:var(--text-2); line-height:1.55; margin-top:10px; }

/* ================= bloques todavia pendientes ================= */
.pendiente{ border:1px dashed var(--line-strong); border-radius:var(--r);
  padding:22px 26px; background:var(--n25); max-width:720px; }
.pendiente .marca{ display:inline-block; font-family:var(--display); font-size:10.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rec); margin-bottom:9px; }
.pendiente h3{ font-family:var(--display); font-size:17px; font-weight:600; color:var(--text); }
.pendiente p{ font-size:14.5px; color:var(--text-2); line-height:1.55; margin-top:9px; }

/* ================= tarjetas "extra" de la pagina de soluciones ================= */
.extras-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px; }
@media (max-width:860px){ .extras-grid{ grid-template-columns:1fr; } }
.extra-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); border-top:3px solid var(--eor); padding:24px 26px; min-width:0; }
.extra-tag{ display:inline-block; font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--eor);
  background:var(--eor-sf); padding:4px 10px; border-radius:var(--pill); }
.extra-card h3{ font-family:var(--display); font-size:19px; font-weight:600;
  color:var(--text); margin-top:14px; }
.extra-card > p{ font-size:14.5px; color:var(--text-2); line-height:1.55; margin-top:10px; }
.visa-list{ display:grid; gap:1px; margin-top:18px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.extra-note{ margin-top:16px; font-size:12px; color:var(--rec); font-weight:600; }

.extras-grid.una{ grid-template-columns:1fr; max-width:620px; }

/* Los avatares de pais muestran el codigo de dos letras, no emoji:
   Windows no tiene las banderas y las dibujaba como texto suelto. */
/* la pila de avatares muestra codigos de pais */
.avatar-stack span{ font-family:var(--display); font-weight:700; font-size:10.5px;
  letter-spacing:.02em; display:flex; align-items:center; justify-content:center; }

/* Los lideres que ya tienen foto la muestran en el recuadro; los que
   todavia no, siguen con el codigo de pais sobre el fondo oscuro. */
.cc-av.con-foto{ background:var(--n800) !important; overflow:hidden; padding:0; }
.cc-av.con-foto img{ width:100%; height:100%; object-fit:cover;
  border-radius:inherit; display:block; }

/* ================= logo del disenador =================
   Reemplaza al lockup que se dibujaba con SVG y tipografia. */
.brand-logo{ display:block; height:34px; width:auto; }
footer .brand-logo{ height:44px; }
@media (max-width:620px){ .brand-logo{ height:28px; } }

/* ================= envio a mano =================
   Se muestra solo si el formulario no pudo enviarse solo: el mensaje
   queda listo para copiar, asi la consulta no se pierde. */
.contact-manual{ padding:4px 0; }
.contact-manual h3{ font-family:var(--display); font-size:19px; font-weight:600; color:var(--text); }
.contact-manual > p{ font-size:14.5px; color:var(--text-2); line-height:1.55; margin-top:9px; }
.contact-manual > p b{ color:var(--text); font-weight:600; }
.contact-manual textarea{ width:100%; margin-top:14px; background:var(--n25);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:12px 14px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:13px;
  color:var(--text); line-height:1.5; resize:vertical; }
.contact-manual-acciones{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.contact-manual-acciones .btn{ flex:1; min-width:150px; text-align:center; }

.contacto-logo{ height:60px; margin-top:38px; }
@media (max-width:920px){ .contacto-logo{ display:none; } }

/* El enlace al blog sale del sitio: una flechita lo deja claro. */
.nav-links a[target="_blank"]::after,
.foot-links a[target="_blank"]::after{ content:"\2197"; font-size:.82em;
  margin-left:3px; opacity:.6; }

/* ---------- paginas legales (privacy policy) ---------- */
.legal-wrap{ display:grid; grid-template-columns:232px minmax(0,1fr); gap:56px;
             align-items:start; }
.legal-cuerpo{ max-width:74ch; }
.legal-cuerpo h2{ font-family:var(--display); font-size:clamp(19px,2.3vw,23px);
                  font-weight:600; letter-spacing:-0.01em; margin:44px 0 12px;
                  scroll-margin-top:104px; }
.legal-cuerpo h2:first-child{ margin-top:0; }
.legal-cuerpo h2 .num{ color:var(--brand); font-variant-numeric:tabular-nums;
                       margin-right:10px; }
.legal-cuerpo h3{ font-family:var(--display); font-size:15.5px; font-weight:600;
                  margin:24px 0 8px; }
.legal-cuerpo p{ margin:0 0 14px; line-height:1.72; color:var(--n700); }
.legal-cuerpo ol,.legal-cuerpo ul{ margin:0 0 16px; padding-left:22px;
                                   color:var(--n700); }
.legal-cuerpo li{ margin-bottom:8px; line-height:1.66; }
.legal-cuerpo li > ol{ margin-top:8px; }
.legal-cuerpo strong{ color:var(--ink); font-weight:600; }
.legal-cuerpo a{ color:var(--brand); }
.legal-cuerpo .legal-def{ list-style:none; padding-left:0; }
.legal-def li{ padding-left:0; }
.legal-def .t{ font-family:var(--display); font-weight:600; font-size:13px;
               letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }

.legal-indice{ position:sticky; top:104px; border-right:1px solid var(--n200);
               padding-right:22px; }
.legal-indice .rot{ font-family:var(--display); font-size:11px; font-weight:600;
                    letter-spacing:.14em; text-transform:uppercase;
                    color:var(--n500); margin-bottom:12px; }
.legal-indice a{ display:block; font-size:13px; line-height:1.45;
                 color:var(--n600); text-decoration:none; padding:5px 0; }
.legal-indice a:hover{ color:var(--brand); }

@media (max-width:900px){
  .legal-wrap{ grid-template-columns:1fr; gap:0; }
  .legal-indice{ position:static; border-right:0; padding-right:0;
                 border-bottom:1px solid var(--n200); padding-bottom:20px;
                 margin-bottom:32px; columns:2; column-gap:24px; }
}
@media (max-width:620px){
  .legal-indice{ column-gap:16px; }
  .legal-indice a{ font-size:12.5px; padding:4px 0; }
}

/* ---------- ajustes para pantallas tactiles ---------- */
/* En el telefono los puntos de los carruseles miden 7px: el punto se ve
   igual, pero el area que responde al dedo pasa a 31px. La separacion es
   justo el doble del margen agregado, asi las areas quedan pegadas y
   ninguna se monta sobre la de al lado. */
@media (max-width:620px){
  .wc-dots,.stories-dots{ gap:24px; }
  .wc-dots button::after,.stories-dot::after{ inset:-12px; }
  .stories-arrow{ width:44px; height:44px; font-size:17px; }

  /* Las etiquetas mas chicas suben de 11 a 12px: a 11 cuestan de leer
     en un telefono y no hay problema de espacio. */
  .reel-tags span,.wc-tags span{ font-size:12px; }
}