/* ============================================================
   Ciao Pizza — "Insegna neon" (propuesta 1 de la muestra).

   La carta es la pared de noche y el letrero encendido: negro calido, tipografia
   condensada de rotulo, y el acento sale del tubo de neon (ambar) y de la brasa,
   no de la bandera. El tricolor vive DENTRO del logotipo y no se repite fuera:
   repetirlo a media carta le quita fuerza al letrero, que es el heroe.
   ============================================================ */
:root{
  /* Negro CALIDO, no gris neutro: al lado de un negro puro el generico de la
     casa se ve vivo y el neutro se ve muerto. */
  --nero:#0A0807;
  --nero-2:#141010;
  --nero-3:#1D1815;
  --nero-nav:#0D0A09;
  --linea:rgba(244,236,221,.09);
  --linea-2:rgba(244,236,221,.2);

  --crema:#F2EBDD;
  --crema-2:rgba(242,235,221,.52);
  --crema-3:rgba(242,235,221,.35);

  /* Brasa: el acento sale del fuego del horno. El ambar es la luz del tubo. */
  --brasa:#B2401E;
  --brasa-2:#E4622F;
  --brasa-3:#E08052;
  --miel:#E9C9A0;
  --luz:#FFD9A3;
  --precio:#FFC873;

  --maxw:720px;
  --font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-display:'Anton',Impact,sans-serif;
  --font-cond:'Oswald',var(--font);
}


*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--nero);
  color:var(--crema);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
/* Grano de carbon: rompe el negro plano sin llegar a leerse como textura. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.menu-root{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding-bottom:60px; }

/* Antetitulo en italiano: el registro que le da voz a la carta. */
.mano{
  font-family:var(--font-cond); font-weight:600; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--brasa-3);
}

/* ============================================================
   HERO — la pared de noche y el letrero encendido
   ============================================================ */
.hero{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(44px,11vw,64px) clamp(24px,7vw,34px) clamp(44px,11vw,60px);
  background:radial-gradient(140% 120% at 50% 30%, #100C0A 0%, var(--nero) 60%, #070504 100%);
}

/* La luz que el letrero deja en la pared. Es lo que hace que el neon PERSISTA:
   no se apaga nunca, solo late muy despacio. Sin esto el letrero se lee como un
   PNG con sombra, no como un tubo encendido. */
.hero-luz{
  position:absolute; left:50%; top:clamp(120px,30vw,150px);
  width:min(460px,120%); height:300px; margin-left:min(-230px,-60%); margin-top:-150px;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,178,102,.30) 0%, rgba(228,98,47,.14) 38%, rgba(228,98,47,0) 72%);
  animation:neonPool 11s ease-in-out infinite alternate;
}
.hero-anio{
  position:relative; font-family:var(--font-cond); font-weight:500; font-size:11px;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(242,235,221,.65);
}

/* El letrero. Son CINCO capas del mismo logotipo recortadas con clip-path, no
   cinco imagenes: el tubo de la I tiene que poder fallar por su cuenta mientras
   el resto sigue encendido, y eso pide separarlo del resto del trazo.
   Los porcentajes estan medidos sobre ESTE logotipo -- cambiarlo obliga a
   volver a medirlos, o la I se recorta por donde no es. */
.insegna{
  position:relative; z-index:1; display:block;
  width:min(272px,78%); margin:24px auto 0; aspect-ratio:700 / 435;
  filter:drop-shadow(0 0 10px rgba(255,243,220,.95)) drop-shadow(0 0 40px rgba(255,166,84,.6)) drop-shadow(0 0 76px rgba(228,98,47,.38));
  animation:neonOn 2.4s linear 1 both,
            neonHold 11s ease-in-out 2.4s infinite alternate,
            neonTic 19s linear 2.4s infinite;
}
.insegna img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.insegna-a{ clip-path:inset(0 70.5% 0 0); }        /* antes de la I */
.insegna-b{ clip-path:inset(0 0 0 43%); }          /* despues de la I */
.insegna-c{ clip-path:inset(86.5% 57% 0 29.5%); }  /* el subtitulo, bajo la I */
/* La I apagada al 14%: el cristal se sigue viendo cuando el tubo esta muerto. */
.insegna-off{ clip-path:inset(0 57% 13.5% 29.5%); opacity:.14; }
/* Y la I encendida, que es la que falla. */
.insegna-i{ clip-path:inset(0 57% 13.5% 29.5%); animation:fallaI 6.8s linear infinite; }

.hero-regla{ position:relative; display:flex; align-items:center; gap:11px; width:100%; margin-top:18px; }
.hero-regla span{ flex:1; height:1px; background:linear-gradient(90deg, rgba(242,235,221,0), rgba(242,235,221,.28)); }
.hero-regla span:last-child{ background:linear-gradient(90deg, rgba(242,235,221,.28), rgba(242,235,221,0)); }
.hero-regla em{
  font-family:var(--font-cond); font-style:normal; font-size:9.5px; font-weight:500;
  letter-spacing:.38em; text-transform:uppercase;
  color:rgba(242,235,221,.62); white-space:nowrap;
}

/* Arranque del letrero: enciende titubeando, como un tubo real al que le llega
   la corriente. Corre UNA vez; despues manda neonHold. */
@keyframes neonOn{
  0%{ opacity:.12; } 6%{ opacity:.12; } 7%{ opacity:1; } 9%{ opacity:.25; }
  12%{ opacity:1; } 13.5%{ opacity:.2; } 16%,100%{ opacity:1; }
}
/* El halo se queda entre 30 y 48 px con un ciclo de 11 s: cambia de intensidad
   sin llegar a apagarse. Un ciclo corto se lee como un letrero que se apaga y
   vuelve, que es lo contrario de lo que se busca. */
@keyframes neonHold{
  from{ filter:drop-shadow(0 0 8px rgba(255,243,220,.9)) drop-shadow(0 0 30px rgba(255,166,84,.5)) drop-shadow(0 0 62px rgba(228,98,47,.3)); }
  to{ filter:drop-shadow(0 0 12px rgba(255,243,220,1)) drop-shadow(0 0 48px rgba(255,166,84,.68)) drop-shadow(0 0 92px rgba(228,98,47,.44)); }
}
/* El tic de un tubo real: una vez cada 19 s, no cada 5. */
@keyframes neonTic{ 0%,93.4%,94.1%,95.2%,100%{ opacity:1; } 93.7%{ opacity:.55; } 94.6%{ opacity:.82; } }
@keyframes neonPool{ from{ opacity:.55; transform:scale(.97); } to{ opacity:1; transform:scale(1.04); } }
/* La I es el tubo que falla: nunca termina de asentarse. El ritmo es irregular a
   proposito -- uno regular se lee como animacion, no como averia. */
@keyframes fallaI{
  0%,6%{opacity:1;}7%{opacity:.12;}8.5%{opacity:1;}9.6%{opacity:.2;}11%{opacity:1;}
  33%{opacity:1;}34%{opacity:.15;}35.4%{opacity:.85;}36.4%{opacity:.1;}38%{opacity:1;}
  61%{opacity:1;}62%{opacity:.18;}63.4%{opacity:1;}
  78%{opacity:1;}79%{opacity:.1;}80%{opacity:.62;}81%{opacity:.12;}82.6%,100%{opacity:1;}
}
/* Quien pidio menos movimiento recibe el letrero ENCENDIDO y quieto: apagar la
   animacion de la I sin esto la dejaria en el 14% de la capa muerta. */
@media (prefers-reduced-motion:reduce){
  .insegna,.insegna-i,.hero-luz{ animation:none; }
  .insegna-i{ opacity:1; }
}

/* ============================================================
   NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:40;
  padding:12px 0;
  background:rgba(13,10,9,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.chips{ display:flex; gap:6px; overflow-x:auto; padding:0 18px; scrollbar-width:none; scroll-behavior:smooth; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; cursor:pointer;
  padding:8px 13px; border-radius:4px;
  border:1px solid var(--linea-2); background:transparent; color:var(--crema-2);
  font-family:var(--font-cond); font-weight:500; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s;
}
.chip:hover{ color:var(--crema); border-color:var(--brasa-3); }
.chip.is-on{ background:var(--brasa); border-color:var(--brasa); color:#FFEBDC; }

/* Pista de que la fila abre su ficha. Va una vez, arriba, y no por plato. */
.pista{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 20px 0;
  font-family:var(--font-cond); font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(242,235,221,.45);
}

/* ============================================================
   PROMOS — cajas de brasa sobre la pared, no bloques de color
   ============================================================ */
.promos{ padding:26px 20px 0; }
.promos-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.promos-title{
  margin:4px 0 0; font-family:var(--font-display); font-weight:400; font-size:23px;
  line-height:1; letter-spacing:.03em; text-transform:uppercase; color:var(--crema);
}
.promos-desliza{
  display:inline-flex; align-items:center; gap:6px; padding-bottom:4px;
  font-family:var(--font-cond); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brasa-3);
}
.promos-fila{ display:flex; gap:11px; margin-top:13px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.promos-fila::-webkit-scrollbar{ display:none; }
.promo{
  flex:0 0 min(76vw,240px); position:relative; overflow:hidden;
  padding:15px 16px 14px; border-radius:8px;
  background:linear-gradient(165deg,#20110C,#150C09);
  border:1px solid rgba(226,110,60,.35);
  box-shadow:inset 0 0 24px rgba(228,98,47,.12);
}
.promo-eyebrow{
  position:relative; display:inline-block;
  font-family:var(--font-cond); font-size:9.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brasa-3);
}
.promo-title{
  position:relative; margin:9px 0 0;
  font-family:var(--font-display); font-weight:400; font-size:19px; line-height:1.14;
  letter-spacing:.02em; text-transform:uppercase; color:#F6EFE1;
}
.promo-text{ position:relative; margin:6px 0 0; font-size:11.5px; line-height:1.5; color:rgba(242,235,221,.6); }
.promo-cta{
  position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--font-cond); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--precio);
}
.promo-cta:hover{ color:#FFE0B0; }
/* Banda de imagen del banner: sangra al borde de la tarjeta (margenes negativos
   contra el padding de .promo) y baja a negro para que el texto se lea encima. */
.promo-media{ position:relative; margin:-15px -16px 12px; height:104px; overflow:hidden; border-bottom:1px solid rgba(226,110,60,.3); }
.promo-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.promo-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(21,12,9,0) 45%,rgba(21,12,9,.9)); }

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{ padding:32px 20px 0; scroll-margin-top:70px; }
.sec-name{
  margin:3px 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(24px,6.4vw,26px); line-height:1; letter-spacing:.03em;
  text-transform:uppercase; color:var(--crema);
}
/* Filete bajo el titulo: de brasa a miel, como el degradado del tubo. */
.sec-barra{ display:block; margin-top:11px; height:3px; width:66px; background:linear-gradient(90deg,var(--brasa),var(--miel)); }

/* ============================================================
   PLATOS
   ============================================================ */
.platos{ margin-top:4px; }
.plato{ display:flex; align-items:flex-start; gap:12px; padding:15px 0; }
.plato + .plato{ border-top:1px solid rgba(244,236,221,.06); }
.plato-foto{ flex:0 0 64px; }
.plato-foto img{ width:64px; height:64px; object-fit:cover; border-radius:6px; display:block; border:1px solid rgba(244,236,221,.12); }
.plato-txt{ flex:1; min-width:0; }
/* La cabecera lleva nombre, guia y precio en la MISMA linea (nowrap): con
   flex-wrap el precio se caia solo a un renglon propio y quedaba flotando a la
   derecha, lejos del plato al que pertenece. */
.plato-head{ display:flex; align-items:baseline; gap:9px; }
.plato-head .price-stack{ align-items:flex-end; }
.plato-head.is-tap{ cursor:pointer; }
.plato-name{
  font-family:var(--font-cond); font-weight:500; font-size:16px; line-height:1.2;
  letter-spacing:.05em; text-transform:uppercase; color:var(--crema);
  /* Un nombre largo se parte en dos lineas antes que empujar al precio fuera. */
  min-width:0;
}
.plato-desc{ margin-top:5px; font-size:12px; line-height:1.5; color:var(--crema-2); max-width:46ch; text-wrap:pretty; }
.plato-credit{ margin-top:3px; font-size:11.5px; color:var(--crema-3); }
.plato-addon{ margin-top:5px; font-size:12px; color:var(--miel); }
.plato-chevron{ color:var(--crema-3); display:inline-flex; transition:transform .18s; }
.plato-chevron.is-open{ transform:rotate(180deg); }
/* El chevron de la fila que abre ficha: se mueve muy de vez en cuando, lo justo
   para que se lea como tocable sin pedir atencion. */
.plato-ir{ flex:0 0 auto; align-self:center; color:rgba(242,235,221,.35); display:inline-flex; animation:tapPulse 5.5s ease-in-out infinite; }
@keyframes tapPulse{
  0%,78%,100%{ transform:translateX(0); opacity:.55; }
  84%{ transform:translateX(3px); opacity:1; }
  90%{ transform:translateX(0); opacity:.7; }
  96%{ transform:translateX(2px); opacity:.95; }
}
@media (prefers-reduced-motion:reduce){ .plato-ir{ animation:none; } }

/* La guia punteada al precio: convencion de carta impresa (y el mismo device
   que .dish-leader del template generico). */
.plato-linea{ display:flex; align-items:flex-end; gap:8px; margin-top:6px; }
.guia{ flex:1; height:0; margin-bottom:5px; border-bottom:1.5px dotted rgba(244,236,221,.22); min-width:16px; }
.precio{
  font-family:var(--font-display); font-weight:400; font-size:21px;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum';
  color:var(--precio); white-space:nowrap; letter-spacing:.01em;
}
button.precio{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:none; border:0; padding:0; transition:color .15s, transform .12s;
}
button.precio:hover{ color:#FFE0B0; }
button.precio:active{ transform:scale(.95); }
.mas{ font-size:13px; opacity:.7; }
.agotado{
  font-family:var(--font-cond); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brasa-3);
}
.variantes{ flex:1; display:flex; flex-direction:column; gap:5px; }
.var{ display:flex; align-items:flex-end; gap:8px; }
.var-label{ font-family:var(--font-cond); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--crema-2); white-space:nowrap; }

.etq{
  font-family:var(--font-cond); font-size:8.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:3px 7px; border-radius:3px;
  border:1px solid rgba(226,110,60,.4); color:var(--brasa-3);
}
.etq--spicy{ border-color:rgba(228,98,47,.55); color:#FFB08A; }
.etq--premium{ border-color:rgba(233,201,160,.45); color:var(--miel); }
.etq--chef,.etq--hormone{ border-color:rgba(244,236,221,.22); color:var(--crema-2); }

/* ============================================================
   PIE
   ============================================================ */
.pie{ margin-top:44px; padding:30px 20px 34px; text-align:center; border-top:1px solid var(--linea); }
.pie-grazie{
  font-family:var(--font-display); font-weight:400; font-size:26px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--crema-3);
}
.pie-nombre{
  margin-top:10px; font-family:var(--font-cond); font-weight:500; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase;
}
.pie-linea{ margin-top:5px; font-size:12.5px; color:var(--crema-2); }
.pie-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:14px; }
.pie-links a{ color:var(--precio); font-size:13px; font-weight:600; text-decoration:none; }
.pie-links a:hover{ text-decoration:underline; }
.pie-servimi{ margin-top:18px; font-size:11px; color:var(--crema-3); }
.pie-servimi a{ color:var(--crema-2); }

/* ============================================================
   Bottom-sheet de detalle (partial compartido)
   ============================================================ */
.dish-modal-backdrop{ animation:dmFade .22s ease both; position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.72); backdrop-filter:blur(2px); }
/* El panel NO hereda el ancho de la carta (--maxw:720px, la columna mas ancha de
   las cinco plantillas): a 720px la foto sale de 495px de alto y el detalle de un
   plato ocupa la pantalla entera. Mismo tope que las otras. */
.dish-modal{
  animation:dmSlide .28s cubic-bezier(.2,.8,.3,1) both;
  position:fixed; z-index:71; left:0; right:0; bottom:0;
  max-width:460px; margin:0 auto;
  background:var(--nero-2); color:var(--crema);
  border-radius:16px 16px 0 0; border-top:1px solid rgba(255,201,138,.22);
  max-height:88dvh; overflow-y:auto;
  padding:0 0 calc(24px + env(safe-area-inset-bottom));
}
.dm-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer; z-index:2;
  border:0; border-radius:50%; background:rgba(10,8,7,.62); color:var(--crema);
}
/* Misma proporcion que las otras plantillas (16/11): las fotos del catalogo son
   16/10, asi que una caja 4/3 recortaba de mas. */
.dm-photo{
  position:relative; width:100%; aspect-ratio:16/11; overflow:hidden;
  background:var(--nero-3); border-radius:16px 16px 0 0;
}
.dm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dm-photo--vertical{ aspect-ratio:3/4; }
.dm-photo::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to bottom, transparent, var(--nero-2));
  pointer-events:none;
}
.dm-photo--none{
  display:grid; place-items:center; aspect-ratio:16/7; min-height:0;
  background:radial-gradient(80% 100% at 50% 0%, rgba(228,98,47,.18), var(--nero-3) 72%);
}
.dm-photo--none img{ width:auto; height:auto; max-width:52%; max-height:64%; object-fit:contain; opacity:.92; }
.dm-photo--none::after{ content:none; }
.dm-body{ display:flex; flex-direction:column; gap:12px; padding:14px 22px 0; }
.dm-name{
  font-family:var(--font-display); font-weight:400; font-size:25px; line-height:1.1;
  letter-spacing:.03em; text-transform:uppercase; color:var(--crema); padding-right:34px;
}
.dm-desc{ font-size:13.5px; line-height:1.62; color:rgba(242,235,221,.68); }
.dm-credit,.dish-credit{ font-size:12px; color:var(--crema-3); }
.dm-tags,.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dm-tags .tag,.tags .tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-cond); font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:4px 9px; border:1px solid rgba(228,98,47,.45); color:var(--miel);
}
.tags .tag svg{ width:12px; height:12px; }
.dm-price{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:13px; border-top:1px solid var(--linea);
  font-family:var(--font-display); font-weight:400; font-size:22px;
  font-variant-numeric:tabular-nums; color:var(--precio);
}
.dm-variants{ display:flex; flex-direction:column; gap:8px; }
.dm-add,.dm-add--variant{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:12px 14px; border-radius:8px; cursor:pointer;
  background:var(--brasa); border:0; color:#FFF6EA;
  font-family:var(--font-cond); font-weight:500; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
}
.dm-add:hover,.dm-add--variant:hover{ background:var(--brasa-2); }
.dm-stamp{
  font-family:var(--font-cond); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:13px; color:var(--brasa-3);
}
.note{ padding:10px 12px; border-radius:6px; background:var(--nero-3); border-left:3px solid var(--miel); }
.note-label{ display:block; font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--miel); }
.note-text{ margin-top:3px; font-size:12.5px; color:var(--crema-2); }
.amounts{ display:flex; flex-direction:column; align-items:flex-end; }
/* El numero del sheet vive DENTRO de .amt-ref (ver partials/dish-sheet), asi que
   el tamano de .dm-price no lo alcanza: sin esta regla el precio de la ficha
   sale mas chico que en la fila de la carta -- al reves de lo que corresponde en
   la pantalla donde el comensal decide. */
.dm-price .amt-ref{
  font-family:var(--font-display); font-weight:400; font-size:24px;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum';
  color:var(--precio); letter-spacing:.01em;
}
.amt-ref{ font-size:11.5px; color:var(--crema-3); font-family:var(--font); }

/* ============================================================
   Carrito de delivery (partial compartido; hoy apagado por producto)
   ============================================================ */
.cart-fab{
  position:fixed; z-index:60;
  right:max(16px, calc(50vw - var(--maxw)/2 + 16px)); bottom:18px;
  display:inline-flex; align-items:center; gap:8px; padding:13px 18px;
  border-radius:999px; cursor:pointer;
  background:var(--brasa); border:0; color:#FFF6EA;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}
.cart-fab svg{ width:19px; height:19px; }
.cart-fab-label{ font-family:var(--font-cond); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.cart-fab-count{
  min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center;
  border-radius:999px; background:var(--precio); color:var(--nero); font-weight:700; font-size:11px;
}
.cart-modal{
  position:fixed; z-index:71; left:0; right:0; bottom:0;
  max-width:var(--maxw); margin:0 auto;
  background:var(--nero-2); border-radius:16px 16px 0 0; border-top:1px solid rgba(255,201,138,.22);
  max-height:88dvh; overflow-y:auto;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
}
.cart-body{ display:flex; flex-direction:column; gap:12px; }
.cart-empty{ padding:22px 0; text-align:center; font-size:13.5px; color:var(--crema-3); }
.cart-list{ display:flex; flex-direction:column; gap:9px; }
.cart-line{ display:flex; align-items:center; gap:10px; padding-bottom:9px; border-bottom:1px solid var(--linea); }
.cart-line-name{ flex:1; font-size:13.5px; }
.cart-line-qty{ display:flex; align-items:center; gap:7px; }
.cart-line-qty button{
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  background:var(--nero-3); border:1px solid var(--linea-2); color:var(--crema);
}
.cart-line-price{ font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; font-size:14px; }
.cart-line-del{ background:none; border:0; color:var(--crema-3); cursor:pointer; }
.cart-total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--linea);
  font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.cart-form{ display:flex; flex-direction:column; gap:9px; }
.cart-field{
  width:100%; padding:11px 13px; border-radius:8px;
  background:var(--nero); border:1px solid var(--linea-2); color:var(--crema);
  font-family:var(--font); font-size:14px;
}
.cart-field:focus{ outline:none; border-color:var(--brasa); }
.cart-submit{
  width:100%; padding:14px; border-radius:9px; cursor:pointer;
  background:var(--brasa); border:0; color:#FFF6EA;
  font-family:var(--font-cond); font-weight:500; font-size:14px; letter-spacing:.12em; text-transform:uppercase;
}
.cart-submit:hover{ background:var(--brasa-2); }
.cart-errors{ padding:11px 13px; border-radius:8px; background:rgba(228,98,47,.14); border:1px solid var(--brasa); }
.cart-errors-title{ font-weight:700; font-size:12.5px; color:var(--brasa-2); }
.cart-errors ul{ margin:5px 0 0 16px; font-size:12.5px; color:var(--crema-2); }

@media (min-width:640px){
  .plato-name{ font-size:17px; }
  .precio{ font-size:22px; }
}

/* ---------------------------------------------------------------------------
   Densidad comprimida (settings.theme.density = compacta).
   --------------------------------------------------------------------------- */
[data-density="compacta"] .plato{ padding:11px 0; gap:10px; }
[data-density="compacta"] .plato-name{ font-size:15px; }
[data-density="compacta"] .plato-desc{ font-size:11.5px; }
[data-density="compacta"] .plato-foto img{ width:52px; height:52px; }

/* Modo combinado: el equivalente en Bs bajo el precio en dolares. La clase la
   comparten las cinco plantillas. */
.amt-bs{ font-size:.6em; font-weight:600; opacity:.72; margin-top:2px; white-space:nowrap; text-align:right; font-family:var(--font); color:var(--crema-2); }

/* Modo combinado: precio arriba, equivalente en Bs debajo. El envoltorio hace
   falta porque el contenedor del precio es flex EN FILA (.plato-linea): sin el,
   el renglon en Bs se pone AL LADO. */
.price-stack{ display:flex; flex-direction:column; align-items:flex-end; }

/* ---------------------------------------------------------------------------
   Entrada y salida del bottom-sheet. El estado `closing` lo maneja el mixin
   dishSheet() en JS; esto es solo el CSS.
   --------------------------------------------------------------------------- */
@keyframes dmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dmFadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes dmSlide{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes dmSlideOut{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
.dish-modal-backdrop.closing{ animation:dmFadeOut .23s ease both; }
.dish-modal.closing{ animation:dmSlideOut .24s cubic-bezier(.4,0,.7,1) both; }
/* Quien pidio menos movimiento no recibe ninguno: el panel sigue funcionando. */
@media (prefers-reduced-motion:reduce){
  .dish-modal-backdrop, .dish-modal,
  .dish-modal-backdrop.closing, .dish-modal.closing{ animation:none; }
}

/* Ancla del plato (#plato-ID): el banner que apunta a un plato aterriza aca, y
   sin este margen el plato queda debajo de la cabecera fija. Mismo
   desplazamiento que usa la seccion en esta carta. */
.plato{ scroll-margin-top:70px; }

/* Densidad comprimida: la descripcion sale de la fila (sigue completa al abrir
   el plato). Acotada a data-detalle="panel": en acordeon la gobierna Alpine
   (x-show al abrir) y esconderla dejaria la fila abierta sin nada que mostrar. */
.menu-root[data-detalle="panel"][data-density="compacta"] .plato-desc{ display:none; }

/* La lupa del buscador va fija al final de la barra, fuera del riel de chips. */
.topbar{ display:flex; align-items:center; padding-right:12px; }
.chips{ flex:1; min-width:0; }

/* Acordeon: la descripcion crece y se recoge en lugar de aparecer de golpe.
   grid-template-rows 0fr->1fr anima a cualquier alto sin medir nada en JS, y
   al ser CSS puro el interruptor de animaciones del panel ya la apaga. */
.desc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.desc-fold.is-open { grid-template-rows: 1fr; }
.desc-fold > * { overflow: hidden; min-height: 0; margin: 0; padding-top: 0;
  transition: padding-top .26s ease; }
.desc-fold.is-open > * { padding-top: 5px; }
@media (prefers-reduced-motion: reduce) { .desc-fold, .desc-fold > * { transition: none; } }

/* El boton del banner y las anclas de plato navegan por hash: sin esto el salto
   es seco. El interruptor de animaciones lo pisa con scroll-behavior:auto. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }