/*
Theme Name: Navistar Site
Author: Navistar
Version: 1.0
*/

/* ===== Variáveis ===== */
:root{
  --brand:#1f6feb;
  --ink:#0b1220;
  --muted:#64748b;
  --line:rgba(255,255,255,.14);
}

/* ===== Reset básico ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0b1220;
  background:#f3f6fb;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* =========================================================
   HEADER / TOPO
========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:none;
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}

/* Logo */
.topbar .brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:0;        /* esconde texto */
  line-height:0;
}

.brand__logo{
  display:block;
  height:52px;
  width:auto;
}

/* Menu */
.nav{
  display:flex;
  gap:32px;
  align-items:center;
}

.nav a{
  font-weight:500;
  letter-spacing:.3px;
  color:#1f2937;
  font-size:15px;
  padding:6px 2px;

}

.nav a:hover{
  color:var(--brand);
}

/* =========================================================
   BOTÕES
========================================================= */
.btn{
  display:inline-block;
  background:transparent;
  color:var(--brand);
  border:1.5px solid var(--brand);
  padding:9px 16px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  transition:all .15s ease;
}

.btn:hover{
  background:var(--brand);
  color:#fff;
}



.btn--ghost{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:#fff;
}

.btn--small{
  padding:9px 16px;
  margin-left:8px;
}


/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height: calc(100vh - 78px); /* 92px = altura do header no desktop */
  display:flex;
  align-items:center;
  background:#0b1220;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.08) contrast(1.06);
}

.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
background:
  linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55)),
  radial-gradient(
    circle at 50% 55%,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.30) 45%,
    rgba(0,0,0,.65) 100%
  );

}

.hero__content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:72px 20px 56px;
}

.hero h1{
  max-width:900px;
  font-size:clamp(32px,3.2vw,52px);
  line-height:1.15;
  margin:0 auto 10px;
  letter-spacing:-0.3px;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.45);

}


.hero p{
  max-width:640px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6;
  margin:8px auto 0;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}

.badge{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:999px;
  margin-right:8px;
  font-weight:750;
  font-size:13px;
}

/* =========================================================
   SEÇÕES
========================================================= */
.section{
  padding:64px 0;
  background:transparent;
}


.section .container{
  background:#fff;
  border:1px solid #e7edf6;
  border-radius:18px;
  padding:36px 20px;
}

.section--alt .container{
  background:#f8fafc;
}

h2{
  font-size:34px;
  margin:0 0 14px;
  letter-spacing:-.3px;
  font-weight:700;
}

.muted{
  color:var(--muted);
  margin:0 0 28px;
  font-size:15px;
}


.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.card{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}

.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

.split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:start;
}

.panel{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}

.list{padding-left:18px;color:#111827}

/* =========================================================
   FIGURAS
========================================================= */
.figure{margin:0}
.figure img{
  width:100%;
  border-radius:16px;
  border:1px solid #e5e7eb;
  display:block;
}
.figure figcaption{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
}

/* =========================================================
   CONTATO
========================================================= */
.contact{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.contact__item{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  background:#0b1220;
  color:#cbd5e1;
  padding:18px 0;
}

.footer__inner{
  display:flex;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width:980px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .topbar__inner{height:80px}
  .brand__logo{height:56px}
}
/* ===== Branding padrão do WordPress: esconder título/descrição ===== */
.site-title,
.site-title a,
.site-description {
  display: none !important;
}

/* ===== Logo do WordPress (custom logo): forçar aparecer e aumentar ===== */
.custom-logo-link{
  display: inline-flex !important;
  align-items: center;
}

.custom-logo{
  height: 62px !important;
  width: auto !important;
}

/* Se o tema coloca um “page header” no topo, remove também */
.page-header,
.entry-header,
.wp-block-post-title,
h1.entry-title{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
/* ===== HOME: remover faixa de título/descrição do topo (tema/WordPress) ===== */
body.home .page-header,
body.home header.page-header,
body.home .entry-header,
body.home header.entry-header,
body.home .post-header,
body.home .header-title,
body.home .title-area,
body.home .site-branding,
body.home .branding,
body.home .site-header .site-branding,
body.home .site-header .branding,
body.home .site-header .header-title,
body.home .wp-block-post-title,
body.home h1.entry-title,
body.home h1.page-title {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Se sobrar espaço vazio acima do logo/menu */
body.home .site-header,
body.home #masthead,
body.home .masthead,
body.home header#masthead {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* ===== HOME: esconder qualquer “descrição” ou “tagline” no topo ===== */
body.home .description,
body.home .tagline,
body.home .site-description,
body.home .header-description,
body.home .site-tagline{
  display:none !important;
}
/* ===== Remover APENAS o link textual do topo (título grande) ===== */
a[href="https://www.navistar.ind.br/"],
a[href="https://www.navistar.ind.br"]{
  display: none !important;
}

/* ===== EXCEÇÃO: não esconder o link do logo dentro do topbar ===== */
.topbar .brand a[href="https://www.navistar.ind.br/"],
.topbar .brand a[href="https://www.navistar.ind.br"]{
  display: inline-flex !important;
}
/* Garantir que o logo sempre apareça no site público */
.topbar .brand{
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 62px !important;
}

.topbar .brand__logo{
  display: block !important;
  height: 62px !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Se algum CSS antigo estiver zerando o link do logo */
.topbar .brand{
  font-size: initial !important;
  line-height: normal !important;
}
/* ===== Mobile (ajustes críticos) ===== */
@media (max-width: 768px){

  /* Topo: empilha e dá respiro */
  .topbar__inner{
    height: auto;
    padding: 10px 0;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }

  .brand__logo{
    height: 48px !important;
  }

  /* Hero: menos altura e texto menor */
  .hero{
    min-height: calc(100vh - 70px); /* 80px = header menor no mobile */
  }

  .hero__content{
    padding: 64px 16px 44px;
  }

  .hero p{
    font-size: 15px;
  }
  
    .hero h1{
    font-size: 26px;
    line-height: 1.2;
  }


  /* Grids viram 1 coluna */
  .grid4{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}
/* ===== Soluções: layout 3 + 2 (centralizado) ===== */
.grid-solutions{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* Cada card ocupa 2 colunas => 3 por linha */
.grid-solutions .card{
  grid-column: span 2;
}

/* Últimos 2 cards centralizados na segunda linha */
.grid-solutions .card:nth-last-child(2){
  grid-column: 2 / span 2; /* começa na coluna 2 */
}
.grid-solutions .card:nth-last-child(1){
  grid-column: 4 / span 2; /* começa na coluna 4 */
}

/* Responsivo */
@media (max-width: 980px){
  .grid-solutions{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-solutions .card{
    grid-column: auto;
  }
  .grid-solutions .card:nth-last-child(2),
  .grid-solutions .card:nth-last-child(1){
    grid-column: auto;
  }
}

@media (max-width: 640px){
  .grid-solutions{
    grid-template-columns: 1fr;
  }
}

/* ===== Botões flutuantes – WhatsApp e Instagram (FINAL LIMPO) ===== */

a.float{
  position: fixed;
  right: 18px;
  z-index: 99999;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border-radius: 50%;
  overflow: hidden;

  font-size: 0;
  line-height: 0;
  color: transparent;
  text-decoration: none;

  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

a.float:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}

/* POSIÇÃO */
a.float--wa{
  bottom: 18px;
  background: #16a34a;
}

a.float--ig{
  bottom: 86px;
  background: #ffffff; /* fundo branco no Instagram */
}

/* TAMANHO DOS ÍCONES */
a.float img{
  width: 38px;
  height: 38px;
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
  display: block;
}
/* ===== HERO CENTRALIZADO ===== */
.hero__content{
  text-align: center;
  align-items: center;
}

.hero h1,
.hero p{
  margin-left: auto;
  margin-right: auto;
}

.hero__cta{
  justify-content: center;
}

/* =========================================================
   MENU MOBILE (FINAL LIMPO)
========================================================= */

/* Acessibilidade */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* referência para posicionar o dropdown */
.topbar__inner{ position: relative !important; }

/* Desktop */
.nav__toggle{ display:none; }
.nav__menu{
  display:flex;
  gap:22px;
  align-items:center;
  position: static !important;
}

/* Mobile */
@media (max-width:768px){
  .topbar__inner{ position: relative; }

  .nav__toggle{
    display:inline-flex;
    width:44px; height:44px;
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:12px;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    padding:0;
    flex-direction:column;
  }

  .nav__bar{
    display:block;
    width:18px;
    height:2px;
    background:#111827;
  }

  /* FECHADO por padrão no mobile */
  .nav__menu{
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(320px, calc(100vw - 40px));
    flex-direction:column;
    gap:10px;
    padding:14px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
    z-index:9999;
  }

  /* ABERTO quando clica no hamburger */
  body.nav-open .nav__menu{
    display:flex;
  }

  .nav__menu a{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    background:#f1f5f9;
  }

  .nav__menu a.btn{
    background:var(--brand);
    color:#fff;
    text-align:center;
  }
}

/* Se “Abrir menu” aparecer por conflito */
.nav__toggle .sr-only{ display:none !important; }
/* ===== FIX DEFINITIVO: DESKTOP mostra menu e esconde hamburguer ===== */
@media (min-width: 769px){
  .nav__toggle{ display:none !important; }
  .nav__menu{ display:flex !important; gap:22px; align-items:center; }
}
.grid-diferenciais{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:24px;
}

.diferencial{
  border-left:3px solid var(--brand);
  padding-left:14px;
}

.diferencial strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.diferencial span{
  font-size:14px;
  color:var(--muted);
}
@media (max-width:768px){
  .grid-diferenciais{
    grid-template-columns:1fr;
  }
}
/* ===== Botão ghost em fundos claros (Qualidade etc.) ===== */
.btn.btn--ghost{
  background:#eef2f6;
  border:1px solid #e5e7eb;
  color:#111827 !important;
}

.btn.btn--ghost:hover{
  background:#e2e8f0;
  color:#111827 !important;
}
.section .btn--ghost{
  opacity:1 !important;
  visibility:visible !important;
}
/* ===== CTA "industrial premium" (ex: ISO download) ===== */
.btn.btn--ghost{
  background:#fff;
  border:1.5px solid rgba(31,111,235,.35); /* var(--brand) mais sutil */
  color:#0b1220 !important;
  font-weight:600;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.btn.btn--ghost:hover{
  border-color:rgba(31,111,235,.65);
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
/* ===== Botão ISO (estilo industrial premium) ===== */
a.btn.btn--iso{
  border-color:rgba(31,111,235,.55) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
}
a.btn.btn--iso:hover{
  border-color:rgba(31,111,235,.85) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.12) !important;
}


a.btn.btn--iso:hover{
  transform:translateY(-1px);
  border-color:rgba(31,111,235,.75) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
}
/* ===== QUALIDADE (layout blindado) ===== */
.section .container.q2{
  position:relative;
}

/* topo: título à esquerda + CTA à direita */
.q2-top{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  align-items:start !important;
  gap:16px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid #e5e7eb !important;
  margin-bottom:18px !important;
}

.q2-title h2{ margin-bottom:10px; }
.q2-title .muted{ margin:0; max-width:72ch; }

.q2-cta{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
}

/* duas colunas reais */
.q2-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:18px !important;
  align-items:stretch !important;
}

/* cards */
.q2-card{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  padding:18px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}

.q2-h3{
  margin:0 0 10px !important;
  font-size:16px !important;
}

/* chips */
.q2-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:10px !important;
}

.q2-chips span{
  display:inline-flex !important;
  background:#eef2f6 !important;
  border:1px solid #e5e7eb !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#111827 !important;
  line-height:1 !important;
}

/* responsivo */
@media (max-width:980px){
  .q2-top{
    grid-template-columns: 1fr !important;
  }
  .q2-cta{
    justify-content:flex-start !important;
  }
  .q2-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   FORMULÁRIO (Contact Form 7) – FORÇADO/COMPATÍVEL
========================================================= */

/* pega o wrapper clássico e também o form do CF7 */
.wpcf7,
.wpcf7-form{
  margin-top: 24px;
}

/* card do formulário */
.wpcf7 form.wpcf7-form,
form.wpcf7-form{
  background:#fff !important;
  border:1px solid #e7edf6 !important;
  border-radius:18px !important;
  padding:28px !important;
  box-shadow:0 8px 28px rgba(15,23,42,.06) !important;
}

/* espaçamento das linhas (CF7 costuma envolver em <p> e <span>) */
form.wpcf7-form p{
  margin:0 0 16px !important;
}

/* labels */
form.wpcf7-form label{
  display:block !important;
  font-weight:600 !important;
  font-size:14px !important;
  margin:0 0 6px !important;
  color:#111827 !important;
}

/* inputs, selects, textarea (pega também quando vem dentro de span.wpcf7-form-control-wrap) */
form.wpcf7-form .wpcf7-form-control{
  width:100% !important;
}

form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form input[type="url"],
form.wpcf7-form select,
form.wpcf7-form textarea{
  width:100% !important;
  padding:14px 16px !important;
  border-radius:12px !important;
  border:1px solid #e5e7eb !important;
  background:#f9fafb !important;
  font-size:15px !important;
  font-family:inherit !important;
  color:#0b1220 !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

form.wpcf7-form textarea{
  min-height:120px !important;
  resize:vertical !important;
}

/* foco */
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus{
  outline:none !important;
  border-color:var(--brand) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(31,111,235,.12) !important;
}

/* checkbox/aceite (LGPD) */
form.wpcf7-form input[type="checkbox"]{
  width:auto !important;
  margin-right:8px !important;
  transform:scale(1.08) !important;
}

/* botão submit */
form.wpcf7-form input[type="submit"],
form.wpcf7-form button[type="submit"]{
  width:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  background:var(--brand) !important;
  color:#fff !important;
  padding:14px 22px !important;
  border-radius:14px !important;
  font-size:15px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}

form.wpcf7-form input[type="submit"]:hover,
form.wpcf7-form button[type="submit"]:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(31,111,235,.35) !important;
}

/* mensagens do CF7 (markup novo e antigo) */
form.wpcf7-form .wpcf7-response-output{
  border-radius:12px !important;
  padding:14px 16px !important;
  margin:18px 0 0 !important;
  font-size:14px !important;
}

form.wpcf7-form.sent .wpcf7-response-output{
  border:1px solid #16a34a !important;
  background:#ecfdf5 !important;
  color:#065f46 !important;
}

form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.aborted .wpcf7-response-output{
  border:1px solid #dc2626 !important;
  background:#fef2f2 !important;
  color:#7f1d1d !important;
}
/* =========================================================
   CF7 – COMPACTO (sobrescreve o bloco anterior)
========================================================= */

/* card mais baixo */
form.wpcf7-form{
  padding:18px !important;
  border-radius:16px !important;
}

/* menos espaço entre linhas */
form.wpcf7-form p{
  margin:0 0 10px !important;
}

/* inputs mais compactos */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form input[type="url"],
form.wpcf7-form select,
form.wpcf7-form textarea{
  padding:12px 14px !important;
  font-size:14px !important;
  border-radius:12px !important;
}

/* textarea menor */
form.wpcf7-form textarea{
  min-height:92px !important;
}

/* botão um pouco menor */
form.wpcf7-form input[type="submit"],
form.wpcf7-form button[type="submit"]{
  padding:12px 18px !important;
  border-radius:12px !important;
  font-size:14px !important;
}

/* ===== Layout em 2 colunas (desktop) =====
   OBS: isso funciona se o seu Form do CF7 estiver em <p> (padrão)
*/
@media (min-width: 980px){
  form.wpcf7-form{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:12px 14px !important;
    align-items:start !important;
  }

  /* cada <p> vira “linha” do grid */
  form.wpcf7-form > p{
    margin:0 !important;
  }

  /* campos que devem ocupar largura total */
  form.wpcf7-form > p:nth-last-child(2),
  form.wpcf7-form > p:last-child{
    grid-column: 1 / -1 !important;
  }

  /* textarea geralmente é o penúltimo p (antes do botão) */
  form.wpcf7-form textarea{
    min-height:86px !important;
  }
}
/* =========================================================
   CF7 – GRID + ESPAÇAMENTO (corrige 2 colunas mesmo com wrappers)
========================================================= */

/* card compacto */
form.wpcf7-form{
  padding:18px !important;
  border-radius:16px !important;
}

/* remove excesso de espaço padrão do CF7 */
form.wpcf7-form p{
  margin:0 0 10px !important;
}
form.wpcf7-form br{
  display:none !important;
}

/* labels mais “coladas” no campo */
form.wpcf7-form label{
  margin:0 0 4px !important;
  font-size:13px !important;
}

/* inputs mais compactos */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form select,
form.wpcf7-form textarea{
  padding:12px 14px !important;
  font-size:14px !important;
}

/* textarea menor */
form.wpcf7-form textarea{
  min-height:90px !important;
}

/* botão menor */
form.wpcf7-form input[type="submit"],
form.wpcf7-form button[type="submit"]{
  padding:12px 18px !important;
  font-size:14px !important;
  border-radius:12px !important;
}

/* ===== GRID REAL EM 2 COLUNAS (DESKTOP) =====
   Forçamos o container principal do form a virar grid,
   mesmo que tenha wrappers do CF7.
*/
@media (min-width: 980px){

  /* 1) se existir um wrapper interno, ele vira o grid */
  form.wpcf7-form .wpcf7-form-control-wrap,
  form.wpcf7-form .wpcf7-spinner{
    /* nada aqui, só evitando conflitos */
  }

  /* 2) Tornar todos os <p> do form em grid items (funciona com wrappers) */
  form.wpcf7-form{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:12px 16px !important;
    align-items:start !important;
  }

  /* cada linha ocupa 1 coluna por padrão */
  form.wpcf7-form p{
    margin:0 !important;
  }

  /* Mensagem (textarea) ocupa as duas colunas */
  form.wpcf7-form textarea{
    grid-column: 1 / -1 !important;
  }
  form.wpcf7-form textarea,
  form.wpcf7-form textarea *{
    width:100% !important;
  }

  /* Checkbox LGPD ocupa as duas colunas */
  form.wpcf7-form input[type="checkbox"]{
    width:auto !important;
  }
  form.wpcf7-form p:has(input[type="checkbox"]){
    grid-column: 1 / -1 !important;
  }

  /* Botão ocupa as duas colunas */
  form.wpcf7-form p:has(input[type="submit"]),
  form.wpcf7-form p:has(button[type="submit"]){
    grid-column: 1 / -1 !important;
    margin-top:2px !important;
  }
}
/* ===== Catálogo: botão + formulário sob demanda ===== */
.btn--catalogo{
  margin-top: 6px;
}

/* espaço e transição suave */
.catalogo-form{
  margin-top: 18px;
  animation: catalogoFade .18s ease-out;
}

@keyframes catalogoFade{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform: translateY(0); }
}