/* La Posta V · diseño propio sobre la base (mismo nivel que Planchazo).
   Colores del logo (rojo y naranja), crema de sus promos y negro carbón del horno. */
@import url("assets/fuentes/fuentes.css");

:root {
  --tinta: #1a1410;
  --papel: #fff4e0;
  --acento: #c8202a;
  --naranja: #f08a24;
  --queso: #ffd166;
  --brasa: #ff7a1a;
  --carbon: #140d09;
  --suave: #f3e3c4;
  --blanco: #fffaf0;
  --titulos: "Anton", Impact, "Arial Narrow", sans-serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Lobster", Georgia, cursive;
  --radio: 20px;
  --borde: 3px solid var(--tinta);
  --sombra-dura: 6px 6px 0 var(--tinta);
  --nav: 72px;
}
@media (prefers-color-scheme: dark) { :root { --papel: #fff4e0; --tinta: #1a1410; } body { background: var(--papel); color: var(--tinta); } }

/* La base le pone ancho angosto a todo lo de adentro de cada sección: acá cada sección maneja su ancho */
main > section > * { width: auto; margin-inline: 0; }
main > section > .brasas, main > section > .portada__calor { width: 100%; }
.carta > *, .resenas > *, .pedir > *, .sedes-bloque > * { width: 100%; }

h1, h2 { text-transform: uppercase; letter-spacing: 0; line-height: .9; }
h3 { font-family: var(--texto); font-weight: 800; letter-spacing: -.01em; }
.sobretitulo { font: 400 clamp(1.3rem, 2.6vw, 1.8rem)/1 var(--script); color: var(--acento); margin: 0 0 .3em; }
em { font: 400 1em var(--script); text-transform: none; color: var(--naranja); }

/* Botones */
.boton { background: var(--tinta); font: 400 1.05rem var(--titulos); text-transform: uppercase; letter-spacing: .02em; }
.boton--fuego { background: var(--acento); color: #fff; box-shadow: 0 10px 30px -10px rgba(230, 70, 20, .7); }
.boton--fuego:hover { background: #e2312a; box-shadow: 0 16px 40px -10px rgba(255, 110, 20, .85); }
.boton--linea { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 2.5px var(--papel); }
.boton--linea:hover { box-shadow: inset 0 0 0 2.5px var(--naranja); color: var(--queso); }

/* Etiqueta chiquita de demo */
.aviso-demo { position: fixed; z-index: 60; right: .8rem; top: calc(var(--nav) + 10px); margin: 0; padding: .3rem .7rem; border-radius: 99px; background: var(--naranja); color: var(--carbon); font: 400 .8rem var(--titulos); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }

/* Encabezado */
.encabezado { background: color-mix(in srgb, var(--papel) 92%, transparent); border-bottom: var(--borde); }
.encabezado__logo img { width: 128px; height: auto; }
.encabezado nav a { font: 400 1rem var(--titulos); text-transform: uppercase; text-decoration: none; padding: .4rem .7rem; border-radius: 99px; transition: background .2s; }
.encabezado nav a:hover { background: var(--suave); }
.encabezado .boton { background: var(--acento); color: #fff; }
@media (max-width: 640px) { .encabezado nav { display: none; } }

/* Carga */
.carga { background: radial-gradient(120% 80% at 50% 110%, #5a1e08 0%, var(--carbon) 60%); display: grid; place-items: center; align-content: center; gap: 1rem; }
.carga .brasas { position: absolute; inset: 0; width: 100%; height: 100%; }
.carga__logo { position: relative; width: min(300px, 70vw); filter: none; animation: prender 1.1s ease-out both; }
.carga__texto { position: relative; color: rgba(255, 244, 224, .7); font: 400 1.2rem var(--script); margin: 0; animation: titila 1.2s ease-in-out infinite; }
@keyframes prender { 0% { opacity: 0; filter: brightness(.2); transform: scale(.94); } 60% { opacity: 1; filter: brightness(1.35) drop-shadow(0 0 40px rgba(255,120,20,.9)); } 100% { transform: scale(1); } }
@keyframes titila { 50% { opacity: .35; } }

/* PORTADA: PIZZA gigante, la fugazzeta en el medio y "a la leña" cruzado. Todo vive en un bloque
   que se agranda con el ancho y con el alto de la pantalla (--t), así nada se pisa. */
.portada { position: relative; min-height: max(100svh, 620px); overflow: hidden; color: var(--papel); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vh, 3.5rem); padding: clamp(3rem, 8vh, 5rem) 1.25rem clamp(1.5rem, 4vh, 2.5rem);
  background: radial-gradient(55% 50% at 50% 45%, rgba(255, 106, 26, .42), transparent 70%), radial-gradient(100% 60% at 50% 120%, #5a1a06, transparent 60%), var(--carbon); }
.portada .brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.portada__calor { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(255, 90, 20, .12)); z-index: 0; }
.portada__centro { --t: min(25vw, 42vh); position: relative; z-index: 2; width: max-content; margin-top: calc(var(--t) * .12); }
.portada__titulo { margin: 0; }
.portada__grande { display: block; font: 400 var(--t)/.8 var(--titulos); letter-spacing: -.005em; color: var(--papel); text-shadow: 0 10px 40px rgba(0,0,0,.4); }
.portada__pizza { position: absolute; z-index: 3; left: 50%; top: 50%; width: calc(var(--t) * 1.05); translate: -50% -58%; }
.portada__flota img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 30px #000a) drop-shadow(0 0 70px #ff5a1f44); animation: flotar 6s ease-in-out infinite; }
.portada__sombra { width: 66%; height: calc(var(--t) * .08); margin: calc(var(--t) * -.06) auto 0; border-radius: 50%; background: #000; filter: blur(14px); opacity: .5; animation: sombra 6s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes sombra { 50% { transform: scale(.88); opacity: .38; } }
.portada__script { position: absolute; z-index: 4; right: -4%; bottom: -24%; margin: 0; font: 400 calc(var(--t) * .4)/1 var(--script); color: var(--naranja); rotate: -8deg; white-space: nowrap; text-shadow: 0 5px 0 var(--carbon), 0 0 30px rgba(255, 110, 20, .5); }
.portada__sello { position: absolute; z-index: 4; left: -9%; bottom: -18%; width: calc(var(--t) * .45); aspect-ratio: 1; display: grid; place-items: center; }
.portada__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 14s linear infinite; }
.portada__sello text { font: 400 13px var(--titulos); letter-spacing: .14em; fill: var(--queso); }
.portada__sello span { font-size: calc(var(--t) * .13); }
@keyframes girar { to { transform: rotate(1turn); } }
.suelto { position: absolute; z-index: 2; width: calc(var(--t) * .36); height: auto; filter: drop-shadow(0 14px 14px #0008); animation: suelto 7s ease-in-out infinite; }
.suelto--1 { left: -14%; top: -30%; animation-delay: -1s; }
.suelto--2 { left: 20%; bottom: -30%; width: calc(var(--t) * .42); animation-delay: -3s; z-index: 4; }
.suelto--3 { right: -12%; top: -34%; animation-delay: -2s; }
.suelto--4 { right: -16%; top: 30%; animation-delay: -4s; }
@keyframes suelto { 50% { transform: translateY(-14px) rotate(10deg); } }
.portada__pie { position: relative; z-index: 5; width: min(1240px, 100%); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-top: calc(var(--t, 20vw) * .1); }
.portada__bajada { max-width: 38ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255, 244, 224, .85); }
.portada__bajada b { color: var(--queso); }
.portada__derecha { display: grid; gap: .6rem; justify-items: end; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.portada__horario { margin: 0; font-size: .9rem; color: rgba(255, 244, 224, .7); display: flex; align-items: center; gap: .5rem; min-height: 1.4em; }
.portada__horario.abierto { color: #ffd9a8; }
.punto-vivo { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 0 rgba(255,122,26,.7); animation: latido 1.8s infinite; flex: none; }
@keyframes latido { 70% { box-shadow: 0 0 0 .6rem rgba(255,122,26,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); } }
@media (max-width: 760px) {
  .portada { justify-content: space-evenly; gap: 1rem; padding-top: 3.5rem; }
  .portada__centro { --t: 31vw; width: 100%; margin-top: 0; display: flex; flex-direction: column; align-items: center; }
  .portada__pizza { position: relative; left: auto; top: auto; translate: none; width: min(78vw, 46svh); margin-top: calc(var(--t) * -.42); }
  .portada__script { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: calc(var(--t) * -.32) 2vw 0 0; font-size: calc(var(--t) * .52); }
  .portada__sello { left: 2vw; bottom: 2%; width: 70px; }
  .suelto { width: calc(var(--t) * .42); }
  .suelto--1 { left: 0; top: -4%; } .suelto--3 { right: 0; left: auto; top: -6%; } .suelto--2, .suelto--4 { display: none; }
  .portada__pie { flex-direction: column; align-items: stretch; margin-top: 0; }
  .portada__derecha { justify-items: stretch; }
  .portada__acciones .boton { flex: 1; justify-content: center; }
}

/* CARTA: tarjetas con fondo de color, borde grueso y la foto que salta */
.carta { width: var(--ancho); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) 0 3rem; }
.carta__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; }
.carta__cabeza h2 { margin: 0; font-size: clamp(3rem, 9vw, 7rem); line-height: 1.02; padding-top: .08em; }
.carta__fuente { max-width: 34ch; margin: 0 0 .6rem; font-size: .92rem; opacity: .8; }
.carta__herramientas { position: sticky; top: calc(var(--nav) + 6px); z-index: 10; margin-block: 1.6rem 2rem; padding: .5rem 0; background: var(--papel); }
.carta__filtros button { min-height: 46px; padding: .4em 1.3em; border: var(--borde); background: var(--blanco); font: 400 .95rem var(--titulos); text-transform: uppercase; transition: transform .3s var(--resorte), box-shadow .25s, background .25s; }
.carta__filtros button:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--tinta); }
.carta__filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--queso); }
.carta__buscar input { border: var(--borde); }
.carta-grupo { display: contents; }
.carta-grupo > h3 { grid-column: 1 / -1; margin: 1rem 0 -.6rem; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--titulos); text-transform: uppercase; border: 0; }
.carta-grupo:only-child > h3 { display: none; }
.carta__lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 2.2rem 1.6rem; }
.plato { position: relative; border: var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-dura); padding: 1rem; transition: transform .35s var(--resorte), box-shadow .35s var(--resorte); }
.plato:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--tinta); }
.plato--foto .plato__foto-caja { aspect-ratio: 5 / 4; margin: 0 0 .6rem; border-radius: 14px; border: var(--borde); background: var(--queso); overflow: visible; display: grid; place-items: center; }
.plato:nth-child(4n+2) .plato__foto-caja { background: var(--naranja); }
.plato:nth-child(4n+3) .plato__foto-caja { background: #e4573c; }
.plato:nth-child(4n+4) .plato__foto-caja { background: #9cc06a; }
.plato__foto-caja > * { width: 86%; filter: drop-shadow(0 16px 12px #15110e66); transform: translateY(-8%); transition: transform .45s var(--resorte); }
.plato:hover .plato__foto-caja > * { transform: translateY(-16%) rotate(-4deg) scale(1.06); }
.plato__nombre { font: 400 1.3rem/1.02 var(--titulos); text-transform: uppercase; }
.plato__precio { font: 700 1.05rem var(--texto); color: var(--tinta); background: var(--queso); padding: .1em .5em; border-radius: 8px; border: 2px solid var(--tinta); white-space: nowrap; }
.plato__desc { font-size: .92rem; opacity: .78; }
.plato__etiquetas span { background: var(--tinta); color: var(--queso); }
.plato__paso button { min-height: 46px; border: 2.5px solid var(--tinta); font: 400 1rem var(--titulos); text-transform: uppercase; }
.plato__paso .plato__mas--solo, .plato__paso .plato__elegir { flex: 1; background: var(--acento); color: #fff; }
@media (max-width: 640px) {
  .carta__lista { gap: 1.2rem; }
  .plato { padding: .8rem; }
  .plato__abrir { grid-template-columns: 104px 1fr; column-gap: .9rem; align-items: center; }
  .plato--foto .plato__foto-caja { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; align-self: start; }
  .plato__foto-caja > * { width: 94%; transform: none; }
  .plato__arriba { flex-direction: column; align-items: start; gap: .35rem; }
  .plato__nombre { font-size: 1.1rem; }
}

/* CINTA */
.cinta { background: var(--acento); color: #fff; font: 400 clamp(1.4rem, 3.4vw, 2.4rem)/1 var(--titulos); text-transform: uppercase; padding: .9rem 0; border-block: var(--borde); }
.cinta span:nth-child(4n+2), .cinta span:nth-child(4n) { color: var(--queso); }

/* CAPA POR CAPA (3D): la pizza siempre en el medio y los pasos pasan por encima, a un costado */
.capas { position: relative; background: var(--carbon); color: var(--papel); margin-top: -1px; }
.capas__escena { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 1;
  background: radial-gradient(45% 45% at 50% 55%, rgba(255, 106, 26, calc(.12 + var(--avance, 0) * .38)), transparent 70%), radial-gradient(90% 40% at 50% 110%, rgba(120, 30, 6, calc(var(--avance, 0) * .9)), transparent 70%); }
.capas__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.capas__escena canvas#pizza-capas { touch-action: pan-y; cursor: grab; }
.pizza-respaldo { position: absolute; inset: 15% 20%; width: 60%; height: 70%; object-fit: contain; }
.capas__pasos { position: relative; z-index: 2; margin-top: -100svh; padding: 18vh max(1.25rem, (100vw - 1240px) / 2) 12vh; pointer-events: none; }
.capas__pasos > * { pointer-events: auto; }
.capas__cabeza { min-height: 80vh; max-width: 30rem; }
.capas__cabeza h2 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.capas__cabeza p { color: rgba(255, 244, 224, .78); max-width: 34ch; }
.paso { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; max-width: 18rem; margin-left: auto; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--suave-salida); }
.paso:nth-of-type(even) { margin-left: 0; }
.paso--activo { opacity: 1; transform: none; }
.paso > * { position: relative; }
.paso::before { content: ""; position: absolute; }
.paso { padding: 1.4rem 1.5rem; }
.paso__n { font: 400 clamp(2.6rem, 5vw, 4.2rem)/1 var(--titulos); color: transparent; -webkit-text-stroke: 1.5px var(--naranja); }
.paso h3 { font: 400 clamp(1.7rem, 2.8vw, 2.4rem)/1 var(--titulos); text-transform: uppercase; margin: .2em 0 .3em; }
.paso p { color: rgba(255, 244, 224, .8); max-width: 30ch; }
.paso .boton { align-self: flex-start; margin-top: .6rem; }
.paso, .capas__cabeza { border-radius: var(--radio); }
.paso { background: none; }
.paso > * { text-shadow: 0 2px 12px #000; }
@media (max-width: 860px) {
  .capas__escena canvas#pizza-capas { top: 8%; height: 56%; }
  .pizza-respaldo { inset: 10% 8% auto; height: 50%; width: 84%; }
  .capas__pasos { padding: 60vh 1rem 10vh; }
  .capas__cabeza { min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; background: linear-gradient(transparent, rgba(20,13,9,.92) 30%); }
  .paso, .paso:nth-of-type(even) { min-height: 70vh; justify-content: flex-end; margin: 0; max-width: none; background: linear-gradient(transparent 35%, rgba(20,13,9,.94)); backdrop-filter: none; }
}

/* RESEÑAS */
.resenas { width: var(--ancho); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0 3rem; }
.resenas h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.estrellas { color: var(--naranja); }
.resenas__nota { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; padding: .35rem .9rem; border: var(--borde); border-radius: 99px; background: var(--queso); font-weight: 800; }
.resenas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 1.5rem; }
.resena { margin: 0; padding: 1.8rem 1.5rem 1.3rem; background: var(--blanco); border-radius: var(--radio); border: var(--borde); box-shadow: var(--sombra-dura); position: relative; }
.resena:nth-child(2) { background: var(--queso); }
.resena::before { content: "“"; position: absolute; top: -.4em; left: .3em; font: 400 5rem/1 var(--script); color: var(--acento); }
.resena p { font-size: 1.05rem; font-weight: 600; }
.resena footer { font-size: .85rem; opacity: .7; }
.resenas__link a { font-weight: 700; color: var(--acento); }

/* CÓMO PEDIR */
.pedir { width: var(--ancho); margin: 0 auto; padding: 3rem 0; }
.pedir h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.pedir__pasos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.pedir__pasos li { display: flex; gap: 1rem; align-items: center; padding: 1.2rem; background: var(--blanco); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-dura); font-weight: 600; }
.pedir__pasos b { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--acento); color: #fff; font: 400 1.5rem var(--titulos); border: var(--borde); }
.pedir__pasos em { font: 800 1em var(--texto); color: var(--acento); }

/* SEDES */
.sedes-bloque { width: var(--ancho); margin: 0 auto; padding: 3rem 0 4rem; }
.sedes-bloque h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.sede { border: var(--borde); box-shadow: var(--sombra-dura); background: var(--blanco); }
.sedes__horario { font-weight: 600; opacity: .8; }

/* PROPUESTA: tarjeta de sellos y QR */
.propuesta { background: var(--queso); border-top: var(--borde); padding: clamp(4rem, 8vw, 6rem) max(1.25rem, (100% - 1180px) / 2); }
.propuesta__marca { display: inline-block; margin: 0 0 1rem; padding: .35rem .8rem; border-radius: 99px; border: 2px dashed var(--tinta); font-size: .78rem; font-weight: 700; }
.propuesta h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.propuesta__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; perspective: 900px; }
.tarjeta-sellos { background: radial-gradient(120% 90% at 100% 0%, #3b1306, var(--carbon)); color: var(--papel); border-radius: 22px; padding: 1.4rem; border: var(--borde); box-shadow: var(--sombra-dura); }
.tarjeta-sellos header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tarjeta-sellos header img { width: 120px; }
.tarjeta-sellos header span { font: 400 1.2rem var(--script); color: var(--naranja); }
.sellos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.sellos li { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255, 244, 224, .35); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, var(--acento) 0 42%, transparent 43%), radial-gradient(circle, var(--naranja) 0 55%, transparent 56%); }
.sellos li:nth-child(n+6) { background: none; }
.sellos__premio { background: var(--naranja) !important; color: var(--carbon); font: 400 .9rem var(--titulos); border-style: solid !important; }
.tarjeta-sellos p { color: rgba(255, 244, 224, .8); margin: 0; font-size: .95rem; }
.qr-mesa { background: var(--blanco); border-radius: 22px; padding: 1.4rem; border: var(--borde); box-shadow: var(--sombra-dura); display: grid; gap: 1rem; align-content: start; }
.qr-mesa__marco { justify-self: center; background: var(--acento); padding: 1rem 1rem .6rem; border-radius: 18px; border: var(--borde); display: grid; justify-items: center; gap: .4rem; }
.qr-mesa__marco img { background: #fff; border-radius: 10px; padding: .5rem; width: 170px; height: 170px; }
.qr-mesa__marco span { color: #fff; font: 400 1.3rem var(--script); }
.qr-mesa p { margin: 0; }

/* PIE */
.pie { background: var(--carbon); color: rgba(255, 244, 224, .8); text-align: center; padding: 4rem 1.25rem 6rem; }
.pie__logo { width: min(560px, 86vw); margin: 0 auto 1.5rem; filter: none; }
.pie a { color: var(--papel); }

.bolsa-boton { background: var(--acento); color: #fff; border: var(--borde); box-shadow: var(--sombra-dura); font-family: var(--titulos); text-transform: uppercase; }

.tarjeta-sellos .boton, .qr-mesa .boton { justify-self: start; margin-top: 1rem; }
.qr-mesa__marco { text-decoration: none; transition: transform .35s var(--resorte); }
.qr-mesa__marco:hover { transform: rotate(-3deg) scale(1.03); }