/* =====================================================================
   Delicia de Mi Tierra — Hero "Ilustración Orgánica Interactiva"
   Warm Tulum palette · organic photo-reveal windows · editorial type
   ===================================================================== */

:root {
  /* palette — drawn from the base illustration */
  --paper:        #FBF6EC;
  --cream:        #F4EBDA;
  --cream-2:      #EADDC6;
  --sand:         #DCC6A2;
  --clay:         #C77E4F;
  --terracotta:   #B45E37;
  --terracotta-d: #9A4A2B;
  --mustard:      #C7942F;
  --sage:         #7D8262;
  --olive:        #565B43;
  --forest:       #39432F;
  --cacao:        #34261B;
  --ink:          #211913;
  --teal:         #1C4A40;

  --text:         var(--cacao);
  --muted:        #6A5946;

  /* type */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape */
  --r-pill: 999px;
  --r-sm: 10px;

  /* shadow */
  --sh-win: 0 24px 40px rgba(48, 28, 16, .30), 0 6px 14px rgba(48, 28, 16, .18);
  --sh-soft: 0 14px 34px rgba(48, 28, 16, .16);

  --nav-h: 78px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--cacao); color: var(--cream);
  padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

::selection { background: var(--terracotta); color: var(--paper); }

/* =========================== BUTTONS =========================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--cacao);
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: .92rem;
  letter-spacing: .01em;
  padding: .72em 1.25em;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, border-color .35s, box-shadow .35s;
  white-space: nowrap;
}
.btn svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.btn:hover { transform: translateY(-2px); }
.btn--lg { font-size: 1rem; padding: .92em 1.6em; }

.btn--solid {
  --btn-bg: var(--terracotta); --btn-fg: var(--paper);
  box-shadow: 0 10px 24px rgba(180, 94, 55, .32);
}
.btn--solid:hover { --btn-bg: var(--terracotta-d); box-shadow: 0 14px 30px rgba(154, 74, 43, .42); }
.btn--solid:hover svg { transform: translateX(4px); }

.btn--outline {
  --btn-fg: var(--cacao);
  border-color: rgba(52, 38, 27, .32);
  background: rgba(251, 246, 236, .35);
  backdrop-filter: blur(2px);
}
.btn--outline:hover { border-color: var(--cacao); background: rgba(251, 246, 236, .7); }

.btn--ghost { --btn-fg: var(--cacao); padding: .6em 1em; }
.btn--ghost:hover { background: rgba(52, 38, 27, .07); }

.btn--whatsapp {
  --btn-fg: var(--cacao);
  padding: .6em .9em; font-weight: 600;
}
.btn--whatsapp svg { color: #1FA855; }
.btn--whatsapp:hover { color: var(--terracotta-d); }

/* =========================== NAV =========================== */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 clamp(1.1rem, 3.4vw, 3rem);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--cacao); }
.brand__mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--terracotta);
  background: radial-gradient(circle at 35% 30%, rgba(251,246,236,.9), rgba(251,246,236,.35));
  box-shadow: inset 0 0 0 1px rgba(180,94,55,.45);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--serif); font-weight: 500; font-size: 1.18rem; letter-spacing: .005em; }
.brand__tag {
  font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta-d); margin-top: 2px;
}

.nav__links {
  margin-left: auto;
  display: flex; gap: clamp(.8rem, 1.8vw, 1.8rem);
  font-size: .9rem; font-weight: 500;
}
.nav__links a { position: relative; padding: .35em 0; color: var(--cacao); opacity: .82; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--terracotta); transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: .6rem; margin-left: 1.4rem; }

.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__burger span { width: 22px; height: 2px; background: var(--cacao); border-radius: 2px; transition: .3s; }

/* =========================== HERO =========================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

/* L1 — base illustration */
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg-img {
  position: absolute; inset: -2%;
  background: url("../assets/illustration/hero-base.jpg") center/cover no-repeat;
  transform-origin: 60% 45%;
  will-change: transform;
}
/* warm wash + left legibility veil */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(251,246,236,.78) 0%, rgba(251,246,236,.42) 26%, rgba(251,246,236,0) 52%),
    linear-gradient(0deg, rgba(52,38,27,.20) 0%, rgba(52,38,27,0) 30%),
    radial-gradient(120% 80% at 18% 64%, rgba(251,246,236,.55), rgba(251,246,236,0) 55%);
}

/* L2 — ambient motes canvas */
.hero__motes {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* L3 — reveal windows */
.hero__reveal { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.win {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); aspect-ratio: 1 / 1;
  margin-left: calc(var(--w) / -2);
  margin-top:  calc(var(--w) / -2);
  transform: rotate(var(--rot));
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-mask-size: 102% 102%; mask-size: 102% 102%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 22px 26px rgba(40, 24, 14, .34));
  will-change: transform, opacity;
}
.win img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* subtle inner warmth so photos sit in the palette */
.win::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,238,210,.06), rgba(58,32,18,.20));
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-mask-size: 102% 102%; mask-size: 102% 102%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* L4 — botanical accents */
.botanical {
  position: absolute; z-index: 4; pointer-events: none;
  opacity: .5;
  filter: sepia(.5) saturate(.8) brightness(.55) hue-rotate(-8deg);
  will-change: transform;
}
.botanical--grass { width: clamp(140px, 16vw, 290px); left: -1.5vw; bottom: -2vh; transform: rotate(-4deg); }
.botanical--stem  { width: clamp(120px, 13vw, 240px); right: 1vw; top: 2vh; transform: rotate(10deg) scaleX(-1); }

/* L5 — grain */
.hero__grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url("../assets/texture/grain.png") center/760px repeat;
  mix-blend-mode: soft-light; opacity: .55;
}

/* L6 — content */
.hero__content {
  position: relative; z-index: 10;
  max-width: min(46rem, 52vw);
  padding: calc(var(--nav-h) + 4vh) clamp(1.1rem, 3.4vw, 3rem) 0;
  margin-top: clamp(2vh, 6vh, 9vh);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta-d);
  margin: 0 0 1.1rem;
}
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 0 rgba(180, 94, 55, .5);
}

.display {
  font-family: var(--serif);
  font-weight: 430;
  font-size: clamp(2.6rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.018em;
  margin: 0;
  color: var(--cacao);
  font-optical-sizing: auto;
}
.line { display: block; overflow: hidden; }
.line > span { display: block; }
.line--accent { color: var(--terracotta); font-style: italic; font-weight: 380; }

.lead {
  max-width: 33rem;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.62; color: var(--muted);
  margin: 1.5rem 0 0;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2.1rem; }

.services {
  list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .5rem;
  padding: 0; margin: 2.4rem 0 0;
}
.services li {
  font-size: .76rem; font-weight: 500; letter-spacing: .02em; color: var(--muted);
  padding: .4em .85em; border-radius: var(--r-pill);
  border: 1px solid rgba(52, 38, 27, .16);
  background: rgba(251, 246, 236, .4);
}
.services li:nth-child(odd) { color: var(--olive); }

/* hint + scroll cue */
.hero__hint {
  position: absolute; z-index: 10; left: clamp(1.1rem, 3.4vw, 3rem); bottom: 3.2vh;
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .78rem; color: var(--muted); letter-spacing: .02em;
}
.hero__hint-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta);
}

.hero__scroll {
  position: absolute; z-index: 10; right: clamp(1.1rem, 3.4vw, 3rem); bottom: 3.2vh;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cacao); opacity: .72;
}
.hero__scroll svg { animation: none; }

/* =====================================================================
   MOTION GATE — pre-hide animated elements only when motion is allowed
   (prevents FOUC; static/reduced-motion shows a fully composed scene)
   ===================================================================== */
html.anim [data-reveal] { opacity: 0; }
html.anim [data-reveal="up"] { transform: translateY(28px); }
/* lines pre-hide with opacity only — GSAP owns the yPercent clip channel from a
   clean start, so the browser never bakes a px matrix GSAP would misread. */
html.anim .win { opacity: 0; }
html.anim .botanical { opacity: 0; }

/* live micro-motion (only under .anim) */
html.anim .eyebrow__dot { animation: pulse 2.6s ease-out infinite; }
html.anim .hero__hint-dot { animation: pulse 2.6s ease-out infinite .6s; }
html.anim .hero__scroll svg { animation: bob 2.2s ease-in-out infinite; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(180, 94, 55, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(180, 94, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 94, 55, 0); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .hero__content { max-width: 64vw; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__burger { display: flex; }
  .hero__content { max-width: 92vw; }
}

@media (max-width: 780px) {
  :root { --nav-h: 66px; }
  /* reflow windows using the mobile coordinate set */
  .win {
    left: var(--mx); top: var(--my); width: var(--mw);
    margin-left: calc(var(--mw) / -2);
    margin-top:  calc(var(--mw) / -2);
    transform: rotate(var(--mrot));
  }
  .hero__content {
    max-width: 100%;
    padding-top: calc(var(--nav-h) + 3vh);
    margin-top: 1.5vh;
  }
  .display { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .lead { font-size: 1rem; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(251,246,236,.86) 0%, rgba(251,246,236,.30) 30%, rgba(251,246,236,0) 52%),
      linear-gradient(0deg, rgba(52,38,27,.34) 0%, rgba(52,38,27,0) 42%);
  }
  .hero__hint { display: none; }
  .services { gap: .45rem; }
  .services li { font-size: .7rem; }

  /* lighten window density and frame the screen edges */
  .win:nth-child(4), .win:nth-child(6), .win:nth-child(8) { display: none; }

  /* legibility wash behind the text block (sits above windows, below text) */
  .hero__content::before {
    content: ""; position: absolute; z-index: -1;
    inset: -4vh -10vw -8vh -10vw;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(244,235,218,0) 0%,
      rgba(244,235,218,0.84) 13%,
      rgba(244,235,218,0.90) 58%,
      rgba(244,235,218,0.66) 82%,
      rgba(244,235,218,0) 100%);
  }

  /* tidy the wordmark on narrow screens */
  .brand__name { font-size: 1.02rem; line-height: 1.04; }
  .brand__tag { display: none; }
  .brand__mark { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
  .display { font-size: clamp(2.1rem, 13.5vw, 3rem); }
  .cta-row .btn--whatsapp span { display: none; }
}