/* Capa responsive de ahnsa.com (carril-4/responsive-20261020). Va al final del <head> de cada página, después de todas
   las hojas del sitio y de las capas P2, submenú v2, aprender-nav y móvil; no cambia nada por debajo de 1800 px de ancho
   salvo lo marcado como «todas las vistas». */

/* ── 1. Monitores grandes y ultra anchos (LG 2560×1080, 3440×1440, 3840×1600, 4K) ──────────────────────────────────
   El sitio está diseñado para 1440 px: a 3440 px se veía diminuto al centro, con la cabecera pegada a las orillas.
   Se escala TODO el documento con `zoom` (el mismo efecto que el Ctrl + del navegador, pero sólo en pantallas grandes):
   textos, tarjetas, cuadrículas y bandas crecen juntos y el ancho útil queda entre ~1750 y ~2400 px CSS, que es para
   lo que las plantillas ya tienen bandas y máximos. El alto mínimo evita que una pantalla baja (2560×1080) quede con
   menos de ~860 px CSS de alto. Con Windows al 125 % o 150 % el navegador ya reporta menos ancho y cae en el escalón
   que le toca. */
@media (min-width: 1800px) { html { zoom: 1.1; } }
@media (min-width: 2200px) and (min-height: 1000px) { html { zoom: 1.25; } }
@media (min-width: 2800px) and (min-height: 1150px) { html { zoom: 1.4; } }
@media (min-width: 3300px) and (min-height: 1250px) { html { zoom: 1.5; } }
@media (min-width: 3800px) and (min-height: 1350px) { html { zoom: 1.6; } }

/* El aviso de cookies no crece con el escalado (queda ~1.1×): es pasajero y, más grande, tapaba botones de la primera
   pantalla. */
@media (min-width: 2200px) and (min-height: 1000px) { html #hmCk { zoom: .88; } }
@media (min-width: 2800px) and (min-height: 1150px) { html #hmCk { zoom: .79; } }
@media (min-width: 3300px) and (min-height: 1250px) { html #hmCk { zoom: .73; } }
@media (min-width: 3800px) and (min-height: 1350px) { html #hmCk { zoom: .69; } }

/* La cabecera: el fondo sigue de orilla a orilla; el logo, el menú y las acciones se alinean con la banda del
   contenido (--hm-banda, la misma del pie) en vez de irse a las orillas. */
@media (min-width: 1800px) {
  html nav.hm-hdr .hm-hdr-in { max-width: var(--hm-banda, 1728px); margin-inline: auto; }
}

/* ── 1b. Medida de línea (todas las vistas): los párrafos largos no pasan de ~72 caracteres por renglón. Sólo en los
   bloques de lectura que la matriz midió por encima de 95; en los centrados, el bloque se centra con su texto. ── */
html .ap-faq details > p, html .ap-pasos > li, html .ap-pr, html .av-corta > p, html .av-mat-fuente,
html .hm-faq__r > p, html .hm-mv__copy > p, html .hm-wc__cab > p, html .hm-bq-guias, html .cot-lead,
html .cot-vacio > p, html #prueba > p, html .tailwind--template-v3 .flex-col > p { max-width: 72ch; }
html .hm-wc__cab > p, html .cot-vacio > p { margin-inline: auto; }

/* ── 1c. Teléfono horizontal: la barra inferior (P2) ya trae «Cotizar» y WhatsApp; la barra vieja «Ver el catálogo ·
   Cotizar por WhatsApp» se encimaba con ella entre 740 y 1023 px de ancho con menos de 500 px de alto. ── */
@media (min-width: 740px) and (max-width: 1023px) and (max-height: 500px) and (pointer: coarse) {
  html body:has(> nav.am-tabs[data-ah-mobile-navigation]) > nav.ah-sticky { display: none !important; }
}

/* En la ficha, cuando aparece su barra de compra (body.ahf-barra-on), la barra vieja quedaba encima y la tapaba
   entera (768 y 820 px). Gana la de la ficha: es la acción de esa página. */
html body.ahf-barra-on > nav.ah-sticky { display: none !important; }

/* ── 2. Foco visible (todas las vistas): el buscador de la cabecera no mostraba ningún anillo con el teclado. ── */
html #hdrQ:focus-visible, html #miQ:focus-visible { outline: 2px solid #2f7de1; outline-offset: 2px; }

/* ── 2b. Objetivos táctiles de 44 px (sólo con dedo: pointer coarse; el escritorio con mouse no cambia). ───────────
   Los enlaces del pie, las migas, los chips y los botones chicos medían de 16 a 40 px de alto. Los que van dentro de
   un renglón de texto o de una tarjeta crecen con relleno y margen negativo del mismo tamaño: el área de toque llega a
   44 px y lo demás de la página no se mueve. */
@media (pointer: coarse) {
  html footer.global-styles--footer li > a,
  html footer.global-styles--footer .hm-foot-links a,
  html footer.global-styles--footer .hm-foot-contacto a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  html footer.global-styles--footer h3 > button { min-height: 44px; }
  html nav.hm-hdr .hm-nav > li > a, html nav.hm-hdr .hm-hdr-acts > a, html #hmCkOk {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  html .nhv-iso { width: 44px; height: 44px; max-width: none; max-height: none; }
  html .ahnav-migas > a, html .ap-migas > li > a, html .ahf-migas > a, html .bp-crumbs > a, html .mi-migas > a,
  html nav[aria-label="Migas"] a, html nav[aria-label="Ruta de navegación"] a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
    padding-block: 14px; margin-block: -14px;
  }
  html .ap-chip, html .am-a-chip, html .av-chip, html .hs-et > a, html .nhv-iso, html .nhv-p,
  html .gm-otra, html .ap-sirvio button, html .av-fig-zoom, html .ahf-fav, html .fam-btn,
  html .am-a-add, html .am-a-cod, html .cot-fila,
  html a.bg-accent, html a.bg-transparent {
    min-height: 44px; min-width: 44px;
  }
  html .ap-chip, html .am-a-chip, html .av-chip, html .hs-et > a, html .fam-btn, html a.bg-accent, html a.bg-transparent {
    display: inline-flex; align-items: center; justify-content: center;
  }
  html .sumi-card-cod, html .am-a-cab > a, html .ahf-val, html .ahf-tira-v a, html .ahf-resumen-ver, html .hm-res__ver,
  html .pie-hubs > a, html td.mk2-fam > a {
    display: inline-block; padding-block: 14px; margin-block: -14px;
  }
  html .hm-nube > a, html .hf-track-controls > button, html .ahf-descargas > .ahf-btn, html .nhv-cta { min-height: 44px; }
  html .ck-paso-btn { min-width: 44px; }
}

/* ── 3. «Volver arriba» (lo crea rsp.js sólo en páginas largas). La posición la calcula rsp.js para no encimarse con
   WhatsApp, la barra del teléfono ni el aviso de cookies. ── */
.rsp-arriba {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15, 30, 70, .14);
  background: #fff; color: #10204a; box-shadow: 0 6px 18px rgba(10, 20, 50, .18);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.rsp-arriba[data-visible] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.rsp-arriba:focus-visible { outline: 2px solid #2f7de1; outline-offset: 3px; }
.rsp-arriba svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .rsp-arriba { transition: none; } }
@media print { .rsp-arriba { display: none !important; } }

/* ── 4. Portada en el teléfono (Mario aprobó el prototipo del 20-oct: ESPEC.md de
   OneDrive/AHNSA_Render/salida/20261020_portada_movil). Misma historia que el escritorio y en su orden:
   chips (se quedan arriba, decisión de Mario) → h1 → subtítulo azul → píldora del asesor → tarjetas navy (tile1/tile2)
   → 4 operaciones 2×2 → envío gratis → vitrina navy (rsp.js la saca del acordeón y la pone aquí) → lo demás.
   Sólo bajo 740 px (el corte de la capa móvil) y sólo en la portada (main.am-mobile-home). ── */
@media (max-width: 739.98px) {
  html:root main.am-mobile-home { display: flex; flex-direction: column; }
  html:root main.am-mobile-home > * { order: 4; }
  html:root main.am-mobile-home > .am-a--arriba { display: contents; }
  html:root main.am-mobile-home > .am-a--arriba > .am-a-chips { order: 0; }
  html:root main.am-mobile-home > #hm-hero { order: 1; }
  html:root main.am-mobile-home > .am-a--arriba > .am-a-envio { order: 2; margin: 18px 16px 0; }
  html:root main.am-mobile-home > #hm-vitrina { order: 3; margin-top: 26px; }

  /* El héroe: una columna, cada bloque con su propio relleno. */
  html:root main.am-mobile-home #hm-hero {
    display: flex; flex-direction: column; gap: 0; padding: 0 0 4px; grid-template-columns: none;
  }
  html:root main.am-mobile-home #hm-hero > .am-operations-title { display: none; }

  /* 1. El h1, protagonista (en vivo era un pie de foto de 12 px gris). */
  html:root main.am-mobile-home #hm-hero .hm-hero__copy {
    display: block; order: -1; padding: 22px 16px 0; margin: 0; grid-column: auto; grid-row: auto;
  }
  html:root main.am-mobile-home #hm-hero .hm-hero__h1:not(.hm-hero__h1-sub) {
    font-size: clamp(2rem, 8.6vw, 2.375rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.02;
    color: #000; text-wrap: balance; margin: 0;
  }
  /* 2. El subtítulo rotativo (la animación es la del escritorio; con movimiento reducido queda el primero). */
  html:root main.am-mobile-home #hm-hero .hm-hero__h1-sub {
    display: block; margin: 8px 0 0; font-size: clamp(1.125rem, 5vw, 1.3125rem); font-weight: 500; letter-spacing: -.01em;
    line-height: 1.3; color: var(--hm-azul, #1f7bc1); height: 1.3em; overflow: hidden; position: relative;
  }
  html:root main.am-mobile-home #hm-hero .hm-hero__h1-sub .hm-h1rot {
    display: grid; font-size: 1em; line-height: 1.3; min-height: 0; margin: 0; color: inherit; letter-spacing: inherit;
  }
  html:root main.am-mobile-home #hm-hero .hm-hero__h1-sub .hm-h1rot__i { white-space: nowrap; }
  /* 3. La píldora del asesor, el CTA principal del escritorio, con 44 px para el dedo. */
  html:root main.am-mobile-home #hm-hero .hm-hero__asesor {
    display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; margin-top: 16px; padding: 0 18px;
    font-size: 14px; background: var(--hm-azul, #1f7bc1); color: #fff; border-radius: 999px;
  }

  /* 4. Las tarjetas navy de arte, en carrusel con snap. tile1 ya se precarga con fetchpriority=high: es el LCP. La caja
     reserva su alto con aspect-ratio (CLS 0). El arte es 3.3:1; aquí se encuadra a 4:3 sobre la pieza del centro. */
  /* (la hoja de la portada del 16-oct, «hb-coherent», pinta el arte como una franja 3.3:1 con un fondo difuminado y
     todo con !important: aquí se le gana con más especificidad, también con !important, sólo bajo 740 px) */
  html:root main.am-mobile-home #hm-hero .hm-tiles.hb-coherent {
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important;
    grid-auto-columns: 86% !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 16px; scroll-padding: 0 16px; margin: 22px 0 0 !important; scrollbar-width: none; order: 0;
  }
  html:root main.am-mobile-home #hm-hero .hm-tiles::-webkit-scrollbar { display: none; }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hm-tile {
    scroll-snap-align: start; aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important;
    flex: none; border-radius: 22px; overflow: hidden;
  }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hb-coherent__art {
    inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
    aspect-ratio: auto !important; transform: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hb-coherent__art > .hm-tile__img {
    object-fit: cover !important; object-position: 50% 62% !important; transform: scale(1.22) !important;
  }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hb-coherent__ambient { display: none; }
  html:root main.am-mobile-home #hm-hero .hm-tile .hm-tile__img-hover { display: none !important; }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hm-tile__titulo { font-size: 20px !important; max-width: none !important; }
  html:root main.am-mobile-home #hm-hero .hb-coherent .hm-tile__titulo span { display: inline !important; }

  /* 5. Las cuatro operaciones en 2×2, legibles (los conteos eran de 9-10 px). */
  html:root main.am-mobile-home #hm-hero .hm-ops {
    order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 18px 16px 0; margin: 0;
    grid-column: auto; grid-row: auto;
  }
  html:root main.am-mobile-home #hm-hero .hm-op {
    display: grid; grid-template-columns: 44px 1fr; align-items: center; flex-direction: row; justify-content: start;
    height: auto; min-height: 72px; gap: 8px; padding: 10px 12px 10px 8px; border-radius: 14px;
  }
  html:root main.am-mobile-home #hm-hero .hm-op__img { width: 44px; height: 44px; flex: 0 0 44px; }
  html:root main.am-mobile-home #hm-hero .hm-op__texto { text-align: left; min-width: 0; }
  html:root main.am-mobile-home #hm-hero .hm-op__texto b { font-size: 15px; font-weight: 600; line-height: 1.2; }
  html:root main.am-mobile-home #hm-hero .hm-op__n { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  html:root main.am-mobile-home #hm-hero .hm-op__chevron { display: none; }
  /* A 320 px cada tarjeta mide 140 px: con la foto de 44 px el conteo («54,707 códigos») se cortaba 11-18 px. */
  @media (max-width: 359.98px) {
    html:root main.am-mobile-home #hm-hero .hm-op { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 8px 8px 8px 6px; }
    html:root main.am-mobile-home #hm-hero .hm-op__img { width: 30px; height: 30px; flex: 0 0 30px; }
    html:root main.am-mobile-home #hm-hero .hm-op__texto b { font-size: 14px; }
    html:root main.am-mobile-home #hm-hero .hm-op__n { font-size: 11px; }
  }

  /* 7. La vitrina navy: el cartel siempre a la vista (antes, un bloque negro de ~1,000 px dentro del acordeón cerrado);
     el video sólo al tocar «Reproducir» (el JS de la portada ya no lo arranca solo bajo 740 px). */
  html:root main.am-mobile-home #hm-vitrina { padding: 0 16px; }
  html:root main.am-mobile-home #hm-vitrina .hm-b6__media { aspect-ratio: 3240 / 3390; max-height: 440px; height: auto; }
  html:root main.am-mobile-home #hm-vitrina .hm-b6__fondo { object-fit: cover; object-position: 50% 40%; width: 100%; height: 100%; }
  html:root main.am-mobile-home #hm-vitrina .hm-b6__h2 { font-size: clamp(2rem, 9vw, 2.5rem); letter-spacing: -.05em; line-height: 1; }
  html:root main.am-mobile-home #hm-vitrina .hm-btn--oro { height: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  html:root main.am-mobile-home #hm-vitrina .hf-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
  }
  html:root main.am-mobile-home #hm-vitrina .hf-track > * { scroll-snap-align: start; width: auto; flex: none; }
  html:root main.am-mobile-home #hm-vitrina .hf-track img { height: auto; aspect-ratio: 1; }
}
@media (max-width: 739.98px) and (prefers-reduced-motion: reduce) {
  html:root main.am-mobile-home #hm-hero .hm-hero__h1-sub .hm-h1rot__i { animation: none; opacity: 0; transform: none; }
  html:root main.am-mobile-home #hm-hero .hm-hero__h1-sub .hm-h1rot__i:first-child { opacity: 1; }
}

/* ── 5. Sin salto al llegar la letra (todas las páginas). Inter llega tarde en 4G (~6 s medido en /guia-de-torneado a
   390 px) y, con font-display:swap, el texto se recompone: el h1 crece ~43 px y empuja la figura, «Respuesta corta» y
   el aviso de cookies (CLS 0.03-0.05 por visita; el coordinador midió ~0.2 en vivo). Todas las pilas del sitio caen,
   tras "Inter", en "Helvetica Neue": ese nombre se redefine aquí con Arial ajustada a las medidas de Inter (los mismos
   valores que usa Next.js para Inter sobre Arial), así el texto provisional ocupa casi lo mismo y el cambio no mueve
   nada. Sólo actúa mientras Inter no está; cuando llega, se usa Inter como siempre. */
@font-face {
  font-family: "Helvetica Neue";
  /* Sólo Arial: los ajustes son los de Arial. (Android de fábrica no trae Arial: ahí la regla no aplica y queda como antes.) */
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%;
}