.wz{
  --bg:oklch(98% 0.004 250);
  --bg-alt:oklch(95.5% 0.007 250);
  --surface:oklch(100% 0 0);
  --ink:oklch(21% 0.02 255);
  --ink-muted:oklch(46% 0.02 255);
  --line:oklch(89% 0.008 255);
  --primary:oklch(46% 0.16 258);
  --primary-hover:oklch(36% 0.15 258);
  --primary-dark:oklch(20% 0.045 258);
  --accent-black:oklch(18% 0.01 255);
  --accent-green:oklch(50% 0.14 145);
  --accent-cyan:oklch(50% 0.14 200);
  --footer-bg:oklch(16% 0.03 258);
  --footer-line:oklch(28% 0.03 258);
  --footer-muted:oklch(60% 0.02 258);
  --footer-link:oklch(75% 0.015 258);
  --footer-mono:oklch(70% 0.02 258);
  --rights:oklch(50% 0.02 258);
  --lang-off:oklch(65% 0.015 255);
  --lang-sep:oklch(80% 0.006 255);
}

html{scroll-behavior:smooth}
.wz{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
.wz a{color:var(--primary);text-decoration:none}
.wz a:hover{color:var(--primary-hover)}
.wz input,.wz textarea,.wz button{font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif}
.wz img{max-width:100%}
.wz h1,.wz h2,.wz h3,.wz p{text-wrap:pretty}

/* Container central de 1280px. O .container do Bootstrap para em 1140px (xl) e o
   .container-xxl em 1320px; 1280 fica no meio, por isso este e custom. */
.wz-container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}

/* A nav usa gap com clamp() (fora da escala do Bootstrap), entao fica custom.
   O .cta-row usa a utilitaria .gap-3 direto no HTML. */
.wz .main-nav{gap:clamp(16px,3vw,32px)}

/* Overrides de cor dos botoes: usamos as classes do Bootstrap (.btn .btn-primary etc.)
   e so trocamos as cores para os tokens do design. Escopado em .wz. */
.wz .btn{border-radius:4px;font-weight:600}
.wz .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.wz .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.wz .btn-outline-secondary{border-color:var(--line);color:var(--ink)}
.wz .btn-outline-secondary:hover{background:transparent;border-color:var(--line);color:var(--primary)}
.wz .btn-light{background:#fff;border-color:#fff;color:var(--primary)}
.wz .btn-light:hover{background:#fff;color:var(--primary-hover)}

/* header */
.wz .site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.wz .logo-link img{height:34px;width:auto;display:block}
.wz .nav-link{font-size:15px;font-weight:500;color:var(--ink);padding:0}
.wz .nav-link:hover{color:var(--primary)}
.wz .lang-switch{font-family:'IBM Plex Mono',monospace;font-size:12px;border-left:1px solid var(--line);padding-left:20px;gap:6px}
.wz .lang-switch a{font-weight:600;color:var(--ink)}
.wz .lang-switch a.inactive{font-weight:400;color:var(--lang-off)}
.wz .lang-switch a.inactive:hover{color:var(--primary)}
.wz .lang-sep{color:var(--lang-sep)}
.wz .btn-cta{background:var(--primary);color:#fff;padding:11px 22px;font-size:14px;font-weight:600;border-radius:4px;white-space:nowrap}
.wz .btn-cta:hover{background:var(--primary-hover);color:#fff}

/* hero */
.wz .hero{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px)}
.wz .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;color:var(--accent-cyan);margin-bottom:16px}
.wz .hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.08;font-weight:700;margin:0 0 24px;letter-spacing:-.01em}
.wz .hero p.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-muted);max-width:46ch;margin:0 0 36px}
.wz .btn-primary.btn-lg,.wz .btn-outline-secondary.btn-lg,.wz .btn-light.btn-lg{padding:15px 30px;font-size:15px}
.wz .hero-visual{width:100%;aspect-ratio:4/3;border:1px solid var(--line);position:relative;overflow:hidden}
.wz .hero-visual img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.15) contrast(1.03)}
.wz .photo-overlay{position:absolute;inset:0;background:linear-gradient(160deg, oklch(46% 0.16 258 / .12), oklch(20% 0.045 258 / .18));mix-blend-mode:multiply;pointer-events:none}

/* sections */
.wz .section{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(48px,8vw,96px)}
.wz .section-alt{background:var(--bg-alt);padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(48px,8vw,96px)}
.wz .section-head{max-width:640px;margin:0 0 48px}
.wz .section-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;font-weight:700;margin:0}
.wz #segmentos{scroll-margin-top:90px}

/* cards — renomeado de .card para .wz-card para nao colidir com o componente
   .card do Bootstrap. O grid usa .row/.col/.g-* do Bootstrap direto no HTML. */
.wz .wz-card{border:1px solid var(--line);padding:32px 28px;min-height:260px;height:100%;display:flex;flex-direction:column}
.wz .wz-card.card-center{justify-content:center;background:var(--surface)}
.wz .wz-icon{width:40px;height:40px;margin-bottom:24px;display:block}
.wz .wz-icon.icon-blue{background:var(--primary)}
.wz .wz-icon.icon-black{background:var(--accent-black)}
.wz .wz-icon.icon-green{background:var(--accent-green)}
.wz .wz-card h3{font-size:20px;font-weight:600;margin:0 0 12px}
.wz .wz-card p{font-size:15px;line-height:1.6;color:var(--ink-muted);margin:0}

.wz .banner-photo{position:relative;height:clamp(260px,36vw,420px);overflow:hidden}
.wz .banner-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.15) contrast(1.03)}

.wz .statement{background:var(--primary-dark);padding:clamp(64px,10vw,120px) clamp(20px,5vw,48px)}
.wz .statement p{max-width:820px;margin:0 auto;color:oklch(96% 0.006 255);font-size:clamp(22px,2.6vw,32px);line-height:1.5;font-weight:500;letter-spacing:-.005em}

.wz .cta-banner{background:var(--primary);padding:clamp(56px,8vw,96px) clamp(20px,5vw,48px)}
.wz .cta-banner-inner{max-width:720px;margin:0 auto}
.wz .cta-banner p{color:#fff;font-size:clamp(20px,2.4vw,28px);line-height:1.5;font-weight:500;margin:0 0 32px}

/* contact page */
.wz .page-head{max-width:640px;margin:0 0 48px}
.wz .page-head h1{font-size:clamp(30px,3.6vw,44px);font-weight:700;margin:0 0 16px}
.wz .page-head p{font-size:16px;line-height:1.6;color:var(--ink-muted);margin:0}
.wz .contact-main{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(64px,8vw,96px)}
/* .form-label ja existe no Bootstrap 5; aqui so ajustamos tamanho/peso do design. */
.wz .form-label{font-size:13px;font-weight:600;margin-bottom:8px}
.wz .form-control{padding:13px 14px;border:1px solid var(--line);border-radius:4px;font-size:15px}
.wz textarea.form-control{resize:vertical}
.wz .form-note{font-size:13px;color:var(--ink-muted);margin:0}
.wz .info-panel{border:1px solid var(--line);background:var(--bg-alt);padding:28px}
.wz .info-title{font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:20px;color:var(--ink-muted)}
.wz .info-mono{font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:2.1}

/* honeypot anti-spam: invisivel para pessoas, visivel para bots que preenchem
   todos os campos. O servidor deve rejeitar envios com este campo preenchido. */
.wz .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* footer */
.wz .site-footer{background:var(--footer-bg);padding-top:56px;padding-bottom:32px}
.wz .footer-grid{border-bottom:1px solid var(--footer-line)}
.wz .footer-logo img{height:30px;width:auto;display:block;filter:brightness(0) invert(1)}
.wz .footer-tagline{color:var(--footer-muted);font-size:14px;line-height:1.6;max-width:30ch;margin:0}
.wz .footer-nav{display:flex;flex-direction:column;gap:10px;font-size:14px}
.wz .footer-nav a{color:var(--footer-link)}
.wz .footer-nav a:hover{color:#fff}
.wz .footer-contact{font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:2;color:var(--footer-mono)}
.wz .footer-rights{color:var(--rights);font-size:12.5px;margin:24px 0 0}