/* ═══════════════════════════════════════════════════════════════════
   MOBILE NARROW · pantallas estrechas (≤400px)
   ───────────────────────────────────────────────────────────────────
   Hasta ahora el breakpoint más bajo del proyecto era 480px, y la mayoría
   de páginas paraban en 640/768px. En dispositivos de 320–400px (Galaxy A,
   iPhone SE/mini, Android de gama media) el layout se desbordaba: en el
   header el bloque de iconos medía 170px fijos y no encogía, así que el
   logo se quedaba sin sitio y acababa solapándose con ellos.

   Este archivo se encola EL ÚLTIMO en todas las páginas (incluidas las LP),
   así gana la cascada sin necesidad de !important salvo donde hay que
   desactivar reglas que ya lo usan (tablas comparativas en estado is-stuck).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Red de seguridad: cero scroll horizontal ═══
   Sin media query a propósito: los orbes decorativos de las secciones
   (.orb, .ao-hero-blob, .ablog-orb…) se salen del viewport adrede y basta
   con que una sección no recorte para que toda la página se pueda arrastrar
   en horizontal. Pasaba en /servicios-web/ a cualquier ancho.
   `clip` en lugar de `hidden`: no crea contenedor de scroll, así que no
   rompe los position:sticky del header ni de las cabeceras de tabla. */
html, body { overflow-x: clip; }

@media (max-width:400px) {

  /* ─── 2 · HEADER ────────────────────────────────────────────────────
     Se oculta la bolsa (sigue accesible desde el menú móvil y desde el
     panel). Quedan chat + usuario + burger. El logo pasa a poder encoger
     con min-width:0 para que nunca se solape con los controles. */
  .ah-bag { display: none; }

  .ah-bar { padding: 0 12px; }
  .ah--pill .ah-bar { padding: 0 6px; }

  .ah-logo { padding: 0 4px; min-width: 0; flex: 0 1 auto; }
  .ah-logo img { max-width: 100%; height: 24px; }

  .ah-right { flex: 0 0 auto; gap: 5px; padding-right: 0; }
  .ah-support, .ah-user { width: 34px; height: 34px; }
  .ah-support-ico svg, .ah-user-ico svg { width: 17px; height: 17px; }
  .ah-burger { width: 34px; height: 34px; }

  /* ─── 2b · TOP BANNER ───────────────────────────────────────────────
     El texto envolvía a 3-4 líneas y el banner crecía hasta ~160px,
     tapando por completo el header. Se limita a 2 líneas y se sube el
     fallback de --atb-h para el primer pintado (antes de que shared.js
     mida el alto real). */
  .atb-inner { font-size: 11.5px; padding: 7px 34px 7px 10px; gap: 7px; }
  .atb-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-width: 0;
  }
  .atb-cta { font-size: 10px; padding: 4px 9px; }
  .atb-close { right: 8px; width: 24px; height: 24px; }

  body.has-topbanner { padding-top: var(--atb-h,62px); }
  body.has-topbanner .ah,
  body.has-topbanner .ah--pill { top: var(--atb-h,62px); }

  /* Menú móvil: aprovechar el ancho */
  .am-panels { padding: 0 18px; }
  .am-tabs { padding: 0 18px; }
  .am-one { padding: 14px; }

  /* ─── 4 · Suelo de legibilidad en elementos globales ────────────────
     Nada por debajo de 11px en badges y etiquetas que salen en todas
     las páginas (footer y bloque de precios compartido). */
  .af-badge { font-size: 11px; }
  .af-pay-l { font-size: 11px; }
  .aiden-pricing .apr-tab-hint { font-size: 11px; }
  .aiden-pricing .apr-save { font-size: 11px; }

  /* ─── 5 · Targets táctiles ──────────────────────────────────────────
     Los enlaces del pie quedaban en ~28px de alto. */
  .af-legal a, .af-contact a { padding: 4px 0; display: inline-block; }
}


/* ═══ TABLAS COMPARATIVAS · ≤640px ═══
   Umbral más alto que el resto: la tabla de servicios-web necesita 433px
   de ancho mínimo, así que a 430px seguía provocando scroll lateral. */
@media (max-width:640px) {

  /* Antes se encogían hasta 7,5px de tipografía para intentar caber, y aun
     así desbordaban. Ahora el contenedor hace scroll horizontal y el texto
     vuelve a un tamaño legible. Los !important anulan las reglas is-stuck
     del CSS de página, que también los usan. */
  .web-compare-wrap,
  .dtw-compare-wrap,
  .ap-tscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .aiden-page-web .web-compare-table,
  .aiden-page-dtw .dtw-compare-table { min-width: 420px; }
  .ap-tscroll .ap-dash-table { min-width: 400px; }

  /* El sticky del thead se calcularía contra el contenedor con scroll,
     no contra el viewport: se desactiva y con él el modo comprimido. */
  .aiden-page-web .web-compare-table thead th,
  .aiden-page-dtw .dtw-compare-table thead th { position: static; }

  .aiden-page-web .web-compare-table th,
  .aiden-page-web .web-compare-table td,
  .aiden-page-dtw .dtw-compare-table th,
  .aiden-page-dtw .dtw-compare-table td { padding: 11px 10px !important; font-size: 12.5px !important; }

  .aiden-page-web .web-compare-th-name,
  .aiden-page-dtw .dtw-compare-th-name { font-size: 12.5px !important; }
  .aiden-page-web .web-compare-th-price,
  .aiden-page-dtw .dtw-compare-th-price { font-size: 13px !important; }
  .aiden-page-web .web-compare-th-price span,
  .aiden-page-dtw .dtw-compare-th-price span { font-size: 11px !important; }
}

/* ═══ 6 · Blowout de grid/flex ═══
   Un track `1fr` nunca baja del min-content de su contenido, así que estas
   columnas se quedaban más anchas que su propia rejilla y se salían por la
   derecha, descentradas (se veía claro en las tarjetas de /aiden-one/: la
   rejilla medía 310px y las tarjetas 331px). min-width:0 permite que el
   track encoja; verificado que ningún contenido queda cortado. */
@media (max-width:900px) {
  .aiden-page-aiden-one .ao-cards > *,
  .aiden-page-aiden-one .ao-col > *,
  .aiden-page-aiden-one .ao-dcards > * { min-width: 0; }
}

@media (max-width:640px) {
  .correo-hero-col,
  .wp-hero-col,
  .inv-contact-left,
  .inv-contact-right,
  .ap-dash-kpi,
  .ap-btn,
  .svcd-cli-reader,
  .svcd-wpsc-tab { min-width: 0; }
}

/* Móviles muy estrechos (≤340px): un punto más de holgura en el header */
@media (max-width:340px) {
  .ah-bar { padding: 0 10px; }
  .ah-right { gap: 4px; }
  .ah-support, .ah-user, .ah-burger { width: 32px; height: 32px; }
  .ah-logo img { height: 22px; }
}