/* Capa móvil y scroll suave (laptop, 4-nov, sobre el cromo del d26.4). Aditiva sobre la cabecera y el pie publicados.
   Teléfono: barra inferior flotante, menú y búsqueda en hojas, pie plegable y respuesta al tocar. */

/* transición entre páginas: entra con un leve acercamiento; cabecera y barra no se mueven */
@media (prefers-reduced-motion:no-preference){
 .hdr{view-transition-name:hdr}
 .tb{view-transition-name:tb}
 ::view-transition-old(root){animation:mv-sale .22s cubic-bezier(.4,0,1,1) both}
 ::view-transition-new(root){animation:mv-entra .34s cubic-bezier(.16,1,.3,1) both}
 @keyframes mv-sale{to{opacity:0}}
 @keyframes mv-entra{from{opacity:0;transform:scale(.988) translateY(6px)}}
}

@media (max-width:760px){
 /* la cabecera queda con logo y cotización; buscar y menú bajan al alcance del pulgar.
    tb-on la pone movil.js; tb-pre, opcional, la pone una línea en <head> para que cookies y WhatsApp nazcan en su lugar (sin CLS).
    Guías, fichas y paginador traen su propia barra abajo: ahí no sale la nuestra y siguen la lupa y la hamburguesa publicadas. */
 html.tb-on body:not(.apm-con-barra,.ahf-barra-on):not(:has(.pg-barra:not([hidden]))) .hdr :is(.lupa,.burger,.ia2){display:none}
 html.tb-on body:not(.apm-con-barra,.ahf-barra-on):not(:has(.pg-barra:not([hidden]))){padding-bottom:calc(92px + env(safe-area-inset-bottom))}
 body:is(.apm-con-barra,.ahf-barra-on) .tb,body:has(.pg-barra:not([hidden])) .tb,.am-keyboard .tb{display:none}

 /* barra flotante: material translúcido, borde de luz arriba, sombra que la separa del contenido */
 .tb,.tb *,.hoja,.hoja *{box-sizing:border-box}
 /* el aviso de cookies queda arriba de la barra */
 html:is(.tb-on,.tb-pre) body:not(.apm-con-barra,.ahf-barra-on):not(:has(.pg-barra:not([hidden]))) #hmCk{bottom:calc(86px + env(safe-area-inset-bottom))!important;transform:none!important}
 .tb{position:fixed;left:12px;right:84px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;height:62px;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;padding:5px;border-radius:31px;
  background:oklch(.985 .003 260/.74);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 0 0 .5px oklch(.2 .02 260/.14),0 12px 30px -10px oklch(.25 .06 265/.34),inset 0 1px 0 oklch(1 0 0/.75);
  transform-origin:0 100%;transition:transform .42s cubic-bezier(.16,1,.3,1)}
 .tb a,.tb button{position:relative;z-index:1;display:grid;place-items:center;align-content:center;gap:3px;min-width:44px;border:0;border-radius:26px;background:none;
  color:var(--t2,#59616D);font:600 10.5px/1 Archivo,system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
 .tb svg{width:24px;height:24px;transition:transform .1s ease-out}
 .tb span{transition:opacity .2s}
 .tb :active svg{transform:scale(.88)}
 .tb [aria-current="page"],.tb .vivo{color:var(--azul,#273C84)}
 .tb-l{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:26px;background:oklch(.383 .1236 267.9/.1);opacity:0;transition:opacity .2s}
 .tb-l.ve{opacity:1}
 /* al bajar la página la barra se recoge; al subir, vuelve */
 .tb.min{transform:translateY(6px) scale(.86)}
 .tb.min span{opacity:0}
 html:is(.tb-on,.tb-pre) body:not(.apm-con-barra,.ahf-barra-on):not(:has(.pg-barra:not([hidden]))) .wa-f{right:12px;bottom:calc(14px + env(safe-area-inset-bottom));width:60px;height:60px}

 /* hojas: menú y búsqueda */
 .hoja{position:fixed;inset:0;z-index:800}
 .hoja[hidden]{display:none}
 .hoja-velo{position:absolute;inset:0;background:oklch(.18 .02 265);opacity:0}
 .hoja-p{position:absolute;left:0;right:0;bottom:0;height:min(84dvh,760px);max-height:calc(100dvh - 44px - env(safe-area-inset-top));display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;background:oklch(.985 .002 260);box-shadow:0 -10px 40px -12px oklch(.2 .05 265/.35);
  transform:translateY(100%);will-change:transform;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
 #hBus .hoja-p{height:calc(100dvh - 44px - env(safe-area-inset-top))}
 .hoja-c{flex:none;display:flex;align-items:center;gap:10px;padding:8px 16px 6px;touch-action:none;cursor:grab}
 .hoja-asa{position:absolute;left:50%;top:7px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:oklch(.75 .01 260)}
 .hoja-t{flex:1;margin:14px 0 4px;font:700 21.6px/1.1 Archivo,system-ui,sans-serif;letter-spacing:-.02em;color:var(--t1,#17191E)}
 .hoja-x{display:grid;place-items:center;width:36px;height:36px;margin-top:10px;border:0;border-radius:50%;background:oklch(.93 .006 260);color:var(--t1,#17191E);cursor:pointer}
 .hoja-x svg{width:16px;height:16px}
 .hoja-v{position:relative;flex:1;min-height:0;overflow:hidden}
 .hoja-n{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 20px;will-change:transform;background:oklch(.985 .002 260)}
 .hoja-n+.hoja-n{transform:translateX(100%)}
 .hoja ul{list-style:none;margin:0;padding:0}
 .hoja-l a,.hoja-l button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 4px;border:0;border-bottom:1px solid oklch(.9 .008 260);background:none;
  color:var(--t1,#17191E);font:560 17.28px/1.2 Archivo,system-ui,sans-serif;text-align:left;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
 .hoja-l li:last-child a{border-bottom:0}
 .hoja-l svg{width:16px;height:16px;color:var(--s3,#9AA2AE)}
 .hoja a:active,.hoja button:active{background:oklch(.94 .006 260)}
 .hoja-g{margin:18px 4px 6px;font:700 11.52px/1 Archivo,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t2,#59616D)}
 .hoja-atras{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--azul,#273C84);font:600 16px/1 Archivo,system-ui,sans-serif;cursor:pointer}
 .hoja-atras svg{width:18px;height:18px}
 .hoja-k{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
 .hoja-k a{display:grid;place-items:center;min-height:52px;border-radius:14px;font:600 15.68px/1.2 Archivo,system-ui,sans-serif;text-decoration:none}
 .hoja-k .wa{background:#25D366;color:#fff}
 .hoja-k .tel{background:oklch(.93 .006 260);color:var(--t1,#17191E)}
 .hoja-b{display:flex;align-items:center;gap:10px;height:52px;margin:6px 0 4px;padding:0 6px 0 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #D9DEE6}
 .hoja-b:focus-within{box-shadow:0 0 0 2px #273C84}
 .hoja-b svg{flex:none;width:20px;height:20px;color:var(--t2,#59616D)}
 .hoja-b input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 16px/1 Archivo,system-ui,sans-serif;color:var(--t1,#17191E)}
 .hoja-b button{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#273C84;color:#fff}
 /* el buscador real dentro de la hoja */
 .hoja #hdrSearch{position:relative;inset:auto;display:flex!important;flex:none;width:auto;max-width:none;height:52px;margin:6px 0 4px;padding:0 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #D9DEE6;opacity:1;visibility:visible;transform:none;pointer-events:auto;color:var(--t1,#17191E)}
 .hoja #hdrSearch:focus-within{box-shadow:0 0 0 2px #273C84}
 .hoja #hdrSearch input{font-size:16px}
 .hoja-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
 .hoja-f a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #D9DEE6;
  color:var(--t1,#17191E);font:560 15.2px/1 Archivo,system-ui,sans-serif;text-decoration:none}
 .hoja-f a small{color:var(--t2,#59616D);font-weight:500}
 .hoja-f a[hidden]{display:none}

 /* pie plegable: los enlaces siguen en el HTML para buscadores; sólo se pliegan a la vista */
 .fp-c.pleg,.fp-pr.pleg{display:block}
 .fp-c.pleg>div,.fp-pr.pleg>div{border-bottom:1px solid oklch(1 0 0/.12)}
 .fp-c.pleg>div>h2,.fp-pr.pleg>div>h2{display:block;width:100%;margin:0}
 .fp-c.pleg>div>h2>button,.fp-pr.pleg>div>h2>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
 .fp-c.pleg>div>h2>button svg,.fp-pr.pleg>div>h2>button svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
 .fp-c.pleg>div.ab>h2>button svg,.fp-pr.pleg>div.ab>h2>button svg{transform:rotate(180deg)}
 .fp-c.pleg>div>ul,.fp-pr.pleg>div>ul{display:none;padding-bottom:14px}
 .fp-c.pleg>div.ab>ul,.fp-pr.pleg>div.ab>ul{display:block}

 /* respuesta al tocar: la tarjeta cede al dedo y vuelve al soltar */
 .oper,.sv-c,.hm-muro__tile,.sf,.fl__op,.ht-cta a,.cif a{transition:transform .14s ease-out}
 .oper:active,.sv-c:active,.hm-muro__tile:active,.sf:active,.ht-cta a:active,.cif a:active{transform:scale(.97)}
 a,button{-webkit-tap-highlight-color:transparent}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
 .tb,.tb svg,.tb span,.fp-c.pleg svg,.fp-pr.pleg svg{transition:none}
 .tb.min{transform:none}
 .tb.min span{opacity:1}
}
@media (max-width:760px) and (prefers-reduced-transparency:reduce){
 .tb{background:oklch(.985 .003 260);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:760px) and (prefers-contrast:more){
 .tb{background:#fff;box-shadow:0 0 0 1.5px #17191E}
}
/* pantalla ancha (teléfono girado, ventana que crece): sin barra ni hojas y el pie como está publicado */
@media (min-width:761px){
 .tb,.hoja{display:none!important}
 .fp-c.pleg>div>h2>button,.fp-pr.pleg>div>h2>button{display:inline;width:auto;min-height:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:default;pointer-events:none}
 .fp-c.pleg>div>h2>button svg,.fp-pr.pleg>div>h2>button svg{display:none}
}

/* ---- Capa móvil en el sitio real (d26.5). movil.css es de la laptop y va tal cual; esto la acomoda con lo que ya flota. ---- */
/* La barra sólo existe en teléfono: si la pantalla gira y pasa de 760 px, no se queda sin estilo al final de la página. */
@media(min-width:761px){.tb{display:none}}
/* Igual con el pie: una tableta que gira cruza los 760 px y sus títulos, ya hechos botón, no deben quedar con el estilo del navegador. */
@media(min-width:761px){.fp-c.pleg>div>h2>button,.fp-pr.pleg>div>h2>button{all:unset;cursor:default}.fp-c.pleg>div>h2>button svg,.fp-pr.pleg>div>h2>button svg{display:none}}
@media print{.tb,.hoja{display:none!important}}
@media(max-width:760px){
 /* Las hojas viejas reservan abajo con --ah-pulgar-*: la barra de la ficha, la de Aprender y «Volver arriba» se suben solas. */
 html.tb-on:root{--ah-pulgar-h:82px!important;--ah-pulgar-total:calc(82px + env(safe-area-inset-bottom,0px))!important}
 html.tb-on body,html.tb-on body.con-hdr{padding-bottom:0}
 /* La cabecera va en 701 y el aviso en 702: la barra, debajo de ellos pero encima de lo que flota en las páginas viejas. */
 .tb{z-index:700}
 /* El aviso de cookies sobre la barra lo trae movil.css (con !important); aquí sólo el caso de dos barras, en las guías. */
 html.tb-on body.apm-con-barra #hmCk{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 142px)!important}
 /* Con la barra de la ficha encima de .tb, el WhatsApp se queda junto a .tb. */
 html.tb-on body.ahf-barra-on .wa-f{transform:none}
 /* El buscador real entra a la hoja y pierde lo que le daba `.hdr`: sin esto el ícono sale de 300 px y negro, y el campo con su recuadro. */
 .hoja #hdrSearch{align-items:center;gap:10px}
 .hoja #hdrSearch .ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--t2,#59616D)}
 .hoja #hdrSearch input,.hoja #hdrSearch input:focus,.hoja #hdrSearch input:focus-visible{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;box-shadow:none;color:var(--t1,#17191E);font-family:Archivo,system-ui,sans-serif}
 /* Presencia se pliega como las demás columnas: a todo el ancho. */
 .fp-pr.pleg{flex:1 1 100%;width:100%}
 /* Filtros abiertos y teclado: la barra se aparta. */
 html.am-filters-open .tb,.am-keyboard .tb{display:none}
}