@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================================
   DESIGN TOKENS
   Tuned per Utopia.fyi:
   • Viewport range: 320 → 1440
   • Type:  base 16px / ratio 1.2  at 320  →  18px / ratio 1.25 at 1440
   • Space: matched to type, with intermediate "pair" steps for content gutters
   • All preferred values use rem (not raw px/vw) so user zoom works
   ============================================================ */
:root {
  /* ── COLOR ─────────────────────────────── */
  --cream:        #ecebe3;
  --dark-brown:   #1f120b;
  --bronze:       #a1610c;
  --rust:         #862c08;
  --white:        #ffffff;

  /* Warm gray ladder — derived from --dark-brown, for muted text/borders */
  --warm-900:     #1f120b;            /* same as --dark-brown */
  --warm-700:     #4a3b30;
  --warm-500:     #7a6a5d;
  --warm-300:     #b8aca0;
  --warm-200:     #d6cec5;
  --warm-100:     #e6ddd0;

  /* ── FONTS ─────────────────────────────── */
  --font-serif:   'Inknut Antiqua', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;

  /* ── FLUID TYPE SCALE ──────────────────── */
  --step--2:       clamp(0.6944rem, 0.6872rem + 0.0357vw, 0.72rem);     /*  11.11 → 11.52 px */
  --step--1:       clamp(0.8333rem, 0.8143rem + 0.0952vw, 0.9rem);      /*  13.33 → 14.40 px */
  --step-0:        clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);         /*  16    → 18    px */
  --step-1:        clamp(1.2rem, 1.1411rem + 0.2946vw, 1.4063rem);      /*  19.20 → 22.50 px */
  --step-2:        clamp(1.44rem, 1.3492rem + 0.4536vw, 1.7578rem);     /*  23.04 → 28.13 px */
  --step-3:        clamp(1.728rem, 1.5936rem + 0.6722vw, 2.1973rem);    /*  27.65 → 35.16 px */
  --step-4:        clamp(2.0736rem, 1.8814rem + 0.9609vw, 2.7466rem);   /*  33.18 → 43.95 px */
  --step-5:        clamp(2.4883rem, 2.2186rem + 1.3487vw, 3.4332rem);   /*  39.81 → 54.93 px */
  --step-6:        clamp(2.986rem, 2.613rem + 1.8649vw, 4.2915rem);     /*  47.78 → 68.66 px */
  --step-display:  clamp(3rem, 1.7143rem + 6.4286vw, 7.5rem);           /*  48    → 120   px  (hero only) */

  /* ── FLUID SPACE SCALE ─────────────────── */
  --space-3xs:     clamp(0.25rem, 0.2411rem + 0.0446vw, 0.2813rem);     /*   4 →  4.5 px */
  --space-2xs:     clamp(0.5rem, 0.4821rem + 0.0893vw, 0.5625rem);      /*   8 →  9   px */
  --space-xs:      clamp(0.75rem, 0.7232rem + 0.1339vw, 0.8438rem);     /*  12 → 13.5 px */
  --space-s:       clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);         /*  16 → 18   px */
  --space-m:       clamp(1.5rem, 1.4464rem + 0.2679vw, 1.6875rem);      /*  24 → 27   px */
  --space-l:       clamp(2rem, 1.9286rem + 0.3571vw, 2.25rem);          /*  32 → 36   px */
  --space-xl:      clamp(3rem, 2.8929rem + 0.5357vw, 3.375rem);         /*  48 → 54   px */
  --space-2xl:     clamp(4rem, 3.8571rem + 0.7143vw, 4.5rem);           /*  64 → 72   px */
  --space-3xl:     clamp(6rem, 5.7857rem + 1.0714vw, 6.75rem);          /*  96 → 108  px */

  /* Space pairs — interpolate between two steps, for fluid section gutters */
  --space-2xs-xs:  clamp(0.5rem, 0.4018rem + 0.4911vw, 0.8438rem);      /*   8 → 13.5 px */
  --space-xs-s:    clamp(0.75rem, 0.6429rem + 0.5357vw, 1.125rem);      /*  12 → 18   px */
  --space-s-m:     clamp(1rem, 0.8036rem + 0.9821vw, 1.6875rem);        /*  16 → 27   px */
  --space-m-l:     clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);        /*  24 → 36   px */
  --space-l-xl:    clamp(2rem, 1.6071rem + 1.9643vw, 3.375rem);         /*  32 → 54   px */
  --space-xl-2xl:  clamp(3rem, 2.5714rem + 2.1429vw, 4.5rem);           /*  48 → 72   px */
  --space-2xl-3xl: clamp(4rem, 3.2143rem + 3.9286vw, 6.75rem);          /*  64 → 108  px */

  /* ── SHADOWS ───────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(31, 18, 11, 0.06), 0 1px 3px rgba(31, 18, 11, 0.10);
  --shadow-md:  0 2px 4px rgba(31, 18, 11, 0.08), 0 4px 12px rgba(31, 18, 11, 0.10);
  --shadow-lg:  0 4px 8px rgba(31, 18, 11, 0.10), 0 12px 28px rgba(31, 18, 11, 0.18);
  --shadow-xl:  0 8px 16px rgba(31, 18, 11, 0.12), 0 24px 48px rgba(31, 18, 11, 0.22);
  --shadow-btn-primary: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 14px 28px -10px rgba(0, 0, 0, 0.45);
  --shadow-btn-primary-hover: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 16px 28px -12px rgba(161, 97, 12, 0.55);

  /* ── SECTION DIVIDER ───────────────────── */
  /* Hand-drawn-feeling wave that suggests wood grain or river current,
     used as an editorial pause between sections. Inline SVG so it picks
     up currentColor and any color the surrounding context sets. */
  --divider-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' fill='none' stroke='%237a6a5d' stroke-width='1' stroke-linecap='round'><path d='M0 8 C 30 2, 60 14, 100 8 S 160 2, 200 8 S 260 14, 300 8 S 360 2, 400 8' opacity='0.55'/><path d='M0 12 C 30 6, 60 18, 100 12 S 160 6, 200 12 S 260 18, 300 12 S 360 6, 400 12' opacity='0.25'/></svg>");

  /* ── BUTTONS ───────────────────────────── */
  /* Touch target is a hard min-block-size, not padding stacked on font-size.
     This keeps mobile controls comfortable (44px WCAG floor) without
     ballooning the visual weight on desktop. */
  --btn-min-h:        clamp(2.75rem, 2.5714rem + 0.8929vw, 3.375rem); /* 44 → 54 px */
  --btn-min-h-sm:     2.75rem;                                       /* 44 px flat (icon buttons) */
  --btn-pad-y:        clamp(0.625rem, 0.5536rem + 0.3571vw, 0.875rem); /* 10 → 14 px */
  --btn-pad-x:        clamp(1.125rem, 0.875rem + 1.25vw, 2rem);       /* 18 → 32 px */
  --btn-pad-x-sm:     var(--space-s);                                /* compact buttons */
  --btn-font-size:    var(--step-0);                                 /* 16 → 18 px */
  --btn-font-size-lg: var(--step-1);                                 /* 19 → 22.5 px (hero) */
  --btn-radius:       var(--radius);
  --btn-gap:          var(--space-2xs-xs);                           /* gap between label + icon */

  /* ── LAYOUT ────────────────────────────── */
  --nav-height: 80px;
  --radius:     8px;
  --transition: 200ms ease;
}

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

::selection {
  background-color: var(--bronze);
  color: var(--white);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Offset anchor jumps so section titles don't land under the fixed nav */
:target,
section[id],
header[id] {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

/* Skip-to-content link: visible only when focused */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  background: var(--dark-brown);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1.5px solid var(--bronze);
  border-top: 0;
  text-decoration: none;
  transition: transform 220ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--dark-brown);
  background-color: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

/* Display headings safety net — large fluid type with a long word
   (e.g. "Encontradas", "hablemos") could otherwise overflow the viewport
   on small phones. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

/* Belt and braces — html cannot scroll horizontally either */
html { overflow-x: clip; }

/* ============================================================
   BODY-PARAGRAPH SYSTEM — single source of truth
   Every "body description" across the site uses the same treatment.
   Three sections (Process step cards / About columns / Location teaser /
   Product cards / Ubicación intro) should LOOK the same.
   ============================================================ */
.body-paragraph,
.step-card__desc,
.product-card__desc,
.about__column p,
.location-teaser__body,
.visit-waterfall__text,
.cta__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--warm-700);
}

/* Lead paragraph (under H2, more prominent than body) — only two valid uses:
   section-desc (intros below section titles) + about-lead (italic serif). */
.lead-paragraph,
.section-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--dark-brown);
}

/* ============================================================
   EDITORIAL DIVIDER — wood-grain wave between sections
   Usage: <hr class="grain-divider" aria-hidden="true">
   ============================================================ */
.grain-divider {
  display: block;
  width: min(420px, 60%);
  height: 16px;
  margin: 0 auto;
  border: 0;
  background-image: var(--divider-grain);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

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

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4.5vw, 4rem);
}

.container--narrow {
  max-width: 1074px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: background-color var(--transition), backdrop-filter var(--transition);
}

.nav.nav-scrolled {
  position: fixed;
  background-color: rgba(31, 18, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__inner {
  width: 100%;
  max-width: 1440px;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__logo {
  flex: 1;
  display: flex;
  align-items: center;
}

.nav__logo svg {
  display: block;
}

.nav__links {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--cream);
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: color var(--transition);
}

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

/* Active state — used on the page that represents the current section
   (e.g. "Visitanos" link while viewing ubicacion.html) */
.nav__link--active {
  color: var(--white);
  position: relative;
}

.nav__link--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1.5px;
  background: #D89455;
  border-radius: 2px;
}

.nav__actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.btn-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--btn-min-h-sm);
  min-inline-size: var(--btn-min-h-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size);
  color: var(--cream);
  background: rgba(31, 18, 11, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(236, 235, 227, 0.7);
  border-radius: var(--btn-radius);
  padding: 0 var(--space-s);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.btn-lang:hover {
  color: var(--bronze);
  border-color: var(--bronze);
  background-color: rgba(31, 18, 11, 0.75);
  transform: translateY(-1px);
}

.btn-lang:active {
  transform: translateY(0);
}

.btn-lang:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.btn-commission {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  min-block-size: var(--btn-min-h-sm);
  padding: 0 var(--space-m);
  background: rgba(31, 18, 11, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--cream);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--btn-font-size);
  color: var(--cream);
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(.2, .9, .25, 1);
}

@media (min-width: 640px) {
  .btn-commission {
    display: inline-flex;
  }
}

.btn-commission:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--dark-brown);
  transform: translateY(-1px);
}

.btn-commission:active {
  transform: translateY(0);
}

.btn-commission:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* Hamburger — WCAG 44px floor */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--btn-min-h-sm);
  height: var(--btn-min-h-sm);
  background: rgba(31, 18, 11, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(236, 235, 227, 0.7);
  border-radius: var(--btn-radius);
  cursor: pointer;
  padding: 11px 10px;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.nav__hamburger:hover {
  background-color: rgba(31, 18, 11, 0.75);
  border-color: var(--bronze);
  transform: translateY(-1px);
}

.nav__hamburger:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .nav__hamburger {
    display: none;
  }
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--cream);
  border-radius: 2px;
  transition: transform 300ms ease, opacity 300ms ease;
  transform-origin: center;
}

.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu — full-viewport overlay so it feels modal */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100dvh - var(--nav-height));
  background-color: rgba(31, 18, 11, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 4vw, 4rem);
  flex-direction: column;
  gap: 1.25rem;
  z-index: 99;
  border-top: 1px solid rgba(236, 235, 227, 0.1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav__mobile.is-open {
  display: flex;
}

@media (min-width: 1024px) {
  .nav__mobile,
  .nav__mobile.is-open {
    display: none;
  }
}

.nav__mobile .nav__link {
  font-size: var(--step-1);
  font-weight: 600;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 82svh;
  min-height: 82vh;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 767px) {
  .hero {
    min-height: 78svh;
    min-height: 78vh;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(38,28,22,0.75) 0%, rgba(38,28,22,0.5) 40%, transparent 100%);
}

.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 1200px;
  padding: 2rem clamp(1.5rem, 4vw, 4rem);
  padding-top: calc(var(--nav-height) + 2rem);
  text-align: center;
  gap: 0;
}

.hero__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 1.5rem;
  text-wrap: balance;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}

.hero__desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--cream);
  max-width: 980px;
  margin-bottom: 3rem;
  letter-spacing: -0.03em;
  text-wrap: balance;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}

.hero__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}

@media (min-width: 640px) {
  .hero__buttons {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-block-size: var(--btn-min-h);
  background-color: var(--cream);
  color: var(--dark-brown);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size-lg);
  letter-spacing: -0.025em;
  white-space: nowrap;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--cream);
  cursor: pointer;
  box-shadow: var(--shadow-btn-primary);
  transition:
    transform 220ms cubic-bezier(.2, .9, .25, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.btn-primary svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.btn-primary:hover {
  background-color: var(--bronze);
  border-color: var(--bronze);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-primary-hover);
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 6px 14px -8px rgba(31, 18, 11, 0.5);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--cream);
  background-color: rgba(31, 18, 11, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(236, 235, 227, 0.5);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size-lg);
  letter-spacing: -0.025em;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    text-decoration-color 220ms ease,
    text-decoration-thickness 220ms ease,
    text-underline-offset 220ms ease;
}

.btn-secondary:hover {
  color: var(--white);
  background-color: rgba(31, 18, 11, 0.55);
  border-color: var(--cream);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* ============================================================
   PROCESS SECTION
   ============================================================ */
.process {
  width: 100%;
  background-color: var(--cream);
  padding-block: var(--space-2xl-3xl);
}

.process__header {
  max-width: 898px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--warm-500);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--dark-brown);
}

.section-title .accent {
  color: var(--bronze);
  display: block;
}

.section-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--dark-brown);
  max-width: 600px;
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 640px) {
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .process__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step-card__top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step-card__icon {
  display: block;
  color: var(--bronze);                     /* keeps one role for bronze */
}

.step-card__num-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.step-card__line {
  width: 22px;
  height: 1px;
  background-color: var(--warm-500);
  flex-shrink: 0;
}

/* Step number — editorial marker, not a competing display element.
   Small, uppercase-tracked, mono-feel via tabular nums. */
.step-card__num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--warm-500);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.step-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-brown);
}

/* .step-card__desc — see body-paragraph rule above (single source of truth) */

/* ============================================================
   PRODUCTS SECTION
   ============================================================ */
.products {
  width: 100%;
  background-color: var(--dark-brown);
  padding-block: var(--space-2xl-3xl);
}

.products__header {
  text-align: center;
  margin-bottom: var(--space-xl-2xl);
}

.products__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.products__title .accent {
  color: var(--bronze);
}

.products__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l-xl);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .product-card {
    flex-direction: row;
    height: 500px;                    /* accommodates the longest description so the CTA
                                         lands at a consistent y-position across all cards */
  }

  .product-card--reverse {
    flex-direction: row-reverse;
  }
}

@media (min-width: 1024px) {
  .products .container--narrow {
    max-width: 1240px;
  }
}

.product-card__image {
  width: 100%;
  height: 300px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
  .product-card__image {
    width: 55%;
    height: auto;                       /* stretch to body via align-self */
    align-self: stretch;
    min-height: 460px;                  /* anchor a minimum so image doesn't collapse */
  }
}

@media (min-width: 1024px) {
  .product-card__image {
    width: 58%;
  }
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.03);
}

.product-card__body {
  background-color: var(--cream);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

@media (min-width: 768px) {
  .product-card__body {
    width: 45%;                         /* paired with image at 55% */
    padding: var(--space-l) var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .product-card__body {
    width: 42%;                         /* paired with image at 58% */
  }
}

.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-3);                  /* bigger; this is the headline of the card */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dark-brown);
  white-space: pre-line;
}

/* .product-card__desc — see body-paragraph rule above */


.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: fit-content;
  min-block-size: var(--btn-min-h-sm);   /* hit-target floor */
  padding: var(--space-2xs) 0;
  border-radius: 2px;
}

.product-card__cta span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--dark-brown);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(31, 18, 11, 0.4);
  transition:
    color 220ms ease,
    text-decoration-color 220ms ease,
    text-decoration-thickness 220ms ease,
    text-underline-offset 220ms ease;
}

.product-card__cta:hover span {
  color: var(--bronze);
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.product-card__cta svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.product-card__cta:hover svg {
  transform: translateX(4px);
}

.product-card__cta:hover svg path {
  stroke: var(--bronze);
  fill: var(--bronze);
}

.product-card__cta svg path {
  transition: fill 220ms ease, stroke 220ms ease;
}

.product-card__cta:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

#tallados-figuras-religiosas {
  object-position: 60% 15%;
}

#tallado-fauna-guanacaste{
  object-position: 60% 25%;
}

/* ============================================================
   ABOUT SECTION — Editorial layout (Menuiserie Perret inspired)
   ============================================================ */
.about {
  position: relative;
  width: 100%;
  background-color: var(--cream);
  color: var(--dark-brown);
  padding-block: var(--space-2xl-3xl);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle paper texture — barely perceptible warmth */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(161, 97, 12, 0.04) 0%,
      transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%,
      rgba(134, 44, 8, 0.03) 0%,
      transparent 70%);
}

.about__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl-2xl);
}

/* ---------- Editorial header ---------- */
.about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s-m);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-500);
}

.about__eyebrow-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--warm-300);
}

.about__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);             /* mobile-first: confident but not overwhelming */
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--dark-brown);
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .about__title {
    font-size: var(--step-6);             /* desktop scales up to the editorial display */
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 18ch;
  }
}

.about__since {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(31, 18, 11, 0.62);
  margin-top: 0.25rem;
}

/* ---------- Featured media — TV interview attribution ---------- */
.about__media {
  position: relative;
  margin: var(--space-l-xl) auto 0;
  width: 100%;
  max-width: 1180px;
  padding: 0 var(--space-2xs-xs);
}

/* Mobile — video goes full-bleed and gets a taller frame so the
   TV interview has editorial presence proportional to the title. */
@media (max-width: 767px) {
  .about__media {
    padding: 0;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    margin-block: var(--space-l) 0;
  }
  .about__media-caption {
    padding-inline: var(--space-s);
  }
}

/* TV-interview badge — small pill centered above the frame */
.about__media-badge {
  position: absolute;
  top: calc(var(--space-s) * -1);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-s);
  background: var(--dark-brown);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.about__media-badge svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.about__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background-color: rgba(31, 18, 11, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 4px rgba(31, 18, 11, 0.06),
    0 40px 80px -36px rgba(31, 18, 11, 0.45),
    0 18px 36px -24px rgba(31, 18, 11, 0.25);
  transform: translateZ(0);
  transition: transform 600ms cubic-bezier(.2, .9, .25, 1),
              box-shadow 600ms cubic-bezier(.2, .9, .25, 1);
}

@media (max-width: 767px) {
  .about__media-frame {
    width: 120%;
    border-radius: 0;
    aspect-ratio: 4 / 3;
    transform: translateX(-6%);
  }
}

.about__media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}

/* Subtle vignette to add depth without darkening the subject */
.about__media-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%,
      transparent 55%,
      rgba(31, 18, 11, 0.18) 100%);
  mix-blend-mode: multiply;
}

@media (hover: hover) {
  .about__media:hover .about__media-frame {
    transform: translateY(-4px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 2px 4px rgba(31, 18, 11, 0.08),
      0 56px 96px -36px rgba(31, 18, 11, 0.5),
      0 24px 44px -24px rgba(31, 18, 11, 0.3);
  }
}

@media (min-width: 768px) {
  .about__media-frame {
    aspect-ratio: 18.5 / 9;
  }
}

/* Caption beneath the media — newspaper byline feel */
.about__media-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-inline: 0.25rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 18, 11, 0.55);
}

.about__media-caption-rule {
  flex: 1;
  height: 1px;
  background: rgba(31, 18, 11, 0.18);
  margin-inline: 0.5rem;
}

.about__media-caption-left,
.about__media-caption-right {
  white-space: nowrap;
}

@media (max-width: 540px) {
  .about__media-caption {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    text-align: center;
  }
  .about__media-caption-rule {
    width: 32px;
    flex: 0 0 auto;
    margin-inline: 0;
  }
}

/* ---------- Lead paragraph ---------- */
.about__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(31, 18, 11, 0.78);
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Three-column subsection ---------- */
.about__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l-xl);
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .about__columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .about__columns--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about__columns--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about__column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);                /* match step-card rhythm */
  padding-top: var(--space-l);
  border-top: 1px solid var(--warm-200);
}

/* Section step number — matches .step-card__num treatment for site-wide
   consistency. Rule line + uppercase tracked sans + warm-500. */
.about__col-num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--warm-500);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.about__col-num::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--warm-500);
  flex-shrink: 0;
}

.about__col-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-brown);
  margin-top: var(--space-2xs);
}

.about__column p {
  margin-top: var(--space-2xs);
  /* Other typographic properties from .body-paragraph above */
}

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


/* ============================================================
   QUOTE SECTION — Standalone editorial moment
   ============================================================ */
.quote-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background-color: var(--cream);
  color: var(--dark-brown);
  padding-block: var(--space-2xl-3xl);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle warm halo behind the quote */
.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%,
      rgba(161, 97, 12, 0.05) 0%,
      transparent 70%);
}

.quote-section__block {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 1180px;
  padding-inline: var(--space-xs-s);
  text-align: center;
}

.quote-section__text {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-4);            /* 33→44px — fits "herramientas" without breaking */
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--dark-brown);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
  display: inline;
  hyphens: none;                        /* don't break Spanish words mid-syllable */
}

@media (min-width: 768px) {
  /* On wider screens we have room for the full editorial scale */
  .quote-section__text { font-size: var(--step-5); }
}

.quote-section__mark {
  display: inline;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--bronze);
  vertical-align: baseline;
}

@media (min-width: 768px) {
  .quote-section__mark { font-size: var(--step-5); }
}

/* Optical balance for centered italic text.
   Italic glyphs lean right; the open " has more visual mass on its left
   than the close " has on its right. Two corrections:
   1) Hang both marks OUTSIDE the text via larger negative margins, so the
      quote text itself does the centering work, not the marks.
   2) Shift the entire block left by 0.15em to compensate for the italic
      rightward visual mass. Result: centered text reads centered. */
.quote-section__block {
  transform: translateX(-0.15em);
}

.quote-section__mark--open {
  margin-right: 0.08em;
  margin-left: -0.45em;                /* hang to the left of the text */
}

.quote-section__mark--close {
  margin-left: 0.08em;
  margin-right: -0.45em;                /* hang to the right of the text */
}

/* Quote attribution — centered with a balanced rule line on each side
   of the author name, so removing the role doesn't leave a lopsided dash. */
.quote-section__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l-xl);
}

.quote-section__rule {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--warm-300);
}

/* Mirror the rule on the opposite side via ::after pseudo on the parent,
   so the author sits between two equal rule lines. */
.quote-section__meta::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--warm-300);
}

.quote-section__author {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  color: var(--dark-brown);
}


/* ============================================================
   UBICACIÓN SECTION — Editorial layout (Hutstuf inspired)
   ============================================================ */

.ubicacion {
  position: relative;
  width: 100%;
  background-color: var(--cream);
  color: var(--dark-brown);
  padding-block: var(--space-2xl-3xl);
  border-top: 1px solid rgba(31, 18, 11, 0.06);
  overflow: hidden;
  isolation: isolate;
}

.ubicacion::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%,
      rgba(161, 97, 12, 0.05) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 100%,
      rgba(134, 44, 8, 0.04) 0%,
      transparent 70%);
}

/* ---------- 1. Editorial label (top of the section) ---------- */
/* Label row: indicator lines + h5 */
.ubicacion__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-bottom: var(--space-s-m);       /* space before the big title */
}

.ubicacion__lines {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.ubicacion__line {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--dark-brown);
  opacity: 0.3;
  transition: opacity 220ms ease, width 220ms ease;
}

.ubicacion__line--active {
  opacity: 1;
  width: 28px;
}

.ubicacion__label-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: -0.01em;
  color: var(--dark-brown);
  margin: 0;
}

/* ---------- Editorial header: title left, content right ---------- */
.ubicacion__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;                       /* MOBILE: stacked */
  gap: var(--space-m-l);
  align-items: end;                                 /* bottoms align (content sits at title baseline) */
  margin-bottom: var(--space-xl-2xl);
}

@media (min-width: 900px) {
  .ubicacion__top {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);  /* DESKTOP: title wider, content narrower */
    gap: var(--space-xl-2xl);
  }
}

.ubicacion__titles {
  display: flex;
  flex-direction: column;
}

.ubicacion__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-6);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--dark-brown);
  text-wrap: balance;
  margin: 0;
}

.ubicacion__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
}

.ubicacion__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(31, 18, 11, 0.72);
  text-wrap: pretty;
  margin: 0;
}

.ubicacion__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--dark-brown);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(31, 18, 11, 0.35);
  transition: color 220ms ease,
              text-decoration-color 220ms ease,
              text-decoration-thickness 220ms ease,
              text-underline-offset 220ms ease;
}

.ubicacion__link svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.ubicacion__link:hover {
  color: var(--bronze);
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}

.ubicacion__link:hover svg {
  transform: translateX(4px);
}

.ubicacion__link:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

/* ---------- Featured image — aligned to the .container grid ---------- */
.ubicacion__images {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;                                /* same as .container max-width */
  margin: var(--space-s-m) auto var(--space-xl-2xl);
  padding-inline: clamp(1.5rem, 4.5vw, 4rem);       /* same as .container padding */
}

.ubicacion__images-left {
  /* MOBILE = card: portrait 3/4 with rounded corners and lifted shadow.
     DESKTOP override below = cinematic 21/9 with subtle styling. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cream);
  margin: 0;
  box-shadow: 0 8px 24px -12px rgba(31, 18, 11, 0.22),
              0 2px 6px -2px rgba(31, 18, 11, 0.08);
}

@media (min-width: 768px) {
  .ubicacion__images-left {
    aspect-ratio: 21 / 9;
    border-radius: 4px;
    box-shadow: 0 4px 14px -8px rgba(31, 18, 11, 0.14);
  }
}

.ubicacion__images-left img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---------- Shared placeholder ---------- */
.ubicacion__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  background:
    linear-gradient(135deg,
      rgba(161, 97, 12, 0.10) 0%,
      rgba(31, 18, 11, 0.04) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(31, 18, 11, 0.025) 14px,
      rgba(31, 18, 11, 0.025) 15px
    );
  color: rgba(31, 18, 11, 0.55);
}

.ubicacion__placeholder-icon {
  opacity: 0.5;
  margin-bottom: 0.4rem;
}

.ubicacion__placeholder-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: rgba(31, 18, 11, 0.72);
}

.ubicacion__placeholder-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(31, 18, 11, 0.42);
}

/* ---------- 3. Map + dark contact card ---------- */
.ubicacion__contact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s-m);
}

@media (min-width: 900px) {
  .ubicacion__contact {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* Map */
.ubicacion__map {
  /* The square frame holding the Google Map iframe */
  position: relative;
  aspect-ratio: 16 / 11;                              /* MAP FRAME SHAPE — change to 1/1 for square, 4/3 for taller, etc. */
  overflow: hidden;
  border-radius: 6px;
  background: #e8e4dc;
  box-shadow:
    0 0 0 1px rgba(31, 18, 11, 0.12),                 /* RING / BORDER — thin outline that separates map from cream bg */
    0 8px 20px -10px rgba(31, 18, 11, 0.22);          /* DROP SHADOW — depth below the frame */
}

@media (min-width: 900px) {
  .ubicacion__map {
    aspect-ratio: auto;
    min-height: 520px;
  }
}

.ubicacion__map-iframe {
  /* The actual Google Maps embed */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* COLOR TREATMENT — saturate > 1 = more vivid; contrast > 1 = more punch; brightness < 1 = slightly darker */
  filter: saturate(1.15) contrast(1.12) brightness(0.97);
}

/* Floating address pin (top center) */
.ubicacion__map-pin {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  background: var(--white);
  border-radius: 8px;
  box-shadow:
    0 4px 14px -8px rgba(31, 18, 11, 0.18),
    0 0 0 1px rgba(31, 18, 11, 0.05);
  pointer-events: none;
  max-width: calc(100% - 2rem);
  z-index: 2;
}

.ubicacion__map-pin-icon {
  color: var(--rust);
  flex-shrink: 0;
}

.ubicacion__map-pin-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.ubicacion__map-pin-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(31, 18, 11, 0.55);
}

.ubicacion__map-pin-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--dark-brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Open in Google Maps CTA */
.ubicacion__map-cta {
  position: absolute;
  bottom: var(--space-s);
  right: var(--space-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: var(--btn-min-h-sm);
  padding: 0 var(--space-m);
  background: var(--dark-brown);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: -0.01em;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: background-color 220ms ease,
              transform 220ms cubic-bezier(.2, .9, .25, 1),
              box-shadow 220ms ease;
  z-index: 2;
  white-space: nowrap;
}

.ubicacion__map-cta:hover {
  background: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(161, 97, 12, 0.45);
}

.ubicacion__map-cta:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.ubicacion__map-cta svg {
  flex-shrink: 0;
}

/* Dark contact card */
.ubicacion__contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s-m);
  padding: var(--space-m-l);
  background: var(--dark-brown);
  color: var(--cream);
  border-radius: 6px;
  box-shadow:
    0 6px 18px -10px rgba(31, 18, 11, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}

.ubicacion__contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%,
      rgba(161, 97, 12, 0.12) 0%,
      transparent 60%);
}

.ubicacion__contact-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ubicacion__contact-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);                    /* dark contact card — bronze reads here */
  margin-bottom: var(--space-2xs);
}

.ubicacion__contact-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
}

.ubicacion__contact-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(236, 235, 227, 0.7);
}

/* Animated chat conversation */
.ubicacion__chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  min-height: 240px;
}

/* Override .reveal default behavior for chat container (keep visible, let bubbles animate) */
.ubicacion__chat.reveal {
  opacity: 1;
  transform: none;
}

.chat-bubble {
  position: relative;
  max-width: 82%;
  padding: 0.6rem 0.85rem 0.5rem;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.chat-bubble-text {
  display: block;
  color: inherit;
}

.chat-bubble-time {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
  text-align: right;
}

.chat-bubble--customer {
  align-self: flex-start;
  background: rgba(236, 235, 227, 0.08);
  color: var(--cream);
  border-bottom-left-radius: 4px;
}

.chat-bubble--carlos {
  align-self: flex-end;
  background: var(--bronze);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

/* Trigger bubble entrance when chat container becomes visible */
.ubicacion__chat.is-visible .chat-bubble {
  opacity: 1;
  transform: translateY(0);
}

.ubicacion__chat.is-visible .chat-bubble:nth-child(1) { transition-delay: 0.25s; }
.ubicacion__chat.is-visible .chat-bubble:nth-child(2) { transition-delay: 0.85s; }
.ubicacion__chat.is-visible .chat-bubble:nth-child(3) { transition-delay: 1.45s; }
.ubicacion__chat.is-visible .chat-bubble:nth-child(4) { transition-delay: 2.05s; }

/* Contact CTA */
.ubicacion__contact-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-block-size: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--cream);
  color: var(--dark-brown);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size-lg);
  letter-spacing: -0.02em;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--cream);
  box-shadow: var(--shadow-md);
  transition: background-color 220ms ease,
              color 220ms ease,
              transform 220ms cubic-bezier(.2, .9, .25, 1),
              box-shadow 220ms ease;
  margin-top: auto;
}

.ubicacion__contact-cta svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.ubicacion__contact-cta:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2),
              0 16px 28px -12px rgba(161, 97, 12, 0.55);
}

.ubicacion__contact-cta:hover svg {
  transform: translateX(4px);
}

.ubicacion__contact-cta:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ubicacion__images {
    scroll-behavior: auto;
  }
  .ubicacion__map-cta,
  .ubicacion__contact-cta,
  .ubicacion__link,
  .ubicacion__link svg,
  .chat-bubble {
    transition: none;
  }
}


/* ============================================================
   VISIT PAGE — Dedicated /ubicacion.html
   Page-hero (dark band) + intro grid + map/contact wrapper +
   breadcrumb + back-link. Reuses .ubicacion__map, .ubicacion__contact,
   .ubicacion__contact-card and .chat-bubble for the inner content.
   ============================================================ */

/* ---------- Page hero (dark editorial band that hosts the nav) ---------- */
.page-hero {
  position: relative;
  width: 100%;
  background-color: var(--dark-brown);
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--nav-height) + var(--space-xl-2xl));
  padding-bottom: var(--space-2xl-3xl);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%,
      rgba(161, 97, 12, 0.22) 0%,
      transparent 65%),
    radial-gradient(ellipse 60% 45% at 8% 110%,
      rgba(134, 44, 8, 0.18) 0%,
      transparent 65%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s-m);
}

/* Breadcrumb */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.breadcrumb a {
  color: rgba(236, 235, 227, 0.6);
  transition: color 220ms ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--cream);
  outline: none;
}

.breadcrumb a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.breadcrumb__sep {
  color: rgba(236, 235, 227, 0.28);
}

.breadcrumb__current {
  color: #D89455;
}

/* Eyebrow */
.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);                    /* dark page-hero — bronze reads here */
}

.page-hero__rule {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: #D89455;
  opacity: 0.7;
}

/* Title */
.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-display);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.page-hero__title-line {
  display: block;
}

.page-hero__title-em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--bronze);
}

/* Subtitle */
.page-hero__subtitle {
  max-width: 56ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  color: rgba(236, 235, 227, 0.78);
  text-wrap: pretty;
  margin: 0.25rem 0 0;
}

/* Facts strip */
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s-m);
  margin: var(--space-m-l) 0 0;
  padding-top: var(--space-s-m);
  border-top: 1px solid rgba(236, 235, 227, 0.12);
  max-width: 560px;
}

.page-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.page-hero__fact dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(236, 235, 227, 0.5);
}

.page-hero__fact dd {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}


/* ---------- Visit contact (cream wrapper around reused map+card) ---------- */
.visit-contact {
  background-color: var(--cream);
  padding-block: var(--space-xl-2xl) var(--space-2xl-3xl);
  border-top: 1px solid rgba(31, 18, 11, 0.06);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.visit-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%,
      rgba(161, 97, 12, 0.05) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 100%,
      rgba(134, 44, 8, 0.04) 0%,
      transparent 70%);
}

.visit-contact > .container {
  position: relative;
  z-index: 1;
}

.visit-contact__header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: var(--space-l-xl);
  max-width: 760px;
}


/* ---------- Quiet back-to-home link ---------- */
.visit-back {
  margin-top: var(--space-xl-2xl);
  display: flex;
  justify-content: center;
}

.visit-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  color: rgba(31, 18, 11, 0.65);
  padding: 0.65rem 0.25rem;
  transition: color 220ms ease, gap 220ms cubic-bezier(.2, .9, .25, 1);
}

.visit-back__link svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.visit-back__link:hover {
  color: var(--dark-brown);
  gap: 0.95rem;
}

.visit-back__link:hover svg {
  transform: rotate(180deg) translateX(4px);
}

.visit-back__link:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .visit-back__link,
  .visit-back__link svg,
  .breadcrumb a {
    transition: none;
  }
}

/* Visit subpage: reference-inspired article header + homepage navbar */
.page-visit {
  background: var(--cream);
}

.page-visit .nav {
  position: fixed;
  z-index: 10000;
  isolation: isolate;
  background-color: var(--dark-brown);
  border-bottom: 1px solid rgba(236, 235, 227, 0.1);
  box-shadow: 0 14px 32px -24px rgba(31, 18, 11, 0.72);
  transform: translateZ(0);
}

.page-visit .nav.nav-scrolled {
  background-color: var(--dark-brown);
  box-shadow: 0 14px 32px -24px rgba(31, 18, 11, 0.72);
}

.page-visit .nav__inner {
  position: relative;
  z-index: 1;
}

.page-visit .nav__logo path {
  fill: var(--cream);
}

.page-visit .nav__link {
  color: var(--cream);
  font-weight: 500;
}

.page-visit .nav__link:hover,
.page-visit .nav__link--active {
  color: var(--white);
}

.page-visit .btn-lang,
.page-visit .btn-commission,
.page-visit .nav__hamburger {
  background: rgba(31, 18, 11, 0.5);
  border-color: rgba(236, 235, 227, 0.7);
  color: var(--cream);
}

.page-visit .btn-lang:hover,
.page-visit .btn-commission:hover,
.page-visit .nav__hamburger:hover {
  border-color: var(--bronze);
  background-color: rgba(31, 18, 11, 0.75);
}

.page-visit .nav__hamburger span {
  background-color: var(--cream);
}

.page-visit .nav__mobile {
  z-index: 9999;
  background-color: rgba(31, 18, 11, 0.97);
  border-top: 1px solid rgba(236, 235, 227, 0.1);
}

.page-visit .nav__mobile .nav__link {
  color: var(--cream);
}

.page-visit .page-hero {
  background: var(--cream);
  color: var(--dark-brown);
  padding: 0;
  isolation: auto;
  overflow: visible;
}

.page-visit .page-hero__inner {
  min-height: clamp(560px, 78svh, 760px);
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-bottom: var(--space-m-l);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: var(--space-s-m);
}

.page-visit .page-hero__label {
  margin-top: var(--space-l);
  gap: 0.55rem;
  color: var(--dark-brown);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-hero__dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--dark-brown);
  flex: 0 0 auto;
}

.page-visit .page-hero__title {
  display: block;
  max-width: 15ch;
  color: var(--dark-brown);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 6vw;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.page-visit .page-hero__title-em {
  display: block;
  color: var(--dark-brown);
  font-style: normal;
  font-weight: 700;
}

.page-visit .page-hero__subtitle {
  max-width: 54ch;
  color: rgba(31, 18, 11, 0.72);
  font-size: var(--step-1);
  margin: 0;
}

.page-visit .page-hero__subtitle em {
  font-style: italic;
  font-weight: 500;
  color: var(--bronze);
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-self: end;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dark-brown);
}

.page-hero__image {
  position: relative;
  width: 100%;
  height: clamp(240px, 34vh, 420px);
  margin: 0;
  overflow: hidden;
  background: rgba(31, 18, 11, 0.08);
  border-top: 1px solid rgba(31, 18, 11, 0.08);
}

.page-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}

@media (max-width: 767px) {
  .page-visit .page-hero {
    background:
      linear-gradient(180deg,
        #f4f1e8 0%,
        var(--cream) 58%,
        #e4e0d4 100%);
  }

  .page-visit .nav__inner {
    padding-inline: 1rem;
    gap: 0.5rem;
  }

  .page-visit .nav__logo,
  .page-visit .nav__actions {
    flex: 0 0 auto;
  }

  .page-visit .nav__actions {
    gap: 0.5rem;
  }

  .page-visit .btn-lang {
    min-inline-size: 3rem;
    padding-inline: 0.65rem;
  }

  .page-visit .page-hero__inner {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-l));
    padding-bottom: var(--space-l);
    grid-template-rows: auto;
    gap: var(--space-xs-s);
    overflow: hidden;
  }

  .page-visit .page-hero__label {
    width: fit-content;
    margin-top: 0;
    padding: 0.38rem 0.62rem 0.34rem;
    gap: 0.45rem;
    border: 1px solid rgba(122, 106, 93, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    color: var(--warm-700);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .page-visit .page-hero__title {
    max-width: 100%;
    font-size: 6vw;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .page-visit .page-hero__title-line,
  .page-visit .page-hero__title-em,
  .page-visit .page-hero__subtitle {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-visit .page-hero__subtitle {
    font-size: var(--step-1);
    line-height: 1.45;
  }

  .page-hero__dot {
    width: 0.42rem;
    height: 0.42rem;
    background: var(--bronze);
    opacity: 0.72;
  }

  .page-hero__meta {
    align-self: start;
    gap: 0.5rem 0.6rem;
    margin-top: var(--space-xs);
    padding-top: var(--space-s);
    border-top: 1px solid rgba(31, 18, 11, 0.1);
    color: var(--warm-700);
    font-size: var(--step--2);
  }

  .page-hero__meta span {
    padding: 0.34rem 0.5rem 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  .page-hero__image {
    height: clamp(250px, 33svh, 340px);
  }
}

/* Sticky image stack for the visit page.
   The section is normal document flow: no scroll hijacking. Each frame is
   100vh tall and sticky to the top, so the next frame naturally scrolls over
   the current one. Scrolling upward reverses the stack without extra JS. */
.visit-image-stack {
  --stack-vh: 100svh;
  --stack-screen: var(--stack-vh);
  --stack-stand-length: 2;
  --stack-next-offset: -1;
  position: relative;
  background: var(--dark-brown);
  isolation: isolate;
}

.visit-image-stack__frame {
  position: relative;
  z-index: var(--stack-layer, 1);
  width: 100%;
  height: var(--stack-screen);
}

/* The first scene is taller than its image. Its inner image sticks while the
   second scene scrolls upward over it, creating the stack. */
.visit-image-stack__frame--stand {
  height: calc(var(--stack-screen) * var(--stack-stand-length));
}

/* Pull the second scene up by one viewport so it starts covering the first
   sticky image before the whole section releases back to normal scrolling. */
.visit-image-stack__frame--waterfall {
  margin-top: calc(var(--stack-screen) * var(--stack-next-offset));
}

.visit-image-stack__sticky {
  position: sticky;
  top: 0;
  height: var(--stack-screen);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-brown);
}

.visit-image-stack__frame img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transform: scale(1.01);
}

.visit-image-stack__frame--stand img {
  object-position: center 45%;
}

.visit-image-stack__frame--waterfall img {
  object-position: center 48%;
}

.visit-image-stack__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(31, 18, 11, 0.05) 0%,
      rgba(31, 18, 11, 0.02) 36%,
      rgba(31, 18, 11, 0.58) 100%);
}

.visit-image-stack__frame--waterfall .visit-image-stack__shade {
  background:
    linear-gradient(0deg,
      rgba(31, 18, 11, 0.62) 0%,
      rgba(31, 18, 11, 0.05) 58%,
      rgba(31, 18, 11, 0.16) 100%);
}

.visit-image-stack__copy {
  position: absolute;
  left: var(--space-m);
  right: auto;
  bottom: calc(var(--space-m) + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (var(--space-m) * 2));
  padding: 0.58rem 0.82rem 0.52rem;
  color: var(--dark-brown);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 18, 11, 0.08);
  border-radius: 3px;
  box-shadow: 0 10px 22px -18px rgba(31, 18, 11, 0.75);
}

.visit-image-stack__copy--lower {
  bottom: calc(var(--space-l) + env(safe-area-inset-bottom));
}

.visit-image-stack__eyebrow {
  display: none;
}

.visit-image-stack__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-brown);
}

.visit-image-stack__text {
  display: none;
}

@media (min-width: 768px) {
  .visit-image-stack__copy {
    left: clamp(3rem, 8vw, 8rem);
    right: auto;
    bottom: clamp(3rem, 8vh, 6rem);
    padding: var(--space-s-m);
  }

  .visit-image-stack__copy--lower {
    bottom: clamp(4rem, 10vh, 7rem);
  }
}

@media (max-width: 767px) {
  .visit-image-stack {
    --stack-screen: clamp(20.5rem, 92vw, 23.5rem);
    display: grid;
    gap: 0.35rem;
    background: var(--cream);
  }

  .visit-image-stack__frame,
  .visit-image-stack__frame--stand {
    height: var(--stack-screen);
  }

  .visit-image-stack__frame--waterfall {
    margin-top: 0;
  }

  .visit-image-stack__sticky {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
    box-shadow: 0 1px 0 rgba(31, 18, 11, 0.12) inset;
  }

  .visit-image-stack__frame--stand img {
    object-position: center 55%;
    filter: saturate(0.92) contrast(1.03);
    transform: none;
  }

  .visit-image-stack__frame--waterfall img {
    object-position: 48% 50%;
  }

  .visit-image-stack__frame--stand .visit-image-stack__shade {
    background:
      linear-gradient(180deg,
        rgba(31, 18, 11, 0.02) 0%,
        rgba(31, 18, 11, 0.05) 100%);
  }

  .visit-image-stack__copy,
  .visit-image-stack__copy--lower {
    left: 1.5rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    display: inline-flex;
    max-width: calc(100% - 3rem);
    padding: 0.55rem 0.7rem 0.5rem;
  }

  .visit-image-stack__title {
    font-size: clamp(0.78rem, 3.6vw, 0.95rem);
    line-height: 1.05;
  }

}

@media (max-width: 520px) {
  .visit-image-stack__frame--stand img {
    object-position: center 55%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visit-image-stack__frame img {
    transform: none;
  }
}


/* ============================================================
   CTA SECTION
   ============================================================ */
.cta {
  width: 100%;
  background-color: var(--cream);
  padding-block: var(--space-2xl-3xl);
  border-top: 1px solid rgba(31,18,11,0.08);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .cta__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 6rem;
  }
}

.cta__left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .cta__left {
    width: 45%;
  }
}

.cta__subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  color: var(--warm-500);
  text-transform: uppercase;
}

.cta__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--dark-brown);
  overflow-wrap: normal;
  text-wrap: balance;
}

.cta__title .accent {
  display: inline-block;
  color: var(--bronze);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}

.cta__desc {
  /* "Lead paragraph" treatment — stronger color since cta is a key conversion moment */
  color: var(--dark-brown);
  font-weight: 500;
  /* Other typography from .body-paragraph rule above */
}

.btn-whatsapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-block-size: var(--btn-min-h);
  background-color: var(--dark-brown);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size-lg);
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1.5px solid var(--dark-brown);
  border-radius: var(--btn-radius);
  width: fit-content;
  margin-top: auto;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 10px 24px -12px rgba(31, 18, 11, 0.55);
  transition:
    transform 220ms cubic-bezier(.2, .9, .25, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.btn-whatsapp:hover {
  background-color: var(--bronze);
  border-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 16px 28px -12px rgba(161, 97, 12, 0.55);
}

.btn-whatsapp:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 6px 14px -8px rgba(31, 18, 11, 0.5);
}

.btn-whatsapp:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.btn-whatsapp svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.btn-whatsapp:hover svg {
  transform: translateX(4px);
}

/* Postcard composition */
.cta__postcard {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

@media (min-width: 1024px) {
  .cta__postcard {
    width: 50%;
    min-height: 540px;
    padding: 0;
  }
}

/* Photo card — like a print resting on the table */
.cta__photo {
  position: relative;
  background: var(--white);
  padding: 0.875rem 0.875rem 3.25rem;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 4px rgba(31, 18, 11, 0.08),
    0 30px 60px -28px rgba(31, 18, 11, 0.45);
  transform: rotate(-1.6deg);
  transition: transform 500ms cubic-bezier(.2, .9, .25, 1);
  width: min(100%, 380px);
  z-index: 1;
}

@media (min-width: 1024px) {
  .cta__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: min(85%, 360px);
  }
}

.cta__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1px;
  filter: saturate(0.95) contrast(1.02);
}

.cta__photo-caption {
  position: absolute;
  bottom: 0.9rem;
  left: 1rem;
  right: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dotted rgba(31, 18, 11, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--dark-brown);
}

.cta__photo-year {
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 18, 11, 0.5);
}

/* Rubber-stamp postmark */
.cta__stamp {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.5px solid #A86934;
  background: rgba(236, 235, 227, 0.88);
  color: #A86934;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(11deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

.cta__stamp::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid #A86934;
  opacity: 0.55;
}

.cta__stamp-dot {
  font-size: 1.1rem;
  line-height: 0.4;
  margin-top: 2px;
}

.cta__stamp-line--cr {
  letter-spacing: 0.14em;
  margin-top: 2px;
}

/* Luggage tag with destination details */
.cta__tag {
  position: relative;
  width: min(100%, 320px);
  margin-top: -1.75rem;
  padding: 1.75rem 1.75rem 1.9rem;
  background: var(--white);
  border-radius: 4px;
  border: 1px solid rgba(31, 18, 11, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 18px 36px -20px rgba(31, 18, 11, 0.4);
  transform: rotate(1.4deg);
  transition: transform 500ms cubic-bezier(.2, .9, .25, 1);
  z-index: 2;
}

@media (min-width: 1024px) {
  .cta__tag {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 0;
  }
}

/* Punched hole at the top — like a real tag */
.cta__tag-hole {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(31, 18, 11, 0.2);
}

.cta__tag-inner {
  padding-top: 0.85rem;
}

.cta__tag-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--rust);
  text-transform: uppercase;
  text-align: center;
}

.cta__tag-divider {
  height: 1px;
  margin: 0.85rem 0 1.1rem;
  background-image: radial-gradient(circle, rgba(31, 18, 11, 0.35) 1px, transparent 1.2px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: center;
}

.cta__tag-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}

.cta__tag-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.cta__tag-step-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--rust);
  letter-spacing: 0.02em;
  padding-top: 0.1rem;
  min-width: 1.4rem;
}

.cta__tag-step-body {
  display: grid;
  gap: 0.2rem;
}

.cta__tag-step-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--dark-brown);
}

.cta__tag-step-desc {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(31, 18, 11, 0.7);
}

/* On hover, the composition settles a little */
@media (hover: hover) {
  .cta__postcard:hover .cta__photo {
    transform: rotate(-0.6deg);
  }
  .cta__postcard:hover .cta__tag {
    transform: rotate(0.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__photo,
  .cta__tag,
  .cta__stamp {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  width: 100%;
  background-color: var(--cream);
  padding-block: 4rem;
  border-top: 1px solid rgba(31, 18, 11, 0.1);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer__brand {
    width: 25%;
  }
}

.footer__tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.4;
  letter-spacing: -0.034em;
  color: var(--dark-brown);
}

.footer__links-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 480px) {
  .footer__links-wrapper {
    flex-direction: row;
    gap: 3rem;
  }
}

@media (min-width: 768px) {
  .footer__links-wrapper {
    width: 75%;
    justify-content: flex-end;
    gap: 4rem;
  }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer__col-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.026em;
  color: #a4a4a4;
  text-transform: uppercase;
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__col-links a,
.footer__col-links p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--dark-brown);
  transition: color var(--transition);
}

.footer__col--contact .footer__col-links a {
  font-weight: 600;
}

.footer__col--location .footer__col-links p {
  font-weight: 600;
}

.footer__col-links a:hover {
  color: var(--bronze);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial {
  width: 100%;
  background-color: var(--cream);
  padding-block: var(--space-2xl-3xl);
  border-top: 1px solid rgba(31, 18, 11, 0.08);
}

.testimonial__block {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-inline: 1rem;
}

.testimonial__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-500);
}

.testimonial__viewport {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(13rem, 24vw, 17rem);
  overflow: hidden;
}

.testimonial__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(2rem);
  transition:
    opacity 360ms ease,
    visibility 360ms ease,
    transform 360ms cubic-bezier(.2, .9, .25, 1);
}

.testimonial__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.testimonial__slide.is-exiting {
  transform: translateX(-2rem);
}

.testimonial__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--dark-brown);
  text-wrap: balance;
  margin: 0;
}

.testimonial__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.testimonial__author {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(31, 18, 11, 0.7);
}

.testimonial__controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-inline: auto;
}

.testimonial__btn {
  display: inline-grid;
  place-items: center;
  width: var(--btn-min-h-sm);
  height: var(--btn-min-h-sm);
  border: 1.5px solid rgba(31, 18, 11, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--dark-brown);
  cursor: pointer;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.testimonial__btn:hover {
  color: var(--white);
  border-color: var(--bronze);
  background-color: var(--bronze);
  transform: translateY(-2px);
}

.testimonial__btn:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.testimonial__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.testimonial__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 18, 11, 0.24);
  cursor: pointer;
  transition:
    width 220ms ease,
    background-color 220ms ease;
}

.testimonial__dot:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

.testimonial__dot.is-active {
  width: 1.45rem;
  background: var(--bronze);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial__slide,
  .testimonial__btn,
  .testimonial__dot {
    transition: none;
  }
}


/* Postcard "how it works" — small operational line under each step */
.cta__tag-step-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--rust);
  margin-top: 0.25rem;
  opacity: 0.85;
}


/* ============================================================
   LOCATION TEASER — landing page workshop-first teaser
   Puts Don Carlos's toldo first; waterfall is a half-sentence sweetener.
   Sole non-WhatsApp off-page link.
   ============================================================ */
.location-teaser {
  width: 100%;
  background-color: var(--cream);
  padding-block: var(--space-2xl-3xl);
  border-top: 1px solid rgba(31, 18, 11, 0.08);
}

.location-teaser__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding-inline: 1rem;
}

.location-teaser__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-500);
  margin: 0;
}

.location-teaser__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--dark-brown);
  text-wrap: balance;
  margin: 0;
}

.location-teaser__body {
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
  /* Typography from .body-paragraph rule above */
}

.location-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem 1.75rem;
  background: var(--dark-brown);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.025em;
  border-radius: var(--radius);
  border: 1.5px solid var(--dark-brown);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 10px 24px -12px rgba(31, 18, 11, 0.45);
  transition:
    transform 220ms cubic-bezier(.2, .9, .25, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.location-teaser__cta svg {
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1);
}

.location-teaser__cta:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15), 0 16px 28px -12px rgba(161, 97, 12, 0.55);
}

.location-teaser__cta:hover svg {
  transform: translateX(4px);
}

.location-teaser__cta:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}


/* ============================================================
   LOCATION TEASER — Editorial split with portrait image
   Magazine spread: text + CTA on the left, portrait image on the right.
   Both on cream background.
   ============================================================ */
.location-teaser--editorial-split > .container {
  max-width: none;
  padding-inline: 0;
}

.location-teaser--editorial-split .location-teaser__inner {
  max-width: none;
  align-items: stretch;
  text-align: left;
  gap: 0.65rem;
  padding-inline: 0;
}

.location-teaser--editorial-split .location-teaser__eyebrow {
  width: min(1100px, calc(100% - clamp(3rem, 9vw, 8rem)));
  max-width: 720px;
  margin-inline: auto;
}

.location-teaser--editorial-split .location-teaser__cta {
  align-self: flex-start;
}

.location-teaser--editorial-split .location-teaser__title,
.location-teaser--editorial-split .location-teaser__body {
  text-align: left;
  max-width: none;
}

.location-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-l-xl);
  width: 100%;
  align-items: stretch;
}

.location-split__text {
  width: min(1100px, calc(100% - clamp(3rem, 9vw, 8rem)));
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.location-photo-pair {
  width: 100%;
  margin-inline: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--dark-brown);
}

.location-photo-pair__item {
  position: relative;
  min-height: clamp(19rem, 78vw, 32rem);
  margin: 0;
  overflow: hidden;
  background: rgba(31, 18, 11, 0.08);
}

.location-photo-pair__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.04);
}

.location-photo-pair__caption {
  position: absolute;
  left: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 1.5rem);
  width: fit-content;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.7rem;
  background: rgba(236, 235, 227, 0.92);
  color: var(--dark-brown);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .location-photo-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    background: var(--cream);
  }

  .location-photo-pair__item {
    min-height: clamp(28rem, 50vw, 44rem);
  }
}

/* ---- Stack of TWO photos: a "deck of prints" on the right column ---- */
.location-split__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-s-m);
  align-items: center;
  outline: none;
}

.location-split__stack:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Stack container — keeps the portrait aspect of the previous single photo,
   with a little extra padding so the back card can peek out at the corner.
   On mobile, the peek is smaller so the stack doesn't spill past the
   screen edge and feels more contained. */
.location-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 10px 10px 0 0;
}

@media (min-width: 768px) {
  .location-stack {
    aspect-ratio: 4 / 5;
    padding: 18px 18px 0 0;
  }
}

/* Each card is a real photo print: white paper border on all sides,
   wider margin at the bottom for the caption, warm photographic filter,
   subtle paper grain, and slightly irregular corner radii so it reads
   as cut by hand, not laid out by a grid.
   Position is driven by [data-pos]: 0 = front, 1 = back. */
.location-stack__card {
  position: absolute;
  inset: 0;
  margin: 0;
  /* slightly varied corner radii — hand-cut, not machine-perfect */
  border-radius: 4px 5px 3px 4px;
  background: var(--white);
  overflow: hidden;
  /* Tighter print margins on mobile to maximise photo size */
  padding: 10px 10px 44px 10px;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity, box-shadow;
  transition:
    transform 520ms cubic-bezier(.4, .0, .2, 1),
    opacity 520ms ease,
    box-shadow 520ms ease,
    /* delay z-index swap until the cards cross over visually */
    z-index 0s linear 260ms;
}

@media (min-width: 768px) {
  .location-stack__card {
    padding: 14px 14px 50px 14px;
  }
}

/* Subtle paper grain over the whole print — texture you feel before you see */
.location-stack__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.65'/></svg>");
  background-size: 220px 220px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  border-radius: inherit;
  z-index: 2;
}

.location-stack__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  position: relative;
  z-index: 1;
  /* Warm photographic feel — less Instagram, more "what the eye saw" */
  filter: saturate(0.92) contrast(1.04) brightness(0.98);
  /* Soft placeholder background while the real photo isn't dropped in yet */
  background:
    linear-gradient(135deg,
      rgba(161, 97, 12, 0.10) 0%,
      rgba(31, 18, 11, 0.04) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(31, 18, 11, 0.025) 14px,
      rgba(31, 18, 11, 0.025) 15px
    );
}

/* Front position — straight, full opacity, deepest shadow */
.location-stack__card[data-pos="0"] {
  transform: translate(0, 0) rotate(0deg);
  z-index: 2;
  opacity: 1;
  box-shadow:
    0 18px 44px -16px rgba(31, 18, 11, 0.45),
    0 0 0 1px rgba(31, 18, 11, 0.08);
}

/* Back position — offset to the top-right, rotated, slightly faded.
   Visible peek on mobile so the carousel/stack metaphor reads even on a narrow screen. */
.location-stack__card[data-pos="1"] {
  transform: translate(28px, -22px) rotate(3deg);
  z-index: 1;
  opacity: 0.88;
  box-shadow:
    0 8px 22px -14px rgba(31, 18, 11, 0.35),
    0 0 0 1px rgba(31, 18, 11, 0.05);
}

@media (min-width: 768px) {
  .location-stack__card[data-pos="1"] {
    transform: translate(108px, -64px) rotate(3.5deg);
  }
}

/* When animating prev (reverse direction), the back card exits to the
   opposite side via a brief in-flight tilt. Toggled by .is-prev on .location-stack */
.location-stack.is-prev .location-stack__card[data-pos="1"] {
  transform: translate(-10px, -10px) rotate(-2.5deg);
}

@media (min-width: 768px) {
  .location-stack.is-prev .location-stack__card[data-pos="1"] {
    transform: translate(-18px, -18px) rotate(-3.5deg);
  }
}

/* Caption sits in the white paper margin at the bottom of each print.
   No dark gradient overlay anymore — the caption is on white paper now. */
.location-stack__caption {
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--dark-brown);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
}

@media (min-width: 768px) {
  .location-stack__caption {
    left: 14px;
    right: 14px;
    height: 50px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
  }
}

/* ---- Controls under the stack: big, calm, scannable ---- */
.location-stack__controls {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 4px 14px -8px rgba(31, 18, 11, 0.22),
              0 0 0 1px rgba(31, 18, 11, 0.06);
}

@media (min-width: 768px) {
  .location-stack__controls {
    gap: 1.25rem;
    padding: 0.4rem 0.9rem;
  }
}

.location-stack__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--dark-brown);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(.2, .9, .25, 1);
}

@media (min-width: 768px) {
  .location-stack__btn {
    width: 48px;
    height: 48px;
  }
}

.location-stack__btn:hover {
  background: var(--bronze);
  color: var(--white);
  transform: translateY(-1px);
}

.location-stack__btn:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.location-stack__btn:active {
  transform: translateY(0);
}

.location-stack__counter {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--dark-brown);
  min-width: 3.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.location-stack__counter-sep {
  margin: 0 0.25rem;
  color: rgba(31, 18, 11, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .location-stack__card,
  .location-stack__card--front img,
  .location-stack__caption,
  .location-stack__btn {
    transition: none;
  }
}


/* ============================================================
   VISIT WATERFALL — subpage secondary block (waterfall demoted)
   Smaller, muted: clearly supporting content, not the main story.
   ============================================================ */
.visit-waterfall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s-m);
  align-items: center;
  margin-top: var(--space-xl-2xl);
  padding: var(--space-m-l);
  background: rgba(31, 18, 11, 0.03);
  border: 1px solid rgba(31, 18, 11, 0.08);
  border-radius: 8px;
}

@media (min-width: 768px) {
  .visit-waterfall {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.visit-waterfall__media {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(31, 18, 11, 0.05);
}

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

.visit-waterfall__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.visit-waterfall__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-500);
  margin: 0;
}

.visit-waterfall__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dark-brown);
  margin: 0;
}

.visit-waterfall__text {
  margin: 0;
  /* Typography from .body-paragraph rule */
}

.visit-waterfall .ubicacion__link {
  margin-top: var(--space-2xs);
}


/* ============================================================
   FLOATING WHATSAPP — persistent CTA, both pages
   Brand bronze (not WhatsApp green) per brief.
   Hidden until scrolled past hero; hidden when mobile menu is open.
   ============================================================ */
.btn-whatsapp-float {
  position: fixed;
  bottom: var(--space-m);
  right: var(--space-m);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 3.5rem;        /* 56px — confident FAB on mobile */
  min-inline-size: 3.5rem;       /* square when icon-only */
  padding: 0 var(--space-m);
  background: var(--bronze);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--btn-font-size);
  letter-spacing: -0.02em;
  border-radius: 999px;
  border: 1.5px solid var(--bronze);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(.2, .9, .25, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.btn-whatsapp-float.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btn-whatsapp-float.is-hidden,
.menu-open .btn-whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.btn-whatsapp-float:hover {
  background: var(--dark-brown);
  border-color: var(--dark-brown);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.btn-whatsapp-float:focus-visible {
  outline: 2px solid var(--dark-brown);
  outline-offset: 3px;
}

/* On mobile collapse to a square icon FAB so it stays out of content way */
@media (max-width: 767px) {
  .btn-whatsapp-float {
    padding: 0;
    width: 3.5rem;
    height: 3.5rem;
  }
  .btn-whatsapp-float__label {
    display: none;
  }
  .btn-whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-whatsapp-float {
    transition: opacity 100ms ease;
    transform: none;
  }
  .btn-whatsapp-float.is-visible {
    transform: none;
  }
}