/* ==========================================================================
   Holdesk.com — rediseño inspirado en el layout de Tourex, en marca Holdesk.
   Móvil primero. Sin build step: esto es lo que llega al navegador.

   De Tourex se toma el LAYOUT (hero con imagen y buscador en barra, tarjetas
   redondeadas con sombra suave, listado con filtros a un lado, secciones). Los
   colores son los de Holdesk: magenta de marca #FF1A89 (solo el logotipo),
   magenta de acción #E1006D en botones, cian #00B4E6 de acento.
   ========================================================================== */

/* --- Tipografías, alojadas aquí ------------------------------------------
   NO se cargan desde el CDN de Google. Hacerlo enviaba la IP de cada visitante
   a Google LLC (EE. UU.) en todas las páginas, sin base jurídica y sin que el
   usuario hubiera hecho nada: tratamiento sin amparo y transferencia
   internacional no declarada (arts. 6, 13 y 44 RGPD; LG München I, 3 O
   17493/20). Ver el hallazgo H-01 de INFORME-LEGAL.md.

   Si alguien vuelve a poner un <link> a fonts.googleapis.com, está reabriendo
   el mismo agujero. La CSP del .htaccess ya no lo permite, para que el fallo se
   note en vez de pasar desapercibido.

   Detalles en assets/fonts/LEEME.txt. font-display:swap para que el texto se
   lea desde el primer momento aunque la fuente tarde. */

/* Outfit es una fuente VARIABLE: un solo fichero por subconjunto cubre todo el
   eje de grosores, así que 400, 500, 600 y 700 salen de aquí. De ahí el
   `font-weight: 100 900` en vez de un peso suelto. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono (los precios) sí trae un fichero por peso. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marca (verificada sobre el logotipo real) */
  --magenta-logo:    #FF1A89;  /* solo el logotipo */
  --magenta:         #E1006D;  /* acción; blanco encima = 4,75:1 AA */
  --magenta-oscuro:  #B70059;  /* hover y texto magenta sobre blanco 6,65:1 */
  --magenta-suave:   #FFE9F3;  /* fondos tenues */
  --cian:            #00B4E6;  /* acento, superficie */
  --cian-medio:      #0090B8;
  --cian-tinta:      #005A73;  /* texto cian y foco */
  --cian-suave:      #E6F7FD;

  /* Neutros */
  --fondo:     #F6F7FB;   /* fondo de página, un lila muy tenue */
  --blanco:    #FFFFFF;
  --tinta:     #141726;   /* texto principal */
  --gris:      #5A607A;   /* texto secundario */
  --gris-claro:#8A90A6;
  --borde:     #EAEBF1;
  --oscuro:    #10132A;   /* pie */

  /* Estados */
  --error:  #C42B2B;
  --exito:  #2E8B57;
  --aviso:  #B26A00;
  --oro:    #FFB100;      /* estrellas de valoración, como en tourex */

  /* Espaciado (base 4) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radios: tourex usa formas amables. */
  --radio:   16px;   /* tarjetas y superficies */
  --radio-s: 10px;   /* inputs y chips pequeños */
  --radio-l: 24px;   /* bloques grandes */
  --pill:    100px;  /* botones y píldoras */

  /* Sombras suaves */
  --sombra:   0 6px 24px rgba(20, 22, 45, .06);
  --sombra-m: 0 14px 40px rgba(20, 22, 45, .10);
  --sombra-g: 0 30px 70px rgba(20, 22, 45, .12);

  --foco: 0 0 0 3px var(--blanco), 0 0 0 6px var(--cian-tinta);

  --ff-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --ff-cuerpo:  'Outfit', system-ui, -apple-system, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --contenedor: 1240px;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--ff-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--cian-tinta); text-decoration: none; }
a:hover { color: var(--magenta-oscuro); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); }
hr { border: 0; margin: 0; }

/* --- Utilidades ----------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s3) var(--s4); background: var(--blanco);
  border-radius: var(--radio-s); box-shadow: var(--sombra-m); transition: top 150ms;
}
.saltar:focus { top: var(--s4); }

/* --- Tipografía ----------------------------------------------------------- */

.hero__titulo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.seccion__titulo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.seccion__etiqueta {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: var(--s1) var(--s3);
  background: var(--magenta-suave);
  color: var(--magenta-oscuro);
  border-radius: var(--pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.seccion__cabecera { margin-bottom: var(--s6); }
.seccion__cabecera--centro { text-align: center; }
.seccion__cabecera--centro .seccion__entrada { margin-inline: auto; }
.seccion__entrada { margin-top: var(--s3); color: var(--gris); max-width: 60ch; font-size: 1.0625rem; }

.prosa p { margin-bottom: var(--s4); max-width: 64ch; }
.prosa ul { max-width: 64ch; }
.prosa h2 {
  margin-top: var(--s7); margin-bottom: var(--s3);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.prosa h2:first-child { margin-top: 0; }

/* Prosa a ancho completo y justificada: para las páginas de texto largo, donde
   la columna de 64ch deja media pantalla vacía. Los títulos van centrados y el
   cuerpo justificado — de ahí que aquí se anule el max-width. */
.prosa--ancha p,
.prosa--ancha ul { max-width: none; }
.prosa--ancha p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.prosa--ancha h1,
.prosa--ancha h2 { text-align: center; }
/* Las páginas legales van a ancho completo y justificadas como el resto, pero
   con los títulos a la izquierda: son apartados numerados («1. Titular…»,
   «3 bis. Transferencias…») seguidos de listas y tablas alineadas a la
   izquierda, y centrarlos deja el número flotando en mitad de la línea. En una
   página de texto corrido el centrado ayuda; en un documento legal, estorba. */
.prosa--legal h1,
.prosa--legal h2,
.prosa--legal h3 { text-align: left; }
/* Justificar en pantallas estrechas abre ríos de espacio entre palabras. */
@media (max-width: 560px) {
  .prosa--ancha p { text-align: left; hyphens: none; }
}
.lista-limpia li {
  position: relative; padding-left: var(--s5); margin-bottom: var(--s2); max-width: 64ch;
}
.lista-limpia li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 12px; border-radius: var(--pill);
  background: var(--cian); box-shadow: 0 0 0 4px var(--cian-suave);
}

/* --- Botones -------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s6);
  border: 1.5px solid transparent; border-radius: var(--pill);
  font-family: var(--ff-display); font-weight: 600; font-size: 0.9375rem;
  cursor: pointer; white-space: nowrap;
  transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms, box-shadow 160ms;
}
.boton .icono { font-size: 1.15em; }
.icono { flex: 0 0 auto; display: inline-block; vertical-align: -0.125em; }
.boton--primario { background: var(--magenta); color: var(--blanco); }
.boton--primario:hover { background: var(--magenta-oscuro); color: var(--blanco); transform: translateY(-2px); box-shadow: var(--sombra-m); }
.boton--secundario { background: var(--blanco); color: var(--tinta); border-color: var(--borde); }
.boton--secundario:hover { border-color: var(--cian); color: var(--tinta); }
.boton--fantasma { background: transparent; color: var(--tinta); border-color: rgba(255,255,255,.6); }
.boton--grande { min-height: 56px; padding-inline: var(--s7); font-size: 1.0625rem; }
.boton--bloque { width: 100%; }

/* El ojo de cerradura del logo, en CSS. Se usa como guiño de marca en botones y bullets. */
.ojo {
  --ojo: 20px; position: relative; flex: 0 0 auto;
  width: var(--ojo); height: var(--ojo); border-radius: var(--pill);
  background: var(--cian);
}
.ojo::before {
  content: ''; position: absolute; left: 50%; top: 22%;
  width: 38%; height: 38%; border-radius: var(--pill);
  background: var(--blanco); transform: translateX(-50%);
}
.ojo::after {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: 30%; height: 32%; background: var(--blanco);
  transform: translateX(-50%); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
/* Aro blanco para que el disco cian no toque el magenta del botón. */
.boton--primario .ojo { box-shadow: 0 0 0 3px var(--magenta); }
.boton--primario:hover .ojo { box-shadow: 0 0 0 3px var(--magenta-oscuro); }

/* --- Cabecera ------------------------------------------------------------- */

.barra-superior {
  background: var(--oscuro);
  color: rgba(255,255,255,.72);
  font-size: 0.8125rem;
}
.barra-superior__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 42px; flex-wrap: wrap;
}
.barra-superior a { color: rgba(255,255,255,.72); }
.barra-superior a:hover { color: var(--blanco); }
.barra-superior__grupo { display: flex; align-items: center; gap: var(--s5); }
.barra-superior__item { display: inline-flex; align-items: center; gap: var(--s2); }
@media (max-width: 767px) {
  .barra-superior { display: none; }
}

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 76px;
}
.cabecera__logo { flex: 0 0 auto; }
.cabecera__logo img { width: 140px; height: auto; }
.cabecera__nav { display: flex; align-items: center; gap: var(--s2); }
.cabecera__nav a {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--s3);
  font-weight: 500; color: var(--tinta);
}
.cabecera__nav a:hover, .cabecera__nav a[aria-current] { color: var(--magenta); }
/* La página actual no puede distinguirse SOLO por el color (WCAG 1.4.1): con
   daltonismo, el enlace activo y el que está bajo el cursor eran idénticos.
   Se refuerza con peso y un subrayado, que no dependen de ver el color. */
.cabecera__nav a[aria-current] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.cabecera__acciones { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

@media (max-width: 900px) {
  .cabecera__nav { display: none; }
}
@media (max-width: 559px) {
  .cabecera__logo img { width: 120px; }
  .cabecera__acciones .boton span:not(.ojo) { display: none; }
  .cabecera__acciones .boton { padding-inline: var(--s4); }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--s9) 0 calc(var(--s9) + 40px);
  background: linear-gradient(180deg, rgba(16,19,42,.55), rgba(16,19,42,.75)),
              var(--hero-img, none) center/cover no-repeat;
  color: var(--blanco);
  text-align: center;
}
/* En móvil, la mitad de píxeles: 52 KB en vez de 127. La foto va detrás de un
   velo oscuro y de texto grande, así que la diferencia no se ve, pero es el
   recurso más pesado de la portada y además es el elemento que mide el LCP.
   La variable la pone la vista; si faltara, se queda con la de escritorio. */
@media (max-width: 700px) {
  .hero { background-image: linear-gradient(180deg, rgba(16,19,42,.55), rgba(16,19,42,.75)), var(--hero-img-movil, var(--hero-img, none)); }
}
.hero__contenido { max-width: 820px; margin-inline: auto; }
.hero__titulo { color: var(--blanco); }
.hero__entrada {
  margin: var(--s4) auto 0; max-width: 56ch;
  color: rgba(255,255,255,.9); font-size: 1.125rem;
}
.hero__prueba {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s2) var(--s4) var(--s2) var(--s2);
  background: rgba(255,255,255,.14); border-radius: var(--pill);
  font-size: 0.875rem;
}
/* Fondo --cian-tinta y no --cian: es un texto de 13px, así que necesita 4,5:1.
   Blanco sobre --cian (#00B4E6) daba 2,4:1 — ni siquiera llegaba al 3:1 del
   texto grande. Es justo el caso que advierte la regla de marca: --cian es
   acento y superficie, nunca fondo de texto. Con --cian-tinta sube a 7,75:1. */
.hero__prueba-num {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--cian-tinta); border-radius: var(--pill);
  font-family: var(--ff-mono); font-weight: 600; font-size: 0.8125rem; color: var(--blanco);
}
.hero--simple { padding-bottom: var(--s9); }

/* El buscador se solapa sobre el borde inferior del hero. */
.hero .buscador { margin-top: var(--s7); margin-bottom: -80px; }

/* --- Buscador (barra) ----------------------------------------------------- */

.buscador { position: relative; z-index: 2; }
.mostrador {
  display: grid;
  gap: var(--s2);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-g);
  padding: var(--s3);
  text-align: left;
}
.mostrador__campo {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--s3) var(--s4);
  border-radius: var(--radio-s);
  transition: background-color 150ms;
}
.mostrador__campo:focus-within { background: var(--cian-suave); }
.mostrador__etiqueta {
  font-size: 0.75rem; font-weight: 600; color: var(--gris-claro);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mostrador__control {
  width: 100%; min-height: 28px; padding: 0; border: 0; background: transparent;
  font-weight: 500; font-size: 1rem; color: var(--tinta);
}
/* El anillo de foco global (:focus-visible, box-shadow) queda feo dentro de la
   barra blanca del buscador, porque se sale del campo y pisa al de al lado. Pero
   anularlo con `box-shadow: none` a secas dejaba SIN indicador de foco a tres de
   los cinco controles del componente más visible del sitio: solo quedaba el
   tinte de fondo de :focus-within, demasiado sutil para servir de indicación
   (incumplía el criterio 2.4.7 de las WCAG).
   Se sustituye por un contorno propio que sí se ve y que respeta la forma
   redondeada del campo, en vez de quitarlo y no poner nada. */
.mostrador__control:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--cian-tinta);
  outline-offset: 4px;
  border-radius: var(--s1);
}
select.mostrador__control {
  appearance: none; padding-right: var(--s5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A607A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s2) center;
}
.contador { display: flex; align-items: center; gap: var(--s2); }
.contador__valor {
  width: 2.5ch; text-align: center; border: 0; background: transparent;
  font-family: var(--ff-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.contador__valor::-webkit-outer-spin-button,
.contador__valor::-webkit-inner-spin-button { appearance: none; margin: 0; }
.contador__boton {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1.5px solid var(--borde); border-radius: var(--pill);
  background: var(--blanco); font-size: 1.125rem; line-height: 1; cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.contador__boton:hover { border-color: var(--cian); color: var(--magenta); }
.contador__boton:disabled { opacity: .4; cursor: not-allowed; }
.mostrador__accion { padding: var(--s1); }
.mostrador__accion .boton { width: 100%; min-height: 56px; }

@media (min-width: 900px) {
  .mostrador {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr auto;
    align-items: center;
    padding: var(--s2) var(--s2) var(--s2) var(--s3);
  }
  .mostrador__campo + .mostrador__campo { border-left: 1px solid var(--borde); border-radius: 0; }
  .mostrador__campo:focus-within { border-radius: var(--radio-s); }
  .mostrador__accion .boton { min-height: 60px; padding-inline: var(--s5); }
}

/* --- Secciones ------------------------------------------------------------ */

.seccion { padding-block: var(--s9); }
.seccion--tenue { background: var(--blanco); }
.seccion--compacta { padding-block: var(--s7); }

/* En la home, la primera sección deja hueco para el buscador solapado. */
.page-home .seccion:first-of-type { padding-top: calc(var(--s9) + 80px); }

/* --- Destinos (provincias con foto) --------------------------------------- */

.destinos {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.destino {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radio); aspect-ratio: 3 / 4;
  box-shadow: var(--sombra); color: var(--blanco);
}
.destino img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.destino::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,19,42,0) 40%, rgba(16,19,42,.82) 100%);
}
.destino:hover img { transform: scale(1.06); }
.destino__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s5);
}
.destino__nombre { color: var(--blanco); font-family: var(--ff-display); font-weight: 600; font-size: 1.25rem; }
.destino__total { color: rgba(255,255,255,.82); font-size: 0.875rem; }
.destino__flecha {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: var(--pill);
  background: var(--blanco); color: var(--tinta); font-size: 1.1rem;
  transition: background-color 160ms, color 160ms;
}
.destino:hover .destino__flecha { background: var(--magenta); color: var(--blanco); }

/* --- Rejilla y tarjeta ---------------------------------------------------- */

.rejilla {
  display: grid; gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }

.tarjeta__foto { position: relative; }
.tarjeta__foto img, .tarjeta__sinfoto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.tarjeta__sinfoto { background: var(--fondo); }
.tarjeta__precio {
  position: absolute; left: var(--s3); bottom: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--blanco); border-radius: var(--pill);
  font-weight: 700; font-size: 0.9375rem; color: var(--tinta);
  box-shadow: var(--sombra);
}
.tarjeta__precio small { font-weight: 500; color: var(--gris); font-size: 0.75rem; }
.tarjeta__precio--vacio { color: var(--gris); font-weight: 600; }
.tarjeta__fav {
  position: absolute; top: var(--s3); right: var(--s3);
  display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(255,255,255,.9); border: 0; border-radius: var(--pill);
  color: var(--gris); cursor: pointer; font-size: 1rem;
  transition: color 160ms, background-color 160ms;
}
.tarjeta__fav:hover, .tarjeta__fav[aria-pressed="true"] { color: var(--magenta); background: var(--blanco); }
.tarjeta__fav[aria-pressed="true"] .icono { fill: var(--magenta); }
.tarjeta__lugar .icono { color: var(--gris-claro); }
.tarjeta__insignia {
  position: absolute; top: var(--s3); left: var(--s3);
  padding: var(--s1) var(--s3); border-radius: var(--pill);
  font-size: 0.75rem; font-weight: 700; color: var(--blanco);
  background: var(--cian);
}
.tarjeta__insignia--destacado { background: var(--magenta); }

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.tarjeta__lugar { display: inline-flex; align-items: center; gap: var(--s1); font-size: 0.8125rem; color: var(--gris); }
.tarjeta__nombre {
  font-family: var(--ff-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta__nombre a { color: var(--tinta); }
.tarjeta__nombre a:hover { color: var(--magenta); }
.tarjeta__valoracion { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.875rem; }
.estrellas { color: var(--oro); letter-spacing: 1px; }
.tarjeta__valoracion b { font-weight: 600; }
.tarjeta__valoracion span { color: var(--gris); }
.tarjeta__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--borde);
}
.tarjeta__servicios { font-size: 0.8125rem; color: var(--gris); }
.tarjeta__enlace {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-weight: 600; font-size: 0.875rem; color: var(--magenta);
}
.tarjeta__enlace:hover { color: var(--magenta-oscuro); gap: var(--s2); }
.categoria { color: var(--oro); letter-spacing: 1px; font-size: 0.75rem; }

/* --- Cómo funciona (proceso) ---------------------------------------------- */

.pasos { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso {
  position: relative; text-align: center;
  padding: var(--s6) var(--s5); background: var(--blanco);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.paso__num {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s4);
  border-radius: var(--pill); background: var(--cian-suave); color: var(--cian-tinta);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem;
}
.paso:nth-child(2) .paso__num { background: var(--magenta-suave); color: var(--magenta-oscuro); }
.paso__titulo { font-family: var(--ff-display); font-weight: 600; font-size: 1.1875rem; margin-bottom: var(--s2); }
.paso__texto { color: var(--gris); font-size: 0.9375rem; }

/* --- CTA ------------------------------------------------------------------ */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--radio-l);
  background: linear-gradient(180deg, rgba(16,19,42,.72), rgba(16,19,42,.82)),
              var(--cta-img, none) center/cover no-repeat;
  color: var(--blanco); text-align: center;
  padding: var(--s9) var(--s5);
}
@media (max-width: 700px) {
  .cta { background-image: linear-gradient(180deg, rgba(16,19,42,.72), rgba(16,19,42,.72)), var(--cta-img-movil, var(--cta-img, none)); }
}
.cta__titulo { color: var(--blanco); }
.cta__texto { margin: var(--s4) auto var(--s6); max-width: 56ch; color: rgba(255,255,255,.9); font-size: 1.0625rem; }

/* --- Migas ---------------------------------------------------------------- */

.subcabecera {
  background: var(--oscuro); color: var(--blanco);
  padding-block: var(--s7);
}
.subcabecera__titulo { color: var(--blanco); font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.8rem,4vw,2.6rem); }
.miga__lista { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); font-size: 0.875rem; color: rgba(255,255,255,.7); }
.miga__lista a { color: rgba(255,255,255,.7); }
.miga__lista a:hover { color: var(--blanco); }
.miga__paso + .miga__paso::before { content: '›'; margin-right: var(--s2); }
.miga__paso [aria-current] { color: var(--blanco); }

/* --- Resultados ----------------------------------------------------------- */

.barra-busqueda { background: var(--blanco); border-bottom: 1px solid var(--borde); padding-block: var(--s5); }
.barra-busqueda .mostrador { box-shadow: var(--sombra); }

.resultados { padding-block: var(--s7); }
.resultados__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.resultados__titulo { font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem; }
.resultados__recuento { color: var(--gris); font-size: 0.9375rem; }
.resultados__cuerpo { display: grid; gap: var(--s6); }
@media (min-width: 1080px) {
  .resultados__cuerpo { grid-template-columns: 300px 1fr; align-items: start; }
  .resultados__filtros { position: sticky; top: 92px; }
}
.resultados__listado .rejilla { grid-template-columns: 1fr; }
@media (min-width: 680px) { .resultados__listado .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .resultados__listado .rejilla { grid-template-columns: repeat(3, 1fr); } }

/* --- Filtros -------------------------------------------------------------- */

.filtros { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--s5); }
.filtros__grupo { border: 0; padding: 0; margin: 0 0 var(--s5); }
.filtros__grupo + .filtros__grupo { padding-top: var(--s5); border-top: 1px solid var(--borde); }
.filtros__leyenda { padding: 0; margin-bottom: var(--s3); font-family: var(--ff-display); font-weight: 600; font-size: 1rem; }
.chip { display: flex; align-items: center; gap: var(--s2); min-height: 40px; cursor: pointer; font-size: 0.9375rem; color: var(--gris); }
.chip input { width: 18px; height: 18px; accent-color: var(--magenta); }
.chip:hover { color: var(--tinta); }
/* position: relative NO es decorativo: el radio de dentro va absolute, y sin un
   ancestro posicionado aquí se colocaba respecto a .resultados__filtros (que es
   sticky). Resultado: al tabular hasta «7+ / 8+ / 9+», el anillo de foco se
   dibujaba en la esquina de la barra de filtros en vez de alrededor de la
   píldora. Con el ratón no se notaba, porque el <label> sigue asociado. */
.chip--pill {
  position: relative;
  display: inline-flex; min-height: 40px; margin: 0 var(--s2) var(--s2) 0; padding: var(--s2) var(--s4);
  border: 1.5px solid var(--borde); border-radius: var(--pill);
}
/* :has() es la única pista visual de qué valoración está marcada, porque el
   radio real está oculto. Si un navegador no lo soportara, el filtro seguiría
   funcionando (el formulario se envía igual): solo se perdería la marca. */
.chip--pill:has(input:checked) { border-color: var(--magenta); background: var(--magenta-suave); color: var(--magenta-oscuro); }
.chip--pill input { position: absolute; opacity: 0; width: 0; }
.filtros__rango { display: flex; gap: var(--s3); }
.filtros__campo { display: flex; flex-direction: column; gap: var(--s1); flex: 1; font-size: 0.8125rem; color: var(--gris); }
.filtros__campo input, .filtros__campo select {
  min-height: 46px; padding: var(--s2) var(--s3);
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio-s);
  font-size: 1rem; width: 100%;
}
.filtros__campo input:focus-visible, .filtros__campo select:focus-visible { border-color: var(--cian); }
.filtros__acciones { display: flex; align-items: center; gap: var(--s4); }
.filtros__acciones .boton { flex: 1; }
.filtros__limpiar { font-size: 0.875rem; }

/* --- Paginación ----------------------------------------------------------- */

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s7); }
.paginacion__pagina, .paginacion__salto {
  display: grid; place-items: center; min-width: 46px; min-height: 46px; padding-inline: var(--s4);
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--pill);
  font-weight: 600; font-size: 0.9375rem; color: var(--tinta);
}
.paginacion__pagina:hover, .paginacion__salto:hover { border-color: var(--cian); color: var(--tinta); }
.paginacion__pagina--actual { background: var(--magenta); border-color: var(--magenta); color: var(--blanco); }

/* --- Vacío y avisos ------------------------------------------------------- */

.vacio { padding: var(--s8) var(--s5); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); text-align: center; }
.vacio__titulo { font-family: var(--ff-display); font-weight: 600; font-size: 1.25rem; margin-bottom: var(--s2); }
.vacio__texto { color: var(--gris); margin-bottom: var(--s5); }
.aviso { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: var(--cian-suave); border-radius: var(--radio-s); font-size: 0.9375rem; color: var(--cian-tinta); }
.aviso--pendiente { background: #FDECEC; color: var(--error); }

/* --- Ficha ---------------------------------------------------------------- */

.ficha { padding-block: var(--s7); }
.ficha__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.ficha__tipo { font-size: 0.875rem; color: var(--gris); margin-bottom: var(--s2); }
.ficha__titulo { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.6rem,3.5vw,2.2rem); }
/* El título repetido dentro del cuerpo de la ficha. Antes iba con un
   style="font-size:1.75rem" a pelo en la vista; es el mismo valor, en su sitio. */
.ficha__titulo--cuerpo { font-size: 1.75rem; }
.ficha__nota { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); background: var(--blanco); border-radius: var(--radio-s); box-shadow: var(--sombra); }
.ficha__nota-valor { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: var(--s2); background: var(--magenta); color: var(--blanco); border-radius: var(--radio-s); font-family: var(--ff-display); font-weight: 700; }

.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); border-radius: var(--radio); overflow: hidden; margin-bottom: var(--s7); }
.galeria__hueco { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.galeria__hueco img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 400ms; }
.galeria__hueco:hover img { transform: scale(1.05); }
.galeria__hueco--principal { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .galeria__hueco--principal { grid-column: span 2; grid-row: span 2; }
}
.galeria__mas { position: relative; }
.galeria__mas span {
  position: absolute; right: var(--s3); bottom: var(--s3);
  padding: var(--s2) var(--s4); background: var(--blanco); border-radius: var(--pill);
  font-size: 0.875rem; font-weight: 600; box-shadow: var(--sombra);
}

.ficha__cuerpo { display: grid; gap: var(--s7); }
@media (min-width: 1080px) { .ficha__cuerpo { grid-template-columns: 1fr 380px; align-items: start; } }
.ficha__resumen { font-size: 1.1875rem; color: var(--gris); margin-bottom: var(--s6); }
.bloque { margin-bottom: var(--s7); }
.bloque__titulo { font-family: var(--ff-display); font-weight: 700; font-size: 1.375rem; margin-bottom: var(--s4); }
.ficha__direccion { color: var(--gris); margin-bottom: var(--s4); }

.servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.servicio { position: relative; padding-left: var(--s5); font-size: 0.9375rem; }
.servicio::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: var(--pill); background: var(--cian); box-shadow: 0 0 0 4px var(--cian-suave); }

.habitaciones { display: grid; gap: var(--s3); }
.habitacion { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-s); }
.habitacion__nombre { font-family: var(--ff-display); font-weight: 600; }
.habitacion__meta { font-size: 0.875rem; color: var(--gris); }
.habitacion__precio { font-family: var(--ff-mono); font-weight: 600; }
.habitacion__precio small { color: var(--gris); font-weight: 500; }
.nota-precio { margin-top: var(--s3); font-size: 0.8125rem; color: var(--gris); }

.politicas { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); max-width: 64ch; }
.politicas dt { font-weight: 600; color: var(--gris); }

.mapa { height: 340px; background: var(--fondo); border-radius: var(--radio); overflow: hidden; }

.reserva { position: sticky; top: 92px; padding: var(--s6); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra-m); }
.reserva__titulo { font-family: var(--ff-display); font-weight: 700; font-size: 1.375rem; margin-bottom: var(--s2); }
.reserva__texto { font-size: 0.9375rem; color: var(--gris); margin-bottom: var(--s4); }
.reserva__widget { width: 100%; min-height: 440px; border: 0; border-radius: var(--radio-s); display: block; }

/* --- Ciudades ------------------------------------------------------------- */

.ciudades { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); }
.ciudad { display: flex; flex-direction: column; gap: 2px; padding: var(--s5); background: var(--blanco); border-radius: var(--radio-s); box-shadow: var(--sombra); color: var(--tinta); transition: transform 160ms, box-shadow 160ms; }
.ciudad:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); color: var(--tinta); }
.ciudad__nombre { font-family: var(--ff-display); font-weight: 600; font-size: 1.0625rem; }
.ciudad__total, .ciudad__precio { font-size: 0.8125rem; color: var(--gris); }

/* --- Captación / estáticas ------------------------------------------------ */

.capta__texto { max-width: 60ch; color: var(--gris); margin-bottom: var(--s5); }
.capta__cierre { margin-top: var(--s6); }
.error__acciones { margin-top: var(--s6); }
.seccion--estatica { padding-block: var(--s8) var(--s9); }

/* --- WhatsApp ------------------------------------------------------------
   El portal no tiene formulario: se habla por WhatsApp o por correo. Aquí
   estaban los estilos de aquel formulario (.contacto, .formulario, .campo,
   .casilla y compañía); se han ido con él, porque CSS que no casa con ningún
   marcado es peso muerto que alguien acabará copiando a otro sitio.

   El verde es el de la marca WhatsApp (#25D366). Se usa TAL CUAL solo como
   fondo con texto blanco encima —da 3,2:1, que vale para el botón grande pero
   no para texto pequeño—, y para el enlace del pie sobre fondo oscuro se usa
   un verde más claro que sí llega a AA.
   -------------------------------------------------------------------------- */

.wa__icono { flex: 0 0 auto; }

/* El botón flotante de la esquina, en todas las páginas. */
.wa--flotante {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 104;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5);
  background: #25D366; color: var(--blanco);
  border-radius: var(--pill);
  font-family: var(--ff-display); font-weight: 600; font-size: 0.9375rem;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .4);
  transition: transform .15s ease, background .15s ease;
}
.wa--flotante:hover { background: #1EBE5A; color: var(--blanco); transform: translateY(-2px); }
.wa--flotante:focus-visible { box-shadow: var(--foco); }

/* Mientras el aviso de cookies está abierto, el botón desaparece. Dos cosas
   fijas abajo se tapan entre sí, y la que tiene que poder pulsarse es la del
   consentimiento: si el visitante no puede llegar al banner, el consentimiento
   no vale nada. z-index 104 y no 105 por lo mismo, por si :has() no estuviera. */
body:has(.cc-aviso:not([hidden])) .wa--flotante { display: none; }

@media (max-width: 560px) {
  /* Solo el icono: en móvil, una píldora con texto tapa demasiado contenido.
     56 px de lado, que es el objetivo táctil recomendado. */
  .wa--flotante {
    right: var(--s4); bottom: var(--s4);
    width: 56px; height: 56px; padding: 0;
    justify-content: center; gap: 0;
  }
  .wa__texto { display: none; }
  .wa--flotante .wa__icono { width: 1.6em; height: 1.6em; }
}

/* Variante para meterlo dentro del contenido, como llamada a la acción. */
.boton--wa { background: #25D366; border-color: #25D366; color: var(--blanco); }
.boton--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--blanco); }

/* En la barra superior y en el pie, ambos oscuros: verde claro para llegar a
   AA sobre #10132A. El #25D366 de marca sobre ese fondo se queda en 3,4:1. */
.barra-superior__wa,
.pie__wa {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: #6EE7A0;
}
.barra-superior__wa:hover,
.pie__wa:hover { color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  .wa--flotante, .wa--flotante:hover { transition: none; transform: none; }
}

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--oscuro); color: rgba(255,255,255,.7); padding-top: var(--s9); }
.pie a { color: rgba(255,255,255,.7); }
.pie a:hover { color: var(--blanco); }
.pie__interior { display: grid; gap: var(--s7); }
@media (min-width: 720px) { .pie__interior { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s5); } }
.pie__marca img {
  width: 150px; margin-bottom: var(--s4);
  /* El logo es magenta+cian sobre oscuro: se le da una base blanca redondeada
     para no romper la regla de "logo siempre sobre blanco o claro". */
  background: var(--blanco); padding: var(--s2) var(--s3); border-radius: var(--radio-s);
}
.pie__lema { font-size: 0.9375rem; max-width: 34ch; }
.pie__titulo { color: var(--blanco); font-family: var(--ff-display); font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--s3); }
.pie__grupo { display: flex; flex-direction: column; gap: var(--s2); }
.pie__grupo a { font-size: 0.9375rem; }
.pie__bola { display: inline-flex; gap: var(--s2); margin-top: var(--s2); }
.pie__bola a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pill); background: rgba(255,255,255,.08); }
.pie__bola a:hover { background: var(--magenta); color: var(--blanco); }
.pie__base { margin-top: var(--s7); padding-block: var(--s4); border-top: 1px solid rgba(255,255,255,.1); font-size: 0.875rem; }
/* Los datos identificativos del art. 10 LSSI van en el pie, en todas las
   páginas. Se dejan legibles (no en gris casi invisible): «fácil, directa y
   gratuita» es literalmente lo que exige la ley. */
.pie__contacto { margin-top: var(--s2); }

/* --- Visor de fotos (lightbox) -------------------------------------------- */

.visor { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: var(--s4); background: rgba(16,19,42,.94); }
.visor__foto { max-width: 100%; max-height: 88vh; margin-inline: auto; border-radius: var(--radio-s); object-fit: contain; }
.visor__cerrar, .visor__flecha { width: 48px; height: 48px; border: 0; border-radius: var(--pill); background: var(--blanco); font-size: 1.25rem; cursor: pointer; }
.visor__cerrar { position: absolute; top: var(--s4); right: var(--s4); z-index: 1; }
.visor__contador { position: absolute; bottom: var(--s4); left: 50%; transform: translateX(-50%); font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--blanco); }

/* --- Mapa: pin ------------------------------------------------------------ */

.pin__disco { position: relative; display: block; width: 30px; height: 30px; border-radius: var(--pill); background: var(--magenta); border: 3px solid var(--blanco); box-shadow: var(--sombra); }
.pin__disco::before { content: ''; position: absolute; left: 50%; top: 24%; width: 32%; height: 32%; border-radius: var(--pill); background: var(--blanco); transform: translateX(-50%); }
.leaflet-container { font-family: var(--ff-cuerpo); }

/* --- Fase aletargada: banda y modal de demostración ------------------------
   Este bloque solo pinta HTML que existe en modo demo. El día de la apertura el
   partial deja de renderizarse y estas reglas se quedan sin nada que aplicar.

   La banda va fija arriba del todo, por encima de la cabecera pegajosa, y el
   resto del sitio se desplaza --demo-banda con padding en el body. La altura es
   un número fijo por breakpoint (no se puede medir en CSS) y de ahí que el texto
   se mantenga corto: en móvil da para dos líneas.
   -------------------------------------------------------------------------- */

body.is-demo { --demo-banda: 44px; padding-top: var(--demo-banda); }
@media (min-width: 561px) { body.is-demo { --demo-banda: 36px; } }

.is-demo .cabecera { top: var(--demo-banda); }
/* Los pegajosos de dentro (filtros y widget de reserva) cuelgan de la cabecera. */
.is-demo .resultados__filtros,
.is-demo .reserva { top: calc(92px + var(--demo-banda)); }

/* min-height y no height: si el texto de la banda crece (una traducción más
   larga), la banda crece con él en vez de recortarlo. El JS remide la altura
   real y reescribe --demo-banda, así que el desplazamiento sigue cuadrando. */
.demo-banda {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  min-height: var(--demo-banda, 44px);
  padding-block: var(--s2);
  /* Bloque y no flex: como flex, .contenedor es un ítem con min-width:auto y el
     texto no puede encoger — en móvil desbordaba a lo ancho la página entera. */
  display: block;
  background: var(--oscuro); color: var(--blanco);
  font-size: 0.8125rem; line-height: 1.25;
  text-align: center;
}
.demo-banda__interior {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: var(--s2);
  min-width: 0;
}
.demo-banda__punto {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--pill);
  background: var(--oro);
}
/* En móvil el texto ocupa dos líneas y el punto se quedaba solo en la primera,
   pareciendo un borrón. Es decorativo (aria-hidden): fuera. */
@media (max-width: 560px) {
  .demo-banda__punto { display: none; }
}

/* El modal se sirve visible y el JS lo esconde si ya se cerró. Si el JS falla,
   el aviso se ve igual — nunca al revés (§3.4 del brief). */
/* z-index por encima del salto al contenido (.saltar, 100): si no, el enlace de
   salto se dibuja sobre el velo y deja escapar del aviso. */
.demo-modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid;
  place-items: center;
  /* 'safe' para que con zoom de texto al 200% no se corte la parte de arriba. */
  place-items: safe center;
  padding: var(--s4);
  background: rgba(16, 19, 42, .72);
  overflow-y: auto;
}
.demo-modal[hidden] { display: none; }
.demo-modal__caja {
  width: 100%; max-width: 560px;
  padding: var(--s6);
  background: var(--blanco);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-g);
}
.demo-modal__titulo {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 1.75rem); line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--s4);
}
.demo-modal__cuerpo { color: var(--gris); }
.demo-modal__cuerpo p { margin-bottom: var(--s4); }
.demo-modal__cuerpo p:last-child { margin-bottom: 0; }
.demo-modal__cuerpo strong { color: var(--tinta); font-weight: 600; }
.demo-modal__acciones {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6);
}
.demo-modal__acciones .boton { flex: 1 1 auto; justify-content: center; }
/* Un magenta por pantalla: con el modal abierto, el primario es este. */
.demo-modal__acciones .boton--grande { padding-inline: var(--s5); }

@media (max-width: 480px) {
  .demo-modal__caja { padding: var(--s5); }
  .demo-modal__acciones .boton { flex-basis: 100%; }
}

/* --- Páginas legales ------------------------------------------------------
   Aviso legal, privacidad y cookies. Son páginas largas de leer, así que lo
   único que se añade aquí es lo que ayuda a leerlas: la fecha de revisión, las
   listas de datos y las tablas de tratamientos y de cookies.
   -------------------------------------------------------------------------- */

.legal__fecha {
  display: inline-block;
  margin-bottom: var(--s6);
  padding: var(--s2) var(--s4);
  background: var(--cian-suave);
  border-radius: var(--pill);
  font-size: 0.875rem;
  color: var(--cian-tinta);
}

/* La lista de datos identificativos: sin viñeta y con la etiqueta destacada.
   Es una ficha, no una enumeración, y los puntos cian la hacían parecer otra
   cosa. Se pisa a .lista-limpia, que va antes en la hoja. */
.lista-datos li { padding-left: 0; margin-bottom: var(--s3); }
.lista-datos li::before { content: none; }
.lista-datos strong { color: var(--tinta); }

/* Tablas de tratamientos y de cookies.
   El envoltorio con scroll horizontal es obligatorio: son tablas de cinco
   columnas y en un móvil no caben. Sin él, desbordan la página entera y se
   lleva por delante el ancho de todo el documento. */
.tabla-envoltorio {
  margin-bottom: var(--s5);
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
}

.tabla-legal {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.55;
}

.tabla-legal th,
.tabla-legal td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

/* Sin `position: sticky`. Lo tuvo, y no hacía nada: .tabla-envoltorio declara
   overflow-x, lo que lo convierte en contenedor de scroll, pero no tiene altura
   máxima, así que nunca hay scroll vertical del que despegarse. Era una regla
   que prometía algo que no ocurría. Si algún día se quiere una cabecera
   pegajosa de verdad, hay que darle un max-height al envoltorio. */
.tabla-legal thead th {
  background: var(--fondo);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

/* La primera celda de cada fila es un <th scope="row">: es el nombre del
   tratamiento, no un dato más. */
.tabla-legal tbody th {
  font-weight: 600;
  color: var(--tinta);
  max-width: 22ch;
}

.tabla-legal tbody td { color: var(--gris); }
.tabla-legal tbody tr:last-child th,
.tabla-legal tbody tr:last-child td { border-bottom: 0; }
.tabla-legal code { font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--cian-tinta); }

/* Encabezados de categoría en la política de cookies. */
.cookies__cat {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s6); margin-bottom: var(--s2);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.125rem;
}

.cookies__etiqueta {
  padding: var(--s1) var(--s3);
  border-radius: var(--pill);
  background: var(--cian-suave);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--cian-tinta);
}
.cookies__etiqueta--vacia { background: var(--borde); color: var(--gris); }

.cookies__vacia { font-style: italic; color: var(--gris); }
.cookies__parte { font-size: 0.8125rem; color: var(--gris-claro); }

/* --- Movimiento ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .destino:hover img, .galeria__hueco:hover img, .tarjeta:hover { transform: none; }
}


/* ==========================================================================
   GESTOR DE CONSENTIMIENTO DE COOKIES

   Vivía en su propio assets/css/cookies.css hasta el 10/09/2026. Se trajo aquí
   porque el servidor habla HTTP/1.1: cada hoja de estilo es una petición que
   BLOQUEA el renderizado, y dos bloqueos cuestan más que los 11 KB que se
   ahorraban en el resto de las páginas. Gzip deja el fichero unido en unos
   15 KB, así que el peso extra es despreciable y la petición de menos no.

   Sigue siendo un bloque cerrado y con sus propias variables: si algún día el
   servidor pasa a HTTP/2 —donde las peticiones en paralelo salen casi gratis—,
   se corta por esta línea y vuelve a su fichero.
   ========================================================================== */

.cc {
  --cc-fondo:  var(--oscuro);
  --cc-texto:  #E7E9F5;
  --cc-tenue:  #A6ACC9;
  --cc-linea:  rgba(255, 255, 255, .16);
  /* Cian claro sobre el fondo oscuro del aviso: el --cian de marca no llega a
     AA sobre blanco, pero sobre #10132A sí, y aquí el fondo siempre es oscuro. */
  --cc-acento: #7FD8F5;
}

.cc [hidden] { display: none !important; }

/* ---- Primera capa: el aviso --------------------------------------------- */

.cc-aviso {
  position: fixed;
  inset: auto var(--s4) var(--s4) var(--s4);
  z-index: 105;
  padding: var(--s5);
  background: var(--cc-fondo);
  color: var(--cc-texto);
  border: 1px solid var(--cc-linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-g);
}

.cc-aviso__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.cc-aviso__texto { flex: 1 1 380px; min-width: 0; }

.cc-aviso__titulo {
  margin-bottom: var(--s2);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--blanco);
}

.cc-aviso p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cc-tenue);
}

.cc-aviso strong { color: var(--cc-texto); font-weight: 600; }

/* Enlaces de texto. Se excluye .cc-boton a propósito: «Configurar» es un <a>
   para poder funcionar sin JavaScript, y si esta regla lo alcanzara le pintaría
   el texto casi del mismo color que su fondo. */
.cc-aviso a:not(.cc-boton),
.cc-panel a:not(.cc-boton) { color: var(--cc-acento); text-decoration: underline; }
.cc-aviso a:not(.cc-boton):hover,
.cc-panel a:not(.cc-boton):hover { color: var(--blanco); }

.cc-aviso__acciones {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* ---- El botón. Uno solo, repetido tres veces. --------------------------- */

.cc-boton {
  flex: 1 1 auto;
  min-width: 160px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s5);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--blanco);
  background: var(--magenta);
  border: 1.5px solid var(--magenta);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.cc-boton:hover {
  color: var(--blanco);
  background: var(--magenta-oscuro);
  border-color: var(--magenta-oscuro);
}

/* El foco del proyecto es un anillo blanco + cian, pensado sobre fondo claro.
   Sobre el fondo oscuro del aviso el anillo blanco se pierde, así que aquí el
   orden se invierte: primero el cian, luego el blanco. */
.cc-boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cc-fondo), 0 0 0 6px var(--cc-acento);
}

/* ---- Segunda capa: el panel --------------------------------------------- */

.cc-velo {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(16, 19, 42, .72);
}

.cc-panel {
  position: fixed;
  z-index: 130;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - var(--s6)));
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--cc-fondo);
  color: var(--cc-texto);
  border: 1px solid var(--cc-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-g);
}

.cc-panel__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--cc-linea);
}

.cc-panel__titulo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--blanco);
}

.cc-panel__cerrar {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; line-height: 1;
  color: var(--cc-texto);
  background: transparent;
  border: 1px solid var(--cc-linea);
  border-radius: var(--pill);
  cursor: pointer;
}
.cc-panel__cerrar:hover { color: var(--cc-acento); border-color: var(--cc-acento); }
.cc-panel__cerrar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cc-fondo), 0 0 0 6px var(--cc-acento);
}

.cc-panel__cuerpo {
  padding: var(--s5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-panel__entrada {
  margin-bottom: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--cc-tenue);
}

.cc-panel__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--cc-linea);
}

/* ---- Categorías ---------------------------------------------------------- */

.cc-cat {
  padding-block: var(--s5);
  border-top: 1px solid var(--cc-linea);
}
.cc-cat:first-of-type { border-top: 0; padding-top: var(--s2); }

.cc-cat__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s2);
}

.cc-cat__nombre {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blanco);
}

.cc-cat__siempre {
  flex: none;
  padding: var(--s1) var(--s3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cc-acento);
  border: 1px solid var(--cc-linea);
  border-radius: var(--pill);
}

.cc-cat__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--cc-tenue);
}

.cc-cat__vacia {
  margin-top: var(--s2);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--cc-tenue);
}

/* ---- Interruptor --------------------------------------------------------- */

.cc-interruptor {
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* El input real no se oculta con display:none —dejaría de ser enfocable con
   teclado—: se hace transparente y se coloca encima del carril. */
.cc-interruptor input {
  position: absolute;
  width: 52px; height: 30px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cc-interruptor__carril {
  position: relative;
  flex: none;
  width: 52px; height: 30px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--cc-linea);
  border-radius: var(--pill);
  transition: background .18s ease, border-color .18s ease;
}

.cc-interruptor__carril::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #DCE3F2;
  border-radius: var(--pill);
  transition: transform .18s ease, background .18s ease;
}

.cc-interruptor input:checked + .cc-interruptor__carril {
  background: var(--magenta);
  border-color: var(--magenta);
}
.cc-interruptor input:checked + .cc-interruptor__carril::after {
  transform: translateX(22px);
  background: var(--blanco);
}

.cc-interruptor input:focus-visible + .cc-interruptor__carril {
  box-shadow: 0 0 0 3px var(--cc-fondo), 0 0 0 6px var(--cc-acento);
}

/* Etiqueta accesible: la lee el lector de pantalla, no se ve. */
.cc-interruptor__etiqueta {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Tabla de cookies del panel ------------------------------------------ */

.cc-tabla-envoltorio { margin-top: var(--s3); overflow-x: auto; }

.cc-tabla {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.cc-tabla th,
.cc-tabla td {
  padding: var(--s2) var(--s3);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--cc-linea);
}

.cc-tabla th { font-weight: 700; color: var(--blanco); white-space: nowrap; }
.cc-tabla td { color: var(--cc-tenue); }
.cc-tabla code { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--cc-acento); }

/* ---- Enlace del pie ------------------------------------------------------ */

.cc-reabrir {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* ---- Sustituto de contenido embebido bloqueado ---------------------------
   Hoy no hay ningún iframe que dependa del consentimiento: el widget de reserva
   es de la misma sociedad y no instala cookies. Queda listo para el día en que
   entre uno que sí: en lugar de cargarlo sin permiso, se pinta esto con un botón.
   ------------------------------------------------------------------------- */

.cc-hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  min-height: 220px;
  padding: var(--s6);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gris);
  background: var(--blanco);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

/* ---- Adaptación a pantalla ----------------------------------------------- */

@media (min-width: 768px) {
  .cc-aviso { inset: auto auto var(--s5) var(--s5); max-width: 720px; }
}

@media (max-width: 560px) {
  .cc-aviso { padding: var(--s4); }
  .cc-aviso__acciones { width: 100%; }
  .cc-boton { flex: 1 1 100%; }
  .cc-panel { width: calc(100vw - var(--s4)); max-height: 92vh; }
  .cc-panel__cabeza,
  .cc-panel__cuerpo,
  .cc-panel__pie { padding-inline: var(--s4); }
  .cc-panel__pie .cc-boton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-boton,
  .cc-interruptor__carril,
  .cc-interruptor__carril::after { transition: none; }
}

/* Sin JavaScript el panel no puede abrirse con un botón, así que se abre por
   ancla (#cc-panel) y se cierra volviendo atrás. Esta regla es la que hace que
   el gestor entero siga siendo utilizable con el JS desactivado. */
.cc-panel:target { display: flex !important; }