/* ==============================================================
   TOKENS : portados de connexa-site-2026/src/app/globals.css
   ============================================================== */
:root{
  --brand-400:#fb923c; --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c;
  --brand-50:#fff7ed;  --brand-100:#ffedd5;
  --n-50:#fafaf9; --n-100:#f5f5f4; --n-200:#e7e5e4; --n-300:#d6d3d1; --n-400:#a8a29e;
  --n-500:#78716c; --n-600:#57534e; --n-700:#44403c; --n-800:#292524; --n-900:#1c1917; --n-950:#0c0a09;

  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;

  --text-hero:clamp(2.1rem,4.8vw,3.5rem);
  --text-h2:clamp(1.75rem,3vw,2.5rem);
  --text-h3:clamp(1.25rem,2vw,1.5rem);
  --lg:1.125rem;

  --wrap:1140px;
  --gut:clamp(1.25rem,5vw,3rem);
  --sec:clamp(2.75rem,5vw,4rem);
}

/* reset mínimo */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--n-800);background:#fff;
     font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);color:var(--n-900);line-height:1.15;
         letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec--alt{background:var(--n-50)}
.sec--dark{background:var(--n-950);color:var(--n-300)}
.sec--dark h2{color:#fff}

/* divisor de seção : portado de SectionDivider.tsx da Connexa */
.rule{width:80px;height:3px;border-radius:99px;
      background:linear-gradient(90deg,var(--brand-400),var(--brand-600));margin-bottom:1.25rem}

.lead{font-size:var(--lg);color:var(--n-600);max-width:64ch;line-height:1.7}
.prose p{max-width:64ch;margin-bottom:1.25rem;font-size:var(--lg);line-height:1.75}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--n-900);font-weight:600}

/* prosa em duas colunas: evita a coluna única deixar metade da tela vazia no desktop */
@media (min-width:900px){
  .prose--2col{column-count:2;column-gap:3.5rem}
  .prose--2col p{max-width:none;break-inside:avoid;margin-bottom:1.15rem}
}

/* botões */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
     font-weight:600;font-size:1rem;padding:.9rem 1.6rem;border-radius:6px;
     text-decoration:none;border:1px solid transparent;transition:background .18s,border-color .18s}
.btn--pri{background:var(--brand-600);color:#fff}
.btn--pri:hover{background:var(--brand-700)}
.btn svg{width:16px;height:16px;flex:none}

/* ==============================================================
   1 · CAPA
   ============================================================== */
.hero{padding-block:clamp(3rem,7vw,5.5rem) var(--sec);border-bottom:1px solid var(--n-200)}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
            grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero__name{font-family:var(--font-body);font-size:.95rem;font-weight:500;
            color:var(--n-500);margin-bottom:1.25rem}
.hero h1{font-size:var(--text-hero);font-weight:800;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--brand-600)}
.hero__sub{font-size:var(--lg);color:var(--n-600);max-width:54ch;line-height:1.7;margin-bottom:2rem}
.hero__cta{margin-bottom:2.5rem}
.hero__roles{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.5rem;
             border-top:1px solid var(--n-200);font-size:.9rem;color:var(--n-500)}
.hero__roles b{color:var(--n-800);font-weight:600}
.hero__photo{border-radius:10px;overflow:hidden}
.hero__photo img{width:100%;height:auto;display:block}

/* ==============================================================
   3 · OPERAÇÕES
   ============================================================== */
.ops{display:grid;gap:1.5rem;margin-top:3rem;grid-template-columns:repeat(3,1fr)}
.op{border:1px solid var(--n-200);border-radius:8px;padding:1.75rem;background:#fff;
    display:flex;flex-direction:column}
.op__role{font-family:var(--font-display);font-size:.8rem;font-weight:700;
          color:var(--brand-700);margin-bottom:.4rem}
.op h3{font-size:var(--text-h3);font-weight:700;margin-bottom:.85rem}
.op p{color:var(--n-600);font-size:.975rem;line-height:1.7}
.op p + p{margin-top:.85rem}
/* link discreto no rodapé do card, alinhado na base independente da altura do texto */
.op__link{margin-top:auto;padding-top:1.25rem;display:inline-flex;align-items:center;gap:.4rem;
          font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--brand-700);
          text-decoration:none;transition:gap .18s,color .18s}
.op__link:hover{color:var(--brand-600);gap:.65rem}
.op__link svg{width:14px;height:14px;flex:none}
.ops__close{margin-top:2.5rem;font-size:var(--lg);color:var(--n-800);max-width:72ch;
            border-left:3px solid var(--brand-600);padding-left:1.25rem;line-height:1.7}

/* ==============================================================
   4 · CASES
   ============================================================== */
.cases{margin-top:3rem;display:flex;flex-direction:column}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:2rem;
      padding-block:2.25rem;border-top:1px solid var(--n-200);align-items:start}
.case:last-child{border-bottom:1px solid var(--n-200)}
.case h3{font-size:1.2rem;font-weight:700;margin-bottom:.75rem}
.case p{color:var(--n-600);font-size:1rem;line-height:1.7}
.case__num{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:800;
           color:var(--brand-600);line-height:1.05;letter-spacing:-.03em}
.case__lbl{font-size:.925rem;color:var(--n-600);margin-top:.5rem;line-height:1.6}

/* ==============================================================
   5 · CLIENTES (marquee) : portado de ClientsCarousel.tsx
   ============================================================== */
.marq{position:relative;overflow:hidden;margin-top:2.5rem;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
              mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__track{display:flex;gap:3.5rem;width:max-content;animation:slide 42s linear infinite}
.marq__item{flex:none;width:150px;height:52px;display:flex;align-items:center;justify-content:center}
.marq__item img{max-width:100%;max-height:100%;object-fit:contain;
                filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}
.marq__item img:hover{opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==============================================================
   6 · TESES
   ============================================================== */
.beliefs{margin-top:3rem;display:grid;gap:0}
.belief{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:2rem;
        padding-block:1.85rem;border-top:1px solid var(--n-200);align-items:baseline}
.belief:last-child{border-bottom:1px solid var(--n-200)}
.belief h3{font-size:1.15rem;font-weight:700}
.belief p{color:var(--n-600);line-height:1.7}

/* ==============================================================
   7 · CONNEXA
   ============================================================== */
.cx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
          gap:clamp(2rem,5vw,4rem);margin-top:2.5rem}
.cx__countries{margin-top:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.cx__chip{font-family:var(--font-display);font-size:.875rem;font-weight:600;color:var(--n-800);
          background:#fff;border:1px solid var(--n-200);border-radius:6px;padding:.45rem .9rem}
.cx__claim{font-family:var(--font-display);font-size:var(--text-h3);font-weight:700;
           color:var(--n-900);line-height:1.35;margin-top:1.75rem}
/* selos: dimensionamento portado de CertificationsStrip.tsx (h-12 / md:h-14, gap-x-14, centralizado) */
.seals{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--n-200);
       display:flex;flex-direction:column;align-items:center}
.seals__lbl{font-size:.9rem;color:var(--n-500);margin-bottom:2rem;text-align:center}
.seals__row{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;
            justify-items:center;gap:2.5rem 2rem;width:100%}
.seals__row img{height:48px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;
                transition:filter .3s,opacity .3s}
.seals__row img:hover{filter:grayscale(0);opacity:1}
@media (min-width:768px){
  .seals__row{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem 3.5rem;width:auto}
  .seals__row img{height:56px}
}
/* vírgula: faixa escura própria, logo em max-w-md (448px) / lg:max-w-lg (512px) */
.accel{background:var(--n-900);padding-block:1.5rem}
.accel__in{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.accel__lbl{color:var(--n-400);font-size:.9rem}
.accel img{width:100%;max-width:448px;height:auto;object-fit:contain}
@media (min-width:1024px){ .accel img{max-width:512px} }

/* ==============================================================
   8 · WORKSHOPS
   ============================================================== */
.stage__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
             gap:clamp(2rem,5vw,4rem);margin-top:2.5rem;align-items:start}
.stage video{width:100%;border-radius:10px;background:#000;aspect-ratio:9/16;object-fit:cover}
.stage__cap{font-size:.85rem;color:var(--n-500);margin-top:.75rem;text-align:center}
.how{margin-top:2rem;display:grid;gap:1.25rem}
.how__item{border-left:2px solid var(--n-200);padding-left:1.1rem}
.how__item b{font-family:var(--font-display);font-size:1rem;color:var(--n-900);display:block;
             margin-bottom:.2rem}
.how__item span{color:var(--n-600);font-size:.975rem;line-height:1.65}
.topics{margin-top:2.5rem;list-style:none;padding:0}
.topics li{padding:.85rem 0 .85rem 1.6rem;border-top:1px solid var(--n-200);
           color:var(--n-700);position:relative;line-height:1.6}
.topics li:last-child{border-bottom:1px solid var(--n-200)}
.topics li::before{content:"";position:absolute;left:0;top:1.42rem;width:7px;height:7px;
                   border-radius:99px;background:var(--brand-600)}
.topics__lbl{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
             color:var(--n-900);margin-top:2.5rem}
.topics__sub{color:var(--n-600);font-size:.975rem;line-height:1.65;margin-top:.5rem;max-width:60ch}
/* card da dinâmica: leva para a calculadora usada no workshop */
.demo{margin-top:2rem;border:1px solid var(--n-200);border-radius:8px;padding:1.5rem;background:#fff}
.demo h3{font-size:1.1rem;font-weight:700;margin-bottom:.85rem}
.demo p{color:var(--n-600);font-size:.975rem;line-height:1.7;margin-bottom:1rem}
.demo .btn{font-size:.95rem;padding:.75rem 1.3rem}

/* imagens ilustrativas do workshop, abaixo do vídeo */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem}
.shots figure{margin:0;border-radius:8px;overflow:hidden;background:var(--n-100);aspect-ratio:4/3}
.shots img{width:100%;height:100%;object-fit:cover;display:block}

/* ==============================================================
   9 · CTA
   ============================================================== */
.end{text-align:center}
.end h2{color:#fff;margin-bottom:1.25rem}
.end p{max-width:58ch;margin-inline:auto;font-size:var(--lg);line-height:1.7;margin-bottom:2.25rem}
.mid{border-top:1px solid var(--n-200);border-bottom:1px solid var(--n-200);
     background:var(--brand-50);padding-block:2.75rem}
.mid__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mid__txt{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--n-900)}
.foot{background:var(--n-950);color:var(--n-500);font-size:.875rem;padding-block:2rem;
      border-top:1px solid var(--n-800)}
.foot__in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* responsivo */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  /* foto some no celular: a capa fica só com a tese e o CTA, sem rolagem extra */
  .hero__photo{display:none}
  /* botões da capa e do card da dinâmica centralizados no celular */
  .hero__cta{display:flex;justify-content:center}
  .demo{text-align:center}
  .demo p{text-align:left}
  .ops{grid-template-columns:1fr}
  .case,.belief,.cx__grid,.stage__grid{grid-template-columns:1fr;gap:1.25rem}
  .case__num{font-size:2rem}
  .mid__in{flex-direction:column;text-align:center}
  .stage video{max-width:340px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .marq__track{animation:none}
}