/* =========================================================
   ESTAMPARIA AUTORAL — Luiza Rosas / Lo de Lui
   Regras: brief/DESIGN.md. Cores só da tabela. Sem gradiente,
   sombra ou transparência. Raio máximo 2px. Alinhado à esquerda.
   ========================================================= */

/* ---------- fontes hospedadas no próprio site (antes: Google Fonts) ----------
   Urbanist (variável 400–900): Black nos títulos, Bold nos subtítulos,
   Regular no texto corrido. Decidido na reunião de 31/10/2026.          */
@font-face{
  font-family:"Urbanist"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/urbanist.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Urbanist"; font-style:italic; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/urbanist-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --lime:#aec543;
  --red:#e0251b;
  --amber:#d88e25;
  --blue:#4f85d9;
  --black:#000000;
  --off-white:#f5f5f5;
  --white:#ffffff;
  --cinza:#6b6b6b;
  --moldura:#e6e6e6;

  /* escala tipográfica: 12 · 14 · 16 · 20 · 24, displays em clamp() */
  --fs-1:12px;
  --fs-2:14px;
  --fs-3:16px;
  --fs-4:20px;
  --fs-5:24px;
  /* displays por papel */
  --d-card:clamp(20px,1.7vw,24px);
  --d-marca:clamp(24px,2.2vw,32px);
  --d-secao:clamp(28px,3.9vw,56px);
  --d-preco:clamp(40px,5vw,72px);
  --d-fim:clamp(52px,11vw,180px);

  /* escala de espaçamento: 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 120 */
  --marg:48px;            /* margem lateral desktop */
  --gutter:24px;
  --hdr-h:64px;
}


@media (max-width:900px){ :root{ --marg:20px; --hdr-h:56px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
.sec,.mod,.hero{ scroll-margin-top:var(--hdr-h); }

body{
  margin:0;
  overflow-x:clip;
  background:var(--off-white);
  color:var(--black);
  font-family:"Urbanist",system-ui,sans-serif;
  font-weight:400;
  font-size:var(--fs-3);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }

/* nada de palavra sozinha na última linha: títulos equilibrados, texto corrido "bonito" */
h1,h2,h3,.sec__title,.mod__title,.colab__name,.preco h3,.mod-card h3{ text-wrap:balance; }
p,li,dd,.acc__q{ text-wrap:pretty; }

/* algarismos alinhados em listas e dados */
.sec__num,.mod-card__n,.learn li span,.traj__list b,.mod__ficha dd,.hdr__meta dd,.preco__desc{ margin-top:12px; font-size:var(--fs-2); line-height:1.45; }
.preco__valor{
  font-variant-numeric:tabular-nums;
}
a{ color:inherit; }
h1,h2{ margin:0; font-weight:900; letter-spacing:-0.02em; }
h3{ margin:0; font-weight:700; letter-spacing:-0.01em; } /* subtítulo = Bold */
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ---------- utilitários ---------- */
.eyebrow{
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin:0;
}
.rule{ height:1px; background:var(--black); margin:clamp(48px,6vw,88px) 0; }
.note{ color:var(--cinza); max-width:62ch; margin-top:clamp(32px,4vw,56px); }


:focus-visible{
  outline:2px solid var(--black);
  outline-offset:3px;
}
.mod--blue :focus-visible,.fim :focus-visible,.barra :focus-visible{ outline-color:var(--off-white); }
.mod--red :focus-visible{ outline-color:var(--white); }

/* link para pular o menu: invisível até receber foco pelo teclado */
.pular{
  position:absolute; left:var(--marg); top:-100px; z-index:100;
  background:var(--black); color:var(--off-white);
  padding:12px 16px; font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
}
.pular:focus{ top:12px; }
main:focus{ outline:none; }

/* ---------- botão ---------- */
.btn{
  display:inline-block;
  background:var(--black);
  color:var(--off-white);
  text-decoration:none;
  font-weight:700;
  font-size:var(--fs-1);
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:16px 24px;
  border:0; border-radius:2px;
  cursor:pointer;
  font-family:inherit;
}
.btn--sm{ padding:16px 16px; }
/* CTA da referência: texto à esquerda, seta centrada no espaço que sobra */
.btn--cta{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  width:300px;
  height:50px;
  padding:0 0 0 clamp(28px,4vw,56px);
  font-size:var(--fs-1);
}
.btn__seta{ justify-self:center; display:block; }
@media (max-width:900px){
  .btn--cta{ width:100%; padding-left:24px; }
  .btn__seta{ justify-self:end; margin-right:24px; }
}
.btn--light{ background:var(--white); color:var(--black); }
.btn:hover{ text-decoration:underline; }

/* ---------- header fixo ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--hdr-h);
  display:flex; align-items:center; gap:var(--gutter);
  padding:0 var(--marg);
  background:var(--hdr-bg,var(--off-white));
  color:var(--hdr-fg,var(--black));
}
/* sobre bloco escuro: logo e botão invertem */
.hdr--claro .hdr__logo img{ filter:invert(1); }
/* provisório até a assinatura à mão chegar: o nome em texto, herdando a cor
   do cabeçalho (que muda sozinha sobre os blocos coloridos) */
.hdr__nome{
  font-size:var(--fs-4); font-weight:700; letter-spacing:-0.01em; line-height:1;
  color:currentColor;
}
.hdr--claro .btn{ background:var(--off-white); color:var(--black); }
.hdr__logo{ display:flex; align-items:center; min-height:44px; }
.hdr__logo img{ height:22px; width:auto; }
.hdr__logo{ text-decoration:none; }
/* menu por seção (Taylor/Avenor): rótulos pequenos, a seção atual sublinhada */
.hdr__nav{
  margin-left:auto;
  display:flex; gap:clamp(16px,2.2vw,32px);
}
.hdr__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  text-decoration:none;
}
.hdr__nav a:hover,.hdr__nav a[aria-current="true"]{
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
}
@media (max-width:900px){
  .hdr__nav{ display:none; }
  .hdr .btn{ margin-left:auto; }
}

/* =========================================================
   01 HERO — composição de refs/hero-pag01-full.jpg
   ========================================================= */
.hero{ padding-top:var(--hdr-h); }

/* a prancha abre a página de ponta a ponta (pedido do Marcello em
   11/11/2026). Sem margem e sem teto de largura, mas na proporção em que foi
   gravada (1280:600) e com contain — nada é cortado, que é o que a Luiza pediu
   na reunião de 31/10: esticar ou recortar mata partes importantes do arquivo */
.hero__video{ margin:clamp(8px,1vw,12px) 0 0; padding:0; }
.hero__video .video,
.hero__video img{
  width:100%; max-width:none; height:auto;
  aspect-ratio:2576/1392; object-fit:contain; display:block;
}
.hero__video picture{ display:block; }

/* ---------- faixa de fotos (desceu da hero) ---------- */
.fotos{ padding:clamp(48px,6vw,88px) 0 0; }
.fotos__ctrl{ display:flex; justify-content:flex-end; padding:0 var(--marg) 6px; }
.fotos__faixa{
  overflow:hidden;
  /* reserva a altura da foto mais alta para a página não pular */
  height:58vh;
}
.fotos__trilho{
  display:flex;
  align-items:flex-start;
  width:max-content;
  animation:desliza 90s linear infinite;
}
/* só o interruptor para as fotos; passar o mouse não interfere */
.fotos__trilho.is-manual{ animation:none; will-change:transform; } /* com JS, o movimento e o arrasto são do main.js */
/* a faixa aceita arrasto: dedo, mouse ou trackpad. A rolagem vertical segue com a página */
.fotos__faixa{ touch-action:pan-y; cursor:grab; -webkit-user-select:none; user-select:none; }
.fotos__faixa.is-arrastando{ cursor:grabbing; }
.fotos__ph img{ -webkit-user-drag:none; pointer-events:none; }
/* interruptor discreto do movimento (WCAG 2.2.2), acima da faixa, à direita */
.fotos__movimento{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 0 0 12px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--cinza);
}
.fotos__movimento-trilho{
  position:relative; width:24px; height:12px;
  border:1px solid currentColor; border-radius:2px;
}
.fotos__movimento-trilho::after{
  content:""; position:absolute; top:1px; left:1px;
  width:8px; height:8px; background:currentColor;
  transition:transform 160ms ease;
}
.fotos__movimento[aria-checked="true"] .fotos__movimento-trilho::after{ transform:translateX(12px); }
.fotos__movimento:hover{ color:var(--black); }
.fotos__ph{ margin:0 8px 0 0; flex:0 0 auto; }
.fotos__ph img{ height:34vh; width:auto; object-fit:cover; display:block; }
.fotos__ph--alta img{ height:58vh; }
@keyframes desliza{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

.hero__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--gutter);
  padding:clamp(20px,3vw,32px) var(--marg) 0;
}
.hero__eyebrow{
  font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; margin:0;
}
.hero__sig{
  font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; margin:0; text-align:right;
}

/* título em meia largura, alinhado à esquerda, com o subtítulo logo abaixo
   formando um bloco só (pedido da cliente em 31/10/2026) */
/* o titulo fica POR CIMA do video (pedido do Marcello em 11/11/2026).
   O fundo e video e muda de frame: a area do titulo vai de quase branca a
   coberta por pecas pretas, entao sem veu o preto sumiria em metade do filme.
   O veu e radial, preso ao canto inferior esquerdo, e dissipa antes da metade
   — o video continua visivel onde o titulo nao esta. */
.hero__palco{ position:relative; }
.hero__palco::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 100% at 0% 100%,
    rgba(245,245,245,0.97) 0%,
    rgba(245,245,245,0.90) 30%,
    rgba(245,245,245,0.55) 48%,
    rgba(245,245,245,0) 64%);
}
.hero__title{
  position:absolute; left:0; bottom:0; z-index:2;
  font-size:clamp(40px,5.8vw,88px);
  line-height:0.94;
  letter-spacing:-0.02em;
  padding:0 var(--marg) clamp(18px,2.6vw,40px);
  margin:0;
}
.hero__title span{ display:block; }

.hero__below{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--gutter);
  padding:clamp(16px,2vw,24px) var(--marg) clamp(64px,8vw,120px);
}
.hero__lede{ max-width:40ch; font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); line-height:1.4; }

@media (max-width:900px){
  /* no celular o vídeo vai de ponta a ponta: com as margens ele ficava
     baixo demais para dar para ler a gravação. Continua sem corte. */
  .hero__video{ padding:0; margin-top:clamp(8px,2vw,12px); }
  .fotos__faixa{ height:32vh; }
  .fotos__ph img{ height:24vh; }
  .fotos__ph--alta img{ height:32vh; }
  .fotos__trilho{ animation-duration:70s; }
  .hero__title{ font-size:13.9vw; }
  .hero__below{ flex-direction:column; gap:32px; padding-bottom:24px; }

  /* mobile: data em duas linhas inteiras (sem "·" órfão no começo da linha)
     e a assinatura desce para baixo do título, como crédito dele */
  .hero{ display:flex; flex-direction:column; }
  .hero__foot{ display:contents; }
  .fotos__faixa{ order:1; }
  .hero__eyebrow{ order:2; padding:20px var(--marg) 0; line-height:1.5; }
  .hero__eyebrow span{ display:block; }
  .hero__eyebrow .hero__sep{ display:none; }
  .hero__title{ order:3; margin-top:12px; }
  .hero__sig{ order:4; text-align:left; padding:12px var(--marg) 0; }
  .hero__below{ order:5; }

  /* botão do header com 44px de altura: sobra respiro dentro da barra de 56px */
  .hdr .btn{ padding:13px 16px; transition:opacity 200ms ease, visibility 200ms; }
  /* quando a barra fixa de baixo aparece, o botão do topo sai: um CTA por tela */
  .hdr.hdr--barra .btn{ opacity:0; visibility:hidden; }

  /* linhas informativas longas: duas linhas inteiras, sem "·" sobrando na quebra */
  .linhas-mob > span{ display:block; }
  .linhas-mob > .sep{ display:none; }

  /* "Ver trajetória completa" vira linha de lista: a régua de cima é a borda dela */
}

/* =========================================================
   SEÇÃO PADRÃO (Taylor + PDF)
   ========================================================= */
.sec{
  padding:clamp(64px,8.4vw,120px) var(--marg);
}
.sec__head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--gutter);
  align-items:baseline;
  padding-bottom:16px;
  border-bottom:1px solid var(--black);
  margin-bottom:clamp(32px,4vw,56px);
}
.sec__num{
  font-size:clamp(var(--fs-3),1.4vw,var(--fs-4)); font-weight:500; letter-spacing:0; color:var(--cinza);
}
.sec__label{ text-align:center; }
.sec__ano{ text-align:right; }
.sec__label,.sec__ano{
  font-size:var(--fs-1);
  font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.sec__pair{ text-align:right; line-height:1.35; }

.sec__title{
  font-size:var(--d-secao);
  line-height:1.02;
  letter-spacing:-0.02em;
  max-width:21ch;
  margin-bottom:clamp(40px,5vw,80px);
}
.sec__title i{ font-weight:700; font-style:italic; }

/* seção 02: composição medida sobre a referência (Taylor "About Us") */
.sec--sobre .sec__head{ margin-bottom:clamp(20px,2.2vw,30px); }
.sec__title--grande{
  font-size:clamp(28px,4.6vw,66px);
  line-height:0.96;
  letter-spacing:-0.02em;
  max-width:none;
  margin-bottom:clamp(48px,5.6vw,80px);
}
.sobre__grid{
  align-content:start;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  /* o vídeo ocupa as três linhas; as duas primeiras seguem o texto e a sobra
     de altura vai toda para a última, senão abrem buracos entre os parágrafos */
  grid-template-rows:auto auto 1fr;
  gap:var(--gutter) var(--gutter);
  align-items:start;
}
.sobre__foto{ grid-column:1 / 5; grid-row:1 / 4; margin:0; }
.sobre__foto img,.sobre__foto .video{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:2px; display:block; }
.sobre__grid p:nth-of-type(1){ grid-column:6 / 13; grid-row:1; }
.sobre__grid p:nth-of-type(2){ grid-column:6 / 13; grid-row:2; margin-top:1em; align-self:start; }
.sobre__grid p{ font-size:var(--fs-3); line-height:1.35; max-width:none; font-weight:700; }
.sobre__cta{ grid-column:6 / 10; grid-row:3; align-self:start; margin-top:clamp(28px,3vw,42px); }
.sobre__cta .btn{ min-width:300px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }

@media (max-width:900px){
  .sobre__grid{ grid-template-columns:1fr; grid-template-rows:none; gap:24px; }
  .sobre__foto{ grid-column:1 / -1; grid-row:auto; }
  .sobre__grid p:nth-of-type(1),.sobre__grid p:nth-of-type(2){ grid-column:1 / -1; grid-row:auto; }
  .sobre__cta{ grid-column:1 / -1; grid-row:auto; margin-top:16px; }
  .sobre__cta .btn{ min-width:0; width:100%; }
}

.sec__body{ max-width:65ch; }
.sec__body p{ line-height:1.6; }
.sec__body p + p{ margin-top:1.4em; }
/* texto em duas colunas: 5 de 12 colunas cada, começando nas colunas 1 e 7
   → medida de ~66 caracteres (Bringhurst) e bordas sobre a grade */
.two-col{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:1.4em;
  align-items:start;
}
.two-col p{ max-width:none; }
.two-col p:nth-child(odd){ grid-column:1 / 6; }
.two-col p:nth-child(even){ grid-column:7 / 12; }
.two-col p + p{ margin-top:0; }
@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
  .two-col p:nth-child(odd),.two-col p:nth-child(even){ grid-column:1 / -1; }
  .sec__head{ grid-template-columns:auto 1fr; }
  .sec__label{ text-align:left; }
  .sec__ano{ display:none; }
}

/* =========================================================
   MÓDULO COR — anatomia de refs/layout-ref-1 e -3
   ========================================================= */
.mod{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  padding:clamp(48px,6vw,80px) var(--marg);
  min-height:92vh;
  align-content:start;
  color:var(--black);
}
.mod--lime{ background:var(--lime); }
.mod--blue{ background:var(--blue); color:var(--black); }
.mod--red{ background:var(--red); color:var(--white); }

.mod .sec__num{ color:currentColor; }
.mod .sec__head{
  grid-column:1 / -1;
  grid-row:1;
  margin-bottom:clamp(24px,3vw,40px);
}
.mod__eyebrow{
  grid-column:1/5;
  grid-row:1;
  font-size:var(--fs-1);
  font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  margin:0 0 clamp(24px,3vw,40px);
}
.mod__title{
  grid-column:1/5;
  grid-row:2;
  font-weight:900;
  font-size:clamp(26px,3vw,44px);
  line-height:1.05;
  letter-spacing:-0.02em;
}
.mod__pair{
  grid-column:5/8;
  grid-row:2;
  font-size:var(--fs-1);
  font-weight:700; letter-spacing:0.04em; line-height:1.35;
  text-transform:uppercase;
  padding-top:0.5em;
}
.mod__para{
  grid-column:9/13;
  grid-row:2;
  font-size:var(--fs-2);
  line-height:1.45;
  font-weight:700;
}
.mod__foto{
  grid-column:9/13;
  grid-row:3;
  margin:clamp(40px,6vw,80px) 0 0;
  align-self:end;
}
.mod__foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--white); }
/* o texto longo subiu para dentro do bloco de cor (reunião 31/10): uma seção
   a menos na página, sem perder informação */
.mod__texto{
  grid-column:1/7;
  grid-row:3;
  margin-top:clamp(40px,6vw,80px);
}
.mod__texto p + p{ margin-top:1em; }
/* "estampas criadas para" também vive dentro do bloco verde (pedido do cliente) */
.mod__marcas{ grid-column:1/9; grid-row:4; margin-top:clamp(40px,5vw,72px); }
/* a foto cobre as duas linhas de texto, senão sobra um vazio enorme de verde */
.mod--lime .mod__foto{ grid-row:3 / 5; align-self:stretch; }
.mod--lime .mod__foto img{ height:100%; }
.mod__marcas .brands__list{ max-width:none; }

@media (max-width:900px){
  .mod{ grid-template-columns:repeat(6,1fr); min-height:0; }
  .mod__eyebrow,.mod .sec__head{ grid-column:1/-1; grid-row:auto; }
  .mod__title{ grid-column:1/-1; grid-row:auto; }
  .mod__pair{ grid-column:1/-1; grid-row:auto; }
  .mod__para{ grid-column:1/-1; grid-row:auto; }
  .mod__foto{ grid-column:1/-1; grid-row:auto; margin-top:32px; }
  .mod__texto{ grid-column:1/-1; grid-row:auto; margin-top:32px; }
  .mod__marcas{ grid-column:1/-1; grid-row:auto; margin-top:32px; }
}

/* =========================================================
   03 marcas, mídia, trajetória
   ========================================================= */
/* mesmo corpo do texto que vem acima, no bloco verde (pedido do cliente) */
.brands__list{ max-width:780px; margin-top:16px; line-height:1.5; }

.press__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:24px; }
.press__list a{ text-decoration:none; display:block; }
.press__name{ display:block; font-size:var(--d-marca); font-weight:900; letter-spacing:-0.02em; }
.press__headline{ display:block; margin-top:8px; font-size:var(--fs-2); line-height:1.4; color:var(--cinza); max-width:34ch; }
.press__list a:hover .press__name{ text-decoration:underline; }
@media (max-width:900px){ .press__list{ grid-template-columns:1fr; } }

.traj{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter); padding-top:32px; }
.traj__list li{ padding:16px 0; border-top:1px solid var(--black); max-width:56ch; }
.traj__list li:first-child{ border-top:0; }
.traj__list b{ display:inline-block; min-width:5.5em; font-weight:900; }
@media (max-width:900px){ .traj{ grid-template-columns:1fr; } }

/* ---------- acordeão ---------- */
.acc{ border-top:1px solid var(--black); }
.acc:last-child{ border-bottom:1px solid var(--black); }
.acc--traj{ border-top:0; margin-top:clamp(32px,4vw,56px); } /* sem régua acima: o respiro vem daqui */
.faq__list .acc:first-child{ border-top:0; } /* a régua do cabeçalho da seção já abre a lista */
.acc__q{
  width:100%; text-align:left;
  background:none; border:0; padding:24px 0;
  font-family:inherit; font-size:clamp(var(--fs-3),1.4vw,var(--fs-4)); font-weight:700;
  cursor:pointer; color:inherit;
  display:flex; justify-content:space-between; gap:24px; align-items:baseline;
}
.js .acc__q::after{ content:"+"; font-weight:700; }
.js .acc__q[aria-expanded="true"]::after{ content:"–"; }
.acc__a{ padding:0 0 24px; max-width:65ch; }
.js .acc__a{ display:none; }
.acc__a p{ font-weight:500; line-height:1.6; }
.js .acc__q[aria-expanded="true"] + .acc__a{ display:block; }

/* =========================================================
   04 colaborações (Taylor "Works" + metadados Désourdy)
   ========================================================= */
.colabs{ margin-top:clamp(64px,8vw,120px); }
.colabs__list{ margin-top:24px; }
.colab{ border-top:1px solid var(--black); }
.colab:last-child{ border-bottom:1px solid var(--black); }
.colab__line{
  width:100%; background:none; border:0; cursor:pointer; color:inherit;
  font-family:inherit; text-align:left;
  padding:clamp(18px,2vw,28px) 0;
  display:flex; align-items:baseline; gap:24px;
}
.colab__name{
  font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); font-weight:700; letter-spacing:-0.01em;
  line-height:1.2;
}
.colab__meta{ font-size:var(--fs-2); font-weight:700; letter-spacing:0.02em; margin-left:auto; }
.colab__meta i{ font-style:italic; }
.colab__line:hover .colab__name{ text-decoration:underline; }
.colab__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding-bottom:clamp(20px,2.5vw,32px);
}
.colab__grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.js .colab__grid{ display:none; }
.js .colab.is-open .colab__grid{ display:grid; padding-bottom:12px; }
.colab__legenda{
  display:block;
  font-size:var(--fs-2); font-style:italic; font-weight:500;
  padding-bottom:clamp(24px,2.5vw,32px);
}
.colab__legenda::before{ content:"• "; font-style:normal; }
.js .colab__legenda{ display:none; }
.js .colab.is-open .colab__legenda{ display:block; }
@media (max-width:900px){
  .colab__grid,.js .colab__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
  .colab__legenda,.js .colab__legenda{ display:block; }
  .colab__line{ flex-direction:column; gap:8px; }
  .colab__meta{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .colab__grid{ transition:none; } }

/* =========================================================
   05 o que você vai aprender
   ========================================================= */
.learn{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gutter); }
.learn li{
  display:flex; gap:24px; align-items:baseline;
  padding:24px 0; border-top:1px solid var(--black);
}
.learn li span{ flex:0 0 2.75em; font-weight:700; font-size:var(--fs-2); letter-spacing:0.04em; font-variant-numeric:tabular-nums; } /* coluna fixa: textos alinhados em (01)…(08) */
@media (max-width:900px){ .learn{ grid-template-columns:1fr; } }

/* =========================================================
   CTA no meio da página + linha de data e escassez
   ========================================================= */
.cta-bloco{
  margin-top:clamp(56px,7vw,110px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--black);
}
.cta-data{
  margin-top:16px;
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* =========================================================
   faixa full-bleed de respiro (refs/layout-ref-4-foto.jpg)
   ========================================================= */
.faixa{ margin:0; }
.faixa__nav{
  display:flex; gap:clamp(24px,6vw,96px);
  padding:0 var(--marg) 8px;
  font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
}
.faixa__nav span:last-child{ margin-left:auto; }
.faixa img{ width:100%; height:60vh; object-fit:cover; display:block; }


/* =========================================================
   06 estrutura do curso
   ========================================================= */
.mods{
  display:flex;
  gap:clamp(16px,2vw,28px);
  align-items:stretch;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding-bottom:24px;
  /* sangra até a borda direita, como na referência */
  margin-right:calc(var(--marg) * -1);
}
.mods__row{ display:flex; gap:clamp(16px,2vw,28px); }
.mod-card{
  flex:0 0 clamp(250px,22vw,330px);
  scroll-snap-align:start;
  border-top:2px solid var(--black);
  padding-top:16px;
  display:flex; flex-direction:column;
}
.mod-card__n{ font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; margin-bottom:clamp(40px,5vw,72px); }
.mod-card h3{
  font-size:var(--d-card); font-weight:700; letter-spacing:-0.02em;
  line-height:1.05; margin-bottom:12px;
}
/* a descrição acompanha o título: com os seis módulos os textos têm tamanhos
   muito diferentes, e o rodapé comum abria buracos nos cards curtos */
.mod-card__d{ font-size:var(--fs-2); line-height:1.5; color:var(--cinza); }
.mods__dica{
  margin-top:24px; font-size:var(--fs-1); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--cinza);
}

/* =========================================================
   07 para quem é / 08 como funciona
   ========================================================= */
.who{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gutter); }
.how-wrap{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:start; }
.how-wrap .how{ grid-column:1 / 8; }
.how-wrap .how__foto{ grid-column:9 / 13; }
.how__foto{ margin:0; position:sticky; top:calc(var(--hdr-h) + 40px); }
.how__foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.who li,.how li{ padding:clamp(20px,2.4vw,32px) 0; border-top:1px solid var(--black); }
.who p,.how p{ max-width:46ch; }
.who h3,.how h3{ font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); font-weight:700; letter-spacing:-0.01em; }
.who p,.how p{ margin-top:8px; color:var(--cinza); line-height:1.45; }
@media (max-width:900px){
  .who{ grid-template-columns:1fr; }
  .how-wrap{ grid-template-columns:1fr; }
  .how-wrap .how,.how-wrap .how__foto{ grid-column:1 / -1; }
  .how__foto{ position:static; order:-1; }
  .mods{ margin-right:calc(var(--marg) * -1); }
  .mod-card{ flex-basis:76vw; }
}

/* =========================================================
   09 data e valores — Módulo Cor red com cards
   ========================================================= */
.mod--precos .mod__para{ grid-column:9/13; }
/* ficha factual no lugar da linha corrida (referência Revix "Visiting Details") */
.mod__ficha{
  grid-column:9/13; grid-row:3; align-self:start;
  margin:0;
  font-size:var(--fs-2);
}
.mod__ficha > div{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:12px 0;
  border-top:1px solid currentColor;
}
.mod__ficha > div:last-child{ border-bottom:1px solid currentColor; }
.mod__ficha dt{
  font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  align-self:center; min-width:8ch;
}
.mod__ficha dd{ margin:0; font-weight:700; text-align:right; }
@media (max-width:900px){ .mod__ficha{ grid-column:1/-1; grid-row:auto; } }
.precos-col{ grid-column:1/9; grid-row:3; align-self:start; }
/* os dois cartões dividem as mesmas linhas: título, descrição, preço, parcelas, lista e botão alinhados */
.precos{
  display:grid; grid-template-columns:1fr 1fr; column-gap:2px;
  grid-template-rows:repeat(6,auto);
  margin-top:0;
}
.preco{ grid-row:span 6; display:grid; grid-template-rows:subgrid; row-gap:0; }
.preco{ background:var(--white); color:var(--black); padding:clamp(24px,2.6vw,40px); border-radius:2px; }
.preco h3{ font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); font-weight:700; }
.preco__topo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; min-height:28px; }
.preco__topo h3{ white-space:nowrap; } /* em tela estreita a etiqueta desce, o nome da modalidade não quebra */
.preco__tag{
  display:inline-block; background:var(--amber); color:var(--black);
  font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 8px; border-radius:2px;
}
.preco__valor{ font-size:var(--d-preco); font-weight:900; letter-spacing:-0.02em; line-height:1; margin-top:12px; }
.preco__parc{ font-size:var(--fs-1); color:var(--cinza); margin-top:8px; }
.preco ul{ margin:24px 0 32px; }
.preco .btn{ margin-top:auto; }
.preco li{ padding:8px 0; border-top:1px solid var(--black); font-size:var(--fs-3); }
.preco .btn{ width:100%; text-align:center; }

.precos__pagamento{
  margin-top:16px;
  font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.precos__asterisco{ font-size:var(--fs-1); }
.precos__notas{ margin-top:24px; font-size:var(--fs-2); line-height:1.5; }
.precos__notas p + p{ margin-top:8px; }
.precos__prazo{ font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.precos__prazo[hidden]{ display:none; }

.lead{ margin-top:clamp(32px,4vw,56px); }
.lead label{ font-size:var(--fs-2); font-weight:700; display:block; margin-bottom:12px; }
.lead__row{ display:flex; gap:8px; max-width:520px; }
.lead input{
  flex:1; border:0; border-radius:2px; padding:16px;
  font-family:inherit; font-size:var(--fs-3); font-weight:500; background:var(--white); color:var(--black);
}
.lead__msg{ font-size:var(--fs-2); font-weight:700; margin-top:12px; min-height:1.2em; }

@media (max-width:900px){
  .precos-col{ grid-column:1/-1; grid-row:auto; }
  .precos{ grid-template-columns:1fr; grid-template-rows:none; gap:8px; }
  .preco{ grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column; }
  .lead__row{ flex-direction:column; }
}

/* =========================================================
   10 FAQ
   ========================================================= */
.faq{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:start; }
.faq__list{ grid-column:1 / 8; }
.faq__foto{ grid-column:9 / 13; }
.faq__foto{ margin:0; position:sticky; top:calc(var(--hdr-h) + 40px); }
.faq__foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } .faq__list,.faq__foto{ grid-column:1 / -1; } .faq__foto{ position:static; } }

/* =========================================================
   11 CTA final + rodapé
   ========================================================= */
.fim{ background:var(--black); color:var(--off-white); padding:clamp(80px,10vw,160px) var(--marg) clamp(40px,5vw,64px); }
.fim__title{ font-size:var(--d-fim); line-height:0.88; letter-spacing:-0.02em; }
.fim__title span{ display:block; }
.fim__meta{ margin:clamp(32px,4vw,56px) 0 24px; font-size:clamp(var(--fs-3),1.4vw,var(--fs-4)); }

.fim .rule{ background:var(--off-white); margin:clamp(40px,5vw,64px) 0; }

.rodape{ margin-top:clamp(80px,10vw,160px); }

.rodape__contato{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
}
.rodape__convite{ font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); line-height:1.25; margin-bottom:16px; }
.rodape__email{
  font-size:var(--d-secao); font-weight:700; letter-spacing:-0.02em;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px;
}
.rodape__redes{ text-align:right; }
.rodape__redes a{
  display:inline-block; padding:4px 0;
  font-size:clamp(var(--fs-3),1.7vw,var(--fs-5)); text-decoration:underline; text-underline-offset:5px;
}
@media (max-width:900px){
  .rodape__contato{ flex-direction:column; align-items:flex-start; }
  .rodape__redes{ text-align:left; }
}
/* todo link e botão do rodapé com alvo de toque de 44px */
.rodape a,.rodape__botao{
  min-height:44px;
  display:inline-flex; align-items:center;
}

.rodape__topo{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter); align-items:start;
}
.rodape__logo{ grid-column:1 / 7; }
.rodape__sobre{ grid-column:7 / 12; }
.rodape__logo{ height:26px; width:auto; }
.rodape__sobre{ font-size:var(--fs-3); line-height:1.6; }

.rodape__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter);
}
.rodape__cols .eyebrow{ margin-bottom:16px; }
.rodape__cols li a{
  display:inline-block; padding:8px 0;
  font-size:var(--fs-2); text-decoration:none;
}
.rodape__cols li a:hover{ text-decoration:underline; }

.rodape__legal{
  font-size:var(--fs-1); line-height:1.7; letter-spacing:0.01em;
  color:var(--off-white);
}
.rodape__legal p + p{ margin-top:2px; }

.rodape__base{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px;
  margin-top:clamp(48px,6vw,88px);
  padding-top:24px; border-top:1px solid var(--off-white);
  font-size:var(--fs-1);
}
.rodape__topo-link{ text-decoration:none; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:8px 0; }
.rodape__topo-link:hover{ text-decoration:underline; }
.rodape__nothing{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-1); letter-spacing:0.04em; text-transform:uppercase;
}
.rodape__nothing img{ height:13px; width:auto; }
.rodape__nothing a{ display:inline-flex; align-items:center; padding:8px 0; }

@media (max-width:900px){
  .rodape__topo{ grid-template-columns:1fr; gap:24px; }
  .rodape__logo,.rodape__sobre{ grid-column:1 / -1; }
  .rodape__cols{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .rodape__base{ flex-direction:column; align-items:flex-start; gap:24px; }
}

/* =========================================================
   aviso de cookies
   ========================================================= */
.cookies{
  position:fixed; z-index:70;
  left:var(--marg); right:var(--marg); bottom:var(--marg);
  max-width:760px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  justify-content:space-between;
  background:var(--black); color:var(--off-white);
  padding:16px 24px; border-radius:2px;
}
.cookies[hidden]{ display:none; }
.cookies__txt{ font-size:var(--fs-1); line-height:1.5; max-width:52ch; }
.cookies__txt a{ color:inherit; }
.cookies__acoes{ display:flex; gap:8px; }
.btn--linha{ background:transparent; color:var(--off-white); border:1px solid var(--off-white); }
.btn--linha:hover{ background:var(--off-white); color:var(--black); text-decoration:none; }
@media (max-width:900px){
  .cookies{ bottom:calc(56px + 12px); flex-direction:column; align-items:flex-start; }
  .cookies__acoes{ width:100%; }
  .cookies__acoes .btn{ flex:1; text-align:center; }
}

/* =========================================================
   páginas de texto (termos e privacidade)
   ========================================================= */
.doc{
  padding:calc(var(--hdr-h) + clamp(48px,7vw,110px)) var(--marg) clamp(72px,9vw,140px);
  max-width:820px;
}
.doc__title{
  font-size:var(--d-secao); font-weight:900;
  letter-spacing:-0.02em; line-height:1.05;
}
.doc__meta{ font-size:var(--fs-1); color:var(--cinza); margin-top:16px; }
.doc h2{
  font-size:clamp(var(--fs-3),1.4vw,var(--fs-4)); font-weight:700; letter-spacing:-0.01em;
  margin:clamp(40px,5vw,64px) 0 14px;
  padding-top:16px; border-top:1px solid var(--black);
}
.doc p{ max-width:65ch; }
.doc p + p{ margin-top:1em; }
.doc ul{ list-style:none; margin:16px 0 0; max-width:65ch; }
.doc li{ padding:8px 0 8px 16px; position:relative; }
.doc li::before{ content:"—"; position:absolute; left:0; }
.doc a{ color:inherit; }
.doc__link{ margin-top:clamp(48px,6vw,88px); font-weight:700; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
.doc__btn,.rodape__botao{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-weight:700; color:inherit; text-decoration:underline;
}
.rodape__botao{ font-weight:500; font-size:var(--fs-2); text-decoration:none; padding:8px 0; }
.rodape__botao:hover{ text-decoration:underline; }

/* =========================================================
   barra fixa mobile
   ========================================================= */
.barra{
  position:fixed; inset:auto 0 0 0; z-index:60;
  height:56px; display:none; align-items:center; justify-content:space-between;
  gap:16px; padding:0 var(--marg);
  background:var(--black); color:var(--off-white);
  transform:translateY(100%);
  transition:transform 240ms ease;
}
.barra span{ font-size:var(--fs-1); font-weight:700; letter-spacing:0.04em; }
.barra.is-on{ transform:translateY(0); }
@media (max-width:900px){ .barra{ display:flex; } body{ padding-bottom:56px; } }

/* =========================================================
   motion — fade de entrada de imagens (400ms), só isso
   ========================================================= */
.fade{ opacity:0; transition:opacity 400ms ease; }
.fade.is-in{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fotos__trilho{ animation:none; }
  .fotos__movimento{ display:none; }
  .fade{ opacity:1; transition:none; }
  .barra{ transition:none; }
}

/* =========================================================
   CELULAR ESTREITO — titulo sai de cima da imagem
   Precisa ficar no fim do arquivo: a regra base de .hero__title
   (position:absolute) tem a mesma especificidade, entao quem vem
   depois vence. Em 390px a imagem da hero tem 183px de altura e o
   titulo sobreposto cobria 55% dela, por cima das pecas, ilegivel.
   ========================================================= */
@media (max-width:560px){
  .hero__palco::after{ display:none; }
  .hero__title{
    position:static;
    padding:clamp(14px,3vw,20px) var(--marg) 0;
  }
}

/* =========================================================
   TELA BAIXA — a imagem da hero nao pode empurrar o titulo
   para fora da dobra. A prancha tem proporcao 1,85:1; num
   laptop de 1366x650 uteis ela mediria 738px de altura e o
   titulo (que fica sobreposto na base) cairia 46px abaixo da
   dobra. O teto de altura encolhe a imagem e ela ganha margem
   lateral nessas telas — nada e cortado, que e a condicao da
   Luiza. Em telas altas o calc nao limita nada e o ponta a
   ponta continua.
   ========================================================= */
@media (min-width:561px){
  .hero__video img{
    max-height:calc(100svh - var(--hdr-h) - 40px);
    margin-inline:auto;
  }
}

/* =========================================================
   HERO DE TELA CHEIA NO DESKTOP (decisao do Marcello, 11/11/2026)
   A imagem passa a preencher 100svh menos o cabecalho. Para isso
   ela precisa ser cortada (`cover`): dependendo da tela sai 8% a
   19% do topo e da base, ou uma faixa das laterais. Isso SUBSTITUI
   a decisao da Luiza de 31/10 de nunca cortar — ele foi avisado do
   custo com os numeros e optou assim.
   Fica so acima de 900px: no celular o corte seria de 71% da
   largura e a prancha sumiria, entao ali segue inteira.
   ========================================================= */
@media (min-width:901px){
  .hero__video{ margin:0; }
  .hero__video img{
    width:100%;
    height:calc(100svh - var(--hdr-h));
    max-height:none;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
    margin-inline:0;
  }
}