:root {
  --teal: #236969;
  --teal-tint: #ECF9F9;
  --teal-shade: #103737;
  --white: #FFFFFF;
  /* Shared "Apple-style" hover curve: smooth, slightly springy deceleration
     instead of linear/ease. Used on every hoverable element on the page. */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', sans-serif;
  color: var(--teal-shade);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Scroll-reveal (motivated: draws attention down the page as sections enter view) */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(35, 105, 105, 0.14);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Flex + absolutely-centered nav, not grid's 1fr/auto/1fr: the brand block
   (logo + tagline) and the button are very different widths, so equal-width
   grid tracks left equal "track space" on both sides of the nav but very
   unequal visible gaps (the nav read as hugging the wider button). Centering
   the nav on the container's true midpoint fixes that regardless of how
   wide the brand or button end up being. */
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  height: 64px;
  width: auto;
  border-radius: 6px;
  transition: transform 0.4s var(--ease-apple);
}

.brand:hover .brand-mark {
  transform: scale(1.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.brand-tagline {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--teal-shade);
  opacity: 0.65;
  line-height: 1.3;
  max-width: 24ch;
}

@media (max-width: 640px) {
  .brand-tagline {
    display: none;
  }
}

/* Left in normal flex flow (not centered via absolute positioning): with
   justify-content:space-between on 3 items, the browser splits leftover
   space into two equal gaps either side of nav automatically, regardless of
   how wide the logo or the button end up being. Centering nav on the
   container's total width instead (position:absolute + translateX(-50%))
   looks mathematically centered but visually wrong here, since the button
   is ~50px wider than the logo block. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.site-nav a {
  color: var(--teal-shade);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.75;
  transition: opacity 0.35s var(--ease-apple);
}

.site-nav a:hover {
  opacity: 1;
}

/* 960px, not 860px: with 4 nav links the row needs ~885px before it fits
   comfortably, so anything below that up to ~950px was overflowing and
   wrapping the header onto two lines instead of just hiding the nav. */
@media (max-width: 960px) {
  .site-nav {
    display: none;
  }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: 64px 0 96px;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px circle at 12% 15%, rgba(35, 105, 105, 0.12), transparent 60%),
    radial-gradient(480px circle at 92% 85%, rgba(35, 105, 105, 0.09), transparent 60%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
  }
}

.hero-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--teal);
  margin-bottom: 20px;
}

.hero-headline {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--teal-shade);
  margin-bottom: 40px;
}

.cta-button {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border: none;
  padding: 16px 32px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
  box-shadow: 0 8px 24px rgba(35, 105, 105, 0.25);
}

.cta-button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 32px rgba(35, 105, 105, 0.32);
}

.cta-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.15s;
}

/* Must come after the base .cta-button rule above: equal specificity (single
   class each) means source order decides the winner, and this needs to win
   to shrink the header's button. It previously sat before .cta-button in the
   file and was silently losing every property it tried to override. */
.cta-button--nav {
  padding: 11px 22px;
  font-size: 15px;
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Below ~480px the logo + full-size button no longer both fit on one row
   (found while auditing for horizontal overflow before deploy) — shrink the
   button rather than let it push past the viewport edge. */
@media (max-width: 480px) {
  .header-inner {
    gap: 10px;
  }
  .cta-button--nav {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* Hero media: large photo filling its column, not a small centered box */
.hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rounded frame + soft elevated shadow so the photo lifts off the section
   background; the hover zoom is the same restrained, physics-y easing used
   for every other interactive element on the page. */
.hero-media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  object-fit: cover;
  will-change: transform;
  box-shadow: 0 24px 48px -12px rgba(16, 55, 55, 0.32), 0 8px 20px rgba(16, 55, 55, 0.14);
  transition: transform 0.5s var(--ease-apple), box-shadow 0.5s var(--ease-apple);
}

.hero-media img:hover {
  transform: scale(1.015);
  box-shadow: 0 32px 64px -12px rgba(16, 55, 55, 0.38), 0 10px 24px rgba(16, 55, 55, 0.16);
}

/* Marquee: slim ticker strip between Hero and the entry-point section, quiet
   brand-toned transition (cream on the outgoing white, teal text) rather
   than a bright "sale banner" ticker. Two identical .marquee-group runs
   placed side by side and translated by exactly -50% is what makes the loop
   seamless - the moment the first group scrolls fully offscreen, the second
   is in the exact position the first started in. */
.marquee {
  overflow: hidden;
  background: #FCF8F8;
  border-top: 1px solid rgba(35, 105, 105, 0.12);
  border-bottom: 1px solid rgba(35, 105, 105, 0.12);
  padding: 16px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-shade);
  white-space: nowrap;
  padding: 0 20px;
}

.marquee-sep {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--teal);
  opacity: 0.45;
}

.marquee-sep svg {
  width: 14px;
  height: 14px;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* Section 2: Esta experiencia es para ti si... */
.qualify {
  position: relative;
  overflow: hidden;
  padding: 64px 0 96px;
  background: var(--teal);
}

.qualify-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px circle at 85% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(520px circle at 5% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
}

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

/* Kicker: small tracked uppercase label ABOVE the title (Aesop's pattern -
   editorial hierarchy signal, not a subtitle-below-the-fold look). Sits above
   the title rather than under it, and is deliberately understated (one
   accent color, used sparingly) rather than another loud element. */
.numbered-section-kicker {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.qualify .numbered-section-kicker {
  color: var(--white);
  opacity: 0.72;
}

/* Title:subtitle relationship follows Aman Resorts' hierarchy (checked via
   headless Chrome on rosewoodhotels.com/aman.com-family sites): the headline
   dominates and the support text is markedly smaller - roughly a 1:3 ratio,
   not the near-even sizing of a generic two-line hero stack - with tight
   ~1.4 line-height (never the airy double-spaced treatment of a caption)
   and a lighter weight so it visibly recedes behind the display headline. */
.numbered-section-subtitle {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-top: 16px;
}

.qualify .numbered-section-subtitle {
  color: var(--white);
  opacity: 0.82;
}

.qualify .container {
  position: relative;
  z-index: 1;
}

/* Numbered section head: centered uppercase title, shared by sections 2 and 3 */
.numbered-section-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}

.numbered-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal-shade);
  line-height: 1.1;
}

/* ============================================================
   Bento grid system: photo and text integrated in the same tile.
   Shared skeleton (.bento-grid, .bento-tile) but each section gets
   its own tile-shape and photo-position modifiers so no two
   sections repeat the same composition.
   ============================================================ */
.bento-grid {
  display: grid;
  gap: 20px;
}

.bento-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
}

.bento-tile:hover {
  transform: scale(1.02);
}

.bento-photo {
  width: 100%;
  height: 100%;
}

.bento-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Sections 2 and 3: same "big real photo + card cluster" pattern as
   section 6's pricing grid (framed photo alongside named, iconed cards).
   Section 2 puts the photo on the right (cards read first, left to right);
   section 3 mirrors it with the photo on the left, so the two sections
   share one system but never look like the same block repeated. --- */
/* Asymmetric, section-6-style composition: one column is 4 stacked text
   cards; the other is the photo (spanning exactly 2 card-rows) with 2 more
   text cards stacked below it. grid-auto-flow:column fills column 1 top to
   bottom before wrapping to column 2, which is what produces this split
   without manually placing every child. This is the base shared by .moments;
   .qualify overrides it below into a simpler two-column split now that its
   cards carry no body copy. */
.occasion-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 16px;
  align-items: stretch;
}

.occasion-split .occasion-photo {
  grid-row: span 2;
}

.occasion-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 220px;
}

/* Absolutely positioned so the image's own intrinsic aspect ratio never
   feeds back into the grid's auto row-sizing (it would otherwise inflate
   the two rows it spans well past what the adjacent text cards need). */
.occasion-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .occasion-split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .occasion-split .occasion-photo {
    grid-row: auto;
    min-height: 320px;
  }
}

/* Section 2 override: cards now hold only an icon + title (no body copy),
   so the asymmetric 4-row bento above would leave them stretched into tall,
   mostly-empty boxes. Two-column split instead - but per Aman Resorts'
   grid language (checked live: their layouts never split a photo and its
   companion content as equal boxes), the photo column is deliberately wider
   than the card column and stretches to match the cards block's own height
   exactly (align-items: stretch, no guessed min-height) rather than sitting
   as "one more tile" in an even grid. */
.qualify .occasion-split {
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: none;
  grid-auto-flow: row;
  gap: 48px;
  align-items: stretch;
}

.qualify .occasion-split .occasion-photo {
  grid-row: auto;
  height: 100%;
  /* Slight bleed toward the section's edge (Aman's photo column reads as
     protagonist, not a boxed-in tile) - pulls past the container's own
     right padding on wide viewports without escaping the section's own
     overflow:hidden. */
  margin-right: -24px;
  /* The one full-bleed photo in this section is its visual anchor, so it
     gets the same elevated-shadow treatment as the highlighted pricing card
     and the modal dialog, rather than the flat bento-tile shadow every other
     photo on the page uses - it should read as the section's focal point. */
  box-shadow: 0 32px 64px -12px rgba(16, 55, 55, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.06);
}

.occasion-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  align-content: center;
  gap: 20px;
}

@media (max-width: 900px) {
  .qualify .occasion-split {
    grid-template-columns: 1fr;
  }
  .qualify .occasion-split .occasion-photo {
    order: -1;
    height: auto;
    min-height: 260px;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .occasion-cards {
    grid-template-columns: 1fr;
  }
}

.qualify-card {
  background: var(--white);
  border: 1px solid rgba(35, 105, 105, 0.16);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple), border-color 0.4s var(--ease-apple);
}

/* Boutique-hospitality hover language: border tints to brand green + a
   quiet shadow lift, never a scale/bounce effect. */
.qualify-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 55, 55, 0.1);
}

.qualify-card:hover .qualify-card-emoji {
  transform: scale(1.06);
}

.qualify-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Section 2 cards are links (clicking scrolls to the matching block in
   "Lo que vas a vivir"); shorter icon+title-only content, so they run more
   compact than the article cards in .moments. Padding and head-gap sized to
   give the icon badge (below) real presence instead of a cramped strip. */
.qualify .qualify-card {
  /* Boutique-hospitality card language: generous internal padding so the
     label has room to breathe inside the hairline border, instead of a
     tight SaaS-pricing-card feel. */
  padding: 36px 32px;
  /* Keeps all 6 chips the same height even though "Amigos y familia" wraps
     to two lines while the rest sit on one - without this the grid reads
     as one tall row followed by five shorter ones instead of a uniform set. */
  min-height: 136px;
}

/* Section 2 only: line icons instead of emoji glyphs. Emoji render
   inconsistently across platforms (flat here on Windows) and clash with the
   refined serif/teal system everywhere else on the page - a stroked icon in
   brand teal reads as one considered system instead of six unrelated glyphs. */
.qualify .qualify-card-emoji svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}

.qualify-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.qualify .qualify-card-head {
  margin-bottom: 0;
}

/* Icon badge: every emoji glyph on the site (occasion cards, "Lo que vas a
   vivir" cards, journey-modal steps) sits in this same circular badge rather
   than floating as a bare character, so icon treatment reads as one
   consistent system instead of a loose symbol next to text. */
.qualify-card-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--teal-tint) 0%, var(--white) 100%);
  border: 1px solid rgba(35, 105, 105, 0.14);
  box-shadow: 0 6px 14px rgba(16, 55, 55, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.4s var(--ease-apple);
}

.qualify-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-shade);
}

.qualify-card-desc {
  font-size: 15px;
  line-height: 1.45;
  color: var(--teal-shade);
  opacity: 0.8;
}

/* Used in "Lo que vas a vivir" cards to list concrete inclusions (bebida,
   foto, certificado...) separately from the intro/close prose sentences. */
.card-bullets {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--teal-shade);
  opacity: 0.8;
}

.card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* Hidden from the page on direct instruction: the guided journey modal
   (opened from #para-ti) now carries this content instead, so it would be
   redundant here. Left in the DOM (not deleted) because the modal's
   buildStep1/2/3 in script.js clone these sections' children at runtime -
   hiding via display:none does not remove them from the DOM or from
   querySelectorAll/cloneNode, so the modal keeps working unchanged. */
.moments,
.booking,
.pricing {
  display: none;
}

/* Section 3: Lo que vas a vivir */
.moments {
  overflow: hidden;
  padding: 64px 0 96px;
  background: var(--white);
}

/* Anchor targets for the clickable titles in section 2's occasion-cards;
   offsets the jump so the sticky header doesn't cover the top of the card. */
.moments .qualify-card {
  scroll-margin-top: 110px;
}

/* Quiet in-page next-step link for someone browsing the 6-card grid
   normally (not through the modal journey, which has its own nav buttons). */
.card-next-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  transition: gap 0.3s var(--ease-apple);
}

.card-next-step::after {
  content: '\2192';
}

.card-next-step:hover {
  gap: 9px;
}

/* Section: Booking info (horarios, ubicación) — its own section now, separate
   from the pricing grid and the final CTA. */
.booking {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  padding: 64px 0 72px;
}

.booking-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px circle at 85% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(520px circle at 5% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
}

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

.booking-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Outlined variant of .cta-button for optional next-step links that sit
   directly on the teal section background (solid white .cta-button would be
   too heavy for a secondary action here). */
.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 13px 28px;
  transition: background 0.3s var(--ease-apple), transform 0.3s var(--ease-apple);
}

.ghost-button::after {
  content: '\2192';
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.booking .numbered-section-head {
  margin-bottom: 0;
}

/* Small-caps tracked label: gives booking-critical data (horarios, ubicación) its own
   visual identity instead of reading as an unstyled afterthought */
.detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal-shade);
  opacity: 0.6;
  margin-bottom: 12px;
}

.detail-label--spaced {
  margin-top: 16px;
}

.detail-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--teal);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.detail-icon--calendar {
  -webkit-mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/calendar-blank.svg');
  mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/calendar-blank.svg');
}

.detail-icon--clock {
  -webkit-mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/clock.svg');
  mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/clock.svg');
}

.detail-icon--pin {
  -webkit-mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/map-pin.svg');
  mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/map-pin.svg');
}

/* Same icon system as the two above (Días disponibles / Horarios / Ubicación),
   reused for the new terrarium-size step so it carries the identical
   treatment already established in the horarios/ubicación modal step. */
.detail-icon--ruler {
  -webkit-mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/ruler.svg');
  mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/ruler.svg');
}

.detail-icon--package {
  -webkit-mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/package.svg');
  mask-image: url('https://unpkg.com/@phosphor-icons/core@2.1.1/assets/regular/package.svg');
}

/* Balances the location column against the calendar+schedule column, which
   naturally carries more text weight (two stacked label/content blocks) */
.detail-icon-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.detail-icon-badge-icon {
  width: 34px;
  height: 34px;
  opacity: 0.9;
}

/* Bento: horarios + ubicación integrated into one tile, side by side, instead of two
   loose centered blocks stacked with dead air between them. Sized and lifted
   (generous padding + elevated shadow) so this card reads as the section's
   main event, not a footnote beneath the headline. */
.bento-details {
  display: flex;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(35, 105, 105, 0.16);
  border-radius: 24px;
  padding: 44px 48px;
  gap: 40px;
  box-shadow: 0 32px 64px -16px rgba(16, 55, 55, 0.38), 0 10px 24px rgba(16, 55, 55, 0.16);
}

.bento-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bento-details-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(35, 105, 105, 0.16);
}

@media (max-width: 640px) {
  .bento-details {
    flex-direction: column;
    gap: 20px;
  }
  .bento-details-divider {
    width: 100%;
    height: 1px;
  }
}

.closing-days {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--teal-shade);
}

.closing-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.schedule-chip {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 11px 24px;
}

.closing-location {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--teal-shade);
  opacity: 0.95;
}

/* Section: Pricing — its own white section, separate from booking info and
   the final CTA. Cards flip from the old dark-glass treatment to opaque
   white/bordered, matching the site's white-card language. */
.pricing {
  background: var(--white);
  padding: 64px 0 96px;
}

.pricing-inner {
  text-align: center;
}

.pricing-title-main {
  margin-bottom: 64px;
}

/* Pricing: real docs/contenido-base.md figures, presented as grouped cards (not a spec table) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

/* Bento: the panoramic photo is one tile among the pricing tiles (2x2), not a banner above the grid */
.pricing-grid--plans {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 20px;
}

.pricing-grid--plans .pricing-card {
  grid-column: span 2;
}

.bento-tile--photo-2x2 {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.bento-tile--photo-2x2 .bento-photo {
  width: 100%;
  height: 100%;
}

.pricing-card {
  background: var(--white);
  border: 1px solid rgba(35, 105, 105, 0.16);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 55, 55, 0.1);
}

/* Marks the plan matching whatever occasion the visitor picked back in
   section 2, when they arrive here through the guided "Ver precios" step.
   Tinted background makes it read as "the one" at a glance among five plain
   white neighbors; the bigger price and its own CTA button (below) carry
   the rest of the emphasis. */
.pricing-card.is-highlighted {
  position: relative;
  background: var(--teal-tint);
  border: 2px solid var(--teal);
  box-shadow: 0 20px 44px rgba(16, 55, 55, 0.18);
}

.pricing-card.is-highlighted .pricing-price {
  font-size: 34px;
}

.pricing-card.is-highlighted::before {
  content: 'Tu plan';
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--teal);
  color: var(--white);
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Per-card reserve link: a quiet text link in the normal grid (six of these
   would be noisy as real buttons), promoted to a solid CTA once its card is
   the highlighted match — the moment this action actually matters. */
.pricing-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  transition: gap 0.3s var(--ease-apple);
}

.pricing-card-cta::after {
  content: '\2192';
}

.pricing-card-cta:hover {
  gap: 9px;
}

.pricing-card.is-highlighted .pricing-card-cta {
  margin-top: 24px;
  background: var(--teal);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(35, 105, 105, 0.28);
}

.pricing-cta {
  margin-top: 48px;
}

/* Staggered reveal (1-indexed; child 1 is the photo tile, pricing cards are children 2-7) */
.pricing-grid--plans > *:nth-child(1) { transition-delay: 0ms; }
.pricing-grid--plans > *:nth-child(2) { transition-delay: 80ms; }
.pricing-grid--plans > *:nth-child(3) { transition-delay: 160ms; }
.pricing-grid--plans > *:nth-child(4) { transition-delay: 240ms; }
.pricing-grid--plans > *:nth-child(5) { transition-delay: 320ms; }
.pricing-grid--plans > *:nth-child(6) { transition-delay: 400ms; }
.pricing-grid--plans > *:nth-child(7) { transition-delay: 480ms; }

.pricing-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-emoji {
  font-size: 24px;
  line-height: 1;
}

.pricing-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-shade);
  opacity: 0.85;
}

/* Price is the first thing a buyer scans: largest, brightest element in the card */
.pricing-price {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--teal);
}

.pricing-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--teal-shade);
  opacity: 0.75;
}

@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid--plans .pricing-card,
  .bento-tile--photo-2x2 {
    grid-column: span 2;
  }
  .bento-tile--photo-2x2 {
    grid-row: span 1;
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  .pricing-grid--plans {
    grid-template-columns: 1fr;
  }
  .pricing-grid--plans .pricing-card,
  .bento-tile--photo-2x2 {
    grid-column: span 1;
  }
}

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

/* Section: FAQ — independent section (not nested in pricing), continuing
   the white/teal alternation. Native <details>/<summary> accordion, no JS:
   the grid-template-rows 0fr/1fr trick animates the disclosure smoothly
   without max-height (which would need a fixed guess at content height). */
.faq {
  position: relative;
  overflow: hidden;
  background: #FCF8F8;
  padding: 64px 0 96px;
}

.faq-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px circle at 85% 0%, rgba(35, 105, 105, 0.10), transparent 60%),
    radial-gradient(520px circle at 5% 100%, rgba(35, 105, 105, 0.06), transparent 60%);
}

.faq .container {
  position: relative;
  z-index: 1;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  background: var(--white);
  border: 1px solid rgba(35, 105, 105, 0.16);
  border-radius: 20px;
  padding: 0 28px;
  transition: box-shadow 0.4s var(--ease-apple);
}

.faq-item[open] {
  box-shadow: 0 18px 36px rgba(16, 55, 55, 0.1);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--teal-shade);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-apple);
}

.faq-item[open] summary svg {
  transform: rotate(45deg);
}

.faq-body {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease-apple), opacity 0.35s var(--ease-apple);
}

.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

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

.faq-body-inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 24px;
}

.faq-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--teal-shade);
  opacity: 0.75;
  max-width: 64ch;
}

/* Section: final CTA — mirrors the Hero's structure (eyebrow + headline +
   button, framed photo alongside) so the page opens and closes on the same
   visual beat. Real scarcity facts (fixed weekend schedule, capped group
   size) replace the hero's subheadline slot. White background continues the
   alternation now that the FAQ section (teal) sits between this and pricing. */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: 96px 0;
}

.cta-final-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .cta-final-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
  }
}

.cta-final-eyebrow {
  color: var(--teal);
  opacity: 1;
}

.cta-final-title {
  color: var(--teal-shade);
}

.cta-final-lede {
  max-width: 480px;
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--teal-shade);
  opacity: 0.8;
}

.cta-final-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px circle at 50% 0%, rgba(35, 105, 105, 0.06), transparent 60%);
}

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

/* ============================================================
   Guided journey modal — opened by clicking an occasion card in
   section 2. Walks the visitor through 4 steps for that one plan
   (experience, horarios/ubicación, precio, reserva) instead of
   scrolling them through the page. Entrance ~320ms on the site's
   signature ease; step transitions are asymmetric (exit 180ms,
   faster than the 280ms entrance) so back/forth never feels
   sluggish. Everything collapses to an instant swap under
   prefers-reduced-motion.
   ============================================================ */
.journey-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

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

.journey-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 55, 55, 0.4);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-apple);
}

.journey-modal.is-open .journey-modal-backdrop {
  opacity: 1;
}

/* No glassmorphism: a flat, fully opaque bone/ivory card (#FCF8F8). This
   tone is not in marca-visual.md's default teal+white palette - it is added
   here on a direct, explicit instruction, which the
   doc's own override rule allows ("una instrucción directa tiene
   prioridad"). No blur, no alpha, so there is nothing behind the panel to
   bleed through and read as dirty/greenish, and no backdrop-filter for
   Chromium to use as a reason to drop subpixel text smoothing.
   .journey-modal-scroll is the inner content box that actually scrolls when
   a step's content runs tall; the dialog itself never scrolls, so the close
   button (a sibling, positioned absolute) always sits above it via z-index -
   without that, both are equally "z-index:auto" positioned elements and the
   later one in DOM order (the scroll box) wins hit-testing over the earlier
   one (the close button), which is what made the close button unclickable. */
.journey-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: min(720px, 90vh);
  overflow: hidden;
  border-radius: 28px;
  background: #FCF8F8;
  border: 1px solid rgba(35, 105, 105, 0.14);
  box-shadow:
    0 40px 80px -20px rgba(16, 55, 55, 0.45),
    0 12px 32px rgba(16, 55, 55, 0.2);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.32s var(--ease-apple), transform 0.32s var(--ease-apple);
}

.journey-modal.is-open .journey-modal-dialog {
  opacity: 1;
  /* "none" rather than translateY(0) scale(1): once settled, the box should
     not carry a transform at all, so its text never sits on a GPU-promoted
     layer at rest. */
  transform: none;
}

.journey-modal-scroll {
  position: relative;
  max-height: min(720px, 90vh);
  overflow-y: auto;
  padding: 44px;
}

body.journey-modal-open {
  overflow: hidden;
}

.journey-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--teal-shade);
  opacity: 0.7;
  background: rgba(35, 105, 105, 0.08);
  border: 1px solid rgba(35, 105, 105, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.25s var(--ease-apple), transform 0.25s var(--ease-apple), background 0.25s var(--ease-apple);
}

.journey-modal-close:hover {
  opacity: 1;
  background: rgba(35, 105, 105, 0.14);
  transform: scale(1.06);
}

.journey-modal-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.journey-step-dots {
  display: flex;
  gap: 8px;
}

.journey-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(35, 105, 105, 0.2);
  transition: background 0.3s var(--ease-apple), transform 0.3s var(--ease-apple);
}

.journey-step-dot.is-done {
  background: var(--teal);
}

.journey-step-dot.is-active {
  background: var(--teal);
  transform: scale(1.35);
}

.journey-modal-stepcount {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  opacity: 0.8;
}

.journey-modal-body {
  min-height: 200px;
  transition: opacity 0.28s var(--ease-apple), transform 0.28s var(--ease-apple);
}

.journey-modal-body.is-leaving {
  opacity: 0;
  transform: translateX(-10px);
  transition-duration: 0.18s;
}

.journey-modal-body.is-entering {
  opacity: 0;
  transform: translateX(10px);
}

/* Step 1 clones a "Lo que vas a vivir" card verbatim (head, intro line,
   bullet list, closing line). Give each of those four pieces real air and a
   clear reading order instead of the tight default spacing that card uses
   inline in the page grid. */
.journey-modal-body .qualify-card-head {
  flex-direction: column;
  text-align: center;
  gap: 14px;
  margin-bottom: 22px;
}

.journey-modal-body .qualify-card-emoji {
  width: 56px;
  height: 56px;
  font-size: 26px;
}

.journey-modal-body .qualify-card-title {
  font-size: 30px;
  letter-spacing: 0.04em;
}

.journey-modal-body .qualify-card-desc {
  margin-top: 16px;
}

.journey-modal-body .card-bullets {
  margin: 16px 0;
  gap: 10px;
}

.journey-step-schedule {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* New step between the plan choice (1) and horarios/ubicación (now 3):
   two real terrarium photos, then the two data points (tamaño, entrega)
   using the exact same .detail-label / .detail-icon system already
   established for Días disponibles / Horarios / Ubicación, so this step
   reads as part of the same visual language, not a new pattern. */
.journey-step-terrario-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.journey-step-terrario-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.journey-step-terrario-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journey-step-terrario-details {
  display: flex;
  flex-direction: column;
}

.journey-terrario-value {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-shade);
}

/* Parejas-only step 1: instead of the bullet list every other occasion
   clones, this flow needs a plan pick between the two Pareja pricing
   variants before it can continue - the choice decides which pricing card
   gets highlighted in step 3. */
.journey-plan-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.journey-plan-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 20px 22px;
  background: var(--white);
  color: inherit;
  font-family: inherit;
  text-align: left;
  border: 1.5px solid rgba(35, 105, 105, 0.2);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-apple), background 0.3s var(--ease-apple), transform 0.3s var(--ease-apple);
}

.journey-plan-btn:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.journey-plan-btn.is-selected {
  border-color: var(--teal);
  background: var(--teal-tint);
}

.journey-plan-btn-head {
  display: flex;
}

.journey-plan-btn-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal-shade);
}

.journey-plan-connector {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--teal-shade);
  margin: 4px 0 2px;
}

.journey-plan-btn-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--teal-shade);
  opacity: 0.75;
}

.journey-plan-btn .card-bullets {
  margin: 4px 0 0;
}

.journey-plan-btn .card-bullets li {
  font-size: 14px;
}

.journey-step-pricing {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Same circular icon-badge language as modal 2's Ubicación badge
   (.detail-icon-badge: circle, teal-tint fill, centered icon) - sized to sit
   inline in the pricing card's head row instead of standing alone. */
.journey-price-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-tint);
}

.journey-price-icon-badge svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}

/* The 50% deposit note is the last thing a visitor reads before reserving -
   it needs to read as relevant information, not fine print, so it gets the
   same badge + bold-text treatment as the rest of this step instead of a
   quiet centered caption. */
.journey-price-note {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: var(--teal-tint);
  border: 1px solid rgba(35, 105, 105, 0.18);
  border-radius: 16px;
  padding: 16px 20px;
}

.journey-price-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
}

.journey-price-note-icon svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.journey-price-note-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--teal-shade);
}

.journey-step-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--teal-shade);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.journey-step-title--centered {
  justify-content: center;
}

.journey-step4 {
  text-align: center;
}

/* The step-4 photo: the same face used on the page's final reserve CTA,
   sized to actually register as a portrait rather than a small badge, since
   this is the one step where showing a real person earns its place. */
.journey-step4-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(16, 55, 55, 0.22);
}

.journey-step4-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journey-step4-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--teal);
  margin-bottom: 12px;
}

.journey-step4-cta {
  margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .journey-modal-backdrop,
  .journey-modal-dialog,
  .journey-step-dot,
  .journey-modal-body {
    transition: none !important;
  }
}

.journey-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.journey-modal-back {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--teal);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 4px;
  transition: opacity 0.25s var(--ease-apple);
}

.journey-modal-back:hover {
  opacity: 0.7;
}

.journey-modal-next {
  margin-left: auto;
}

@media (max-width: 560px) {
  .journey-modal {
    padding: 12px;
  }
  .journey-modal-dialog {
    border-radius: 22px;
  }
  .journey-modal-scroll {
    padding: 32px 24px;
  }
}