:root {
  --navy:#061a2f;
  --navy-2:#0b2947;
  --ink:#102238;
  --muted:#68788a;
  --line:#dfe7ef;
  --soft:#f3f7fa;
  --blue:#1874dd;
  --ice:#dbeeff;
  --white:#ffffff;
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 42px));margin:auto}

.nav{
  position:fixed;inset:0 0 auto 0;height:78px;z-index:100;
  display:flex;align-items:center;transition:.35s ease;
}
.nav.scrolled{
  background:rgba(4,19,35,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.nav-inner{
  width:min(1180px,calc(100% - 42px));margin:auto;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;color:white}
.brand-mark{font-weight:850;font-size:34px;letter-spacing:-2px}
.brand-copy{font-size:10px;line-height:1.05;letter-spacing:1.5px;font-weight:750}
.nav-links{display:flex;align-items:center;gap:28px;color:#fff;font-size:14px}
.nav-links a{opacity:.78;transition:.2s}
.nav-links a:hover{opacity:1;transform:translateY(-1px)}
.nav-pill{
  padding:12px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06)
}

.hero{
  min-height:100vh;position:relative;color:white;display:flex;align-items:flex-end;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,14,27,.92) 0%,rgba(2,14,27,.52) 43%,rgba(2,14,27,.06) 74%),
    linear-gradient(0deg,rgba(2,14,27,.80),transparent 48%),
    url('../images/hero.jpg') center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:-4%;
  background:
    radial-gradient(circle at 76% 22%,rgba(112,184,255,.18),transparent 30%),
    radial-gradient(circle at 18% 80%,rgba(255,255,255,.08),transparent 25%);
  animation:heroDrift 12s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.035) 120px);
  opacity:.24;
}
@keyframes heroDrift{to{transform:translate3d(-2%,1%,0) scale(1.04)}}
.hero-content{position:relative;z-index:2;padding:150px 0 72px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2.3px;font-weight:750;opacity:.75}
h1{
  margin:20px 0 24px;max-width:850px;
  font-size:clamp(58px,8vw,112px);line-height:.9;letter-spacing:-5px;
}
.hero-copy{max-width:600px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.82)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.34);
  color:white;background:rgba(255,255,255,.06);transition:.25s ease;
}
.btn.primary{background:white;color:var(--navy);border-color:white}
.btn:hover{transform:translateY(-3px)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:820px;margin-top:66px}
.stat{padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.stat strong{display:block;font-size:34px;letter-spacing:-1px}
.stat span{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;opacity:.65}
.scroll-cue{
  position:absolute;left:50%;bottom:24px;z-index:3;transform:translateX(-50%);
  width:38px;height:38px;border:1px solid rgba(255,255,255,.32);border-radius:50%;
  display:grid;place-items:center;animation:bounce 1.8s infinite
}
@keyframes bounce{50%{transform:translate(-50%,7px)}}

.section{padding:112px 0}
.section.light{background:#fff}
.section.soft{background:var(--soft)}
.section.dark{background:var(--navy);color:white}
.kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#617994}
.dark .kicker{color:#93b4d4}
h2{font-size:clamp(42px,5.3vw,74px);line-height:1.02;letter-spacing:-3px;margin:14px 0 22px}
.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:760px}
.dark .lead{color:rgba(255,255,255,.68)}
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

.statement{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.statement-quote{
  border-left:2px solid var(--blue);padding-left:24px;font-size:26px;line-height:1.45;color:#42566d
}

.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.industry{
  position:relative;min-height:420px;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:linear-gradient(145deg,#0a3159,#071d34);color:white;
  transition:.45s cubic-bezier(.2,.7,.2,1);isolation:isolate;
}
.industry:hover{transform:translateY(-10px)}
.industry-content{position:absolute;left:24px;right:24px;bottom:24px}
.industry small{opacity:.55;letter-spacing:1.4px}
.industry h3{font-size:27px;line-height:1.05;margin:10px 0}
.industry p{font-size:14px;line-height:1.55;opacity:.68}

.network{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.globe{
  position:relative;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 34% 29%,rgba(118,192,255,.35),transparent 34%),
    repeating-radial-gradient(circle,transparent 0 31px,rgba(255,255,255,.08) 32px),
    repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.055) 50px);
  box-shadow:0 0 110px rgba(59,150,230,.18);
  animation:pulseGlow 10s linear infinite
}
@keyframes pulseGlow{50%{box-shadow:0 0 155px rgba(59,150,230,.30)}}
.route{position:absolute;height:2px;background:linear-gradient(90deg,transparent,#83c8ff,transparent);transform-origin:left center;opacity:.76}
.r1{width:54%;left:23%;top:47%;transform:rotate(-18deg)}
.r2{width:48%;left:28%;top:59%;transform:rotate(14deg)}
.r3{width:36%;left:36%;top:38%;transform:rotate(31deg)}
.dot{position:absolute;width:9px;height:9px;border-radius:50%;background:white;box-shadow:0 0 20px #83c8ff}
.d1{left:27%;top:54%} .d2{left:64%;top:37%} .d3{left:72%;top:62%} .d4{left:48%;top:30%}

.products{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px}
.product{
  background:white;border:1px solid var(--line);border-radius:22px;padding:26px 20px;
  min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
  transition:.3s ease
}
.product::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(24,116,221,.09),transparent 42%);
  opacity:0;transition:.3s
}
.product:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(20,48,75,.11)}
.product:hover::before{opacity:1}
.product b,.product span{position:relative}
.product b{font-size:18px}
.product span{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}

.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.value{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:22px;padding:26px
}
.value strong{display:block;font-size:18px;margin:12px 0 8px}
.value p{margin:0;color:rgba(255,255,255,.64);font-size:14px;line-height:1.55}

.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
.form{
  background:white;color:var(--ink);border-radius:28px;padding:28px
}
.form input,.form textarea{
  width:100%;padding:14px 15px;border-radius:14px;border:1px solid #dce5ed;margin-top:10px
}
.form textarea{min-height:118px;resize:vertical}
.form button{
  width:100%;margin-top:12px;padding:14px;border:0;border-radius:999px;background:var(--navy);color:white;cursor:pointer
}
.form-note{font-size:13px;color:#5e7186;margin-top:12px}

footer{background:#02111f;color:rgba(255,255,255,.62);padding:29px 0;font-size:13px}

@media(max-width:980px){
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .network,.statement,.contact{grid-template-columns:1fr}
}
/* ⛔ Los enlaces de la nav se ocultan a 940px, NO a 700. Medido el 27-ago: entre
   ~700 y 940 px la fila (5 enlaces + conmutador + CTA) supera al contenedor y el
   CTA se salía hasta 52 px — a 820 px llegaba a x=851 con el viewport en 820, o sea
   CORTADO. Y no se veía venir porque `body{overflow-x:hidden}` lo recorta en
   silencio en vez de dar scroll: `scrollWidth === clientWidth` decía «no hay
   desbordamiento» mientras el botón principal estaba mutilado.
   940 px es además la cifra del diseño aprobado (DESIGN.md §Layout): por debajo
   quedan logo + idioma + CTA. */
@media(max-width:940px){
  .nav-links a:not(.nav-pill){display:none}
  /* el separador se va CON los enlaces: sin nada a su izquierda es un palito
     suelto. Iba atado al breakpoint de 700 y quedaba huérfano entre 700 y 940. */
  .lang-switch::before{display:none}
}
@media(max-width:700px){
  .brand-copy{display:none}
  h1{letter-spacing:-3px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .industry-grid,.products,.values{grid-template-columns:1fr}
  .section{padding:80px 0}
  .container,.nav-inner{width:min(100% - 26px,1180px)}
  .industry{min-height:330px}
}
/* ============================================================
   Fotos de industrias y producto + mapa mundial real.
   Usa los mismos tokens del diseño (radius 28/22, azul #83c8ff,
   navy de fondo): la foto entra por debajo de los degradados que
   ya existían, así el texto conserva el mismo contraste.
   ============================================================ */

/* la foto va detrás del degradado original de la tarjeta */
.industry{
  background-color:#0a3159;
  background-image:
    linear-gradient(0deg,rgba(4,17,32,.96) 0%,rgba(4,17,32,.90) 26%,rgba(4,17,32,.60) 45%,rgba(4,17,32,.16) 64%,transparent 78%),
    var(--photo,none);
  background-size:cover;
  background-position:center;
}

/* franja de foto en las tarjetas de producto */
.product{justify-content:flex-start;padding-top:0}
.product b{margin-top:auto}
.product .ph{
  display:block;height:104px;margin:-26px -20px 16px;
  background-size:cover;background-position:center;
  border-radius:22px 22px 0 0;
  filter:saturate(.85);
}

/* mapa mundial: reemplaza al globo abstracto en la sección Network */
.worldmap{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  aspect-ratio:1140/524;
}
.worldmap .dots{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;
}
.worldmap svg{position:absolute;inset:0;width:100%;height:100%}
.worldmap .lab{
  position:absolute;transform:translate(-50%,-50%);
  font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(255,255,255,.72);white-space:nowrap;
}
.worldmap .lab.hub{color:#fff;font-weight:700}
@media(max-width:700px){
  .worldmap .lab:not(.hub){display:none}
  .product .ph{height:120px}
}

/* honeypot del formulario real: campo señuelo para bots, invisible para humanos */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* pie a dos columnas: copyright a la izquierda, crédito de agencia a la derecha */
.foot-inner{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
.foot-inner a{text-decoration:underline;text-underline-offset:3px;opacity:.85;transition:.2s}
.foot-inner a:hover{opacity:1}

/* botón para secciones CLARAS: .btn.primary es blanco sobre navy y en fondo claro
   desaparece. Este es su inverso — navy sólido, texto blanco. */
.btn.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.solid:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* ============================================================
   Tarjetas de industria y de producto = ENLACES (27-ago-2026).
   Antes eran <article>/<div> con cursor:pointer y hover: parecían
   clickeables y no hacían nada. Ahora van a su división del catálogo.
   ============================================================ */
.industry{display:block}          /* era <article>; como <a> necesita block */

/* flecha: señal de que la tarjeta lleva a alguna parte */
.industry::after{
  content:"→";
  position:absolute;top:22px;right:22px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:15px;line-height:1;opacity:.6;transition:.3s ease
}
.industry:hover::after{opacity:1;background:rgba(255,255,255,.24);transform:translateX(3px)}

/* espacio DURO antes de la flecha: con espacio normal se va sola a la línea
   siguiente cuando el título ocupa dos renglones, y parece un error. */
.product b::after{content:"\00a0→";color:var(--blue);opacity:.35;transition:.2s}
.product:hover b::after{opacity:1}

/* foco visible: ahora son navegables con teclado */
.industry:focus-visible,.product:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px
}

/* ---------- conmutador de idioma EN · ES · PT (27-ago-2026) ----------
   Ubicación: último elemento antes del CTA. La jerarquía sale del diseño
   aprobado — al colapsar la nav quedan logo + idioma + CTA— así que es un
   control de primer nivel, no un enlace del menú.
   Identidad heredada, no inventada: píldora radius 999, navy #061a2f,
   Inter. PRODUCT.md §1: se pule la ejecución, no se rediseña. */
.lang-switch{
  position:relative;
  display:flex;gap:2px;padding:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);
}
/* Separador hairline: es lo que hace que se LEA como otra clase de control y
   no como un enlace más. Sin él, la píldora flota entre el menú. */
.lang-switch::before{
  content:"";position:absolute;left:-15px;top:50%;
  width:1px;height:20px;transform:translateY(-50%);
  background:rgba(255,255,255,.18);
}
.lang-btn{
  border:0;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;
  font-size:11px;font-weight:800;letter-spacing:.9px;
  padding:7px 11px;border-radius:999px;line-height:1;
  transition:background .25s cubic-bezier(.2,.7,.2,1),color .25s cubic-bezier(.2,.7,.2,1);
}
.lang-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.lang-btn[aria-pressed="true"]{background:#fff;color:var(--navy)}
.lang-btn:focus-visible{outline:2px solid #83c8ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lang-btn{transition:none}}

@media(max-width:700px){
  /* Los enlaces se ocultan pero el idioma NO: es la única vía para cambiarlo.
     Y sin enlaces a la izquierda, el separador sobra. */
  .nav-links .lang-switch{display:flex;margin-right:12px}
  /* objetivo táctil cómodo: la píldora completa queda en ~44px */
  .lang-btn{min-height:38px;padding:0 13px;display:grid;place-items:center;font-size:11px}
}