/* Plantilla restaurante vintage (v2). Casa de comidas antigua: papel hueso, verde bosque y ámbar.
   Títulos en Playfair Display (rótulo clásico de imprenta), texto en Libre Franklin,
   detalles a máquina de escribir en Courier Prime.
   Formas: esquinas casi rectas (4px) como el papel impreso; la foto de portada en arco; botones en píldora. */

:root {
  --papel: #f2eee4;
  --papel-oscuro: #e6e0d1;
  --tarjeta: #faf8f2;
  --tinta: #1d3328;
  --tinta-suave: #4f6157;
  --linea: #c9c1ad;
  --ambar: #c98a1e;
  --ambar-texto: #8a5a0b;
  --sobre-ambar: #1d3328;
  --abierto: #2f7d4f;
  --serif: "Playfair Display", Georgia, serif;
  --texto: "Libre Franklin", system-ui, sans-serif;
  --maquina: "Courier Prime", "Courier New", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #13221b;
    --papel-oscuro: #1a2c23;
    --tarjeta: #1d3128;
    --tinta: #efe9da;
    --tinta-suave: #b7c0b2;
    --linea: #3a4f43;
    --ambar-texto: #e5ac4a;
    --abierto: #7fd09c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #13221b;
  --papel-oscuro: #1a2c23;
  --tarjeta: #1d3128;
  --tinta: #efe9da;
  --tinta-suave: #b7c0b2;
  --linea: #3a4f43;
  --ambar-texto: #e5ac4a;
  --abierto: #7fd09c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Grano de papel: una capa fija que no se mueve al hacer scroll */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .05; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--serif); }
h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.maquina { font-family: var(--maquina); }
.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 480px) { .contenedor { padding-inline: 16px; } }
section { padding-block: clamp(4rem, 9vw, 7rem); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
.adorno { margin: 0; text-align: center; color: var(--ambar-texto); font-size: 1.6rem; line-height: 1; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.5rem; border-radius: 999px; border: 2px solid var(--tinta); background: var(--tinta); color: var(--papel); font: 600 1rem/1 var(--texto); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s, color .2s, border-color .2s; }
.boton i { font-size: 1.2rem; }
.boton:active { transform: scale(.97); }
.boton-acento { background: var(--ambar); border-color: var(--ambar); color: var(--sobre-ambar); }
.boton-acento:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.boton-borde { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton-borde:hover { background: var(--tinta); color: var(--papel); }
.boton-pequeno { padding: .6rem 1.1rem; font-size: .95rem; }
.boton-ancho { width: 100%; }

/* ---------- Aviso y navegación ---------- */
.aviso { margin: 0; padding: .55rem 16px; text-align: center; font: 400 .85rem/1.4 var(--maquina); background: var(--tinta); color: var(--papel); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in oklab, var(--papel) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 3px double var(--linea); }
.nav-dentro { height: 68px; display: flex; align-items: center; gap: 2rem; }
.marca { font: 900 italic 1.45rem/1 var(--serif); text-decoration: none; margin: 0; white-space: nowrap; }
.nav-enlaces { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-enlaces a { text-decoration: none; font-family: var(--maquina); font-size: .95rem; color: var(--tinta-suave); }
.nav-enlaces a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 5px; }
@media (max-width: 820px) { .nav-enlaces { display: none; } .nav-dentro .boton { margin-left: auto; } }

/* ---------- Portada ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.hero-sub { margin: 0 0 1rem; color: var(--ambar-texto); font-size: 1rem; letter-spacing: .04em; }
.separador { color: var(--linea); margin-inline: .3rem; }
.hero-nombre { font-size: clamp(3.4rem, 9vw, 7rem); font-weight: 900; line-height: .95; letter-spacing: -0.025em; padding-bottom: .1em; }
.hero-nombre .palabra { display: inline-block; }
.hero-nombre .palabra:nth-child(2) { font-style: italic; color: var(--ambar-texto); }
.hero-lema { max-width: 36ch; font-size: 1.2rem; color: var(--tinta-suave); margin: 1.25rem 0 2rem; }
.hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.estado { display: inline-flex; align-items: center; gap: .55rem; margin: 1.75rem 0 0; font-size: .95rem; color: var(--tinta-suave); }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-suave); }
.estado.abierto { color: var(--abierto); }
.estado.abierto::before { background: var(--abierto); }
.hero-foto { position: relative; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100dvh - 160px); object-fit: cover; object-position: center; border-radius: 999px 999px 4px 4px; filter: sepia(.35) contrast(1.05); border: 6px solid var(--tarjeta); box-shadow: 0 0 0 1px var(--linea); background: var(--papel-oscuro); }
.sello { position: absolute; left: -38px; bottom: 34px; width: 150px; height: 150px; display: grid; place-items: center; background: var(--ambar); color: var(--sobre-ambar); border-radius: 50%; box-shadow: 0 0 0 6px var(--papel), 0 0 0 7px var(--linea); }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 26s linear infinite; }
.sello text { font: 700 15.5px var(--maquina); text-transform: uppercase; fill: var(--sobre-ambar); }
.sello-icono { font-size: 2.6rem; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-nombre .palabra { animation: tinta 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 140ms + 100ms); }
  .hero-texto > :not(h1) { animation: subir .9s cubic-bezier(.16,1,.3,1) both .45s; }
  .hero-foto img { animation: revelar-foto 1.4s ease both .2s; }
}
@media (prefers-reduced-motion: reduce) { .sello svg { animation: none; } }
@keyframes tinta { from { opacity: 0; filter: blur(6px); transform: translateY(14px); } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes revelar-foto { from { opacity: 0; filter: sepia(1) contrast(.8) brightness(1.2); } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-foto { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  .hero-foto img { aspect-ratio: 4 / 4.2; }
  .sello { width: 116px; height: 116px; left: -6px; bottom: 16px; }
  .sello text { font-size: 15px; }
  .sello-icono { font-size: 2rem; }
}

/* ---------- La casa ---------- */
.casa { padding-top: 0; }
.casa-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-block: 3px double var(--linea); }
.casa-dato { padding: 1.75rem 1.5rem; text-align: center; }
.casa-dato + .casa-dato { border-left: 1px solid var(--linea); }
.casa-adorno { margin: 0 0 .4rem; color: var(--ambar-texto); }
.casa-dato h3 { font-size: 1.45rem; font-weight: 700; font-style: italic; }
.casa-dato p { margin: .3rem 0 0; color: var(--tinta-suave); }
@media (max-width: 720px) { .casa-dato + .casa-dato { border-left: 0; border-top: 1px solid var(--linea); } }

/* ---------- Carta ---------- */
.carta { background: var(--papel-oscuro); }
.carta-tarjeta { max-width: 860px; margin-inline: auto; background: var(--tarjeta); padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 6vw, 4.5rem); border: 1px solid var(--linea); outline: 3px double var(--linea); outline-offset: -14px; text-align: center; }
.carta-tarjeta h2 { margin: .5rem 0 1.75rem; }
.pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.4rem; margin-bottom: 2.25rem; }
.pestana { background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--tinta-suave); font: 400 1rem/1.2 var(--maquina); text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.pestana:hover { color: var(--tinta); }
.pestana[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--ambar); }
.carta-lista { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 1.1rem; }
.carta-lista.cambia .plato { animation: subir .5s cubic-bezier(.16,1,.3,1) both; }
.carta-lista.cambia .plato:nth-child(2) { animation-delay: .04s; } .carta-lista.cambia .plato:nth-child(3) { animation-delay: .08s; }
.carta-lista.cambia .plato:nth-child(4) { animation-delay: .12s; } .carta-lista.cambia .plato:nth-child(n+5) { animation-delay: .16s; }
.plato { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 .6rem; }
.plato-nombre { font: 700 1.3rem/1.3 var(--serif); }
.plato-puntos { border-bottom: 2px dotted var(--linea); transform: translateY(-5px); }
.plato-precio { font-size: 1.05rem; }
.plato-nota { grid-column: 1 / -1; font-style: italic; color: var(--tinta-suave); font-size: .97rem; }
.pedido { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar-texto); border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-3deg); vertical-align: middle; }
.carta-nota { margin: 2.25rem 0 0; color: var(--tinta-suave); font-size: .95rem; }
@media (max-width: 560px) { .plato-nombre { font-size: 1.12rem; } .pedido { display: table; margin: .3rem 0 0; } }

/* ---------- Galería ---------- */
.galeria-fila { display: grid; grid-template-columns: 1.2fr .8fr 1fr .8fr; gap: 14px; align-items: end; }
.foto-vintage { margin: 0; background: var(--tarjeta); padding: 10px 10px 0; border: 1px solid var(--linea); box-shadow: 0 10px 24px -16px rgb(29 51 40 / .5); }
.foto-vintage:nth-child(odd) { transform: rotate(-1.2deg); }
.foto-vintage:nth-child(even) { transform: rotate(1deg) translateY(-14px); }
.foto-vintage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: sepia(.55) contrast(1.05) saturate(.8); transition: filter .7s ease; }
.foto-vintage:nth-child(1) img { aspect-ratio: 4 / 4.4; }
.foto-vintage:hover img, .foto-vintage:focus-within img { filter: none; }
.foto-vintage figcaption { padding: .6rem 0 .75rem; text-align: center; font-size: .9rem; color: var(--tinta-suave); }
@media (max-width: 820px) { .galeria-fila { grid-template-columns: 1fr 1fr; } .foto-vintage:nth-child(even) { transform: rotate(1deg); } }

/* ---------- Opiniones ---------- */
.opiniones h2 { margin-bottom: .5rem; }
.opiniones-sub { margin: 0 0 2.5rem; color: var(--ambar-texto); }
.recortes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.recorte { margin: 0; background: var(--tarjeta); padding: 1.6rem 1.5rem 1.3rem; border: 1px solid var(--linea); position: relative; clip-path: polygon(0 2%, 4% 0, 30% 1.5%, 55% 0, 80% 1.8%, 100% 0, 99% 50%, 100% 98%, 70% 100%, 45% 98.5%, 20% 100%, 0 98%); }
.recorte:nth-child(1) { transform: rotate(-1.5deg); }
.recorte:nth-child(2) { transform: rotate(1.2deg) translateY(1.5rem); }
.recorte:nth-child(3) { transform: rotate(-.6deg); }
.recorte blockquote { margin: 0 0 1rem; font: 700 1.2rem/1.45 var(--serif); }
.recorte:nth-child(1) blockquote { font-size: 1.45rem; }
.recorte figcaption { font-size: .9rem; color: var(--tinta-suave); }
.recorte figcaption::before { content: "Firmado: "; }
@media (max-width: 860px) { .recortes { grid-template-columns: 1fr; } .recorte:nth-child(2) { transform: rotate(1deg); } }

/* ---------- Con niños ---------- */
.familias { padding-top: 0; }
.familias-dentro { display: flex; gap: 1.5rem; align-items: center; padding: 1.75rem 2rem; border: 2px dashed var(--linea); border-radius: 4px; }
.familias-icono { font-size: 3rem; color: var(--ambar-texto); flex: none; }
.familias h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .3rem; font-style: italic; }
.familias p { margin: 0; color: var(--tinta-suave); max-width: 60ch; }
@media (max-width: 560px) { .familias-dentro { flex-direction: column; align-items: flex-start; padding: 1.5rem; } }

/* ---------- Reservar ---------- */
.reservar { background: var(--tinta); color: var(--papel); }
.reservar h2 { color: var(--papel); }
.reservar-dentro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.reservar-texto p { font-size: 1.15rem; max-width: 38ch; opacity: .85; }
.ticket { background: var(--tarjeta); color: var(--tinta); padding: 2rem 1.75rem; display: grid; gap: 1rem; position: relative;
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket-cabecera { margin: 0; padding-bottom: .9rem; border-bottom: 2px dashed var(--linea); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--ambar-texto); text-align: center; }
.ticket-numero { font: 900 clamp(2.2rem, 5vw, 3rem)/1.1 var(--serif); text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.ticket-cuando { margin: 0; text-align: center; color: var(--tinta-suave); font-size: .95rem; }
.ticket-ok { display: grid; gap: 1rem; text-align: center; }
.ticket-ok p { margin: 0; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-family: var(--maquina); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.opcional { text-transform: none; color: var(--tinta-suave); }
input, select { width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--linea); border-radius: 4px; background: var(--papel); color: var(--tinta); font: 400 1rem/1.4 var(--texto); }
input::placeholder { color: var(--tinta-suave); }
input:focus, select:focus { outline: none; border-color: var(--tinta); }
[aria-invalid="true"] { border-color: #b3261e; }
.error { margin: 0; color: #b3261e; font-size: .88rem; }
.error:empty { display: none; }
@media (max-width: 860px) { .reservar-dentro { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .campo-fila { grid-template-columns: 1fr; } }

/* ---------- Horario ---------- */
.visitanos { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); }
.horario { margin: 0 0 1.5rem; }
.horario-dia { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--linea); }
.horario-dia dd { margin: 0; }
.horario-dia.cerrado dd { color: var(--tinta-suave); }
.horario-dia.hoy { color: var(--ambar-texto); font-weight: 700; }
.horario-dia.hoy dt::after { content: " · hoy"; }
.direccion { display: flex; gap: .5rem; align-items: flex-start; color: var(--tinta-suave); margin: 0 0 .5rem; }
.direccion i { margin-top: .3rem; }
.enlace { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--ambar-texto); text-decoration: underline; text-underline-offset: 5px; }
.mapa { width: 100%; min-height: 400px; height: 100%; border: 6px solid var(--tarjeta); outline: 1px solid var(--linea); border-radius: 4px; background: var(--papel-oscuro); filter: sepia(.25); }
@media (max-width: 860px) { .visitanos { grid-template-columns: 1fr; } .mapa { min-height: 300px; } }

/* ---------- Pie ---------- */
.pie { border-top: 3px double var(--linea); padding-block: 2.5rem 3rem; text-align: center; color: var(--tinta-suave); }
.pie-dentro { display: grid; gap: .8rem; justify-items: center; }
.pie p { margin: 0; }
.pie .marca { color: var(--tinta); font-size: 1.8rem; }
.pie-contacto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .8rem; font-size: .92rem; }
.pie-contacto a { text-decoration: none; }
.pie-contacto a:hover { color: var(--tinta); text-decoration: underline; }
.punto { color: var(--ambar-texto); font-size: .7rem; }
.creditos { font-size: .85rem; }

/* ---------- Aparición al bajar ---------- */
.con-animacion .revelar { transition: opacity .9s ease, filter .9s ease, translate .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 120ms); }
.con-animacion .revelar:not(.visto) { opacity: 0; translate: 0 26px; filter: blur(3px); }