/* ════════════════════════════════════════════════════════════
   RESPONSIVE V2 — Capa adaptativa móvil / tablet (UNIFICADA)
   Contrato: móvil ≤640px · tablet 641–1024px · desktop ≥1025px (intacto)

   Versión D unificada (2026-05-25) — combina lo mejor de las 3
   variantes que existían inline en los 16 HTML:
     - A (index.html, 13.2 KB): defensa anti-overflow + slide-in
       completo + reglas específicas .clientes
     - B (14 archivos, 8.8 KB): selectores genéricos (.hero, .srv-hero,
       .legal-doc__title, .hero-contacto__title) + section padding
       genérico + grids genéricos
     - C (servicios.html, 7.1 KB): piloto original, subsumida por B
   Resultado: cero pérdida de funcionalidad cross-site. Las reglas
   específicas (.clientes, .legal-doc__title) solo se activan donde
   existe el elemento.
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   Defensa global anti-overflow horizontal (móvil + tablet)
   Cualquier hijo que exceda el viewport (SVG decorativo, grid mal
   dimensionado, transform que empuja) ya no provocará scroll lateral
   del body. Sin esto, la hamburguesa queda fuera de pantalla.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  /* Nav defensivo: nunca permitir que crezca más del viewport */
  .nav {
    max-width: 100vw;
    min-width: 0;
    flex-wrap: nowrap !important;
    box-sizing: border-box;
  }
  .nav__logo {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .nav__logo svg { max-width: 100%; height: 44px !important; }
  .nav__burger {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Mobile menu — slide-in panel pattern (Apple/Stripe)
   Dos páginas (.nav__mobile-page) apiladas en grid stack.
   Al activar .is-on-services en .nav__mobile, la página principal
   sale por la izquierda y entra la página de Servicios.
   ──────────────────────────────────────────────────────────── */
.nav__mobile {
  overflow: hidden;
  max-height: calc(100svh - var(--nav-h, 64px));
}
.nav__mobile-pages {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "stack";
  width: 100%;
  overflow: hidden;
}
.nav__mobile-page {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1),
              opacity .24s ease,
              visibility 0s linear .32s;
  will-change: transform;
  min-width: 0;
}
.nav__mobile-page--main { transform: translateX(0); }
.nav__mobile-page--services {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}
.nav__mobile.is-on-services .nav__mobile-page--main {
  transform: translateX(-12%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav__mobile.is-on-services .nav__mobile-page--services {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1),
              opacity .24s ease .04s,
              visibility 0s linear 0s;
}

/* Trigger (Servicios) — chevron derecha en lugar de abajo */
.nav__mobile-toggle .nav__mobile-chev {
  opacity: 0.65;
  transition: transform .2s ease, opacity .2s ease;
  flex-shrink: 0;
}
.nav__mobile-toggle:hover .nav__mobile-chev {
  opacity: 1;
  transform: translateX(2px);
}

/* Back button */
.nav__mobile-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 28px;
  cursor: pointer;
  text-align: left;
  transition: color .15s, background .15s;
}
.nav__mobile-back:hover {
  color: var(--turquesa, #2BA8B2);
  background: rgba(255,255,255,0.03);
}
.nav__mobile-back svg {
  flex-shrink: 0;
  transition: transform .2s ease;
}
.nav__mobile-back:hover svg { transform: translateX(-2px); }

/* Título de la página secundaria */
.nav__mobile-page-title {
  padding: 24px 28px 14px;
  margin: 0;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: var(--white, #FFF);
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.1;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Sublinks dentro del slide-in: tipografía más legible (ya no
   necesitan indent visual porque son la página entera, no acordeón) */
.nav__mobile-page--services .nav__mobile-sublink {
  padding: 18px 28px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.nav__mobile-page--services .nav__mobile-sublink:hover {
  color: var(--turquesa, #2BA8B2) !important;
  background: rgba(255,255,255,0.03) !important;
}

/* Link "hub" del submenú móvil de Servicios */
.nav__mobile-sublink--hub {
  color: var(--turquesa, #2BA8B2) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  position: relative;
}
.nav__mobile-sublink--hub::after {
  content: '→';
  margin-left: 8px;
  opacity: 0.7;
  transition: transform .2s ease;
}
.nav__mobile-sublink--hub:hover::after { transform: translateX(3px); }

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .nav__mobile-page { transition: none !important; }
}

/* ─── Nav: hamburguesa desde ≤1024px (incluye tablet) ─── */
@media (max-width: 1024px) {
  .nav__menu        { display: none !important; }
  .nav__utils       { display: none !important; }
  .nav__search-wrap { display: none !important; }
  .nav__contact     { display: none !important; }
  .nav__burger      { display: flex !important; }
}

/* ════════════════════════════════════════════════════════════
   TABLET (641–1024px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  .nav { padding: 0 28px; }

  /* Hero: selectores genéricos (.hero + .srv-hero) */
  .hero, .srv-hero { min-height: 84svh; }
  .hero__body, .srv-hero__body {
    padding: calc(var(--nav-h, 64px) + 48px) 40px 96px;
    max-width: 720px;
  }

  /* Clientes / "Infraestructuras en operación" (específico index.html;
     no daña páginas sin .clientes porque selector no matchea) */
  .clientes { padding: 80px 0 96px; }
  .clientes__header { padding: 0 40px; }
  .clientes__contexts { padding: 32px 40px; }

  /* Cifras */
  .cifras__inner { padding: 80px 40px 64px; }
  .cifras__row { gap: 24px; }

  /* Áreas / disciplinas */
  .areas, .disciplinas { padding: 72px 40px; }

  /* Entornos: 2 cols intermedios (entre 3 desktop y 1 móvil) */
  .entornos { padding: 72px 40px; }
  .entornos__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .entorno:nth-child(3n)  { border-right: 1px solid rgba(30,30,30,0.10); }
  .entorno:nth-child(2n)  { border-right: none; }
  .entorno:nth-child(n+5) { border-bottom: none; }
  .entorno:nth-child(-n+4) { border-bottom: 1px solid rgba(30,30,30,0.10); }
  .entorno__link { padding: 36px 30px 32px; min-height: 200px; }
  .entorno__title { font-size: 28px; }

  /* Footer 2×2 con brand + contacto full-width */
  .footer { padding: 56px 40px 24px; }
  .footer__top {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 32px !important;
  }
  .footer__brand,
  .footer__contact-col { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════
   MÓVIL (≤640px) — máxima claridad, una idea por pantalla
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }

  /* Nav */
  .nav { padding: 0 18px; }

  /* ─── Hero (genérico: .hero + .srv-hero) ─── */
  .hero, .srv-hero { min-height: 92svh; }
  .hero__body, .srv-hero__body {
    padding: calc(var(--nav-h, 64px) + 28px) 22px 100px;
    max-width: 100%;
  }
  .hero__title,
  .srv-hero__title,
  .legal-doc__title,
  .hero-contacto__title {
    font-size: clamp(34px, 10vw, 54px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em !important;
  }
  .hero__sub,
  .srv-hero__sub,
  .hero-contacto__sub {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    margin-top: 16px;
  }
  .hero__network,
  .hero__scroll-cue,
  .srv-hero__scroll,
  .hero__slide-net { display: none !important; }
  .hero__ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 28px !important;
    width: 100%;
  }
  .hero__ctas .btn-primary,
  .hero__ctas .btn-ghost,
  .hero__ctas .btn-outline-red {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    padding: 15px 24px;
    font-size: 15px;
  }
  /* Labels laterales del hero a posición compacta o ocultas */
  .hero__label-name, .hero__label-desc { display: none !important; }

  /* ─── Section padding genérico — todas las secciones a 18px lateral ─── */
  .clientes, .cifras, .areas, .entornos, .compania, .principios,
  .liderazgo, .modelo, .partners, .interlude, .friccion, .cultura,
  .disciplinas, .cv, .cierre, .contacto, .cobertura, .trust-band,
  .problema, .capacidades, .cap, .enfoque, .testimonial,
  .srv-intro, .srv-panels, .srv-cta, .legal-doc {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .clientes__header, .cifras__inner, .entornos__header,
  .problema__inner, .cap__inner, .enfoque__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ─── Clientes / "Infraestructuras en operación" — específico index ─── */
  .clientes { padding: 56px 0 64px !important; }
  .clientes__header {
    padding: 0 18px !important;
    margin-bottom: 40px;
    align-items: stretch;
  }
  .clientes__label { font-size: 10px; letter-spacing: 0.18em; }
  .clientes__title {
    font-size: clamp(26px, 7.5vw, 34px);
    line-height: 1.1;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .clientes__sub {
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 100%;
  }
  .clientes__contexts {
    padding: 22px 18px !important;
    margin: 32px -18px 0;
    width: calc(100% + 36px);
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.55);
  }
  .clientes__contexts li {
    flex: 1 1 100%;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(30,30,30,0.06);
  }
  .clientes__contexts li:last-child { border-bottom: none; }
  .clientes__contexts li + li::before { display: none !important; }
  .ctx-name { font-size: 13px !important; letter-spacing: 0.10em; }
  .ctx-crit { font-size: 12px !important; }
  .clientes__carousel { padding: 0 18px; }

  /* ─── Cifras: 1-col stack con separadores ─── */
  .cifras { padding: 0; }
  .cifras__inner { padding: 56px 22px 48px !important; }
  .cifras__header { margin-bottom: 32px; }
  .cifras__row { flex-direction: column !important; gap: 0 !important; }
  .cifra {
    padding: 28px 8px !important;
    border-right: none !important;
  }
  .cifra + .cifra::before { display: none !important; }
  .cifra + .cifra { border-top: 1px solid rgba(255,255,255,0.08); }
  .cifras__title { font-size: clamp(26px, 7.5vw, 34px); }
  .cifra__num { font-size: clamp(48px, 14vw, 68px); }
  .cifra__label { font-size: 13.5px; line-height: 1.45; }

  /* ─── Áreas / disciplinas: 1 col ─── */
  .areas, .disciplinas { padding: 56px 18px; }
  .areas__grid, .disciplinas__grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .areas__geo, .disciplinas__geo { display: none; }
  .area-card { padding: 26px 22px; min-height: auto; }
  .area-card__title { font-size: 20px; line-height: 1.2; }
  .area-card__sub   { font-size: 13px; margin-bottom: 10px; }
  .area-card__body  { font-size: 14.5px; line-height: 1.55; }

  /* ─── Grids genéricos: cualquier grid de cards a 1 col en móvil ─── */
  .cap__grid, .problema__grid, .principios__grid, .partners__grid,
  .liderazgo__grid, .cobertura__grid, .zona-card,
  .opera__grid, .valores__grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* ─── Entornos: 1 columna stack (cards index.html) ─── */
  .entornos { padding: 56px 18px; }
  .entornos__header {
    padding: 0;
    margin-bottom: 28px;
    max-width: 100%;
  }
  .entornos__intro { font-size: 14.5px; line-height: 1.6; }
  .entornos__grid {
    grid-template-columns: 1fr !important;
    border: 1px solid rgba(30,30,30,0.10);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .entorno {
    border-right: none !important;
    border-bottom: 1px solid rgba(30,30,30,0.10) !important;
  }
  .entorno:last-child { border-bottom: none !important; }
  .entorno__ghost {
    font-size: 56px !important;
    right: 16px !important;
    bottom: 8px !important;
  }
  .entorno__link {
    padding: 26px 22px 24px !important;
    min-height: auto !important;
  }
  .entorno__icon { width: 24px !important; height: 24px !important; margin-bottom: 14px !important; }
  .entorno__num { font-size: 10px !important; margin-bottom: 8px !important; }
  .entorno__title { font-size: 24px !important; margin-bottom: 8px !important; }
  .entorno__sub { font-size: 14.5px !important; line-height: 1.55 !important; }
  /* Arrow siempre visible en móvil (no hay hover en touch) */
  .entorno__arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
    margin-top: 14px !important;
    font-size: 13px !important;
  }
  /* Sin transformación negra en touch */
  .entorno:hover .entorno__link { background: var(--white) !important; }
  .entorno:hover .entorno__title { color: var(--negro) !important; }
  .entorno:hover .entorno__sub { color: rgba(30,30,30,0.78) !important; }

  /* ─── Footer: 1 col + acordeón progresivo ─── */
  .footer { padding: 40px 18px 24px; }
  .footer__top {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .footer__brand {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
  }
  .footer__contact-col {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
  }
  body.js-on .footer__top > nav {
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  body.js-on .footer__top > nav .footer__col-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 18px 4px;
    margin: 0;
    user-select: none;
    min-height: 48px;
  }
  body.js-on .footer__top > nav .footer__col-title::after {
    content: '+';
    font-size: 22px;
    font-weight: 300;
    transition: transform .22s ease;
    opacity: .7;
  }
  body.js-on .footer__top > nav.is-open .footer__col-title::after {
    content: '−';
  }
  body.js-on .footer__top > nav .footer__links {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
    padding: 0;
  }
  body.js-on .footer__top > nav.is-open .footer__links {
    max-height: 600px;
    padding-bottom: 14px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    padding-top: 20px;
  }

  /* CTAs táctiles ≥48px en móvil */
  .btn-primary, .btn-ghost, .btn-outline-red {
    min-height: 48px;
  }
}