/* Il Bruno: identidad sacada del cartel de su fachada (verde botella con "il Bruno" escrito a mano en blanco)
   y de sus afiches (letra gruesa redondeada, blanco harina). */
:root{
  /* color: matiz H = 165 (sale del verde del cartel de la fachada, #244034 = oklch(34.5% .040 165)) */
  --fondo:#f6f8f3;        /* oklch(97.6% .007 140): blanco harina de sus afiches */
  --fondo-2:#e8eee6;      /* oklch(94% .015 150) */
  --escena:#0d1f17;       /* el mismo verde noche de la tinta: un solo bloque fuerte */
  --tinta:#0d1f17;        /* oklch(22% .028 165) */
  --tinta-2:#44544c;      /* oklch(43% .024 165) */
  --linea:#c9d4cf;        /* oklch(86% .014 165) */
  --borde-campo:#64736c;  /* oklch(54% .02 165): 4,7:1 sobre el fondo */
  --acento:#194d3a;       /* oklch(38% .065 165): el verde del cartel */
  --acento-apretado:#0b3c2b;
  --sobre-acento:#ffffff; /* 9,7:1 */
  --borde-pizza:#e9c38f; --mancha:#3a2617;   /* el motivo: las manchitas del borde inflado */
  --ok:#1d7d3e; --atencion:#cd8800; --error:#c52c2a;
  --radio:12px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --entre-secciones:clamp(72px,9vw,136px);
  --lado:clamp(16px,5vw,64px);
  --t-portada:clamp(40px,10.5vw,92px);
  --t-seccion:clamp(30px,6.2vw,56px);
  --t-texto:17px; --t-chico:14.5px;
  --curva:cubic-bezier(.16,1,.3,1); --rapido:160ms; --medio:320ms; --lento:560ms;
  --letra-titulo:"Corben", Georgia, serif;
  --letra-texto:"Albert Sans", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--letra-texto);font-size:var(--t-texto);line-height:1.5;-webkit-tap-highlight-color:transparent}
body.con-hoja{overflow:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--letra-titulo);font-weight:700;line-height:1.06;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{max-width:65ch;margin:0}
a{color:inherit}
.precio,.hora{font-variant-numeric:tabular-nums lining-nums}
input,select,textarea,button{font:inherit;font-size:16px}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:4px}
.portada :focus-visible,.cierre :focus-visible{outline-color:#fff}
.c{width:100%;max-width:1200px;margin-inline:auto;padding-left:var(--lado);padding-right:var(--lado)}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:12px 16px;border-radius:var(--radio);min-height:44px}
.saltar:focus{top:44px}
.franja .largo{display:none}
@media (min-width:640px){.franja .largo{display:inline}.franja .corto{display:none}}
.franja{height:32px;display:flex;align-items:center;justify-content:center;padding:0 12px;background:var(--tinta);color:#e8eee6;font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra: una sola fila */
.barra{position:sticky;top:0;z-index:40;height:60px;background:var(--fondo);border-bottom:1px solid var(--linea)}
.barra .c{height:100%;display:flex;align-items:center;gap:12px}
.marca{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;text-decoration:none}
.marca img{height:30px;width:auto}
.nav-escritorio{display:none;gap:4px}
.nav-escritorio a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:600;border-radius:var(--radio)}
.nav-escritorio a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.boton-menu{flex-shrink:0;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--borde-campo);background:transparent;border-radius:var(--radio);color:var(--tinta);cursor:pointer}
.boton-menu svg{width:20px;height:20px}
@media (min-width:900px){.nav-escritorio{display:flex}.boton-menu{display:none}}
.hoja{position:fixed;inset:0;z-index:60;background:var(--acento);color:#fff;padding:20px var(--lado);display:flex;flex-direction:column;gap:6px}
.hoja[hidden]{display:none}
.hoja .cerrar-hoja{align-self:flex-end;min-width:44px;min-height:44px;background:transparent;border:1px solid #fff;color:#fff;border-radius:var(--radio);cursor:pointer}
.hoja a{font-family:var(--letra-titulo);font-size:34px;text-decoration:none;min-height:56px;display:flex;align-items:center}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--acento);background:var(--acento);color:var(--sobre-acento);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;transition:transform var(--rapido) var(--curva),background var(--rapido)}
.boton:hover{background:var(--acento-apretado);border-color:var(--acento-apretado)}
.boton:active{transform:scale(.97)}
.boton.claro{background:#fff;color:var(--acento);border-color:#fff}
.boton.claro:hover{background:#e8eee6;border-color:#e8eee6}
.boton.chico{min-height:44px;padding:0 16px;font-size:16px}
.boton[aria-disabled="true"]{background:#d5ddd8;border-color:#d5ddd8;color:#3b4842;cursor:not-allowed}
.enlace{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:4px}

/* portada: la pizza humeando, fija mientras bajás */
.portada{position:relative;height:250svh;background:var(--escena);color:#fff}
.portada-fija{position:sticky;top:60px;height:calc(100svh - 60px);overflow:clip}
.fondo-portada{position:absolute;inset:0;overflow:hidden}
.fondo-portada img,.fondo-portada video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(var(--acerca,1));transform-origin:50% 62%;will-change:transform}
.fondo-portada video{opacity:0;transition:opacity var(--lento)}
.portada.con-video .fondo-portada video{opacity:1}
.portada-texto{position:absolute;left:0;right:0;bottom:0;padding:120px var(--lado) calc(28px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgb(6 14 10 / .92) 0 52%,rgb(6 14 10 / 0));}
.portada-texto>*{max-width:560px}
.portada h1{font-size:var(--t-portada);margin-bottom:12px}
.portada .bajada{font-size:18px;color:#e6ece8;margin-bottom:20px}
.portada .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.portada .enlace{color:#fff}
.etapas{position:absolute;top:18px;left:var(--lado);right:var(--lado);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.etapa{font-family:var(--letra-titulo);font-size:clamp(18px,4.6vw,26px);color:#fff;opacity:0;transform:translateY(10px);transition:opacity var(--medio) var(--curva),transform var(--medio) var(--curva);text-shadow:0 1px 12px rgb(0 0 0 / .6)}
.etapa.ver{opacity:1;transform:none}
.pausar{position:absolute;right:var(--lado);top:14px;z-index:2;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgb(255 255 255 / .7);background:rgb(15 28 22 / .5);color:#fff;font-weight:600;cursor:pointer}
.pausar[hidden]{display:none}
.pausar .i-seguir,.pausar[data-pausado] .i-pausa{display:none}
.pausar[data-pausado] .i-seguir{display:block}
/* celular: el video sube para que la pizza quede arriba del título; el vaso queda cortado */
@media (max-width:899px){.fondo-portada{top:-20%}.etapas{right:calc(var(--lado) + 56px)}}
@media (min-width:900px){
  .portada-texto>*{max-width:640px}
  .marca img{height:36px}
  .portada-texto{top:0;bottom:0;right:auto;width:min(760px,56%);display:flex;flex-direction:column;justify-content:center;padding:0 var(--lado);background:linear-gradient(to right,rgb(6 14 10 / .85) 0 60%,rgb(6 14 10 / 0))}
  .etapas{left:auto;right:var(--lado);top:auto;bottom:40px;align-items:flex-end;text-align:right}
  .fondo-portada{left:auto;width:58%;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
}
@keyframes subir{from{opacity:0;transform:translateY(12px)}}
.portada-texto>*{animation:subir var(--lento) var(--curva) both}
.portada-texto>*:nth-child(2){animation-delay:70ms}.portada-texto>*:nth-child(3){animation-delay:140ms}
.portada h1{animation-duration:280ms}

/* secciones */
section{padding-block:calc(var(--entre-secciones)/2)}
.seccion-titulo{font-size:var(--t-seccion);margin-bottom:12px}
.bajada-seccion{color:var(--tinta-2);margin-bottom:24px}
.fondo-2{background:var(--fondo-2)}
.separador{display:flex;justify-content:center;gap:10px;padding:6px 0}
.separador i{width:9px;height:6px;border-radius:50%;background:var(--mancha);opacity:.75}
.separador i:nth-child(2){width:5px;height:4px;opacity:.5}.separador i:nth-child(3){width:12px;height:7px;opacity:.85}

/* tira de datos reales */
.tira{padding-block:20px;border-bottom:1px solid var(--linea)}
.tira ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.tira li{display:flex;gap:8px;align-items:center;min-height:32px}
.tira li::before{content:"";width:8px;height:6px;border-radius:50%;background:var(--mancha)}

/* carril de pizzas */
.carril-cabeza{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}
.carril-botones{display:flex;gap:8px}
.carril-botones button{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde-campo);background:var(--fondo);color:var(--tinta);cursor:pointer;font-size:20px}
.carril{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain;scrollbar-width:thin}
.carril>*{scroll-snap-align:start;min-width:0}
@media (min-width:768px){.carril{grid-auto-columns:calc((100% - 32px)/3)}}
@media (min-width:1100px){.carril{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}.carril-botones{display:none}}
.tarjeta-pizza{display:flex;flex-direction:column;gap:10px}
.tarjeta-pizza .lamina{aspect-ratio:1;background:var(--fondo-2);border-radius:var(--radio);display:grid;place-items:center;padding:12%}
.tarjeta-pizza h3{font-size:24px}
.tarjeta-pizza p{color:var(--tinta-2);font-size:15.5px}
.tarjeta-pizza .precio{font-weight:700}
.nota-dibujo{font-size:14px;color:var(--tinta-2);margin-top:12px}
.dibujo-pizza{width:100%;height:auto}

/* relato fijo */
.relato{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.relato-foto{position:sticky;top:72px;z-index:2;aspect-ratio:4/5;max-height:52svh;width:100%;border-radius:var(--radio);overflow:hidden;background:var(--fondo-2)}
.relato-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--lento) var(--curva),transform 900ms var(--curva);transform:scale(1.04)}
.relato-foto img.activa{opacity:1;transform:none}
.paso{min-height:46svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:24px;position:relative;z-index:1}
.paso h3{font-size:clamp(26px,5.4vw,40px);margin-bottom:8px}
.paso p{color:var(--tinta-2)}
.paso .numero{font-family:var(--letra-titulo);color:var(--acento);font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.paso .numero::before{content:"";width:12px;height:8px;border-radius:50%;background:var(--mancha);transform:scale(.4);transition:transform var(--medio) var(--curva)}
.paso.activo .numero::before{transform:none}
@media (min-width:900px){
  .relato{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
  .relato-foto{top:96px;max-height:78svh}
  .paso{min-height:80svh;justify-content:center;padding-top:0}
}

/* herramienta en vista previa */
.previa{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.previa .lamina{max-width:340px;width:78%;margin-inline:auto}
.previa ul{margin:0 0 20px;padding-left:20px;color:var(--tinta-2)}
.previa li{margin-bottom:4px}
.rotulo{display:inline-block;font-size:14px;font-weight:700;color:var(--acento);margin-bottom:10px}
@media (min-width:900px){.previa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}}

/* puertas a la carta */
.puertas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){.puertas{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.puerta{position:relative;display:block;aspect-ratio:1;border-radius:var(--radio);overflow:hidden;text-decoration:none;color:#fff}
.puerta img{width:100%;height:100%;object-fit:cover;transition:transform var(--lento) var(--curva)}
.puerta:hover img{transform:scale(1.04)}
.puerta span{position:absolute;inset:auto 0 0 0;padding:44px 14px 12px;background:linear-gradient(to top,rgb(0 0 0 / .72) 0 55%,transparent);font-family:var(--letra-titulo);font-size:22px}

/* frase */
.frase{text-align:center;padding-block:calc(var(--entre-secciones) * .8)}
.frase p{font-family:var(--letra-titulo);font-size:clamp(32px,7.4vw,72px);line-height:1.08;max-width:18ch;margin-inline:auto}
.frase .firma{display:block;margin-top:18px;font-family:var(--letra-texto);font-size:16px;color:var(--tinta-2)}

/* cinta */
.cinta-marco{overflow:hidden;border-block:1px solid var(--linea);padding-block:16px;background:var(--fondo)}
.cinta{display:flex;gap:40px;width:max-content;animation:correr 38s linear infinite;font-family:var(--letra-titulo);font-size:26px;color:var(--acento)}
.cinta span{display:inline-flex;align-items:center;gap:40px;white-space:nowrap}
.cinta span::after{content:"";width:10px;height:7px;border-radius:50%;background:var(--mancha)}
.cinta-marco:hover .cinta,.cinta-marco:focus-within .cinta,.cinta-marco.quieta .cinta{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}

/* mosaico */
.mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mosaico figure{margin:0;border-radius:var(--radio);overflow:hidden;background:var(--fondo-2)}
.mosaico img{width:100%;height:100%;object-fit:cover}
.mosaico .alto{grid-row:span 2}
.mosaico figcaption{font-size:14px;color:var(--tinta-2);padding:8px 2px 0}
@media (min-width:900px){.mosaico{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}

/* el lugar */
.lugar{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.lugar img{border-radius:var(--radio);aspect-ratio:4/5;object-fit:cover;width:100%}
.lista-grande{list-style:none;margin:0;padding:0}
.lista-grande li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:18px}
.datos{display:flex;flex-direction:column;gap:12px}
.dato{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.dato strong{font-size:19px}
.copiar{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--borde-campo);background:transparent;color:var(--tinta);cursor:pointer;font-weight:600}
.copiar[data-ok]{border-color:var(--ok);color:var(--ok)}
@media (min-width:900px){.lugar{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}}

/* cierre: el único bloque del color fuerte */
.cierre{background:var(--acento);color:#fff;text-align:center;padding-block:calc(var(--entre-secciones) * .8)}
.cierre h2{font-size:clamp(36px,8vw,72px);margin-bottom:12px}
.cierre p{margin:0 auto 24px;color:#e2ebe6}

/* pie */
.pie{background:var(--escena);color:#d9e2dd;padding-block:48px calc(32px + env(safe-area-inset-bottom));font-size:15px}
.pie .c{display:grid;gap:20px}
.pie a{color:#fff}
.pie .logo-pie{height:34px;width:auto}
.pie small{display:block;font-size:14px;color:#b9c6bf}
@media (min-width:900px){.pie .c{grid-template-columns:2fr 1fr 1fr}}

/* aparición por scroll, con respaldo */
@keyframes aparecer{from{opacity:0;transform:translateY(24px)}}
@keyframes fundido{from{opacity:0}}
@supports (animation-timeline: view()){
  .aparece{animation:aparecer var(--curva) both;animation-timeline:view();animation-range:entry 0% entry 35%}
}

/* gesto firma: la bocanada de humo */
.voluta{position:fixed;z-index:80;width:22px;height:22px;margin-left:-11px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgb(255 255 255 / .9),rgb(255 255 255 / 0) 70%);filter:blur(2px);animation:bocanada 900ms var(--curva) forwards}
@keyframes bocanada{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx,6px),-90px) scale(2.6)}}
.voluta:nth-child(odd){--dx:-10px}

/* páginas internas */
.cabecera{padding-block:40px 8px}
.cabecera h1{font-size:clamp(36px,8vw,64px);margin-bottom:10px}
.cabecera p{color:var(--tinta-2)}
.cabecera + .armador{margin-top:56px}
.indice{position:sticky;top:60px;z-index:30;background:var(--fondo);border-bottom:1px solid var(--linea)}
.indice .c{display:flex;gap:6px;overflow-x:auto;padding-block:8px}
.indice a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--borde-campo);text-decoration:none;font-weight:600}
.carta-bloque{padding-block:40px;border-bottom:1px solid var(--linea)}
.carta-bloque h2{font-size:clamp(30px,6vw,48px);margin-bottom:8px}
.platos{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.plato{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.plato .mini{width:76px;aspect-ratio:1;border-radius:var(--radio);overflow:hidden;background:var(--fondo-2);display:grid;place-items:center}
.plato .mini img{width:100%;height:100%;object-fit:cover}
.plato .mini svg{width:88%}
.sin-foto{width:62%;aspect-ratio:1;border-radius:50%;border:2px solid var(--linea);background:radial-gradient(circle at 30% 35%,var(--mancha) 0 4%,transparent 5%),radial-gradient(circle at 68% 60%,var(--mancha) 0 3%,transparent 4%),radial-gradient(circle at 45% 72%,var(--mancha) 0 2.5%,transparent 3.5%),#fff;opacity:.7}
.plato h3{font-size:21px;margin-bottom:2px}
.plato p{color:var(--tinta-2);font-size:15.5px}
.plato .precio{font-weight:700;font-size:15.5px;margin-top:4px}
@media (min-width:900px){.platos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}}

/* la herramienta */
.armador{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:120px}
.armador .lamina{width:min(300px,72%);margin:0 auto 8px}
.grupo-control{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.grupo-control legend{font-family:var(--letra-titulo);font-size:22px;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--borde-campo);background:var(--fondo);color:var(--tinta);font-weight:600;cursor:pointer;transition:transform var(--rapido) var(--curva)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:#e2ece5;border-color:var(--acento);color:var(--tinta)}
.chip[aria-pressed="true"]::before{content:"";width:9px;height:6px;border-radius:50%;background:var(--borde-pizza)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;min-height:44px;display:flex;align-items:flex-end;padding-bottom:6px}
.campo input,.campo select,.campo textarea{min-height:48px;padding:10px 14px;border:1px solid var(--borde-campo);border-radius:var(--radio);background:#fff;color:var(--tinta)}
.campo textarea{min-height:88px;resize:vertical}
.ayuda{font-size:14.5px;color:var(--tinta-2)}
.lineas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.linea{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.contador{display:flex;align-items:center;gap:6px}
.contador button{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde-campo);background:var(--fondo);color:var(--tinta);cursor:pointer;font-size:20px;line-height:1}
.contador output{min-width:24px;text-align:center;font-weight:700}
.vacio{color:var(--tinta-2);padding:12px 0}
.mensaje{white-space:pre-wrap;background:var(--fondo-2);border-radius:var(--radio);padding:16px;font-size:15.5px;color:var(--tinta)}
.faltan{color:var(--error);font-weight:600}
.faltan:empty{display:none}
.botonera{display:flex;flex-wrap:wrap;gap:8px}
.boton-borde{background:transparent;color:var(--acento)}
.boton-borde:hover{background:var(--fondo-2);color:var(--acento-apretado)}
.fijo-abajo{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px var(--lado) calc(12px + env(safe-area-inset-bottom));background:rgb(246 248 243 / .96);border-top:1px solid var(--linea)}
.fijo-abajo .boton{width:100%;max-width:520px;margin-inline:auto;display:flex}
@media (min-width:900px){.armador{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}.armador .columna-dibujo{position:sticky;top:90px}}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .aparece{animation-name:fundido}
  .cinta{animation:none}
  .cinta-marco{overflow-x:auto}
  .portada-texto>*{animation-name:fundido}
  .relato-foto img{transform:none}
}
.lamina-reserva[hidden]{display:none}