:root {
  --paper: #f4eee5;
  --paper-soft: #f8f3ec;
  --ink: #3d3028;
  --muted: #74675d;
  --accent: #bd855b;
  --accent-deep: #a76f49;
  --line: rgba(61, 48, 40, .25);
  --white: #fffaf4;
  --shadow: 0 12px 40px rgba(54, 36, 24, .10);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 2000;
  background: var(--ink); color: white; padding: 10px 14px;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

.site-header { background: var(--paper-soft); position: relative; z-index: 50; }
.top-nav {
  max-width: 1500px; margin: 0 auto; min-height: 152px;
  display: grid; grid-template-columns: 1fr minmax(260px, 420px) 1fr;
  align-items: center; gap: 30px; padding: 12px 38px 4px;
}
.nav-side { display: flex; gap: clamp(18px, 2.4vw, 42px); align-items: center; }
.nav-right { justify-content: flex-end; }
.nav-side a, .footer-links a, .link-button {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.nav-side a { position: relative; padding: 8px 0; }
.nav-side a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: var(--accent); transition: right .25s ease;
}
.nav-side a:hover::after { right: 0; }
.brand { justify-self: center; width: min(100%, 355px); }
.brand img { mix-blend-mode: multiply; }
.instagram-icon { width: 21px; height: 21px; display: grid; place-items: center; }
.instagram-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.instagram-icon .ig-dot { fill: currentColor; stroke: none; }
.menu-toggle, .mobile-menu { display: none; }

.section-shell { max-width: 1500px; margin: 0 auto; }
.eyebrow { margin: 0 0 15px; font-size: 11px; letter-spacing: .35em; text-transform: uppercase; font-weight: 500; }
.eyebrow span { margin: 0 .5em; }
.eyebrow.accent { color: var(--accent); }
.eyebrow.light { color: rgba(255,250,244,.88); }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: .95; letter-spacing: -.025em; margin: 0; }
h1 { font-size: clamp(54px, 5.2vw, 92px); }
h2 { font-size: clamp(48px, 4.5vw, 78px); }
.rule { display: block; width: 31px; height: 1px; background: var(--ink); margin: 22px 0; opacity: .7; }
.rule-light { background: white; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 48px; padding: 0 28px; border: 1px solid transparent;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-filled { background: var(--accent); color: white; }
.button-filled:hover { background: var(--accent-deep); }
.button-outline { border-color: rgba(61,48,40,.45); background: transparent; }
.button-outline:hover { background: var(--ink); color: white; border-color: var(--ink); }

.hero { position: relative; min-height: min(680px, 72vh); overflow: hidden; display: grid; align-items: center; }
.hero-media { position: absolute; inset: -7% 0; background: url('../images/hero.jpg') center right / cover no-repeat; transform: translate3d(0,0,0); }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(244,238,229,.98) 0%, rgba(244,238,229,.90) 28%, rgba(244,238,229,.45) 48%, rgba(244,238,229,0) 65%);
}
.hero-copy { position: relative; z-index: 2; width: min(92%, 1500px); margin: 0 auto; padding: 70px 5.8%; }
.hero-copy p:not(.eyebrow) { max-width: 470px; margin: 0 0 26px; font-size: 16px; }

.experiences { min-height: 590px; display: grid; grid-template-columns: 40% 60%; background: var(--paper-soft); }
.experience-copy { padding: 75px 10% 70px 12%; align-self: center; }
.experience-copy p:not(.eyebrow) { max-width: 430px; margin: 0 0 26px; }
.experience-mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 22px 7% 22px 0; }
.experience-mosaic figure { margin: 0; overflow: hidden; min-height: 0; }
.experience-mosaic .mosaic-main { grid-row: 1 / 3; }
.experience-mosaic img { height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.experience-mosaic figure:hover img { transform: scale(1.025); }

.parallax-section { position: relative; overflow: hidden; }
.balance { min-height: 420px; display: flex; align-items: center; }
.balance-media { position: absolute; inset: -12% 0; background: url('../images/equilibrio.webp') center / cover no-repeat; }
.balance-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(45,31,20,.87), rgba(45,31,20,.40) 50%, rgba(45,31,20,.12)); }
.balance-copy { position: relative; z-index: 2; color: white; padding: 72px max(6.5vw, 42px); }
.balance-copy p:not(.eyebrow) { font-size: 16px; }

.space-section { max-width: 1500px; margin: 0 auto; min-height: 480px; display: grid; grid-template-columns: 2fr 1fr; background: var(--paper-soft); }
.space-photo { margin: 0; overflow: hidden; }
.space-photo img { height: 100%; object-fit: cover; object-position: center; }
.space-copy { padding: 70px 12%; align-self: center; }
.space-copy p:not(.eyebrow) { max-width: 400px; margin: 0 0 26px; }

.cacao { min-height: 380px; display: flex; justify-content: flex-end; align-items: center; color: white; }
.cacao-media { position: absolute; inset: -12% 0; background: url('../images/ceremonia.webp') center / cover no-repeat; }
.cacao-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,22,15,.08) 35%, rgba(34,22,15,.78) 100%); }
.cacao-copy { position: relative; z-index: 2; width: min(42%, 610px); margin-right: max(5vw, 42px); padding: 52px 0; }
.cacao-copy p:not(.eyebrow) { margin: 0 0 24px; }

.location { display: grid; grid-template-columns: 37% 63%; min-height: 470px; background: var(--paper-soft); }
.location-copy { padding: 58px 12%; align-self: center; }
.pin-icon { width: 29px; height: 29px; fill: none; stroke: var(--ink); stroke-width: 1.5; margin-bottom: 15px; }
.location-copy h2 { font-size: clamp(46px, 4vw, 70px); }
.location-copy p:not(.eyebrow) { max-width: 390px; margin: 22px 0 25px; }
.map-wrap { display: block; overflow: hidden; min-height: 470px; }
.map-wrap img { height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(.96); transition: transform .7s ease; }
.map-wrap:hover img { transform: scale(1.015); }

.final-cta { min-height: 230px; display: grid; grid-template-columns: minmax(220px, 32%) 1fr; position: relative; overflow: hidden; background: var(--paper); border-top: 8px solid var(--paper-soft); }
.final-photo { margin: 0; overflow: hidden; }
.final-photo img { height: 100%; object-fit: cover; object-position: center; }
.final-copy { align-self: center; text-align: center; z-index: 2; padding: 36px 18%; }
.final-copy h2 { font-size: clamp(42px, 4vw, 68px); margin-bottom: 22px; }
.final-shadow { position: absolute; right: -4%; bottom: -40%; width: 32%; height: 180%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(89,99,66,.16), rgba(89,99,66,0) 68%); filter: blur(10px); }

.site-footer { margin: 0 auto; max-width: 1500px; min-height: 92px; padding: 0 42px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand { font-family: var(--serif); font-size: 24px; letter-spacing: .08em; }
.footer-brand span { font-family: var(--sans); font-size: 9px; letter-spacing: .12em; margin-left: 20px; color: var(--muted); }
.footer-links { display: flex; gap: 35px; align-items: center; }
.link-button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }

.whatsapp-float {
  position: fixed; z-index: 1000; right: 24px; bottom: 24px; width: 62px; height: 62px;
  border: 0; border-radius: 50%; background: #239c45; color: white; box-shadow: 0 10px 28px rgba(0,0,0,.24);
  display: grid; place-items: center; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.whatsapp-float svg { width: 34px; height: 34px; fill: currentColor; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .top-nav { min-height: 118px; grid-template-columns: 1fr auto; padding: 8px 22px; }
  .brand { justify-self: start; width: 230px; }
  .nav-side { display: none; }
  .menu-toggle { display: grid; justify-self: end; width: 42px; height: 42px; place-content: center; gap: 7px; border: 0; background: none; cursor: pointer; }
  .menu-toggle span { width: 25px; height: 1px; background: var(--ink); transition: transform .2s ease; }
  .menu-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-menu { display: grid; max-height: 0; overflow: hidden; opacity: 0; background: var(--paper-soft); transition: max-height .3s ease, opacity .3s ease, padding .3s ease; padding: 0 24px; }
  .mobile-menu.is-open { max-height: 420px; opacity: 1; padding: 18px 24px 30px; }
  .mobile-menu a { padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

  .hero { min-height: 700px; align-items: end; }
  .hero-media { inset: 0; background-size: cover; background-position: 61% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(244,238,229,.98) 0%, rgba(244,238,229,.88) 39%, rgba(244,238,229,.08) 74%); }
  .hero-copy { padding: 330px 28px 58px; width: 100%; }
  .hero-copy p:not(.eyebrow) { font-size: 14px; }

  .experiences { grid-template-columns: 1fr; }
  .experience-copy { padding: 62px 28px 38px; }
  .experience-mosaic { min-height: 580px; padding: 0 18px 42px; grid-template-columns: 1.6fr 1fr; }

  .balance { min-height: 440px; }
  .balance-copy { padding: 58px 28px; }
  .space-section { grid-template-columns: 1fr; }
  .space-photo { min-height: 430px; }
  .space-copy { padding: 52px 28px 62px; }

  .cacao { min-height: 560px; align-items: end; }
  .cacao-media { inset: 0; background-position: 44% center; }
  .cacao-overlay { background: linear-gradient(0deg, rgba(34,22,15,.88) 0%, rgba(34,22,15,.35) 58%, rgba(34,22,15,.05) 100%); }
  .cacao-copy { width: auto; margin: 0; padding: 55px 28px; }

  .location { grid-template-columns: 1fr; }
  .location-copy { padding: 55px 28px 42px; }
  .map-wrap { min-height: 390px; }

  .final-cta { grid-template-columns: 1fr; }
  .final-photo { height: 300px; }
  .final-photo img { object-position: 50% 50%; }
  .final-copy { padding: 45px 25px 56px; }
  .site-footer { min-height: 120px; padding: 26px 24px; align-items: flex-start; }
}

@media (max-width: 620px) {
  .top-nav { min-height: 100px; }
  .brand { width: 190px; }
  h1 { font-size: 52px; }
  h2 { font-size: 47px; }
  .hero { min-height: 760px; }
  .hero-media { background-position: 67% top; background-size: auto 58%; background-repeat: no-repeat; background-color: #c99a73; }
  .hero-copy { padding-top: 400px; }
  .hero-copy p br { display: none; }
  .experience-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 370px 190px; min-height: 0; }
  .experience-mosaic .mosaic-main { grid-column: 1 / 3; grid-row: 1; }
  .experience-mosaic figure:nth-child(2), .experience-mosaic figure:nth-child(3) { grid-row: 2; }
  .balance-media { inset: 0; background-position: 62% center; }
  .space-photo { min-height: 390px; }
  .space-photo img { object-position: 46% center; }
  .map-wrap { min-height: 320px; }
  .site-footer { flex-direction: column; }
  .footer-brand span { display: block; margin: 3px 0 0; }
  .whatsapp-float { width: 56px; height: 56px; right: 17px; bottom: 17px; }
  .whatsapp-float svg { width: 31px; height: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}