/*==============================================
TR4 LAJES TRELIÇADAS — STYLE PRINCIPAL
==============================================*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/*==============================================
RESET
==============================================*/
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

.container{ width:90%; max-width:1280px; margin:auto; }

/*==============================================
TOKENS
==============================================*/
:root{
  --ink:#131417;
  --ink-soft:#1c1e22;
  --steel:#2a2d33;
  --concrete:#8a8d93;
  --paper:#f5f3ee;
  --paper-dark:#e9e5db;
  --white:#ffffff;
  --red:#c8102e;
  --red-dark:#9c0c23;
  --red-glow:rgba(200,16,46,.35);
  --shadow:0 20px 45px rgba(0,0,0,.14);
  --radius:16px;
  --transition:.35s ease;
  --font-display:'Barlow Condensed', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  color:var(--ink);
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}

.eyebrow.light{ color:#ff5c73; }

.center{ display:block; text-align:center; margin-left:auto; margin-right:auto; }

h2.center{ margin-bottom:60px; font-size:40px; }
h2.center.light{ color:var(--white); }

/*==============================================
LOADER
==============================================*/
#loader{
  position:fixed; inset:0; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  z-index:999999;
}
#loader img{ width:160px; margin-bottom:28px; }
.loading{ width:200px; height:4px; background:#2d2d2d; border-radius:50px; overflow:hidden; }
.loading::after{
  content:""; display:block; height:100%; width:0; background:var(--red);
  animation:loading 1.4s ease-in-out infinite;
}
@keyframes loading{
  0%{ width:0; margin-left:0; }
  50%{ width:60%; }
  100%{ width:0; margin-left:100%; }
}

/*==============================================
HEADER
==============================================*/
header{
  position:fixed; top:0; left:0; width:100%; z-index:9999;
  padding-top:22px;
  transition:var(--transition);
}
header nav{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; padding:0 30px;
  background:rgba(19,20,23,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:60px;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  transition:var(--transition);
}
header.scrolled{ padding-top:12px; }
header.scrolled nav{
  height:68px;
  background:rgba(19,20,23,.92);
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}



.logo img{ width:170px; transition:var(--transition);
padding-top: 60px;  }

header.scrolled .logo img{ width:145px; }

.menu{ display:flex; align-items:center; gap:32px; }
.menu li{ position:relative; }
.menu > li > a{
  display:flex; align-items:center; gap:6px;
  color:var(--white); font-size:14.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  position:relative; padding:6px 0;
}
.menu > li > a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--red); border-radius:30px; transition:var(--transition);
}
.menu > li > a:hover::after{ width:100%; }
.menu i{ font-size:11px; margin-top:1px; }

.btn-nav{
  display:flex; align-items:center; gap:8px;
  background:var(--red); color:var(--white);
  padding:12px 22px; border-radius:50px;
  font-size:14px; font-weight:600;
  box-shadow:0 10px 25px var(--red-glow);
  transition:var(--transition);
  white-space:nowrap;
}
.btn-nav:hover{ background:var(--red-dark); transform:translateY(-2px); }

.menu-mobile{ display:none; font-size:26px; color:var(--white); cursor:pointer; }
.menu-close{ display:none; }

/* Submenu */
.dropdown > a i{
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}

/* Comportamento de hover do submenu — SOMENTE em telas de desktop.
   Usamos min-width (e não "hover: hover") porque browsers desktop
   continuam reportando suporte a hover mesmo com a janela estreitada,
   o que fazia o submenu "flutuante" aparecer errado no teste mobile. */
@media (min-width:861px){
  .dropdown:hover > a i{ transform:rotate(180deg); }

  /* ponte invisivel: mantem o :hover ativo no vao entre o link e o submenu */
  .dropdown::after{
    content:"";
    position:absolute;
    top:100%; left:50%; transform:translateX(-50%);
    width:230px; height:26px;
  }

  .dropdown:hover .submenu{
    opacity:1; visibility:visible; transform:translate(-50%,0) scale(1);
    pointer-events:auto;
  }
}

.submenu{
  position:absolute; top:calc(100% + 22px); left:50%;
  width:230px; transform:translate(-50%,10px) scale(.96);
  background:var(--ink-soft); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden;
  transform-origin:top center;
  transition:opacity .35s cubic-bezier(.22,.68,0,1.01),
             visibility .35s,
             transform .4s cubic-bezier(.22,.68,0,1.01);
  pointer-events:none;
}

/* seta apontando pro item */
.submenu::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--ink-soft);
}

.submenu li{
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s ease, transform .35s ease;
}
.submenu li:last-child{ border:none; }

/* stagger: cada item aparece com um pequeno atraso */
.submenu li:nth-child(1){ transition-delay:.05s; }
.submenu li:nth-child(2){ transition-delay:.09s; }
.submenu li:nth-child(3){ transition-delay:.13s; }
.submenu li:nth-child(4){ transition-delay:.17s; }
.submenu li:nth-child(5){ transition-delay:.21s; }

.dropdown:hover .submenu li{ opacity:1; transform:translateY(0); }

.submenu a{
  display:block; padding:14px 20px; color:#ddd; font-size:14px;
  position:relative; overflow:hidden;
  transition:color .3s ease, padding-left .3s ease;
}
.submenu a::before{
  content:""; position:absolute; inset:0;
  background:var(--red); transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.22,.68,0,1.01);
  z-index:-1;
}
.submenu a:hover{ color:var(--white); padding-left:26px; }
.submenu a:hover::before{ transform:translateX(0); }

/*==============================================
HERO / SLIDER
==============================================*/
.slider{
  position:relative; width:100%; height:100vh; min-height:640px; overflow:hidden;
  background:var(--ink);
}
.slide{ position:absolute; inset:0; opacity:0; transition:1.2s ease; }
.slide.active{ opacity:1; z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover; animation:zoom 12s linear infinite; }
@keyframes zoom{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
.slide .overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,10,12,.92) 30%, rgba(10,10,12,.55) 100%);
}

.hero-grid{
  position:relative; z-index:5; height:100%;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px;
}

.content{ color:var(--white); max-width:640px; }
.content h1{
  font-size:56px; margin:18px 0 22px; max-width:600px; color:var(--white);
}
.content p{
  font-family:'Inter',sans-serif; font-size:18px; line-height:1.7; color:#dcdcdc;
  margin-bottom:38px; max-width:520px;
}

.buttons{ display:flex; gap:18px; flex-wrap:wrap; }

.btn-red{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 34px; background:var(--red); color:var(--white);
  border-radius:50px; font-weight:600; font-size:15px;
  box-shadow:0 15px 32px var(--red-glow); transition:var(--transition);
}
.btn-red:hover{ transform:translateY(-4px); box-shadow:0 20px 40px var(--red-glow); background:var(--red-dark); }

.btn-border{
  display:inline-flex; align-items:center;
  padding:17px 34px; border:1.5px solid rgba(255,255,255,.55);
  border-radius:50px; color:var(--white); font-weight:600; font-size:15px;
  transition:var(--transition);
}
.btn-border:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* Diagrama tecnico (assinatura visual) */
.hero-diagram{ display:flex; justify-content:center; align-items:center; }
.hero-diagram svg{ width:100%; max-width:420px; overflow:visible; }
.truss-line{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:drawTruss 2.4s .6s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes drawTruss{ to{ stroke-dashoffset:0; } }
.callout{ opacity:0; animation:fadeIn 1s 2.2s forwards; }
@keyframes fadeIn{ to{ opacity:1; } }

/* Setas do slider */
.prev, .next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  color:var(--white); font-size:16px; cursor:pointer; z-index:10;
  transition:var(--transition);
}
.prev:hover, .next:hover{ background:var(--red); }
.prev{ left:24px; } .next{ right:24px; }

.dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:64px;
  display:flex; gap:12px; z-index:10;
}
.dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:var(--transition); }
.dot.active{ background:var(--red); width:26px; border-radius:6px; }

/* Faixa de especificacoes */
.spec-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:10;
  background:var(--red); overflow:hidden; padding:11px 0;
}
.spec-track{
  display:flex; gap:14px; white-space:nowrap; width:max-content;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:1.5px; color:var(--white); text-transform:uppercase;
  animation:scrollTrack 32s linear infinite;
}
@keyframes scrollTrack{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/*==============================================
DIFERENCIAIS
==============================================*/
.diferenciais{ padding:90px 0 40px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }

.card{
  background:var(--white); border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius); padding:36px 28px;
  transition:var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card i{ font-size:30px; color:var(--red); margin-bottom:20px; }
.card h3{ font-size:21px; margin-bottom:10px; }
.card p{ font-size:14.5px; color:var(--concrete); line-height:1.6; }

/*==============================================
SOBRE
==============================================*/
.sobre{ padding:110px 0; }
.sobre-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }

.sobre-imagem{ position:relative; }
.sobre-imagem img{ width:100%; height:460px; object-fit:cover; border-radius:var(--radius); }
.sobre-badge{
  position:absolute; bottom:-24px; left:-24px;
  background:var(--ink); color:var(--white);
  padding:22px 26px; border-radius:14px; box-shadow:var(--shadow);
}
.sobre-badge strong{ display:block; font-family:var(--font-display); font-size:28px; color:var(--red); }
.sobre-badge span{ font-size:12.5px; color:#ccc; letter-spacing:.5px; }

.sobre-texto h2{ font-size:38px; margin-bottom:22px; }
.sobre-texto p{ font-size:16px; line-height:1.8; color:#4a4a4a; margin-bottom:18px; }
.sobre-texto .btn-red{ margin-top:14px; }

/*==============================================
PRODUTOS
==============================================*/
.produtos{ padding:110px 0; background:var(--paper-dark); }
.produtos-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:20px;
}
.produto{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06); transition:var(--transition);
}
.produto:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.produto-img{ height:220px; overflow:hidden; }
.produto-img img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.produto:hover .produto-img img{ transform:scale(1.08); }
.produto h3{ font-size:22px; margin:22px 24px 6px; }
.produto p{ font-size:14px; color:var(--concrete); margin:0 24px 18px; line-height:1.6; }
.produto a{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  margin:0 24px 22px; padding-top:16px; border-top:1px solid #eee;
  font-size:13.5px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.5px;
}

/*==============================================
COMO FUNCIONA
==============================================*/
.processo{ padding:110px 0; background:var(--ink); }
.processo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:20px; }
.etapa{ position:relative; padding-top:10px; border-top:2px solid rgba(255,255,255,.12); }
.etapa-numero{
  display:block; font-family:var(--font-display); font-size:52px; font-weight:800;
  color:var(--red); margin-bottom:14px; line-height:1;
}
.etapa h3{ color:var(--white); font-size:21px; margin-bottom:10px; }
.etapa p{ color:#a8a8ad; font-size:14.5px; line-height:1.65; }

/*==============================================
OBRAS
==============================================*/
.obras{ padding:110px 0; }
.obras-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
.obra-item{ border-radius:12px; overflow:hidden; height:230px; }
.obra-item img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.obra-item:hover img{ transform:scale(1.1); }

/*==============================================
CTA
==============================================*/
.cta{
  position:relative; padding:110px 0; text-align:center;
  background:linear-gradient(120deg, var(--ink) 0%, #2a1114 100%);
  overflow:hidden;
}
.cta-overlay{
  position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(200,16,46,.25), transparent 55%);
}
.cta-content{ position:relative; z-index:2; max-width:720px; }
.cta h2{ color:var(--white); font-size:42px; margin-bottom:20px; }
.cta h2 strong{ color:var(--red); }
.cta p{ color:#cfcfcf; font-size:16.5px; line-height:1.7; margin-bottom:38px; }

.btn-whats{
  display:inline-flex; align-items:center; gap:12px;
  background:#25D366; color:#fff; padding:19px 40px; border-radius:50px;
  font-weight:700; font-size:16px; box-shadow:0 18px 38px rgba(37,211,102,.35);
  transition:var(--transition);
}
.btn-whats:hover{ transform:translateY(-4px); box-shadow:0 24px 45px rgba(37,211,102,.45); }
.btn-whats i{ font-size:22px; }

/*==============================================
RODAPE
==============================================*/
footer{ background:var(--ink); padding:90px 0 0; }
.footer-container{
  display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:50px; padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-box h3{ color:var(--white); font-size:20px; margin-bottom:22px; }
.footer-box p{ display:flex; align-items:center; gap:10px; color:#b7b7bb; font-size:14.5px; margin-bottom:14px; }
.footer-box i{ color:var(--red); width:16px; }
.footer-box ul li{ margin-bottom:12px; }
.footer-box ul a{ color:#b7b7bb; font-size:14.5px; transition:var(--transition); }
.footer-box ul a:hover{ color:var(--red); padding-left:4px; }

.footer-center{ text-align:center; }
.footer-center img{ width:150px; margin:0 auto 20px; }
.footer-center p{ color:#a8a8ad; font-size:14px; line-height:1.7; max-width:340px; margin:0 auto 24px; }
.footer-social{ display:flex; justify-content:center; gap:14px; }
.footer-social a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:var(--transition);
}
.footer-social a:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }

.copy{
  text-align:center; padding:26px 0; font-size:13px; color:#7c7c81;
}
.copy strong{ color:#c7c7cb; }

/*==============================================
BOTOES FLUTUANTES
==============================================*/
.whatsapp{
  position:fixed; right:26px; bottom:26px; z-index:999;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow:0 12px 30px rgba(37,211,102,.45);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.topo{
  position:fixed; right:26px; bottom:96px; z-index:999;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:16px; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:var(--transition); box-shadow:0 10px 25px rgba(0,0,0,.3);
}
.topo.show{ opacity:1; visibility:visible; transform:translateY(0); }
.topo:hover{ background:var(--red); }

/*==============================================
SCROLL REVEAL
==============================================*/
.fade-up{ opacity:0; transform:translateY(36px); transition:.8s cubic-bezier(.22,.68,0,1.01); }
.fade-up.show{ opacity:1; transform:translateY(0); }

/*==============================================
RESPONSIVO
==============================================*/
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-diagram{ display:none; }
  .content h1{ font-size:46px; }
  .grid-4, .processo-grid{ grid-template-columns:repeat(2,1fr); }
  .produtos-grid{ grid-template-columns:repeat(2,1fr); }
  .obras-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-container{ grid-template-columns:1fr; text-align:center; gap:46px; }
  .footer-box p{ justify-content:center; }
}

@media (max-width:860px){
  header{ padding-top:14px; }
  header nav{ border-radius:20px; padding:0 18px; }
  .btn-nav{ display:none; }
  .menu-mobile{ display:block; }

  .menu{
    position:fixed; top:0; right:-100%; width:300px; height:100vh;
    background:var(--ink-soft); flex-direction:column; align-items:flex-start;
    padding:120px 34px 40px; gap:26px; transition:.45s ease; z-index:9999;
    overflow-y:auto;
  }
  .menu.ativo{ right:0; }

  /* Botão de fechar (X) do menu mobile */
  .menu-close{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:26px; right:26px; z-index:10001;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.08); color:var(--white); font-size:20px;
    opacity:0; visibility:hidden; transform:scale(.8);
    transition:var(--transition);
    pointer-events:none;
  }
  .menu-close.ativo{
    opacity:1; visibility:visible; transform:scale(1);
    pointer-events:auto;
  }
  .menu-close:hover{ background:var(--red); }

  .menu li{ width:100%; }
  .menu > li > a{ width:100%; }
  .submenu{
    position:static; width:100%; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; background:rgba(255,255,255,.04); margin-top:12px;
  }
  .dropdown.ativo .submenu{ display:block; }
  .dropdown.ativo > a i{ transform:rotate(180deg); }
  .dropdown::after{ content:none; }

  .content h1{ font-size:36px; }
  .content p{ font-size:16px; }
  .buttons{ flex-direction:column; }
  .buttons a{ justify-content:center; }
  .prev, .next{ display:none; }
  .spec-track{ font-size:11px; }

  .sobre-grid{ grid-template-columns:1fr; gap:60px; }
  .sobre-imagem img{ height:320px; }

  h2.center{ font-size:30px; }
  .grid-4, .processo-grid, .produtos-grid, .obras-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .logo img{ width:130px; }
  .content h1{ font-size:30px; }
  .cta h2{ font-size:30px; }
  .whatsapp{ width:52px; height:52px; font-size:24px; right:18px; bottom:18px; }
  .topo{ right:18px; bottom:82px; }
}

/*==============================================
ACESSIBILIDADE
==============================================*/
a:focus-visible, button:focus-visible{
  outline:2px solid var(--red); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  
 
}

/*==============================================
FORMULÁRIO DE CONTATO
(usado em contato.html e/ou na seção #contato da home)
==============================================*/

/* compensa o header fixo em páginas sem hero, como a contato.html */
.contato-page,
.contato-section{
  padding-top:170px;
  padding-bottom:100px;
}

.contato-page .page-head,
.contato-section .page-head{
  text-align:left; margin-bottom:50px; position:relative; padding-left:20px;
}
.contato-page .page-head::before,
.contato-section .page-head::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  background:var(--red); border-radius:4px;
}
.contato-page .page-head h1,
.contato-page .page-head h2,
.contato-section .page-head h1,
.contato-section .page-head h2{
  font-size:clamp(34px,5vw,52px); margin-bottom:16px; color:var(--ink);
}
.contato-page .page-head span,
.contato-section .page-head span{ color:var(--red); }
.contato-page .page-head p,
.contato-section .page-head p{
  font-size:16.5px; line-height:1.7; color:var(--concrete); max-width:56ch;
}

.card-form{
  background:var(--white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:44px;
  position:relative;
  overflow:hidden;
}
.card-form::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
}

.required-note{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.5px;
  color:var(--concrete); margin-bottom:30px;
}
.required-note b{ color:var(--red); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }

.field{ margin-bottom:22px; display:flex; flex-direction:column; }
.field.full{ grid-column:1/-1; }

.card-form label{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--steel); margin-bottom:9px;
  display:flex; align-items:baseline; gap:8px;
}
.card-form label .num{ color:var(--red); font-weight:700; }

.card-form input,
.card-form select,
.card-form textarea{
  font-family:'Inter', sans-serif;
  font-size:15px;
  padding:13px 15px;
  border:1.5px solid #e2ddd2;
  background:var(--paper);
  border-radius:10px;
  color:var(--ink);
  outline:none;
  width:100%;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.card-form input::placeholder,
.card-form textarea::placeholder{ color:#a7a29a; }
.card-form input:focus,
.card-form select:focus,
.card-form textarea:focus{
  border-color:var(--red);
  background:var(--white);
  box-shadow:0 0 0 4px var(--red-glow);
}
.card-form textarea{ resize:vertical; min-height:110px; }

.card-form .hint{ font-size:12px; color:#a7a29a; margin-top:6px; }

.card-form fieldset{
  border:1.5px solid #e2ddd2;
  border-radius:10px;
  padding:16px 18px;
  background:var(--paper);
}
.card-form legend{
  font-family:var(--font-mono);
  font-weight:500; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--steel); padding:0 8px;
}
.radio-row{ display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:6px; }
.radio-row label{
  text-transform:none; font-weight:500; font-size:14.5px; color:var(--ink);
  display:flex; align-items:center; gap:8px; letter-spacing:0; cursor:pointer;
}
.radio-row input[type="radio"]{
  width:17px; height:17px; accent-color:var(--red); padding:0; cursor:pointer;
}

.card-form .actions{
  margin-top:30px; padding-top:28px;
  border-top:1px dashed #ddd6c8;
  display:flex; gap:14px; flex-wrap:wrap;
}
.card-form .actions .btn-whats,
.card-form .actions .btn-red{
  flex:1; min-width:220px; justify-content:center;
}

.status{
  margin-top:16px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.3px;
  color:var(--steel); display:none;
}
.status.show{ display:block; }

.contact-strip{
  margin-top:34px;
  display:flex; flex-wrap:wrap; gap:26px;
  justify-content:center;
  font-size:14px; color:var(--concrete);
}
.contact-strip span{ display:flex; align-items:center; gap:9px; }
.contact-strip i{ color:var(--red); }
.contact-strip strong{ color:var(--ink); }

@media (max-width:860px){
  .contato-page,
  .contato-section{ padding-top:140px; }
}