/* Cabecera y pie de ahnsa.com. Generado de la maqueta congelada el 2-nov-2026. Alcance propio: no toca html, body ni etiquetas sueltas. */
.hdr,.fin-p,.pant,.salta,.wa-f{--s0: oklch(.970 .0029 264.5); --s1: oklch(.942 .0075 260.7); --s2: oklch(.899 .0122 259.8); --s3: oklch(.710 .0197 258.4); --t1: oklch(.214 .0103 268.2); --t2: oklch(.490 .0217 258.4); --azul: oklch(.383 .1236 267.9); --azul2: oklch(.328 .1053 268); --tin: oklch(.78 .12 82); --g0: oklch(.214 .0103 268.2); --g1: oklch(.264 .012 264.3); --gt: oklch(.957 .0063 255.5); --gt2: oklch(.774 .0193 258.4); --mono: Plex,ui-monospace,Consolas,monospace; --ease: cubic-bezier(.16,1,.3,1); --gut: clamp(16px,4vw,56px); --max: 1360px; --sala: oklch(.957 .0063 255.5);--acero0: oklch(.957 .0063 255.5); --acero1: oklch(1 0 0); --acero2: oklch(.933 .0092 258.3); --azulv: oklch(.383 .1236 267.9); --nav: oklch(.298 .0882 265); --nav2: oklch(.264 .0774 265.1); --gris: oklch(.853 .0141 258.3); --eb: oklch(.490 .0217 258.4); --d1: clamp(46.4px,17.6px + 5.7vw,97.6px); --d2: clamp(32px,20px + 2.9vw,62.4px); --muelle: cubic-bezier(.16,1,.3,1); --u: min(1vw,1.79vh);--u: 1vw;}
.hdr,.fin-p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:left}
.hdr *,.fin-p *{box-sizing:border-box}
.hdr ul,.fin-p ul{list-style:none;margin:0;padding:0}
.hdr a,.fin-p a{color:inherit;text-decoration:none}
.hdr img,.fin-p img,.hdr svg,.fin-p svg{max-width:100%}
.hdr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fin-p :is(h2,.fp-h),.fin-p p{margin:0}
.hdr .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@font-face { font-family: Archivo; src: url(/assets/v3/c0e11bb41b8b/fonts/archivo.woff2) format("woff2"); font-weight: 400 760; font-stretch: 100% 118%; font-display: swap; }
@font-face { font-family: "Archivo Cond"; src: url(/assets/v3/c0e11bb41b8b/fonts/archivo-cond.woff2) format("woff2"); font-weight: 900; font-display: swap; }
.hdr{position: fixed; inset: 0px 0px auto; z-index: 40; background: oklch(0.975 0.003 250 / 0.74); backdrop-filter: blur(20px) saturate(170%);}
.hdr-in{max-width: var(--max); margin: auto; padding: 0 var(--gut); height: 72px; display: flex; align-items: center; gap: 26px;}
.logo img{height: 46px; width: auto;}
.nav{display: flex; gap: 22px; align-items: center; margin: 0px; padding: 0px; list-style: none; font-size: 15.2px; font-weight: 520;}
.nav a,.nav summary{text-decoration: none; cursor: pointer; list-style: none; padding: 12px 0px; white-space: nowrap;}
.nav summary::-webkit-details-marker{display: none;}
.nav details{position: relative;}
.nav details > div{position: absolute; top: 100%; left: -16px; min-width: 270px; padding: 8px; background: var(--s0); border-radius: 14px; box-shadow: oklch(0.2 0.02 258 / 0.18) 0px 18px 50px; animation: rise .3s var(--ease);}
.nav details a{display: block; padding: 10px 12px; border-radius: 8px;}
.nav details a:hover{background: var(--s1);}
.nav .ia{color: var(--azul); font-weight: 640;}
#hdrSearch{margin-left: auto; flex: 1 1 0%; max-width: 340px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0px 16px; background: var(--s0); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--s2); transition: transform .45s var(--ease),opacity .3s;}
#hdrQ{border: 0px; background: none; outline: 0px; width: 100%; min-width: 0px; font-size: 14.72px;}
.hdr.solo-hero #hdrSearch{opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden;}
.cart{position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; text-decoration: none;}
#hdrSearch + .cart{margin-left: 0px;}
.cart b{position: absolute; top: 2px; right: 0px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--azul); color: var(--s0); font: 500 10.88px/18px var(--mono); text-align: center;}
.burger{display: none; width: 44px; height: 44px; border: 0px; background: none; cursor: pointer;}
@media (max-width: 1120px){
.nav{display: none;}
.burger{display: grid; place-items: center;}
.hdr-in{gap: 6px; height: 64px;}
.logo img{height: 40px;}
#hdrSearch{position: absolute; top: 64px; left: 16px; right: 16px; max-width: none; box-shadow: oklch(0.2 0.02 258 / 0.14) 0px 8px 24px;}
.cart{margin-left: auto;}
#hdrSearch + .cart{margin-left: auto;}
.nav.abierto{display: flex; position: fixed; inset: 64px 0px auto; background: var(--s0); flex-direction: column; align-items: stretch; gap: 0px; padding: 8px 16px 20px; box-shadow: oklch(0.2 0.02 258 / 0.2) 0px 30px 60px; animation: rise .32s var(--ease);}
.nav.abierto a,.nav.abierto summary{display: block; padding: 14px 0px; font-size: 16.8px;}
.nav details > div{position: static; box-shadow: none; background: none; padding: 0px 0px 0px 12px;}
}
.toast{position: fixed; z-index: 70; left: 50%; bottom: 62px; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: var(--g0); color: var(--gt); font-size: 14.08px; white-space: nowrap;}
@media (prefers-reduced-transparency: reduce){
.hdr{background: var(--s0); backdrop-filter: none;}
}
@media (prefers-contrast: more){
.hdr{background: var(--s0); box-shadow: 0 1px var(--t1);}
}
@media (max-width: 1120px){
body:has(.pbusca) #hdrSearch{display: none;}
}
.hdr{background: var(--sala); backdrop-filter: none;}
#hdrSearch{background: oklch(0.985 0.002 250); box-shadow: oklch(0.2 0.02 258 / 0.08) 0px 2px 10px;}
.nav .ia{display: inline-flex; align-items: center; gap: 7px; color: var(--t1); font-weight: 600;}
.spk{color: var(--azul); fill: currentcolor; width: 19px; height: 19px;}
.nav{gap: clamp(14px, 1.6vw, 22px);}
@media (max-width: 1120px){
.hdr-in{height: auto; flex-wrap: wrap; padding-block: 8px; gap: 0px 6px;}
#hdrSearch{position: static; order: 9; flex: 1 0 100%; max-width: none; margin: 6px 0px 2px; box-shadow: oklch(0.2 0.02 258 / 0.08) 0px 2px 10px;}
body:has(.pbusca) #hdrSearch{display: flex;}
.nav.abierto{inset: 118px 0px auto;}
}
.hdr{background: var(--hbg,var(--sala)); color: var(--t1); transition: background-color .5s var(--ease),color .4s;}
.hdr.osc{color: var(--gt);}
.hdr .nav a,.hdr .nav summary{color: inherit;}
.nav .ia{color: inherit;}
.hdr.osc .spk{color: oklch(0.8 0.09 262);}
.hdr.osc .burger{color: var(--gt);}
#hdrSearch{color: var(--t1);}
.cart b{box-shadow: 0 0 0 1.5px var(--hbg,var(--sala));}
.logo{position: relative; display: block;}
.logo img{height: 46px; width: auto; transition: opacity 0.4s;}
.logo .lo{position: absolute; left: 0px; top: 0px; opacity: 0;}
.hdr.osc .logo .lc{opacity: 0;}
.hdr.osc .logo .lo{opacity: 1;}
.nav details > div{color: var(--t1);}
@media (max-width: 1120px){
.logo img{height: 40px;}
.hdr .nav.abierto{color: var(--t1);}
}
.hdr .nav > li > a,.hdr .nav summary{position: relative; display: inline-flex; align-items: center; gap: 7px; transition: opacity .2s var(--ease),transform .22s var(--ease);}
.hdr .nav > li > a::after,.hdr .nav summary::after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 6px; height: 2px; border-radius: 1px; background: currentcolor; transform: scaleX(0); transform-origin: 0px 50%; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);}
@media (hover: hover){
.hdr .nav > li > a:hover::after,.hdr .nav summary:hover::after,.hdr .nav details[open] summary::after{transform: scaleX(1);}
.hdr .nav:hover > li > a:not(:hover),.hdr .nav:hover summary:not(:hover){opacity: 0.62;}
.hdr .nav .ia:hover .spk{transform: rotate(45deg) scale(1.12);}
}
.hdr .nav > li > a:active,.hdr .nav summary:active{transform: scale(0.97); transition-duration: 0.08s;}
.spk{transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.hdr{animation: 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running hdrin;}
.hdr.solo-hero #hdrSearch{opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden;}
#hdrSearch{transition: opacity .35s var(--ease),transform .45s var(--ease),visibility .35s;}
@media (max-width: 1120px){
.hdr-in{height: 64px; flex-wrap: nowrap; padding-block: 0px;}
#hdrSearch{position: absolute; order: 0; left: 16px; right: 16px; top: 60px; margin: 0px; box-shadow: oklch(0.2 0.01 256 / 0.3) 0px 6px 14px -6px;}
.nav.abierto{inset: 64px 0px auto;}
}
.apr{position: static;}
.apr > button{display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0px; border: 0px; background: none; color: inherit; font: inherit; cursor: pointer;}
.apr > button svg{width: 10px; height: 7px; transition: transform .22s var(--muelle);}
.hdr.osc .apr-p{color: var(--t1);}
.apr-p{--w: min(1120px,calc(100vw - 32px)); position: absolute; z-index: 50; top: calc(100% + 6px); left: 50%; width: var(--w); margin-left: calc(var(--w)/-2); display: grid; grid-template-columns: 270px minmax(0px, 1fr); gap: 8px; padding: 10px; border-radius: 20px; background: var(--s0); box-shadow: oklch(0.3 0.02 258 / 0.07) 0px 0px 0px 1px, oklch(0.25 0.02 258 / 0.18) 0px 28px 60px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.992); transform-origin: 50% 0px; transition: opacity .16s linear,transform .28s var(--muelle),visibility 0s .16s;}
.apr-p::before{content: ""; position: absolute; left: 0px; right: 0px; top: -12px; height: 12px;}
.apr.open .apr-p{opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
.apr.open > button svg{transform: rotate(180deg);}
@media (hover: hover){
.apr:not(.cerrado):hover .apr-p{opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
.apr:not(.cerrado):hover > button svg{transform: rotate(180deg);}
}
.apr-dest{position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 330px; padding: 16px 18px 18px; overflow: hidden; border-radius: 12px; background: var(--nav); text-decoration: none;}
.nav .apr-dest,.apr-dest{color: rgb(255, 255, 255);}
.apr-f{position: absolute; left: 8px; right: 8px; top: 12px; width: calc(100% - 16px); height: auto;}
.apr-f text{fill: rgb(195, 201, 210); font: 600 11px var(--mono);}
.apr-f .f{transform-box: fill-box; transform-origin: center center; transition-property: ; transition-duration: ; transition-timing-function: ; transition-behavior: ; transition-delay: calc(var(--i)*40ms);}
@media (hover: hover){
.apr-dest:hover .f{transform: rotate(60deg);}
}
.apr-dest b,.apr-dest span{position: relative; z-index: 1; display: block;}
.apr-dest b{font-size: 21.6px; font-weight: 640; letter-spacing: -0.025em;}
.apr-dest span{margin-top: 3px; font-size: 14.08px; line-height: 1.3; color: oklch(0.9 0.006 250);}
.apr-todo{grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0px 10px; padding: 12px 8px 4px; box-shadow: 0 -1px var(--s2); color: var(--t2); font-size: 14.4px; text-decoration: none;}
.apr-todo b{color: var(--azulv); font-weight: 620;}
.apr-dest b{font-size: 24px; font-weight: 640; letter-spacing: -0.025em;}
.apr-dest span{margin-top: 4px; font-size: 14.4px; line-height: 1.3; color: oklch(0.93 0.004 250);}
.apr-dest i{margin-top: 10px; font-style: normal; font-size: 14.4px; font-weight: 600;}
.apr-c{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 4px 14px; padding: 12px 10px;}
.apr-c p{margin: 0px 0px 6px; padding: 0px 8px; font-size: 11.84px; font-weight: 640; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2);}
.apr-c a{display: block; padding: 8px; border-radius: 8px; color: var(--t1); font-size: 15.2px; line-height: 1.2; text-decoration: none; transition: background 0.15s, color 0.15s;}
@media (hover: hover){
.apr-c a:hover{background: var(--s1); color: var(--azulv);}
}
.apr-p a:focus-visible{outline: 2px solid var(--azulv); outline-offset: -2px;}
@media (max-width: 1120px){
.apr{position: relative;}
.apr-p{position: static; width: auto; margin: 4px 0px 0px; display: none; grid-template-columns: 1fr; box-shadow: none; background: var(--s1); opacity: 1; visibility: visible; transform: none;}
.apr.open .apr-p{display: grid;}
.apr-dest{display: none;}
.apr-c{grid-template-columns: repeat(2, minmax(0px, 1fr)); padding: 6px;}
}
.hdr{color: var(--t1); transition: background-color 0.4s linear, color 0.3s linear; background: var(--hbg,var(--s0)) !important; box-shadow: none !important;}
.hdr.osc{color: rgb(255, 255, 255);}
.hdr.osc .ia2,.hdr.osc .lupa,.hdr.osc .cart{color: rgb(255, 255, 255);}
.hdr.osc .ia2 .ico{color: var(--gris);}
.hdr-in{max-width: none; padding-inline: clamp(16px, 4vw, 64px); justify-content: space-between;}
.hdr .nav{margin-inline: auto;}
.hdr .nav > li:last-child{display: none;}
#hdrSearch{display: none !important;}
.hdr .ia2{display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--t1); font-size: 15.68px; font-weight: 560; text-decoration: none; white-space: nowrap;}
.hdr .ia2 .ico{width: 18px; height: 18px; color: var(--azulv);}
.lupa{display: grid; place-items: center; width: 44px; height: 44px; color: var(--t1);}
.hdr .cart{margin-left: 0px;}
@media (min-width: 1121px){
.logo img{height: 54px;}
}
@media (max-width: 1120px){
.hdr .cart{margin-left: 0px;}
.lupa{margin-left: auto;}
.hdr .ia2{display: none;}
.hdr .nav.abierto > li:last-child{display: block;}
}
@media (max-width: 1120px){
.hdr .nav{margin-inline: 0px;}
}
.fin-p{position: relative; z-index: 3; overflow: hidden; margin-top: -1px; padding: 0px clamp(16px, 4vw, 64px) 28px; border-radius: 28px 28px 0px 0px; background: var(--nav); color: var(--gt);}
.fin-p a{color: inherit; text-decoration: none;}
.fp-m{margin-inline: calc(-1 * clamp(16px, 4vw, 64px)); overflow: hidden; background: var(--gris);}
.fp-m div{display: flex; width: max-content; animation: 44s linear 0s infinite normal none running marq;}
.fp-m span{padding: 10px 24px; color: var(--nav); font-size: 14.72px; font-weight: 600; white-space: nowrap;}
.fp-g{position: relative; display: block; padding-top: clamp(36px, 5vw, 68px); text-align: center;}
.fp-k{display: block; margin-bottom: clamp(20px, 3.4vw, 50px); font-size: clamp(14.72px, 12.8px + 0.6vw, 20.8px); font-weight: 800; font-stretch: 118%; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(255, 255, 255);}
.fp-gr{display: block; font-family: "Archivo Cond", Archivo, sans-serif; font-size: clamp(48px, 16.8vw, 320px); font-weight: 900; line-height: 0.86; letter-spacing: -0.012em; color: var(--gris); white-space: nowrap; transition: color 0.25s;}
.fp-pill{position: absolute; left: 50%; top: calc(50% + clamp(24px, 3.2vw, 46px)); display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 16px); padding: clamp(5px, 0.6vw, 9px) clamp(5px, 0.6vw, 9px) clamp(5px, 0.6vw, 9px) clamp(18px, 2.6vw, 42px); border-radius: 999px; background: var(--nav); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; transform: translate(-50%, -50%); transition: transform .35s var(--muelle);}
.fp-pill b{color: rgb(255, 255, 255); font-size: clamp(19.2px, 11.2px + 3vw, 57.6px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.1;}
.fp-pill i{display: grid; place-items: center; width: clamp(36px, 5vw, 72px); aspect-ratio: 1 / 1; border-radius: 50%; background: rgb(255, 255, 255); color: var(--nav); transition: transform .35s var(--muelle);}
.fp-pill svg{width: 58%; height: 58%;}
@media (hover: hover){
.fp-g:hover .fp-gr{color: rgb(255, 255, 255);}
.fp-g:hover .fp-pill{transform: translate(-50%, -50%) scale(1.04);}
.fp-g:hover .fp-pill i{transform: translateX(5px);}
}
.fp-g:focus-visible{outline: rgb(255, 255, 255) solid 2px; outline-offset: 6px; border-radius: 12px;}
.fp-n{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 22px; font-size: 14.72px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;}
.fp-n a{min-height: 44px; display: inline-flex; align-items: center;}
.fp-e{width: 14px; height: 14px; color: var(--gris);}
.fp-b{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin: 20px calc(-1 * clamp(16px, 4vw, 64px)) 0px; padding: 18px clamp(16px, 4vw, 64px); box-shadow: oklch(1 0 0 / 0.12) 0px -1px, oklch(1 0 0 / 0.12) 0px 1px;}
.fp-b p{margin: 0px; font-size: 14.72px; font-weight: 600; text-transform: uppercase; color: oklch(0.86 0.006 250);}
.fp-b a{font-size: clamp(24px, 16px + 2.6vw, 51.2px); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums;}
.fp-c{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 30px 24px; margin-top: 36px;}
.fin-p :is(h2,.fp-h){margin: 0px 0px 10px; font-size: 12.48px; font-weight: 640; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gt2); line-height: 1.3;}
.fin-p ul{list-style: none; margin: 0px; padding: 0px;}
.fp-c a{display: block; padding: 5px 0px; font-size: 15.2px; color: oklch(0.9 0.005 250); transition: transform .25s var(--muelle);}
@media (hover: hover){
.fp-c a:hover{color: rgb(255, 255, 255); transform: translateX(3px);}
}
.fp-d{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 56px; margin-top: 36px;}
.fp-a{flex: 1 1 380px;}
.fp-a img{height: 50px; width: auto;}
.fp-a p{max-width: 60ch; margin: 12px 0px 0px; font-size: 15.2px; line-height: 1.45; color: oklch(0.86 0.006 250);}
.fp-a address{margin-top: 10px; font-style: normal; font-size: 14.72px; line-height: 1.55; color: var(--gt2);}
.fp-o{flex: 0 1 auto; columns: 2; column-gap: 26px; font-size: 14.72px; color: var(--gt2);}
.fp-o li{padding: 3px 0px;}
.fp-l{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 22px; margin-top: 28px; padding-top: 16px; box-shadow: oklch(1 0 0 / 0.12) 0px -1px; font-size: 13.44px; color: var(--gt2);}
.fp-l ul{display: flex; flex-wrap: wrap; gap: 4px 18px;}
.fp-l a{display: inline-block; padding: 4px 0px;}
@media (max-width: 760px){
.fin-p{border-radius: 20px 20px 0px 0px;}
.fp-c{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.fp-n{gap: 0px 10px; font-size: 13.44px;}
.fp-b{flex-direction: column; align-items: flex-start;}
.fp-pill{box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px;}
}
@media (prefers-reduced-motion: reduce){
.fp-m div{animation: auto ease 0s 1 normal none running none;}
}
@supports (animation-timeline:scroll()){
.hdr::after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; background: var(--azulv); transform: scaleX(0); transform-origin: 0px 50%; animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: avance; animation-range: normal; animation-timeline: scroll(root);}
}
@media (prefers-reduced-motion: reduce){
.fp-m div,.hdr::after{animation: auto ease 0s 1 normal none running none;}
}
.wa-f{position: fixed; z-index: 60; right: max(18px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgb(37, 211, 102); color: rgb(255, 255, 255); box-shadow: oklch(0.25 0.05 150 / 0.34) 0px 10px 26px; transition: transform .3s var(--muelle);}
.wa-f svg{width: 32px; height: 32px;}
.wa-f::before{content: ""; position: absolute; inset: 0px; border-radius: 50%; background: rgb(37, 211, 102); opacity: 0; pointer-events: none;}
.wa-f:active{transform: scale(0.94);}
@media (hover: hover){
.wa-f:hover{transform: scale(1.08);}
.wa-f:hover::before{animation: wa-onda 1.5s var(--muelle) infinite;}
.wa-f:hover svg{animation: wa-mueve .8s var(--muelle);}
}
@media (prefers-reduced-motion: reduce){
.wa-f::before,.wa-f svg{animation: auto ease 0s 1 normal none running none !important;}
}
@media (min-width: 1800px){
.hdr-in,.fin-p > *{max-width: none;}
}
.fp-pr{display: grid; grid-template-columns: auto auto; gap: 18px 40px; flex: 0 1 auto;}
.fp-pr ul{columns: 2; column-gap: 26px;}
.fp-pr li{padding: 2px 0px; font-size: 14.72px; color: oklch(0.9 0.005 250);}
.fp-pr div + div ul{columns: 3;}
@media (max-width: 900px){
.fp-pr{grid-template-columns: 1fr;}
.fp-pr div + div ul{columns: 2;}
}
.salta{position: fixed; z-index: 100; left: 12px; top: 10px; padding: 10px 16px; border-radius: 10px; background: var(--nav); color: rgb(255, 255, 255); font-weight: 600; transform: translateY(-200%); transition: transform 0.2s;}
.salta:focus{transform: none;}
.fp-mas{margin-top: 26px; border-top: 1px solid oklch(1 0 0 / 0.16); padding-top: 10px;}
.fp-mas summary{display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: rgb(255, 255, 255);}
.fp-mg{display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 24px; margin-top: 12px;}
.fp-mg :is(h2,.fp-h){margin: 0px 0px 6px; font-size: 15.2px; color: rgb(255, 255, 255);}
.fp-mg ul{list-style: none; margin: 0px; padding: 0px;}
.fp-mg a{display: block; padding: 5px 0px; font-size: 14.72px; color: oklch(0.9 0.005 250);}
.fp-mg a:hover{color: rgb(255, 255, 255);}
@media (max-width: 760px){
.fp-mg{grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
.logo{perspective: 420px; isolation: isolate;}
.logo img{transition: opacity .4s,transform .55s var(--muelle); transform-origin: 50% 60%;}
.logo::after{content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 150% 0px / 260% 100% no-repeat; mask: url(/assets/v3/c0e11bb41b8b/img/logo-claro.webp) left top / auto 100% no-repeat; animation: logo-luz 1.3s var(--muelle) 1 .7s both;}
.logo:active img{transform: scale(0.96); transition-duration: 0.1s;}
.hdr .nav{position: relative;}
.nav-ind{position: absolute; left: 0px; top: 50%; height: 38px; border-radius: 99px; background: oklch(0.5 0.1 262 / 0.1); opacity: 0; pointer-events: none; transition: opacity 0.22s; will-change: transform, width;}
.nav-ind.ve{opacity: 1;}
.hdr.osc .nav-ind{background: oklch(1 0 0 / 0.14);}
.hdr .nav > li > a::after{display: none;}
@media (max-width: 1120px){
.nav-ind{display: none;}
}
.hdr .ia2{position: relative; isolation: isolate; padding: 0px 14px; margin: 0px -6px; border-radius: 99px;}
.hdr .ia2::before{content: ""; position: absolute; z-index: -1; inset: 4px 0px; border-radius: inherit; background: linear-gradient(100deg, oklch(0.92 0.05 262), oklch(0.95 0.06 215)); opacity: 0; transform: scale(0.88); transition: opacity .25s,transform .45s var(--muelle);}
.hdr.osc .ia2::before{background: linear-gradient(100deg, oklch(1 0 0 / 0.16), oklch(0.8 0.1 230 / 0.26));}
.ia-t{--a: var(--t1); --b: var(--azulv); background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text;}
.hdr.osc .ia-t{--a: #fff; --b: #9fd0f0;}
.hdr .ia2 .spk{transition: transform .6s var(--muelle);}
.hdr .lupa .ico,.hdr .cart .ico{transition: transform .45s var(--muelle);}
.hdr .ia2:active,.hdr .cart:active,.hdr .lupa:active{transform: scale(0.95); transition: transform 0.1s;}
#cartN.pop{animation: cart-pop .5s var(--muelle);}
@media (hover: hover){
.logo:hover::after{animation: logo-luz2 .95s var(--muelle) 1;}
.logo:hover img{transform: rotateY(-12deg) rotateX(5deg) scale(1.04);}
.hdr .ia2:hover::before,.hdr .ia2:focus-visible::before{opacity: 1; transform: none;}
.hdr .ia2:hover .spk{transform: rotate(180deg) scale(1.28);}
.hdr .ia2:hover .ia-t{color: transparent; animation: ia-luz .9s var(--muelle) both;}
.hdr .lupa:hover .ico{transform: scale(1.14) rotate(-12deg);}
.hdr .cart:hover .ico{animation: cart-va .7s var(--muelle);}
}
.apr-dest2{flex-direction: column; gap: 6px; border-radius: 16px; text-decoration: none; display: flex !important; padding: 14px !important; background: rgb(238, 242, 246) !important; color: var(--t1) !important;}
.apr-dest2 b{margin-top: 8px; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; color: rgb(23, 42, 89);}
.apr-dest2 small{font-size: 13.76px; color: rgb(71, 86, 106);}
.apr-dest2 .apr-g{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; width: 100%; position: static; display: grid !important;}
.apr-dest2 .apr-t{width: auto; height: auto; min-width: 0px;}
.apr-t{position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;}
.apr-t i{position: absolute; left: 6px; top: 4px; font-style: normal; font-size: 11.52px; font-weight: 700; color: rgb(31, 78, 122);}
.apr-t svg{position: absolute; inset: 14%; width: 72%; height: 72%; transition: transform .55s var(--muelle);}
.apr-t .rl{fill: url("#carb"); stroke: rgb(60, 74, 92); stroke-width: 2;}
.apr-t .rl.d2{fill: rgb(255, 255, 255);}
.apr-t .gu{fill: none; stroke: rgb(60, 74, 92); opacity: 0.2;}
.apr-t .cota{fill: none; stroke: rgb(20, 121, 182); stroke-width: 2;}
@media (hover: hover){
.apr-dest2:hover .apr-t svg{transform: translateY(-2px) rotate(-10deg) scale(1.06);}
.apr-dest2:hover .apr-t:nth-child(2n) svg{transition-delay: 50ms;}
}
html.nv .hdr::before{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 3px; background: var(--azulv); transform-origin: 0px 50%; animation: 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running nv-l;}
.pant{position: fixed; inset: 0px; z-index: 2147482000; display: grid; place-content: center; justify-items: center; gap: 18px; background: oklch(0.975 0.003 250 / 0.9); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.22s;}
.pant img{width: 150px; height: auto; animation: 1.1s ease-in-out 0s infinite alternate none running pant-p;}
.pant i{display: block; width: 150px; height: 3px; border-radius: 2px; overflow: hidden; background: oklch(0.88 0.01 250); position: relative;}
.pant i::after{content: ""; position: absolute; inset: 0px 60% 0px 0px; background: var(--azulv); animation: 1.1s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite normal none running pant-b;}
html.nv2 .pant{opacity: 1; pointer-events: auto;}
@media (prefers-reduced-motion: reduce){
.logo::after,.pant img,.pant i::after,#cartN.pop{animation: auto ease 0s 1 normal none running none !important;}
html.nv .hdr::before{animation: auto ease 0s 1 normal none running none; transform: scaleX(0.6);}
.logo img,.hdr .ia2 .spk,.hdr .lupa .ico,.hdr .cart .ico,.apr-t svg{transition: none;}
.logo:hover img,.hdr .ia2:hover .spk,.hdr .lupa:hover .ico,.apr-dest2:hover .apr-t svg{transform: none;}
}
@media (prefers-reduced-transparency: reduce){
.pant{background: oklch(0.975 0.003 250); backdrop-filter: none;}
}
.hdr #hdrSearch{display: none !important;}
@keyframes rise { 
  0% { opacity: 0; transform: translateY(10px); }
}
@keyframes hdrin { 
  0% { opacity: 0.01; transform: translateY(-10px); }
}
@keyframes marq { 
  100% { transform: translateX(-50%); }
}
@keyframes avance { 
  100% { transform: scaleX(1); }
}
@keyframes wa-onda { 
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.65); }
}
@keyframes wa-mueve { 
  0% { transform: none; }
  22% { transform: rotate(-14deg) scale(1.1); }
  48% { transform: rotate(11deg) scale(1.1); }
  72% { transform: rotate(-6deg) scale(1.04); }
  100% { transform: none; }
}
@keyframes logo-luz { 
  0% { background-position: 150% 0px; }
  100% { background-position: -60% 0px; }
}
@keyframes logo-luz2 { 
  0% { background-position: 150% 0px; }
  100% { background-position: -60% 0px; }
}
@keyframes cart-pop { 
  30% { transform: scale(1.45); }
}
@keyframes cart-va { 
  0% { transform: none; }
  30% { transform: translateX(3px) rotate(-11deg); }
  62% { transform: translateX(-2px) rotate(4deg); }
  100% { transform: none; }
}
@keyframes ia-luz { 
  100% { background-position: -60% 0px; }
}
@keyframes nv-l { 
  0% { transform: scaleX(0.08); }
  100% { transform: scaleX(0.82); }
}
@keyframes pant-p { 
  100% { transform: scale(1.03); }
}
@keyframes pant-b { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

/* Páginas sin héroe a sangre: <body class="con-hdr">. La cabecera ocupa su alto y sigue pegada arriba. */
.hdr nav{display:contents}
body.con-hdr .hdr{position:sticky;top:0}
html:has(.hdr){scroll-padding-top:88px}
@view-transition{navigation:auto}

/* ---- 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(min-width:761px){.fin-p{content-visibility:visible;contain-intrinsic-size:none}}@media(max-width:760px){footer.fin-p .fp-pill{background:none;box-shadow:inset 0 0 0 1.5px #fff}footer.fin-p .fp-pill i{color:#fff}footer.fin-p .fp-g:hover .fp-pill,footer.fin-p .fp-g:hover .fp-pill i{transform:none}footer.fin-p.fin-p.fin-p::after{position:static;inset:auto;z-index:auto;background:none}}.hdr .logo img,.fin-p .fp-a>img{display:block}
@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 14.4px/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:16px}
.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 :is(h2,.fp-h){font-stretch:108%}
.fp-mg-m{grid-column:1/-1}.fp-mg-m ul{columns:176px;column-gap:32px}
.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:16.8px}
 .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:15.2px;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}

.fp-r{display:flex;gap:12px;align-items:center}
.fp-ri{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
color:oklch(0.957 0.0063 255.5);box-shadow:inset 0 0 0 1.5px oklch(0.957 0.0063 255.5 / .42);
overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
transition:color .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)}
.fp-ri::before{content:"";position:absolute;inset:0;border-radius:inherit;background:oklch(0.975 0.004 255);
transform:translateY(101%);transition:transform .42s cubic-bezier(.22,1,.36,1);z-index:-1}
.fp-ri svg{width:22px;height:22px;transition:transform .42s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
.fp-ri:hover{color:#172A59;box-shadow:inset 0 0 0 1.5px oklch(0.975 0.004 255);transform:translateY(-3px)}
.fp-ri:hover::before{transform:translateY(0)}
.fp-ri:hover svg{transform:scale(1.12) rotate(-8deg)}
}
.fp-ri--fb svg{width:25px;height:25px}
.fp-ri:active{transform:scale(.94)}
.fp-ri:focus-visible{outline:2px solid oklch(0.957 0.0063 255.5);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fp-ri,.fp-ri::before,.fp-ri svg{transition:none}.fp-ri:hover,.fp-ri:hover svg{transform:none}}
html{scrollbar-gutter:stable}
/* Encabezado en pantallas grandes (laptop, 7-nov-2026, para la d26.12).
   Hoy (d26.10) .hdr-in no tiene ancho máximo desde 1800 px: en 3840 el logo queda a 64 px de la orilla izquierda, los
   íconos pegados a la derecha y el menú a 15 px en medio, muy chico para la pantalla.
   Arreglo, sólo arriba de 1440 px (de 1440 para abajo no cambia nada):
   - ancho máximo de 1760 px, centrado (alinea con los contenedores de 1640 px más su margen), con padding fluido;
   - menú, «Asesor IA», logo e íconos crecen poco a poco desde su tamaño de hoy en 1440 hasta un tope;
   - la altura del encabezado se queda en 72 px: las páginas que dejan ese espacio arriba no cambian (sin CLS ni tapar
     contenido). Todo es CSS estático: no hay cambios después de cargar. */
@media (min-width:1441px){
  /* el padding se queda como el de hoy (clamp(16px,4vw,64px)) para que no brinque en 1441 */
  .hdr-in{max-width:1760px;margin-inline:auto}
  /* 15.2 px en 1440 → 16.8 px en 1920 → 18 px de tope (2560 en adelante) */
  .hdr .nav{font-size:clamp(15.2px,9.92px + .36vw,18px);gap:clamp(22px,1.6vw,36px)}
  .hdr .ia2{font-size:clamp(15.68px,10.4px + .36vw,18.4px)}
  /* 54 px en 1920 → 60 px de tope; cabe en los 72 px del encabezado */
  .logo img{height:clamp(54px,2.5vw + 6px,60px)}
  .hdr .lupa svg,.hdr .cart svg{width:clamp(20px,.4vw + 14px,24px);height:clamp(20px,.4vw + 14px,24px)}
}

/* «Aprender» (Mario, 7-nov, d26.12): el texto es enlace a /aprender y la flecha (button.apr-fl) abre el panel.
   El ancho del menú no cambia: «Aprender» + 6 px + flecha de 10 px, igual que el botón anterior. Con mouse, el panel abre al
   pasar con 120 ms de retardo (evita aperturas al cruzar el menú). La flecha tiene un área táctil invisible más ancha. */
.apr{display:inline-flex;align-items:center}
.apr > .apr-a{display:inline-flex;align-items:center;min-height:44px}
.apr > button.apr-fl{position:relative;min-width:0;padding:0 0 0 6px;gap:0}
.apr > button.apr-fl::after{content:"";position:absolute;inset:0 -12px 0 -2px}
@media (hover:hover){.hdr .nav .apr:not(.cerrado):hover .apr-p{transition-delay:.12s}} /* más específico que la regla del cromo que pone 0s */
.hdr .nav li.apr.open:not(.x) .apr-p{transition-delay:0s} /* con clic o teclado (.open) abre sin retardo, aunque el puntero esté encima */
@media (max-width:1120px){
  /* menú del teléfono: «Aprender» llena el renglón y la flecha de 44 px queda a la derecha, como estaba. Gana a
     `.hdr .nav.abierto>li>a,.hdr .nav.abierto>li>button{width:100%}` del cromo. */
  .hdr .nav > li.apr{display:flex;flex-wrap:wrap;align-items:center}
  .hdr .nav.abierto > li.apr > a.apr-a{flex:1 1 0;min-width:0;width:auto}
  .hdr .nav.abierto > li.apr > button.apr-fl{flex:0 0 44px;width:44px;min-width:44px;min-height:48px;padding:0;justify-content:center}
  .apr > button.apr-fl::after{content:none}
  .hdr .nav > li.apr > .apr-p{flex:0 0 100%}
}

/* Espaciado por plantilla en cualquier pantalla, del teléfono al 4K (laptop, 7-nov-2026, para la d26.12).

   Medido en vivo en ahnsa.com con Chrome y probado sólo en el navegador de pruebas, junto con
   heroe-espaciado.css y encabezado-ancho.css. Nada de esto se publicó.

   Reglas que respeta:
   - es CSS estático, así que no hay CLS; no toca imágenes, precarga ni el LCP;
   - no agrega colores, bordes, píldoras, degradados ni espaciado entre letras;
   - regla del pulgar (Mario, 10:37): en el teléfono, todo lo táctil que toca un arreglo mide 44 px o más y
     queda a 8 px o más de sus vecinos;
   - de 1440 px para abajo sólo cambian el listado, /contacto y /aprender, con el OK del 7-nov.

   Causa común de varios problemas: rsp.css pone zoom en <html> desde 1800 px de ancho (1.1, 1.25, 1.4, 1.5 y
   1.6 según el alto) en todas las plantillas menos la portada y /productos. Con ese zoom, todo lo que se mide
   en vw o vh también se multiplica: 100vh rinde 1.6 pantallas en 4K y 16.8vw rinde 18.5 % del ancho en 1920. */


/* ===== Pie de página (todas las plantillas) ===================================================== */

/* «CONTÁCTENOS» se corta 53.5 px por la derecha en 1920×1080 en las 13 plantillas con zoom: el tope de
   320 px se vuelve 352 px. Ahora el tamaño tampoco pasa de 18.2 % del ancho de su propia caja, medido en
   unidades de contenedor, que no cambian con el zoom. En la portada y /productos, que no tienen zoom, sigue
   valiendo el tope de 320 px y nada cambia. */
@media (min-width:1800px){
  .fin-p .fp-g{container-type:inline-size}
  .fin-p .fp-gr{font-size:min(clamp(48px,16.8vw,320px),18.2cqi)}
}

/* Leyendas de «Fig 1» y «Fig 2» en la columna Guías: no tienen ancho máximo y desde 1920 llegan a 96–141
   caracteres por línea. Con 58ch quedan en 75–77. */
@media (min-width:1441px){
  .fin-p .pd.iso .iso-caption{max-width:58ch}
}


/* ===== Portada (/) ============================================================================== */

/* Franja «Visitamos su planta»: va de orilla a orilla y sus textos quedan a 22 px del borde de la pantalla
   en cualquier ancho, también en 4K, donde la franja mide 3825 px. El margen interior crece con el ancho:
   30.7 px en 1920, 41 px en 2560 y 44 px de tope. */
@media (min-width:1441px){
  #servicios.sv .sv-n,#servicios.sv .sv-t{left:clamp(22px,1.6vw,44px)}
  #servicios.sv .sv-t{right:clamp(22px,1.6vw,44px);bottom:clamp(22px,1.6vw,44px)}
}


/* ===== Listado de categoría (/productos/insertos y demás listados con filtros) ================== */

/* El bloque «Información de esta categoría / Compre en línea…» y la paginación «Todas las fichas…» quedan
   fuera de la columna del listado (.ahsumi) y por eso su texto empieza en x = 0 en todos los anchos.
   Se alinean a esa columna, con los mismos márgenes que ya usa el listado en cada tramo:
   - teléfono: 14 px, igual que las tarjetas y «Otras familias»;
   - de 740 a 999 px: 16 px;
   - desde 1000 px: 32 px, igual que «Otras familias».
   La paginación conserva su ancho máximo de 1728 px y sigue centrada cuando sobra pantalla.
   Las reglas van ordenadas para que la del teléfono gane al final, también con el teléfono acostado. */
@media (min-width:740px) and (max-width:999.98px){
  .ahsumi.cx-listing ~ .ah-cola-seo{padding-inline:16px}
  .ahsumi.cx-listing ~ .hm-section.ah-paginacion{max-width:calc(100% - 32px)}
}
@media (min-width:1000px){
  .ahsumi.cx-listing ~ .ah-cola-seo{padding-inline:32px}
  .ahsumi.cx-listing ~ .hm-section.ah-paginacion{max-width:min(1728px,100% - 64px)}
}
/* De 1000 a 1099 px, «Otras familias» y «Guía de compra» también quedan en x = 0: el listado quita su
   margen desde 1000 px, pero la regla que da 32 px a esos bloques empieza hasta 1100 px. Se adelanta. */
@media (min-width:1000px) and (max-width:1099.98px) and (min-height:501px){
  .ahsumi.ahsumi--lado > :not(.sumi-cuerpo){padding-left:32px;padding-right:32px}
}
/* Teléfono: alineación a 14 px y regla del pulgar.
   - «Dónde comprar y sedes» va dentro del texto: el relleno vertical amplía su área táctil a 44 px sin mover
     ninguna línea;
   - los números de página y los enlaces «Insertos: …» pasan a 44 px, separados 8 px. El !important del
     espacio vence al estilo en línea de la lista de páginas (gap: 5.6px 9.6px). */
@media (max-width:739.98px),(max-width:1023px) and (max-height:500px) and (pointer:coarse){
  .ahsumi.cx-listing ~ .ah-cola-seo{padding-inline:14px}
  .ahsumi.cx-listing ~ .hm-section.ah-paginacion{max-width:calc(100% - 28px)}
  .ahsumi.cx-listing ~ .ah-cola-seo .prod-compra a{padding-block:12.25px}
  .ahsumi.cx-listing ~ .ah-paginacion .ah-paginas{gap:8px !important}
  .ahsumi.cx-listing ~ .ah-paginacion .ah-paginas a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .ahsumi.cx-listing ~ .ah-paginacion .ah-fichas-lista{display:grid;gap:8px}
  .ahsumi.cx-listing ~ .ah-paginacion .ah-fichas-lista a{display:flex;align-items:center;min-height:44px}
}


/* ===== Ficha de producto (/productos/…/p/…) ===================================================== */

/* El contenedor de la ficha trae style="min-height:100vh" en el HTML. Con el zoom de rsp.css ese 100vh rinde
   1.4–1.6 pantallas, y queda un hueco vacío entre la ficha y «Más sobre esta pieza»: 1133 px en 3840×2160 y
   390 px en 3072×1728. Se divide entre el mismo zoom en cada banda, con las mismas condiciones de rsp.css.
   El !important es necesario para ganarle al estilo en línea. */
@media (min-width:1800px){.ahnav.ahprod.ahf{--rsp-z:1.1;min-height:calc(100vh / var(--rsp-z)) !important}}
@media (min-width:2200px) and (min-height:1000px){.ahnav.ahprod.ahf{--rsp-z:1.25}}
@media (min-width:2800px) and (min-height:1150px){.ahnav.ahprod.ahf{--rsp-z:1.4}}
@media (min-width:3300px) and (min-height:1250px){.ahnav.ahprod.ahf{--rsp-z:1.5}}
@media (min-width:3800px) and (min-height:1350px){.ahnav.ahprod.ahf{--rsp-z:1.6}}


/* ===== Contacto (/contacto) ===================================================================== */

/* El subtítulo del héroe tiene 142 caracteres y va en una sola línea desde 1366 px (130 en 1280, 99 en 1024).
   Con 60ch se corta después de «cercana:» en dos líneas de 72 y 69 caracteres, en todos los anchos desde 1024.
   En 768 ya iba en 3 líneas de 59 y no cambia; en el teléfono este héroe no se muestra.
   Se probó 54ch: queda en tres líneas con «conmutador.» sola en la última, y en 1024 la tercera línea empuja los
   botones 15 px fuera de la tarjeta, que recorta. Dos líneas no cambian el alto en 1024 ni en 1280. */
.am-contact-original .px-4 > .font-400.pb-8{max-width:60ch}


/* ===== Aprender (/aprender) ===================================================================== */

/* Encimado en el teléfono: en 739.98 px o menos la barra «Empieza aquí · Por operación…» pasa a
   position:relative, pero cromo.css le deja top: var(--hm-hdr-h) !important (64 px). La barra baja 64 px,
   tapa las migas «Inicio / Aprender» y 13 px de «— Aprender», y deja una franja vacía de 48 px bajo el
   encabezado. Aquí la regla lleva el mismo !important con más especificidad para devolverla a su lugar.
   Regla del pulgar en esa barra:
   - enlaces de 44 px de alto, separados 8 px (antes: 34 px, a 4 px);
   - botón de búsqueda de 44 × 44 (antes: 40 × 36);
   - «Inicio» de las migas: el relleno amplía su área a 45 × 44 sin mover el texto. Es más largo hacia abajo
     para quedar a 12 px de la barra. */
@media (max-width:739.98px),(max-width:1023px) and (max-height:500px) and (pointer:coarse){
  .apn .apn-sub{top:0 !important}
  .apn .apn-sub-l{gap:8px}
  .apn .apn-sub-l a{display:flex;align-items:center;min-height:44px}
  .apn .apn-sub-buscar{min-width:44px;min-height:44px;justify-content:center;align-items:center}
  .apn .apn-migas a{padding:6px 6px 22px;margin-inline:-6px}
}

/* Texto bajo el encabezado al saltar: el enlace «Aprender» de esa barra lleva a #apn-heroe, que no tiene
   scroll-margin-top, aunque las demás secciones de la barra tienen 72 px. Al saltar, el encabezado y la barra
   tapan 30 px del héroe en 1440 y 1920, y 104 px en 4K, título incluido. Sólo cambia el punto donde se detiene
   el salto; no mueve nada en pantalla. */
#apn-heroe{scroll-margin-top:72px}

@media (max-width:760px){
/* Encabezado: lupa, carrito y menú de 44 px estaban a 6 px; el logo medía 40 de alto. */
.hdr.hdr .hdr-in{column-gap:8px}
.hdr.hdr a.logo{display:flex;align-items:center;min-height:44px}

}

@media (max-width:760px){
/* Pie: categorías (nav.fp-c) de 34 px, pegadas → filas de 44 px con 8 px entre ellas. */
footer.fin-p.fin-p nav.fp-c a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
footer.fin-p.fin-p nav.fp-c li + li{margin-top:10px} /* 10 y no 8: en el cromo de las páginas interiores cada enlace lleva un ::after que lo agranda 1 px por lado */
/* Pie: navegación principal (nav.fp-n, rejilla de 2 columnas) de 44 px sin espacio entre renglones. */
footer.fin-p.fin-p nav.fp-n{row-gap:10px}
/* Pie: WhatsApp grande (.fp-b) de 29 px de alto. */
footer.fin-p.fin-p .fp-b a{display:inline-flex;align-items:center;min-height:44px}
/* Pie: teléfono y correo de la dirección, y ciudades: enlaces en línea de 16 px → 44×44 como mínimo, 8 px entre renglones. */
footer.fin-p.fin-p address a{display:inline-flex;align-items:center;min-height:44px}
footer.fin-p.fin-p .fp-d li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
footer.fin-p.fin-p .fp-d ul{display:grid;row-gap:10px}
/* Pie: avisos legales (.fp-l) de 29 px, a 4 px entre renglones. */
footer.fin-p.fin-p .fp-l ul{display:flex;flex-wrap:wrap;gap:10px 16px}
footer.fin-p.fin-p .fp-l a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
/* Pie: el botón flotante de WhatsApp (58 px, fijo abajo a la derecha) tapaba los últimos enlaces del pie, y al final de
   la página ya no hay cómo destaparlos → espacio libre abajo del pie del alto del botón. */
/* El padding-bottom del pie ya lo fija cromo.css con !important (28px + var(--ah-pulgar-total), el alto de la barra del
   pulgar que pone movil.js). Por eso el espacio va en un ::after, y sólo lo que falte para el botón flotante (76 px). */
footer.fin-p.fin-p::after{content:"";display:block;height:max(0px, calc(76px - var(--ah-pulgar-total, 0px)))}
/* Pie: el bloque «Contacto» de arriba del pie quedaba pegado al último enlace de la página. */
footer.fin-p.fin-p a.fp-g{margin-top:8px}
}

/* Paleta de Mario en todo el sitio (laptop, 5-nov-2026). Va AL FINAL en todas las páginas, o al final de cromo.css.
   Sólo reasigna variables de color: no cambia acomodo, tamaños ni tipografía. Gana por especificidad (0,3,0)
   aunque otra hoja cargue después. Azul #273C84, marino #172A59, carbón #17191E, pizarra #59616D, borde #D9DEE6,
   fondos #F4F5F7, #F1F3F6 y #E5E9EF. Los grises cálidos heredados de ahnsa-app.css pasan a grises fríos con la
   misma luminosidad (OKLCH, tono 262). Los colores fijos en reglas (no variables) los cambia aplica_paleta.mjs. */
:root:root:root,.ahsumi.ahsumi{
  --grey700:#17191E;
  --grey600:#303339;
  --grey400:#59616D;
  --grey300:#A2A6AE;
  --grey200:#D9DEE6;
  --grey100:#E5E9EF;
  --grey50:#F1F3F6;
  --blue700:#172A59;
  --blue600:#172A59;
  --blue500:#273C84;
  --blue400:#273C84;
  --blue200:#D9DEE6;
  --orange100:#D9DEE6;
  --orange700:#172A59;
  --inputgrey:#D9DEE6;
  --formlabs-orange:#273C84;
  --formlabs-orange-on-dark:#D9DEE6;
  --formlabs-orange-on-light:#273C84;
  --formlabs-orange-33:#273C84;
  --formlabs-blue:#273C84;
  --formlabs-blue-on-dark:#D9DEE6;
  --formlabs-blue-on-light:#273C84;
  --formlabs-blue-33:#273C84;
  --light-1:#FFFFFF;
  --light-2:#F4F5F7;
  --light-3:#F1F3F6;
  --light-4:#E5E9EF;
  --light-5:#D9DEE6;
  --light-6:#D9DEE6;
  --light-7:#CACED6;
  --light-8:#B7BBC3;
  --light-9:#888D94;
  --light-10:#7E8289;
  --light-11:#59616D;
  --light-12:#17191E;
  --dark-1:#17191E;
  --dark-2:#16191F;
  --dark-3:#1F2228;
  --dark-4:#26292F;
  --dark-5:#2E3137;
  --dark-6:#373A41;
  --dark-7:#45484F;
  --dark-8:#5C6066;
  --dark-9:#6B6F76;
  --dark-10:#777C83;
  --dark-11:#B0B5BC;
  --dark-12:#F1F3F6;
  --gray-300:#D9DEE6;
  --gray-500:#59616D;
  --fl-light-blue:#D9DEE6;
  --fl-focused-blue:#273C84;
  --fl-highlight-blue:#273C84;
  --fl-hover-blue:#172A59;
  --primary-accent-color:#273C84;
  --primary-accent-color-on-dark:#D9DEE6;
  --primary-accent-color-on-light:#273C84;
  --primary-accent-color-33:#273C84;
  --secondary-button-border-color:#D9DEE6;
  --nav-tinta:#17191E;
  --nav-tinta-2:#59616D;
  --nav-tinta-3:#59616D;
  --nav-conteo:#59616D;
  --nav-linea:#D9DEE6;
  --nav-linea-2:#F1F3F6;
  --nav-lavado:#F4F5F7;
  --nav-marino:#172A59;
  --nav-liga:#273C84;
  --nav-liga-alta:#273C84;
  --nav-azul:#273C84;
  --nav-azul-2:#172A59;
  --nav-pill:#F1F3F6;
  --nav-pill-borde:#D9DEE6;
  --ah-azul:#273C84;
  --ah-azul-h:#172A59;
  --ah-marino:#172A59;
  --ah-dark1:#17191E;
  --ah-light1:#FFFFFF;
  --ah-linea:#E5E9EF;
  --ah-gris:#59616D;
  --ah-tinta:#17191E;
  --ah-tinta-2:#59616D;
  --ah-tinta-3:#59616D;
  --ah-tinta-4:#59616D;
  --ah-iso-h:#59616D;
  --fi-tinta:#17191E;
  --fi-tinta-2:#59616D;
  --fi-tinta-3:#59616D;
  --fi-tinta-4:#59616D;
  --sku-azul:#273C84;
  --sku-marino:#172A59;
  --sku-linea:#E5E9EF;
  --sku-gris:#59616D;
  --hm-marino:#172A59;
  --hm-azul:#273C84;
  --hm-azul-2:#D9DEE6;
  --hm-celeste:#D9DEE6;
}
.guia-v2.guia-v2,.fam-hero--guia.fam-hero--guia{
  --g-ink:#17191E;
  --g-muted:#59616D;
  --g-line:#D9DEE6;
  --g-edge:#D9DEE6;
  --g-hov:#273C84;
  --g-paper:#F4F5F7;
  --g-tint:#F1F3F6;
  --g-blue:#273C84;
  --g-blue-d:#172A59;
  --g-focus:#273C84;
}
@media (max-width:739.98px){
:root:root:root,:root:root .am-a.am-a{
  --am-focus:#273C84;
  --am-blue:#273C84;
  --am-ink:#172A59;
  --am-a-azul:#273C84;
  --am-a-tinta:#172A59;
  --am-a-tx:#17191E;
  --am-a-mu:#59616D;
  --am-a-ln:#E5E9EF;
  --am-a-ph:#F1F3F6;
}
}