:root{
    --ivory:#F7F3EC; --teal:#1F5A5A; --teal-deep:#123E3E;
    --coral:#E8836F; --coral-soft:#FBE8E2; --sage:#8FA98A;
  }
  body{font-family:'Work Sans',sans-serif;background:var(--ivory);color:#2A2A28;}
  h1,h2,h3,.serif{font-family:'Fraunces',serif;}
  html{scroll-behavior:smooth;}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  .hero-overlay{background:linear-gradient(180deg,rgba(18,62,62,.25) 0%,rgba(18,62,62,.15) 40%,rgba(18,62,62,.72) 100%);}
  .card-shadow{box-shadow:0 18px 45px -22px rgba(18,62,62,.35);}
  .soft-shadow{box-shadow:0 10px 30px -18px rgba(18,62,62,.28);}
  .dest-card img{transition:transform .8s cubic-bezier(.16,1,.3,1);}
  .dest-card:hover img{transform:scale(1.08);}
  .exp-card img{transition:transform .8s cubic-bezier(.16,1,.3,1);}
  .exp-card:hover img{transform:scale(1.06);}
  .faq-panel{max-height:0;overflow:hidden;transition:max-height .5s ease;}
  .faq-item.open .faq-panel{max-height:450px;}
  .faq-item.open .faq-chevron{transform:rotate(180deg);}
  .faq-chevron{transition:transform .4s ease;}
  .no-scrollbar::-webkit-scrollbar{height:8px;}
  .no-scrollbar::-webkit-scrollbar-thumb{background:rgba(31,90,90,.25);border-radius:99px;}
  .play-pulse{box-shadow:0 0 0 0 rgba(255,255,255,.55);animation:pulse 2.4s infinite;}
  @keyframes pulse{70%{box-shadow:0 0 0 26px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
  .nav-scrolled{background:rgba(247,243,236,.92);backdrop-filter:blur(10px);box-shadow:0 6px 24px -18px rgba(18,62,62,.5);}

/* Configuración Base */
html {
  scroll-behavior: smooth;
}
.fuente{
    font-family: 'COCOGOOSE', sans-serif!important;
}
body {
  font-family: 'Work Sans', sans-serif;
  background-color: rgb(231, 241, 241);
  color: var(--text-dark);
}

h1, h2, h3, .serif {
  font-family: 'Fraunces', serif;
}

/* Colores de Texto y Tipografías Personalizadas */
.text-teal {
  color: var(--teal);
}

.text-coral {
  color: var(--coral);
}

.text-sage {
  color: var(--sage);
}

.text-muted {
  color: var(--text-muted);
}

/* Utilidades de Diseño y Sombras */
.hero-overlay {
  background: linear-gradient(180deg, rgba(18, 62, 62, 0.25) 0%, rgba(18, 62, 62, 0.15) 40%, rgba(18, 62, 62, 0.72) 100%);
}

.card-shadow {
  box-shadow: 0 18px 45px -22px rgba(18, 62, 62, 0.35);
}

.soft-shadow {
  box-shadow: 0 10px 30px -18px rgba(18, 62, 62, 0.28);
}

.bg-destinations {
  background: linear-gradient(180deg, #F7F3EC, #EFEAE0);
}

.bg-video {
  background: linear-gradient(180deg, #EFEAE0, #F7F3EC);
}

/* Animaciones y Efectos Hover */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.dest-card img,
.exp-card img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-card:hover img {
  transform: scale(1.08);
}

.exp-card:hover img {
  transform: scale(1.06);
}

.play-pulse {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 26px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.nav-scrolled {
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px -18px rgba(18, 62, 62, 0.5);
}

/* Barra de desplazamiento personalizada */
.no-scrollbar::-webkit-scrollbar {
  height: 8px;
}

.no-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(31, 90, 90, 0.25);
  border-radius: 99px;
}

/* ==========================================
   VARIABLES GLOBALES & COLORES
   ========================================== */
:root {
  --teal: #1F5A5A;
  --teal-soft: #DFEDED;
  --sage: #507050;
  --sage-soft: #E7EFE6;
  --coral: #E8836F;
  --coral-soft: #F9EBE7;
  --orange-btn: #CB580B;
  --orange-btn-hover: #D6725B;
  --text-dark: #1F5A5A;
  --text-body: #5C5C58;
  --text-quote: #2A2A28;
  --bg-gradient-light: linear-gradient(180deg, #F7F3EC, #EFEAE0);
}

/* ==========================================
   UTILIDADES & TRANSICIONES
   ========================================== */
.transition-delay-100 { transition-delay: 0.1s; }
.transition-delay-200 { transition-delay: 0.2s; }
.transition-delay-300 { transition-delay: 0.3s; }

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 26px; height: 26px; }

/* ==========================================
   ESTILOS GENERALES Y TIPOGRAFÍA
   ========================================== */
.section-title {
  color: var(--text-dark);
  font-size: 44px;
}

.section-subtitle {
  color: var(--text-body);
  font-size: 21px;
  font-weight: 400;
}

.card-title {
  color: var(--text-dark);
  font-size: 21px;
  font-weight: 500;
}

.card-text {
  color: var(--text-body);
  font-size: 17px;
  font-weight: 400;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-section {
  height: calc(100 * min(var(--vh, 1vh), 1vh));
  min-height: 560px;
}

.hero-eyebrow {
  letter-spacing: 0.38rem;
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 700;
}

.hero-title {
  color: #FFFFFF;
  font-size: 56px;
}

.hero-subtitle {
  color: #F2ECE2;
  font-size: 19px;
  font-weight: 400;
}

.hero-btn {
  background: var(--orange-btn) !important;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
}

.hero-scroll-text {
  letter-spacing: 0.25em;
  font-size: 17px;
  color: #FFFFFF;
  font-weight: 400;
}

/* ==========================================
   BENEFITS SECTION
   ========================================== */
.benefit-card {
  background-color: #FFFFFF;
}

.bg-coral-soft { background-color: var(--coral-soft); }
.text-coral { color: var(--coral); }
.bg-sage-soft { background-color: var(--sage-soft); }
.text-sage { color: var(--sage); }
.bg-teal-soft { background-color: var(--teal-soft); }
.text-teal { color: var(--teal); }

/* ==========================================
   DESTINATIONS SECTION
   ========================================== */
.destinations-section {
  background: var(--bg-gradient-light);
}

.dest-card {
  background-color: #FFFFFF;
}

.region-tag {
  letter-spacing: 0.14em;
  font-size: 17px;
  color: var(--coral);
  font-weight: 400;
}

.dest-card-title {
  color: var(--text-dark);
  font-size: 24px;
  font-weight: 500;
}

.price-tag {
  color: var(--coral);
  font-size: 17px;
  font-weight: 700;
}

.dest-cta-btn {
  background-color: var(--coral);
}
.dest-cta-btn:hover {
  background-color: var(--orange-btn-hover);
}

/* ==========================================
   EXPERIENCES SECTION
   ========================================== */
.exp-card {
  background-color: #FFFFFF;
}

.exp-title {
  color: var(--text-dark);
  font-size: 22px;
  font-weight: 500;
}

/* ==========================================
   VIDEO SECTION
   ========================================== */
.video-section {
  background: var(--bg-gradient-light);
}

.play-icon {
  width: 30px;
  height: 30px;
  fill: var(--teal);
  color: var(--teal);
  margin-left: 4px;
}

/* ==========================================
   PODCAST SECTION
   ========================================== */
.podcast-box {
  background-color: var(--teal);
}

.podcast-eyebrow {
  letter-spacing: 0.28em;
  font-size: 17px;
  color: #F6D9CF;
  font-weight: 400;
}

.podcast-title {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 400;
}

.podcast-text {
  color: #E7F1F1;
  font-size: 17px;
  font-weight: 400;
}

.podcast-btn {
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
  background-color: var(--coral-soft);
}

.testi-card {
  background-color: #FFFFFF;
}

.star-rating {
  color: var(--coral);
}

.quote-text {
  color: var(--text-quote);
  font-size: 18px;
  font-weight: 400;
}

.testi-name {
  color: var(--text-dark);
  font-size: 17px;
  font-weight: 600;
}

.testi-dest {
  color: var(--text-dark);
  font-size: 17px;
  font-weight: 400;
}

.text-teal-accent {
  color: var(--teal);
}

/* ==========================================
   GALLERY SECTION
   ========================================== */
.gallery-img-1 { height: 280px; }
.gallery-img-2 { height: 200px; }
.gallery-img-3 { height: 240px; }
.gallery-img-4 { height: 300px; }
.gallery-img-5 { height: 220px; }
.gallery-img-6 { height: 260px; }

/* ==========================================
   FAQ SECTION
   ========================================== */
.faq-section {
  background: var(--bg-gradient-light);
}

.faq-question {
  color: var(--text-dark);
  font-size: 18px;
  font-weight: 400;
}

.faq-chevron {
  color: var(--teal);
}

.faq-answer {
  color: var(--text-body);
  font-size: 17px;
  font-weight: 400;
}