/* Tizne · restaurante de brasa (concepto WEBO). Oscuro y sobrio: carbón, hueso y cuero.
   El naranja de la brasa solo vive dentro de los huecos de imagen; la interfaz nunca lo usa.
   Movimiento (6/10, lento y cálido): la portada sale de la oscuridad, el titular se asienta como a través del calor
   y suben unas pocas chispas (tizne.js, canvas). Al bajar, la brasa se aviva y respira, la carta se escribe por filas
   y las velas de la mesa larga se encienden una a una. Estados ocultos solo bajo html.mov (concepto.js). */

@font-face { font-family: "Gloock"; src: url("/assets/fonts/conceptos/gloock-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/conceptos/hanken-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/conceptos/hanken-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --carbon: #121110;
  --humo: #1C1A18;
  --hueso: #ECE6DC;
  --hueso-2: #CEC7BB;
  --ceniza: #9A938A;
  --cuero: #C79A6B;
  --cuero-claro: #D9B48A;
  --filete: rgb(199 154 107 / .38);
  --linea: rgb(236 230 220 / .12);
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --texto: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --margen: clamp(20px, 5vw, 72px);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

html { background: var(--carbon); scrollbar-color: #3A3531 var(--carbon); }
/* Desplazamiento suave por CSS solo sin el JS de movimiento (con él lo hace tizne.js: el CSS descuadra ScrollTrigger, que lo lee al cargar) */
@media (prefers-reduced-motion: no-preference) { html:not(.mov) { scroll-behavior: smooth; } }
[tabindex="-1"]:focus { outline: none; }
body {
  background: var(--carbon); color: var(--hueso);
  font: 400 1.0625rem/1.65 var(--texto);
  font-kerning: normal; font-variant-numeric: lining-nums;
}
::selection { background: var(--cuero); color: var(--carbon); }
:focus-visible { outline: 2px solid var(--hueso); outline-offset: 4px; border-radius: 1px; }
.marco { width: min(100% - 2 * var(--margen), 1296px); margin-inline: auto; }
.slot { position: relative; overflow: hidden; margin: 0; }
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Velos para los fundidos desde la oscuridad (portada al cargar, brasa y mesa al bajar). Sin movimiento, transparentes */
.portada__velo, .slot__velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: #0C0B0A; }

.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 50;
  padding: 10px 16px; background: var(--hueso); color: var(--carbon); text-decoration: none; font-weight: 500;
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 2px;
  background: var(--cuero); color: var(--carbon);
  font: 500 .9375rem/1 var(--texto); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--linea {
  min-height: 44px; padding: 0 20px;
  background: transparent; color: var(--hueso);
  box-shadow: inset 0 0 0 1px var(--filete);
}
.enlace {
  font-weight: 500; font-size: .9375rem; letter-spacing: .02em; color: var(--hueso);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  text-decoration-color: rgb(199 154 107 / .55);
  transition: text-decoration-color 220ms ease, color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--cuero-claro); }
  .boton--linea:hover { background: rgb(199 154 107 / .1); box-shadow: inset 0 0 0 1px var(--cuero); }
  .enlace:hover { text-decoration-color: var(--cuero); }
  .cabecera__nav a:hover { color: var(--hueso); text-decoration-color: var(--cuero); }
}

/* Cabecera sobre la portada */
.cabecera {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: clamp(18px, 3vw, 32px) var(--margen);
}
.marca {
  margin-right: auto;
  font: 400 1.75rem/1 var(--display); letter-spacing: .01em; color: var(--hueso); text-decoration: none;
}
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.cabecera__nav a {
  font-size: .9375rem; font-weight: 500; letter-spacing: .02em; color: var(--hueso-2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 7px; text-decoration-thickness: 1px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}

/* Portada a sangre */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end;
  padding: 140px var(--margen) clamp(56px, 10vh, 104px);
}
.slot--portada { position: absolute; inset: 0; z-index: -1; margin: 0; }
.slot--portada {
  background:
    linear-gradient(to bottom, rgb(13 12 11 / .9) 0%, rgb(13 12 11 / 0) 24%),
    radial-gradient(ellipse 58% 62% at 70% 100%, rgb(150 44 16 / .5), transparent 74%),
    radial-gradient(ellipse 36% 44% at 72% 58%, rgb(122 31 14 / .2), transparent 72%),
    radial-gradient(ellipse 26% 30% at 86% 18%, rgb(236 230 220 / .03), transparent 70%),
    #0D0C0B;
}
/* Lecho de brasas y parrilla en perspectiva: puntos de luz en mosaico que el plano inclinado aplasta */
.brasas, .parrilla {
  position: absolute; left: 26%; right: -18%; bottom: 0; height: 84%;
  transform-origin: 50% 100%; transform: perspective(900px) rotateX(63deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 58%, #000 34%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 58%, #000 34%, transparent 72%);
  pointer-events: none;
}
.brasas {
  filter: blur(.6px);
  background:
    radial-gradient(circle, rgb(255 214 150 / .95) 0 1.4px, transparent 4px) 0 0 / 37px 29px,
    radial-gradient(circle, rgb(255 152 72 / .9) 0 2.4px, transparent 7px) 13px 7px / 53px 41px,
    radial-gradient(circle, rgb(255 190 120 / .8) 0 1px, transparent 3px) 19px 11px / 23px 19px,
    radial-gradient(circle, rgb(14 10 8 / .6) 0 5px, transparent 10px) 23px 17px / 47px 31px,
    radial-gradient(circle, rgb(240 122 43 / .7) 0 5px, transparent 14px) 5px 21px / 71px 53px,
    radial-gradient(circle, rgb(14 10 8 / .5) 0 9px, transparent 16px) 41px 3px / 89px 61px,
    radial-gradient(ellipse 50% 50% at 50% 56%, rgb(226 96 34 / .95), rgb(160 48 18 / .85) 40%, rgb(90 24 10 / .5) 66%, transparent 80%);
}
.parrilla {
  transform: perspective(900px) translateY(-3%) rotateX(63deg);
  background: repeating-linear-gradient(90deg, rgb(255 150 70 / .28) 0 1px, rgb(9 8 7 / .95) 1px 5px, transparent 5px 38px);
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 58%, #000 40%, transparent 74%);
  mask-image: radial-gradient(ellipse 48% 50% at 50% 58%, #000 40%, transparent 74%);
}
/* Con foto real: a sangre, el fuego a la derecha */
.slot--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
/* Penumbra a la izquierda para el titular, por encima de las brasas */
.slot--portada::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgb(13 12 11 / .96) 0%, rgb(13 12 11 / .72) 32%, rgb(13 12 11 / 0) 58%);
}
.slot--portada::after,
.slot--brasa::after,
.slot--mesa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grano); opacity: .07;
}

.portada__texto { max-width: 1296px; width: 100%; margin-inline: auto; }
.portada h1 {
  font: 400 clamp(3.1rem, 7vw, 6rem)/.98 var(--display);
  letter-spacing: -.015em; text-wrap: balance;
}
.portada h1 span { display: block; }
.portada__sub {
  max-width: 36ch; margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--hueso-2);
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(28px, 3.4vw, 44px); }

/* Chispas: canvas que crea tizne.js sobre la foto (y sobre su penumbra; el texto queda siempre por encima) */
.chispas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* Entrada: la brasa sale de la oscuridad, la foto se acerca un poco y el titular se asienta como a través del calor.
   CSS puro (corre fuera del hilo principal y no espera al JS); el temblor del aire es el filtro SVG #tizne-calor. */
html.mov .portada__velo { animation: tizne-velo 1700ms cubic-bezier(.33, 1, .68, 1) both; }
html.mov .slot--foto img { transform-origin: 62% 72%; animation: tizne-acerca 2800ms var(--ease) both; }
html.mov .portada h1 span { animation: tizne-calor 1500ms var(--ease) both; }
html.mov .portada h1 span:nth-child(1) { animation-delay: 420ms; }
html.mov .portada h1 span:nth-child(2) { animation-delay: 580ms; }
html.mov .portada__sub { animation: tizne-sube 1100ms var(--ease) 900ms both; }
html.mov .acciones { animation: tizne-sube 1100ms var(--ease) 1040ms both; }
html.mov .cabecera { animation: tizne-aparece 1000ms ease 1150ms both; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html.mov .portada h1 { animation: tizne-aire 2900ms linear both; }
}
@keyframes tizne-velo { from { opacity: 1; } }
@keyframes tizne-acerca { from { transform: scale(1.06); } }
@keyframes tizne-calor { from { opacity: 0; filter: blur(12px); transform: translateY(12px); } }
@keyframes tizne-sube { from { opacity: 0; transform: translateY(10px); } }
@keyframes tizne-aparece { from { opacity: 0; } }
@keyframes tizne-aire { from, 99% { filter: url(#tizne-calor); } to { filter: none; } }

/* La brasa */
.brasa {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  align-items: end;
  padding-block: clamp(96px, 13vw, 184px) clamp(72px, 9vw, 128px);
}
.slot--brasa {
  grid-column: 1 / span 5; aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 90% 46% at 50% 104%, rgb(160 46 16 / .75), transparent 72%),
    radial-gradient(ellipse 60% 40% at 56% 34%, rgb(122 31 14 / .16), transparent 70%),
    linear-gradient(to bottom, #0C0B0A 0%, #110D0B 55%, #190E09 100%);
}
/* Vista cenital: el lecho de brasas llena el encuadre y la parrilla lo cruza en diagonal */
.slot--brasa .brasas, .slot--brasa .parrilla { inset: -10%; height: auto; transform: none; }
.slot--brasa .brasas {
  filter: blur(.4px);
  background:
    radial-gradient(ellipse 1.1% 0.7% at 35.2% 33.5%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.6% 0.5% at 53.0% 49.8%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.7% 0.4% at 11.1% 55.0%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.7% 0.5% at 43.7% 84.8%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.1% 0.8% at 60.7% 94.0%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.7% 0.5% at 80.1% 44.0%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.7% 0.6% at 33.9% 84.0%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.0% 0.6% at 61.7% 50.3%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.9% 0.7% at 65.2% 54.5%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.2% 1.1% at 46.1% 44.8%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.0% 1.0% at 28.5% 65.7%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.4% 0.9% at 69.3% 43.9%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 0.7% 0.6% at 43.1% 79.5%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.2% 1.0% at 11.3% 72.8%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.2% 1.0% at 81.5% 45.8%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 1.3% 1.2% at 56.7% 56.7%, rgb(255 222 160 / .9), transparent 80%),
    radial-gradient(ellipse 5.4% 4.1% at 47.8% 72.5%, rgb(18 12 9 / 0.84) 0 45%, transparent 72%),
    radial-gradient(ellipse 9.0% 5.0% at 31.9% 51.3%, rgb(18 12 9 / 0.80) 0 45%, transparent 72%),
    radial-gradient(ellipse 5.4% 4.2% at 22.1% 30.9%, rgb(18 12 9 / 0.73) 0 45%, transparent 72%),
    radial-gradient(ellipse 10.2% 5.9% at 28.8% 51.7%, rgb(18 12 9 / 0.80) 0 45%, transparent 72%),
    radial-gradient(ellipse 9.9% 8.0% at 54.2% 89.1%, rgb(18 12 9 / 0.76) 0 45%, transparent 72%),
    radial-gradient(ellipse 10.3% 8.6% at 42.9% 49.3%, rgb(18 12 9 / 0.73) 0 45%, transparent 72%),
    radial-gradient(ellipse 6.4% 4.5% at 22.8% 39.6%, rgb(18 12 9 / 0.83) 0 45%, transparent 72%),
    radial-gradient(ellipse 8.4% 7.0% at 43.2% 50.1%, rgb(18 12 9 / 0.85) 0 45%, transparent 72%),
    radial-gradient(ellipse 9.1% 5.1% at 51.3% 68.9%, rgb(18 12 9 / 0.90) 0 45%, transparent 72%),
    radial-gradient(ellipse 9.8% 6.5% at 73.5% 88.5%, rgb(18 12 9 / 0.79) 0 45%, transparent 72%),
    radial-gradient(ellipse 5.4% 3.1% at 16.7% 70.2%, rgb(18 12 9 / 0.75) 0 45%, transparent 72%),
    radial-gradient(ellipse 5.3% 2.9% at 21.6% 47.8%, rgb(18 12 9 / 0.73) 0 45%, transparent 72%),
    radial-gradient(ellipse 5.2% 4.2% at 16.5% 49.6%, rgb(18 12 9 / 0.84) 0 45%, transparent 72%),
    radial-gradient(ellipse 7.1% 4.7% at 20.5% 41.2%, rgb(18 12 9 / 0.73) 0 45%, transparent 72%),
    radial-gradient(ellipse 5.5% 3.2% at 47.1% 58.8%, rgb(18 12 9 / 0.78) 0 45%, transparent 72%),
    radial-gradient(ellipse 6.0% 3.3% at 30.2% 85.0%, rgb(18 12 9 / 0.91) 0 45%, transparent 72%),
    radial-gradient(ellipse 6.3% 3.8% at 52.4% 33.1%, rgb(214 92 32 / .75), transparent 72%),
    radial-gradient(ellipse 5.2% 3.4% at 66.5% 41.8%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 5.0% 3.4% at 52.7% 81.2%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 7.4% 5.1% at 75.7% 84.2%, rgb(176 58 20 / .7), transparent 72%),
    radial-gradient(ellipse 3.2% 2.2% at 37.9% 24.2%, rgb(214 92 32 / .75), transparent 72%),
    radial-gradient(ellipse 5.1% 4.5% at 24.3% 68.0%, rgb(214 92 32 / .75), transparent 72%),
    radial-gradient(ellipse 4.3% 2.9% at 88.2% 49.7%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 8.9% 7.3% at 36.4% 58.7%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 7.8% 4.9% at 48.3% 71.6%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 7.5% 5.8% at 84.4% 81.5%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 3.5% 3.3% at 44.4% 70.3%, rgb(176 58 20 / .7), transparent 72%),
    radial-gradient(ellipse 3.5% 2.3% at 46.9% 78.5%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 5.8% 4.8% at 10.3% 66.9%, rgb(176 58 20 / .7), transparent 72%),
    radial-gradient(ellipse 6.3% 4.1% at 63.2% 48.6%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 3.6% 3.1% at 75.1% 77.2%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 8.0% 5.4% at 44.4% 88.3%, rgb(214 92 32 / .75), transparent 72%),
    radial-gradient(ellipse 7.6% 5.4% at 25.9% 60.1%, rgb(176 58 20 / .7), transparent 72%),
    radial-gradient(ellipse 7.0% 6.2% at 70.2% 90.2%, rgb(176 58 20 / .7), transparent 72%),
    radial-gradient(ellipse 3.8% 2.5% at 77.5% 88.7%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 6.7% 5.8% at 81.3% 81.0%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 7.4% 5.8% at 22.5% 58.0%, rgb(214 92 32 / .75), transparent 72%),
    radial-gradient(ellipse 5.9% 5.1% at 65.3% 62.3%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 7.6% 5.9% at 28.9% 43.0%, rgb(255 176 102 / .85), transparent 72%),
    radial-gradient(ellipse 5.7% 4.6% at 71.8% 91.3%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 6.2% 4.8% at 66.2% 56.4%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 8.7% 6.0% at 66.7% 88.6%, rgb(240 122 43 / .8), transparent 72%),
    radial-gradient(ellipse 52% 46% at 50% 62%, rgb(196 70 24 / .9), rgb(122 31 14 / .7) 55%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 62%, #000 30%, transparent 74%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 62%, #000 30%, transparent 74%);
}
.slot--brasa .parrilla {
  transform: rotate(-14deg) scale(1.15);
  background: repeating-linear-gradient(90deg, rgb(255 150 70 / .22) 0 1px, rgb(9 8 7 / .94) 1px 7px, transparent 7px 44px);
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 60%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 60%, #000 30%, transparent 76%);
}
/* La brasa respira: un resplandor que sube y baja muy despacio mientras se ve (tizne.js pone .esta-viva) */
.brasa__aliento {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 72% 46% at 50% 66%, rgb(255 128 44 / .55), transparent 72%);
  mix-blend-mode: screen;
}
html.mov .slot--brasa.esta-viva .brasa__aliento { animation: tizne-aliento 5200ms ease-in-out infinite alternate; }
@keyframes tizne-aliento { from { opacity: .08; } to { opacity: .42; } }
.brasa__texto { grid-column: 7 / span 6; max-width: 560px; }
.brasa h2, .carta h2, .reservas h2 {
  font: 400 clamp(2.6rem, 4.6vw, 4.25rem)/1 var(--display); letter-spacing: -.01em; text-wrap: balance;
}
.brasa__entrada {
  margin-top: clamp(24px, 3vw, 40px);
  font: 400 clamp(1.375rem, 1.9vw, 1.6875rem)/1.38 var(--display); color: var(--hueso);
}
.brasa__texto > p + p { margin-top: 20px; color: var(--hueso-2); max-width: 46ch; }
.brasa__datos { margin-top: clamp(36px, 4vw, 56px); }
.brasa__datos div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px;
  padding-block: 14px; border-top: 1px solid var(--linea);
}
.brasa__datos dt { font-size: .875rem; color: var(--ceniza); padding-top: 1px; }
.brasa__datos dd { margin: 0; font-size: .9375rem; color: var(--hueso); }

/* Carta: hoja con doble filete, como la que llega a la mesa */
.carta { padding: clamp(40px, 6vw, 88px) var(--margen) clamp(80px, 9vw, 128px); }
.carta__hoja {
  position: relative; max-width: 1080px; margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) clamp(24px, 6.5vw, 96px);
  background: var(--humo);
  box-shadow: 0 40px 80px -48px rgb(0 0 0 / .7);
}
.carta__hoja::before, .carta__hoja::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--filete); }
.carta__hoja::before { inset: 12px; }
.carta__hoja::after { inset: 17px; border-color: rgb(199 154 107 / .16); }
.carta__cabeza { text-align: center; }
.carta__cabeza p { margin: 18px auto 0; max-width: 40ch; color: var(--ceniza); font-size: .9375rem; }
.carta__cabeza::after { content: ""; display: block; width: 44px; height: 1px; margin: clamp(32px, 4vw, 48px) auto 0; background: var(--cuero); }
.carta__grupos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px clamp(40px, 6vw, 88px);
  margin-top: clamp(36px, 4.5vw, 56px);
}
.carta__col { display: grid; align-content: start; gap: 48px; }
.grupo h3 { font: 400 1.5rem/1.2 var(--display); color: var(--cuero); margin-bottom: 22px; }
.grupo ul { display: grid; gap: 22px; }
.plato__linea { display: flex; align-items: baseline; gap: 10px; }
.plato__nombre { font-weight: 500; font-size: 1.0625rem; line-height: 1.35; color: var(--hueso); }
.plato__guia {
  flex: 1 1 24px; min-width: 24px; height: 1em; transform: translateY(-.18em);
  background: radial-gradient(circle, rgb(154 147 138 / .7) .75px, transparent 1.25px) 0 100% / 7px 4px repeat-x;
}
.plato__precio { font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hueso); }
.plato__desc { margin-top: 4px; font-size: .9375rem; line-height: 1.5; color: var(--ceniza); max-width: 34ch; }

/* Reservas */
.reservas { padding-bottom: clamp(96px, 12vw, 168px); }
.slot--mesa {
  aspect-ratio: 21 / 9;
  background:
    linear-gradient(176deg, transparent 54%, rgb(96 30 12 / .42) 58%, rgb(70 24 11 / .5) 70%, rgb(30 14 9 / .7) 84%, transparent 98%),
    radial-gradient(ellipse 70% 70% at 36% 30%, rgb(122 31 14 / .2), transparent 72%),
    radial-gradient(ellipse 40% 50% at 80% 40%, rgb(236 230 220 / .025), transparent 70%),
    linear-gradient(to bottom, #100D0B, #130F0C 55%, #0C0B0A);
}
/* Velas de la mesa larga (marcador): cada una con su llama, su halo y su reflejo en la mesa.
   Tamaños en proporción a la figura: la de la izquierda (--t: 1) es la más cercana */
.velas { position: absolute; inset: 0; pointer-events: none; }
.velas i { position: absolute; left: var(--x); top: var(--y); width: calc(18% * var(--t)); height: calc(34% * var(--t)); translate: -50% -50%; }
.velas i::before, .velas i::after { content: ""; position: absolute; }
.velas i::before {
  inset: 0;
  background:
    radial-gradient(2.33% 6.18% at 50% 50%, rgb(255 226 170 / .95) 0 30%, rgb(255 168 90 / .6) 55%, transparent 100%),
    radial-gradient(closest-side, rgb(240 122 43 / calc(.24 * var(--t))), transparent 70%);
}
.velas i::after {
  left: 41.1%; top: 70.6%; width: 17.8%; height: 29.4%;
  background: radial-gradient(closest-side, rgb(240 122 43 / calc(.22 * var(--t))), transparent 70%);
}
/* Titilan muy poco, cada una a su ritmo, y solo mientras la mesa se ve */
html.mov .slot--mesa.esta-viva .velas i::before,
html.mov .slot--mesa.esta-viva .velas i::after { animation: tizne-titila var(--dur, 3s) ease-in-out var(--ret, 0s) infinite; }
.velas i:nth-child(1) { --dur: 2.9s; --ret: -.4s; }
.velas i:nth-child(2) { --dur: 3.6s; --ret: -1.9s; }
.velas i:nth-child(3) { --dur: 2.6s; --ret: -.9s; }
.velas i:nth-child(4) { --dur: 3.9s; --ret: -2.6s; }
.velas i:nth-child(5) { --dur: 3.2s; --ret: -1.3s; }
.velas i:nth-child(6) { --dur: 2.8s; --ret: -2.2s; }
.velas i:nth-child(7) { --dur: 3.5s; --ret: -.2s; }
@keyframes tizne-titila { 0%, 100% { opacity: 1; } 17% { opacity: .84; } 31% { opacity: .97; } 48% { opacity: .78; } 64% { opacity: .95; } 81% { opacity: .87; } }

.reservas__cuerpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(56px, 7vw, 96px);
}
.reservas__texto { grid-column: 1 / span 6; }
.reservas__texto > p { margin-top: 24px; max-width: 42ch; color: var(--hueso-2); }
.horario { margin-top: clamp(32px, 4vw, 48px); max-width: 480px; }
.horario div { display: flex; justify-content: space-between; gap: 24px; padding-block: 13px; border-top: 1px solid var(--linea); }
.horario div:last-child { border-bottom: 1px solid var(--linea); }
.horario dt { color: var(--ceniza); font-size: .9375rem; }
.horario dd { margin: 0; text-align: right; font-size: .9375rem; font-variant-numeric: tabular-nums; }

.reserva {
  grid-column: 8 / span 5; align-self: end;
  display: grid; gap: 28px;
}
.campo { display: grid; gap: 8px; }
.campo label { font-size: .8125rem; font-weight: 500; letter-spacing: .03em; color: var(--ceniza); }
.campo input, .campo select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 48px; padding: 10px 32px 10px 0;
  background: transparent; border: 0; border-bottom: 1px solid rgb(236 230 220 / .28); border-radius: 0;
  font-size: 1.0625rem; color: var(--hueso);
  transition: border-color 220ms ease;
}
.campo select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C79A6B' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.campo select option { background: var(--humo); color: var(--hueso); }
.campo input::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.campo input:focus-visible, .campo select:focus-visible { outline: none; border-bottom-color: var(--cuero); box-shadow: 0 1px 0 var(--cuero); }
@media (hover: hover) and (pointer: fine) {
  .campo input:hover, .campo select:hover { border-bottom-color: rgb(236 230 220 / .5); }
}
.reserva__boton { margin-top: 8px; width: 100%; }
.reserva__aviso { margin-top: -12px; font-size: .9375rem; line-height: 1.5; color: var(--hueso-2); }
.reserva__aviso:empty { display: none; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 48px 0 104px; color: var(--ceniza); font-size: .9375rem; line-height: 1.6; }
.pie__dentro { display: grid; grid-template-columns: 1fr auto auto; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.pie__marca { font: 400 2.25rem/1 var(--display); color: var(--hueso); }

/* Tabletas */
@media (max-width: 1024px) {
  .slot--brasa { grid-column: 1 / span 6; }
  .brasa__texto { grid-column: 7 / span 6; }
  .reservas__texto { grid-column: 1 / span 7; }
  .reserva { grid-column: 8 / span 5; }
}

/* Móvil: una columna limpia */
@media (max-width: 760px) {
  .cabecera__nav { display: none; }
  .marca { font-size: 1.5rem; }
  .portada { padding: 120px var(--margen) 64px; }
  .slot--portada::before { background: linear-gradient(to top, rgb(13 12 11 / .97) 0%, rgb(13 12 11 / .88) 36%, rgb(13 12 11 / 0) 56%); }
  .slot--portada {
    background:
      linear-gradient(to bottom, rgb(13 12 11 / .9) 0%, rgb(13 12 11 / 0) 18%),
      radial-gradient(ellipse 90% 34% at 56% 50%, rgb(150 44 16 / .55), transparent 74%),
      radial-gradient(ellipse 80% 30% at 60% 30%, rgb(122 31 14 / .2), transparent 72%),
      #0D0C0B;
  }
  .slot--portada .brasas, .slot--portada .parrilla { left: -50%; right: -50%; bottom: 44%; height: 46%; }
  .slot--foto img { object-position: 60% 30%; }
  .portada h1 { font-size: clamp(2.85rem, 13.4vw, 3.6rem); }
  .boton { min-height: 50px; padding: 0 24px; }
  .boton--linea { min-height: 40px; padding: 0 16px; font-size: .875rem; }

  .brasa, .reservas__cuerpo { grid-template-columns: 1fr; row-gap: 40px; }
  .slot--brasa, .brasa__texto, .reservas__texto, .reserva { grid-column: 1 / -1; }
  .slot--brasa { aspect-ratio: 4 / 4.6; }
  .brasa__datos div { grid-template-columns: 6.5rem 1fr; }

  .carta { padding-inline: 12px; }
  .carta__hoja { padding: 56px 24px 48px; }
  .carta__hoja::before { inset: 8px; }
  .carta__hoja::after { inset: 12px; }
  .carta__grupos { grid-template-columns: 1fr; gap: 44px; }
  .carta__col { gap: 44px; }

  .slot--mesa { aspect-ratio: 4 / 3; }
  .reservas__cuerpo { margin-top: 48px; row-gap: 48px; }
  .horario div { flex-direction: column; gap: 2px; }
  .horario dd { text-align: left; }
  .pie__dentro { grid-template-columns: 1fr; gap: 20px; }
}



/* Firma de WEBO: el gris del pie ya es suave, así que se apaga menos para mantener el contraste AA */
.firma-webo { opacity: .88; }