/* ===========================================================================
   Ruta del Vino Calatayud · un solo archivo de estilos.
   1. Colores: los de su web. El granate #ab0032 da 7,56 sobre blanco, así que
      vale para texto y botones sin oscurecerlo (medido con la fórmula WCAG).
   2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños.
   3. Dos puntos de ruptura para todo: 560 · 900.
   =========================================================================== */
@font-face {
  font-family: "Roboto Slab";
  src: url("assets/fuentes/roboto-slab-500.woff2") format("woff2");
  font-weight: 500 700; 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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --marca: #ab0032;        /* su granate: 7,56 sobre blanco, 6,85 sobre --fondo-alt */
  --marca-texto: #ab0032;  /* el mismo: cumple para texto */
  --marca-honda: #7a0024;  /* 11,33 sobre blanco: foco, cabecera al pasar */
  --fondo: #FFFFFF;
  --fondo-alt: #F7F3EF;    /* crema cálido */
  --tinta: #262121;        /* su casi negro: 15,89 sobre blanco */
  --tinta-suave: #5A5050;  /* 7,78 sobre blanco, 7,05 sobre crema */
  --borde: #E3DAD2;

  --p0: .875rem; --p1: 1.0625rem; --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem;
  --h1: clamp(var(--p4), 5.4vw, var(--p6));
  --h2: clamp(var(--p3), 3.6vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --radio: 10px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titulares: "Roboto Slab", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); }
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; }
[hidden] { display: none !important; }
a { color: var(--marca-texto); text-underline-offset: .15em; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
.barra :focus-visible, .pie :focus-visible, .hero--foto :focus-visible { outline-color: #fff; }
/* Dentro de un párrafo, el relleno da los 44 px sin estirar la línea (inline-flex la estiraba: auditoría de diseño) */
:where(p, li) a:where([href^="tel:"], [href^="mailto:"]) { display: inline; padding-block: .8rem; }
:where(td, th, dd) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; font-family: var(--titulares); 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); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 46rem; }
/* La columna estrecha arranca donde el resto, no centrada (diseño, vuelta 3) */
.contenedor.estrecho { margin-left: max(1rem, (100% - 72rem) / 2); margin-right: auto; }
.lectura { max-width: 46rem; }  /* columna de lectura alineada a la izquierda con el resto de la portada */
.seccion { padding: var(--e4) 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion > .contenedor > h2:first-child, .seccion .estrecho > h2:first-child { margin-top: 0; }
.barra .solo-escritorio { display: none; }

/* --- barra fija (granate: su logo tiene las letras en blanco) --- */
.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(--marca); color: #fff; }
.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; color: #fff; text-decoration: none; }
.barra__logo { height: 40px; width: auto; }
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; color: #fff; text-decoration: none; border-radius: 6px; font-size: .95rem; }
.nav-escritorio a:hover { background: var(--marca-honda); }
.nav-escritorio a[aria-current="page"] { background: var(--marca-honda); font-weight: 700; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid rgb(255 255 255 / .7); border-radius: 6px; cursor: pointer; list-style: none; color: #fff; font-weight: 700; }
.nav-movil summary::-webkit-details-marker { display: none; }
/* Con el móvil en horizontal no cabía: se desliza dentro (QA, vuelta 1 del 1/10) */
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); max-height: calc(100dvh - var(--barra) - 4rem); overflow-y: auto; overscroll-behavior: contain; display: grid; background: var(--fondo); border-bottom: 3px solid var(--marca); padding: var(--e1) 1rem var(--e2); box-shadow: 0 8px 20px rgb(0 0 0 / .15); }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }
.nav-movil nav a[aria-current="page"] { color: var(--marca); font-weight: 700; }
.barra .boton { background: #fff; color: var(--marca); border-color: #fff; }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.2rem; text-align: center; text-wrap: balance; border-radius: var(--radio); background: var(--marca); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--marca); cursor: pointer; font-size: var(--p1); }
.boton:hover { background: var(--marca-honda); border-color: var(--marca-honda); }
.boton--sec { background: transparent; color: var(--marca); }
.boton--sec:hover { background: var(--fondo-alt); color: var(--marca-honda); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }

/* --- portada y cabeceras --- */
.hero { padding: var(--e4) 0 var(--e5); background: var(--fondo-alt); }
.hero--corto { padding: var(--e3) 0 var(--e4); }
/* La foto de la primera tarjeta, en franja: la página deja de abrir solo con texto (diseño, vuelta 1 del 1/10) */
.hero__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radio); margin: 0 0 var(--e2); background: var(--fondo-alt); }
@media (min-width: 900px) { .hero__foto { aspect-ratio: 3 / 1; } }
.hero--foto { position: relative; color: #fff; background: #1b1414; overflow: hidden; padding: var(--e5) 0; min-height: min(78vh, 40rem); display: flex; align-items: center; }
.hero--foto .hero__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 12 12 / .88) 0%, rgb(20 12 12 / .7) 55%, rgb(20 12 12 / .35) 100%); }
.hero--foto .contenedor { position: relative; z-index: 1; }
.hero--foto .antetitulo, .hero--foto .entradilla { color: #F3ECE6; }  /* sobre el velo (≈#231616): >12 */
.hero--foto a:not(.boton) { color: #fff; }
.hero--foto .boton--sec { color: #fff; border-color: #fff; }
/* Sobre la foto, la llamada en blanco como en la cabecera: es el foco de la pantalla (diseño, vuelta 2) */
.hero--foto .boton:not(.boton--sec) { background: #fff; color: var(--marca); border-color: #fff; }
.hero--foto .boton:not(.boton--sec):hover { background: var(--fondo-alt); color: var(--marca-honda); border-color: var(--fondo-alt); }
.hero--foto .boton--sec:hover { background: rgb(255 255 255 / .12); color: #fff; }
.antetitulo { margin: 0 0 var(--e1); color: var(--marca); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: var(--p0); }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 42rem; }
.sello { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: var(--e3) 0 0; padding: 0; list-style: none; font-size: .95rem; color: #F3ECE6; }
.sello li::before { content: "✓ "; color: #fff; font-weight: 700; }
[data-respuesta] { overflow-wrap: break-word; }  /* correos largos en la respuesta (reservas@hotelbalneario…) */
.pregunta { font-size: var(--p2); font-weight: 500; color: var(--tinta-suave); margin: var(--e2) 0 var(--e1); }  /* un paso por debajo del H1 (diseño, vuelta 1 del 1/10) */  /* subtítulo: el H1 manda */
a.tel, .nowrap { white-space: nowrap; }

/* --- migas --- */
.migas ol { display: flex; flex-wrap: wrap; gap: 0 .4rem; margin: 0; padding: var(--e2) 0 0; list-style: none; font-size: var(--p0); color: var(--tinta-suave); }
.migas li + li::before { content: "›"; margin-right: .4rem; }  /* el «›» viaja con su miga: al final de la línea quedaba colgando (QA, vuelta 2 del 1/10) */
.migas a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; min-width: 44px; }
.migas li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

/* --- rejillas y tarjetas --- */
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tarjeta { display: block; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tarjeta:hover { border-color: var(--marca); box-shadow: 0 6px 18px rgb(38 33 33 / .1); }
.tarjeta h3 { margin: 0 0 .3rem; color: var(--marca); font-size: var(--p2); }
.tarjeta--foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta__foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--fondo-alt); }
.tarjeta__cuerpo { display: block; padding: var(--e2) var(--e2) var(--e3); }
.tarjeta picture { display: contents; }  /* el <picture> del WebP no rompe la tarjeta: la foto sigue siendo su pieza */
.tarjeta__meta { display: block; color: var(--tinta-suave); font-size: var(--p0); }
.triaje .tarjeta p { margin: .3rem 0 0; color: var(--tinta-suave); }
.triaje .tarjeta { border-top: 4px solid var(--marca); }  /* el granate de la marca en el triaje (diseño, vuelta 4) */
.tarjeta__texto { display: block; margin-top: .3rem; font-size: var(--p0); color: var(--tinta); }
/* Tarjeta de bodega con su teléfono: el nombre se estira sobre toda la tarjeta y el teléfono queda encima */
.tarjeta--tel { position: relative; }
.tarjeta--tel h3 a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta__enlace:focus-visible::after { outline: 3px solid var(--marca-honda); outline-offset: -3px; }  /* hacia dentro: la tarjeta recorta lo de fuera */
.tarjeta__llamar { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 48px; padding-right: .5rem; margin-top: .2rem; font-weight: 700; flex-wrap: wrap; column-gap: .25em; }

/* --- fichas --- */
.ficha { display: grid; gap: var(--e3); }
.ficha__media img { width: 100%; border-radius: var(--radio); aspect-ratio: 10 / 7; object-fit: cover; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: var(--e3) 0 0; padding: var(--e2) 0 0; border-top: 1px solid var(--borde); }
.datos dt { font-weight: 700; padding-top: .7rem; }
.datos dd { margin: 0; padding-top: .7rem; min-width: 0; overflow-wrap: anywhere; }
.datos dd a { max-width: 100%; overflow-wrap: anywhere; } /* correos largos (reservas@hotelbalneario…) desbordaban 9 px en 375 */
.datos dd a:not([href^="tel:"]):not([href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
.cita { border-left: 4px solid var(--marca); padding-left: var(--e2); color: var(--tinta); }
.aviso { font-size: var(--p0); color: var(--tinta-suave); background: var(--fondo-alt); border-radius: 6px; padding: .7rem 1rem; }
.lista { padding-left: 1.2rem; }
.noticias { list-style: none; padding: 0; }
.noticias li { padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.noticias a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.noticias .con-foto { display: flex; gap: var(--e2); align-items: center; }
.noticias__foto { flex: none; width: 6.5rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 6px; background: var(--fondo-alt); }
.noticias time { display: block; color: var(--tinta-suave); font-size: var(--p0); }
.noticia__foto { border-radius: var(--radio); width: 100%; max-width: 30rem; height: auto; object-fit: contain; margin: var(--e2) 0; }  /* el cartel, entero y legible (diseño, vuelta 2 del 1/10) */

.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(--marca); color: #fff; font-weight: 700; }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-suave); }
.tabla { overflow-x: auto; }
.tabla th .suave { color: var(--tinta-suave); font-weight: 400; font-size: var(--p0); }
.tabla--apretada { font-size: var(--p0); }
.tabla--apretada th a:not([href^="tel:"]) { display: inline-block; min-height: 44px; }
.formulario select { width: 100%; max-width: 100%; }
.tabla--apretada th, .tabla--apretada td { padding: .6rem .3rem; }
.plan li { margin-bottom: .5rem; }
/* En el plan, cada enlace es su propia caja de 44 px: con relleno en línea, los teléfonos de líneas seguidas se pisaban y se llamaba al hotel de al lado (QA, vuelta 5) */
.plan li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.dos { display: grid; gap: var(--e3); align-items: center; }
.foto-bloque { display: block; background: var(--borde); width: 100%; aspect-ratio: 16 / 10; max-height: 14rem; object-fit: cover; border-radius: var(--radio); }
.cartel img { display: block; width: 100%; border-radius: var(--radio); }
.cartel figcaption { margin-top: .4rem; font-size: var(--p0); color: var(--tinta-suave); }
.cartel figcaption a { padding-block: .9rem; }  /* 44 px de toque sin estirar la línea */

/* --- formularios --- */
.formulario { display: grid; gap: var(--e2); max-width: 36rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 700; }
button { font: inherit; }  /* el botón de enviar salía en Arial (QA, vuelta 3) */
.formulario input, .formulario select, .formulario textarea { font: inherit; min-height: 48px; padding: .6rem .8rem; border: 1px solid #8C8080; border-radius: 8px; background: #fff; color: var(--tinta); font-weight: 400; }
.formulario textarea { min-height: 7rem; resize: vertical; }
.formulario .casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.formulario .casilla input { min-height: 24px; width: 24px; height: 24px; margin-top: .15rem; flex: none; }
.formulario .casilla a { display: inline-flex; align-items: center; min-height: 44px; }
.formulario .ayuda { font-weight: 400; font-size: var(--p0); color: var(--tinta-suave); }
.formulario .campo-error { margin: -.4rem 0 0; font-size: var(--p0); font-weight: 700; color: var(--marca); }
.formulario [aria-invalid="true"] { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.oculto-bot { position: absolute; left: -9999px; }

/* --- escapadas: planificador, paradas y lista para reservar (encargo, 30/9/2026) --- */
.suave { color: var(--tinta-suave); }
.destacado { background: var(--fondo-alt); border-left: 4px solid var(--marca); padding: .8rem 1rem; border-radius: 0 6px 6px 0; }
.planificador fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.planificador legend { font-weight: 700; padding: 0; margin-bottom: .4rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { display: inline-flex !important; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .9rem; border: 1px solid #8C8080; border-radius: 999px; background: #fff; font-weight: 400 !important; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--marca); background: #FBEFF2; box-shadow: inset 0 0 0 1px var(--marca); }
.opcion input { width: 20px; height: 20px; min-height: 0 !important; margin: 0; accent-color: var(--marca); }
.dos-campos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.plan-resultado:focus { outline: none; }
.paradas { list-style: none; padding: 0; margin: 0 0 var(--e3); border-left: 3px solid var(--borde); }
.parada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding: .7rem 0 .7rem 1.2rem; }
.parada::before { content: ""; position: absolute; left: -8px; top: 1.05rem; width: 13px; height: 13px; border-radius: 50%; background: var(--marca); }
.parada__cuando { font-size: var(--p0); font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .03em; }
.parada__nombre { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--p2); font-family: var(--titulares); }
.parada__meta, .parada__viaje, .parada__nota { display: block; font-size: var(--p0); color: var(--tinta-suave); }
.parada__viaje { color: var(--tinta); font-weight: 600; }
.parada .tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.reservas { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.reserva { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e2); background: var(--fondo); }
.reserva__quien { margin: 0; font-weight: 700; }
.reserva__quien a { display: inline-flex; align-items: center; min-height: 44px; }
.reserva__msg { margin: .3rem 0 .6rem; font-style: italic; }
.reserva__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.reserva__botones .boton { min-height: 44px; padding: .4rem .9rem; font-size: var(--p0); }
.agenda { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e2); }
.evento { border-left: 4px solid var(--marca); padding: .2rem 0 .2rem 1rem; }
.evento--pasado { border-left-color: var(--borde); }
.evento h3 { margin: .2rem 0; }
.evento p { margin: .2rem 0; }
.evento__fecha { font-weight: 700; color: var(--tinta-suave); font-size: var(--p0); }
.evento__socios a, .evento .suave a { display: inline-flex; align-items: center; min-height: 44px; }
.etiqueta { display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px; background: var(--fondo-alt); border: 1px solid var(--borde); font-weight: 400; }
.agenda__anio { margin-top: var(--e4); }
.tabla a:not([href^="tel:"]) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.copiado { flex-basis: 100%; font-size: var(--p0); color: var(--tinta); font-weight: 600; }
.copiado:empty { display: none; }
.error-plan { color: var(--marca-honda); font-weight: 700; margin: .5rem 0 0; }
.error-plan:empty { display: none; }
@media (max-width: 359px) { th, td { padding: .6rem .25rem; } }  /* a 320 la tabla del Bus se cortaba (QA, vuelta 1 del 1/10) */
.tabla:focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
.vengo { font-size: var(--p0); color: var(--tinta-suave); }

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--tinta); color: #E9E4DF; font-size: var(--p0); }
.pie a { color: #fff; }
/* Teléfono y correo en líneas seguidas: con relleno en línea se pisaban y el toque bajo el teléfono abría el correo (QA, vuelta 5) */
.pie p a:where([href^="tel:"], [href^="mailto:"]), .contacto-linea a { display: inline-block; padding-block: .7rem; max-width: 100%; overflow-wrap: anywhere; }
.pie__logo { display: block; height: 40px; width: auto; margin-bottom: var(--e1); filter: brightness(0) invert(1); }
.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__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #4A4040; color: #D6CFC9; }

/* --- botón fijo de llamada, solo en el móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--marca); box-shadow: 0 -2px 10px rgb(0 0 0 / .2); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding-inline: .5rem; text-align: center; color: #fff; font-weight: 700; text-decoration: none; }
.barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .3); }
.barra-movil a:has(small) { flex-direction: column; line-height: 1.2; font-size: .9375rem; }  /* «Llamar al restaurante» en una línea a 375: la barra mide lo mismo en todas las fichas (diseño, vuelta 1 del 1/10) */
.barra-movil small { font-size: .8rem; font-weight: 400; }
.cookies-abierto .barra-movil { display: none; }

@media (max-width: 899px) {
  /* La barra fija de llamada no puede tapar lo que tiene el foco al tabular (WCAG 2.4.11) */
  html { scroll-padding-bottom: 72px; }
  /* Ficha en el móvil: la foto del sitio sube bajo el botón de llamada, antes de los datos */
  .ficha { gap: 0; grid-template-columns: minmax(0, 1fr); }  /* un correo largo no ensancha la columna */
  .ficha__texto { display: contents; }
  /* La foto del socio, arriba y baja: la ficha de más intención abría solo con texto (diseño, vuelta 2 del 1/10) */
  .ficha__media { order: -1; margin: 0 0 var(--e2); }
  .ficha__media img { aspect-ratio: 12 / 5; max-height: 10rem; }
  .ficha__texto > .datos, .ficha__texto > .datos ~ * { order: 2; }
  .ficha .pregunta { margin-top: 0; }  /* en la rejilla no se colapsan los márgenes */
}
@media (max-width: 559px) {
  /* Primera pantalla del móvil: menos aire y solo la certificación en el sello (lo demás está debajo) */
  .hero--foto { padding: var(--e3) 0 var(--e4); min-height: 0; }
  .sello li + li { display: none; }
  /* Cuerpo a 18 px: se lee en el móvil, al aire libre (diseño, vuelta 2) */
  body { font-size: 1.125rem; }
  /* Botones apilados, a todo el ancho: se tocan mejor con el pulgar */
  .acciones { flex-direction: column; align-items: stretch; }
  /* Triaje en dos columnas, solo el título: la portada pasaba de 8 pantallas */
  .triaje .rejilla { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .triaje .tarjeta { display: flex; align-items: center; min-height: 4.5rem; padding: .8rem; }
  .triaje .tarjeta h3 { margin: 0; font-size: var(--p1); }
  .triaje .tarjeta p { display: none; }
  /* Las migas ocupaban dos líneas con el nombre de la página suelto: el H1 ya lo dice */
  .migas li[aria-current] { display: none; }
  /* En el móvil, la tarjeta con foto va en horizontal: un listado de 8 pasa de 8 pantallas a 3 */
  .tarjeta--foto { flex-direction: row; align-items: stretch; }
  .tarjeta--foto .tarjeta__foto { width: 38%; aspect-ratio: auto; height: auto; min-height: 6.5rem; flex: none; }
  .tarjeta--foto .tarjeta__cuerpo { padding: .8rem 1rem; align-self: center; min-width: 0; flex: 1 1 0; }  /* a 320 px cortaba el teléfono (QA, vuelta 2) */
  .tarjeta--foto h3 { font-size: var(--p1); }
  .tarjeta__texto { font-size: .9375rem; }  /* lo único que se lee antes de llamar: 15 px, no 14 (diseño, vuelta 1 del 1/10) */
  /* En la portada del móvil, el bus ya tiene su tarjeta en «Tres escapadas»: sin segunda foto (8,3 pantallas) */
  /* El viñedo de altura, la seña de Calatayud, también en el móvil: en franja, encima del bus (diseño, vuelta 1 del 1/10) */
  .portada-bus picture { order: -1; }
  .solo-ancho { display: none; }  /* en el móvil, cada tarjeta ya lleva a su ficha: la portada no pasa de 8 pantallas */
  .portada-bus .foto-bloque { aspect-ratio: 3 / 1; width: 100%; height: auto; object-fit: cover; }
}
@media (min-width: 900px) {
  .nav-escritorio { display: flex; }
  .nav-movil, .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
  .ficha { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .ficha__media { position: sticky; top: calc(var(--barra) + 1rem); }
  .dos { grid-template-columns: 1.1fr .9fr; }
  .foto-bloque { max-height: none; }
  /* El logo dice «esto es de la Ruta»: más grande en escritorio */
  :root { --barra: 72px; }
  .barra__logo { height: 48px; }
  /* El velo solo donde hay texto; a la derecha se ve la bodega */
  .hero--foto::after { background: linear-gradient(90deg, rgb(20 12 12 / .88) 0%, rgb(20 12 12 / .72) 45%, rgb(20 12 12 / .2) 100%); }
  .hero--foto .hero__fondo { object-position: 70% 50%; }
}
@media (min-width: 1100px) {
  .rejilla--cinco { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .sello li:nth-child(n+3) { display: none; }  /* a 768 el tercero colgaba solo */
}
@media (min-width: 900px) {
  .triaje .tarjeta h3 { min-height: 2.4em; }
  /* Seis tarjetas, 3 + 3; y las escapadas, sin hueco a la derecha (diseño, vuelta 1 del 1/10) */
  .triaje .rejilla { grid-template-columns: repeat(3, 1fr); }
  .rejilla--escapadas { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.rejilla--cinco .tarjeta__foto { object-position: center 45%; }
@media (min-width: 900px) and (max-width: 1180px) {
  .barra .solo-escritorio { display: none; }  /* con 7 enlaces no cabe el botón en la cabecera... */
  .barra-movil { display: flex; }             /* ...así que se queda la barra fija de abajo (diseño, vuelta 2) */
  .pie { padding-bottom: calc(var(--e4) + 64px); }
}
@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 { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
}

/* --- esquema de los pueblos (diseño, vuelta 1 del 1/10): SVG propio, colores de la marca --- */
.mapa { margin: var(--e3) 0; }
.mapa svg { display: block; width: 100%; max-width: 34rem; height: auto; margin-inline: auto; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); }
.mapa__lineas line { stroke: var(--borde); stroke-width: 2; stroke-dasharray: 4 5; }
.mapa__bodega { fill: var(--marca); stroke: #fff; stroke-width: 2; }
.mapa__otro { fill: #fff; stroke: var(--marca); stroke-width: 3; }
.mapa__textos text { font-family: var(--titulares); font-size: 17px; font-weight: 700; fill: var(--tinta); paint-order: stroke; stroke: var(--fondo); stroke-width: 4px; stroke-linejoin: round; }
.mapa__min { font-family: inherit; font-weight: 400; fill: var(--tinta-suave); }
.mapa figcaption { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); text-align: center; }
.mapa__ley { white-space: nowrap; margin-inline: .4rem; }
.mapa__punto { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 2px solid var(--marca); vertical-align: -.05em; }
.mapa__punto--bodega { background: var(--marca); }

.franja-vivo { background: var(--marca-honda); color: #fff; }
.franja-vivo .contenedor { padding-top: .7rem; padding-bottom: .7rem; display: grid; gap: .25rem; }
.franja-vivo p { margin: 0; }
.aviso-vivo, .aviso-vivo b { color: #fff; }
.muestra-franja { font-size: var(--p0); }
.muestra-marca { display: inline-block; margin: .6rem 0 0; padding: .15rem .6rem; border-radius: 999px; background: #FFE89A; color: var(--tinta); font-weight: 700; font-size: var(--p0); }
.vivo-agenda { margin: var(--e2) 0; }
.vivo-agenda .agenda { margin-bottom: 0; }
.vivo-agenda__titulo { margin: 0 0 .4rem; font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .03em; font-size: var(--p0); }
.vivo-agenda__mas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.evento--vivo { background: var(--fondo); }
.evento__plazas { font-weight: 700; color: var(--marca-honda); }