/* Montserrat alojada en el propio sitio (SIL OFL 1.1; ver assets/fuentes/LEEME.txt). Fuente variable, subconjunto latin. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fuentes/montserrat-latin-variable.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Grupo 5LG · v5 · diseño a partir de la referencia de Bryann y el Manual de Identidad v1 (págs. 5–8)
   Navy #06263D · azul tecnológico #0A96D6 · amarillo #FFB400 (solo acentos) · gris #E8EEF2 · Montserrat 400/500/600/700.
   Íconos lineales Lucide. Botones en pastilla, tarjetas con radio 14 px.
   Tema oscuro: las bandas navy se quedan; las secciones blancas pasan a casi negro. */
:root{
  --navy:#06263D;
  --navy-2:#0B3A5E;
  --navy-3:#041A2B;       /* franja superior y pie */
  --tec:#0A96D6;          /* azul tecnológico: trazos, íconos, fondos */
  --tec-claro:#4DB8E8;    /* texto pequeño sobre navy */
  --tec-btn:#0B78AE;      /* relleno con texto blanco (4.9:1) */
  --ambar:#FFB400;
  --ambar-claro:#FFC942;
  --gris:#E8EEF2;
  --sobre-navy:#C9D8E3;   /* texto secundario sobre navy (10:1) */
  --linea-navy:rgba(255,255,255,.18);
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;
  --pill:999px;
  /* Roles del tema claro. El oscuro solo redefine estos. */
  --fondo:#FFFFFF;
  --fondo-2:var(--gris);
  --card:#FFFFFF;
  --tinta:var(--navy);
  --tx2:#476072;          /* 6:1 sobre blanco, 5:1 sobre gris */
  --enlace:#0A6A9C;       /* 5.9:1 sobre blanco, 5:1 sobre gris */
  --borde:#D3DDE4;
  --chip:#E1F2FA;
  --sombra:0 8px 28px rgba(6,38,61,.09);
  --borde-card:var(--borde);
  --b1:var(--navy-3); --b2:var(--navy); --b3:var(--navy-2); /* degradado de las bandas navy */
  --glow:rgba(10,150,214,.32);
  --hueco-bg:#FFF4D6; --hueco-borde:#C98F00; --hueco-tx:#5C4200;
  /* mapa de cobertura: rellenos OPACOS (el azul translúcido del asset ya compuesto sobre el navy de la banda) para que tape lo que orbita por detrás */
  --map-mx:#094E76; --map-us:#124567;
  /* Servicios: fondo casi blanco, tarjetas blancas sin borde marcado y sombra suave (referencia GPT) */
  --fondo-svc:#F7F9FC; --ico-svc:var(--navy); --borde-svc:rgba(6,38,61,.06);
  --sombra-svc:0 6px 22px rgba(6,38,61,.07),0 1px 3px rgba(6,38,61,.05); --circ-bg:#fff; --circ-sombra:0 2px 8px rgba(6,38,61,.16);
  color-scheme:light;
}
:root[data-tema="oscuro"]{
  --fondo:#050C16; --fondo-2:#07111D; --card:rgba(10,44,76,.42); --tinta:#F1F5F8; --tx2:#AFC1D0; --enlace:#5CC8F5;
  --borde:#1B3045; --borde-card:rgba(10,150,214,.38); --chip:rgba(10,150,214,.2); --sombra:0 0 26px rgba(10,150,214,.13);
  --b1:#040B14; --b2:#061726; --b3:#0A2640; --glow:rgba(10,150,214,.4);
  --hueco-bg:rgba(255,180,0,.12); --hueco-borde:#E0A100; --hueco-tx:#FFDB8A;
  --fondo-svc:var(--fondo-2); --ico-svc:#5CC8F5; --borde-svc:var(--borde-card); --sombra-svc:var(--sombra); --circ-bg:rgba(10,150,214,.2); --circ-sombra:none; --map-mx:#094263; --map-us:#123752;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#050C16; --fondo-2:#07111D; --card:rgba(10,44,76,.42); --tinta:#F1F5F8; --tx2:#AFC1D0; --enlace:#5CC8F5;
    --borde:#1B3045; --borde-card:rgba(10,150,214,.38); --chip:rgba(10,150,214,.2); --sombra:0 0 26px rgba(10,150,214,.13);
    --b1:#040B14; --b2:#061726; --b3:#0A2640; --glow:rgba(10,150,214,.4);
    --hueco-bg:rgba(255,180,0,.12); --hueco-borde:#E0A100; --hueco-tx:#FFDB8A;
    --fondo-svc:var(--fondo-2); --ico-svc:#5CC8F5; --borde-svc:var(--borde-card); --sombra-svc:var(--sombra); --circ-bg:rgba(10,150,214,.2); --circ-sombra:none; --map-mx:#094263; --map-us:#123752;
  color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hb,70px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-height:500px){html{scroll-padding-top:0}}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
p,h1,h2,h3,h4,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--enlace);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--enlace);outline-offset:3px;border-radius:4px}
.strip :focus-visible,.barra :focus-visible,.banda :focus-visible,.hero :focus-visible,.pie :focus-visible{outline-color:var(--ambar)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ambar);color:var(--navy);padding:12px 18px;border-radius:var(--pill);font-weight:600}
.skip:focus{top:12px;color:var(--navy)}
.ico{width:24px;height:24px;flex:none;display:block}

/* tipografía */
.h1{font-size:clamp(32px,4.1vw,52px);line-height:1.12;letter-spacing:-.015em;font-weight:700}
.h2{font-size:clamp(26px,2.9vw,36px);line-height:1.15;letter-spacing:-.01em;font-weight:700}
.lead{font-size:17px;line-height:1.65;color:var(--tx2);max-width:36em}
.kicker{margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--enlace)}
.kicker--banda{color:var(--tec-claro)}
.resalta{color:var(--ambar)}

/* huecos: dato por confirmar */
.hueco{display:inline-block;font-size:12px;font-weight:600;line-height:1.4;padding:3px 9px;border:1px dashed var(--hueco-borde);background:var(--hueco-bg);color:var(--hueco-tx);border-radius:6px;letter-spacing:0;text-transform:none}
.hueco--grande{font-size:clamp(17px,1.7vw,21px);line-height:1.35;padding:8px 14px;border-radius:10px}
.banda .hueco,.hero .hueco,.pie .hueco{background:rgba(255,180,0,.14);border-color:#E0A100;color:#FFDB8A}

/* botones (pastilla) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--pill);font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{text-decoration:none}
.btn--grande{min-height:50px;padding:0 28px;font-size:15px}
.btn--ambar{background:var(--ambar);color:var(--navy)}
.btn--ambar:hover{background:var(--ambar-claro);color:var(--navy)}
.btn--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn--fantasma:hover{background:rgba(255,255,255,.12);color:#fff}
.btn .ico--flecha{width:18px;height:18px}
.btn[disabled]{opacity:.65;cursor:progress}
.botones{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.botones--mt{margin-top:28px}

/* franja superior (más oscura que la barra) */
.strip{background:var(--b1);color:var(--sobre-navy);font-size:12.5px;font-weight:500}
.strip__in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:3px}
.tema{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:30px;padding:0 10px;border:0;border-radius:var(--pill);background:transparent;color:var(--sobre-navy);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.tema:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tema svg{width:15px;height:15px}
.tema__sw{position:relative;flex:none;width:28px;height:16px;border:1.5px solid currentColor;border-radius:var(--pill)}
.tema__sw::after{content:"";position:absolute;top:1.5px;left:2px;width:9px;height:9px;border-radius:50%;background:currentColor;transition:transform .15s}
.tema[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
.tema[aria-pressed="true"] svg{fill:var(--ambar);stroke:var(--ambar)}
.tema[aria-pressed="true"] .tema__sw{background:var(--ambar);border-color:var(--ambar)}
.tema[aria-pressed="true"] .tema__sw::after{transform:translateX(12px);background:var(--navy)}
.tema--menu .tema__sw{margin-left:auto}

/* barra navy */
.barra{position:sticky;top:0;z-index:30;background:var(--b2);border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-height:500px){.barra{position:static}}
.barra__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:6px}
.logo{display:block;flex:none;padding:7px 0}   /* área de protección: un diámetro de nodo (≈6,5 px) alrededor */
.logo img{height:54px;width:auto}
.logo__s{display:none}
.nav ul{display:flex;gap:clamp(18px,2.2vw,36px)}
.nav a,.barra__cta{white-space:nowrap}
.nav a{display:block;padding:12px 2px;color:#fff;font-size:14px;font-weight:500;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{text-decoration:none;border-bottom-color:var(--ambar)}
.menu__panel li a[aria-current]{color:var(--ambar)}
.barra__tools{display:flex;align-items:center;gap:14px}
.cta-s{display:none}
.lang{display:flex;gap:2px;padding:3px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--pill)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:34px;padding:0 10px;border-radius:var(--pill);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.04em}
.lang a:hover{text-decoration:none;background:rgba(255,255,255,.12)}
.lang a[aria-current]{background:var(--tec-btn);color:#fff}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.45);border-radius:var(--pill);cursor:pointer;background:transparent}
.menu summary::-webkit-details-marker{display:none}
.menu__ico,.menu__ico::before,.menu__ico::after{display:block;width:18px;height:2px;background:#fff;border-radius:1px;content:"";position:relative}
.menu__ico::before{position:absolute;top:-6px;left:0}
.menu__ico::after{position:absolute;top:6px;left:0}
.menu[open] .menu__ico{background:transparent}
.menu[open] .menu__ico::before{top:0;transform:rotate(45deg)}
.menu[open] .menu__ico::after{top:0;transform:rotate(-45deg)}
.menu__panel{position:absolute;right:0;top:calc(100% + 10px);z-index:40;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;width:min(320px,calc(100vw - 40px));background:var(--navy-2);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:8px 16px 16px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.menu__panel li a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--linea-navy);color:#fff;font-weight:500}
.menu__panel li a:hover{text-decoration:none;color:var(--ambar)}
.lang--menu{margin-top:14px;display:inline-flex}
.lang--menu a{min-height:44px}
.tema--menu{margin-top:10px;min-height:44px;width:100%;justify-content:flex-start;padding:0 14px;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-size:14px}
@media (max-width:1100px){
  .nav,.lang--barra{display:none}
  .menu{display:block}
  .strip{display:none}
}
@media (max-width:1279px){.cta-l{display:none}.cta-s{display:inline}}
@media (max-width:620px){
  .logo img{height:48px}
  .cta-l{display:none}
  .cta-s{display:inline}
  .barra__in{gap:12px}
  .barra__tools{gap:10px}
  .barra__cta{padding:0 16px}
}
@media (max-width:340px){.barra__cta{padding:0 10px}.barra__in{gap:8px}}
/* ≤375 px el lockup no cabe a ≥150 px junto al CTA y al menú: se usa solo el símbolo */
@media (max-width:375px){.logo__l{display:none}.logo__s{display:block;height:38px}}

/* hero navy con degradado; la ilustración ocupa la mitad derecha a sangre */
.hero{position:relative;overflow:hidden;color:#fff;padding-block:clamp(32px,3.5vw,50px);
  background:radial-gradient(900px 520px at 80% 45%,var(--glow),transparent 62%),linear-gradient(105deg,var(--b1) 0%,var(--b2) 42%,var(--b3) 100%)}
:root{--tira-h:116px}
.hero{display:flex;flex-direction:column;padding-bottom:var(--olah)}
.hero__in{position:relative;z-index:1;flex:1;display:flex;align-items:center;width:100%;padding-bottom:clamp(32px,3.5vw,50px)}
.hero__txt{max-width:min(740px,100%)}
.eyebrow{margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tec-claro)}
.hero .h1{font-size:clamp(30px,3vw,44px);line-height:1.13;max-width:18em}
.hero__p{margin-top:16px;max-width:31em;font-size:16.5px;line-height:1.6;color:#E3ECF2}
.hero .botones{margin-top:24px}
.hero .h1{text-wrap:balance}
.hero__p{text-wrap:pretty}
.hero__arte{position:absolute;inset:0 0 calc(var(--tira-h) + var(--olah)) auto;width:52%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%);mask-composite:intersect}
.arte{display:block;width:100%;height:100%}
.a-linea{fill:none;stroke-linecap:round}
.a-linea--fina{stroke:rgba(255,255,255,.2);stroke-width:1.5}
.a-linea--gruesa{stroke-width:4}
.a-linea--punto{stroke:rgba(92,200,245,.6);stroke-width:2;stroke-dasharray:2 9}
.a-mod{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.a-mod--grad{fill:url(#g-mod);stroke:rgba(92,200,245,.55)}
.a-mod--on{fill:rgba(10,150,214,.22);stroke:rgba(92,200,245,.7)}
.a-conex{fill:none;stroke:rgba(92,200,245,.4);stroke-width:1.2}
.a-nodo--ambar{fill:var(--ambar)}
.a-aro{fill:none;stroke:var(--ambar);stroke-opacity:.45;stroke-width:1.5}
.a-nodo--claro{fill:#fff}
.a-nodo--tec{fill:var(--tec)}
@media (min-width:1001px){.hero__arte{right:72px;width:calc(52% - 72px)}}
@media (max-width:960px){.hero__arte{width:100%;opacity:.4}}
@media (max-width:620px){.hero__arte{display:none}.hero{padding-top:44px}.hero__in{flex:none;padding-bottom:36px}}

/* secciones */
.sec{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,92px)}
.sec>.wrap,.banda>.wrap{position:relative;z-index:1}
.sec--gris{background:var(--fondo-2)}
.sec--compacta{padding-block:clamp(40px,5vw,60px)}
.cab{display:flex;gap:16px 56px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:40px}
.cab>div{flex:0 1 460px}
.cab .lead{flex:1 1 380px;min-width:0}
.cab--banda .lead{color:var(--sobre-navy)}

/* servicios (como el mockup GPT): encabezado a la izquierda y 6 tarjetas blancas en 3×2 con ícono, título, subtítulo y flecha */
.sec--servicios{background:var(--fondo-svc)}
/* simétrico y con la columna de puntos (72 px) libre a cada lado desde el borde de la ventana; cuando el margen del .wrap ya la libera (≥1360) queda alineado con el header */
.svc{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tarjeta{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;min-height:0;align-items:center;padding:18px 62px 18px 18px;background:var(--card);border:1px solid var(--borde-svc);border-radius:var(--r);box-shadow:var(--sombra-svc)}
.tarjeta:hover{border-color:var(--tec)}
.tarjeta__ico{display:grid;place-items:center;width:44px;height:44px;color:var(--ico-svc)}
.tarjeta__ico .ico{width:40px;height:40px;stroke-width:1.6}
.tarjeta__ico .ac{stroke:var(--ambar)}
.tarjeta__tx{min-width:0}
.tarjeta__t{font-size:clamp(15px,1.15vw,17px);line-height:1.22;font-weight:700}
.tarjeta__f{margin-top:5px;color:var(--tx2);font-size:13.5px;line-height:1.45}
.mas{color:var(--enlace)}
.mas::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.mas:hover{text-decoration:none}
.mas:focus-visible{outline:none}
.mas:focus-visible::after{outline:2px solid var(--enlace);outline-offset:3px}
.circ{position:absolute;right:14px;top:50%;margin-top:-18px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--circ-bg);box-shadow:var(--circ-sombra);transition:background .15s,color .15s}
.tarjeta:hover .circ{background:var(--enlace);color:var(--fondo)}
.circ .ico{width:16px;height:16px;stroke-width:2.2}
@media (max-width:1000px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}.circ{width:44px;height:44px;margin-top:-22px}.tarjeta{padding-right:70px}}
@media (max-width:600px){
  .tarjetas{grid-template-columns:1fr;gap:12px}
  .tarjeta{padding:16px 70px 16px 16px}
  .circ{right:12px}
}

/* banda navy: credenciales */
.banda{position:relative;overflow:hidden;color:#fff;background:linear-gradient(100deg,var(--b1),var(--b2) 55%,var(--b3))}
.cred{display:grid;grid-template-columns:minmax(260px,30%) minmax(0,1fr)}
.cred__foto{position:relative;margin:0;min-height:300px;overflow:hidden;border-right:1px solid var(--linea-navy);background:var(--b2)}
.foto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 30%}
.cred__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,38,61,.22),rgba(6,38,61,.42) 65%,rgba(6,38,61,.88)),linear-gradient(0deg,rgba(6,38,61,.3),transparent 40%);pointer-events:none}
:root[data-tema="oscuro"] .cred__foto::after{background:linear-gradient(90deg,rgba(4,11,20,.5),rgba(4,11,20,.78) 70%,rgba(4,11,20,.95)),linear-gradient(0deg,rgba(4,11,20,.5),transparent 45%)}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .cred__foto::after{background:linear-gradient(90deg,rgba(4,11,20,.5),rgba(4,11,20,.78) 70%,rgba(4,11,20,.95)),linear-gradient(0deg,rgba(4,11,20,.5),transparent 45%)}}
.cred__in{position:relative;z-index:1;max-width:none;margin:0;padding-block:clamp(40px,5vw,64px);padding-inline:clamp(24px,4vw,56px) clamp(20px,5vw,40px)}
.cred__cuerpo{max-width:860px}
.cred__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.cred__col{padding:6px 16px;text-align:center}
.cred__col+.cred__col{border-left:1px solid var(--linea-navy)}
.cred__ico{display:grid;place-items:center;margin:0 auto 14px;width:48px;height:48px;color:#fff}
.cred__ico .ico{width:38px;height:38px;stroke-width:1.5}
.cred__k{font-size:18px;line-height:1.3;font-weight:700}
.cred__v{margin-top:8px;font-size:14px;line-height:1.65;color:var(--sobre-navy)}
.deco{position:absolute;pointer-events:none;width:min(520px,60%);height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
.d-nodo--p{opacity:.9}
.d-arco{fill:none;stroke:var(--tec);stroke-width:4;stroke-linecap:round;opacity:.85}
.d-arco--fino{stroke-width:1.5;opacity:.45;stroke:#fff}
.d-aro{fill:none;stroke:var(--ambar);stroke-opacity:.4;stroke-width:1.5}
.d-nodo{fill:var(--ambar)}
@media (min-width:1001px){.cred__in{padding-inline:clamp(24px,3vw,48px) 56px}}
.deco--contacto{left:28px;bottom:28px;width:min(340px,26%)}
@media (max-width:1000px){
  .cred{grid-template-columns:1fr}
  .cred__foto{min-height:240px;border-right:0;border-bottom:1px solid var(--linea-navy)}
  .cred__in{padding-inline:clamp(20px,5vw,40px)}
}
@media (max-width:620px){.cred__foto{min-height:200px}}
@media (max-width:700px){
  .cred__cols{grid-template-columns:1fr;gap:0}
  .cred__col{padding:22px 0;text-align:left;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
  .cred__col+.cred__col{border-left:0;border-top:1px solid var(--linea-navy)}
  .cred__ico{grid-row:span 2;margin:0}
  .cred__v{margin-top:4px}
}
/* tira de tecnologías: franja a todo el ancho al pie de la banda; sin JS o con movimiento reducido queda estática y completa */
.tira{position:relative;z-index:1;margin-top:auto;padding:18px 0 20px;border-top:1px solid var(--linea-navy);background:rgba(3,20,33,.66);text-align:center}
.tira__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;padding-inline:16px}
.tira__t{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tec-claro)}
.tira__pausa{display:none;place-items:center;flex:none;width:28px;height:28px;padding:0;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:color .15s,border-color .15s}
.tira__pausa .ico{width:14px;height:14px;stroke-width:2.2}
.tira__pausa:hover{color:var(--ambar);border-color:var(--ambar)}
.tira__pausa:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.pausa__r{display:none}
@media (max-width:420px){.tira__cab{padding-inline:8px;gap:6px 8px}.tira__t{font-size:11.5px;letter-spacing:.07em}}
html.js .tira__pausa{display:inline-grid}
html.pausa-anim .pausa__p{display:none}
html.pausa-anim .pausa__r{display:grid}
@media (prefers-reduced-motion:reduce){html.js .tira__pausa{display:none}}
.tira__pista{margin-top:10px}
.tira__lista{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0 clamp(12px,3vw,40px);list-style:none}
.tira__lista[aria-hidden="true"]{display:none}
.tira__lista:focus{outline:none}
.tira__pista:has(:focus-visible){outline:2px solid var(--ambar);outline-offset:-3px}
.tira__it{display:flex;align-items:center;padding:6px clamp(10px,1.4vw,20px);font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.4;color:#fff;white-space:nowrap}
.tira__it::after{content:"";display:none;flex:none;width:6px;height:6px;margin-inline:clamp(16px,2vw,28px);border-radius:50%;background:var(--ambar)}
@media (prefers-reduced-motion:no-preference){
  html.js .tira__pista{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  html.js .tira__riel{display:flex;width:max-content;will-change:transform}
  html.js .tira__lista,html.js .tira__lista[aria-hidden="true"]{display:flex;flex:none;flex-wrap:nowrap;justify-content:flex-start;padding:0}
  html.js .tira__it{padding:6px 0}
  html.js .tira__it::after{display:block}
}
/* mapa de cobertura: texto a la izquierda y el mapa grande a su lado (debajo del texto en pantallas angostas) */
.cred__in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.cred__cuerpo{max-width:none}
.cred__mapa{min-width:0}
.cred__mapa svg{display:block;width:100%;height:auto;margin-inline:auto;max-width:560px}
@media (min-width:1001px){
  .cred__mapa svg{max-width:none;max-height:calc(100svh - var(--hb) - 250px)}
}
@media (min-width:1360px){
  .cred__in{grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:clamp(24px,3.2vw,60px)}
  .cred__mapa svg{max-height:calc(100svh - var(--hb) - 56px)}
}
@media (max-width:700px){.mapa-cobertura .ciudad .punto{r:5.6}.mapa-cobertura .ciudad .halo{r:12}.mapa-cobertura .ciudad .pulso{r:6.5}}
/* una sola columna (Cobertura): alineada a la izquierda, más grande, sin divisores */
.cred__cols--1{grid-template-columns:minmax(0,1fr);margin-top:26px}
.cred__cols--1 .cred__col{padding:0;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center}
.cred__cols--1 .cred__ico{grid-row:span 2;margin:0;width:clamp(72px,7vw,96px);height:clamp(72px,7vw,96px);border:1px solid var(--linea-navy);border-radius:50%}
.cred__cols--1 .cred__ico .ico{width:46%;height:46%}
.cred__cols--1 .cred__k{font-size:clamp(28px,3.6vw,52px);line-height:1.1}
.cred__cols--1 .cred__v{margin-top:8px;font-size:clamp(16px,1.7vw,24px)}
@media (max-width:700px){
  .cred__cols--1 .cred__col{padding:0;grid-template-columns:56px 1fr;column-gap:16px}
  .cred__cols--1 .cred__ico{width:56px;height:56px}
  .cred__cols--1 .cred__ico .ico{width:28px;height:28px}
  .cred__cols--1 .cred__k{font-size:24px}
}
@media (min-width:1360px){
  .cred__cols--1 .cred__col{display:block}
  .cred__cols--1 .cred__ico{margin:0 0 18px}
  .cred__cols--1 .cred__k{font-size:clamp(30px,3.2vw,48px)}
  .cred__cols--1 .cred__v{font-size:clamp(16px,1.5vw,21px)}
}

/* industrias (#sectores): foto a sangre con el encabezado encima y los 6 tiles montados sobre su borde inferior (mismo sistema de tiles y márgenes que Servicios) */
.sec--sectores{background:var(--fondo-svc);padding:0}
main>section.sec--sectores{justify-content:stretch;padding-block:0}
.sectores{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding-bottom:clamp(18px,4.5vh,56px)}
.sectores__zona{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:180px;padding-block:clamp(22px,6vh,64px) calc(var(--sob,64px) + clamp(14px,2.5vh,28px))}
.sectores__foto{position:absolute;z-index:0;top:0;bottom:calc(var(--sob,64px)*-1);left:50%;width:100vw;margin:0 0 0 -50vw;overflow:hidden;background:var(--b2)}
.sectores__foto .foto__img{display:block;width:100%;height:100%;object-fit:cover;object-position:15% 65%}
.sectores__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(6,38,61,.94) 0,rgba(6,38,61,.82) 34%,rgba(6,38,61,.28) 66%,rgba(6,38,61,.06) 100%),linear-gradient(0deg,rgba(6,38,61,.35),transparent 40%)}
.sectores__cab{position:relative;z-index:1;width:min(430px,46%);color:#fff}
.sectores__cab .h2{font-size:clamp(28px,3vw,42px);color:#fff}
.tiles{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;min-width:0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1/1;padding:14px 10px;text-align:center;background:var(--card);border:1px solid var(--borde-svc);border-radius:var(--r);box-shadow:var(--sombra-svc)}
:root[data-tema="oscuro"] .tile{background:#0B2237}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .tile{background:#0B2237}}
.tile__ico{display:grid;place-items:center;color:var(--ico-svc)}
.tile__ico .ico{width:clamp(34px,3.3vw,44px);height:clamp(34px,3.3vw,44px);stroke-width:1.5}
.tile__t{font-size:clamp(14px,1.15vw,16px);line-height:1.25;font-weight:700}
.sectores{--sob:calc(var(--tw,132px)*.5);--ext:calc(var(--tw,132px)*.25)} /* --ext: la foto baja un 25 % más del alto de la tarjeta (≈45 px a 1440) para que una porción mayor quede sobre ella */
@media (min-width:1001px){.sectores{--tw:calc((min(100vw,1240px) - 2*max(40px,min(72px,calc(72px - (100vw - 1240px)/2))) - 60px)/6)}}
@media (min-width:1001px){.sec--servicios>.wrap,.sec--sectores>.wrap{padding-inline:max(40px,min(72px,calc(72px - (100vw - 1240px)/2)))}}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{aspect-ratio:auto;min-height:clamp(110px,26vw,150px)}.sectores{--sob:70px;--ext:38px}}
@media (max-width:600px){.tiles{gap:10px}.tile{min-height:104px;gap:10px;padding:12px 4px}.tile__ico .ico{width:30px;height:30px}.tile__t{font-size:12.5px}
  .sectores{--sob:52px;--ext:32px}.sectores__zona{justify-content:flex-start;align-items:flex-end;min-height:200px}.sectores__cab{width:100%}
  .sectores__foto::after{background:linear-gradient(0deg,rgba(6,38,61,.94) 0,rgba(6,38,61,.78) 55%,rgba(6,38,61,.55) 100%)}}
@media (max-width:380px){.tiles{gap:8px}.tile__t{font-size:11.5px;letter-spacing:-.01em}}

/* metodología (#metodo, como el mockup GPT): banda navy con encabezado a la izquierda y 4 círculos con chevrons »; debajo, la franja blanca "Impacto real" */
main>section.metodo{padding:0;justify-content:stretch}
.metodo__banda{flex:1 1 auto;display:flex;align-items:center;background:linear-gradient(100deg,var(--b1),var(--b2) 60%,var(--b3));color:#fff;padding-block:clamp(18px,4vh,80px)}
.metodo__in{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vh,40px);align-items:center}
.metodo__cab .h2{font-size:clamp(28px,3vw,38px);max-width:22ch}
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(26px,3vw,44px);counter-reset:p}
.paso{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.paso:not(:last-child)::after{content:"";position:absolute;top:calc(var(--cp,128px)/2);right:calc(clamp(26px,3vw,44px)/-2 - 12px);width:24px;height:24px;transform:translateY(-50%);background:var(--tec-claro);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.paso__c{position:relative;display:grid;place-items:center;width:var(--cp,128px);height:var(--cp,128px);border:1.5px solid var(--tec);border-radius:50%;background:rgba(10,150,214,.1);color:#fff;box-shadow:0 0 22px rgba(10,150,214,.35),inset 0 0 18px rgba(10,150,214,.15)}
.paso__c .ico{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);stroke-width:1.5}
.paso__n{position:absolute;top:-2px;left:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ambar);color:var(--navy);font-size:15px;font-weight:700;line-height:1}
.paso__tx{display:flex;flex-direction:column;align-items:center}
.paso__t{margin-top:16px;font-size:clamp(16px,1.3vw,19px);line-height:1.3;font-weight:700}
.paso__d{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--sobre-navy)}
@media (min-width:1360px){.metodo__in{grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,3vw,44px)}.pasos{--cp:132px}.metodo__cab .h2{font-size:32px}}
@media (min-width:1001px){.metodo__in{padding-inline:max(40px,min(72px,calc(72px - (100vw - 1240px)/2)))}}
@media (max-width:1359px){.pasos{--cp:clamp(84px,min(11vw,15vh),128px)}}
@media (min-width:1000px) and (max-width:1100px){.pasos{--cp:clamp(84px,min(11vw,13vh),128px)}.impacto__c .imp{padding-inline:8px}.imp__l{font-size:13px}}
/* franja Impacto real: mismo blanco claro que Servicios (en oscuro, su tratamiento oscuro) */
.impacto{flex:0 0 auto;background:var(--fondo-svc);padding-block:clamp(16px,3.4vh,34px)}
.impacto__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vh,20px);align-items:center}
.impacto__t{font-size:clamp(20px,1.9vw,26px);line-height:1.25;font-weight:700;color:var(--tinta);max-width:18ch}
.impacto__c{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.imp{padding:4px 12px;text-align:center}
.imp+.imp{border-left:1px solid var(--borde)}
.imp__n{font-size:clamp(32px,3.4vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.01em;color:var(--tinta);font-variant-numeric:tabular-nums}
.imp__l{margin-top:4px;font-size:14px;line-height:1.35;color:var(--tx2)}
@media (min-width:1001px){.impacto__in{grid-template-columns:clamp(220px,20vw,300px) minmax(0,1fr);gap:clamp(24px,3vw,44px)}}
@media (min-width:1001px){.impacto__in{padding-inline:max(40px,min(72px,calc(72px - (100vw - 1240px)/2)))}}
@media (max-width:999px){
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .paso:not(:last-child)::after{display:none}
  .impacto__c{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .imp:nth-child(3){border-left:0}
  .impacto__t{max-width:none}
}
@media (max-width:600px){
  .metodo__banda{padding-block:32px}
  .pasos{grid-template-columns:1fr;gap:0;--cp:68px}
  .paso{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:18px;align-items:center;text-align:left;padding-bottom:22px}
  .paso:last-child{padding-bottom:0}
  .paso__tx{align-items:flex-start}
  .paso__t{margin-top:0}
  .paso__c .ico{width:28px;height:28px}
  .paso__n{width:24px;height:24px;font-size:12.5px;top:-4px;left:-4px}
  .paso:not(:last-child)::before{content:"";position:absolute;left:33px;top:68px;bottom:0;width:2px;background:var(--tec)}
  .impacto{padding-block:24px}
  .imp__n{font-size:30px}
  .imp__l{font-size:13px}
}



/* contacto (banda navy, como el mockup GPT): arco con nodo ámbar en diagonal entre el texto y el formulario; a la derecha, formulario en 2 columnas con etiquetas flotantes */
.contacto{padding-block:clamp(44px,7vw,92px);background:radial-gradient(700px 420px at 12% 100%,var(--glow),transparent 65%),linear-gradient(100deg,var(--b1),var(--b2) 55%,var(--b3))}
.contacto__in{--gap:clamp(76px,10.5vw,140px);--ah:calc(100svh - var(--hb));position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:28px var(--gap);align-items:center}
.contacto__txt .h2{font-size:clamp(34px,3.8vw,54px);line-height:1.1}
.contacto .lead{margin-top:16px;max-width:34ch;font-size:clamp(17px,1.4vw,20px);color:#E3ECF2}
.form{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-content:start}
.campo--ancho{grid-column:1/-1}
.campo{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea{width:100%;border:1.2px solid rgba(255,255,255,.45);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:15px;transition:border-color .15s,background .15s}
.campo input[type=text],.campo input[type=email],.campo input[type=tel]{height:50px;padding:16px 14px 0}
.campo textarea{padding:20px 14px 8px;resize:vertical;min-height:84px}
/* etiqueta flotante: es un <label for> real, colocada sobre el campo; sube al enfocar o cuando hay texto */
.campo>label:not(.consent){position:absolute;left:15px;top:14px;max-width:calc(100% - 30px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:22px;font-weight:400;color:rgba(255,255,255,.78);pointer-events:none;transition:top .15s,font-size .15s,line-height .15s,color .15s}
.campo input:focus+label,.campo input:not(:placeholder-shown)+label,.campo textarea:focus+label,.campo textarea:not(:placeholder-shown)+label{top:5px;font-size:11.5px;line-height:14px;color:var(--tec-claro);font-weight:600}
.campo input:hover,.campo textarea:hover{border-color:rgba(255,255,255,.7)}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--ambar);outline-offset:1px;border-color:#fff;background:rgba(255,255,255,.08)}
.campo input[aria-invalid=true],.campo textarea[aria-invalid=true]{border:2px solid var(--ambar)}
.campo__err{font-size:13px;line-height:1.4;color:#FFD36B;font-weight:600}
.campo__err::before{content:"× ";font-weight:700}
.campo__err[hidden]{display:none}
.consent{display:flex;gap:10px;align-items:flex-start;padding-block:7px;font-size:14px;line-height:1.5;font-weight:400;color:#fff}
.consent__a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.consent input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--ambar)}
.consent input[aria-invalid=true]{outline:2px solid var(--ambar);outline-offset:2px}
.turnstile{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.aviso-simple{margin:2px 0 -2px;padding:9px 12px;border:1px solid var(--linea-navy);border-radius:10px;background:rgba(255,255,255,.04);font-size:11.5px;line-height:1.45;color:var(--sobre-navy)}
.aviso-simple p{margin:0 0 .55em}
.aviso-simple p:last-child{margin-bottom:0}
.aviso-simple strong{color:#fff;font-weight:600}
.aviso-simple a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.nota{margin:0 0 -4px;font-size:12.5px;line-height:1.4;color:var(--sobre-navy)}
@media (max-width:600px){.consent{padding-block:12px}}
.form__pie{display:flex}
.form__pie .btn{width:100%}
.estado{padding:14px 16px;border-radius:12px;border:2px solid #fff;font-size:15px;line-height:1.5;color:var(--navy);background:#fff}
.estado[hidden]{display:none}
.estado--ok{background:#E1F2FA;border-color:var(--tec-claro)}
.estado--error{background:#FFF4D6;border-color:var(--ambar)}
.estado a{font-weight:700;color:var(--navy);text-decoration:underline}
/* arco grande con nodo ámbar entre el texto y el formulario (solo con las dos columnas) */
/* hijo de .contacto__in, detrás del texto y el formulario; alto = alto de la sección, centrado en el hueco entre columnas */
.deco--contacto{z-index:-1;top:calc(50% - var(--ah)/2);height:var(--ah);width:calc(var(--ah)*.4714);left:calc((100% - var(--gap))*.4 + var(--gap)/2 - var(--ah)*.2357);-webkit-mask-image:none;mask-image:none}
.d-glow{fill:none;stroke:#0A96D6;stroke-width:14;stroke-opacity:.18;stroke-linecap:round}
.d-arco--c{stroke:url(#arco-c);stroke-width:5;opacity:1}
.deco--contacto .d-aro{stroke-opacity:.5}
@media (max-width:999px){.contacto__in{grid-template-columns:minmax(0,1fr)}.deco--contacto{display:none}.contacto .lead{max-width:44ch}}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}.campo input[type=text],.campo input[type=email],.campo input[type=tel]{height:52px}}

/* pie */
.pie{background:var(--b1);color:var(--sobre-navy);border-top:1px solid rgba(255,255,255,.08)}
.pie__grid{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;padding-block:48px 32px}
.pie__marca{flex:1 1 280px;min-width:0}
.pie__marca img{width:190px;height:auto;margin:7px 0}
.pie__marca p{margin-top:16px;font-size:14px;line-height:1.6;max-width:26em}
.pie__col{flex:1 1 200px;min-width:0;font-size:14px}
.pie__h{margin-bottom:6px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar)}
.pie__col a,.pie__col span{display:block;padding:5px 0;line-height:1.5}
.pie__col a{color:#fff}
.pie__aviso{color:#fff;text-decoration:underline;text-underline-offset:3px;padding-block:6px}
.pie__huecos{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.pie__legal{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;justify-content:space-between;padding-block:16px 28px;border-top:1px solid var(--linea-navy);font-size:12.5px}
@media (max-width:620px){.pie__col a{display:flex;align-items:center;min-height:44px}}

/* ───────── Alto completo por sección ───────── */
:root{--hb:81px;--hs:36px}
@media (max-width:1100px){:root{--hs:0px}}
@media (max-width:620px){:root{--hb:75px}}
@media (min-width:621px){
  main>section{min-height:calc(100svh - var(--hb));display:flex;flex-direction:column;justify-content:center}
  main>section>.wrap{width:100%}
  main>section.hero{min-height:calc(100svh - var(--hb) - var(--hs))}
  main>section.cred{display:grid}
}
/* Navegación sección por sección. js/site.js añade html.snap solo en escritorio (≥1000×700, sin movimiento reducido) y marca
   .larga a las secciones que no caben en el alto disponible: esas solo se anclan por su inicio y se recorren libres, para que nada quede inalcanzable. */
html.snap{scroll-snap-type:y mandatory}
html.snap.saltando{scroll-snap-type:none}
html.snap main>section{scroll-snap-align:start;scroll-snap-stop:always}
html.snap main>section.hero{scroll-margin-top:var(--hs)}
html.snap main>section.larga{scroll-snap-stop:normal}  /* la que no cabe se ancla solo por su inicio y se recorre libre por dentro */
html.snap .pie{scroll-snap-align:end}

/* ───────── Puntos laterales (escritorio) y flecha del hero ───────── */
.puntos{display:none}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
@media (min-width:1001px){
  html.js .puntos{display:flex;position:fixed;right:8px;top:50%;z-index:40;flex-direction:column;gap:4px;transform:translateY(-50%)}
}
.irsec{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.irsec::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(6,38,61,.9),0 0 0 3px rgba(255,255,255,.6);transition:transform .2s,background .2s,height .2s,border-radius .2s}
.irsec[aria-current="true"]::before{background:var(--ambar);height:24px;border-radius:6px}
.irsec:hover::before{transform:scale(1.3)}
.irsec:focus-visible{outline:2px solid #06263D;outline-offset:0;box-shadow:0 0 0 4px var(--ambar)}
.irsec__e{position:absolute;right:calc(100% + 4px);top:50%;padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--pill);background:#06263D;color:#fff;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(6px,-50%);transition:opacity .18s,transform .18s}
.irsec:hover .irsec__e,.irsec:focus-visible .irsec__e{opacity:1;transform:translate(0,-50%)}
.baja{position:absolute;z-index:2;left:50%;bottom:calc(var(--tira-h) + var(--olah) + 10px);display:grid;place-items:center;width:44px;height:44px;margin-left:-22px;border-radius:50%;color:#fff;transition:opacity .3s,visibility 0s}
.baja .ico{width:28px;height:28px;stroke-width:2}
.baja:hover{color:var(--ambar);text-decoration:none}
.baja:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
html.js.abajo .baja{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
@keyframes baja{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:no-preference){.baja .ico{animation:baja 1.9s ease-in-out 3}html.pausa-anim .baja .ico{animation:none}}
@media (max-width:620px){.baja{position:relative;left:auto;bottom:auto;margin:0 auto 4px}}

/* ───────── Arcos de fondo para secciones claras (dentro de la caja, con margen; nunca cortados por el borde) ───────── */
.deco--claro{width:min(400px,30%);opacity:.5;--op:.5}
.deco--claro .d-arco{stroke:var(--tec);opacity:.6}
.deco--claro .d-arco--fino{stroke:var(--tec);opacity:.35}
.deco--a{right:28px;top:28px}
.deco--s{right:28px;top:20px;width:min(280px,20%)}
@media (max-width:620px){.deco--claro{display:none}}

/* ───────── Movimiento: solo transform y opacity (y el trazo de los arcos) ─────────
   Sin JS o con prefers-reduced-motion todo es visible desde el principio.
   site.js: .in en la sección mientras está en pantalla (se quita al salir y se repite);
   data-dir="down|up" en <html> según el sentido del scroll; --t (-1…1) en cada sección = progreso para el parallax. */
html{--dy:24px}
html[data-dir="up"]{--dy:-24px}
@media (prefers-reduced-motion:no-preference){
  .tarjeta,.tile{transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .2s}
  .tarjeta:hover,.tile:hover{transform:translateY(-5px)}
  .tarjeta__ico .ico,.tile__ico .ico,.circ .ico{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .tarjeta:hover .tarjeta__ico .ico,.tarjeta:focus-within .tarjeta__ico .ico{transform:translateY(-3px) scale(1.1)}
  .tile:hover .tile__ico .ico{transform:translateY(-2px) scale(1.12)}
  .tarjeta:hover .circ .ico,.tarjeta:focus-within .circ .ico{transform:translateX(4px)}

  @keyframes rv{from{opacity:0;transform:translateY(var(--dy))}}
  @keyframes pop{from{opacity:0;transform:scale(.3)}}
  @keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
  @keyframes aro{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.22);opacity:.12}}
  @keyframes flota{from{transform:translateY(0)}to{transform:translateY(-9px)}}
  @keyframes logo{from{opacity:0;transform:translateX(-10px)}}

  /* logo del header: entrada al cargar, sin deformarlo ni agregarle efectos */
  html.js .logo img{animation:logo .8s cubic-bezier(.22,.61,.36,1) .1s backwards}

  /* entrada escalonada y repetible. Bajando, de primero a último y desde abajo; subiendo, de último a primero y desde arriba */
  html.js .rv{opacity:0}
  html.js .in .rv{opacity:1;animation:rv .4s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:calc(var(--i,0)*55ms)}
  html[data-dir="up"].js .in .rv{animation-delay:calc((var(--mx,0) - var(--i,0))*55ms)}
  html.js .hero.in .rv{animation-delay:calc(var(--i,0)*70ms + 40ms)}
  html[data-dir="up"].js .hero.in .rv{animation-delay:calc((var(--mx,0) - var(--i,0))*70ms + 40ms)}

  /* arcos que se dibujan al entrar y se "desdibujan" al salir */
  html.js .a-linea:not(.a-linea--punto),html.js .d-arco{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.45,.05,.25,1)}
  html.js .a-linea--fina,html.js .d-arco--fino{transition-duration:2.2s}
  html.js .in .a-linea:not(.a-linea--punto),html.js .in .d-arco{stroke-dashoffset:0}
  html.js .a-linea--punto,html.js .a-conex,html.js .a-mod{opacity:0;transition:opacity 1.2s ease .9s}
  html.js .in .a-linea--punto,html.js .in .a-conex,html.js .in .a-mod{opacity:1}

  /* nodos: pop y luego pulso muy suave */
  html.js .a-nodo,html.js .d-nodo,html.js .a-aro,html.js .d-aro{opacity:0;transform-box:fill-box;transform-origin:center}
  html.js .in .a-nodo,html.js .in .d-nodo{opacity:1;animation:pop .6s cubic-bezier(.2,.8,.2,1) 1.1s backwards,pulso 4s ease-in-out 1.9s infinite}
  html.js .in .a-aro,html.js .in .d-aro{opacity:.45;animation:pop .6s cubic-bezier(.2,.8,.2,1) 1.1s backwards,aro 4s ease-in-out 1.9s infinite}
  html.js .in .a-nodo--claro,html.js .in .a-nodo--tec,html.js .in .d-nodo--p{animation:pop .6s cubic-bezier(.2,.8,.2,1) 1.3s backwards}

  /* módulos del hero flotando despacio */
  .a-flota{animation:flota var(--fd,10s) ease-in-out var(--fdl,0s) infinite alternate}

  /* parallax ligero según el progreso de la sección (--t de -1 a 1) */
        .foto__img{will-change:transform;transform:translate3d(0,calc(var(--t,0)*-24px),0) scale(1.06)}

  /* Transiciones atadas al scroll (scrub). js/site.js pone --q (0→1) en cada sección = avance hacia la siguiente, y --ent = avance de entrada
     (la --q de la anterior). Todo se deriva de esas dos variables, así al subir se revierte solo y en orden inverso. */
  .sc{--lp:clamp(0,(var(--q,0) - var(--k,0)*.7)/.5,1);transform-box:fill-box;transform-origin:center;
    transform:translate(calc(var(--tx,0)*1px*var(--lp)),calc(var(--ty,0)*1px*var(--lp))) rotate(calc(var(--rot,0)*1deg*var(--lp)));opacity:calc(1 - var(--lp))}
  .sc--o{transform-box:view-box;transform-origin:420px 380px;transform:rotate(calc(var(--rot,0)*1deg*var(--lp)))}
  .sc--c{transform:none}
  .sc--v{opacity:calc(1 - clamp(0,(var(--lp) - .72)/.28,1))}
  .deco{--d:calc(var(--q,0) - (1 - var(--ent,1)));transform:translate3d(0,calc(var(--d)*90px),0) rotate(calc(var(--d)*70deg));opacity:calc(var(--op,1)*var(--ent,1)*(1 - var(--q,0)*.92))}
  /* el arte del hero acompaña al scroll casi entero (sale al 12 % de su velocidad) y puede pasar sobre Servicios: así el desarme se ve durante todo el salto */
  .hero{overflow-x:clip;overflow-y:visible;z-index:2}
  .hero__arte{transform:translate3d(0,calc(var(--q,0)*var(--span,780px)*.88),0)}
  .mov .sc,.mov .deco,.mov .hero__arte{will-change:transform,opacity}

  /* mapa de cobertura (inline): fade del mapa (.rv), estados que pasan de azul neutro a ámbar escalonados, ciudades con pop y latido.
     Se anima con .in de la sección (direccional y reversible); en las ciudades se animan los círculos, nunca el transform de g.ciudad. */
  @keyframes pulso-ciudad{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}
  html.js .mapa-cobertura .mx .estado.resalta{fill:var(--map-mx);fill-opacity:1;stroke:#7CCBF0;stroke-opacity:.45;stroke-width:.6px}
  html.js .mapa-cobertura .us .estado.resalta{fill:var(--map-us);fill-opacity:1;stroke:#7CCBF0;stroke-opacity:.45;stroke-width:.6px}
  html.js .mapa-cobertura .estado.resalta{transition:fill .9s ease,fill-opacity .9s ease,stroke .7s ease,stroke-opacity .7s ease,stroke-width .7s ease}
  html.js .mapa-cobertura #jalisco{transition-delay:0s}
  html.js .mapa-cobertura #coahuila{transition-delay:.15s}
  html.js .mapa-cobertura #california{transition-delay:.3s}
  html.js .cred.in .mapa-cobertura .estado.resalta{fill:#FFB400;fill-opacity:1;stroke:#FFD36B;stroke-opacity:1;stroke-width:.8px}
  html.js .cred.in .mapa-cobertura #california{transition-delay:.5s}
  html.js .cred.in .mapa-cobertura #coahuila{transition-delay:.85s}
  html.js .cred.in .mapa-cobertura #jalisco{transition-delay:1.2s}
  html.js .mapa-cobertura .ciudad circle{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s ease}
  html.js .mapa-cobertura #lax{--cd:1.4s}
  html.js .mapa-cobertura #trc{--cd:1.7s}
  html.js .mapa-cobertura #gdl{--cd:2s}
  html.js .cred.in .mapa-cobertura .ciudad circle{opacity:1}
  html.js .cred.in .mapa-cobertura .ciudad .punto,html.js .cred.in .mapa-cobertura .ciudad .halo{animation:pop .6s cubic-bezier(.2,.8,.2,1) var(--cd) backwards}
  html.js .cred.in .mapa-cobertura .ciudad .pulso{animation:pop .6s cubic-bezier(.2,.8,.2,1) var(--cd) backwards,pulso-ciudad 2.4s ease-out calc(var(--cd) + .6s) infinite}

  /* botón de pausa de la tira (html.pausa-anim): detiene también los bucles del hero (flota, pulso, aro) y el latido de las ciudades */
  html.js.pausa-anim .a-flota{animation:none}
  html.js.pausa-anim .in .a-nodo,html.js.pausa-anim .in .d-nodo,html.js.pausa-anim .in .a-aro,html.js.pausa-anim .in .d-aro{animation:pop .6s cubic-bezier(.2,.8,.2,1) 1.1s backwards}
  html.js.pausa-anim .cred.in .mapa-cobertura .ciudad .pulso{animation:pop .6s cubic-bezier(.2,.8,.2,1) var(--cd) backwards}

  /* metodología: los pasos se encienden según el avance del scroll (.on) y se apagan en orden inverso al subir */
  html.js .paso__c{opacity:.25;transform:scale(.9);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
  html.js .paso__n{opacity:0;transform:scale(0);transition:opacity .4s ease .1s,transform .45s cubic-bezier(.2,.8,.2,1) .1s}
  html.js .paso:not(:last-child)::after,html.js .paso:not(:last-child)::before{opacity:0;transition:opacity .4s ease .2s}
  html.js .paso__t,html.js .paso__d{opacity:.3;transition:opacity .5s ease .15s}
  html.js .paso.on .paso__c{opacity:1;transform:none}
  html.js .paso.on .paso__n{opacity:1;transform:none}
  html.js .paso.on:not(:last-child)::after,html.js .paso.on:not(:last-child)::before{opacity:1}
  html.js .paso.on .paso__t,html.js .paso.on .paso__d{opacity:1}
}

/* Escritorio: el aire vertical es proporcional al alto de la ventana, para que cada sección quepa en el alto disponible
   (snap sin secciones .larga por pocos píxeles). En ventanas bajas se compacta además el formulario, el mapa y la foto. */
@media (min-width:1000px){
  .sec,.sec--compacta,.contacto{padding-block:clamp(18px,4vh,92px)}
  .cred__in{padding-block:clamp(14px,3vh,64px)}
  .cred__mapa svg{max-height:calc(100svh - var(--hb) - 210px)}
}
@media (min-width:1000px) and (max-height:960px){
  .form{gap:10px 14px}
  .campo input[type=text],.campo input[type=email],.campo input[type=tel]{height:46px;padding-top:15px}
  .campo textarea{min-height:64px}
  .campo>label:not(.consent){top:12px}
  .contacto .lead{margin-top:10px}
}
@media (min-width:1000px) and (max-height:760px){.form{gap:8px 14px}.campo textarea{min-height:48px}}
@media (min-width:1360px){.cred__mapa svg{max-height:calc(100svh - var(--hb) - 48px)}}
@media (min-width:700px) and (max-width:1000px){.cred__foto{min-height:clamp(96px,16vh,240px)}.cred__mapa svg{max-height:calc(100svh - var(--hb) - 330px)}}
/* Hero en escritorio: el aire y el tamaño del título siguen el alto de la ventana, para que texto + flecha + tira quepan sin chocar */
@media (min-width:1000px){
  .hero{padding-top:clamp(18px,4vh,50px)}
  .hero__in{padding-bottom:clamp(18px,4vh,50px)}
  .hero .h1{font-size:clamp(30px,min(3vw,5.2vh),44px)}
  .eyebrow{margin-bottom:clamp(8px,1.6vh,14px)}
  .hero__p{margin-top:clamp(10px,1.8vh,16px)}
  .hero .botones{margin-top:clamp(14px,2.8vh,24px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ───────── Órbitas lineales alrededor del mapa (Cobertura) ─────────
   3 elipses finas e inclinadas; por cada una corre un tramo brillante con la cola que se desvanece y una punta ámbar mínima.
   Mitad trasera (z-index 0, más tenue) por detrás del mapa y mitad delantera (z-index 2) por delante. Solo se anima stroke-dashoffset; el tamaño lo fija js/site.js (--ow, --sw). */
.cred__mapa{position:relative}
.cred__mapa>svg.mapa-cobertura{position:relative;z-index:1}
.cred__mapa .mapa-cobertura .mx .estado:not(.resalta){fill:var(--map-mx);fill-opacity:1}
.cred__mapa .mapa-cobertura .us .estado:not(.resalta){fill:var(--map-us);fill-opacity:1}
.cred__mapa .orbitas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--ow,min(128%,720px));height:auto;max-width:none;max-height:none;margin:0;overflow:visible;pointer-events:none;opacity:calc(var(--k,1)*var(--vis,1))}
.cred__mapa .orbitas--tras{z-index:0;--k:1}
.cred__mapa .orbitas--del{z-index:2;--k:1}
.orbitas .o{fill:none;stroke-linecap:round}
.orbitas .lin,.orbitas .ko,.orbitas .run{fill:none}
/* profundidad: trasera tenue, fina y sin brillo; delantera nítida, más gruesa, con glow y un trazo navy debajo (knock-out) */
.orbitas--tras .lin{stroke:#5CC8F5;stroke-opacity:.22;stroke-width:calc(var(--sw,1.7)*.62)}
.orbitas--del .lin{stroke:#7CD3F7;stroke-opacity:.95;stroke-width:calc(var(--sw,1.7)*1.35);filter:drop-shadow(0 0 2.5px rgba(40,170,235,.75))}
.orbitas--del .ko{stroke:#041A2B;stroke-opacity:.6;stroke-width:calc(var(--sw,1.7)*3.1)}
.orbitas .run{display:none;stroke:#5CC8F5}
.orbitas--tras .run{stroke-opacity:.3;stroke-width:calc(var(--sw,1.7)*.8)}
.orbitas--tras .run--60{stroke-opacity:.42}
.orbitas--del .run--220{stroke-opacity:.35;stroke-width:calc(var(--sw,1.7)*1.8)}
.orbitas--del .run--130{stroke-opacity:.6;stroke-width:calc(var(--sw,1.7)*1.9)}
.orbitas--del .run--70{stroke:#BFE9FC;stroke-opacity:1;stroke-width:calc(var(--sw,1.7)*2.1)}
.orbitas--del .run--9{stroke:#FFB400;stroke-opacity:1;stroke-width:calc(var(--sw,1.7)*3)}
html[data-entrada="scrub"] .cred__mapa .orbitas{--vis:calc(var(--ent,1)*(1 - var(--q,0)*.92))}
@media (max-width:700px){.orbitas .o2,.orbitas .o3{display:none}}
@media (prefers-reduced-motion:no-preference){
  html.js .orbitas .run{display:inline}
  html.js .cred.in .orbitas .run{animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--T,16s);animation-delay:var(--D,0s);animation-direction:var(--dir,normal)}
  .orbitas .o1{--T:15s;--D:0s}
  .orbitas .o2{--T:21s;--D:-7s;--dir:reverse}
  .orbitas .o3{--T:27s;--D:-14s}
  html.js .cred.in .orbitas .run--220{animation-name:corre-220}html.js .cred.in .orbitas .run--130{animation-name:corre-130}html.js .cred.in .orbitas .run--70{animation-name:corre-70}html.js .cred.in .orbitas .run--60{animation-name:corre-60}html.js .cred.in .orbitas .run--9{animation-name:corre-9}
  html.js.pausa-anim .cred.in .orbitas .run{animation-play-state:paused}
}
/* misma cabeza para las 4 capas: el desplazamiento arranca en el largo del tramo y recorre 1000 (el perímetro normalizado con pathLength) */
@keyframes corre-220{from{stroke-dashoffset:220}to{stroke-dashoffset:-780}}
@keyframes corre-130{from{stroke-dashoffset:130}to{stroke-dashoffset:-870}}
@keyframes corre-70{from{stroke-dashoffset:70}to{stroke-dashoffset:-930}}
@keyframes corre-60{from{stroke-dashoffset:60}to{stroke-dashoffset:-940}}
@keyframes corre-9{from{stroke-dashoffset:9}to{stroke-dashoffset:-991}}

/* ───────── Etiqueta de ciudad en el mapa (hover, foco con teclado o toque) ─────────
   Una sola píldora (.etq) que js/site.js coloca junto al punto y gira hacia donde haya espacio. Va por encima de las órbitas (z-index 3). */
.mapa-cobertura .ciudad{cursor:pointer;outline:none}
.mapa-cobertura .ciudad .toque{fill:transparent;stroke:none;pointer-events:all}
.mapa-cobertura .ciudad:focus-visible .halo{fill-opacity:.5;stroke:#FFB400;stroke-width:1.5;stroke-opacity:1;vector-effect:non-scaling-stroke}
.mapa-cobertura .ciudad .punto{transform-box:fill-box;transform-origin:center}
.mapa-cobertura .ciudad:hover .punto,.mapa-cobertura .ciudad:focus-visible .punto,.mapa-cobertura .ciudad.sel .punto{transform:scale(1.4)}
.mapa-cobertura .ciudad:hover .pulso,.mapa-cobertura .ciudad:focus-visible .pulso,.mapa-cobertura .ciudad.sel .pulso{stroke-opacity:1;stroke-width:2}
@media (max-width:700px){.mapa-cobertura .ciudad .toque{r:56}}
.cred__mapa .etq{position:absolute;left:0;top:0;z-index:3;display:block;padding:6px 11px;border:1px solid rgba(10,150,214,.4);border-radius:var(--pill);background:#06263D;box-shadow:0 6px 18px rgba(0,0,0,.35);color:#fff;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
.cred__mapa .etq.on{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}
.etq::after{content:"";position:absolute;width:9px;height:9px;background:#06263D;border:1px solid rgba(10,150,214,.4);transform:rotate(45deg)}
.etq[data-lado="top"]::after{bottom:-5px;left:var(--ax,50%);margin-left:-4.5px;border-top:0;border-left:0}
.etq[data-lado="bottom"]::after{top:-5px;left:var(--ax,50%);margin-left:-4.5px;border-bottom:0;border-right:0}
.etq[data-lado="right"]::after{left:-5px;top:50%;margin-top:-4.5px;border-top:0;border-right:0}
.etq[data-lado="left"]::after{right:-5px;top:50%;margin-top:-4.5px;border-bottom:0;border-left:0}
@media (prefers-reduced-motion:no-preference){
  .cred__mapa .etq{transform:translate(var(--ex,0),var(--ey,0));transition:opacity .16s ease,transform .2s ease,visibility 0s linear .2s}
  .cred__mapa .etq.on{transform:translate(0,0);transition:opacity .16s ease,transform .2s ease,visibility 0s}
  .mapa-cobertura .ciudad .punto{transition:transform .2s ease}
  html.js .cred.in .mapa-cobertura .ciudad:hover .pulso,html.js .cred.in .mapa-cobertura .ciudad:focus-visible .pulso,html.js .cred.in .mapa-cobertura .ciudad.sel .pulso{animation-duration:.6s,1.2s}
  html.js.pausa-anim .cred.in .mapa-cobertura .ciudad:hover .pulso,html.js.pausa-anim .cred.in .mapa-cobertura .ciudad:focus-visible .pulso,html.js.pausa-anim .cred.in .mapa-cobertura .ciudad.sel .pulso{animation-duration:.6s}
}

/* ───────── Ola de transición (opción B) ─────────
   En cada junta entre una banda navy y una sección clara el borde es una curva amplia: la sección clara "muerde" la navy. Es estructura: un SVG dentro de la caja de una de las dos secciones
   (sin cambiar alturas: el snap y .larga no se alteran), relleno del claro plano (var(--fondo-svc)), con una cinta azul→ámbar. Solo la cinta tiene vida.
   --olah = alto de la zona de la curva; --sy = olah/200 (escala vertical del viewBox) para que los trazos midan lo mismo en pantalla (calc(Npx / var(--sy))). Valores discretos por tramo. */
:root{--olah:80px;--sy:.4}
@media (min-width:1001px) and (max-height:800px){:root{--olah:64px;--sy:.32}}
@media (min-width:1001px) and (max-height:700px){:root{--olah:52px;--sy:.26}}
@media (max-width:1000px){:root{--olah:56px;--sy:.28}}
@media (max-width:600px){:root{--olah:40px;--sy:.2}}
.ola{position:absolute;left:0;right:0;z-index:3;height:var(--olah);pointer-events:none}
.ola--pie{bottom:0}
.ola--cab{top:0}
.ola svg{display:block;width:100%;height:100%;overflow:visible}
/* el destello: una barra de luz que se desplaza con transform (capa compuesta, no repinta nada) y solo se ve donde la máscara dibuja la cinta */
.ola__vivo{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:var(--mk);mask-image:var(--mk);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;display:none}
.ola__vivo i{position:absolute;left:0;top:-10%;bottom:-10%;width:18%;background:linear-gradient(90deg,rgba(242,251,255,0),rgba(242,251,255,.95) 55%,rgba(242,251,255,0));will-change:transform;transform:translate3d(-100%,0,0)}
.ola__relleno{fill:var(--fondo-svc)}
.ola path{fill:none}
.ola .ola__relleno{fill:var(--fondo-svc)}
.ola__banda{stroke:#0A96D6;stroke-opacity:.14;stroke-width:calc(46 / var(--sy))}
.ola__halo{stroke-width:calc(12 / var(--sy));opacity:.5}
.ola__filo2{stroke:#5CC8F5;stroke-opacity:.3;stroke-width:calc(1.4 / var(--sy))}
.ola__cinta{stroke-width:calc(4.5 / var(--sy));stroke-linecap:round}
.ola__brillo{stroke:#fff;stroke-opacity:.45;stroke-width:calc(1.2 / var(--sy))}
/* la foto de Industrias sube y muerde la banda de Cobertura: la cinta corre por su borde superior curvo, por encima del borde de la sección */
.ola--foto{top:calc(var(--olah) * -1);bottom:auto}
.ola--foto .ola__relleno{display:none}
/* nodo: círculo HTML (no se deforma con el estiramiento del SVG) */
.ola__nodo{position:absolute;width:var(--nd,18px);height:var(--nd,18px);margin:calc(var(--nd,18px) / -2) 0 0 calc(var(--nd,18px) / -2);border-radius:50%;background:radial-gradient(circle at 36% 32%,#FFE38F,#FFC522 38%,#FFB400 72%,#E89C00);box-shadow:0 0 14px 3px rgba(255,180,0,.45)}
.ola__nodo--g{--nd:26px}.ola__nodo--m{--nd:18px}.ola__nodo--p{--nd:12px}
.ola__nodo::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.35),rgba(255,180,0,0) 70%)}
@media (max-width:600px){.ola__nodo--g{--nd:18px}.ola__nodo--m{--nd:14px}.ola__nodo--p{--nd:10px}}
@media (prefers-reduced-motion:no-preference){
  html.js .in .ola__vivo{display:block}
  html.js .in .ola__vivo i{animation:ola-corre 9s linear infinite;animation-delay:var(--dl,0s)}
  html.js .in .ola__nodo::after{animation:ola-latido 3.6s ease-in-out infinite alternate}
  html.js.pausa-anim .ola__vivo i,html.js.pausa-anim .ola__nodo::after,html.js.pausa-anim .lun__pulso{animation-play-state:paused}
}
@keyframes ola-corre{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(560%,0,0)}}
@keyframes ola-latido{from{transform:scale(.85);opacity:.7}to{transform:scale(1.15);opacity:1}}

/* media luna del hero: nace de la cinta del pie del hero; --lw = ancho. Se coloca por su base sobre la cinta (x ≈ 64 %, y ≈ 26 % de la zona sobre su borde inferior). */
.hero__luna{--lw:clamp(260px,26vw,400px);position:absolute;z-index:0;width:var(--lw);height:auto;left:calc(64% - 37 * var(--lw) / 380);bottom:calc(var(--olah) * .265 - 8px - 27 * var(--lw) / 380);pointer-events:none;overflow:visible}
.ola--hero{z-index:2}
@media (max-width:960px){.hero__luna{opacity:.45}}
@media (max-width:620px){.hero__luna{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero__luna{--lp:clamp(0,(var(--q,0) - .1)/.5,1);transform-origin:12% 98%;transform:translate3d(0,calc(var(--q,0) * var(--span,780px) * .88),0) rotate(calc(var(--lp) * 34deg));opacity:calc(1 - var(--lp))}
  .mov .hero__luna{will-change:transform,opacity}
  html.js .in .lun__pulso{animation:ola-latido 3.6s ease-in-out infinite alternate}
}
/* pulso del nodo de la media luna: círculo HTML encima del nodo (capa propia, no repinta el SVG con desenfoque) */
.lun__pulso{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.32),rgba(255,180,0,0) 68%);pointer-events:none}
.lun__pulso--c{width:68px;height:68px;margin:-34px 0 0 -34px}
.hero__luna>svg,.deco--contacto>svg{display:block;width:100%;height:100%;overflow:visible}

/* compensación de la mordida: el contenido no queda bajo la curva (las cajas no cambian) */
.sec--sectores{overflow-x:clip;overflow-y:visible}
.sectores__zona{position:relative}
.sectores__foto{top:calc(var(--olah) * -1);bottom:calc((var(--sob,64px) + var(--ext,0px)) * -1);-webkit-mask-image:var(--mordida),linear-gradient(#000 0 0);mask-image:var(--mordida),linear-gradient(#000 0 0);-webkit-mask-size:100% var(--olah),100% calc(100% - var(--olah) + 1px);mask-size:100% var(--olah),100% calc(100% - var(--olah) + 1px);-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.metodo__banda{position:relative;padding-block:calc(clamp(8px,2vh,40px) + var(--olah))}
@media (max-width:600px){.metodo__banda{padding-block:calc(32px + var(--olah))}}
.contacto{padding-top:calc(clamp(44px,7vw,92px) + var(--olah))}
@media (min-width:1000px){.contacto{padding-top:calc(clamp(18px,4vh,92px) + var(--olah))}}
@media (min-width:1000px){.cred__in{padding-block:clamp(14px,3vh,64px) calc(clamp(14px,3vh,64px) + var(--olah))}}
@media (min-width:1360px){.cred__in{padding-top:calc(clamp(14px,3vh,64px) + var(--olah))}}
@media (max-width:999px){.cred__in{padding-bottom:calc(clamp(40px,5vw,64px) + var(--olah))}}
@media (min-width:1360px){.cred__mapa svg{max-height:calc(100svh - var(--hb) - 48px - var(--olah) * 2)}}
@media (min-width:1001px) and (max-width:1359px){.cred__mapa svg{max-height:calc(100svh - var(--hb) - 210px - var(--olah))}}
@media (min-width:700px) and (max-width:1000px){.cred__mapa svg{max-height:calc(100svh - var(--hb) - 290px - var(--olah))}}
.ola-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ───────── Altos y aterrizaje (revisión UX v5) ─────────
   Con snap, el ancla de cada sección navy es su tope + el alto de su ola de cabecera (js/site.js: olaCab), así que en reposo no asoma el color vecino:
   la curva solo se ve durante el salto. Para que el contenido visible no pierda alto, la caja crece lo que la ola ocupa (+--olah en Método y
   Contacto; +2·--olah en Cobertura: cabecera y mordida de la foto de Industrias). El snap nativo se alinea con el mismo desplazamiento. */
@media (min-width:621px){
  html.snap main>section.cred{min-height:calc(100svh - var(--hb) + var(--olah) * 2);scroll-margin-top:calc(var(--olah) * -1)}
  html.snap main>section.metodo,html.snap main>section.contacto{min-height:calc(100svh - var(--hb) + var(--olah));scroll-margin-top:calc(var(--olah) * -1)}
}
/* Cobertura: el relleno superior ya incluía --olah a ≥1360; de 1000 a 1359 se suma también, para que el título no caiga en la zona de la curva */
@media (min-width:1000px) and (max-width:1359px){.cred__in{padding-top:calc(clamp(14px,3vh,64px) + var(--olah))}}
/* Mapa: descuenta lo que sobresalen las elipses de la órbita (~84 px arriba y abajo del mapa) y deja ≥24 px hasta la cinta */
@media (min-width:1001px) and (max-width:1359px){.cred__mapa svg{max-height:calc(100svh - var(--hb) - 270px - var(--olah))}}
/* Impacto con aire propio: al menos 40 px bajo las cifras */
.impacto{padding-block:clamp(24px,4.5vh,52px) clamp(40px,5.2vh,56px)}
@media (max-width:600px){.impacto{padding-block:24px 28px}}
/* Servicios: tarjetas y separaciones crecen con el alto de la ventana (ocupación ~55–65 % en escritorio) */
@media (min-width:1001px){
  .sec--servicios .svc{gap:clamp(24px,5vh,56px)}
  .tarjetas{gap:clamp(14px,2.4vh,28px)}
  .tarjeta{min-height:clamp(84px,18.5vh,220px);padding-block:clamp(18px,2.6vh,30px)}
}

/* Turnstile: se reserva el alto del widget (65 px) para que no haya salto de layout al cargarlo; antes de cargar, un recuadro tenue del mismo tamaño */
.turnstile{gap:4px}
.turnstile__w{width:300px;max-width:100%;min-height:65px}
.turnstile__w:empty{border:0;background:none}   /* el widget solo se pide al marcar el aviso: hasta entonces el hueco queda reservado (sin salto de altura) pero sin marco vacío */
.turnstile__w iframe{display:block;max-width:100%}
.turnstile .campo__err{margin:0}


/* Cobertura · foto en pantallas chicas: proporción fija arriba (≤820) y columna lateral (821–1000), sin tiras (revisión UX v5-revision-cobertura-foto-movil) */
@media (max-width:820px){
  .cred__foto{width:100%;min-height:0;aspect-ratio:16/9;max-height:min(360px,52svh)}
  .cred__foto .foto__img{object-position:38% 8%}
  .cred__foto::after{background:linear-gradient(180deg,rgba(6,38,61,.12),rgba(6,38,61,.12) 55%,rgba(6,38,61,.72))}
  :root[data-tema="oscuro"] .cred__foto::after{background:linear-gradient(180deg,rgba(4,11,20,.3),rgba(4,11,20,.3) 55%,rgba(4,11,20,.85))}
}
@media (max-width:820px) and (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .cred__foto::after{background:linear-gradient(180deg,rgba(4,11,20,.3),rgba(4,11,20,.3) 55%,rgba(4,11,20,.85))}
}
@media (min-width:700px) and (max-width:820px){.cred__mapa svg{max-height:max(260px,calc(100svh - var(--hb) - 290px - var(--olah)))}}
@media (min-width:821px) and (max-width:1000px){
  .cred{grid-template-columns:minmax(240px,30%) minmax(0,1fr)}
  .cred__foto{min-height:0;border-bottom:0;border-right:1px solid var(--linea-navy)}
  .cred__mapa svg{max-height:max(260px,calc(100svh - var(--hb) - 270px - var(--olah)))}
}

/* Formulario inhabilitado (despliegue provisional: el dist le pone `inert`): claramente apagado, sin Turnstile, y el aviso del bloque de texto como llamada */
.form[inert]{cursor:not-allowed}   /* apagado: se atenúan los campos, pero el aviso simplificado se queda legible y seleccionable */
.form[inert]>:not(.aviso-simple){opacity:.4;filter:grayscale(.85);user-select:none}
.form[inert] .turnstile{display:none}
.form[inert] .btn{box-shadow:none}
.contacto__txt .lead[role="note"]{margin-top:22px;padding:4px 0 4px 16px;border-left:3px solid var(--ambar);font-size:clamp(16px,1.35vw,19px);line-height:1.5;max-width:30em}
.contacto__txt .lead[role="note"] a{color:#fff;text-decoration:underline;text-underline-offset:3px}