/* ==========================================================================
   RESERVA CAXCANES — Design tokens
   ========================================================================== */
:root{
  --verde:      #27432C;
  --verde-osc:  #1B2F1F;
  --terracota:  #C24A2C;
  --tostado:    #B3A286;
  --crema:      #F8F6F1;
  --crema-osc:  #EFEBE1;
  --tinta:      #262420;
  --tinta-suave:#5B564C;
  --linea:      rgba(38,36,32,.14);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'EB Garamond', 'Times New Roman', serif;

  --maxw: 1240px;
  --gutter: clamp(24px, 5vw, 72px);
  --section-pad: clamp(72px, 10vw, 140px);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width:100%; display:block; }
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--tinta);
  letter-spacing: .002em;
}
h2{ font-size: clamp(32px, 4vw, 50px); }
p{ margin: 0 0 1.1em; color: var(--tinta-suave); max-width: 62ch; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }

.kicker{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--terracota);
  margin: 0 0 .9em;
}
.kicker-light{ color: var(--tostado); }

.quote-italic{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  color: var(--tinta);
  border-left: 1px solid var(--linea);
  padding-left: 1.1em;
  max-width: 46ch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16.5px;
  letter-spacing: .02em;
  padding: .95em 2em;
  border: 1px solid currentColor;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}
.btn-solid{
  background: var(--verde);
  color: var(--crema);
  border-color: var(--verde);
}
.btn-solid:hover{ background: var(--verde-osc); border-color: var(--verde-osc); }

.btn-outline-light{
  color: var(--crema);
  border-color: rgba(248,246,241,.6);
}
.btn-outline-light:hover{ background: var(--crema); color: var(--verde); border-color: var(--crema); }

.btn-line{
  padding-left: 0;
  padding-right: 0;
  border: none;
  border-bottom: 1px solid var(--tinta);
  color: var(--tinta);
}
.btn-line:hover{ color: var(--terracota); border-color: var(--terracota); }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position: fixed;
  top: 18px; left:0; right:0;
  z-index: 100;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease, top .35s ease;
  padding: 26px 0;
}
.site-nav.is-scrolled{
  background: rgba(248,246,241,.94);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 1px 0 var(--linea);
  padding: 14px 0;
}
.nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand{ display:block; position:relative; line-height: 1; }
.nav-logo{ height: 30px; width:auto; display:block; transition: opacity .35s ease; }
.nav-logo-verde{ position:absolute; left:0; top:0; opacity:0; }
.site-nav.is-scrolled .nav-logo-crema{ opacity:0; }
.site-nav.is-scrolled .nav-logo-verde{ opacity:1; }
.nav-links{ display:flex; align-items:center; gap: 34px; }

/* Dropdown: Vida irrepetible → Fauna / Flora / Agua */
.nav-dropdown{ position:relative; display:flex; align-items:center; height:100%; }
.nav-dropdown-menu{
  position:absolute; top: calc(100% + 18px); left:50%; transform:translateX(-50%);
  background: var(--crema);
  box-shadow: 0 12px 30px rgba(20,24,16,.18);
  min-width: 160px;
  padding: 8px 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (min-width: 981px){
  /* Puente invisible que mantiene el hover activo mientras el cursor cruza
     el espacio entre el link y el submenú (evita que se cierre de camino). */
  .nav-dropdown::after{
    content:'';
    position:absolute;
    top:100%; left:50%; transform:translateX(-50%);
    width: 180px; height: 18px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
}.nav-dropdown-menu a{
  display:block; padding: 10px 22px;
  color: var(--tinta) !important;
  font-size: 15.5px;
  border-bottom:none !important;
}
.nav-dropdown-menu a:hover{ background: var(--crema-osc); color: var(--verde) !important; }
.nav-links a{
  font-size: 16px;
  color: var(--crema);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .35s ease, border-color .25s ease;
  white-space: nowrap;
}
.site-nav.is-scrolled .nav-links a{ color: var(--tinta); }
.nav-links a:hover{ border-color: currentColor; }
.nav-links > a.is-active,
.nav-dropdown.is-active .nav-dropdown-trigger{ border-bottom: 1px solid currentColor; }
.nav-cta{
  border: 1px solid currentColor !important;
  padding: .55em 1.3em !important;
  border-radius: 0;
}
.nav-cta:hover{ background: var(--crema); color: var(--verde) !important; }
.site-nav.is-scrolled .nav-cta:hover{ background: var(--verde); color: var(--crema) !important; }

.nav-toggle{
  display: none;
  position: relative;
  z-index: 210;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.nav-toggle span{
  width: 24px; height: 1px;
  background: var(--crema);
  transition: background .3s ease, transform .3s ease, opacity .3s ease;
}
.site-nav.is-scrolled .nav-toggle span{ background: var(--verde); }
.nav-toggle.is-active span{ background: var(--tinta) !important; }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-media{ position:absolute; inset:0; background: #12160f; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit: cover; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 46% at 50% 38%, rgba(15,18,12,.38) 0%, rgba(15,18,12,0) 72%),
    linear-gradient(180deg, rgba(20,24,16,.32) 0%, rgba(20,24,16,.18) 38%, rgba(18,22,15,.55) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 1.1s ease .15s forwards;
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.hero-logo{ width: min(420px, 70vw); margin: 0 auto 18px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hero-line{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--crema);
  font-size: clamp(17px, 2vw, 20px);
  max-width: 40ch;
  margin: 0 auto 30px;
}
.hero-actions{ margin-bottom: 28px; }
.hero-place{
  color: var(--crema);
  opacity: .85;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
}
.scroll-cue{
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 46px;
}
.scroll-cue-line{
  display:block; width:1px; height:100%;
  background: linear-gradient(180deg, rgba(248,246,241,0), rgba(248,246,241,.9));
  position: relative;
}
.scroll-cue-line::after{
  content:'';
  position:absolute; top:0; left:-2px;
  width:5px; height:5px;
  border-radius:50%;
  background: var(--crema);
  animation: cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ top:0; opacity:1;} 90%{ top:80%; opacity:0;} 100%{ top:80%; opacity:0;} }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

/* ==========================================================================
   Editorial spreads
   ========================================================================== */
.spread{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
  gap: clamp(32px, 6vw, 90px);
}
.spread-reverse{ grid-template-columns: 1fr 1.15fr; }
.spread-reverse .spread-media{ order: 2; }
.spread-reverse .spread-copy{ order: 1; }
.spread-media img{ width:100%; height:100%; object-fit: cover; min-height: 360px; }
.spread-copy{ display:flex; flex-direction:column; justify-content:center; max-width: 46ch; }
.plain-list{ margin: 4px 0 28px; }
.plain-list li{
  color: var(--tinta-suave);
  padding: 10px 0;
  border-top: 1px solid var(--linea);
}
.plain-list li:last-child{ border-bottom: 1px solid var(--linea); }

.media-trio{ display: flex; gap: 10px; height:100%; }
.media-trio img{
  flex: 1 1 0%;
  min-width: 0;
  width:auto; height:100%; object-fit: cover; min-height: 170px;
  cursor: zoom-in;
  transition: flex-grow .55s cubic-bezier(.22,.68,.36,1);
}
.media-trio:hover img{ flex-grow: 0.55; }
.media-trio img:hover{ flex-grow: 3.2; }

/* ==========================================================================
   Pull quotes (Reserva viva)
   ========================================================================== */
.pull-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--tinta);
  border-left: 2px solid var(--terracota);
  padding-left: 1.1em;
  margin: 0 0 1.6em;
  max-width: 46ch;
}
.pull-quote-short{ font-size: 22px; color: var(--verde); }

.thesis-line{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 27px;
  line-height: 1.35;
  color: var(--tinta);
  max-width: 20ch;
  margin: 4px 0 14px;
}
.thesis-accent{
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--tinta);
  margin: 0 0 22px;
}
.thesis-accent .accent{ color: var(--terracota); font-style: italic; }

/* ==========================================================================
   Carousel (Reserva viva)
   ========================================================================== */
.carousel{ position:relative; height:100%; }
.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
  height:100%;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  height:100%;
}
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  background: rgba(248,246,241,.85);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--verde); font-size:18px;
  z-index:2;
  transition: background .2s ease;
}
.carousel-arrow:hover{ background: var(--crema); }
.carousel-arrow-prev{ left:12px; }
.carousel-arrow-next{ right:12px; }
.carousel-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.carousel-dot{
  width:7px; height:7px; border-radius:50%;
  background: rgba(248,246,241,.55);
  border:none; padding:0; cursor:pointer;
}
.carousel-dot.is-active{ background: var(--crema); }

/* ==========================================================================
   Wavy line (brand asset, from the brochure)
   ========================================================================== */
.wavy-divider{
  display:block;
  height: 14px;
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  margin: 6px 0 22px;
}
.wavy-divider-center{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Vida irrepetible (overview) — fondo verde
   ========================================================================== */
.life-overview{
  background: var(--verde);
  color: var(--crema);
  max-width: none;
  margin: 0;
  padding: var(--section-pad) var(--gutter);
}
.life-overview-inner{ max-width: var(--maxw); margin: 0 auto; }
.life-overview .kicker{ color: var(--tostado); }
.life-intro{ max-width: 62ch; margin-bottom: 48px; }
.life-intro p, .life-intro h2{ color: var(--crema); }
.life-intro p{ color: rgba(248,246,241,.82); }
.endemic-line{
  max-width: 74ch;
  color: rgba(248,246,241,.75);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin: 8px 0 48px;
}
.life-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,4vw,48px); margin-bottom: 56px; }
.life-stat{ border-top: 1px solid rgba(248,246,241,.3); padding-top: 18px; }
.life-stat-number{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 54px);
  color: var(--crema);
  line-height: 1;
  margin-bottom: 10px;
}
.life-stat-label{ display:block; color: rgba(248,246,241,.8); font-size: 16px; max-width: 30ch; }
.life-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.life-card{ position:relative; display:block; overflow:hidden; aspect-ratio: 4/5; }
.life-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.life-card:hover img{ transform: scale(1.05); }
.life-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,24,16,0) 45%, rgba(15,18,12,.75) 100%);
}
.life-card-label{
  position:absolute; left:20px; bottom:18px; z-index:1;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--crema);
}

/* ==========================================================================
   Nuestro legado — parallax + franja clara
   ========================================================================== */
.legacy{
  position: relative;
  min-height: 640px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: var(--section-pad) var(--gutter);
}
.legacy-parallax{
  position:absolute; top:-60px; bottom:-60px; left:0; right:0;
  z-index:0;
  will-change: transform;
}
.legacy-parallax img{ width:100%; height:100%; object-fit:cover; }
.legacy .hero-scrim{ position:absolute; top:-60px; bottom:-60px; left:0; right:0; background: rgba(15,18,12,.28); z-index:1; }
.legacy-panel{
  position: relative; z-index: 2;
  background: rgba(248,246,241,.92);
  max-width: 620px;
  width: 100%;
  padding: clamp(32px,5vw,64px);
  text-align:center;
}
.legacy-panel .kicker{ text-align:center; }
.legacy-quote{
  font-size: 26px;
  max-width: 40ch;
  margin: 0 auto 24px;
  border:none; padding:0;
}

/* ==========================================================================
   Habitar el legado — intro con parallax
   ========================================================================== */
.dwell-intro{ position:relative; min-height: 620px; display:flex; align-items:center; padding: var(--section-pad) var(--gutter); overflow:hidden; scroll-margin-top: 90px; }
.dwell-intro-media{ position:absolute; top:-60px; bottom:-60px; left:0; right:0; will-change: transform; }
.dwell-intro-media img{ width:100%; height:100%; object-fit:cover; }
.dwell-intro .hero-scrim{ position:absolute; top:-60px; bottom:-60px; left:0; right:0; background: linear-gradient(180deg, rgba(18,22,15,.5), rgba(18,22,15,.68)); }
.dwell-intro-copy{
  position:relative; z-index:1;
  max-width: 640px; margin: 0 auto; text-align:center; color: var(--crema);
}
.dwell-intro-copy .kicker{ text-align:center; color: var(--tostado); }
.dwell-intro-copy p{ color: rgba(248,246,241,.9); }
.dwell-quote{
  font-size: 26px; color: var(--crema); border:none; padding:0; max-width: 44ch; margin: 0 auto 24px;
}
.dwell-close{
  font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--tostado);
  margin-top: 20px;
}

/* ==========================================================================
   Territorio / Naturaleza
   ========================================================================== */
.territory{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) * .6);
}
.territory-intro{ max-width: 62ch; margin-bottom: 56px; }
.territory-intro p{ max-width: 60ch; }

.stat-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: 64px;
}
.stat{ border-top: 1px solid var(--tinta); padding-top: 18px; }
.stat-number{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  color: var(--verde);
  line-height: 1;
}
.stat-label{ display:block; margin-top:10px; color: var(--tinta-suave); font-size: 16px; max-width: 24ch; }

.mosaic{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.mosaic-tall{ grid-row: span 2; }
.mosaic-item{ margin:0; position:relative; overflow:hidden; }
.mosaic-item img{ width:100%; height:100%; object-fit: cover; min-height: 220px; }
.mosaic-tall img{ min-height: 100%; }
.mosaic-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--crema);
  background: linear-gradient(180deg, rgba(20,24,16,0), rgba(15,18,12,.72));
}

/* ==========================================================================
   Feature photo (Casa Anfitriona)
   ========================================================================== */
.feature-photo{ position: relative; }
.feature-photo img{ width:100%; height: clamp(420px, 80vh, 780px); object-fit: cover; }
.feature-photo-copy{
  position:absolute; left: var(--gutter); bottom: 56px;
  max-width: 480px;
  background: rgba(248,246,241,.92);
  padding: 28px 32px;
}
.feature-photo-copy .quote-italic{ border:none; padding:0; margin:0; }

.trio-band{ max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) var(--section-pad); }
.trio-band .media-trio{ margin-bottom: 22px; }
.trio-band .media-trio img{ min-height: 260px; }
.trio-caption{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--tinta);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
}

/* ==========================================================================
   Manifiesto (Guardián Fundador)
   ========================================================================== */
.manifesto{
  background: var(--verde);
  color: var(--crema);
  padding: var(--section-pad) var(--gutter);
}
.manifesto-inner{ max-width: 640px; margin: 0 auto; text-align: center; }
.manifesto p{ color: rgba(248,246,241,.82); max-width: 52ch; margin-left:auto; margin-right:auto; }
.manifesto-lead{
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--crema);
  font-style: italic;
}
.manifesto-close{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--crema);
  margin: 28px auto 34px;
}
.manifesto-close em{ color: var(--tostado); }

/* ==========================================================================
   Pertenecer / Comunidad
   ========================================================================== */
.belong{
  display:grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.belong-copy{ max-width: 46ch; }
.media-trio-vertical{ grid-template-columns: 1fr; gap: 14px; }
.media-trio-vertical figure{ margin:0; position:relative; }
.media-trio-vertical img{ min-height: 150px; }
.media-trio-vertical figcaption{
  position:absolute; right:12px; bottom:12px;
  font-size: 13px; letter-spacing:.06em; text-transform: uppercase;
  color: var(--crema);
  background: rgba(38,66,44,.75);
  padding: 5px 10px;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ position: relative; padding: var(--section-pad) var(--gutter); }
.contact-media{ position:absolute; inset:0; }
.contact-media img{ width:100%; height:100%; object-fit: cover; }
.contact .hero-scrim{ background: linear-gradient(180deg, rgba(18,22,15,.72), rgba(18,22,15,.82)); }
.contact-inner{
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  text-align: center;
  color: var(--crema);
}
.contact-inner h2{ color: var(--crema); }
.contact-sub{ color: rgba(248,246,241,.85); max-width: 48ch; margin: 0 auto 40px; }

.contact-form{
  background: var(--crema);
  color: var(--tinta);
  padding: clamp(28px, 4vw, 48px);
  text-align: left;
}
.form-row{ margin-bottom: 20px; }
.form-row-half{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 0; }
.form-row-half > div{ margin-bottom: 20px; }
label{ display:block; font-size: 14.5px; letter-spacing: .02em; color: var(--tinta-suave); margin-bottom: 7px; }
input[type=text], input[type=tel], input[type=email], select, textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--verde); outline-offset: 1px; }
textarea{ resize: vertical; }
.form-check{ display:flex; align-items:flex-start; gap: 10px; }
.form-check input{ margin-top: 5px; }
.form-check label{ margin:0; font-size: 14.5px; }
.form-check a{ text-decoration: underline; }
.contact-form .btn-solid{ width: 100%; margin-top: 6px; }
.required-mark{ color: var(--terracota); }
.form-required-note{ margin: 4px 0 14px; font-size: 13px; color: var(--tinta-suave); }
.form-note{ margin: 14px 0 0; font-size: 14.5px; min-height: 1.2em; }
.form-note.ok{ color: var(--verde); }
.form-note.err{ color: var(--terracota); }

.contact-location{
  margin-top: 28px;
  font-size: 14.5px;
  letter-spacing: .04em;
  color: rgba(248,246,241,.75);
}

/* ==========================================================================
   Subpage header (Fauna / Flora / Agua)
   ========================================================================== */
.page-hero{ position:relative; height: 56vh; min-height: 380px; display:flex; align-items:flex-end; }
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero .hero-scrim{ background: linear-gradient(180deg, rgba(18,22,15,.15), rgba(15,18,12,.75)); }
.page-hero-inner{ position:relative; z-index:1; max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter) 48px; color: var(--crema); }
.page-hero-inner .kicker{ color: var(--tostado); }
.page-hero-inner h1{
  font-family: var(--font-display); font-weight:500; font-size: clamp(38px,5vw,64px); color: var(--crema); margin:0;
}
.back-link{ display:inline-block; margin-bottom: 18px; font-size: 15px; color: rgba(248,246,241,.85); border-bottom: 1px solid rgba(248,246,241,.4); }
.back-link:hover{ color: var(--crema); }
.page-hero-fauna img{ object-position: center 12%; }

.page-body{ max-width: var(--maxw); margin: 0 auto; padding: var(--section-pad) var(--gutter); }
.page-body > .intro{ max-width: 68ch; margin-bottom: 56px; }
.page-body.page-body-continued{ padding-top: var(--section-pad); }

.species-carousel-band{
  background: var(--verde);
  padding: 56px 0;
  margin-bottom: 0;
}
.species-carousel-band .species-carousel{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.species-carousel-band .species-slide .species-name-common{ color: var(--crema); }
.species-carousel-band .species-slide .species-name-sci{ color: rgba(248,246,241,.75); }

/* Species with photo */
.species-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 64px; }
.species-card figure{ margin:0; }
.species-card img{ width:100%; aspect-ratio: 4/5; object-fit:cover; margin-bottom: 14px; }
.species-name-common{ font-family: var(--font-display); font-size: 21px; color: var(--tinta); display:block; }
.species-name-sci{ font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--tinta-suave); }

/* Species as text rows (no photo yet) */
.species-list-title{ margin-bottom: 6px; }
.species-list{ margin-bottom: 56px; }
.species-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding: 14px 0; border-top: 1px solid var(--linea);
}
.species-list .species-row:last-child{ border-bottom: 1px solid var(--linea); }
.species-row-common{ font-family: var(--font-display); font-size: 18.5px; color: var(--tinta); }
.species-row-sci{ font-family: var(--font-display); font-style: italic; font-size: 15.5px; color: var(--tinta-suave); flex: 1; text-align:right; }

.fact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,4vw,48px); margin-bottom: 56px; }
.fact{ border-top: 1px solid var(--tinta); padding-top: 16px; }
.fact-number{ display:block; font-family: var(--font-display); font-size: clamp(30px,3.4vw,42px); color: var(--verde); line-height:1.1; }
.fact-label{ display:block; margin-top: 8px; color: var(--tinta-suave); font-size: 15px; max-width: 28ch; }

.updating-note{
  font-family: var(--font-display); font-style: italic; color: var(--tinta-suave); font-size: 16px;
  border-top: 1px solid var(--linea); padding-top: 20px; margin-top: 8px;
}

/* ==========================================================================
   Página Evolución
   ========================================================================== */
.evolution-page{ background: var(--verde); color: var(--crema); }
.evolution-hero{
  max-width: var(--maxw); margin:0 auto;
  padding: calc(var(--section-pad) + 40px) var(--gutter) 10px;
  text-align:center;
}
.evolution-hero h1{ color: var(--crema); font-size: clamp(40px,6vw,68px); margin:0; }

.evolution-display{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 60px; overflow:hidden; }
.evolution-panel{ display:none; }
.evolution-panel.is-active{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px,5vw,72px);
  align-items:center;
  animation: evoSlideIn .5s cubic-bezier(.22,.68,.36,1);
}
@keyframes evoSlideIn{
  from{ opacity:0; transform: translateX(48px); }
  to{ opacity:1; transform: translateX(0); }
}
.evolution-media{ position:relative; }
.evolution-media img, .evolution-media video{ width:100%; height:auto; display:block; }
.evolution-media video{ background:#000; }
.evolution-info-year{
  font-family: var(--font-display); font-size: clamp(48px,6vw,72px); color: var(--tostado); line-height:1; display:block; margin-bottom:12px;
}
.evolution-info h2{ color: var(--crema); font-size: clamp(28px,3.2vw,38px); }
.evolution-info p{ color: rgba(248,246,241,.85); max-width: 46ch; }

.evolution-timeline{ max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter) var(--section-pad); }
.timeline-track{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding: 50px 10px 46px;
}
.timeline-line-wrap{ position:relative; min-width: 480px; height: 20px; }
.timeline-line{ position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); height:20px; object-fit:contain; opacity:.55; }
.timeline-marker{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-family: var(--font-display); font-size: 19px;
  color: rgba(248,246,241,.55);
  padding: 6px;
  transition: color .2s ease;
}
.timeline-marker-icon{
  width:36px; height:auto;
  opacity:.5;
  transition: opacity .25s ease, transform .25s ease;
}
.timeline-marker.is-active{ color: var(--crema); }
.timeline-marker.is-active .timeline-marker-icon{ opacity:1; transform: translateY(-3px) scale(1.1); }
.timeline-marker:hover{ color: var(--crema); }
.timeline-marker:hover .timeline-marker-icon{ opacity:.8; }

/* ==========================================================================
   Instagram (entre Nuestro legado y Contacto)
   ========================================================================== */
.instagram-feed{ background: var(--crema); padding: var(--section-pad) var(--gutter); text-align: center; }
.instagram-feed-inner{ max-width: var(--maxw); margin: 0 auto; }
.instagram-feed .kicker{ text-align:center; }
.instagram-feed h2{ margin-bottom: 40px; }
.instagram-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 36px;
}
.instagram-grid a{ display:block; position:relative; aspect-ratio: 4 / 5; overflow:hidden; }
.instagram-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease, filter .5s ease; }
.instagram-grid a::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(20,24,16,0);
  transition: background .3s ease;
}
.instagram-grid a:hover::after{ background: rgba(20,24,16,.22); }
.instagram-grid a:hover img{ transform: scale(1.06); }

/* Carrusel horizontal de la galería */
.filmstrip{ position:relative; margin-bottom: 36px; }
.filmstrip-track{
  display:flex; gap:10px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filmstrip-track::-webkit-scrollbar{ display:none; }
.filmstrip-item{
  flex:0 0 calc((100% - 3*10px)/4);
  aspect-ratio: 4/5;
  scroll-snap-align:start;
  position:relative; overflow:hidden; display:block;
}
.filmstrip-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.filmstrip-item::after{ content:''; position:absolute; inset:0; background:rgba(20,24,16,0); transition:background .3s ease; }
.filmstrip-item:hover::after{ background: rgba(20,24,16,.22); }
.filmstrip-item:hover img{ transform: scale(1.06); }
.filmstrip .carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); }
.filmstrip .carousel-arrow-prev{ left:-8px; }
.filmstrip .carousel-arrow-next{ right:-8px; }

/* Carrusel de especies (Fauna / Flora / Agua) */
.species-carousel{ margin: 40px 0 0; }
.species-slide{
  flex: 0 0 calc((100% - 2*20px)/3);
  scroll-snap-align: start;
}
.species-slide-media{ aspect-ratio: 4/5; overflow:hidden; margin-bottom: 14px; background: var(--crema-osc); }
.species-slide-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.species-slide .species-name-common{ display:block; font-size:17px; color: var(--tinta); }
.species-slide .species-name-sci{ display:block; font-family: var(--font-display); font-style:italic; color: var(--tinta-suave); font-size:15px; margin-top:2px; }
.species-carousel.no-caption .filmstrip-track{ gap:14px; }
.species-carousel.no-caption .species-slide{ flex-basis: calc((100% - 3*14px)/4); }
.species-carousel.no-caption .species-slide-media{ margin-bottom:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--verde-osc); color: var(--crema); padding: 70px var(--gutter) 26px; }
.footer-wavy{ display:block; max-width: var(--maxw); width:100%; height:16px; object-fit:contain; margin: 0 auto 50px; opacity:.6; }
.footer-top{
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(248,246,241,.16);
}
.footer-logo{ height: 34px; width:auto; }
.footer-brand p{ color: rgba(248,246,241,.7); margin-top: 12px; font-family: var(--font-display); font-style: italic; }
.footer-links{ display:flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-contact a{ color: rgba(248,246,241,.82); }
.footer-links a:hover, .footer-contact a:hover{ color: var(--tostado); }
.footer-contact{ display:flex; flex-direction: column; gap: 12px; }
.footer-contact p{ margin:0; }
.footer-bottom{
  max-width: var(--maxw); margin: 0 auto;
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 22px;
  font-size: 13.5px;
  color: rgba(248,246,241,.55);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .nav-links{
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--crema);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px var(--gutter);
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  .nav-links.is-open{ transform: translateX(0); box-shadow: -10px 0 30px rgba(0,0,0,.15); }
  .nav-links a{ color: var(--tinta) !important; font-size: 19px; }
  .nav-toggle{ display: flex; }

  .nav-dropdown{ width:100%; }
  .nav-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; background:none; min-width:0; padding: 6px 0 0 18px;
    display:none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu{ display:block; }
  .nav-dropdown-menu a{ padding: 8px 0; font-size: 17px; }

  .life-cards{ grid-template-columns: 1fr; }
  .life-stats{ grid-template-columns: 1fr; gap: 24px; }
  .legacy-quote, .dwell-quote{ font-size: 22px; }
  .legacy-panel{ padding: 28px 24px; }
  .evolution-panel.is-active{ grid-template-columns: 1fr; }

  .species-grid{ grid-template-columns: 1fr 1fr; }
  .fact-grid{ grid-template-columns: 1fr; }
  .species-row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .species-row-sci{ text-align:left; }

  .timeline-line-wrap{ min-width: 0; }
  .instagram-grid{ grid-template-columns: repeat(3, 1fr); }
  .filmstrip-item{ flex-basis: calc((100% - 2*10px)/2.3); }
  .species-slide{ flex-basis: calc((100% - 20px)/2.3); }
  .species-carousel.no-caption .species-slide{ flex-basis: calc((100% - 2*14px)/3); }

  .spread, .spread-reverse{ grid-template-columns: 1fr; }
  .spread-reverse .spread-media, .spread-reverse .spread-copy{ order: initial; }
  .spread-media img{ min-height: 300px; }

  .stat-row{ grid-template-columns: 1fr; gap: 24px; }
  .mosaic{ grid-template-columns: 1fr 1fr; }
  .mosaic-tall{ grid-column: span 2; grid-row: auto; }
  .mosaic-tall img{ min-height: 260px; }

  .belong{ grid-template-columns: 1fr; }
  .media-trio-vertical{ grid-template-columns: 1fr 1fr 1fr; }

  .feature-photo-copy{ left: 16px; right: 16px; bottom: 20px; max-width: none; }
  .form-row-half{ grid-template-columns: 1fr; gap: 0; }

  .footer-top{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .site-nav{ top: 10px; }
  body{ font-size: 16.5px; }
  .media-trio{ flex-direction: column; }
  .media-trio:hover img{ flex-grow: 1; }
  .media-trio img:hover{ flex-grow: 1; }
  .media-trio img{ min-height: 200px; }
  .media-trio-vertical{ grid-template-columns: 1fr; }
  .filmstrip-item{ flex-basis: calc((100% - 10px)/1.35); }
  .species-slide{ flex-basis: calc((100% - 10px)/1.35); }
  .species-carousel.no-caption .species-slide{ flex-basis: calc((100% - 14px)/2.2); }
  .species-grid{ grid-template-columns: 1fr; }
}