/* ============================================================
   VIAPELES — one-page brand site · Premium edition
   Editorial luxury · film grain · masked reveals · custom cursor
   ============================================================ */

:root {
  /* Official brand palette — Manual de Normas VIAPELES */
  --rajah:         #F1B65B;  /* golden amber — primary warm */
  --peru:          #D38849;  /* caramel — accent */
  --pastel-gray:   #DAD1B9;  /* warm greige — neutral */

  /* Semantic tokens (mapped to the brand palette) */
  --deer:          var(--rajah);   /* on-dark gold accent (kickers, rules) */
  --dark-gold:     var(--peru);    /* on-light accent (labels, links, emphasis, CTA) */
  --brown-nose:    #7A4A24;        /* deepest brown — selection / reserved */
  --cream:         #F6F0E6;        /* page background (light) */
  --ink:           #2A2018;        /* body/heading on cream */
  --espresso:      #241C14;        /* dark section background */
  --espresso-deep: #1C150E;        /* footer background */

  /* Supporting tints */
  --light-gold:    var(--rajah);   /* display accents on dark (hero em, footer CTA) */
  --muted-gold:    #E6C078;        /* soft golden numerals */
  --warm-1:        #E7DCC4;        /* warm off-white body on dark */
  --warm-2:        var(--pastel-gray);
  --muted-ink-1:   #5A4A38;
  --muted-ink-2:   #3A2E22;
  --footer-mute:   #8B7A63;
  --hero-fg:       #F7F1E6;

  /* Fonts — Manual de Normas VIAPELES (only the two brand families)
     The Seasons → titles + body (self-hosted) · Lexend Zetta → labels */
  --serif: 'the-seasons', Georgia, serif;   /* The Seasons (Adobe Fonts) — titles only */
  --zetta: 'Lexend Zetta', sans-serif;      /* Lexend Zetta — labels */
  --body:  'Lexend Zetta', sans-serif;      /* body / running text — sans (manual) */

  /* Type scale — one tier per role (fluid) */
  --fs-hero:    clamp(52px, 8.4vw, 142px);  /* hero H1 */
  --fs-display: clamp(40px, 6.6vw, 116px);  /* contact closing H2 */
  --fs-h2:      clamp(28px, 4.6vw, 72px);   /* statement H2 */
  --fs-h3:      clamp(30px, 3.6vw, 56px);   /* about H2 · reel name · stat number */
  --fs-lead:    clamp(17px, 1.4vw, 21px);   /* hero sub — serif lead paragraph */
  --fs-body:    clamp(16px, 1.1vw, 18px);   /* running text · reel desc · contact values */
  --fs-label:   9px;                        /* uppercase labels / eyebrows / CTA text */

  /* Layout */
  --maxw: min(1700px, 90vw);   /* site container — wide but capped on huge screens */
  --nav-h: 80px;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* native anchor offset so #sobre / #contacto land below the fixed nav */
section[id], [id]:target { scroll-margin-top: 84px; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-loading { overflow: hidden; height: 100vh; }

/* Arrow cursor everywhere — no text (I-beam) cursor over content.
   Interactive elements keep the pointer; form fields keep the text caret. */
* { cursor: default; }
a[href], button, summary, label, select, [role="button"], [data-magnetic], [data-nav-toggle] { cursor: pointer; }
input, textarea, [contenteditable="true"] { cursor: text; }

a { color: var(--ink); text-decoration: none; transition: color .3s ease, opacity .3s ease; }
a:hover { color: var(--dark-gold); }
img { display: block; max-width: 100%; }
::selection { background: var(--brown-nose); color: var(--cream); }

.zetta { font-family: var(--zetta); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; font-family: var(--zetta); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--cream); }
:focus-visible { outline: 2px solid var(--dark-gold); outline-offset: 3px; }

/* ============================================================
   FILM GRAIN + SCROLL PROGRESS
   ============================================================ */
.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-3%, 2%); }
  80% { transform: translate(2%, -2%); }
}

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  pointer-events: none; background: transparent;
}
.scroll-progress__bar {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--dark-gold), var(--deer));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .1s linear;
}

/* ============================================================
   LINE MASK (masked text reveal primitive)
   ============================================================ */
.line-mask { display: block; overflow: hidden; }
.line-mask > .line {
  display: block; transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.is-revealed .line-mask > .line,
.line-mask.is-revealed > .line { transform: translateY(0); }

/* reveal-lines: word-level rise used on section H2s */
.reveal-lines .rl-word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-lines .rl-word > span {
  display: inline-block; transform: translateY(110%);
  transition: transform .9s var(--ease); will-change: transform;
}
.reveal-lines.is-visible .rl-word > span { transform: translateY(0); }

/* ============================================================
   NAV
   ============================================================ */
#via-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .55s var(--ease-soft), border-color .55s ease, padding .55s var(--ease-soft), backdrop-filter .55s ease;
}
#via-nav.is-scrolled {
  padding: 13px clamp(20px, 5vw, 64px);
  background: rgba(245, 239, 228, .82);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: rgba(42, 32, 24, .1);
}
#via-nav-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 17, 10, .5) 0%, rgba(24, 17, 10, 0) 100%);
  transition: opacity .55s ease;
}
#via-nav.is-scrolled #via-nav-scrim { opacity: 0; }

.via-nav__logo { display: block; line-height: 0; flex: none; }
#via-nav-logo { height: clamp(30px, 4vw, 42px); width: auto; transition: opacity .3s ease; }

.via-nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-link {
  position: relative; font-size: var(--fs-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream); transition: color .55s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .5s var(--ease); opacity: .7;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-link:hover { color: var(--cream); }
#via-nav.is-scrolled [data-nav-text] { color: var(--ink); }
#via-nav.is-scrolled .nav-link:hover { color: var(--dark-gold); }

#lang-toggle {
  cursor: pointer; background: transparent;
  border: 1px solid rgba(245, 239, 228, .45); color: var(--cream);
  font-size: var(--fs-label); letter-spacing: .2em; padding: 9px 15px; border-radius: 100px;
  transition: color .55s ease, border-color .55s ease, background .4s ease;
}
#via-nav.is-scrolled #lang-toggle { color: var(--ink); border-color: rgba(42, 32, 24, .28); }
#lang-toggle:hover { border-color: var(--deer); background: rgba(188,142,84,.1); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(96px, 12vw, 150px) clamp(24px, 5vw, 72px) clamp(40px, 5vw, 64px);
  overflow: hidden; background: var(--espresso);
}
.hero__media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); animation: heroZoom 14s var(--ease-soft) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,13,7,.48) 0%, rgba(20,13,7,.06) 28%, rgba(18,11,5,.5) 55%, rgba(13,8,4,.94) 100%);
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20,14,8,.55) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; }

.hero__title {
  display: flex; flex-direction: column;
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-hero); line-height: .9; letter-spacing: -.015em;
  color: var(--hero-fg); margin-bottom: clamp(28px, 3.5vw, 44px);
}
.hero__title .line-mask { padding-bottom: .22em; margin-bottom: -.14em; }
.hero__title-em { font-weight: 400; color: var(--light-gold); }
/* hero title reveal driven by body.is-ready with stagger */
.hero__title .line { transform: translateY(115%); transition: transform 1.2s var(--ease); }
body.is-ready .hero__title .line-mask:nth-child(1) .line { transform: translateY(0); transition-delay: .45s; }
body.is-ready .hero__title .line-mask:nth-child(2) .line { transform: translateY(0); transition-delay: .58s; }

.hero__row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  opacity: 0; transform: translateY(18px); transition: opacity 1s ease .85s, transform 1s var(--ease) .85s;
}
body.is-ready .hero__row { opacity: 1; transform: none; }
.hero__sub {
  font-family: var(--body); font-weight: 300;
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.7;
  color: var(--hero-fg); max-width: 52ch; text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(14, 9, 4, .65);
}

/* CTA pill (hero) */
.cta-pill {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 20px 16px 20px 40px; border-radius: 100px;
  border: 1px solid rgba(245, 239, 228, .45); color: var(--hero-fg);
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .4s ease, color .4s ease, background .4s ease;
  position: relative; overflow: hidden;
}
.cta-pill::before {
  content: ""; position: absolute; inset: 0; background: rgba(245,239,228,.06);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); z-index: -1;
}
.cta-pill:hover { border-color: var(--deer); color: var(--hero-fg); }
.cta-pill:hover::before { transform: scaleX(1); }
.cta-pill__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--dark-gold); color: var(--hero-fg); transition: transform .4s var(--ease);
}
.cta-pill__icon svg { width: 22px; height: 22px; }
.cta-pill:hover .cta-pill__icon { transform: scale(1.08); }


/* ============================================================
   STATEMENT
   ============================================================ */
.statement { padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 72px); text-align: center; position: relative; }
.statement__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.012em;
  color: var(--ink); max-width: none; margin: 0 auto; text-wrap: balance;
}
.statement__title > span { display: block; }   /* two lines: phrase + emphasis */
.statement__em { color: var(--dark-gold); }

/* ============================================================
   COLLECTIONS — horizontal reel (own positions · unrolling)
   ============================================================ */
.reel { background: var(--cream); position: relative; }
.reel__track { height: 340vh; position: relative; }
.reel__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(84px, 11vh, 120px) 0 clamp(30px, 4vh, 52px);
}

/* head: title + progress rail */
.reel__head {
  flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 0 clamp(24px, 5vw, 72px); margin-bottom: clamp(20px, 3vh, 40px);
}
.reel__rail { position: relative; width: clamp(120px, 20vw, 280px); height: 1px; background: rgba(42, 32, 24, .16); overflow: hidden; flex: none; }
.reel__rail-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--dark-gold), var(--deer)); }

/* viewport clips the strip; strip is translated horizontally by JS */
.reel__viewport { flex: 1; overflow: hidden; position: relative; }
.reel__strip {
  display: flex; align-items: center; height: 100%;
  gap: clamp(28px, 3.5vw, 72px);
  /* align panels to the hero container: first panel starts at the same left
     gutter as the hero text; last panel ends there too. 100% (not 100vw)
     resolves against the content box, so it matches the hero's margin:auto
     even when a scrollbar is present. */
  padding: 0 max(clamp(24px, 5vw, 72px), calc((100% - var(--maxw)) / 2));
  will-change: transform;
}

.reel__panel {
  flex: 0 0 auto; width: min(var(--maxw), calc(100vw - 2 * clamp(24px, 5vw, 72px))); height: min(66vh, 600px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 3vw, 60px); align-items: center;
}
.reel__media {
  position: relative; height: 100%; overflow: hidden; background: var(--ink);
  box-shadow: 0 45px 90px -42px rgba(24, 16, 9, .72), inset 0 0 0 1px rgba(255, 246, 224, .05);
  will-change: transform; backface-visibility: hidden; transform-origin: center center;
}
/* directional sheen + shadow so the image reads dimensional, not flat */
.reel__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 244, 222, .16) 0%, rgba(255, 244, 222, 0) 26%),
    linear-gradient(202deg, rgba(18, 12, 6, 0) 46%, rgba(18, 12, 6, .40) 100%);
}
.reel__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); will-change: transform;
}
/* Complementos (threads) — keep the full left side AND bottom in frame */
.reel__panel[data-i="2"] .reel__media img { object-position: left bottom; transform-origin: left bottom; }
.reel__caption { max-width: 42ch; }
/* caption entrance — reveals once when the panel centres, then stays (no exit) */
.reel__caption > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: transform, opacity; }
.reel__panel.is-revealed .reel__caption > * { opacity: 1; transform: none; }
.reel__panel.is-revealed .reel__name { transition-delay: .06s; }
.reel__panel.is-revealed .reel__desc { transition-delay: .2s; }
.reel__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1; color: var(--ink); margin-bottom: 24px; overflow-wrap: break-word; }
.reel__desc { font-size: var(--fs-body); line-height: 1.8; font-weight: 300; color: var(--muted-ink-1); text-wrap: balance; }


/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--espresso); color: var(--cream); padding: clamp(84px, 11vw, 170px) clamp(24px, 5vw, 72px); position: relative; overflow: hidden; }
.about::after {
  content: ""; position: absolute; top: -30%; right: -10%; width: 55vw; height: 55vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(166,107,57,.14), transparent 62%); pointer-events: none;
}
.about__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.about__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.03; text-wrap: balance; color: var(--hero-fg); }
.about__body { font-size: var(--fs-body); line-height: 1.9; font-weight: 300; color: var(--warm-2); margin-bottom: 26px; text-wrap: pretty; max-width: 680px; }
.about__body:nth-of-type(2) { margin-bottom: clamp(44px, 5vw, 64px); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 72px); background: var(--cream); }
.contact__inner { max-width: var(--maxw); margin: 0 auto; }
.contact__head { margin-bottom: clamp(28px, 4vw, 48px); }
.contact__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: .94; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.contact__body { border-top: 1px solid rgba(42, 32, 24, .18); padding-top: clamp(28px, 3vw, 44px); }
.contact__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.field { position: relative; }
.field__label { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--dark-gold); margin-bottom: 12px; }
/* all contact values same size & weight */
.field__value { font-size: var(--fs-body); line-height: 1.5; font-weight: 300; color: var(--ink); }
.field__value a { color: inherit; text-decoration: none; transition: color .3s ease; }
.field__value a:hover { color: var(--dark-gold); }

.wa-pill {
  display: inline-flex; align-items: center; gap: 13px; position: relative; overflow: hidden;
  background: var(--ink); color: var(--cream);
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  padding: 20px 36px; border-radius: 100px; transition: color .4s ease;
}
.wa-pill::before { content: ""; position: absolute; inset: 0; background: var(--dark-gold); transform: translateY(101%); transition: transform .5s var(--ease); z-index: 0; }
.wa-pill:hover::before { transform: translateY(0); }
.wa-pill > * { position: relative; z-index: 1; }
.wa-pill:hover { color: var(--cream); }
.wa-pill svg { flex-shrink: 0; }

/* footer variant — sized to match the logo, bordered for the dark footer */
.wa-pill--footer {
  height: clamp(46px, 7vw, 78px); padding: 0 clamp(24px, 3.2vw, 44px);
  background: transparent; border: 1px solid rgba(245, 239, 228, .4); color: var(--cream);
  font-size: clamp(9px, .85vw, 12px); gap: clamp(10px, 1.2vw, 16px);
}
.wa-pill--footer::before { background: var(--peru); }
.wa-pill--footer:hover { border-color: var(--peru); }
.wa-pill--footer svg { width: clamp(20px, 2vw, 28px); height: auto; }

/* two footer CTAs sit together on the right */
.footer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.5vw, 18px); }
/* solid caramel primary — the message CTA (→ contact form page) */
.msg-pill { background: var(--peru); border-color: var(--peru); color: var(--cream); }
.msg-pill::before { background: var(--ink); }
.msg-pill:hover { border-color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; padding: clamp(36px, 5vw, 60px) clamp(24px, 5vw, 72px) 30px; background: var(--espresso-deep); color: var(--footer-mute); }
/* brand-gradient accent line at the top — a touch of life */
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--pastel-gray), var(--rajah), var(--peru)); opacity: .85; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }

.footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid rgba(188, 142, 84, .18); }
.footer__logo { height: clamp(46px, 7vw, 78px); width: auto; flex: none; }

.footer__nav { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 28px); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; }
.footer__nav a { color: var(--footer-mute); transition: color .3s ease; }
.footer__nav a:hover { color: var(--rajah); }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 2.4vw, 28px); padding-top: 20px; border-top: 1px solid rgba(188, 142, 84, .12); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; }
.footer__credit a { color: var(--rajah); transition: color .3s ease; }
.footer__credit a:hover { color: var(--peru); }

/* ============================================================
   LEGAL PAGES (privacidade / termos)
   ============================================================ */
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px clamp(24px, 5vw, 72px); border-bottom: 1px solid rgba(42, 32, 24, .1); }
.legal-header img { height: 34px; width: auto; }
.legal-back { font-family: var(--zetta); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.legal-back:hover { color: var(--dark-gold); }
.legal { max-width: 980px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 72px) clamp(64px, 8vw, 120px); }
/* body kept at a readable measure; headings get the full width so they don't wrap */
.legal p, .legal ul { max-width: 720px; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); margin-bottom: 10px; text-wrap: balance; }
.legal__updated { font-family: var(--zetta); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--dark-gold); margin-bottom: clamp(32px, 5vw, 56px); display: block; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; color: var(--ink); margin: clamp(30px, 4vw, 46px) 0 14px; }
.legal p, .legal li { font-family: var(--body); font-size: var(--fs-body); line-height: 1.75; font-weight: 300; color: var(--muted-ink-1); margin-bottom: 14px; }
.legal ul { padding-left: 1.2em; margin-bottom: 14px; }
.legal a { color: var(--dark-gold); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal .ph { background: rgba(211, 136, 73, .14); padding: 0 5px; border-radius: 3px; color: var(--muted-ink-2); }
.legal-foot { border-top: 1px solid rgba(42, 32, 24, .1); padding: 26px clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--zetta); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-ink-1); }
.legal-foot a { color: var(--dark-gold); }

/* ============================================================
   CONTACT FORM PAGE (contacto.php)
   ============================================================ */
.form-page { max-width: 680px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 72px) clamp(64px, 8vw, 120px); }
.form-page h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); margin-bottom: 14px; text-wrap: balance; }
.form-page__lead { font-size: var(--fs-body); line-height: 1.7; font-weight: 300; color: var(--muted-ink-1); margin-bottom: clamp(30px, 5vw, 46px); text-wrap: pretty; max-width: 46ch; }

.form { display: grid; gap: clamp(18px, 2.6vw, 26px); }
.form__field { display: grid; gap: 9px; }
.form__label { font-family: var(--zetta); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.form__input, .form__textarea {
  font-family: var(--body); font-size: 1rem; font-weight: 300; color: var(--ink);
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(42, 32, 24, .18); border-radius: 10px;
  padding: 15px 16px; width: 100%; transition: border-color .3s ease, box-shadow .3s ease;
}
.form__textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.form__input:focus, .form__textarea:focus { outline: none; border-color: var(--peru); box-shadow: 0 0 0 3px rgba(211, 136, 73, .14); }
.form__input::placeholder, .form__textarea::placeholder { color: var(--muted-ink-1); opacity: .5; }
/* honeypot — off-screen, not display:none (bots skip hidden) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  background: var(--peru); color: var(--cream); border: none; cursor: pointer;
  font-family: var(--zetta); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 42px; border-radius: 100px; transition: transform .3s var(--ease), background-color .3s ease;
}
.form__submit:hover { transform: translateY(-2px); background: var(--ink); }
/* result banners */
.form__note { font-family: var(--zetta); font-size: clamp(11px, 1vw, 13px); letter-spacing: .04em; line-height: 1.5; padding: 16px 20px; border-radius: 10px; margin-bottom: 30px; }
.form__note--ok { background: rgba(211, 136, 73, .12); color: var(--ink); border: 1px solid rgba(211, 136, 73, .45); }
.form__note--err { background: rgba(150, 45, 30, .08); color: #7a2e22; border: 1px solid rgba(150, 45, 30, .3); }

/* ============================================================
   REVEAL (block fade for bodies / rows)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--espresso-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1.1s var(--ease) .2s;
}
.preloader.is-done { transform: translateY(-100%); }
.preloader__inner { width: min(80vw, 360px); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.preloader__logo { height: clamp(44px, 8vw, 60px); width: auto; }
.preloader__logo.line { transform: translateY(110%); animation: preRise 1s var(--ease) .1s forwards; }
@keyframes preRise { to { transform: translateY(0); } }
.preloader__track { width: 100%; height: 1px; background: rgba(188,142,84,.2); overflow: hidden; }
.preloader__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dark-gold), var(--deer)); }

/* Hide hero reveal-driven elements until ready (fallback if JS disabled shows them) */
.no-js body.is-loading { overflow: auto; height: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .about__inner { grid-template-columns: 1fr; }

  /* Reel keeps the pinned scroll-jack on mobile too — the strip slides
     sideways as you scroll vertically (native scroll; the old touch lock
     was Lenis, now removed). Panels stack image-over-caption. */
  .reel__track { height: 300vh; }
  .reel__stage { padding: clamp(56px, 8vh, 72px) 0 clamp(20px, 4vh, 36px); }
  .reel__head { display: none; }
  .reel__strip { gap: 12vw; padding: 0 8vw; align-items: center; }
  .reel__panel { width: 84vw; height: auto; grid-template-columns: 1fr; gap: 22px; }
  /* tight drop shadow so it hugs the image and doesn't spill onto the caption */
  .reel__media { height: auto; aspect-ratio: 4 / 3; box-shadow: 0 8px 22px -16px rgba(24, 16, 9, .45), inset 0 0 0 1px rgba(255, 246, 224, .05); }
  .reel__media img { left: 0; width: 100%; }
  .reel__caption { max-width: none; }
}

/* Desktop: balance the cream band around the statement — the reel entry
   (stage padding + rail + panel centring) adds a lot of space below the
   phrase, so the statement gets more above and less below to even out. */
@media (min-width: 901px) {
  .statement { padding-top: clamp(170px, 23.5vh, 265px); padding-bottom: clamp(36px, 5vh, 56px); }
  .reel__stage { padding-top: clamp(44px, 6vh, 64px); }
  .reel__head { margin-bottom: 14px; }
}

/* Narrow: reduce nav to logo + language toggle (per spec) */
@media (max-width: 640px) {
  .via-nav__links > a[data-nav-text] { display: none; }

  /* Lexend Zetta is a wide face — trim running text on phones (inputs stay 1rem) */
  :root { --fs-body: 14px; }

  /* footer CTAs stack full-width */
  .footer__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .footer__actions .wa-pill--footer { width: 100%; justify-content: center; }

  /* hero CTA full-width to match */
  .cta-pill { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .contact__fields { grid-template-columns: 1fr; }
  .footer__top { align-items: flex-start; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .line-mask > .line, .reveal-lines .rl-word > span, .reel__caption > * { opacity: 1 !important; transform: none !important; }
  .preloader { display: none !important; }
  .hero__img { animation: none; transform: none; }
  .grain { animation: none; }
}