/* ============================================================
   EUROPAY — Apresentações Comerciais em formato web
   core.css — tokens, shell, componentes e efeitos compartilhados
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:            #f4f4f4;
  --bg-soft:       #fafafa;
  --bg-white:      #ffffff;

  --ink:           #0e1116;
  --ink-2:         #23292f;
  --body:          #454d55;
  --muted:         #6b757e;
  --line:          #e3e6e4;
  --line-soft:     #eceeec;

  --g-dark:        #12692f;   /* verde institucional (títulos) */
  --g:             #0d7a33;
  --g-vivid:       #00a62e;   /* verde vivo (números / destaques) */
  --g-neon:        #3fbe3f;   /* verde neon sobre fundo escuro */
  --g-neon-2:      #6ade63;
  --g-deep:        #062a18;   /* painel verde profundo */
  --g-deep-2:      #0a3a20;
  --g-ink:         #04140c;

  --dark:          #0b1216;   /* barra/painel quase preto */
  --dark-2:        #10181c;
  --dark-3:        #060a0c;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 38px;
  --r-2xl: 56px;

  /* escala tipográfica — 4 degraus, usados em todo o site */
  --fs-hero:    clamp(30px, 3.40vw, 68px);   /* capa */
  --fs-display: clamp(38px, 5.20vw, 88px);   /* títulos em caixa alta */
  /* manchete: o PDF usa 4,48vw, mas o Archivo e ~9% mais largo por caractere;
     4,10vw reproduz a MESMA largura de linha da manchete do PDF (35,7% da tela) */
  --fs-xl:      clamp(31px, 4.10vw, 84px);   /* título-manchete de seção */
  --fs-h1:      clamp(30px, 3.90vw, 66px);   /* título de seção */
  --fs-h2:      clamp(27px, 3.05vw, 58px);   /* título em coluna média */
  --fs-h3:      clamp(24px, 2.60vw, 44px);   /* título em coluna estreita */
  /* corpo de texto — 3 degraus */
  --fs-lead-xl: clamp(15px, 1.42vw, 28px);   /* subtítulo da capa */

  --wrap: 1560px;
  --gut: clamp(20px, 4vw, 56px);

  --ff-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-text:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.7,.25,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--ff-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol{ margin:0; }
ul{ list-style:none; padding:0; }
strong,b{ font-weight:700; }
svg{ display:block; }
::selection{ background:var(--g-vivid); color:#fff; }

/* ============================================================
   Navegação / cromo do site
   ============================================================ */
.progress{
  position:fixed; inset:0 auto auto 0; z-index:90;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--g-dark),var(--g-vivid),var(--g-neon));
  box-shadow:0 0 14px rgba(0,166,46,.6);
  transition:width .12s linear;
}
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:24px;
  padding:12px var(--gut);
  background:rgba(244,244,244,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(0,0,0,.06);
  transform:translateY(-102%);
  transition:transform .45s var(--ease);
}
.topbar.is-visible{ transform:none; }
.topbar__logo{ height:26px; width:auto; }
.topbar__spacer{ flex:1; }
.topbar__links{ display:flex; align-items:center; gap:6px; }
.topbar__link{
  display:inline-flex; align-items:center; min-height:40px;
  font-family:var(--ff-display);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:8px 14px; border-radius:999px;
  border:1px solid transparent; transition:.25s var(--ease); white-space:nowrap;
}
/* em telas estreitas os dois links + logo estouram a barra */
@media (max-width:430px){
  .topbar{ gap:10px; padding-inline:14px; }
  .topbar__logo{ height:22px; }
  .topbar__link{ padding:8px 9px; font-size:10px; letter-spacing:.06em; }
}
.topbar__link:hover{ color:var(--g-dark); border-color:rgba(18,105,47,.28); }
.topbar__link.is-active{ color:#fff; background:var(--g-dark); border-color:var(--g-dark); }

/* índice lateral de slides */
.dotnav{
  position:fixed; right:14px; top:50%; transform:translateY(-50%);
  z-index:70; display:flex; flex-direction:column; gap:9px;
}
.dotnav__i{
  width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(0,0,0,.28); background:transparent;
  padding:0; cursor:pointer; transition:.3s var(--ease);
}
.dotnav__i:hover{ border-color:var(--g-dark); transform:scale(1.35); }
.dotnav__i.is-active{ background:var(--g-vivid); border-color:var(--g-vivid); box-shadow:0 0 0 4px rgba(0,166,46,.16); }
.dotnav--onDark .dotnav__i{ border-color:rgba(255,255,255,.4); }
@media (max-width:1100px){ .dotnav{ display:none; } }

/* ============================================================
   Shell das seções (slides)
   ============================================================ */
.slide{
  position:relative;
  width:100%;
  min-height:max(780px, 100vh);
  display:flex; align-items:center;
  padding:96px 0;
  overflow:hidden;
  isolation:isolate;
  background:var(--bg);
}
.slide--tight{ padding:72px 0; }
.wrap{
  position:relative; z-index:5;
  width:min(var(--wrap), 100% - (var(--gut) * 2));
  margin-inline:auto;
}
.wrap--wide{ width:min(1440px, 100% - (var(--gut) * 2)); }

/* camadas full-bleed (imagens ultrapassam o container) */
.bleed{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.bleed > *{ position:absolute; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.grid2--52{ grid-template-columns:1.05fr .95fr; }
.grid2--46{ grid-template-columns:.92fr 1.08fr; }
.grid2--40{ grid-template-columns:.78fr 1.22fr; }
.grid2--60{ grid-template-columns:1.3fr .7fr; }

/* ============================================================
   Tipografia
   ============================================================ */
.eyebrow{
  font-family:var(--ff-display);
  font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow--g{ color:var(--g-dark); }
.eyebrow--neon{ color:var(--g-neon); }
.eyebrow--w{ color:rgba(255,255,255,.85); }
.eyebrow-row{ display:flex; align-items:center; gap:16px; }
.eyebrow-row::before{
  content:""; width:56px; height:2px; background:var(--g-vivid); flex:none;
}
.eyebrow-row--dash::after{
  content:""; width:14px; height:2px; background:var(--g-dark); order:-1; display:none;
}

.h1{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:var(--fs-h1);
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--ink);
}
.h1--mega{ font-weight:800; font-size:var(--fs-display); line-height:1.0;  letter-spacing:-.025em; }
.h1--xl  { font-size:var(--fs-xl); line-height:1.12; letter-spacing:-.022em; }
.h1--md  { font-size:var(--fs-h2); line-height:1.16; }
.h1--sm  { font-size:var(--fs-h3); line-height:1.18; }
.h1--hero{ font-size:var(--fs-hero); line-height:1.36; letter-spacing:-.012em; }
.h1--tight{ line-height:1.0; }
.h1--upper{ text-transform:uppercase; letter-spacing:-.01em; }
.h1--light{ font-weight:600; }

.h2{
  font-family:var(--ff-display);
  font-weight:700; font-size:clamp(24px,2.2vw,34px);
  line-height:1.12; letter-spacing:-.012em; color:var(--ink);
}
.h3{
  font-family:var(--ff-display);
  font-weight:700; font-size:17px; letter-spacing:.02em; color:var(--ink);
}
.kicker{
  font-family:var(--ff-display);
  font-weight:700; font-size:clamp(15px,1.35vw,19px); letter-spacing:.01em; color:var(--ink);
}

.rule{
  width:78px; height:3px; background:var(--g-dark);
  border-radius:2px; margin:26px 0;
}
.rule--sm{ width:54px; height:2px; margin:18px 0; }
.rule--neon{ background:var(--g-neon); box-shadow:0 0 12px rgba(63,190,63,.55); }
.rule--w{ background:#fff; }

.lead{
  font-size:clamp(15px,1.30vw,23px);
  line-height:1.6; color:var(--ink-2); max-width:56ch;
}
.p{
  font-size:clamp(14px,1.08vw,21px);
  line-height:1.65; color:var(--body); max-width:54ch;
}
.lead--xl{ font-size:var(--fs-lead-xl); line-height:1.5; max-width:none; }
.p + .p{ margin-top:16px; }
.p--w, .lead--w{ color:rgba(255,255,255,.82); }
.small{ font-size:13.5px; line-height:1.55; color:var(--muted); }
.small--w{ color:rgba(255,255,255,.66); }
.tiny{ font-size:12.5px; line-height:1.5; color:var(--muted); }

.stack-xs > * + *{ margin-top:8px; }
.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:22px; }
.stack-lg > * + *{ margin-top:34px; }

/* ============================================================
   Logotipo
   ============================================================ */
.logo{ height:clamp(38px,3.4vw,52px); width:auto; }
.logo--sm{ height:clamp(30px,2.5vw,38px); }
.logo--lg{ height:clamp(56px,5.6vw,86px); }
.logo--xl{ height:clamp(64px,7vw,104px); }
.logo--drop{ filter:drop-shadow(0 6px 22px rgba(0,0,0,.35)); }

.emblem{ height:44px; width:auto; }

/* ============================================================
   Ícones
   ============================================================ */
.i{ width:1em; height:1em; stroke:currentColor; fill:none;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* moldura circular contornada (sobre fundo claro) */
.ficon{
  --s:46px;
  width:var(--s); height:var(--s); flex:none;
  display:grid; place-items:center; border-radius:50%;
  border:1.5px solid rgba(18,105,47,.42);
  color:var(--g-dark);
  font-size:calc(var(--s) * .46);
  background:transparent;
  transition:.35s var(--ease);
}
.ficon--lg{ --s:60px; }
.ficon--sm{ --s:38px; }
/* preenchida verde escuro */
.ficon--fill{
  border-color:transparent; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, #1a7d3a 0%, var(--g-dark) 45%, #0a4a20 100%);
  box-shadow:0 10px 26px -12px rgba(18,105,47,.7);
}
/* preenchida verde vivo */
.ficon--vivid{
  border-color:transparent; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, #4bd75c 0%, var(--g-vivid) 55%, #068c2b 100%);
  box-shadow:0 10px 26px -12px rgba(0,166,46,.75);
}
/* disco escuro com ícone neon (sobre claro ou escuro) */
.ficon--dark{
  border-color:rgba(63,190,63,.22); color:var(--g-neon);
  background:radial-gradient(120% 120% at 30% 15%, #16211b 0%, #0b1210 60%, #070c0a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 30px -16px rgba(0,0,0,.9);
}
/* contorno neon sobre fundo escuro */
.ficon--neon{
  border-color:rgba(107,222,99,.55); color:var(--g-neon-2);
  box-shadow:0 0 0 4px rgba(63,190,63,.06), 0 0 20px -4px rgba(63,190,63,.35);
}
/* pastilha suave (verde claro) */
.ficon--soft{
  border-color:transparent; color:var(--g-dark);
  background:rgba(18,105,47,.10);
}
/* tile quadrado escuro */
.ficon--tile{
  border-radius:16px;
  border-color:rgba(63,190,63,.2); color:var(--g-neon);
  background:radial-gradient(120% 120% at 25% 15%, #16211b 0%, #0a100d 60%, #050807 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 34px -18px rgba(0,0,0,.9);
}
.ficon--tile.ficon--lg{ --s:66px; border-radius:20px; }
/* pastilha branca flutuante */
.ficon--chip{
  border-color:rgba(0,0,0,.06); color:var(--g-dark);
  background:#fff;
  box-shadow:0 12px 30px -14px rgba(11,25,17,.35), 0 2px 6px rgba(0,0,0,.05);
}

/* ============================================================
   Painéis / molduras
   ============================================================ */
.panel{
  border-radius:var(--r-lg);
  padding:26px 30px;
  background:#fff;
  border:1px solid var(--line);
}
.panel--outline{
  background:transparent;
  border:1px solid rgba(18,105,47,.28);
}
.panel--outline-soft{ background:transparent; border:1px solid var(--line); }
.panel--dashed{ background:transparent; border:1px dashed rgba(0,0,0,.18); }

.panel--dark{
  background:linear-gradient(150deg,#101a15 0%, var(--dark) 48%, #070c0f 100%);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.panel--deep{
  background:linear-gradient(150deg,#0b3f24 0%, var(--g-deep) 55%, #03170d 100%);
  border:1px solid rgba(107,222,99,.14);
  color:#fff;
  box-shadow:0 40px 90px -50px rgba(3,23,13,.95);
}
.panel--glassdark{
  background:rgba(9,15,12,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(107,222,99,.22);
  color:#fff;
}
.panel--neon{
  border:1px solid rgba(107,222,99,.5);
  box-shadow:0 0 0 1px rgba(107,222,99,.12), 0 0 40px -12px rgba(63,190,63,.5),
             inset 0 0 40px -22px rgba(63,190,63,.9);
}
.panel--float{ box-shadow:0 30px 70px -40px rgba(11,25,17,.45); }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 26px; border-radius:12px;
  background:linear-gradient(180deg,#0f4d28,#093a1d);
  color:#fff; font-family:var(--ff-display);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(15px,1.5vw,22px);
  box-shadow:0 18px 40px -22px rgba(6,42,24,.9);
}
.badge-n{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--g-dark); color:#fff;
  font-family:var(--ff-display); font-weight:700; font-size:12.5px;
  box-shadow:0 0 0 5px rgba(18,105,47,.10);
}

/* separadores */
.hr{ height:1px; background:var(--line); border:0; }
.hr--w{ background:rgba(255,255,255,.12); }
.vr{ width:1px; align-self:stretch; background:var(--line); }
.vr--w{ background:rgba(255,255,255,.16); }
.vr--g{ background:rgba(18,105,47,.28); }

/* ============================================================
   Listas / linhas de feature
   ============================================================ */
.frow{ display:flex; align-items:center; gap:18px; }
.frow--top{ align-items:flex-start; }
.flist > li{ display:flex; align-items:center; gap:18px; padding:15px 0; }
.flist > li + li{ border-top:1px solid var(--line); }
.flist--w > li + li{ border-top:1px solid rgba(255,255,255,.1); }
.flist--tight > li{ padding:11px 0; }

.iconrow{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.iconrow > li{ display:flex; align-items:center; gap:11px; padding:0 22px; }
.iconrow > li:first-child{ padding-left:0; }
.iconrow > li + li{ border-left:1px solid var(--line); }
.iconrow--w > li + li{ border-left:1px solid rgba(255,255,255,.18); }
.iconrow__t{
  font-family:var(--ff-display); font-size:13px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
}

.cols{ display:grid; gap:0; }
.cols > *{ padding:0 clamp(16px,2vw,32px); }
.cols > * + *{ border-left:1px solid var(--line); }
.cols--w > * + *{ border-left:1px solid rgba(255,255,255,.14); }
.cols > *:first-child{ padding-left:0; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-5{ grid-template-columns:repeat(5,1fr); }

/* ============================================================
   Arte / máscaras (imagens full-bleed)
   ============================================================ */
.art{ position:absolute; overflow:visible; }
.art > .art__img,
.art > .art__edge{ position:absolute; inset:0; }
.art__img{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--pos, center);
}
.art__edge{ background:var(--edge, var(--g-vivid)); }
.art__shade{
  position:absolute; inset:0;
  background:var(--shade, linear-gradient(90deg, rgba(0,0,0,.55), transparent 55%));
}

/* — máscara: diagonal na aresta esquerda */
.m-diagL > .art__img, .m-diagL > .art__edge, .m-diagL > .art__shade{
  clip-path:polygon(var(--dx1,26%) 0, 100% 0, 100% 100%, var(--dx2,4%) 100%);
}
.m-diagL > .art__edge{ transform:translate(-2.5px,0); }

/* — máscara: diagonal invertida (aresta esquerda inclinada p/ dentro) */
.m-diagR > .art__img, .m-diagR > .art__edge, .m-diagR > .art__shade{
  clip-path:polygon(var(--dx1,4%) 0, 100% 0, 100% 100%, var(--dx2,28%) 100%);
}
.m-diagR > .art__edge{ transform:translate(-2.5px,0); }

/* — máscara: chevron / bico (ponta ao centro-esquerda) */
.m-chev > .art__img, .m-chev > .art__edge, .m-chev > .art__shade{
  clip-path:polygon(var(--cx1,30%) 0, 100% 0, 100% 100%, var(--cx3,22%) 100%, var(--cx2,2%) 50%);
}
.m-chev > .art__edge{ transform:translate(-2.5px,0); }

/* — máscara: canto arredondado grande (lado esquerdo) */
.m-round{ border-radius:var(--rr, 0 0 0 190px); overflow:hidden; }
.m-round > .art__img{ border-radius:inherit; }

/* — máscara: “blob” orgânico */
.m-blob > .art__img, .m-blob > .art__edge, .m-blob > .art__shade{
  border-radius:var(--bl, 46% 0 0 40% / 34% 0 0 30%);
}
.m-blob > .art__edge{ transform:translate(-2.5px,0); }

/* moldura com contorno deslocado (linha verde “offset”) */
.frame-offset{ position:absolute; border:1.5px solid rgba(18,105,47,.55); border-radius:inherit; pointer-events:none; }

/* ============================================================
   Efeitos “shader”
   ============================================================ */
.glow{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--gc, rgba(0,166,46,.55)) 0%, transparent 68%);
  filter:blur(var(--gb, 46px));
  opacity:var(--go, .8);
  mix-blend-mode:screen;
}
.glow--soft{ mix-blend-mode:normal; }

.dots{
  position:absolute; pointer-events:none;
  background-image:radial-gradient(var(--dc, rgba(13,17,22,.16)) 1.1px, transparent 1.1px);
  background-size:var(--ds, 15px) var(--ds, 15px);
  opacity:var(--do, 1);
  -webkit-mask-image:var(--dm, none);
          mask-image:var(--dm, none);
}
.dots--w{ --dc:rgba(255,255,255,.16); }

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* varredura de brilho (sheen) sobre painéis escuros
   — NÃO define `position`: é aplicada em elementos já posicionados. */
.sheen{ overflow:hidden; }
.sheen::after{
  content:""; position:absolute; inset:-40% -60%;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 48%, rgba(107,222,99,.14) 52%, transparent 62%);
  transform:translateX(-60%);
  animation:sheenmove 7s var(--ease) infinite;
  pointer-events:none;
}
@keyframes sheenmove{
  0%,68%   { transform:translateX(-70%); }
  100%     { transform:translateX(70%); }
}

/* linha tracejada conectora */
.dash-x{ height:1px; background:repeating-linear-gradient(90deg, var(--dcx, rgba(107,222,99,.75)) 0 6px, transparent 6px 13px); }
.dash-y{ width:1px; background:repeating-linear-gradient(180deg, var(--dcx, rgba(107,222,99,.75)) 0 6px, transparent 6px 13px); }

.arrow-x{
  width:0; height:0; flex:none;
  border-left:8px solid var(--g-neon);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}

/* faixa curva (rodapé dos slides claros da EC) */
.wave{
  position:absolute; left:0; right:0; bottom:0; height:clamp(120px,15vw,190px);
  z-index:1; pointer-events:none;
}
.wave svg{ width:100%; height:100%; }
.wave__foot{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:26px;
  padding:0 var(--gut) 30px;
}
.wave__foot .logo{ height:clamp(30px,2.8vw,42px); }
.foot-tag{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(11px,1vw,14px); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.foot-tag span{ color:var(--g-neon); }

/* ============================================================
   Cartões diversos
   ============================================================ */
.card{
  background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:22px;
  box-shadow:0 22px 50px -38px rgba(11,25,17,.5);
}
.card--flat{ box-shadow:none; }
.card--center{ text-align:center; }
.card__t{
  font-family:var(--ff-display); font-weight:700;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--g-dark);
}
.card__d{ font-size:13.5px; line-height:1.55; color:var(--body); margin-top:8px; }

.node{
  display:flex; align-items:flex-start; gap:14px;
}
.node__t{
  font-family:var(--ff-display); font-weight:700; font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--g-dark);
}
.node__d{ font-size:13px; line-height:1.5; color:var(--body); margin-top:5px; }

.stat__n{
  display:block;
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(22px,2.1vw,31px); line-height:1.02; color:var(--g-vivid);
  letter-spacing:-.02em;
}
.stat__n small{ font-size:.58em; font-weight:600; }
.stat__l{
  display:block;
  font-family:var(--ff-display); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-top:7px; line-height:1.25;
}

/* ============================================================
   Sobreposições posicionadas em % (diagramas)
   ============================================================ */
.figure{ position:relative; width:100%; }
.figure__img{ width:100%; height:auto; display:block; }
.figure__lbl{ position:absolute; transform:translate(-50%,-50%); text-align:center; }
.figure__lbl--l{ transform:translate(0,-50%); text-align:left; }
.figure__lbl--r{ transform:translate(-100%,-50%); text-align:right; }

/* ============================================================
   Animações de entrada
   ============================================================ */
[data-anim]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
[data-anim="left"] { transform:translateX(-34px); }
[data-anim="right"]{ transform:translateX(34px); }
[data-anim="zoom"] { transform:scale(.955); }
[data-anim="mask"] { clip-path:inset(0 100% 0 0); opacity:1; transform:none;
                     transition:clip-path 1.1s var(--ease); }
.is-in [data-anim]{ opacity:1; transform:none; }
.is-in [data-anim="mask"]{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-anim]{ opacity:1 !important; transform:none !important; transition:none !important; }
  /* apenas o efeito "mask" anima via clip-path; os recortes decorativos permanecem */
  [data-anim="mask"]{ clip-path:none !important; }
  .sheen::after{ animation:none; }
}

/* ============================================================
   Utilitários (declarados no fim para vencer os componentes)
   ============================================================ */
.c-g       { color:var(--g-dark); }
.c-gv      { color:var(--g-vivid); }
.c-neon    { color:var(--g-neon); }
.c-ink     { color:var(--ink); }
.c-white   { color:#fff; }
.c-mut     { color:var(--muted); }

/* mistura “screen”: o preto do render some sobre o painel escuro */
.blend-screen{ mix-blend-mode:screen; }
/* dissolve as bordas retas de um render dentro do painel */
.softmask{
  -webkit-mask-image:radial-gradient(112% 108% at 50% 50%, #000 42%, rgba(0,0,0,.55) 70%, transparent 97%);
          mask-image:radial-gradient(112% 108% at 50% 50%, #000 42%, rgba(0,0,0,.55) 70%, transparent 97%);
}
/* esfuma a borda esquerda de uma arte que entra na área clara */
.fade-l{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 14%);
}
/* sangra o bloco até a borda direita da viewport, mantendo o container em 1280 */
.bleed-r{ margin-right:calc(-1 * max(var(--gut), 50vw - (var(--wrap) / 2))); }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:1180px){
  /* nao redefinir .h1 aqui: como .h1 e .h1--xl/--md/--sm tem a mesma
     especificidade, uma regra generica dentro do media query venceria
     TODOS os degraus e achataria a escala. Os clamp() ja reduzem sozinhos. */
  .cols-5{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
  .cols-5 > *{ border-left:1px solid var(--line); }
  .cols-5 > *:nth-child(3n+1){ border-left:0; padding-left:0; }
}
@media (max-width:900px){
  /* .bleed é position:absolute; inset:0. No mobile as seções trazem a arte
     para o fluxo com position:relative — o que não funciona dentro de um pai
     absoluto: a foto ficava POR CIMA do texto. Anulando a caixa do .bleed,
     só o que a seção marcou como relative entra no fluxo; os decorativos
     (glow, dots, vinheta) seguem absolutos e agora se posicionam pelo .slide,
     que tem exatamente a mesma área. */
  .bleed{ display:contents; }

  /* .slide é flex-row no desktop: no mobile os painéis precisam empilhar,
     senão viram colunas lado a lado e estouram a largura. */
  .slide{
    min-height:0; padding:72px 0;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
  }
  .slide > :not(.bleed):not(.wrap):not(.wave):not(.wave__foot){
    width:min(var(--wrap), 100% - (var(--gut) * 2));
    margin-inline:auto;
    max-width:100%;
  }
  .grid2, .grid2--52, .grid2--46, .grid2--40, .grid2--60{
    grid-template-columns:1fr; gap:38px;
  }
  .cols-4, .cols-3, .cols-5{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .cols > *{ padding:0 16px; }
  .cols > *:nth-child(odd){ border-left:0; padding-left:0; }
  .iconrow > li{ padding:6px 14px; }
  .dotnav{ display:none; }
}
@media (max-width:620px){
  .cols-4, .cols-3, .cols-5, .cols-2{ grid-template-columns:1fr; }
  .cols > *{ border-left:0 !important; padding-left:0 !important; }
  .iconrow > li{ border-left:0 !important; padding-left:0; }
}

/* ============================================================
   CTA — contato por WhatsApp
   Componente único, usado pelas duas apresentações.
   ============================================================ */
.cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border-radius:999px;
  background:linear-gradient(180deg,#12a544,#0a7a30);
  color:#fff;
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(13.5px,1.02vw,16.5px);
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 18px 40px -20px rgba(10,122,48,.85);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.cta:hover,.cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 26px 50px -20px rgba(10,122,48,.95);
}
.cta .i{ font-size:1.3em; stroke-width:1.8; }
.cta--lg{ padding:18px 38px; font-size:clamp(15px,1.15vw,19px); }
/* variante para fundo escuro */
.cta--neon{
  background:transparent;
  border:1.5px solid rgba(107,222,99,.62);
  color:var(--g-neon-2);
  box-shadow:0 0 0 4px rgba(63,190,63,.06);
}
.cta--neon:hover,.cta--neon:focus-visible{
  background:rgba(107,222,99,.13);
  box-shadow:0 0 0 4px rgba(63,190,63,.10), 0 20px 44px -22px rgba(63,190,63,.5);
}

/* botão flutuante, presente em toda a rolagem */
.wa{
  position:fixed; z-index:95;
  right:clamp(16px,1.6vw,26px); bottom:clamp(16px,1.6vw,26px);
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 22px 14px 18px; border-radius:999px;
  background:#1faa4d; color:#fff;
  font-family:var(--ff-display); font-weight:700;
  font-size:14px; letter-spacing:.03em;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.wa:hover,.wa:focus-visible{ background:#17913f; transform:translateY(-2px); }
.wa .i{ font-size:22px; stroke-width:1.8; }
@media (max-width:820px){
  .wa{ padding:0; width:56px; height:56px; justify-content:center; gap:0; }
  .wa span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cta,.wa{ transition:none; }
  .cta:hover,.wa:hover{ transform:none; }
}
@media (max-width:620px){
  /* em telas estreitas o rotulo nao cabe numa linha: vira bloco */
  .cta{
    display:flex; width:100%;
    justify-content:center; text-align:center;
    white-space:normal; line-height:1.25;
    padding:15px 18px; font-size:13px; letter-spacing:.03em;
  }
  .cta--lg{ padding:16px 20px; font-size:13.5px; }
}

/* ============================================================
   Base mobile — aplicada somente abaixo de 900px
   ============================================================ */
@media (max-width:900px){
  :root{ --gut:clamp(18px,5vw,28px); }
  html{ scroll-padding-top:72px; }
  body{ overflow-x:clip; }
  .slide{
    padding:clamp(54px,8vw,72px) 0;
    min-height:0;
  }
  .wrap,
  .wrap--wide,
  .slide > :not(.bleed):not(.wrap):not(.wave):not(.wave__foot){
    width:min(720px,calc(100% - (var(--gut) * 2)));
  }
  [data-parallax]{ transform:none !important; }
  .logo{ width:auto; max-width:min(64vw,280px); }
  .h1,.h2,.h3,.lead,.p,.kicker{ overflow-wrap:break-word; }
  .lead,.p{ max-width:none; }
  .panel{ border-radius:20px; }
  .topbar{ padding-left:max(var(--gut),env(safe-area-inset-left)); padding-right:max(var(--gut),env(safe-area-inset-right)); }
  .topbar__link,.topbar__menu-link,.cta,.wa{ touch-action:manipulation; }
  .topbar__link{ min-height:44px; }
  .wa{
    right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
  }
}
@media (max-width:620px){
  :root{
    --fs-hero:clamp(34px,10.8vw,46px);
    --fs-display:clamp(42px,12.8vw,58px);
    --fs-xl:clamp(36px,10.7vw,46px);
    --fs-h1:clamp(34px,10vw,44px);
    --fs-h2:clamp(31px,9.2vw,40px);
    --fs-h3:clamp(29px,8.6vw,38px);
  }
  .slide{ padding:52px 0; }
  .logo{ max-width:min(60vw,240px); }
  .lead{ font-size:17px; line-height:1.5; }
  .p{ font-size:16px; line-height:1.55; }
  .eyebrow{ line-height:1.4; }
  .panel{ padding:20px 18px; border-radius:18px; }
  .frow,.frow--top{ min-width:0; }
  .topbar{ min-height:64px; gap:10px; padding-block:8px; }
  .topbar__logo{ height:28px; max-width:128px; }
  .topbar__links{ gap:2px; }
  .topbar__link{ padding:8px 9px; font-size:10px; letter-spacing:.05em; }
}