/* 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 h2,.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/b84f094e1fbd/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/b84f094e1fbd/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 h2{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 h2{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/b84f094e1fbd/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(10, 30, 94);}
.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(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 h2{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}