/* ============================================================
   MET LIMPIEZA — One Page Site (v2)
   Base limpia. Paleta y tipografías del canon vigente.
   ============================================================ */

/* 1. Tokens
   ------------------------------------------------------------ */
:root {
  --navy:       #012967;
  --blue:       #0756C6;
  --blue-soft:  #8FB6EE;
  --surface:    #EAF1FB;
  --paper:      #ffffff;
  --ink:        #16202E;
  --ink-soft:   #5B6B84;
  --line:       #DCE8F8;
  --wa:         #25D366;
  --wa-dark:    #1DA851;

  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max:      1200px;
  --gutter:   24px;
  --nav-h:    98px;
  --radius:   6px;
  --radius-lg:12px;

  --section-y: 104px;
  --shadow:    0 24px 50px rgba(1, 41, 103, .14), 0 5px 16px rgba(1, 41, 103, .08);

  /* Escala tipográfica. Un solo lugar donde vive cada tamaño: los bloques
     consumen el token, no vuelven a declarar el clamp. */
  --fs-display: clamp(32px, 4.4vw, 54px);   /* h1 del hero y cierre        */
  --fs-h2:      clamp(30px, 3.6vw, 46px);   /* título de sección           */
  --fs-h3:      clamp(21px, 2.2vw, 28px);   /* subtema dentro de un bloque */
  --fs-h4:      clamp(19px, 1.7vw, 23px);   /* título de tarjeta           */
  --fs-lede:    clamp(16px, 1.4vw, 18px);   /* entradilla                  */
  --fs-body:    17px;                       /* texto corrido               */
  --fs-sm:      15.5px;                     /* texto secundario            */
  --fs-xs:      14px;                       /* listas densas, nav          */
  --fs-2xs:     13px;                       /* eyebrow, pies, numeración   */
  --fs-btn:     15px;                       /* botones                     */

  /* Capas. Escala nombrada en vez de 90/100/200 ad hoc */
  --z-float:  60;   /* botón flotante de WhatsApp */
  --z-nav:    100;  /* header sticky            */
  --z-skip:   200;  /* salto al contenido       */

  /* Espaciado. Progresión 8 · 12 · 16 · 24 · 32 · 48 · 72 */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 72px;
}

/* 2. Reset y base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.2; }
h5 { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }

/* Entradilla: una sola definición para todo el sitio. Los bloques ajustan
   como mucho la medida, nunca el tamaño ni el color. */
.lede {
  font-size: var(--fs-lede);
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
  max-width: 58ch;
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* El azul sobre navy da 2.08:1, por debajo del 3:1 que exige WCAG 2.4.11.
   Sobre fondo oscuro el anillo pasa a blanco: 13.9:1. */
.hero :focus-visible,
.split--navy :focus-visible,
.footer :focus-visible { outline-color: #fff; }

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

.accent { color: var(--blue); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* 3. Botones
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 44px de alto mínimo: objetivo táctil declarado en PRODUCT.md */
  min-height: 44px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn--lg { padding: 17px 32px; font-size: var(--fs-body); }

.btn--wa {
  background: var(--wa);
  color: #04361A;
}
.btn--wa:hover {
  background: var(--wa-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(29, 168, 81, .32);
}

.ico-wa { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* 4. Nav
   ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* Casi sólido, no glass decorativo */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Sombra proyectada sobre el hero y sobre cualquier sección que pase por debajo.
   .is-stuck la activa main.js en cuanto la página se despega del tope. */
.nav.is-stuck {
  background: rgba(255, 255, 255, .98);
  border-bottom-color: var(--line);
  box-shadow:
    0 1px 0 rgba(1, 41, 103, .04),
    0 10px 24px -8px rgba(1, 41, 103, .16),
    0 26px 48px -24px rgba(1, 41, 103, .22);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--nav-h);
}

/* 56px deja legible el tagline "Soluciones Profesionales" del logotipo */
.nav__logo img {
  height: 56px;
  width: auto;
  display: block;
  transition: opacity .2s ease;
}
.nav__logo:hover img { opacity: .82; }

.nav__links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--navy); }
.nav__links a.is-current { color: var(--navy); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }

/* CTA del nav: mismo verde de marca, tratado con más contención que el del hero */
.nav__cta {
  min-height: 44px;
  padding: 12px 22px;
  font-size: var(--fs-xs);
  border-radius: 999px;
  background: linear-gradient(180deg, #2EE06F 0%, var(--wa) 55%, var(--wa-dark) 100%);
  color: #04361A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 1px 2px rgba(4, 54, 26, .18),
    0 6px 16px -6px rgba(29, 168, 81, .45);
}
.nav__cta:hover {
  background: linear-gradient(180deg, var(--wa) 0%, var(--wa-dark) 100%);
  color: #04361A;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 2px 4px rgba(4, 54, 26, .16),
    0 12px 26px -8px rgba(29, 168, 81, .5);
}
.nav__cta:active { transform: translateY(0); }
.nav__cta .ico-wa { width: 18px; height: 18px; }

/* Selector de idioma. Segmentado, para que las tres opciones se lean como
   un mismo control y no como tres enlaces sueltos. */
.lang {
  display: flex;
  gap: 2px;
  flex: none;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang a,
.lang span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  font-family: var(--font-display);
  /* Hangul no existe en Public Sans ni en Archivo: se declara el respaldo
     del sistema para que 한국어 no caiga en una fuente arbitraria. */
  font-family: var(--font-display), 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.lang a:hover { color: var(--navy); }
/* El idioma vigente no es un enlace: es el estado actual */
.lang .is-active {
  background: var(--paper);
  color: var(--navy);
  cursor: default;
  box-shadow: 0 1px 2px rgba(1, 41, 103, .14);
}

/* En el panel móvil el selector va a lo ancho, no en la barra */
.lang--mobile { display: none; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 12px 10px;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.nav__mobile a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  color: var(--navy);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.nav__mobile .btn { margin-top: 20px; justify-content: center; }

/* 5. Sección 1 — Hero full-bleed
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 96px 0 128px;
  overflow: hidden;
  background: var(--navy);

  /* Ancho de la columna de texto del hero. Un solo valor gobierna el ancho del
     párrafo y el punto donde muere el velo azul, para que coincidan siempre. */
  --hero-text-w: 580px;
  /* Borde izquierdo del texto = margen del .container + su padding interno */
  --hero-x: calc(max(var(--gutter), (100% - var(--max)) / 2) + var(--gutter));
}

.hero__visual { position: absolute; inset: 0; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
/* El velo azul es horizontal y se apaga donde termina el texto: la fotografía
   queda limpia en la mitad derecha del hero. */
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(1, 41, 103, .94) 0%,
    rgba(1, 41, 103, .92) calc(var(--hero-x) + var(--hero-text-w) * .75),
    rgba(1, 41, 103, .55) calc(var(--hero-x) + var(--hero-text-w)),
    rgba(1, 41, 103, 0)   calc(var(--hero-x) + var(--hero-text-w) + 140px));
}

/* Ancho heredado de .container (var(--max)) para que los bordes del hero
   coincidan exactamente con los del nav. Contenido centrado. */
.hero__content {
  /* Estático a propósito. La foto es hija de este contenedor para poder entrar
     al flujo en teléfono, pero en escritorio su bloque de referencia tiene que
     ser el .hero entero, no la columna de texto. */
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* Con la foto absoluta de por medio, el texto necesita su propia capa. */
.hero__content > :not(.hero__visual) { position: relative; z-index: 1; }

/* Sello 33 años + titular en una sola línea horizontal */
.hero__lockup {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  margin-bottom: 28px;
}

.hero__badge {
  flex: 0 0 auto;
  width: clamp(86px, 9.5vw, 138px);
  height: auto;
}

.hero__headline { color: #fff; }
.hero__headline .accent { color: var(--blue-soft); }

.hero__subhead {
  max-width: var(--hero-text-w);
  font-size: calc(var(--fs-lede) * 1.1);
  color: rgba(255, 255, 255, .86);
  margin-bottom: var(--sp-5);
  text-wrap: pretty;
}

/* El indicador mide 26×42 por diseño; el área de toque se amplía a 44×44
   con un pseudo-elemento, sin alterar el gráfico. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 14px;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  60%      { transform: translateY(14px); opacity: .2; }
}

/* 6. Secciones 2–7 — split a dos columnas
   ------------------------------------------------------------ */
.split { padding: var(--section-y) 0; }

.split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  /* Foto arrancando arriba: al centrarla, cada bloque la deja a una altura
     distinta según lo largo que sea su texto. */
  align-items: start;
}

/* Alterna: imagen a la derecha */
.split--alt .split__media { order: 2; }

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split__body h2 { margin-bottom: var(--sp-4); }

/* Segundo tema dentro del mismo bloque: jerarquía por debajo del h2 */
.split__sub {
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Sin CTA al cierre del bloque, el último elemento no arrastra margen */
.split__body > *:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--sp-3);
}

/* Variantes de fondo */
.split--tint { background: var(--surface); }

.split--navy { background: var(--navy); }
.split--navy h2 { color: #fff; }
.split--navy h2 .accent { color: var(--blue-soft); }
.split--navy .lede { color: rgba(255, 255, 255, .82); }

/* 6b. Sección 4 — Calidad certificada
   ------------------------------------------------------------ */
.cert__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 3.4vw, 42px);
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
}
.cert__headText { max-width: 62ch; }
.cert__head h2 { margin: 0; }
.cert__seal {
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 158px);
  height: auto;
}

.cert__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* Mosaico de cuatro fotos. Cada columna apila por su cuenta (flex), no en
   filas de grid: así una foto 4:3 junto a una 4:5 no genera huecos muertos.
   Las dos columnas suman la misma altura (1.25 + 0.75 de su ancho), y el
   margin-top de la segunda produce el escalonado sin desbalancearlas. */
.cert__mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.cert__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cert__col--offset { margin-top: 44px; }
.cert__shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cert__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.cert__shot:hover img { transform: scale(1.045); }

/* Alturas alternadas: evita la retícula plana de cuatro cuadros iguales */
.cert__shot--tall { aspect-ratio: 4 / 5; }
.cert__shot--wide { aspect-ratio: 4 / 3; }

.cert__body .lede { max-width: 52ch; }

.cert__body .badges { margin-bottom: 0; }

/* Hilera propia de las tres ISO. Se sacaron de .badges porque cada una arrastra
   su lista de NOM: dentro de la rejilla de sellos no cabían sin romperla, y
   fuera pueden crecer y quedar horizontales en tres columnas de igual peso. */
.isos {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--line);
}
.isos .eyebrow { margin-bottom: clamp(20px, 2.4vw, 30px); }

.isos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.iso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--paper);
}
/* Casi el doble que un sello de .badges: es el dato que el bloque presume */
.iso__seal {
  height: clamp(104px, 11vw, 148px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.iso__title { margin: 0; }

/* El bloque cierra con su propio CTA. Va después de las ISO, no dentro de
   .cert__body: ahí quedaría a media sección, con la hilera de sellos debajo. */
.cert__cta { margin-top: clamp(32px, 4vw, 48px); }

.iso__noms {
  display: grid;
  gap: 9px;
}
.iso__noms li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
/* Palomita en un solo lugar: 14 SVG repetidos en el HTML no aportan nada */
.iso__noms li::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230756C6'/%3E%3Cpath d='M5.7 10.2l2.9 2.9 5.8-5.9' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 6c. Sección 6 — Galería horizontal de servicios
   ------------------------------------------------------------ */

/* Riel a sangre, pero con los bordes de la primera y última foto alineados
   al contenedor: el carril arranca donde arranca el título. */
.gallery {
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --slide-gap: clamp(14px, 1.6vw, 24px);
}

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.gallery__head h2 { margin-bottom: var(--sp-2); }
.gallery__head .lede { margin: 0; max-width: 46ch; }

/* Sólidas en navy: sobre fondo blanco un botón fantasma se pierde */
.gallery__arrows { display: flex; gap: 12px; flex: none; }
.gallery__arrows button {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(1, 41, 103, .5);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.gallery__arrows button:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(7, 86, 198, .55);
}
.gallery__arrows button:active { transform: scale(.94); }
.gallery__arrows button[disabled] {
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: none;
  opacity: .55;
  pointer-events: none;
}
.gallery__arrows svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Carril --- */
.gallery__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  cursor: grab;
  /* barra nativa fuera: el avance se comunica con la línea de progreso */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery__viewport::-webkit-scrollbar { display: none; }

/* Mientras se arrastra, el snap se apaga para que el carril siga al puntero */
.gallery__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.gallery__track {
  display: flex;
  gap: var(--slide-gap);
  width: max-content;
  list-style: none;
}

.gallery__slide {
  flex: 0 0 clamp(268px, 40vw, 560px);
  scroll-snap-align: start;
}
.gallery__slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface);
  /* sin esto, arrastrar sobre una foto inicia el drag & drop del navegador */
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Progreso --- */
.gallery__ui { margin-top: clamp(26px, 3vw, 40px); }
.gallery__progress {
  position: relative;
  height: 3px;
  border-radius: 3px;
  /* --line sobre blanco daba 1.1:1: el riel no se veía, solo el relleno */
  background: #C3D6F0;
  overflow: hidden;
}
.gallery__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  border-radius: 2px;
  background: var(--blue);
  transition: width .18s ease, transform .18s ease;
}

/* --- Índice de servicios --- */
.index {
  counter-reset: idx;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3.5vw, 56px);
  margin-top: clamp(44px, 5vw, 72px);
  list-style: none;
}
.index li {
  counter-increment: idx;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.35;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.index li::before {
  content: counter(idx, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--blue);
}

/* 7. Piezas de contenido
   ------------------------------------------------------------ */

/* Badges de certificación (sección 4) */
.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: var(--sp-5);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.badges li {
  display: grid;
  place-items: center;
  padding: var(--sp-4) var(--sp-3);
  background: var(--paper);
  transition: background-color .2s ease;
}

.badges img {
  height: 78px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Quedaron cinco sellos al mudarse las ISO: el impar cierra la rejilla a lo
   ancho en vez de dejar media hilera vacía. El :nth-child(odd) evita que la
   regla se dispare si mañana el número vuelve a ser par. */
.badges li:last-child:nth-child(odd) { grid-column: 1 / -1; }


/* Desglose de sectores (sección 5) */
.sectors { margin-top: clamp(48px, 6vw, 80px); }

.sectors__intro {
  max-width: 60ch;
  padding-top: clamp(28px, 3.2vw, 40px);
  margin-bottom: clamp(28px, 3.2vw, 42px);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.sectors__intro h3 {
  color: #fff;
  margin-bottom: var(--sp-2);
}
.sectors__intro p {
  font-size: var(--fs-lede);
  color: rgba(255, 255, 255, .78);
}

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.sector {
  --pad: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  border: 1px solid rgba(143, 182, 238, .28);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
/* Sin translateY: la tarjeta no es un enlace y levantarla prometía un
   destino que no existe. El cambio de fondo basta como respuesta. */
.sector:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(143, 182, 238, .55);
}

/* La foto sangra hasta el borde de la tarjeta: el margen negativo cancela
   el padding, y el radio superior empata con el de la tarjeta. */
.sector__photo {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--sp-3);
}
.sector__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}


.sector h4 {
  color: #fff;
  margin-bottom: var(--sp-1);
}
.sector__where {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  letter-spacing: .02em;
  color: var(--blue-soft);
  margin-bottom: var(--sp-3);
}
.sector__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Sin `margin-top: auto`: empujaba la lista al fondo de la tarjeta y, como
   el grid iguala alturas, las tarjetas de texto corto abrían un hueco. El
   contenido arranca arriba y el sobrante queda abajo. */
.sector__points {
  display: grid;
  gap: var(--sp-1);
}
.sector__points li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}
.sector__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--blue-soft);
  border-bottom: 2px solid var(--blue-soft);
  transform: rotate(-45deg);
}

/* Nota de cobertura nacional (sección 5) */
.coverage {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 52ch;
  margin-bottom: var(--sp-5);
  padding: 18px 22px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .06);
  /* Borde completo, no franja lateral de 3px */
  border: 1px solid rgba(143, 182, 238, .45);
  border-radius: var(--radius);
}
.coverage strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}
/* Silueta de México en blanco sobre transparente: solo funciona sobre navy */
.coverage__map {
  flex: 0 0 auto;
  width: 104px;
  height: auto;
  opacity: .92;
}

/* Logos de clientes (sección 7) */
.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.logos li {
  display: grid;
  place-items: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--paper);
}
/* Los logos van siempre a color: son la prueba social del bloque y apagarlos
   restaba justo lo que el titular promete. */
.logos img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform .22s ease;
}
/* El hover solo amplía; no revela nada nuevo, así que se mantiene discreto. */
.logos li:hover img { transform: scale(1.12); }

/* Bloque de clientes: titular, texto y foto apilados en la columna izquierda;
   la cuadrícula completa ocupa la derecha de arriba abajo. */
.split__inner--logos .split__media { margin-top: var(--sp-5); }

/* El grid estira sus filas hasta la altura de la columna de texto: las dos
   mitades cierran a la misma línea en vez de dejar un hueco bajo los logos.
   El align-self vence el align-items: start del split, que aquí solo hace
   falta para que la foto no se descuelgue. */
.logos--full {
  margin-bottom: 0;
  align-self: stretch;
}
/* Veinticuatro cierran filas exactas tanto a cuatro columnas como a tres, así
   que no hace falta ensanchar ninguna celda. Si el número deja de ser múltiplo
   de 4 y de 3, hay que volver a resolver el hueco: no se lee como celda vacía
   sino como bloque de color, porque el "borde" del grid es su fondo asomando
   por el gap. */

/* 7c. Páginas legales (aviso de privacidad)
   ------------------------------------------------------------ */
.doc { padding: clamp(56px, 7vw, 96px) 0 var(--section-y); }
.doc__inner { max-width: 780px; margin-inline: auto; }

.doc__head {
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.doc__head h1 { margin-bottom: var(--sp-2); }
.doc__meta {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* Medida corta y renglón alto: es un texto para leer completo, no para escanear */
.doc__body { font-size: var(--fs-body); line-height: 1.75; color: var(--ink); }
.doc__body p { margin-bottom: var(--sp-4); }

/* Aviso de traducción de cortesía: el documento vinculante es el español */
.doc__note {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.doc__body em { font-style: italic; }
.doc__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.doc__list {
  list-style: decimal;
  padding-left: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.doc__list li {
  padding-left: 6px;
  margin-bottom: 8px;
}
.doc__list li::marker {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--blue);
}

.doc__back {
  margin-top: var(--sp-5);
  background: var(--navy);
  color: #fff;
}
.doc__back:hover { background: var(--blue); color: #fff; }

/* 8. Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  padding: var(--sp-7) 0 var(--sp-5);
  font-size: var(--fs-sm);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer__logo { height: 42px; width: auto; margin-bottom: var(--sp-3); }
.footer__brand p { max-width: 42ch; }

.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.footer__col li { margin-bottom: var(--sp-1); }
/* Área de toque utilizable en los enlaces del pie */
.footer__col a,
.footer__bottom a {
  display: inline-block;
  padding: 7px 0;
}
.footer__col a:hover { color: var(--blue-soft); }

.footer__social {
  display: flex;
  gap: 12px;
  margin-top: var(--sp-3);
}
.footer__social li { margin-bottom: 0; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: rgba(255, 255, 255, .82);
  transition: color .2s ease, border-color .2s ease;
}
.footer__social a:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }
.footer__social svg { width: 19px; height: 19px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: var(--sp-4);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, .58);
}

/* 9. Botón flotante de WhatsApp
   ------------------------------------------------------------ */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 10px 26px rgba(29, 168, 81, .38);
  transition: transform .18s ease, background-color .18s ease;
}
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:hover { background: var(--wa-dark); transform: scale(1.06); }

/* 10. Reveal al hacer scroll
   ------------------------------------------------------------ */
/* 240 ms, el techo del rango declarado en DESIGN.md. A 700 ms el reveal se
   percibía como efecto, no como acomodo. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .24s ease-out, transform .24s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 11. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --section-y: 80px; --nav-h: 88px; }
  .nav__inner { gap: 28px; }
  .nav__logo img { height: 50px; }
  .nav__links { gap: 22px; }
  .nav__cta { display: none; }

  .cert__grid { grid-template-columns: 1fr; gap: 44px; }
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert__body .lede { max-width: none; }

  /* A todo el ancho los cinco sellos entran en una sola hilera */
  .badges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .badges li:last-child:nth-child(odd) { grid-column: auto; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__mobile { display: none; }
  .nav__mobile.is-open { display: flex; }

  /* El selector deja la barra y reaparece dentro del panel desplegable */
  .nav__inner > .lang { display: none; }
  .lang--mobile {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-4);
    align-self: center;
  }

  .split__inner { grid-template-columns: 1fr; gap: 36px; }
  .split--alt .split__media { order: 0; }
  .split__media img { aspect-ratio: 16 / 10; }

  /* Ya no caben cinco de frente: dos columnas y el impar a lo ancho */
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .badges img { height: 86px; }

  .cert__head { flex-direction: row; align-items: flex-start; }
  .cert__seal { width: 92px; }

  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  :root { --section-y: 64px; --gutter: 20px; --nav-h: 76px; }
  .nav__logo img { height: 44px; }
  :root { --fs-body: 16px; }
  .hero { padding: 72px 0 104px; }
  .hero__lockup { gap: 16px; }
  .hero__badge { width: 74px; }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges li { padding: 18px 12px; }
  .badges img { height: 60px; }

  /* Las tres ISO se quedan de frente: apiladas el bloque medía tres pantallas
     y se perdía justo la comparación que el bloque presume. */
  .isos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iso {
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px 10px;
  }
  .iso__seal { height: 56px; }
  .iso__title { font-size: 15px; }
  .iso__noms { gap: 7px; width: 100%; }
  .iso__noms li { font-size: 11px; gap: 5px; }
  .iso__noms li::before { width: 12px; height: 12px; }

  /* La foto del hero deja de ser fondo y baja al flujo: entre el titular y el
     párrafo, completa y sin recorte. A lo ancho de un teléfono el cover se
     comía la escena y el velo azul la apagaba. */
  .hero { display: block; min-height: 0; padding: 40px 0 64px; }
  .hero__lockup { margin-bottom: 20px; }
  .hero__visual {
    position: static;
    align-self: stretch;
    width: 100%;
    margin: 0 0 26px;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hero__visual img { height: auto; }
  .hero__visual::after { display: none; }
  /* Sin pantalla completa que llenar, el indicador de scroll sobra */
  .hero__scroll { display: none; }

  /* Sin desfase: en columnas estrechas el escalonado solo deja huecos */
  .cert__mosaic { gap: 12px; }
  .cert__col { gap: 12px; }
  .cert__col--offset { margin-top: 0; }
  .cert__shot--tall, .cert__shot--wide { aspect-ratio: 1 / 1; }
  .cert__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .index { grid-template-columns: 1fr; }
  .index li { padding: 12px 0; }
  .sectors__grid { grid-template-columns: 1fr; }
  .gallery__head { display: block; }
  .gallery__arrows { display: none; }

  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos img { height: 28px; }
  .btn--lg { width: 100%; justify-content: center; }
}

/* Al imprimir o exportar a PDF, el IntersectionObserver no dispara en las
   secciones que nunca se vieron: salían en blanco. El PDF es justamente lo
   que un comprador reenvía internamente. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .nav, .wa-float, .hero__scroll, .gallery__arrows { display: none !important; }
  .gallery__viewport { overflow: visible; }
  .hero, .split--navy { background: #fff !important; }
}

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

  /* El carril se recorre a mano; sin desplazamiento suave automático */
  .gallery__viewport { scroll-behavior: auto; }
}