/* assets.css — estilos complementares carregados não-bloqueante */

/* animation */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.hero-content, .hero-media, .services-grid, .form-side { animation: fadeUp 560ms ease both }

/* services grid: 2 cols desktop / 1 col mobile */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
  gap: 22px 20px; /* ajuste de espaçamento entre os cards */
  align-items: start;
  padding: 8px 6px;
}

/* card base */
.service {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  min-height: 150px;
  box-shadow: 0 8px 22px rgba(198,50,48,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(198,50,48,0.04);
}
.service:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(198,50,48,0.08); }

.service-head { display:flex;gap:12px;align-items:center;justify-content: center;flex-direction: row;}
.service-head svg { flex: 0 0 48px; width:48px; height:48px; border-radius:10px; padding:0px; background:linear-gradient(180deg,#fff5f5,#fff0f0); }
.service-head h3 { margin:0; font-size:17px; color: #0f1724; font-weight:700; text-align: center;}

.service-desc { margin:0; color:#475569; font-size:15px; line-height:1.5; flex:1; }

/* CTA buttons inside cards — only used for featured card (full width) */
.service-cta { margin-top:12px; }
.service-cta .btn { width:100%; display:block; justify-content:center; }

/* featured portal card — soft */
.service--featured {
  background: linear-gradient(180deg, var(--accent-soft), rgba(255,255,255,0.04));
  color: #0f1724;
  border: 1px solid var(--accent-soft-2);
  min-height: 190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px;
}
.service--featured .service-head svg { background: rgba(198,50,48,0.06); }
.service--featured .service-head h3 { color:var(--brand); font-size:18px; }
.service--featured .service-desc { color: rgba(15,23,36,0.85); font-size:15px }
.service--featured .service-cta .btn { background: var(--brand); color: #fff; padding:10px 14px; border-radius:8px; font-weight:700; box-shadow:none; }

/* featured badge */
.featured-badge {
  display:inline-block;
  background: var(--brand);
  color: #fff;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  margin-bottom:8px;
}

/* 2 colunas para telas médias */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 coluna no mobile e largura total */
@media (max-width: 700px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service {
    width: 100%;
    max-width: none;
  }
}
/*
@media (max-width:880px) {
  .services-grid { grid-template-columns: 1fr; gap:14px; padding:0; }
  .service { min-height: auto; }
  .form-side { position: static; top:auto; }
}
*/
/* utilities */
.btn:focus{outline:3px solid rgba(198,50,48,0.12);outline-offset:3px}
input:focus, select:focus, textarea:focus{box-shadow:0 8px 30px rgba(198,50,48,0.06);border-color:rgba(198,50,48,0.14);outline:none}
.service-desc { opacity:0.95 }
.highlight-pill { font-weight:700; font-size:13px }

/* TEXTO "Há mais de 30 anos..." */
.lead {
  color: #FFFFFF; /* branco pleno para máximo contraste no fundo vermelho */
  font-size: 18px; /* antes era ~15px, agora mais destaque */
  line-height: 1.5;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); /* sombra suave, sem brilho exagerado */
}

/* Em telas menores, se quiser suavizar o layout */
@media (max-width: 768px) {
  .kpis {
    gap: 8px;
  }

  .kpi {
    width: 100%;
  }
}

/* Contato no topo com WhatsApp */
.contact {
  font-size: 14px;
  color: #666666;
}

.top-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666666;
  text-decoration: none;
  font-weight: 600;          /* antes 500, agora um pouco mais forte */
}

.top-whatsapp:hover {
  color: #444444;
}

.whatsapp-icon svg {
  display: block;
  width: 20px;               /* garante o ícone um pouco maior */
  height: 20px;
}

.whatsapp-number {
  white-space: nowrap;
  font-weight: 400 !important;
  color: #444 !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  font-family: inherit !important;
}

.hero-content h1, #hero-title {
  font-size: 1.45em;        /* menor, mais compacto */
  line-height: 1.11;
  font-weight: 700;
  margin-bottom: 15px;
}

.hero-content .lead {
  font-size: 0.97em;
  margin-bottom: 10px;
}

.hero-content form {
  margin-top: 12px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.hero-content input,
.hero-content select,
.hero-content textarea {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  color: #0f1724;
  background: #fff;
  border: 1.5px solid #ede9e8;
  border-radius: 7px;
  padding: 9px 13px;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 1.5px 6px rgba(200,0,0,0.02);
  width: 100%;
}

.hero-content input:focus,
.hero-content select:focus,
.hero-content textarea:focus {
  border-color: #d72620;
  box-shadow: 0 0 0 2px #ffe2de;
}

.hero-content select:invalid {
  color: #888;
}

.hero-content input::placeholder,
.hero-content textarea::placeholder {
  color: #bfbfbf;
  opacity: 1;
}

.hero-content .small,
.hero-content #formMsg {
  font-size: 12px;
  color: #ffffff;   /* branco 80% opaco, super legível no vermelho */
  /* margin-top: 7px; */
  text-align: left;
}

.hero-content #formMsg {
  font-weight: 900;
  min-height: 1.1em;
}

/* Botão principal do Hero - versão clara */
.hero .btn.btn-primary {
  background: #FFFDE6;          /* mesmo tom claro dos KPIs */
  color: #b52b2b;               /* vermelho fechado, bom contraste */
  border-radius: 7px;
  border: none;
  font-weight: 700;
  font-size: 15px;
  margin-top: 8px;
  padding: 12px 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.hero .btn.btn-primary:hover {
  background: #ffeab8;          /* um pouco mais escuro no hover */
  color: #9a2323;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.hero .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Campos do formulário com estilo alinhado à landing page */
form input,
form select,
form textarea {
  font-family: 'Poppins', Arial, sans-serif;   /* fonte da LP */
  font-size: 14px;
  color: #0f1724;                             /* cor usada nos títulos/cards */
  background: #fff;
  border: 1.5px solid #ede9e8;                /* tom claro da borda */
  border-radius: 9px;
  padding: 9px 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 1.5px 6px rgba(200,0,0,0.02);
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: #d72620;                      /* vermelho da marca no foco */
  box-shadow: 0 0 0 2px #ffe2de;              /* levemente "brilhado" na marca */
}

form select:invalid {
  color: #888;                                /* placeholder mais apagado */
}

/* Placeholder com cor discreta */
form input::placeholder,
form textarea::placeholder {
  color: #bfbfbf;
  opacity: 1;
}

.btn-whatsapp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #a60907;
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  border: none;
}

.btn-whatsapp-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.btn-whatsapp svg {
  display: block;
}

.footer-masson {
  width: 100%;
  padding: 10px 0 24px 0;
  background: transparent;
}
.footer-central {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-logo {
  height: 52px;
  width: auto;
  display: block;
}
.footer-frase {
  font-size: 1.18em;
  color: #444;
  font-weight: 400;
  display: inline-block;
  text-align: left;
  line-height: 1.3;
}
.footer-frase a,
.footer-frase .footer-dados {
  color: #444;
  font-weight: 400;
  font-size: inherit;
  letter-spacing: 0;
  text-decoration: none;
}
.footer-frase a:hover { color: #198754; }
@media (max-width: 600px) {
  .footer-central {
    flex-direction: column;
    gap: 8px;
  }
  .footer-logo { margin-bottom: 8px; }
  .footer-frase { text-align: center; }
}
.footer-frase a,
.footer-frase .whatsapp-number {
  color: #444 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  font-size: 15.34px !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
}