/* ==========================================================================
   SDM — Soluciones de Mercado
   Propuesta visual de rediseño · One Page (demo conceptual)
   --------------------------------------------------------------------------
   Índice
   01. Tokens de diseño
   02. Base y tipografía
   03. Utilidades y componentes transversales
   04. Header / navegación
   05. Hero
   06. Banda de respaldo internacional
   07. Soluciones (grid editorial)
   08. Buscador inteligente SDM
   09. Industrias
   10. Productos destacados
   11. Ingeniería + respaldo
   12. Indicadores
   13. Marcas
   14. CTA final
   15. Footer
   16. Animaciones de entrada
   17. Responsive
   ========================================================================== */

/* ============================ 01. Tokens ================================= */
:root{
  /* Paleta corporativa SDM */
  --blue:        #0033A0;   /* azul corporativo principal */
  --blue-600:    #002B85;   /* presionado / textos sobre claro */
  --blue-2:      #2F59B1;   /* azul secundario (hover, gráficos) */
  --blue-soft:   #EAF3FF;   /* azul muy claro (fondos técnicos) */
  --blue-mist:   #F3F8FF;   /* azul casi blanco */
  --white:       #FFFFFF;
  --bg:          #F6F8FB;   /* gris de fondo */
  --line:        #E4E9F0;   /* gris de bordes */
  --line-soft:   #EFF2F7;
  --ink:         #182230;   /* texto principal */
  --muted:       #667085;   /* texto secundario */
  --green:       #0E9F6E;   /* acento técnico puntual */

  /* Tipografía */
  --font: "Manrope", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Métricas */
  --container: 1280px;
  --gutter: 32px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --header-h: 78px;

  /* Sombras (mínimas, corporativas) */
  --shadow-xs: 0 1px 2px rgba(24,34,48,.05);
  --shadow-s:  0 2px 8px rgba(24,34,48,.05);
  --shadow-m:  0 12px 30px -18px rgba(24,34,48,.22);
  --shadow-l:  0 28px 60px -34px rgba(0,51,160,.30);

  /* Curvas y tiempos */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 200ms;
  --mid: 320ms;
  --slow: 520ms;
}

/* ========================= 02. Base y tipografía ========================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 18px); }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  letter-spacing:-.022em;
  font-weight:800;
  line-height:1.08;
}
h1{ font-size:clamp(2.55rem, 4.6vw, 4.4rem); letter-spacing:-.032em; }
h2{ font-size:clamp(2rem, 3.2vw, 3.2rem); letter-spacing:-.028em; line-height:1.1; }
h3{ font-size:clamp(1.35rem, 1.6vw, 1.75rem); line-height:1.2; }
p{ margin:0; color:var(--muted); }

::selection{ background:var(--blue); color:#fff; }

/* Foco accesible y discreto */
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ===================== 03. Utilidades y componentes ====================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding: clamp(72px, 8vw, 128px) 0; position:relative; }
.section--gray{ background:var(--bg); }
.section--soft{ background:var(--blue-soft); }

/* Etiqueta técnica superior (eyebrow) */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--blue);
  opacity:.55;
}
.eyebrow--dot::before{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); opacity:1;
}

/* Encabezado de sección */
.section-head{ max-width:760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p{ font-size:1.075rem; margin-top:20px; max-width:60ch; }
.section-head--split{
  max-width:none;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.7fr);
  gap:48px;
  align-items:end;
}
.section-head--split p{ margin-top:0; }

/* Botones */
.btn{
  --btn-bg:var(--blue);
  --btn-fg:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--radius-s);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.975rem;
  font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; transition: transform var(--mid) var(--ease); }
.btn:hover{ background:var(--blue-2); transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0); background:var(--blue-600); }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  border-color:var(--line);
  background:#fff;
}
.btn--ghost:hover{
  background:#fff;
  border-color:var(--blue);
  color:var(--blue);
  box-shadow:var(--shadow-s);
}
.btn--sm{ padding:11px 18px; font-size:.9rem; }
.btn--lg{ padding:18px 32px; font-size:1.03rem; }
.btn--block{ width:100%; }

/* Enlace con flecha */
.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--blue); font-weight:700; font-size:.98rem;
}
.arrow-link svg{ width:17px; height:17px; transition:transform var(--mid) var(--ease); }
.arrow-link:hover svg{ transform:translateX(4px); }

/* Etiquetas / tags técnicos */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:.775rem; font-weight:600; color:var(--muted);
  letter-spacing:.01em;
  white-space:nowrap;
}
.tag--blue{ background:var(--blue-soft); border-color:#D6E6FF; color:var(--blue); }

/* Medios: encuadre y fallback técnico si la foto no carga */
.media{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, #EAF1FC 0%, #DCE7F8 55%, #CFDDF3 100%);
}
.media::after{  /* trama técnica sutil de respaldo */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(0,51,160,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,51,160,.07) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:0;
  transition:opacity var(--mid) var(--ease);
}
.media.is-fallback::after{ opacity:1; }
.media img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
}
.media img.is-hidden{ opacity:0; }

/* Trama de ingeniería reutilizable */
.grid-pattern{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(0,51,160,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,51,160,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events:none;
}

/* ======================= 04. Header / navegación ========================= */
.header{
  position:fixed; inset:0 0 auto 0;
  z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition: box-shadow var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              background var(--mid) var(--ease);
}
.header.is-stuck{
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 14px rgba(24,34,48,.055);
}
.header__inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:36px;
}

/* Logotipo */
.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo__mark{ width:42px; height:42px; flex:none; }
.logo__text{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-size:1.42rem; font-weight:800; letter-spacing:-.04em; color:var(--blue); }
.logo__tagline{
  font-size:.575rem; font-weight:700; letter-spacing:.135em;
  text-transform:uppercase; color:var(--muted); margin-top:4px;
}

.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav a{
  position:relative;
  padding:10px 15px;
  font-size:.945rem; font-weight:600; color:var(--ink);
  border-radius:6px;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav a::after{
  content:"";
  position:absolute; left:15px; right:15px; bottom:3px;
  height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.nav a:hover{ color:var(--blue); }
.nav a:hover::after,
.nav a.is-active::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--blue); }

.header__actions{ display:flex; align-items:center; gap:12px; flex:none; }
.icon-btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  background:#fff; color:var(--ink);
  cursor:pointer;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-mist); }

.burger{ display:none; }

/* Menú móvil */
.mobile-nav{
  position:fixed; inset:var(--header-h) 0 auto 0;
  z-index:79;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 26px;
  transform:translateY(-14px);
  opacity:0; visibility:hidden;
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
             visibility var(--mid) linear;
  box-shadow:var(--shadow-m);
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px;
  font-size:1.075rem; font-weight:700;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav a svg{ width:17px; height:17px; color:var(--blue); }
.mobile-nav .btn{ margin-top:22px; }

/* ================================ 05. Hero =============================== */
.hero{
  position:relative;
  padding-top: calc(var(--header-h) + clamp(48px, 6vw, 86px));
  padding-bottom: clamp(56px, 6vw, 96px);
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(234,243,255,.9) 0%, rgba(255,255,255,0) 62%),
    var(--white);
}
.hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(40px, 5vw, 76px);
  align-items:center;
}
.hero__copy{ position:relative; z-index:2; max-width:640px; }
.hero h1{ margin-bottom:26px; }
.hero h1 em{ font-style:normal; color:var(--blue); position:relative; white-space:nowrap; }
.hero h1 em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  background:var(--blue); opacity:.16; border-radius:2px;
}
.hero__lead{ font-size:1.14rem; max-width:54ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* Micro-datos técnicos bajo el hero */
.hero__facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:26px;
  margin-top:48px; padding-top:30px;
  border-top:1px solid var(--line);
}
.hero__fact strong{
  display:block;
  font-size:1.5rem; font-weight:800; color:var(--blue);
  letter-spacing:-.03em; line-height:1;
}
.hero__fact span{
  display:block; margin-top:8px;
  font-size:.82rem; font-weight:600; color:var(--muted);
  letter-spacing:.02em;
}

/* Composición visual derecha */
.hero__visual{ position:relative; }
.hero__frame{
  position:relative;
  aspect-ratio: 4 / 4.35;
  border-radius: var(--radius-l);
  overflow:hidden;
  /* recorte arquitectónico: esquina superior derecha achaflanada */
  clip-path: polygon(0 0, calc(100% - 76px) 0, 100% 76px, 100% 100%, 0 100%);
  box-shadow: var(--shadow-l);
}
.hero__frame img{ filter:saturate(1.02) contrast(1.03); }
.hero__frame::after{ /* graduación azul muy leve para unificar la fotografía */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(0,51,160,.18) 0%, rgba(0,51,160,0) 42%,
             rgba(24,34,48,.10) 100%);
  pointer-events:none;
}
/* Líneas de conexión técnica sobre la imagen */
.hero__wires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.hero__wires path{
  fill:none; stroke:#fff; stroke-width:1.15; opacity:.75;
  stroke-dasharray:5 6;
  animation:wire-flow 9s linear infinite;
}
.hero__wires circle{ fill:#fff; }
.hero__wires circle.pulse{
  fill:none; stroke:#fff; stroke-width:1.2;
  transform-origin:center;
  animation:pulse-ring 2.8s ease-out infinite;
}
@keyframes wire-flow{ to{ stroke-dashoffset:-110; } }
@keyframes pulse-ring{
  0%{ r:5; opacity:.85; }
  70%{ r:15; opacity:0; }
  100%{ r:15; opacity:0; }
}

/* Etiquetas flotantes tipo interfaz técnica */
.hero__chip{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px 7px 10px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.75);
  border-left:2px solid var(--blue);
  border-radius:5px;
  font-size:.775rem; font-weight:700; color:var(--ink);
  letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 8px 22px -12px rgba(24,34,48,.45);
  backdrop-filter:blur(3px);
  animation:chip-float 7s var(--ease) infinite;
}
.hero__chip i{
  width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(14,159,110,.16);
}
.hero__chip small{
  font-size:.68rem; font-weight:600; color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase;
}
.hero__chip--1{ top:11%;  left:-26px; animation-delay:0s; }
.hero__chip--2{ top:33%;  right:-18px; animation-delay:.8s; }
.hero__chip--3{ top:57%;  left:-34px; animation-delay:1.6s; }
.hero__chip--4{ bottom:16%; right:-14px; animation-delay:2.4s; }
.hero__chip--5{ bottom:4%;  left:12%;  animation-delay:3.2s; }
@keyframes chip-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* Tarjeta de estado (dato técnico) */
.hero__status{
  position:absolute; z-index:5; left:-38px; bottom:14%;
  width:212px; padding:16px 18px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-m);
}
.hero__status header{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.hero__status header b{ color:var(--green); display:flex; align-items:center; gap:5px; }
.hero__status header b::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }
.hero__bars{ display:flex; align-items:flex-end; gap:5px; height:44px; }
.hero__bars span{
  flex:1; background:var(--blue-soft); border-radius:2px 2px 0 0;
  transform-origin:bottom; transform:scaleY(.2);
  animation:bar-rise 1s var(--ease) forwards;
}
.hero__bars span:nth-child(odd){ background:var(--blue); opacity:.85; }
@keyframes bar-rise{ to{ transform:scaleY(1); } }
.hero__status footer{
  margin-top:12px; font-size:.72rem; font-weight:600; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* ================== 06. Banda de respaldo internacional ================== */
.backing{
  border-block:1px solid var(--line);
  padding: 30px 0;
  background:var(--white);
}
.backing__inner{
  display:grid;
  grid-template-columns: 196px minmax(0,1fr);
  gap:36px; align-items:center;
}
.backing__label{
  font-size:.79rem; font-weight:700; color:var(--muted);
  line-height:1.45; letter-spacing:.005em;
  border-left:2px solid var(--blue); padding-left:14px;
}
/* Doce marcas en dos filas exactas de seis: la grilla evita el salto de línea
   irregular del wrap y alinea las columnas entre ambas filas. */
.backing__logos{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:20px clamp(12px, 1.6vw, 26px);
  align-items:center;
  justify-items:center;
}
.brand-mark{
  display:inline-flex; align-items:center;
  height:26px; max-width:100%;
  filter:grayscale(1);
  opacity:.52;
  transition:filter var(--mid) var(--ease), opacity var(--mid) var(--ease),
             transform var(--mid) var(--ease);
  cursor:default;
}
.brand-mark svg{ height:100%; width:auto; max-width:100%; }
.backing .brand-mark{ height:23px; }
.brand-mark:hover{ filter:grayscale(0); opacity:1; transform:translateY(-2px); }

/* ==================== 07. Soluciones (grid editorial) ==================== */
.solutions__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:22px;
}
/* Composición asimétrica: 2 bloques grandes + 4 medianos */
.sol{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  min-height:280px;
  transition: border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.sol:hover{
  border-color:#CFE0FA;
  box-shadow:var(--shadow-m);
  transform:translateY(-3px);
}
.sol:hover .media img{ transform:scale(1.03); }
.sol--wide{ grid-column:span 3; }
.sol--third{ grid-column:span 2; }

.sol .media{ height:220px; flex:none; }
.sol--wide .media{ height:270px; }
.sol__body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
.sol__icon{
  position:absolute; top:18px; left:18px; z-index:2;
  width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.94);
  color:var(--blue);
  box-shadow:0 6px 18px -10px rgba(24,34,48,.5);
}
.sol__icon svg{ width:22px; height:22px; }
.sol__num{
  position:absolute; top:20px; right:20px; z-index:2;
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  color:#fff; opacity:.85;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.sol h3{ margin-bottom:10px; }
.sol p{ font-size:.965rem; }
.sol__go{
  margin-top:auto; padding-top:20px;
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; font-weight:700; color:var(--blue);
}
.sol__go span{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease),
              border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.sol__go svg{ width:15px; height:15px; }
.sol:hover .sol__go span{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(3px); }

/* ==================== 08. Buscador inteligente SDM ====================== */
.finder{ position:relative; background:var(--white); overflow:hidden; }
.finder .grid-pattern{ opacity:.9; }
.finder__head{ text-align:center; max-width:780px; margin:0 auto clamp(38px,4vw,54px); }
.finder__head .eyebrow{ justify-content:center; }
.finder__head p{ margin-top:20px; font-size:1.075rem; }

.finder-app{
  position:relative;
  width:min(1060px, 100%);
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  box-shadow:0 30px 70px -46px rgba(24,34,48,.42);
  overflow:hidden;
}
.finder-app__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FBFCFE 0%, #FFFFFF 100%);
}
.finder-app__id{ display:flex; align-items:center; gap:11px; }
.finder-app__id .dot{
  width:30px; height:30px; border-radius:8px; background:var(--blue);
  display:grid; place-items:center; color:#fff; flex:none;
}
.finder-app__id .dot svg{ width:16px; height:16px; }
.finder-app__id b{ font-size:.95rem; font-weight:800; letter-spacing:-.015em; }
.finder-app__status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.755rem; font-weight:700; color:var(--muted);
  letter-spacing:.02em;
}
.finder-app__status i{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(14,159,110,.14);
  animation:blink 2.4s ease-in-out infinite;
}
.finder-app__body{ padding: clamp(24px, 3vw, 34px); }

.finder-field{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  padding:8px 8px 8px 18px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.finder-field:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,51,160,.09);
}
.finder-field > svg{ width:21px; height:21px; color:var(--blue); flex:none; }
.finder-field input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-family:inherit; font-size:1.03rem; color:var(--ink);
  padding:14px 0;
}
.finder-field input::placeholder{ color:#98A2B3; }
.finder-field .btn{ flex:none; }

.finder-hint{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:18px;
}
.finder-hint > span{
  font-size:.79rem; font-weight:700; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase;
}
.chip{
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:.845rem; font-weight:600; color:var(--ink);
  cursor:pointer;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease),
             background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-mist); transform:translateY(-1px); }
.chip.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* Estados del buscador */
.finder-panel{ margin-top:26px; }
.finder-loading{
  display:none;
  align-items:center; gap:14px;
  padding:22px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-m);
  background:var(--blue-mist);
  font-size:.93rem; font-weight:600; color:var(--blue);
}
.finder-loading.is-on{ display:flex; }
.finder-loading .spinner{
  width:20px; height:20px; flex:none;
  border:2px solid rgba(0,51,160,.2);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.finder-results{ display:none; }
.finder-results.is-on{ display:block; animation:result-in 420ms var(--ease) both; }
@keyframes result-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.finder-results__title{
  display:flex; align-items:center; gap:10px;
  font-size:1.02rem; font-weight:800; color:var(--ink);
  margin-bottom:20px;
}
.finder-results__title svg{ width:20px; height:20px; color:var(--green); }

/* Interpretación de la consulta */
.readout{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  margin-bottom:24px;
}
.readout > div{ background:var(--blue-soft); padding:16px 18px; }
.readout dt{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); opacity:.75; margin-bottom:7px;
}
.readout dd{ margin:0; font-size:.95rem; font-weight:700; color:var(--ink); }

.result-list{ display:grid; gap:14px; }
.result{
  display:grid;
  grid-template-columns: 86px minmax(0,1fr) auto;
  gap:20px; align-items:center;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:#fff;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             transform var(--fast) var(--ease);
  opacity:0;
  animation:result-in 380ms var(--ease) forwards;
}
.result:hover{ border-color:#CFE0FA; box-shadow:var(--shadow-s); transform:translateY(-2px); }
.result__thumb{
  width:86px; height:86px; border-radius:10px;
  background:var(--blue-soft);
  display:grid; place-items:center; color:var(--blue);
  border:1px solid #DEEAFC; flex:none;
}
.result__thumb svg{ width:34px; height:34px; }
.result__brand{
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:5px;
}
.result h4{ margin:0 0 6px; font-size:1.13rem; font-weight:800; letter-spacing:-.02em; }
.result p{ font-size:.92rem; margin-bottom:11px; }
.result__tags{ display:flex; gap:7px; flex-wrap:wrap; }
.result__cta{ flex:none; }

.finder-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  margin-top:26px; padding-top:24px;
  border-top:1px solid var(--line);
}
.finder-foot p{ font-size:.98rem; font-weight:700; color:var(--ink); }
.finder-foot small{ display:block; font-weight:500; color:var(--muted); font-size:.87rem; margin-top:3px; }

.finder-empty{
  display:none;
  padding:26px 22px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--radius-m);
  background:var(--bg);
}
.finder-empty.is-on{ display:block; }
.finder-empty b{ display:block; margin-bottom:6px; }
.finder-empty p{ font-size:.93rem; }

/* ============================ 09. Industrias ============================= */
.industries__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows: 168px;
  gap:18px;
}
.ind{
  position:relative;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:#0F1A2B;
  isolation:isolate;
}
.ind .media{ position:absolute; inset:0; height:100%; }
.ind .media img{ filter:saturate(.92); }
.ind::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,26,43,.10) 0%, rgba(15,26,43,.34) 46%, rgba(10,22,45,.82) 100%);
  transition:background var(--mid) var(--ease);
}
.ind:hover::after{
  background:linear-gradient(180deg, rgba(0,32,102,.24) 0%, rgba(0,32,102,.48) 46%, rgba(0,26,84,.88) 100%);
}
.ind:hover .media img{ transform:scale(1.03); }
.ind__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:20px 22px;
}
.ind__name{
  font-size:1.12rem; font-weight:800; color:#fff; letter-spacing:-.02em;
  line-height:1.15;
}
.ind__meta{
  display:block; margin-top:6px;
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.ind__go{
  display:flex; align-items:center; gap:8px;
  margin-top:12px;
  font-size:.86rem; font-weight:700; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.ind__go svg{ width:15px; height:15px; }
.ind:hover .ind__go{ opacity:1; transform:translateY(0); }
/* Marca de esquina técnica */
.ind__tick{
  position:absolute; top:16px; right:16px; z-index:2;
  width:22px; height:22px;
  border-top:1.5px solid rgba(255,255,255,.5);
  border-right:1.5px solid rgba(255,255,255,.5);
  transition:border-color var(--mid) var(--ease);
}
.ind:hover .ind__tick{ border-color:#fff; }

/* Distribución editorial (12 columnas) */
.ind--xl{ grid-column:span 5; grid-row:span 2; }
.ind--lg{ grid-column:span 4; grid-row:span 2; }
.ind--md{ grid-column:span 3; grid-row:span 2; }
.ind--sm{ grid-column:span 4; grid-row:span 1; }
.ind--wide{ grid-column:span 4; grid-row:span 1; }
.ind--xl .ind__name{ font-size:1.6rem; }
.ind--lg .ind__name{ font-size:1.35rem; }

/* ======================= 10. Productos destacados ======================== */
.products__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:22px;
}
.product{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:#fff;
  transition:border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
             transform var(--mid) var(--ease);
}
.product:hover{ border-color:#CFE0FA; box-shadow:var(--shadow-m); transform:translateY(-4px); }
.product:hover .media img{ transform:scale(1.03); }
.product .media{
  height:210px; flex:none;
  background:linear-gradient(160deg,#F3F7FD 0%, #E6EEFA 100%);
}
.product__brand{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 10px; border-radius:5px;
  background:rgba(255,255,255,.95);
  font-size:.66rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue);
}
.product__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.product h3{ font-size:1.22rem; margin-bottom:14px; }
.product__specs{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px; }
.product__specs li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:.9rem; color:var(--muted); line-height:1.45;
}
.product__specs svg{ width:15px; height:15px; color:var(--blue); flex:none; margin-top:3px; }
.product__foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.product__foot .arrow-link{ white-space:nowrap; }
.product__industry{ font-size:.77rem; font-weight:700; color:var(--muted); }
.products__more{ margin-top:44px; display:flex; justify-content:center; }

/* ====================== 11. Ingeniería + respaldo ======================== */
.engineering{ padding:0; background:var(--white); }
.engineering__grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height:640px;
}
.engineering__media{ position:relative; overflow:hidden; }
.engineering__media .media{ position:absolute; inset:0; height:100%; }
.engineering__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,51,160,.18) 0%, rgba(0,51,160,0) 55%);
  pointer-events:none;
}
.engineering__badge{
  position:absolute; z-index:3; left:34px; bottom:34px;
  background:#fff; border-radius:var(--radius-m);
  padding:18px 22px; box-shadow:var(--shadow-m);
  max-width:260px;
}
.engineering__badge b{ display:block; font-size:1.9rem; font-weight:800; color:var(--blue); letter-spacing:-.03em; line-height:1; }
.engineering__badge span{ display:block; margin-top:8px; font-size:.84rem; font-weight:600; color:var(--muted); }
.engineering__content{
  padding: clamp(56px, 6vw, 96px) clamp(28px, 5vw, 84px);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.engineering__content h2{ margin-bottom:22px; }
.engineering__content > p{ font-size:1.06rem; max-width:52ch; }
.attrs{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:30px 34px; margin-top:44px;
}
.attr__icon{
  width:44px; height:44px; border-radius:11px;
  background:var(--white); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--blue);
  margin-bottom:16px;
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.attr:hover .attr__icon{ border-color:var(--blue); transform:translateY(-2px); }
.attr__icon svg{ width:22px; height:22px; }
.attr h3{ font-size:1.1rem; margin-bottom:8px; }
.attr p{ font-size:.94rem; }

/* =========================== 12. Indicadores ============================= */
.stats{ background:var(--blue-soft); padding: clamp(56px, 6vw, 84px) 0; }
.stats__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:rgba(0,51,160,.13);
  border:1px solid rgba(0,51,160,.13);
  border-radius:var(--radius-m); overflow:hidden;
}
.stat{ background:var(--blue-soft); padding: clamp(26px,3vw,38px) clamp(20px,2.4vw,32px); }
.stat b{
  display:block;
  font-size:clamp(2.6rem, 4.4vw, 3.9rem);
  font-weight:800; color:var(--blue);
  letter-spacing:-.045em; line-height:1;
}
.stat span{
  display:block; margin-top:12px;
  font-size:.95rem; font-weight:600; color:#41506B;
}

/* ============================= 13. Marcas ================================ */
.brands{ background:var(--white); overflow:hidden; }
.brands__head{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  gap:44px; align-items:end; margin-bottom:54px;
}
.marquee{ position:relative; }
.marquee::before,
.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:130px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg, #fff 12%, rgba(255,255,255,0) 100%); }
.marquee::after{  right:0; background:linear-gradient(270deg,#fff 12%, rgba(255,255,255,0) 100%); }
.marquee__track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee__item{
  width:230px; height:120px; flex:none;
  display:grid; place-items:center;
  border-right:1px solid var(--line);
  padding:0 26px;
}
.marquee__item .brand-mark{ height:30px; }

/* ============================ 14. CTA final ============================== */
.cta{ padding: clamp(72px, 8vw, 118px) 0; background:var(--white); }
.cta__box{
  position:relative;
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--blue-soft);
}
.cta__content{
  padding: clamp(44px, 5vw, 76px);
  display:flex; flex-direction:column; justify-content:center;
}
.cta__content h2{ margin-bottom:20px; }
.cta__content p{ font-size:1.075rem; max-width:46ch; color:#41506B; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.cta__contact{
  display:flex; flex-wrap:wrap; gap:26px;
  margin-top:36px; padding-top:26px;
  border-top:1px solid rgba(0,51,160,.14);
  font-size:.9rem; font-weight:600; color:#41506B;
}
.cta__contact a{ display:inline-flex; align-items:center; gap:8px; }
.cta__contact svg{ width:16px; height:16px; color:var(--blue); }
.cta__contact a:hover{ color:var(--blue); }
.cta__media{ position:relative; min-height:420px; }
.cta__media .media{ position:absolute; inset:0; height:100%; }

/* ============================== 15. Footer =============================== */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding-top: clamp(56px,6vw,84px); }
.footer__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
  gap:44px;
  padding-bottom:52px;
}
.footer__brand .logo{ margin-bottom:20px; }
.footer__brand p{ font-size:.93rem; max-width:34ch; }
.footer__social{ display:flex; gap:10px; margin-top:22px; }
.footer__social a{
  width:38px; height:38px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--muted);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.footer__social a:hover{ color:var(--blue); border-color:var(--blue); }
.footer__social svg{ width:17px; height:17px; }
.footer h4{
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin-bottom:20px;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer li a{ font-size:.93rem; color:var(--muted); transition:color var(--fast) var(--ease); }
.footer li a:hover{ color:var(--blue); }
.footer__contact li{
  display:flex; gap:11px; font-size:.93rem; color:var(--muted); line-height:1.5;
}
.footer__contact svg{ width:16px; height:16px; color:var(--blue); flex:none; margin-top:4px; }
.footer__contact a{ color:var(--muted); }
.footer__contact a:hover{ color:var(--blue); }
.footer__bottom{
  border-top:1px solid var(--line);
  padding:24px 0 28px;
  display:flex; flex-wrap:wrap; gap:16px 28px;
  align-items:center; justify-content:space-between;
  font-size:.83rem; color:var(--muted);
}
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__bottom a:hover{ color:var(--blue); }
.footer__note{
  font-size:.78rem; color:#8A94A6;
  border-top:1px dashed var(--line);
  padding:16px 0 28px;
}

/* ==================== 16. Animaciones de entrada ========================= */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:80ms; }
.reveal--d2{ transition-delay:160ms; }
.reveal--d3{ transition-delay:240ms; }
.reveal--d4{ transition-delay:320ms; }
.reveal--d5{ transition-delay:400ms; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================ 17. Responsive ============================= */
@media (max-width:1180px){
  :root{ --gutter:26px; }
  .nav a{ padding:10px 11px; font-size:.9rem; }
  .hero__chip--1{ left:-10px; }
  .hero__chip--3{ left:-14px; }
  .hero__status{ left:-14px; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:38px; }
}

@media (max-width:1024px){
  .header__inner{ gap:18px; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .header__actions .btn{ display:none; }

  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__copy{ max-width:none; }
  .hero__frame{ aspect-ratio: 16/11; }
  .hero__status{ left:auto; right:16px; bottom:16px; }
  .hero__chip--3{ left:8px; }
  .hero__chip--5{ display:none; }

  .backing__inner{ grid-template-columns:1fr; gap:22px; }
  .backing__logos{ justify-items:start; }
  .sol--wide, .sol--third{ grid-column:span 3; }
  .products__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .engineering__grid{ grid-template-columns:1fr; }
  .engineering__media{ min-height:400px; }
  .section-head--split{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .brands__head{ grid-template-columns:1fr; gap:22px; }
  .cta__box{ grid-template-columns:1fr; }
  .cta__media{ min-height:320px; order:-1; }
}

@media (max-width:860px){
  .backing__logos{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .stats__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .industries__grid{ grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; }
  .ind--xl{ grid-column:span 6; grid-row:span 2; }
  .ind--lg{ grid-column:span 3; grid-row:span 2; }
  .ind--md{ grid-column:span 3; grid-row:span 2; }
  .ind--sm, .ind--wide{ grid-column:span 3; grid-row:span 1; }
  .readout{ grid-template-columns:1fr; }
  .result{ grid-template-columns: 64px minmax(0,1fr); }
  .result__thumb{ width:64px; height:64px; }
  .result__thumb svg{ width:26px; height:26px; }
  .result__cta{ grid-column:1 / -1; }
  .result__cta .btn{ width:100%; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  :root{ --gutter:20px; --header-h:70px; }
  body{ font-size:16px; }
  h1{ font-size:clamp(2.5rem, 11vw, 2.85rem); }   /* 40–46 px en móvil */
  h2{ font-size:clamp(1.85rem, 7.6vw, 2.25rem); }
  h3{ font-size:1.22rem; }

  .section{ padding:64px 0; }

  .logo__mark{ width:36px; height:36px; }
  .logo__name{ font-size:1.24rem; }
  .logo__tagline{ font-size:.53rem; letter-spacing:.11em; }

  .hero{ padding-top:calc(var(--header-h) + 38px); }
  .hero__lead{ font-size:1.03rem; }
  .hero__actions{ gap:11px; }
  .hero__actions .btn{ width:100%; }
  .hero__facts{ grid-template-columns:1fr 1fr; gap:22px 18px; margin-top:36px; }
  .hero__fact:last-child{ grid-column:span 2; }
  .hero__fact strong{ font-size:1.42rem; }
  .hero__frame{ aspect-ratio:4/3.4; clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%); }
  .hero__chip{ font-size:.71rem; padding:6px 10px; }
  .hero__chip--1{ left:6px; top:8%; }
  .hero__chip--2{ right:6px; }
  .hero__chip--3{ left:6px; }
  .hero__chip--4{ right:6px; bottom:22%; }
  .hero__status{ display:none; }

  .backing__logos{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 14px; }
  .backing .brand-mark{ height:19px; }
  .brand-mark{ height:22px; }

  .solutions__grid{ grid-template-columns:1fr; gap:16px; }
  .sol--wide, .sol--third{ grid-column:span 1; }
  .sol .media, .sol--wide .media{ height:190px; }
  .sol__body{ padding:22px 20px 24px; }

  .finder-app__bar{ padding:14px 16px; }
  .finder-app__status span{ display:none; }
  .finder-field{ flex-direction:column; align-items:stretch; gap:10px; padding:14px; }
  .finder-field > svg{ display:none; }
  .finder-field input{ padding:6px 2px; font-size:1rem; }
  .finder-field .btn{ width:100%; }
  .finder-hint{ gap:8px; }
  .finder-hint > span{ width:100%; }
  .chip{ font-size:.8rem; padding:7px 12px; }
  .finder-foot{ flex-direction:column; align-items:flex-start; }
  .finder-foot .btn{ width:100%; }

  .industries__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:135px; gap:12px; }
  .ind--xl{ grid-column:span 2; grid-row:span 2; }
  .ind--lg, .ind--md{ grid-column:span 1; grid-row:span 2; }
  .ind--sm, .ind--wide{ grid-column:span 1; grid-row:span 1; }
  .ind--xl .ind__name{ font-size:1.3rem; }
  .ind--lg .ind__name, .ind--md .ind__name{ font-size:1.02rem; }
  .ind__name{ font-size:.95rem; }
  .ind__body{ padding:14px 15px; }
  .ind__meta{ font-size:.66rem; }
  .ind__go{ display:none; }

  .products__grid{ grid-template-columns:1fr; }
  .product .media{ height:230px; }

  .attrs{ grid-template-columns:1fr; gap:26px; }
  .engineering__content{ padding:56px 20px; }
  .engineering__media{ min-height:300px; }
  .engineering__badge{ left:20px; bottom:20px; padding:14px 18px; }

  .stats__grid{ grid-template-columns:1fr; }
  .marquee__item{ width:170px; height:96px; padding:0 18px; }
  .marquee::before, .marquee::after{ width:60px; }

  .cta__content{ padding:40px 22px 46px; }
  .cta__actions .btn{ width:100%; }
  .cta__media{ min-height:230px; }

  .footer__grid{ grid-template-columns:1fr; gap:36px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
}