/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --blue: #1B5EF7;
  --dark: #030D2E;
  --mid-blue: #0A3FCC;
  --white: #FFFFFF;
  --whatsapp: #25D366;
  --card-shadow: 0 8px 32px rgba(27, 94, 247, 0.15);
  --card-shadow-hover: 0 18px 45px rgba(27, 94, 247, 0.18);
  --radius-card: 16px;
  --radius-btn: 50px;
  /* Motion system */
  --ease-ios: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-btn: 200ms;
  --duration-normal: 280ms;
  --duration-card: 360ms;
  --duration-slow: 480ms;
  --transition:
    transform var(--duration-card) var(--ease-ios),
    box-shadow var(--duration-card) var(--ease-ios),
    border-color var(--duration-normal) var(--ease-ios),
    background-color var(--duration-normal) var(--ease-ios),
    color var(--duration-fast) var(--ease-ios),
    opacity var(--duration-card) var(--ease-ios),
    filter var(--duration-card) var(--ease-ios);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 80px;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

/* =============================================
   CONTAINER
   ============================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition:
    transform var(--duration-btn) var(--ease-ios),
    box-shadow var(--duration-normal) var(--ease-ios),
    background-color var(--duration-normal) var(--ease-ios),
    color var(--duration-fast) var(--ease-ios),
    border-color var(--duration-fast) var(--ease-ios),
    filter var(--duration-normal) var(--ease-ios);
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(27, 94, 247, 0.4);
}

.btn-primary:hover {
  background: #2468ff;
  box-shadow: 0 8px 28px rgba(27, 94, 247, 0.6);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:hover {
  background: #20ba58;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 18px 40px;
  font-size: 1.05rem;
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--white);
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.section-disclaimer {
  margin-top: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(3, 13, 46, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(27, 94, 247, 0.12);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-logo-img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.25s ease;
}

.nav-link:hover {
  color: var(--white);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-cta {
  margin-left: 8px;
  padding: 10px 22px;
  font-size: 0.85rem;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition:
    transform 180ms var(--ease-ios),
    opacity 140ms var(--ease-ios);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('../img/hero/hero-costa-brasil.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 13, 46, 0.78) 0%, rgba(3, 13, 46, 0.44) 52%, rgba(3, 13, 46, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 13, 46, 0.06) 0%, rgba(3, 13, 46, 0.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  max-width: 800px;
}

.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 0 2px 28px rgba(3, 13, 46, 0.55);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.scroll-arrow {
  opacity: 0.7;
}

.scroll-arrow svg {
  animation: ft-bounce 2.4s ease-in-out infinite;
}

/* =============================================
   DESTINOS
   ============================================= */
.destinos {
  padding: 96px 0;
  background: linear-gradient(180deg, #04102f 0%, #030d2e 100%);
}

.paquetes-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.filtro-btn {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(27, 94, 247, 0.30);
  background: transparent;
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--duration-fast) var(--ease-ios),
    border-color var(--duration-fast) var(--ease-ios),
    color var(--duration-fast) var(--ease-ios);
  white-space: nowrap;
}

.filtro-btn:hover {
  border-color: rgba(27, 94, 247, 0.65);
  color: rgba(255, 255, 255, 0.88);
  background: rgba(27, 94, 247, 0.10);
}

.filtro-btn--active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.filtro-btn--active:hover {
  background: var(--mid-blue);
  border-color: var(--mid-blue);
}

.destinos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.destino-card {
  background: #0b1a3f;
  border: 1px solid rgba(27, 94, 247, 0.15);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.destino-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(27, 94, 247, 0.4);
}

.card-img {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 13, 46, 0.15) 0%,
    rgba(3, 13, 46, 0.55) 55%,
    rgba(3, 13, 46, 0.92) 100%
  );
}

.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--blue);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 50px;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 16px 18px;
}

.card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.card-price {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

.card-price strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--white);
  margin-left: 2px;
}

.card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0b1a3f;
}

.card-includes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.card-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.check-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.card-fine-print {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 14px;
  line-height: 1.4;
}

.btn-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: auto;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}

.btn-card:hover {
  background: #20ba58;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

/* =============================================
   POR QUÉ FTRAVEL
   ============================================= */
.por-que {
  padding: 96px 0;
  background: var(--dark);
}

.por-que .section-title {
  color: var(--white);
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.beneficio-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(27, 94, 247, 0.15);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
}

.beneficio-card:hover {
  border-color: rgba(27, 94, 247, 0.5);
  box-shadow: 0 0 28px rgba(27, 94, 247, 0.15);
  transform: translate3d(0, -3px, 0);
}

.beneficio-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
}

.beneficio-icon svg {
  width: 100%;
  height: 100%;
}

.beneficio-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 10px;
}

.beneficio-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
}

/* =============================================
   CÓMO FUNCIONA
   ============================================= */
.como-funciona {
  padding: 80px 0;
  background: var(--dark);
}

.como-funciona .section-title { color: var(--white); }
.como-funciona .section-subtitle { color: rgba(255,255,255,0.55); }

.pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.paso-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(27,94,247,0.15);
  border-radius: var(--radius-card);
  padding: 36px 28px 32px;
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-ios),
    box-shadow var(--duration-normal) var(--ease-ios),
    border-color var(--duration-fast) var(--ease-ios);
}

.paso-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, #48cae4 100%);
}

.paso-card:hover {
  border-color: rgba(27,94,247,0.35);
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 14px 42px rgba(27,94,247,0.18);
}

.paso-card-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(27,94,247,0.08);
  position: absolute;
  top: 8px; right: 16px;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.paso-card-ico {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(27,94,247,0.2) 0%, rgba(27,94,247,0.07) 100%);
  border: 1px solid rgba(27,94,247,0.28);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #7AABFF;
}

.paso-card-ico svg {
  width: 22px;
  height: 22px;
}

.paso-card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 10px;
}

.paso-card-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
}

/* =============================================
   CTA FINAL
   ============================================= */
.cta-final {
  padding: 96px 24px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue) 100%);
  text-align: center;
}

.cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--white);
  margin-bottom: 16px;
}

.cta-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 40px;
}

.cta-inner--wide {
  max-width: 720px;
}

/* Formulario de contacto */
.contacto-form {
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.02em;
}

.form-label-opt {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.78rem;
}

.form-label-req {
  color: var(--whatsapp);
}

.form-error {
  display: none;
  font-size: 0.76rem;
  color: #ff8a8a;
  margin-top: 2px;
}

.form-group--invalid .form-input {
  border-color: #ff8a8a;
  background: rgba(255, 90, 90, 0.08);
}

.form-group--invalid .form-error {
  display: block;
}

.form-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color var(--duration-fast) var(--ease-ios), background var(--duration-fast) var(--ease-ios);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: rgba(27, 94, 247, 0.70);
  background: rgba(27, 94, 247, 0.10);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.form-input option,
.form-input optgroup {
  background: #0a1a3e;
  color: var(--white);
}

.form-textarea {
  resize: vertical;
  min-height: 88px;
}

.contacto-form > .form-group {
  margin-bottom: 24px;
}

.form-submit {
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.form-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 20px;
}

.form-or::before,
.form-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.form-or span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.form-wa-directo {
  display: block;
  text-align: center;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  /* Continúa desde el navy en el que termina el CTA final, en vez
     de cortar directo a un color plano distinto. */
  background: linear-gradient(180deg, #030D2E 0%, #020918 100%);
  padding: 72px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-logo {
  margin-bottom: 10px;
}

.footer-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  max-width: 260px;
}

.footer-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}

.footer-contact a:hover {
  color: var(--white);
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(37, 211, 102, 0.22); }
  50%       { box-shadow: 0 12px 36px rgba(37, 211, 102, 0.36); }
}

/* =============================================
   REVEAL ANIMATIONS
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-slow) var(--ease-ios),
    transform var(--duration-slow) var(--ease-ios);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   RESPONSIVE — TABLET
   ============================================= */
@media (max-width: 1024px) {
  .destinos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* =============================================
   RESPONSIVE — MOBILE
   ============================================= */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 13, 46, 0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 900;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-link {
    font-size: 1.3rem;
  }

  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
    position: relative;
    z-index: 1001;
  }

  .hero {
    background-attachment: scroll;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .destinos-grid {
    grid-template-columns: 1fr;
  }

  .beneficios-grid {
    grid-template-columns: 1fr;
  }

  .pasos-grid {
    grid-template-columns: 1fr;
  }

  .paso-card {
    padding: 28px 22px 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .cta-final {
    padding: 56px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .section-header {
    margin-bottom: 40px;
  }
}

/* =============================================
   HERO SOCIAL PROOF
   ============================================= */
.hero-subtitle {
  margin-bottom: 20px;
}

.hero-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.sp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

/* =============================================
   DESTINOS FECHA DINÁMICA
   ============================================= */
.destinos-fecha {
  margin-top: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.03em;
}

/* =============================================
   CARD STATUS
   ============================================= */
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.card-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.card-status--consultar {
  background: rgba(27, 94, 247, 0.1);
  color: #7AABFF;
  border: 1px solid rgba(27, 94, 247, 0.22);
}

.card-status--precio {
  background: rgba(255, 184, 0, 0.1);
  color: #FFB800;
  border: 1px solid rgba(255, 184, 0, 0.22);
}

.card-status--cotizacion {
  background: rgba(168, 110, 255, 0.1);
  color: #A86EFF;
  border: 1px solid rgba(168, 110, 255, 0.22);
}

/* =============================================
   CONFIANZA
   ============================================= */
.confianza {
  padding: 80px 0;
  background: #EEF3FF;
}

.confianza-inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.confianza-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--dark);
  margin-bottom: 16px;
}

.confianza-desc {
  font-size: 0.95rem;
  color: rgba(3, 13, 46, 0.6);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.confianza-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.confianza-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid rgba(27, 94, 247, 0.15);
  border-radius: 50px;
  padding: 10px 18px;
  box-shadow: 0 2px 10px rgba(27, 94, 247, 0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}

.confianza-badge:hover {
  box-shadow: 0 4px 18px rgba(27, 94, 247, 0.15);
  transform: translateY(-2px);
}

.cb-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--dark);
  white-space: nowrap;
}

/* =============================================
   FAQ
   ============================================= */
.faq {
  padding: 96px 0;
  background: linear-gradient(180deg, #030d2e 0%, #04102f 100%);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(27, 94, 247, 0.12);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s;
}

.faq-item.open {
  border-color: rgba(27, 94, 247, 0.4);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--white);
  text-align: left;
  transition: color 0.2s;
  line-height: 1.45;
}

.faq-question:hover {
  color: #7AABFF;
}

.faq-item.open .faq-question {
  color: #7AABFF;
}

.faq-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.35);
  transition:
    transform var(--duration-normal) var(--ease-ios),
    color var(--duration-fast) var(--ease-ios);
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  color: var(--blue);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--duration-normal) var(--ease-ios),
    opacity var(--duration-normal) var(--ease-ios);
}

.faq-item.open .faq-answer {
  max-height: 300px;
  opacity: 1;
}

.faq-answer p {
  padding: 0 24px 22px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.8;
}

/* =============================================
   WHATSAPP FLOAT — MEJORADO
   ============================================= */
.wa-float-wrapper {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.wa-bubble {
  position: relative;
  background: white;
  color: var(--dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition:
    opacity var(--duration-normal) var(--ease-ios),
    transform var(--duration-normal) var(--ease-ios);
  pointer-events: none;
}

.wa-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wa-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: white;
  transform: rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.06);
}

.whatsapp-float {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--whatsapp);
  border-radius: 50px;
  padding: 14px 22px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  animation: softPulse 3s ease-in-out infinite;
  transition:
    transform var(--duration-fast) var(--ease-ios),
    box-shadow var(--duration-fast) var(--ease-ios);
  will-change: transform;
}

.whatsapp-float:hover {
  animation: none;
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 14px 38px rgba(37, 211, 102, 0.42);
}

.whatsapp-float:active {
  animation: none;
  transform: translateY(0) scale(0.97);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.28);
}

.wa-label-mobile {
  display: none;
}

/* =============================================
   RESPONSIVE NUEVOS COMPONENTES
   ============================================= */
@media (max-width: 768px) {
  .confianza-badges {
    gap: 8px;
  }

  .cb-text {
    white-space: normal;
    text-align: left;
    font-size: 0.75rem;
  }

  .faq-question {
    padding: 18px 20px;
    font-size: 0.88rem;
  }

  .faq-answer p {
    padding: 0 20px 18px;
  }

  .wa-label-desktop {
    display: none;
  }

  .wa-label-mobile {
    display: inline;
  }

  .wa-float-wrapper {
    bottom: 20px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .hero-social-proof {
    gap: 6px;
  }

  .sp-item {
    font-size: 0.74rem;
    padding: 5px 12px;
    max-width: 100%;
  }

  .confianza-badge {
    padding: 8px 14px;
  }

  .wa-bubble {
    display: none;
  }

  .whatsapp-float {
    padding: 13px 18px;
    font-size: 0.82rem;
  }

  .footer-bottom p {
    line-height: 1.7;
  }
}

/* =============================================
   HERO PANEL
   ============================================= */
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 290px;
  align-items: center;
  gap: 56px;
  max-width: 1200px;
  width: 100%;
  padding: 0 24px;
}

.hero-content {
  position: static;
  min-width: 0;
  max-width: none;
  text-align: left;
  padding: 0;
}

.hero-panel {
  width: 100%;
  position: relative;
  background: linear-gradient(160deg, rgba(11, 24, 60, 0.86) 0%, rgba(4, 11, 36, 0.82) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(27, 94, 247, 0.32);
  border-radius: 22px;
  padding: 30px 26px;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 40px rgba(27, 94, 247, 0.14);
  text-align: left;
  transition:
    transform var(--duration-btn) var(--ease-ios),
    box-shadow var(--duration-btn) var(--ease-ios);
}

/* Filo superior en degradé — mismo lenguaje que testimonios/mintur */
.hero-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1B5EF7 45%, #25D366 100%);
  opacity: 0.8;
}

.hero-panel:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 0 48px rgba(27, 94, 247, 0.18);
}

.panel-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 7px;
  line-height: 1.35;
}

/* Modificador solo para el título con ícono (paso 1) — el resto de
   los .panel-label son texto corrido y no deben ser flex: un <p>
   flex trata cada nodo de texto como un ítem aparte y lo envuelve
   por separado, rompiendo frases con un <span> en el medio. */
.panel-label--icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-label-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(27, 94, 247, 0.16);
  border: 1px solid rgba(27, 94, 247, 0.38);
  color: #7AABFF;
}
.panel-label-icon svg {
  width: 15px;
  height: 15px;
}

.panel-subtitle {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.52);
  margin: 0 0 20px 40px;
  line-height: 1.45;
}

.panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.panel-chip {
  background: linear-gradient(150deg, rgba(27, 94, 247, 0.26) 0%, rgba(27, 94, 247, 0.14) 100%);
  border: 1px solid rgba(27, 94, 247, 0.4);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  padding: 8px 17px;
  font-size: 0.82rem;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background var(--duration-fast) var(--ease-ios),
    border-color var(--duration-fast) var(--ease-ios),
    box-shadow var(--duration-fast) var(--ease-ios),
    transform var(--duration-fast) var(--ease-ios);
}

.panel-chip:hover {
  background: linear-gradient(150deg, rgba(27, 94, 247, 0.5) 0%, rgba(27, 94, 247, 0.3) 100%);
  border-color: rgba(27, 94, 247, 0.75);
  box-shadow: 0 6px 18px rgba(27, 94, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.btn-panel-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(150deg, #2be07a 0%, #25D366 55%, #1DAD57 100%);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-panel-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.btn-panel-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-panel-wa:hover::after {
  transform: translateX(120%);
}

/* =============================================
   FLYERS Y SALIDAS VIGENTES
   ============================================= */
.flyers-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #030d2e 0%, #04102f 100%);
}

.flyers-section .section-title {
  color: var(--white);
}

.flyers-section .section-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

.flyers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.flyer-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(27, 94, 247, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

.flyer-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 12px 36px rgba(27, 94, 247, 0.18);
  border-color: rgba(27, 94, 247, 0.35);
}

.flyer-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.flyer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.flyer-placeholder--1 {
  background: linear-gradient(160deg, #0f3460 0%, #1B5EF7 55%, #00b4d8 100%);
}

.flyer-placeholder--2 {
  background: linear-gradient(160deg, #16213e 0%, #1a5276 55%, #2471a3 100%);
}

.flyer-placeholder--3 {
  background: linear-gradient(160deg, #1a472a 0%, #2d6a4f 55%, #40916c 100%);
}

.flyer-placeholder--4 {
  background: linear-gradient(160deg, #240046 0%, #5a189a 55%, #9d4edd 100%);
}

.flyer-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: rgba(3, 13, 46, 0.78);
  border: 1px solid rgba(27, 94, 247, 0.5);
  color: #7AABFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.flyer-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flyer-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  line-height: 1.3;
}

.btn-flyer {
  display: block;
  text-align: center;
  padding: 8px 12px;
  border: 1.5px solid rgba(27, 94, 247, 0.45);
  color: #7AABFF;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  transition: var(--transition);
}

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

.flyers-note {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.2);
  font-style: italic;
}

.flyer-price {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.3;
}

.flyer-price strong {
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
}

.flyer-season {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ==============================================
   VIDEOS FTRAVEL
   ============================================= */
.videos-section {
  padding: 64px 0;
  background: #020b25;
}

.videos-section .section-title {
  color: var(--white);
}

.videos-section .section-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.video-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(27, 94, 247, 0.15);
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  border-color: rgba(27, 94, 247, 0.35);
  box-shadow: 0 10px 36px rgba(27, 94, 247, 0.18);
}

.video-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  line-height: 1.3;
  margin: 0;
}

.btn-video-wa {
  display: block;
  text-align: center;
  padding: 9px 14px;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  transition: var(--transition);
  text-decoration: none;
}

.btn-video-wa:hover {
  background: #20ba5a;
  transform: translateY(-1px);
}

/* =============================================
   MICROINTERACCIONES (FASE 5)
   ============================================= */

/* WA float — entrada suave */
.wa-float-wrapper {
  animation: ft-fade-up 0.5s ease 3.2s both;
}

@keyframes ft-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulso sutil en botones WA del hero y CTA final */
@keyframes ft-wa-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25); }
  50%       { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45), 0 0 0 4px rgba(37, 211, 102, 0.06); }
}

.btn-whatsapp {
  animation: ft-wa-pulse 2.8s ease-in-out infinite;
}

.btn-whatsapp:hover {
  animation: none;
}

/* Hover suave en cards — efecto brillo + imagen respira */
.destino-card {
  position: relative;
  overflow: hidden;
}

.card-img {
  transition:
    filter var(--duration-slow) var(--ease-ios);
}

.destino-card:hover .card-img {
  filter: saturate(1.08) brightness(1.04);
}

.destino-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-ios);
  pointer-events: none;
  z-index: 3;
}

.destino-card:hover::after {
  opacity: 1;
}

@keyframes ft-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ==============================================
   AGENCIA GEO SECTION
   ============================================= */
.agencia-section {
  padding: 64px 0;
  background: var(--dark);
  border-top: 1px solid rgba(27, 94, 247, 0.1);
  border-bottom: 1px solid rgba(27, 94, 247, 0.1);
}

.agencia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

.agencia-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 16px;
}

.agencia-desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.72;
  margin-bottom: 24px;
}

.btn-agencia-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  transition: var(--transition);
  text-decoration: none;
}

.btn-agencia-wa:hover {
  background: #20ba5a;
  transform: translateY(-2px);
}

.agencia-bloques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.agencia-bloque {
  padding: 18px 18px 16px;
  background: rgba(27, 94, 247, 0.06);
  border: 1px solid rgba(27, 94, 247, 0.14);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
}

.agencia-bloque-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.3;
}

.agencia-bloque p {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .agencia-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .agencia-bloques {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .agencia-bloques {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   COMPACTAR ESPACIOS (FASE 5)
   ============================================= */
.section-header {
  margin-bottom: 40px;
}

.destinos {
  padding: 64px 0;
}

.paquetes-filtros {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.paquetes-filtros::-webkit-scrollbar { display: none; }

.por-que {
  padding: 64px 0;
}

.como-funciona {
  padding: 64px 0;
}

.faq {
  padding: 64px 0;
}

.confianza {
  padding: 52px 0;
}

.categorias {
  padding: 64px 0;
}

.temporada {
  padding: 64px 0;
}

.flyers-section {
  padding: 64px 0;
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
   RESPONSIVE FASE 5
   ============================================= */
@media (max-width: 1024px) {
  .flyers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .videos-grid {
    max-width: 100%;
  }

  .hero-inner {
    grid-template-columns: 1fr 248px;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }

  .hero-panel {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }

  .panel-chips {
    justify-content: center;
  }

  .flyers-section {
    padding: 64px 0;
  }

  /* Salidas en mobile: una card por fila, ancho completo,
     sin carrusel horizontal ni cards cortadas */
  .flyers-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .videos-section .container {
    padding: 0;
  }

  .videos-section .section-header {
    padding: 0 24px;
  }

  .videos-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 12px;
    max-width: none;
    margin: 0;
  }

  .video-card {
    flex-shrink: 0;
    width: 210px;
    scroll-snap-align: start;
  }

}

@media (max-width: 480px) {
  .hero-panel {
    max-width: 100%;
  }
}

/* =============================================
   CORRECCIONES PUNTUALES (FASE 5)
   ============================================= */

/* Eliminar doble bounce del scroll arrow */
.scroll-arrow {
  animation: none;
}

/* Hero-content: eliminar padding interno doble (hero-inner ya tiene padding) */
.hero-content {
  padding: 0;
}

/* Hero debe ser flex-col con los hijos verticalmente */
.hero {
  align-items: center;
}

/* wa-float-wrapper: animation-fill-mode: both para que empiece invisible */
.wa-float-wrapper {
  animation-fill-mode: both;
}

/* Imagen Cataratas — reencuadrar para mostrar más agua */
.destino-card:nth-child(5) .card-img {
  background-position: center 30%;
}

/* Mejorar overlay de cards para imágenes más claras */
.card-img::after {
  background: linear-gradient(
    to bottom,
    rgba(3, 13, 46, 0.08) 0%,
    rgba(3, 13, 46, 0.42) 50%,
    rgba(3, 13, 46, 0.88) 100%
  );
}

/* =============================================
   HERO REDESIGN (FASE 6)
   ============================================= */

.hero-content {
  text-align: left;
}

.hero-subtitle {
  margin-left: 0;
  margin-right: 0;
}

.hero-actions {
  justify-content: flex-start;
}

/* Eyebrow badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(27,94,247,0.14);
  border: 1px solid rgba(27,94,247,0.28);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.05em;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(27,94,247,0.9);
  animation: eyebrow-blink 2.4s ease-in-out infinite;
}

@keyframes eyebrow-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Title accent */
.hero-title-accent {
  color: #5B8FFF;
  position: relative;
}

/* Trust bar below buttons */
.hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.trust-item {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.60);
  letter-spacing: 0.02em;
}

.trust-sep {
  color: rgba(255,255,255,0.18);
  font-size: 0.72rem;
  line-height: 1;
}

/* Mobile: re-center hero content */
@media (max-width: 768px) {
  .hero-content { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-eyebrow { text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
}

/* =============================================
   CATEGORÍAS PRINCIPALES (FASE 6)
   ============================================= */

.categorias {
  padding: 80px 0;
  background: var(--dark);
}

.categorias .section-title { color: var(--white); }
.categorias .section-subtitle { color: rgba(255,255,255,0.6); }

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cat-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(27,94,247,0.15);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.cat-card:hover {
  border-color: rgba(27,94,247,0.4);
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 12px 36px rgba(27,94,247,0.18);
}

.cat-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cat-img--caribe    { background-image: linear-gradient(135deg, rgba(0,119,182,0.65) 0%, rgba(0,180,216,0.65) 100%), url('../img/categorias/categoria-caribe.jpg'); background-size: cover; background-position: center; }
.cat-img--argentina { background-image: linear-gradient(135deg, rgba(2,62,138,0.65) 0%, rgba(0,150,199,0.65) 100%), url('../img/categorias/categoria-argentina.jpg'); background-size: cover; background-position: center; }
.cat-img--brasil    { background-image: linear-gradient(135deg, rgba(26,107,42,0.65) 0%, rgba(64,145,108,0.65) 100%), url('../img/categorias/categoria-brasil.jpg'); background-size: cover; background-position: center; }
.cat-img--otros     { background-image: linear-gradient(135deg, rgba(36,0,70,0.65) 0%, rgba(90,24,154,0.65) 100%), url('../img/categorias/categoria-otros.jpg'); background-size: cover; background-position: center; }

.cat-icon {
  width: 56px;
  height: 56px;
  color: rgba(255,255,255,0.85);
}

.cat-icon svg { width: 100%; height: 100%; }

.cat-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cat-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 8px;
}

.cat-desc {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.btn-cat {
  display: block;
  text-align: center;
  padding: 10px 16px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: auto;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(27,94,247,0.35);
}

.btn-cat:hover {
  background: #2468ff;
  transform: translateY(-2px);
}

/* =============================================
   TEMPORADA (FASE 6)
   ============================================= */

.temporada {
  padding: 80px 0;
  background: linear-gradient(180deg, #030d2e 0%, #04102f 100%);
}

.temporada .section-title { color: var(--white); }
.temporada .section-subtitle { color: rgba(255,255,255,0.6); }

.temporada-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.temporada-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  min-height: 280px;
  display: flex;
  transition: var(--transition);
}

.temporada-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.temporada-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.temporada-bg--baja {
  background-image: url('../img/temporadas/temporada-baja.jpg');
  background-size: cover;
  background-position: center;
}

.temporada-bg--alta {
  background-image: url('../img/temporadas/temporada-alta.jpg');
  background-size: cover;
  background-position: top center;
}

.temporada-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3,13,46,0.45);
}

.temporada-content {
  position: relative;
  z-index: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.temporada-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  border-radius: 50px;
  padding: 4px 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  width: fit-content;
  backdrop-filter: blur(6px);
}

.temporada-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--white);
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.temporada-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin-bottom: 20px;
}

.btn-temporada {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--white);
  color: var(--dark);
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  transition: var(--transition);
  width: fit-content;
}

.btn-temporada:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

/* Responsive — Categorías y Temporada */
@media (max-width: 1024px) {
  .categorias-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .categorias-grid { grid-template-columns: 1fr; }
  .temporada-grid { grid-template-columns: 1fr; }
  .temporada-card { min-height: 220px; }
  .temporada-content { padding: 24px 20px; }
}


/* =============================================
   BOTONES — transición rápida específica
   ============================================= */
.btn-card,
.btn-flyer,
.btn-cotizar,
.btn-panel-wa,
.btn-inter-wa,
.btn-cat,
.btn-temporada,
.btn-agencia-wa {
  transition:
    transform var(--duration-btn) var(--ease-ios),
    box-shadow var(--duration-normal) var(--ease-ios),
    background-color var(--duration-normal) var(--ease-ios),
    color var(--duration-fast) var(--ease-ios),
    border-color var(--duration-fast) var(--ease-ios);
}

/* =============================================
   ACTIVE STATES — respuesta táctil iOS
   ============================================= */
.btn:active,
.btn-card:active,
.btn-flyer:active,
.btn-cotizar:active,
.btn-panel-wa:active,
.btn-inter-wa:active,
.btn-cat:active,
.btn-temporada:active,
.btn-agencia-wa:active,
.btn-whatsapp:active,
.btn-ghost:active,
.btn-primary:active {
  transform: scale(0.97) !important;
  transition-duration: var(--duration-btn) !important;
}

/* =============================================
   MOBILE — solo active, sin hover raro
   ============================================= */
@media (hover: none) {
  .destino-card:hover,
  .flyer-card:hover,
  .cat-card:hover,
  .beneficio-card:hover,
  .paso-card:hover {
    transform: none;
    box-shadow: var(--card-shadow);
  }

  .destino-card:hover .card-img {
    filter: none;
  }

  .destino-card:hover::after {
    opacity: 0;
  }
}

/* =============================================
   HOVER ASIMÉTRICO — entrada rápida, salida suave
   Entrada: ~160ms (snappy, responsive)
   Salida:  usa --duration-card del estado base (360ms, graceful)
   ============================================= */

/* Cards — entrada */
.destino-card:hover,
.cat-card:hover,
.flyer-card:hover,
.beneficio-card:hover,
.paso-card:hover,
.temporada-card:hover {
  transition:
    transform 160ms var(--ease-ios),
    box-shadow 180ms var(--ease-ios),
    border-color 140ms var(--ease-ios),
    filter 200ms var(--ease-ios),
    opacity 140ms var(--ease-ios);
}

/* Botones — entrada */
.btn:hover,
.btn-primary:hover,
.btn-whatsapp:hover,
.btn-ghost:hover,
.btn-card:hover,
.btn-flyer:hover,
.btn-cat:hover,
.btn-cotizar:hover,
.btn-panel-wa:hover,
.btn-inter-wa:hover,
.btn-agencia-wa:hover,
.btn-temporada:hover {
  transition:
    transform 130ms var(--ease-ios),
    box-shadow 150ms var(--ease-ios),
    background-color 150ms var(--ease-ios),
    color 100ms var(--ease-ios),
    border-color 100ms var(--ease-ios),
    filter 150ms var(--ease-ios);
}

/* =============================================
   HERO STATS — métricas de confianza en la base del hero
   ============================================= */
.hero-stats {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
  pointer-events: none;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-stat-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 768px) {
  .hero-stats {
    gap: 20px;
    bottom: 40px;
  }

  .hero-stat-num {
    font-size: 1rem;
  }

  .hero-stat-label {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    display: none;
  }
}

/* Mobile 480px — panel compacto */
@media (max-width: 480px) {
  .hero-panel {
    max-width: 100%;
  }
  .panel-subtitle {
    display: none;
  }
}

/* =============================================
   PULIDO VISUAL — ELEVACIÓN DE REPOSO
   Las cards quedaban "planas" hasta el hover; ahora
   flotan levemente desde el inicio para más profundidad.
   ============================================= */
.destino-card,
.cat-card,
.flyer-card,
.video-card,
.beneficio-card,
.paso-card,
.faq-item,
.temporada-card {
  box-shadow: var(--card-shadow);
}

.faq-item {
  box-shadow: 0 4px 20px rgba(27, 94, 247, 0.08);
}

.temporada-card {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
}

/* Acento superior compartido — cards de solo contenido (sin imagen) */
.beneficio-card {
  position: relative;
  overflow: hidden;
}

.beneficio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, #48cae4 100%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-ios);
}

.beneficio-card:hover::before {
  opacity: 1;
}

/* Íconos — leve escala al pasar el mouse por la card */
.beneficio-icon,
.paso-card-ico,
.cat-icon {
  transition: transform var(--duration-normal) var(--ease-ios);
}

.beneficio-card:hover .beneficio-icon,
.paso-card:hover .paso-card-ico,
.cat-card:hover .cat-icon {
  transform: scale(1.08);
}

/* =============================================
   FLYER CUPOS CHIP
   ============================================= */
.flyer-cupos {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(27, 94, 247, 0.12);
  border: 1px solid rgba(27, 94, 247, 0.3);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  color: #7aabff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* =============================================
   TESTIMONIOS (sección oculta hasta que el
   cliente provea testimonios reales)
   ============================================= */
.testimonios {
  padding: 64px 0;
  background: var(--dark);
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonio-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(27,94,247,0.15);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonio-foto-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(27,94,247,0.15);
  border: 2px dashed rgba(27,94,247,0.3);
}

.testimonio-texto {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}

.testimonio-nombre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .testimonios-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   STICKY MOBILE WA BAR
   ============================================= */
.sticky-wa-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 10px 16px 14px;
  background: rgba(3, 13, 46, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(27,94,247,0.2);
}

.sticky-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: background var(--duration-fast) var(--ease-ios);
}

.sticky-wa-btn:hover {
  background: #20ba58;
}

@media (max-width: 768px) {
  .sticky-wa-bar {
    display: block;
  }

  body {
    padding-bottom: 76px;
  }
}

/* =============================================
   RITMO VISUAL — separadores sutiles entre
   secciones del mismo fondo oscuro
   ============================================= */
.flyers-section,
.por-que,
.como-funciona,
.faq {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.confianza {
  border-top: 1px solid rgba(27, 94, 247, 0.12);
  border-bottom: 1px solid rgba(27, 94, 247, 0.12);
}

/* =============================================
   PAQUETES — subtítulo más orientado a acción
   ============================================= */
.destinos .section-subtitle {
  max-width: 560px;
}

/* =============================================
   POLISH — JULIO 2026
   Mejoras de diseño, tipografía y calidez visual
   ============================================= */

/* 1. Font rendering profesional — diferencia inmediata en Mac/iOS */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Evitar última línea de una sola palabra en todos los títulos */
.section-title,
.hero-title,
.cta-title,
.confianza-title,
.paso-card-title,
.beneficio-title,
.temporada-title {
  text-wrap: balance;
}

/* 3. Acento cálido — rompe la monotonía del azul/negro */
:root {
  --amber: #FBBF24;
}

/* 4. Grain texture sobre el hero — profundidad y atmósfera sin imágenes extra */
.hero-overlay {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23noise)' opacity='0.09'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(3, 13, 46, 0.78) 0%, rgba(3, 13, 46, 0.44) 52%, rgba(3, 13, 46, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 13, 46, 0.06) 0%, rgba(3, 13, 46, 0.62) 100%);
  background-size: 250px 250px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* 5. Hero stats — pill glassmorphic con aire y números más grandes */
.hero-stats {
  background: rgba(3, 13, 46, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50px;
  padding: 16px 44px;
  gap: 44px;
  bottom: 44px;
}

.hero-stat {
  gap: 5px;
}

.hero-stat-num {
  color: var(--amber);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.hero-stat-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.07em;
}

.hero-stat-sep {
  height: 36px;
  background: rgba(255, 255, 255, 0.16);
}

/* 6. @keyframes ft-bounce — mejorado con fade de opacidad */
@keyframes ft-bounce {
  0%, 100% { transform: translateY(0);  opacity: 0.6; }
  50%       { transform: translateY(8px); opacity: 1; }
}

/* 7. Iconos de beneficios — cada uno con su color de categoría */
.beneficio-icon {
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS override de los atributos de presentación SVG (specificidad > 0) */
.beneficio-icon svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.beneficio-card:nth-child(1) .beneficio-icon {
  background: rgba(27, 94, 247, 0.12);
  border: 1px solid rgba(27, 94, 247, 0.22);
  color: #7AABFF;
}
.beneficio-card:nth-child(2) .beneficio-icon {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.26);
  color: #FBBF24;
}
.beneficio-card:nth-child(3) .beneficio-icon {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.26);
  color: #4ADE80;
}
.beneficio-card:nth-child(4) .beneficio-icon {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.26);
  color: #C084FC;
}

/* 8. Cards de beneficios — bordes más definidos, glow más preciso */
.beneficio-card {
  border-color: rgba(27, 94, 247, 0.26);
}
.beneficio-card:hover {
  border-color: rgba(27, 94, 247, 0.55);
  box-shadow: 0 0 36px rgba(27, 94, 247, 0.20);
}

/* 9. Sección Por Qué FTravel — radial glow para diferenciación visual */
.por-que {
  background:
    radial-gradient(ellipse 80% 55% at 50% 50%, rgba(27, 94, 247, 0.08) 0%, transparent 65%),
    var(--dark);
}

/* 10. Sección Cómo Funciona — gradiente sutil para romper monotonía.
   Empieza y termina en el mismo navy que las secciones vecinas
   (Destinos y Testimonios) para que no haya costura visible. */
.como-funciona {
  background: linear-gradient(180deg, #030D2E 0%, #041040 50%, #030D2E 100%);
}

/* 11. Chips del hero — micro-feedback en active */
.panel-chip:active {
  transform: scale(0.96);
  opacity: 0.82;
}

/* 13. Subtítulos de sección — longitud de línea controlada para mejor lectura */
.section-subtitle {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* 14. Hero title accent — ámbar en la frase de cierre: transmite confianza y calor */
.hero-title-accent {
  color: var(--amber);
}

/* 15. Destino cards — bordes más definidos */
.destino-card {
  border-color: rgba(27, 94, 247, 0.22);
}
.destino-card:hover {
  border-color: rgba(27, 94, 247, 0.45);
}

/* 16. Check icons — azul claro, se lee mejor sobre fondo oscuro */
.check-icon {
  color: #7AABFF;
}
.check-icon path {
  stroke: currentColor;
}

/* 17. CTA Final — gradiente más rico y profundo.
   180deg (igual que el resto de las secciones, en vez de 140deg)
   para que el "río" de color siga bajando en la misma dirección.
   Arranca en el mismo navy que termina el FAQ, sube a un azul vivo
   como momento destacado (es la sección de conversión) y vuelve a
   bajar a navy al final para no cortar en seco contra el footer. */
.cta-final {
  background: linear-gradient(180deg, #030D2E 0%, #0A2A8C 55%, #1B5EF7 78%, #030D2E 100%);
}

/* 18. Paso-card mejora visual — borde superior más visible */
.paso-card::before {
  height: 3px;
  opacity: 0.9;
}

/* 19. Flyer card — sombra más visible en hover */
.flyer-card:hover {
  box-shadow: 0 16px 44px rgba(27, 94, 247, 0.24);
}

/* 20. Hero panel — borde más visible */
.hero-panel {
  border-color: rgba(27, 94, 247, 0.42);
}

/* 21. Hero stats — ajuste pill en mobile */
@media (max-width: 768px) {
  .hero-stats {
    padding: 12px 28px;
    gap: 28px;
  }
  .hero-stat-num {
    font-size: 1.1rem;
  }
}

/* =============================================
   TESTIMONIOS — contenido real (julio 2026)
   ============================================= */

/* Quote mark decorativo en ámbar */
.testimonio-quote-icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--amber);
  font-family: Georgia, 'Times New Roman', serif;
  opacity: 0.6;
  display: block;
  margin-bottom: -4px;
}

/* Nombre más claro + tag destino */
.testimonio-nombre {
  color: rgba(255,255,255,0.78) !important;
  margin-top: auto;
}
.testimonio-destino {
  color: rgba(255,255,255,0.36);
  font-weight: 400;
}

/* Muro de reseñas */
.resenas-muro {
  margin-top: 56px;
  text-align: center;
}
.resenas-muro-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.resenas-muro-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.resena-img {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
  display: block;
}
.resena-img:hover {
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}
.resenas-ig-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s;
}
.resenas-ig-link:hover {
  color: rgba(255,255,255,0.75);
}

@media (max-width: 1024px) {
  .resenas-muro-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .resenas-muro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
   PREMIUM ANIMATIONS — julio 2026
   ============================================= */

/* 1. Hero entrance — staggered fade-up */
@keyframes ft-fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow  { animation: ft-fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.hero-title    { animation: ft-fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
.hero-subtitle { animation: ft-fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
.hero-actions  { animation: ft-fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.52s both; }
.hero-panel    { animation: ft-fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-stats    { animation: ft-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.72s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-title, .hero-subtitle,
  .hero-actions, .hero-panel, .hero-stats {
    animation: none;
  }
}

/* 2. Scroll arrow bounce */
@keyframes ft-bounce-arrow {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%       { transform: translateY(7px); opacity: 1; }
}
.scroll-arrow { animation: ft-bounce-arrow 1.7s ease-in-out infinite; }

/* 3. Hero accent shimmer (dorado)
   El gradiente anterior no era "tileable": al terminar el ciclo,
   el color en el borde derecho no coincidía con el del borde
   izquierdo al reiniciar, y se veía un salto/corte cada 4s en vez
   de un flujo continuo. Con repeating-linear-gradient el patrón
   se repite exacto cada 50% de su propia línea, y el keyframe
   desplaza el fondo exactamente un período (100% con
   background-size:200%) — el final de una vuelta es visualmente
   idéntico al principio de la siguiente, sin corte. */
@keyframes ft-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}
.hero-title-accent {
  background: repeating-linear-gradient(90deg,
    #F59E0B 0%, #FDE68A 12.5%, #FBBF24 25%, #FDE68A 37.5%, #F59E0B 50%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: ft-shimmer 5.5s linear infinite;
}

/* 4. WhatsApp CTA — glow pulsante */
@keyframes ft-wa-glow {
  0%, 100% { box-shadow: 0 4px 22px rgba(37,211,102,0.22); }
  50%       { box-shadow: 0 4px 36px rgba(37,211,102,0.48), 0 0 0 5px rgba(37,211,102,0.09); }
}
.btn-whatsapp {
  animation: ft-wa-glow 2.8s ease-in-out infinite;
}

/* 5. Flyer cards — hover 3D tilt */
.flyer-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.42s cubic-bezier(0.22,1,0.36,1);
}
.flyer-card:hover {
  transform: perspective(900px) rotateX(-4deg) rotateY(4deg) translateY(-7px) scale(1.01);
  box-shadow: 0 28px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(27,94,247,0.22);
}

/* 6. Destino cards — hover lift */
.destino-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.destino-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
}

/* 7. Beneficio cards — icon scale on hover */
.beneficio-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform;
}
.beneficio-card:hover {
  transform: translateY(-5px);
  border-color: rgba(27,94,247,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.beneficio-card:hover .beneficio-icon {
  transform: scale(1.1) rotate(-4deg);
}
.beneficio-icon {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* 8. Paso cards — connector line animation */
.paso-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.paso-card:hover {
  transform: translateY(-4px);
}
.paso-card-ico {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.paso-card:hover .paso-card-ico {
  transform: scale(1.12) rotate(6deg);
}

/* 9. Testimonio cards — subtle lift */
.testimonio-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease;
}
.testimonio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251,191,36,0.28);
}

/* 10. FAQ items — smooth border accent on open */
.faq-item.open {
  border-color: rgba(27,94,247,0.4);
  box-shadow: 0 4px 24px rgba(27,94,247,0.08);
}

/* 12. Nav CTA — shimmer on hover */
.nav-cta {
  position: relative;
  overflow: hidden;
}
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.nav-cta:hover::after {
  transform: translateX(100%);
}

/* 13. Stagger reveal para grids — override del observer */
.flyers-grid .flyer-card:nth-child(1)  { transition-delay: 0ms; }
.flyers-grid .flyer-card:nth-child(2)  { transition-delay: 60ms; }
.flyers-grid .flyer-card:nth-child(3)  { transition-delay: 120ms; }
.flyers-grid .flyer-card:nth-child(4)  { transition-delay: 180ms; }
.flyers-grid .flyer-card:nth-child(5)  { transition-delay: 240ms; }
.flyers-grid .flyer-card:nth-child(6)  { transition-delay: 300ms; }
.beneficios-grid .beneficio-card:nth-child(1) { --reveal-delay: 0ms; }
.beneficios-grid .beneficio-card:nth-child(2) { --reveal-delay: 80ms; }
.beneficios-grid .beneficio-card:nth-child(3) { --reveal-delay: 160ms; }
.beneficios-grid .beneficio-card:nth-child(4) { --reveal-delay: 240ms; }

/* 14. Section dividers — top glow line */
.flyers-section,
.destinos,
.por-que,
.como-funciona,
.testimonios,
.faq {
  position: relative;
}
.flyers-section::before,
.destinos::before,
.por-que::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27,94,247,0.45), transparent);
}

/* 15. Resena images — zoom on hover */
.resena-img {
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.32s ease,
              filter 0.32s ease;
  filter: brightness(0.92);
}
.resena-img:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  filter: brightness(1);
  position: relative;
  z-index: 2;
}

/* (El marquee infinito de testimonios fue reemplazado por el
   carrusel premium — ver sección 30 al final del archivo.) */

/* =============================================
   VISUAL FLOW — GRADIENTES Y SUAVIDAD GLOBAL
   ============================================= */

/* 1. Ambient page aurora — subtle blue luminance */
body::before {
  content: '';
  position: fixed;
  top: -5%;
  left: -10%;
  width: 65%;
  height: 80%;
  background: radial-gradient(ellipse at 35% 40%, rgba(27,94,247,0.06) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -8%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse at 65% 65%, rgba(27,94,247,0.05) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* 2. Section title gradient text — premium blue-white shimmer */
.section-title {
  background: linear-gradient(150deg, #FFFFFF 0%, #D8E5FF 55%, #AABFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 3. Section flow — gradient glow lines at top of each section */
.como-funciona::before,
.testimonios::before,
.faq::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27,94,247,0.4), transparent);
}

/* 4. Section subtle gradient backgrounds for visual variety */
.testimonios {
  background: linear-gradient(180deg, #030D2E 0%, #020B25 55%, #030D2E 100%);
}
.por-que {
  background: linear-gradient(180deg, #030D2E 0%, #041040 45%, #030D2E 100%);
}
.faq {
  /* Empieza donde termina Testimonios (#030D2E) y termina donde
     arranca CTA final (#030D2E) — sin costura en ninguno de los
     dos bordes, con un ligero contraste al medio para dar aire. */
  background: linear-gradient(180deg, #030D2E 0%, #020B25 50%, #030D2E 100%);
}

/* 5. Smoother global card interactions */
.destino-card,
.flyer-card,
.beneficio-card,
.paso-card {
  transition-duration: 0.42s;
}

/* 6. CTA final section — gradient border top glow */
.cta-final {
  position: relative;
}
.cta-final::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), transparent);
}

/* 7. Section subtitle — slightly softer color for contrast rhythm */
.section-subtitle {
  color: rgba(168,185,220,0.82);
}

/* 8. Gradient accent on "Por qué" benefit icons */
.beneficio-card-ico {
  background: linear-gradient(135deg, rgba(27,94,247,0.18) 0%, rgba(27,94,247,0.08) 100%);
}

/* 9. Testimonios section padding increase for breathing room */
.testimonios {
  padding-bottom: 72px;
}

/* 10. Resena IG link centered */
.resenas-ig-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =============================================
   BUG FIXES & HOVER CONSISTENCY (julio 2026)
   ============================================= */

/* 1. Section title gradient — fix specificity para Firefox.
      Las reglas .por-que .section-title etc. tienen especificidad 0,2,0
      y cancelaban el gradient. Este selector también es 0,2,0 pero
      aparece después, así que gana en cascada. */
.section-header .section-title {
  background: linear-gradient(150deg, #FFFFFF 0%, #D8E5FF 55%, #AABFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 2. Flyer cards — quitar preserve-3d (rompe overflow:hidden) y usar
      hover limpio: lift + scale + glow azul con z-index correcto */
.flyer-card {
  position: relative;
  transform-style: flat;
}
.flyer-card:hover {
  transform: translateY(-9px) scale(1.025);
  box-shadow:
    0 24px 52px rgba(0,0,0,0.42),
    0 0 0 1px rgba(27,94,247,0.48);
  border-color: rgba(27,94,247,0.6);
  z-index: 3;
}

/* 3. Destino cards — z-index en hover para no quedar tapadas */
.destino-card {
  position: relative;
}
.destino-card:hover {
  border-color: rgba(27,94,247,0.42);
  z-index: 2;
}

/* 4. Cupos limitados — badge de urgencia ámbar */
.flyer-cupos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #F59E0B;
  letter-spacing: 0.02em;
}
.flyer-cupos::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
  display: inline-block;
}

/* 5. Botón de flyer — WA verde en hover (la acción lleva a WhatsApp) */
.btn-flyer:hover {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(37,211,102,0.32);
}

/* 6. Beneficio cards — sombra con glow azul en hover */
.beneficio-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(27,94,247,0.3);
}

/* 7. Paso cards — glow azul en hover */
.paso-card:hover {
  box-shadow: 0 16px 42px rgba(27,94,247,0.2), 0 0 0 1px rgba(27,94,247,0.2);
}

/* 9. Iconos WA en botones — micro-rotación en hover */
.btn-panel-wa svg,
.btn-card svg,
.btn-whatsapp svg,
.btn-inter-wa svg {
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
  display: block;
}
.btn-panel-wa:hover svg,
.btn-card:hover svg,
.btn-whatsapp:hover svg,
.btn-inter-wa:hover svg {
  transform: scale(1.15) rotate(-10deg);
}

/* 10. Nav link — underline con gradiente azul */
.nav-link::after {
  background: linear-gradient(90deg, var(--blue), #7AABFF);
}

/* 12. Floating WA button — rotación del icono en hover */
.whatsapp-float svg {
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
.whatsapp-float:hover svg {
  transform: scale(1.12) rotate(-12deg);
}

/* 13. FAQ question — fondo sutil en hover */
.faq-question:hover {
  background: rgba(27,94,247,0.06);
  border-radius: 8px;
}

/* 14. Footer links — accent azul en hover */
.footer-links a:hover {
  color: #7AABFF;
}

/* 15. CTA intermedio — WA button hover con escala de icono */
.btn-inter-wa svg {
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}

@media (prefers-reduced-motion: reduce) {
  .btn-panel-wa svg,
  .btn-card svg,
  .btn-whatsapp svg,
  .btn-inter-wa svg,
  .whatsapp-float svg {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================
   16. NAV — PROFESSIONAL UPGRADE
   ============================================= */

/* CTA button in nav — green WA style */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25D366;
  color: #fff;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
  box-shadow: 0 0 0 0 rgba(37,211,102,0);
  animation: none !important;
}
.nav-cta:hover {
  background: #1DAD57;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(37,211,102,0.35);
}
.nav-cta svg {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
}
.nav-cta:hover svg {
  transform: scale(1.18) rotate(-10deg);
}

/* En mobile el CTA del nav se oculta (regla original):
   ya hay CTA verde en el menú móvil y en la sticky bar */
@media (max-width: 768px) {
  .nav-cta {
    display: none;
  }
}

/* Scrolled navbar — premium glass look */
.navbar.scrolled {
  background: rgba(2, 8, 28, 0.94) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(27,94,247,0.2) !important;
  box-shadow: 0 1px 0 rgba(27,94,247,0.1), 0 4px 24px rgba(0,0,0,0.35) !important;
}

/* Active nav link */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1B5EF7, #25D366);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: center;
}
.nav-link.active {
  color: #fff;
}
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 768px) {
  /* Stagger entrance for mobile nav links */
  .nav-links.open li {
    opacity: 0;
    transform: translateY(18px);
    animation: navLinkIn 0.38s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.20s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
}

@keyframes navLinkIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile nav active link — larger underline */
@media (max-width: 768px) {
  .nav-link::after { display: none; }
  .nav-link.active {
    color: #fff;
    text-shadow: 0 0 18px rgba(27,94,247,0.6);
  }
}

/* =============================================
   17. SECTION EYEBROW
   ============================================= */
.section-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #25D366;
  background: rgba(37,211,102,0.1);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

/* =============================================
   18. TESTIMONIOS CARDS — PROFESSIONAL REDESIGN
   ============================================= */
.testimonio-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(27,94,247,0.18);
  border-radius: 18px;
  padding: 28px 24px 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.testimonio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1B5EF7 40%, #25D366 100%);
  border-radius: 18px 18px 0 0;
  opacity: 0.7;
}
.testimonio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27,94,247,0.38);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(27,94,247,0.2);
}

.testimonio-quote-icon {
  display: block;
  font-size: 3.4rem;
  line-height: 1;
  color: #1B5EF7;
  opacity: 0.6;
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: 8px;
  margin-top: -8px;
  letter-spacing: -0.04em;
}

.testimonio-texto {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(210,225,255,0.88);
  margin-bottom: 18px;
  font-style: italic;
  flex: 1;
}

.testimonio-nombre {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: auto;
}

.testimonio-destino {
  font-weight: 400;
  color: rgba(27,94,247,0.9);
  font-size: 0.79rem;
}

/* Resena images clickable */
.resena-img {
  cursor: zoom-in;
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
  border-radius: 12px;
  object-fit: cover;
}
.resena-img:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  filter: brightness(1.06);
}

/* =============================================
   19. LIGHTBOX
   ============================================= */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.img-lightbox.open {
  pointer-events: all;
  opacity: 1;
}

.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(1, 5, 18, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.lightbox-img {
  position: relative;
  z-index: 1;
  max-height: 90vh;
  max-width: 90vw;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.07);
  transform: scale(0.88);
  transition: transform 0.36s cubic-bezier(0.22,1,0.36,1);
  object-fit: contain;
}
.img-lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-close:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.open li { animation: none; opacity: 1; transform: none; }
  .img-lightbox, .lightbox-img, .lightbox-close { transition: none; }
}

/* =============================================
   20. LOGO NUEVO — MÁS PRESENCIA DE MARCA
   ============================================= */
.nav-logo-img {
  height: 70px;
}

.footer-logo-img {
  height: 88px;
}

@media (max-width: 768px) {
  .nav-logo-img { height: 58px; }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 52px; }
}

/* Compensar la altura del logo reduciendo el padding del nav */
.navbar {
  padding: 10px 0;
}

.navbar.scrolled {
  padding: 6px 0;
}

/* =============================================
   23. MOBILE — HERO MÁS COMPACTO
   ============================================= */
@media (max-width: 768px) {
  .hero-scroll-hint { display: none; }
}

@media (max-width: 480px) {
  .hero-inner {
    gap: 18px;
    padding-top: 12px;
  }

  /* Los chips en fila nowrap inflan el min-content del grid;
     min-width:0 permite que los items encojan al viewport */
  .hero-content,
  .hero-panel {
    min-width: 0;
    max-width: 100%;
  }

  .hero-title {
    font-size: clamp(1.65rem, 7.5vw, 2.1rem);
    line-height: 1.18;
  }

  .hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 34ch;
  }

  .hero-actions {
    margin-top: 4px;
  }

  /* Stats más discretos */
  .hero-stats {
    gap: 18px;
    padding-top: 18px;
  }
  .hero-stat-num { font-size: 1.15rem; }
  .hero-stat-label { font-size: 0.62rem; }
}

/* =============================================
   24. JERARQUÍA DE CTAs — MENOS VERDE
   El verde WhatsApp queda reservado para los CTAs
   de mayor impacto: panel del hero, flotante,
   sticky mobile, FAQ y formulario final.
   ============================================= */

/* Nav CTA pasa a azul marca — deja de competir con el hero */
.nav-cta {
  background: rgba(27, 94, 247, 0.18);
  border: 1px solid rgba(27, 94, 247, 0.5);
  color: #fff;
}
.nav-cta:hover {
  background: #1B5EF7;
  border-color: #1B5EF7;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(27, 94, 247, 0.4);
}

/* Cards de paquetes: botón outline discreto, verde solo al hover.
   Evita la pared de 6 botones verdes en la grilla. */
.btn-card {
  background: rgba(27, 94, 247, 0.14);
  border: 1.5px solid rgba(27, 94, 247, 0.45);
  color: #B8CFFF;
  box-shadow: none;
}
.btn-card:hover {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.32);
}

/* =============================================
   25. ZOOM PREMIUM EN CARDS
   ============================================= */

/* Flyers: los flyers tienen texto e info del cliente — sin zoom
   ni recorte; solo un realce sutil de brillo al hover */
.flyer-img img {
  transition: filter 0.4s ease;
}
.flyer-card:hover .flyer-img img {
  filter: brightness(1.02);
}

/* Paquetes: mismo efecto sobre la imagen de fondo */
.card-img {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--duration-slow) var(--ease-ios);
  will-change: transform;
}
.destino-card:hover .card-img {
  transform: scale(1.06);
  filter: saturate(1.08) brightness(1.04);
}

/* =============================================
   25b. PANEL PASO 2 — SELECTOR DE FECHAS
   ============================================= */
@keyframes panelStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-step--in {
  animation: panelStepIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 13px;
  transition: color 0.2s ease;
}
.panel-back:hover {
  color: #7AABFF;
}

/* Título del paso 2: es un texto corrido con el destino insertado
   ("¿Cuándo viajarías al Caribe?") — más chico que el título con
   ícono del paso 1, con más aire antes del calendario para que no
   se sienta apretado contra los días. */
.panel-step2 .panel-label {
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* --- Calendario de rango --- */
.panel-cal {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(27, 94, 247, 0.28);
  border-radius: 16px;
  padding: 16px 14px 13px;
  margin-bottom: 16px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  letter-spacing: 0.02em;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(27, 94, 247, 0.16);
  border: 1px solid rgba(27, 94, 247, 0.35);
  border-radius: 8px;
  color: #B8CFFF;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cal-nav:hover:not(:disabled) {
  background: rgba(27, 94, 247, 0.4);
  border-color: rgba(27, 94, 247, 0.7);
  color: #fff;
}
.cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 5px;
}
.cal-week span {
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cal-day--empty {
  cursor: default;
}

.cal-day:hover:not(:disabled):not(.cal-day--empty) {
  background: rgba(27, 94, 247, 0.28);
  transform: scale(1.06);
}

.cal-day--past {
  color: rgba(255, 255, 255, 0.16);
  cursor: default;
}

.cal-day--today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F59E0B;
}

.cal-day--inrange {
  background: rgba(27, 94, 247, 0.2);
  border-radius: 0;
  color: #fff;
}

.cal-day--start,
.cal-day--end {
  background: linear-gradient(150deg, #1B5EF7 0%, #2E7BFF 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(27, 94, 247, 0.45);
}
/* Con rango completo, los extremos se funden con el relleno */
.cal-day--start.cal-day--connected {
  border-radius: 8px 0 0 8px;
}
.cal-day--end.cal-day--connected {
  border-radius: 0 8px 8px 0;
}

.cal-readout {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  padding-top: 12px;
  margin-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 1.6em;
}
.cal-readout strong {
  color: #F59E0B;
  font-weight: 700;
}

.panel-skip {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0 0;
  text-align: center;
  transition: color 0.2s ease;
}
.panel-skip:hover {
  color: #7AABFF;
}

@media (prefers-reduced-motion: reduce) {
  .panel-step--in { animation: none; }
}

/* =============================================
   26. MICRO-FEEDBACK EN BOTONES
   ============================================= */
.btn:active,
.btn-flyer:active,
.btn-panel-wa:active,
.panel-chip:active,
.nav-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .flyer-img img,
  .card-img {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================
   27. FASE FINAL — CONSISTENCIA DEL HERO
   ============================================= */

/* Nav CTA neutro: sin verde, sin shimmer, hover suave */
.nav-cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  box-shadow: none;
}
.nav-cta::after {
  display: none;
}
.nav-cta:hover {
  background: rgba(27, 94, 247, 0.18);
  border-color: rgba(27, 94, 247, 0.55);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none;
}

/* WhatsApp flotante: oculto mientras el hero está visible */
.wa-float-wrapper {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-float-wrapper.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Sticky bar mobile: entra desde abajo al pasar el hero */
.sticky-wa-bar {
  transform: translate3d(0, 105%, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-wa-bar.is-visible {
  transform: translate3d(0, 0, 0);
}

/* Transición suave del hero hacia la sección siguiente */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(3, 13, 46, 0) 0%, rgba(3, 13, 46, 0.55) 60%, #030D2E 100%);
  pointer-events: none;
  z-index: 0;
}
/* .hero-stats ya es position:absolute con z-index:1 — no tocar su posición */
.hero-inner,
.hero-scroll-hint {
  position: relative;
  z-index: 1;
}

/* La animación ft-fadeUp pisaba el translateX(-50%) del centrado
   (fill:both deja translateY(0) como transform final). Keyframe propia. */
@keyframes ft-fadeUp-center {
  from { opacity: 0; transform: translate(-50%, 32px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.hero-stats {
  animation: ft-fadeUp-center 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}

/* Menos altura vacía en desktop */
@media (min-width: 769px) {
  .hero {
    min-height: 88vh;
  }
}

/* Barra de confianza: más liviana, sin aspecto corporativo */
.hero-stats {
  padding: 14px 30px;
  gap: 34px;
}
.hero-stat-num {
  font-size: 1.15rem;
  letter-spacing: 0.015em;
}
.hero-stat-label {
  font-size: 0.66rem;
}

/* Panel: hover contenido a 2px */
.hero-panel:hover {
  transform: translate3d(0, -2px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .wa-float-wrapper,
  .sticky-wa-bar {
    transition: none;
  }
}

/* =============================================
   28. HERO MOBILE COMPACTO
   ============================================= */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 104px 0 44px;
  }

  /* Stats en flujo normal: el hero termina justo después del contenido */
  .hero-stats {
    position: static;
    transform: none;
    margin: 26px auto 0;
    width: fit-content;
    animation-name: ft-fadeUp;
  }

  .hero::after {
    height: 110px;
  }

  .hero-panel {
    max-width: 440px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 96px 0 36px;
  }

  /* Chips en dos filas, todos visibles — sin corte horizontal */
  .panel-chips {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
  }
  .panel-chip {
    flex: 0 0 auto;
  }

  .hero-panel {
    width: 100%;
    max-width: none;
    padding: 24px 20px;
    border-radius: 22px;
  }

  .panel-label {
    font-size: 1.02rem;
  }
  .panel-label-icon {
    width: 27px;
    height: 27px;
  }
  .panel-label-icon svg {
    width: 13px;
    height: 13px;
  }
  .panel-subtitle {
    margin-left: 37px;
  }
}

/* =============================================
   29. MENÚ MOBILE — DRAWER LATERAL PREMIUM
   ============================================= */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 8, 28, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  padding:
    max(20px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7, 20, 52, 0.99), rgba(2, 10, 35, 0.99));
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -24px 0 80px rgba(0, 0, 0, 0.35);
  transform: translate3d(100%, 0, 0);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

@media (min-width: 769px) {
  .mobile-menu,
  .mobile-menu-backdrop {
    display: none;
  }
}

/* Encabezado */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mobile-menu-logo {
  width: 150px;
  height: auto;
  display: block;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}

/* Identidad */
.mobile-menu-intro {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu-intro p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 5px;
}
.mobile-menu-intro span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.85);
}

/* Links */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translate3d(2px, 0, 0);
}
.mobile-menu-link:active {
  transform: scale(0.985);
}

.mobile-menu-link.active {
  background: rgba(27, 94, 247, 0.16);
  border-color: rgba(27, 94, 247, 0.4);
  color: #fff;
}

.mobile-menu-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(27, 94, 247, 0.14);
  color: #7AABFF;
}
.mobile-menu-link-icon svg {
  width: 18px;
  height: 18px;
}

.mobile-menu-link-arrow {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 220ms ease, color 220ms ease;
}
.mobile-menu-link:hover .mobile-menu-link-arrow {
  color: #7AABFF;
  transform: translateX(2px);
}

/* Entrada en cascada de los links (solo al abrir; hover queda libre) */
.mobile-menu.is-open .mobile-menu-link {
  animation: menuLinkIn 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.mobile-menu.is-open .mobile-menu-link:nth-child(1) { animation-delay: 80ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(2) { animation-delay: 120ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(3) { animation-delay: 160ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(4) { animation-delay: 200ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(5) { animation-delay: 240ms; }

@keyframes menuLinkIn {
  from {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }
}

/* CTA */
.mobile-menu-cta-block {
  margin-top: auto;
  padding-top: 22px;
}
.mobile-menu-cta-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 9px;
  text-align: center;
}
.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  background: var(--whatsapp);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.18s ease;
}
.mobile-menu-cta:hover {
  background: #1DAD57;
}
.mobile-menu-cta:active {
  transform: scale(0.985);
}

/* Pie de confianza */
.mobile-menu-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu-footer p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
}
.mobile-menu-ig {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7AABFF;
  text-decoration: none;
}
.mobile-menu-ig:hover {
  color: #fff;
}

/* Hamburguesa → X más suave */
.hamburger span {
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

/* Con el menú abierto no compiten otros CTAs */
body.menu-open .wa-float-wrapper,
body.menu-open .sticky-wa-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* El viejo menú fullscreen queda anulado en mobile */
@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-backdrop,
  .mobile-menu-link,
  .mobile-menu-link-arrow,
  .hamburger span {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================
   30. FASE FINAL — SISTEMA GLOBAL DE FECHAS,
   CATÁLOGO, RESEÑAS PREMIUM Y FORMULARIO
   ============================================= */

:root {
  --motion-fast: 180ms;
  --motion-normal: 340ms;
  --motion-slow: 560ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 30a. Modal de viaje / bottom sheet ---------- */
.trip-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.trip-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.trip-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 28, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity var(--motion-normal) ease;
}
.trip-modal.is-open .trip-modal-backdrop {
  opacity: 1;
}

.trip-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(7, 20, 52, 0.99), rgba(3, 12, 38, 0.99));
  border: 1px solid rgba(27, 94, 247, 0.32);
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition:
    opacity var(--motion-normal) ease,
    transform 420ms var(--ease-premium);
}
.trip-modal.is-open .trip-modal-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Bottom sheet en mobile */
@media (max-width: 640px) {
  .trip-modal {
    align-items: flex-end;
  }
  .trip-modal-panel {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    transform: translate3d(0, 100%, 0);
    transition: transform 460ms var(--ease-sheet), opacity var(--motion-normal) ease;
  }
  .trip-modal.is-open .trip-modal-panel {
    transform: translate3d(0, 0, 0);
  }
}

.trip-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.trip-modal-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.85);
  margin-bottom: 3px;
  min-height: 1em;
}

.trip-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.25;
}

.trip-modal-price {
  font-size: 0.82rem;
  color: rgba(184, 207, 255, 0.9);
  margin-top: 2px;
}

.trip-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.trip-modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}

.trip-modal-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}

.trip-modal-cal {
  margin-bottom: 14px;
}

.trip-modal .btn-panel-wa {
  margin-top: 0;
}

.trip-modal .panel-skip {
  padding-top: 10px;
}

/* ---------- 30b. Salidas: filtros, ver más, estado vacío ---------- */
.salidas-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .salidas-filtros {
    gap: 7px;
  }
  .salidas-filtros .filtro-btn {
    padding: 9px 15px;
    font-size: 0.8rem;
  }
}

/* Transición premium al cambiar de filtro (se anima el contenedor) */
.flyers-grid,
.destinos-grid {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 300ms var(--ease-premium),
    filter 340ms var(--ease-premium),
    transform 340ms var(--ease-premium);
}
.flyers-grid.is-changing,
.destinos-grid.is-changing {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 8px, 0);
}

.salidas-empty {
  text-align: center;
  padding: 36px 24px;
  border: 1px dashed rgba(27, 94, 247, 0.35);
  border-radius: 16px;
  margin-bottom: 20px;
}
.salidas-empty p {
  color: rgba(168, 185, 220, 0.85);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.salidas-empty-link {
  color: #7AABFF;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.salidas-empty-link:hover {
  color: #fff;
}

.salidas-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.salidas-more {
  background: rgba(27, 94, 247, 0.14);
  border: 1px solid rgba(27, 94, 247, 0.45);
  color: #B8CFFF;
  border-radius: 50px;
  padding: 11px 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.salidas-more:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}
.salidas-more:active {
  transform: scale(0.985);
}

/* Botón "Ver flyer" (inyectado por JS) */
.btn-ver-flyer {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 7px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: color var(--motion-fast) ease;
}
.btn-ver-flyer:hover {
  color: #7AABFF;
}

/* Hover del flyer-card sin escala (el flyer tiene texto) */
.flyer-card:hover {
  transform: translateY(-6px);
}

/* ---------- 30c. Reseñas premium ---------- */
.resenas-mintur-badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.07);
  border-radius: 20px;
  padding: 5px 14px;
}

.resenas-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.resenas-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  position: relative;
}

.resenas-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  will-change: transform;
}

/* Un solo testimonio protagonista; los vecinos apenas se asoman
   en los bordes del viewport, desenfocados (ver estados abajo) */
.resenas-carousel-track .testimonio-card {
  flex: 0 0 auto;
  width: min(600px, 78vw);
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .resenas-carousel-track .testimonio-card {
    width: min(420px, 82vw);
  }
}

/* Tablet: sin achicar la card se comía todo el ancho y el peek
   de los vecinos desaparecía — se angosta para que el efecto
   coverflow se siga notando en este rango */
@media (min-width: 641px) and (max-width: 900px) {
  .resenas-carousel-track .testimonio-card {
    width: min(480px, 66vw);
  }
}

.resenas-arrow {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(27, 94, 247, 0.14);
  border: 1px solid rgba(27, 94, 247, 0.38);
  color: #B8CFFF;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}
.resenas-arrow:hover:not(:disabled) {
  background: rgba(27, 94, 247, 0.4);
  border-color: rgba(27, 94, 247, 0.7);
  color: #fff;
}
.resenas-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

@media (max-width: 640px) {
  /* En mobile las flechas le quitan ancho al viewport y cortan la
     card contra el borde — el gesto natural ahí es deslizar */
  .resenas-arrow {
    display: none;
  }
}

.resenas-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 18px;
}
.resenas-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.resenas-dot--active {
  background: #1B5EF7;
  transform: scale(1.25);
}

/* el atributo hidden debe ganar aunque la clase defina display */
.resenas-arrow[hidden],
.resenas-dots[hidden],
.salidas-more[hidden],
.salidas-empty[hidden],
.form-resumen[hidden],
.trip-modal-price[hidden] {
  display: none !important;
}

/* ---------- 30c-bis. Reseñas — refinamiento premium ---------- */

/* Halo azul discreto detrás del carrusel */
.resenas-carousel {
  position: relative;
}
.resenas-carousel::before {
  content: '';
  position: absolute;
  inset: -50px -6%;
  background: radial-gradient(ellipse 55% 65% at 50% 45%, rgba(27, 94, 247, 0.11) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.resenas-viewport,
.resenas-arrow {
  position: relative;
  z-index: 1;
}

/* Transición compartida por cualquier tipo de slide (testimonio o
   foto) dentro de un carrusel coverflow — así ambos se difuminan
   y aclaran con la misma suavidad al cambiar de protagonista. */
.resenas-carousel-track > * {
  transition:
    filter 550ms var(--ease-sheet),
    opacity 550ms var(--ease-sheet),
    transform 550ms var(--ease-sheet),
    box-shadow var(--motion-normal) ease,
    border-color var(--motion-normal) ease;
}

/* Cards grandes y legibles: gradiente sutil, aire generoso, sombra profunda */
.resenas-carousel-track .testimonio-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(27, 94, 247, 0.3);
  border-radius: 22px;
  padding: 44px 40px 32px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
}

.resenas-carousel-track .testimonio-quote-icon {
  font-size: 4.4rem;
}

.resenas-carousel-track .testimonio-texto {
  font-size: 1.18rem;
  line-height: 1.78;
}

.resenas-carousel-track .testimonio-nombre {
  font-size: 0.95rem;
  padding-top: 20px;
}

@media (max-width: 640px) {
  .resenas-carousel-track .testimonio-card {
    padding: 34px 26px 24px;
  }
  .resenas-carousel-track .testimonio-quote-icon {
    font-size: 3.6rem;
  }
  .resenas-carousel-track .testimonio-texto {
    font-size: 1.04rem;
    line-height: 1.72;
  }
}

/* ---------- Estados coverflow: protagonista al centro, vecinos borrosos ---------- */
.resenas-slide--active {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
.resenas-slide--active:hover {
  border-color: rgba(27, 94, 247, 0.5);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42), 0 0 34px rgba(27, 94, 247, 0.14);
}

.resenas-carousel-track > *:not(.resenas-slide--active) {
  filter: blur(7px);
  opacity: 0.32;
  transform: scale(0.92);
  pointer-events: none;
  user-select: none;
}

/* Fijado por click: la persona lo quiso ver con calma, no avanza
   solo hasta que lo suelte (otro click, flechas o indicadores). */
.resenas-carousel-track .resenas-slide--pinned {
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.6), 0 24px 56px rgba(0, 0, 0, 0.4);
}

/* ---------- Carrusel de fotos reales — mismo formato coverflow ---------- */
.fotos-carousel {
  margin-top: 40px;
}

.resenas-carousel-track .resena-photo {
  width: min(240px, 60vw);
  aspect-ratio: 9 / 16;
  flex: 0 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  position: relative;
}
.resenas-carousel-track .resena-photo .resena-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 400ms var(--ease-sheet);
}
.resenas-carousel-track .resena-photo.resenas-slide--active:hover {
  border-color: rgba(27, 94, 247, 0.45);
}
.resenas-carousel-track .resena-photo.resenas-slide--active:hover .resena-img {
  transform: scale(1.045);
}

@media (max-width: 640px) {
  .resenas-carousel-track .resena-photo {
    width: min(200px, 64vw);
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .resenas-carousel-track .resena-photo {
    width: min(220px, 46vw);
  }
}

/* Link a Instagram como pill discreta */
.resenas-ig-link {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50px;
  padding: 10px 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.resenas-ig-link:hover {
  color: #fff;
  border-color: rgba(27, 94, 247, 0.6);
  background: rgba(27, 94, 247, 0.14);
}

/* ---------- 30d. Formulario final ---------- */
.form-header-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #25D366;
  background: rgba(37, 211, 102, 0.09);
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.form-section {
  border: 1px solid rgba(27, 94, 247, 0.18);
  border-radius: 16px;
  padding: 18px 18px 8px;
  margin: 0 0 18px;
}
.form-section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7AABFF;
  padding: 0 10px;
}

.form-fechas-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(27, 94, 247, 0.38);
  border-radius: 10px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.form-fechas-btn:hover,
.form-fechas-btn:focus-visible {
  border-color: #1B5EF7;
  background: rgba(27, 94, 247, 0.14);
}
.form-fechas-btn svg {
  color: #7AABFF;
  flex-shrink: 0;
}

.form-fechas-nota {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

.form-resumen {
  background: rgba(27, 94, 247, 0.1);
  border: 1px solid rgba(27, 94, 247, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  text-align: left;
}
.form-resumen-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.85);
  margin-bottom: 5px;
}
.form-resumen-body {
  font-size: 0.9rem;
  color: rgba(220, 232, 255, 0.92);
  line-height: 1.6;
}

.form-note {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin-top: 12px;
}

.form-submit:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* ---------- 30e. CTAs fijas: una sola por dispositivo ---------- */

/* En mobile/tablet solo existe la barra fija; el flotante es de desktop */
@media (max-width: 768px) {
  .wa-float-wrapper {
    display: none !important;
  }
}

/* Con cualquier overlay abierto (drawer, modal, lightbox) no se
   muestra ninguna CTA fija */
body.menu-open .wa-float-wrapper,
body.menu-open .sticky-wa-bar,
body.modal-open .wa-float-wrapper,
body.modal-open .sticky-wa-bar,
body.lightbox-open .wa-float-wrapper,
body.lightbox-open .sticky-wa-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .trip-modal-panel,
  .trip-modal-backdrop,
  .resenas-carousel-track,
  .flyers-grid,
  .destinos-grid {
    transition: none !important;
  }
}