/* ===========================================================================
   Ruta del Vino Somontano · un solo archivo de estilos.
   1. Colores por PAPEL, con el patrón de tres tonos (patrones/color.md).
      Suyos: #141414 y #BD4843 (su CSS). Nuestros, anotados: el resto.
   2. Escala tipográfica y de espacios: 7 tamaños, 5 espacios.
   3. Puntos de ruptura: 560 · 900 · 1100.
   =========================================================================== */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fuentes/playfair-display-latin.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --oscuro: #141414;        /* SUYO. Blanco encima: 18,42 */
  --acento: #BD4843;        /* SUYO. 5,03 sobre blanco (texto y botones con letra blanca) · 4,48 sobre crema: ahí NO para texto */
  --acento-texto: #9E3834;  /* nuestro: 6,84 sobre blanco · 6,09 sobre crema */
  --acento-claro: #E07A74;  /* nuestro: 6,32 sobre #141414 (enlaces sobre negro) */
  --fondo: #FFFFFF;
  --crema: #F6F1EA;         /* nuestro: fondo de sección alterna */
  --tinta: #141414;         /* 18,42 sobre blanco · 16,39 sobre crema */
  --tinta-2: #5C5C5C;       /* 6,69 sobre blanco · 5,95 sobre crema */
  --claro: #FFFFFF;
  --claro-2: #D6D1CA;       /* texto secundario sobre negro: 12,6 */
  --linea: #E2DBD1;

  --p0: .9375rem; --p1: 1.0625rem; --p2: 1.25rem; --p3: 1.5rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.25rem;
  --h1: clamp(2.1rem, 5.2vw, var(--p6));
  --h2: clamp(1.65rem, 3.6vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;
  --radio: 12px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titular: "Playfair Display", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.2rem); scroll-padding-bottom: 4.5rem; }
/* con el filtro fijo debajo de la barra, el foco no tiene que quedar tapado (TEC-05) */
html:has(.catalogo) { scroll-padding-top: calc(var(--barra) + 7.5rem); scroll-behavior: auto; }
html:has(.bodegas) { scroll-behavior: auto; } /* 6.500 px animados al llegar desde la agenda (QA-02 v4) */ /* sin animar 40.000 px de lista (QA-08) */
/* el filtro elegido se pone el primero de la fila: fuera de la pantalla no se sabía cuál era (QA-04) */
.catalogo:has(#con-ninos:target) .filtro__con-ninos, .catalogo:has(#con-perro:target) .filtro__con-perro,
.catalogo:has(#hasta-20:target) .filtro__hasta-20, .catalogo:has(#reserva-online:target) .filtro__reserva-online,
.catalogo:has(#en-bodega:target) .filtro__en-bodega { order: -1; }
/* móvil apaisado o zoom al 200 %: el filtro deja de ir fijo y la franja de foto se encoge (QA-05) */

body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
picture { display: block; }
picture img { display: block; width: 100%; }
figure { margin: 1.7em 0; }
[hidden] { display: none !important; }
a { color: var(--acento-texto); text-underline-offset: .18em; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--acento-texto); outline-offset: 2px; }
.oscuro :where(a, summary):focus-visible, .barra :where(a, summary):focus-visible, .pie a:focus-visible, .hero a:focus-visible, .hero-int :where(a, button, summary):focus-visible { outline-color: var(--acento-claro); }
:where(p, li, td) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
h1, h2, h3 { line-height: 1.18; text-wrap: balance; font-family: var(--titular); font-weight: 700; }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); }
/* opacity 0: ya era invisible (1 px recortado) y los lectores lo siguen leyendo (la opacidad no
   lo oculta a la accesibilidad); contraste.py medía el píxel de debajo y daba falsos 1,00 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }

.contenedor { width: min(100% - 2rem, 74rem); margin-inline: auto; }
/* columna de lectura estrecha pero alineada a la izquierda con el resto, no centrada (DIS-16) */
.contenedor.estrecho > * { max-width: 46rem; }
.contenedor.estrecho > table, .contenedor.estrecho > .exps { max-width: none; }
.seccion { padding: var(--e4) 0; }
.seccion > .contenedor > h2:first-child, .seccion > .contenedor > .antetitulo + h2 { margin-top: 0; }
.seccion--alt { background: var(--crema); }
.seccion--alt a:not(.boton) { color: var(--acento-texto); }
.antetitulo { margin: 0 0 var(--e1); color: var(--acento-texto); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--p0); }
.entradilla { font-size: var(--p2); color: var(--tinta-2); max-width: 42rem; }

/* --- barra fija (su negro) --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); color: var(--tinta); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--oscuro); color: var(--claro); border-bottom: 3px solid var(--acento); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.barra__logo { height: 46px; width: auto; }
.barra .solo-escritorio { display: none; }
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; color: var(--claro); text-decoration: none; border-radius: 6px; font-size: var(--p0); }
.nav-escritorio a:hover { color: var(--acento-claro); }
.nav-escritorio a[aria-current="page"] { color: var(--acento-claro); font-weight: 700; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid #5A5A5A; border-radius: 6px; cursor: pointer; list-style: none; color: var(--claro); }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 3px); display: grid; background: var(--oscuro); padding: var(--e1) 1rem var(--e2); box-shadow: 0 12px 24px rgb(0 0 0 / .35);
  /* con el móvil girado o zoom al 200 %, «Contacto» se quedaba fuera de la pantalla (QA-01) */
  max-height: calc(100dvh - var(--barra) - 3px - 56px); overflow-y: auto; overscroll-behavior: contain; }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--claro); text-decoration: none; border-bottom: 1px solid #2E2E2E; }
.nav-movil nav a[aria-current="page"] { color: var(--acento-claro); font-weight: 700; }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .4rem 1.2rem; border-radius: 999px; background: var(--acento); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--acento); text-align: center; line-height: 1.25; }
.boton:hover { background: var(--acento-texto); border-color: var(--acento-texto); }
.boton--sec { background: transparent; color: var(--acento-texto); border-color: currentColor; }
.boton--sec:hover { background: var(--crema); color: var(--acento-texto); }
.oscuro .boton--sec, .hero .boton--sec, .hero-int .boton--sec { color: var(--claro); border-color: var(--claro); }
.oscuro .boton--sec:hover, .hero .boton--sec:hover, .hero-int .boton--sec:hover { background: rgb(255 255 255 / .12); color: var(--claro); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); margin: var(--e3) 0 0; }

/* --- portada: su foto con velo y el texto encima --- */
.hero { position: relative; isolation: isolate; color: var(--claro); background: var(--oscuro); padding: var(--e5) 0 var(--e4); }
.hero__foto, .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero > .hero__foto img { object-position: 50% 80%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 20 20 / .78) 0%, rgb(20 20 20 / .62) 45%, rgb(20 20 20 / .86) 100%); }
.hero .antetitulo { color: var(--acento-claro); }
/* en el móvil el velo es más claro (DIS-12) y su rosa daba 4,46: uno más claro de la misma familia (6,5 sobre el velo) */
@media (max-width: 899px) { .hero .antetitulo { color: #F0A29D; } }
.hero h1 { max-width: 20ch; }
.hero .entradilla { color: var(--claro-2); }
.hero__micro { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: var(--e3) 0 0; padding: 0; list-style: none; color: var(--claro-2); font-size: var(--p0); }
.hero__micro li::before { content: "✓ "; color: var(--acento-claro); font-weight: 700; }
.hero a:not(.boton) { color: var(--claro); }
.hero-int { position: relative; isolation: isolate; background: var(--oscuro); color: var(--claro); padding: var(--e4) 0 var(--e3); }
.hero-int .antetitulo { color: var(--acento-claro); }
.hero-int .entradilla { color: var(--claro-2); }
.hero-int a:not(.boton) { color: var(--acento-claro); }
/* cabecera interior con SU foto de fondo (perros, familia, bus): un muro negro
   de texto parecía plantilla (vuelta 1, DIS-01). Velo más fuerte que en la portada. */
.hero-int--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 20 20 / .84) 0%, rgb(20 20 20 / .74) 55%, rgb(20 20 20 / .9) 100%); }
.hero-int--foto .entradilla { color: var(--claro); }
/* En el móvil, la foto va en una franja ARRIBA y el texto debajo sobre negro:
   con el texto encima no se veía ni el perro ni los niños (vuelta 2, DIS-13). */
@media (max-width: 899px) {
  .hero-int--foto { padding-top: 0; }
  .hero-int--foto > .hero__foto { position: relative; inset: auto; display: block; height: 13rem; margin-bottom: var(--e2); }
  .hero-int--foto > .hero__foto img { position: absolute; inset: 0; object-position: 50% 65%; }
  .hero-int--foto::before { bottom: auto; height: 13rem; background: linear-gradient(180deg, rgb(20 20 20 / 0) 55%, rgb(20 20 20 / 1) 100%); }
  /* portada: el velo más claro en la franja de en medio para que asome la pareja (DIS-12) */
  .hero::before { background: linear-gradient(180deg, rgb(20 20 20 / .82) 0%, rgb(20 20 20 / .7) 40%, rgb(20 20 20 / .5) 62%, rgb(20 20 20 / .9) 100%); }
}
.hero-int--corto { padding-bottom: var(--e2); }
.hero-int__pregunta { font-size: var(--p3); margin: var(--e3) 0 var(--e1); color: var(--claro); }
.hero-int--corto .entradilla { font-size: var(--p1); max-width: 46rem; }
/* titulares de periódico de 15-20 palabras: a tamaño de H1 llenaban la primera pantalla del móvil (DIS-31) */
.hero-int--noticia h1 { font-size: clamp(1.65rem, 4.2vw, var(--p5)); }
.seccion--corta { padding: var(--e3) 0; }
.seccion--catalogo { padding-top: var(--e3); }

/* --- triaje «con quién vienes» --- */
.puertas { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.puerta { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--fondo); box-shadow: 0 2px 14px rgb(20 20 20 / .1); }
.puerta picture img { aspect-ratio: 4 / 3; object-fit: cover; }
.puerta__txt { padding: var(--e2) var(--e2) var(--e3); }
.puerta h3 { margin: 0 0 .3rem; font-size: var(--p2); }
.puerta h3 a, .seccion--alt .puerta h3 a { color: var(--tinta); text-decoration: none; }
.puerta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.puerta:hover h3 a, .seccion--alt .puerta:hover h3 a, .puerta h3 a:focus-visible { color: var(--acento-texto); text-decoration: underline; }
.puerta p { margin: 0; color: var(--tinta-2); font-size: var(--p0); }
/* en el móvil, las puertas en fila: foto pequeña al lado (6 puertas en ~2 pantallas, no en 6) */
@media (max-width: 559px) {
  .puerta { flex-direction: row; align-items: stretch; }
  .puerta picture { flex: 0 0 34%; }
  .puerta picture img { height: 100%; aspect-ratio: auto; }
  .puerta__txt { padding: .7rem .9rem; }
  .puerta h3 { font-size: var(--p1); }
}

/* --- catálogo y tarjetas de experiencia --- */
.ancla { display: block; height: 0; }
/* Fijo también en el móvil, pero en UNA fila que se desliza de lado (~100 px):
   con el rótulo y las píldoras en varias filas ocupaba 230 de 812 px (lecciones:
   panel pegado en el móvil); sin fijar, cambiar de filtro obligaba a subir 50
   pantallas (vuelta 1, CRO-08 / QA-02). */
.filtro { position: sticky; top: calc(var(--barra) + 3px); z-index: 5; margin: 0 0 var(--e3); padding: .5rem 0 .4rem; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.filtro__botones { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px;
  /* degradado en el borde derecho: avisa de que hay más filtros deslizando (CRO-05) */
  mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* una sola fila también en tableta: con 6 filtros, en dos filas el panel fijo medía 145 px (vuelta 3, QA-01/02) */
@media (min-width: 1100px) { .filtro__botones { mask-image: none; } }
/* móvil apaisado o zoom al 200 %: el filtro deja de ir fijo y la franja de foto se encoge (QA-05 v2).
   Va DESPUÉS de la regla base de .filtro: antes, la base lo pisaba (QA-01 v3) */
@media (max-height: 500px) {
  .filtro { position: static; }
  html:has(.catalogo) { scroll-padding-top: calc(var(--barra) + 1.2rem); }
  .hero-int--foto > .hero__foto, .hero-int--foto::before { height: 6rem !important; }
}
.filtro a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--acento-texto); color: var(--acento-texto); text-decoration: none; font-weight: 700; background: var(--fondo); white-space: nowrap; }
.filtro a span { font-weight: 400; margin-left: .25rem; }
.filtro__estado { display: none; margin: .2rem 0 0; font-size: var(--p0); color: var(--tinta-2); }
.filtro__estado a { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--acento-texto); text-decoration: underline; font-weight: 700; }
/* lo elegido: sin nada en la dirección, «Todas» */
.catalogo:not(:has(.ancla:target)) .filtro__todas,
.catalogo:has(#todas:target) .filtro__todas,
.catalogo:has(#con-ninos:target) .filtro__con-ninos,
.catalogo:has(#con-perro:target) .filtro__con-perro,
.catalogo:has(#hasta-20:target) .filtro__hasta-20,
.catalogo:has(#reserva-online:target) .filtro__reserva-online,
.catalogo:has(#en-bodega:target) .filtro__en-bodega { background: var(--acento-texto); color: #fff; }
.catalogo:not(:has(.ancla:target)) .filtro__estado--todas,
.catalogo:has(#todas:target) .filtro__estado--todas,
.catalogo:has(#con-ninos:target) .filtro__estado--con-ninos,
.catalogo:has(#con-perro:target) .filtro__estado--con-perro,
.catalogo:has(#hasta-20:target) .filtro__estado--hasta-20,
.catalogo:has(#reserva-online:target) .filtro__estado--reserva-online,
.catalogo:has(#en-bodega:target) .filtro__estado--en-bodega { display: block; }
.catalogo:has(#con-ninos:target) .exp:not(.p-con-ninos),
.catalogo:has(#con-perro:target) .exp:not(.p-con-perro),
.catalogo:has(#hasta-20:target) .exp:not(.p-hasta-20),
.catalogo:has(#reserva-online:target) .exp:not(.p-reserva-online),
.catalogo:has(#en-bodega:target) .exp:not(.p-en-bodega) { display: none; }
/* sin :has() (navegadores viejos) el filtro no filtraría: fuera, y se ven las 68 (TEC-06) */
@supports not selector(:has(*)) { .filtro { display: none; } }

.exps { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
/* position: relative contiene los .sr (absolutos): en el carrusel del móvil se iban a x = 900 y ensanchaban la página */
.exp { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--fondo); box-shadow: 0 2px 14px rgb(20 20 20 / .1); }
.exp__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.exp__cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e2) var(--e2) var(--e3); }
.exp h3 { margin: 0 0 .25rem; font-size: var(--p2); }
.exp__quien { display: block; margin-top: .3rem; color: var(--tinta-2); font: 600 var(--p0)/1.4 var(--letra); }
.exps--destacadas { margin-top: var(--e3); }
/* en el móvil, las 4 de la portada en una fila que se desliza: una debajo de
   otra sumaban 3 pantallas y la portada pasaba de 8 (motor: portada-larga) */
@media (max-width: 899px) {
  /* la foto de «tres pasos» es para el escritorio (DIS-05); en el móvil solo alargaba la portada */
  .seccion--pasos .rej-2 > picture { display: none; }
  .exps--destacadas { align-items: start; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 20rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .exps--destacadas > .exp { scroll-snap-align: start; }
}
.exp__precio { margin: .4rem 0 0; color: var(--acento-texto); }
.exp__precio b { font-size: var(--p2); }
.exp__unidad { display: block; color: var(--tinta-2); font-size: var(--p0); line-height: 1.4; }
.estabs .estab__exps-rotulo { margin-top: .4rem; font-weight: 700; color: var(--tinta); }
.estab__exps, .bodega__exps { margin: 0; padding-left: 1.1rem; font-size: var(--p0); }
/* enlace en línea con su precio al lado (en 44 px partía «· desde 25 €» a otra línea: QA-03 v3) */
.estab__exps li, .bodega__exps li { padding: .45rem 0; line-height: 1.5; }
/* los botones al fondo de cada tarjeta: alineados en la fila (DIS-26) */
.bodega { display: flex; flex-direction: column; }
.bodega .acciones { margin-top: auto; padding-top: var(--e2); }
/* botones de cabecera apilados en el móvil, a todo el ancho como en las tarjetas (DIS-28) */
@media (max-width: 559px) { .hero .acciones .boton, .hero-int .acciones .boton { flex: 1 1 100%; } }
/* las bodegas con visita: lista en línea y un bloque por bodega */
.lista-bodegas { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: var(--e2) 0; padding: 0; list-style: none; font-size: var(--p0); }
.lista-bodegas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.bodegas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.bodega { padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); }
.bodega h2 { font-size: var(--p3); margin: 0 0 var(--e1); }
.bodega h2 span { color: var(--tinta-2); font: 400 var(--p1) var(--letra); }
/* el nombre y «Su ficha» llevan a su ficha (Juan, 9/10/2026): 44 px de alto para el dedo, como los botones */
.bodega h2 a, .bodega__ficha a { display: inline-flex; align-items: center; min-height: 44px; }
.bodega p { margin: 0 0 var(--e1); }
.nw { white-space: nowrap; }
/* al llegar desde Bodegas o Establecimientos a una ficha concreta, se marca (CRO-02) */
.exp:target { outline: 3px solid var(--acento); outline-offset: 3px; }
.exp__aviso { margin: 0 0 var(--e1); font-size: var(--p0); font-weight: 700; color: var(--acento-texto); }
.bodega__foto img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radio) - 4px); margin-bottom: var(--e2); }
.rej-2--arriba { align-items: start; }
.rej-2--arriba .preguntas { margin-top: var(--e1); }
/* bus: en el móvil la llamada ya va en la barra fija; dos a la vez, una tapada (DIS-24) */
@media (max-width: 767px) { .desde-tableta { display: none !important; } }
.hero-int__dato { margin: var(--e2) 0 0; color: var(--claro); }
.exp__para { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 var(--e1); padding: 0; list-style: none; }
.exp__para li { padding: .1rem .6rem; border-radius: 999px; background: var(--crema); color: var(--tinta); font-size: var(--p0); }
.exp__mas { margin: 0 0 var(--e1); border-top: 1px solid var(--linea); }
.exp__mas summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--acento-texto); font-weight: 700; }
.exp__mas p { font-size: var(--p0); color: var(--tinta-2); margin: 0 0 .6rem; }
.exp__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
/* el resumen empuja al fondo condiciones, «Qué incluye» y botones: alineados entre tarjetas (DIS-07) */
.exp__resumen { margin: .6rem 0 auto; padding-bottom: var(--e2); }
.exp__acciones .boton { flex: 1 1 11rem; font-size: var(--p0); }

/* --- establecimientos --- */
.pueblos ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pueblos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.pueblos a span { color: var(--tinta-2); margin-left: .25rem; }
.pueblo h2 span { color: var(--tinta-2); font-family: var(--letra); font-size: var(--p2); font-weight: 400; }
.estabs { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.estabs li { padding: var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.estabs h3 { margin: 0 0 .3rem; font-size: var(--p1); font-family: var(--letra); }
.estabs p { margin: 0; font-size: var(--p0); color: var(--tinta-2); }
/* teléfono y web, cada uno de 44 px y separados: pegados a 11 px, el dedo marcaba el que no era (QA-04) */
.estab__datos { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin-top: .3rem; }
.estab__datos a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* --- piezas de texto --- */
.rej-2 { display: grid; gap: var(--e4); align-items: center; }
.rej-2 picture img { border-radius: var(--radio); }
.cifras { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: var(--e3) 0 0; padding: 0; list-style: none; }
.cifras li { padding: var(--e2); border-left: 4px solid var(--acento); background: var(--fondo); }
.seccion--alt .cifras li { background: var(--fondo); }
.oscuro .cifras li { background: #1F1F1F; }
.cifras b { display: block; font-family: var(--titular); font-size: var(--p5); line-height: 1.1; color: var(--acento-texto); }
.oscuro .cifras b { color: var(--acento-claro); }
.cifras span { color: var(--tinta-2); font-size: var(--p0); }
.oscuro .cifras span { color: var(--claro-2); }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3rem; position: relative; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 700; }
.preguntas details { border-bottom: 1px solid var(--linea); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
/* «+» / «−»: con display:flex el navegador quita su triángulo y no parecía desplegable (DIS-14) */
.preguntas summary, .exp__mas summary { justify-content: space-between; gap: var(--e1); }
/* «/ ""»: el signo no entra en el nombre accesible (lo decía el lector: QA-07) */
.preguntas summary::after, .exp__mas summary::after { content: "+"; content: "+" / ""; flex: none; font: 700 var(--p3)/1 var(--letra); color: var(--acento-texto); }
.preguntas details[open] > summary::after, .exp__mas[open] > summary::after { content: "−"; content: "−" / ""; }
.pregunta-abierta { font-size: var(--p2); }
.nota { font-size: var(--p0); color: var(--tinta-2); }
.oscuro .nota { color: var(--claro-2); }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-2); }
.oscuro { background: var(--oscuro); color: var(--claro); }
.oscuro a:not(.boton) { color: var(--acento-claro); }
.oscuro .antetitulo { color: var(--acento-claro); }
.oscuro .entradilla { color: var(--claro-2); }

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 60px); background: var(--oscuro); color: var(--claro-2); font-size: var(--p0); border-top: 3px solid var(--acento); }
.pie a { color: var(--claro); }
.pie__logo { width: 138px; height: auto; margin-bottom: var(--e1); }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie p { margin: 0 0 .5rem; }
.pie p a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__rotulo { margin-bottom: 0 !important; }
/* redes en lista, no con «·»: el punto se quedaba colgando (DIS-06) */
.pie__redes { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: 0; padding: 0; list-style: none; }
.pie__redes a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__redes--claro a { color: var(--acento-texto); }
.contactos { padding-left: 1.2rem; }
.contactos li { margin-bottom: .4rem; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #3A3A3A; color: var(--claro-2); }

/* --- barra fija del móvil: elegir experiencia y llamar --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--oscuro); box-shadow: 0 -2px 10px rgb(0 0 0 / .25); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; color: #fff; font-weight: 700; text-decoration: none; }
.barra-movil a:last-child { background: var(--acento); }
@media (max-width: 359px) { .barra-movil a { font-size: var(--p0); } }
.cookies-abierto .barra-movil { display: none; }

@media (min-width: 900px) {
  .seccion { padding: var(--e5) 0; }
  .hero { padding: 6rem 0 var(--e5); min-height: 34rem; display: flex; align-items: center; }
  .hero > .contenedor { width: min(100% - 2rem, 74rem); }
  .rej-2 { grid-template-columns: 1fr 1fr; }
  /* 6 puertas en 3 × 2: con auto-fit salían 5 + 1 a 1280 px (DIS-02) */
  .puertas { grid-template-columns: repeat(3, 1fr); }
  .exps--destacadas { grid-template-columns: repeat(2, 1fr); }
  /* velo lateral: el texto sobre oscuro a la izquierda y la pareja con luz a la derecha (DIS-03) */
  .hero::before { background: linear-gradient(90deg, rgb(20 20 20 / .9) 0%, rgb(20 20 20 / .8) 45%, rgb(20 20 20 / .3) 80%, rgb(20 20 20 / .2) 100%); }
  .hero > .hero__foto img { object-position: 50% 50%; }
  .hero-int--foto { padding: var(--e5) 0 var(--e4); }
}
@media (min-width: 1100px) {
  .nav-escritorio { display: flex; }
  .nav-movil, .barra-movil { display: none; }
  .pie { padding-bottom: var(--e4); }
  html { scroll-padding-bottom: 0; }
  .exps--destacadas { grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
  .barra__logo { height: 52px; }
  .barra .solo-escritorio { display: inline-flex; min-height: 44px; font-size: var(--p0); padding: .3rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto, .filtro { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
}

/* ===========================================================================
   Encargo «la mejor de España» (30/9/2026): del catálogo a un plan.
   Buscador, planificador, mensajes ya escritos, fichas de socio, agenda, mapa.
   =========================================================================== */
/* --- la pregunta del fin de semana, dentro de la portada --- */
.hero__hoy { margin-top: var(--e3); padding: var(--e2); max-width: 40rem; border-left: 4px solid var(--acento); background: rgb(20 20 20 / .72); border-radius: 0 var(--radio) var(--radio) 0; }
.hero .hoy__pregunta { margin: 0 0 var(--e1); font-size: var(--p2); color: var(--claro); }
.hoy__t { margin: 0 0 .3rem; font-size: var(--p0); color: var(--claro-2); font-weight: 700; }
.hoy__lista { margin: 0; padding: 0; list-style: none; }
.hoy__lista li { border-top: 1px solid rgb(255 255 255 / .14); }
.hoy__lista a { display: block; padding: .55rem 0; min-height: 44px; color: var(--claro); text-decoration: none; font-size: var(--p0); line-height: 1.45; }
.hoy__lista a:hover { text-decoration: underline; }
.hoy__lista b { color: var(--acento-claro); }
.hoy__mas { margin: .4rem 0 0; font-size: var(--p0); }
.hoy__mas a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- chips (casillas con aspecto de botón) --- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border: 2px solid var(--acento-texto); border-radius: 999px; color: var(--acento-texto); font-weight: 700; background: var(--fondo); cursor: pointer; }
.chip input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--acento-texto); }
.chip:has(input:checked) { background: var(--acento-texto); color: #fff; }
.chip:has(input:checked) input { accent-color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--acento-texto); outline-offset: 2px; }

/* --- buscador de experiencias y planificador --- */
.buscador, .plan { margin: 0 0 var(--e3); padding: var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--crema); }
.buscador__f { margin: 0 0 var(--e2); padding: 0; border: 0; min-width: 0; }
.buscador__f legend { margin-bottom: .5rem; font-weight: 700; }
.buscador__fila { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0 0 var(--e2); }
.plan__corto { display: grid; gap: .3rem; max-width: 16rem; margin-top: var(--e2); font-weight: 700; font-size: var(--p0); }
.mensaje .chips { margin: var(--e2) 0 0; }
.buscador__fila label, .mensaje__campos label { display: grid; gap: .3rem; font-weight: 700; font-size: var(--p0); }
.buscador select, .plan input[type=date], .plan input[type=number], .plan input[type=text], .mensaje input:not([type=checkbox]):not([type=radio]), .mensaje select {
  min-height: 48px; padding: .4rem .7rem; border: 1px solid #767676; border-radius: 8px; font: inherit; color: var(--tinta); background: var(--fondo); width: 100%; }
.buscador__estado { margin: var(--e2) 0 0; font-weight: 700; }
.buscador__nota { margin: .4rem 0 0; font-size: var(--p0); color: var(--tinta-2); }
.buscador__vacio { padding: var(--e2); border-left: 4px solid var(--acento); background: var(--crema); }
.indice-tipos ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--e3); padding: 0; list-style: none; }
.indice-tipos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.grupo-exp { margin-bottom: var(--e4); }
.grupo-exp > h2 span { color: var(--tinta-2); font: 400 var(--p2) var(--letra); }
.exp__enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.exp__enlace:hover, .exp__enlace:focus-visible { color: var(--acento-texto); text-decoration: underline; }

/* --- mensaje ya escrito («Vengo de la Ruta») --- */
.mensaje { padding: var(--e2) var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); box-shadow: 0 2px 14px rgb(20 20 20 / .08); }
.mensaje__t { margin: 0 0 .4rem; font-size: var(--p3); }
.mensaje__nota { margin: 0 0 var(--e2); font-size: var(--p0); color: var(--tinta-2); }
.mensaje__campos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.mensaje__texto { margin: var(--e2) 0 0; padding: var(--e2); border-left: 4px solid var(--acento); background: var(--crema); font-size: var(--p0); line-height: 1.55; overflow-wrap: anywhere; }
.mensaje .acciones .boton { flex: 1 1 12rem; }

/* --- cercanos, paradas, lista para reservar --- */
.cercanos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: var(--e2) 0; padding: 0; list-style: none; }
.cercanos li { display: grid; gap: .1rem; padding: .7rem var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.cercanos a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acento-texto); }
.cercanos span { font-size: var(--p0); color: var(--tinta-2); }
.cercanos span a { display: inline; min-height: 0; }
.paradas, .lista-reservar { counter-reset: parada; margin: var(--e2) 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.parada, .lista-reservar > li { position: relative; padding: var(--e2) var(--e2) var(--e2) 3.2rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.parada::before, .lista-reservar > li::before { counter-increment: parada; content: counter(parada); position: absolute; left: .9rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--acento-texto); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: var(--p0); }
.parada h3, .parada h4, .lista-reservar h3 { margin: 0 0 .3rem; font-size: var(--p2); }
.parada h3 span, .parada h4 span { color: var(--tinta-2); font: 400 var(--p0) var(--letra); }
.parada p { margin: .2rem 0; }
.parada__cuando { font-weight: 700; color: var(--acento-texto); font-size: var(--p0); text-transform: uppercase; letter-spacing: .04em; }
.parada__trayecto { text-transform: none; letter-spacing: 0; color: var(--tinta-2); font-weight: 400; }
.parada .acciones { margin-top: var(--e1); }
.plan-resultado { margin-top: var(--e3); }
.plan-resultado h2:focus { outline: none; }

/* --- agenda --- */
.agenda { margin: var(--e2) 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.agenda > li { padding: var(--e2); border-left: 4px solid var(--acento); background: var(--fondo); border-radius: 0 var(--radio) var(--radio) 0; }
.agenda h3 { margin: .2rem 0 .3rem; }
.agenda__fecha { margin: 0; font-weight: 700; color: var(--acento-texto); }
.agenda__acc { font-size: var(--p0); }
.agenda__acc a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- cajas, tabla, mapa --- */
.caja, .caja-nota { margin: var(--e3) 0; padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.caja-nota { border-style: dashed; }
.caja h3, .caja-nota h3 { margin-top: 0; }
.caja h3 a { display: inline-flex; align-items: center; min-height: 44px; }
/* el pueblo en la guía de comer y dormir: 27 px de alto (comprobar --final 2/10, táctil) */
.por-pueblo a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--p0); margin: var(--e2) 0; }
.tabla caption { text-align: left; font-weight: 700; margin-bottom: .5rem; }
.tabla th, .tabla td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { color: var(--tinta-2); }
.tabla a { display: inline-flex; align-items: center; min-height: 44px; }
.mapa { margin: var(--e3) 0 0; }
.mapa svg { width: 100%; height: auto; background: #EFE9DF; border-radius: var(--radio); }
.mapa a:focus-visible circle { stroke: var(--oscuro); stroke-width: 3; }
.mapa__pueblo { font: 700 13px var(--letra); fill: #3A3A3A; }
.mapa figcaption { font-size: var(--p0); color: var(--tinta-2); margin-top: .5rem; }
.estab__donde { font-weight: 700; color: var(--tinta) !important; }
.estabs h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.puertas--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.exp-sola .exp { box-shadow: none; border: 1px solid var(--linea); }
.pestillo-abierto { position: relative; margin: var(--e2) 0; padding: var(--e2); outline: 3px dashed #B26B00; background: #FFF6E5; }
.pestillo-abierto::before { content: "Pestillo «" attr(data-pestillo) "»: no sale en la web hasta que la Ruta lo confirme"; display: block; margin-bottom: .5rem; font: 700 var(--p0) var(--letra); color: #7A4A00; }
@media (min-width: 900px) {
  .puertas--3 { grid-template-columns: repeat(3, 1fr); }
  .hero__hoy { margin-top: var(--e4); }
}
@media print {
  .buscador, .plan, .mensaje .acciones { display: none !important; }
  /* Mi viaje en papel: la lista, sin «Quitar», «Vaciar» ni «Mandarlo por WhatsApp» (revisión entera, QA-17) */
  #mi-viaje .acciones, #mi-viaje [data-mv-vaciar], #mi-viaje [data-mv-12], #mi-viaje .mv-aviso { display: none !important; }
}
.nota--de .boton { display: flex; width: fit-content; margin-top: var(--e1); }
.etiqueta-finde { display: inline-block; margin: 0 0 .3rem; padding: .1rem .6rem; border-radius: 999px; background: var(--acento); color: #fff; font-size: var(--p0); font-weight: 700; }
.buscador__plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); min-height: 48px; cursor: pointer; font-weight: 700; color: var(--acento-texto); list-style: none; }
.buscador__plegable > summary::-webkit-details-marker { display: none; }
.buscador__plegable > summary::after { content: "+"; content: "+" / ""; font: 700 var(--p3)/1 var(--letra); }
.buscador__plegable[open] > summary::after { content: "−"; content: "−" / ""; }
.buscador__plegable[open] > summary { margin-bottom: var(--e2); }
.buscador .buscador__estado { margin: 0 0 .3rem; }
@media (max-width: 559px) {
  .hero__micro { display: none; }
  .hero .entradilla { font-size: var(--p1); }
  .hero__hoy { margin-top: var(--e2); padding: .8rem var(--e2); }
}
/* revisión final (QA-04, QA-09) */
.campo-error { display: block; margin-top: .3rem; font-weight: 700; font-size: var(--p0); color: var(--acento-texto); }
.campo-error::before { content: "⚠ "; content: "⚠ " / ""; }
[aria-invalid="true"] { border-color: var(--acento-texto) !important; border-width: 2px !important; }
.tabla-scroll { overflow-x: auto; }
main p, main li, main dd { overflow-wrap: anywhere; }
.buscador__vacio .boton { min-height: 44px; padding: .2rem .9rem; }

/* ===========================================================================
   Encargo del 1/10/2026: rutas del vino de referencia.
   Noticias, agenda completa, No te dejes el vino, descargas y galería.
   =========================================================================== */
/* --- noticias: tarjetas, aviso de fecha, paginación --- */
.notas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin: var(--e3) 0; }
.nota-t { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--fondo); box-shadow: 0 2px 14px rgb(20 20 20 / .1); }
.nota-t__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.nota-t__cuerpo { padding: var(--e2) var(--e2) var(--e3); }
.nota-t__fecha { margin: 0 0 .3rem; font-size: var(--p0); color: var(--tinta-2); font-weight: 600; }
.nota-t h3, .nota-t h2 { margin: 0 0 .4rem; font-size: var(--p2); }
.nota-t h3 a, .nota-t h2 a { display: block; min-height: 44px; color: var(--tinta); text-decoration: none; }
.descarga h3 a { display: block; min-height: 44px; }
.nota-t h3 a::after, .nota-t h2 a::after { content: ""; position: absolute; inset: 0; }
.nota-t:hover h3 a, .nota-t h3 a:focus-visible { color: var(--acento-texto); text-decoration: underline; }
.nota-t p { margin: 0; font-size: var(--p0); color: var(--tinta-2); }
.aviso-fecha { margin: 0 0 var(--e3); padding: .8rem var(--e2); border-left: 4px solid var(--acento); background: var(--crema); font-size: var(--p0); }
.nota h2 { font-size: var(--p4); }
.nota h3 { font-size: var(--p2); }
.nota__fig { margin: var(--e3) 0; }
.nota__fig img { width: 100%; height: auto; border-radius: var(--radio); }
.nota__fig--portada { margin-top: 0; }
.nota blockquote { margin: var(--e3) 0; padding-left: var(--e2); border-left: 4px solid var(--linea); color: var(--tinta-2); }
.paginacion ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--e3) 0 0; padding: 0; list-style: none; }
.paginacion a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--linea); border-radius: 8px; text-decoration: none; color: var(--tinta); font-weight: 700; }
.paginacion a[aria-current="page"], .temas a[aria-current="page"] { background: var(--acento-texto); border-color: var(--acento-texto); color: #fff; }
.temas a[aria-current="page"] span { color: #fff; }
.temas ul { margin-bottom: var(--e2); }
.hero-int .pueblos a { background: transparent; color: var(--claro); border-color: #5A5A5A; }
.hero-int .pueblos a span { color: var(--claro-2); }
.hero-int .pueblos a[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.hero-int .pueblos a[aria-current="page"] span { color: #fff; } /* la cifra, sobre el rojo, en blanco: el gris claro no llega a 4,5 */
.hero-int .pueblos ul { margin-top: var(--e2); }

/* --- agenda: citas con foto, por mes; archivo plegado --- */
.citas { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); margin: var(--e2) 0 var(--e3); }
.cita { position: relative; display: flex; gap: var(--e2); padding: var(--e2); border-left: 4px solid var(--acento); background: var(--fondo); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: 0 1px 8px rgb(20 20 20 / .07); }
.cita--pasada { border-left-color: var(--linea); }
.cita__foto { flex: 0 0 6.5rem; }
.cita__foto img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 8px; display: block; }
.cita__cuerpo { min-width: 0; }
.cita h3, .cita h4 { margin: .2rem 0 .3rem; font-size: var(--p1); font-family: var(--letra); line-height: 1.35; }
.cita h3 a, .cita h4 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.cita__donde { margin: 0; font-size: var(--p0); color: var(--tinta-2); }
.cita__donde a { display: inline-flex; align-items: center; min-height: 44px; }
.agenda-mes > h3 { font-size: var(--p3); margin-top: var(--e3); }
.agenda-mes > h3 span, .archivo-mes summary span { color: var(--tinta-2); font: 400 var(--p1) var(--letra); }
.archivo-mes { border-bottom: 1px solid var(--linea); }
.archivo-mes summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); min-height: 48px; cursor: pointer; font-weight: 700; font-family: var(--titular); font-size: var(--p2); }
.archivo-mes summary::after { content: "+"; content: "+" / ""; font: 700 var(--p3)/1 var(--letra); color: var(--acento-texto); }
.archivo-mes[open] summary::after { content: "−"; content: "−" / ""; }

/* --- descargas --- */
.descargas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: var(--e3) 0; }
.descarga { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.descarga__portada { background: var(--crema); padding: var(--e2); display: grid; place-items: center; }
.descarga__portada img { width: auto; max-height: 15rem; box-shadow: 0 4px 14px rgb(20 20 20 / .18); }
.descarga__cuerpo { padding: var(--e2); }
.descarga h3 { margin: 0 0 .3rem; font-size: var(--p2); }
.descarga h3 a { color: var(--tinta); }
.descarga h3 a::after { content: ""; position: absolute; inset: 0; }
.descarga p { margin: 0; font-size: var(--p0); }
.descarga__grande img { max-width: 16rem; box-shadow: 0 4px 14px rgb(20 20 20 / .18); }
.pdf-pag { border-bottom: 1px solid var(--linea); }
.pdf-pag summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--acento-texto); }
.pdf-pag p { font-size: var(--p0); }

/* --- galería --- */
.galeria { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 11rem), 1fr)); margin: var(--e2) 0; padding: 0; list-style: none; }
.galeria a { display: block; position: relative; border-radius: 8px; overflow: hidden; color: var(--tinta); text-decoration: none; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s; }
.galeria a:hover img { transform: scale(1.04); }
.galeria--grande { grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr)); gap: var(--e2) var(--e1); }
.galeria__pie { display: block; padding: .35rem .1rem 0; font-size: var(--p0); line-height: 1.35; color: var(--tinta-2); }
.puerta__foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
/* --- bloque 2: socios con foto, pueblos, guía, buscador, idiomas --- */
.socios-t { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: var(--e2) 0 var(--e3); }
.socio-t { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--fondo); box-shadow: 0 1px 10px rgb(20 20 20 / .08); }
.socio-t__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.socio-t__cuerpo { padding: .8rem var(--e2) var(--e2); }
.socio-t__tipo { margin: 0; font-size: var(--p0); color: var(--acento-texto); font-weight: 700; }
.socio-t h3, .socio-t h4 { margin: .1rem 0 .3rem; font-size: var(--p1); font-family: var(--letra); }
.socio-t h3 a, .socio-t h4 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.socio-t p { margin: 0 0 .3rem; font-size: var(--p0); color: var(--tinta-2); }
.socio-t__datos a { display: inline-flex; align-items: center; min-height: 44px; }
.seccion h3 > span, .h2-n { color: var(--tinta-2); font: 400 var(--p1) var(--letra); }
.ficha-dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem var(--e2); margin: 0 0 var(--e2); }
.ficha-dl dt { font-weight: 700; }
.ficha-dl dd { margin: 0; }
.ficha-dl a { display: inline-flex; align-items: center; min-height: 44px; }
.guia-indice b { font-size: var(--p1); }
.barra__buscar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--claro); text-decoration: none; border-radius: 6px; font-size: var(--p0); }
.barra__buscar::before { content: "⌕ "; content: "⌕ " / ""; font-size: 1.2em; margin-right: .15rem; }
.barra__buscar:hover { color: var(--acento-claro); }
.busqueda input { width: 100%; min-height: 52px; margin-top: var(--e2); padding: .5rem 1rem; border: 2px solid var(--claro); border-radius: 999px; font: inherit; font-size: var(--p2); }
.resultados { display: grid; gap: .5rem; margin: var(--e2) 0; padding: 0; list-style: none; }
.resultados li { display: grid; padding: .6rem var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); }
.resultados a { display: inline-flex; align-items: center; min-height: 44px; }
.resultados span { font-size: var(--p0); color: var(--tinta-2); }
.lista-mapa { columns: 16rem; margin: 0; padding-left: 1.1rem; font-size: var(--p0); }
.lista-mapa li { break-inside: avoid; }
.lista-mapa a { display: inline-flex; align-items: center; min-height: 44px; }
.idiomas ul { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; margin: .5rem 0; padding: 0; list-style: none; }
.idiomas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 999px; font-size: var(--p0); text-decoration: none; border: 1px solid var(--linea); color: var(--tinta); }
.hero-int .idiomas a { color: var(--claro); border-color: #5A5A5A; }
.idiomas a[aria-current="page"] { font-weight: 700; border-color: currentColor; }
.lista-mapa a, .tabla a, .ficha-dl a { min-width: 44px; }
/* idiomas sobre la foto de la cabecera (portada y Descubre) */
.idiomas-flota { position: relative; z-index: 3; height: 0; }
.idiomas-flota .idiomas ul { position: absolute; right: 1rem; top: .6rem; margin: 0; }
.idiomas-flota .idiomas a { background: rgb(20 20 20 / .8); color: var(--claro); border-color: rgb(255 255 255 / .45); }
.idiomas-flota .idiomas a[aria-current="page"] { border-color: var(--claro); }
@media (max-width: 899px) { .idiomas-flota .idiomas ul { top: .4rem; right: .6rem; } .idiomas-flota .idiomas a { min-height: 44px; padding: 0 .6rem; } }
/* sin foto arriba (el planificador, «Hoy»), las pastillas caían sobre el antetítulo: 10 px tapados en el móvil (revisión entera, IDI-01) */
@media (max-width: 899px) { .idiomas-flota + .hero-int:not(.hero-int--foto) { padding-top: calc(var(--e4) + 1.6rem); } }
/* vuelta 1 (encargo 1/10/2026) */
button.boton { font: inherit; font-weight: 700; cursor: pointer; }
.mv-aviso { display: inline-flex; align-items: center; font-size: var(--p0); font-weight: 700; }
.mv-aviso:empty { display: none; }
.cita__ya { font-weight: 400; color: var(--tinta-2); }
/* galerías de cientos de fotos: el navegador no pinta lo que no se ve (TEC-07) */
.galeria--grande > li { content-visibility: auto; contain-intrinsic-size: auto 15rem; }
.mis-fichas > .mi-ficha:not([open]) { content-visibility: auto; contain-intrinsic-size: auto 3.2rem; } /* el <button> no hereda la letra: salía más pequeño (CRO-07) */
.barra__mv { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px; background: var(--acento); color: #fff; text-decoration: none; font-size: var(--p0); font-weight: 700; }
.exp__datos { font-size: var(--p1); }
.exp__datos b { font-size: var(--p2); color: var(--claro); }
.exp-sola .exp__acciones { display: none; } /* los botones de reservar ya están arriba (CRO-03) */
.nota__destacado { font-size: var(--p2); font-weight: 600; line-height: 1.5; }
[data-sugerencias] ul { margin: 0 0 var(--e2); }
@media (max-width: 559px) { .barra__buscar { padding: 0 .4rem; } .barra__mv { padding: 0 .55rem; } }
/* vuelta 5 (encargo 1/10/2026) */
.hero-int--foto .contenedor > .idiomas { max-width: none; } /* DIS-25: el selector, a la derecha como en la portada */
.mapa__pueblo { paint-order: stroke; stroke: #EFE9DF; stroke-width: 4px; } /* DIS-29: el rótulo no tapa los puntos */
/* vuelta 4 (encargo 1/10/2026) */
/* DIS-19: a partir de 900 px, la foto de las cabeceras interiores en la mitad derecha: las caras no van bajo el texto */
@media (min-width: 900px) {
  .hero-int--foto > .hero__foto { left: auto; width: 55%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
  .hero-int--foto::before { background: linear-gradient(90deg, rgb(20 20 20 / 1) 0%, rgb(20 20 20 / .92) 40%, rgb(20 20 20 / .15) 75%, rgb(20 20 20 / 0) 100%); }
  .hero-int--foto > .hero__foto img { object-position: 50% 30%; }
  .hero-int--foto .contenedor > * { max-width: 36rem; }
}
/* DIS-21: el presupuesto en tres tarjetas con la cifra delante */
.presus { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: var(--e2) 0; padding: 0; list-style: none; }
.presu { padding: var(--e2); background: var(--fondo); border-radius: var(--radio); border-top: 4px solid var(--acento); }
.presu__cifra { margin: 0 0 .4rem; color: var(--tinta-2); }
.presu__cifra b { font: 700 var(--p5)/1.1 var(--titular); color: var(--acento-texto); }
.presu ul { margin: 0; padding-left: 1.1rem; font-size: var(--p0); }
.presu li a { display: inline-flex; align-items: center; min-height: 44px; }
.contenedor.estrecho > .presus { max-width: none; }
/* vuelta 3 (encargo 1/10/2026) */
.barra .solo-escritorio, .barra-movil a:last-child, .nav-escritorio a { white-space: nowrap; } /* DIS-10 v3 */
.hero-int--socio .hero-int__foto img { aspect-ratio: 3 / 2; } /* la regla 4:3 de la tanda C la pisaba (DIS-13 v3) */
@media (max-width: 559px) {
  /* chips en una fila que se desliza: la primera pantalla, para el contenido (DIS-15 v3) */
  .temas ul, .hero-int .pueblos ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .temas a, .hero-int .pueblos a { white-space: nowrap; }
}
mark.hueco { background: #FFF3D6; border: 1px dashed #B26B00; border-radius: 4px; padding: 0 .15em; color: inherit; } /* DIS-17 v3 */
/* vuelta 2 (encargo 1/10/2026) */
.mapa__toque { margin: .5rem 0 var(--e2); padding: .6rem var(--e2); border-left: 4px solid var(--acento); background: var(--crema); }
.mapa__toque p { margin: 0; }
.mapa__toque ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.mapa__toque a { display: inline-flex; align-items: center; min-height: 44px; }
.rej-2.rej-2--arriba { align-items: start; } /* «.rej-2» venía después y ganaba: hueco encima del texto (DIS-01 v2) */
/* el número no se parte: va con espacios duros (P.tel_visible en los botones); la etiqueta sí puede saltar (CRO-09/DIS-03 v2) */
@media (max-width: 559px) {
  .hero-int .acciones:has(> :nth-child(3)) > [href^="tel:"] { grid-column: 1 / -1; font-size: var(--p1); }
}
@media (min-width: 900px) {
  .hero-int--socio .contenedor > .hero-int__texto { grid-column: 1; }
  .hero-int--socio .hero-int__foto { grid-row: 1; }
}
.hero-int__foto img { aspect-ratio: 3 / 2; } /* 4:3 cortaba los rótulos («SANTA MARI»: DIS-09 v2) */
/* la ficha de experiencia: la tarjeta sin repetir título, precio y chips que ya están arriba (DIS-07/CRO-06 v2) */
.exp-sola .exp h2, .exp-sola .exp__precio, .exp-sola .exp__para, .exp-sola .exp__quien { display: none; }
.galeria:not(.galeria--grande) { grid-template-columns: repeat(auto-fit, minmax(min(46%, 11rem), 1fr)); }
/* barra fija: con relleno y centrada (en francés tocaba el borde: DIS-06 v2) */
.barra-movil a { padding-inline: .75rem; text-align: center; line-height: 1.2; }
/* el mapa en el móvil: rótulos y puntos que se lean (DIS-04 v2); el SVG se ve al ~30 % */
.mapa__pueblo--grande { font-size: 15px; }
@media (max-width: 559px) {
  .mapa__pueblo { font-size: 30px; paint-order: stroke; stroke: #EFE9DF; stroke-width: 6px; }
  .mapa__pueblo:not(.mapa__pueblo--grande) { display: none; }
  .mapa circle[stroke] { r: 11; stroke-width: 3; }
}
/* motor tras la vuelta 1 */
@media (max-width: 559px) {
  .pie__enlaces { grid-template-columns: 1fr 1fr 1fr; gap: 0 .6rem; font-size: .875rem; line-height: 1.25; }
}
/* portada en el móvil: noticias y escapadas en fila que se desliza (portada-larga: 11,4 pantallas) */
@media (max-width: 899px) {
  .portada-fila .notas, .portada-fila .puertas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 20rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .portada-fila .nota-t, .portada-fila .puerta { scroll-snap-align: start; }
  .portada-fila .puerta { flex-direction: column; }
  .portada-fila .puerta picture, .portada-fila .puerta__foto { flex: none; }
  .portada-fila .puerta picture img, .portada-fila .puerta__foto img { height: auto; aspect-ratio: 4 / 3; }
}
.mapa__punto { cursor: pointer; }
/* enlaces dentro del texto de las noticias: 44 px de alto para el dedo sin romper la línea */
.nota :is(p, li, h2, h3) a:not(.boton) { padding-block: .75em; }
/* tanda C de diseño (vuelta 1) */
/* DIS-05: ficha de socio con su foto en la cabecera: al lado en escritorio, debajo de los botones en móvil */
.hero-int__foto { margin: var(--e3) 0 0; }
.hero-int__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); display: block; }
@media (min-width: 900px) {
  .hero-int--socio .contenedor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--e4); align-items: center; }
  .hero-int--socio .contenedor > :not(.hero-int__foto) { grid-column: 1; }
  .hero-int--socio .hero-int__foto { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  /* DIS-04: el velo de las cabeceras con foto, de lado: la foto se ve a la derecha */
  .hero-int--foto::before { background: linear-gradient(90deg, rgb(20 20 20 / .9) 0%, rgb(20 20 20 / .8) 42%, rgb(20 20 20 / .35) 75%, rgb(20 20 20 / .2) 100%); }
  /* DIS-02: la tarjeta del fin de semana, sin tapar a la pareja */
  .hero__hoy { max-width: 28rem; }
  /* DIS-06: en las fichas, el mensaje acompaña al bajar */
  .rej-2--arriba > .mensaje { position: sticky; top: calc(var(--barra) + 1rem); }
}
/* DIS-03: en el móvil, la foto de portada en una franja arriba y el texto sobre negro (como las interiores) */
@media (max-width: 899px) {
  .hero { padding-top: 0; }
  .hero > .hero__foto { position: relative; inset: auto; display: block; height: 10rem; margin-bottom: var(--e2); }
  .hero > .hero__foto img { position: absolute; inset: 0; object-position: 50% 60%; }
  .hero::before { bottom: auto; height: 10rem; background: linear-gradient(180deg, rgb(20 20 20 / 0) 55%, rgb(20 20 20 / 1) 100%); }
}
/* DIS-09: en el móvil, el botón principal a lo ancho y el resto en dos columnas */
@media (max-width: 559px) {
  .hero-int .acciones:has(> :nth-child(3)) { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-int .acciones:has(> :nth-child(3)) > .boton { flex: none; padding-inline: .6rem; font-size: var(--p0); }
  .hero-int .acciones:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; font-size: var(--p1); }
  .hero-int .acciones .mv-aviso { grid-column: 1 / -1; }
}
/* DIS-11: la pregunta de debajo de la cabecera, un punto menor que el H1 */
.hero-int + .seccion .contenedor > h2:first-child, .hero-int + .seccion .contenedor > .aviso-fecha + h2 { font-size: var(--p4); }
/* DIS-12: los tres ✓ de la portada, alineados */
.hero__micro li { display: inline-flex; align-items: center; gap: .35em; } /* con flex a secas se comía los espacios (DIS-02 v2) */
/* banda panorámica: tres fotos suyas a lo ancho, sin márgenes */
.seccion--pano { padding: 0; background: var(--oscuro); }
.panoramica { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.panoramica a { position: relative; display: block; color: #fff; text-decoration: none; }
.panoramica img { width: 100%; height: clamp(11rem, 22vw, 19rem); object-fit: cover; display: block; }
.panoramica__rotulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .9rem; background: linear-gradient(180deg, rgb(20 20 20 / 0), rgb(20 20 20 / .85)); font: 700 var(--p3)/1.1 var(--titular); }
.panoramica a:hover .panoramica__rotulo, .panoramica a:focus-visible .panoramica__rotulo { text-decoration: underline; }
@media (max-width: 699px) {
  .panoramica { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .panoramica li { scroll-snap-align: start; }
  .panoramica img { height: 15rem; }
}
/* establecimientos con su foto */
.estabs .estab--foto { display: flex; gap: var(--e2); align-items: flex-start; }
.estab__foto { flex: 0 0 6.5rem; }
.estab__foto img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 8px; display: block; }
.estab--foto > div:last-child { min-width: 0; }
/* --- bloque 3: mi ficha, presentación, panel --- */
.mi-ficha { border-bottom: 1px solid var(--linea); }
.mi-ficha summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; min-height: 48px; cursor: pointer; }
.mi-ficha summary span { color: var(--tinta-2); font-size: var(--p0); }
.mi-ficha__in { padding: 0 0 var(--e2); }
.mi-ficha h3 { font-size: var(--p1); font-family: var(--letra); margin: var(--e1) 0 .2rem; }
.pantalla { min-height: 100svh; display: flex; align-items: center; padding: var(--e4) 0; }
.pantalla h1, .pantalla h2 { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 22ch; margin-top: 0; }
.pantalla__txt { font-size: var(--p2); max-width: 44rem; }
.pantalla__nav a { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--e2); font-weight: 700; }
.panel .plan { display: grid; gap: var(--e2); }
/* las casillas de las pastillas y «Añadir fotos» se quedan como en el resto de la web (panel del socio, 9/10/2026:
   salían como un campo de 48 px encima de su texto) */
.panel .plan label:not(.chip):not(.ps-subir) { display: grid; gap: .3rem; font-weight: 700; font-size: var(--p0); }
.panel input:not([type=checkbox]):not([type=radio]):not([type=file]), .panel select, .panel textarea { min-height: 48px; padding: .4rem .7rem; border: 1px solid #767676; border-radius: 8px; font: inherit; color: var(--tinta); background: var(--fondo); width: 100%; }
.panel .chip[aria-pressed="true"] { background: var(--acento-texto); color: #fff; }
.panel .chips { margin-bottom: var(--e3); }
.panel__vista { padding: var(--e2); border: 2px dashed var(--linea); border-radius: var(--radio); background: var(--fondo); }
/* el panel del socio (ejemplo, 9/10/2026): sus fotos, «Añadir fotos» con teclado, la vista de su ficha y sus listas */
.ps-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--e1); margin: 0 0 var(--e1); padding: 0; list-style: none; }
.ps-fotos li { display: grid; gap: .3rem; align-content: start; }
.ps-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.panel .ps-subir { position: relative; display: inline-flex; justify-self: start; }
.panel .ps-subir input { position: absolute; inset: 0; width: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.ps-subir:focus-within { outline: 3px solid var(--acento-texto); outline-offset: 2px; }
.ps-ficha img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; margin-bottom: var(--e1); }
.ps-ficha h3 { margin: 0 0 var(--e1); }
.ps-donde li, .ps-falta li { margin-bottom: .4rem; }
@media (max-width: 559px) {
  .socio-t { flex-direction: row; }
  .socio-t__foto { flex: 0 0 34%; }
  .socio-t__foto img { height: 100%; aspect-ratio: auto; }
  .ficha-dl { grid-template-columns: 1fr; gap: .1rem; }
  .ficha-dl dd { margin-bottom: .5rem; }
}
@media (max-width: 559px) {
  .puerta__foto { flex: 0 0 34%; }
  .puerta__foto img { height: 100%; aspect-ratio: auto; }
  .cita__foto { flex-basis: 4.5rem; }
  .cita__foto img { width: 4.5rem; height: 4.5rem; }
}
/* revisión final 1/10/2026: el pueblo encima de cada lista de socios (guías de comer y dormir), 44 px táctiles */
/* (2/10: también cuando la línea «El orden cambia cada día» queda entre el pueblo y la lista) */
h3:has(+ .socios-t) > a, h3:has(+ .nota + .socios-t) > a { display: inline-flex; align-items: center; min-height: 44px; }
/* revisión final 1/10/2026 (QA-12): el campo con error, con su etiqueta a la vista bajo la barra fija */
form input, form select, form textarea { scroll-margin-top: 3rem; }
/* revisión final 1/10/2026 (desborde-375): con el menú cerrado, su lista no ocupa sitio (Edge 154 la maquetaba igual y empujaba 5 px) */
.nav-movil:not([open]) nav { display: none; }
/* revisión final 1/10/2026 (desborde-375): una palabra larga en un titular grande («CatandoSomontano») se parte solo si no cabe */
main h1, main h2, main h3 { overflow-wrap: break-word; }

/* «la web de la organización»: quiénes somos, hazte socio, calendario */
.lista-hace { margin: var(--e2) 0 0; padding-left: 1.1rem; }
.lista-hace li { margin-bottom: var(--e1); }
.lista-hace a { display: inline-flex; align-items: center; min-height: 44px; }
.datos-legales { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: var(--e2) 0; }
.datos-legales dt { font-weight: 700; }
.datos-legales dd { margin: 0; overflow-wrap: anywhere; }
.datos-legales a { display: inline-flex; align-items: center; min-height: 44px; }
.citas-cal { list-style: none; margin: var(--e2) 0; padding: 0; }
.citas-cal li { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.citas-cal h3 { margin: .2rem 0; }
.citas-cal h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.cita-cal__fecha { margin: 0; font-weight: 700; color: var(--acento-texto); }
@media (max-width: 420px) { .datos-legales { grid-template-columns: 1fr; gap: 0; } .datos-legales dd { margin-bottom: .6rem; } }
.cifras--prensa li span em { display: block; font-style: normal; font-size: var(--p-1, .85rem); }
.notas-prensa { margin: var(--e2) 0 0; padding-left: 1.1rem; }
.notas-prensa li { margin-bottom: .4rem; }
.notas-prensa a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla--ficha th, .tabla--ficha td { font-size: var(--p0); vertical-align: top; }
@media print { .solo-pantalla, .pie, .idiomas-flota { display: none !important; } .dossier { padding-top: 0; } }
.consumo { margin: var(--e2) 0 0; padding: var(--e1) var(--e2); border-left: 4px solid var(--acento); background: var(--fondo-2, #F6F2EE); font-size: var(--p0); }
.consumo a, .glosa a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.glosario { margin: var(--e2) 0; }
.glosario dt { font-family: var(--titular); font-size: var(--p2, 1.25rem); margin-top: var(--e2); scroll-margin-top: 5rem; }
.glosario dd { margin: .2rem 0 0; }
.glosario dt:target { color: var(--acento-texto); }
.estaciones { display: grid; gap: var(--e2); margin: var(--e2) 0; }
.estacion { padding: var(--e2); border-left: 4px solid var(--linea); background: var(--fondo); }
.estacion--ahora { border-left-color: var(--acento); }
.estacion h3 span { font-family: var(--texto, inherit); font-size: var(--p0); color: var(--tinta-2); font-weight: 400; }
.estacion-hoy { font-weight: 700; }
.boton--peq { min-height: 44px; padding: .3rem .8rem; font-size: var(--p0); margin-top: .4rem; }
.chips--nps .chip { min-width: 44px; justify-content: center; }

/* ================= vuelta 1 del 6/10 (profundo) ================= */
/* DIS-40: en la barra fija, el número en una línea y a quién llama encima, en pequeño (fuera de hora, cuándo atiende) */
.barra-movil a.barra-movil__tel { flex-direction: column; gap: .05rem; white-space: nowrap; line-height: 1.15; }
.barra-movil__tel small { font-size: .75rem; font-weight: 400; }
/* DIS-42: los H2 de las páginas interiores, todos del mismo tamaño (el primero salía más pequeño que los demás) */
.hero-int ~ .seccion > .contenedor > h2, .hero-int ~ .seccion > .contenedor > .rej-2 > div > h2,
.hero-int + .seccion .contenedor > h2:first-child, .hero-int + .seccion .contenedor > .aviso-fecha + h2 { font-size: clamp(1.65rem, 3.6vw, var(--p4)); }
/* DIS-46: en el móvil, los botones de la cabecera de la ficha, de la misma altura y centrados */
@media (max-width: 559px) { .hero-int .acciones:has(> :nth-child(3)) > * { align-self: stretch; justify-content: center; text-align: center; } }
/* DIS-47: en las tarjetas de una fila, el contenido arriba, alineado con el de al lado */
.cercanos li { align-content: start; }
/* DIS-44: el idioma activo, relleno, en todos los sitios */
.idiomas a[aria-current="page"] { background: var(--tinta); color: var(--claro); border-color: var(--tinta); }
.hero-int .idiomas a[aria-current="page"], .idiomas-flota .idiomas a[aria-current="page"] { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
/* CRO-48: el pie en grupos con su rótulo */
.pie__nav { display: grid; gap: var(--e2) var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.pie__nav .pie__enlaces { grid-template-columns: 1fr; }
.pie__grupo .pie__rotulo { color: var(--claro); font-weight: 700; }
.pie__legal { margin-top: var(--e2); }
/* puertas con una de sus fotos de la web (sin <picture>) */
.puerta > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 559px) { .puerta > img { flex: 0 0 34%; width: 34%; height: auto; aspect-ratio: auto; } }
/* SEO-07, CRO-45: el plan hecho de un pueblo, la puerta a la primera cata y la tabla plegada de agencias */
.caja-plan { padding: var(--e2); border-left: 4px solid var(--acento); background: var(--crema); border-radius: 0 var(--radio) var(--radio) 0; }
.hero-int__primera { margin: var(--e1) 0 0; color: var(--claro-2); }
.hero-int__primera a { color: var(--claro); display: inline-flex; align-items: center; min-height: 44px; }
.mas-filas { margin-top: var(--e2); }
.mas-filas > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--acento-texto); }

/* DIS-40: con tres botones, que «Qué abre hoy» y el número quepan en una línea a 375 */
.barra-movil a { font-size: var(--p0); padding-inline: .45rem; }
/* CRO-48: en el móvil, cada grupo del pie a todo el ancho y sus enlaces en tres columnas, como antes (con una sola columna el pie medía 2.000 px) */
@media (max-width: 559px) {
  .pie__nav { grid-template-columns: 1fr; gap: var(--e1); }
  .pie__nav .pie__enlaces { grid-template-columns: 1fr 1fr 1fr; }
}

/* ================= vuelta 2 del 6/10 (profundo) ================= */
/* DIS-52: en el móvil, los botones de la cabecera de la ficha, uno debajo de otro y a todo el ancho */
@media (max-width: 559px) { .hero-int .acciones:has(> [href="#mensaje-exp"]) { grid-template-columns: 1fr; } }
/* DIS-51: el selector de idioma sobre una foto de cabecera, con fondo (como en la portada en español) */
.hero-int--foto .idiomas a { background: rgb(20 20 20 / .8); color: var(--claro); border-color: rgb(255 255 255 / .45); }
.hero-int--foto .idiomas a[aria-current="page"] { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
/* DIS-50, CRO-53: en la encuesta, las opciones de la primera pregunta una debajo de otra en el móvil */
@media (max-width: 559px) { #opina fieldset:first-of-type .chips { flex-direction: column; align-items: stretch; } }
/* QA-03: la tabla de agencias en el móvil, con la pista de que se desliza y la primera columna fija */
.tabla-pista { display: none; }
@media (max-width: 699px) {
  .tabla-pista { display: block; }
  .tabla--ficha th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--fondo); box-shadow: 1px 0 0 var(--linea); min-width: 9rem; }
}

/* ================= vuelta 3 del 6/10 (profundo) ================= */
/* DIS-61: Playfair pone por defecto cifras «de texto» («2o €», «1oo»); la fuente alojada trae las alineadas (lnum) */
/* en body y no en html: la abreviatura «font» del body la reiniciaba (QA-01 de la vuelta 3) */
body, h1, h2, h3, h4, b, strong { font-variant-numeric: lining-nums; }
/* QA-05: el tipo y el pueblo de cada parada, en su línea, sin el «·» que se quedaba colgando */
.parada h3 span, .parada h4 span { display: block; }
/* DIS-58: la banda del Bus del Vino en la portada */
.banda-bus { background: var(--oscuro); color: var(--claro); }
.banda-bus__in { display: grid; gap: var(--e3); align-items: center; }
.banda-bus__in > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); }
.banda-bus h2 { color: var(--claro); margin-top: 0; }
.banda-bus p { color: var(--claro-2); }
.banda-bus b { color: var(--claro); }
.banda-bus .antetitulo { color: var(--acento-claro); }
@media (min-width: 900px) { .banda-bus__in { grid-template-columns: 5fr 6fr; } }
/* DIS-60: en el móvil, las cifras del club de dos en dos */
@media (max-width: 559px) {
  .oscuro .cifras { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .oscuro .cifras li { padding: .8rem; }
  .oscuro .cifras b { font-size: var(--p4); }
}

/* QA-03 (vuelta 3): en el carrusel, las fotos de su web (un <img> sin <picture>) a todo el ancho, como las demás:
   heredaban la regla de las tarjetas en fila del móvil (34 %) y salían en miniatura */
@media (max-width: 899px) { .portada-fila .puerta > img { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; } }

/* ================= vuelta 4 del 6/10 (profundo) ================= */
/* DIS-65, CRO-71: los enlaces dentro de una frase, en línea: con 44 px de alto abrían la línea al doble. El motor no los
   mide (WCAG los exime); los de teléfono, correo y WhatsApp, que sí mide, siguen a 44 px */
.consumo a, .glosa a { display: inline; min-height: 0; min-width: 0; }
/* DIS-66: en el móvil, los botones de cada parada a todo el ancho, iguales, y separados del texto */
@media (max-width: 479px) {
  .parada .acciones { display: grid; gap: .5rem; }
  .parada .acciones .boton, .parada p > .boton { width: 100%; justify-content: center; text-align: center; }
  .parada p > .boton { display: flex; margin-top: var(--e1); }
}
/* CRO-69, DIS-67: la tabla de agencias en el móvil: el socio y el pueblo bajo la experiencia */
.tabla-sub { display: none; }
@media (max-width: 479px) {
  .tabla--ficha .col-socio, .tabla--ficha .col-pueblo { display: none; }
  .tabla-sub { display: block; margin-top: .2rem; font-weight: 400; color: var(--tinta-2); }
}
/* CRO-67, CRO-70 */
.escapada__suma { color: var(--claro-2); }
.escapada__suma b { color: var(--claro); }
.puerta__mas { margin-top: .5rem !important; font-weight: 700; color: var(--acento-texto) !important; }
/* DIS-69: con un número impar de fotos, la última a todo el ancho en el móvil */
@media (max-width: 559px) { .galeria li:last-child:nth-child(odd) { grid-column: 1 / -1; } }


/* ================= 8/10/2026 · lo que no se habían imaginado (crecer.py) ================= */
/* el pasaporte del Somontano: cada socio en el que has estado, con su sello */
.pasaporte__cuenta { font: 700 var(--h2)/1.1 var(--titular); margin: 0 0 var(--e1); }
.pasaporte-grupo h3 span { color: var(--tinta-2); font: 400 var(--p0) var(--letra); }
.pasaporte-lista { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: var(--e1) 0 var(--e3); padding: 0; list-style: none; }
.pasaporte-lista li { position: relative; display: grid; align-content: start; gap: .1rem; padding: .55rem var(--e2); border: 1px dashed var(--linea); border-radius: var(--radio); background: var(--fondo); }
.pasaporte-lista a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--tinta); }
.pasaporte-lista li > span:not(.pa-sello) { font-size: var(--p0); color: var(--tinta-2); }
.pasaporte-lista li.sellado { border: 2px solid var(--acento-texto); background: var(--crema); }
.pa-sello { justify-self: start; margin-top: .2rem; padding: .1rem .55rem; border: 2px solid var(--acento-texto); border-radius: 999px; color: var(--acento-texto); font-size: var(--p0); font-weight: 700; transform: rotate(-2deg); }
.mi-viaje__mas { margin-top: var(--e3); }
/* la hoja para las habitaciones: limpia en pantalla y en papel */
.hoja-lista { margin: var(--e2) 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.hoja-lista li { display: grid; gap: .1rem; padding: .7rem var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); }
.hoja-lista span { color: var(--tinta-2); font-size: var(--p0); }
.hoja__qr { display: flex; align-items: center; gap: var(--e2); margin: var(--e3) 0; padding: var(--e2); border: 2px solid var(--tinta); border-radius: var(--radio); }
.hoja__qr svg { width: 9rem; height: 9rem; flex: none; }
.hoja__qr p { margin: 0; }
@media print {
  .hoja { padding: 0; } .hoja .entradilla { color: var(--tinta); } .hoja__qr { break-inside: avoid; }
  /* en un solo A4: los cuatro vecinos, de dos en dos (8/10/2026: con uno debajo de otro se iba a 1,13 hojas) */
  .hoja h1 { font-size: 2.1rem; } .hoja-lista { grid-template-columns: 1fr 1fr; } .hoja-lista li { padding: .5rem .8rem; break-inside: avoid; }
}
/* el kit del socio, dentro de «Mi ficha» */
.kit { margin-top: var(--e3); padding: var(--e2); border-left: 4px solid var(--acento); background: var(--crema); border-radius: 0 var(--radio) var(--radio) 0; }
.kit h3 { margin-top: 0; }
.kit__qr { display: flex; align-items: center; gap: var(--e2); margin: var(--e2) 0; }
.kit__qr img { flex: none; background: #fff; border: 1px solid var(--linea); }
.kit__qr p { margin: 0; font-size: var(--p0); }
.kit__campo { display: grid; gap: .3rem; margin-top: var(--e2); font-weight: 700; font-size: var(--p0); }
.kit__campo textarea { width: 100%; padding: .5rem .7rem; border: 1px solid #767676; border-radius: 8px; font: 400 var(--p0)/1.5 var(--letra); color: var(--tinta); background: var(--fondo); }
/* regalar: un plan o el Bus del Vino, en tarjeta */
.regalo-form { margin-top: var(--e3); }
.mensaje__campos .mensaje__ancho { grid-column: 1 / -1; }
.regalo-form summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--acento-texto); }
.regalo-cabecera { display: none; }
.mv-sin-nada .regalo-form { display: none; }
/* el menú del móvil, por grupos y con los idiomas (8/10/2026) */
.nav-movil nav { grid-template-columns: 1fr 1fr; column-gap: 1rem; padding-bottom: calc(var(--e2) + 64px); }
.nav-movil__rotulo { grid-column: 1 / -1; margin: var(--e2) 0 .1rem; font-size: var(--p0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento-claro); }
.nav-movil__rotulo:first-child { margin-top: .4rem; }
.nav-movil nav .nav-movil__idiomas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--e2) 0 0; }
.nav-movil nav .nav-movil__idiomas a { padding: 0 1rem; border: 1px solid #5A5A5A; border-radius: 999px; }
/* el vídeo de la portada (Juan, 9/10/2026: el suyo, en vez del carrusel de fotos): entra fundiéndose sobre la foto de
   siempre cuando ya se mueve, y pulsarlo no hace nada (en su web, el YouTube sacaba de la web) */
.hero > .hero__foto { transition: opacity 1.4s ease; }
.hero > .hero__foto--mas { opacity: 0; }
.hero > .hero__foto--mas.activa { opacity: 1; }
.hero > video.hero__foto { pointer-events: none; }
/* sin pie ni puntos (Juan, 9/10/2026: «que aparezca esto no me gusta»): solo la pausa, redonda y abajo a la derecha,
   porque lo que se mueve solo tiene que poder pararse (WCAG 2.2.2) */
.hero__carrusel { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; }
.hero__pausa { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .45); border-radius: 50%; background: rgb(20 20 20 / .6); color: var(--claro); cursor: pointer; }
.hero__pausa:hover, .hero__pausa:focus-visible { background: rgb(20 20 20 / .85); }
.hero .hero__pausa:focus-visible { outline-color: var(--acento-claro); }
@media (prefers-reduced-motion: reduce) { .hero > .hero__foto { transition: none; } }
/* en el móvil, la foto y el vídeo van en la franja de arriba: la pausa, en su esquina de abajo (así no empuja el
   titular al aparecer: la página daba un salto, CLS 0,044 en Lighthouse) */
@media (max-width: 899px) {
  .hero > .hero__foto--mas { position: absolute; inset: 0 0 auto 0; height: 10rem; margin: 0; }
  .hero__carrusel { top: calc(10rem - 44px - .5rem); bottom: auto; right: .5rem; }
}
/* en los móviles altos, la foto 2,5 rem más alta; en los bajos no, para no bajar los botones de la primera pantalla
   (ronda del 9/10, DIS-02; QA-21 de la revisión entera) */
@media (max-width: 899px) and (min-height: 780px) {
  .hero > .hero__foto, .hero > .hero__foto--mas, .hero::before { height: 12.5rem; }
  .hero__carrusel { top: calc(12.5rem - 44px - .5rem); }
}
/* el recorrido de dos minutos (solo en la demo) */
.recorrido { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; gap: var(--e2); }
.recorrido__parada { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--e2); padding: var(--e2); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.recorrido__parada h3 { margin: 0 0 .3rem; }
.recorrido__parada p { margin: 0 0 .5rem; }
.recorrido__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tinta); color: #fff; font: 700 1.1rem/1 var(--titular); }
.recorrido__fijate { color: var(--tinta-2); }
.recorrido__qr { display: none; }
/* en el ordenador, las ocho paradas en dos columnas a todo el ancho: en una de 46 rem quedaba media pantalla en blanco (ronda del 9/10, DIS-07) */
@media (min-width: 68.75rem) { .contenedor.estrecho > .recorrido { max-width: none; grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .recorrido__qr { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); padding: var(--e2); border: 2px solid var(--tinta); border-radius: var(--radio); }
  .recorrido__qr svg { flex: none; width: 120px; height: 120px; }
  .recorrido__qr p { margin: 0; }
}
.tarjeta-regalo { margin-top: var(--e3); padding: var(--e3); border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--crema); }
.tarjeta-regalo h3 { font-size: var(--p4); margin: .2rem 0 var(--e1); }
.tarjeta-regalo__ante, .tarjeta-regalo__de { font-family: var(--titular); font-size: var(--p2); }
@media print {
  body.imprime-regalo .hero-int, body.imprime-regalo .seccion--alt, body.imprime-regalo .regalo-form, body.imprime-regalo [data-mv-acciones],
  body.imprime-regalo .lista-reservar button, body.imprime-regalo [data-mv-estado], body.imprime-regalo .mi-viaje__mas, body.imprime-regalo [data-mv-vacio] { display: none !important; }
  body.imprime-regalo .regalo-cabecera { display: block; margin-bottom: var(--e3); padding-bottom: var(--e2); border-bottom: 2px solid var(--tinta); }
  body.imprime-regalo .regalo-cabecera h2 { font-size: 2.2rem; margin: .2rem 0; }
  body.imprime-bus main > :not(#regala-bus), body.imprime-bus #regala-bus > .contenedor > :not(.tarjeta-regalo) { display: none !important; }
  body.imprime-bus .tarjeta-regalo { border-width: 3px; }
}