/* ==================================================================
   SWEET VIOLET · «Abre el toldo»
   Colores medidos en sus fotos; formas sacadas de su local:
   el volante del toldo, las molduras de la fachada, la carta de papel,
   la pizarra de la puerta y el papel pintado en espiga.
   ================================================================== */

@font-face { font-family: "Bodoni Moda"; src: url("fuentes/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fuentes/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("fuentes/sorts-mill-goudy.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("fuentes/sorts-mill-goudy-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sacramento"; src: url("fuentes/sacramento.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Del local */
  --rosa-fachada: #C99198;
  --toldo: #A76367;
  --toldo-hondo: #8A4752;
  --vino-jarron: #6E2233;
  --papel-carta: #EEDEBC;
  --ribete: #F7EDE6;
  --pizarra: #2B2928;
  --granito: #3A322D;
  --pared: #E6CDB0;
  --pared-linea: #C49566;
  --madera: #D5B587;
  --oro: #B48D45;
  --tiza: #F3EFE7;

  /* Neutros con un toque del vino */
  --tinta: #301A1F;
  --tinta-suave: #654B50;
  --filete: rgba(48, 26, 31, .18);

  /* Letras */
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --texto: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif;
  --mano: "Sacramento", "Snell Roundhand", cursive;

  /* Escala 1.333 sobre 19 px */
  --t-0: clamp(1.125rem, 1.08rem + .2vw, 1.1875rem);
  --t-1: clamp(1.3125rem, 1.25rem + .35vw, 1.5rem);
  --t-2: clamp(1.625rem, 1.45rem + .8vw, 2.125rem);
  --t-3: clamp(2.125rem, 1.8rem + 1.6vw, 3.125rem);
  --t-4: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);

  /* Movimiento */
  --ease-salida: cubic-bezier(.23, 1, .32, 1);
  --ease-mov: cubic-bezier(.77, 0, .175, 1);

  /* Medidas */
  --alto-toldo: 62px;
  --volante-ancho: 72px;
  --volante-alto: 14px;
  --margen: clamp(1rem, 4.5vw, 4.5rem);
  --seccion: clamp(4.5rem, 9vw, 9rem);

  /* Forma del volante del toldo */
  --forma-volante: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h72v1C72 8 58 14 36 14S0 8 0 1z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-toldo) + 2rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ribete);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
cite { font-style: normal; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h2 { font-size: var(--t-3); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 1px; }

.saltar {
  position: fixed; left: 1rem; top: .75rem; z-index: 90;
  padding: .6rem 1rem; background: var(--ribete); color: var(--tinta);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.rotulo {
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.icono { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Volante del toldo ---------- */
.volante {
  position: absolute; left: 0; right: 0; top: 100%;
  height: var(--volante-alto);
  pointer-events: none;
}
.volante::before, .volante::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--forma-volante) repeat-x left top / var(--volante-ancho) var(--volante-alto);
          mask: var(--forma-volante) repeat-x left top / var(--volante-ancho) var(--volante-alto);
}
.volante::before { background: var(--ribete); }
.volante::after { background: var(--toldo-hondo); transform: translateY(-2.5px); }

.con-volante { position: relative; }
.con-volante::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; z-index: 2;
  height: var(--volante-alto);
  background: var(--volante-color);
  -webkit-mask: var(--forma-volante) repeat-x left top / var(--volante-ancho) var(--volante-alto);
          mask: var(--forma-volante) repeat-x left top / var(--volante-ancho) var(--volante-alto);
  pointer-events: none;
}

/* ---------- Marca ---------- */
.marca-sweet, .marca-violet { display: block; }
.marca-sweet { font-family: var(--mano); line-height: 1; }
.marca-violet { font-family: var(--display); font-weight: 700; letter-spacing: .08em; line-height: 1; }

.marca {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-self: start;
  min-height: 44px; justify-content: center;
  text-decoration: none; color: var(--ribete);
}
.marca .marca-sweet { font-size: 1.15rem; margin-bottom: -.28rem; -webkit-text-stroke: .25px currentColor; }
.marca .marca-violet { font-size: 1.28rem; }

/* ---------- Toldo fijo ---------- */
.toldo { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.toldo-tela {
  height: var(--alto-toldo);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0 var(--margen);
  color: var(--ribete);
  background: var(--toldo-hondo);
  border-top: 4px solid var(--ribete);
}
.toldo-nav { display: flex; align-items: center; }
.toldo-nav a {
  position: relative;
  padding: .75rem .1rem;
  margin: 0 .95rem;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.toldo-nav a + a::before {
  content: "·"; position: absolute; left: -1.05rem; top: 50%; transform: translateY(-52%);
  letter-spacing: 0; opacity: .8;
}
.toldo-nav a::after {
  content: ""; position: absolute; left: 0; right: .18em; bottom: .45rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-salida);
}
.toldo-nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .toldo-nav a:hover::after { transform: scaleX(1); }
}

.toldo-acciones { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.idioma {
  min-width: 44px; min-height: 44px;
  font-size: .8125rem; letter-spacing: .14em;
  transition: transform 160ms ease-out;
}
.idioma:active { transform: scale(.94); }
.toldo-cta {
  padding: .5rem .95rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--tinta); background: var(--ribete);
  outline: 1px solid var(--toldo-hondo); outline-offset: -4px;
  transition: transform 160ms ease-out, background-color 200ms ease;
}
.toldo-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .toldo-cta:hover { background: var(--papel-carta); } }

/* ---------- El toldo que se recoge (momento firma) ---------- */
.cortina {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: 100vh; height: 100svh;
  background: var(--toldo-hondo);
  color: var(--ribete);
  display: grid; place-items: center;
  pointer-events: none;
  will-change: transform;
  animation: recoger-toldo 1150ms var(--ease-mov) 650ms forwards;
}
.cortina-marca {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: cortina-texto 320ms ease-out 560ms forwards;
}
.cortina-marca .marca-sweet { font-size: clamp(3rem, 8vw, 5rem); margin-bottom: -.32em; -webkit-text-stroke: .5px currentColor; }
.cortina-marca .marca-violet { font-size: clamp(3.25rem, 11vw, 7rem); }
.cortina-lema { margin-top: 1.1rem; font-size: clamp(.8125rem, 1.6vw, 1.05rem); letter-spacing: .26em; text-transform: uppercase; }
@keyframes recoger-toldo { to { transform: translateY(calc(-100% + var(--alto-toldo))); visibility: hidden; } }
@keyframes cortina-texto { to { opacity: 0; transform: translateY(-10px); } }
.sin-cortina .cortina { display: none; }

/* ---------- Botones: paneles moldurados, como la fachada ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  padding: .75rem 1.6rem;
  font-size: .875rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; text-align: center;
  outline: 1px solid currentColor; outline-offset: -5px;
  transition: transform 160ms ease-out, background-color 200ms ease, color 200ms ease;
}
.boton:active { transform: scale(.97); }
.boton:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.boton-rosa { background: var(--rosa-fachada); color: var(--pizarra); }
.boton-vino { background: var(--vino-jarron); color: var(--ribete); }
.boton-claro { background: var(--ribete); color: var(--tinta); }
.boton-linea { color: var(--ribete); box-shadow: inset 0 0 0 1px rgba(247, 237, 230, .45); outline-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .boton-rosa:hover { background: #D5A3A9; }
  .boton-vino:hover { background: #7E2C3E; }
  .boton-claro:hover { background: var(--papel-carta); }
  .boton-linea:hover { background: rgba(247, 237, 230, .1); }
}

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem; }
.enlace-claro, .enlace-oscuro {
  display: inline-block; padding: .75rem 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em;
  transition: text-underline-offset 200ms ease;
}
.enlace-claro { color: var(--ribete); }
@media (hover: hover) and (pointer: fine) {
  .enlace-claro:hover, .enlace-oscuro:hover { text-underline-offset: .42em; }
}

/* ---------- 1. Portada ---------- */
.portada {
  position: relative;
  background: var(--granito);
  color: var(--ribete);
  padding-top: calc(var(--alto-toldo) + 4px);
}
.portada-foto { overflow: hidden; }
.portada-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.portada-texto { padding: 1.75rem var(--margen) 3.25rem; }
.portada .rotulo { color: var(--rosa-fachada); }
.portada h1 { font-size: var(--t-4); margin-bottom: 1.1rem; }
.entradilla { font-size: var(--t-1); line-height: 1.38; max-width: 30ch; margin-bottom: 1.6rem; }
.portada-datos {
  margin-top: 1.6rem;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: 1rem;
}
.portada-datos a { text-decoration: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.portada-datos a:hover { text-decoration: underline; text-underline-offset: .25em; }
.icono-estrella { color: var(--rosa-fachada); }

.estado { display: flex; align-items: center; gap: .55rem; min-height: 1.5em; }
.estado::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  background: currentColor; opacity: .55;
}
.estado[data-abierto="si"]::before { background: #9CD08F; opacity: 1; box-shadow: 0 0 0 3px rgba(156, 208, 143, .22); }
.estado:empty { display: none; }

@media (max-width: 959px) {
  .portada-foto { aspect-ratio: 1 / .88; max-height: 72vh; width: 100%; }
  .portada-foto img { object-position: 50% 38%; }
  .portada .rotulo { display: none; }
  .portada-texto { padding-top: 1.35rem; }
  /* La barra fija ya lleva «Cómo llegar»: aquí se ven antes el horario y las reseñas */
  .portada .boton-rosa { display: none; }
  .portada-datos { margin-top: .25rem; }
}

@media (min-width: 960px) {
  .portada {
    display: grid;
    grid-template-columns: minmax(340px, 31%) minmax(0, 1fr);
    grid-template-areas: "texto foto";
    align-items: stretch;
    min-height: min(100vh, 900px);
  }
  .portada-foto {
    grid-area: foto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%);
    max-height: calc(100vh - var(--alto-toldo) - 4px);
    min-height: 100%;
  }
  .portada-foto img { object-position: 42% 40%; }
  .portada-texto {
    grid-area: texto;
    position: relative; z-index: 2;
    align-self: center;
    padding: 2.5rem 0 3rem var(--margen);
    margin-right: -3.5vw;
  }
  .portada h1 { font-size: clamp(3.25rem, 5.1vw, 5.25rem); }
}

/* ---------- Entrada al hacer scroll ---------- */
.js .aparece { opacity: 0; transform: translateY(14px); }
.js .aparece.visto {
  opacity: 1; transform: none;
  transition: opacity 620ms ease-out, transform 620ms var(--ease-salida);
  transition-delay: var(--retardo, 0ms);
}

/* ---------- 2. Promesa ---------- */
.promesa {
  background: var(--rosa-fachada);
  padding: var(--seccion) var(--margen);
  display: grid; gap: 3rem;
}
.promesa h2 { margin-bottom: 1.5rem; max-width: 15ch; }
.promesa-texto p:not(.rotulo) { max-width: 54ch; margin-bottom: 1rem; }
.promesa-hechos { margin-top: 2rem; border-top: 1px solid var(--filete); max-width: 54ch; }
.promesa-hechos li { padding: .8rem 0; border-bottom: 1px solid var(--filete); }
.promesa-hechos a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
.promesa-fotos { position: relative; padding-bottom: 14%; }
.promesa-foto-grande img { width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover; }
.promesa-foto-chica {
  position: absolute; right: 0; bottom: 0; width: 44%;
  border: 8px solid var(--ribete);
}
.promesa-foto-chica img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 960px) {
  .promesa { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 5vw; align-items: center; }
  .promesa-fotos { padding-bottom: 0; margin-right: 6%; }
  .promesa-foto-chica { right: -14%; bottom: -8%; width: 42%; }
}

/* ---------- 3. Dentro ---------- */
.dentro { position: relative; background: var(--ribete); padding-bottom: var(--seccion); }
.dentro-foto img { width: 100%; height: clamp(300px, 62vw, 680px); object-fit: cover; }
.dentro-placa { padding: 2rem var(--margen) 0; max-width: 44rem; }
.dentro .rotulo { color: var(--toldo-hondo); }
.dentro blockquote p { font-family: var(--display); font-size: var(--t-3); line-height: 1.08; font-weight: 500; font-style: italic; text-wrap: balance; }
.dentro cite { display: block; margin-top: .8rem; font-size: .9375rem; color: var(--tinta-suave); }
.dentro-texto { margin-top: 1rem; max-width: 46ch; }
.dentro-rincon { margin: 2rem var(--margen) 0 auto; width: 72%; max-width: 30rem; border: 8px solid var(--ribete); }
.dentro-rincon img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
@media (min-width: 960px) {
  .dentro-placa {
    position: relative; z-index: 2;
    margin: -7rem 0 0 var(--margen);
    padding: 2.5rem 3rem 0;
    background: var(--ribete);
    width: 52%;
  }
  .dentro-rincon { position: absolute; right: var(--margen); bottom: var(--seccion); margin: 0; width: 30%; }
}

/* ---------- 4. Carta ---------- */
.carta {
  background: var(--vino-jarron);
  color: var(--papel-carta);
  padding: var(--seccion) var(--margen);
  display: grid; gap: 2.25rem;
}
.carta .rotulo { color: var(--papel-carta); }
.carta h2 { color: var(--ribete); margin-bottom: .75rem; font-size: var(--t-4); }
.seccion-entrada { font-size: var(--t-1); line-height: 1.35; font-style: italic; }
.carta-print {
  background: #fff; padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  transform: rotate(-1.4deg);
  max-width: 21rem;
  display: none;
}
.carta-print img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; }
.carta-print img.entra { animation: print-entra 240ms ease-out; }
@keyframes print-entra { from { opacity: .4; } to { opacity: 1; } }
.foto-credito { padding-top: .35rem; font-size: .8125rem; line-height: 1.3; color: var(--tinta-suave); }
.carta-aviso { font-style: italic; max-width: 36ch; margin-top: .85rem; color: var(--papel-carta); }

.cuaderno { position: relative; color: var(--tinta); padding-top: 22px; min-width: 0; }
.pinza { position: absolute; top: 0; left: 50%; width: 92px; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }

.cuaderno-indice {
  position: relative; z-index: 2;
  display: flex; gap: .2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2rem 1rem .25rem;
  background: var(--papel-carta);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .24);
}
.cuaderno-indice::-webkit-scrollbar { display: none; }
.cuaderno-tab {
  flex: none;
  min-height: 44px;
  padding: .5rem .7rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.cuaderno-tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--vino-jarron); }
@media (hover: hover) and (pointer: fine) { .cuaderno-tab:hover { color: var(--tinta); } }

.pagina {
  position: relative; z-index: 2;
  background: var(--papel-carta);
  padding: 1.75rem clamp(1.15rem, 4vw, 3rem) 2rem;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .22);
}
.pagina[hidden] { display: none; }
.js .pagina.entra { animation: hoja 200ms ease-out; }
@keyframes hoja { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.pagina-foto { margin: 0 0 1.5rem; }
.pagina-foto img { width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.pagina-titulo {
  font-family: var(--display); font-size: var(--t-2); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.15;
  margin: 0 0 .5rem;
}
.pagina-entrada { text-align: center; font-style: italic; margin-bottom: .25rem; }
.pagina-regla { display: block; width: 62%; height: 2px; margin: .85rem auto 1.5rem; background: rgba(48, 26, 31, .28); border-radius: 2px; }

.plato { padding: .95rem 0; border-bottom: 1px solid var(--filete); }
.plato:last-child { border-bottom: 0; }
.plato-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.plato-nombre { margin: 0; font-size: 1.0625rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; line-height: 1.3; }
.plato-precio { flex: none; font-size: 1.0625rem; white-space: nowrap; }
.plato-etiqueta { display: inline-block; margin-left: .55rem; font-size: .8125rem; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); white-space: nowrap; }
.plato-texto { font-style: italic; line-height: 1.4; margin-top: .25rem; }
.plato-frase { margin-top: .15rem; font-size: 1rem; color: var(--tinta-suave); }
.plato-nota { margin-top: .2rem; font-size: .9375rem; color: var(--tinta-suave); }
.plato-opciones { margin-top: .45rem; }
.plato-opciones li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .12rem 0; font-size: 1rem; }
.plato-opciones span:last-child { white-space: nowrap; }

.pagina-grupo + .pagina-grupo { margin-top: 1.5rem; }
.pagina-grupo h4 { margin: 0 0 .45rem; font-size: .875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.pagina-lista { columns: 2; column-gap: 1.5rem; }
.pagina-lista li { padding: .2rem 0; break-inside: avoid; font-style: italic; line-height: 1.32; }

.pagina-pie { margin-top: 1.1rem; font-size: 1rem; font-style: italic; text-align: center; color: var(--tinta-suave); text-wrap: balance; }
.pagina-pie a { color: var(--tinta); white-space: nowrap; }

/* Pestañas escalonadas, como las hojas de su cuadernillo */
.cuaderno-pestanas { position: relative; z-index: 1; display: flex; flex-direction: column; }
.pestana {
  display: block; width: 100%;
  padding: .85rem 1rem;
  font-family: var(--display); font-size: .9375rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-align: center;
  background: #E7D5AF;
  color: var(--tinta);
  box-shadow: 0 7px 12px rgba(0, 0, 0, .2);
  transition: background-color 180ms ease, transform 160ms ease-out;
}
.pestana:nth-child(2) { background: #E0CEA6; width: calc(100% - 6px); margin-left: 3px; }
.pestana:nth-child(3) { background: #D9C69D; width: calc(100% - 12px); margin-left: 6px; }
.pestana:nth-child(4) { background: #D3BF96; width: calc(100% - 18px); margin-left: 9px; }
.pestana:nth-child(5) { background: #CCB88E; width: calc(100% - 24px); margin-left: 12px; }
.pestana:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) { .pestana:hover { background: var(--ribete); } }

.sin-js { color: var(--ribete); }

@media (min-width: 960px) {
  .carta { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5vw; align-items: start; }
  .carta-lado { position: sticky; top: calc(var(--alto-toldo) + 2.5rem); }
  .carta-print { display: block; margin-top: 2rem; }
  .carta-aviso { margin-top: 2rem; }
  .pagina-foto { display: none; }
  .cuaderno-indice { justify-content: center; }
}
/* ---------- 5. Reseñas ---------- */
.resenas {
  background: var(--ribete);
  padding: var(--seccion) var(--margen);
  display: grid; gap: 3.5rem;
}
.resenas .rotulo { color: var(--toldo-hondo); }
.resenas h2 { margin-bottom: 1.75rem; }

.pizarra { position: relative; max-width: 25rem; margin: 0 auto 3.25rem; padding: 0 1.2rem; }
.pizarra-tablero {
  position: relative; z-index: 1;
  padding: 2.25rem 1.25rem 2rem;
  text-align: center;
  color: var(--tiza);
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 255, 255, .055), transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 75%, rgba(255, 255, 255, .04), transparent 70%),
    var(--pizarra);
  border: 13px solid var(--madera);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 16px 32px rgba(48, 26, 31, .22);
}
.pizarra-pata {
  position: absolute; bottom: -2.75rem; width: 13px; height: 5rem; background: #C7A676; z-index: 0;
}
.pizarra-pata-i { left: 2rem; transform: rotate(5deg); }
.pizarra-pata-d { right: 2rem; transform: rotate(-5deg); }
.tiza { font-family: var(--mano); line-height: 1.1; }
.tiza-titulo { font-size: 3.1rem; }
.tiza-chica { font-size: 2.05rem; }
.tiza-numero {
  font-size: clamp(6.5rem, 26vw, 9.5rem); line-height: .95;
  margin: .1rem 0 .2rem;
  -webkit-text-stroke: .6px currentColor;
}
.js .aparece .tiza-numero { clip-path: inset(0 100% 0 0); }
.js .aparece.visto .tiza-numero {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--ease-mov) 240ms;
}
.tiza-adorno { display: block; width: 62%; margin: .9rem auto .65rem; }
.tiza-nota { font-size: 2.6rem; }
.pizarra .estrellas { margin: .2rem auto 0; color: var(--tiza); }
.pizarra-fuente { text-align: center; font-size: .9375rem; color: var(--tinta-suave); }

.estrellas { position: relative; display: inline-flex; width: 6.1rem; height: 1.2rem; vertical-align: middle; }
.estrellas-capa { position: absolute; inset: 0; display: flex; gap: .05rem; overflow: hidden; }
.estrellas-capa svg { width: 1.2rem; height: 1.2rem; flex: none; }
.estrellas-fondo { opacity: .28; }

.cita-principal p {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: var(--t-3); line-height: 1.1; text-wrap: balance;
}
.cita-principal cite, .cita cite { display: block; margin-top: .55rem; font-size: .9375rem; color: var(--tinta-suave); }
.cita-trad { display: block; margin-top: .4rem; font-size: 1rem; color: var(--tinta-suave); font-style: normal; font-family: var(--texto); line-height: 1.35; }
.resenas-idiomas { margin: 2.25rem 0 .5rem; color: var(--toldo-hondo); font-style: italic; }

.citas { display: grid; gap: 0 2.5rem; }
.cita { padding: 1.15rem 0; border-top: 1px solid var(--filete); }
.cita p { font-size: var(--t-1); line-height: 1.26; font-style: italic; text-wrap: pretty; }

.resenas-cta { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--vino-jarron); }
.resenas-cta-texto { font-family: var(--display); font-size: var(--t-2); line-height: 1.15; font-weight: 500; margin-bottom: 1.1rem; text-wrap: balance; }
.resenas-extractos { margin-top: .85rem; font-size: .9375rem; color: var(--tinta-suave); }

@media (min-width: 720px) { .citas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .resenas { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 5vw; align-items: start; }
  .resenas-pizarra { position: sticky; top: calc(var(--alto-toldo) + 2.5rem); }
}

/* ---------- 6. Instagram: la cuenta y el botón, sobre su papel pintado ---------- */
.pared {
  background-color: var(--pared);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11' viewBox='0 0 22 11'%3E%3Cpath d='M0 11 11 0l11 11' fill='none' stroke='%23B58453' stroke-opacity='.3' stroke-width='1.1'/%3E%3C/svg%3E");
  padding: clamp(3.75rem, 7vw, 5.5rem) var(--margen);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
}
.pared-cuenta {
  display: inline-flex; align-items: center; gap: 1rem;
  min-width: 0;
  font-size: var(--t-2); line-height: 1.15;
  text-decoration: none;
}
.pared-cuenta span { overflow-wrap: anywhere; }
.pared-cuenta img {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--ribete), 0 0 0 4.5px var(--vino-jarron);
}
@media (hover: hover) and (pointer: fine) {
  .pared-cuenta:hover span { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
}
@media (max-width: 479px) {
  .pared-cuenta { flex-direction: column; text-align: center; gap: .75rem; font-size: var(--t-1); }
}

/* ---------- 7. Dónde ---------- */
.donde {
  background: var(--granito); color: var(--ribete);
  padding: var(--seccion) var(--margen);
  display: grid; gap: 3rem;
}
.donde .rotulo { color: var(--rosa-fachada); }
.donde h2 { margin-bottom: 1.25rem; font-size: var(--t-4); }
.donde-direccion { display: block; font-size: var(--t-2); line-height: 1.2; text-decoration: none; margin-bottom: .75rem; }
.donde-direccion:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.donde-zona { max-width: 42ch; margin-bottom: 1rem; }
.estado-grande { font-size: 1.0625rem; margin-bottom: 2rem; }
.donde h3 { font-size: .8125rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa-fachada); margin: 0 0 .5rem; }
.horario { max-width: 26rem; margin-bottom: .75rem; }
.horario div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(247, 237, 230, .2); }
.horario div[data-hoy] { color: #fff; border-bottom-color: var(--rosa-fachada); }
.donde-nota { font-size: .9375rem; font-style: italic; max-width: 40ch; margin-bottom: 1.75rem; color: #E6D6CF; }
.donde .acciones { margin-bottom: .75rem; }
.donde-encargos { font-size: .9375rem; color: #E6D6CF; margin-bottom: 1.5rem; }
.servicios { display: flex; flex-wrap: wrap; gap: .1rem .55rem; font-size: 1rem; color: #E6D6CF; max-width: 34rem; }
.servicios li:not(:last-child)::after { content: "·"; margin-left: .55rem; opacity: .7; }

.mapa { position: relative; overflow: hidden; background: var(--pizarra); margin-bottom: 1.5rem; aspect-ratio: 1.3; }
.mapa-foto, .mapa-foto img { width: 100%; height: 100%; }
.mapa-foto img { object-fit: cover; object-position: 50% 45%; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-abrir {
  position: absolute; left: .85rem; bottom: .85rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
}
.mapa-abrir small { padding: .1rem .4rem; background: rgba(43, 41, 40, .82); color: var(--ribete); font-size: .8125rem; }

.ficha {
  color: var(--tinta);
  background: var(--rosa-fachada);
  padding: 1.6rem 1.4rem;
  outline: 1px solid rgba(48, 26, 31, .55); outline-offset: -7px;
}
.ficha .rotulo { color: var(--tinta); margin-bottom: .4rem; }
.ficha-nombre { font-family: var(--display); font-size: var(--t-1); line-height: 1.15; font-weight: 500; margin-bottom: .55rem; text-wrap: balance; }
.ficha-nota { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; margin-bottom: .55rem; }
.ficha-nota strong { font-family: var(--display); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.ficha .estrellas { color: var(--vino-jarron); }
.ficha-texto { margin-bottom: 1.1rem; max-width: 44ch; }
.ficha-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.enlace-oscuro { color: var(--tinta); }

@media (min-width: 1040px) {
  .donde { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: start; }
  .ficha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.85rem 2rem; }
  .ficha-botones { flex-direction: column; align-items: stretch; text-align: center; }
  .ficha-texto { margin-bottom: 0; }
}

/* ---------- Pie ---------- */
.pie {
  background: var(--toldo-hondo); color: var(--ribete);
  padding: 4.5rem var(--margen) 2.5rem;
  display: grid; gap: 1.75rem;
}
.pie-marca { text-align: left; }
.pie-marca .marca-sweet { font-size: 2.4rem; margin-bottom: -.75rem; -webkit-text-stroke: .35px currentColor; }
.pie-marca .marca-violet { font-size: 2.6rem; }
.pie-lema { margin-top: .75rem; font-style: italic; }
.pie-datos { display: grid; gap: .25rem; }
.pie-datos a { text-underline-offset: .22em; text-decoration-thickness: 1px; display: inline-block; padding: .2rem 0; overflow-wrap: anywhere; }
.pie-fuente { font-size: .875rem; color: #F2E2DA; grid-column: 1 / -1; }
@media (min-width: 720px) { .pie { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Barra fija en móvil ---------- */
.barra-movil { display: none; }
@media (max-width: 959px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .barra-movil {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: grid; grid-template-columns: 1fr 1.5fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--pizarra); color: var(--ribete);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
  }
  .barra-movil a {
    min-height: 62px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    font-size: .8125rem; letter-spacing: .04em; text-decoration: none; line-height: 1.2;
    transition: transform 160ms ease-out;
  }
  .barra-movil a:active { transform: scale(.96); }
  .barra-principal { background: var(--rosa-fachada); color: var(--pizarra); }
  .toldo-nav, .toldo-cta { display: none; }
  .toldo-tela { grid-template-columns: 1fr auto; }
  :root { --alto-toldo: 56px; --volante-ancho: 52px; --volante-alto: 11px; }
}

/* Pantallas intermedias: nav más compacta */
@media (min-width: 960px) and (max-width: 1180px) {
  .toldo-nav a { margin: 0 .55rem; letter-spacing: .13em; font-size: .75rem; }
  .toldo-nav a + a::before { left: -.68rem; }
  .toldo-cta { padding: .5rem .7rem; letter-spacing: .1em; }
  .portada-texto { margin-right: 0; padding-right: 1.5rem; }
  .portada .acciones { gap: .35rem 1rem; }
  .portada .boton { padding-inline: 1.1rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
  .js .aparece { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .js .aparece .tiza-numero { clip-path: none; }
  .js .aparece.visto, .js .aparece.visto .tiza-numero { transition: none; }
  .pagina.entra, .carta-print img.entra { animation: none; }
}