/* ============================================================================
   HELADERÍA DAYMA · Paseo Marítimo de Almería
   ----------------------------------------------------------------------------
   La paleta no se ha elegido: se ha MUESTREADO del logo que mandó el cliente.
     · el crema del fondo del logo  → #F0EDDC  (el lienzo de toda la web)
     · el azul de las letras DAYMA  → #052359  (la tinta)
     · el rojo de la copa del logo  → #C01C1B  (el acento "fresa")
   Por eso el logo se posa sobre la página sin recuadro y sin recorte: el papel
   de la web ES su papel.

   La decisión que manda sobre las demás: esto se mira en el móvil, a pocos
   metros de la puerta, de noche o con el sol de Almería dando de frente. El
   color va siempre en las reglas y en los filetes, nunca debajo del texto.
   Ningún texto de esta web baja de 4,5:1 sobre su fondo.

   Índice
     1.  Tokens
     2.  Reset y base
     3.  Utilidades y tipografía
     4.  Botones
     5.  Cabecera
     6.  Hero
     7.  Huecos de imagen (marcadores)
     8.  La pared de sabores
     9.  Formatos
    10.  Copas
    11.  Terraza
    12.  Un clásico del paseo (banda de noche)
    13.  Reseñas
    14.  Visítanos
    15.  Pie
    16.  Páginas legales
    17.  Movimiento
    18.  Responsive
    19.  Movimiento reducido
   ============================================================================ */

/* =============================================================
   1. Tokens
   ============================================================= */

/* El acento se declara como propiedad tipada para que pueda TRANSICIONAR.
   Sin esto, una variable de color cambia a saltos. Es lo que hace posible
   el desplazamiento de color de la pared de sabores. */
@property --acento {
  syntax: "<color>";
  inherits: true;
  initial-value: #052359;
}

:root {
  /* Muestreados del logo */
  --papel:       #F0EDDC;   /* el crema exacto del fondo del logo */
  --papel-alto:  #F7F4E6;   /* tarjetas y superficies elevadas */
  --papel-hondo: #E5E0C9;   /* huecos de imagen y bandas suaves */
  --marino:      #052359;   /* el azul exacto de las letras DAYMA · 12,8:1 */
  --marino-noche:#031637;   /* la banda oscura */
  --fresa:       #C01C1B;   /* el rojo exacto de la copa del logo · 5,2:1 */

  /* Tinta */
  --tinta:       #0B1B33;   /* texto · 14,7:1 sobre papel */
  --tinta-suave: #4E5A70;   /* texto secundario · 6,0:1 */
  --agotado:     #6E6A5A;   /* sabor no disponible · 4,6:1 */

  /* Acentos de sabor, uno por sección y nunca dos a la vez */
  --fresa-tinta: #A81715;   /* la fresa cuando hace de texto pequeño · 6,4:1 */
  --pistacho:    #556328;   /* 5,6:1 */
  --turron:      #8A5A16;   /* 5,0:1 */
  /* Sobre la banda de noche */
  --pistacho-luz:#B9CC7E;   /* 8,6:1 sobre marino */
  --turron-luz:  #E0A84E;   /* 7,1:1 sobre marino */

  --linea:       rgba(11, 27, 51, 0.18);
  --linea-suave: rgba(11, 27, 51, 0.09);

  /* Tipografía */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Ritmo */
  --margen: clamp(1.15rem, 5vw, 3.25rem);
  --ancho: 76rem;
  --ancho-texto: 34rem;
  --cabecera-alto: 5.1rem;

  /* Curvas */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  color-scheme: light;
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
}

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.04; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }

::selection { background: var(--marino); color: var(--papel); }

:focus-visible {
  outline: 2px solid var(--fresa);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .65rem 1.1rem;
  background: var(--marino); color: var(--papel);
  font-weight: 600; border-radius: 4px;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilidades y tipografía
   ============================================================= */

/* ⚠️ EL AJUSTE MÁS IMPORTANTE DE ESTA HOJA.
   Bodoni Moda es una didona: contraste extremo entre trazos gruesos y
   finos. Y es VARIABLE en tamaño óptico (eje `opsz`, de 6 a 96). Los
   navegadores traen `font-optical-sizing: auto`, así que a 37px pedían
   el diseño óptico de 37 puntos — el pensado para carteles, con los
   finos más delgados que existen en la familia. En un móvil, y más a
   pleno sol, esos finos sencillamente desaparecían.
   Fijando `opsz` bajo se pide el diseño pensado para TEXTO, que tiene
   los mismos esqueletos pero con los finos mucho más sólidos. Se
   conserva el carácter y se recupera la lectura.
   Comprobado a cuatro combinaciones sobre la web ya publicada. */
.hero__titular,
.titular-grande { font-variation-settings: "opsz" 11; }
.titular-medio,
.pared__grupo-titulo,
.copa-retrato__nombre,
.copa-gusto h3,
.hero__anios b,
.legal-wrap h1,
.legal-wrap h2 {
  font-variation-settings: "opsz" 9;
}
/* El margen lateral nunca baja del área segura del dispositivo: en un móvil
   con muesca, girado, el sistema reserva una franja a un lado y sin esto el
   texto se metería debajo — que es exactamente lo que se ve como "descolocado
   hacia un lado y cortado". */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(var(--margen), env(safe-area-inset-left));
  padding-right: max(var(--margen), env(safe-area-inset-right));
}

/* El antetítulo calca las versales espaciadas del "HELADERÍA" del logo */
.antetitulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.1rem;
}

.titular-grande {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 7.5vw, 4.4rem);
  letter-spacing: -0.015em;
  color: var(--marino);
}

.titular-medio {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  color: var(--marino);
  letter-spacing: -0.01em;
}

.entrada {
  max-width: var(--ancho-texto);
  margin-top: 1.2rem;
  font-size: clamp(1.02rem, 2.4vw, 1.16rem);
  color: var(--tinta-suave);
}

/* Marcador visible de dato que falta. Se ve a propósito: es preferible un
   hueco evidente a un dato inventado en la web de un negocio real. */
.pendiente {
  display: inline-block;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--fresa-tinta);
  background: rgba(192, 28, 27, 0.07);
  border: 1px dashed rgba(192, 28, 27, 0.45);
  border-radius: 3px;
  padding: .5rem .7rem;
}

/* =============================================================
   4. Botones
   ============================================================= */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .7rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--marino);
  border: 1.5px solid var(--marino);
  border-radius: 2px;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.boton:hover { background: var(--marino); color: var(--papel); }

.boton--relleno {
  background: var(--marino);
  color: var(--papel);
}
.boton--relleno:hover { background: var(--fresa); border-color: var(--fresa); color: var(--papel); }

/* =============================================================
   5. Cabecera
   ============================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  height: var(--cabecera-alto);
  display: flex; align-items: center; gap: 1.5rem;
  padding-left: max(var(--margen), env(safe-area-inset-left));
  padding-right: max(var(--margen), env(safe-area-inset-right));
  background: rgba(240, 237, 220, 0.92);
  border-bottom: 1px solid var(--linea-suave);
  backdrop-filter: saturate(140%) blur(8px);
}
/* El logo es una palabra, no un icono: por debajo de 2,2rem deja de leerse
   "DAYMA" y se convierte en una mancha azul. Al quitarse el botón de mapa,
   la cabecera se quedó libre y la marca puede ocuparla. */
.cabecera__marca img { height: 2.9rem; width: auto; }
.cabecera__nav { display: none; margin-left: auto; gap: 1.6rem; }

/* =============================================================
   6. Hero
   ============================================================= */
.hero { padding-top: clamp(3rem, 9vw, 6rem); }

.hero__titular {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.35rem, 9vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--marino);
}
.hero__titular > span { display: block; }

.hero__entrada {
  max-width: 33rem;
  margin-top: 1.3rem;
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  color: var(--tinta-suave);
}

/* Los 35 años, en cifra y en la display.
   Va en el rojo del logo, no en marino: es el único otro color que la marca
   tiene, y así la cifra y la copa de la cabecera se responden. En cuerpo
   grande el rojo cumple de sobra el contraste (5,2:1 sobre el crema). */
.hero__anios {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: 2.1rem;
}
.hero__anios b {
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.1rem, 12vw, 4.6rem);
  line-height: .78;
  letter-spacing: -0.035em;
  color: var(--fresa);
  font-feature-settings: "lnum" 1;
}
.hero__anios span { display: block; }

.hero__accion {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  margin-top: 2rem;
}
.hero__accion-nota {
  font-size: .88rem; color: var(--tinta-suave); letter-spacing: .01em;
}

/* =============================================================
   7. Huecos de imagen — marcadores, no fotos de banco
   ============================================================= */
.hueco {
  position: relative;
  display: grid; place-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: 1.5rem;
  background: var(--papel-hondo);
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  overflow: hidden;
}
.hueco--16x9 { aspect-ratio: 16 / 9; }
.hueco--4x3 { aspect-ratio: 4 / 3; margin-top: 0; }
.hueco--4x5 { aspect-ratio: 4 / 5; margin-top: 0; border: 1px solid var(--linea-suave); }

/* El grano sutil que pide la dirección de arte. Va sobre el hueco ahora y
   seguirá funcionando cuando debajo haya una foto de verdad. */
.hueco::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events: none;
}

.hueco__marca {
  position: relative; z-index: 1;
  max-width: 30rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}

/* =============================================================
   8. La pared de sabores — la pieza central
   ============================================================= */
.pared {
  --acento: #052359;
  padding-top: clamp(4rem, 10vw, 7rem);
  /* La transición del acento ES el efecto protagonista de la web. */
  transition: --acento 700ms var(--ease-soft);
}

/* La caja que limita hasta dónde acompaña la barra pegajosa. Sin ella, la
   barra sigue pegada durante los formatos y tapa el rótulo «Tarrinas». */
.pared__zona { position: relative; }

/* --- La barra pegajosa: filtros, contador y progreso --- */
.pared__barra {
  position: sticky;
  top: var(--cabecera-alto);
  z-index: 30;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: .85rem;
  background: rgba(240, 237, 220, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
}

.pared__filtros {
  display: flex; gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .55rem;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
}
.pared__filtros::-webkit-scrollbar { display: none; }
.pared__filtros[hidden] { display: none; }

.pildora {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.4rem;
  padding: .35rem .85rem;
  font-size: .84rem; font-weight: 500;
  white-space: nowrap;
  color: var(--tinta-suave);
  border: 1.5px solid var(--linea);
  border-radius: 2px;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out),
              background-color 220ms var(--ease-out);
}
.pildora span {
  font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--tinta-suave); opacity: .75;
}
.pildora:hover { border-color: var(--acento); color: var(--marino); }
.pildora.is-activa {
  color: var(--papel);
  background: var(--acento);
  border-color: var(--acento);
}
.pildora.is-activa span { color: var(--papel); opacity: .8; }

.pared__contador {
  padding-block: .5rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.pared__progreso { height: 2px; background: var(--linea-suave); }
.pared__progreso > span {
  display: block; height: 100%; width: 0;
  background: var(--acento);
  transition: width 120ms linear;
}

/* --- Los grupos --- */
.pared__lienzo { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.pared__grupo + .pared__grupo { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pared__grupo[hidden] { display: none; }

.pared__grupo-titulo {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  color: var(--marino);
}
.pared__grupo-cuenta {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.pared__grupo-desc {
  margin-top: .35rem;
  font-size: .92rem;
  color: var(--tinta-suave);
  max-width: var(--ancho-texto);
}

/* --- La rejilla: el espectro de reglas de color --- */
.pared__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 44vw), 1fr));
  gap: .4rem 1.4rem;
  margin-top: 1.4rem;
}

.sabor {
  position: relative;
  padding: .8rem .1rem .9rem;
  transition: background-color 260ms var(--ease-out);
}
/* La regla de color va ARRIBA, nunca debajo del nombre. */
.sabor::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--sabor, var(--linea));
  transition: height 260ms var(--ease-out);
}
.sabor:hover::before,
.sabor:focus-within::before { height: 6px; }
.sabor:hover { background: color-mix(in srgb, var(--sabor) 12%, transparent); }

.sabor__nombre {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
  letter-spacing: -0.005em;
}

/* Un sabor agotado se ve. No se esconde: si alguien ha bajado al paseo por
   el pistacho, merece enterarse antes de cruzar. */
.sabor--agotado .sabor__nombre {
  color: var(--agotado);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(110, 106, 90, .55);
}
.sabor--agotado:hover { background: none; }
.sabor__estado {
  display: block;
  margin-top: .15rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--agotado);
}

.pared__vacio {
  padding: 2rem 0;
  color: var(--tinta-suave);
}

.pared__nota {
  max-width: var(--ancho-texto);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea-suave);
  font-size: .92rem;
  color: var(--tinta-suave);
}

/* =============================================================
   9. Formatos
   ============================================================= */
.formatos { margin-top: clamp(3rem, 7vw, 5rem); }
.formatos__rejilla {
  display: grid; gap: 2rem;
  margin-top: 1.8rem;
}
.formatos__grupo-titulo {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento);
  padding-bottom: .6rem;
  border-bottom: 1.5px solid var(--linea);
}
.formatos__items { margin-top: .3rem; }
.formatos__items li {
  display: flex; align-items: baseline; gap: .6rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--linea-suave);
}
.formatos__items b { font-weight: 500; }
.formatos__items i {
  flex: 1 1 auto;
  height: .55em;
  border-bottom: 1px dotted var(--linea);
}
.formatos__items em {
  font-style: normal; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marino);
}
.formatos__supl {
  margin-top: 1.5rem;
  font-size: .92rem;
  color: var(--tinta-suave);
}

/* =============================================================
   10. Copas — acento fresa, que es la copa del propio logo
   ============================================================= */
.copas {
  --acento: var(--fresa-tinta);
  padding-top: clamp(4rem, 10vw, 7rem);
}

.copa-gusto {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--papel-alto);
  border: 1.5px solid var(--linea);
  border-left: 4px solid var(--fresa);
}
.copa-gusto h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  color: var(--marino);
}
.copa-gusto p { margin-top: .5rem; color: var(--tinta-suave); }
.copa-gusto ul {
  display: flex; flex-wrap: wrap; gap: .6rem 2.2rem;
  margin-top: 1.3rem;
}
.copa-gusto li { display: flex; align-items: baseline; gap: .5rem; }
.copa-gusto li b { font-weight: 500; }
.copa-gusto li em {
  font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fresa-tinta);
}

.copas__retratos {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.copa-retrato figcaption {
  display: flex; align-items: baseline; gap: .7rem;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1.5px solid var(--linea);
}
.copa-retrato__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  color: var(--marino);
}
.copa-retrato__precio {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fresa-tinta);
}

.copas .titular-medio { margin-top: clamp(3rem, 7vw, 4.5rem); }

.copas__lista {
  display: grid; gap: 0 2.5rem;
  margin-top: 1.5rem;
}
.copas__lista li {
  display: flex; align-items: baseline; gap: .6rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--linea-suave);
}
.copas__lista b { font-weight: 500; }
.copas__lista i {
  flex: 1 1 auto; height: .55em;
  border-bottom: 1px dotted var(--linea);
}
.copas__lista em {
  font-style: normal; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marino);
}

/* =============================================================
   11. Terraza — acento turrón, el color del toldo al sol
   ============================================================= */
.terraza {
  --acento: var(--turron);
  padding-top: clamp(4rem, 10vw, 7rem);
}
.terraza__lista {
  display: grid; gap: 0;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.terraza__lista li {
  padding-block: 1.2rem;
  border-top: 1px solid var(--linea-suave);
}
.terraza__lista li:first-child { border-top: 1.5px solid var(--turron); }
.terraza__lista h3 {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--turron);
}
.terraza__lista p { margin-top: .35rem; color: var(--tinta-suave); }

/* =============================================================
   12. Un clásico del paseo — la única banda oscura de la web
   ============================================================= */
.clasico {
  --acento: var(--turron-luz);
  margin-top: clamp(4rem, 10vw, 7rem);
  padding-block: clamp(4rem, 10vw, 7rem);
  background: var(--marino-noche);
  color: var(--papel);
}
.clasico .titular-grande { color: var(--papel); }
.clasico__texto {
  max-width: var(--ancho-texto);
  margin-top: 1.6rem;
  display: grid; gap: 1.1rem;
  font-size: clamp(1.02rem, 2.4vw, 1.14rem);
  color: rgba(240, 237, 220, 0.86);
}

/* =============================================================
   13. Reseñas — acento pistacho
   ============================================================= */
.dicen {
  --acento: var(--pistacho);
  padding-top: clamp(4rem, 10vw, 7rem);
}
.dicen__lista {
  display: grid; gap: 1.2rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.resena {
  padding: 1.5rem;
  background: var(--papel-alto);
  border: 1px solid var(--linea-suave);
  border-top: 2px solid var(--pistacho);
}
.resena__firma { margin-top: 1rem; }

/* =============================================================
   14. Visítanos
   ============================================================= */
.visita { padding-top: clamp(4rem, 10vw, 7rem); }
/* Una sola columna: al quitarse el mapa, dos columnas dejaban medio bloque
   vacío en escritorio. El aire es deliberado, no un descuido. */
.visita__cuerpo {
  max-width: 34rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.visita__etiqueta {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento);
  margin-top: 1.7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--linea-suave);
}
.visita__etiqueta:first-child { margin-top: 0; }
.visita__dato {
  margin-top: .7rem;
  font-size: 1.08rem;
  line-height: 1.5;
}
.visita__dato a { border-bottom: 1.5px solid var(--fresa); }
.visita__dato a:hover { color: var(--fresa-tinta); }
.visita__horario { margin-top: .7rem; }
.visita__horario li {
  display: flex; align-items: baseline; gap: .8rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--linea-suave);
}
.visita__horario span { color: var(--tinta-suave); }
.visita__horario b {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  white-space: nowrap;
}
.visita__nota { margin-top: .9rem; }
.visita__botones {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: 2rem;
}

/* =============================================================
   15. Pie
   ============================================================= */
.pie {
  margin-top: clamp(4rem, 10vw, 7rem);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid var(--linea);
}
.pie__rejilla { display: grid; gap: 2rem; }
.pie__marca img { width: 13rem; }
.pie__nap { line-height: 1.7; color: var(--tinta-suave); }
.pie__nap strong { color: var(--tinta); font-weight: 600; }
.pie__nap a { border-bottom: 1.5px solid var(--fresa); color: var(--tinta); }
.pie__enlaces { display: grid; gap: .55rem; align-content: start; }
.pie__enlaces a {
  font-size: .92rem;
  color: var(--tinta-suave);
  transition: color 200ms var(--ease-out);
}
.pie__enlaces a:hover { color: var(--marino); }

/* =============================================================
   16. Páginas legales
   ============================================================= */
.page-legal { padding-bottom: 3rem; }
.masthead {
  padding: 1.5rem var(--margen);
  border-bottom: 1px solid var(--linea-suave);
}
.masthead a { font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.masthead a:hover { color: var(--marino); }

.legal-wrap {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4rem)
           max(var(--margen), env(safe-area-inset-right)) 3rem
           max(var(--margen), env(safe-area-inset-left));
}
.legal-wrap h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--marino);
}
.legal-wrap h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--marino);
  margin-top: 2.4rem;
}
.legal-wrap h3 {
  font-size: 1rem; font-weight: 600;
  color: var(--marino);
  margin-top: 1.6rem;
}
.legal-wrap p { margin-top: .9rem; color: var(--tinta-suave); }
.legal-wrap a { color: var(--marino); border-bottom: 1.5px solid var(--fresa); }
.legal-intro { font-size: 1.05rem; margin-top: 1.4rem !important; }
.legal-datos { margin-top: 1rem; }
.legal-datos li {
  padding-block: .5rem;
  border-bottom: 1px solid var(--linea-suave);
  color: var(--tinta-suave);
}
.legal-datos strong { color: var(--tinta); font-weight: 600; }
.legal-fecha {
  margin-top: 2.5rem !important;
  font-size: .86rem;
  color: var(--tinta-suave);
}
.legal-footer {
  max-width: 44rem;
  margin-inline: auto;
  padding: 1.5rem var(--margen);
  border-top: 1px solid var(--linea-suave);
  font-size: .88rem;
  color: var(--tinta-suave);
}
.legal-footer a { color: var(--tinta-suave); }
.legal-footer a:hover { color: var(--marino); }

/* =============================================================
   17. Movimiento
   -------------------------------------------------------------
   TODA la web se mueve con DOS gestos y ninguno más. Repetir dos
   gestos es un idioma; usar diez es ruido de plantilla.

     GESTO A — «el filete se traza».
       Las 101 reglas de color de la pared se dibujan de izquierda a
       derecha, en cascada dentro de cada gama. Es el motivo gráfico
       del sitio convertido en movimiento, y se reserva para la pared:
       es la pieza central y no debe competir con nada.

     GESTO B — «el titular sube tras una máscara».
       Los titulares no aparecen: se destapan de abajo arriba. Lo
       estrena la portada y lo repite cada sección, así que el sitio
       entero suena a la misma voz.

   El tercero, el desplazamiento de color de la pared, no es un
   gesto de entrada: es el efecto protagonista y va aparte.
   ============================================================= */

/* --- GESTO A · el filete se traza ------------------------------ */
/* Las reglas de color de la pared: en cascada dentro de cada gama.
   6ms por sabor — en la gama más larga, 38 sabores, son 228ms de
   diferencia entre el primero y el último. Se lee como una ola. */
.pared__grupo .sabor::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s var(--ease-out) calc(var(--i, 0) * 6ms),
              height 260ms var(--ease-out);
}
.pared__grupo.is-visto .sabor::before { transform: scaleX(1); }

/* --- RED DE SEGURIDAD DE PURO CSS ------------------------------
   Nada de lo que se anima aquí es decorativo: son titulares y reglas
   de la carta. Si main.js no llegara a cargarse —conexión mala en el
   paseo, un bloqueador, un despliegue a medias— se quedarían ocultos
   para siempre y la web aparecería medio vacía.
   Esta animación de duración cero y retardo de 2,5s los destapa sin
   JavaScript ninguno. Como main.js la desactiva en cuanto arranca
   (`js-ok`), el retardo solo cuenta en el caso de fallo: por eso es
   corto. Comprobado anulando main.js a propósito. */
@keyframes rescate-sube {
  to { opacity: 1; clip-path: inset(0 0 -30% 0); transform: none; }
}
@keyframes rescate-traza { to { transform: scaleX(1); } }
@keyframes rescate-reveal { to { opacity: 1; transform: none; } }

.sube   { animation: rescate-sube   0s linear 2.5s forwards; }
.reveal { animation: rescate-reveal 0s linear 2.5s forwards; }
.pared__grupo .sabor::before { animation: rescate-traza 0s linear 2.5s forwards; }

/* main.js pone `js-ok` SOLO cuando ha conseguido armar las entradas. A partir
   de ahí el rescate estorba —haría aparecer de golpe media página al segundo
   6— así que se desactiva y manda el movimiento de verdad. Si el script no
   llega, o llega y falla, esta clase nunca aparece y el rescate cumple. */
.js-ok .sube,
.js-ok .reveal,
.js-ok .pared__grupo .sabor::before { animation: none; }

/* --- GESTO B · el titular sube tras una máscara ---------------- */
.sube {
  opacity: 0;
  clip-path: inset(0 0 106% 0);
  transform: translateY(.1em);
  transition: opacity .85s var(--ease-out),
              clip-path .85s var(--ease-out),
              transform .85s var(--ease-out);
}
.sube.is-visto {
  opacity: 1;
  clip-path: inset(0 0 -30% 0);
  transform: none;
}
/* El antetítulo va 90ms por delante del titular: primero el rótulo
   pequeño, después el grande. Al revés se lee como un tropiezo. */
.antetitulo.sube { transition-delay: 0ms; }
.titular-grande.sube { transition-delay: 90ms; }
.entrada.sube { transition-delay: 170ms; }

/* El titular de la portada no espera a nada: ya está en pantalla. */
.reveal-linea > span {
  opacity: 0;
  clip-path: inset(0 0 108% 0);
  animation: sube-linea 1s var(--ease-out) forwards;
}
.reveal-linea > span:nth-child(2) { animation-delay: .09s; }
.reveal-linea > span:nth-child(3) { animation-delay: .18s; }

@keyframes sube-linea {
  from { opacity: 0; clip-path: inset(0 0 108% 0); transform: translateY(.14em); }
  to   { opacity: 1; clip-path: inset(0 0 -25% 0); transform: none; }
}

/* Las bandas de foto, decorativas: si esto no ocurre no falta ni
   una palabra. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- La cabecera solo se separa de la página cuando hay página
       detrás. Antes de bajar, la línea sobra. ------------------- */
.cabecera {
  border-bottom-color: transparent;
  transition: border-color 300ms var(--ease-out),
              box-shadow 300ms var(--ease-out);
}
.cabecera.is-flotando {
  border-bottom-color: var(--linea-suave);
  box-shadow: 0 1px 14px rgba(11, 27, 51, 0.05);
}

/* --- Micromovimiento de las filas de precio: la línea de puntos
       se cierra y el precio se acerca. Nada se mueve de sitio. --- */
.formatos__items li i,
.copas__lista li i {
  transition: border-bottom-color 260ms var(--ease-out);
}
.formatos__items li:hover i,
.copas__lista li:hover i { border-bottom-color: var(--acento); }
.formatos__items li,
.copas__lista li { transition: background-color 260ms var(--ease-out); }
.formatos__items li:hover,
.copas__lista li:hover {
  background: color-mix(in srgb, var(--acento) 7%, transparent);
}

/* --- Transición entre páginas (a las legales) ------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   18. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .formatos__rejilla { grid-template-columns: repeat(2, 1fr); }
  .copas__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .terraza__lista { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
  .terraza__lista li:nth-child(2) { border-top: 1.5px solid var(--turron); }
  .dicen__lista { grid-template-columns: repeat(3, 1fr); }
  .copas__retratos { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  :root { --cabecera-alto: 6rem; }
  .cabecera__marca img { height: 3.6rem; }
  .cabecera__nav { display: flex; margin-left: auto; }
  .pie__rejilla { grid-template-columns: auto 1fr auto; align-items: start; gap: 3rem; }
  .copas__lista { grid-template-columns: repeat(3, 1fr); }
  .formatos__rejilla { grid-template-columns: repeat(2, minmax(0, 22rem)); }
}

@media (min-width: 1280px) {
  .copas__retratos { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   19. Movimiento reducido
   Se apaga lo intrusivo, NO la web entera. El desplazamiento de color
   se mantiene, pero instantáneo: es información, no decoración.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* El desplazamiento de color SE MANTIENE: es información, no adorno.
     Solo deja de interpolarse. */
  .pared { transition: none; }
  .pared__progreso > span { transition: none; }

  /* Los dos gestos de entrada se apagan: el contenido ya está ahí. */
  .sube, .reveal, .reveal-linea > span,
  .pared__grupo .sabor::before {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Los estados de contacto se quedan: no son intrusivos y quitarlos
     dejaría una web muerta a quien lleva esta opción puesta. */
  .cabecera { transition: none; }
  @view-transition { navigation: none; }
}