/* La Grotta Pizzas, versión noche.
   Concepto: la calidad y el ritmo de Grosso (video, marquesinas, tipografía enorme)
   con el ruido de &pizza (bloques negros y rojos alternados, títulos que gritan, fotos de la gente).
   Un solo mundo visual, de noche: negro cálido, bordó de marca y crema.
   Layout: columnas alineadas a la izquierda, bloques a sangre que se turnan negro / bordó / crema. */

@font-face {
  font-family: "Retro Majestic";
  src: url("../assets/fonts/retro-majestic-italic-lg.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --negro: #0E0607;
  --carbon: #1A0B0E;
  --bordo: #A1182B;
  --rojo: #E0253A;
  --crema: #FBF2E0;
  --arena: #E9D9B8;
  --gris: #A99A93;
  --linea: rgba(251, 242, 224, .16);

  --f-display: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --f-script: "Retro Majestic", Georgia, serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-xl: clamp(2.6rem, 7.5vw, 5.6rem);
  --t-xxl: clamp(3.6rem, 13vw, 11rem);

  --ancho: 1240px;
  --radio: 16px;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --suave: cubic-bezier(.2, .9, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--f-display);
  font-size: var(--t-m);
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--negro);
}
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- piezas comunes ---------- */
.sec { padding-block: 88px; }
.sec__in, .nav__in, .hero__in, .delmes__in, .pie__in {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: var(--gl);
  padding-right: var(--gr);
}
.cab { display: grid; gap: 12px; margin-bottom: 40px; }
.cab--fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; }
.cab__txt { margin: 0; max-width: 46ch; color: var(--arena); }
.titulo {
  margin: 0;
  font-stretch: 62%;
  font-weight: 900;
  font-size: var(--t-xl);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.link { color: var(--crema); font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link--btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.nota { margin: 22px 0 0; font-size: var(--t-s); color: var(--gris); }
.estrellas { color: #F2B33D; letter-spacing: 2px; }

.btn {
  --bbg: var(--crema);
  --bfg: var(--negro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .7em 1.5em;
  border: 2px solid var(--bbg);
  border-radius: 0;
  background: var(--bbg);
  color: var(--bfg);
  font-stretch: 75%;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--suave), background-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--rojo { --bbg: var(--rojo); --bfg: var(--crema); }
.btn--rojo:hover { --bbg: #F23347; }
.btn--crema { --bbg: var(--crema); --bfg: var(--negro); }
.btn--negro { --bbg: var(--negro); --bfg: var(--crema); }
.btn--linea { --bbg: transparent; --bfg: var(--crema); border-color: var(--crema); }
.btn--linea:hover { --bbg: var(--crema); --bfg: var(--negro); }
.btn--borde-crema { --bbg: transparent; --bfg: var(--crema); border-color: var(--crema); }
.btn--chico { min-height: 40px; padding: .4em 1em; font-size: .92rem; white-space: nowrap; }

/* ---------- aviso + nav ---------- */
.aviso {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 7px var(--gr) 7px var(--gl);
  background: var(--bordo);
  font-stretch: 75%;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.aviso a { color: var(--crema); }
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(14, 6, 7, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav__in { display: flex; align-items: center; gap: 22px; padding-block: 8px; }
.nav__logo img { width: 78px; }
.nav__links { display: none; gap: 22px; }
.nav__links a {
  font-stretch: 75%;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--arena);
}
.nav__links a:hover { color: var(--crema); }
.nav__acc { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.estado:hover { border-color: var(--crema); }
.estado__luz { width: 8px; height: 8px; border-radius: 50%; background: #39C46E; box-shadow: 0 0 0 3px rgba(57, 196, 110, .22); }
.estado.is-cerrado .estado__luz { background: var(--gris); box-shadow: none; }
.estado__corto { display: none; }
.carta-btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--crema);
  border-radius: 0;
  background: transparent;
  font-stretch: 75%;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.carta-btn:hover { background: var(--crema); color: var(--negro); }

/* ---------- hero con video ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--negro) url("../assets/video-hero.jpg") center / cover no-repeat;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 6, 7, .35) 0%, rgba(14, 6, 7, 0) 30%, rgba(14, 6, 7, .55) 62%, rgba(14, 6, 7, .96) 100%);
}
.hero__in { position: relative; z-index: 1; width: 100%; padding-block: 120px 56px; }
.hero__lema { margin: 0 0 8px; font-family: var(--f-script); font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.2rem); color: var(--crema); }
.hero__t {
  margin: 0;
  max-width: 14ch;
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(3.4rem, 9.5vw, 8.4rem);
  line-height: .82;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.hero__t span { display: inline-block; }
.hero__t span:nth-child(2) { color: var(--rojo); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__pausa {
  position: absolute;
  z-index: 2;
  right: calc(var(--gr) + 0px);
  top: 20px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--linea);
  background: rgba(14, 6, 7, .5);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}

/* validaciones */
.valid { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.valid a {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--linea);
  background: rgba(14, 6, 7, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-decoration: none;
}
.valid a:hover { border-color: var(--app, var(--crema)); }
.valid__marca { font-stretch: 75%; font-weight: 900; font-size: .95rem; color: var(--app, var(--crema)); }
.valid__nota { font-variant-numeric: tabular-nums; }
.valid__det { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--gris); }

/* ---------- marquesina ---------- */
.marquesina { overflow: hidden; background: var(--crema); color: var(--negro); border-block: 2px solid var(--negro); }
.marquesina__pista { display: flex; width: max-content; animation: correr 34s linear infinite; }
.marquesina span {
  padding: 10px 26px;
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquesina span::after { content: "✶"; margin-left: 52px; color: var(--bordo); font-stretch: 100%; }
.marquesina { transform: rotate(-1.2deg) scale(1.04); margin-block: -14px; position: relative; z-index: 3; }
main { overflow-x: clip; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- las pizzas ---------- */
.grilla-pz { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-card { display: grid; gap: 12px; min-width: 0; }
.pz-card button { all: unset; display: grid; gap: 14px; cursor: pointer; min-width: 0; width: 100%; box-sizing: border-box; }
.pz-card button:focus-visible { outline: 3px solid var(--rojo); outline-offset: 6px; }
.pz-card__foto { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9); }
.pz-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--suave); }
.pz-card button:hover .pz-card__foto img { transform: rotate(28deg) scale(1.06); }
.pz-card__n { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: .9; text-transform: uppercase; }
.pz-card__d { margin: 4px 0 0; font-size: var(--t-s); color: var(--gris); }
.pz-card__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pz-card__p strong { font-stretch: 75%; font-weight: 900; font-size: 1.2rem; color: var(--crema); }
.pz-card__p small { font-size: var(--t-xs); color: var(--gris); }
.pz-card__casa { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--rojo); font-family: var(--f-script); font-style: italic; font-size: .95rem; font-weight: 400; vertical-align: 4px; text-transform: none; }
.pizzas__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---------- pizza del mes ---------- */
.delmes { background: var(--rojo); color: var(--crema); overflow: hidden; }
.delmes__in { display: grid; gap: 28px; align-items: center; padding-block: 64px; }
.delmes__foto { width: min(100%, 520px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; justify-self: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.delmes__tag { margin: 0; font-family: var(--f-script); font-style: italic; font-size: 1.8rem; }
.delmes__t { margin: 0 0 12px; font-stretch: 62%; font-weight: 900; font-size: var(--t-xl); line-height: .85; text-transform: uppercase; }
.delmes__txt p { max-width: 44ch; }
.delmes__precio { display: grid; margin: 18px 0 22px; }
.delmes__precio small { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-xs); }
.delmes__precio span { font-stretch: 62%; font-weight: 900; font-size: clamp(4.5rem, 14vw, 9rem); line-height: .85; font-variant-numeric: tabular-nums; }

/* ---------- mitad y mitad ---------- */
.mym { background: var(--carbon); }
.mym__in { display: grid; gap: 40px; align-items: center; }
.mym__txt { min-width: 0; }
.mym__lado { margin-top: 22px; }
.mym__lbl { margin: 0 0 8px; font-family: var(--f-script); font-style: italic; font-size: 1.3rem; }
.mym__chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--bordo) transparent; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  font-stretch: 80%;
  font-weight: 800;
  font-size: .95rem;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--crema); }
.chip__img { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; }
.chip[aria-checked="true"] { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.mym__res { margin: 18px 0 16px; font-weight: 700; min-height: 1.5em; }
.mym__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mym__pizza { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; }
.mym__mitad { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .9); }
.mym__mitad--a { clip-path: inset(0 50% 0 0); }
.mym__mitad--b { clip-path: inset(0 0 0 50%); }
.mym__mitad--a.is-entra { animation: entraA .55s var(--suave); }
.mym__mitad--b.is-entra { animation: entraB .55s var(--suave); }
@keyframes entraA { from { transform: translateX(-24%) rotate(-30deg); opacity: 0; } }
@keyframes entraB { from { transform: translateX(24%) rotate(30deg); opacity: 0; } }
.mym__corte { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--carbon); }
.mym__tag { position: absolute; bottom: -4px; padding: 4px 12px; background: var(--crema); color: var(--negro); font-stretch: 75%; font-weight: 900; font-size: .9rem; text-transform: uppercase; white-space: nowrap; }
.mym__tag--a { left: 2%; transform: rotate(-4deg); }
.mym__tag--b { right: 2%; transform: rotate(4deg); background: var(--rojo); color: var(--crema); }

/* ---------- panini ---------- */
.grilla-pn { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pn { display: grid; background: var(--carbon); border: 1px solid var(--linea); }
.pn__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.pn__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave); }
.pn:hover .pn__foto img { transform: scale(1.05); }
.pn__b { padding: 16px 18px 20px; display: grid; gap: 6px; }
.pn__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pn__n { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 1.7rem; line-height: .9; text-transform: uppercase; }
.pn__p { font-stretch: 75%; font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn__d { margin: 0; font-size: var(--t-s); color: var(--gris); }

/* ---------- nosotros ---------- */
.nosotros { background: var(--crema); color: var(--negro); }
.nosotros .titulo { color: var(--bordo); }
.nosotros__in { display: grid; gap: 40px; align-items: center; }
.nosotros__fotos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 10px; align-items: end; }
.nf { margin: 0; }
.nf img { width: 100%; object-fit: cover; box-shadow: 0 24px 40px -20px rgba(14, 6, 7, .55); }
.nf--a img { aspect-ratio: 3 / 4; }
.nf--b { transform: rotate(2.5deg); border: 8px solid var(--crema); background: var(--crema); margin-bottom: 28px; }
.nf--b img { aspect-ratio: 3 / 4; }
.nf--c { grid-column: 1 / -1; }
.nf--c img { aspect-ratio: 3 / 2; }
.nf figcaption { padding: 6px 2px 0; font-family: var(--f-script); font-style: italic; font-size: 1.1rem; color: var(--bordo); }
.desde { margin: 30px 0 0 !important; padding-top: 20px; border-top: 2px solid var(--negro); font-stretch: 62%; font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); line-height: .95; text-transform: uppercase; color: var(--bordo) !important; }
.desde span { display: block; font-family: var(--f-script); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: 1.4rem; text-transform: none; color: var(--negro); }
.nosotros__txt p { max-width: 60ch; margin: 18px 0 0; color: #3A2A26; }
.datos { list-style: none; margin: 32px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 2px solid var(--negro); }
.datos strong { display: block; font-stretch: 62%; font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); line-height: .9; color: var(--bordo); }
.datos span { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- de ustedes ---------- */
.ustedes { padding-bottom: 64px; }
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 6px;
  padding-left: var(--gl);
  padding-right: var(--gr);
}
.mo { position: relative; margin: 0; overflow: hidden; background: var(--carbon); }
.mo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter .5s, transform .8s var(--suave); }
.mo:hover img { filter: none; transform: scale(1.04); }
.mo--alta { grid-row: span 2; }
.mo--ancha { grid-column: span 2; grid-row: span 2; }
.mo figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; background: var(--rojo); font-stretch: 75%; font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.ustedes__pie { margin-top: 32px; }

/* ---------- reseñas ---------- */
.resenas { background: var(--bordo); }
.puntaje { display: flex; align-items: center; gap: 14px; margin: 0; }
.puntaje__n { font-stretch: 62%; font-weight: 900; font-size: 5rem; line-height: .8; }
.puntaje__txt { display: grid; font-size: var(--t-s); }
.cinta-res { display: flex; width: max-content; padding: 14px 0; animation: correr 70s linear infinite; }
.cinta-res--vuelta { animation-direction: reverse; animation-duration: 80s; padding-top: 0; }
.cinta-res:hover { animation-play-state: paused; }
.cinta-res__fila { list-style: none; margin: 0; padding: 0 9px; display: flex; gap: 18px; }
.res {
  flex: none;
  width: 340px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 24px 20px;
  border-radius: 22px;
  background: var(--crema);
  color: var(--negro);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6);
  position: relative;
}
.res::before { content: "“"; position: absolute; right: 18px; top: -18px; font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: var(--rojo); }
.res--0 { transform: rotate(-1.5deg); }
.res--1 { transform: rotate(1deg) translateY(6px); }
.res--2 { transform: rotate(-.5deg); background: var(--negro); color: var(--crema); }
.res--2::before { color: var(--crema); opacity: .25; }
.res__stars { color: #F2B33D; letter-spacing: 3px; font-size: 1.05rem; }
.res p { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.res__n { font-family: var(--f-script); font-style: italic; font-size: 1.3rem; color: var(--bordo); }
.res--2 .res__n { color: var(--arena); }
.cupon {
  display: grid;
  gap: 22px;
  align-items: center;
  margin-top: 40px;
  padding: 28px;
  border: 2px dashed var(--crema);
}
.cupon p { margin: 0; }
.cupon__tag { font-family: var(--f-script); font-style: italic; font-size: 1.5rem; }
.cupon__monto { font-stretch: 62%; font-weight: 900; font-size: clamp(4rem, 12vw, 7rem); line-height: .85; }
.cupon__sub { font-weight: 700; }
.pasos { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.cupon__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- eventos ---------- */
.eventos__in { display: grid; gap: 28px; align-items: start; }
.eventos__txt p { max-width: 46ch; margin: 18px 0 0; color: var(--arena); }
.eventos__tipos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; padding: 0; }
.eventos__tipos li { padding: 4px 12px; border: 1px solid var(--linea); font-size: var(--t-s); font-weight: 700; }
.eventos__video { width: 100%; aspect-ratio: 9 / 14; max-height: 560px; object-fit: cover; background: var(--carbon); }
.eventos__cal { min-width: 0; }
.eventos__cal-t { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.eventos__cal-d { margin: 6px 0 14px; font-size: var(--t-s); color: var(--arena); }
.eventos .agenda { padding: 14px; }
.eventos .agenda__mes { font-size: 1.3rem; }
.eventos .agenda__nav { width: 34px; height: 34px; font-size: 1.1rem; }
.eventos .agenda__dias, .eventos .agenda__grilla { gap: 3px; }
.eventos .cal { font-size: .85rem; }
@media (min-width: 760px) { .eventos__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .eventos__cal { grid-column: 1 / -1; max-width: 420px; } }
@media (min-width: 1100px) { .eventos__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 340px); } .eventos__cal { grid-column: auto; } }
.agenda { min-width: 0; padding: 22px; background: var(--carbon); border: 1px solid var(--linea); }
.agenda__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda__mes { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 2rem; text-transform: uppercase; }
.agenda__nav { width: 42px; height: 42px; border: 1px solid var(--crema); background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.agenda__nav:disabled { opacity: .3; cursor: default; }
.agenda__dias, .agenda__grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.agenda__dias { margin: 14px 0 6px; text-align: center; font-size: var(--t-xs); font-weight: 700; color: var(--gris); }
.cal { aspect-ratio: 1; display: grid; place-items: center; border: 0; font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; background: transparent; }
.cal--libre { background: rgba(251, 242, 224, .08); cursor: pointer; }
.cal--libre:hover { background: rgba(251, 242, 224, .2); }
.cal--ocupado { background: repeating-linear-gradient(45deg, rgba(224, 37, 58, .35) 0 5px, transparent 5px 10px); color: var(--gris); text-decoration: line-through; }
.cal--pasada { opacity: .25; }
.cal--elegido { background: var(--rojo) !important; color: var(--crema); }
.agenda__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; font-size: var(--t-xs); color: var(--gris); }
.ref { display: inline-block; width: 14px; height: 14px; }
.ref--libre { background: rgba(251, 242, 224, .2); }
.ref--ocupado { background: repeating-linear-gradient(45deg, rgba(224, 37, 58, .6) 0 3px, transparent 3px 6px); }
.ref--elegido { background: var(--rojo); }
.agenda__form { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--linea); }
.agenda__fecha { margin: 0 0 10px; font-family: var(--f-script); font-style: italic; font-size: 1.5rem; }
.agenda__campos { display: grid; gap: 4px; margin-bottom: 16px; }
.agenda__campos label { margin-top: 8px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--arena); }
.agenda__campos input, .agenda__campos select { min-height: 46px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 0; background: var(--negro); color: var(--crema); font: inherit; }
.agenda__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- pie ---------- */
.pie { background: var(--negro); border-top: 1px solid var(--linea); overflow: hidden; }
.pie__marca {
  padding: 30px var(--gr) 0 var(--gl);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(5rem, 24vw, 22rem);
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bordo);
}
.pie__in { display: grid; gap: 24px; padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pie__col p { margin: 0 0 6px; color: var(--arena); }
.pie__t { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-xs); color: var(--crema) !important; }
.pie__legal { margin: 0; font-size: var(--t-xs); color: var(--gris); }

/* ---------- mascota ---------- */
.mascota {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: 78px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mascota img { width: 100%; transform-origin: 45% 95%; transform: rotate(var(--giro, 0deg)); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); transition: transform .2s ease; animation: hamaca 4s ease-in-out infinite; }
.mascota:hover img { transform: rotate(-5deg) scale(1.06); }
@keyframes hamaca { 50% { translate: 0 -3px; } }
.mascota__globo {
  position: absolute;
  right: 40%;
  bottom: 96%;
  width: max-content;
  max-width: 190px;
  padding: 7px 12px;
  border-radius: 14px 14px 3px 14px;
  background: var(--crema);
  color: var(--negro);
  font-stretch: 75%;
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.15;
  text-align: left;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.mascota.is-hablando .mascota__globo { opacity: 1; transform: none; }

/* ---------- capas: hoja, paneles, pop-up ---------- */
.hoja, .panelx { position: fixed; inset: 0; z-index: 75; }
.hoja { display: grid; align-items: end; justify-items: center; }
.hoja__fondo, .panelx__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.x { position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; z-index: 2; }
.hoja__caja {
  position: relative;
  width: min(100%, 520px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px max(22px, env(safe-area-inset-left, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-right, 0px));
  background: var(--carbon);
  border-top: 6px solid var(--rojo);
  animation: subir .28s var(--suave);
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.hoja__t { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 2.8rem; line-height: .9; text-transform: uppercase; }
.hoja__estado { margin: 8px 0 18px; font-size: var(--t-s); color: var(--arena); }
.hoja__ops { display: grid; gap: 8px; }
.op--app strong { color: var(--app); }
.op--app.op--main { background: var(--app); border-color: var(--app); }
.op--app.op--main strong { color: var(--negro); }
.op--app.op--main span { color: var(--negro); }
.op { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--linea); text-decoration: none; }
.op:hover { border-color: var(--crema); }
.op strong { font-stretch: 75%; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; }
.op span { font-size: var(--t-s); color: var(--arena); }
.op--main { background: var(--rojo); border-color: var(--rojo); }
.op--main span { color: var(--crema); }
.op.is-pronto, .op--pronto { border-style: dashed; background: transparent; }
.hoja__sub { margin: 18px 0 8px; font-size: var(--t-xs); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--arena); }
.hoja__apps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.app { padding: 8px 14px; border: 1px solid var(--app); color: var(--app); font-stretch: 75%; font-weight: 900; text-decoration: none; text-transform: uppercase; font-size: .9rem; }

.panelx__caja { position: absolute; background: var(--carbon); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); overflow-y: auto; overscroll-behavior: contain; }
.panelx__caja--arriba { top: calc(70px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: min(calc(100% - 24px), 400px); max-height: calc(100% - 90px); padding: 24px 22px 22px; border: 1px solid var(--linea); animation: bajar .22s ease-out; }
.panelx__caja--lado { top: 0; right: 0; bottom: 0; width: min(100%, 480px); padding: calc(24px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) 22px; border-left: 6px solid var(--rojo); animation: lado .25s ease-out; }
.panelx__caja--centro { left: 50%; top: 50%; width: min(calc(100% - 32px), 440px); max-height: calc(100% - 40px); transform: translate(-50%, -50%); }
@keyframes bajar { from { transform: translateY(-12px); opacity: 0; } }
@keyframes lado { from { transform: translateX(40px); opacity: 0; } }
.info__estado { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 3.2rem; line-height: .9; text-transform: uppercase; color: #39C46E; }
.info__estado.is-cerrado { color: transparent; -webkit-text-stroke: 1.5px var(--crema); }
.info__t { margin: 6px 0 14px; font-family: var(--f-script); font-style: italic; font-weight: 400; font-size: 1.6rem; }
.semana { list-style: none; margin: 0; padding: 0; }
.semana li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 10px; padding: 7px 10px; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.semana li + li { border-top: 1px solid var(--linea); }
.semana .sdia { font-weight: 800; }
.semana .is-hoy { background: var(--rojo); }
.semana .is-cerrado-dia { color: var(--gris); }
.info__hh { margin: 14px 0; padding: 10px 14px; background: rgba(224, 37, 58, .14); font-size: var(--t-s); }
.info__donde p { margin: 0 0 10px; font-size: var(--t-s); }
.info__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cartap__nota { margin: -6px 0 12px; font-size: var(--t-s); color: var(--arena); }
.cartap ul { list-style: none; margin: 0; padding: 0; }
.cartap li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.cartap li div { min-width: 0; display: grid; }
.cartap li strong { font-stretch: 75%; font-weight: 900; text-transform: uppercase; }
.cartap li small { font-size: var(--t-xs); color: var(--gris); }
.cartap__sec { margin: 24px 0 4px; font-stretch: 62%; font-weight: 900; font-size: 1.9rem; text-transform: uppercase; color: var(--rojo); }
.cartap__cols, .cartap__pr { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.cartap__cols { justify-content: flex-end; margin: 0; font-size: var(--t-xs); font-weight: 800; color: var(--gris); }
.cartap__cols span, .cartap__pr span { width: 4.4rem; text-align: right; }
.cartap__pr { flex: none; font-weight: 800; font-size: var(--t-s); }

.detalle { padding: 0 0 22px; }
.detalle__foto { width: 100%; aspect-ratio: 1; object-fit: cover; }
.detalle__t, .detalle__d, .detalle__pr, .detalle__ctas { margin-left: 22px; margin-right: 22px; }
.detalle__t { margin-top: 18px; margin-bottom: 0; font-stretch: 62%; font-weight: 900; font-size: 2.6rem; line-height: .9; text-transform: uppercase; }
.detalle__d { margin-top: 8px; color: var(--arena); }
.detalle__pr { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.detalle__pr li { padding: 10px; border: 1px solid var(--linea); display: grid; }
.detalle__pr small { font-size: var(--t-xs); color: var(--gris); text-transform: uppercase; font-weight: 700; }
.detalle__pr strong { font-stretch: 75%; font-weight: 900; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.detalle__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.pop { padding: 30px 26px 18px; background: var(--rojo); text-align: center; overflow: visible; }
.pop__masc { width: 112px; margin: -86px auto 6px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.pop__tag { margin: 0; font-family: var(--f-script); font-style: italic; font-size: 1.7rem; }
.pop__monto { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 5.6rem; line-height: .85; }
.pop__sub { margin: 6px 0 16px; font-weight: 800; text-transform: uppercase; font-size: var(--t-s); letter-spacing: .03em; }
.pop__pasos { margin: 0 auto 20px; padding-left: 1.3em; max-width: 19rem; text-align: left; display: grid; gap: 4px; }
.pop__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pop__luego { margin-top: 12px; min-height: 40px; border: 0; background: none; text-decoration: underline; font-size: var(--t-s); cursor: pointer; opacity: .85; }

.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translateX(-50%); padding: 10px 18px; background: var(--crema); color: var(--negro); font-weight: 800; }

/* ---------- breakpoints ---------- */
@media (max-width: 559px) {
  .estado { padding: 0 10px; }
  .estado__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .estado__corto { display: inline; }
  .nav__logo img { width: 66px; }
  .nav__acc { gap: 6px; }
  .aviso a { display: none; }
  .hero { min-height: 88vh; }
  .hero__pausa { top: 12px; }
  .grilla-pz { gap: 28px 14px; }
  .pz-card__d { display: none; }
}
@media (min-width: 760px) {
  .grilla-pz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .cupon { grid-template-columns: auto 1fr auto; }
  .pie__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__legal { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__logo img { width: 88px; }
  .grilla-pz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .delmes__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: 88px; }
  .mym__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nosotros__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .mascota { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquesina__pista { animation: correr 60s linear infinite !important; animation-duration: 60s !important; animation-iteration-count: infinite !important; }
  .cinta-res { animation: correr 120s linear infinite !important; animation-duration: 120s !important; animation-iteration-count: infinite !important; }
}