/* Circus Pizza: noche de carpa. Lona a rayas rojas arriba, fila de lamparitas de marquesina, nombre en letra de cartel,
   menú tipo cartelera con puntos dorados hasta el precio. Look oscuro único, elegido a propósito para la marca. */
:root{
  --noche:#0d1230; --noche-2:#141b42; --card:#18204d; --ink:#fbf3e4; --muted:#b6b9d6; --line:#2b3570;
  --rojo:#d81e2c; --rojo-osc:#a5121d; --oro:#f6b91d; --oro-claro:#ffd866; --crema:#fff7e6;
  --f-display:"Bungee","Arial Black",Impact,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-num:"Bungee","Arial Black",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noche);color:var(--ink);font:16px/1.5 var(--f-body);padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{max-width:880px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
a{color:var(--oro)}
.num,.precio{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* ---------- carpa ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding-block:0 52px;
  background:radial-gradient(ellipse 70% 60% at 50% 35%,rgb(246 185 29/.16),transparent 70%),var(--noche)}
.carpa{height:calc(70px + env(safe-area-inset-top,0px));
  background:repeating-linear-gradient(90deg,var(--rojo) 0 34px,var(--crema) 34px 68px);
  -webkit-mask:radial-gradient(34px 22px at 34px 100%,transparent 98%,#000) 0 0/68px 100%;
          mask:radial-gradient(34px 22px at 34px 100%,transparent 98%,#000) 0 0/68px 100%;
  box-shadow:inset 0 -8px 12px rgb(0 0 0/.25)}
.luces{height:22px;margin-top:6px;
  background:radial-gradient(circle,var(--oro-claro) 0 4px,rgb(255 216 102/.35) 5px,transparent 9px) 0 50%/30px 22px repeat-x}
@media (prefers-reduced-motion:no-preference){
  .luces{animation:titila 1.6s steps(2) infinite}
  @keyframes titila{50%{background-position:15px 50%}}
}
.hero .wrap{position:relative;padding-top:26px}
.logo{display:block;width:min(200px,50vw);height:auto;margin:0 auto 14px;border-radius:50%;filter:drop-shadow(0 0 28px rgb(246 185 29/.35)) drop-shadow(0 10px 18px rgb(0 0 0/.45))}
.eyebrow{margin:0 0 8px;font:600 .8rem var(--f-body);text-transform:uppercase;letter-spacing:.3em;color:var(--oro)}
.hero h1{font-size:clamp(2.6rem,11vw,5rem);line-height:.95;color:var(--oro-claro);
  text-shadow:0 3px 0 var(--rojo-osc),0 0 24px rgb(246 185 29/.45);letter-spacing:.01em}
.slogan{margin:16px auto 0;font-size:1.15rem;color:var(--crema);max-width:36ch}
.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips li{border:1px solid rgb(246 185 29/.45);border-radius:999px;padding:5px 14px;font-size:.9rem;color:var(--crema)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  font:700 1rem var(--f-body);padding:11px 22px;border-radius:999px;cursor:pointer;text-decoration:none}
.btn.pri{background:var(--rojo);border-color:var(--oro);color:#fff;box-shadow:0 4px 0 var(--rojo-osc)}
.btn.pri:hover{background:var(--rojo-osc)}
.btn.ghost{background:transparent;border-color:rgb(255 255 255/.4);color:var(--crema)}
.btn.full{width:100%}
.btn:disabled{opacity:.55;cursor:wait}

main{display:grid;gap:52px;padding-block:44px 120px}
main > .wrap{width:100%}
main h2{font-size:clamp(1.7rem,6vw,2.3rem);color:var(--oro);margin-bottom:18px;display:flex;align-items:center;gap:12px}
main h2::before,main h2::after{content:"★";font-size:.55em;color:var(--rojo)}
main h2::after{flex:1;content:"";height:2px;background:linear-gradient(90deg,var(--line),transparent)}
.aviso{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}

/* ---------- promos: entradas de función ---------- */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.promo{background:var(--rojo);color:#fff;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  border:2px solid var(--oro);position:relative;
  -webkit-mask:radial-gradient(10px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(10px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(10px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(10px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.promo h3{font-size:1.25rem;line-height:1.15;color:var(--oro-claro)}
.promo p{margin:6px 0 0;font-size:.95rem;color:var(--crema)}
.promo-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:2px dashed rgb(255 255 255/.5);padding-top:12px}
.promo .precio{font-size:1.3rem;color:#fff}

/* ---------- menú: cartelera ---------- */
.cat-nav{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 20px}
.cat-nav a{color:var(--crema);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.9rem;background:var(--noche-2)}
.cat-nav a:hover{border-color:var(--oro);color:var(--oro)}
.cat{margin-bottom:28px;background:var(--noche-2);border:1px solid var(--line);border-radius:16px;padding:6px 18px 4px}
.cat h3{font:700 .8rem var(--f-body);text-transform:uppercase;letter-spacing:.22em;color:var(--rojo);padding:14px 0 10px;border-bottom:2px solid var(--oro)}
.cat h3{color:#ff5a63}
.items{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.linea{display:flex;align-items:baseline;gap:8px;min-width:0}
.nom{font-weight:700;font-size:1.08rem;color:var(--crema)}
.dots{flex:1;border-bottom:3px dotted rgb(246 185 29/.45);transform:translateY(-4px);min-width:16px}
.item .precio{color:var(--oro);white-space:nowrap;font-size:1rem}
.desc{grid-column:1;margin:3px 0 0;color:var(--muted);font-size:.93rem}
.item .add{grid-column:2;grid-row:1/span 2}
.add{width:42px;height:42px;border-radius:50%;border:2px solid var(--oro);background:var(--rojo);color:#fff;font:700 1.4rem/1 var(--f-body);cursor:pointer;display:grid;place-items:center;position:relative}
.add:hover{background:var(--rojo-osc)}
.add[data-n]::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;background:var(--oro);color:var(--noche);font:700 .72rem var(--f-body);min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 4px}
.add.inv{width:auto;height:auto;border-radius:999px;padding:7px 16px;font-size:.95rem;background:var(--oro);color:var(--noche);border-color:var(--oro-claro)}
.add.inv:hover{background:var(--oro-claro)}
.add.inv[data-n]::after{background:var(--noche);color:var(--oro)}
.vacio{color:var(--muted)}

/* ---------- info ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px}
.info h3{font:700 .8rem var(--f-body);text-transform:uppercase;letter-spacing:.2em;color:var(--oro);margin-bottom:6px}
.info p{margin:0 0 6px;color:var(--crema)}
.pie{border-top:1px solid var(--line);padding-block:22px;color:var(--muted);font-size:.85rem}
.pie .wrap{display:flex;justify-content:space-between}

/* ---------- pedido ---------- */
.carrito-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 28px),560px);
  display:flex;align-items:center;gap:12px;background:var(--crema);color:var(--noche);border:2px solid var(--oro);border-radius:16px;padding:12px 14px 12px 18px;
  font:600 1rem var(--f-body);cursor:pointer;z-index:10;box-shadow:0 10px 30px rgb(0 0 0/.5)}
.carrito-bar .num{margin-left:auto}
.carrito-bar .ver{background:var(--rojo);color:#fff;border-radius:10px;padding:7px 12px;font-weight:700}

dialog{border:2px solid var(--oro);padding:0;background:var(--noche-2);color:var(--ink);border-radius:18px;width:min(calc(100% - 24px),520px);max-height:calc(100% - 32px)}
dialog::backdrop{background:rgb(5 7 20/.75)}
.dlg-in{padding:20px;display:grid;gap:14px}
.dlg-head{display:flex;justify-content:space-between;align-items:center}
.dlg-head h2{font-size:1.4rem;color:var(--oro)}
.x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.4rem;cursor:pointer;line-height:1}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lista li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.lista .num{color:var(--oro);font-size:.92rem}
.qty{display:inline-flex;align-items:center;gap:4px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 1rem var(--f-body);cursor:pointer}
.qty span{min-width:20px;text-align:center;font-weight:700}
.total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:1.1rem;border-top:3px dotted rgb(246 185 29/.45);padding-top:10px}
.total .num{color:var(--oro);font-size:1.25rem}
form{display:grid;gap:12px;margin-top:6px}
form label{display:grid;gap:4px;font-size:.88rem;font-weight:600;color:var(--muted)}
input,select{font:500 1rem var(--f-body);color:var(--ink);background:var(--noche);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
fieldset.seg{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
fieldset.seg legend{font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:4px;padding:0}
fieldset.seg label{flex:1 1 140px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-weight:500;cursor:pointer}
fieldset.seg label:has(input:checked){border-color:var(--oro);background:rgb(246 185 29/.12)}
fieldset.seg input{width:auto;accent-color:var(--rojo)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{background:rgb(216 30 44/.18);color:#ff8a90;padding:10px 12px;border-radius:10px;margin:0;font-weight:500}
.mini{font-size:.82rem;color:var(--muted);margin:0}
.ok-t{font-family:var(--f-display);font-size:1.35rem;margin:0;color:var(--oro)}
#paso-2{display:grid;gap:12px}
#paso-2 p{margin:0}

/* ---------- portada junto al nombre ---------- */
.hero-in{display:grid;gap:30px;justify-items:center}
.con-portada .wrap{max-width:1080px}
@media (min-width:860px){
  .con-portada .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;text-align:left;justify-items:stretch}
  .con-portada .logo{margin-left:0}
  .con-portada .chips,.con-portada .hero-cta{justify-content:flex-start}
  .con-portada .slogan{margin-left:0}
}
.portada{margin:0;width:min(100%,460px);justify-self:center;padding:10px;border-radius:20px;background:var(--noche-2);
  border:3px solid var(--oro);box-shadow:0 0 0 6px var(--noche),0 0 0 8px rgb(246 185 29/.35),0 20px 50px rgb(0 0 0/.5);position:relative}
.portada::before{content:"";position:absolute;inset:-14px;border-radius:28px;pointer-events:none;
  background:radial-gradient(circle,var(--oro-claro) 0 3px,transparent 4px) 0 0/24px 24px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 14px no-repeat,linear-gradient(#000 0 0) bottom/100% 14px no-repeat,linear-gradient(#000 0 0) left/14px 100% no-repeat,linear-gradient(#000 0 0) right/14px 100% no-repeat;
          mask:linear-gradient(#000 0 0) top/100% 14px no-repeat,linear-gradient(#000 0 0) bottom/100% 14px no-repeat,linear-gradient(#000 0 0) left/14px 100% no-repeat,linear-gradient(#000 0 0) right/14px 100% no-repeat}
.portada img{display:block;width:100%;height:auto;border-radius:12px;max-width:100%}

.btn.ig{background:transparent;border-color:var(--oro);color:var(--oro-claro)}
.btn.ig:hover{background:rgb(246 185 29/.12)}

/* ---------- galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,220px),1fr));gap:10px}
.foto{position:relative;display:block;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:var(--noche-2)}
.foto:hover{border-color:var(--oro)}
.foto img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.foto span{position:absolute;inset:auto 0 0 0;padding:20px 10px 8px;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgb(5 7 20/.85))}
.visor{border:2px solid var(--oro);background:var(--noche);padding:12px;width:auto;max-width:calc(100% - 24px)}
.visor img{display:block;max-width:min(90vw,1100px);max-height:80vh;width:auto;height:auto;border-radius:10px;margin:0 auto}
.visor p{margin:8px 4px 0;color:var(--crema);text-align:center}
.visor p:empty{display:none}
.visor .x{position:absolute;top:8px;right:8px;z-index:1}

/* ---------- pie ---------- */
.pie .wrap{flex-wrap:wrap;gap:10px 20px;align-items:center}
.pie a{color:var(--muted)}
.pie a:hover{color:var(--oro)}
.admin-link{margin-left:auto;font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none}

/* =====================================================================
   RESPONSIVO: ajustes para celulares chicos, tablets y pantallas anchas
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img{max-width:100%}
.hero h1{overflow-wrap:anywhere;hyphens:auto}
.slogan,.promo h3,.promo p,.desc,.info p{overflow-wrap:anywhere}
.nom{min-width:0;overflow-wrap:anywhere}
.chips li{max-width:100%;overflow-wrap:anywhere}
.btn{min-height:44px;text-align:center}
.x{flex:none;width:40px;height:40px;display:grid;place-items:center}
.add{flex:none}

/* el diálogo del pedido puede ser más alto que la pantalla: que tenga scroll propio */
dialog{overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 32px)}
.dlg-head{position:sticky;top:-20px;z-index:1;background:var(--noche-2);margin:-20px -20px 0;padding:20px 20px 10px}
.lista li > span:nth-child(2){min-width:0;overflow-wrap:anywhere}

/* que la barra del pedido no tape el pie de página */
body:has(#bar:not([hidden])) .pie{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.carrito-bar > span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carrito-bar .num,.carrito-bar .ver{flex:none}

.visor img{max-height:80dvh}

/* tablet */
@media (max-width:860px){
  .con-portada .hero-in{gap:36px}
}

/* celulares */
@media (max-width:600px){
  .wrap{padding-inline:16px}
  .carpa{height:calc(52px + env(safe-area-inset-top,0px))}
  .hero{padding-block:0 40px}
  .hero .wrap{padding-top:20px}
  .slogan{font-size:1.05rem}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-inline:auto}
  .hero-cta .btn{width:100%}
  .portada{width:min(100%,400px)}
  main{gap:40px;padding-block:32px 96px}
  main h2{margin-bottom:14px}
  .cat{padding:4px 14px 2px;border-radius:14px}
  .item{column-gap:12px;padding:12px 0}
  .nom{font-size:1rem}
  .item .precio{font-size:.92rem}
  .desc{font-size:.9rem}
  .cat-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 16px calc(100% - 24px),transparent);
            mask:linear-gradient(90deg,transparent,#000 16px calc(100% - 24px),transparent)}
  .cat-nav::-webkit-scrollbar{display:none}
  .cat-nav a{flex:none;padding:8px 14px}
  .info-grid{gap:20px}
  .pie .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .admin-link{margin-left:0;padding:8px 14px}

  /* pedido como hoja que sube desde abajo */
  dialog#dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px))}
  #dlg .dlg-in{padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  #dlg .dlg-head{top:-16px;margin:-16px -16px 0;padding:16px 16px 10px}
  .qty button{width:36px;height:36px}
  .visor{padding:8px;max-width:calc(100% - 16px)}
  .visor img{max-width:100%;max-height:75dvh}
}

/* celulares muy angostos (320–380 px) */
@media (max-width:380px){
  .wrap{padding-inline:12px}
  .cat-nav{margin-inline:-12px;padding-inline:12px}
  .hero h1{font-size:2.2rem}
  .eyebrow{letter-spacing:.2em}
  .item{grid-template-columns:minmax(0,1fr) auto}
  .add{width:40px;height:40px}
  .promo{padding:16px 14px}
  .promo-pie{flex-wrap:wrap}
  .carrito-bar{gap:8px;padding:10px 10px 10px 14px;font-size:.92rem}
  .carrito-bar .ver{padding:7px 10px}
  fieldset.seg label{flex-basis:100%}
  .lista li{gap:8px;font-size:.95rem}
}

/* celular acostado: poca altura */
@media (max-height:500px) and (orientation:landscape){
  .carpa{height:40px}
  .hero{padding-block:0 28px}
  .logo{width:110px}
  dialog,dialog#dlg{max-height:calc(100dvh - 12px)}
}

/* pantallas grandes */
@media (min-width:1280px){
  .wrap{max-width:960px}
  .con-portada .wrap{max-width:1160px}
}

/* táctil: sin efectos hover pegados */
@media (hover:none){
  .btn.pri:hover{background:var(--rojo)}
  .add:not(.inv):hover{background:var(--rojo)}
}

/* 320–360 px: la barra del pedido muestra solo cantidad y total; el ítem del pedido pone el nombre arriba */
@media (max-width:360px){
  .carrito-bar .ver{display:none}
  .carrito-bar::after{content:"›";font:700 1.5rem/1 var(--f-body);color:var(--rojo);margin-left:2px}
}
@media (max-width:380px){
  .lista li{grid-template-columns:auto 1fr;grid-template-areas:"n n" "q p";row-gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .lista li > span:nth-child(2){grid-area:n}
  .lista li > .qty{grid-area:q}
  .lista li > .num{grid-area:p;justify-self:end}
}