/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.screen{display:none;}
.screen.active{display:block;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* ============ LANDING ============ */
#landing.active{display:flex;}
#landing{
  min-height:100vh;
  width:100%;
  flex-direction:row;
}
.pick-panel{
  position:relative;
  flex:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:flex-grow .6s cubic-bezier(.22,.68,0,1.01);
  cursor:pointer;
  order:1;
}
#landing:has(.pick-panel:hover) .pick-panel{flex-grow:0.85;}
#landing:has(.pick-panel:hover) .pick-panel:hover{flex-grow:1.5;}

/* -- Orden según el QR escaneado (?loc=pyc | ?loc=forno) -- */
#landing.prio-pyc .pick-pyc{order:0;}
#landing.prio-forno .pick-forno{order:0;}

/* -- Il Forno panel -- */
.pick-forno{
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(201,161,90,.35), rgba(201,161,90,0) 60%),
    linear-gradient(180deg,#3b1019 0%, #4a1620 45%, #3a1017 100%);
  color:#f3e8d3;
}
.forno-oven{
  position:absolute;
  bottom:-14%;
  left:50%;
  transform:translateX(-50%);
  width:78%;
  max-width:520px;
  aspect-ratio:1/0.72;
  border-radius:50% 50% 6% 6%/70% 70% 6% 6%;
  background:radial-gradient(60% 80% at 50% 30%, #ff9d4d 0%, #d1541f 32%, #7a2412 62%, transparent 75%);
  filter:blur(1px);
  opacity:.55;
}
.pick-forno .pick-inner{position:relative;z-index:2;text-align:center;padding:6vh 6vw;}
.pick-logo{
  width:clamp(150px,32vw,230px);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:26px;
  margin:0 auto;
  display:block;
}
.pick-forno .pick-logo{box-shadow:0 0 0 1px rgba(201,161,90,.4), 0 18px 40px rgba(0,0,0,.4);}
.pick-pyc .pick-logo{box-shadow:0 8px 24px rgba(28,28,22,.12);}
.forno-word{
  font-family:'Dancing Script',cursive;
  font-weight:700;
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:.9;
  color:#f6ecd8;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.forno-sub{
  font-family:'Playfair Display',serif;
  letter-spacing:.38em;
  font-size:clamp(.78rem,1.6vw,1.02rem);
  margin-top:.6rem;
  color:#dbb877;
  font-weight:700;
}
.forno-tag{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1.02rem,1.8vw,1.3rem);
  font-weight:600;
  letter-spacing:.01em;
  margin-top:1.4rem;
  color:#efe4cc;
  opacity:.95;
}
.pick-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:2.2rem;
  padding:.7rem 1.6rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pick-forno .pick-cta{border-color:#c9a15a;color:#f6ecd8;font-family:'Cormorant Garamond',serif;font-weight:600;}

/* -- Punto y Coma panel -- */
.pick-pyc{
  background-image:linear-gradient(90deg,#4c6a41 0 50%, #5c7c4d 50% 100%);
  background-size:92px 100%;
  background-repeat:repeat;
  background-position:center;
  background-color:#faf7ee;
  position:relative;
}
.pick-pyc::before{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(250,247,238,.94) 0 50%, rgba(250,247,238,0) 50% 100%);
  background-size:92px 100%;
  background-repeat:repeat;
  background-position:center;
}
.pick-pyc .pick-inner{
  position:relative;z-index:2;text-align:center;
  padding:2.6rem 1.9rem;
  margin:6vh clamp(22px,7vw,64px);
  background:rgba(250,247,238,.96);
  border-radius:28px;
  box-shadow:0 14px 44px rgba(28,28,22,.14);
}
.pyc-mark{
  width:clamp(80px,11vw,120px);
  height:clamp(80px,11vw,120px);
  margin:0 auto 1.1rem;
  border-radius:50%;
  background:#faf7ee;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.6rem,5vw,3.6rem);
  color:#465c34;
  box-shadow:0 0 0 6px rgba(70,92,52,.14);
}
.pyc-word{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.1rem,5.8vw,3.5rem);
  letter-spacing:0;
  color:#1c1c16;
  line-height:1;
}
.pyc-word span{color:#465c34;}
.pyc-tag{
  font-family:'Inter',sans-serif;
  font-size:clamp(.92rem,1.7vw,1.08rem);
  margin-top:.9rem;
  color:#1c1c16;
  font-weight:600;
  letter-spacing:.01em;
}
.pyc-slogan{
  font-family:'Inter',sans-serif;
  font-style:italic;
  font-size:clamp(.8rem,1.4vw,.92rem);
  margin-top:.3rem;
  color:#465c34;
}
.pick-pyc .pick-cta{border-color:#1c1c16;color:#1c1c16;font-family:'Space Grotesk',sans-serif;font-weight:600;}

.pick-divider{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.12);
  z-index:3;
}

@media (max-width:820px){
  #landing{flex-direction:column;}
  .pick-panel{min-height:50vh;}
  #landing:has(.pick-panel:hover) .pick-panel{flex-grow:1;}
  .pick-divider{left:0;right:0;top:50%;bottom:auto;width:100%;height:1px;}
}

/* ============ MENU SHELL (shared) ============ */
.menu-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1.1rem;
}
.back-btn{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:999px;flex-shrink:0;
}
.menu-header .brand{
  flex:1;text-align:center;margin-right:2.4rem;
}
.brand-name{font-size:1.15rem;line-height:1;}
.brand-slogan{font-size:.68rem;font-style:italic;opacity:.75;margin-top:.3rem;}
.brand-sub{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-top:.2rem;}

.cat-nav{
  position:sticky;z-index:29;
  display:flex;gap:.5rem;overflow-x:auto;
  padding:.7rem .9rem;
  scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-pill{
  flex-shrink:0;white-space:nowrap;
  padding:.5rem 1rem;border-radius:999px;
  font-size:.82rem;font-weight:600;
  border:1px solid transparent;
  transition:all .2s ease;
}

.menu-content{max-width:900px;margin:0 auto;padding:1.6rem 1.1rem 5rem;}
.menu-hero{text-align:center;padding:1.6rem 1rem 2.2rem;}

section.cat-section{scroll-margin-top:132px;padding-top:1.6rem;padding-bottom:.4rem;}
.cat-title{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.3rem;}
.cat-title h2{font-size:1.5rem;}
.size-legend{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.55;white-space:nowrap;}
.cat-note{font-size:.85rem;font-style:italic;opacity:.7;margin-bottom:.6rem;max-width:60ch;}

.size-cols{display:flex;justify-content:flex-end;gap:.6rem;margin-bottom:.5rem;}
.size-cols span{min-width:2.7rem;text-align:right;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6;line-height:1.25;}
.size-cols span small{display:block;font-size:.85em;font-weight:400;letter-spacing:0;text-transform:none;opacity:.85;}

.block-heading{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin:1.6rem 0 .7rem;
  display:flex;align-items:center;gap:.6rem;
}
.block-note{font-size:.82rem;opacity:.65;margin:-.4rem 0 .9rem;}

/* ---- PLATILLO (un renglón del menú) ----
   .item-head   → fila con NOMBRE + línea punteada + PRECIO
   .item-name   → NOMBRE del platillo
   .item-leader → línea punteada que une nombre y precio
   .item-price  → PRECIO (si es por tamaño, muestra .price-m y .price-g)
   .item-desc   → INGREDIENTES / descripción bajo el nombre
   .item-extra  → texto adicional en cursiva (ej. "+ pollo $45")        */
.item{padding:.62rem 0;}
.item-head{display:flex;align-items:baseline;gap:.5rem;}
/* NOMBRE del platillo */
.item-name{font-weight:600;font-size:1rem;}
.item-leader{flex:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-.3em);}
/* PRECIO: números alineados (tabular-nums); su color se define por tema más abajo */
.item-price{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;display:flex;gap:.6rem;}
/* Precios por tamaño: columnas fijas para que M y G queden alineadas con .size-cols */
.item-price .price-m,.item-price .price-g{min-width:2.7rem;text-align:right;}
.item-price .price-g::before{content:"· ";opacity:.4;}
/* INGREDIENTES / descripción del platillo */
.item-desc{font-size:.86rem;opacity:.68;margin-top:.15rem;max-width:62ch;}
.item-extra{font-size:.84rem;font-style:italic;font-weight:600;margin-top:.2rem;opacity:.85;}

/* ---- PRESENTACIONES (ej. Chica / Grande): etiqueta ····· precio ---- */
.variant-row{display:flex;align-items:baseline;gap:.5rem;padding:.28rem 0 .28rem 1rem;}
.variant-label{font-size:.92rem;opacity:.85;}
.variant-leader{flex:1;border-bottom:1px dotted currentColor;opacity:.3;transform:translateY(-.3em);}
.variant-price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}

.menu-footer{padding:3rem 1.2rem 4rem;text-align:center;}

/* ============ THEME: IL FORNO ============ */
.theme-forno{
  background:#f3e8d3;
  color:#2b1912;
  font-family:'Lora',serif;
}
.theme-forno .menu-header{
  background:#2b1912;color:#f3e8d3;
  border-bottom:1px solid #4a1620;
}
.theme-forno .back-btn{background:rgba(255,255,255,.08);}
.theme-forno .brand-name{font-family:'Playfair Display',serif;font-weight:700;}
.theme-forno .brand-sub{color:#c9a15a;}
.theme-forno .cat-nav{
  background:#4a1620;top:60px;
  border-bottom:2px solid #2b1912;
}
.theme-forno .cat-pill{color:#e8dcc0;font-family:'Cormorant Garamond',serif;}
.theme-forno .cat-pill.active{background:#c9a15a;color:#2b1912;}
.theme-forno .menu-hero .eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;color:#a63328;font-size:1.05rem;}
.theme-forno .menu-hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.1rem,5vw,2.9rem);margin:.3rem 0;}
.theme-forno .menu-hero p{opacity:.7;font-size:.92rem;}
.theme-forno .cat-title h2{font-family:'Playfair Display',serif;color:#4a1620;}
.theme-forno .item-name{color:#2b1912;}
.theme-forno .item-price{color:#a63328;}
.theme-forno .block-heading{color:#3f6b44;border-bottom:1px solid #d8c7a3;padding-bottom:.5rem;}
.theme-forno .block-heading-big{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:#4a1620;text-transform:none;letter-spacing:normal;border-bottom:none;padding-bottom:0;}
.theme-forno .menu-footer{background:#2b1912;color:#e8dcc0;}
.theme-forno .menu-footer .fname{font-family:'Dancing Script',cursive;font-size:2.1rem;color:#f6ecd8;}
.theme-forno .menu-footer .fmeta{font-size:.85rem;opacity:.75;margin-top:.9rem;line-height:1.9;}
.theme-forno .menu-footer a{border-bottom:1px solid #c9a15a;}
.theme-forno .divider{width:64px;height:2px;background:#c9a15a;margin:.8rem auto 0;position:relative;}
.theme-forno .divider::before,.theme-forno .divider::after{content:"❧";position:absolute;top:-11px;font-size:1rem;color:#c9a15a;}
.theme-forno .divider::before{left:-18px;}
.theme-forno .divider::after{right:-18px;transform:scaleX(-1);}

/* ============ THEME: PUNTO Y COMA ============ */
.theme-pyc{
  background:#faf7ee;
  color:#1c1c16;
  font-family:'Inter',sans-serif;
}
.theme-pyc .menu-header{background:#faf7ee;border-bottom:1px solid #e3ddc9;}
.theme-pyc .back-btn{background:#1c1c16;color:#faf7ee;}
.theme-pyc .brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;}
.theme-pyc .brand-sub{color:#465c34;}
.theme-pyc .cat-nav{background:#faf7ee;top:58px;border-bottom:1px solid #e3ddc9;}
.theme-pyc .cat-pill{color:#1c1c16;background:#f0ead6;font-family:'Space Grotesk',sans-serif;}
.theme-pyc .cat-pill.active{background:#465c34;color:#faf7ee;}
.theme-pyc .menu-hero .eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:600;color:#465c34;letter-spacing:.08em;}
.theme-pyc .menu-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.1rem,5vw,2.9rem);margin:.3rem 0;}
.theme-pyc .menu-hero p{opacity:.65;font-size:.92rem;}
.theme-pyc .cat-title h2{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#1c1c16;}
.theme-pyc .cat-title h2::before{content:"; ";color:#7a9a58;}
.theme-pyc .item-name{color:#1c1c16;}
.theme-pyc .item-price{color:#465c34;}
.theme-pyc .block-heading{color:#7a9a58;border-bottom:1px dashed #d8d2ba;padding-bottom:.5rem;}
.theme-pyc .block-heading::before{content:";";color:#c8b25a;font-weight:800;}
.theme-pyc .menu-footer{background:#1c1c16;color:#faf7ee;}
.theme-pyc .menu-footer .fname{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.9rem;}
.theme-pyc .menu-footer .fname span{color:#8bb15c;}
.theme-pyc .menu-footer .fmeta{font-size:.85rem;opacity:.7;margin-top:.9rem;}

/* utility */
.hidden{display:none!important;}