/* ---- Integración con el sitio (2-nov). Va después de cabecera-pie.css de la laptop y después de todas las hojas viejas. ---- */
/* Las hojas viejas siguen midiendo con estas variables; ya no hay promo ni barra que se esconda. */
:root{--hm-promo-h:0px;--hm-hdr-h:72px;--hm-cab-h:72px}
@media(max-width:1120px){:root{--hm-hdr-h:64px;--hm-cab-h:64px}}
html{scroll-padding-top:calc(var(--hm-hdr-h) + 12px)}
/* con-hdr: la cabecera ocupa su alto; las hojas viejas reservaban el de la cabecera fija. */
body.con-hdr{margin:0;padding-top:0}
.hdr{z-index:701}
.fin-p{animation:none;isolation:isolate}
/* Siempre va abajo de la primera pantalla: no se calcula hasta acercarse (LCP de las páginas viejas, medido). */
.fin-p{content-visibility:auto;contain-intrinsic-size:auto 1400px}
@media(max-width:760px){.fin-p{contain-intrinsic-size:auto 3400px}}
/* rsp.js ajusta el relleno del pie en línea midiendo sus hijos: con content-visibility mide de más. */
.fin-p{padding-bottom:calc(28px + var(--ah-pulgar-total,0px))!important}
.fin-p::before,.fin-p::after{content:none}
/* rsp.js mide el último enlace del pie: lo plegado no debe contar. */
.fp-mas:not([open])>.fp-mg{display:none}
/* Decisión de Mario (2-nov): en el teléfono no hay barra inferior; sus tres destinos están en la cabecera y el menú. La crea el
   guion móvil, que también lleva los filtros y se queda: aquí se apaga y lo que medía sobre ella baja al borde. */
.am-tabs{display:none!important}
html:root{--ah-pulgar-h:0px!important;--ah-pulgar-total:env(safe-area-inset-bottom,0px)!important}
html body.con-hdr{padding-bottom:var(--ah-pulgar-total)}
/* En las guías, la barra de Aprender del teléfono va abajo: el flotante y el aviso suben sobre ella. */
body.apm-con-barra .wa-f{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 68px)}
body.apm-con-barra #hmCk{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 68px)}
/* El WhatsApp y el aviso suben sobre las barras fijas de compra: la de la ficha mientras está puesta. */
body.ahf-barra-on .wa-f,body.ahf-barra-on #hmCk{transform:translateY(calc(-1*var(--ahf-barra-h,64px)))}
:root.am-sin-scroll body.ahf-barra-on .wa-f,:root.am-sin-scroll body.ahf-barra-on #hmCk{transform:none}
/* «Volver arriba» lo coloca rsp.js midiendo a lo sumo cada medio segundo: con la barra de la ficha no debe quedar bajo el flotante. */
body.ahf-barra-on .rsp-arriba{bottom:calc(92px + var(--ahf-barra-h,64px))!important}
/* /pago en teléfono: la barra fija lleva el importe y el botón de pagar, y arriba ya está «Ayuda por WhatsApp». Con el teclado abierto, igual. */
@media(max-width:899.98px){body:has(.pg-barra:not([hidden])) .wa-f{display:none}}
body:has(#legalcaja:not([hidden])) .wa-f{visibility:hidden}
.am-keyboard .wa-f{display:none}
/* Aviso de cookies del sitio con el aspecto de la maqueta. Va por id: /pago ya usa la clase .ck. */
#hmCk{box-sizing:border-box;--s0:oklch(.970 .0029 264.5);--s1:oklch(.942 .0075 260.7);--t1:oklch(.214 .0103 268.2);--azulv:oklch(.383 .1236 267.9);position:fixed;z-index:702;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:min(400px,calc(100vw - 104px));padding:16px;border-radius:16px;background:var(--s0);color:var(--t1);box-shadow:0 0 0 1px oklch(.3 .02 258/.08),0 18px 44px oklch(.25 .02 258/.18);font:400 .9rem/1.4 Archivo,"Helvetica Neue",Arial,sans-serif}
#hmCk[hidden]{display:none}#hmCk p{margin:0}#hmCk a{color:var(--azulv)}
#hmCk div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}#hmCk:focus{outline:none}
html.menu-ab #hmCk{visibility:hidden}
/* «Acepto» y «No, gracias» con el mismo peso (Signals con aceptación expresa, 4-nov): mismo tamaño, color, ancho y orden de lectura. */
/* inline-flex en los dos: las hojas de ola1b dan display inline-flex a `html #hmCkOk` (gana por especificidad) y sin esto sólo «Acepto»
   alineaba su texto a la izquierda en las páginas viejas (medido 4-nov en la ficha a 390). */
#hmCkOk{min-height:44px;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border:0;border-radius:999px;background:var(--azulv);color:#fff;font:inherit;font-weight:600;text-align:center;cursor:pointer}
#hmCkNo{min-height:44px;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border:0;border-radius:999px;background:var(--azulv);color:#fff;font:inherit;font-weight:600;text-align:center;cursor:pointer}
#hmCk button:focus-visible{outline:2px solid var(--azulv);outline-offset:2px}
/* Barras de las páginas viejas que se pegaban arriba porque la cabecera se escondía al bajar. */
.apn-sub{top:var(--hm-hdr-h)!important}
.ap-progreso{top:var(--hm-hdr-h)}
/* operaciones/boreado y ranurado traen en línea una regla suelta `.nav`: no es para esta cabecera. */
.hdr .nav{background:none;top:auto;z-index:auto;color:inherit}
/* Búsqueda real: la lupa abre el formulario del sitio bajo la cabecera, con el panel de ahnsa-sku. */
.hdr.busca #hdrSearch{display:flex!important;position:absolute;z-index:3;top:calc(100% + 8px);left:auto;right:clamp(16px,4vw,64px);width:min(560px,calc(100vw - 32px));max-width:none;height:54px;margin:0;padding:0 18px;border-radius:999px;background:#fff;color:var(--t1);box-shadow:0 0 0 1px var(--s2),0 18px 44px oklch(.25 .02 258/.2);opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hdr.busca #hdrQ{height:100%;font-size:1rem}
.hdr #hdrSearch .ico{color:var(--t2)}
.hdr #hdrSearch .sku-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(70vh,560px);overflow:auto;border-radius:16px;background:#fff;color:var(--t1);box-shadow:0 18px 44px oklch(.25 .02 258/.22)}
.hdr #hdrSearch .sku-panel[hidden]{display:none}
@media(max-width:1120px){.hdr.busca #hdrSearch{left:16px;right:16px;width:auto;top:calc(100% + 6px)}}
/* Presencia (d26.5): una sola lista en dos columnas CSS, en el alto que traían oficinas y plazas (el de .fp-a): 17 ciudades son 9 renglones. */
.fp-pr{grid-template-columns:auto}
@media(min-width:761px){.fp-pr li{padding:0;margin:0;line-height:1.2}.fp-pr li a{display:block;min-height:0;padding:0;line-height:1.2}}
/* Despiece del pie: su lugar se aparta desde que corre cromo.js, con el alto medido por ancho; las figuras llegan después (despiece_carga.js). */
.fp-c>.pd-col{grid-column:2/-1;min-width:0;align-self:start}
.pd-col:empty{min-height:425px}
.fp-c.pleg>.pd-col{margin-top:18px}
@media(min-width:1800px){.pd-col:empty{min-height:calc(19vw + 168px)}}
@media(max-width:1120px){.fp-c>.pd-col{grid-column:1/-1}.pd-col:empty{min-height:calc(22vw + 190px)}}
@media(max-width:900px){.pd-col:empty{min-height:calc(80vw + 460px)}}
/* Lo que el pie viejo traía y la maqueta no: todas las marcas, teléfonos de oficina y la fuente preferida. */
.fin-p h2{font-stretch:108%}
.fp-mg-m{grid-column:1/-1}.fp-mg-m ul{columns:11rem;column-gap:2rem}
.fp-l span{max-width:64ch}
@media print{.hdr,.fin-p,.wa-f,#hmCk,.pant{display:none!important}}
/* Menú del teléfono: en la maqueta `.hdr .nav{position:relative}` le ganaba a `.nav.abierto`. */
@media(max-width:1120px){
 .hdr .nav.abierto{position:fixed;inset:var(--hm-hdr-h) 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 16px 20px;background:var(--s0);color:var(--t1);box-shadow:0 30px 60px oklch(.2 .02 258/.2)}
 .hdr .nav.abierto>li>a,.hdr .nav.abierto>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0;font-size:1.05rem}
 .hdr .nav.abierto>li>a.ia{justify-content:flex-start;gap:8px}
 .hdr .nav.abierto{max-height:calc(100vh - var(--hm-hdr-h));max-height:calc(100dvh - var(--hm-hdr-h));overflow:auto;overscroll-behavior:contain}
 .hdr .apr-dest2{display:none!important}
 .hdr .apr-p{grid-template-columns:minmax(0,1fr);padding:4px 8px 8px;border-radius:14px}
 .hdr .apr-todo{grid-column:1;margin:0}
 .hdr .apr-c{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 0}
 .hdr .nav.abierto .apr-todo{grid-column:1;margin-inline:6px}
 .hdr .nav.abierto .apr-todo span{white-space:normal}
 .hdr .nav.abierto .apr-c a{font-size:.95rem;padding:11px 6px;white-space:normal}
}
.hdr #hdrQ:focus,.hdr #hdrQ:focus-visible{outline:0;box-shadow:none;border:0}
.hdr.busca #hdrSearch:focus-within{box-shadow:0 0 0 2px var(--azulv),0 18px 44px oklch(.25 .02 258/.2)}
/* Con el menú abierto la página no se desplaza detrás. */
@media(max-width:1120px){html.menu-ab{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.hdr,.hdr *{animation:none!important}}
.hdr,.fin-p{font-size:16px;line-height:1.55;font-family:Archivo,system-ui,sans-serif}
/* d26.8: el botón del pie lleva el logo blanco de AHNSA en vez de «Contacto» (nota de la laptop, 4-nov 21:30, §4). */
.fp-pill .fp-pill-logo{display:block;height:22px;width:auto}