/* ===== Design tokens ===== */
:root {
  --teal-joya: #1B5366;
  --teal-joya-dark: #123844;
  --dorado-rico: #C8B273;
  --gold-highlight: #FBEBC4;
  --gold-mid: #C99A3E;
  --gold-deep: #5C3A14;
  --amatista: #3F2A47;
  --amatista-deep: #2A1B30;
  --hueso: #F3EDE3;
  --white: #FFFFFF;

  --text-on-light: #1B3038;
  --text-on-light-muted: #4C6570;
  --text-on-dark: #F3EDE3;
  --text-on-dark-muted: #C7BAC9;

  --font-display: "Cormorant Garamond", serif;
  --font-logo: "Fraunces", serif;
  --font-body: "Work Sans", sans-serif;

  --max-width: 1180px;
  --radius: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* Generic "fade + rise" reveal for headings/paragraphs: hidden until an
   IntersectionObserver (main.js) adds .is-visible the first time each
   element scrolls into view. data-reveal-group elements stagger via
   nth-child delays instead of all firing at once. */
.reveal-text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.reveal-text.is-visible { opacity: 1; transform: none; }
[data-reveal-group] > .reveal-text:nth-child(1) { transition-delay: 0s; }
[data-reveal-group] > .reveal-text:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group] > .reveal-text:nth-child(3) { transition-delay: 0.24s; }
[data-reveal-group] > .reveal-text:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-text { opacity: 1; transform: none; transition: none; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-on-light);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  padding-top: 6.5rem;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0; line-height: 1.6; }
:focus-visible { outline: 2px solid var(--dorado-rico); outline-offset: 2px; }

/* Hidden until a keyboard user tabs to it — jumps straight past the nav. */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--amatista); color: var(--white);
  padding: 0.8rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

@media (max-width: 860px) {
  body { padding-top: 5.5rem; }
}

/* ===== Hybrid nav: floating pill in landscape, bottom tab bar in portrait ===== */
.bottom-nav, .bottom-nav-more-overlay { display: none; }

@media (orientation: portrait) {
  .site-header { display: none; }
  body { padding-top: 0; }
  /* Reserve clearance for the fixed bottom tab bar on the footer itself
     (not body) so the reserved space renders in the footer's own dark
     background instead of showing the page's cream background as a
     mismatched rectangle below the footer. */
  .site-footer { padding-bottom: 6rem; }

  .bottom-nav {
    display: flex;
    position: fixed; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 100;
    width: max-content;
    gap: 0.25rem;
    /* Same fix as .site-header.is-compact: at 0.38 alpha, this pill floats
       over light "hueso" sections just as often as dark photos and the
       gold logo icon nearly disappeared. 0.58 still clears the 4.5:1 AA
       contrast minimum for white text (~4.8:1 even over plain cream) while
       reading noticeably more like glass than 0.68 did. */
    background: rgba(32, 20, 36, 0.58);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(243, 237, 227, 0.18);
    border-radius: 999px;
    padding: 0.5rem 0.6rem;
    align-items: center;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15),
      0 12px 30px rgba(16, 8, 18, 0.3);
    /* Held back off-screen until the visitor's first tap, so the opening
       moment is just the full-bleed photo with nothing competing for
       attention — see the .is-revealed toggle in main.js. */
    opacity: 0;
    transform: translateX(-50%) translateY(24px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .bottom-nav.is-revealed {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav { opacity: 1; transform: translateX(-50%); pointer-events: auto; transition: none; }
    .bottom-nav-indicator { transition: none; }
  }
  /* Elastic "liquid" active indicator (WhatsApp-style tab bar) — a pill
     that JS repositions/resizes under whichever icon is active, with left
     and width easing at slightly different speeds so it briefly stretches
     like it's made of gum mid-transition instead of just sliding rigidly. */
  .bottom-nav-indicator {
    position: absolute; top: 50%; margin-top: -22px; height: 44px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
  }
  .bottom-nav-indicator.is-active { opacity: 1; }
  .bottom-nav-indicator.is-jumping { transition: none; }
  .bottom-nav-item {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    color: var(--text-on-dark-muted);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .bottom-nav-item span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .bottom-nav-item svg { width: 21px; height: 21px; }
  .bottom-nav-home img { height: 26px; width: 26px; display: block; }
  .bottom-nav-item:hover, .bottom-nav-item:active { color: var(--white); background: rgba(255,255,255,0.1); }
  .bottom-nav-item.is-current { color: var(--white); }
  .bottom-nav-cta {
    width: 50px; height: 50px;
    color: var(--amatista-deep);
    background: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-mid) 45%, var(--gold-highlight) 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
  .bottom-nav-cta:hover { filter: brightness(1.08); background: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-mid) 45%, var(--gold-highlight) 100%); }

  .bottom-nav-more-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 99;
    background: rgba(20, 12, 22, 0.55);
  }
  .bottom-nav-more-overlay[hidden] { display: none; }
  .bottom-nav-more-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--amatista-deep);
    border-top-left-radius: 1.4rem; border-top-right-radius: 1.4rem;
    /* Extra bottom padding so the last link (language switch) always
       clears the floating pill nav sitting on top of this sheet,
       instead of being cropped underneath it. */
    padding: 0.8rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  }
  .bottom-nav-more-handle { width: 36px; height: 4px; border-radius: 999px; background: rgba(243,237,227,0.3); margin: 0.4rem auto 1rem; }
  .bottom-nav-more-panel a { padding: 0.85rem 0.2rem; color: var(--white); font-size: 0.95rem; border-bottom: 1px solid rgba(243,237,227,0.1); }
  .bottom-nav-more-panel a:last-child { border-bottom: none; }
}
/* "Liquid glass" refraction on both floating pill navs (the desktop
   .site-header and mobile-portrait .bottom-nav) — an SVG feDisplacementMap
   filter (defined in header.html, generated per-pill by js/main.js) bends
   what's behind the pill inward at its rounded edges instead of just
   blurring it, closer to iOS's actual glass button style. Progressive
   enhancement: browsers that don't support an SVG filter reference
   inside backdrop-filter keep the plain blur from the base rules above. */
@supports (backdrop-filter: url(#liquid-glass)) or (-webkit-backdrop-filter: url(#liquid-glass)) {
  .site-header {
    backdrop-filter: blur(12px) saturate(150%) url(#liquid-glass);
    -webkit-backdrop-filter: blur(12px) saturate(150%) url(#liquid-glass);
  }
  .site-header.is-compact {
    backdrop-filter: blur(14px) saturate(160%) url(#liquid-glass);
    -webkit-backdrop-filter: blur(14px) saturate(160%) url(#liquid-glass);
  }
  @media (orientation: portrait) {
    .bottom-nav {
      backdrop-filter: blur(6px) saturate(150%) url(#liquid-glass);
      -webkit-backdrop-filter: blur(6px) saturate(150%) url(#liquid-glass);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button.btn { border: none; cursor: pointer; appearance: none; font: inherit; }
.btn-cta {
  background: linear-gradient(120deg,
    var(--gold-deep) 0%, var(--gold-mid) 22%, var(--gold-highlight) 40%,
    var(--gold-mid) 58%, var(--gold-deep) 75%, var(--gold-mid) 90%, var(--gold-highlight) 100%);
  background-size: 260% 260%;
  animation: btn-gold-flow 7s ease-in-out infinite;
  color: var(--amatista-deep);
  font-weight: 600;
}
@keyframes btn-gold-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta { animation: none; }
}
.btn-cta:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* ===== Header — floating glass pill ===== */
.site-header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  /* Hug the nav's actual content instead of a fixed viewport fraction —
     a percentage-based width left visible empty space inside the pill
     on wide screens. The vw cap is just a safety net for narrow desktop
     windows before the layout switches to the hamburger breakpoint. */
  width: fit-content;
  max-width: min(94vw, 980px);
  border-radius: 999px;
  background: rgba(42, 27, 48, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(243, 237, 227, 0.18);
  box-shadow: 0 12px 40px rgba(16, 8, 18, 0.25);
  transition: top 0.35s ease, max-width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  contain: layout style;
}
.site-header.is-compact {
  top: 0.75rem;
  max-width: min(94vw, 920px);
  /* Once scrolled, the header floats over light "hueso" sections just as
     often as dark photos — at the old 0.3 alpha, a light background
     showing through nearly washed out the white logo mark and nav text.
     0.58 still clears the 4.5:1 AA contrast minimum for white text (~4.8:1
     even over plain cream) while reading noticeably more like glass than
     0.68 did — 0.92 fixed the contrast but looked like a flat solid pill. */
  background: rgba(32, 20, 36, 0.58);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 10px 30px rgba(8, 8, 8, 0.3);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.7rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  transition: padding 0.35s ease, gap 0.35s ease;
}
.site-header.is-compact .header-inner { padding: 0.6rem 1.4rem; gap: 1.1rem; }
.site-header.is-compact .site-nav { gap: 0.1rem; }
.site-header.is-compact .site-nav a { padding: 0.5rem 0.65rem; font-size: 0.84rem; }
.logo {
  font-family: var(--font-logo);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--white);
  letter-spacing: 0.01em;
  transition: font-size 0.35s ease;
}
.logo span { color: var(--dorado-rico); }
.site-header .logo { display: flex; align-items: center; flex-shrink: 0; }
/* Now that the pill hugs its content (width: fit-content) there's no
   leftover space to balance the logo and actions cluster against —
   giving them flex-grow: 1 here actively breaks their sizing instead
   (they can collapse to zero width in a shrink-to-fit flex container).
   Plain flex items, laid out in document order, are already centered
   correctly since the container fits them exactly. */
.header-actions { display: flex; align-items: center; flex-shrink: 0; }
.logo-mark { height: 34px; width: auto; flex-shrink: 0; display: block; transition: height 0.35s ease; }
.site-header.is-compact .logo-mark { height: 26px; }
.site-nav { display: flex; gap: 0.3rem; align-items: center; position: relative; transition: gap 0.35s ease; }
.site-nav a {
  position: relative; z-index: 1;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  /* The pill's glass background is translucent, so bright/busy parts of
     the rotating hero photos can wash out plain white text — a soft
     shadow keeps labels like "Home" readable without a hard outline. */
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.45);
  transition: color 0.2s ease, padding 0.35s ease, font-size 0.35s ease;
}
.site-nav a:hover { color: var(--dorado-rico); }
/* Same elastic "liquid" indicator as the mobile bottom nav (see
   .bottom-nav-indicator) — a pill that morphs between links instead of
   snapping. Desktop-only counterpart, since .site-nav is hidden in
   portrait in favor of the bottom tab bar. */
.site-nav-indicator {
  position: absolute; top: 50%; margin-top: -1.075rem; height: 2.15rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease;
}
.site-nav-indicator.is-active { opacity: 1; }
.site-nav-indicator.is-jumping { transition: none; }
.site-nav a.is-current { color: var(--dorado-rico); }
@media (prefers-reduced-motion: reduce) {
  .site-nav-indicator { transition: none; }
}
.btn-cta-header {
  padding: 0.6rem 1.2rem; font-size: 0.75rem;
  white-space: nowrap; flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.2s ease, background 0.2s ease,
              width 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}
.btn-cta-header.is-hidden-until-scroll {
  opacity: 0; transform: scale(0.85); pointer-events: none;
  width: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; white-space: nowrap;
}
.nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); margin: 5px 0; }

.nav-more { position: relative; display: inline-block; }
.nav-more-toggle {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--white); font-size: 0.9rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.45);
}
.nav-more-toggle:hover { color: var(--dorado-rico); }
.nav-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-toggle svg { transition: transform 0.2s ease; }
.nav-more-menu {
  position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
  background: var(--amatista-deep);
  border: 1px solid rgba(243, 237, 227, 0.15);
  border-radius: var(--radius);
  padding: 0.6rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  min-width: 150px;
  z-index: 20;
}
.nav-more-menu a { padding: 0.4rem 0.6rem; white-space: nowrap; }

@media (max-width: 1024px) {
  .site-nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0; right: 0;
    background: rgba(63, 42, 71, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(243, 237, 227, 0.14);
    border-radius: 1.4rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1.5rem 1.4rem;
    gap: 1rem;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav-indicator { display: none; }
  .btn-cta-header { display: none; }
  .nav-toggle { display: block; }
  .nav-more-menu { position: static; transform: none; background: none; border: none; padding: 0; margin-top: 0.6rem; }
}

/* ===== Quote Assistant modal ===== */
.quote-modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(20, 12, 22, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.quote-modal {
  width: 100%; max-width: 480px; max-height: 82vh;
  /* A flat color-mix read as a solid card with no depth. A gradient plus
     blur/saturation keeps the same amatista family but gives the panel
     the same "glass" language as the pill navs (see .site-header). */
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--amatista) 88%, white 12%) 0%,
    var(--amatista-deep) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  /* Secondary text throughout the modal (subtitle, choice descriptions,
     form labels, close button) reads off --text-on-dark-muted, tuned
     for the much darker plain --amatista panel. Now that the panel is
     lighter, that muted tone loses contrast — brighten it just for
     this component instead of touching the shared token. */
  --text-on-dark-muted: #DCD1DE;
  border: 1px solid rgba(243, 237, 227, 0.16);
  border-radius: 1.2rem;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.quote-modal-header {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1.4rem 1.4rem 1.1rem;
  position: relative;
  border-bottom: 1px solid rgba(243, 237, 227, 0.14);
}
.quote-modal-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 178, 115, 0.5), transparent);
}
.quote-modal-avatar { height: 34px; width: auto; }
.quote-modal-heading { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.quote-modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.2; color: var(--white); }
.quote-modal-subtitle { font-size: 0.82rem; color: var(--text-on-dark-muted); margin-top: 0.2rem; }
.quote-modal-subtitle:empty { display: none; margin-top: 0; }
.quote-modal-close {
  background: rgba(243, 237, 227, 0.08);
  border: 1px solid rgba(243, 237, 227, 0.2);
  color: var(--text-on-dark-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.quote-modal-close:hover { background: rgba(200, 178, 115, 0.16); border-color: var(--dorado-rico); color: var(--white); }

.quote-modal-transcript {
  flex: 1; overflow-y: auto;
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.qm-bubble { max-width: 82%; padding: 0.7rem 1rem; border-radius: 1rem; font-size: 0.92rem; line-height: 1.45; }
.qm-bubble-assistant {
  align-self: flex-start;
  background: rgba(243, 237, 227, 0.08);
  color: var(--hueso);
  border-bottom-left-radius: 0.3rem;
}
.qm-choice-card {
  display: flex; align-items: flex-start; gap: 0.8rem;
  width: 100%; text-align: left;
  background: rgba(243, 237, 227, 0.1);
  border: 1px solid rgba(243, 237, 227, 0.26);
  border-radius: 0.9rem;
  padding: 0.9rem 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.qm-choice-card:hover { border-color: var(--dorado-rico); background: rgba(200, 178, 115, 0.16); transform: translateY(-1px); }
.qm-choice-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
}
.qm-choice-icon svg { width: 19px; height: 19px; }
/* WhatsApp gets its recognizable brand green — the form choice stays on
   the site's own gold so only the "fast path" option borrows an outside
   color. */
.qm-choice-icon-whatsapp { background: rgba(37, 211, 102, 0.18); border: 1px solid rgba(37, 211, 102, 0.4); color: #25D366; }
.qm-choice-icon-form { background: rgba(200, 178, 115, 0.18); border: 1px solid rgba(200, 178, 115, 0.4); color: var(--dorado-rico); }
.qm-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.qm-choice-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--dorado-rico); }
.qm-choice-desc { font-size: 0.82rem; color: var(--text-on-dark-muted); line-height: 1.4; }
.qm-choice-arrow {
  flex-shrink: 0; align-self: center; color: rgba(243, 237, 227, 0.35);
  transition: transform 0.2s ease, color 0.2s ease;
}
.qm-choice-arrow svg { width: 16px; height: 16px; display: block; }
.qm-choice-card:hover .qm-choice-arrow { transform: translateX(3px); color: var(--dorado-rico); }

.qm-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 0 0.1rem; }
.qm-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--text-on-dark-muted); }
.qm-form input, .qm-form select, .qm-form textarea {
  font-family: var(--font-body); font-size: 0.9rem;
  background: rgba(243, 237, 227, 0.08);
  border: 1px solid rgba(243, 237, 227, 0.2);
  border-radius: 0.5rem;
  padding: 0.6rem 0.7rem;
  color: var(--white);
  resize: vertical;
}
.qm-form select option { background: var(--amatista-deep); color: var(--white); }
.qm-form input::placeholder, .qm-form textarea::placeholder { color: rgba(243, 237, 227, 0.4); }
.qm-form input:focus, .qm-form select:focus, .qm-form textarea:focus { outline: none; border-color: var(--dorado-rico); }
.qm-required-note { font-size: 0.78rem; color: var(--text-on-dark-muted); margin: -0.3rem 0 0; }
.qm-form-actions { display: flex; gap: 0.7rem; margin-top: 0.3rem; }
.qm-form-actions .qm-chip-cta { flex: 1; }

/* Lightweight opt-in checkboxes (pool / views / add video) — a compact
   group instead of three full-width label/input rows, so the extra
   pricing-relevant fields don't make the form feel heavier to fill out. */
.qm-checkbox-group { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.qm-checkbox-group legend { font-size: 0.82rem; color: var(--text-on-dark-muted); padding: 0; margin-bottom: 0.3rem; }
.qm-checkbox-row {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 0.6rem;
  font-size: 0.88rem !important; color: var(--white) !important;
}
.qm-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dorado-rico); cursor: pointer; flex-shrink: 0; }
.quote-modal-options {
  padding: 1rem 1.4rem 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  border-top: 1px solid rgba(243, 237, 227, 0.1);
}
.qm-chip {
  background: none;
  border: 1px solid rgba(243, 237, 227, 0.3);
  color: var(--white);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-family: var(--font-body); font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.qm-chip:hover { border-color: var(--dorado-rico); background: rgba(200, 178, 115, 0.12); }
.qm-chip-cta {
  background: var(--dorado-rico); color: var(--amatista-deep); border-color: var(--dorado-rico);
  font-weight: 600; width: 100%; text-align: center; padding: 0.75rem 1rem;
}
.qm-chip-cta:hover { filter: brightness(1.06); background: var(--dorado-rico); }

@media (max-width: 480px) {
  .quote-modal { max-height: 88vh; }
}
.lang-switch {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--white); border: 1px solid rgba(243, 237, 227, 0.35);
  border-radius: 999px; padding: 0.35rem 0.7rem; margin-right: 0.75rem;
}
.lang-switch:hover { border-color: var(--dorado-rico); color: var(--dorado-rico); }

/* Standalone, always-visible language toggle for mobile/portrait — the
   desktop .lang-switch lives inside .site-header, which is hidden in
   portrait in favor of the bottom tab bar, so without this the only way
   to switch language was to bury-scroll to the bottom of the "more"
   sheet. Sits top-right, readable over any hero photo underneath it. */
.mobile-lang-switch { display: none; }

/* ===== Tilt / parallax-on-angle effect =====
   Targets get their rotateX/rotateY written inline by js/main.js, driven
   by pointer position (desktop) or device orientation (mobile). This
   just makes that inline transform animate smoothly instead of jumping,
   and keeps text/photos crisp at a slight 3D angle. */
[data-tilt] {
  transition: transform 0.15s ease-out;
  will-change: transform;
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transition: none; }
}
@media (orientation: portrait) {
  .mobile-lang-switch {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 90;
    top: calc(0.9rem + env(safe-area-inset-top, 0px)); right: 0.9rem;
    min-width: 2.4rem; height: 2.4rem; padding: 0 0.9rem;
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
    color: var(--white);
    background: rgba(42, 27, 48, 0.55);
    border: 1px solid rgba(243, 237, 227, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 6px 18px rgba(16, 8, 18, 0.25);
    transition: opacity 0.25s ease;
  }
  .mobile-lang-switch.is-hidden-near-footer { opacity: 0; pointer-events: none; }
}

/* ===== Blog list ===== */
.blog-list { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem 4.5rem; }
.blog-card {
  display: block; padding: 2rem 0; border-bottom: 1px solid rgba(63, 42, 71, 0.14);
}
.blog-date { font-size: 0.8rem; color: var(--dorado-rico); letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.blog-card h2 { font-size: 1.4rem; color: var(--amatista); margin-bottom: 0.6rem; }
.blog-excerpt { color: var(--text-on-light-muted); margin-bottom: 0.8rem; }
.blog-readmore { color: var(--teal-joya); font-weight: 600; font-size: 0.88rem; }

/* ===== Blog post ===== */
.blog-post { max-width: 700px; margin: 0 auto; padding: 3rem 1.5rem 4.5rem; }
.blog-post-header h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--amatista); margin: 0.6rem 0 2rem; }
.blog-post-body p { margin-bottom: 1.3rem; color: var(--text-on-light-muted); line-height: 1.7; }
.blog-back { display: inline-block; margin-top: 1rem; color: var(--teal-joya); font-weight: 600; font-size: 0.88rem; }
.faq-section { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem 4.5rem; }
.faq-item { border-bottom: 1px solid rgba(63, 42, 71, 0.14); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.3rem 0; font-family: var(--font-display); font-size: 1.1rem;
  color: var(--amatista); display: flex; justify-content: space-between; align-items: center;
}
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--dorado-rico); margin-left: 1rem; }
.faq-question[aria-expanded="true"]::after { content: '−'; }
.faq-answer { padding: 0 0 1.4rem; color: var(--text-on-light-muted); max-width: 66ch; }

/* ===== Gallery filter grid ===== */
.gallery-section { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 4.5rem; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2rem; }
.gallery-filter {
  background: none; border: 1px solid rgba(63, 42, 71, 0.25); cursor: pointer;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.82rem; color: var(--text-on-light-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gallery-filter.is-active { background: var(--teal-joya); border-color: var(--teal-joya); color: var(--white); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery-item {
  position: relative;
  padding: 0; border: none; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  grid-column: span 2; grid-row: span 1;
  transition: transform 0.3s ease;
}
.gallery-item.size-large { grid-column: span 2; grid-row: span 2; }
.gallery-item.size-wide  { grid-column: span 4; grid-row: span 1; }
.gallery-item.size-tall  { grid-column: span 2; grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,27,48,0) 60%, rgba(42,27,48,.35) 100%);
  opacity: 0; transition: opacity 0.25s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item.is-hidden { display: none; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item, .gallery-item.size-large, .gallery-item.size-tall { grid-column: span 1; grid-row: span 1; }
  .gallery-item.size-wide { grid-column: span 2; }
}

/* ===== Lightbox — full-screen photo viewer ===== */
.lightbox-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  background: #0b070d; /* solid, so nothing of the page competes with the photo */
  overflow: hidden;
  touch-action: pan-y; /* JS owns horizontal drag-to-navigate; browser still handles vertical gestures */
}
/* Both images self-center via transform (not flex) so js/main.js can
   append a translateX(dx) drag offset onto the same base transform —
   same live-drag technique as the other carousels: dragging finger
   slides the current photo out and the next one in, in real time,
   snapping into place on release. #lightbox-image-neighbor is the
   second, normally-invisible photo shown only mid-drag. */
.lightbox-image {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* As large as the screen allows, edge to edge, square corners: the photo
     is the point. The controls float on top of it. */
  max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; border-radius: 0;
}
.lightbox-image-neighbor { opacity: 0; pointer-events: none; }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 1; background: rgba(15, 9, 17, 0.38); border: 1px solid rgba(243, 237, 227, 0.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--white); cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(200, 178, 115, 0.2); border-color: var(--dorado-rico); }
.lightbox-close { top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; font-size: 1.5rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.1rem; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
  position: absolute; z-index: 1; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: var(--white); font-size: 0.8rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: rgba(15, 9, 17, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 0.6rem; } .lightbox-next { right: 0.6rem; }
  .lightbox-close { top: 0.8rem; right: 0.8rem; }
}
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--amatista) center/cover no-repeat;
  margin-top: -6.5rem; /* cancels body's header offset so the image starts at y=0, right under the floating pill — same trick as .hero-section */
  padding: 16rem 1.5rem 3.5rem; /* 9.5rem original top padding + 6.5rem to offset the margin above, so the heading lands in the same place */
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(42,27,48,.7) 0%, rgba(42,27,48,.5) 50%, rgba(42,27,48,.78) 100%);
  z-index: 1;
}
.page-hero h1, .page-hero p { position: relative; z-index: 2; }
/* Optional animated cover layer for a page-hero: a real child element
   (rather than the section's own background) so it can carry a slow
   Ken Burns zoom without moving the text pill above it. Sits below the
   ::before darkening gradient. */
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}
.page-hero.has-motion .page-hero-bg {
  animation: hero-ken-burns-slow 20s ease-out forwards;
}
@keyframes hero-ken-burns-slow {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-bg { animation: none !important; transform: none !important; }
}
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.8rem; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.page-hero p { color: var(--white); max-width: 56ch; margin: 0 auto; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
/* Title + subtitle float on the same frosted-glass pill material as the
   floating nav, instead of sitting directly on the photo. */
.page-hero-pill {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.9rem 2.4rem;
  border-radius: var(--radius);
  background: rgba(42, 27, 48, 0.35);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(243, 237, 227, 0.18);
  box-shadow: 0 12px 40px rgba(16, 8, 18, 0.25);
}
@media (max-width: 860px) {
  .page-hero { margin-top: -5.5rem; padding-top: 13rem; }
  .page-hero-pill { padding: 1.5rem 1.6rem; }
}
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--amatista); /* fallback while the first photo loads */
  margin-top: -6.5rem; /* cancels body's header offset so the hero starts at y=0, right under the floating pill */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 860px) {
  .hero-section { margin-top: -5.5rem; }
}
@media (orientation: portrait) {
  /* In portrait the floating header is hidden (bottom tab bar takes over)
     and body has no top padding to cancel — the negative margin above
     would otherwise pull the hero up and off-screen, leaving a gap of
     the next section visible before the true 100vh mark. */
  .hero-section { margin-top: 0; }
}

.hero-carousel { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.0);
  /* transform is transitioned too (not just opacity): when .is-active is
     removed from the outgoing slide, its animation goes away and the
     transform would otherwise snap instantly back to scale(1) — this
     eases it back down over the same span as the opacity fade, so it
     reads as a smooth settle rather than a pop, mid-crossfade. */
  transition: opacity 1.6s ease, transform 1.6s ease-out;
  will-change: opacity, transform;
}
/* Ken Burns only runs on the active slide, once (no infinite loop), so it
   never mid-zoom snaps back to scale(1) while visible — previously every
   slide looped its own untied 16s zoom regardless of visibility, so a
   slide could fade in right as its independent cycle reset, producing an
   intermittent visible jump. Re-adding .is-active each rotation restarts
   the animation fresh. */
.hero-slide.is-active {
  opacity: 1; z-index: 1;
  animation: hero-ken-burns 7s ease-out forwards;
}
@keyframes hero-ken-burns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { animation: none; transform: none; }
}

.hero-intro {
  position: relative; z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 8.5rem 1.5rem 4.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-logo {
  width: 200px; height: auto; margin-bottom: 1.8rem;
  /* A tight hard-edged drop-shadow here outlined every stroke of the
     geometric, block-letter logotype, making it read as if each shape
     sat inside its own little rectangle. A single soft glow keeps the
     white mark legible over bright photos without that boxed-in look
     (same fix as the hero heading's text-shadow, minus the stroke). */
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.5));
}
/* Elegant staggered entrance on load (hero is above the fold, so this
   fires on a short delay rather than waiting on scroll): logo, then the
   heading, then the buttons rising in from below, then the location
   tag last. .is-visible lands on .hero-section so it can reach the
   location badge, which is a sibling of .hero-intro rather than a
   child of it. */
.hero-logo, .hero-intro h1, .hero-actions, .hero-location-badge {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-section.is-visible .hero-logo { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero-section.is-visible h1 { opacity: 1; transform: none; transition-delay: 0.8s; }
.hero-section.is-visible .hero-actions { opacity: 1; transform: none; transition-delay: 1.4s; }
.hero-section.is-visible .hero-location-badge { opacity: 1; transform: none; transition-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-intro h1, .hero-actions, .hero-location-badge { opacity: 1; transform: none; transition: none; }
}
/* Section labels ("Retorno de inversión", "Cómo trabajamos"...). Most sit on
   the bone background, where the light gold read at under 2:1, so the base
   is a deep antique gold (5.7:1), semibold, small caps-style tracking, no
   shadow. Sections on teal/amethyst switch to a pale gold below. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A5520;
  margin-bottom: 1rem;
  text-shadow: none;
}
.video-header .eyebrow, .track-record .eyebrow, .hero-section .eyebrow,
.page-hero .eyebrow, .cta-band .eyebrow { color: #E3CF95; }
/* On light (Bone Ivory) sections there's no photo/dark band behind the eyebrow to earn
   the light-on-dark gold + shadow treatment — swap to the darker gold token (10:1+ contrast). */
.wildlife-band .eyebrow, .reviews-band .eyebrow {
  color: var(--gold-deep);
  text-shadow: none;
}

/* Visually hidden but still announced by screen readers */
.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;
}
.hero-intro h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 1.2rem; color: var(--white);
  /* Stacked dark shadows (no text-stroke — that drew into the letter
     counters, e.g. inside "o"/"a", making the glyphs look odd) so the
     heading stays readable over bright, busy parts of the rotating hero
     photos, not just the darker ones, while the fill stays pure white. */
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 1px 5px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.5);
}
.hero-sub { font-size: 1.05rem; color: var(--white); max-width: 46ch; margin: 0 auto 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hero-intro h1 { margin-bottom: 2.2rem; }
/* Headline + the problem line as its subtitle. */
.hero-intro h1 { margin-bottom: 0.9rem; text-wrap: balance; }
.hero-intro .hero-sub { font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hero-actions .btn-ghost {
  border-color: rgba(243, 237, 227, 0.4); color: var(--hueso);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--dorado-rico); }
/* Over the flat Teal Joya video-band (no photo behind it), the light glass
   haze above reads too close to the band color for the text to stay
   legible — a darker overlay keeps the same glass language but with
   real contrast against solid teal. */
.video-band .btn-ghost {
  border-color: rgba(243, 237, 227, 0.55); color: var(--white);
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.video-band .btn-ghost:hover { background: rgba(0, 0, 0, 0.34); border-color: var(--dorado-rico); }

.hero-location-badge {
  position: absolute; z-index: 2;
  bottom: 1.75rem; right: 1.75rem;
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--hueso);
  background: rgba(42, 27, 48, 0.45);
  border: 1px solid rgba(243, 237, 227, 0.25);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}
/* Tiny build tag under the location pin — commit + build time, so a
   publish can be confirmed at a glance without opening dev tools. */
.hero-build-version {
  position: absolute; z-index: 2;
  bottom: 0.6rem; right: 1.75rem;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.02em;
  color: rgba(243, 237, 227, 0.45);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
@media (max-width: 860px) {
  .hero-intro { padding-top: 7.5rem; }
  .hero-location-badge { bottom: 1.25rem; right: 1.25rem; font-size: 0.72rem; }
  .hero-build-version { bottom: 0.4rem; right: 1.25rem; font-size: 0.58rem; }
}

/* ===== Track record — Amatista theme, animated counters ===== */
.track-record { background: var(--amatista); padding: 4rem 1.5rem 3rem; text-align: center; }
.counter-grid {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem;
}
.counter-number {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--dorado-rico);
}
.counter-label { color: var(--text-on-dark-muted); font-size: 0.88rem; margin-top: 0.3rem; }
.counter-note { margin-top: 2rem; font-size: 0.78rem; color: var(--text-on-dark-muted); opacity: 0.75; }
@media (max-width: 860px) {
  .counter-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Stats ribbon — Teal Joya theme ===== */
.stats-ribbon { background: var(--teal-joya); padding: 3rem 1.5rem 1.5rem; }
.stats-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.stat { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-highlight), var(--gold-mid) 60%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { color: var(--text-on-dark-muted); font-size: 0.85rem; max-width: 30ch; }
.stats-source {
  max-width: var(--max-width); margin: 1.5rem auto 0;
  font-size: 0.75rem; color: var(--text-on-dark-muted); opacity: 0.7;
}
@media (max-width: 860px) {
  .stats-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ===== Reviews band — Hueso theme, glass review cards ===== */
.reviews-band { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 1.5rem; }
.reviews-band h2 { font-size: 2rem; color: var(--amatista); margin-bottom: 2.2rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.review-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
}
/* Small floating pill introducing the "not sure which package?" testimonial
   — same glass-chip language as elsewhere on the site, instead of plain
   unframed text sitting in open space. */
.recommend-note {
  display: inline-block;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  color: var(--amatista);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(63, 42, 71, 0.08);
}
.review-stars { color: var(--dorado-rico); font-size: 0.85rem; letter-spacing: 0.1em; margin-top: 0.15rem; }
.review-card-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review-text { color: var(--text-on-light-muted); font-size: 0.92rem; font-style: italic; margin-bottom: 1rem; }
.review-author { font-family: var(--font-display); color: var(--amatista); font-size: 0.95rem; }
.reviews-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.2rem; }
@media (max-width: 1000px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.reviews-grid-full { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
  .reviews-grid-full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-grid-full { grid-template-columns: 1fr; }
}

/* ===== Wildlife band — Hueso theme, "meet the neighbors" photo grid ===== */
.wildlife-band { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 1.5rem; }
/* Reusable glass "bubble" for a section's eyebrow + heading + intro line,
   so it reads as a framed intro rather than bare text on open background. */
.section-intro-bubble {
  position: relative;
  max-width: 700px; margin: 0 auto 2.5rem;
  padding: 2.2rem 2.2rem 1.8rem;
  /* Same glass-panel language as .package-card — diagonal light-streak
     over a soft tint — instead of a flat translucent fill, so the blur
     actually reads as glass rather than just a plain light box. */
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.75) 6%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.5) 88%,
      rgba(255, 255, 255, 0) 100%),
    rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -14px 26px -18px rgba(63, 42, 71, 0.16),
    0 10px 28px rgba(63, 42, 71, 0.1);
  text-align: center;
}
.section-intro-bubble .eyebrow { margin-bottom: 0.8rem; }
.section-intro-bubble h2 { margin-bottom: 0.8rem; }
.section-intro-bubble p:last-child { margin: 0 auto; max-width: 62ch; color: var(--text-on-light-muted); }
/* Carousel wrapper: a real native horizontally-scrolling, snap-aligned
   strip (see [data-wildlife-carousel] in main.js) — finger-dragging on
   touch is the browser's own smooth scroll, not a simulated swipe.
   Prev/next jump by a page and wrap at either end; the dots below track
   scroll position. */
.wildlife-carousel { position: relative; }
.wildlife-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(63, 42, 71, 0.14); background: var(--white);
  color: var(--amatista); font-size: 1.15rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  box-shadow: 0 6px 16px rgba(63, 42, 71, 0.12);
  transition: border-color 0.2s ease;
}
.wildlife-carousel-btn:hover { border-color: var(--dorado-rico); }
.wildlife-carousel-prev { left: -19px; }
.wildlife-carousel-next { right: -19px; }
.wildlife-grid {
  display: flex; gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0; padding: 0;
}
.wildlife-grid::-webkit-scrollbar { display: none; }
.wildlife-photo {
  display: block; flex: 0 0 calc((100% - 1.6rem) / 3); scroll-snap-align: start;
  padding: 0; margin: 0; border: none; background: none;
  cursor: pointer; border-radius: var(--radius); overflow: hidden;
}
.wildlife-photo img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.wildlife-photo:hover img, .wildlife-photo:focus-visible img { transform: scale(1.05); }
.wildlife-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.2rem; }
.wildlife-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(63, 42, 71, 0.16); border: none; padding: 0; cursor: pointer; }
.wildlife-dot.is-active { background: var(--dorado-rico); width: 18px; transition: width 0.25s ease; }
@media (max-width: 640px) {
  .wildlife-photo { flex-basis: 100%; }
  .wildlife-carousel-prev { left: 0.2rem; }
  .wildlife-carousel-next { right: 0.2rem; }
}

/* ===== Explore band — Kosbiotic-style editorial teaser cards ===== */
/* Slim glass-chip redirect row — replaces the old full-bleed photo cards
   with a compact, single-line set of pills (small thumbnail + label) so
   this section reads as a quiet way-finder, not another heavy content
   block competing with everything above it. */
.explore-band { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 1.5rem; }
/* Fixed 2x2 grid (not flex-wrap) so 4 chips always distribute evenly —
   flex-wrap left an orphaned single chip on its own row, off-center from
   the row above it. */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 380px));
  justify-content: center;
  gap: 0.9rem;
}
.explore-chip {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.5rem 1.2rem 0.5rem 0.5rem;
  box-shadow: 0 8px 22px rgba(63, 42, 71, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.explore-chip:hover { border-color: var(--dorado-rico); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63, 42, 71, 0.14); }
.explore-chip-thumb {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.explore-chip-text { display: flex; flex-direction: column; gap: 0.15rem; }
.explore-chip-title {
  color: var(--dorado-rico); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.explore-chip-label { color: var(--amatista); font-size: 0.85rem; font-weight: 500; line-height: 1.3; }
@media (max-width: 860px) {
  .explore-grid { grid-template-columns: 1fr; }
}

/* ===== Parallax photo band — full-bleed section break, image drifts on scroll ===== */
.parallax-band {
  position: relative;
  height: 23vh;
  min-height: 160px;
  overflow: hidden;
}
.parallax-band-img {
  position: absolute;
  top: -40%; left: 0;
  width: 100%; height: 180%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
@media (max-width: 860px) {
  .parallax-band { height: 17vh; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-band-img { transform: none !important; }
}
/* Decorative looping background video (muted, no controls, not
   interactive) — same "cinematic band" slot as .parallax-band, just with
   a video instead of a still. The 100vw/56.25vw + min-w/min-h swap is the
   standard trick for cropping a 16:9 iframe to always fully cover its box
   regardless of the box's own aspect ratio. */
.video-parallax-band { position: relative; height: 34vh; min-height: 220px; overflow: hidden; }
.video-parallax-embed { position: absolute; inset: 0; pointer-events: none; }
.video-parallax-embed iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
}
@media (max-width: 860px) {
  .video-parallax-band { height: 24vh; }
}
/* Home page hero follow-up: four pillars (Our Goal / We Deliver / Our Art /
   Adaptable) auto-rotating through one large photo + eyebrow + quote + fact,
   all crossfading together as a single unit. Replaces the old static
   mission-statement + manifesto pairing with one component that says all
   four in turn instead of just one up top. */
.mission-carousel {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: 4rem 1.5rem 3.5rem;
  min-height: 620px;
  /* Without this, dragging horizontally on a touch device (iPad
     included — this isn't just the mobile breakpoint) also tried to
     pan the whole page sideways, which has nowhere to go, so Safari
     rubber-banded the entire viewport instead of just letting our JS
     move the photo. pan-y keeps normal vertical scrolling working and
     leaves horizontal panning to the drag handler. */
  touch-action: pan-y;
}
.mission-slide {
  position: absolute; inset: 0;
  padding: 0 1.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center;
  pointer-events: none;
}
.mission-slide.is-active { pointer-events: auto; z-index: 1; }
/* Photo and text crossfade/transition independently of each other, and
   the photo's own *frame* never moves — only .mission-slide-img
   (position:absolute inside it) is what js/main.js drags 1:1 with the
   finger, clipped by the frame's overflow:hidden below. That's what
   keeps a dragged photo from ever visually spilling into the text
   next to it, however far it's dragged: it's clipped to its own frame,
   not just layered under the text. The text always plays its own
   elegant fade-and-rise entrance (mission-text-in, below) the moment a
   slide becomes active, never sliding sideways with the finger.
   flex-shrink:0 matters on mobile: .mission-slide is a flex column
   there, and without it the browser would shrink a *taller* pillar's
   frame (width included, via its aspect-ratio) to make its longer text
   fit within the carousel's fixed height — leaving different pillars
   with different frame widths. Forcing full width here means every
   pillar's frame is always the same size; only the text length
   varies. All four slides' frames sit at the exact same spot (same
   size, same rounded corners), so showing all of them at once is
   indistinguishable from showing one. */
.mission-slide-media {
  position: relative; width: 100%; flex-shrink: 0;
  aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius); box-shadow: 0 22px 55px rgba(63, 42, 71, 0.18);
}
.mission-slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.6s ease;
}
.mission-slide.is-active .mission-slide-img { opacity: 1; }
.mission-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(20, 12, 22, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mission-carousel-btn:hover { background: rgba(20, 12, 22, 0.6); border-color: var(--dorado-rico); }
.mission-carousel-prev { left: 0.9rem; }
.mission-carousel-next { right: 0.9rem; }
.mission-eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.7rem; color: #8A6424; margin-bottom: 1rem; }
.mission-slide-text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--amatista); line-height: 1.55;
  margin-bottom: 1.2rem;
}
.mission-slide-fact { font-family: var(--font-body); font-size: 0.95rem; color: var(--teal-joya); font-weight: 500; line-height: 1.5; }
.mission-slide-source { color: var(--text-on-light-muted); font-weight: 400; font-size: 0.85rem; }
.mission-dots {
  position: absolute; left: 0; right: 0; bottom: 0.5rem;
  display: flex; justify-content: center; gap: 0.5rem;
}
.mission-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(63, 42, 71, 0.2); border: none; padding: 0; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; }
.mission-dot.is-active { background: var(--dorado-rico); width: 24px; }
.mission-slide > div:last-child { opacity: 0; }
.mission-slide.is-active > div:last-child {
  animation: mission-text-in 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mission-text-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-slide-img { transition: none; }
  .mission-slide.is-active > div:last-child { animation: none; }
}
/* Mobile: swipe replaces the arrows, the photo runs edge-to-edge with
   square corners, and the dots sit between the photo and the text.
   Slides stay absolutely stacked (same as desktop) instead of switching
   to display:contents, because js/main.js drags each slide's own photo
   1:1 with the finger — that needs the slide's .mission-slide-media to
   be a real, independently-positioned element it can translateX()
   during the gesture, which display:contents (flattening a slide's
   children into the parent's flex flow) can't support. .mission-dots
   is a single shared node js/main.js re-parents into whichever slide
   is active, between the photo and the text, so its placement doesn't
   need any layout trickery here. The min-height is sized for the
   longest pillar's text so nothing clips. */
@media (max-width: 760px) {
  .mission-carousel {
    padding: 2.5rem 0 3rem;
    min-height: 864px;
  }
  .mission-slide {
    display: flex; flex-direction: column;
    text-align: center; padding: 0;
    /* .mission-slide is position:absolute;inset:0, so the carousel's own
       top padding above doesn't reach it — without this, the first photo
       sits flush against the hero image right above with zero gap. */
    padding-top: 1.5rem;
  }
  .mission-slide-media { border-radius: 0; }
  .mission-carousel-btn { display: none; }
  .mission-dots { position: static; margin: 1.1rem 0 0; }
  .mission-slide > div:last-child {
    padding: 0 1.5rem;
    margin-top: 1.6rem;
  }
}

.manifesto {
  max-width: 980px; margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
}
.manifesto-inner {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: center;
}
.manifesto-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.manifesto p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  color: var(--amatista);
  line-height: 1.55;
}
.manifesto-stat {
  font-family: var(--font-body) !important; font-style: normal !important;
  font-size: 0.95rem !important; color: var(--teal-joya) !important;
  margin-top: 1.2rem !important; font-weight: 500; line-height: 1.5 !important;
}
.manifesto-source { color: var(--text-on-light-muted); font-weight: 400; font-size: 0.85rem; }

/* ===== Market pressure — Teal Joya theme, outcome-framed market data ===== */
.market-pressure { background: var(--teal-joya); padding: 3.5rem 1.5rem 3rem; }
.market-pressure-grid {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.market-pressure-num { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; color: var(--dorado-rico); display: block; margin-bottom: 0.4rem; }
.market-pressure-item p { color: var(--text-on-dark-muted); font-size: 0.92rem; }
.market-pressure-source { text-align: center; color: var(--text-on-dark-muted); font-size: 0.75rem; margin-top: 2rem; opacity: 0.75; }
@media (max-width: 860px) {
  .market-pressure-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

.vertical-outcome { font-weight: 600 !important; color: var(--teal-joya) !important; font-size: 0.88rem !important; margin-top: 0.5rem; }

.package-outcome { font-size: 0.85rem; color: var(--text-on-light-muted); font-style: italic; margin: -0.6rem 0 1rem; }
.package-card.is-featured .package-outcome { color: var(--text-on-dark-muted); }
@media (max-width: 760px) {
  .manifesto-inner { grid-template-columns: 1fr; text-align: center; }
}
/* Pages using .manifesto as plain centered text (no image), e.g. Services/About/Contact/Reviews */
.manifesto-text { text-align: center; }
.manifesto-text p { max-width: 820px; margin: 0 auto; }
.manifesto-text p + p { margin-top: 1.5rem; }

/* ===== Verticals — Hueso theme (body default) ===== */
.verticals { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.5rem 4.5rem; scroll-margin-top: 6.5rem; }
.verticals-intro { color: var(--text-on-light-muted); max-width: 60ch; margin: 0 0 1.2rem; font-size: 1.02rem; }
.verticals h2 { font-size: 2rem; color: var(--amatista); margin-bottom: 2rem; }
.vertical-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.vertical-card {
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden; border-radius: var(--radius);
  text-align: left; border: 1px solid rgba(255, 255, 255, 0.6); cursor: pointer;
  font-family: inherit; padding: 0; display: block; width: 100%;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vertical-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(63, 42, 71, 0.14); }
.vertical-card.is-active { border-color: var(--dorado-rico); }
.vertical-photo { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
.vertical-body { padding: 1.4rem; }
.vertical-body h3 { font-size: 1.3rem; color: var(--teal-joya); margin-bottom: 0.6rem; }
.vertical-body p { color: var(--text-on-light-muted); font-size: 0.92rem; }
.vertical-tags { font-size: 0.76rem !important; color: var(--text-on-light-muted) !important; margin-top: 0.6rem; letter-spacing: 0.01em; }
@media (max-width: 860px) {
  .vertical-grid { grid-template-columns: 1fr; }
}

/* Team cards — a jewel-toned variant of .vertical-card, distinct from the
   plain white service-vertical cards: amethyst-tinted glass and a small
   gold role eyebrow above each name. Not clickable, so no hover lift. */
.team-card {
  background: linear-gradient(165deg, rgba(63, 42, 71, 0.07), rgba(27, 83, 102, 0.05) 60%), rgba(255, 255, 255, 0.85);
  border-color: rgba(63, 42, 71, 0.16);
}
.team-card:hover { transform: none; box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08); }
.team-role {
  display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dorado-rico); margin-bottom: 0.45rem;
}
.team-card .vertical-body h3 { color: var(--amatista); }
.team-card .vertical-body p + p { margin-top: 0.9rem; }
/* A personal photo, when we have one, replaces the plain text header:
   a round portrait beside the role/name so the card reads like a byline
   rather than a plain list entry. */
.team-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.team-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 6px 16px rgba(63, 42, 71, 0.22);
}
.team-header .team-role { margin-bottom: 0.3rem; }
.team-header h3 { margin-bottom: 0; }

/* Expandable detail panel below the vertical cards — each vertical is its
   own frosted-glass card (translucent white, soft border, rounded corners),
   stacked with a gap, rather than one flat solid box. */
.vertical-detail {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.vertical-panel h3 { color: var(--amatista); font-size: 1.5rem; margin-bottom: 0.8rem; }
.vertical-panel p { color: var(--text-on-light-muted); max-width: 68ch; }
.vertical-panel p + p { margin-top: 0.9rem; }
/* Plain (non vp-with-media) panels — e.g. the FAQ prep checklist — get the
   same soft opaque-white card treatment as the rest of the light-theme
   cards, so a list of bullets doesn't just float on bare page background. */
.vertical-panel:not(.vp-with-media) {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.06);
}
.vertical-panel ul { color: var(--text-on-light-muted); max-width: 68ch; margin: 0; padding-left: 1.2rem; }
.vertical-panel li { margin-bottom: 0.5rem; line-height: 1.55; }
.vertical-panel li::marker { color: var(--dorado-rico); }
/* "Preparing your property" checklist — purely a visual aid for the
   client to tick off while getting the property ready; nothing here is
   saved or sent anywhere, it just resets on reload. */
.vertical-panel ul.checklist { list-style: none; padding-left: 0; }
.checklist-item { margin-bottom: 0.5rem; }
.checklist-item label {
  display: flex; align-items: flex-start; gap: 0.7rem;
  cursor: pointer; line-height: 1.55;
}
.checklist-item input[type="checkbox"] {
  margin-top: 0.25rem; width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--dorado-rico); cursor: pointer;
}
.checklist-item input[type="checkbox"]:checked ~ span {
  text-decoration: line-through; color: var(--text-on-light-muted); opacity: 0.6;
}
/* Copy-link affordance next to a shareable section heading */
.section-heading-with-copy { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.copy-link-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(63, 42, 71, 0.06); border: 1px solid rgba(63, 42, 71, 0.15);
  color: var(--teal-joya); border-radius: 999px;
  padding: 0.35rem 0.8rem; font-size: 0.78rem; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.copy-link-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.copy-link-btn:hover { border-color: var(--dorado-rico); background: rgba(200, 178, 115, 0.12); }
.copy-link-btn.is-copied { color: var(--teal-joya); border-color: var(--teal-joya); background: rgba(27, 83, 102, 0.1); }

/* Vertical panel with a small photo carousel alongside the copy.
   Media column is a fixed width (not a fraction) so all three verticals'
   carousels render at the same size regardless of how much copy sits next
   to them. Text always comes first in markup, media always second — keeps
   the grid track assignment (and therefore the carousel size) identical
   across all three panels. */
.vertical-panel.vp-with-media {
  display: grid !important;
  grid-template-columns: 1fr 400px;
  gap: 2.2rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  scroll-margin-top: 6.5rem;
}
.vertical-panel.vp-with-media:hover { box-shadow: 0 14px 34px rgba(63, 42, 71, 0.14); transform: translateY(-2px); }

/* Jump nav under the intro — glass pill links down to each vertical */
.services-jump-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem;
  max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem 2.5rem;
}
.services-jump-nav a {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--amatista); background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px; padding: 0.6rem 1.2rem;
  box-shadow: 0 6px 18px rgba(63, 42, 71, 0.08);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.services-jump-nav a:hover { border-color: var(--dorado-rico); color: var(--teal-joya); transform: translateY(-2px); }
.vp-stat {
  font-family: var(--font-body) !important; font-size: 0.9rem !important; font-weight: 600 !important;
  color: var(--teal-joya) !important; margin-top: 1rem !important; line-height: 1.5;
}
.vp-stat-source { color: var(--text-on-light-muted); font-weight: 400; font-size: 0.8rem; }

/* Services page: three video-service cards (FPV / Story Telling / Reels),
   same luxury-glass language as .vcard-details and .package-card — a
   diagonal sheen over a jewel-tinted gradient, blurred/saturated, with a
   gold price badge and a teal heading so the page's signature glass/gold/
   teal/amatista palette carries through into the new video content. */
.video-service-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .video-service-grid { grid-template-columns: 1fr; }
}
.video-service-card {
  position: relative;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.7) 6%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.45) 88%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.32) 45%,
      rgba(199, 186, 201, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -16px 28px -18px rgba(63, 42, 71, 0.18),
    0 10px 28px rgba(63, 42, 71, 0.1);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
/* A real sample video/thumbnail for each service type, reusing the same
   .video-card component (and its click-to-play JS) already built for the
   home page's video-band — pulls the card out of that flex-carousel
   context, so it just needs its own width/spacing here. The negative
   margin lets it bleed to the card's outer edge, matching how the card's
   own rounded corners read against the glass background. */
.video-service-sample {
  width: calc(100% + 0.4rem);
  margin: -0.2rem -0.2rem 1.1rem;
}
.video-service-card .video-card--vertical.video-service-sample {
  width: 160px; margin: 0 auto 1.1rem;
}
.video-service-price {
  display: inline-block;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--amatista-deep); background: var(--dorado-rico);
  padding: 0.3rem 0.8rem; border-radius: 999px;
  margin-bottom: 0.9rem;
}
.video-service-card h3 { color: var(--teal-joya); font-size: 1.25rem; margin-bottom: 0.6rem; }
.video-service-card p { color: var(--text-on-light-muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.9rem; }
.video-service-card ul { margin: 0; padding-left: 1.1rem; color: var(--text-on-light-muted); font-size: 0.88rem; }
.video-service-card li { margin-bottom: 0.4rem; line-height: 1.5; }
.video-service-card li::marker { color: var(--dorado-rico); }
.vp-carousel {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(63, 42, 71, 0.14);
  touch-action: pan-y; /* let JS own horizontal drag, browser still scrolls the page vertically */
}
.vp-carousel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.4s ease;
}
.vp-carousel-img.is-active { opacity: 1; }
.vp-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(20, 12, 22, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.vp-carousel-btn:hover { background: rgba(20, 12, 22, 0.6); border-color: var(--dorado-rico); }
.vp-carousel-prev { left: 0.7rem; }
.vp-carousel-next { right: 0.7rem; }
.vp-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 0.7rem;
  display: flex; justify-content: center; gap: 0.4rem; z-index: 2;
}
.vp-carousel-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); border: none; padding: 0; cursor: pointer;
}
.vp-carousel-dot.is-active { background: var(--dorado-rico); width: 16px; }
/* Portrait format on the services page specifically — a taller frame
   sits better next to a multi-paragraph text column than the wide 4:3
   crop, and fills more of the panel's height. Scoped to .vp-with-media
   so the homepage's vcard grid (which reuses .vp-carousel) keeps its
   original landscape thumbnails. */
.vertical-panel.vp-with-media .vp-carousel { aspect-ratio: 3/4; }
@media (max-width: 860px) {
  .vertical-panel.vp-with-media { grid-template-columns: 1fr; }
  .vp-carousel { order: -1; }
  .vertical-panel.vp-with-media .vp-carousel { aspect-ratio: 4/3; }
}

/* Stats carousel (services page) — sourced-data slides making the case
   for photo/video quality: a swipeable card with a small bar or line
   chart per slide, in the site's own glass-card language rather than
   the vp-carousel's image-only pattern. The heading/intro above it are
   centered to match the carousel's own centered, narrower column —
   left-aligning them (the .verticals default) reads oddly sitting
   right above a centered card, especially coming off the centered
   manifesto text before it. */
.stats-section { text-align: center; }
.stats-section .verticals-intro { margin-left: auto; margin-right: auto; }
.stats-carousel { position: relative; max-width: 640px; margin: 0 auto; text-align: left; }
.stats-viewport { overflow: hidden; border-radius: var(--radius); }
.stats-track { display: flex; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.stats-slide {
  flex: 0 0 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 2.2rem 2.2rem 1.7rem;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
}
.stats-eyebrow {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--teal-joya); margin-bottom: 0.3rem;
}
.stats-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; color: var(--amatista); margin-bottom: 1.5rem; line-height: 1.25;
}
.stats-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.stats-chart-title { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text-on-light); }
.stats-chart-unit { font-family: var(--font-body); font-size: 0.74rem; color: var(--text-on-light-muted); white-space: nowrap; }

.stats-bars { display: flex; align-items: flex-end; gap: 2.2rem; height: 190px; padding: 0 0.5rem; }
.stats-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.stats-bar-value {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--text-on-light-muted);
  font-variant-numeric: tabular-nums; margin-bottom: 0.45rem;
}
.stats-bar-col.is-hi .stats-bar-value { font-size: 2rem; color: var(--amatista); }
.stats-bar { width: 76px; border-radius: 8px 8px 3px 3px; background: rgba(63, 42, 71, 0.18); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.stats-bar-col.is-hi .stats-bar { background: var(--dorado-rico); }
.stats-bar-label { margin-top: 0.65rem; font-family: var(--font-body); font-size: 0.8rem; color: var(--text-on-light); font-weight: 600; text-align: center; }

.stats-line-chart { padding: 0 0.25rem; }
.stats-line-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.stats-line-axis { stroke: rgba(63, 42, 71, 0.14); stroke-width: 1; }
.stats-line-area { fill: var(--dorado-rico); opacity: 0.14; stroke: none; }
.stats-line-path { fill: none; stroke: var(--dorado-rico); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stats-line-dot { fill: var(--hueso); stroke: var(--dorado-rico); stroke-width: 1.6; }
.stats-line-dot.is-end { fill: var(--dorado-rico); stroke: var(--hueso); stroke-width: 2; }
.stats-line-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; fill: var(--text-on-light-muted); }
.stats-line-label.is-end { font-size: 15px; fill: var(--amatista); }
.stats-line-x-labels { display: flex; justify-content: space-between; padding: 0 0.9rem; margin-top: 0.4rem; }
.stats-line-x-labels span { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-on-light-muted); }

.stats-caption {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(63, 42, 71, 0.12);
  font-family: var(--font-body); font-size: 0.78rem; color: var(--text-on-light-muted); line-height: 1.55;
}
.stats-caption strong { color: var(--text-on-light); }
.stats-caption a { color: var(--teal-joya); text-decoration: underline; }

.stats-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(63, 42, 71, 0.14); background: var(--white);
  color: var(--amatista); font-size: 1.15rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  box-shadow: 0 6px 16px rgba(63, 42, 71, 0.12);
  transition: border-color 0.2s ease;
}
.stats-carousel-btn:hover { border-color: var(--dorado-rico); }
.stats-carousel-prev { left: -19px; }
.stats-carousel-next { right: -19px; }
.stats-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.2rem; }
.stats-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(63, 42, 71, 0.16); border: none; padding: 0; cursor: pointer; }
.stats-dot.is-active { background: var(--dorado-rico); width: 18px; transition: width 0.25s ease; }
@media (max-width: 640px) {
  .stats-slide { padding: 1.8rem 1.5rem 1.4rem; }
  .stats-carousel-prev { left: 0.4rem; }
  .stats-carousel-next { right: 0.4rem; }
}

.vcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.vcard-grid.has-open { grid-template-columns: repeat(2, 1fr); }
.vcard {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.vcard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(63, 42, 71, 0.12); }
.vcard.is-open { grid-column: 1 / -1; order: -1; border-color: var(--dorado-rico); box-shadow: 0 14px 34px rgba(63, 42, 71, 0.18); scroll-margin-top: 6.5rem; }

.vcard-toggle { display: block; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.vcard-media { position: relative; display: block; cursor: pointer; }
.vcard-media .vertical-photo { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
/* Photos run full-bright with no dark bottom gradient; a soft text shadow
   keeps the white card name readable on bright photos. */
.vcard-name {
  position: absolute; left: 1.3rem; bottom: 1rem; right: 1rem; z-index: 1;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--white);
  text-shadow: 0 1px 2px rgba(20, 12, 22, 0.55), 0 0 14px rgba(20, 12, 22, 0.35);
}
.vcard-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.5rem; color: var(--teal-joya);
}
.vcard-toggle-label { font-weight: 600; font-size: 0.88rem; }
.vcard-toggle-row svg { transition: transform 0.2s ease; flex-shrink: 0; }
.vcard-toggle[aria-expanded="true"] .vcard-toggle-row svg { transform: rotate(180deg); }
.vcard-toggle:hover .vcard-toggle-row { color: var(--amatista); }

/* Luxury glass panel for the expanded detail area — translucent gradient
   fill + inner highlight + blur/saturate, so the open card reads as a lit
   pane of glass rather than flat empty space inside the card frame. Pushed
   stronger than a typical UI card: heavier blur/saturate, a deeper light-to-
   shadow gradient sweep, and a brighter top edge to sell the "cut glass"
   look rather than a generic translucent panel. */
.vcard-details {
  margin: 0 1rem 1.2rem;
  padding: 1.5rem 1.6rem 1.7rem;
  border-radius: 16px;
  /* Two layers: diagonal light streaks (sold as an actual background, so
     it paints behind all content with no stacking-order tricks needed) on
     top of a jewel-tinted base gradient — the streaks are what reads as
     "glass" rather than just a translucent card. */
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.65) 6%,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0) 68%,
      rgba(255, 255, 255, 0.4) 86%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.28) 45%,
      rgba(199, 186, 201, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -18px 30px -20px rgba(63, 42, 71, 0.2),
    0 12px 30px rgba(63, 42, 71, 0.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.vcard-detail-extra {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed rgba(63, 42, 71, 0.15);
}
.vcard-icon { width: 50px; height: 50px; color: var(--amatista); flex-shrink: 0; }
.vcard-icon svg { width: 100%; height: 100%; }
.vcard-detail-extra > p { flex: 1; min-width: 200px; }
.vcard-detail-extra .vertical-more { flex-basis: 100%; margin-top: 0.4rem; padding-top: 0.9rem; }

.vertical-more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed rgba(63, 42, 71, 0.15);
}
.vertical-more a, .vertical-more button {
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--amatista); background: rgba(63, 42, 71, 0.06);
  border: 1px solid rgba(63, 42, 71, 0.14);
  border-radius: 999px; padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.vertical-more a:hover, .vertical-more button:hover { border-color: var(--teal-joya); color: var(--teal-joya); }
.vertical-more-cta { background: var(--teal-joya) !important; border-color: var(--teal-joya) !important; color: var(--white) !important; font-weight: 600; }
.vertical-more-cta:hover { background: var(--amatista) !important; border-color: var(--amatista) !important; color: var(--white) !important; }
/* "Back to top" isn't the same kind of action as the other links (learn
   more / packages / gallery / quote), so it's a small circular icon
   pinned to the end of the row instead of one more text pill competing
   for attention. */
.vertical-more-home {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important;
  margin-left: auto !important; padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .vcard-grid, .vcard-grid.has-open { grid-template-columns: 1fr; }
  /* Stacked-scroll cards (mobile only, experimental): each card pins in
     place as you scroll past it, and js/main.js scales/dims it down as
     the next one slides up to cover it — a deck of cards being pushed
     back, rather than a plain list scrolling by. Later cards paint over
     earlier ones for free (normal DOM paint order, no z-index needed)
     since sticky elements only leave normal flow once actually stuck.
     Disabled the instant a card opens (see .vcard-grid.has-open below)
     so reading an expanded card isn't fighting the shrink/dim. */
  .vcard { position: sticky; top: 6.5rem; transform-origin: top center; }
  .vcard + .vcard { margin-top: 1.5rem; }
  /* Each card's sticky top steps down a bit further than the last, so a
     covered card's own top edge — rounded corner and a strip of its photo
     — stays visible above the incoming one instead of getting hidden
     completely edge-to-edge. */
  .vcard:nth-child(2) { top: calc(6.5rem + 1rem); }
  .vcard:nth-child(3) { top: calc(6.5rem + 2rem); }
  .vcard-grid.has-open .vcard {
    position: static;
    transform: none !important;
    filter: none !important;
  }
}

.link-toggle {
  margin-top: 1.6rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.03em; color: var(--teal-joya);
  border-bottom: 1px solid var(--teal-joya);
}
.link-toggle:hover { color: var(--amatista); border-color: var(--amatista); }

/* Proof band: real client sites/listings built around our photos */
.site-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-top: 1.8rem;
}
.site-link-card {
  display: block; background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.site-link-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(63, 42, 71, 0.14); border-color: var(--dorado-rico); }
.site-link-name { display: block; font-family: var(--font-display); font-weight: 600; color: var(--amatista); font-size: 1.05rem; margin-bottom: 0.35rem; }
.site-link-desc { display: block; color: var(--text-on-light-muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.site-link-url { display: block; color: var(--teal-joya); font-size: 0.8rem; font-weight: 600; word-break: break-word; }
@media (max-width: 860px) {
  .site-links { grid-template-columns: 1fr; }
}

.packages {
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(63, 42, 71, 0.12);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.package-card {
  position: relative;
  /* Luxury glass treatment — diagonal light-streak layer over a jewel-
     tinted gradient, blurred/saturated, same language as the vcard detail
     panel — plus a "zoom pop" reveal: pure scale (no slide), so it reads
     as the card zooming toward the viewer as the section comes into view. */
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.7) 6%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.45) 88%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.32) 45%,
      rgba(199, 186, 201, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: 1.6rem;
  /* Flex column so the "Get a quote" hint pins to the bottom regardless of
     how many feature bullets sit above it — Básico/Premium/Estrella have
     different list lengths, and without this the hint lands at a
     different height in each card. */
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -16px 28px -18px rgba(63, 42, 71, 0.18),
    0 10px 28px rgba(63, 42, 71, 0.1);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1.4, 0.36, 1);
  will-change: transform, opacity;
}
.package-card.is-visible { opacity: 1; transform: scale(1); }
.package-card:nth-child(1) { transition-delay: 0s; }
.package-card:nth-child(2) { transition-delay: 0.15s; }
.package-card:nth-child(3) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .package-card { opacity: 1; transform: none; transition: none; }
}
.package-card.is-featured {
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.16) 6%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.12) 88%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg, rgba(63, 42, 71, 0.98) 0%, rgba(63, 42, 71, 0.88) 100%);
  border: 2px solid var(--dorado-rico); color: var(--white);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.package-tag {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dorado-rico); margin-bottom: 0.5rem;
}
.package-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.4rem; color: var(--amatista); }
.package-card.is-featured h3 { color: var(--white); }
.package-price {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  color: var(--teal-joya); margin-bottom: 1rem;
}
.package-card.is-featured .package-price { color: var(--dorado-rico); }
.package-card ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text-on-light-muted); }
.package-card.is-featured ul { color: var(--text-on-dark-muted); }
.package-card li { margin-bottom: 0.4rem; }
.package-card[role="button"] {
  cursor: pointer;
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1.4, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.package-card[role="button"]:hover, .package-card[role="button"]:focus-visible {
  border-color: var(--dorado-rico);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -16px 28px -18px rgba(63, 42, 71, 0.18),
    0 14px 34px rgba(63, 42, 71, 0.16);
  transform: translateY(-3px);
}
.package-card[role="button"].is-visible:hover, .package-card[role="button"].is-visible:focus-visible { transform: translateY(-3px) scale(1); }
.package-select-hint {
  margin-top: auto !important; padding-top: 0.9rem;
  border-top: 1px dashed rgba(63, 42, 71, 0.15);
  font-size: 0.8rem !important; font-weight: 600; color: var(--teal-joya) !important;
}
.package-card.is-featured .package-select-hint { color: var(--dorado-rico) !important; border-top-color: rgba(255, 255, 255, 0.2); }
/* Fine-print notes get their own light glass panel tucked under the
   package cards, instead of floating as bare text in open space. */
.package-notes {
  grid-column: 1 / -1;
  margin-top: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
}
.package-notes .eyebrow { color: var(--gold-deep); text-shadow: none; margin-bottom: 0.7rem; }
.package-note {
  font-size: 0.82rem; color: var(--text-on-light-muted);
  max-width: 68ch; margin: 0;
}
.package-note + .package-note { margin-top: 0.8rem; }
@media (max-width: 860px) {
  .packages { grid-template-columns: 1fr; }
  .vertical-panel.vp-with-media { padding: 1.6rem; }
}

/* ===== Logos band — Hueso theme, proper gallery grid ===== */
.logos-band {
  max-width: var(--max-width); margin: 0 auto;
  padding: 3rem 1.5rem 4.5rem;
  border-top: 1px solid rgba(63, 42, 71, 0.12);
}
.logos-eyebrow {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-light-muted); text-align: center; margin-bottom: 2rem;
}
/* Client logos: one borderless row that steps sideways on its own, one logo
   at a time with a pause between steps, and loops forever (reference: an
   interior-design studio's client strip). Every mark is flattened to black
   on the page background so twenty different brand palettes read as one
   calm band. js/main.js clones the list for the seamless loop. */
.logos-carousel {
  --logos-visible: 5;
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* vertical page scroll stays native; horizontal drags move the strip */
  cursor: grab;
}
.logos-carousel.is-dragging { cursor: grabbing; }
.logos-track {
  display: flex;
  list-style: none; margin: 0; padding: 0;
  will-change: transform;
}
.logo-chip {
  flex: 0 0 calc(100% / var(--logos-visible));
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.6rem;
}
.logo-chip a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.logo-chip img {
  max-width: 100%; max-height: 60px; object-fit: contain;
  /* Logos arrive with their backgrounds removed and their empty margins
     trimmed (Cloudinary e_make_transparent + e_trim in the src), so
     brightness(0) turns every mark into a clean black silhouette at a
     comparable size. Villa Sueño's gradient artwork is first thresholded
     to black and white (e_blackwhite) so its background can be dropped. */
  filter: brightness(0);
  opacity: 0.82;
  transition: opacity 0.25s ease;
  -webkit-user-drag: none; user-select: none;
}
.logo-chip a:hover img, .logo-chip a:focus-visible img { opacity: 1; }
@media (max-width: 860px) {
  .logos-carousel { --logos-visible: 3; }
}
@media (max-width: 500px) {
  .logos-carousel { --logos-visible: 2; }
  .logo-chip { height: 80px; padding: 0 1.1rem; }
  .logo-chip img { max-height: 50px; }
}

/* ===== Video band — Teal Joya theme, one carousel per video service ===== */
.video-band { background: var(--teal-joya); padding: 4.5rem 1.5rem; text-align: center; }
.video-header { max-width: 640px; margin: 0 auto 2.5rem; }
/* Intro to the video section, set apart on the light page ground between the
   background video and the teal band: frames the problem video solves. */
.video-intro-band { background: var(--hueso); padding: 2.6rem 1.5rem 2.8rem; }
.video-intro-bubble { margin: 0 auto; text-align: center; padding: 1.6rem 2rem 1.5rem; }
.video-intro-bubble p:last-child { font-size: 0.95rem; line-height: 1.65; }
.video-header .eyebrow { text-align: center; }
.video-header h2 { font-size: 2rem; color: var(--white); margin: 1rem 0; }
.video-sub { color: var(--text-on-dark-muted); }
.video-pricing-note { font-size: 0.85rem; opacity: 0.85; margin-top: 0.6rem; color: var(--text-on-dark-muted); }
/* Each video service (FPV 1-take, Property Story Telling, Social Reels)
   gets its own labeled sub-header + price tag + carousel, stacked with
   generous spacing so the three read as distinct offerings, not one
   undifferentiated grid. */
.video-type { max-width: var(--max-width); margin: 0 auto 3.5rem; }
.video-type:last-of-type { margin-bottom: 2.5rem; }
.video-type-header { max-width: 640px; margin: 0 auto 1.5rem; }
.video-type-header h3 {
  font-size: 1.4rem; color: var(--white);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem;
}
.video-type-price {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--amatista-deep); background: var(--dorado-rico);
  padding: 0.3rem 0.8rem; border-radius: 999px;
}
.video-type-header .video-sub { margin-top: 0.6rem; font-size: 0.92rem; }
/* Price badges double as quote-form CTAs: clicking one opens the quote
   form with that video type pre-selected (see data-video-type / .js-open-quote
   in main.js), so they need to read as clickable, not just informational. */
.video-type-price, .video-service-price {
  border: none; cursor: pointer; appearance: none; font-family: var(--font-body);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.video-type-price:hover, .video-service-price:hover { filter: brightness(1.08); transform: translateY(-1px); }
.video-type-price:focus-visible, .video-service-price:focus-visible { outline: 2px solid var(--amatista); outline-offset: 2px; }
/* Chess Media collab credit under the Social Media Reels offering */
.video-collab a { color: var(--dorado-rico); font-weight: 600; text-decoration: none; }
.video-collab a:hover { text-decoration: underline; }
/* Round Chess Media badge next to the "Social Media Reels" title, linking
   to their Instagram. Their logo is a square icon-over-wordmark lockup;
   cropped to a circle it would still show most of the wordmark, so instead
   we zoom the image so only the icon (crown/face/dress) survives inside
   the circular mask and the wordmark below gets clipped off. */
.chess-media-badge {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: flex-start; justify-content: center;
  vertical-align: middle;
  border: 2px solid var(--dorado-rico);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.chess-media-badge:hover { transform: scale(1.08); border-color: var(--white); }
.chess-media-badge img { width: 145%; height: auto; display: block; }
/* Keeps the "→" glued to the badge it points at — without this, the
   arrow and the badge could end up on different lines when the
   paragraph wraps, breaking the "arrow points at the logo" pairing. */
.chess-media-link-group {
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
}
.video-carousel { position: relative; max-width: var(--max-width); margin: 0 auto; }
.video-grid {
  display: flex; gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.2rem;
  scrollbar-width: none;
}
.video-grid::-webkit-scrollbar { display: none; }
.video-card {
  position: relative;
  flex: 0 0 calc(50% - 0.75rem);
  scroll-snap-align: start;
  aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius);
}
.video-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(20, 12, 22, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.video-carousel-btn:hover { background: rgba(20, 12, 22, 0.75); border-color: var(--dorado-rico); }
.video-carousel-prev { left: -14px; }
.video-carousel-next { right: -14px; }
.video-dots { display: none; }
@media (max-width: 900px) {
  .video-card { flex-basis: 92%; }
  /* Swipe covers touch navigation at this size, so the overlay arrows
     just get in the way — the dots below take over as the visible
     position indicator instead. */
  .video-carousel-btn { display: none; }
  .video-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1rem; }
}
/* Reels are native 9:16 — a narrow, fixed-width card reads much better
   than stretching a vertical clip into a 16:9 slot. */
.video-card--vertical { flex: 0 0 220px; aspect-ratio: 9/16; }
.video-card--vertical .video-card-headline { font-size: 0.8rem; }
@media (max-width: 900px) {
  .video-card--vertical { flex-basis: 62%; }
}
.video-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); border: none; padding: 0; cursor: pointer; }
.video-dot.is-active { background: var(--dorado-rico); width: 18px; transition: width 0.25s ease; }
.video-card-trigger {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer;
  display: block;
}
.video-card-trigger > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-trigger::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.7) 100%);
}
/* YouTube-style red rounded-rectangle play button, centered on the
   thumbnail — bigger and more recognizable than a plain circle. Uses a
   real SVG triangle (not a text glyph) so it centers pixel-perfectly
   and scales cleanly instead of drifting with font metrics. */
.video-card-trigger .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 50px; border-radius: 14px; z-index: 2;
  background: #FF0000;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.video-card-trigger .play-btn svg { width: 22px; height: 22px; margin-left: 2px; }
.video-card-trigger:hover .play-btn { transform: translate(-50%, -50%) scale(1.06); }
.video-card-top {
  position: absolute; top: 0.8rem; left: 0.8rem; right: 3.2rem; z-index: 2;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.video-card-top .video-card-avatar {
  width: 26px; height: 26px; object-fit: contain;
  background: var(--amatista-deep); border-radius: 50%; padding: 4px;
  flex-shrink: 0;
}
.video-card-headline {
  color: var(--white); font-weight: 600; font-size: 0.85rem; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.7); text-align: left;
}
.video-card-channel {
  color: rgba(243,237,227,0.85); font-size: 0.72rem; margin-top: 0.15rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.7); text-align: left;
}
.video-card-yt-badge {
  position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255, 255, 255, 0.95); color: #1a1a1a;
  font-size: 0.72rem; font-weight: 700;
  padding: 0.35rem 0.7rem; border-radius: 999px;
}
.video-card-iframe {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}

/* ===== CTA band — Amatista theme (bookends the hero) ===== */
.cta-band {
  background: var(--amatista);
  color: var(--white);
  text-align: center;
  padding: 4.5rem 1.5rem;
}
.cta-band h2 { font-size: 2.1rem; margin-bottom: 0.8rem; }
.cta-band p { color: var(--text-on-dark-muted); margin-bottom: 2rem; }
.cta-kicker {
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  color: var(--dorado-rico) !important; margin-bottom: 1.2rem !important;
}

/* ===== Footer — WhatsApp-inspired multi-column layout, ConeCat style ===== */
.site-footer {
  background: var(--amatista-deep);
  color: var(--text-on-dark-muted);
  position: relative;
  overflow: hidden;
}

.footer-newsletter {
  position: relative; z-index: 1;
  max-width: var(--max-width); margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(243, 237, 227, 0.12);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;
}
.footer-newsletter-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); }
.footer-newsletter-sub { font-size: 0.85rem; color: var(--text-on-dark-muted); margin-top: 0.3rem; }
.footer-newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.footer-newsletter-form input {
  font-family: var(--font-body); font-size: 0.9rem;
  background: rgba(243, 237, 227, 0.08);
  border: 1px solid rgba(243, 237, 227, 0.25);
  border-radius: var(--radius);
  padding: 0.7rem 1rem; color: var(--white); min-width: 220px;
}
.footer-newsletter-form input::placeholder { color: rgba(243, 237, 227, 0.45); }
.footer-newsletter-form input:focus { outline: none; border-color: var(--dorado-rico); }

.footer-inner {
  position: relative; z-index: 1;
  max-width: var(--max-width); margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
}
.footer-logo-link { display: flex; align-items: center; gap: 0.6rem; }
.footer-logo-mark-wide { height: 42px; width: auto; }
.footer-brand .logo { font-size: 1.3rem; }
.footer-brand p { margin-top: 0.8rem; font-size: 0.88rem; max-width: 30ch; }
.footer-col-title {
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso);
  margin-bottom: 1rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.9rem; }
.footer-col a, .footer-links a { color: var(--text-on-dark-muted); }
.footer-col a:hover, .footer-links a:hover { color: var(--dorado-rico); }

.footer-bottom {
  position: relative; z-index: 1;
  max-width: var(--max-width); margin: 0 auto;
  padding: 1.4rem 1.5rem 2.2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem; border-top: 1px solid rgba(243, 237, 227, 0.12);
}
.footer-bottom-left { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer-bottom-left a { color: var(--text-on-dark-muted); margin-left: 1.5rem; }
.footer-bottom-left a:hover { color: var(--dorado-rico); }
.footer-social { display: flex; gap: 0.7rem; }
.social-icon {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(243, 237, 227, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-dark-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.social-icon:hover { border-color: var(--dorado-rico); color: var(--dorado-rico); }

/* Same icon-in-circle language as .social-icon, inverted for light cards
   (e.g. the Contact page's channel grid) — sits inline beside the title. */
.contact-title-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.contact-title-row h3 { margin-bottom: 0; }
.contact-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(63, 42, 71, 0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--amatista);
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-icon svg { width: 16px; height: 16px; }
.vertical-card:hover .contact-icon { border-color: var(--dorado-rico); color: var(--gold-deep); }
.lang-switch-footer { margin-right: 0; border: none; padding: 0; font-size: 0.8rem; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 1rem; }
}

/* ===== Legal pages (privacy, terms) ===== */
.legal-page { padding: 3rem 1.5rem 5rem; }
.legal-inner { max-width: 65ch; margin: 0 auto; }
.legal-inner h1 { font-size: 2.4rem; color: var(--amatista); margin-bottom: 0.5rem; }
.legal-updated { color: var(--text-on-light-muted); font-size: 0.85rem; margin-bottom: 2rem; }
.legal-inner h2 { font-size: 1.3rem; color: var(--teal-joya); margin: 2rem 0 0.8rem; }
/* h3 uses the serif display font (Cormorant Garamond), whose x-height
   reads noticeably smaller than the sans-serif body copy at the same
   rem size — bump it well past 1rem so it still looks like a heading
   sitting above the paragraph that follows it. */
.legal-inner h3 { font-size: 1.3rem; color: var(--amatista); margin: 1.6rem 0 0.5rem; }
.legal-inner p { color: var(--text-on-light-muted); margin-bottom: 0.5rem; }
.legal-inner ul { color: var(--text-on-light-muted); margin: 0 0 0.8rem 1.2rem; padding: 0; }
.legal-inner li { margin-bottom: 0.35rem; }
.legal-inner a { color: var(--teal-joya); text-decoration: underline; }


/* Services: compact intro (lead + bullets) and the white "reading" lead-in
   that opens the vertical descriptions */
.services-intro { padding: 3.5rem 1.5rem 1.5rem; }
.services-intro-list {
  list-style: none; max-width: 640px; margin: 1.5rem auto 0; padding: 0;
  text-align: left; color: var(--text-on-light-muted);
}
.services-intro-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; line-height: 1.5; }
.services-intro-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--dorado-rico); }
.services-intro-list strong { color: var(--amatista); }
.services-lead {
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius); padding: 1.6rem 2rem; margin-bottom: 1.8rem;
  box-shadow: 0 8px 26px rgba(63, 42, 71, 0.06);
}
.services-lead p { margin: 0; text-align: justify; color: var(--text-on-light-muted); }

/* =====================================================================
   Micro-animations (ma-*)
   Small, functional motion pieces trialled across the site. Each one is
   CSS + inline SVG; js/main.js only adds .is-on to [data-anim-once]
   elements the first time they scroll into view, and toggles the
   lightbox loader. Under prefers-reduced-motion every loop is switched
   off and every one-shot shows its finished state.
   ===================================================================== */
.ma-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 1. Aperture: blades rotate as the opening narrows, then reopen */
.ma-aperture { display: block; width: 46px; height: 46px; margin: 0 auto 0.6rem; color: var(--dorado-rico); }
.ma-aperture .ma-blades, .ma-aperture .ma-hole { transform-origin: 50px 50px; animation: ma-ap-rot 4.8s cubic-bezier(.65,0,.35,1) infinite; }
.ma-aperture .ma-hole { animation-name: ma-ap-hole; }
@keyframes ma-ap-rot { 0%, 15% { transform: rotate(0); } 45%, 65% { transform: rotate(38deg); } 95%, 100% { transform: rotate(0); } }
@keyframes ma-ap-hole { 0%, 15% { transform: scale(1); } 45%, 65% { transform: scale(.42); } 95%, 100% { transform: scale(1); } }
.lightbox-loader { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; color: var(--dorado-rico); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 2; }
.lightbox-overlay.is-loading .lightbox-loader { opacity: 1; }
.lightbox-loader .ma-aperture { width: 56px; height: 56px; margin: 0; }

/* 2. Drone hovering, propellers spinning */
.ma-drone { display: block; width: 92px; height: 66px; margin: 0 auto 0.4rem; color: var(--white); }
.ma-drone .ma-drone-body { animation: ma-hover 3.2s ease-in-out infinite; }
.ma-drone .ma-prop { transform-box: fill-box; transform-origin: center; animation: ma-spin .18s linear infinite; color: var(--dorado-rico); }
.ma-drone .ma-prop + .ma-prop { animation-direction: reverse; }
.ma-drone .ma-drone-shadow { transform-box: fill-box; transform-origin: center; animation: ma-shadow 3.2s ease-in-out infinite; }
@keyframes ma-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ma-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
@keyframes ma-shadow { 0%, 100% { transform: scaleX(1); opacity: .3; } 50% { transform: scaleX(.75); opacity: .15; } }

/* 3. Golden-hour sun travelling a Fibonacci (golden) spiral: it rises on the
   horizon, leaves a gold trail along the spiral, settles in its eye and glows,
   over faint golden-ratio squares (the composition guide photographers use). */
.ma-sun { display: block; width: min(300px, 74%); height: auto; margin: 0 auto 1.2rem; color: var(--dorado-rico); overflow: visible; }
.ma-fib .ma-fib-grid { stroke-width: .8; opacity: .22; }
.ma-fib .ma-fib-guide { stroke-dasharray: 2 5; opacity: .45; }
.ma-fib .ma-fib-trail { stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ma-fib-trail 11s ease-in-out infinite; }
.ma-fib .ma-fib-dot, .ma-fib .ma-fib-glow { offset-path: path("M0 130 A130 130 0 0 1 130 0 A80 80 0 0 1 210 80 A50 50 0 0 1 160 130 A30 30 0 0 1 130 100 A20 20 0 0 1 150 80 A10 10 0 0 1 160 90 A10 10 0 0 1 150 100"); animation: ma-fib-move 11s ease-in-out infinite; }
.ma-fib .ma-fib-glow { animation-name: ma-fib-move, ma-fib-glow; }
@keyframes ma-fib-move { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 62%, 88% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ma-fib-trail { 0% { stroke-dashoffset: 1; opacity: 1; } 62%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ma-fib-glow { 0%, 60% { r: 9px; } 72% { r: 16px; } 84%, 100% { r: 12px; } }

/* 4. "Online" pulse next to WhatsApp links */
.ma-online { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3FBF6E; margin-left: 0.45rem; vertical-align: middle; }
.ma-online::before, .ma-online::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3FBF6E; animation: ma-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.ma-online::after { animation-delay: 1.2s; }
@keyframes ma-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }

/* 5. HDR bracket fan: three exposures open out, then merge */
.ma-hdr { position: relative; width: 120px; height: 82px; margin: 1.6rem auto 2.4rem; }
.ma-hdr i { position: absolute; inset: 0; border-radius: 6px; border: 1px solid rgba(63, 42, 71, 0.15); transform-origin: 50% 120%; }
.ma-hdr .ma-ev-dark { background: linear-gradient(160deg, #4b3a55, #1d1422); animation: ma-fan-l 4s ease-in-out infinite; }
.ma-hdr .ma-ev-bright { background: linear-gradient(160deg, #f6dfb4, #c9a07e); animation: ma-fan-r 4s ease-in-out infinite; }
.ma-hdr .ma-ev-mid { background: linear-gradient(160deg, #c88b52, #5a3c45); }
.ma-hdr span { position: absolute; bottom: -22px; font-size: 0.62rem; font-weight: 600; letter-spacing: .06em; color: var(--text-on-light-muted); white-space: nowrap; animation: ma-ev 4s ease-in-out infinite; }
.ma-hdr .ma-l { left: -28px; } .ma-hdr .ma-c { left: 50%; transform: translateX(-50%); } .ma-hdr .ma-r { right: -28px; }
@keyframes ma-fan-l { 0%, 15%, 85%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-14deg) translateX(-14px); } }
@keyframes ma-fan-r { 0%, 15%, 85%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(14deg) translateX(14px); } }
@keyframes ma-ev { 0%, 25%, 75%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }


/* 7. Location pin landing with a ripple */
.ma-pin { display: inline-block; width: 42px; height: 42px; vertical-align: -9px; margin-right: 0.35rem; color: var(--dorado-rico); }
.ma-pin .ma-pin-body { animation: ma-drop 4s cubic-bezier(.3,1.4,.5,1) infinite; }
.ma-pin .ma-pin-ripple { transform-origin: 50px 74px; animation: ma-rip 4s ease-out infinite; }
@keyframes ma-drop { 0% { transform: translateY(-24px); opacity: 0; } 12%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes ma-rip { 0%, 10% { transform: scale(.2); opacity: 0; } 14% { opacity: .7; } 45%, 100% { transform: scale(1.7); opacity: 0; } }

/* 8. Hand-drawn underline under a key word, drawn once */
.ma-underline { position: relative; display: inline-block; white-space: nowrap; }
.ma-underline svg { position: absolute; left: -3%; width: 106%; bottom: -0.32em; height: 0.42em; color: var(--dorado-rico); overflow: visible; }
.ma-underline path { stroke-width: 2.4; stroke-dasharray: 260; stroke-dashoffset: 260; }
.ma-underline.is-on path { transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .5s; stroke-dashoffset: 0; }

/* 9. Flight path through the five steps of working together (home, after
   packages; contact, above the form). The arrow flies the route at a steady
   pace, a gold trail draws in behind it, and each step's dot pulses as the
   arrow reaches it. Phones get the same steps as a vertical list, which is
   also what screen readers read everywhere. */
.ma-steps { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.5rem 4rem; text-align: center; }
.ma-steps > .eyebrow { text-align: center; }
.ma-steps > h2 { font-size: 2rem; color: var(--amatista); margin: 0.6rem auto 2rem; text-wrap: balance; }
.ma-steps svg { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; overflow: visible; color: var(--amatista); }
.ma-steps .ma-route { stroke-dasharray: 3 7; opacity: .45; }
.ma-steps .ma-trail { color: var(--dorado-rico); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ma-trail 10s linear infinite; }
.ma-steps .ma-node { fill: var(--dorado-rico); transform-box: fill-box; transform-origin: center; animation: ma-node 10s ease-out infinite; }
.ma-steps .ma-n1 { animation-delay: .2s; } .ma-steps .ma-n2 { animation-delay: 2.1s; } .ma-steps .ma-n3 { animation-delay: 4s; }
.ma-steps .ma-n4 { animation-delay: 5.9s; } .ma-steps .ma-n5 { animation-delay: 7.8s; }
.ma-steps .ma-plane { fill: var(--teal-joya); offset-path: path("M150 160 C 230 160, 270 70, 350 70 S 470 160, 550 160 S 670 70, 750 70 S 870 160, 950 160"); offset-rotate: auto; animation: ma-fly 10s linear infinite; }
.ma-steps text { font-family: var(--font-body); font-size: 16px; fill: var(--text-on-light-muted); }
.ma-steps text.ma-step-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; fill: var(--amatista); }
@keyframes ma-node { 0%, 4% { transform: scale(1); } 6% { transform: scale(1.8); } 12%, 100% { transform: scale(1); } }
@keyframes ma-fly { 0%, 8% { offset-distance: 0%; opacity: 0; } 9% { opacity: 1; } 84% { offset-distance: 100%; opacity: 1; } 92%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ma-trail { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 84%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ma-steps-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) {
  .ma-steps .ma-steps-wide { display: none; }
  .ma-steps-list { position: relative; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 1.3rem; padding-left: 2rem; text-align: left; max-width: 34rem; margin: 0 auto; }
  .ma-steps-list::before { content: ""; position: absolute; left: 6px; top: 0.5rem; bottom: 0.5rem; border-left: 2px dashed rgba(63, 42, 71, 0.28); }
  .ma-steps-list::after { content: ""; position: absolute; left: 3px; top: 0.5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-joya); animation: ma-walk 10s linear infinite; }
  .ma-steps-list li { position: relative; display: grid; gap: 0.15rem; }
  .ma-steps-list li::before { content: ""; position: absolute; left: calc(-2rem + 1px); top: 0.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--dorado-rico); animation: ma-node 10s ease-out infinite; }
  .ma-steps-list li:nth-child(1)::before { animation-delay: .2s; } .ma-steps-list li:nth-child(2)::before { animation-delay: 2.1s; }
  .ma-steps-list li:nth-child(3)::before { animation-delay: 4s; } .ma-steps-list li:nth-child(4)::before { animation-delay: 5.9s; }
  .ma-steps-list li:nth-child(5)::before { animation-delay: 7.8s; }
  .ma-steps-list strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--amatista); }
  .ma-steps-list span { font-size: 0.92rem; color: var(--text-on-light-muted); line-height: 1.5; }
  .ma-steps > h2 { font-size: 1.7rem; }
}
@keyframes ma-walk { 0%, 8% { top: 0.5rem; opacity: 0; } 9% { opacity: 1; } 84% { top: calc(100% - 1rem); opacity: 1; } 92%, 100% { top: calc(100% - 1rem); opacity: 0; } }

/* 10. Wave horizon used as a section divider */
.ma-wave { display: block; width: 100%; max-width: var(--max-width); height: 34px; margin: 0 auto; color: var(--teal-joya); opacity: .55; overflow: hidden; }
.ma-wave .ma-w1 { animation: ma-drift 11s linear infinite; }
.ma-wave .ma-w2 { animation: ma-drift 17s linear infinite reverse; opacity: .45; }
@keyframes ma-drift { to { transform: translateX(-120px); } }
.logos-band.has-wave { border-top: 0; padding-top: 1rem; }

/* 11. Gold rail that fills down the side of each checklist (FAQ) */
.vertical-panel ul.checklist.ma-rail { position: relative; padding-left: 1.1rem; }
.ma-rail::before, .ma-rail::after { content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; }
.ma-rail::before { background: rgba(63, 42, 71, 0.1); }
.ma-rail::after { background: var(--dorado-rico); transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.6,0,.2,1) .2s; }
.ma-rail.is-on::after { transform: scaleY(1); }

/* 12. Contour lines breathing behind the track-record band */
.track-record { position: relative; overflow: hidden; isolation: isolate; }
.ma-contour { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--dorado-rico); opacity: .16; pointer-events: none; }
.ma-contour path { transform-origin: 50% 50%; transform-box: view-box; animation: ma-breathe 12s ease-in-out infinite; }
.ma-contour { overflow: visible; }
.ma-contour path:nth-child(4n+2) { animation-delay: -3s; } .ma-contour path:nth-child(4n+3) { animation-delay: -6s; } .ma-contour path:nth-child(4n+4) { animation-delay: -9s; }
/* The rings are centered on the logo and run past the viewBox, so on a tall
   phone section the SVG keeps a fixed size and the overflow fills the rest. */
@media (max-width: 760px) {
  .track-record .ma-contour { inset: auto; left: 50%; top: 50%; width: 900px; height: 300px; transform: translate(-50%, -50%); }
}
@keyframes ma-breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.035) rotate(1.2deg); } }

/* 13 + 14. Camera overlays on the service-card photos (hover / focus) */
/* Photo-card overlays: they play once, the first time someone moves through
   that card's photos (js/main.js adds .ma-play), then stay out of the way.
   Autofocus brackets on real estate, a golden-ratio spiral on architecture,
   rule-of-thirds guides on vacation rentals. */
.ma-af, .ma-golden, .ma-thirds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ma-af i { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.92); opacity: 0; }
.ma-af i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; --ma-af-from: translate(-8px, -8px); }
.ma-af i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; --ma-af-from: translate(8px, -8px); }
.ma-af i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; --ma-af-from: translate(-8px, 8px); }
.ma-af i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; --ma-af-from: translate(8px, 8px); }
.ma-play .ma-af i { animation: ma-af-once 1.9s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes ma-af-once { 0% { opacity: 0; transform: var(--ma-af-from); } 18%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ma-golden { width: 100%; height: 100%; opacity: 0; }
.ma-golden path { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ma-golden .ma-golden-grid { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.ma-play .ma-golden { animation: ma-golden-fade 3s ease both; }
.ma-play .ma-golden path { animation: ma-golden-draw 1.6s cubic-bezier(.5,0,.2,1) forwards; }
.ma-play .ma-golden .ma-golden-grid { animation-duration: 1.1s; }
@keyframes ma-golden-draw { to { stroke-dashoffset: 0; } }
@keyframes ma-golden-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* Vacation rentals: rule-of-thirds guides draw across the photo, hold, fade. */
.ma-thirds i { position: absolute; background: rgba(255, 255, 255, 0.75); opacity: 0; }
.ma-thirds i:nth-child(-n+2) { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.ma-thirds i:nth-child(n+3) { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.ma-thirds i:nth-child(1) { left: 33.33%; transform-origin: top; }
.ma-thirds i:nth-child(2) { left: 66.66%; transform-origin: bottom; animation-delay: .08s !important; }
.ma-thirds i:nth-child(3) { top: 33.33%; transform-origin: left; animation-delay: .14s !important; }
.ma-thirds i:nth-child(4) { top: 66.66%; transform-origin: right; animation-delay: .2s !important; }
.ma-play .ma-thirds i:nth-child(-n+2) { animation: ma-thirds-v 2.4s cubic-bezier(.6,0,.2,1) both; }
.ma-play .ma-thirds i:nth-child(n+3) { animation: ma-thirds-h 2.4s cubic-bezier(.6,0,.2,1) both; }
@keyframes ma-thirds-v { 0% { opacity: 1; transform: scaleY(0); } 25%, 75% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes ma-thirds-h { 0% { opacity: 1; transform: scaleX(0); } 25%, 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* 15. Stars that fill one after another */
.ma-stars { display: inline-flex; gap: 4px; vertical-align: -3px; margin-right: 0.5rem; }
.ma-stars svg { width: 16px; height: 16px; overflow: visible; }
.ma-stars .ma-star-line { fill: none; stroke: var(--dorado-rico); stroke-width: 1.4; }
.ma-stars .ma-star-fill { fill: var(--dorado-rico); clip-path: inset(0 100% 0 0); transition: clip-path .45s ease-out; }
.ma-stars.is-on .ma-star-fill { clip-path: inset(0 0 0 0); }
.ma-stars.is-on svg:nth-child(2) .ma-star-fill { transition-delay: .15s; }
.ma-stars.is-on svg:nth-child(3) .ma-star-fill { transition-delay: .3s; }
.ma-stars.is-on svg:nth-child(4) .ma-star-fill { transition-delay: .45s; }
.ma-stars.is-on svg:nth-child(5) .ma-star-fill { transition-delay: .6s; }


/* 18. Arrow that steps forward on "Learn more" links */
.ma-arrow { display: inline-block; width: 14px; height: 9px; margin-left: 0.35rem; vertical-align: 0; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
a:hover > .ma-arrow, a:focus-visible > .ma-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ma-aperture *, .ma-drone *, .ma-sun *, .ma-online::before, .ma-online::after, .ma-hdr *, .ma-pin *,
  .ma-steps *, .ma-steps-list::after, .ma-steps-list li::before, .ma-wave *, .ma-contour * { animation: none !important; }
  .ma-fib .ma-fib-dot, .ma-fib .ma-fib-glow { offset-distance: 100%; }
  .ma-fib .ma-fib-trail { stroke-dashoffset: 0; }
  .ma-steps .ma-plane { offset-distance: 100%; }
  .ma-steps .ma-trail { stroke-dashoffset: 0; }
  .ma-underline path, .ma-stars .ma-star-fill, .ma-rail::after { transition: none !important; }
  .ma-underline path { stroke-dashoffset: 0; }
  .ma-stars .ma-star-fill { clip-path: inset(0 0 0 0); }
  .ma-rail::after { transform: scaleY(1); }
  .ma-af i, .ma-arrow { transition: none !important; }
  .ma-af i, .ma-golden, .ma-golden path, .ma-thirds i { animation: none !important; }
}


/* ===== Home: why it matters + return on investment =====
   Replaces the old mission carousel right under the hero: three short,
   direct reasons the visitor recognizes (market, standard, experience),
   then the ROI comparison that reframes the price as an investment. */
.why-band { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 1.5rem 0; text-align: center; }
.why-band h2 { margin-bottom: 0.5rem; }
.why-band > .eyebrow, .roi-band .eyebrow { text-align: center; }
.why-band h2, .roi-band h2 { font-size: 2rem; color: var(--amatista); margin: 0.6rem auto 2.2rem; text-wrap: balance; }
.roi-band { max-width: var(--max-width); margin: 0 auto; padding: 4rem 1.5rem 4.5rem; text-align: center; }
.roi-band h2 { margin-bottom: 1rem; }
.roi-lede { max-width: 62ch; margin: 0 auto 2.2rem; color: var(--text-on-light-muted); }
.roi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.roi-card { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(63, 42, 71, 0.12); border-radius: var(--radius); padding: 1.3rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.roi-card h3 { font-size: 1.2rem; color: var(--amatista); margin-bottom: 0.4rem; }
.roi-cost { font-size: 0.85rem; font-weight: 600; color: var(--text-on-light-muted); }
.roi-reach { font-size: 0.9rem; color: var(--text-on-light-muted); line-height: 1.5; }
.roi-source { font-size: 0.8rem; opacity: 0.8; white-space: nowrap; }
.roi-card.is-featured { background: var(--amatista); border-color: var(--dorado-rico); box-shadow: 0 14px 34px rgba(63, 42, 71, 0.22); }
.roi-card.is-featured h3 { color: var(--white); }
.roi-card.is-featured .roi-cost { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--dorado-rico); }
.roi-card.is-featured .roi-reach { color: var(--text-on-dark-muted); }
.roi-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 2.5rem; margin: 2.2rem auto 1.8rem; max-width: 900px; }
.roi-facts p { font-size: 0.92rem; color: var(--text-on-light-muted); max-width: 38ch; }
.roi-facts strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--amatista); }
.roi-facts span { font-size: 0.78rem; opacity: 0.85; }
.roi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media (max-width: 860px) {
  .roi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-band h2, .roi-band h2 { font-size: 1.7rem; }
}
.roi-divider { display: none; }
/* Phones: read as a comparison. The three upgrades shrink to compact rows,
   a short line sets up the contrast, and the photos card lands last as the
   payoff ("all those investments" then refers to what was just read). */
@media (max-width: 480px) {
  .roi-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .roi-card:not(.is-featured) { padding: 0.85rem 1rem; gap: 0.15rem; }
  .roi-card:not(.is-featured) h3 { font-size: 1.05rem; margin-bottom: 0.1rem; }
  .roi-card:not(.is-featured) .roi-reach { font-size: 0.85rem; }
  .roi-divider { display: block; margin: 0.9rem 0 0.2rem; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--amatista); }
}

/* About: the "Local & Proud" and "Adaptable" pillars, moved off the homepage. */
.about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value-card { cursor: default; }
.value-card:hover { transform: none; box-shadow: 0 8px 26px rgba(63, 42, 71, 0.08); }
.value-card .vertical-body h3 { color: var(--amatista); }
.value-card .value-fact { margin-top: 0.7rem; color: var(--teal-joya); font-weight: 500; }
@media (max-width: 700px) { .about-values-grid { grid-template-columns: minmax(0, 1fr); } }
/* The "why it matters" carousel sits right under its own heading, so it
   starts at the top of its box instead of centering in it. */
.why-band + .mission-carousel { padding-top: 1.5rem; }
.why-band + .mission-carousel .mission-slide { align-content: start; }
@media (min-width: 761px) { .why-band + .mission-carousel { min-height: 560px; } }

/* Client logos right under the hero: a compact trust strip. */
.logos-band--top { padding: 0.5rem 1.5rem 1.5rem; }
.logos-band--top .logos-eyebrow { margin-bottom: 1.2rem; }

/* Pricing fine print folds away; the summary reads as the section label. */
details.package-notes > summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; margin-bottom: 0; }
details.package-notes > summary::-webkit-details-marker { display: none; }
details.package-notes > summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
details.package-notes[open] > summary { margin-bottom: 0.7rem; }
details.package-notes[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.package-notes { padding-top: 1rem; padding-bottom: 1rem; }

/* Home reviews: the logo strip's carousel engine (js/main.js), slowed down,
   with three cards in view on desktop, two on tablet and one on phones. */
.reviews-carousel { --logos-visible: 3; margin: 0 -0.75rem; padding: 0.5rem 0 1.5rem; }
.reviews-carousel .logos-track { align-items: stretch; }
.review-slide { flex: 0 0 calc(100% / var(--logos-visible)); padding: 0 0.75rem; display: flex; user-select: none; }
.review-slide .review-card { width: 100%; }
@media (max-width: 860px) { .reviews-carousel { --logos-visible: 2; } }
@media (max-width: 560px) { .reviews-carousel { --logos-visible: 1.15; } } /* a sliver of the next card says "swipe" */

/* Video styles as tabs (js/main.js): one style's carousel at a time. */
.video-tabs {
  display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: -0.5rem auto 2.2rem; padding: 0.35rem;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
}
.video-tab {
  font: inherit; font-size: 0.88rem; letter-spacing: 0.02em; cursor: pointer;
  color: var(--text-on-dark-muted); background: transparent; border: 0; border-radius: 999px;
  padding: 0.6rem 1.15rem; transition: background-color .25s ease, color .25s ease;
}
.video-tab:hover { color: var(--white); }
.video-tab.is-active { background: var(--dorado-rico); color: var(--amatista); font-weight: 600; }
.video-tab:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.video-type[hidden] { display: none; }
@media (max-width: 560px) {
  .video-tab { font-size: 0.82rem; padding: 0.55rem 0.8rem; }
  .video-tab .vt-extra { display: none; } /* short labels so the three tabs fit one row */
}

/* "Turn your phone" hint in the lightbox (js/main.js): portrait phones only,
   shown once per viewing when a landscape photo opens. */
.lightbox-rotate-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 4.2rem; transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 0.6rem; max-width: calc(100vw - 2rem);
  padding: 0.6rem 1rem 0.6rem 0.7rem; border-radius: 999px;
  background: rgba(15, 9, 17, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(227, 207, 149, 0.35); color: var(--white); font-size: 0.85rem; line-height: 1.3;
  opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease;
}
.lightbox-rotate-hint.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lightbox-rotate-hint svg { width: 30px; height: 30px; flex: none; fill: none; stroke: #E3CF95; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-rotate-hint .lrh-phone { transform-origin: 24px 20px; }
.lightbox-rotate-hint.is-on .lrh-phone { animation: lrh-turn 2.2s ease-in-out .3s 2; }
@keyframes lrh-turn { 0%, 15% { transform: rotate(0); } 45%, 70% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .lightbox-rotate-hint.is-on .lrh-phone { animation: none; } }

/* Turn-in-place for rotation-locked phones (js/main.js). The photo rotates
   90° and is sized against the swapped screen axes so it fills the screen. */
.lightbox-turn {
  display: none; position: absolute; z-index: 1; top: 0.8rem; left: 0.8rem; width: 44px; height: 44px;
  align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  background: rgba(15, 9, 17, 0.38); border: 1px solid rgba(243, 237, 227, 0.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--white);
}
.lightbox-turn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-overlay.is-turned .lightbox-turn { background: rgba(200, 178, 115, 0.85); color: var(--amatista); border-color: transparent; }
@media (orientation: portrait) and (max-width: 900px) {
  .lightbox-overlay.is-wide .lightbox-turn { display: flex; }
}
.lightbox-overlay.is-turned .lightbox-image:not(.lightbox-image-neighbor) {
  max-width: 100vh; max-width: 100dvh; max-height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
}
.lightbox-overlay.is-turned .lightbox-counter { display: none; }
button.lightbox-rotate-hint { font: inherit; cursor: pointer; text-align: left; }

/* Gallery: closing "More on Instagram" band. A profile-style 3x2 grid of
   our own photos (static, no third-party widget) linking to @conecat.cr. */
.ig-band { max-width: 980px; margin: 0 auto; padding: 4rem 1.5rem 4.5rem; text-align: center; }
.ig-band h2 { font-size: 2rem; color: var(--amatista); margin: 0.4rem auto 0.6rem; text-wrap: balance; }
.ig-sub { color: var(--text-on-light-muted); max-width: 52ch; margin: 0 auto 1.1rem; }
.ig-handle { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--amatista); text-decoration: none; margin-bottom: 1.6rem; }
.ig-handle svg, .ig-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.ig-tile { display: block; aspect-ratio: 1; overflow: hidden; background: rgba(63, 42, 71, 0.08); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; }
.ig-tile:hover img { transform: scale(1.05); filter: brightness(1.05); }
.ig-btn { display: inline-flex; align-items: center; gap: 0.55rem; }
@media (max-width: 560px) { .ig-band h2 { font-size: 1.7rem; } .ig-grid { gap: 3px; } }

/* Double-height band for a showcase photo (last band on home). */
.parallax-band.parallax-band--tall { height: 46vh; min-height: 320px; }
@media (max-width: 860px) { .parallax-band.parallax-band--tall { height: 34vh; min-height: 240px; } }

/* Carousel dots are 6-8 px on purpose, which is too small for a finger. On touch
   screens each button grows to a 24 px target and the dot is drawn inside it, so
   the look stays the same but the tap area doesn't. Desktop is untouched. */
@media (pointer: coarse) {
  .mission-dots, .vp-carousel-dots, .video-dots { gap: 0; }
  .mission-dot, .vp-carousel-dot, .video-dot,
  .mission-dot.is-active, .vp-carousel-dot.is-active, .video-dot.is-active {
    position: relative; width: 24px; height: 24px; background: none;
  }
  .mission-dot::before, .vp-carousel-dot::before, .video-dot::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
    background: rgba(63, 42, 71, 0.2);
    transition: width 0.2s ease, margin 0.2s ease, background 0.2s ease;
  }
  .vp-carousel-dot::before { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: rgba(255, 255, 255, 0.55); }
  .video-dot::before { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: rgba(255, 255, 255, 0.35); }
  .video-dot.is-active::before { width: 18px; margin-left: -9px; background: var(--dorado-rico); }
  .mission-dot.is-active::before { width: 24px; margin-left: -12px; background: var(--dorado-rico); }
  .vp-carousel-dot.is-active::before { width: 16px; margin-left: -8px; background: var(--dorado-rico); }
}