/* ===== Fonts (DIN Next LT Pro) ===== */
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-Light.woff2') format('woff2'),url('../fonts/DINNextLTPro-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-LightItalic.woff2') format('woff2'),url('../fonts/DINNextLTPro-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-Regular.woff2') format('woff2'),url('../fonts/DINNextLTPro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-Italic.woff2') format('woff2'),url('../fonts/DINNextLTPro-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-Bold.woff2') format('woff2'),url('../fonts/DINNextLTPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DINNextLTPro';src:url('../fonts/DINNextLTPro-BoldItalic.woff2') format('woff2'),url('../fonts/DINNextLTPro-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}

/* ===== Tokens ===== */
:root{
  --green:#2D9773; --dark-teal:#032025; --gold:#F4D783; --teal:#4EB9AD;
  --font:'DINNextLTPro', system-ui, sans-serif;
  --inset:14.5%;
  --track:0.008em; /* was 0.01em (PSD tracking 10); trimmed ~0.0018em/char so the browser DIN matches Photoshop's line width and the design's manual line breaks don't overflow to an extra line */
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:min(16px, calc(100vw / 112.5))}
body{font-family:var(--font);background:#000;color:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}

/* off-canvas (drawer) e elementos que sangram por design (thumbs da galeria,
   réguas decorativas) não devem criar rolagem horizontal */
html, body { overflow-x: clip; }
html { background: #000; } /* overflow:clip quebra a propagação do bg do body ao canvas — pinta explícito */

/* ===== Page wrapper ===== */
.page{max-width:112.5rem;margin-inline:auto;background:#000}

/* ===== Header ===== */
.login-bar{background:var(--dark-teal);min-height:5.625rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--inset)}
.login-bar__link{display:inline-flex;align-items:center;gap:1.5rem}
.login-bar__icon-box{width:3.125rem;height:3.125rem;background:var(--green);border-radius:0.9375rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.login-bar__icon{width:1.25rem;height:auto}
.login-bar__label{font-weight:400;font-size:1.1875rem;letter-spacing:normal}
.brand{background:#000;display:flex;align-items:center;padding:5.375rem var(--inset) 3.5rem}
.brand__logo{width:30rem;height:auto}
.nav{background:var(--green);min-height:5.875rem;display:flex;align-items:center;padding-inline:var(--inset)}
.nav__list{display:flex;flex-wrap:wrap;gap:4.5625rem;align-items:center}
.nav__link{font-weight:400;font-size:1.1875rem;letter-spacing:0.05em;line-height:1;white-space:nowrap}
.nav__link--active{color:#F5D883;font-weight:700}

/* Nav dropdown (Equipamentos / Serviços) */
.nav__item{position:relative}
.nav__dropdown-toggle{display:inline-flex;align-items:center;border:0;background:none;padding:0;cursor:pointer;color:var(--color-nav-link,#fff);font-family:inherit;font-weight:400;font-size:1.1875rem;letter-spacing:0.05em;line-height:1;white-space:nowrap}
/* PSD: itens do menu sem caret; o dropdown abre no clique mesmo assim */

.nav__dropdown-toggle:focus-visible{outline:0.125rem solid #fff;outline-offset:0.25rem}
/* CLOSED by default via display:none — bulletproof vs any stray visibility/opacity override; opens only on JS-set .is-open */
.nav__dropdown{position:absolute;top:calc(100% + 1rem);left:0;min-width:16rem;display:none;flex-direction:column;background:var(--green);border-radius:0.75rem;padding:0.5rem 0;box-shadow:0 0.75rem 1.75rem rgba(0,0,0,.35);z-index:50}
.nav__item.is-open .nav__dropdown{display:flex}
.nav__dropdown a{display:block;color:#fff;font-weight:400;font-size:1.125rem;letter-spacing:0.03em;line-height:1.2;padding:0.65rem 1.25rem;white-space:normal}
.nav__dropdown a:hover,.nav__dropdown a:focus-visible{background:rgba(255,255,255,.15);color:var(--gold);outline:none}

/* ===== Footer ===== */
.footer{background:var(--green);min-height:21.1875rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem 4.25rem;padding:3.5rem 12.6875rem 3.5rem var(--inset)}
.footer__address{font-style:normal;font-size:1.656rem;letter-spacing:var(--track);line-height:1.1}
.footer__address p{margin:0}
.footer__address strong{font-weight:700}
.footer__divider{border:0;width:31.75rem;max-width:100%;height:0.3125rem;background:#fff;margin:1.5rem 0}
.footer__brand{display:flex;align-items:center;gap:4.9375rem;flex-wrap:wrap}
.footer__social{display:flex;gap:1.375rem;align-items:center}
.footer__social img{width:2.9375rem;height:2.9375rem}
.footer__logo{width:23.25rem;height:auto}
/* Logo column — CAPI logo, then partners (small) and the dev credit, left-aligned to
   the logo with generous spacing (client request 25/09). Text in the footer's bold +
   regular idiom, one step down in scale so the CAPI logo stays the hero. */
.footer__logo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2.25rem}
.footer__partners{display:flex;align-items:center;gap:1.75rem}
.footer__partners-label{font-size:1.05rem;font-weight:700;letter-spacing:var(--track);color:#fff}
.footer__partners-list{display:flex;align-items:center;gap:1.75rem;margin:0;padding:0;list-style:none}
.footer__partners-list a{display:block;line-height:0}
.footer__partners-list a:hover img,.footer__partners-list a:focus-visible img{opacity:0.8}
.footer__partners-list img{height:2.75rem;width:auto;display:block}
/* Credits line — visual identity + web development side by side, centered under the
   footer row with breathing room; a hairline separates the two. */
.footer__credits{flex:0 0 100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 2.25rem;margin-top:2.5rem}
.footer__credits-sep{width:0.0625rem;height:1.5rem;background:rgba(255,255,255,0.5)}
.footer__credit{display:inline-flex;align-items:center;gap:0.625rem;white-space:nowrap;color:#fff;text-decoration:none;font-size:1.05rem;letter-spacing:var(--track)}
.footer__credit strong{font-weight:700}
.footer__credit:hover,.footer__credit:focus-visible{text-decoration:underline;text-decoration-color:rgba(255,255,255,0.6)}
.footer__credit img{height:1.75rem;width:auto;display:block}
.footer__credit-mark{height:2rem;margin-left:0.125rem}

/* ===== Section title (base component) ===== */
.reg{position:relative;padding:10.69rem var(--inset) 0}
.reg__title{margin:0;text-transform:uppercase;letter-spacing:0.013em;line-height:1.05}
.reg__line1{display:block;font-weight:300;font-style:italic;font-size:3.906rem;color:#fff}
.reg__line2{display:block;font-weight:400;font-style:italic;font-size:3.906rem;color:var(--teal);padding-left:2.75rem}
.reg__rule{position:absolute;height:0.3125rem;background:#d9f2ec}

/* ===== Responsive (chrome only) ===== */
@media (max-width:60rem){
  html{font-size:100%}
  :root{--inset:6%}
  /* mobile QA 02/09: 3.9rem section titles overflowed narrow screens
     (e.g. "SITES REFERÊNCIA" clipped at 375px) — scale them to the viewport */
  .reg__line1,.reg__line2{font-size:clamp(2rem,8.5vw,3.2rem)}
  .reg__line2{padding-left:1rem}
  .brand{justify-content:center;padding-block:2rem}
  .brand__logo{width:min(70vw,30rem)}
  .nav{padding-block:1rem}
  .nav__list{gap:1.25rem 1.5rem;justify-content:center}
  /* mobile QA 02/09: the desktop 1.656rem address type and 47px icons read huge
     on phones — compact the footer */
  .footer{gap:1.5rem;padding:2.5rem var(--inset)}
  .footer__address{width:100%;max-width:100%;font-size:1.05rem;line-height:1.35}
  .footer__divider{width:100%}
  .footer__social{gap:1rem}
  .footer__social img{width:2rem;height:2rem;object-fit:contain}
  .footer__logo{width:min(44vw,14rem)}
  .footer__logo-stack{width:100%;gap:1.75rem;margin-top:0.5rem}
  .footer__partners{flex-wrap:wrap;gap:1rem 1.5rem}
  .footer__partners-label,.footer__credit{font-size:1rem}
  .footer__partners-list{gap:1.5rem}
  .footer__partners-list img{height:2.5rem}
  /* Credit flows as running text on phones (flex would slice it into columns). */
  .footer__credits{margin-top:1.5rem;gap:0.875rem}
  .footer__credits-sep{display:none}
  .footer__credit{display:block;width:100%;white-space:normal;line-height:1.5;text-align:center}
  .footer__credit strong{white-space:nowrap}
  .footer__credit img{height:1.6rem;display:inline-block;vertical-align:middle;margin-left:0.5rem}
  .footer__credit-mark{height:1.75rem}
  .footer__credit img{height:1.4rem}
}