/* style.css */
/* Variáveis de marca e tipografia relativa */
:root {
  --brand-primary: #FF6600;
  --brand-light: #FFE0CC;
  --text-dark: #333333;
  --bg-light: #F9F9F9;
  --radius: 0.5rem;
}

html {
  font-size: 100%; /* 16px base */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-light);
}

/* Skip-link: aparece apenas no foco */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--brand-primary);
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: top 0.3s;
  z-index: 1000;
}
.skip-link:focus {
  top: 1rem;
}

/* Hero adjustments */
.object-cover {
  object-fit: cover; /* garante que a imagem preencha o container */
}
.position-relative {
  position: relative;
}

/* Hover shadow utilitário para info-cards */
.hover-shadow:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

/* Botões sociais customizados */
.social-btn {
  min-width: 44px; /* touch target mínimo */
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.social-btn-whatsapp {
  background-color: #25D366;
  color: #fff;
}
.social-btn-instagram {
  background-color: #d325c4;

  color: #fff;
}

/* Form controls (Bootstrap aplica validação) */
.form-control:invalid {
  border-color: #dc3545;
}
.form-control:valid {
  border-color: #198754;
}
/* HERO: Mobile-first + breakpoint para desktop */
#hero {
  position: relative;
  width: 100%;
  min-height: 50vh;        /* Garante altura total da viewport */
  overflow: hidden;
}

/* Faz o picture e img internos preencherem todo o container */
#hero picture,
#hero picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Cobre sem distorcer */
}

/* Conteúdo do hero acima da imagem */
#hero .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  #hero {
    min-height: 0vh;
  }
}
