/* Dream Go - hoja de estilos base del sitio publico. Mobile-first: las reglas parten
   del layout movil y escalan hacia arriba con min-width. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/worksans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/worksans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/worksans-600.woff2') format('woff2');
}

:root {
  --color-primario: #d99e8e;
  --color-primario-oscuro: #a85f4d;
  --color-texto-oscuro: #2f3e46;
  --color-fondo: #fdfaf8;
  --color-fondo-alterno: #faf3ef;
  --color-borde: #e8d9d3;
  --color-blanco: #ffffff;
  --color-exito: #4f7a5c;
  --color-error: #b3453a;

  --fuente-titulos: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radio: 12px;
  --sombra: 0 8px 24px rgba(47, 62, 70, 0.08);
  --transicion: 0.25s ease;

  --contenedor-max: 1180px;
  --espacio-seccion: 4rem;
}

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

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

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--color-texto-oscuro);
  background: var(--color-fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--radio) 0;
}

.sr-only-focusable:focus {
  left: 0;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--color-texto-oscuro);
}

h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }

p { margin: 0 0 1rem; }

a {
  color: var(--color-primario-oscuro);
  text-decoration: none;
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.seccion {
  padding-block: var(--espacio-seccion);
}

/* --- Botones y campos: sin estilos por defecto del navegador --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radio);
  padding: 0.85rem 1.6rem;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primario {
  background: var(--color-primario-oscuro);
  color: var(--color-blanco);
}

.btn-primario:hover {
  box-shadow: var(--sombra);
  background: #8f4d3d;
}

.btn-secundario {
  background: var(--color-primario);
  color: var(--color-texto-oscuro);
}

.btn-peligro {
  background: var(--color-error);
  color: var(--color-blanco);
}

.btn-peligro:hover {
  box-shadow: var(--sombra);
  filter: brightness(0.92);
}

.btn-whatsapp {
  background: #25d366;
  color: var(--color-blanco);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-blanco);
  color: var(--color-texto-oscuro);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  appearance: none;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--color-primario-oscuro);
  cursor: pointer;
  flex-shrink: 0;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.btn:focus-visible {
  outline: none;
  border-color: var(--color-primario-oscuro);
  box-shadow: 0 0 0 3px rgba(168, 95, 77, 0.25);
}

/* Auditoria 2026-08-31, hallazgo A11Y-01: solo los controles de formulario y .btn tenian
   foco visible; navegacion, tarjetas y footer se quedaban con el outline del navegador, que
   sobre fondos de color a menudo no se ve (WCAG 2.4.7). Se excluye .btn, que ya tiene su
   propio tratamiento arriba. */
a:not(.btn):focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primario-oscuro);
  outline-offset: 2px;
  border-radius: 2px;
}

.campo {
  margin-bottom: 1.1rem;
}

/* --- Header / navegacion --- */
.header {
  background: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  gap: 1rem;
}

.header__logo img {
  height: 52px;
  width: auto;
}

.nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

.nav a:not(.btn) {
  color: var(--color-texto-oscuro);
  font-weight: 600;
}

.nav a:not(.btn):hover {
  color: var(--color-primario-oscuro);
}

.nav-toggle {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-texto-oscuro);
}

.nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-blanco);
  padding: 1.25rem;
  box-shadow: var(--sombra);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: var(--color-blanco);
  background: linear-gradient(180deg, rgba(47, 62, 70, 0.55), rgba(47, 62, 70, 0.75)), var(--color-texto-oscuro);
  background-size: cover;
  background-position: center;
}

.hero__contenido {
  max-width: 640px;
}

.hero h1,
.hero p {
  color: var(--color-blanco);
}

.hero--inicio {
  background-image: linear-gradient(180deg, rgba(47, 62, 70, 0.55), rgba(47, 62, 70, 0.82)), url('../img/placeholders/hero-inicio.png');
}

/* Carrusel del hero: las imagenes administrables se apilan como <img> absolutos detras
   del texto; la CSS placeholder de arriba queda de fondo mientras cargan. */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47, 62, 70, 0.55), rgba(47, 62, 70, 0.82));
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero__slide.is-activa {
  opacity: 1;
}

.hero--con-slides > .contenedor {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --- Encabezados de seccion --- */
.seccion__encabezado {
  max-width: 640px;
  margin-bottom: 2rem;
}

.seccion__encabezado p {
  opacity: 0.8;
  margin: 0;
}

/* --- Tarjetas de ventaja (home) --- */
.tarjeta-ventaja {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}

.tarjeta-ventaja__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-fondo-alterno);
  color: var(--color-primario-oscuro);
  margin-bottom: 1rem;
}

.tarjeta-ventaja h3 {
  margin-bottom: 0.4rem;
}

.tarjeta-ventaja p {
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* --- Tarjetas de destino (home) --- */
.tarjeta-destino {
  display: block;
  padding: 1.5rem;
}

.tarjeta-destino__etiqueta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primario-oscuro);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tarjeta-destino h3 {
  margin-bottom: 0.25rem;
}

.tarjeta-destino__descripcion {
  margin: 0;
  color: var(--color-texto-oscuro);
  opacity: 0.8;
}

/* Imagen(es) de una tarjeta de destino o paquete (ver partials/_tarjeta_media.php). Si la
   galeria tiene mas de una imagen, se apilan absolutas para poder ir cambiando cual esta
   visible (.is-activa) sin recalcular layout; initCarruselesHover() (site.js) las cicla al
   pasar el cursor por encima. */
.tarjeta__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--color-fondo-alterno);
}

/* Copia desenfocada de la propia imagen (ver _tarjeta_media.php y la galeria de la ficha)
   para que las franjas que deja object-fit: contain no se vean como un hueco plano. */
.media-fondo {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  max-width: none;
  object-fit: cover;
  filter: blur(20px) saturate(1.1) brightness(0.92);
  pointer-events: none;
}

.tarjeta__media--destino {
  /* 4:5 vertical, igual que paquete: las imagenes de destino tambien suelen ser flyers. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
  margin-bottom: 1rem;
}

.tarjeta__media--paquete {
  /* 4:5 vertical: es el formato de los flyers de portada (estandar de Instagram). */
  aspect-ratio: 4 / 5;
}

.tarjeta__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain y no cover: muchas imagenes son flyers con texto y recortarlas oculta
     informacion; el hueco que sobra lo cubre el fondo de .tarjeta__media. */
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.4s ease;
}

.tarjeta__media-img.is-activa {
  opacity: 1;
}

/* Fotos horizontales (ver initOrientacionMedia en site.js): en el marco vertical 4:5 de
   paquete y destino, contain dejaba dos franjas desenfocadas enormes. Una foto apaisada no
   suele llevar texto, asi que se recorta para llenar el marco; los flyers siguen en contain. */
.tarjeta__media--paquete .tarjeta__media-img.is-apaisada,
.tarjeta__media--destino .tarjeta__media-img.is-apaisada {
  object-fit: cover;
}

/* Sin imagen todavia: mismo marco que una tarjeta con foto, con un icono discreto. */
.tarjeta__media--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primario-oscuro);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(135deg, var(--color-fondo-alterno), var(--color-primario));
}

.tarjeta__media--vacia svg { opacity: 0.55; }

.tarjeta:hover .tarjeta__media-img.is-activa,
.tarjeta:focus-within .tarjeta__media-img.is-activa {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta__media-img {
    transition: none;
  }
}

/* --- Testimonios (home) --- */
.tarjeta-testimonio {
  background: var(--color-blanco);
  border-radius: var(--radio);
  padding: 1.75rem;
  box-shadow: 0 2px 10px rgba(47, 62, 70, 0.06);
  margin: 0;
}

.tarjeta-testimonio__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--color-primario);
  color: var(--color-texto-oscuro);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  margin-bottom: 1rem;
}

.tarjeta-testimonio blockquote {
  margin: 0 0 1rem;
  font-style: italic;
  opacity: 0.9;
}

.tarjeta-testimonio figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
}

/* --- CTA final (home) --- */
.cta-final {
  text-align: center;
}

.cta-final p {
  max-width: 640px;
  margin-inline: auto;
}

.animar-entrada {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animar-entrada.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Tarjetas --- */
.tarjeta {
  background: var(--color-blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(47, 62, 70, 0.06);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--sombra);
}

.grid-tarjetas {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

/* --- Comparador de paquetes --- */
.tarjeta__comparar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.tabla-comparativa-wrap {
  overflow-x: auto;
}

.tabla-comparativa {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-borde);
  text-align: left;
  vertical-align: top;
}

.tabla-comparativa th:first-child,
.tabla-comparativa td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

.barra-comparador {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-blanco);
  box-shadow: var(--sombra);
  border-top: 1px solid var(--color-borde);
  z-index: 40;
}

.barra-comparador__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}

.barra-comparador__chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chip-comparador {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-fondo-alterno);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  font-size: 0.85rem;
}

.chip-comparador__quitar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  color: var(--color-texto-oscuro);
}

/* --- Contenido de articulo del blog --- */
.contenido-articulo {
  line-height: 1.75;
}

.contenido-articulo > * + * {
  margin-top: 1.1rem;
}

.contenido-articulo h3,
.contenido-articulo h4 {
  margin-top: 2rem;
}

.contenido-articulo ul,
.contenido-articulo ol {
  padding-left: 1.4rem;
}

/* --- Banner de consentimiento de cookies --- */
.banner-consentimiento {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-texto-oscuro);
  color: var(--color-fondo-alterno);
  box-shadow: var(--sombra);
  z-index: 50;
}

.banner-consentimiento__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.banner-consentimiento__texto {
  margin: 0;
  font-size: 0.9rem;
  max-width: 62ch;
}

.banner-consentimiento__texto a {
  color: var(--color-primario);
}

.banner-consentimiento__acciones {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* --- Footer --- */
.footer {
  background: var(--color-texto-oscuro);
  color: var(--color-fondo-alterno);
  padding-block: 3rem 1.5rem;
}

.footer a {
  color: var(--color-fondo-alterno);
  overflow-wrap: anywhere;
}

.footer__logo {
  height: 104px;
  width: auto;
  border-radius: var(--radio);
  margin-bottom: 1.25rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.footer__marca p {
  opacity: 0.85;
  max-width: 320px;
}

.footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__lista li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer__lista svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.footer__lista a {
  opacity: 0.9;
}

.footer__lista a:hover {
  opacity: 1;
  color: var(--color-primario);
}

.footer__lista--enlaces {
  flex-direction: column;
}

.footer__social {
  display: flex;
  gap: 0.6rem;
}

.footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background var(--transicion), transform var(--transicion);
}

.footer__social-icon:hover {
  background: var(--color-primario-oscuro);
  transform: translateY(-2px);
}

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.75;
  font-size: 0.85rem;
}

.footer__bottom p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animar-entrada,
  .tarjeta,
  .btn {
    transition: none;
  }
}

/* --- Breakpoints mobile-first --- */
@media (min-width: 768px) {
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    box-shadow: none;
    padding: 0;
  }

  .nav-toggle {
    display: none;
  }

  .header__logo img {
    height: 64px;
  }

  .grid-tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid-tarjetas {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-tarjetas--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-tarjetas--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Nosotros: bloque de estadisticas --- */
.estadistica {
  text-align: center;
  padding: 1.5rem;
}

.estadistica__num {
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  color: var(--color-primario-oscuro);
  margin-bottom: 0.25rem;
}

/* --- Nosotros: intro a dos columnas --- */
.nosotros-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.nosotros-intro__img {
  width: 100%;
  border-radius: var(--radio);
  aspect-ratio: 4/3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .nosotros-intro {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
  }
}

.paquete-detalle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .paquete-detalle {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  /* El panel de precio y CTA acompaña al usuario mientras lee el itinerario. */
  .paquete-aside {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* --- Paginacion: catalogo publico y listados admin --- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.paginacion__enlace {
  padding: 0.5rem 1rem;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: var(--color-primario-oscuro);
  font-weight: 600;
  font-size: 0.9rem;
}

.paginacion__enlace--deshabilitado {
  opacity: 0.4;
  pointer-events: none;
}

.paginacion__estado {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* =========================================================
   Capa de componentes — reemplaza el style="" inline que
   estaba repetido por las vistas publicas (tarjetas de
   paquete/articulo, ficha, formularios, rating, alertas).
   ========================================================= */

/* Utilidades cortas */
.enlace-plano { color: inherit; }
.texto-suave { opacity: 0.8; }
.bloque-medio { max-width: 640px; }
.centrado { text-align: center; }

/* Utilidades para reemplazar style="" inline (CSP style-src 'self', sin 'unsafe-inline') */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mt-25 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: 1.25rem; }
.mt-neg { margin-top: -0.5rem; }
.mt-05 { margin-top: 0.5rem; }
.my-2 { margin: 2rem 0; }
.txt-error { color: var(--color-error); }
.txt-mute { color: #888; }
.d-block { display: block; }
.d-inline { display: inline; }
.oculto { display: none; }
.fs-lg { font-size: 1.15rem; }
.tt-upper { text-transform: uppercase; }
.nota-form { margin-top: 1rem; font-size: 0.9rem; color: #6b6b6b; }
.img-comparar { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); }
.fw-bold { font-weight: 700; }
.w-100 { width: 100%; }
.pre-wrap { white-space: pre-wrap; }
.op-70 { opacity: 0.7; }
.op-75 { opacity: 0.75; }
.op-80 { opacity: 0.8; }
.wrap-anywhere { word-break: break-word; }
.ancho-320 { max-width: 320px; }
.ancho-420 { max-width: 420px; }
.ancho-520 { max-width: 520px; }
.ancho-560 { max-width: 560px; }
.ancho-720 { max-width: 720px; }
.ancho-760 { max-width: 760px; }
.ancho-820 { max-width: 820px; }

.btn--bloque { width: 100%; }
.btn--chico { padding: 0.35rem 0.85rem; font-size: 0.85rem; }

.acciones-apiladas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Etiqueta "categoria" sobre titulos (tarjetas, ficha, destino, blog) */
.etiqueta-categoria {
  color: var(--color-primario-oscuro);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

/* Media + cuerpo comun a todas las tarjetas con imagen */
.tarjeta__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--color-fondo-alterno);
}

.tarjeta__cuerpo { padding: 1.25rem; }

.tarjeta__fecha {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.75rem;
}

/* Tarjeta de paquete (catálogo, home destacados, destino): el pie con precio y
   "Comparar" queda anclado abajo para que coincida entre tarjetas de la misma fila. */
.tarjeta--paquete {
  display: flex;
  flex-direction: column;
}

.tarjeta--paquete .tarjeta__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tarjeta-paquete__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
}

.precio {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  color: var(--color-texto-oscuro);
}

.precio--grande {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.25rem;
}

.tarjeta-paquete__duracion {
  font-size: 0.9rem;
  color: var(--color-texto-oscuro);
  opacity: 0.7;
}

/* Rating de reseñas */
.rating {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.9rem;
  color: var(--color-texto-oscuro);
}

.rating__estrellas {
  color: var(--color-primario-oscuro);
  letter-spacing: 0.08em;
}

.rating__meta { opacity: 0.9; }

.rating-linea {
  color: var(--color-primario-oscuro);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}

/* Hero compacto (ficha de paquete y blog) */
.hero--compacto { min-height: 36vh; }
.hero--mini { min-height: 32vh; }

.hero__categoria {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0.9;
}

.hero__rating { margin-top: 0.5rem; }

/* Ficha de paquete: galeria, aside, salidas */
.galeria {
  margin: 0 0 2rem;
}

.galeria__principal {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 80vh;
  object-fit: contain;
}

.galeria__tiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.galeria__tira {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.galeria__tira img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.galeria__tira.is-activa {
  border-color: var(--color-primario-oscuro);
}

.galeria__abrir {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--color-fondo-alterno);
  cursor: zoom-in;
  line-height: 0;
}

.galeria__abrir:focus-visible {
  outline: 3px solid var(--color-primario-oscuro);
  outline-offset: 2px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: rgba(20, 26, 30, 0.9);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radio);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.lightbox__cerrar,
.lightbox__nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background var(--transicion);
}

.lightbox__cerrar:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox__cerrar {
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}

.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__cerrar:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__cerrar,
  .lightbox__nav { transition: none; }
}

/* Modal promocional (aviso que se abre al entrar al sitio) */
.modal-promo {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(20, 26, 30, 0.72);
  animation: modal-promo-fade var(--transicion);
}

.modal-promo[hidden] { display: none; }

.modal-promo__caja {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--color-fondo);
  color: var(--color-texto-oscuro);
  border-radius: var(--radio);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.35);
  padding: 1.75rem;
  text-align: center;
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
}

.modal-promo__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto 1rem;
  object-fit: contain;
  border-radius: var(--radio);
}

.modal-promo__titulo {
  margin: 0 0 0.5rem;
}

.modal-promo__texto {
  margin: 0 0 1.25rem;
}

.modal-promo__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-texto-oscuro);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: background var(--transicion);
}

.modal-promo__cerrar:hover { background: rgba(47, 62, 70, 0.1); }

.modal-promo__cerrar:focus-visible {
  outline: 2px solid var(--color-primario-oscuro);
  outline-offset: 2px;
}

@keyframes modal-promo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-promo { animation: none; }
  .modal-promo__cerrar { transition: none; }
}

.galeria__tira:focus-visible {
  outline: none;
  border-color: var(--color-primario-oscuro);
  box-shadow: 0 0 0 3px rgba(168, 95, 77, 0.25);
}

/* Galeria vieja (sin JS o layouts que aun la usen) */
.galeria-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.galeria-mini img {
  border-radius: var(--radio);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.paquete-incluye {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.paquete-aside {
  padding: 1.5rem;
  align-self: start;
  scroll-margin-top: 6rem;
}

.paquete-aside h3 { font-size: 1.1rem; }

.paquete-aside__sub {
  opacity: 0.75;
  margin-bottom: 1.5rem;
}

.tarjeta__comparar--bloque {
  padding: 0;
  margin-top: 1rem;
  justify-content: center;
}

.lista-salidas {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.lista-salidas li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.lista-salidas__cupo {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Recuadro informativo dentro de un formulario (reservar, cotizador) */
.aviso-caja {
  background: var(--color-fondo-alterno);
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
}

/* Panel de resultado (Mi reserva) */
.panel-resultado {
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: var(--radio);
  background: var(--color-fondo-alterno);
}

.acciones-inline {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Filtros del catalogo */
.filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  margin-block: 2rem 1rem;
}

.filtros .campo { margin-bottom: 0; }

/* .filtros__extra no genera caja propia: sus campos participan directo en la rejilla. */
.filtros__extra { display: contents; }

/* Movil (con JS): busqueda + "Mas filtros"; el resto se despliega bajo demanda.
   display:none explicito porque .btn (inline-flex) le gana al atributo hidden. */
.filtros__toggle { display: none; }
.filtros.is-colapsable .filtros__toggle { display: inline-flex; }
.filtros.is-colapsable:not(.is-abierto) .filtros__extra { display: none; }

@media (min-width: 640px) {
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros__q { grid-column: 1 / -1; }
}

/* Escritorio: dos filas de cuatro (busqueda ancha + destino + tipo / precios + duracion + boton). */
@media (min-width: 1024px) {
  .filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filtros__q { grid-column: span 2; }
}

/* Barra de resultados: conteo + orden */
.catalogo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.catalogo-barra__conteo { margin: 0; }

.catalogo-orden {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.catalogo-orden label {
  margin-bottom: 0;
  font-weight: 600;
  white-space: nowrap;
}

.catalogo-orden select { width: auto; }

/* Chips de filtros activos */
.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-texto-oscuro);
}

.chip-filtro:hover { border-color: var(--color-primario-oscuro); }

.chip-filtro__x {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-primario-oscuro);
}

/* Migas de pan */
.breadcrumbs {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.35rem;
  opacity: 0.6;
}

.breadcrumbs [aria-current="page"] { opacity: 0.7; }

/* Estado vacio (sin resultados / sin contenido) */
.estado-vacio {
  text-align: center;
  max-width: 460px;
  margin: 2rem auto;
  padding: 2.5rem 1.5rem;
}

.estado-vacio__icono {
  color: var(--color-primario);
  margin-bottom: 1rem;
}

.estado-vacio h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.estado-vacio p {
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

/* Filtro por categoria del blog */
.blog-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.blog-categorias a {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  font-size: 0.9rem;
  color: var(--color-texto-oscuro);
}

.blog-categorias a:hover { border-color: var(--color-primario-oscuro); }

.blog-categorias a.is-activa {
  background: var(--color-primario-oscuro);
  border-color: var(--color-primario-oscuro);
  color: #fff;
}

/* Enlace al feed RSS del blog */
.blog-rss {
  margin-top: 2rem;
  font-size: 0.9rem;
}

.blog-rss a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Errores de campo en formularios */
.campo__error {
  display: block;
  color: var(--color-error);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Formulario de newsletter (home) */
.newsletter-form {
  max-width: 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.newsletter-form input[type="email"] { flex: 1; min-width: 200px; }

/* Seccion con fondo de panel (home, ficha) */
.seccion--panel {
  border-radius: var(--radio);
  background: var(--color-fondo-alterno);
}

/* Cuerpo del articulo del blog */
.articulo-cuerpo { max-width: 760px; }

.articulo-cuerpo__portada {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  margin-bottom: 2rem;
}

.articulo-cuerpo__resumen {
  font-size: 1.15rem;
  opacity: 0.85;
}

.articulo-cuerpo__cta { margin-top: 2.5rem; }

/* Alertas / flash (unifica el flash publico con el patron de admin) */
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: var(--radio);
  margin-top: 1rem;
}

.alert--exito {
  background: #e9f2ea;
  color: var(--color-exito);
}

.alert--error {
  background: #fbe7e5;
  color: var(--color-error);
}

/* Tarjetas de contacto (enlaces grandes) */
.tarjeta-contacto {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
}

.tarjeta-contacto__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-fondo-alterno);
  color: var(--color-primario-oscuro);
  margin-bottom: 0.9rem;
}

/* Boton flotante de WhatsApp (todas las paginas publicas) */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  z-index: 45;
  transition: transform var(--transicion);
}

.whatsapp-fab:hover { transform: translateY(-2px) scale(1.05); }

/* Si la barra del comparador o el banner de cookies estan visibles,
   sube el boton para no encimarlo con ellos. */
.barra-comparador:not([hidden]) ~ .whatsapp-fab,
.banner-consentimiento:not([hidden]) ~ .whatsapp-fab {
  bottom: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { transition: none; }
}

/* Formulario de reserva: datos a la izquierda, resumen con total/anticipo a la derecha
   (arriba en movil, para que el monto se vea antes de llenar el formulario). */
.reserva-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.reserva-resumen { order: -1; padding: 1.5rem; align-self: start; }

@media (min-width: 900px) {
  .reserva-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
  .reserva-resumen { order: 0; position: sticky; top: 6rem; }
}

.enlace-volver {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.reserva-paso {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primario-oscuro);
}

.reserva-legal {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.reserva-resumen h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.reserva-resumen__paquete { font-weight: 700; margin-bottom: 0.25rem; }

.reserva-resumen__lineas { margin: 1rem 0; }

.reserva-resumen__lineas > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.reserva-resumen__lineas dt { opacity: 0.8; }
.reserva-resumen__lineas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.reserva-resumen__total dd { font-weight: 700; }

.reserva-resumen__destacado {
  background: var(--color-fondo-alterno);
  margin-inline: -0.5rem;
  padding-inline: 0.5rem !important;
  border-radius: 8px;
  font-weight: 700;
  color: var(--color-primario-oscuro);
}

.reserva-resumen__destacado dt { opacity: 1; }
.reserva-resumen__nota { font-size: 0.85rem; opacity: 0.75; margin: 0; }

/* Pago de saldo: liquidar todo o abonar una parte */
.opciones-pago {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.6rem;
}

.opciones-pago legend { font-weight: 700; margin-bottom: 0.5rem; }

.opcion-pago {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-blanco);
  cursor: pointer;
}

.opcion-pago:has(input:checked) {
  border-color: var(--color-primario-oscuro);
  box-shadow: inset 0 0 0 1px var(--color-primario-oscuro);
}

.opcion-pago input { margin-top: 0.3rem; width: auto; }
.opcion-pago small { display: block; opacity: 0.75; }
.opcion-pago__monto { margin: 0.25rem 0 0; }

/* Barra fija de la ficha en movil: precio + CTA siempre a mano (en escritorio el panel
   lateral ya es sticky). */
.barra-reserva-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-blanco);
  border-top: 1px solid var(--color-borde);
  box-shadow: 0 -4px 16px rgba(47, 62, 70, 0.08);
}

.barra-reserva-movil__precio {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  line-height: 1.2;
}

.barra-reserva-movil__precio small {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  opacity: 0.7;
}

body:has(.barra-reserva-movil) .footer { padding-bottom: 6rem; }
body:has(.barra-reserva-movil) .whatsapp-fab { bottom: 5.5rem; }

/* El comparador usa la misma franja inferior: si esta abierto, cede el lugar. */
body:has(.barra-comparador:not([hidden])) .barra-reserva-movil { display: none; }

@media (min-width: 900px) {
  .barra-reserva-movil { display: none; }
  body:has(.barra-reserva-movil) .footer { padding-bottom: 1.5rem; }
  body:has(.barra-reserva-movil) .whatsapp-fab { bottom: 1.25rem; }
}