/* ═══════════════════════════════════════════════════
   MIAMI CONNECTION SHOW — by Flow
   Landing page · sistema editorial
   ═══════════════════════════════════════════════════ */

/* ── Fonte ───────────────────────────────────────────
   Inter variável, hospedada no projeto. Não dependemos
   da Helvetica local: em várias máquinas o bold instalado
   é uma variante vazada e a página inteira sai em contorno.
   ─────────────────────────────────────────────────── */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Archivo: usada SÓ no título do hero. O "A" da Inter tem ápice
   chato — vazado, virava uma caixinha com linhas se cruzando.
   A Archivo tem ápice em ponta e contra-forma triangular limpa. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../assets/fonts/archivo-700.woff2") format("woff2");
}

/* ── Tokens ──────────────────────────────────────── */
:root{
  /* Superfícies — o preto do Flow é a base; creme entra como respiro */
  --cream:      #FAF7EE;
  --cream-2:    #F3EEE1;
  --ink:        #0D0C0A;   /* preto Flow (estúdio) */
  --ink-2:      #17130C;   /* painel escuro quente */
  --ink-3:      #221C12;   /* cartão sobre escuro */

  /* Marca Flow — âmbar vibrante extraído do logotipo (#F7AD0B) */
  --copper:     #F7AD0B;   /* accent principal (hovers, linhas) */
  /* o âmbar Flow não passa em AA no corpo pequeno sobre creme — versão escurecida */
  --copper-txt: #9E6207;
  --gold-1:     #FFC64D;   /* âmbar claro */
  --gold-2:     #E08A00;   /* âmbar profundo */
  --gold-grad:  linear-gradient(90deg, var(--gold-1), var(--gold-2));
  /* botão: gradiente Flow calibrado para AA com texto tinta */
  --gold-solid: linear-gradient(100deg, #FFC64D 0%, #E88E00 100%);

  /* Texto */
  --t-on-cream:   #12110E;
  --t-on-cream-2: #5C574C;
  --t-on-ink:     #F7F2E7;
  --t-on-ink-2:   #A79E8C;

  /* Régua */
  --gut:   clamp(20px, 5vw, 84px);
  --maxw:  1560px;
  --sec-y: clamp(88px, 12vw, 200px);

  /* Tipografia — grotesca neutra, no espírito da Helvetica.
     Helvetica/Helvetica Neue estão FORA do fallback de propósito:
     em máquinas onde a bold instalada é uma variante vazada, cair
     nela deixava todos os títulos em contorno. Arial é o plano B. */
  --sans: "Inter", Arial, "Segoe UI", sans-serif;

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ───────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--cream);
  color:var(--t-on-cream);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; top:0; left:8px; z-index:200;
  transform:translateY(-120%);
  background:var(--ink); color:var(--t-on-ink); padding:12px 20px;
}
.skip:focus{ transform:translateY(8px); }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }

/* ── Tipografia display ──────────────────────────── */
.display{
  /* mínimo: a maior palavra ("INTERNACIONAL") cabe a 390px
     máximo: a maior linha ("AGORA É INTERNACIONAL.") cabe a 1440px */
  font-size:clamp(34px, 7.4vw, 92px);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:700;
  text-transform:uppercase;
  margin:0 0 clamp(36px,5vw,72px);
  overflow-wrap:break-word;
}
.display em{ color:var(--copper-txt); }
.sec--dark .display em,
.sec--now .display em{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.display--quote{ font-size:clamp(31px, 6.4vw, 92px); }
.display--cta{ font-size:clamp(30px, 6vw, 88px); }

.sub{
  font-size:clamp(24px,3vw,44px);
  line-height:1.02; letter-spacing:-.03em;
  font-weight:700; text-transform:uppercase;
  margin:clamp(56px,7.5vw,104px) 0 clamp(28px,4vw,52px);
}

.eyebrow{
  font-size:11px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--t-on-cream-2);
  margin:0 0 clamp(22px,3vw,38px);
}
.eyebrow--light{ color:var(--t-on-ink-2); }

/* ── Botões ──────────────────────────────────────── */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border-radius:10px;
  font-size:13px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
/* cortina que sobe por trás do rótulo no hover */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .42s var(--ease);
}
.btn:hover{ transform:translateY(-3px); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(-1px); }

.btn--sm{ padding:11px 22px; font-size:11px; border-radius:10px; background:var(--ink); color:var(--t-on-ink); }
.btn--sm::before{ background:var(--copper); }
.btn--lg{ padding:20px 40px; font-size:14px; border-radius:10px; }

.btn--gold{ background:var(--gold-solid); color:var(--ink); }
.btn--gold::before{ background:var(--ink); }
.btn--gold:hover{ color:var(--gold-1); box-shadow:0 12px 30px -12px rgba(189,100,0,.6); }


/* ── Nav ─────────────────────────────────────────── */
/* Escura o tempo todo (a página é uma peça do Flow); sobre o hero fica
   transparente porque o hero já é escuro, e ao rolar ganha fundo+desfoque. */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding:14px 0;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
/* Lockup Flow + Miami Connection Show — o Flow é a marca âncora */
.nav__logo{ flex:none; display:flex; align-items:center; gap:14px; }
.nav__logo-flow{ height:46px; width:auto; display:block; transition:height .4s var(--ease); }
.nav__logo-div{ width:1px; height:30px; background:rgba(247,242,231,.28); transition:background-color .4s var(--ease), height .4s var(--ease); }
.nav__logo-mcs{
  font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.25;
  text-transform:uppercase; color:var(--t-on-ink);
  transition:color .4s var(--ease);
}
.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; }
.nav__links a{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 0; position:relative; color:var(--t-on-ink); opacity:.82;
  transition:opacity .25s var(--ease), color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-1); transition:right .35s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ right:0; }

/* A nav é escura o tempo todo (a página é uma peça do Flow); ao rolar só compacta */
.nav--stuck{
  background:rgba(13,12,10,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:rgba(247,242,231,.1);
  padding:8px 0;
}
.nav--stuck .nav__logo-flow{ height:38px; }
.nav--stuck .nav__logo-div{ height:26px; }

.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__burger span{ display:block; width:24px; height:1.5px; background:var(--t-on-ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav--open .nav__burger span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.drawer--open{ opacity:1; visibility:visible; }
.drawer__links{ display:grid; gap:10px; text-align:center; }
.drawer__links a{
  color:var(--t-on-ink);
  font-size:clamp(26px,7vw,44px); font-weight:700;
  letter-spacing:-.03em; text-transform:uppercase; line-height:1.1;
}
.drawer__links a:last-child{ color:var(--gold-1); }

/* ── Hero ────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:1fr auto auto;
  background:var(--ink); color:var(--t-on-ink);
  overflow:hidden;
  /* a barra fixa mede ~90px; o topo precisa passar disso */
  padding:clamp(104px,12vh,156px) 0 clamp(20px,3vh,34px);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,12,10,.82) 0%, rgba(13,12,10,.42) 30%, rgba(13,12,10,.76) 62%, rgba(13,12,10,.96) 100%),
    linear-gradient(90deg, rgba(13,12,10,.72) 0%, rgba(13,12,10,.14) 58%, rgba(13,12,10,0) 100%);
}

.hero__type{ position:relative; align-self:center; padding-inline:var(--gut); max-width:var(--maxw); margin-inline:auto; width:100%; }

/* Flow apresenta — a marca âncora aparece grande, antes do nome do programa */
.hero__presents{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); margin-bottom:clamp(18px,2.4vw,34px); }
.hero__flow{ height:clamp(60px,7vw,104px); width:auto; display:block; }
.hero__presents-lbl{
  font-size:clamp(10px,1vw,13px); font-weight:700; letter-spacing:.4em; text-transform:uppercase;
  color:var(--t-on-ink-2); padding-top:4px;
}
.hero__title{
  font-family:"Archivo","Inter",Arial,sans-serif;
  font-size:clamp(52px, 12.4vw, 214px);
  /* tracking menos negativo: vazado, letras muito juntas colam os contornos */
  line-height:.84; letter-spacing:-.03em; font-weight:700;
  text-transform:uppercase; margin:0;
}
.hero__title .l{ display:block; }
.hero__title .l2{ text-indent:.06em; }
.hero__title .l3{ color:var(--gold-1); }

/* Contorno: exclusivo do título do hero. O @supports garante
   que, sem text-stroke, o texto volta a ser sólido (e não some). */
@supports (-webkit-text-stroke: 1px black){
  .hero__title .l{
    -webkit-text-stroke:clamp(1.4px, .19vw, 3px) var(--t-on-ink);
    -webkit-text-fill-color:transparent;
  }
  .hero__title .l3{
    -webkit-text-stroke-color:var(--gold-1);
  }
}

.hero__panel{
  position:relative; max-width:var(--maxw); margin-inline:auto; width:100%;
  padding:clamp(28px,4vw,48px) var(--gut) 0;
  display:grid; gap:14px; max-inline-size:100%;
}
.hero__panel > *{ max-width:660px; }
.hero__lede{
  font-size:clamp(19px,2.1vw,30px); font-weight:700;
  letter-spacing:-.02em; line-height:1.14;
}
.hero__sub{ color:var(--t-on-ink-2); font-size:clamp(14px,1.2vw,18px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }

.hero__foot{
  position:relative; max-width:var(--maxw); margin-inline:auto; width:100%;
  padding:clamp(28px,5vh,60px) var(--gut) 0;
  display:flex; gap:12px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--t-on-ink-2);
}

/* ── Marquee ─────────────────────────────────────── */
.marquee{
  background:var(--ink); color:var(--t-on-ink);
  overflow:hidden; padding:14px 0;
  border-top:1px solid rgba(255,252,240,.12);
}
.marquee__track{ display:flex; align-items:center; gap:.5em; white-space:nowrap; width:max-content; animation:slide 34s linear infinite; }
.marquee__track span{
  font-size:clamp(28px,4.4vw,68px); font-weight:700;
  letter-spacing:-.035em; text-transform:uppercase;
  color:rgba(247,242,231,.16);
}
.marquee__track .is-flow{
  color:transparent;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  opacity:.9;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── Seções ──────────────────────────────────────── */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--dark{ background:var(--ink); color:var(--t-on-ink); }
.sec--dark .eyebrow{ color:var(--t-on-ink-2); }
.sec--eps{ background:var(--cream-2); }

/* ── O Flow (bloco de autoridade, escuro) ────────── */
/* Cabeçalho: logo Flow + título à esquerda, Igor à direita */
.flow__head{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,80px); align-items:end;
  margin-bottom:clamp(40px,5vw,72px);
}
.flow__logo{ height:clamp(58px,6vw,92px); width:auto; margin-bottom:clamp(20px,2.5vw,34px); }
.flow__face{ position:relative; }
.flow__face img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:center 20%; border-radius:14px; }
.flow__face figcaption{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:clamp(16px,2vw,26px);
  background:linear-gradient(0deg, rgba(13,12,10,.9), rgba(13,12,10,0));
  border-radius:0 0 14px 14px;
}
.flow__face figcaption strong{ font-size:clamp(16px,1.5vw,21px); font-weight:700; letter-spacing:-.01em; color:var(--t-on-ink); }
.flow__face figcaption span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-1); }

.flow__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,90px); align-items:start;
}
.flow__col{ max-width:56ch; }
.flow__col p{ font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:var(--t-on-ink-2); }
.flow__col strong{ color:var(--t-on-ink); font-weight:700; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,48px);
  margin-top:clamp(52px,7vw,96px);
  padding-top:clamp(34px,4.5vw,56px);
  border-top:1px solid rgba(247,242,231,.16);
}
.stat{ display:grid; gap:8px; }
.stat__n{
  font-size:clamp(42px,5.4vw,92px); font-weight:700;
  letter-spacing:-.05em; line-height:.9;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__l{
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t-on-ink-2);
}
.stat__ico{ flex:none; width:16px; height:16px; fill:var(--gold-1); }

/* Cenário do estúdio Flow — prova visual, faixa full-width */
.flow__studio{ position:relative; margin-top:clamp(52px,7vw,96px); }
.flow__studio img{ width:100%; aspect-ratio:21/7; object-fit:cover; }
.flow__studio figcaption{
  position:absolute; left:clamp(20px,4vw,60px); bottom:clamp(18px,3vw,34px);
  font-size:clamp(13px,1.3vw,18px); font-weight:700; letter-spacing:-.01em;
  color:var(--t-on-ink); text-shadow:0 2px 16px rgba(0,0,0,.8);
}

/* ── Split (texto + foto) ────────────────────────── */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(28px,4vw,72px);
  margin-block:clamp(48px,7vw,110px);
}
.split__text{ padding-left:var(--gut); padding-right:clamp(16px,3vw,60px); max-width:660px; }
.split__text p{ font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:var(--t-on-ink-2); }
.split__text strong{ color:var(--t-on-ink); font-weight:700; }
.split__kicker{
  margin-top:1.5em;
  font-size:clamp(19px,1.9vw,30px) !important;
  line-height:1.2 !important; letter-spacing:-.025em;
  color:var(--t-on-ink) !important; font-weight:700; text-transform:uppercase;
}
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ── Diferenciais ────────────────────────────────── */
.diffs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3.2vw,56px);
  border-top:1px solid rgba(255,252,240,.16);
}
.diff{
  /* respiro dos dois lados da divisória, não colado nela */
  padding:clamp(26px,3vw,42px) clamp(20px,2.4vw,40px) clamp(26px,3vw,42px) 0;
  border-right:1px solid rgba(255,252,240,.16);
  display:grid; gap:12px; align-content:start;
}
.diff:last-child{ border-right:0; padding-right:0; }
.diff__n{ font-size:11px; letter-spacing:.2em; color:var(--gold-1); }
.diff h3{ font-size:clamp(17px,1.5vw,23px); font-weight:700; letter-spacing:-.02em; line-height:1.12; text-transform:uppercase; }
.diff p{ font-size:14px; line-height:1.55; color:var(--t-on-ink-2); }

/* ── Strip de fotos ──────────────────────────────── */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  margin-top:clamp(56px,8vw,120px);
}
/* a faixa de fotos já fecha a seção escura — sem respiro extra depois dela */
.sec--dark{ padding-bottom:0; }
.sec--host{ padding-top:clamp(56px,7vw,112px); }
.strip img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(.15); transition:filter .5s var(--ease), transform .7s var(--ease); }
.strip img:hover{ filter:none; transform:scale(1.02); }

/* ── Quem conduz ─────────────────────────────────── */
.host{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,4vw,80px); align-items:center;
  margin-bottom:clamp(56px,8vw,120px);
}
.host__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%; }
.host__text{ padding-right:var(--gut); max-width:640px; }
.display--host{ font-size:clamp(40px,5.6vw,96px); margin-bottom:10px; }
.host__role{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-txt); margin-bottom:clamp(20px,3vw,34px);
}
.host__text p:not(.host__role){ font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:var(--t-on-cream-2); }
.host__text p:not(.host__role) + p{ margin-top:1.1em; }
.host__text strong{ color:var(--t-on-cream); font-weight:700; }

.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px); border-top:1px solid rgba(18,17,14,.14); padding-top:clamp(30px,4vw,52px); }

.member__media{ margin:0 0 clamp(18px,2vw,28px); overflow:hidden; background:var(--cream-2); }
.member__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .7s var(--ease);
}
.member:hover .member__media img{ transform:scale(1.03); }
/* Natã foi fotografado de corpo inteiro em estúdio; Rodrigo em plano
   médio. Enquadramentos diferentes pedem pontos de foco diferentes. */
.member:nth-child(1) .member__media img{ object-position:center 30%; }
.member:nth-child(2) .member__media img{ object-position:center 22%; }

.member h3{ font-size:clamp(21px,2vw,32px); font-weight:700; letter-spacing:-.03em; text-transform:uppercase; line-height:1.05; }
.member__role{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--copper-txt); margin:8px 0 16px; }
.member p:last-child{ font-size:15px; line-height:1.6; color:var(--t-on-cream-2); max-width:46ch; }

/* ── Episódios ───────────────────────────────────── */
.eps{ border-top:1px solid rgba(18,17,14,.16); }
.ep{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:auto clamp(150px,15vw,230px) 1fr auto;
  align-items:center; gap:clamp(16px,2.6vw,40px);
  padding:clamp(16px,2vw,26px) clamp(14px,1.6vw,26px);
  margin-inline:calc(-1 * clamp(14px,1.6vw,26px));
  border-bottom:1px solid rgba(18,17,14,.16);
  cursor:pointer;
  transition:color .55s var(--ease);
}
/* faixa escura que varre da esquerda para a direita */
.ep::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .62s var(--ease);
}
.ep:hover::before,
.ep:focus-within::before{ transform:scaleX(1); }
.ep:hover,
.ep:focus-within{ color:var(--gold-1); }
.ep__n{ font-size:11px; letter-spacing:.2em; color:var(--t-on-cream-2); align-self:center; transition:color .55s var(--ease); }
.ep:hover .ep__n{ color:var(--gold-2); }
.ep:hover .ep__v{ color:var(--gold-1); opacity:.75; }
.ep__media{ margin:0; overflow:hidden; }
.ep__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .7s var(--ease), filter .6s var(--ease);
  filter:grayscale(.2);
}
.ep:hover .ep__media img{ transform:scale(1.05); filter:none; }
.ep__body{ display:grid; gap:8px; }
.ep__t{ font-size:clamp(18px,2.2vw,36px); font-weight:700; letter-spacing:-.035em; line-height:1.02; text-transform:uppercase; }
.ep__v{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--t-on-cream-2); white-space:nowrap; transition:color .55s var(--ease), opacity .55s var(--ease); }
.ep__go{ font-size:19px; opacity:.35; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ep:hover .ep__go{ opacity:1; transform:translate(4px,-4px); }

.plats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(18,17,14,.14); border:1px solid rgba(18,17,14,.14); }
.plat{ background:var(--cream-2); padding:clamp(20px,2.4vw,34px); display:grid; gap:10px; align-content:start; transition:background-color .3s var(--ease); }
.plat:hover{ background:var(--cream); }
.plat__ico{ width:26px; height:26px; fill:var(--ink); transition:fill .3s var(--ease), transform .3s var(--ease); }
.plat:hover .plat__ico{ fill:var(--copper-txt); transform:translateY(-2px); }
.plat h3{ font-size:clamp(15px,1.3vw,20px); font-weight:700; letter-spacing:-.02em; text-transform:uppercase; }
.plat p{ font-size:13px; line-height:1.5; color:var(--t-on-cream-2); }

/* ── Por que agora ───────────────────────────────── */
.sec--now{ background:var(--ink); color:var(--t-on-ink); overflow:hidden; }
.now__media{ position:absolute; inset:0; }
.now__media img{ width:100%; height:100%; object-fit:cover; }
.now__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,17,14,.95) 0%, rgba(18,17,14,.86) 46%, rgba(18,17,14,.5) 100%);
}
.now__in{ position:relative; }
.now__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px); max-width:1100px; }
.now__cols p{ font-size:clamp(15px,1.2vw,19px); line-height:1.58; color:var(--t-on-ink-2); }
.now__cols strong{ color:var(--t-on-ink); font-weight:700; }

/* ── CTA ─────────────────────────────────────────── */
.sec--cta{ text-align:center; }
.sec--cta .eyebrow{ text-align:center; }
.cta__row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.contact{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(24px,5vw,90px);
  margin-top:clamp(56px,8vw,110px); padding-top:clamp(30px,4vw,52px);
  border-top:1px solid rgba(18,17,14,.14);
}
.contact__item{ display:grid; gap:6px; }
.contact__l{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--t-on-cream-2); }
.contact__item a{ font-size:clamp(15px,1.4vw,21px); font-weight:700; letter-spacing:-.02em; border-bottom:1px solid rgba(18,17,14,.24); padding-bottom:2px; transition:color .25s var(--ease), border-color .25s var(--ease); }
.contact__item a:hover{ color:var(--copper); border-color:var(--copper); }

/* ── Footer ──────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--t-on-ink); padding-top:clamp(72px,10vw,150px); position:relative; overflow:hidden; }
/* skyline noturno de Miami: o claim fala em ser lembrado, a imagem
   dá o horizonte sem competir com a tipografia */
.foot__bg{ position:absolute; inset:0; pointer-events:none; }
.foot__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; opacity:.3; }
.foot__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(18,17,14,.55) 42%, rgba(18,17,14,.9) 100%),
    linear-gradient(90deg, rgba(18,17,14,.85) 0%, rgba(18,17,14,.25) 70%, rgba(18,17,14,.6) 100%);
}
.foot__in{ position:relative; }
.foot__mark{ width:clamp(70px,7vw,116px); height:auto; margin-bottom:clamp(30px,4vw,52px); opacity:.9; }
.foot__claim{
  font-size:clamp(24px,3.6vw,62px); font-weight:700;
  letter-spacing:-.035em; line-height:1.04; text-transform:uppercase;
  max-width:30ch;
}
.foot__claim em{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.foot__meta{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-top:clamp(56px,8vw,120px); padding-bottom:clamp(30px,4vw,52px);
}
.foot__brand{ display:grid; gap:12px; }
.foot__logo{ height:clamp(40px,3.4vw,52px); width:auto; opacity:.92; }
.foot__tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-on-ink-2); }
/* selo Flow: assinatura de que a peça pertence ao ecossistema Flow */
.foot__flow{ display:flex; align-items:center; gap:14px; }
.foot__flow span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--t-on-ink-2); white-space:nowrap; }
.foot__flow img{ height:clamp(44px,4.4vw,64px); width:auto; }
.foot__bar{
  position:relative;
  border-top:1px solid rgba(255,252,240,.14);
  max-width:var(--maxw); margin-inline:auto; padding:22px var(--gut);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--t-on-ink-2);
}

/* ── Reveal ──────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav .btn--sm{ display:none; }

  /* fix mobile: título e foto do Igor brigavam espremidos em 2 colunas */
  .flow__head{ grid-template-columns:1fr; align-items:start; gap:clamp(24px,4vw,36px); }
  .flow__face img{ aspect-ratio:16/11; }
  .flow__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; row-gap:clamp(28px,5vw,44px); }
  .split{ grid-template-columns:1fr; }
  .split__text{ padding-inline:var(--gut); justify-self:stretch; max-width:none; }
  .split__media{ order:-1; }
  .diffs{ grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); }
  .diff:nth-child(2n){ border-right:0; padding-right:0; }
  .diff:nth-child(-n+2){ border-bottom:1px solid rgba(255,252,240,.16); }
  .ep{ grid-template-columns:auto clamp(120px,18vw,180px) 1fr auto; }
  .strip{ grid-template-columns:1fr 1fr; }
  .host{ grid-template-columns:1fr; }
  .host__text{ padding-inline:var(--gut); max-width:none; }
  .host__media img{ aspect-ratio:4/3; }
  .team{ grid-template-columns:1fr; gap:36px; }
  .plats{ grid-template-columns:1fr 1fr; }
  .now__cols{ grid-template-columns:1fr; }
  /* sem colunas, o texto atravessa a foto inteira: escurece na vertical */
  .now__media::after{
    background:linear-gradient(180deg, rgba(18,17,14,.9) 0%, rgba(18,17,14,.88) 55%, rgba(18,17,14,.93) 100%);
  }
}

@media (max-width:640px){
  .hero{ min-height:92svh; }
  .hero__media img{ object-position:center 46%; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__foot{ font-size:9px; gap:8px; }

  .stats{ grid-template-columns:1fr; }
  .diffs{ grid-template-columns:1fr; }
  .diff{ border-right:0; border-bottom:1px solid rgba(255,252,240,.16); padding-right:0; }
  .diff:last-child{ border-bottom:0; }
  .strip{ grid-template-columns:1fr; }
  .plats{ grid-template-columns:1fr; }

  .ep{ grid-template-columns:auto 1fr; row-gap:14px; column-gap:14px; align-items:start; }
  .ep__n{ align-self:start; padding-top:4px; }
  .ep__media{ grid-column:2; }
  .ep__body{ grid-column:2; }
  .ep__go{ display:none; }

  .cta__row .btn{ width:100%; }
  .foot__claim{ max-width:none; }
}

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

@media print{
  .nav,.drawer,.marquee,.strip{ display:none; }
  body{ background:#fff; color:#000; }
}