/* ============================================================
   Landing Pages — Rental / Sell / Booking
   Extends style.css (shared brand system). Additive only.
   Beach / sun / sand / trust palette.
   ============================================================ */

/* Force native [hidden] to win over any display:flex/inline-flex/grid
   set by other classes (.btn, .nav-links a, etc.) — required for the
   ES/EN language toggle to actually hide the inactive language blocks. */
[hidden]{display:none !important;}

/* Language switch pill (header) */
.lang-switch{display:flex; border:1px solid rgba(255,255,255,.4); border-radius:20px; overflow:hidden; flex-shrink:0;}
.lang-switch button{background:none; border:none; color:rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.05em; padding:7px 14px; cursor:pointer; font-family:'Jost',sans-serif; transition:all .2s;}

.lang-switch button:not(.active):hover{color:#fff;}
.lang-switch button.active{background:var(--gold); color:var(--navy-deep); font-weight:700;}

/* Story hero (narrative hook) — lighter wash so the photo's natural color reads through */
.story-hero{position:relative; color:#fff; padding:170px 0 110px; isolation:isolate; overflow:hidden;}
.story-hero .hero-bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;}
.story-hero .hero-overlay{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(37,137,184,.16) 0%, rgba(37,137,184,.10) 35%, rgba(20,70,95,.62) 100%);}
.story-hero .container-narrow{
  text-align:left;
  background:linear-gradient(160deg, rgba(6,26,38,.82) 0%, rgba(6,26,38,.70) 100%);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:26px;
  padding:48px 52px;
  max-width:780px;
  box-shadow:0 34px 80px rgba(6,26,38,.55);
}
@media (max-width:640px){
  .story-hero .container-narrow{padding:32px 26px; border-radius:20px;}
}
.story-hero h1{color:#fff; font-size:clamp(2.2rem, 4.6vw, 3.5rem); margin-bottom:20px; text-shadow:0 2px 18px rgba(37,137,184,.35);}
.story-hero .hero-sub{font-family:'Playfair Display', serif; font-style:italic; font-weight:700; color:var(--gold); text-shadow:0 2px 10px rgba(6,26,38,.5); font-size:clamp(1.1rem,2.1vw,1.4rem); margin-bottom:26px; display:block;}
.story-hero p.lead{color:rgba(255,255,255,.94); font-size:1.08rem; max-width:620px; margin-bottom:16px; text-shadow:0 1px 10px rgba(37,137,184,.3);}
.story-hero .hero-actions{margin-top:30px; display:flex; gap:16px; flex-wrap:wrap;}

/* Selectable pricing pillar (Booking tier picker) */
.pillar-select{cursor:pointer; border:2px solid var(--line); transition:all .2s;}
.pillar-select input{position:absolute; opacity:0; pointer-events:none;}
.pillar-select.active{border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-2px);}
.pillar-select .pillar-radio-mark{position:absolute; top:22px; right:22px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;}
.pillar-select.active .pillar-radio-mark{border-color:var(--gold); background:var(--gold);}
.pillar-select.active .pillar-radio-mark::after{content:"✓"; color:#fff; font-size:.7rem; font-weight:700;}
.pillar-select.dark .pillar-radio-mark{border-color:rgba(255,255,255,.4);}

/* ===================== PROOF / TESTIMONIAL CAROUSEL ===================== */
.proof-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 8% 12%, rgba(245,228,46,.20), transparent 70%),
    radial-gradient(ellipse 55% 50% at 92% 8%, rgba(63,191,176,.24), transparent 70%),
    radial-gradient(ellipse 60% 55% at 20% 95%, rgba(249,242,122,.18), transparent 70%),
    radial-gradient(ellipse 65% 60% at 95% 92%, rgba(99,192,232,.28), transparent 70%),
    var(--navy);
}

.testi-carousel-wrap{position:relative;}
.testi-carousel{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6px 18px; margin:0 -6px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.testi-carousel::-webkit-scrollbar{display:none;}
.testi-carousel .testi-card{
  scroll-snap-align:start; flex:0 0 320px; min-width:280px;
}
@media (max-width:640px){
  .testi-carousel .testi-card{flex-basis:86%;}
}

.testi-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 20px 44px rgba(37,137,184,.30);
}
.testi-card .who{display:flex; align-items:center; gap:14px; margin-top:6px;}
.testi-avatar{width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); flex-shrink:0; box-shadow:0 6px 16px rgba(37,137,184,.35);}
.testi-card .who-text{display:flex; flex-direction:column;}
.testi-card .who-text cite{margin-top:0;}

.carousel-nav{display:flex; gap:12px; justify-content:center; margin-top:8px;}
.carousel-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.carousel-arrow:hover{background:var(--gold); border-color:var(--gold);}

/* ===================== GARANTIA / REVERSION DE RIESGO =====================
   Sustituye a los testimonios: en vez de pedir confianza, quita el riesgo. */
.guarantee-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
  max-width:940px; margin:0 auto;
}
@media (max-width:760px){
  .guarantee-grid{grid-template-columns:1fr;}
}
.g-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 20px 44px rgba(37,137,184,.30);
  border-radius:var(--radius);
  padding:30px 28px 28px;
}
.g-card .g-check{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--gold); color:var(--navy-deep);
  font-size:1rem; font-weight:700; margin-bottom:16px;
}
.g-card h3{color:#fff; font-size:1.1rem; line-height:1.35; margin-bottom:10px;}
.g-card p{color:rgba(255,255,255,.82); font-size:.94rem; line-height:1.6; margin:0;}

/* ===================== FAQ accordion tweaks for objections ===================== */
.faq-list.on-light .faq-q{color:var(--navy-deep);}
.faq-list .faq-q{gap:20px;}

/* ===================== PROPERTY / DESTINATION GALLERY CAROUSEL ===================== */
.property-carousel{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6px 18px; margin:0 -6px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.property-carousel::-webkit-scrollbar{display:none;}
.property-carousel .media-card{scroll-snap-align:start; flex:0 0 340px; min-width:280px; height:260px;}
@media (max-width:640px){
  .property-carousel .media-card{flex-basis:86%;}
}

/* Carousel nav arrows on light backgrounds (property gallery sits on cream, not navy) */
.carousel-nav.on-light .carousel-arrow{border-color:var(--line); background:var(--paper); color:var(--navy-deep);}
.carousel-nav.on-light .carousel-arrow:hover{background:var(--gold); border-color:var(--gold); color:#fff;}

/* Section eyebrows on white/cream backgrounds — TRUE bright lemon yellow
   text on a dark pill, so the yellow reads pure and vivid (plain yellow
   text directly on white always looks washed out, no matter the weight). */
section:not(.story-hero):not(.on-navy) .eyebrow{
  display:inline-block;
  background:var(--navy-deep);
  color:var(--gold);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.16em;
  padding:9px 20px;
  border-radius:20px;
  margin-bottom:18px;
}

/* Destination pill on property cards — solid backdrop so it stays legible
   over ANY photo, regardless of the image's own colors/brightness. */
.media-card .media-info{display:flex; align-items:flex-end;}
.dest-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(15,45,64,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; padding:10px 18px; border-radius:30px;
  font-family:'Playfair Display', serif; font-size:1.05rem; font-weight:600;
  border:1px solid rgba(255,255,255,.25);
}