/* ==========================================================================
   MESA40 — Landing Page
   Preto · Off-white · Ouro Mesa40 · Fotografia real · Tipografia editorial
   ========================================================================== */

@font-face {
  font-family: 'Playfair';
  src: url('fonts/playfair-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-300-latin.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-300i-latin.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  --black:#000000;
  --ink:#0c0c0b;
  --cream:#EDEAE4;
  --cream-2:#E4E0D8;
  --gold:#C79057;
  --gold-bright:#DDAB78;
  --gold-dim:rgba(199,144,87,0.35);
  --gold-pale:#F0D6AF;
  --gold-hi:#FBEAD2;
  --gold-deep:#A8763F;
  --white:#F7F5F0;
  --gray-on-dark:#A79E90;
  --gray-on-cream:#5C564C;
  --dark-text:#161410;

  --serif:'Playfair', 'Iowan Old Style', 'Times New Roman', serif;
  --sans:'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --edge: clamp(20px, 5vw, 64px);
  --section-pad: clamp(72px, 12vh, 160px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge);
}

.serif{ font-family:var(--serif); font-weight:600; letter-spacing:-0.01em; }
.serif em{ font-style:italic; color:var(--gold); font-weight:500; }

/* ---------- progress line ---------- */
.progress-line{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--gold); z-index:999; transition:width .1s linear;
}

/* ---------- reveal-on-scroll ----------
   Motion is core to this interaction layer and was explicitly requested, so
   it intentionally ignores prefers-reduced-motion — some OS/preview
   environments force that flag on, which would otherwise silently disable
   every entrance effect on the page. */
.reveal{
  opacity:0; transform:translateY(38px); filter:blur(6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  will-change:opacity, transform, filter;
}
.reveal.in-view{ opacity:1; transform:translateY(0); filter:blur(0); }

/* ---------- kickers ---------- */
.kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:22px;
}
.kicker-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--gold);
}
.kicker.center, .kicker-center{ justify-content:center; }
.kicker-center{
  text-align:center;
  display:block;
  margin:0 auto 40px;
}
.kicker-sm{ margin-bottom:12px; }

/* ---------- section tag (centered subtitle label) ---------- */
.section-tag{
  font-family:var(--serif); font-weight:600; font-style:normal;
  font-size:clamp(20px, 2.6vw, 28px);
  color:var(--white);
  text-align:center;
  margin:0 auto 44px;
}

/* ---------- headings ---------- */
.display{
  font-size:clamp(30px, 4.6vw, 56px);
  line-height:1.12;
  margin-bottom:28px;
  max-width:16ch;
}
.display.center{ margin-left:auto; margin-right:auto; text-align:center; max-width:22ch; }

.lede{
  font-size:clamp(17px, 2vw, 21px);
  font-weight:400;
  color:var(--white);
  max-width:44ch;
  margin-bottom:18px;
  line-height:1.5;
}
.lede strong{ font-weight:700; }
.body-copy{
  font-size:16px;
  font-weight:300;
  color:var(--gray-on-dark);
  max-width:52ch;
  margin-bottom:16px;
}
.section-cream .body-copy{ color:var(--gray-on-cream); }
.body-copy.center{ margin-left:auto; margin-right:auto; text-align:center; }

.closing-line{
  font-size:clamp(20px, 2.6vw, 30px);
  line-height:1.4;
  margin-top:56px;
  color:var(--white);
  font-weight:500;
}
.closing-line.center{ text-align:center; }

.valor .closing-line{
  display:table;
  margin:16px auto 0;
  background:var(--gold-deep);
  color:#0a0908;
  padding:22px 44px;
  border-radius:4px;
  font-weight:600;
}
@media (max-width:880px){
  .valor .closing-line{ padding:18px 24px; margin-top:40px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:18px 30px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .35s ease; display:inline-block; position:relative; z-index:1; }
.btn:hover .arrow{ transform:translateX(5px) rotate(5deg); }

.btn-solid{
  background:linear-gradient(90deg, var(--gold-bright) 0%, var(--gold-pale) 50%, var(--gold) 100%);
  border:none;
  border-top:1px solid var(--gold-hi);
  color:#12100c;
  box-shadow:
    0 10px 20px rgba(199,144,87,.35),
    0 20px 40px rgba(199,144,87,.25);
}
.btn-solid:hover{
  transform:translateY(-4px);
  box-shadow:
    0 12px 24px rgba(199,144,87,.4),
    0 26px 50px rgba(199,144,87,.3);
}
.btn-solid::before{
  content:'';
  position:absolute; top:0; bottom:0; left:-15%; width:50px;
  background:linear-gradient(10deg, rgba(255,255,255,.8) 12.81%, rgba(255,255,255,0) 66.66%);
  transform:skew(-20deg); filter:blur(3px);
  animation:wordShine 3.4s infinite ease-in-out;
  pointer-events:none;
}

.btn-outline{
  border:1px solid var(--gold);
  color:var(--white);
  background:transparent;
}
.btn-outline:hover{ background:var(--gold); color:#12100c; border-color:var(--gold); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:transparent;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(199,144,87,.18);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:22px var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav.scrolled .nav-inner{ padding-top:14px; padding-bottom:14px; }
.nav-logo img{ height:22px; width:auto; }
.nav-links{ display:flex; gap:36px; flex:1; justify-content:center; }
.nav-links a{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--white); opacity:.82; font-weight:500;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding:12px 22px; font-size:11px; }
.nav-burger{ display:none; }
.nav-mobile{ display:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 42%;
  animation:heroKen 22s ease-in-out infinite alternate;
}
.hero-media video{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  position:relative; left:280px; top:0;
  background:var(--black);
  opacity:0; transition:opacity .5s ease;
}
.hero-media video.is-ready{ opacity:1; }
@keyframes heroKen{
  from{ transform:scale(1.0); }
  to{ transform:scale(1.08); }
}
@media (prefers-reduced-motion:reduce){ .hero-media img{ animation:none; } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.05) 100%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%);
}
.hero-content{
  position:relative; z-index:2;
  flex:1 1 auto;
  margin-left:max(var(--edge), calc((100vw - var(--container)) / 2 + var(--edge)));
  margin-right:var(--edge);
  margin-top:15px;
  max-width:760px;
}
.hero-eyebrow{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; font-weight:500;
}
.hero-headline{
  font-size:clamp(36px, 6.6vw, 76px);
  line-height:0.95;
  color:var(--white);
  margin-bottom:28px;
  margin-left:-6px;
}
.hero-headline em{ font-style:normal; }
.hero-body{
  font-size:clamp(14px, 1.3vw, 15.5px);
  line-height:1.5;
  color:#D8D3C8;
  max-width:490px;
  margin-bottom:32px;
  font-weight:300;
}
.hero-body strong{ font-weight:600; color:var(--white); }
.hero-bottom-fade{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background:linear-gradient(0deg, var(--black) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 100%);
  z-index:1; pointer-events:none;
}
.hero-scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hero-scroll-cue span{
  display:block; width:1px; height:30px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollCue 1.8s ease-in-out infinite;
}
.hero-scroll-cue svg{
  width:16px; height:16px; fill:none;
  stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  animation:scrollCue 1.8s ease-in-out infinite;
  animation-delay:.2s;
}
@keyframes scrollCue{
  0%{ opacity:0; transform:translateY(-8px); }
  50%{ opacity:1; }
  100%{ opacity:0; transform:translateY(10px); }
}

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.section{ padding:var(--section-pad) 0; position:relative; }
.section-dark{ background:var(--black); color:var(--white); }
.section-cream{ background:var(--cream); color:var(--dark-text); }
.section-cream .serif{ color:var(--dark-text); }
.section-cream .closing-line{ color:var(--dark-text); }

/* ---------- 02 TESE ---------- */
.tese{ padding-top:0; }
.tese .container{ max-width:920px; text-align:center; margin-top:-6vh; position:relative; z-index:3; }
.tese .display{ max-width:none; }
.tese .lede, .tese .body-copy{ margin-left:auto; margin-right:auto; }
.tese-photo-pin{ position:relative; height:200vh; }
.tese-photo-frame{
  position:sticky; top:0; height:100vh;
  overflow:hidden;
}
/* headline overlaid on the photo, fades in early (while the image is still
   mid-expansion) so there's something to read right away instead of a long
   wait for the zoom to finish — engagement over spectacle */
.tese-photo-headline{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 24px 8vh;
  opacity:0; transform:translateY(16px);
  will-change:opacity, transform;
  pointer-events:none;
}
.tese-photo-headline h2{ color:var(--white); text-shadow:0 4px 30px rgba(0,0,0,.5); }
.tese-photo{
  /* always laid out at full frame size — never upscaled via transform,
     only ever scaled DOWN for the resting state, so the image stays
     crisp at every step (scaling a raster down never blurs it). */
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:6px;
  overflow:hidden;
  will-change:transform;
  transform-origin:center center;
  transform:scale(.72);
}
.tese-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center center; display:block;
}
/* fades the top/bottom edges of the resting (small) frame into the section's
   black background */
.tese-photo::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, var(--black) 0%, transparent 14%, transparent 86%, var(--black) 100%),
    linear-gradient(90deg, var(--black) 0%, transparent 10%, transparent 90%, var(--black) 100%);
  opacity:1;
}
/* image → text handoff: darkens the bottom edge of the pinned frame itself
   (not just the photo box) so the full-bleed image blends into the black
   section below instead of cutting hard into the headline */
.tese-photo-frame::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:55vh; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, var(--black) 0%, rgba(0,0,0,.88) 30%, rgba(0,0,0,.5) 60%, transparent 100%);
}
@media (max-width:880px){
  .tese-photo-pin{ height:auto; }
  .tese-photo-frame{ position:static; height:auto; display:flex; flex-direction:column; }
  .tese-photo-frame::after{ display:none; }
  .tese-photo{ position:static; width:100%; height:auto; aspect-ratio:3/2; margin-bottom:28px; transform:none !important; order:1; }
  .tese-photo::before{ display:none; }
  .tese-photo-headline{
    position:static; inset:auto; opacity:1 !important; transform:none !important;
    padding:0 0 28px; order:2;
  }
  .tese-photo-headline h2{ color:var(--white); text-shadow:none; }
}
/* ---------- horizontal timeline (4 pilares) — scroll-driven progress + travelling spark ---------- */
.htimeline{ position:relative; margin:56px 0 8px; }
.htl-track{
  position:absolute; left:0; right:0; top:17px; height:2px; z-index:0;
}
.htl-line{ position:absolute; inset:0; background:rgba(199,144,87,.22); }
.htl-progress{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow:0 0 12px rgba(199,144,87,.6);
}
.htl-spark{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; z-index:2; pointer-events:none;
  background:var(--gold-hi);
  box-shadow:0 0 16px 5px rgba(199,144,87,.85), 0 0 44px 14px rgba(199,144,87,.4);
  opacity:0; transition:opacity .35s var(--ease);
}
.htl-spark.on{ opacity:1; animation:htlSparkPulse 1.4s ease-in-out infinite; }
@keyframes htlSparkPulse{
  0%,100%{ box-shadow:0 0 16px 5px rgba(199,144,87,.85), 0 0 44px 14px rgba(199,144,87,.4); }
  50%{ box-shadow:0 0 22px 7px rgba(199,144,87,1), 0 0 60px 18px rgba(199,144,87,.55); }
}
.htl-steps{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
  text-align:left;
}
.htl-step{
  opacity:0; transform:translateY(24px); filter:blur(6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.htl-step.show{ opacity:1; transform:none; filter:none; }
.htl-node{
  width:36px; height:36px; border-radius:50%;
  background:var(--black); border:2px solid rgba(199,144,87,.35);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; position:relative;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.htl-num{
  font-family:var(--sans); font-size:12px; font-weight:700;
  color:var(--gray-on-dark); transition:color .5s var(--ease);
}
.htl-step.show .htl-node{
  border-color:var(--gold);
  background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  box-shadow:0 0 24px rgba(199,144,87,.4);
}
.htl-step.show .htl-num{ color:#1a1205; }
.htl-step:hover .htl-node{ transform:scale(1.12); }
.htl-step h4{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(17px, 1.9vw, 21px); color:var(--gold-bright);
}
@media (max-width:880px){
  .htl-track{ display:none; }
  .htl-steps{ grid-template-columns:1fr 1fr; gap:32px 24px; text-align:center; }
  .htl-node{ margin-left:auto; margin-right:auto; }
}
@media (max-width:480px){
  .htl-steps{ grid-template-columns:1fr; }
}
@keyframes wordShine{
  0%,100%{ left:-15%; opacity:0; }
  20%{ opacity:1; }
  48%{ left:115%; opacity:1; }
  51%{ opacity:0; }
}

/* ---------- 03 ECOSSISTEMA ---------- */
.territories{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
  margin-top:56px;
}
.territory{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  grid-column:span 2;
}
.territory img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.territory:hover img{ transform:scale(1.06); }
.t-tall{ grid-row:span 2; aspect-ratio:3/4.6; }
.t-wide{ aspect-ratio:4/3; align-self:end; }
.t-full{ grid-column:span 6; aspect-ratio:2.6/1; align-self:end; }
@media (max-width:880px){ .t-full{ aspect-ratio:4/3; } }
.territory-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,.86) 10%, rgba(0,0,0,0) 90%);
}
.territory-caption h3{
  font-family:var(--serif); font-weight:600; font-size:18px; color:var(--white);
  margin-bottom:6px;
}
.territory-caption p{
  font-size:13px; color:#D6D1C6; max-width:26ch; line-height:1.4;
}

/* ==========================================================================
   04 PROVA
   ========================================================================== */
.prova-block .container{ max-width:1080px; }
.prova-block .display{ max-width:none; }
/* horizontal carousel — native overflow-x scroll (trackpad swipe / touch),
   plus click-drag support for mouse users, wired in script.js. Deliberately
   NOT a JS scroll-jacked pin: that approach kept failing in real-world
   browsers even though it tested fine in headless Chromium, so this trades
   the scripted effect for a carousel that works everywhere by construction. */
.testi-pin{ margin-top:40px; }
.testi-sticky{ overflow:visible; }
.testi-track{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 var(--edge) 16px;
  cursor:grab;
  -ms-overflow-style:none; scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.testi-card{ flex:0 0 auto; display:flex; flex-direction:column; scroll-snap-align:start; }
.testi-video{
  position:relative;
  background:#111;
  height:min(72vh, 720px);
  aspect-ratio:9/16;
  border-radius:2px 2px 0 0;
  overflow:hidden;
}
.testi-video video{ width:100%; height:100%; object-fit:cover; }
.testi-id{
  padding:18px 22px;
  background:var(--ink);
  border:1px solid rgba(199,144,87,.18);
  border-top:none;
  border-radius:0 0 2px 2px;
}
.testi-name{ font-family:var(--serif); font-size:18px; font-weight:600; }
.testi-role{ font-size:12px; color:var(--gray-on-dark); letter-spacing:.03em; margin-top:3px; }
@media (max-width:880px){
  .testi-card{ width:74vw; max-width:280px; }
  .testi-video{ height:auto; }
}

.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s ease;
}
.play-btn svg{ width:20px; height:20px; fill:var(--white); margin-left:3px; }
.play-btn:hover{ background:var(--gold); }
.play-btn:hover svg{ fill:#12100c; }
.play-btn.hidden{ display:none; }
.play-btn-lg{
  width:96px; height:96px; flex-direction:column; gap:8px;
}
.play-btn-lg span{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); font-weight:600;
}
.play-btn-lg:hover span{ color:#12100c; }

/* speakers band */
.speakers-band{ margin-top:96px; padding:0; }
.speakers-track{
  display:flex; gap:36px; overflow-x:auto; padding:0 var(--edge) 12px;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
}
.speakers-track::-webkit-scrollbar{ display:none; }
.speaker{
  flex:0 0 auto; width:190px; text-align:center; scroll-snap-align:start;
}
.speaker img{
  width:128px; height:128px; border-radius:50%; object-fit:cover; object-position:50% 20%;
  margin:0 auto 16px; border:1px solid var(--gold-dim); padding:4px;
}
.speaker p{ font-size:15px; font-weight:600; margin-bottom:4px; }
.speaker span{ font-size:12.5px; color:var(--gray-on-dark); line-height:1.35; display:block; }

/* brands */
.brands-block{ margin-top:44px; }
.brands-grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:36px 40px;
}
.brands-grid img{
  max-height:30px; width:auto; max-width:110px; flex:0 0 auto;
  filter:brightness(0) invert(1); opacity:.5;
  transition:opacity .3s ease;
}
.brands-grid img:hover{ opacity:.95; }

/* ==========================================================================
   05 CASA
   ========================================================================== */
/* flat, single color — a diagonal gradient here would never match the fade's
   flat color at every point, which is exactly what read as a visible seam */
.casa{ position:relative; background:var(--cream); }

/* photo sequence — pinned full-bleed frame; as you scroll through its height
   each photo crossfades + settles from a slight scale, one at a time. Not a
   translateX horizontal slide: that JS-driven approach broke twice in real
   browsers during this build even after several fixes, so this reuses the
   same scale/opacity technique already proven reliable elsewhere on this
   page (the tese photo and the .reveal system) instead of risking a third
   round of the same class of bug. Text sits pinned on top, left-aligned,
   on the white/cream background; the photo box on the right gets a white
   fade over its own left edge so it blends in instead of hard-cutting. */
.casa-photos-pin{ position:relative; height:300vh; margin-top:var(--section-pad); }
.casa-photos-frame{
  position:sticky; top:0; height:100vh; overflow:hidden;
}
/* the photo sits as a contained box on the right (not full-bleed) so it's
   never cropped beyond recognition by object-fit:cover on a wide viewport.
   The box itself (a plain div) carries the top/right/bottom/left inset —
   putting those 4 offsets directly on an <img> with width/height:auto is a
   CSS trap: replaced elements size from their INTRINSIC ratio in that case
   (per spec), ignoring the box you thought you defined, so portrait photos
   blew up to 1000px+ tall and bled off-screen. The img inside just fills
   the box at 100%/100% with object-fit:cover instead. */
.casa-photos-box{
  position:absolute; top:0; bottom:0; right:0; left:50%;
  overflow:hidden;
}
.casa-photos-box > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.02);
  transition:opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.casa-photos-box > img.is-active{ opacity:1; transform:scale(1); }
.casa-photos-fade{
  position:absolute; top:0; bottom:0; left:50%; width:24%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,
    var(--cream) 0%,
    rgba(237,234,228,.8) 25%,
    rgba(237,234,228,.45) 55%,
    rgba(237,234,228,.15) 80%,
    rgba(237,234,228,0) 100%);
}
.casa-photos-text{
  position:relative; z-index:3; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:48px; padding-bottom:110px;
  padding-left:calc(max(0px, (100vw - var(--container)) / 2) + var(--edge));
  padding-right:56px;
  width:50%;
}
.casa-photos-text .display{
  color:var(--ink); max-width:22ch;
  font-size:clamp(32px, 3.9vw, 52px);
  line-height:1.22;
  margin-bottom:28px;
}
.casa-photos-text .body-copy{ color:#5b564c; max-width:48ch; font-size:20px; line-height:1.65; }
.casa-photos-text .casa-logo{ height:112px; width:auto; align-self:flex-start; margin:34px 0 40px; }
.casa-photos-text .casa-statement{
  margin-top:16px;
  font-size:clamp(26px, 2.9vw, 36px);
  line-height:1.4;
  color:var(--ink);
}
.casa-statement em{ color:var(--gold-deep); font-style:italic; }

/* shorter laptop screens (~700-860px tall): the block above is vertically
   centered in a 100vh sticky frame with overflow:hidden, so on short
   viewports the fixed nav bar eats into the centering math and the text
   creeps toward the top/bottom edges. Tighten the whole rhythm here instead
   of just capping height, so it still reads as one balanced block. */
@media (min-width:881px) and (max-height:860px){
  .casa-photos-text{ padding-top:100px; padding-bottom:40px; }
  .casa-photos-text .display{ max-width:26ch; font-size:clamp(26px,3.2vw,40px); line-height:1.2; margin-bottom:20px; }
  .casa-photos-text .body-copy{ font-size:17px; line-height:1.55; }
  .casa-photos-text .casa-logo{ height:92px; margin:22px 0 28px; }
  .casa-photos-text .casa-statement{ margin-top:12px; font-size:clamp(21px,2.4vw,29px); line-height:1.35; }
}

/* ==========================================================================
   06 VALOR — diagrama radial
   ========================================================================== */
.valor .container{ max-width:1080px; }
.display.valor-headline{ max-width:780px; margin-left:auto; margin-right:auto; font-size:clamp(28px, 3.4vw, 44px); }

/* scroll-driven pillar wheel: centered and big. Each scroll step highlights
   exactly one segment + its label (scale up, gold), the rest recede — no
   rotation, no side callout. Progress math reuses the same
   getBoundingClientRect technique as the tese photo scale (proven reliable),
   not the translateX approach that broke twice in real browsers. */
.valor-pin{ position:relative; height:280vh; margin-top:-70px; }
.valor-frame{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(75px, 9vh, 95px) var(--edge) 0;
}
.valor-ring-wrap{
  position:relative; width:min(620px, 70vw); aspect-ratio:1/1;
}
.valor-ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:valor-ring-spin 20s linear infinite;
}
@keyframes valor-ring-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .valor-ring{ animation:none; }
}
.ring-seg{
  stroke:var(--black); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center; transform:scale(1);
  opacity:.55;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.ring-seg.is-active{ transform:scale(1.06); opacity:1; }
.ring-seg-1{ fill:var(--gold-bright); }
.ring-seg-2{ fill:var(--gold); }
.ring-seg-3{ fill:var(--gold-deep); }
.ring-seg-4{ fill:var(--gold-pale); }
.valor-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; height:34%; border-radius:50%;
  border:1px solid var(--gold-dim);
  background:#0a0908;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.valor-center img{ width:78%; }

.valor-node{
  position:absolute; width:240px; text-align:center;
  transition:transform .5s var(--ease);
}
.valor-node h3{
  font-style:normal; font-size:21px; color:var(--gray-on-dark);
  transition:color .5s var(--ease), font-size .5s var(--ease);
}
.valor-node p{
  font-size:15px; color:var(--gray-on-dark); line-height:1.4; margin-top:6px;
  max-height:60px; opacity:1; overflow:hidden;
}
.valor-node.is-active h3{ color:var(--gold-bright); font-size:30px; }
.valor-node-top{ top:15%; left:50%; transform:translate(-50%,-100%); }
.valor-node-bottom{ bottom:15%; left:50%; transform:translate(-50%,100%); }
.valor-node-left{ left:15%; top:50%; transform:translate(-100%,-50%); }
.valor-node-right{ right:15%; top:50%; transform:translate(100%,-50%); }

/* ==========================================================================
   07 MOVIMENTO
   ========================================================================== */
.valor.section{ padding-bottom:56px; }
.movimento.section{ padding-top:56px; }
.movimento .container{ max-width:1280px; }
.movimento-headline.display.center{ max-width:none; }
/* pinned scroll-scale: the video is laid out at full frame size and starts
   visually smaller only via transform:scale(REST_SCALE), growing to true
   size while the section stays stuck in view, then releases into the
   section below — same technique as .tese-photo-pin (proven stable). */
.movimento-video-pin{ position:relative; height:180vh; }
.movimento-video-frame{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px var(--edge) 0;
}
.movimento-video{
  position:relative; width:100%; max-width:1280px; aspect-ratio:16/8.6;
  background:#111; border-radius:2px; overflow:hidden;
  transform-origin:center center;
  will-change:transform;
}
.movimento-video video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:880px){
  .movimento-video-pin{ height:auto; margin-top:32px; }
  .movimento-video-frame{ position:static; height:auto; padding:0; }
  .movimento-video{ transform:none !important; }
}

.tuttu-block{
  display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:center;
  max-width:920px; margin:80px auto 0; padding:40px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(199,144,87,.10), rgba(199,144,87,0) 55%), #0d0b08;
  border:1px solid rgba(199,144,87,.25);
  border-radius:24px;
  box-shadow:0 0 60px rgba(0,0,0,.4), inset 0 0 40px rgba(199,144,87,.04);
}
.tuttu-photo-card{
  position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden;
  background:linear-gradient(150deg, #171309 0%, #0a0805 60%, #000 100%);
  border:1px solid rgba(199,144,87,.3);
}
.tuttu-photo-card::before{
  content:''; position:absolute; inset:-40%;
  background:repeating-linear-gradient(
    64deg,
    rgba(199,144,87,0) 0px, rgba(199,144,87,0) 46px,
    rgba(199,144,87,.16) 48px, rgba(199,144,87,.16) 54px,
    rgba(199,144,87,0) 56px, rgba(199,144,87,0) 130px
  );
  pointer-events:none;
}
.tuttu-photo{
  position:relative; width:100%; height:100%; object-fit:cover; display:block;
}
.tuttu-kicker{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-bright); border:1px solid rgba(199,144,87,.4); border-radius:999px;
  padding:7px 16px; margin-bottom:18px;
}
.tuttu-text h3.tuttu-name{
  font-size:clamp(28px,3vw,38px); font-weight:700; margin:0 0 8px; color:var(--white);
  font-family:var(--sans); letter-spacing:normal;
}
.tuttu-role{
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray-on-dark); margin-bottom:24px;
}
.tuttu-quote{ font-size:clamp(17px,2vw,21px); font-style:italic; font-weight:500; max-width:52ch; color:var(--white); line-height:1.5; }

/* ==========================================================================
   08 CTA FINAL
   ========================================================================== */
.cta-final{ padding-bottom:0; }
.cta-final .container{ max-width:640px; text-align:center; }
.cta-final .btn{ margin-top:8px; }
.cta-headline.display.center{
  max-width:none; width:100vw; box-sizing:border-box;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:0 var(--edge);
}
.site-footer{
  margin-top:clamp(80px,12vh,140px);
  padding:44px var(--edge) 48px; background:var(--black);
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
}
.site-footer p{ font-size:18px; font-style:italic; color:var(--white); opacity:1; }
.footer-mark{ height:24px; width:auto; opacity:.85; }
.footer-address{ font-size:13px !important; font-style:normal !important; opacity:.7; }
.footer-social{ display:flex; gap:24px; }
.footer-social a{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-on-dark); }
.footer-social a:hover{ color:var(--gold); }

/* ==========================================================================
   STICKY CTA (mobile)
   ========================================================================== */
.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:400;
  background:var(--gold); color:#12100c;
  padding:15px 20px; border-radius:2px;
  display:none; align-items:center; justify-content:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.sticky-cta.visible{ transform:translateY(0); }

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */
@media (max-width: 880px){
  :root{ --edge:20px; }

  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer;
  }
  .nav-burger span{ height:1px; width:100%; background:var(--white); }
  .nav-mobile{
    display:flex; flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    background:rgba(0,0,0,.97);
    transition:max-height .4s ease;
  }
  .nav-mobile.open{ max-height:400px; }
  .nav-mobile a{
    padding:16px 20px; font-size:13px; text-transform:uppercase; letter-spacing:.1em;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-mobile .btn{ margin:16px 20px; justify-content:center; }

  .hero{ align-items:flex-end; min-height:100svh; }
  .hero-media img{ object-position:70% 30%; }
  .hero-media video{ object-position:65% center; left:0; }
  .hero-content{ max-width:100%; padding-bottom:110px; }
  .hero-headline{ font-size:clamp(34px,10vw,48px); }
  .hero-body{ font-size:14.5px; }
  .btn{ width:100%; justify-content:center; padding:16px 24px; }
  .hero-content .btn{ width:auto; }

  .section{ padding:64px 0; }
  .display{ max-width:100%; font-size:clamp(26px,7.5vw,36px); }
  .display.center{ max-width:100%; }

  .word-line{ flex-direction:column; gap:10px; }
  .word-line li{ text-align:center; padding:14px 0; }

  .territories{
    grid-template-columns:78vw;
    grid-auto-flow:column;
    overflow-x:auto;
    gap:14px;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    margin-left:calc(var(--edge) * -1);
    margin-right:calc(var(--edge) * -1);
    padding-left:var(--edge); padding-right:var(--edge);
  }
  .territory{ grid-column:auto !important; grid-row:auto !important; aspect-ratio:3/4 !important; scroll-snap-align:start; }

  .testi-wrap{ flex-direction:column; align-items:center; }
  .testi-primary{ width:100%; max-width:340px; }
  .testi-thumbs{ flex-direction:row; width:100%; max-width:340px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .testi-thumb{ flex:0 0 74px; scroll-snap-align:start; }

  .speakers-track{ gap:20px; }
  .speaker{ width:140px; }
  .speaker img{ width:92px; height:92px; }

  .brands-grid{ gap:28px 20px; }
  .brands-grid img{ max-height:24px; max-width:80px; }

  .casa{ padding-top:48px; }
  .casa-photos-pin{ height:auto; }
  .casa-photos-frame{ position:static; height:auto; display:flex; flex-direction:column; gap:0; }
  .casa-photos-box{
    position:static; aspect-ratio:4/3; order:2; box-shadow:none; border-radius:0;
  }
  .casa-photos-box > img{
    position:static; width:100%; height:100%; opacity:1 !important; transform:none !important;
  }
  .casa-photos-box > img:not(:first-of-type){ display:none; }
  .casa-photos-fade{ display:none; }
  .casa-photos-text{
    position:static; order:1; width:100%; max-width:100%; height:auto;
    padding:0 var(--edge) 40px; text-align:center; align-items:center;
  }
  .casa-photos-text .casa-logo{ margin:20px auto; }
  .casa-photos-text .display{ max-width:100%; font-size:clamp(24px,7vw,32px); }
  .casa-photos-text .body-copy{ margin:0 auto; }

  .valor-pin{ height:auto; margin-top:40px; }
  .valor-frame{ position:static; height:auto; display:flex; flex-direction:column; align-items:center; gap:28px; }
  .valor-ring-wrap{ width:min(240px, 62vw); }
  .ring-seg{ opacity:1 !important; transform:none !important; }
  .valor-node{ position:static; width:100%; transform:none !important; }
  .valor-node h3{ color:var(--gold-bright); font-size:19px; }
  .valor-node p{ max-height:60px !important; opacity:1 !important; margin-top:4px; }

  .movimento-video{ aspect-ratio:4/5; }
  .play-btn-lg{ width:76px; height:76px; }

  .tuttu-block{ grid-template-columns:1fr; text-align:center; gap:24px; padding:24px; }
  .tuttu-photo-card{ width:200px; margin:0 auto; }
  .tuttu-kicker{ margin-left:auto; margin-right:auto; }
  .tuttu-quote{ margin:0 auto; }

  .site-footer{ margin-top:64px; }

  .sticky-cta{ display:flex; }
}

@media (max-width:420px){
  .territories{ grid-template-columns:84vw; }
}

/* ==========================================================================
   INTERACTION LAYER — smooth scroll, cursor, reveal-replay, counters,
   parallax, steps rail, spotlight, tilt cards, accordion.
   Adds behavior only — reuses existing colors/type/spacing tokens.
   ========================================================================== */

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }

/* ---------- custom cursor (desktop only): dot + lagging ring + trailing glow ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:2000;
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  will-change:transform;
  transition:opacity .3s ease;
}
.cursor-dot{
  width:7px; height:7px;
  background:var(--gold-bright);
  box-shadow:0 0 10px rgba(221,171,120,.85);
}
.cursor-ring{
  width:34px; height:34px;
  border:1.5px solid rgba(221,171,120,.55);
  transition:opacity .3s ease, width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-glow{
  position:fixed; top:0; left:0; z-index:1999;
  width:240px; height:240px; margin:-120px 0 0 -120px; border-radius:50%;
  background:radial-gradient(circle, rgba(221,171,120,.20) 0%, rgba(199,144,87,.10) 34%, transparent 68%);
  pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease);
  will-change:transform;
}
html.has-custom-cursor .cursor-dot,
html.has-custom-cursor .cursor-ring{ opacity:1; }
html.has-custom-cursor.cursor-primed .cursor-glow{ opacity:1; }
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button{ cursor:none; }
html.has-custom-cursor .cursor-hide .cursor-dot,
html.has-custom-cursor .cursor-hide .cursor-ring{ opacity:0; }
html.has-custom-cursor .cursor-ring.is-active{
  width:60px; height:60px;
  border-color:var(--gold);
  background:rgba(199,144,87,.09);
}
html.has-custom-cursor .cursor-dot.is-active{ opacity:0; }
html.has-custom-cursor .cursor-ring.is-down{ width:22px; height:22px; }

/* ---------- reveal (replay handled in JS by re-toggling .in-view) ---------- */
/* base .reveal rules already defined above; nothing to override here */

/* ---------- steps rail (chapter progress) ---------- */
.steps-rail{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:450;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:22px 0;
}
.steps-rail-track{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:100%;
  background:rgba(199,144,87,.22);
}
.steps-rail-fill{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:0%;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow:0 0 8px rgba(199,144,87,.5);
}
.steps-rail-spark{
  position:absolute; left:50%; top:0; z-index:2; pointer-events:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--white);
  box-shadow:0 0 10px 3px rgba(221,171,120,.9), 0 0 22px 8px rgba(199,144,87,.4);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.steps-rail-spark.is-on{ opacity:1; animation:railSparkPulse 1.6s ease-in-out infinite; }
@keyframes railSparkPulse{
  0%,100%{ box-shadow:0 0 10px 3px rgba(221,171,120,.9), 0 0 22px 8px rgba(199,144,87,.4); }
  50%{ box-shadow:0 0 14px 4px rgba(221,171,120,1), 0 0 30px 11px rgba(199,144,87,.55); }
}
.steps-rail-dot{
  position:relative; z-index:1;
  width:7px; height:7px; border-radius:50%;
  background:transparent;
  border:1px solid var(--gold-dim);
  padding:0; cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.steps-rail-dot:hover{ border-color:var(--gold); transform:scale(1.3); }
.steps-rail-dot.is-active{
  background:var(--gold); border-color:var(--gold);
  transform:scale(1.4);
  box-shadow:0 0 0 4px rgba(199,144,87,.15);
}
@media (max-width:1240px){ .steps-rail{ right:14px; } }
@media (max-width:880px){ .steps-rail{ display:none; } }

/* ---------- spotlight + 3D tilt on territory cards ---------- */
.territories{ perspective:1400px; }
.tilt-card{
  --mx:50%; --my:50%;
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-card.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.tilt-card.reveal{ transform:translateY(34px) perspective(1100px) rotateX(24deg) rotateY(-14deg) scale(.94); }
.tilt-card.reveal.in-view{ transform:translateY(0) perspective(1100px) rotateX(0) rotateY(0) scale(1); }
.tilt-card:nth-child(even).reveal{ transform:translateY(34px) perspective(1100px) rotateX(24deg) rotateY(14deg) scale(.94); }
.tilt-card:nth-child(even).reveal.in-view{ transform:translateY(0) perspective(1100px) rotateX(0) rotateY(0) scale(1); }
.tilt-card::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(221,171,120,.32), transparent 65%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.tilt-card:hover::after{ opacity:1; }
.tilt-card .territory-caption{ z-index:2; }

/* ---------- accordion (Valor section, mobile stacked list only) ---------- */
.diagram-node-toggle{
  background:none; border:none; padding:0; margin:0;
  font:inherit; text-align:inherit; cursor:pointer;
  display:block; width:100%;
}
.diagram-node-body{ overflow:hidden; }

@media (max-width:880px){
  .accordion-item{ text-align:left; border-bottom:1px solid rgba(199,144,87,.16); padding-bottom:14px; }
  .diagram-node-toggle{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:6px 0;
  }
  .diagram-node-toggle::after{
    content:'+';
    font-family:var(--serif); font-style:normal; font-size:20px;
    color:var(--gold); flex-shrink:0;
    transition:transform .3s ease;
  }
  .accordion-item.is-open .diagram-node-toggle::after{ content:'–'; }
  .diagram-node-body{
    max-height:0;
    transition:max-height .4s cubic-bezier(.2,.7,.2,1);
  }
  .diagram-node-body p{ padding-top:8px; text-align:left; }
  .accordion-item.is-open .diagram-node-body{ max-height:120px; }
}

/* ---------- speakers marquee (continuous auto-scroll, pauses on hover) ---------- */
.speakers-track.is-marquee{
  overflow:hidden;
  scroll-snap-type:none;
  cursor:default;
}
.speakers-track.is-marquee .speakers-marquee-inner{
  display:flex; gap:36px; width:max-content;
  will-change:transform;
}