/* =================================================================
   SANTUARIO LA SENDA · /la-senda/
   Hoja de estilos única. Sin minificar — humanos la mantienen.
   Sistema heredado del HTML standalone validado (Hero 05) +
   rediseño editorial cinematográfico + iteración de pulido.
   ================================================================= */


/* -----------------------------------------------------------------
   1. VARIABLES — paleta, tipografía, ritmo
   ----------------------------------------------------------------- */
:root {
  /* Paleta */
  --papel:       #F4EFE6;
  --crema:       #EBE3D2;
  --sage:        #D8DCC8;
  --wheat:       #E6D9B8;
  --bosque:      #1C2A1D;
  --bosque-2:    #243024;
  --verde-prof:  #2B3A2A;
  --verde-medio: #3D5240;
  --tinta:       #1C1F1A;

  --tinta-65:    rgba(28, 31, 26, .65);
  --tinta-45:    rgba(28, 31, 26, .45);
  --tinta-20:    rgba(28, 31, 26, .20);
  --tinta-12:    rgba(28, 31, 26, .12);

  --papel-85:    rgba(244, 239, 230, .85);
  --papel-60:    rgba(244, 239, 230, .60);
  --papel-45:    rgba(244, 239, 230, .45);
  --papel-25:    rgba(244, 239, 230, .25);
  --papel-12:    rgba(244, 239, 230, .12);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-mark:    'Italiana', 'Cormorant Garamond', serif;

  /* Tamaños fluidos */
  --display-xl:   clamp(72px, 9.5vw, 156px);
  --display-lg:   clamp(56px, 6.5vw, 112px);
  --display-md:   clamp(40px, 4.4vw, 78px);
  --display-sm:   clamp(28px, 2.6vw, 44px);
  --body-xl:      clamp(24px, 1.8vw, 30px);
  --body-lg:      22px;
  --body-md:      19px;
  --body-sm:      16px;
  --eyebrow:      12px;
  --eyebrow-track: .42em;
  --mono-track:   .24em;
  --cap-track:    .26em;
  --specs-track:  .28em;

  /* Ritmo */
  --section-pad-y: clamp(96px, 12vh, 200px);
  --gutter:        clamp(24px, 4vw, 56px);
  --max-width:     1320px;

  /* Animación */
  --ease-editorial: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-dur:    1100ms;
  --header-h:      72px;

  /* Filtro para teñir el logo blanco a verde Santuario */
  --logo-tint: brightness(0) saturate(100%) invert(17%) sepia(20%) saturate(900%) hue-rotate(80deg) brightness(0.9) contrast(0.95);
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  border: 0;
  font-style: italic;
  shape-margin: .75rem;
}

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

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--verde-prof);
  color: var(--papel);
}

:focus-visible {
  outline: 2px solid var(--verde-medio);
  outline-offset: 4px;
  border-radius: 1px;
}


/* -----------------------------------------------------------------
   3. TIPOGRAFÍA UTILITARIA
   ----------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.014em;
  color: var(--tinta);
}

.display--xl { font-size: var(--display-xl); }
.display--lg { font-size: var(--display-lg); line-height: .92; }
.display--md { font-size: var(--display-md); line-height: 1.02; }
.display--sm { font-size: var(--display-sm); }

.display__italic {
  font-style: italic;
  font-weight: 300;
  color: var(--verde-medio);
}

/* Evitar choque visual entre 'q' y 'd' en italics del display large */
.display--lg .display__italic {
  letter-spacing: -.005em;
  word-spacing: .04em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.eyebrow--dark { color: var(--verde-prof); }
.eyebrow--light { color: var(--sage); }

.eyebrow__line {
  display: block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}


/* -----------------------------------------------------------------
   4. LAYOUT — section / inner / cross-fade
   ----------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--section-pad-y) var(--gutter);
}

.section--paper {
  background: var(--papel);
  color: var(--tinta);
}

.section--bosque {
  background: var(--bosque);
  color: var(--papel);
}

.section--full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.section--paper::before,
.section--bosque::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}

.section--paper::before {
  background: linear-gradient(180deg, transparent 0%, var(--papel) 100%);
}

.section--bosque::before {
  background: linear-gradient(180deg, transparent 0%, var(--bosque) 100%);
}


/* -----------------------------------------------------------------
   5. ENCABEZADO (sticky con dos estados)
   ----------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 108;
  padding: 22px var(--gutter);
  transition: background-color 380ms var(--ease-editorial),
              box-shadow 380ms var(--ease-editorial),
              padding 380ms var(--ease-editorial),
              color 280ms var(--ease-editorial);
  color: var(--papel);
  background: transparent;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo {
  height: 64px;
  width: 220px;
  min-height: 64px;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: opacity 280ms var(--ease-editorial),
              filter 280ms var(--ease-editorial);
}

.site-header[data-state="scrolled"] .site-header__logo {
  filter: var(--logo-tint);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: inherit;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  transition: opacity 220ms var(--ease-editorial);
  position: relative;
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: 1;
}

.nav-link--phone {
  letter-spacing: .22em;
  font-feature-settings: "tnum" 1;
}

.nav-link__chev {
  font-size: 9px;
  transition: transform 220ms var(--ease-editorial);
}

[data-dropdown][data-open="true"] .nav-link__chev {
  transform: rotate(180deg);
}

.nav-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  border: 1px solid var(--papel-45);
  padding: 11px 20px;
  color: inherit;
  transition: background-color 280ms var(--ease-editorial),
              color 280ms var(--ease-editorial),
              border-color 280ms var(--ease-editorial);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--papel);
  color: var(--bosque);
  border-color: var(--papel);
}

.site-header[data-state="scrolled"] {
  background: var(--papel);
  color: var(--tinta);
  padding: 14px var(--gutter);
  box-shadow: 0 1px 0 var(--tinta-12);
}

.site-header[data-state="scrolled"] .nav-cta {
  border-color: var(--verde-prof);
  color: var(--verde-prof);
}

.site-header[data-state="scrolled"] .nav-cta:hover,
.site-header[data-state="scrolled"] .nav-cta:focus-visible {
  background: var(--verde-prof);
  color: var(--papel);
}


/* -----------------------------------------------------------------
   5b. DROPDOWN — Desarrollos (con puente invisible)
   ----------------------------------------------------------------- */
.nav-list__item--has-dropdown {
  position: relative;
}

.nav-list__item--has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto;
}

.nav-link--button {
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 12px;
  transform: translateX(-50%) translateY(-8px);
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--tinta-12);
  padding: 14px 0;
  min-width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-editorial),
              transform 320ms var(--ease-editorial);
  z-index: 105;
}

[data-dropdown][data-open="true"] .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--papel);
  border-left: 1px solid var(--tinta-12);
  border-top: 1px solid var(--tinta-12);
}

.dropdown__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 24px;
  border-left: 1px solid transparent;
  transition: background-color 200ms var(--ease-editorial),
              border-color 200ms var(--ease-editorial);
}

.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: var(--crema);
  border-left-color: var(--verde-prof);
}

.dropdown__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
}

.dropdown__status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--tinta-65);
}

.dropdown__link.is-current {
  background: var(--crema);
  border-left-color: var(--verde-prof);
}

.dropdown__link.is-current .dropdown__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--verde-prof);
}

.dropdown__link.is-current .dropdown__status {
  color: var(--verde-prof);
  font-weight: 500;
}


/* -----------------------------------------------------------------
   5c. HAMBURGER + OVERLAY MÓVIL
   ----------------------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 110;
}

.menu-toggle__bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  transition: transform 320ms var(--ease-editorial),
              opacity 240ms var(--ease-editorial);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--bosque);
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--ease-editorial);
  overflow-y: auto;
  padding: 80px 32px 40px;
}

.mobile-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.mobile-overlay__nav {
  width: 100%;
  max-width: 480px;
}

.mobile-overlay__nav > ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-overlay__link {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 300;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--papel-12);
}

.mobile-overlay__group {
  border-bottom: 1px solid var(--papel-12);
  padding-bottom: 16px;
}

.mobile-overlay__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin: 16px 0 12px;
}

.mobile-overlay__sublink {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  padding: 7px 0;
  color: var(--papel-85);
}

.mobile-overlay__sublink em {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--sage);
  margin-left: 4px;
}

.mobile-overlay__sublink.is-current {
  color: var(--wheat);
}

.mobile-overlay__sublink.is-current em {
  color: var(--wheat);
}

.mobile-overlay__cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--papel);
  color: var(--bosque);
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
}

body[data-menu-open="true"] {
  overflow: hidden;
}

/* Con el overlay abierto, el header debe ser invisible salvo por el
   botón X de cierre. Anulamos el estado "scrolled" para que un
   header con fondo papel no estorbe sobre el verde profundo del overlay. */
body[data-menu-open="true"] .site-header {
  background: transparent;
  color: var(--papel);
  box-shadow: none;
}

/* Cuando el header está en estado "scrolled", el logo tiene un filter
   que lo tiñe de verde profundo (var(--logo-tint)). Al abrir el menú,
   ese filter debe regresar a "none" instantáneamente — si no, durante
   los 280ms de transición el logo verde se mezcla con el overlay verde
   y se ve fantasmal/transparente. Selector más específico que la regla
   del scrolled state para vencer en especificidad CSS. */
body[data-menu-open="true"] .site-header[data-state] .site-header__logo {
  filter: none;
  transition: filter 0ms;
}


/* -----------------------------------------------------------------
   6. HERO — sistema heredado del standalone validado
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background: var(--bosque);
  color: var(--papel);
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.hero__pane {
  position: relative;
  overflow: hidden;
}

.hero__pane-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 1600ms var(--ease-editorial);
}

.hero__pane--right .hero__pane-img {
  object-position: center 30%;
}

.hero.is-loaded .hero__pane-img {
  transform: scale(1);
}

.hero__pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.40) 60%,
    rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.hero__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--papel-25);
  z-index: 3;
  pointer-events: none;
}

.hero__mono {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  text-align: center;
  padding: 0 var(--gutter);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.hero__eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--papel-60);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--display-xl);
  line-height: .9;
  letter-spacing: -.014em;
  margin: 0;
  color: var(--papel);
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
}

.hero__title-italic {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--wheat);
}

.hero__bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  z-index: 5;
}

.hero__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--papel-85);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 26ch;
}

.hero__cap--right {
  text-align: right;
  align-items: flex-end;
}

/* Variante del cap dentro del .hero__mono — visible sólo en mobile,
   sustituye al eyebrow "PUEBLA · 48 HOGARES" para evitar redundancia
   con el "48" del título. En desktop/tablet queda oculta. */
.hero__cap--in-mono {
  display: none;
}

.hero__cap-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--papel);
}

.hero__cta {
  background: var(--papel);
  color: var(--bosque);
  border: none;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  align-self: center;
  transition: background-color 280ms var(--ease-editorial),
              color 280ms var(--ease-editorial),
              transform 280ms var(--ease-editorial);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--wheat);
  color: var(--bosque);
}

.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--papel-60);
  pointer-events: none;
}

.hero__scroll-hint-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
}

.hero__scroll-hint-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--papel-60), transparent);
  animation: scrollHint 2200ms var(--ease-editorial) infinite;
}

@keyframes scrollHint {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* -----------------------------------------------------------------
   7. MANIFIESTO — 100vh, asimétrico, con rama de helecho
   ----------------------------------------------------------------- */
.manifesto {
  position: relative;
  overflow: hidden;
}

.manifesto__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px 80px;
  align-items: start;
}

.manifesto__inner > .eyebrow {
  grid-column: 1 / 2;
  grid-row: 1;
}

.manifesto__display {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  margin-top: 4px;
}

.manifesto__body {
  grid-column: 1 / 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: var(--body-lg);
  line-height: 1.6;
  color: var(--tinta);
  max-width: 38ch;
}

.manifesto__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5em;
  line-height: 1;
  color: var(--verde-medio);
  padding-right: .04em;
}

/* Rama de eucalipto que entra desde abajo derecha hacia la punta arriba */
.manifesto__branch {
  position: absolute;
  right: 0;
  bottom: 5%;
  top: auto;
  transform: none;
  width: clamp(180px, 22vw, 320px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms var(--ease-editorial);
}

.manifesto__branch.is-visible {
  opacity: 1;
}

/* Stroke garantizado vía CSS — más portable que var() en atributo SVG */
.manifesto__branch g,
.manifesto__branch path,
.manifesto__branch ellipse {
  stroke: var(--verde-medio);
}

.manifesto__branch .branch__stem,
.entorno__branch .branch__stem {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.manifesto__branch .branch__leaf,
.entorno__branch .branch__leaf {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.85);
}

/* Por default sólo se ve el SVG vertical (desktop). El horizontal
   queda oculto hasta el breakpoint mobile. */
.manifesto__branch--horizontal { display: none; }

@media (max-width: 1024px) {
  .manifesto__branch--vertical { display: none; }
}


/* -----------------------------------------------------------------
   8. ENTORNO — papel, plano centrado, ramitas decorativas
   ----------------------------------------------------------------- */
.entorno {
  position: relative;
  overflow: hidden;
}

.entorno__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.entorno__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entorno__plan {
  max-width: 60%;
  margin: 48px auto 0;
  filter: drop-shadow(0 24px 48px rgba(28, 42, 29, 0.18));
}

.entorno__plan img {
  width: 100%;
  height: auto;
}

/* Animación de entrada del mapa: solo opacidad, sin transform.
   El !important neutraliza el translateY que aplica la regla
   genérica de [data-reveal]. */
.entorno__plan,
[data-reveal].entorno__plan,
.entorno__plan[data-reveal] {
  opacity: 0;
  transform: none !important;
  transition: opacity 1800ms var(--ease-editorial);
}

.entorno__plan.is-visible,
[data-reveal].entorno__plan.is-visible,
.entorno__plan[data-reveal].is-visible {
  opacity: 1;
  transform: none !important;
}

.entorno__legend {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--tinta-65);
}

.entorno__legend em {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verde-prof);
}

/* Marca de agua del monograma — esquina superior izquierda */
.entorno__monogram {
  position: absolute;
  top: clamp(80px, 12vh, 140px);
  left: clamp(40px, 5vw, 80px);
  width: clamp(80px, 9vw, 130px);
  height: auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
  /* Tinte verde Santuario por si el archivo no llega ya en ese tono */
  filter: brightness(0) saturate(100%) invert(17%) sepia(20%) saturate(900%) hue-rotate(80deg) brightness(0.9);
}

/* Hoja decorativa grande — esquina inferior derecha */
.entorno__leaf {
  position: absolute;
  bottom: clamp(40px, 6vh, 100px);
  right: clamp(20px, 3vw, 60px);
  width: clamp(120px, 14vw, 200px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.20;                        /* I-6 resuelto: era 0.12, casi invisible */
}

@media (max-width: 1024px) {
  .entorno__monogram,
  .entorno__leaf { display: none; }
}

/* Rama de eucalipto del entorno (solo mobile) — espejo de la rama del
   manifiesto: entra horizontal desde el borde izquierdo hacia el centro.
   Sin orientación adaptativa: ya está en formato horizontal de origen. */
.entorno__branch {
  display: none;
}


/* -----------------------------------------------------------------
   8b. PUENTE — sección puente con frase del PDF, reveal por palabra
   ----------------------------------------------------------------- */
.puente {
  background: var(--papel);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-pad-y) var(--gutter);
  scroll-snap-align: start;
}

.puente__inner {
  max-width: 1100px;
  text-align: center;
}

.puente__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.18;
  color: var(--tinta);
  letter-spacing: -.012em;
}

/* text-wrap: balance reparte las palabras en líneas equilibradas;
   max-width fuerza quiebres naturales sin <br> manual */
.puente__quote p {
  text-wrap: balance;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.puente__quote .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-editorial),
              transform 700ms var(--ease-editorial);
  margin-right: 0.22em;
}

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

.puente__quote.is-visible .word:nth-child(1)  { transition-delay: 0ms; }
.puente__quote.is-visible .word:nth-child(2)  { transition-delay: 130ms; }
.puente__quote.is-visible .word:nth-child(3)  { transition-delay: 260ms; }
.puente__quote.is-visible .word:nth-child(4)  { transition-delay: 390ms; }
.puente__quote.is-visible .word:nth-child(5)  { transition-delay: 520ms; }
.puente__quote.is-visible .word:nth-child(6)  { transition-delay: 650ms; }
.puente__quote.is-visible .word:nth-child(7)  { transition-delay: 780ms; }
.puente__quote.is-visible .word:nth-child(8)  { transition-delay: 910ms; }
.puente__quote.is-visible .word:nth-child(9)  { transition-delay: 1040ms; }
.puente__quote.is-visible .word:nth-child(10) { transition-delay: 1170ms; }
.puente__quote.is-visible .word:nth-child(11) { transition-delay: 1300ms; }
.puente__quote.is-visible .word:nth-child(12) { transition-delay: 1430ms; }

/* Sello del monograma — aparece tras la frase */
.puente__seal {
  position: relative;             /* ancla para el .puente__thread (mobile) */
  margin-top: clamp(60px, 10vh, 120px);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms var(--ease-editorial) 1700ms,
              transform 800ms var(--ease-editorial) 1700ms;
}

.puente__seal img {
  width: clamp(56px, 5vw, 80px);
  height: auto;
  filter: var(--logo-tint);
  opacity: 0.45;
}

/* Cuando la frase está visible, el sello también — el selector ~
   funciona porque el seal viene después del quote en el DOM */
.puente__quote.is-visible ~ .puente__seal {
  opacity: 1;
  transform: translateY(0);
}

/* Hilo vertical que cuelga del sello — visible en todos los breakpoints.
   No es elemento de flow: se posiciona absoluto y no altera la altura
   del bloque, así el sello queda exactamente donde estaba. */
.puente__thread {
  display: block;
  position: absolute;
  top: calc(100% + clamp(20px, 3vh, 32px));
  left: 50%;
  width: 1px;
  height: clamp(120px, 20vh, 180px);
  background: var(--tinta);
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: opacity 280ms var(--ease-editorial),
              transform 1200ms var(--ease-editorial);
}

.puente__thread::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: opacity 360ms var(--ease-editorial),
              transform 360ms var(--ease-editorial);
}

.puente__quote.is-visible ~ .puente__seal .puente__thread {
  opacity: 0.28;
  transform: translateX(-50%) scaleY(1);
  transition-delay: 2200ms;
}

.puente__quote.is-visible ~ .puente__seal .puente__thread::after {
  opacity: 0.40;
  transform: translateX(-50%) scale(1);
  transition-delay: 3500ms;
}


/* -----------------------------------------------------------------
   9. LAS CASAS — capítulos editoriales
   ----------------------------------------------------------------- */
.casas {
  background: var(--papel);
  color: var(--tinta);
}

.casas__intro {
  padding-bottom: 0;
}

.casas__intro-inner {
  max-width: 920px;
}

.casas__title {
  margin: 8px 0 28px;
}

.casas__lede {
  font-size: var(--body-xl);
  font-style: italic;
  color: var(--tinta-65);
  max-width: 38ch;
}

.casa {
  position: relative;
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--tinta-12);
  background: var(--papel);
}

.casa:first-of-type {
  padding-top: clamp(64px, 9vh, 140px);
}

.casa__chapter {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 0 80px;
  align-items: center;
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.casa__chapter--reverse {
  grid-template-columns: 6fr 4fr;
}

.casa__chapter-text {
  position: relative;
  padding: 24px 0;
}

.casa__name {
  margin: 4px 0 24px;
}

.casa__lede {
  max-width: 32ch;
  font-size: var(--body-lg);
  line-height: 1.6;
  color: var(--tinta-65);
}

.casa__render {
  overflow: hidden;
  position: relative;
}

.casa__render img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.casa__render::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--tinta-12);
  pointer-events: none;
}

/* Specs */
.casa__specs {
  margin-top: 80px;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.specs__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--tinta-20);
  padding-top: 12px;
}

.specs__item dt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--specs-track);
  text-transform: uppercase;
  color: var(--tinta-65);
  margin-bottom: 10px;
}

.specs__item dd {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 300;
  color: var(--verde-prof);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.amenities-mini {
  font-family: var(--font-display);
  font-size: 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--tinta-20);
  padding-top: 12px;
}

.amenities-mini::before {
  content: "Espacios";
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--specs-track);
  text-transform: uppercase;
  color: var(--tinta-65);
  margin-bottom: 10px;
}

.amenities-mini li {
  font-style: italic;
  color: var(--tinta);
}

.casa__lotes {
  border-top: 1px solid var(--tinta-20);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.casa__lotes-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--specs-track);
  text-transform: uppercase;
  color: var(--tinta-65);
}

.casa__lotes-numbers {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 400;
  color: var(--verde-prof);
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1.45;
}

.casa__lotes-numbers em {
  font-style: italic;
  font-size: .72em;
  color: var(--tinta-65);
  display: block;
  margin-top: 4px;
}

/* Plantas — sin fondo, alineación a la izquierda de la imagen */
.casa__plantas {
  margin-top: 60px;
  padding-bottom: 0;
}

.plantas__heading {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--specs-track);
  text-transform: uppercase;
  color: var(--tinta-65);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.plantas__heading::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--tinta-65);
  opacity: .55;
}

.plantas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.planta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  margin: 0;
  align-items: flex-start;
  padding: 64px 24px 24px;
  box-shadow: 0 12px 32px rgba(28, 42, 29, 0.08);
}

.planta img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Casa Árbol y Casa Meseta — los archivos fuente tienen fondo blanco
   horneado. Aplicamos blend mode + contrast para neutralizarlo sobre el
   marco blanco unificado. Casa Valle no requiere blend porque sus
   archivos sí son transparentes — sobre el marco blanco se ve igual. */
#casa-arbol .planta img,
#casa-meseta .planta img {
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}

/* Firma botánica del herbario: vignette decorativa centrada en el
   margen superior del marco. Misma gramática visual que las ramas de
   eucalipto del manifesto/entorno/puente (elipses estiradas + tronco
   fino). Tres composiciones, una por planta. */
.planta__deco {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: auto;
  color: var(--verde-prof);
  opacity: 0.30;
  pointer-events: none;
}

.planta figcaption {
  align-self: flex-start;
  width: 100%;
  text-align: left;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--tinta-65);
  margin-top: 18px;
  padding-bottom: 4px;
}

.planta__num {
  font-family: var(--font-mark);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verde-prof);
  margin-right: 8px;
}


/* -----------------------------------------------------------------
   10. INTERLUDIO — full-bleed, overlay diagonal y reveal por palabra
   ----------------------------------------------------------------- */
.interludio {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--papel);
}

.interludio__bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
}

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

.interludio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 50%,
    rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.interludio__pull {
  position: relative;
  z-index: 2;
  max-width: min(900px, 80vw);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  color: var(--papel);
  padding: 0 var(--gutter);
  text-shadow: 0 4px 32px rgba(0,0,0,.55);
}

.interludio__pull p {
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.15;
  white-space: normal;
}

.interludio__pull-italic {
  font-style: italic;
  color: var(--wheat);
}

/* Reveal por palabra (orquestado en CSS) */
.interludio__pull .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-editorial),
              transform 600ms var(--ease-editorial);
  margin-right: 0.18em;
  white-space: nowrap;
}

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

.interludio__pull[data-reveal-words].is-visible .word:nth-child(1)  { transition-delay: 0ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(2)  { transition-delay: 180ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(3)  { transition-delay: 360ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(4)  { transition-delay: 540ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(5)  { transition-delay: 720ms; }
/* nth-child(6) es el <br> */
.interludio__pull[data-reveal-words].is-visible .word:nth-child(7)  { transition-delay: 1000ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(8)  { transition-delay: 1180ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(9)  { transition-delay: 1360ms; }
.interludio__pull[data-reveal-words].is-visible .word:nth-child(10) { transition-delay: 1540ms; }


/* -----------------------------------------------------------------
   11. AMENIDADES — full-bleed con copy superpuesto, 100vh c/u
   ----------------------------------------------------------------- */
.amenidades {
  background: var(--bosque);
}

.amenidad {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  scroll-snap-align: start;
}

.amenidad__bg {
  position: absolute;
  inset: 0;
  margin: 0;
}

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

.amenidad__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.amenidad__copy {
  position: absolute;
  bottom: clamp(48px, 8vh, 112px);
  left: clamp(32px, 6vw, 96px);
  max-width: 540px;
  color: var(--papel);
  z-index: 2;
}

.amenidad__numeral {
  font-family: var(--font-mark);
  font-size: 22px;
  font-style: italic;
  margin-bottom: 12px;
  opacity: .85;
  color: var(--wheat);
}

.amenidad__name {
  color: var(--papel);
  margin-bottom: 16px;
}

.amenidad__quote {
  font-family: var(--font-body);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.5;
  font-style: italic;
  color: var(--papel-85);
  border-left: 1px solid var(--papel-45);
  padding-left: 18px;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

/* Variación rítmica intencional — desktop */
#la-gruta .amenidad__copy {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(48px, 8vw, 120px);
}

#la-taberna .amenidad__copy {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(48px, 8vw, 120px);
  left: auto;
  text-align: right;
  border-left: 0;
}

#la-taberna .amenidad__quote {
  border-left: 0;
  border-right: 1px solid var(--papel-45);
  padding-left: 0;
  padding-right: 18px;
}

#parque-mascotas .amenidad__copy {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(48px, 8vw, 120px);
  right: auto;
}


/* -----------------------------------------------------------------
   12. DISTRIBUCIÓN — papel, plano sin fondo CSS
   ----------------------------------------------------------------- */
.distribucion {
  border-top: 1px solid var(--tinta-12);
  border-bottom: 1px solid var(--tinta-12);
}

.distribucion__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}

.distribucion__title {
  margin: 8px 0 0;
}

.distribucion__plan {
  width: 100%;
  max-width: 80%;
  margin: 28px auto 0;
}

.distribucion__plan img {
  width: 100%;
  height: auto;
  display: block;
}


/* -----------------------------------------------------------------
   13. CIERRE — verde profundo + textura botánica + WhatsApp grande
   ----------------------------------------------------------------- */
.cierre {
  background: var(--bosque);
  color: var(--papel);
  padding: clamp(120px, 18vh, 240px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Monograma central como marca de agua heráldica */
.cierre__monogram {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 50vw, 720px);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  /* Teñir a crema sobre fondo verde profundo */
  filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(200%) hue-rotate(20deg) brightness(0.95);
}

.cierre__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.cierre__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 8vw, 138px);
  line-height: .92;
  color: var(--papel);
  letter-spacing: -.014em;
  margin: 0;
}

.cierre__title .display__italic {
  color: var(--wheat);
}

.cierre__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--papel);
  color: var(--bosque);
  padding: 22px 38px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  transition: background-color 320ms var(--ease-editorial),
              transform 320ms var(--ease-editorial);
}

.cierre__cta:hover,
.cierre__cta:focus-visible {
  background: var(--wheat);
  transform: translateY(-1px);
}

.cierre__cta-arrow {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 320ms var(--ease-editorial);
}

.cierre__cta:hover .cierre__cta-arrow {
  transform: translateX(6px);
}

.cierre__phone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--sage);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
}

.cierre__phone a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--papel);
  border-bottom: 1px solid var(--wheat);
  padding-bottom: 1px;
}


/* -----------------------------------------------------------------
   14. PIE DE PÁGINA — bloque principal + bottom con copyright/privacy
   ----------------------------------------------------------------- */
.site-footer {
  background: var(--papel);
  color: var(--tinta);
  border-top: 1px solid var(--tinta-12);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px var(--gutter) 48px;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  gap: 40px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__logo {
  height: 56px;
  width: 200px;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: var(--logo-tint);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--verde-prof);
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 220ms var(--ease-editorial);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  border-bottom-color: var(--verde-prof);
}

.site-footer__link--wa span:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verde-prof);
}

.site-footer__phone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-track);
  color: var(--tinta-65);
}

.site-footer__back {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--verde-medio);
  margin-top: 8px;
}

.site-footer__back:hover {
  color: var(--verde-prof);
}

.site-footer__social {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.site-footer__social a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tinta-20);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-65);
  transition: color 220ms var(--ease-editorial),
              border-color 220ms var(--ease-editorial);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--verde-prof);
  border-color: var(--verde-prof);
}

/* Bottom bar — copyright + política de privacidad */
.site-footer__bottom {
  border-top: 1px solid var(--tinta-12);
  padding: 24px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--tinta-65);              /* I-2 resuelto: contraste WCAG AA (4.90 sobre papel) */
  margin: 0;
}

.site-footer__privacy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  color: var(--tinta-65);
  transition: color 220ms var(--ease-editorial);
}

.site-footer__privacy:hover,
.site-footer__privacy:focus-visible {
  color: var(--verde-prof);
}


/* -----------------------------------------------------------------
   15. WHATSAPP FLOTANTE
   ----------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-prof);
  color: var(--papel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(28,42,29,.25),
              0 2px 6px rgba(28,42,29,.15);
  transition: background-color 280ms var(--ease-editorial),
              transform 360ms var(--ease-editorial),
              opacity 360ms var(--ease-editorial),
              visibility 360ms var(--ease-editorial);
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--verde-medio);
  transform: translateY(-2px);
}

/* Mientras el hero esté visible (primera pantalla), el botón flotante
   se oculta — el hero ya tiene su propio CTA "Conversar por WhatsApp"
   en el centro, y el flotante tapaba el cap II. Al cruzar al siguiente
   bloque (refugio en adelante), el botón reaparece con fade suave. */
body[data-hero-visible="true"] .wa-float {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  pointer-events: none;
}

/* Pulse retirado por solicitud editorial: el blink infinito sobre el
   botón verde tenía registro "marketing", no de catálogo boutique. */
.wa-float__pulse {
  display: none;
}


/* -----------------------------------------------------------------
   16. ENREDADERA SVG SIGNATURE — solo desktop
   ----------------------------------------------------------------- */
.vine {
  position: fixed;
  top: 0;
  right: 0;
  width: 110px;
  height: 100vh;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-editorial);
}

.vine.is-active {
  opacity: 1;
}

.vine__stem,
.vine__leaf {
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
}


/* -----------------------------------------------------------------
   17. REVELADO POR SCROLL — Intersection Observer
   ----------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-dur) var(--ease-editorial),
              transform var(--reveal-dur) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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


/* -----------------------------------------------------------------
   18. SCROLL SNAP — proximity, no mandatory
   ----------------------------------------------------------------- */
@media (min-width: 1025px) and (min-height: 720px) {
  html {
    scroll-snap-type: y proximity;
  }
  .hero,
  .section--full,
  .puente,
  .interludio,
  .amenidad {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  /* El cierre y el footer se quedan sin snap para que el usuario
     pueda llegar al pie sin rebote ni atrapamiento. */
  .cierre,
  .site-footer {
    scroll-snap-align: none;
  }
}


/* -----------------------------------------------------------------
   19. RESPONSIVE — 1440 / 1024 / 810 / 768 / 480 / 375
   ----------------------------------------------------------------- */

/* 1440 — ajustes finos */
@media (max-width: 1440px) {
  .casa__chapter,
  .casa__chapter--reverse {
    gap: 0 60px;
  }
}

/* 1024 — tablet horizontal */
@media (max-width: 1024px) {
  :root {
    --section-pad-y: clamp(80px, 10vh, 160px);
  }

  .vine { display: none; }

  .manifesto__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .manifesto__inner > .eyebrow,
  .manifesto__display,
  .manifesto__body {
    grid-column: 1;
    grid-row: auto;
  }

  .casa__chapter,
  .casa__chapter--reverse {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* En tablet/mobile, el grid del chapter colapsa a una sola columna y
     el texto debe ir SIEMPRE arriba (consistencia de lectura), incluso
     en chapters con --reverse cuyo HTML pone el render primero (Árbol).
     En desktop --reverse sigue funcionando como inversor de columnas. */
  .casa__chapter--reverse .casa__chapter-text { order: 1; }
  .casa__chapter--reverse .casa__render { order: 2; }

  .casa__specs {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  /* En tablet vertical, .amenities-mini queda en col 2 como columna lateral
     natural (no full-width). En mobile el override del @media ≤810 lo manda
     a col 1 porque allí el grid del padre es 1fr. */
  .casa__specs > :last-child {
    grid-column: auto;
  }

  .plantas__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .plantas__grid figure:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

  /* Indicador "CONTINUAR" del hero — oculto desde tablet hacia abajo
     (en touch devices el scroll es natural). Resuelve issue I-4 (solape
     con cap I en tablets de menor altura). */
  .hero__scroll-hint { display: none; }

  /* Animaciones botánicas activas desde tablet hacia abajo: rama
     horizontal entre manifesto/entorno, rama espejo entre entorno/puente,
     y hilo vertical bajo el sello del puente. */
  .manifesto {
    overflow: visible;
    z-index: 2;
  }
  .entorno {
    overflow: visible;
    z-index: 1;
  }

  .manifesto__branch--horizontal {
    display: block;
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: clamp(220px, 65vw, 320px);
    height: auto;
    transform: translateY(50%);
    z-index: 1;
  }

  .entorno__branch {
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    width: clamp(220px, 65vw, 320px);
    height: auto;
    transform: translateY(50%);
    z-index: 1;
  }

  /* .puente__thread ya está display: block en la regla base; no hace falta override aquí. */

  .entorno__plan {
    max-width: 80%;
  }

  .distribucion__plan {
    max-width: 100%;
  }

  /* Amenidades en tablet — sólo bottom-left, sin variación rítmica */
  .amenidad__copy {
    max-width: 80%;
  }

  #la-gruta .amenidad__copy,
  #la-taberna .amenidad__copy,
  #parque-mascotas .amenidad__copy {
    bottom: clamp(48px, 8vh, 112px);
    top: auto;
    transform: none;
    left: clamp(32px, 6vw, 96px);
    right: auto;
    text-align: left;
    border-left: 0;
  }

  #la-taberna .amenidad__quote {
    border-right: 0;
    border-left: 1px solid var(--papel-45);
    padding-right: 0;
    padding-left: 18px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__social {
    grid-column: 2 / 3;
    justify-content: flex-end;
  }

  /* Hamburger desde tablet horizontal — el nav completo ya no cabe
     en 1024px sin que el botón CONTACTO se desborde. */
  .nav-list { display: none; }
  .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* 700 — móvil grande / phablet (todo lo que NO es tablet ni desktop).
   Antes era ≤810, pero ese límite capturaba iPads (mini 6=744, regular
   tradicional=768) y les aplicaba layout mobile. Bajado a ≤700 para que
   cualquier tablet >700 caiga en el rango tablet (769-1024 ajustado a
   701-1024). */
@media (max-width: 700px) {
  .hero__title { font-size: clamp(54px, 13vw, 96px); }
  .hero__bottom {
    bottom: 24px;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .hero__cap,
  .hero__cap--right {
    text-align: center;
    align-items: center;
  }
  .hero__scroll-hint { bottom: 200px; }

  .casa__specs {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .casa__specs > :last-child { grid-column: 1; }

  .specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .entorno__plan { max-width: 92%; }

  .puente__quote { font-size: clamp(28px, 6vw, 48px); }
}

/* 700 — móvil estándar / Plus (segundo bloque, antes ≤768). Por la
   misma razón del bloque anterior. */
@media (max-width: 700px) {
  :root {
    --gutter: 24px;
    --section-pad-y: clamp(72px, 9vh, 120px);
    --body-lg: 20px;
    --body-xl: clamp(22px, 5vw, 28px);
  }

  body { line-height: 1.55; }

  .site-header { padding: 16px var(--gutter); }
  .site-header__logo {
    height: 48px;
    width: 160px;
    min-height: 48px;
  }

  .hero { min-height: 600px; }
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hero__divider { display: none; }
  .hero__pane--right .hero__pane-img { object-position: center; }

  /* En mobile, el bloque del título ocupa TODA la mitad superior
     (sobre la imagen del bosque/senda). Layout flex column con título
     arriba y cap I debajo (sustituye al eyebrow, que se oculta para
     evitar la redundancia con el "48" del título). Todo centrado. */
  .hero__mono {
    top: 0;
    bottom: 50%;
    height: auto;
    transform: none;
    padding: 88px var(--gutter) 32px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vh, 60px);
  }

  .hero__title { margin: 0; font-size: clamp(40px, 11vw, 60px); }

  /* Oculto: el eyebrow PUEBLA · 48 HOGARES (redundante con el título). */
  .hero__eyebrow { display: none; }

  /* Cap I activo dentro del .hero__mono, centrado y como pie editorial. */
  .hero__cap--in-mono {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 30ch;
  }

  /* Cap I del .hero__bottom — oculto en mobile (se muestra el de arriba). */
  .hero__bottom .hero__cap:not(.hero__cap--right) {
    display: none;
  }

  /* Plantas en mobile estricto: una sola columna, 100% ancho. El modo
     slider del .plantas__viewer (definido en @media ≤768 más abajo) toma
     el control y hace flex horizontal. */
  .plantas__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .plantas__grid figure:last-child {
    grid-column: 1;
    max-width: 100%;
  }
  .planta img { aspect-ratio: 4 / 5; }

  .interludio { height: 80vh; min-height: 480px; }
  .interludio__pull p { font-size: clamp(32px, 9vw, 56px); }

  /* Las animaciones botánicas (ramas + scroll-hint + thread) ahora
     se activan desde @media ≤1024 (incluyendo tablet). Ver bloque
     superior. */

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer__social { grid-column: 1; justify-content: flex-start; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cierre__cta {
    padding: 18px 28px;
    font-size: 12px;
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }

  /* Specs de cada prototipo en mobile: el bloque "Espacios" pasa de columna
     vertical a grid 2×2 con el título full-width arriba. Aplica a las tres
     casas porque comparten .amenities-mini. */
  .amenities-mini {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 10px;
  }
  .amenities-mini::before {
    grid-column: 1 / -1;
  }

  /* Eyebrows del bloque de specs: reducir font-size y tracking para que
     "ESTACIONAMIENTOS" (la palabra más larga) quepa en su columna de ~147px
     en viewports mobile. */
  .specs__item dt,
  .amenities-mini::before {
    font-size: 12px;
    letter-spacing: 0.20em;
  }

  /* -----------------------------------------------------------------
     Slider de plantas (mobile). Convierte el grid de 3 figuras apiladas
     verticalmente en un carrusel horizontal con scroll-snap. Las flechas
     y los dots indicador sólo se muestran aquí; en desktop el viewer es
     transparente al layout (display: contents). */
  .plantas__viewer {
    position: relative;
  }

  .plantas__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .plantas__grid::-webkit-scrollbar { display: none; }

  .plantas__grid > .planta {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Flechas de navegación: papel semi-transparente con borde sutil,
     centradas verticalmente sobre la imagen del slide actual. */
  .plantas__nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(244, 239, 230, 0.92);
    border: 1px solid var(--tinta-20);
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    padding: 0;
    padding-bottom: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 200ms var(--ease-editorial),
                background 200ms var(--ease-editorial);
  }
  .plantas__nav:active { background: rgba(244, 239, 230, 1); }
  .plantas__nav--prev { left: 6px; }
  .plantas__nav--next { right: 6px; }

  /* Dots indicador: tres puntos centrados, el activo más opaco. */
  .plantas__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
  .plantas__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tinta);
    opacity: 0.22;
    transition: opacity 240ms var(--ease-editorial),
                transform 240ms var(--ease-editorial);
  }
  .plantas__dots span.is-active {
    opacity: 0.85;
    transform: scale(1.18);
  }

  /* Caption con aire al borde izquierdo del slide (en mobile, el caption
     vive dentro del marco blanco gracias al padding del .planta). */
  .planta figcaption {
    margin-top: 14px;
    padding-bottom: 0;
  }

  /* En el slider, la sombra de cada .planta queda recortada por el
     overflow del grid si fuera hidden — usamos overflow-x auto, que sí
     permite el scroll horizontal pero recorta verticalmente. Compensamos
     con padding-block en el grid para que la sombra inferior asome. */
  .plantas__grid {
    padding-block: 4px 12px;
  }
}

/* Sólo en desktop puro (≥1025) el .plantas__viewer es invisible al
   layout — el .plantas__grid se comporta como el grid de 3 columnas
   clásico. En tablet (769-1024) el viewer sigue activo con flechas y
   dots para el slider "ventana de 2". */
@media (min-width: 1025px) {
  .plantas__viewer {
    display: contents;
  }
  .plantas__nav,
  .plantas__dots {
    display: none;
  }
}

/* Tablet vertical y horizontal (769-1024): slider "ventana de 2" para
   las plantas. Cada slide ocupa 50% del ancho del viewer (dos visibles
   a la vez); el paso del slider es 1 slide. Sólo hay 2 estados válidos:
   [baja, alta] ↔ [alta, rooftop]. El 3er dot queda oculto. */
@media (min-width: 701px) and (max-width: 1024px) {
  .plantas__viewer {
    position: relative;
    padding-inline: 56px;          /* aire para las flechas, fuera del marco */
  }

  .plantas__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 4px 12px;
  }
  .plantas__grid::-webkit-scrollbar { display: none; }

  .plantas__grid > .planta {
    flex: 0 0 50%;
    min-width: 50%;
    max-width: 50%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Anular la regla del ≤1024 que pone max-width 50% al último figure
     (eso era para el grid 2x2; aquí ya tenemos 50% por flex-basis). */
  .plantas__grid figure:last-child {
    grid-column: auto;
    max-width: 50%;
  }

  /* Sólo 2 estados → 2 dots visibles, 3er oculto. */
  .plantas__dots span:nth-child(3) {
    display: none;
  }

  /* Flechas de navegación (duplicadas del bloque mobile para que apliquen
     en tablet también, ya que el media query mobile no se activa aquí). */
  .plantas__nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(244, 239, 230, 0.92);
    border: 1px solid var(--tinta-20);
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    padding: 0;
    padding-bottom: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 200ms var(--ease-editorial),
                background 200ms var(--ease-editorial);
  }
  .plantas__nav:active { background: rgba(244, 239, 230, 1); }
  .plantas__nav--prev { left: 6px; }
  .plantas__nav--next { right: 6px; }

  /* Dots indicador (duplicados del bloque mobile). */
  .plantas__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
  .plantas__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tinta);
    opacity: 0.22;
    transition: opacity 240ms var(--ease-editorial),
                transform 240ms var(--ease-editorial);
  }
  .plantas__dots span.is-active {
    opacity: 0.85;
    transform: scale(1.18);
  }
}

/* 480 — móvil estándar */
@media (max-width: 480px) {
  .hero__eyebrow { font-size: 10.5px; gap: 10px; }
  .hero__eyebrow-line { width: 24px; }

  .amenidad__quote {
    font-size: 18px;
    padding-left: 16px;
  }

  .wa-float {
    width: 50px;
    height: 50px;
  }

  .puente__quote { font-size: clamp(26px, 7vw, 40px); }
}

/* 375 — móvil pequeño (el font-size del título ya queda controlado por el
   override de ≤480 con clamp(40px, 11vw, 60px); no hace falta volver a
   subirlo aquí). */


/* -----------------------------------------------------------------
   20. PREFERS-REDUCED-MOTION — accesibilidad
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 250ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 250ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .interludio__pull[data-reveal-words] .word,
  .puente__quote .word {
    opacity: 1;
    transform: none;
  }
  /* Solo la enredadera animada del hero (desktop) se oculta. Las ramas
     de eucalipto y los decorativos estáticos del entorno se MUESTRAN
     completos, sin animación de trazado — reduced-motion elimina el
     movimiento, no el contenido editorial. (Bug: antes ocultaba las
     ramas con display:none, y el JS las dejaba en opacity:0; en iPads
     con "Reducir movimiento" activo las ramas no aparecían nunca.) */
  .vine { display: none; }

  .manifesto__branch,
  .entorno__branch {
    opacity: 1;
  }
  .manifesto__branch .branch__stem,
  .entorno__branch .branch__stem {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .manifesto__branch .branch__leaf,
  .entorno__branch .branch__leaf {
    opacity: 1;
    transform: scale(1);
  }

  .hero__pane-img { transform: none !important; }
  .hero__scroll-hint-line { animation: none; opacity: .4; }
  .wa-float__pulse { animation: none; }
}


/* -----------------------------------------------------------------
   21. PRINT
   ----------------------------------------------------------------- */
@media print {
  .site-header,
  .mobile-overlay,
  .vine,
  .manifesto__branch,
  .entorno__monogram,
  .entorno__leaf,
  .cierre__monogram,
  .wa-float,
  .hero__scroll-hint { display: none !important; }
  .hero { height: auto; min-height: 0; }
  body { background: #fff; color: #000; }
}