/* Costa Cruceros Chile — estilos de la landing

   Dirección visual: se acerca al estilo del sitio internacional de Costa
   Cruceros (tipografía Poppins, azul #0070b9, amarillo #fed230, botones
   tipo píldora, chips de campaña sobre las fotos, footer por columnas).

   Límite deliberado: replicamos la LENGUAJE VISUAL (paleta, tipografía,
   componentes, ritmo de layout) pero NO la identidad de marca: no se usa
   el logo de Costa Cruceros, ni sus fotografías, ni sus textos. El sitio
   se presenta siempre como un partner oficial en Chile operado por Tu
   Destino, y ese aviso se mantiene visible en header, footer y legal. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Paleta */
  --cc-blue: #0070b9;
  --cc-blue-dark: #0c5c94;
  --cc-navy: #063c5d;
  --cc-navy-deep: #042a42;
  --cc-yellow: #fed230;
  --cc-yellow-dark: #e0b500;
  --cc-red: #db0d39;
  --cc-whatsapp: #25d366;
  --cc-whatsapp-dark: #1da851;

  /* Superficies */
  --cc-bg: #f6f6f6;
  --cc-bg-alt: #eef4f8;
  --cc-white: #ffffff;
  --cc-line: #e3e8ec;
  --cc-line-blue: #b6d5ea;

  /* Texto */
  --cc-text: #2a2a2a;
  --cc-text-dark: #111111;
  --cc-text-muted: #6b7378;

  /* Alias que reusan admin.css y el panel (no renombrar) */
  --cc-accent: var(--cc-blue);
  --cc-accent-dark: var(--cc-blue-dark);
  --cc-navy-light: var(--cc-blue-dark);

  --cc-radius: 16px;
  --cc-radius-sm: 10px;
  --cc-radius-pill: 999px;
  --cc-shadow: 0 8px 28px rgba(6, 60, 93, 0.12);
  --cc-shadow-hover: 0 14px 40px rgba(6, 60, 93, 0.2);

  --cc-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-container: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--cc-font);
  font-weight: 400;
  color: var(--cc-text);
  background: var(--cc-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; color: var(--cc-text-dark); line-height: 1.22; }

.cc-container {
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 24px;
}

.cc-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;
}

/* ── Botones (píldora, como en el sitio de Costa) ────────────────── */
.cc-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--cc-radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.cc-btn:hover { transform: translateY(-2px); }

.cc-btn--accent { background: var(--cc-yellow); color: var(--cc-navy); }
.cc-btn--accent:hover { background: var(--cc-yellow-dark); }

.cc-btn--blue { background: var(--cc-blue); color: var(--cc-white); }
.cc-btn--blue:hover { background: var(--cc-blue-dark); }

.cc-btn--outline {
  background: transparent;
  border-color: var(--cc-blue);
  color: var(--cc-blue);
}
.cc-btn--outline:hover { background: var(--cc-blue); color: var(--cc-white); }

.cc-btn--outline.cc-btn--light { border-color: rgba(255,255,255,0.7); color: var(--cc-white); }
.cc-btn--outline.cc-btn--light:hover { background: var(--cc-white); color: var(--cc-navy); }

.cc-btn--small { padding: 11px 20px; font-size: 0.85rem; width: 100%; }
.cc-btn--wide { width: 100%; padding: 16px; font-size: 1rem; }

/* ── Chips ────────────────────────────────────────────────────────
   Chip de campaña: etiqueta corta sobre la foto. `data-variant` cambia
   el color; el HTML lo arma cc_package_chips() en lib/content.php. */
.cc-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--cc-radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  background: var(--cc-white);
  color: var(--cc-navy);
  box-shadow: 0 2px 8px rgba(6, 60, 93, 0.18);
  white-space: nowrap;
}
.cc-chip--promo   { background: var(--cc-red); color: var(--cc-white); }
.cc-chip--sale    { background: var(--cc-yellow); color: var(--cc-navy); }
.cc-chip--neutral { background: rgba(6, 60, 93, 0.82); color: var(--cc-white); box-shadow: none; }

/* Fila de chips dentro del cuerpo de la card */
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.cc-chips .cc-chip { box-shadow: none; }
.cc-chips .cc-chip--neutral { background: var(--cc-bg-alt); color: var(--cc-blue-dark); }

/* Chip absoluto sobre la foto */
.cc-chip-over {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* Altura del logo del header. El operador la elige en /admin/ (sección
   Logo) y se guarda como logo_size; acá se traduce a un alto concreto con
   --cc-logo-h. La altura mínima del header se deriva de ese valor para que
   el logo nunca se corte. */
.cc-logo__img { width: auto; height: var(--cc-logo-h, 46px); max-height: var(--cc-logo-h, 46px); }
:root { --cc-logo-h: 46px; }
body[data-logo-size="sm"] { --cc-logo-h: 34px; }
body[data-logo-size="md"] { --cc-logo-h: 46px; }
body[data-logo-size="lg"] { --cc-logo-h: 58px; }
body[data-logo-size="xl"] { --cc-logo-h: 72px; }
body[data-logo-size="xxl"] { --cc-logo-h: 88px; }
/* El header se agranda con el logo (padding + un piso de 74px en desktop).
   El +32 deja aire real arriba y abajo del logo, para que nunca quede
   pegado al borde ni se vea cortado. */
.cc-header__inner { min-height: max(74px, calc(var(--cc-logo-h, 46px) + 32px)); }

/* ── Header ─────────────────────────────────────────────────────────
   Fondo blanco: los textos pasan a azul marino para mantener el
   contraste (antes eran blancos sobre azul). El CTA sigue siendo la
   píldora amarilla, que es lo que le da el color de marca al header. */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cc-white);
  border-bottom: 1px solid var(--cc-line);
  box-shadow: 0 2px 14px rgba(6, 60, 93, 0.08);
}
.cc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* El logo es un <a> al home (no un div): se le quita el subrayado que
   traen los links por defecto y se le da un foco visible para que se
   pueda llegar con el teclado. */
.cc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-navy);
  text-decoration: none;
  flex-shrink: 0;
}
.cc-logo:hover .cc-logo__img,
.cc-logo:hover .cc-logo__text { opacity: .82; }
.cc-logo__img,
.cc-logo__text { transition: opacity .18s ease; }
.cc-logo:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 4px; border-radius: 4px; }
.cc-logo__mark { font-size: 1.4rem; }
.cc-logo__text { font-weight: 600; font-size: 1.15rem; color: var(--cc-navy); line-height: 1.15; }
.cc-logo__text small {
  display: block;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-nav { display: flex; align-items: center; gap: 30px; }
.cc-nav a { color: var(--cc-navy); font-weight: 500; font-size: 0.92rem; }
.cc-nav a:hover { color: var(--cc-blue); }
.cc-nav__cta {
  background: var(--cc-yellow);
  color: var(--cc-navy) !important;
  padding: 11px 22px;
  border-radius: var(--cc-radius-pill);
  font-weight: 600;
}
.cc-nav__cta:hover { background: var(--cc-yellow-dark); }

/* Aviso de partner: fijo bajo el header, para que la aclaración de que
   este es un sitio de partner (y no el oficial de Costa) sea siempre
   visible, no solo en el hero. */
.cc-partnerbar {
  background: var(--cc-navy);
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.cc-partnerbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}
.cc-partnerbar strong { color: var(--cc-yellow); font-weight: 600; }
.cc-partnerbar__dot { color: var(--cc-yellow); }

/* ── Hero ──────────────────────────────────────────────────────────
   Sin overlay oscuro: texto casi negro con halo blanco directamente
   sobre la foto (igual que el hero del sitio de Costa), chip de color
   arriba y CTA en píldora blanca translúcida. */
.cc-hero {
  position: relative;
  height: 620px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: var(--cc-navy);
}
.cc-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.cc-hero__slide.is-active { opacity: 1; }
.cc-hero__bg { width: 100%; height: 100%; object-fit: cover; }

/* Degradado inferior hacia el fondo de la página, para que la foto se
   funda con la zona de las tarjetas de destinos. */
.cc-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(246,246,246,0) 0%, rgba(246,246,246,0.88) 76%, var(--cc-bg) 100%);
  pointer-events: none;
  z-index: 1;
}

/* El hero usa el MISMO contenedor que el header y el resto de las
   secciones, para que el texto arranque en el mismo borde izquierdo.
   Ojo: .cc-hero es display:flex, así que esta caja es un flex item, y en
   un flex item el `margin: 0 auto` de .cc-container la centra en vez de
   alinearla. Por eso lleva `width: 100%` — sin espacio libre, el auto
   margin no centra nada y queda pegada al padding del contenedor. El
   ancho del texto se limita después, en los hijos. */
.cc-hero__content {
  position: relative;
  width: 100%;
  padding-top: 64px;
  z-index: 2;
}
.cc-hero__content > * { max-width: 600px; }
/* Titular sobre cajas blancas, como el banner del sitio de Costa.
   `box-decoration-break: clone` pinta el fondo y el padding una vez por
   línea, así que cada línea del titular se ve como su propia caja blanca
   y el borde derecho queda escalonado según el ancho de cada una (igual
   que en el original). Texto casi negro sobre blanco: el contraste ya no
   depende de la foto de fondo, así que se puede quitar el contorno de
   text-shadow que hacía antes. */
.cc-hero__title {
  font-size: 2.45rem;
  font-weight: 700;
  /* El interlineado es lo que abre el hueco entre una caja blanca y la
     siguiente: la caja inline solo cubre el alto del texto + su padding,
     así que line-height tiene que ser holgado (1.5) para que las cajas
     no se toquen. El padding vertical se deja bajo a propósito. */
  line-height: 1.5;
  color: var(--cc-text-dark);
  margin: 16px 0 18px;
}
.cc-hero__title > span {
  display: inline;
  background: var(--cc-white);
  color: var(--cc-text-dark);
  padding: 3px 14px;
  border-radius: 7px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Bajada: misma idea, caja blanca translúcida para que se lea sobre
   cualquier foto sin competir con el titular. */
.cc-hero__sub {
  /* `display: block` + `width: fit-content` en vez de inline-block: la caja
     se sigue ajustando al texto, pero al ser de nivel bloque fuerza al CTA
     a la línea siguiente. Con inline-block ambos cabían en la misma línea
     apenas el hero pasó a medir 1200px. */
  display: block;
  width: fit-content;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cc-navy);
  margin: 0 0 18px;
  max-width: 480px;
  background: rgba(255,255,255,0.92);
  padding: 8px 12px;
  border-radius: var(--cc-radius-sm);
}

/* CTA: píldora blanca sólida con borde fino, como la del banner. */
.cc-hero__cta {
  display: inline-block;
  background: var(--cc-white);
  color: var(--cc-text-dark);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 13px 26px;
  border: 1px solid rgba(6, 60, 93, 0.16);
  border-radius: var(--cc-radius-pill);
  box-shadow: 0 6px 22px rgba(6,60,93,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6,60,93,0.3);
}

.cc-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--cc-blue);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(6,60,93,0.25);
  transition: background .2s ease, transform .2s ease;
}
.cc-hero__arrow:hover { background: var(--cc-white); transform: translateY(-50%) scale(1.07); }
/* Ambas flechas a la derecha y centradas verticalmente, como en el banner
   de Costa. El texto vive a la izquierda, así que nunca se cruzan con él
   (y avoids el degradado blanco del pie, donde una flecha blanca
   desaparecería). */
.cc-hero__arrow--prev { right: 80px; }
.cc-hero__arrow--next { right: 22px; }

.cc-eyebrow {
  display: inline-block;
  background: var(--cc-red);
  color: var(--cc-white);
  padding: 6px 15px;
  border-radius: var(--cc-radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
}

/* ── Tarjetas de destinos (solapadas sobre el hero) ─────────────── */
.cc-destinos--overlap {
  padding: 0;
  margin-top: -80px;
  margin-bottom: 64px;
  position: relative;
  z-index: 4;
}
.cc-destinos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.cc-destino-card {
  position: relative;
  background: var(--cc-white);
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cc-destino-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-hover); }
.cc-destino-card img { width: 100%; height: 200px; object-fit: cover; }
.cc-destino-card__body { padding: 22px; }
.cc-destino-card__body h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 600; }
.cc-destino-card__body p { margin: 0; color: var(--cc-text-muted); font-size: 0.92rem; }
.cc-destino-card__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--cc-blue);
  font-weight: 600;
  font-size: 0.88rem;
}

/* ── Bloque partner / trust ─────────────────────────────────────── */
.cc-trust { background: var(--cc-bg-alt); padding: 64px 0; }
.cc-trust__inner { display: flex; align-items: flex-start; gap: 28px; }
.cc-trust__badge {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cc-blue);
  color: var(--cc-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600;
}
.cc-trust h2 { margin: 0 0 12px; font-size: 1.7rem; }
.cc-trust p { margin: 0 0 10px; color: var(--cc-text); max-width: 780px; }
.cc-trust__note { color: var(--cc-text-muted); font-size: 0.86rem; }

/* ── Encabezados de sección ─────────────────────────────────────── */
.cc-section-head { text-align: center; margin: 0 0 40px; }
.cc-section-title { font-size: 2rem; font-weight: 600; margin: 0 0 8px; }
.cc-section-sub { color: var(--cc-text-muted); margin: 0; font-size: 0.98rem; }

/* ── Catálogo (API) ─────────────────────────────────────────────── */
.cc-catalogo { background: var(--cc-bg); padding: 72px 0; }
.cc-catalogo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.cc-pkg-card {
  position: relative;
  background: var(--cc-white);
  border-radius: var(--cc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(6,60,93,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cc-pkg-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-hover); }
.cc-pkg-card img { width: 100%; height: 190px; object-fit: cover; background: var(--cc-bg-alt); }
.cc-pkg-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.cc-pkg-card__body h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 600;
  /* Títulos a 2 líneas como máximo: un nombre más largo no descuadra la
     fila de tarjetas ni empuja el precio de la carta vecina. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.cc-pkg-card__meta { margin: 0; font-size: 0.86rem; color: var(--cc-text-muted); }
.cc-pkg-card__price {
  /* margin-top:auto ancla precio+botón al fondo de la tarjeta, así el
     precio queda a la misma altura en todas las cards de la fila sin
     importar cuántos chips o líneas de título traiga cada una. */
  margin: 12px 0 14px;
  font-weight: 600;
  color: var(--cc-blue);
  font-size: 1.02rem;
}
.cc-pkg-card .cc-btn { margin-top: 0; }
/* Link discreto bajo el CTA: abre el drawer de WhatsApp con el nombre
   del crucero ya incorporado en el mensaje. */
.cc-pkg-card__wa {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--cc-text-muted);
  cursor: pointer;
  transition: color .15s ease;
}
.cc-pkg-card__wa:hover { color: var(--cc-whatsapp-dark); text-decoration: underline; }

.cc-empty-state {
  text-align: center;
  background: var(--cc-white);
  border: 2px dashed var(--cc-line-blue);
  border-radius: var(--cc-radius);
  padding: 44px 24px;
  color: var(--cc-text-muted);
}
.cc-empty-state .cc-btn { margin-top: 18px; }

/* ── Barra de filtro del catálogo ──────────────────────────────────
   Solo aparece si hay más de un destino en los paquetes (si no, filtrar
   por un único valor no aportaría nada). */
.cc-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
}
.cc-chip--filter {
  border: 1.5px solid var(--cc-line-blue);
  background: var(--cc-white);
  color: var(--cc-navy);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--cc-radius-pill);
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cc-chip--filter:hover { border-color: var(--cc-blue); color: var(--cc-blue); }
.cc-chip--filter.is-active { background: var(--cc-blue); border-color: var(--cc-blue); color: var(--cc-white); }
.cc-chip--filter:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 2px; }

.cc-filters__count {
  text-align: center;
  color: var(--cc-text-muted);
  font-size: 0.85rem;
  margin: 0 0 26px;
  min-height: 1.2em;
}

/* Tarjeta oculta por el filtro: se saca del flujo con display:none para
   que la grilla se reacomode sola. */
.cc-pkg-card[hidden] { display: none; }

/* ── Bloque de destinos destacado (paneles verticales) ──────────────
   Grid de 2 columnas: texto a la izquierda, paneles a la derecha. Los
   paneles son altos y angostos; el activo se ilumina y muestra su
   nombre con el botón. */
.cc-destfeat { background: var(--cc-bg-alt); padding: 76px 0; }
.cc-destfeat__inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 52px;
  align-items: center;
}

.cc-destfeat__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin: 0 0 14px;
}
.cc-destfeat__title { font-size: 2.1rem; font-weight: 700; margin: 0 0 18px; }
.cc-destfeat__body { color: var(--cc-text); margin: 0 0 26px; font-size: 1rem; }
.cc-destfeat__link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-text-dark);
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--cc-text-dark);
  transition: color .18s ease, border-color .18s ease;
}
.cc-destfeat__link:hover { color: var(--cc-blue); border-color: var(--cc-blue); }

.cc-destfeat__panels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  height: 460px;
}
.cc-destfeat__panel {
  position: relative;
  border: none;
  padding: 0;
  background: var(--cc-navy);
  border-radius: var(--cc-radius);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  min-height: 0;
  /* Los inactivos se ven apagados; el activo queda a color pleno. */
  filter: saturate(0.55) brightness(0.86);
  transition: filter .3s ease;
}
.cc-destfeat__photo { position: absolute; inset: 0; }
.cc-destfeat__photo img { width: 100%; height: 100%; object-fit: cover; }

/* El overlay (nombre + botón) solo se ve en el panel activo, para no
   repetir el mismo texto tres veces lado a lado. */
.cc-destfeat__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: linear-gradient(180deg, rgba(6,60,93,0) 0%, rgba(6,60,93,0.88) 55%);
  color: var(--cc-white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.cc-destfeat__name { font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.cc-destfeat__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cc-white);
  color: var(--cc-text-dark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--cc-radius-pill);
}

.cc-destfeat__panel.is-active { filter: none; }
.cc-destfeat__panel.is-active .cc-destfeat__overlay { opacity: 1; transform: none; }
.cc-destfeat__panel:hover { filter: saturate(0.8) brightness(0.95); }
.cc-destfeat__panel:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 3px; }

@media (max-width: 1000px) {
  .cc-destfeat__inner { grid-template-columns: 1fr; gap: 34px; }
  .cc-destfeat__panels { height: 380px; }
}
@media (max-width: 620px) {
  .cc-destfeat__title { font-size: 1.6rem; }
  /* Debajo de este ancho los paneles angostos quedan ilegibles: pasan a
     ser un carrusel horizontal con scroll por dedo. */
  .cc-destfeat__panels {
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .cc-destfeat__panel { scroll-snap-align: start; }
}

/* ── Cotizar / formulario ───────────────────────────────────────── */
.cc-cotizar { background: var(--cc-navy); padding: 80px 0; position: relative; overflow: hidden; }
.cc-cotizar::before {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.cc-cotizar__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.cc-cotizar__intro h2 { color: var(--cc-white); font-size: 2rem; margin: 0 0 16px; }
.cc-cotizar__intro p { color: rgba(255,255,255,0.82); margin: 0 0 26px; }
.cc-cotizar__points { list-style: none; padding: 0; margin: 0 0 28px; }
.cc-cotizar__points li {
  position: relative;
  padding-left: 30px;
  color: rgba(255,255,255,0.9);
  font-size: 0.93rem;
  margin-bottom: 11px;
}
.cc-cotizar__points li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--cc-yellow);
  font-weight: 700;
}

.cc-form {
  background: var(--cc-white);
  border-radius: var(--cc-radius);
  padding: 32px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.cc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cc-form__field { margin-bottom: 16px; }
.cc-form__field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--cc-navy); margin-bottom: 7px; }
.cc-form__field input,
.cc-form__field select,
.cc-form__field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--cc-text);
  background: var(--cc-white);
  line-height: 1.35;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-form__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  cursor: pointer;
}
.cc-form__field input:focus,
.cc-form__field select:focus,
.cc-form__field textarea:focus {
  outline: none;
  border-color: var(--cc-blue);
  box-shadow: 0 0 0 3px rgba(0,112,185,0.14);
}
.cc-form__field textarea { resize: vertical; }
.cc-form__alert { padding: 13px 16px; border-radius: var(--cc-radius-sm); font-size: 0.9rem; margin-bottom: 20px; }
.cc-form__alert--ok { background: #e8f7ee; color: #1a7a45; border: 1px solid #b7e3c8; }
.cc-form__alert--error { background: #fdecef; color: #a81029; border: 1px solid #f3c0c8; }

/* ── Modal de detalle del crucero ──────────────────────────────────
   Por debajo del drawer de WhatsApp (backdrop 80 / drawer 90) para que
   al abrir el WhatsApp desde el modal, el drawer quede por encima. */
.cc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 60, 93, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 84;
}
.cc-modal-backdrop.is-open { opacity: 1; visibility: visible; }

.cc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(.97);
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  background: var(--cc-white);
  border-radius: var(--cc-radius);
  z-index: 85;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(4, 42, 66, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.cc-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.cc-modal__head {
  position: relative;
  background: var(--cc-blue);
  color: var(--cc-white);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.cc-modal__cover { width: 92px; height: 68px; object-fit: cover; border-radius: var(--cc-radius-sm); flex-shrink: 0; }
.cc-modal__headtext { min-width: 0; }
.cc-modal__head h2 { color: var(--cc-white); font-size: 1.28rem; margin: 0 0 4px; }
.cc-modal__meta { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.88rem; }
.cc-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: var(--cc-white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.cc-modal__close:hover { background: rgba(255,255,255,0.34); }

.cc-modal__body { padding: 24px; overflow-y: auto; }
.cc-modal__chips { margin: 0 0 14px; }
.cc-modal__price {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cc-blue);
  margin: 0 0 18px;
}

/* Ficha de detalle: dos columnas label/valor con línea de separación. */
.cc-modal__details {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0;
  margin: 0 0 22px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
}
.cc-modal__details dt {
  background: var(--cc-bg-alt);
  color: var(--cc-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cc-line);
}
.cc-modal__details dd {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--cc-line);
  word-break: break-word;
}
.cc-modal__details dt:nth-last-of-type(1),
.cc-modal__details dd:nth-last-of-type(1) { border-bottom: none; }

.cc-modal__note {
  background: var(--cc-bg-alt);
  border-left: 4px solid var(--cc-yellow);
  border-radius: var(--cc-radius-sm);
  padding: 14px 16px;
  font-size: 0.87rem;
  color: var(--cc-text);
  margin-bottom: 20px;
}
.cc-modal__note strong { display: block; color: var(--cc-navy); margin-bottom: 3px; }

.cc-modal__body .cc-form__alert { margin-bottom: 18px; }

/* Pie del modal: hijo directo de .cc-modal (flex column), fuera de la
   zona scrolleable, así el botón de reservar queda siempre visible. */
.cc-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--cc-line);
  background: var(--cc-bg-alt);
  flex-shrink: 0;
}
.cc-modal__foot .cc-btn { flex: 1 1 auto; }

/* Tarjeta del catálogo: ahora es un botón, se marca como tal. */
.cc-pkg-card--clickable { cursor: pointer; }
.cc-pkg-card--clickable:focus-visible {
  outline: 3px solid var(--cc-blue);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .cc-modal__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cc-modal__cover { width: 100%; height: 120px; }
  .cc-modal__details { grid-template-columns: 1fr; }
  .cc-modal__details dt { border-bottom: none; padding-bottom: 2px; }
  .cc-modal__details dd { padding-top: 2px; }
}

/* ── Páginas legales (privacidad / términos / contacto) ───────────
   Textos largos: ancho de lectura acotado para que la línea no sea
   ilegible, y sin el degradado del hero para no competir con el texto. */
.cc-legal { background: var(--cc-bg); padding: 44px 0 72px; }
.cc-legal .cc-container { max-width: 900px; }

.cc-legal__crumbs {
  font-size: 0.82rem;
  color: var(--cc-text-muted);
  margin-bottom: 18px;
}
.cc-legal__crumbs a { color: var(--cc-blue); }
.cc-legal__crumbs a:hover { text-decoration: underline; }
.cc-legal__crumbs span { margin: 0 6px; }

.cc-legal__title {
  font-size: 2.1rem;
  font-weight: 600;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--cc-line);
}
.cc-legal__subtitle { font-size: 1.15rem; font-weight: 600; margin: 0 0 16px; }
.cc-legal__intro { font-size: 1.02rem; color: var(--cc-text); margin: 0 0 28px; }

.cc-legal__qa-item { margin-bottom: 30px; }
.cc-legal__qa-item h2 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--cc-blue-dark);
}
.cc-legal__qa-item p { margin: 0; }

.cc-legal__term { margin-bottom: 32px; }
.cc-legal__term h2 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--cc-navy);
}
.cc-legal__num { color: var(--cc-blue); margin-right: 4px; }
.cc-legal__term-body p { margin: 0; }

.cc-legal__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.cc-legal__datalist { margin: 0; }
.cc-legal__datarow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cc-line);
}
.cc-legal__datarow dt { font-weight: 600; color: var(--cc-navy); min-width: 165px; font-size: 0.9rem; }
.cc-legal__datarow dd { margin: 0; font-size: 0.95rem; }
.cc-legal__datarow dd a { color: var(--cc-blue); }
.cc-legal__datarow dd a:hover { text-decoration: underline; }
.cc-legal__nota { margin: 22px 0 0; color: var(--cc-text-muted); font-size: 0.9rem; }

.cc-legal__card {
  background: var(--cc-white);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 24px;
}
.cc-legal__card p { margin: 0 0 16px; color: var(--cc-text-muted); font-size: 0.9rem; }
.cc-legal__card .cc-btn { margin-bottom: 10px; }

.cc-legal__aside {
  background: var(--cc-bg-alt);
  border-left: 4px solid var(--cc-yellow);
  border-radius: var(--cc-radius-sm);
  padding: 16px 18px;
  margin: 40px 0 28px;
  font-size: 0.92rem;
}
.cc-legal__aside strong { color: var(--cc-navy); }
.cc-legal__aside a { color: var(--cc-blue); }

.cc-legal__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--cc-line);
}
.cc-legal__pages a {
  padding: 9px 18px;
  border: 1.5px solid var(--cc-line-blue);
  border-radius: var(--cc-radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--cc-blue);
}
.cc-legal__pages a:hover { background: var(--cc-blue); color: var(--cc-white); }

@media (max-width: 760px) {
  .cc-legal__grid { grid-template-columns: 1fr; gap: 28px; }
  .cc-legal__title { font-size: 1.6rem; }
  .cc-legal__datarow { flex-direction: column; gap: 2px; }
  .cc-legal__datarow dt { min-width: 0; }
}

/* Controles del catálogo: contador a la izquierda, orden a la derecha.
   Con 18 paquetes esta barra es el centro de la sección. */
.cc-catalogo__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 26px;
}
.cc-catalogo__tools .cc-filters__count { margin: 0; text-align: left; }

.cc-sort { display: flex; align-items: center; gap: 9px; }
.cc-sort > span {
  font-size: 0.84rem;
  color: var(--cc-text-muted);
  white-space: nowrap;
}
.cc-sort select {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--cc-text-dark);
  background: var(--cc-white);
  border: 1.5px solid var(--cc-line-blue);
  border-radius: var(--cc-radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.cc-sort select:hover { border-color: var(--cc-blue); }
.cc-sort select:focus-visible { outline: 3px solid var(--cc-blue); outline-offset: 2px; }

/* Campo trampa del formulario (anti-spam). Se esconde corrido fuera de
   pantalla en vez de con display:none: muchos bots se saltan los campos
   con display:none o visibility:hidden, pero no los que están
   desplazados. aria-hidden y tabindex="-1" evitan que un lector de
   pantalla o el teclado lo alcancen. */
.cc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botón "Ver todos los cruceros" del home: lleva a cruceros.php */
.cc-loadmore { text-align: center; margin-top: 34px; }
.cc-loadmore .cc-btn { padding: 15px 40px; }

/* Aviso de catálogo truncado (cuando la API topa el page_size) */
.cc-catalogo__notice {
  background: #fff8e1;
  border-left: 4px solid var(--cc-yellow, #fed230);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 26px;
  font-size: 0.92rem;
  color: var(--cc-text-dark);
}

/* Paginador de cruceros.php */
.cc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.cc-pager__num {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cc-line-blue);
  border-radius: var(--cc-radius-pill);
  color: var(--cc-blue);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.cc-pager__num:hover { background: var(--cc-blue); color: var(--cc-white); }
.cc-pager__num.is-active {
  background: var(--cc-blue);
  border-color: var(--cc-blue);
  color: var(--cc-white);
}
.cc-pager .cc-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 620px) {
  .cc-catalogo__tools { flex-direction: column; align-items: stretch; }
  .cc-sort { justify-content: space-between; }
  .cc-sort select { flex: 1; }
}

/* ── Botón flotante de WhatsApp + drawer ────────────────────────── */
.cc-wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--cc-whatsapp);
  color: var(--cc-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45);
  transition: transform .2s ease, background .2s ease;
}
.cc-wa-fab:hover { background: var(--cc-whatsapp-dark); transform: scale(1.07); }
.cc-wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
/* Latido suave para que se note sin ser invasivo */
.cc-wa-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cc-whatsapp);
  animation: cc-wa-pulse 2.6s ease-out infinite;
}
@keyframes cc-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.cc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 60, 93, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 80;
}
.cc-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.cc-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 400px;
  max-width: 92vw;
  background: var(--cc-white);
  z-index: 90;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(6,60,93,0.28);
}
.cc-drawer.is-open { transform: translateX(0); }

.cc-drawer__head {
  background: var(--cc-blue);
  color: var(--cc-white);
  padding: 26px 26px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cc-drawer__head h2 { color: var(--cc-white); font-size: 1.3rem; margin: 0 0 4px; }
.cc-drawer__head p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.86rem; }
.cc-drawer__close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: var(--cc-white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.cc-drawer__close:hover { background: rgba(255,255,255,0.34); }

.cc-drawer__body { padding: 26px; overflow-y: auto; flex: 1; }

.cc-drawer__context {
  background: var(--cc-bg-alt);
  border-left: 4px solid var(--cc-yellow);
  border-radius: var(--cc-radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.cc-drawer__context-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-blue-dark);
  margin: 0 0 4px;
}
.cc-drawer__context-title { font-size: 1rem; font-weight: 600; color: var(--cc-navy); margin: 0; }

.cc-drawer__label { font-size: 0.85rem; font-weight: 600; color: var(--cc-navy); margin: 0 0 8px; }
.cc-drawer__field { margin-bottom: 22px; }
.cc-drawer__hint { font-size: 0.78rem; color: var(--cc-text-muted); margin: 8px 0 0; }

.cc-drawer__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--cc-whatsapp);
  color: var(--cc-white);
  border: none;
  border-radius: var(--cc-radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.cc-drawer__wa:hover { background: var(--cc-whatsapp-dark); }
.cc-drawer__wa svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }

.cc-drawer__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  background: transparent;
  border: 2px solid var(--cc-blue);
  border-radius: var(--cc-radius-pill);
  color: var(--cc-blue);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cc-drawer__mail:hover { background: var(--cc-blue); color: var(--cc-white); }

.cc-drawer__foot {
  border-top: 1px solid var(--cc-line);
  padding: 16px 26px;
  font-size: 0.76rem;
  color: var(--cc-text-muted);
  text-align: center;
}
.cc-drawer__foot strong { color: var(--cc-navy); }

/* ── Footer (por columnas, editable desde el panel) ─────────────────
   Fondo blanco, igual que el header. Todos los textos que antes eran
   blancos sobre azul marino pasan a azul marino / gris, y los estados
   hover usan el azul de marca en vez del amarillo (que sobre blanco
   no tendría contraste suficiente). */
.cc-footer {
  background: var(--cc-white);
  color: var(--cc-text);
  border-top: 1px solid var(--cc-line);
  padding: 64px 0 0;
}
.cc-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}
.cc-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cc-footer__brand img { max-height: 40px; width: auto; }
.cc-footer__brand span { color: var(--cc-navy); font-weight: 600; font-size: 1.08rem; }
.cc-footer__about { font-size: 0.9rem; margin: 0 0 20px; line-height: 1.7; color: var(--cc-text-muted); }
.cc-footer h4 {
  color: var(--cc-navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.cc-footer__links { list-style: none; padding: 0; margin: 0; }
.cc-footer__links li { margin-bottom: 11px; }
.cc-footer__links a, .cc-footer__links span { font-size: 0.9rem; }
.cc-footer__links a { color: var(--cc-text); }
.cc-footer__links a:hover { color: var(--cc-blue); text-decoration: underline; }
.cc-footer__links span { color: var(--cc-text-muted); }

.cc-footer__contact { font-size: 0.9rem; line-height: 1.9; }
.cc-footer__contact a { color: var(--cc-text); }
.cc-footer__contact a:hover { color: var(--cc-blue); text-decoration: underline; }
.cc-footer__contact span { color: var(--cc-text-muted); }

.cc-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.cc-footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cc-bg-alt);
  color: var(--cc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.cc-footer__social a:hover { background: var(--cc-blue); color: var(--cc-white); }
.cc-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.cc-footer__bottom {
  border-top: 1px solid var(--cc-line);
  /* Solo vertical: el padding lateral lo aporta .cc-container. Con el
     shorthand `padding: 22px 0 26px` se ponía en cero el lado y el legal
     quedaba pegado al borde de la pantalla. */
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--cc-text-muted);
}
.cc-footer__legal { max-width: 720px; line-height: 1.65; }
.cc-footer__legal strong { color: var(--cc-navy); font-weight: 600; }
.cc-footer__bottom a { color: var(--cc-blue); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cc-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .cc-nav { gap: 16px; }
  .cc-nav a:not(.cc-nav__cta) { display: none; }
  .cc-hero { height: auto; min-height: 520px; padding-bottom: 60px; }
  .cc-hero__content { padding-top: 44px; }
  .cc-hero__title { font-size: 1.75rem; }
  .cc-hero__arrow { width: 38px; height: 38px; font-size: 1.2rem; }
  .cc-hero__arrow--prev { right: 66px; }
  .cc-hero__arrow--next { right: 12px; }
  .cc-destinos--overlap { margin-top: -40px; margin-bottom: 44px; }
  .cc-destinos__grid,
  .cc-catalogo__grid { grid-template-columns: 1fr; }
  .cc-cotizar__inner { grid-template-columns: 1fr; gap: 36px; }
  .cc-form__row { grid-template-columns: 1fr; }
  .cc-section-title { font-size: 1.5rem; }
  .cc-trust__inner { flex-direction: column; gap: 18px; }
  .cc-wa-fab { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .cc-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .cc-footer__grid { grid-template-columns: 1fr; }
}