/* =========================================================
   Mesuca — estilos
   1. Tokens de marca  2. Base  3. Componentes  4. Páginas
   ========================================================= */

/* ---------- 1. Tokens (de la hoja de estilos de marca) ---------- */
:root {
  --rojo-cantabria: #C8102E;
  --rojo-oscuro: #A50D26;
  --rojo-claro: #FBEAEC;
  --blanco: #FFFFFF;
  --superficie: #F7F3F1;
  --hueco: #EFE8E4;
  --borde: #E2D9D4;
  --tinta: #1F1A17;
  --tinta-suave: #5C524C;
  --exito: #1E5B3A;
  --exito-claro: #E6F0EA;

  --font-display: "Rubik", system-ui, sans-serif;
  --font-texto: "Karla", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px;
  --sombra-tarjeta: 0 12px 32px rgba(31, 26, 23, .08);

  --ancho: 1240px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rojo-oscuro); text-underline-offset: 3px; }
a:hover { color: #7A0A1C; }
:focus-visible { outline: 3px solid var(--rojo-oscuro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--space-3); color: var(--tinta); }
h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; }
h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.6px; }
h3, .h3 { font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--space-6); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--space-4); top: -60px; background: var(--tinta); color: var(--blanco); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 10; }
.saltar:focus { top: var(--space-4); }
.rojo { color: var(--rojo-cantabria); }
.mt { margin-top: var(--space-8); }
.eyebrow { display: inline-block; background: var(--rojo-claro); color: var(--rojo-oscuro); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.entradilla { font-size: 20px; line-height: 1.5; color: var(--tinta-suave); max-width: 60ch; }
.nota { font-size: 15px; color: var(--tinta-suave); margin: var(--space-3) 0 0; }

.seccion { padding-block: var(--space-16); }
.seccion-corta { padding-block: var(--space-8); }
.seccion-gris { background: var(--superficie); }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.seccion-cabeza h2 { margin: 0; }
.seccion-cabeza a { font-weight: 700; }

/* ---------- 3. Componentes ---------- */

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--borde); background: var(--blanco); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.logo span { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.5px; }
.logo:hover { color: var(--tinta); }
.logo-blanco, .logo-blanco:hover { color: var(--blanco); }
.nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); font-weight: 700; text-decoration: none; color: var(--tinta); border-radius: var(--radius-pill); }
.nav a:hover { background: var(--superficie); color: var(--tinta); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav .nav-destacado { color: var(--rojo-oscuro); }

/* Migas */
.migas ol { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-4); font-size: 15px; color: var(--tinta-suave); }
.migas li + li::before { content: "›"; margin-right: var(--space-2); color: var(--borde); }
.migas a { color: var(--tinta-suave); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: 17px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.boton-principal { background: var(--rojo-cantabria); color: var(--blanco); }
.boton-principal:hover { background: var(--rojo-oscuro); color: var(--blanco); }
.boton-principal:disabled { background: var(--hueco); color: var(--tinta-suave); cursor: not-allowed; }
.boton-secundario { border-color: var(--tinta); color: var(--tinta); border-radius: var(--radius-pill); background: transparent; }
.boton-secundario:hover { background: var(--tinta); color: var(--blanco); }
.boton-blanco { background: var(--blanco); color: var(--rojo-oscuro); border-radius: var(--radius-pill); }
.boton-blanco:hover { color: var(--rojo-oscuro); background: var(--rojo-claro); }
.boton-ancho { width: 100%; }
.boton-texto { background: none; border: 0; color: var(--rojo-oscuro); font-weight: 700; cursor: pointer; padding: var(--space-3) 0; min-height: 44px; }

/* Chips y etiquetas */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--blanco); border: 1.5px solid var(--borde); color: var(--tinta); text-decoration: none; font-weight: 600; }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip-extra { color: var(--tinta-suave); font-weight: 500; }
.chip-rojo { background: var(--rojo-claro); border-color: var(--rojo-claro); color: var(--rojo-oscuro); font-weight: 700; border-radius: var(--radius-md); }
.chip-rojo:hover { border-color: var(--rojo-oscuro); color: var(--rojo-oscuro); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.etiqueta { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--superficie); color: var(--tinta-suave); font-weight: 700; font-size: 14px; text-decoration: none; }
.etiqueta-roja { background: var(--rojo-claro); color: var(--rojo-oscuro); }
.insignia { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--superficie); color: var(--tinta-suave); }
.insignia-roja { background: var(--rojo-cantabria); color: var(--blanco); }

/* Iconos */
.icono { flex: none; }

/* Tarjetas de restaurante */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--space-8) var(--space-6); }
.tarjeta { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.tarjeta[hidden] { display: none; }
.tarjeta-enlace { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--tinta); width: 100%; }
.tarjeta-enlace:hover .tarjeta-titulo { text-decoration: underline; }
.tarjeta-foto, .tarjeta .foto-hueco { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.tarjeta-titulo { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0; letter-spacing: -.2px; }
.tarjeta-meta { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.precio { font-weight: 700; margin-left: var(--space-1); }
.foto-hueco { display: flex; align-items: center; justify-content: center; background: var(--hueco); border-radius: var(--radius-lg); }
.foto-hueco .simbolo { opacity: .35; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: var(--space-1); border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.campo label, .campo legend, .buscador-campo label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-suave); padding: 0; margin-bottom: var(--space-1); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--borde); border-radius: var(--radius-md); background: var(--blanco); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta); outline: none; }
.campo-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--space-4); }
.opcional { text-transform: none; letter-spacing: 0; font-weight: 500; }
.casilla { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; margin-bottom: var(--space-4); }
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rojo-cantabria); flex: none; }

/* Buscador */
.buscador, .filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); padding: 10px; border: 1.5px solid var(--borde); border-radius: var(--radius-lg); background: var(--blanco); box-shadow: var(--sombra-tarjeta); align-items: stretch; }
.buscador-campo { display: flex; flex-direction: column; padding: 10px var(--space-4); border-radius: var(--radius-md); background: var(--superficie); }
.buscador-campo label { margin: 0; }
.buscador-campo input, .buscador-campo select { border: 0; background: transparent; font-size: 17px; padding: 2px 0; min-height: 30px; outline: none; width: 100%; }
.buscador .boton { min-height: 60px; }
.filtros { box-shadow: none; margin-bottom: var(--space-4); }
.filtros-casilla { align-self: center; margin: 0; padding: 0 var(--space-3); }
.resultado { color: var(--tinta-suave); font-weight: 600; margin-bottom: var(--space-6); min-height: 1.6em; }
.vacio, .aviso { background: var(--superficie); border-radius: var(--radius-lg); padding: var(--space-8); }
.aviso-ejemplo { background: var(--rojo-claro); color: var(--rojo-oscuro); font-weight: 700; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); margin-bottom: var(--space-4); }

/* Horario */
.horario { margin: 0; display: grid; gap: var(--space-1); }
.horario div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--borde); }
.horario dt { font-weight: 700; }
.horario dd { margin: 0; text-align: right; }
.horario .cerrado dd { color: var(--tinta-suave); }

/* Contacto */
.contacto { display: flex; flex-direction: column; gap: var(--space-2); }
.boton-contacto { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--borde); color: var(--tinta); text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.boton-contacto:hover { border-color: var(--tinta); color: var(--tinta); }
.boton-contacto-principal { background: var(--rojo-cantabria); border-color: var(--rojo-cantabria); color: var(--blanco); }
.boton-contacto-principal:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: var(--blanco); }
.contacto-secundario .boton-contacto { min-height: 46px; font-weight: 600; }

/* Banda roja */
.banda-roja { background: var(--rojo-cantabria); color: var(--blanco); }
.banda-fila { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; padding-block: var(--space-16); }
.banda-fila > div { flex: 999 1 460px; }
.banda-roja h2 { color: var(--blanco); font-size: clamp(28px, 4vw, 40px); }
.banda-roja p { max-width: 56ch; margin: 0; font-size: 18px; }

/* FAQ */
.faq { display: grid; gap: var(--space-2); max-width: 820px; }
.faq details { border: 1.5px solid var(--borde); border-radius: var(--radius-md); padding: 0 var(--space-6); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: var(--space-4) 0; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rojo-cantabria); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--tinta-suave); }

/* Pie */
.pie { background: var(--tinta); color: #D9D0CB; margin-top: 0; }
.pie a { color: #D9D0CB; text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie-fila { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: space-between; padding-block: var(--space-12); }
.pie-marca { max-width: 320px; }
.pie-marca p { margin-top: var(--space-3); font-size: 15px; }
.pie-cols { display: flex; flex-wrap: wrap; gap: var(--space-12); font-size: 15px; }
.pie-cols li { margin-bottom: var(--space-2); }
.pie-titulo { color: var(--blanco); font-weight: 700; margin-bottom: var(--space-3); }
.pie-final { border-top: 1px solid #3A322E; padding-block: var(--space-6); font-size: 14px; }

/* ---------- 4. Páginas ---------- */

/* Portada */
.hero { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
.hero-texto { flex: 999 1 560px; min-width: 0; }
.hero h1 { font-size: clamp(44px, 7vw, 76px); letter-spacing: -2px; line-height: 1; margin-bottom: var(--space-6); }
.hero .entradilla { margin-bottom: var(--space-8); }
.hero-marca { flex: 1 1 360px; max-width: 440px; aspect-ratio: 1; background: var(--rojo-cantabria); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; }
.hero-marca .simbolo { width: 64%; height: auto; }
@media (max-width: 760px) { .hero-marca { display: none; } .hero { padding-block: var(--space-8) var(--space-12); } }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.pasos li { border: 1.5px solid var(--borde); border-radius: var(--radius-lg); padding: var(--space-8); }
.pasos p { margin: 0; color: var(--tinta-suave); }
.paso-n { display: inline-flex; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--rojo-claro); color: var(--rojo-oscuro); align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: var(--space-4); }

/* Cabeceras de página */
.cabeza-pagina { padding-block: var(--space-6) var(--space-8); }
.cabeza-pagina .chips { margin-top: var(--space-6); }
.cabeza-centrada { text-align: center; }
.cabeza-centrada .entradilla { margin-inline: auto; }
.zonas-lista { display: grid; gap: var(--space-8); padding-bottom: var(--space-16); }
.texto-legal { max-width: 760px; min-height: 50vh; }

/* Ficha */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.galeria img, .galeria .foto-hueco { width: 100%; height: clamp(220px, 34vw, 400px); object-fit: cover; border-radius: var(--radius-lg); }
.galeria > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .galeria > :first-child { grid-column: span 2; } }
.ficha { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-start; padding-block: var(--space-8) var(--space-16); }
.ficha-info { flex: 999 1 560px; min-width: 0; }
.ficha-lateral { flex: 1 1 360px; max-width: 460px; min-width: 0; display: grid; gap: var(--space-6); position: sticky; top: var(--space-6); }
@media (max-width: 960px) { .ficha-lateral { position: static; max-width: none; } }
.ficha-cabeza { margin-bottom: var(--space-8); }
.ficha-direccion { display: flex; gap: var(--space-2); align-items: center; color: var(--tinta-suave); font-size: 17px; }
.ficha-bloque { padding-block: var(--space-6); border-top: 1px solid var(--borde); }
.ficha-bloque h2 { font-size: 24px; }
.ficha-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); }
.platos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.platos li { display: flex; justify-content: space-between; gap: var(--space-3); border: 1.5px solid var(--borde); border-radius: var(--radius-md); padding: var(--space-4); font-weight: 600; }
.plato-precio { color: var(--tinta-suave); font-weight: 500; }
.tarjeta-lateral, .reserva { border: 1.5px solid var(--borde); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--blanco); }
.tarjeta-lateral > .boton { margin-bottom: var(--space-3); }
.reserva { box-shadow: var(--sombra-tarjeta); }
.reserva h2 { font-size: 26px; }

/* Widget de reserva */
.contador { display: flex; align-items: center; gap: var(--space-4); }
.contador-boton { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1.5px solid var(--borde); background: var(--blanco); font-size: 22px; cursor: pointer; }
.contador-boton:hover { border-color: var(--tinta); }
.contador-valor { font-family: var(--font-display); font-weight: 600; font-size: 22px; min-width: 120px; text-align: center; }
.dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; }
.opcion-reserva { min-height: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--borde); background: var(--blanco); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; padding: 4px; line-height: 1.2; }
.opcion-reserva small { font-size: 12px; text-transform: uppercase; font-weight: 700; color: var(--tinta-suave); }
.opcion-reserva:hover { border-color: var(--tinta); }
.opcion-reserva[aria-pressed="true"] { background: var(--rojo-cantabria); border-color: var(--rojo-cantabria); color: var(--blanco); }
.opcion-reserva[aria-pressed="true"] small { color: var(--blanco); }
.sin-horas { color: var(--tinta-suave); margin: 0; }
.reserva-resumen { font-weight: 700; background: var(--superficie); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.reserva-error { color: var(--rojo-oscuro); font-weight: 700; }
.reserva-ok { text-align: left; }
.ok-icono { display: inline-flex; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--rojo-claro); color: var(--rojo-cantabria); align-items: center; justify-content: center; }
.ok-titulo { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: var(--space-3) 0; }

/* Para restaurantes */
.caminos { display: grid; gap: var(--space-12); }
.camino > p { color: var(--tinta-suave); max-width: 60ch; }
.planes { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.planes-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--borde); border-radius: var(--radius-lg); padding: var(--space-8); }
.plan-destacado { border: 2px solid var(--rojo-cantabria); box-shadow: var(--sombra-tarjeta); }
.plan-cinta { position: absolute; top: -14px; left: var(--space-8); background: var(--rojo-cantabria); color: var(--blanco); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); margin: 0; }
.plan h3 { font-size: 26px; margin-bottom: var(--space-2); }
.plan-precio { margin-bottom: var(--space-2); color: var(--tinta-suave); }
.plan-precio strong { font-family: var(--font-display); font-size: 40px; color: var(--tinta); letter-spacing: -1px; }
.plan-para { font-weight: 600; }
.plan-lista { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); flex: 1; }
.plan-lista li { display: flex; gap: var(--space-2); align-items: flex-start; }
.plan-lista .icono { color: var(--rojo-cantabria); margin-top: 2px; }
.tabla-scroll { overflow-x: auto; border: 1.5px solid var(--borde); border-radius: var(--radius-lg); }
.comparativa { width: 100%; min-width: 720px; border-collapse: collapse; }
.comparativa th, .comparativa td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--borde); text-align: center; }
.comparativa tbody tr:last-child > * { border-bottom: 0; }
.comparativa th[scope="row"], .comparativa thead th:first-child { text-align: left; font-weight: 600; }
.comparativa thead th { font-family: var(--font-display); font-size: 18px; background: var(--superficie); }
.comparativa thead th span { display: block; font-family: var(--font-texto); font-size: 14px; font-weight: 500; color: var(--tinta-suave); }
.comparativa .si { color: var(--rojo-cantabria); display: inline-flex; }
.comparativa .no { color: var(--tinta-suave); }
.alta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--space-12); align-items: start; }
.formulario { background: var(--blanco); border-radius: var(--radius-lg); padding: var(--space-8); }
.opciones-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.opcion { display: flex; gap: var(--space-2); align-items: center; min-height: 48px; padding: 0 var(--space-3); border: 1.5px solid var(--borde); border-radius: var(--radius-md); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--tinta); cursor: pointer; }
.opcion span { margin-left: auto; color: var(--tinta-suave); font-weight: 500; }
.opcion input { accent-color: var(--rojo-cantabria); }
.opcion:has(input:checked) { border-color: var(--rojo-cantabria); background: var(--rojo-claro); }

/* Ajustes: radios y casillas dentro de .campo no heredan el estilo de input de texto */
.campo .opcion input, .campo .casilla input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; }
.opciones-plan { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Barra fija de reserva en móvil (la ficha queda lejos del widget) */
.barra-movil { display: none; }
@media (max-width: 960px) {
  .barra-movil { display: block; position: sticky; bottom: 0; z-index: 5; padding: var(--space-3) var(--space-6); background: var(--blanco); border-top: 1px solid var(--borde); }
  .nav a { padding: 0 var(--space-2); }
}

/* =========================================================
   5. Ampliaciones: menú móvil, zonas, legales, mi-reserva
   ========================================================= */

/* Menú: escritorio / móvil */
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1.5px solid var(--borde); border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; }
.menu-movil summary::-webkit-details-marker { display: none; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px; position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; }
.menu-movil[open] .hamburguesa { background: transparent; }
.menu-movil[open] .hamburguesa::before { top: 0; transform: rotate(45deg); }
.menu-movil[open] .hamburguesa::after { top: 0; transform: rotate(-45deg); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radius-lg); box-shadow: var(--sombra-tarjeta); padding: var(--space-2); }
.menu-movil nav a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--tinta); font-weight: 700; }
.menu-movil nav a:hover, .menu-movil nav a[aria-current="page"] { background: var(--superficie); }
.menu-movil nav .nav-destacado { color: var(--rojo-oscuro); }
@media (max-width: 760px) {
  .nav-escritorio { display: none; }
  .menu-movil { display: block; }
  .cabecera-fila { min-height: 64px; flex-wrap: nowrap; }
  .logo span { font-size: 24px; }
  .contenedor { padding-inline: var(--space-4); }
  .seccion { padding-block: var(--space-12); }
  .entradilla { font-size: 18px; }
  .buscador .boton { min-height: 52px; }
  .banda-fila { padding-block: var(--space-12); }
  .plan { padding: var(--space-6); }
  .formulario { padding: var(--space-6) var(--space-4); }
  .faq details { padding: 0 var(--space-4); }
}

/* Campo trampa anti-bots: fuera de la vista para humanos */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Avisos de formularios */
.aviso-ok, .aviso-error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 700; }
.aviso-ok { background: var(--exito-claro); color: var(--exito); }
.aviso-error { background: var(--rojo-claro); color: var(--rojo-oscuro); }

/* Pie */
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

/* Cabecera en banda (zonas) */
.cabeza-banda { background: var(--superficie); padding-bottom: var(--space-12); overflow: hidden; }
.cabeza-banda-fila { display: flex; gap: var(--space-12); align-items: center; }
.cabeza-banda-texto { flex: 1 1 auto; min-width: 0; padding-top: var(--space-4); }
.cabeza-banda-texto h1 { font-size: clamp(34px, 5.5vw, 56px); letter-spacing: -1.6px; max-width: 18ch; }
.cabeza-banda-marca { flex: none; width: 260px; height: 260px; border-radius: var(--radius-xl); background: var(--rojo-cantabria); display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .cabeza-banda-marca { display: none; } }
.cifras { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
.cifras div { background: var(--blanco); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4); }
.cifras dt { font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.cifras dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; }
.tipico { font-size: 17px; background: var(--blanco); display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.cabeza-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pastilla { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--blanco); font-weight: 700; color: var(--tinta); text-decoration: none; }
.pastilla-roja { background: var(--rojo-cantabria); color: var(--blanco); }
.pastilla-roja:hover { background: var(--rojo-oscuro); color: var(--blanco); }
.saltos { padding-block: var(--space-6) 0; }

/* Comarcas y tarjetas de zona */
.comarcas { display: grid; gap: var(--space-12); padding-block: var(--space-8) var(--space-8); }
.comarca { scroll-margin-top: var(--space-6); }
.comarca-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--tinta); padding-bottom: var(--space-2); margin-bottom: var(--space-6); }
.comarca-cabeza h2 { margin: 0; }
.comarca-num { color: var(--tinta-suave); font-weight: 700; }
.zonas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.zonas-rejilla-compacta { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.zona-tarjeta { height: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--blanco); border: 1.5px solid var(--borde); color: var(--tinta); text-decoration: none; transition: border-color .15s, transform .15s; }
.zona-tarjeta:hover { border-color: var(--tinta); color: var(--tinta); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .zona-tarjeta { transition: none; } .zona-tarjeta:hover { transform: none; } }
.zona-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.zona-nombre { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.3px; }
.zona-num { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--rojo-cantabria); color: var(--blanco); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.zona-num small { font-family: var(--font-texto); font-size: 11px; font-weight: 700; margin-top: 2px; }
.zona-desc { color: var(--tinta-suave); font-size: 16px; line-height: 1.5; }
.zona-tipico { font-size: 15px; }
.zona-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.zona-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.zona-etiquetas .etiqueta { font-size: 13px; padding: 4px 10px; }
.zona-pronto { font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
.zona-ir { flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); font-weight: 700; font-size: 18px; }
.zona-tarjeta:hover .zona-ir { background: var(--tinta); color: var(--blanco); }
.zona-vacia { background: transparent; border-style: dashed; }
.zona-compacta { padding: var(--space-4); gap: var(--space-2); }
.zona-compacta .zona-nombre { font-size: 19px; }
.zona-compacta .zona-num { min-width: 44px; height: 44px; font-size: 18px; }
.zona-compacta .zona-num small { display: none; }
.aviso-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.aviso-cta > div { flex: 1 1 380px; }
.aviso-cta p { margin: 0; color: var(--tinta-suave); }

/* Páginas legales */
.legal { display: flex; flex-wrap: wrap-reverse; gap: var(--space-12); align-items: flex-start; padding-block: var(--space-4) var(--space-16); }
.legal-texto { flex: 999 1 560px; min-width: 0; max-width: 760px; }
.legal-texto h2 { font-size: 24px; margin-top: var(--space-8); scroll-margin-top: var(--space-6); }
.legal-texto ul { list-style: disc; padding-left: var(--space-6); display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.legal-texto li::marker { color: var(--rojo-cantabria); }
.legal-indice { flex: 1 1 220px; max-width: 280px; position: sticky; top: var(--space-6); background: var(--superficie); border-radius: var(--radius-lg); padding: var(--space-6); }
.legal-indice .pie-titulo { color: var(--tinta); }
.legal-indice ul { display: grid; gap: 2px; }
.legal-indice a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--tinta); font-weight: 600; }
.legal-indice a:hover { background: var(--blanco); color: var(--tinta); }
.legal-indice a[aria-current="page"] { background: var(--blanco); color: var(--rojo-oscuro); font-weight: 700; }
@media (max-width: 860px) { .legal-indice { position: static; max-width: none; } }
.legal-toc { background: var(--superficie); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.legal-toc ol { list-style: decimal; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.tabla-legal { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 16px; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--borde); }
.tabla-legal thead th { background: var(--superficie); font-family: var(--font-display); }
.legal-texto .tabla-scroll { margin-bottom: var(--space-4); }
code { font-size: .9em; background: var(--superficie); padding: 2px 6px; border-radius: 6px; }

/* Mi reserva */
.mi-reserva { max-width: 640px; min-height: 60vh; }
.datos-reserva { display: grid; gap: 0; margin: var(--space-6) 0; border: 1.5px solid var(--borde); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-6); }
.datos-reserva div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--borde); }
.datos-reserva div:last-child { border-bottom: 0; }
.datos-reserva dt { color: var(--tinta-suave); font-weight: 600; }
.datos-reserva dd { margin: 0; font-weight: 700; text-align: right; }
.acciones-reserva { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.boton-peligro { background: var(--blanco); color: var(--rojo-oscuro); border-color: var(--rojo-oscuro); border-radius: var(--radius-pill); }
.boton-peligro:hover { background: var(--rojo-oscuro); color: var(--blanco); }
.estado { display: inline-block; white-space: nowrap; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; }
.estado-confirmada { background: var(--exito-claro); color: var(--exito); }
.estado-pendiente { background: var(--rojo-claro); color: var(--rojo-oscuro); }
.estado-cancelada, .estado-no_vino { background: var(--superficie); color: var(--tinta-suave); }

/* Widget: horas completas */
.opcion-reserva:disabled { background: var(--superficie); color: #8A7D76; border-color: var(--superficie); text-decoration: line-through; cursor: not-allowed; }

/* Casillas: el texto con enlaces fluye como un párrafo */
.casilla { display: block; position: relative; padding-left: 32px; line-height: 1.5; }
.casilla input { position: absolute; left: 0; top: 1px; margin: 0; }
.filtros-casilla { display: flex; align-items: center; padding-left: 36px; }
.filtros-casilla input { left: 10px; top: 50%; transform: translateY(-50%); }

/* Zonas por comarca: columnas que rellenan el ancho */
.comarcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-8) var(--space-6); align-items: start; padding-block: var(--space-6) var(--space-4); }
.comarca-cabeza h3 { margin: 0; font-size: 22px; }
.comarca-cabeza { margin-bottom: var(--space-3); }
.comarca-lista { display: grid; gap: var(--space-2); }
.saltos .chips { margin-top: var(--space-2); }
.zona-compacta .zona-tipico { font-size: 14px; color: var(--tinta-suave); }
.zona-compacta.zona-vacia { border-style: solid; border-color: var(--borde); background: var(--superficie); }
.zona-compacta .zona-pie { padding-top: 0; }
.zona-compacta .zona-ir { width: 32px; height: 32px; font-size: 15px; }
.tabla-scroll { contain: paint; max-width: 100%; }
@media (max-width: 560px) {
  .tarjeta-foto, .tarjeta .foto-hueco { aspect-ratio: 16 / 9; }
  .panel-etiqueta { display: none; }
}
/* Legales: índice a la izquierda en escritorio, al final en móvil */
.legal { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 760px); gap: var(--space-12); }
.legal-indice { max-width: none; }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-indice { order: 2; }
}

/* =========================================================
   6. Filtros por servicio, servicios, mapa y espaciados
   ========================================================= */

/* Que ninguna página quede pegada al pie */
main > section:last-child:not(.banda-roja):not(.seccion-gris):not(.cabeza-banda):not(.tarjeta-panel) { padding-bottom: var(--space-16); }
.enlaces-relacionados { margin-top: var(--space-8); color: var(--tinta-suave); }

/* Filtros: chips con casilla */
.filtros-servicios { grid-column: 1 / -1; border: 0; margin: 0; padding: var(--space-2) var(--space-2) 0; min-width: 0; }
.filtros-servicios legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-suave); padding: 0; margin-bottom: var(--space-2); }
.chips-filtro { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-filtro { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--borde); background: var(--blanco); font-weight: 700; font-size: 15px; cursor: pointer; user-select: none; }
.chip-filtro .icono { width: 18px; height: 18px; color: var(--tinta-suave); }
.chip-filtro input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-filtro:hover { border-color: var(--tinta); }
.chip-filtro:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.chip-filtro:has(input:checked) .icono { color: var(--blanco); }
.chip-filtro:has(input:focus-visible) { outline: 3px solid var(--rojo-oscuro); outline-offset: 2px; }
@media (max-width: 760px) {
  .chips-filtro { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); scrollbar-width: none; }
  .chip-filtro { flex: none; }
}
.vacio { display: grid; justify-items: start; gap: var(--space-3); }
.vacio p { margin: 0; font-weight: 700; }

/* Servicios en tarjetas y fichas */
.servicios-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--tinta-suave); font-weight: 600; }
.servicios-mini li { display: inline-flex; align-items: center; gap: 4px; }
.servicios-mini .icono { width: 16px; height: 16px; color: var(--rojo-cantabria); }
.servicios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--space-2); }
.servicios-lista li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--superficie); font-weight: 600; }
.servicios-lista .icono { color: var(--rojo-cantabria); }
.pastilla-borde { border: 1.5px solid var(--borde); }

/* Mapa de Cantabria */
.mapa-caja { margin: var(--space-8) 0 0; background: var(--blanco); border-radius: var(--radius-xl); padding: var(--space-6); }
.mapa { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-tierra { fill: var(--rojo-claro); stroke: #E8B9C1; stroke-width: 2; stroke-linejoin: round; }
.mapa-zona circle { fill: var(--blanco); stroke: var(--rojo-cantabria); stroke-width: 3; transition: r .15s; }
.mapa-zona.con-sitios circle { fill: var(--rojo-cantabria); stroke: var(--blanco); stroke-width: 4; }
.mapa-num { fill: var(--blanco); font-family: var(--font-display); font-weight: 700; font-size: 18px; pointer-events: none; }
.mapa-etiqueta { fill: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 19px; paint-order: stroke; stroke: var(--rojo-claro); stroke-width: 5px; stroke-linejoin: round; }
.mapa-zona:not(.con-sitios) .mapa-etiqueta { fill: var(--tinta-suave); font-weight: 500; font-size: 16px; }
.mapa-zona:hover circle, .mapa-zona:focus-visible circle { stroke: var(--tinta); }
.mapa-zona:hover .mapa-etiqueta, .mapa-zona:focus-visible .mapa-etiqueta { fill: var(--rojo-oscuro); text-decoration: underline; }
.mapa-zona:focus-visible { outline: none; }
.mapa-zona.activa circle { fill: var(--tinta); stroke: var(--blanco); stroke-width: 4; }
.mapa-zona.activa .mapa-etiqueta { font-size: 30px; font-weight: 700; fill: var(--tinta); }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); font-size: 14px; color: var(--tinta-suave); font-weight: 600; }
.mapa-leyenda > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.punto { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--rojo-cantabria); background: var(--blanco); display: inline-block; }
.punto-lleno { background: var(--rojo-cantabria); }
@media (max-width: 640px) {
  .mapa-caja { padding: var(--space-3); border-radius: var(--radius-lg); }
  .mapa-zona:not(.con-sitios) .mapa-etiqueta { display: none; }
  .mapa-etiqueta { font-size: 28px; stroke-width: 7px; }
  .mapa-zona circle { stroke-width: 5; }
}
.cabeza-banda-mapa { flex: 0 1 420px; min-width: 0; }
.mapa-mini .mapa-zona:not(.activa) circle { r: 9; }
.mapa-mini .mapa-num { display: none; }
@media (max-width: 860px) { .cabeza-banda-mapa { display: none; } }
/* Zonas: texto a la izquierda y mapa a la derecha */
.cabeza-banda-fila:has(.mapa-caja) { flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.cabeza-banda-fila:has(.mapa-caja) .cabeza-banda-texto { flex: 1 1 360px; }
.cabeza-banda-fila .mapa-caja { flex: 1.6 1 520px; min-width: 0; margin: 0; }
@media (max-width: 640px) { .cabeza-banda-fila .mapa-caja { flex-basis: 100%; } }
@media (max-width: 640px) {
  .mapa-etiqueta { font-size: 44px; stroke-width: 10px; }
  .mapa-zona.con-sitios circle { r: 28; }
  .mapa-zona:not(.con-sitios) circle { r: 11; }
  .mapa-num { font-size: 30px; transform: translateY(5px); }
  .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .cifras div { padding: var(--space-3); }
  .cifras dt { font-size: 12px; line-height: 1.2; }
  .cifras dd { font-size: 26px; }
}
[hidden] { display: none !important; }

/* Filtro "Reserva online": pastilla roja al marcarla */
.chip-filtro-rojo .icono { color: var(--rojo-cantabria); }
.chip-filtro-rojo:has(input:checked) { background: var(--rojo-cantabria); border-color: var(--rojo-cantabria); }
.filtros { align-items: start; }

/* Reclamar ficha */
.reclamar-caja { border: 1.5px dashed var(--borde); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); }
.reclamar-caja p { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.reclamar-caja strong { color: var(--tinta); }
.reclamar { max-width: 820px; padding-bottom: var(--space-16); }
.reclamar-form { border: 1.5px solid var(--borde); }
.reclamar-hecho { display: grid; gap: var(--space-3); justify-items: start; }
.reclamar-hecho h2 { margin: 0; }
.reclamar-hecho .datos-reserva { width: 100%; background: var(--blanco); margin: 0; }
.planes-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.plan-mini { position: relative; display: grid; gap: 4px; padding: var(--space-4); border: 1.5px solid var(--borde); border-radius: var(--radius-md); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--tinta); font-size: 15px; font-weight: 500; }
.plan-mini input { position: absolute; top: var(--space-4); right: var(--space-4); width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--rojo-cantabria); }
.plan-mini-nombre { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.plan-mini-precio strong { font-family: var(--font-display); font-size: 24px; }
.plan-mini-texto { color: var(--tinta-suave); }
.plan-mini:has(input:checked) { border: 2px solid var(--rojo-cantabria); background: var(--rojo-claro); }