/* ESTRUTEC Estruturas: estilos das páginas (Design System 2.0, tokens em ESTRUTEC-Design-System.md) */
/* Espaços na escala do DS (4, 8, 12, 16, 24, 32, 48, 64, 96, 128). Bordas: 1px linha, 2px o que se toca, 6px marca. */

@font-face{font-family:Barlow;src:url(../fonts/barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(../fonts/barlow-condensed-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(../fonts/barlow-condensed-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --blue:#2861D0;--blue-hover:#1F50B0;--navy:#102B59;--steel:#4B5C72;
  --mist:#E8F0FF;--paper:#F5F7FA;--white:#FFFFFF;--line:#C4CEDD;--error:#A4262C;
  --max:1200px;--gutter:24px;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:Barlow,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--navy);font:500 18px/1.5 var(--body)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--white)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografia */
.h1,.h2,.h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.005em;text-wrap:balance}
.h1{font-size:clamp(48px,7.4vw,88px)}
.h2{font-size:clamp(36px,4.8vw,56px)}
.h3{font-size:30px;font-weight:700;line-height:1}
.lead{font-size:clamp(20px,1.9vw,22px);line-height:1.45;max-width:34em}
.muted{color:var(--steel)}
.on-dark .muted{color:var(--mist)}
.small{font-size:16px}

/* estrutura */
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.section{padding-block:96px}
.section-tight{padding-block:64px}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--navy);color:var(--white)}
.bg-blue{background:var(--blue);color:var(--white)}
.intro{max-width:760px}
.intro .lead,.intro p{margin-top:16px}
.split{display:grid;gap:48px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 24px;border:2px solid var(--blue);border-radius:4px;background:var(--blue);color:var(--white);font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--mist);border-color:var(--navy)}
.btn-white{background:var(--white);border-color:var(--white);color:var(--blue)}
.btn-white:hover{background:var(--mist);border-color:var(--mist)}
.btn svg{width:22px;height:22px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.text-link{font-weight:700;color:var(--blue);text-underline-offset:4px}
.on-dark .text-link{color:var(--white)}

/* moldura aberta da marca: canto superior esquerdo e inferior direito, como na assinatura */
/* o afastamento de 14px (8 de ar + 6 de traço) é a exceção à escala: encosta a moldura no respiro lateral */
.frame{position:relative}
.frame::before,.frame::after{content:'';position:absolute;pointer-events:none;border:0 solid var(--blue)}
.frame::before{top:-14px;left:-14px;width:62%;height:24%;border-top-width:6px;border-left-width:6px}
.frame::after{bottom:-14px;right:-14px;width:62%;height:16%;border-bottom-width:6px;border-right-width:6px}
.on-dark .frame::before,.on-dark .frame::after,.bg-blue .frame::before,.bg-blue .frame::after{border-color:var(--white)}

/* cabeçalho (o SVG da logo já traz 8px de margem interna, por isso o respiro pequeno e o recuo) */
.site-header{border-bottom:1px solid var(--line);background:var(--white)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:4px}
.brand-link{display:block;flex:none}
.brand{width:140px;height:140px;margin-left:-8px}
.nav{display:flex;align-items:center;gap:24px}
.nav-links{display:none;list-style:none;gap:24px}
.nav-links a{font-weight:600;text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{text-decoration:underline;text-underline-offset:6px}

/* primeira dobra */
.hero{padding-block:48px 64px}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero .lead{margin-top:24px}
.facts{list-style:none;display:grid;gap:8px;margin-top:32px;font-weight:600}
.facts li{display:flex;gap:12px;align-items:baseline}
.facts li::before{content:'';flex:none;width:10px;height:10px;background:var(--blue);transform:translateY(-1px)}
.hero-media{margin-inline:14px;max-width:440px}
.media-box{position:relative;background:var(--navy);aspect-ratio:4/5}
.media-box video,.media-box img{width:100%;height:100%;object-fit:cover}
.media-caption{margin-top:28px;font-size:16px;color:var(--steel)}
.on-dark .media-caption{color:var(--mist)}
.pause-btn{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:0;border-radius:4px;background:var(--navy);color:var(--white);font-size:16px;font-weight:600;cursor:pointer}
.pause-btn:focus-visible{outline-color:var(--white);outline-offset:-5px}

/* vídeo com fala (clique para assistir) */
.talk{position:relative;background:var(--navy);aspect-ratio:9/16}
.talk video{width:100%;height:100%;object-fit:cover}
.talk-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:24px;border:0;background:transparent;color:var(--white);cursor:pointer}
.talk-play span{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:4px;background:var(--blue);font-weight:700;font-size:18px}
.talk-play:hover span{background:var(--blue-hover)}
.talk-play svg{width:20px;height:20px}
.talk-play:focus-visible{outline:3px solid var(--white);outline-offset:-8px}
.talk.is-playing .talk-play{display:none}
.split-video .talk{width:min(100% - 28px,360px);margin-inline:14px}
.split-video figure,.panel figure{max-width:100%}
.split-video .media-caption,.panel .media-caption{margin-left:14px}

/* estoque real (grade de fotos) */
.stock-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-top:48px}
.stock-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--mist)}
.stock-grid .h3{margin-top:12px;font-size:24px}

/* motivos */
.reasons{display:grid;margin-top:32px}
.reason{padding-block:24px;border-top:1px solid var(--line)}
.reason:last-child{padding-bottom:0}
.reason dt{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase}
.reason dd{margin-top:8px;color:var(--steel);max-width:34em}
.on-dark .reason{border-color:rgba(255,255,255,.28)}
.on-dark .reason dd{color:var(--mist)}

/* produtos */
.product-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;margin-top:48px}
.product img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mist)}
.product .h3{margin-top:12px;font-size:24px}
.product p{margin-top:8px;color:var(--steel);font-size:16px}
.product .text-link{display:inline-block;margin-top:12px;min-height:44px;padding-block:12px;font-size:16px}

/* passo a passo */
.steps{list-style:none;counter-reset:passo;display:grid;gap:0;margin-top:32px}
.steps li{counter-increment:passo;display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding-block:24px;border-top:1px solid var(--line)}
.steps li::before{content:counter(passo);grid-row:span 2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--navy);color:var(--white);font:800 28px/1 var(--display)}
.steps strong{font-size:20px}
.steps span{color:var(--steel)}

/* lista de material */
.order{background:var(--white);border-top:6px solid var(--blue);padding:24px 16px;scroll-margin-top:24px}
.order-title{font-family:var(--display);font-weight:800;font-size:36px;line-height:1;text-transform:uppercase}
.order-help{margin-top:8px;color:var(--steel);font-size:16px}
.presets{margin-top:24px}
.presets p{font-weight:600}
.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.preset{min-height:52px;min-width:80px;padding:8px 16px;border:2px solid var(--navy);border-radius:4px;background:var(--white);color:var(--navy);font-weight:700;cursor:pointer}
.preset:hover{background:var(--mist)}
.preset[aria-pressed=true]{background:var(--navy);color:var(--white)}
.items{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) 104px;gap:12px;align-items:center;padding-block:12px;border-bottom:1px solid var(--line)}
.item img{width:64px;height:80px;object-fit:cover;background:var(--mist)}
.item label{font-weight:700;line-height:1.25}
.item label span{display:block;font-weight:500;font-size:16px;color:var(--steel)}
.qty{width:104px;min-height:52px;padding:8px 12px;border:2px solid var(--steel);border-radius:4px;background:var(--white);font-weight:700;font-size:20px;text-align:right}
.qty::placeholder{color:var(--steel);font-weight:500}
.total{display:flex;justify-content:space-between;gap:16px;padding-block:16px;font-weight:700}
.field{display:grid;gap:8px;margin-top:16px}
.field label{font-weight:600}
.field label span{font-weight:500;color:var(--steel)}
.input{width:100%;min-height:52px;padding:8px 12px;border:2px solid var(--steel);border-radius:4px;background:var(--white)}
textarea.input{min-height:96px;resize:vertical}
.input[aria-invalid=true],.qty[aria-invalid=true]{border-color:var(--error)}
.error-msg{color:var(--error);font-weight:600;font-size:16px}
.error-msg:empty{display:none}
.order .btn{width:100%;margin-top:24px}
.form-status{margin-top:12px;font-weight:600}
.form-status:empty{display:none}
.order-alt{margin-top:16px;font-size:16px;color:var(--steel)}

/* abas de público */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.tab{flex:none;min-height:52px;padding:8px 16px;border:2px solid rgba(255,255,255,.55);border-radius:4px;background:transparent;color:var(--white);font-weight:700;cursor:pointer;text-align:left}
.tab:hover{border-color:var(--white)}
.tab[aria-selected=true]{background:var(--white);border-color:var(--white);color:var(--blue)}
.panel{display:grid;gap:32px;margin-top:32px}
.panel[hidden]{display:none}
.panel-copy .h3{font-size:clamp(32px,3.6vw,44px);font-weight:800}
.panel-copy p{margin-top:16px;color:var(--mist);max-width:30em}
.panel .talk{width:min(100% - 28px,360px);margin-inline:14px}

/* galpão por dentro */
.shed{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:32px;padding-bottom:12px}
.shed li{scroll-snap-align:start}
.shed img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--mist)}
.shed p{margin-top:8px;font-size:16px;color:var(--steel)}

/* regiões */
.regions{list-style:none;display:grid;margin-top:32px;border-top:1px solid var(--line)}
.split > .regions{margin-top:0}
.regions li{padding-block:12px;border-bottom:1px solid var(--line)}
.regions strong{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.05;text-transform:uppercase}
.regions span{color:var(--steel);font-size:16px}

/* dúvidas */
.faq{margin-top:32px;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding-block:12px;font-weight:700;font-size:20px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font:800 32px/1 var(--display);color:var(--blue)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding-bottom:24px;color:var(--steel);max-width:40em}

/* endereço */
.place{display:grid;gap:32px;align-items:center}
.place img{width:100%;max-width:440px;aspect-ratio:3/4;object-fit:cover}
.place address{font-style:normal;font-size:20px;margin-top:24px}
.contact{margin-top:12px}
.contact a{display:inline-block;padding-block:12px}

/* chamada final */
.final .wrap{display:grid;gap:32px;align-items:center}
.final .h2{max-width:14em}

/* rodapé (no celular, o espaço de baixo dá lugar ao botão fixo) */
.site-footer{background:var(--navy);color:var(--white);padding-block:64px 96px}
.footer-grid{display:grid;gap:32px}
.site-footer .brand{width:140px;height:140px}
.site-footer p,.site-footer address{margin-top:8px;color:var(--mist);font-style:normal}
.site-footer strong{display:block;font-size:18px}
.site-footer a{color:var(--white)}
.site-footer p a{display:inline-block;padding-block:12px}
.site-footer strong + p,.site-footer p + p{margin-top:0}
.site-footer .footer-note{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.25);font-size:16px;color:var(--mist)}

/* WhatsApp fixo: some enquanto os botões da primeira dobra estão na tela e enquanto a pessoa preenche a lista */
.wa-fixed{position:fixed;z-index:40;left:var(--gutter);right:var(--gutter);bottom:16px;border-color:var(--white);background:var(--navy)}
.wa-fixed:hover{background:var(--blue-hover);border-color:var(--white)}
.wa-fixed:focus-visible{outline-color:var(--blue)}
.wa-fixed.is-away,body:has(.order:focus-within) .wa-fixed{display:none}

/* telas médias */
@media (min-width:640px){
  .stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-grid{gap:48px 24px}
  .product .h3{font-size:30px}
  .product p,.product .text-link{font-size:18px}
  .order{padding:32px}
  .shed{grid-auto-columns:40%}
  .regions{grid-template-columns:1fr 1fr;column-gap:32px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wa-fixed{left:auto;right:24px;bottom:24px}
}

/* desktop */
@media (min-width:960px){
  .section{padding-block:128px}
  .nav-links{display:flex}
  .hero{padding-block:64px 96px}
  .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px}
  .hero-media{margin:0 14px 0 0;max-width:none}
  .hero-media .media-box{aspect-ratio:9/16;max-height:min(760px,82vh);margin-left:auto}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start}
  .split-video{grid-template-columns:auto minmax(0,1fr);gap:96px;align-items:center}
  .split-video .talk{width:360px;margin-inline:14px 0}
  .place img{max-width:none}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sticky{position:sticky;top:32px}
  .panel{grid-template-columns:minmax(0,1fr) 388px;align-items:center;gap:64px}
  .panel .talk{margin-inline:0 14px}
  .panel .media-caption{margin-left:0}
  .shed{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  .place{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px}
  .final .wrap{grid-template-columns:minmax(0,1fr) auto}
  .site-footer{padding-bottom:64px}
}

/* celular: menos vazio entre as seções, botão mais perto do topo e passos sem linha antes do formulário */
@media (max-width:639px){
  .section{padding-block:64px}
  .section-tight{padding-block:48px}
  .split{gap:32px}
  .hero{padding-block:32px 64px}
  .hero .lead{margin-top:16px}
  .actions{margin-top:24px}
  .facts{margin-top:24px}
  .steps{gap:24px;margin-top:24px}
  .steps li{padding-block:0;border-top:0}
  .tabs{margin-top:24px}
  .tab{flex:1 1 auto}
  .actions .btn,.final .btn{width:100%}
  .btn{padding-inline:16px}
}

@media (max-width:380px){
  .h1{font-size:44px}
  .btn{padding-inline:12px;gap:8px}
  .item{grid-template-columns:52px minmax(0,1fr) 92px;gap:8px}
  .item img{width:52px;height:65px}
  .qty{width:92px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active{transform:none}
}

/* ajustes */
.gap-top{margin-top:16px}
address.lead{font-style:normal}
.nav-cta{display:none}
.regions-one{grid-template-columns:1fr}
.split .h3 + .regions{margin-top:16px}
@media (min-width:640px){.nav-cta{display:inline-flex}}
picture{display:block}
.order-note{margin-top:24px;font-size:16px;color:var(--steel)}
.order-note + .btn{margin-top:12px}
.map{margin:48px 14px 14px;aspect-ratio:4/3;background:var(--mist)}
.map iframe{display:block;width:100%;height:100%;border:0}