:root{
  --ink:#111;
  --accent:#dc3039;
  --line:#ddd;
  --slide-gap:8px;
  --slide-width:calc((100% - 2 * var(--slide-gap))/3)
}
*,*::before,*::after{
box-sizing:border-box
}
html{scroll-behavior:smooth}
body{
margin:0;
overflow-x:hidden;
font-family:'Burger',sans-serif;
color:var(--ink);
background:#fff;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{
outline:3px solid var(--accent);
outline-offset:3px
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}
.topbar{
height:26px;
background:#111;
color:#fff;
display:none;
align-items:center;
justify-content:space-between;
padding:0 12px;
font-size:9px;
text-transform:uppercase
}
.header{
min-height:64px;
border-bottom:1px solid #828081;
display:flex;
align-items:center;
padding:0 10px;
gap:30px;
background:#fff;
position:relative;
z-index:20
}
.logo-box {
width: 320px;
 margin:6px 0px 2px 0px;
}
.nav{
display:flex;
gap:16px;
margin-left:auto;
align-items:center;
font-size:1.45rem;
font-weight:600;
text-transform:uppercase
}
.nav a:hover,.footer a:hover{
text-decoration:underline;
text-underline-offset:3px
}
.nav .cta{
background:#111;
color:#fff;
padding:8px 12px
}
.hamb{
display:none;
margin-left:auto;
border:0;
background:transparent;
font-size:30px;
cursor:pointer;
min-width:44px;
min-height:44px;
 margin-bottom: 2px
}
/* Carousel: 3 columns on desktop, 1 on mobile;
 every image stays 3:4. */
.hero{
position:relative;
overflow:hidden;
background:#fff;
touch-action:pan-y;
user-select:none;
height:90vh;
height:90svh
}
.track{
height:100%;
display:flex;
gap:var(--slide-gap);
will-change:transform;
transform:translate3d(0,0,0)
}
.slide{
flex:0 0 var(--slide-width);
height:100%;
position:relative;
overflow:hidden;
background:#fff
}
 .slide > img.slide-bg{
display:block;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
-webkit-user-drag:none
}
.slide::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 35%,rgba(0,0,0,.38));
pointer-events:none
}
.slide-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:clamp(28px,6vh,72px) 14px clamp(38px,7vh,80px);
opacity:0;
transform:translateY(16px);
visibility:visible;
transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1);
pointer-events:none
}
.slide.is-active .slide-content{
opacity:1;
transform:translateY(0);
pointer-events:auto
}
.slide-logo{
width:min(72%,270px);
max-height:25%;
object-fit:contain;
  filter:drop-shadow(0 1px 4px #0002)
}
.slide-bottom{
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
width:100%
}
.slide-product{
width:min(72%,290px);
max-height:25vh;
object-fit:contain;
  filter:drop-shadow(0 5px 12px #0001)
}
.slide-order{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:12px 25px;
background:var(--accent);
color:#111;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.07em;
border-radius:0
}
.slide-order:hover{
background:#fff
}
.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:4;
width:48px;
height:48px;
border:1px solid #fff;
border-radius:50%;
background:rgba(17,17,17,.66);
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:background .25s ease,scale .25s ease
}
.arrow svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round
}
.prev{
left:18px
}
.next{
right:18px
}
.arrow:hover{
background:#111;
scale:1.06
}
.arrow:active{
scale:.96
}
.carousel-controls{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
padding:12px 0
}
.dots{
display:flex;
align-items:center;
gap:8px
}
.dot{
width:9px;
height:9px;
border:0;
border-radius:50%;
background:#bcbcbc;
padding:0;
cursor:pointer
}
.dot[aria-current="true"]{
background:#111;
transform:scale(1.15)
}
.utility{
position:sticky;
bottom:0;
z-index:15;
background:#fff;
min-height:46px;
border-top:1px solid #fff;
border-bottom:1px solid #fffv;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 22px;
text-transform:uppercase;
font-size:13px
}
.utility a{
text-decoration:underline;
text-underline-offset:2px
}
.open-status{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
white-space:nowrap
}
.open-status::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#d28b35;
flex:none
}
.open-status[data-open="true"]::before{
background:#239b65
}
.cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
padding:10px
}
.card{
min-height:245px;
position:relative;
background-size:cover;
background-position:center;
overflow:hidden;
display:block
}
.card::after,.feature::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.08));
pointer-events:none
}
.card span{
position:absolute;
z-index:2;
left:10px;
bottom:28px;
  color:#fff;
font-weight:700;
font-size:2.5rem;
text-transform:uppercase
}
.feature{
margin:0 10px 72px;
min-height:530px;
background:linear-gradient(115deg,#141414,#514331);
position:relative;
display:flex;
align-items:center;
padding:8%;
color:#fff;
overflow:hidden
}
.feature .copy{
position:relative;
z-index:2;
max-width:820px
}
.eyebrow{
font-size:9px;
letter-spacing:2px;
text-transform:uppercase
}
.feature h2{
font-size:5rem;
line-height:0.9;
  font-family: "piepie", sans-serif;
  font-weight: 400;
  text-transform:uppercase;
margin:20px 0
}
.feature p{
font-size:13px;
line-height:1.6
}
.btn{
display:inline-block;
margin-top:18px;
background:var(--accent);
color:#111;
padding:14px 20px;
text-transform:uppercase;
font-size:11px;
font-weight:bold
}
.quotes{
min-height:260px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:center;
text-align:center;
padding:20px 40px 70px;
gap:35px
}
.quote::before{
content:'“';
display:block;
font-size:76px;
color:#ddd;
font-weight:bold;
line-height:.5
}
.quote{
font-family:Georgia,serif;
font-style:italic;
font-size:13px
}
.loop{
padding:35px 12px 70px;
border-top:1px solid #ddd
}
.loop h2{
text-align:center;
text-transform:uppercase
}
.news{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-top:30px
}
.news-item{
min-height:260px;
background:#ddd;
position:relative
}
.news-item:nth-child(odd){
background:#111
}
.news-item span{
position:absolute;
bottom:15px;
left:14px;
right:14px;
color:#fff;
font-weight:900;
text-transform:uppercase
}
.subscribe{
border-top:1px solid #ddd;
padding:60px 12%;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}
.subscribe h3{
color:var(--accent);
text-transform:uppercase
}
.footer{
border-top:1px solid #ddd;
padding:55px 10px;
display:grid;
grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
gap:40px;
font-size:14px;
text-transform:uppercase;
line-height:2
}
.footer strong{color:#c27630}
.footer a{display:block}

.brand{margin: 0;}
.brand img{width: 220px;}

@media(min-width:768px) and (max-width:1199px){
:root{
--slide-width:76%;
--slide-gap:12px
}
}
@media(max-width:767px){
:root{
--slide-width:100%;
--slide-gap:0px
}
 .hero{height:calc(90vh - 76px);height:calc(90svh - 76px)}
 /* svh permanece estable cuando aparece/desaparece la barra del navegador. */
 .slide-logo{
width:72%;
height:clamp(80px,18svh,170px);
max-height:none;
object-fit:contain;
flex-shrink:0
}
 .slide-content{
padding-top:clamp(20px,5svh,55px);
padding-bottom:clamp(30px,6svh,65px)
}
.topbar{display:flex}
.header{min-height:50px;padding:0 9px}
.brand{margin: 0;}
.brand img{width: 200px;}
.hamb{display:block}
.nav{
display:flex;
visibility:hidden;
pointer-events:none;
clip-path:inset(0 0 100% 0);
transition:clip-path .62s cubic-bezier(.22,1,.36,1),visibility 0s linear .62s;
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border-bottom:1px solid #ccc;
padding:14px;
box-shadow:0 10px 18px #0002;
flex-direction:column;
align-items:stretch;
gap:0;
font-size:13px
}
.nav.is-open{
visibility:visible;
pointer-events:auto;
clip-path:inset(0 0 0 0);
transition:clip-path .62s cubic-bezier(.22,1,.36,1),visibility 0s
}
.nav a{
padding:13px 10px
}
.nav .cta{
text-align:center;
margin-top:6px
}
.arrow{
width:40px;
height:40px
}
.prev{
left:10px
}
.next{
right:10px
}
 .utility{
padding-bottom:max(8px,env(safe-area-inset-bottom))
}
.utility{
min-height:34px;
padding:8px 12px;
justify-content:flex-end
}
.utility{
flex-wrap:wrap;
justify-content:space-between
}
.utility>span:first-child{
display:inline-flex
}
.utility>span:last-child{
margin-left:auto
}
.cards{
grid-template-columns:1fr;
padding:8px;
gap:7px
}
.card{
min-height:210px
}
.feature{
margin:0 8px 65px;
min-height:420px;
padding:60px 25px;
text-align:center;
justify-content:center
}
.feature h2{
font-size:27px
}
.feature p{
font-size:12px
}
.quotes{
grid-template-columns:1fr;
min-height:220px;
padding:20px
}
.quote:not(:nth-child(2)){
display:none
}
.news{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.news-item{
min-height:230px
}
.subscribe{
padding:45px 25px;
display:block;
text-align:center
}
.footer{
grid-template-columns:repeat(2,minmax(0,1fr));
padding:40px 35px;
gap:25px
}
.footer>div:first-child{
grid-column:1/-1;
text-align:center
}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
*,*::before,*::after{
animation-duration:.01ms!important;
transition-duration:.01ms!important
}
}
/* Feature fotográfico responsive */
.feature{
background-image:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.12)),url('img/720.jpg');
background-position:center;
background-size:cover;
background-repeat:no-repeat;
min-height:clamp(420px,55vw,690px)
}
/* Menú de promociones */
.promo-menu{
padding:60px 10px;
background:#fff
}
.promo-menu h2{
  text-transform:uppercase;
  font-size:3rem;
margin:0 0 10px
}
.promo-intro{
font-size:22px;
margin:0 0 28px;
color:#56616a
}
.promo-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px
}
.promo-card{
display:grid;
grid-template-columns:1fr 2fr;
min-height:220px;
  background:#f8f8f6;
overflow:hidden
}
.promo-image{
width:100%;
height:100%;
object-fit:cover;
min-height:220px;
display:block
}
.promo-detail{
display:flex;
flex-direction:column;
min-width:0;
padding:18px 16px
}
.promo-detail h3{
  font-size:1rem;
text-transform:uppercase;
  line-height:1.1;
margin:0 0 12px
}
.promo-detail p{
font-size:1.25rem;
line-height:1.2;
margin:0;
color:#52616b
}
.promo-actions{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:auto;
gap:8px
}
.promo-add{
border:0;
border-radius:50%;
width:43px;
height:43px;
flex:none;
background:var(--ink);
color:#fff;
font-size:28px;
line-height:1;
cursor:pointer
}
.promo-add:hover{
background:var(--accent);
color:var(--ink)
}
/* Popup */
.promo-dialog{
border:0;
padding:0;
width:min(960px,calc(100% - 28px));
max-height:min(88dvh,850px);
background:#fff;
color:var(--ink);
box-shadow:0 25px 80px #0006
}
.promo-dialog::backdrop{
background:rgba(0,0,0,.72)
}
.promo-dialog-layout{
display:grid;
grid-template-columns:1fr 2fr;
min-height:420px
}
.promo-dialog-photo{
width:100%;
height:100%;
min-height:420px;
object-fit:cover
}
.promo-dialog-body{
padding:32px;
overflow-y:auto;
max-height:88dvh
}
.promo-dialog-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:15px
}
.promo-dialog h2{
margin:0 0 8px;
font-size:clamp(22px,3vw,34px);
text-transform:uppercase
}
.promo-close{
border:0;
background:#111;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
font-size:25px;
cursor:pointer;
flex:none
}
.promo-dialog-description{
font-size:13px;
line-height:1.6;
color:#59636a
}
.option-group{
padding:22px 0;
border-bottom:1px solid #ddd
}
.option-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:14px
}
.option-heading h3{
margin:0;
font-size:16px;
text-transform:uppercase
}
.option-count{
font-size:12px;
font-weight:700;
background:#eee;
padding:7px 10px;
border-radius:30px;
white-space:nowrap
}
.option-count.complete{
background:#d9eee1;
color:#17623b
}
.option-choices{
display:grid;
gap:9px
}
.option-choice{
display:flex;
align-items:center;
gap:12px;
border:1px solid #ddd;
padding:13px;
cursor:pointer;
font-size:13px
}
.option-choice:has(input:checked){
border-color:var(--ink);
background:#f2f4f5
}
.option-choice input{
accent-color:#111;
width:17px;
height:17px
}
.promo-dialog-footer{
display:flex;
justify-content:flex-end;
align-items:center;
gap:16px;
padding-top:22px
}
.promo-confirm{
background:var(--accent);
border:0;
padding:14px 22px;
font-weight:800;
text-transform:uppercase;
cursor:pointer
}
.promo-confirm:disabled{
opacity:.4;
cursor:not-allowed
}
.promo-message{
font-size:12px;
color:#17623b;
margin:12px 0 0
}
@media(max-width:1100px){
.promo-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}
}
@media(max-width:767px){
.feature{
background-position:center;
min-height:450px
}
.promo-menu{
padding:40px 10px 55px
}
.promo-grid{
grid-template-columns:1fr
}
.promo-card{
min-height:190px
}
.promo-image{
min-height:190px
}
.promo-dialog-layout{
grid-template-columns:1fr
}
.promo-dialog-photo{
height:200px;
min-height:0
}
.promo-dialog-body{
padding:20px;
max-height:calc(88dvh - 200px)
}
.promo-dialog{
max-height:88dvh;
overflow-y:auto
}
.promo-detail h3{
font-size:20px
}
}
/* Redes sociales y navegación de categorías */
.header{
position:sticky;
top:0;
z-index:40;
gap:16px
}
.header .nav{
gap:14px
}
.desktop-socials,.mobile-socials{
display:flex;
align-items:center;
gap:13px;
flex-shrink:0
}
.social-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:25px;
height:30px
}
.social-link svg,.mobile-whatsapp svg{
width:30px;
height:30px
}
.social-link:hover{
color:var(--accent)
}
.mobile-socials,.mobile-whatsapp{
display:none
}
.category-nav{
position:fixed;
top:var(--header-height,65px);
left:0;
right:0;
z-index:39;
display:flex;
align-items:center;
justify-content:center;
overflow-x:auto;
white-space:nowrap;
background:#fff;
border-bottom:1px solid #ddd;
padding:14px 10px;
box-shadow:0 8px 20px #00000012;
transform:translateY(-120%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:transform .3s ease,opacity .3s ease,visibility .3s
}
.category-nav.is-visible{
transform:translateY(0);
opacity:1;
visibility:visible;
pointer-events:auto
}
.category-link{
font-size:1.25rem;
text-transform:uppercase;
font-weight:600;
padding:6px 10px 4px 10px;
border-radius: 3px;
background-color: transparent;
}
.category-link.is-active{
color:#fff;
background-color:var(--accent)
}
#promociones,.catalog-section{
scroll-margin-top:calc(var(--header-height,65px) + 76px)
}
.catalog-section{
padding:48px 10px 60px
}
.catalog-section h2{
font-size:3rem;
text-transform:uppercase;
margin:0 0 10px
}
.catalog-placeholder{
min-height:250px;
border-top:1px solid #eee
}
@media(max-width:767px){
 .header{
gap:8px;
flex-wrap:wrap
}
 .logo-box{
width:230px;
margin-right:auto
}
 .logo-box img{
display:block;
width:100%;
height:auto
}
 .desktop-socials{
display:none
}
 .mobile-socials{
display:flex;
gap:5px;
margin-left:auto
}
 .mobile-socials .social-link{
width:25px
}
 .mobile-whatsapp{
display:inline-flex;
align-items:center;
gap:4px;
font-size:14px;
white-space:nowrap;
order:-1
}
 .mobile-whatsapp svg{
color:#169c59;
width:25px;
height:25px
}
 .hamb{
margin-left:0;
font-size:24px;
min-width:34px
}
 .category-nav{
justify-content:flex-start;
gap:20px;
padding:10px 13px;
scrollbar-width:none
}
 .category-nav::-webkit-scrollbar{
display:none
}
 .catalog-section{
padding:38px 10px 48px
}
 .catalog-section h2{
font-size:2.3rem
}
}
@media(min-width:768px) and (max-width:1050px){
.logo-box{
width:230px
}
.nav{
font-size:1.05rem;
gap:9px!important
}
.desktop-socials{
gap:6px
}
}
/* Ajustes de legibilidad, slogan y scroll único del popup */
.slide-order,.btn,.promo-confirm{
color:#fff
}
.slide-order:hover{
color:var(--ink)
}
.utility-slogan{
flex:1;
text-align:center;
font-weight:700;
letter-spacing:.055em;
font-size: 1.75rem;
}
.utility-links{
white-space:nowrap;
font-size: 1rem;
}
/* Solo el panel de contenido desplaza: el dialogo nunca crea otro scroll. */
.promo-dialog{
overflow:hidden;
max-height:88dvh
}
.promo-dialog-layout{
height:min(88dvh,850px);
min-height:0
}
.promo-dialog-photo{
min-height:0;
height:100%
}
.promo-dialog-body{
min-height:0;
max-height:none;
overflow-y:auto;
overscroll-behavior:contain
}
@media(min-width:768px){
 .utility{
font-size:16px;
padding:14px 24px
}
 .open-status{
font-size:16px
}
 .slide-order{
font-size:16px;
min-height:48px;
padding:13px 28px
}
 .card span{
font-size:3rem
}
 .promo-menu h2,.catalog-section h2{
font-size:3.6rem
}
 .promo-intro{
font-size:25px
}
 .promo-detail h3{
font-size:clamp(21px,1.9vw,29px)
}
 .promo-detail p,.promo-actions{
font-size:16px
}
 .promo-add{
width:49px;
height:49px;
font-size:31px
}
 .promo-dialog h2{
font-size:clamp(27px,3vw,40px)
}
 .promo-dialog-description,.option-choice{
font-size:16px
}
 .option-heading h3{
font-size:20px
}
 .option-count,.promo-message{
font-size:14px
}
 .promo-confirm{
font-size:16px
}
 .feature p,.quote{
font-size:17px
}
 .btn{
font-size:15px
}
 .loop h2,.subscribe h3{
font-size:2rem
}
 .news-item span{
font-size:18px
}
 .footer{
font-size:14px
}
}
@media(max-width:767px){
 .utility-slogan{
display:none
}
 .promo-dialog{
height:auto;
max-height:88dvh;
overflow:hidden
}
 .promo-dialog-layout{
height:min(88dvh,720px);
grid-template-rows:170px minmax(0,1fr);
min-height:0
}
 .promo-dialog-photo{
height:170px;
min-height:0
}
 .promo-dialog-body{
max-height:none;
min-height:0;
overflow-y:auto
}
}
/* Precios, resumen y total fijo */
.price-current{
font-weight:900;
font-size:clamp(17px,1.6vw,24px)
}
.price-old{
color:#81878a;
font-size:clamp(12px,1vw,16px);
margin-left:5px
}
.card-price{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:3px
}
.option-price{
margin-left:auto;
font-weight:700;
white-space:nowrap
}
.promo-dialog-body{
display:flex;
flex-direction:column;
padding-bottom:0
}
#promo-option-groups{
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain
}
#order-summary{
flex:1;
overflow-y:auto;
min-height:0;
font-size:16px;
line-height:1.6
}
#order-summary li{
margin:8px 0
}
.promo-dialog-footer{
position:sticky;
bottom:0;
z-index:3;
background:#fff;
border-top:1px solid #ddd;
padding:16px 0;
flex-wrap:wrap;
justify-content:space-between
}
.total-label{
font-size:14px;
display:flex;
flex-direction:column
}
.total-label strong{
font-size:25px
}
#send-whatsapp{
background:#168a50;
text-decoration:none;
color:white;
text-align:center
}
[hidden]{
display:none!important
}
.footer-social{
display:flex!important;
align-items:center;
gap:10px
}
.footer-social svg{
width:17px;
height:17px;
flex:none
}
@media(max-width:767px){
 .topbar{
height:34px;
padding:0 12px;
display:flex;
justify-content:space-between;
gap:10px
}
 .topbar .mobile-whatsapp{
display:inline-flex;
order:0;
color:#fff;
font-size:17px
}
 .topbar .mobile-whatsapp svg{
color:#fff
}
 .topbar .mobile-socials{
display:flex;
margin-left:auto;
gap:9px
}
 .topbar .social-link{
color:#fff
}
 .header{
justify-content:space-between;
flex-wrap:nowrap
}
 .logo-box{
width:230px;
margin:3px auto 3px 0px;
}
 .hamb{
margin-left:auto
}
 .category-nav{
scroll-behavior:smooth;
scroll-padding-inline:15px
}
 .promo-dialog-body{
overflow:hidden
}
 #promo-option-groups{
overflow-y:auto
}
 .promo-dialog-footer{
padding:12px 0;
gap:8px
}
 .total-label strong{
font-size:21px
}
 .promo-confirm{
padding:12px 14px
}
}
/* Ajustes finales: navegación, tarjetas clicables y cierre del modal */
.promo-card {
 cursor: pointer;
 transition: background-color .2s ease;
}
.promo-card:hover {
 background-color: #eef3f9;
}
.promo-card:focus-visible {
 outline: 3px solid var(--accent);
 outline-offset: -3px;
}
.promo-card .promo-add {
 pointer-events: none;
}
@media (max-width: 767px) {
  .category-nav {
 top: var(--header-height, 50px);
}
  .promo-dialog {
 overflow: visible;
}
  .promo-dialog-layout {
 overflow: visible;
}
  .promo-dialog-head .promo-close {
    position: absolute;
    top: 170px;
    right: 12px;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 3px 12px #0004;
    width: 44px;
    height: 44px;
  
}
}

/* Tamaño de pizza: primera opción del configurador. */
.pizza-size-group { padding-top: 10px; background: #f7f8f9; margin-top: 10px; padding-left: 12px; padding-right: 12px; }
.pizza-size-group .option-heading h3 { font-weight: 900; }
.size-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.size-choices .option-choice { flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 6px; }
.size-choices .option-price { width: 100%; margin: 0; }
@media(max-width:480px) { .size-choices .option-choice { font-size: 11px; gap: 5px; } }

/* Banda de texto continua bajo las tres tarjetas */
.menu-ticker{background:#dc3039;color:#fff;overflow:hidden;width:100%;padding:16px 0;white-space:nowrap;user-select:none}
.menu-ticker-track{display:flex;width:max-content;animation:menu-ticker-scroll 28s linear infinite}
.menu-ticker-part{display:flex;align-items:center;flex:none;gap:42px;padding-right:42px;font-size:clamp(18px,2.5vw,30px);font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.menu-ticker-part span::after{content:'✦';margin-left:42px}
@keyframes menu-ticker-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.menu-ticker-track{animation:none}}
  /* Selector de unidades para acompañamientos, salsas y bebidas */
  .quantity-control{display:inline-flex;align-items:center;gap:0;margin-left:auto;flex-shrink:0;border:1px solid #d5dce1;border-radius:5px;overflow:hidden;background:white}
  .quantity-control button{width:30px;height:32px;border:0;background:#edf1f4;color:var(--ink);font-size:20px;cursor:pointer}
  .quantity-control button:disabled{opacity:.35;cursor:default}
  .quantity-control output{min-width:25px;text-align:center;font-weight:800;font-size:14px}
  .option-choice.quantity-choice{cursor:default;flex-wrap:wrap}
  .quantity-choice .option-price{margin-left:0}
  @media(max-width:480px){.quantity-choice{gap:7px}.quantity-choice>span:first-child{flex:1;min-width:100px}}
  
.special-tabs{display:flex;gap:5px;margin:8px 0 12px}.special-tabs button{flex:1;padding:12px 5px;border:1px solid #d5dce1;background:#f2f4f5;color:#111;cursor:pointer;font-weight:800}.special-tabs button.is-active{background:#be4648;color:#fff}.special-tabs button:disabled{opacity:.4;cursor:default}.step-back{border:0;background:transparent;text-decoration:underline;cursor:pointer;padding:10px}