/* ==========================
   Variáveis de Tema
   ========================== */
:root{
  --brand-primary: #007bff;        /* Azul base */
  --brand-danger:  #dc3545;
  --brand-darkred: #9B0000;
  --radius:        18px;           /* canto padrão */
  --gutter:        20px;           /* respiro lateral */
  --shadow-soft:   0 8px 24px rgba(0,0,0,.06);
}

/* ==========================
   Base / Reset suave
   ========================== */
html { scroll-behavior: smooth; }
body{
  background-color:#f8f9fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  padding: var(--gutter); /* afasta conteúdo das bordas da janela */
}

/* ==========================
   Header e Footer
   ========================== */
header, footer{
  border-radius: var(--radius);
  overflow: hidden;                /* respeita o raio */
  box-shadow: var(--shadow-soft);
  background: #fff;                /* garante contraste no tema claro */
}
header > *, footer > *{ border-radius: inherit; }
.vermelho-padrao-site{ background-color: var(--brand-darkred) !important; }

/* ==========================
   Cards e componentes
   ========================== */
.card{ border-radius: 10px; }
.card-header{
  background-color: var(--brand-primary);
  color: #fff;
  font-size: 1.25rem;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

/* Botão primário – estados */
.btn-primary{
  background-color: var(--brand-primary);
  border: none;
}
.btn-primary:hover,
.btn-primary:focus{
  filter: brightness(0.95);
}
.btn-primary:active{
  filter: brightness(0.90);
}
.btn-primary:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Validação */
.is-invalid{ border-color: var(--brand-danger) !important; }
.invalid-feedback{
  color: var(--brand-danger);
  font-size: .875rem;
}

/* ==========================
   Imagens (logo, selo, utilitários)
   ========================== */
.imagem-personalizada{
  width: 300px; height: 200px;
  object-fit: cover; border-radius: 10px;
}

/* Logo do header – responsiva sem distorcer */
.imagem-responsiva{
  max-width: 140px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
@media (min-width: 992px){
  .imagem-responsiva{ max-width: 170px; }
}

/* Selo Google/segurança */
.selo-google{
  max-width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* ==========================
   Social icons
   ========================== */
.social-icons{ gap: 15px; }
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px;
  border-radius:12px;
  font-size:1.8rem; color:#fff; text-decoration:none;
  transition: transform .25s ease, filter .25s ease;
}
.social-icon:hover{ filter: brightness(1.2); transform: scale(1.08); }
.social-icon.facebook{  background:#3b5998; }
.social-icon.instagram{ background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-icon.twitter{   background:#1da1f2; }
.social-icon.youtube{   background:#ff0000; }

/* ==========================
   Cards com imagem (grid de produtos)
   ========================== */
.imagem-container{
  height: 260px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:.5rem; background:#fff;
}
.imagem-container img{
  max-height:100%; width:auto; object-fit:contain;
}
.card .descricao{ margin-top:.75rem; }

/* ==========================
   Lateral / Sidebar (se existir)
   ========================== */
aside, .sidebar, .barra-lateral{
  border-radius: var(--radius);
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}
aside .card, .sidebar .card, .barra-lateral .card{
  border-radius: calc(var(--radius) - 6px);
}

/* Container-fluid com respiro extra em telas grandes */
@media (min-width: 992px){
  .container-fluid{ padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ==========================
   HERO – alinhamento texto x imagem
   ========================== */
.section-hero-laudo .hero-img-wrap{
  max-width: 540px;
  width: 100%;
}
.section-hero-laudo .hero-img{
  display:block;
  width:70%; height:auto;
  object-fit: contain;              /* evita distorção */
}
@media (min-width: 992px){
  /* centraliza verticalmente ambas as colunas do hero */
  .section-hero-laudo .col-lg-6.d-flex{ align-items: center; }
}
/* Figcaption com respiro sutil */
.section-hero-laudo .hero-img-wrap figcaption{ padding-inline: .25rem; }

/* ==========================
   “Como funciona” – step cards
   ========================== */
.step-card .step-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  font-weight:700; border:1px solid rgba(0,0,0,.08);
  margin-bottom:.75rem;
}

/* ==========================
   Lista com check
   ========================== */
.list-check{ list-style:none; padding-left:0; }
.list-check li{
  position:relative; padding-left:1.6rem; margin-bottom:.5rem;
}
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
}

/* ==========================
   CTA final
   ========================== */
.cta-final .btn-lg{ min-width:220px; }