/* =============================================================================
   Estudiantes Viajeros v2
   Sistema de diseño. CSS nativo, sin framework, sin build.

   REGLAS FIJAS DEL SISTEMA (no romper al añadir componentes):
   - Acento único: --c-brand (cian de marca). Todos los CTA, enlaces y focus.
   - --c-precio (ámbar) es SÓLO para precios y etiquetas de precio. Nunca un botón.
   - --c-trust (verde azulado) es SÓLO superficie de la zona de familias.
   - Radios: pill para interactivos, --r-card para tarjetas, --r-input para campos.
   - Tema bloqueado en oscuro; el bloque de light abajo sólo reajusta tokens.
   ========================================================================== */

/* ------------------------------------------------------------- 1. FUENTES -- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

/* -------------------------------------------------------------- 2. TOKENS -- */
:root {
  color-scheme: dark;

  /* marca */
  --c-brand:        #33c2ff;
  --c-brand-fuerte: #00a4ee;
  --c-brand-suave:  #8bdcff;
  --c-trust:        #17aa95;
  --c-precio:       #ffbc00;
  --c-wa:           #25d366;

  /* Botones: ámbar de marca. El texto va oscuro a la fuerza, porque blanco
     sobre #ffbc00 se queda en 1,8:1 y no se lee. */
  --c-boton:        #ffbc00;
  --c-boton-fuerte: #ffd451;
  --c-sobre-boton:  #2a1d00;
  --c-boton-linea:  #ffbc00;   /* borde y texto del botón fantasma */

  /* superficies */
  --c-bg:        #0a1017;
  --c-bg-alt:    #0f1822;
  --c-superficie:#141f2b;
  --c-elevada:   #1a2836;
  --c-borde:     #24384a;
  --c-borde-fuerte: #33506a;

  /* texto */
  --c-txt:       #eef5fb;
  --c-txt-medio: #a7bbcd;
  --c-txt-tenue: #7b91a5;
  --c-sobre-brand: #05161f;

  /* estado */
  --c-error:   #ff6b6b;
  --c-ok:      #3ddc97;

  /* Tinta del cartel: el azul marino del perfilado de "PARA L@S DEL 09".
     Es lo que hace que un titular blanco lea como cartel de fiesta y no como
     un titular de web corporativa. */
  --c-tinta:   #0b1c3a;

  /* tipografía */
  --f-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-texto:   'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* escala fluida: móvil primero, crece con el viewport */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-base: 1rem;
  --t-lg:  clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --t-xl:  clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --t-2xl: clamp(1.65rem, 1.4rem + 1.25vw, 2.4rem);
  --t-3xl: clamp(1.95rem, 1.5rem + 2.3vw, 3.4rem);
  --t-4xl: clamp(2.25rem, 1.55rem + 3.6vw, 4.75rem);

  /* espacio */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-seccion: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* forma */
  --r-card:  16px;
  --r-input: 10px;
  --r-chip:  999px;

  /* sombra tintada al fondo, nunca negro puro */
  --sombra:    0 1px 2px rgb(3 10 16 / .5), 0 8px 24px -8px rgb(3 10 16 / .6);
  --sombra-alta: 0 2px 4px rgb(3 10 16 / .5), 0 24px 48px -16px rgb(3 10 16 / .7);

  --ancho: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modo claro: mismos colores de marca, superficies invertidas.
   El acento y las reglas de uso no cambian. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --c-brand:        #0083be;
    --c-brand-fuerte: #006692;
    --c-brand-suave:  #005d86;
    --c-trust:        #0f7d6c;
    --c-precio:       #9a6b00;
    --c-bg:        #ffffff;
    --c-bg-alt:    #f3f7fa;
    --c-superficie:#ffffff;
    --c-elevada:   #f7fafc;
    --c-borde:     #dde7ee;
    --c-borde-fuerte: #b9cbd9;
    /* El relleno del botón sigue siendo el ámbar de marca, pero el borde y el
       texto del fantasma tienen que oscurecerse: #ffbc00 sobre blanco es 1,7:1. */
    --c-boton-fuerte: #f0ad00;
    --c-boton-linea:  #8a5f00;
    --c-txt:       #0d1a24;
    --c-txt-medio: #45596a;
    --c-txt-tenue: #617485;
    --c-sobre-brand: #ffffff;
    --sombra:      0 1px 2px rgb(13 26 36 / .06), 0 8px 24px -8px rgb(13 26 36 / .12);
    --sombra-alta: 0 2px 4px rgb(13 26 36 / .06), 0 24px 48px -16px rgb(13 26 36 / .18);
  }
}

/* ---------------------------------------------------------------- 3. BASE -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera fija incluye la fila de accesos, así que mide unos 128 px.
     Con menos margen, saltar a #tendencias deja el titular debajo de ella. */
  scroll-padding-top: 8.5rem;
}
@media (min-width: 1024px) { html { scroll-padding-top: 7.5rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--c-bg);
  color: var(--c-txt);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }

p { text-wrap: pretty; }
p, li { max-width: 68ch; }

a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-brand-suave); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--c-brand); color: var(--c-sobre-brand); }

/* ------------------------------------------------------------ 4. LAYOUT --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .contenedor { padding-inline: var(--s-5); } }

.seccion { padding-block: var(--s-seccion); }
.seccion--alt { background: var(--c-bg-alt); }

/* --------------------------------------------- el número premiado del sorteo */
/* Verde de marca, pero más oscuro que --c-trust: ese con texto blanco se queda
   en 2,91:1 y no cumple ni para texto grande. Éste da 5,23:1. */
.premiado {
  background: #0e7a6b;
  color: #fff;
  padding-block: var(--s-6);
  text-align: center;
}
/* Aire propio a los lados, además del que ya pone .contenedor. Un texto
   centrado sobre un fondo de color necesita más margen que uno alineado a la
   izquierda: con el mínimo del contenedor, en un móvil estrecho la línea larga
   llegaba a 20 px del borde y se leía pegada. */
.premiado .contenedor { padding-inline: var(--s-5); }
@media (min-width: 768px) { .premiado .contenedor { padding-inline: var(--s-6); } }
.premiado__intro {
  font-size: var(--t-lg);
  line-height: 1.45;
  margin: 0 auto;
  max-width: 34ch;
  text-wrap: balance;
}
/* En pantallas pequeñas el titular baja de tamaño antes que romperse: a 320 px
   "906.637" a 2,75rem ya rozaba los lados. */
@media (max-width: 380px) {
  .premiado__numero { font-size: clamp(2.25rem, 13vw, 2.75rem); }
}
/* El número es a lo que se viene: se lee de lejos y no se parte nunca. */
.premiado__numero {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: var(--s-3) 0 var(--s-2);
  white-space: nowrap;
}
.premiado__pie {
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0;
}

.cabecera-seccion { margin-bottom: var(--s-6); max-width: 46ch; }
.cabecera-seccion p { color: var(--c-txt-medio); margin-top: var(--s-3); font-size: var(--t-lg); }
/* El titular quiere medida corta, el párrafo no. Si se estrecha el bloque entero,
   en móvil el texto de apoyo se parte en columnas de cuatro palabras. */
.cabecera-seccion h1, .cabecera-seccion h2 { max-width: 20ch; }

/* Páginas que arrancan con miga de pan: menos aire arriba, que la miga ya separa */
.seccion--cabecera { padding-top: var(--s-5); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar-al-contenido {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--c-brand); color: var(--c-sobre-brand);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-input); font-weight: 700;
}
.saltar-al-contenido:focus { top: var(--s-3); }

/* ----------------------------------------------------------- 5. BOTONES --- */
.btn {
  --btn-bg: var(--c-boton);
  --btn-fg: var(--c-sobre-boton);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85rem 1.5rem;
  min-height: 48px;              /* objetivo táctil cómodo en móvil */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;           /* nunca parte en dos líneas */
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover { background: var(--c-boton-fuerte); color: var(--btn-fg); }
.btn:active { transform: scale(.975); }

/* El fantasma es el mismo ámbar en línea, para que se vea que es el hermano
   menor del principal y no un botón de otra familia. */
.btn--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--c-boton-linea);
  border-color: var(--c-boton-linea);
}
.btn--fantasma:hover {
  background: color-mix(in srgb, var(--c-boton) 16%, transparent);
  color: var(--c-boton-linea);
  border-color: var(--c-boton);
}

/* "Pedir presupuesto" va en blanco: es la acción que más se repite por toda la
   web y así se distingue de los botones ámbar sin perder peso. */
.btn--blanco {
  --btn-bg: #ffffff;
  --btn-fg: #0b1c3a;
  border-color: #ffffff;
}
.btn--blanco:hover { background: #e6eef5; color: #0b1c3a; border-color: #e6eef5; }
@media (prefers-color-scheme: light) {
  /* Sobre fondo claro, un botón blanco sin borde desaparece */
  .btn--blanco { border-color: var(--c-borde-fuerte); }
  .btn--blanco:hover { border-color: var(--c-txt-medio); }
}

.btn--wa { --btn-bg: var(--c-wa); --btn-fg: #04270f; }
.btn--wa:hover { background: #1fbe5b; }

.btn--grande { padding: 1.05rem 2rem; font-size: var(--t-lg); min-height: 56px; }
.btn--bloque { width: 100%; }

.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 420px) {
  .grupo-botones { flex-direction: column; }
  .grupo-botones .btn { width: 100%; }
}

/* -------------------------------------------------------------- 6. CHIPS -- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-chip);
  background: var(--c-elevada);
  font-size: var(--t-xs); font-weight: 600; color: var(--c-txt-medio);
  white-space: nowrap;
}

/* Precio: color reservado. Nunca se usa como botón. */
.precio {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-precio);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.precio__desde { font-size: var(--t-xs); font-weight: 600; color: var(--c-txt-tenue);
  text-transform: uppercase; letter-spacing: .1em; display: block; }
.precio--grande { font-size: var(--t-2xl); }

/* ------------------------------------------------------- 7. NAVEGACIÓN ---- */
/* Barra teal con los DOS teléfonos, como en la web actual. En móvil se ven los
   dos: el público llama, no rellena formularios. */
.barra-avisos {
  background: var(--c-trust);
  color: #ffffff;
  font-size: var(--t-sm);
}
.barra-avisos__int {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-5); min-height: 42px; flex-wrap: wrap;
  padding-block: 6px;
}
.barra-avisos__tel {
  display: inline-flex; align-items: center; gap: 6px;
  color: #ffffff; text-decoration: none; font-weight: 700;
  white-space: nowrap;
}
.barra-avisos__tel:hover { color: #ffffff; text-decoration: underline; }
.barra-avisos__tel svg { flex-shrink: 0; opacity: .9; }
@media (max-width: 400px) {
  .barra-avisos__int { font-size: 0.8rem; gap: var(--s-2) var(--s-4); }
  .barra-avisos__que { display: none; }   /* en pantallas muy estrechas, sólo el número */
}

/* ------------------------------------------------- accesos rápidos y redes -- */
/* Seis discos de color: presupuesto, intranet, catálogo y las tres redes.
   Para este público las redes son prueba de que la agencia existe de verdad,
   así que van arriba y no escondidas en el pie. */
.accesos { border-top: 1px solid var(--c-borde); background: var(--c-bg-alt); }
/* Los seis van SIEMPRE en una sola fila: partidos en dos filas ocupan media
   pantalla y empujan el cartel fuera de la vista. */
.accesos__int {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.45rem, 3vw, 1.5rem);
  padding-block: var(--s-3);
  flex-wrap: nowrap;
}
/* El disco se ve pequeño pero el área pulsable sigue siendo de 44 px de alto,
   que es el mínimo cómodo con el dedo. */
.acceso {
  display: grid; place-items: center;
  min-height: 44px; padding-inline: 2px;
  text-decoration: none;
}
.acceso__disco {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-chip);
  background: var(--acceso-bg, var(--c-elevada));
  color: var(--acceso-fg, #fff);
  box-shadow: 0 2px 0 rgb(3 10 16 / .55);
  transition: transform .18s var(--ease);
}
.acceso__disco svg { width: 13px; height: 13px; }
.acceso:hover .acceso__disco { transform: translateY(-2px); }
.acceso:active .acceso__disco { transform: translateY(0) scale(.94); }

/* El nombre no se pinta en ningún tamaño: en escritorio lo enseña el title al
   pasar el ratón, y aquí se queda para lectores de pantalla. */
.acceso__texto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Cada acceso con el color por el que la gente lo reconoce */
.acceso.es-presupuesto { --acceso-bg: #2f45d4; }
.acceso.es-viajeros    { --acceso-bg: var(--c-precio); --acceso-fg: #2a1d00; }
.acceso.es-catalogo    { --acceso-bg: #d8232a; }
.acceso.es-fb          { --acceso-bg: #1877f2; }
.acceso.es-ig          { --acceso-bg: linear-gradient(45deg, #f9ce34, #ee2a7b 48%, #6228d7); }
.acceso.es-tt          { --acceso-bg: #010101; --acceso-fg: #fff; }
.acceso.es-tt .acceso__disco { border: 1px solid var(--c-borde-fuerte); }

/* En escritorio hay sitio de sobra, así que el disco recupera tamaño normal */
@media (min-width: 768px) {
  .accesos__int { justify-content: flex-end; padding-block: var(--s-2); }
  .acceso__disco { width: 38px; height: 38px; }
  .acceso__disco svg { width: 19px; height: 19px; }
}

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-borde);
}
.cabecera__int {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); height: 68px;                 /* tope 80px del sistema */
}
/* El logo es un PNG con transparencia extraído del original de la marca.
   No se recolorea ni se sustituye: el ámbar y el verde ya contrastan sobre el
   fondo oscuro. En modo claro se deja igual, que es su fondo de origen. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 40px; width: auto; }
@media (min-width: 640px) { .logo img { height: 46px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.1vw, 1.25rem); }
  .nav a {
    color: var(--c-txt-medio); text-decoration: none; font-weight: 600;
    font-size: 0.925rem; white-space: nowrap; padding: var(--s-2) 0;
    border-bottom: 2px solid transparent;
  }
  .nav a:hover { color: var(--c-txt); }
  .nav a[aria-current="page"] { color: var(--c-txt); border-bottom-color: var(--c-brand); }
}
.cabecera__cta { display: none; }
@media (min-width: 1024px) { .cabecera__cta { display: inline-flex; } }

.hamburguesa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--c-elevada); border: 1px solid var(--c-borde);
  border-radius: var(--r-input); color: var(--c-txt); cursor: pointer;
}
@media (min-width: 1024px) { .hamburguesa { display: none; } }

.menu-movil {
  position: fixed; inset: 0; z-index: 150;
  background: var(--c-bg);
  padding: var(--s-4);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility .35s;
}
.menu-movil[data-abierto="true"] { transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .menu-movil { transition: none; } }
.menu-movil__top { display: flex; justify-content: flex-end; margin-bottom: var(--s-4); }
.menu-movil nav { display: flex; flex-direction: column; }
.menu-movil nav a {
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--c-borde);
  color: var(--c-txt); text-decoration: none;
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600;
}
.menu-movil nav a[aria-current="page"] { color: var(--c-brand); }
.menu-movil__pie { margin-top: auto; padding-top: var(--s-5); display: grid; gap: var(--s-3); }

/* Barra de acción fija en móvil. Es la conversión principal con 90% de tráfico móvil. */
.barra-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-borde);
}
.barra-accion .btn { min-height: 50px; font-size: 0.95rem; }
@media (min-width: 1024px) { .barra-accion { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 84px; } }

/* --------------------------------------------------------------- 8. HERO -- */
.hero {
  position: relative;
  /* En móvil se descuenta la barra de acción fija para que el CTA no quede debajo */
  min-height: min(calc(100dvh - 84px), 720px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--c-bg-alt);
}
@media (min-width: 1024px) { .hero { min-height: min(100dvh, 780px); } }

.hero__media { position: absolute; inset: 0; z-index: 0; }
/* <picture> es un envoltorio sin caja propia: sin esto la imagen se queda a su
   alto natural y el hero se parte en foto arriba y texto abajo. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
/* Scrim doble: vertical para el texto, radial para dar profundidad.
   Garantiza contraste AA del titular sobre cualquier fotograma. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(6 11 16 / .95) 0%, rgb(6 11 16 / .72) 38%, rgb(6 11 16 / .25) 70%, rgb(6 11 16 / .45) 100%),
    radial-gradient(120% 80% at 50% 100%, rgb(0 60 90 / .35), transparent 60%);
}
/* En escritorio el texto se apoya en la izquierda sobre zonas claras de la foto.
   Se añade una cortina lateral para mantener el contraste AA del titular. */
@media (min-width: 1024px) {
  .hero__media::after {
    background:
      linear-gradient(to right, rgb(6 11 16 / .88) 0%, rgb(6 11 16 / .55) 42%, rgb(6 11 16 / .12) 75%),
      linear-gradient(to top, rgb(6 11 16 / .85) 0%, rgb(6 11 16 / .3) 45%, transparent 75%);
  }
}
/* Destino todavía sin fotos: fondo de marca en lugar de una imagen rota */
.hero__media--sin-foto {
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--c-brand) 40%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-trust) 34%, var(--c-bg)) 0%, var(--c-bg) 70%);
}

.hero__int { position: relative; z-index: 1; padding-block: var(--s-7) var(--s-7); width: 100%; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero__claim {
  color: rgb(255 255 255 / .88);
  font-size: var(--t-lg);
  max-width: 46ch;
  margin-top: var(--s-4);
}
.hero .grupo-botones { margin-top: var(--s-5); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.hero__meta .chip { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .28); color: #fff; }

/* Hero de página interior: más bajo, sin vídeo */
.hero--interior { min-height: auto; }
.hero--interior .hero__int { padding-block: var(--s-7) var(--s-6); }
.hero--interior h1 { font-size: var(--t-3xl); max-width: 20ch; }

/* ----------------------------------------------- 9. BENTO DE DESTINOS ----- */
/* 4 destinos destacados, 4 celdas exactas. Móvil: 1 columna. */
.bento {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; }
  .bento > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .bento > :nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .bento > :nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .bento > :nth-child(4) { grid-column: span 3; grid-row: span 1; }
}

.tarjeta-destino {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
  padding: var(--s-4);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  background: var(--c-elevada);
  border: 1px solid var(--c-borde);
}
.tarjeta-destino picture, .tarjeta-destino img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.tarjeta-destino::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(5 10 15 / .92) 12%, rgb(5 10 15 / .45) 55%, rgb(5 10 15 / .18) 100%);
}
.tarjeta-destino:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .tarjeta-destino:hover img { transform: none; } }
.tarjeta-destino:hover { color: #fff; }
.tarjeta-destino__zona {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-brand-suave);
}
.tarjeta-destino__nombre {
  font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; margin-top: var(--s-1);
}
.tarjeta-destino__pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-3);
}
.tarjeta-destino__desc { color: rgb(255 255 255 / .8); font-size: var(--t-sm); max-width: 34ch; }
/* Sin partir: en las celdas estrechas del bento el importe se rompía en dos
   líneas ("219" arriba y "€" abajo) y se subía encima del nombre del destino. */
.tarjeta-destino .precio { color: var(--c-precio); font-size: var(--t-xl); white-space: nowrap; }
.tarjeta-destino .precio__desde { color: rgb(255 255 255 / .65); }

/* --------------------------------------- 10. CARRUSEL DE OTROS DESTINOS -- */
.carrusel {
  display: flex; gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: var(--s-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-borde-fuerte) transparent;
}
.carrusel > * { scroll-snap-align: start; flex: 0 0 clamp(200px, 62vw, 260px); }
@media (min-width: 768px) { .carrusel { margin-inline: 0; padding-inline: 0; } }

/* Los nueve destinos secundarios en rejilla, de dos en dos en móvil: son pocos
   y verlos todos de golpe funciona mejor que esconderlos tras un scroll lateral.
   Tres columnas en pantallas grandes, que nueve entre tres sale exacto. */
.rejilla-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 768px) { .rejilla-mini { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-mini {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4);
  min-height: 150px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  text-decoration: none; color: var(--c-txt);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tarjeta-mini:hover { border-color: var(--c-brand); transform: translateY(-2px); color: var(--c-txt); }
/* La tarjeta dejó de ser un enlace entero: ahora el nombre lleva al destino y el
   botón al presupuesto. Dos destinos distintos no pueden vivir bajo un mismo
   enlace, y un botón dentro de otro enlace tampoco es HTML válido. */
.tarjeta-mini__nombre {
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  color: var(--c-txt); text-decoration: none;
}
.tarjeta-mini__nombre:hover { color: var(--c-brand); }
.tarjeta-mini__zona { font-size: var(--t-xs); color: var(--c-txt-tenue); }
.tarjeta-mini__precio { margin-top: auto; }
.tarjeta-mini__cta { margin-top: auto; align-self: start; }

/* --------------------------------------------- 11. BLOQUE AUTOFINANCIAR -- */
.dato-grande {
  display: grid; gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) { .dato-grande { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); } }

.cifra {
  font-family: var(--f-display);
  font-size: clamp(4rem, 2rem + 14vw, 10rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--c-precio);
  font-variant-numeric: tabular-nums;
}
.cifra small {
  display: block; font-family: var(--f-texto); font-size: var(--t-base);
  font-weight: 600; letter-spacing: 0; color: var(--c-txt-medio); margin-top: var(--s-3);
  max-width: 32ch;
}

.pasos { display: grid; gap: var(--s-4); counter-reset: paso; }
.paso {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-borde);
}
.paso:last-child { border-bottom: 0; padding-bottom: 0; }
.paso::before {
  counter-increment: paso; content: counter(paso);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--c-brand); color: var(--c-sobre-brand);
  border-radius: var(--r-chip);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg);
}
.paso h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.paso p { color: var(--c-txt-medio); font-size: var(--t-sm); }

/* ------------------------------------------------ 12. BLOQUE CONFIANZA --- */
.confianza {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--c-trust) 22%, var(--c-bg)) 0%,
      var(--c-bg-alt) 62%);
  border-block: 1px solid var(--c-borde);
}
.garantias { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 640px) { .garantias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .garantias { grid-template-columns: repeat(4, 1fr); } }
.garantia {
  padding: var(--s-5) var(--s-4);
  background: color-mix(in srgb, var(--c-superficie) 70%, transparent);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.garantia svg { color: var(--c-trust); margin-bottom: var(--s-3); }
.garantia h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.garantia p { font-size: var(--t-sm); color: var(--c-txt-medio); }

/* ------------------------------------------------------ 13. LISTA CHECK -- */
.lista-check { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
/* El marcador va colocado encima del texto y no como columna de una rejilla.
   Con rejilla, cada trozo de texto y cada <strong> cuenta como una celda
   distinta, así que una frase con una palabra en negrita se partía en varias
   líneas de una palabra cada una. Así el texto fluye normal y admite negritas,
   enlaces o lo que haga falta. */
.lista-check li {
  position: relative; padding-left: 34px;
  color: var(--c-txt-medio);
}
.lista-check li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  background: var(--c-brand);
  border-radius: var(--r-chip);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat,
                linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
}

/* --------------------------------------------------- 14. PÁGINA DESTINO -- */
.destino-cuerpo { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  .destino-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); align-items: start; }
}
.destino-texto > * + * { margin-top: var(--s-4); }
.destino-texto p { font-size: var(--t-lg); color: var(--c-txt-medio); }
/* Los h2 dentro del texto van un escalón por debajo del h1 del hero interior,
   que ya usa --t-3xl. Si comparten tamaño se pierde la jerarquía de la página. */
.destino-texto h2 { font-size: var(--t-2xl); }

.panel-reserva {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--sombra);
}
@media (min-width: 1024px) { .panel-reserva { position: sticky; top: 5.5rem; } }
.panel-reserva h2 { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.panel-reserva .grupo-botones { margin-top: var(--s-4); flex-direction: column; }
.panel-reserva .btn { width: 100%; }

/* Las opciones de alojamiento, seguidas y sin tarjetas.
 *
 * Antes eran fichas con borde y una de ellas destacada en azul. Dos problemas:
 * la destacada elegía por el visitante, y para saber qué llevaba cada una había
 * que bajar a otra lista y volver. Ahora es texto corrido: título con el precio,
 * puntos debajo, y aire entre una opción y la siguiente. Se leen de arriba abajo.
 */
.opciones-texto { display: grid; gap: var(--s-7); }

.opcion-txt__titulo {
  font-size: var(--t-lg);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-borde);
}
/* El precio en el color del precio, que es el que usa toda la web para hablar de
   dinero, y algo mayor: es el dato por el que se compara una opción con otra. */
.opcion-txt__precio {
  font-family: var(--f-display);
  font-size: var(--t-xl); color: var(--c-precio);
  white-space: nowrap;
}
.opcion-txt .lista-puntos { margin-top: var(--s-4); }

/* Puntos de verdad, no vistos: aquí se enumera lo que entra en el precio, y un
   visto verde delante de cada línea convierte una lista larga en un anuncio. */
.lista-puntos { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.lista-puntos li {
  position: relative; padding-left: 20px;
  color: var(--c-txt-medio); line-height: 1.5;
}
.lista-puntos li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-txt-tenue);
}

/* Excursiones: rejilla con nº exacto de celdas, sin huecos vacíos */
.excursiones { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .excursiones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .excursiones { grid-template-columns: repeat(3, 1fr); } }
.excursion {
  padding: var(--s-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.excursion h3 { font-size: var(--t-base); color: var(--c-brand); }
.excursion p { font-size: var(--t-sm); color: var(--c-txt-medio); margin-top: var(--s-1); }

/* Variante del catálogo: foto en círculo y el nombre debajo. Sin tarjeta, para
   que el círculo sea la pieza y no compita con el borde. En móvil van de dos en
   dos: de una en una la foto se hace enorme y hay que arrastrar para verlas. */
.excursiones:has(.excursion--foto) { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) {
  .excursiones:has(.excursion--foto) { grid-template-columns: repeat(4, 1fr); }
}
.excursion--foto {
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
}
.excursion--foto .excursion__circulo {
  width: min(160px, 45vw);
  margin: 0 auto var(--s-3);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--c-brand);
}
.excursion--foto .excursion__circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.excursion--foto h3 { text-transform: uppercase; letter-spacing: .02em; }

.galeria-destino { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galeria-destino { grid-template-columns: repeat(4, 1fr); } }
.galeria-destino img { border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ------------------------------------------------- 14b. GALERÍA COMPLETA -- */
.rejilla-fotos {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .rejilla-fotos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rejilla-fotos { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } }
.rejilla-fotos .foto { display: block; border-radius: 10px; overflow: hidden; background: var(--c-elevada); }
.rejilla-fotos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.rejilla-fotos .foto:hover img { transform: scale(1.05); }
.rejilla-fotos .foto:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rejilla-fotos .foto:hover img { transform: none; } }

.paginacion { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; }

/* Secciones dentro de una galería (las de 2025 vienen divididas en boat party,
   discoteca, playa...). Se navegan como pestañas de scroll horizontal. */
.secciones {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  scrollbar-width: thin;
}
.secciones a {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-chip);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-txt-medio); text-decoration: none; white-space: nowrap;
}
.secciones a:hover { border-color: var(--c-brand); color: var(--c-txt); }
.secciones a[aria-current="true"] {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand) 18%, transparent);
  color: var(--c-txt);
}

/* ------------------------------------------- tarjetas de cada galería ----- */
.tarjetas-galeria { display: grid; gap: var(--s-4); }
@media (min-width: 640px)  { .tarjetas-galeria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tarjetas-galeria { grid-template-columns: repeat(4, 1fr); } }

.tarjeta-galeria {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-superficie);
  text-decoration: none; color: var(--c-txt);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tarjeta-galeria:hover { border-color: var(--c-brand); transform: translateY(-3px); color: var(--c-txt); }
/* Tres fotos de muestra: una grande y dos pequeñas, para que se vea que hay tanda */
.tarjeta-galeria__fotos { display: grid; grid-template-columns: 2fr 1fr; gap: 2px; }
.tarjeta-galeria__fotos img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-galeria__fotos img:first-child { grid-row: span 2; aspect-ratio: 1; }
.tarjeta-galeria__fotos img:not(:first-child) { aspect-ratio: 1; }
.tarjeta-galeria__pie { padding: var(--s-4); display: grid; gap: 4px; }
.tarjeta-galeria__titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-base); line-height: 1.15; }
.tarjeta-galeria__meta { font-size: var(--t-xs); color: var(--c-txt-tenue); }

/* ------------------------------------------------- 20b. CAJA DE FOTOS ----- */
/* Al pinchar una foto se abre encima, sin salir de la página. Las imágenes
   originales pesan unos 3 MB, así que se enseña la miniatura ampliada y
   difuminada mientras carga la grande. */
.visor {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  background: rgb(3 8 12 / .94);
  backdrop-filter: blur(6px);
}
/* minmax(0, 1fr) y no 1fr a secas: "1fr" significa minmax(AUTO, 1fr), y ese auto
   deja que la fila crezca hasta el tamaño natural de la foto. Con una foto
   vertical de 1920x2880 en una ventana de 900 px de alto, la imagen se salía
   1.292 px por abajo y había que desplazarse para verla entera. Con minmax(0,1fr)
   la fila puede encogerse y el max-height:100% de la foto ya tiene contra qué
   calcularse. */
.visor[open], .visor.es-abierto { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.visor__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) var(--s-4);
  color: var(--c-txt-medio); font-size: var(--t-sm);
}
.visor__cuenta { font-variant-numeric: tabular-nums; }

.visor__escena {
  position: relative;
  min-height: 0; padding: 0 var(--s-3);
}

/* La foto va posicionada y centrada con margin:auto, no como celda de una
   rejilla. Con rejilla, el max-height:100% se calcula contra el alto de la fila,
   la fila es "auto" y "auto" es el tamaño natural de la foto: la restricción se
   muerde la cola y no limita nada. Una foto vertical de 1920x2880 se salía 1.292
   px de la pantalla en un portátil.
   Con inset+margin:auto el rectángulo de referencia es la escena, que sí tiene
   un alto definido, así que el 100% significa lo que parece que significa. */
.visor__foto {
  position: absolute; inset: 0;
  margin: auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity .25s var(--ease);
}

/* Los botones y el cargador, por encima de la foto: al estar todos posicionados,
   sin esto mandaría el orden del HTML y la foto taparía la flecha de "anterior". */
.visor__nav, .visor__cargador, .visor__bajar { z-index: 2; }
.visor__foto.es-cargando { opacity: .35; filter: blur(6px); }

/* Cargador: la foto original pesa unos 3 MB y en 4G tarda un par de segundos.
   Sin esto parece que la miniatura borrosa es el resultado final. */
.visor__cargador {
  position: absolute;
  display: none;
  place-items: center;
  gap: var(--s-3);
  color: #fff;
  pointer-events: none;
}
.visor__cargador[hidden] { display: none; }
.visor__cargador:not([hidden]) { display: grid; }
.visor__cargador::before {
  content: '';
  width: 44px; height: 44px;
  border-radius: var(--r-chip);
  border: 3px solid rgb(255 255 255 / .25);
  border-top-color: var(--c-boton);
  animation: girar .8s linear infinite;
}
.visor__cargador span {
  font-size: var(--t-sm); font-weight: 600;
  text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Sin animación: el aro se queda quieto y manda el texto */
@media (prefers-reduced-motion: reduce) {
  .visor__cargador::before { animation: none; border-top-color: rgb(255 255 255 / .25); }
}

.visor__pie { display: flex; justify-content: center; gap: var(--s-3); padding: var(--s-4); }

/* Descargar, encima de la foto y abajo. Sobre la propia imagen y no en la barra
   de arriba porque es donde se mira cuando ya se ha decidido guardarla. Lleva
   fondo propio: sin él desaparece sobre las fotos claras. */
.visor__bajar {
  position: absolute; bottom: var(--s-4); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); min-height: 44px;
  background: rgb(12 18 24 / .82);
  backdrop-filter: blur(6px);
  color: #fff; text-decoration: none;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: var(--r-chip);
  font-size: var(--t-sm); font-weight: 700;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.visor__bajar:hover { background: rgb(12 18 24 / .95); border-color: #fff; color: #fff; }
.visor__bajar svg { width: 18px; height: 18px; }
/* Mientras baja la foto grande no se ofrece: descargaría la miniatura borrosa. */
.visor__bajar[hidden] { display: none; }

.visor__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  background: var(--c-elevada); color: var(--c-txt);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-chip);
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.visor__btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.visor__btn:active { transform: scale(.94); }
.visor__btn[disabled] { opacity: .35; pointer-events: none; }
.visor__btn svg { width: 24px; height: 24px; }
.visor__cerrar { width: 44px; height: 44px; }
.visor__cerrar svg { width: 20px; height: 20px; }

/* En móvil las flechas van abajo, al alcance del pulgar, y las de los lados se
   esconden. En escritorio al revés: a los lados, que es donde se buscan.
   Si no se oculta un juego, salen las cuatro a la vez. */
.visor__nav { display: none; }

@media (min-width: 900px) {
  .visor__pie { display: none; }
  .visor__nav {
    display: grid;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px;
  }
  .visor__nav.es-antes { left: var(--s-4); }
  .visor__nav.es-despues { right: var(--s-4); }
  .visor__nav:active { transform: translateY(-50%) scale(.94); }
}

/* --------------------------------------------------------- 15. ACORDEÓN -- */
.acordeon { border-top: 1px solid var(--c-borde); }
.acordeon details { border-bottom: 1px solid var(--c-borde); }
.acordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg);
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ''; flex-shrink: 0;
  width: 24px; height: 24px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--c-brand);
  transition: transform .25s var(--ease);
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details > div { padding-bottom: var(--s-5); }
.acordeon p { color: var(--c-txt-medio); }
@media (prefers-reduced-motion: reduce) { .acordeon summary::after { transition: none; } }

/* ---------------------------------------------------- 16. ESTADO VACÍO --- */
.estado-vacio {
  display: grid; place-items: center; text-align: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-4);
  border: 1px dashed var(--c-borde-fuerte);
  border-radius: var(--r-card);
  background: var(--c-bg-alt);
}
.estado-vacio svg { color: var(--c-txt-tenue); }
.estado-vacio p { color: var(--c-txt-medio); max-width: 46ch; }

/* -------------------------------------------------------- 17. RESEÑAS ---- */
.resenas { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .resenas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .resenas { grid-template-columns: repeat(3, 1fr); } }
.resena {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.resena blockquote { font-size: var(--t-lg); line-height: 1.45; }
.resena figcaption { margin-top: auto; font-size: var(--t-sm); color: var(--c-txt-tenue); }
.resena figcaption strong { display: block; color: var(--c-txt); font-size: var(--t-base); }
/* Enlace al momento del vídeo: es lo que hace verificable la cita */
.resena__fuente {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-2);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--c-brand); text-decoration: none;
}
.resena__fuente:hover { text-decoration: underline; }
.estrellas { display: flex; gap: 2px; color: var(--c-precio); }

/* ------------------------------------------------------ 18. FORMULARIOS -- */
.form { display: grid; gap: var(--s-4); }
.form__fila { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form__fila { grid-template-columns: repeat(2, 1fr); } }

.campo { display: grid; gap: var(--s-2); }
.campo label { font-weight: 600; font-size: var(--t-sm); color: var(--c-txt); }
.campo label .req { color: var(--c-brand); }
.campo__ayuda { font-size: var(--t-xs); color: var(--c-txt-medio); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  font-family: var(--f-texto);
  font-size: 1rem;                 /* 16px evita el zoom automático en iOS */
  color: var(--c-txt);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-input);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--c-txt-tenue); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 28%, transparent);
  outline: none;
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7bbcd' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--c-error); }
.campo__error { font-size: var(--t-sm); color: var(--c-error); font-weight: 600; }

.campo--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); }
.campo--check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--c-brand); }
.campo--check label { font-weight: 400; color: var(--c-txt-medio); font-size: var(--t-sm); }

.aviso {
  padding: var(--s-4);
  border-radius: var(--r-input);
  border: 1px solid;
  font-size: var(--t-sm);
}
.aviso--error { border-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 12%, transparent); color: var(--c-txt); }
.aviso--ok    { border-color: var(--c-ok);    background: color-mix(in srgb, var(--c-ok) 12%, transparent);    color: var(--c-txt); }
/* Ni bien ni mal: se ha guardado, pero hay algo que mirar. En rojo parecería
   que ha fallado y en verde nadie lo leería. */
.aviso--aviso { border-color: var(--c-precio); background: color-mix(in srgb, var(--c-precio) 12%, transparent); color: var(--c-txt); }

.form__enviando { display: none; }
.form[data-enviando="true"] .form__enviando { display: inline; }
.form[data-enviando="true"] .form__texto-btn { display: none; }
.form[data-enviando="true"] button { opacity: .7; pointer-events: none; }

/* --------------------------------------------------------------- 19. PIE -- */
.pie { background: var(--c-bg-alt); border-top: 1px solid var(--c-borde); padding-block: var(--s-7) var(--s-5); }
.pie__rejilla { display: grid; gap: var(--s-6); }
@media (min-width: 700px)  { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1024px) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.pie h2 { font-size: var(--t-base); font-family: var(--f-texto); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-txt-tenue); margin-bottom: var(--s-3); }
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.pie a { color: var(--c-txt-medio); text-decoration: none; font-size: var(--t-sm); }
.pie a:hover { color: var(--c-brand); }
.pie__legal {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--c-borde);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: var(--c-txt-tenue);
}
.pie__legal p { max-width: none; }
.redes { display: flex; gap: var(--s-3); }
.redes a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--c-borde); border-radius: var(--r-chip);
  color: var(--c-txt-medio);
}
.redes a:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ------------------------------------------------------------ 20. MIGAS --- */
.migas { padding-block: var(--s-4); font-size: var(--t-sm); }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.migas li { color: var(--c-txt-tenue); max-width: none; }
.migas li + li::before { content: '/'; margin-right: var(--s-2); color: var(--c-borde-fuerte); }
.migas a { color: var(--c-txt-medio); text-decoration: none; }
.migas a:hover { color: var(--c-brand); }

/* ------------------------------------------------------- 21. ANIMACIÓN --- */
/* Revelado al entrar en viewport. Comunica jerarquía de lectura al bajar.
   Lo activa IntersectionObserver desde app.js; sin JS todo queda visible. */
/* Va condicionado a .js: si el JS no llega a ejecutarse, nada se oculta y la
   página se ve entera. Sin este candado un fallo de JS dejaría medio sitio en
   blanco, porque el estado de partida es opacity:0. */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .js .revelar.es-visible { opacity: 1; transform: none; }
  .js .revelar:nth-child(2) { transition-delay: .07s; }
  .js .revelar:nth-child(3) { transition-delay: .14s; }
  .js .revelar:nth-child(4) { transition-delay: .21s; }
}

/* ============================================================================
   23. LENGUAJE DE CARTEL
   El público objetivo tiene 17 años y vive en Instagram y TikTok. Estas tres
   piezas son las que separan esta web de una web de empresa: el titular
   perfilado, el feed de vídeo vertical y la papeleta.
   ========================================================================== */

/* ---------------------------------------------------- titular de cartel ---- */
/* Blanco con perfilado azul marino, como el "PARA L@S DEL 09" del cartel real.
   paint-order evita que el trazo se coma el interior de las letras. */
/* El cartel original perfila en azul marino porque va sobre foto clara. Aquí el
   fondo ya es azul muy oscuro, así que ese perfilado sería invisible: se cambia
   por el cian de marca, que es lo que hace que lea como cartel y no como titular. */
.titular-cartel {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-3xl);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: #ffffff;
  -webkit-text-stroke: 0.055em var(--c-brand);
  paint-order: stroke fill;
  text-shadow: 0.045em 0.055em 0 var(--c-tinta);
  text-wrap: balance;
  max-width: 15ch;
  margin-inline: auto;
}
.titular-cartel em {
  display: block;
  font-style: normal;
  color: var(--c-precio);
  -webkit-text-stroke-color: #6b4a00;
}
@media (min-width: 1024px) { .titular-cartel { margin-inline: 0; } }

/* Cinta inclinada, el recurso del cartel para destacar una frase */
.cinta {
  display: inline-block;
  padding: 0.3em 0.9em;
  background: var(--c-precio);
  color: #2a1d00;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  transform: rotate(-1.6deg);
  box-shadow: 0 3px 0 rgb(3 10 16 / .5);
}

/* -------------------------------------------------- el cartel de portada --- */
.cartel { position: relative; padding-block: var(--s-5) var(--s-6); overflow: hidden; }

/* Vídeo de fondo, sólo en escritorio: en móvil el cartel ya ocupa toda la
   pantalla y un vídeo detrás no se vería, sólo gastaría datos. */
.cartel__fondo { display: none; }
@media (min-width: 1024px) {
  .cartel__fondo { display: block; position: absolute; inset: 0; z-index: 0; }
  .cartel__fondo img, .cartel__fondo video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .8s var(--ease);
  }
  .cartel__fondo.es-visible img, .cartel__fondo.es-visible video { opacity: 1; }
  /* Cortina fuerte: el fondo es ambiente, el cartel y el titular son el mensaje */
  .cartel__fondo::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(to right, var(--c-bg) 8%, rgb(10 16 23 / .82) 46%, rgb(10 16 23 / .68) 100%),
      linear-gradient(to bottom, var(--c-bg), transparent 22%, transparent 78%, var(--c-bg));
  }
  .cartel__int { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cartel__fondo video { display: none; }
}
.cartel__marco {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  border: 1px solid var(--c-borde);
}
.cartel__marco img { width: 100%; height: auto; }
.cartel__pie { margin-top: var(--s-5); text-align: center; }
.cartel__pie .grupo-botones { justify-content: center; margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .cartel__int { display: grid; grid-template-columns: 1fr 480px; gap: var(--s-8); align-items: center; }
  .cartel__pie { text-align: left; margin-top: 0; }
  .cartel__pie .grupo-botones { justify-content: flex-start; }
  .cartel__marco { max-width: none; }
}

/* ------------------------------------------------- feed de vídeo vertical -- */
/* Formato 9:16 y desplazamiento lateral con el dedo: es el gesto que este
   público hace mil veces al día. Los vídeos originales son verticales, así que
   no hay que inventar nada, sólo respetarlos. */
.reels {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-2) var(--s-5);
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: var(--s-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-borde-fuerte) transparent;
}
/* Ancho generoso en móvil: los vídeos traen rótulos quemados y con tarjetas
   estrechas no hay quien los lea. Se deja asomar la siguiente para que se vea
   que hay más y se puede deslizar. */
.reels > * { scroll-snap-align: center; flex: 0 0 clamp(260px, 84vw, 340px); }
@media (min-width: 768px)  { .reels > * { flex-basis: 300px; } }

/* Sólo el feed de la portada, que son cuatro, se reparte el ancho en pantalla
   grande. El de opiniones tiene once: si se reparten, cada uno queda en 90 px.
   Ese caso lo detectó la comprobación de play de tools/revisar.mjs. */
@media (min-width: 1160px) {
  .reels--completo { margin-inline: 0; padding-inline: 0; overflow-x: visible; }
  .reels--completo > * { flex: 1 1 0; }
}

.reel {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-elevada);
  border: 1px solid var(--c-borde);
}
/* La proporción la manda la portada (480x680), no el vídeo: la portada es la
   foto que ha elegido el cliente y es lo que se ve el 99% del tiempo. El vídeo,
   que es 9:16, se recorta un poco al reproducirse, y eso importa menos. */
.reel__media {
  position: relative;
  aspect-ratio: 480 / 680;
  max-height: 56vh;
  overflow: hidden;
  background: var(--c-superficie);
}
@media (min-width: 1024px) { .reel__media { max-height: 68vh; } }
.reel__media picture { display: block; position: absolute; inset: 0; }
.reel__media img, .reel__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* El estado lo lleva el contenedor (.es-reproduciendo), no el propio vídeo:
   así hay una sola fuente de verdad para el póster, el velo, el play y el vídeo. */
.reel__media video { opacity: 0; transition: opacity .3s var(--ease); }
.reel__media.es-reproduciendo video { opacity: 1; }
/* Los fotogramas ya traen rótulos quemados ("Si eres del 09"), así que el velo
   inferior tiene que ser opaco de verdad o compiten con el nombre del destino. */
.reel__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(5 10 15 / .96) 0%, rgb(5 10 15 / .86) 22%, rgb(5 10 15 / .3) 48%, transparent 68%);
}
.reel__info {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--s-4);
  display: grid; gap: 2px;
}
.reel__zona {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-brand-suave);
}
.reel__nombre {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1; color: #fff;
  text-transform: uppercase; letter-spacing: -0.03em;
}
.reel__precio { margin-top: var(--s-2); }
.reel__precio .precio { font-size: var(--t-xl); }
.reel__precio .precio__desde { color: rgb(255 255 255 / .7); }
.reel__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.95rem 1rem;
  background: var(--c-boton);
  color: var(--c-sobre-boton);
  font-family: var(--f-texto); font-weight: 800;
  text-transform: uppercase; font-size: 0.9rem; letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .18s var(--ease);
}
.reel__cta:hover { background: var(--c-boton-fuerte); color: var(--c-sobre-boton); }
.reel__cta svg { width: 17px; height: 17px; }
/* Botón de reproducir. Hasta que no se pulsa no se descarga ni un byte de vídeo,
   que con 90% de tráfico móvil es la diferencia entre 0 y 15 MB. */
.reel__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: #fff;
}
.reel__play::before {
  content: '';
  position: absolute;
  width: 64px; height: 64px;
  border-radius: var(--r-chip);
  background: rgb(5 10 15 / .5);
  border: 2px solid rgb(255 255 255 / .9);
  backdrop-filter: blur(6px);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.reel__play svg {
  position: relative;
  width: 26px; height: 26px;
  margin-left: 4px;             /* el triángulo pesa a la izquierda */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5));
}
.reel__play:hover::before { transform: scale(1.08); background: rgb(5 10 15 / .68); }
.reel__play:active::before { transform: scale(.96); }
.reel__play:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .reel__play::before { transition: none; } }

/* Con el vídeo ya en marcha mandan los controles nativos */
.reel__media.es-reproduciendo .reel__play,
.reel__media.es-reproduciendo::after { display: none; }
.reel__media.es-reproduciendo img { visibility: hidden; }
.reel__media.es-reproduciendo .reel__info { display: none; }
.reel__media video { z-index: 1; }
.reel__cargando {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: rgb(5 10 15 / .45);
  color: #fff; font-size: var(--t-sm); font-weight: 700;
}

/* --------------------------------------------------------- la papeleta ---- */
/* Objeto propio del negocio: 150 papeletas de 2 € por viajero. Se dibuja con su
   troquel y su matriz porque es lo que la gente reconoce de un talonario. */
.taco { position: relative; padding: 10px 12px 14px 0; }
.papeleta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 104px;
  min-height: 168px;
  background: var(--c-precio);
  color: #2a1d00;
  border-radius: 10px;
  box-shadow: 0 10px 24px -10px rgb(3 10 16 / .8);
}
.papeleta--fondo { position: absolute; inset: 10px 12px 14px 0; }
.papeleta--fondo-1 { transform: rotate(-2.6deg); filter: brightness(.86); }
.papeleta--fondo-2 { transform: rotate(-5.4deg); filter: brightness(.72); }

.papeleta__cuerpo { padding: var(--s-4); display: grid; align-content: center; gap: 6px; }
.papeleta__sorteo {
  font-size: 0.62rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72;
}
.papeleta__premio {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.28rem; line-height: 1.02; text-transform: uppercase;
}
.papeleta__marca { font-size: 0.68rem; font-weight: 700; opacity: .68; margin-top: 4px; }

/* Matriz: separada por el troquel, con el valor y el número de serie */
.papeleta__matriz {
  position: relative;
  display: grid; align-content: center; justify-items: center; gap: 4px;
  border-left: 2px dashed rgb(42 29 0 / .38);
  padding: var(--s-3);
}
.papeleta__valor {
  font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; line-height: 1;
}
.papeleta__serie {
  font-size: 0.64rem; font-weight: 700; letter-spacing: .09em;
  opacity: .74; font-variant-numeric: tabular-nums;
}
/* Los dos huecos del troquel. Van del color de la sección, por eso la
   calculadora vive siempre sobre .seccion--alt. */
.papeleta__matriz::before,
.papeleta__matriz::after {
  content: ''; position: absolute; left: -11px;
  width: 20px; height: 20px; border-radius: var(--r-chip);
  background: var(--c-bg-alt);
}
.papeleta__matriz::before { top: -11px; }
.papeleta__matriz::after  { bottom: -11px; }

/* ------------------------------------------------------- la calculadora ---- */
.calc { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: 300px 1fr; gap: var(--s-8); } }
.calc__pie { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--c-txt-tenue); }

.calc__grupo { margin-bottom: var(--s-5); border: 0; padding: 0; }
.calc__grupo legend,
.calc__label {
  display: block; padding: 0;
  font-weight: 700; font-size: var(--t-sm); color: var(--c-txt);
  margin-bottom: var(--s-3);
}
.calc__destinos { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.calc-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-chip span {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-chip);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-txt-medio);
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.calc-chip span b { color: var(--c-precio); font-weight: 800; }
.calc-chip input:checked + span {
  border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 16%, transparent);
  color: var(--c-txt);
}
.calc-chip input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 2px; }

.calc__label output {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl);
  color: var(--c-brand); font-variant-numeric: tabular-nums;
  margin-left: var(--s-2);
}
.calc__de { font-weight: 600; color: var(--c-txt-tenue); }

.calc__rango { width: 100%; margin: 0; accent-color: var(--c-brand); height: 34px; }
.calc__extremos {
  display: flex; justify-content: space-between;
  font-size: var(--t-xs); color: var(--c-txt-tenue); margin-top: -4px;
}

.calc__resultado {
  display: grid; gap: 2px;
  padding: var(--s-5);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  background: var(--c-superficie);
  max-width: none;
  margin-bottom: var(--s-5);
}
.calc__etiqueta {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-txt-tenue);
}
.calc__cifra {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 4rem); line-height: 1;
  color: var(--c-txt); font-variant-numeric: tabular-nums;
}
.calc__nota { font-size: var(--t-sm); color: var(--c-txt-medio); }
/* El momento que hace clic: en Conil, vendiéndolas todas, el viaje sale a cero */
.calc__resultado.es-gratis {
  border-color: var(--c-precio);
  background: color-mix(in srgb, var(--c-precio) 12%, var(--c-superficie));
}
.calc__resultado.es-gratis .calc__cifra { color: var(--c-precio); }

/* ------------------------------------------------- botones flotantes ------ */
/* Los dos canales directos, apilados sobre la barra de acción: llamar arriba y
   WhatsApp abajo, que es el que más usa este público y el que cae más a mano
   del pulgar. El orden del HTML ya es ese, así que la columna va en su sentido. */
.flotantes {
  position: fixed; right: var(--s-4); z-index: 95;
  bottom: calc(84px + env(safe-area-inset-bottom) + var(--s-3));
  display: flex; flex-direction: column; gap: var(--s-3);
}
.flotante {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-chip);
  box-shadow: 0 6px 20px -4px rgb(3 10 16 / .8);
  transition: transform .18s var(--ease);
}
.flotante:hover { transform: scale(1.06); }
.flotante:active { transform: scale(.95); }
.flotante svg { width: 28px; height: 28px; }

.flotante--wa  { background: var(--c-wa); color: #04270f; }
.flotante--wa:hover { color: #04270f; }
.flotante--tel { background: var(--c-boton); color: var(--c-sobre-boton); }
.flotante--tel:hover { color: var(--c-sobre-boton); }

@media (min-width: 1024px) {
  .flotantes { bottom: var(--s-5); }
  /* En escritorio el teléfono ya está escrito en la barra de arriba */
  .flotante--tel { display: none; }
}

/* ------------------------------------------------ 24. AVISO DE COOKIES ---- */
/* No es un muro: se puede seguir leyendo la web con el aviso abierto. Por eso
   va abajo y no tapa la pantalla entera. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 180;
  padding: var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--c-elevada);
  border-top: 2px solid var(--c-boton);
  box-shadow: 0 -8px 32px -8px rgb(3 10 16 / .7);
}
.cookies[hidden] { display: none; }
.cookies__caja { max-width: var(--ancho); margin-inline: auto; }
.cookies__titulo { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.cookies__texto {
  font-size: var(--t-sm); color: var(--c-txt-medio);
  max-width: 78ch; margin-bottom: var(--s-4);
}

/* Aceptar y rechazar, mismo tamaño y mismo peso: lo exige la AEPD */
.cookies__botones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cookies__botones .btn { flex: 1 1 auto; min-width: 150px; }
@media (min-width: 700px) {
  .cookies__botones .btn { flex: 0 0 auto; }
}

.cookies__panel {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--c-borde);
  display: grid; gap: var(--s-4);
}
.cookies__panel[hidden] { display: none; }
.cookies__cat { display: grid; gap: var(--s-2); }
.cookies__interruptor { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.cookies__interruptor input { width: 22px; height: 22px; accent-color: var(--c-boton); flex-shrink: 0; }
.cookies__interruptor input:disabled { cursor: not-allowed; }
.cookies__cat-nombre { font-weight: 700; }
.cookies__siempre {
  margin-left: var(--s-2); padding: 2px 8px;
  border-radius: var(--r-chip); background: var(--c-superficie);
  font-size: var(--t-xs); font-weight: 600; color: var(--c-txt-tenue);
}
.cookies__cat-resumen { font-size: var(--t-sm); color: var(--c-txt-medio); margin-left: 34px; }

/* Con el aviso abierto, los botones flotantes se suben para no quedar debajo */
body.hay-cookies .flotantes { display: none; }

/* Tabla de cookies de la política */
.tabla-cookies { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-top: var(--s-4); }
.tabla-cookies th, .tabla-cookies td {
  padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--c-borde);
  vertical-align: top;
}
.tabla-cookies th { color: var(--c-txt); font-weight: 700; white-space: nowrap; }
.tabla-cookies td { color: var(--c-txt-medio); }
.tabla-cookies code { font-size: var(--t-xs); color: var(--c-txt); word-break: break-all; }
.envoltorio-tabla { overflow-x: auto; }

/* -------------------------------------------------------------- 22. UTIL -- */
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.centrado { text-align: center; margin-inline: auto; }
.texto-medio { color: var(--c-txt-medio); }
.prosa > * + * { margin-top: var(--s-4); }
.prosa h2 { font-size: var(--t-2xl); margin-top: var(--s-7); }
.prosa h3 { margin-top: var(--s-5); }
.prosa ul, .prosa ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); color: var(--c-txt-medio); }

/* Los textos legales vienen tal cual de la web antigua. La política de cookies
   enumera nombres de cookie de 100 caracteres sin un solo espacio, y sin esto
   la página entera coge scroll horizontal en móvil. */
.legal { overflow-wrap: anywhere; word-break: break-word; }
.legal h2 { font-size: var(--t-xl); margin-top: var(--s-6); }
.legal h3 { font-size: var(--t-lg); }
.legal p, .legal li { color: var(--c-txt-medio); font-size: var(--t-sm); }
.legal table { display: block; overflow-x: auto; max-width: 100%; }

/* ============================================================================
   25. MI VIAJE — la zona privada del viajero
   ============================================================================
   Lo que sustituye: siete cuadraditos con un icono dentro y ni una palabra. El
   nombre de cada uno sólo salía al dejar el ratón encima, gesto que en un móvil
   no existe, y el 90% de la gente entra desde el móvil. Aquí cada sitio lleva su
   nombre, y además un dato de dentro para no tener que entrar a mirar.
   ---------------------------------------------------------------------------- */

/* ------------------------------------------------------ quién eres y dónde -- */
.mv-barra {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-borde);
}
.mv-barra__int {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-block: var(--s-3);
}
.mv-barra__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-barra__hola { font-weight: 700; }
.mv-barra__grupo {
  font-size: var(--t-sm); color: var(--c-txt-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-barra__cambiar { color: var(--c-brand); text-decoration: underline; }

.btn--mini { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); flex: none; }

/* --------------------------------------------------------- menú del área --- */
/* En el móvil se desliza en horizontal: siete secciones no caben de otra forma
   sin dejar los toques demasiado juntos. */
.mv-nav {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-borde);
  position: sticky; top: 0; z-index: 20;
}
.mv-nav__int {
  display: flex; gap: var(--s-1);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mv-nav__int::-webkit-scrollbar { display: none; }
.mv-nav__op {
  flex: none; scroll-snap-align: start;
  padding: var(--s-4) var(--s-3);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-txt-medio); white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.mv-nav__op:hover { color: var(--c-txt); }
.mv-nav__op.es-actual { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* ---------------------------------------------------- elegir entre grupos -- */
.mv-grupos { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .mv-grupos { grid-template-columns: repeat(2, 1fr); } }
/* Estas tres son enlaces que se ven como fichas, así que se les quita el
   subrayado y el azul de enlace: si no, la tarjeta entera parece una lista de
   enlaces sueltos y no se lee como una unidad. */
.mv-grupo, .mv-tarjeta, .mv-destacado { text-decoration: none; color: var(--c-txt); }

.mv-grupo {
  display: grid; gap: var(--s-1);
  padding: var(--s-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.mv-grupo:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.mv-grupo__codigo { font-size: var(--t-sm); font-weight: 700; color: var(--c-brand); }
.mv-grupo__nombre { font-family: var(--f-display); font-size: var(--t-lg); }
.mv-grupo__meta   { font-size: var(--t-sm); color: var(--c-txt-medio); }

/* ------------------------------------------------------- portada del área -- */
.mv-portada { margin-bottom: var(--s-6); }
.mv-portada__titulo {
  font-size: clamp(2.2rem, 11vw, 4rem);
  line-height: .95; text-transform: uppercase;
  margin-top: var(--s-2);
}
.mv-portada__cuenta {
  margin-top: var(--s-3);
  font-size: var(--t-lg); color: var(--c-txt-medio);
}
.mv-portada__cuenta strong { color: var(--c-precio); font-size: var(--t-xl); }

/* Lo que hay que hacer, cuando lo hay. Sólo aparece si se debe dinero: un aviso
   que sale siempre deja de leerse a la semana. */
.mv-destacado {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
  padding: var(--s-5);
  background: color-mix(in srgb, var(--c-precio) 12%, var(--c-superficie));
  border: 1px solid color-mix(in srgb, var(--c-precio) 45%, transparent);
  border-radius: var(--r-card);
}
.mv-destacado:hover { border-color: var(--c-precio); }
.mv-destacado__cifra {
  font-family: var(--f-display); font-size: var(--t-2xl);
  color: var(--c-precio); line-height: 1;
}
.mv-destacado__txt { color: var(--c-txt-medio); flex: 1 1 14ch; }

/* ------------------------------------------------------------ las tarjetas -- */
.mv-rejilla { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .mv-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mv-rejilla { grid-template-columns: repeat(4, 1fr); } }

.mv-tarjeta {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-5) var(--s-4);
  min-height: 118px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.mv-tarjeta:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.mv-tarjeta__titulo { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.1; }
.mv-tarjeta__dato   { font-size: var(--t-sm); font-weight: 700; color: var(--c-brand); }
.mv-tarjeta__pie    { font-size: var(--t-xs); color: var(--c-txt-medio); margin-top: auto; }

.mv-ayuda { font-size: var(--t-sm); color: var(--c-txt-medio); text-align: center; }
.mv-ayuda a { color: var(--c-brand); text-decoration: underline; }

/* ------------------------------------------------------ fichas de datos --- */
.mv-datos { display: grid; gap: var(--s-3); }
@media (min-width: 600px) { .mv-datos { grid-template-columns: repeat(2, 1fr); } }
.mv-dato {
  display: grid; gap: 2px;
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.mv-dato__et  { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-txt-tenue); }
.mv-dato__val { font-family: var(--f-display); font-size: var(--t-lg); }

/* ---------------------------------------------------------- las cuentas --- */
/* Cuatro cifras y no una: "te queda" a secas no explica por qué, y lo primero
   que preguntan es si cuenta lo que acaban de subir. */
.mv-cuentas { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .mv-cuentas { grid-template-columns: repeat(4, 1fr); } }
.mv-cuenta {
  display: grid; gap: 2px; align-content: start;
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.mv-cuenta__et  { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-txt-tenue); }
.mv-cuenta__val { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; }
.mv-cuenta__pie { font-size: var(--t-xs); color: var(--c-txt-medio); }
.mv-cuenta__val.es-ok { color: var(--c-trust); }
.mv-cuenta--fuerte {
  background: color-mix(in srgb, var(--c-precio) 12%, var(--c-superficie));
  border-color: color-mix(in srgb, var(--c-precio) 45%, transparent);
}
.mv-cuenta--fuerte .mv-cuenta__val { color: var(--c-precio); }

/* --------------------------------------------------- listas de registros --- */
/* En el móvil cada fila se apila; una tabla de verdad obligaría a deslizar en
   horizontal y aquí el 90% entra desde el móvil. */
.mv-lista { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.mv-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.mv-item__cuerpo { display: grid; gap: 2px; flex: 1 1 16ch; min-width: 0; }
.mv-item__titulo { font-weight: 600; overflow-wrap: anywhere; }
.mv-item__meta   { font-size: var(--t-xs); color: var(--c-txt-medio); }
/* El motivo por el que hay que repetir un papel. Se separa del resto de datos
   del documento porque es lo único que el viajero tiene que hacer. */
.mv-item__meta--avisa { color: var(--c-precio); font-weight: 600; }
.mv-item__cifra  { font-family: var(--f-display); font-size: var(--t-lg); }
.mv-item__acciones { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.mv-estado {
  font-size: var(--t-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-chip); white-space: nowrap;
}
.mv-estado.es-ok     { background: color-mix(in srgb, var(--c-trust) 20%, transparent); color: var(--c-trust); }
.mv-estado.es-espera { background: color-mix(in srgb, var(--c-precio) 18%, transparent); color: var(--c-precio); }

/* Botón que es un enlace: hereda tipografía en vez del estilo del sistema. */
.mv-enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--c-brand); text-decoration: underline;
}
.mv-enlace--peligro { color: var(--c-error); }

/* --------------------------------------------------------------- avisos --- */
.mv-panel {
  padding: var(--s-5);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
  background: var(--c-bg-alt);
}
.mv-panel h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.mv-panel p  { color: var(--c-txt-medio); }
.mv-panel p + p { margin-top: var(--s-3); }
.mv-panel a  { color: var(--c-brand); text-decoration: underline; }
.mv-panel--info  { border-color: color-mix(in srgb, var(--c-trust) 45%, transparent); }
.mv-panel--aviso { border-color: color-mix(in srgb, var(--c-precio) 45%, transparent); }
/* Variante para avisos: en vez del visto, una admonición. Hay que anular la
   máscara del visto, que si no se sigue aplicando encima del signo. */
.lista-check--ojo li::before {
  content: "!";
  mask: none; -webkit-mask: none;
  background: var(--c-precio); color: var(--c-sobre-boton);
  font-weight: 800; font-size: var(--t-sm);
  display: grid; place-items: center;
  border-radius: var(--r-chip);
}

/* El aviso de la autorización del menor.
 *
 * Es el único sitio del área privada donde la web le pide algo con consecuencias
 * el día del viaje, así que se sale del gris de las tarjetas: fondo teñido,
 * borde de color y el título grande. Es también el único aviso de este peso, y
 * conviene que siga siéndolo. */
.mv-alerta {
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--c-precio) 55%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-precio) 10%, var(--c-superficie));
}
.mv-alerta__et {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-precio);
}
.mv-alerta__titulo {
  font-family: var(--f-display);
  font-size: var(--t-xl); line-height: 1.15;
  margin-top: var(--s-2);
}
.mv-alerta__txt { color: var(--c-txt-medio); margin-top: var(--s-3); max-width: 62ch; }
.mv-alerta__txt strong { color: var(--c-txt); }
.mv-alerta__txt a { color: var(--c-brand); text-decoration: underline; }
.mv-alerta .grupo-botones { margin-top: var(--s-5); }

/* Los pasos van numerados porque son una secuencia de verdad: no se puede firmar
   lo que no se ha descargado ni subir lo que no se ha firmado. El número lo pone
   el contador de la lista y no un carácter escrito a mano, para que un lector de
   pantalla lo lea como la lista ordenada que es. */
.mv-pasos {
  counter-reset: paso;
  list-style: none; padding: 0;
  margin-top: var(--s-5);
  display: grid; gap: var(--s-4);
}
.mv-pasos li {
  position: relative;
  padding-left: 44px;
  color: var(--c-txt-medio);
  max-width: 62ch;
}
.mv-pasos li strong { color: var(--c-txt); }
.mv-pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-chip);
  background: var(--c-precio); color: var(--c-sobre-boton);
  font-weight: 800; font-size: var(--t-sm);
}

/* ------------------------------------------------------------- personas --- */
.mv-personas { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.mv-persona {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.mv-persona.es-tu { border-color: var(--c-brand); }
.mv-persona__nombre { font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.mv-persona__cifras { display: flex; gap: var(--s-4); font-size: var(--t-sm); }
.mv-persona__et { color: var(--c-txt-tenue); font-size: var(--t-xs); display: block; }

/* -------------------------------------------------------------- seguros --- */
.mv-seguros { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .mv-seguros { grid-template-columns: repeat(2, 1fr); } }
.mv-seguro {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-card);
}
.mv-seguro__nombre { font-family: var(--f-display); font-size: var(--t-lg); }
.mv-seguro__precio { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--c-precio); line-height: 1; }
.mv-seguro__texto  { font-size: var(--t-sm); color: var(--c-txt-medio); max-height: 16em; overflow-y: auto; }
.mv-seguro__nota   { font-size: var(--t-xs); color: var(--c-txt-tenue); text-align: center; }
.mv-seguro button  { margin-top: auto; }

/* Enlaces de acción ("Corregir", "Borrar", "Ver justificante") dentro de las
   listas. Como texto miden 22px de alto, la mitad de lo que necesita un dedo, y
   están pegados unos a otros: se falla el toque y se acaba borrando lo que no
   era. En el ratón no hace falta, así que sólo crece en pantallas táctiles. */
@media (pointer: coarse) {
  .mv-enlace { display: inline-block; padding-block: 11px; }
}