/* ===========================================================================
   usaatumedida.com — hoja de estilos única.
   Escrita a mano. Sin Tailwind, sin build step, sin dependencias.

   ── DE DÓNDE SALE CADA COLOR ────────────────────────────────────────────────
   El CSS del tema original SÍ está: en el export de las 7 landings, dentro de
   `Landings/{Nombre}/{Nombre}_files/`. El fichero que manda es **post-12.css**,
   que es el kit global de Elementor (`.elementor-kit-12`). Las capturas de
   producción confirman que ese kit es el que corre en el sitio real: el
   `bodyClass` de las 12 páginas capturadas lleva `elementor-kit-12`
   (docs/capturas-produccion/_registro.json).

   Cada variable de abajo lleva anotado su origen:
     · «kit»     → post-12.css, variable global o CSS personalizado del kit.
     · «medido»  → muestreado en docs/capturas-produccion/*.jpg sobre una
                   superficie sólida grande (no sobre texto antialiasado).

   NO se ha usado nada aproximado. Lo que decía la cabecera anterior de este
   fichero —que la hoja no estaba y que el azul #28496e salía del píxel del
   logotipo— era correcto solo para el logotipo: #28496e es el azul del SVG del
   logo, y NO es el azul de marca. El azul de marca es #00476f.

   NO HAY ROJO EN EL ORIGINAL. El acento es coral. Ver docs/noche/B3-estilo.md.

   ── TIPOGRAFÍA ──────────────────────────────────────────────────────────────
   Roboto en todo, sin ninguna serif. Los @font-face están en `roboto.css` del
   mismo export y apuntan a ficheros .woff2 alojados en el propio dominio del
   cliente (wp-content/uploads/elementor/google-fonts/fonts/…), no a Google.
   Esta noche no se sale a la red, así que aquí se declara la familia y se
   confía en la de sistema como respaldo. Las URLs exactas a descargar y el
   bloque @font-face listo para pegar están en docs/noche/B3-estilo.md §4.
   =========================================================================== */

:root {
  /* Marca — kit de Elementor (post-12.css) */
  --azul:          #00476f;   /* kit · --e-global-color-primary */
  --azul-oscuro:   #002038;   /* kit · --e-global-color-accent (hover de enlaces,
                                 pestaña activa, texto de cuerpo oscuro) */
  --azul-pie:      #011c39;   /* medido · fondo del pie, idéntico en las 12
                                 capturas (~68 000 px sólidos por página) */
  --azul-claro:    #5e79a6;   /* kit · CSS personalizado, .tituloQueVer */
  --azul-tenue:    #eff0f3;   /* kit · --e-global-color-secondary (banda gris
                                 de sección; en JPEG se lee #eff0f4) */
  --azul-borde:    #cdd1dd;   /* kit · CSS personalizado, fondo .tituloPrecios */

  /* Neutros */
  --tinta:         #002038;   /* kit · el mismo accent: el texto de cuerpo del
                                 original es azul marino, no negro */
  --tinta-suave:   #313131;   /* medido · párrafos de entradilla (#313131 sale
                                 13 veces en el HTML de producción) */
  --gris:          #808080;   /* CSS de página (post-222938.css, 23 usos) */
  --gris-claro:    #f5f5f5;   /* medido */
  --linea:         #cdd1dd;   /* kit · mismo tono que --azul-borde */
  --blanco:        #ffffff;

  /* Acento CORAL. En el original NO hay rojo: los precios van en azul y los
     CTA en coral. Dos corales conviven y los dos son reales:
       · #d66e7d — botón «Enviar», fondos .tituloLugar/.tituloHotel.  KIT.
       · #eb5473 — iconos circulares (descarga, financiación).        MEDIDO. */
  --acento:        #d66e7d;   /* kit · CSS personalizado + post-222938.css */
  --acento-oscuro: #b04a5c;   /* derivado: coral al 82 % para hover y errores
                                 (5,3:1 sobre blanco, suficiente para texto) */
  --acento-vivo:   #eb5473;   /* medido · iconos coral de la ficha */

  --foco:          #b8860b;

  /* Tipografía — kit: Roboto en todo, sin serif en ninguna parte. */
  --fuente: Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --fuente-titulos: var(--fuente);   /* se conserva el nombre porque lo usan
                                        hubs.css e itinerario.css */

  /* Ritmo */
  --ancho:      1140px;   /* kit · .elementor-section-boxed > .elementor-container
                             y --container-max-width. Verificado en la captura:
                             la tarjeta gris del hub va de x=152 a x=1287 en un
                             viewport de 1440 → 1136 px de caja. */
  --ancho-texto: 68ch;
  --radio:      20px;     /* kit · botones, inputs y .tituloPrecios: 20px */
  --radio-pequeno: 4px;   /* para lo que a 20px se deforma: enlaces de menú,
                             etiquetas, el subrayado del ítem activo */
  --radio-tarjeta: 30px;  /* medido · esquina de las tarjetas grises: la curva
                             tarda 28 px en horizontal y 32 en vertical */
  --radio-pastilla: 999px;/* medido · píldora «Desde 4697 €»: 182×64, radio = 32 */
  --sombra:     0 1px 3px rgb(29 37 48 / 8%), 0 6px 18px rgb(29 37 48 / 6%);
  --espacio:    1rem;

  /* ── Alto de la cabecera pegajosa ──────────────────────────────────────
     `.cabecera` es `position: sticky; top: 0; z-index: 40`, así que todo lo
     que quiera pegarse DEBAJO de ella necesita saber cuánto ocupa. Esta
     variable es ese contrato y este es el único sitio donde se declara.

         .lo-que-sea  { position: sticky; top: var(--alto-cabecera); }
         #una-seccion { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }

     Para lo primero hay además una clase hecha: `.bajo-cabecera`.

     El valor no es una estimación: `.cabecera__interior` lleva un
     `min-height` atado a esta misma variable (ver más abajo), de modo que la
     cabecera mide EXACTAMENTE esto mientras su contenido quepa. Se ha elegido
     un pelo por encima del alto natural calculado —94,5 px en escritorio,
     91 px por debajo de 760 px— para no recortar nada.

     Si se cambia el tamaño del logotipo, el padding de la cabecera o el del
     menú, hay que revisar este número: es lo único que no se recalcula solo. */
  --alto-cabecera: 96px;
}

@media (max-width: 760px) {
  /* Logo a 44 px y padding a .5rem: la cabecera encoge. */
  :root { --alto-cabecera: 92px; }
}

/* ─────────────────────────── Roboto ───────────────────────────
   PENDIENTE DE DESCARGA. Esta noche no se sale a la red (ni al dominio del
   cliente ni a Google), así que el bloque va comentado. Roboto es VARIABLE:
   un solo fichero por subconjunto cubre de 100 a 900, así que con cuatro
   ficheros está todo. Las URLs de origen (dominio del cliente, no Google) y
   los unicode-range exactos están en docs/noche/B3-estilo.md §4.

   Para activarlo: descargar los cuatro .woff2 a usaatumedida.com/assets/fuentes/
   y descomentar. Con `latin` sola ya entran acentos, ñ, ¿ ¡ y €.

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/roboto-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: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/roboto-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: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/roboto-latin-italic.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: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/roboto-latin-ext-italic.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;
}
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────── Base ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
}

/* Escala del kit, literal:
     h1  55px / 700 / 1.3em  (43px por debajo de 768px)
     h2  45px / 400 / 1.3em  ← ojo: el h2 del original NO es negrita
     h3–h6  20px / 700 / 1.3em
   El kit no encoge el h2 ni el h3 en móvil, y el original tampoco: en la
   captura de 390px el h2 sigue enorme y parte en cuatro líneas. Se respeta,
   pero se le pone un `clamp` de suelo al h1 igual que hace el kit. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  color: var(--azul);
  line-height: 1.3;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: 3.4375rem; font-weight: 700; }   /* 55px */
h2 { font-size: 2.8125rem; font-weight: 400; }   /* 45px */
h3, h4, h5, h6 { font-size: 1.25rem; font-weight: 700; }  /* 20px */

@media (max-width: 767px) {
  h1 { font-size: 2.6875rem; }                   /* 43px, valor del kit */
}

p, ul, ol, table { margin: 0 0 1rem; }

/* kit: `a { color: primary }`, `a:hover { color: accent }`. Literal. */
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--azul-oscuro); }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--gris-claro);
  padding: .1em .35em;
  border-radius: 3px;
}

/* Foco visible SIEMPRE. No se quita el outline en ningún sitio. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul);
  color: var(--blanco);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radio) 0;
}
.salto-contenido:focus { left: 0; }

.contenedor {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem); }

.pista { color: var(--gris); font-size: .875rem; }

.parrafo-guia { max-width: var(--ancho-texto); font-size: 1.075rem; color: var(--tinta-suave); }

/* ─────────────────────────── Cabecera ─────────────────────────── */

.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 40;
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .65rem;
  /* Ata el alto real a --alto-cabecera para que la variable no sea una
     estimación que se queda vieja: menos el borde inferior de .cabecera, que
     también cuenta para lo que tapa. `align-items: center` reparte la holgura. */
  min-height: calc(var(--alto-cabecera) - 1px);
}

/* Pegarse justo debajo de la cabecera. Es lo que necesita el índice de la
   ficha de itinerario (viaje-indice) y cualquier barra secundaria futura.
   z-index por debajo del 40 de .cabecera: pasa por debajo, no la tapa. */
.bajo-cabecera {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 30;
}

/* Anclas: sin esto, `#dia-3` deja el destino escondido bajo la cabecera. */
[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }

.cabecera__logo { display: inline-flex; flex: 0 0 auto; }
.cabecera__logo img { width: auto; height: 58px; }

.cabecera__derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.cabecera__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem 1.25rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: .85rem;
}
.cabecera__contacto a {
  color: var(--tinta-suave);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cabecera__contacto a:hover { color: var(--azul); text-decoration: underline; }
.cabecera__contacto .icono { color: var(--azul-claro); }

@media (max-width: 760px) {
  .cabecera__interior { padding-block: .5rem; }
  .cabecera__logo img { height: 44px; }
  .cabecera__contacto-texto { display: none; }
}

/* ─────────────────────────── Menú ─────────────────────────── */

.menu__lista, .menu__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__escritorio > .menu__lista {
  display: flex;
  gap: .25rem;
  align-items: center;
}

.menu__item { position: relative; }

.menu__enlace {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .7rem;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  /* radio pequeño a propósito: con los 20px del kit el borde inferior del
     ítem activo se curva y deja de leerse como subrayado. */
  border-radius: var(--radio-pequeno);
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.menu__enlace:hover,
.menu__item--activo > .menu__enlace {
  color: var(--azul);
  border-bottom-color: var(--azul);
}

.menu__enlace--boton { border: 0; border-bottom: 2px solid transparent; }

/* Submenú de escritorio: CSS puro. Abre con el ratón y con el teclado. */
.menu__escritorio .menu__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: .35rem;
  display: none;
  z-index: 50;
}
.menu__escritorio .menu__item--con-hijos:hover > .menu__submenu,
.menu__escritorio .menu__item--con-hijos:focus-within > .menu__submenu,
.menu__escritorio .menu__item--abierto > .menu__submenu {   /* táctil, vía site.js */
  display: block;
}
.menu__escritorio .menu__submenu .menu__enlace {
  display: block;
  width: 100%;
  border-bottom: 0;
  font-weight: 500;
}
.menu__escritorio .menu__submenu .menu__enlace:hover { background: var(--azul-tenue); }

/* Menú móvil: <details>. Sin una línea de JavaScript. */
.menu__movil { display: none; }
.menu__hamburguesa {
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.menu__hamburguesa::-webkit-details-marker { display: none; }
.menu__hamburguesa-barra {
  display: block;
  height: 2px;
  background: var(--azul);
  border-radius: 2px;
}
.menu__movil-panel {
  position: absolute;
  right: 1rem;
  left: 1rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: .5rem;
  z-index: 45;
}
.menu__movil-panel .menu__enlace { display: block; width: 100%; }
.menu__movil-panel .menu__submenu { padding-left: 1rem; }
.menu__movil-panel .menu__flecha { display: none; }

@media (max-width: 980px) {
  .menu__escritorio { display: none; }
  .menu__movil { display: block; }
}

/* ─────────────────────────── Migas ─────────────────────────── */

.migas { background: var(--gris-claro); border-bottom: 1px solid var(--linea); }
.migas__lista {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: .65rem 0;
  font-size: .85rem;
  color: var(--gris);
}
.migas__item + .migas__item::before { content: "›"; margin-right: .4rem; color: var(--azul-borde); }
.migas__item a { color: var(--tinta-suave); text-decoration: none; }
.migas__item a:hover { color: var(--azul); text-decoration: underline; }

/* ─────────────────────────── Botones ─────────────────────────── */

/* kit: `button, .elementor-button { font: 400 20px/1.3 Roboto; border: 1px solid
   primary; border-radius: 20px; padding: 10px }`. La medida de la píldora real
   («Desde 4697 €», 182×64 px con 115 px de texto dentro) da 19 px de relleno
   vertical y ~31 px horizontal, bastante más que los 10 px del kit: gana la
   medida, que es lo que se ve. Tamaño 20px → el texto cuenta como «grande» en
   WCAG y basta con 3:1 de contraste, que es justo lo que da el coral. */
.boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.6rem;
  border-radius: var(--radio);
  font-size: 1.25rem;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.3;
  cursor: pointer;
}

/* Coral: el botón «Enviar» del formulario y los CTA. Nunca rojo. */
.boton--primario  { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.boton--primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: var(--blanco); }

/* Azul: la píldora «VER» de las tarjetas y «Desde N €». En el original estas
   dos son cápsulas completas, no rectángulos redondeados. */
.boton--secundario { background: var(--azul); border-color: var(--azul); color: var(--blanco); border-radius: var(--radio-pastilla); }
.boton--secundario:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: var(--blanco); }

/* Se queda con `currentColor` porque se usa sobre el pie, que es azul marino. */
.boton--contorno { border-color: currentColor; color: inherit; background: transparent; }
.boton--contorno:hover { background: rgb(255 255 255 / 12%); color: inherit; }

.boton--pequeno { padding: .4rem 1rem; font-size: .95rem; }

.boton-pdf { margin: 1.5rem 0; }

/* ─────────────────────────── Rejillas y tarjetas ─────────────────────────── */

.rejilla {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* En el original la tarjeta NO tiene ni caja, ni borde, ni sombra: es la foto
   con las esquinas redondeadas, el título en azul y la píldora VER. Verificado
   en hub-a-tu-aire.jpg y en las tarjetas de extensión de la ficha. */
.tarjeta {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  transition: transform .18s ease;
}
.tarjeta:hover { transform: translateY(-2px); }

.tarjeta__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--azul-tenue);
  border-radius: var(--radio);
  overflow: hidden;
}
.tarjeta__imagen { width: 100%; height: 100%; object-fit: cover; display: block; }

.tarjeta__cuerpo { padding: .9rem .2rem 0; display: flex; flex-direction: column; gap: .45rem; flex: 1; }

.tarjeta__etiqueta {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.tarjeta__titulo { margin: 0; font-size: 1.25rem; }   /* h3 del kit: 20px/700 */
.tarjeta__enlace { text-decoration: none; color: var(--azul); }
.tarjeta__enlace:hover { text-decoration: underline; }
/* La tarjeta entera es clicable, pero el enlace real sigue siendo el título:
   así el lector de pantalla anuncia un solo enlace con un nombre útil. */
.tarjeta__enlace::after { content: ""; position: absolute; inset: 0; }
.tarjeta { position: relative; }
.tarjeta__media { position: relative; z-index: 1; }

.tarjeta__duracion { margin: 0; font-size: .85rem; color: var(--gris); font-weight: 600; }
.tarjeta__resumen  { margin: 0; font-size: .92rem; color: var(--tinta-suave); }
.tarjeta__nota     { margin: 0; font-size: .82rem; color: var(--gris); font-style: italic; }

.tarjeta__precio { margin: auto 0 0; padding-top: .6rem; display: flex; align-items: baseline; gap: .4rem; }
.tarjeta__precio-etiqueta { font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
/* En producción el precio va en AZUL, no en rojo: «/ Desde 2184 €» en la misma
   línea que los días y las noches, con el mismo color que el resto. */
.tarjeta__precio-importe  { font-size: 1.05rem; font-weight: 700; color: var(--azul); }

/* ─────────────────────────── Bloques de contenido ─────────────────────────── */

.bloque { margin-block: 2.5rem; }
.bloque__titulo { margin-bottom: .9rem; }
.bloque__nota { font-size: .85rem; color: var(--gris); }

.bloque--listas { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.lista-items { list-style: none; margin: 0; padding: 0; }
.lista-items__item {
  position: relative;
  padding: .3rem 0 .3rem 1.6rem;
  border-bottom: 1px solid var(--linea);
}
.lista-items__item:last-child { border-bottom: 0; }
.lista-bloque--incluye .lista-items__item::before    { content: "✓"; position: absolute; left: 0; color: #2f7a4d; font-weight: 700; }
.lista-bloque--no-incluye .lista-items__item::before { content: "✕"; position: absolute; left: 0; color: var(--acento); font-weight: 700; }
.lista-bloque--notas .lista-items__item::before      { content: "•"; position: absolute; left: .3rem; color: var(--azul-claro); }

.lista-enlaces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.lista-enlaces a { font-weight: 600; }

.dias { list-style: none; padding: 0; counter-reset: dia; }
.dias__dia { border-left: 3px solid var(--azul-borde); padding: .2rem 0 1rem 1.1rem; margin-bottom: .25rem; }
.dias__cabecera { margin: 0 0 .25rem; color: var(--azul); }

.contenido-editorial { max-width: var(--ancho-texto); }
.contenido-editorial img { border-radius: var(--radio); }
.contenido-editorial h2, .contenido-editorial h3 { margin-top: 1.8rem; }

.hero__imagen { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radio-tarjeta); }

/* ─────────────────────────── Tablas ─────────────────────────── */

.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  background: var(--blanco);
}
.tabla th, .tabla td {
  border: 1px solid var(--linea);
  padding: .6rem .8rem;
  text-align: left;
  vertical-align: top;
}
.tabla thead th { background: var(--azul); color: var(--blanco); font-weight: 600; }
.tabla tbody tr:nth-child(even) { background: var(--gris-claro); }

.tabla-precios { margin-bottom: 2rem; }
.tabla-precios__lugar { font-size: 1.1rem; margin-bottom: .5rem; }
.tabla-precios__temporada { background: var(--azul-tenue); min-width: 240px; }
.tabla-precios__temporada-titulo { display: block; font-weight: 700; color: var(--azul); }
.tabla-precios__fechas { display: block; font-weight: 400; font-size: .8rem; color: var(--tinta-suave); }
.tabla-precios__fecha { display: block; }
.tabla-precios__celda { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-precios__vacio { color: var(--azul-borde); }

/* Marcado de auditoría: no destaca, pero se puede seleccionar con CSS. */
.celda--revisar, .item--revisar { --revisar: 1; }

/* ─────────────────────────── Pie ─────────────────────────── */

.pie { margin-top: 3rem; }

.pie__skyline { line-height: 0; background: var(--blanco); }
.pie__skyline img { width: 100%; height: auto; display: block; }

/* El pie NO es el azul de marca: es un azul marino más oscuro, #011c39, y es
   idéntico en las 12 capturas de producción. No sale de post-12.css sino de la
   plantilla de pie (post-75.css), que no está en el export; está medido. */
.pie__cuerpo { background: var(--azul-pie); color: #dbe4ef; }
.pie__cuerpo a { color: #dbe4ef; text-decoration: none; }
.pie__cuerpo a:hover { color: var(--blanco); text-decoration: underline; }

.pie__rejilla {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  padding-block: 2.5rem;
}

.pie__logo { width: auto; height: 90px; }

.pie__redes { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  font-weight: 700;
}
.pie__red:hover { background: rgb(255 255 255 / 12%); text-decoration: none; }

.pie__contacto p { margin: 0 0 .35rem; }
.pie__horario { font-size: .85rem; color: #b7c6d8; margin-top: .8rem !important; }

.pie__titulo { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.pie__destinos ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid rgb(255 255 255 / 18%);
  font-size: .82rem;
}
.pie__legal p { margin: 0; }
.pie__legal-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }

/* ─────────────────────────── Impresión ─────────────────────────── */

@media print {
  .cabecera, .pie, .migas, .salto-contenido { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}