/* ============================================================
   IL TIZZONE — Collado Villalba
   Nada de esto viene de la web de Estética Sofía: cada web se piensa entera.
   Aquí todo sale de SU material: el negro y el amarillo son los de su carta
   impresa, la llama es la de su logotipo, y la tipografía es la equivalente
   libre de la que ellos ya usan.
   ============================================================ */

/* Didact Gothic es la alternativa libre más cercana a la geométrica de su
   carta (mismas mayúsculas circulares, misma «a» de un piso). Solo tiene un
   peso, así que para los sitios que piden negrita —rótulos en mayúsculas,
   precios, botones— entra Jost, que es de la misma familia geométrica y a
   tamaño pequeño no se distingue. */
@font-face {
  font-family: 'Didact';
  src: url('fonts/didact.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --harina: #faf5ea;   /* el fondo: color de masa cruda */
  --masa: #f2e9d8;     /* superficies elevadas */
  --tinta: #14100d;    /* el negro de su logotipo y de su carta */
  --humo: #786d5f;     /* texto secundario */
  --amarillo: #f7d117; /* el amarillo de su carta impresa */
  --llama: #e0561f;    /* el naranja del fuego de su logotipo */
  --linea: rgba(20, 16, 13, 0.16);
  --linea-fuerte: rgba(20, 16, 13, 0.5);

  --texto: 'Didact', 'Century Gothic', system-ui, sans-serif;
  --fuerte: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --ancho: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--harina);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--llama); outline-offset: 3px; }

.envoltura { width: min(100% - 2.6rem, var(--ancho)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--texto);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
}
h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); margin-bottom: 1.2rem; }
p { margin: 0 0 1.1rem; }
.guia { color: var(--humo); font-size: 1.05rem; max-width: 48ch; }

/* Rótulo de sección: mayúsculas espaciadas con un tizón delante */
.rotulo {
  font-family: var(--fuerte);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--llama);
  margin: 0 0 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.rotulo::before { content: ''; width: 22px; height: 3px; background: var(--llama); flex: none; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.7rem;
  border: 2px solid var(--tinta);
  border-radius: 2px;
  background: var(--tinta);
  color: var(--harina);
  font-family: var(--fuerte);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.boton:hover { background: var(--llama); border-color: var(--llama); transform: translateY(-2px); }
.boton--hueco { background: transparent; color: var(--tinta); }
.boton--hueco:hover { background: var(--tinta); color: var(--harina); border-color: var(--tinta); }

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.85rem clamp(1.1rem, 3vw, 2.4rem);
  background: color-mix(in srgb, var(--harina) 93%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.cabecera--fija { border-bottom-color: var(--linea); }
.marca { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.marca img { width: 52px; height: 52px; border-radius: 3px; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.15; }
.marca__txt b { font-family: var(--fuerte); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.03em; }
.marca__txt span { font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--humo); }
.menu { display: flex; gap: 1.9rem; }
.menu a {
  font-family: var(--fuerte);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.menu a:hover { border-bottom-color: var(--llama); }
@media (max-width: 1040px) { .menu { display: none; } }

/* ============================================================
   PORTADA — foto vertical a la derecha, texto a la izquierda.
   Su mejor foto es vertical (la cazuela con el horno ardiendo detrás);
   recortarla a apaisada se comería el horno, que es el argumento.
   ============================================================ */
.portada {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  align-items: stretch;
  min-height: calc(100svh - 84px);
}
.portada__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.4rem, 5vw, 5rem) clamp(1.4rem, 4vw, 4.6rem);
}
.portada h1 {
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: 0.98;
  margin-bottom: 1.4rem;
}
.portada h1 em { font-style: normal; color: var(--llama); }
.portada__bajada { color: var(--humo); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 40ch; margin-bottom: 2rem; }
.portada__acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.portada__foto { position: relative; overflow: hidden; background: var(--tinta); }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 940px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { height: 58svh; order: -1; }
}

/* ============================================================
   FRANJA DE DATOS — el aval, en negro como su carta
   ============================================================ */
.franja { background: var(--tinta); color: var(--harina); }
.franja__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(250, 245, 234, 0.16);
}
.dato {
  background: var(--tinta);
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dato b {
  font-family: var(--fuerte);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--amarillo);
}
.dato span { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.78; }
.dato .estrellas { color: var(--amarillo); letter-spacing: 2px; font-size: 0.9rem; }

/* ============================================================
   LA CARTA — el objeto principal. Maquetada como la suya:
   plato en mayúsculas, descripción fina debajo, precio a la derecha.
   ============================================================ */
.carta { padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.carta__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.carta__aviso { font-size: 0.85rem; color: var(--humo); max-width: 34ch; margin: 0; }

.grupo { margin-bottom: 3.4rem; }
.grupo__titulo {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 3px solid var(--tinta);
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
}
.grupo__titulo h3 {
  font-family: var(--fuerte);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.grupo__titulo span { font-size: 0.86rem; color: var(--humo); letter-spacing: 0.05em; }

.platos { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 3.4rem; }
.plato { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.plato__l1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--fuerte);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* La línea de puntos entre el plato y el precio es de carta impresa de toda
   la vida, y aquí ata la mirada de un lado al otro sin dibujar una tabla. */
.plato__nombre { display: flex; align-items: baseline; gap: 0.5rem; flex: 1; }
.plato__nombre::after {
  content: '';
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--linea-fuerte);
  transform: translateY(-4px);
}
.plato__precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plato__desc { font-size: 0.9rem; color: var(--humo); margin: 0.25rem 0 0; }
.nuevo {
  background: var(--amarillo);
  color: var(--tinta);
  font-family: var(--fuerte);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.16rem 0.42rem;
  border-radius: 2px;
  vertical-align: middle;
}
.consultar { color: var(--humo); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.86rem; }

/* Alérgenos, como en su carta */
.alergenos { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.alergeno { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--humo); }
.alergeno i {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--linea-fuerte);
  display: grid; place-items: center;
  font-family: var(--fuerte); font-size: 0.62rem; font-weight: 700;
  font-style: normal; color: var(--tinta); flex: none;
}

/* ============================================================
   EL HORNO — foto a sangre con el texto al lado
   ============================================================ */
.horno { background: var(--tinta); color: var(--harina); }
.horno__rejilla { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; }
.horno__foto { height: 100%; min-height: 420px; }
.horno__foto img { width: 100%; height: 100%; object-fit: cover; }
.horno__texto { padding: clamp(2.6rem, 6vw, 5.4rem); }
.horno__texto .guia { color: rgba(250, 245, 234, 0.72); }
.horno__texto .rotulo { color: var(--amarillo); }
.horno__texto .rotulo::before { background: var(--amarillo); }
@media (max-width: 940px) { .horno__rejilla { grid-template-columns: 1fr; } }

/* Los tres pasos de la masa, numerados */
.pasos { display: grid; gap: 1.4rem; margin-top: 2.2rem; padding: 0; list-style: none; counter-reset: p; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.pasos li::before {
  counter-increment: p;
  content: counter(p);
  font-family: var(--fuerte);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--amarillo);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.pasos b { display: block; font-family: var(--fuerte); font-weight: 600; }
.pasos span { color: rgba(250, 245, 234, 0.72); font-size: 0.94rem; }

/* ============================================================
   PEDIR — sobre amarillo, que es el color de su carta
   ============================================================ */
.pedir { background: var(--amarillo); padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.pedir h2 { max-width: 20ch; }
.pedir .guia { color: rgba(20, 16, 13, 0.72); }
.pedir .rotulo { color: var(--tinta); }
.pedir .rotulo::before { background: var(--tinta); }
.pedir__rejilla { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pedir__acciones { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
@media (max-width: 860px) { .pedir__rejilla { grid-template-columns: 1fr; } }

/* ============================================================
   VISITA
   ============================================================ */
.visita { padding-block: clamp(3.4rem, 7vw, 6rem); }
.visita__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 940px) { .visita__rejilla { grid-template-columns: 1fr; } }
.ficha { display: grid; gap: 1.3rem; margin: 2rem 0 0; }
.ficha > div { padding-bottom: 1.3rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-family: var(--fuerte); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--humo); margin-bottom: 0.25rem; }
.ficha dd { margin: 0; font-size: 1.16rem; }
.ficha dd a { text-decoration: none; border-bottom: 2px solid var(--linea); }
.ficha dd a:hover { border-color: var(--llama); color: var(--llama); }
.pendiente { background: var(--amarillo); color: var(--tinta); font-family: var(--fuerte); font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 2px; }

.mapa { position: relative; min-height: 360px; border: 2px solid var(--tinta); background: var(--masa); }
.mapa iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }
.mapa__aviso {
  width: 100%; min-height: 360px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 2rem; border: 0; background: var(--masa);
  font-family: var(--texto); font-size: 0.9rem; color: var(--humo);
  text-align: center; cursor: pointer; transition: background 0.25s ease;
}
.mapa__aviso:hover { background: var(--harina); }
.mapa__aviso b { font-family: var(--fuerte); font-size: 1.2rem; font-weight: 600; color: var(--tinta); }
.mapa__aviso svg { width: 30px; height: 30px; color: var(--llama); }

/* ============================================================
   PIE
   ============================================================ */
.pie { background: var(--tinta); color: var(--harina); padding-block: 2.8rem 2rem; }
.pie__rejilla { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.pie .marca__txt span { color: rgba(250, 245, 234, 0.6); }
.pie__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.pie__legal a { font-size: 0.8rem; color: rgba(250, 245, 234, 0.72); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.pie__legal a:hover { color: var(--amarillo); }
.pie__nota { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(250, 245, 234, 0.16); font-size: 0.78rem; color: rgba(250, 245, 234, 0.6); }

/* WhatsApp flotante */
.wasap {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--tinta); color: var(--amarillo);
  box-shadow: 0 10px 28px -8px rgba(20, 16, 13, 0.55);
  transition: transform 0.22s ease, background 0.22s ease;
}
.wasap:hover { transform: scale(1.06); background: var(--llama); color: #fff; }
.wasap svg { width: 28px; height: 28px; }

/* ============================================================
   MOVIMIENTO — sobrio. Los platos de la carta entran escalonados,
   como si los fueran poniendo en la mesa.
   ============================================================ */
.revela { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .boton:hover, .wasap:hover { transform: none; }
}

/* ============================================================
   SUELO EN MÓVIL
   Varios rótulos bajaban de 12 px al reducirse la pantalla. En mayúsculas muy
   espaciadas se leen pequeños, pero 12 px es el mínimo y no se negocia.
   ============================================================ */
@media (max-width: 860px) {
  .rotulo { font-size: 0.78rem; letter-spacing: 0.18em; }
  .nuevo { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
  .pendiente { font-size: 0.8rem; }
  .marca__txt span { font-size: 0.75rem; letter-spacing: 0.13em; }
  .dato span { font-size: 0.8rem; }
  .ficha dt { font-size: 0.76rem; }
  .plato__l1 { font-size: 1rem; }
  .alergeno { font-size: 0.85rem; }
  .alergeno i { font-size: 0.75rem; width: 26px; height: 26px; }
  .pie__legal a { font-size: 0.85rem; }
  .pie__nota { font-size: 0.82rem; }
  .carta__aviso { font-size: 0.9rem; }
  .boton { font-size: 0.8rem; }
  .menu a { font-size: 0.82rem; }
}

/* En móvil el nombre y el bajo-logotipo partían en cuatro líneas y la cabecera
   se comía media pantalla. El logotipo ya dice quién es; el bajo-logotipo
   sobra ahí. */
@media (max-width: 620px) {
  .cabecera { padding: 0.7rem 1rem; gap: 0.7rem; }
  .marca img { width: 42px; height: 42px; }
  .marca__txt b { font-size: 0.98rem; white-space: nowrap; }
  .cabecera .marca__txt span { display: none; }
  .cabecera .boton { min-height: 42px; padding: 0 0.95rem; font-size: 0.74rem; letter-spacing: 0.05em; }
}
@media (max-width: 400px) {
  /* Por debajo de 400 px el botón sobra: ya está el de WhatsApp flotando
     y otro dentro de la portada. */
  .cabecera .boton { display: none; }
}

/* Tabla de horario. Sale de la ficha de Google Maps que gestionan ellos. */
.horario { border-collapse: collapse; width: 100%; max-width: 26rem; font-size: 1rem; }
.horario th {
  text-align: left;
  font-weight: 400;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
}
.horario td {
  text-align: right;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}
.horario tr.cerrado th, .horario tr.cerrado td { color: var(--humo); }