/* =========================================================
   Tipografia & Reset
   - Definição de cores globais e ajustes de base
   ========================================================= */
:root{
  --black: #0b0b0b;
  --dark: #121212;
  --white: #ffffff;
  --light: #f4f4f6;
  --gold: #d9a302;     /* cor dourada principal */
  --gold-600:#c69300;  /* dourado mais escuro para hover */
  --muted:#a7a7a7;     /* cinza suave para textos secundários */
}

/* Reset básico de box model e margens/paddings */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Tipografia base do site */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);
  background: var(--black);
  line-height: 1.6;
}

/* Títulos e parágrafos */
h1,h2,h3,h4{ 
  font-family: Montserrat, Inter, Arial, sans-serif; 
  margin:0 0 8px; 
}
h1{ font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3{ font-size: 1.1rem; font-weight: 600; }
p{ margin: 0 0 12px; color: #e9e9e9; }

/* Container responsivo com largura máxima controlada */
.container{
  width: min(1200px, 92%);
  margin: 0 auto;
}


/* =========================================================
   Header (topo fixo)
   - Barra superior com logo e navegação
   ========================================================= */
.site-header{
  position: sticky;          /* fica fixado no topo ao rolar */
  top: 0;
  z-index: 50;
  background: #000;
  border-bottom: 1px solid #1e1e1e;
}

/* Conteúdo interno do header (logo + nav) */
.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  padding: 8px 0;           /* pequeno respiro vertical */
}

/* Qualquer imagem dentro do header terá altura limitada */
.site-header img{
  max-height: 60px;         /* trava a altura máxima (ajuste se quiser menor) */
  height: auto;
}

/* Marca (logo + texto) com alinhamento horizontal */
.brand{
  display:flex; 
  align-items:center; 
  gap:6px;                  /* espaço entre ícone e texto menor */
  color:#fff; 
  text-decoration:none; 
  font-weight:700; 
  letter-spacing:.3px;
  line-height: 1;           /* evita ganho de altura por line-height */
}

/* “Medalhão” dourado (opcional) à esquerda da marca */
.brand-mark{
  display:inline-grid; 
  place-items:center;
  width: 20px;              /* tamanho compacto do círculo */
  height: 20px; 
  border-radius:50%;
  background: var(--gold); 
  color:#000; 
  font-weight:800;
  overflow:hidden;          /* garante que a imagem fique dentro do círculo */
}

/* Ícone dentro do medalhão */
.brand-mark-img{
  width: 12px; 
  height: 12px; 
  object-fit: contain;
}

/* Ícone direto (sem medalhão) ao lado do texto */
.brand-icon{
  width: 40px;              /* ícone bem pequeno */
  height: px;
  display: block;           /* remove espaço extra de inline elements */
  object-fit: contain;
}

/* Texto da marca */
.brand-text{
  font-size: 1rem;          /* levemente menor para combinar com ícone compacto */
}


/* =========================================================
   Navegação
   - Lista de links horizontal e menu mobile
   ========================================================= */
.nav{ position:relative; }

/* Lista principal de navegação */
.nav-list{
  list-style:none; 
  display:flex; 
  gap:20px; 
  padding:0; 
  margin:0;
}

/* Links da navegação */
.nav-list a{
  color:#fff; 
  text-decoration:none; 
  padding:8px 10px; 
  border-radius:6px;
  transition: all .2s ease;
}

.nav-list a:hover{ background:#1b1b1b; }

/* Botão do menu mobile (hambúrguer) */
.nav-toggle{
  display:none; 
  background:none; 
  border:1px solid #333; 
  color:#fff;
  padding:6px 10px; 
  border-radius:6px; 
  font-size:16px;
}


/* =========================================================
   Hero (banner principal)
   - Imagem de fundo, sobreposição e conteúdo central
   ========================================================= */
.hero{
  position:relative;
  min-height: 56vh;
  background: #000 url("../img/hero.jpg") center/cover no-repeat; /* imagem do banner */
}

/* Camada escura sobre a imagem para melhorar legibilidade */
.hero-overlay{
  position:absolute; 
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%);
}

/* Conteúdo do hero centralizado */
.hero-content{
  position:relative; 
  z-index:2;
  padding: 64px 0;
  display:grid; 
  place-items:center; 
  text-align:center;
}

.hero-title{ color:#fff; }

.hero-subtitle{
  color:#ddd; 
  font-size:1rem; 
  margin-bottom:18px;
}

/* Ações (botões) no hero */
.hero-actions{ 
  display:flex; 
  gap:12px; 
}


/* =========================================================
   Botões
   - Variações de estilo para ações
   ========================================================= */
.btn{
  display:inline-block; 
  font-weight:600; 
  text-decoration:none;
  padding:10px 16px; 
  border-radius:8px; 
  transition:.2s ease;
}

.btn-sm{ 
  padding:8px 12px; 
  font-size:.95rem; 
}

.btn-gold{ 
  background: var(--gold); 
  color:#000; 
}
.btn-gold:hover{ 
  background: var(--gold-600); 
}

.btn-outline{ 
  border:1px solid #444; 
  color:#fff; 
}
.btn-outline:hover{ 
  background:#1b1b1b; 
}

.btn-dark{ 
  background:#000; 
  color:#fff; 
  border:1px solid #222; 
}
.btn-dark:hover{ 
  background:#181818; 
}


/* =========================================================
   Seções
   - Espaçamento e variações de fundo
   ========================================================= */
.section{ 
  padding: 48px 0; 
}

.section.light{ 
  background: var(--light); 
  color:#111; 
}

.section.dark{ 
  background: #000; 
  color:#fff; 
}

.section-title{
  text-align:center; 
  margin-bottom:24px;
}


/* =========================================================
   Features (cards de destaques)
   - Grade responsiva de    - Grade responsiva de 4 colunas
   ========================================================= */
.features{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}

/* Cartão individual */
.feature-card{
  background:#fff; 
  color:#111; 
  flood-color: #000;
  border:1px solid #636060;
  border-radius:12px; 
  padding:18px; 
  text-align:center;
  box-shadow: 0 2px 8px rgba(199, 28, 28, 0.06);
  
}

/* Parágrafos dentro do card */
.feature-card p {
  color: #555; /* Cinza médio para melhor contraste */
  font-size: 0.95rem; /* Tamanho levemente menor */
  line-height: 1.4; /* Melhor legibilidade */
}

/* Ícone do card */
.feature-icon{
  width:44px; 
  height:44px; 
  margin:0 auto 8px;
  border-radius:50%; 
  display:grid; 
  place-items:center;
  background:#060606; 
  font-size:22px;
}


/* =========================================================
   Serviços
   - Cartões de serviços com preço
   ========================================================= */
.services{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:20px;
}

.service{
  background:#0e0e0e; 
  border:1px solid #1f1f1f;
  border-radius:12px; 
  padding:20px;
}

/* Badge de preço dentro do card */
.service .price{
  display:inline-block; 
  margin-top:8px;
  background: var(--gold); 
  color:#000; 
  font-weight:700;
  padding:6px 10px; 
  border-radius:6px;
}

/* Utilitários */
.center{ text-align:center; }
.mt-24{ margin-top:24px; }


/* =========================================================
   Faixa CTA (Call to Action)
   - Banda dourada com texto central
   ========================================================= */
.cta-band{
  background: var(--gold);
  color:#000;
  padding: 42px 0;
  text-align:center;
}

.cta-band .cta-content p{ 
  color:#222; 
}


/* =========================================================
   Espaçador branco (faixa neutra)
   - Usado para dar respiro visual
   ========================================================= */
.spacer{
  height: 120px;
  background: var(--light);
}


/* =========================================================
   Rodapé
   - Grid com 3 colunas + linha inferior
   ========================================================= */
.site-footer{
  background:#050505; 
  color:#cfcfcf;
  border-top:1px solid #111;
}

.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:20px;
  padding: 36px 0;
}

.footer-col h4{ 
  color:#fff; 
  margin-bottom:10px; 
}

.footer-list{ 
  list-style:none; 
  padding:0; 
  margin:0; 
}

.footer-list li{ 
  margin:6px 0; 
  color:#bdbdbd; 
}

.footer-bottom{
  border-top:1px solid #111; 
  padding:10px 0; 
  text-align:center;
}


/* =========================================================
   Responsivo
   - Quebras de layout para tablets e celulares
   ========================================================= */
@media (max-width: 992px){
  .features{ grid-template-columns: repeat(2, 1fr); }
  .services{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
  /* Exibe o botão do menu e transforma a lista em dropdown */
  .nav-toggle{ display:inline-block; }

  .nav-list{
    position:absolute; right:0; top:44px;
    background:#000; border:1px solid #222; border-radius:10px;
    padding:10px; display:none; flex-direction:column; gap:10px;
    min-width: 180px;
  }
  .nav-list.show{ display:flex; }

  /* Grades viram 1 coluna */
  .features{ grid-template-columns: 1fr; }
  .services{ grid-template-columns: 1fr; }

  /* Hero mais baixo em telas pequenas */
  .hero{ min-height: 48vh; }
}

/* =========================================================
   SOBRE_NÓS — Complemento visual exclusivo
   Este arquivo depende de style1.css já carregado antes.
   ========================================================= */

/* Escopo da página Sobre Nós */
.sobre-page {
  /* nada aqui: usamos o escopo para evitar vazamento dos estilos */
}

/* =========================
   HERO ESPECÍFICO (Sobre Nós)
   ========================= */
.sobre-page .hero {
  min-height: 42vh; /* um pouco mais baixo que a home */
  background: #000 url("img/hero-sobre.jpg") center/cover no-repeat;
}
.sobre-page .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.58));
}
.sobre-page .hero-content {
  padding: 56px 0;
}
.sobre-page .hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}
.sobre-page .hero-subtitle {
  color: #ddd;
  font-size: .98rem;
  margin-top: 6px;
}

/* =========================
   SEÇÃO CLARA — Nossa História (texto + imagem)
   ========================= */
.sobre-page .section-light {
  background: #f5f6f8; /* mais clean que var(--light) */
  color: #111;
  padding: 42px 0;
}
.sobre-page .section-light .section-title {
  text-align: center;
  margin: 0 0 24px;
  font-weight: 700;
}

/* Grid com texto (maior) e imagem (card) */
.sobre-page .about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}
.sobre-page .about-text p {
  color: #444;      /* parágrafos mais claros */
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Card da foto com borda e sombra suave */
.sobre-page .about-photo-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.sobre-page .about-photo-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   SEÇÃO ESCURA — Nossos Valores
   ========================= */
.sobre-page .section-dark {
  background: #000;
  color: #fff;
  padding: 42px 0;
}
.sobre-page .section-dark .section-title {
  text-align: center;
  margin-bottom: 20px;
}

/* Faixa de cards centralizados */
.sobre-page .values-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Card escuro com destaque dourado no ícone */
.sobre-page .value-card {
  background: #0f1621;              /* azul/acinzentado escuro */
  border: 1px solid #2a3441;
  color: #e9eef6;
  width: 220px;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transition: transform .2s ease, border-color .2s ease;
}
.sobre-page .value-card:hover {
  border-color: #3a4656;
  transform: translateY(-2px);
}
.sobre-page .value-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  margin: 0 auto 10px;
  background: rgba(217,163,2,.15); /* glow dourado suave */
  color: #d9a302;                  /* dourado do ícone (emoji/fonte) */
  font-size: 20px;
}
.sobre-page .value-card h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}
.sobre-page .value-card p {
  color: #cdd6e0;                  /* parágrafo claro */
  font-size: .92rem;
  line-height: 1.4;
}

/* =========================
   FAIXA CLARA — Métricas / Números
   ========================= */
.sobre-page .stats-band {
  background: #f5f6f8;
  color: #111;
  padding: 36px 0;
  text-align: center;
}
.sobre-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.sobre-page .stat {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px 12px;
}
.sobre-page .stat .number {
  color: #d9a302;                  /* dourado */
  font-weight: 800;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
}
.sobre-page .stat .label {
  color: #333;
  margin-top: 6px;
}

/* =========================
   TIPOGRAFIA EM CARDS (ajuste fino)
   ========================= */
.sobre-page .feature-card p {      /* caso reutilize .feature-card */
  color: #555;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 992px) {
  .sobre-page .about-grid { grid-template-columns: 1fr; } /* empilha texto e imagem */
  .sobre-page .stats-grid { grid-template-columns: repeat(3, 1fr); } /* mantém 3 se couber */
}
@media (max-width: 680px) {
  .sobre-page .stats-grid { grid-template-columns: 1fr; }  /* métricas em 1 coluna */
}


/* =========================================================
   Página Nossos Serviços — Complemento
   ========================================================= */

/* Escopo */
.servicos-page .hero {
  min-height: 42vh;
  background: #000 url("img/hero-servicos.jpg") center/cover no-repeat;
}
.servicos-page .hero-overlay {
  background: rgba(0,0,0,.55);
}
.servicos-page .hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}
.servicos-page .hero-subtitle {
  color: #ddd;
  font-size: .98rem;
  margin-top: 6px;
}

/* ===== Grid de serviços ===== */
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.servico-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease;
}
.servico-card:hover {
  transform: translateY(-3px);
}
.servico-card h3 {
  font-size: 1rem;
  color: #111;
  margin-bottom: 8px;
}
.servico-card .price {
  color: #d9a302;
  font-weight: 700;
  font-size: 1rem;
}
.servico-card .tempo {
  display: inline-block;
  margin-top: 4px;
  font-size: .85rem;
  color: #666;
}

/* ===== CTA ===== */
.cta-band {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 42px 0;
}
.cta-band h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.cta-band.cta-band p {
  color: #7f7e7e;
  margin-bottom: 16px;
}
.cta-band .btn-gold {
  font-size: 1rem;
  padding: 12px 20px;
}

/* ===== Responsivo ===== */
@media (max-width: 680px) {
  .servicos-grid {
       grid-template-columns: 1fr;
  }
}


/* =========================================================
   Página Nossa Equipe — Complemento
   ========================================================= */

/* Hero */
.equipe-page .hero {
  min-height: 42vh;
  background: #000 url("img/hero-equipe.jpg") center/cover no-repeat;
}
.equipe-page .hero-overlay {
  background: rgba(0,0,0,.55);
}
.equipe-page .hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}
.equipe-page .hero-subtitle {
  color: #ddd;
  font-size: .98rem;
  margin-top: 6px;
}

/* Introdução */
.equipe-page .section-light {
  background: #f5f6f8;
  color: #111;
  padding: 42px 0;
}

.section-light p {
  color: #444;
  line-height: 1.6;
  margin-bottom: 12px;
}

.equipe-page .section-title {
  margin-bottom: 12px;
}

/* Grid de equipe */
.equipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.equipe-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease;
}
.equipe-card:hover {
  transform: translateY(-3px);
}
.equipe-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.equipe-card .card-content {
  padding: 14px;
}
.equipe-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: #111;
}
.equipe-card p {
  font-size: .9rem;
  color: #555;
  margin-bottom: 10px;
}
.social-icons {
  display: flex;
  gap: 8px;
}
.social-icons img {
  width: 20px;
  height: 20px;
}

/* CTA */
.cta-band {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 42px 0;
}
.cta-band h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.cta-band.cta-band p {
  color: #7f7e7e; /* corrigido para branco */
  margin-bottom: 16px;
  font-size: 1rem;
}

.cta-band .btn-gold {
  font-size: 1rem;
  padding: 12px 20px;
}

/* Responsivo */
@media (max-width: 680px) {
  .equipe-grid {
    grid-template-columns: 1fr;
  }
}

/*=========================================================
   Modal de Envio de Currículo — Complemento
========================================================= */

/* Overlay com efeito blur */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none; /* Oculta por padrão */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease forwards;
}

/* Animação de entrada */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Conteúdo da modal */
.modal-content {
  background: #fff;
  max-width: 500px;
  width: 90%;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  animation: modalShow 0.3s ease forwards;
}

@keyframes modalShow {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Botão fechar */
.close-modal {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  color: #333;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close-modal:hover {
  color: #d4af37; /* dourado */
}

/* Título */
.modal-content h3 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  font-weight: 700;
  color: #222;
}

/* Texto */
.modal-content p {
  font-size: 1rem;
  margin-bottom: 16px;
  color: #555;
}

/* Formulário */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="file"],
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: #d4af37;
  outline: none;
}

/* Botão enviar */
.btn.btn-gold {
  background: #d4af37;
  color: #000;
  border: none;
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.3s ease;
}
.btn.btn-gold:hover {
  background: #c19e35;
}

/* Status */
.form-status {
  margin-top: 12px;
  font-size: 14px;
  color: #333;
}

/* Responsivo */
@media (max-width: 480px) {
  .modal-content {
       padding: 20px;
  }
  .modal-content h3 {
    font-size: 1.4rem;
  }


/* =========================================================
   Página Nossa Loja — Complemento
   ========================================================= */
/* Hero */
.loja-page .hero {
  min-height: 42vh;
  background: #000 url("img/hero-loja.jpg") center/cover no-repeat;
}
.loja-page .hero-overlay {
  background: rgba(0,0,0,.55);
}
.loja-page .hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}
.loja-page .hero-subtitle {
  color: #ddd;
  font-size: .98rem;
  margin-top: 6px;
}

/* Faixa dourada */
.promo-band {
  background: #d9a302;
  color: #000;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
}

/* Grid de produtos */
.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.produto-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease;
}
.produto-card:hover {
  transform: translateY(-3px);
}
.produto-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.produto-card .card-content {
  padding: 14px;
  text-align: center;
}
.produto-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
   color: #111;
}
.produto-card .price {
  color: #d9a302;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Benefícios */
.beneficios-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}
.beneficio {
  text-align: center;
  color: #fff;
}
.beneficio span {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 6px;
}

/* Responsivo */
@media (max-width: 680px) {
  .produtos-grid {
    grid-template-columns: 1fr;
  }
  .beneficios-grid {
    flex-direction: column;
    gap: 12px;
  }
}

/*=========================================================
   Página Agendamento — Complemento
========================================================= */

/* Ajuste para Calendly */

.calendly-inline-widget {
  min-width: 320px;
  height: 700px;
  background: #fff; /* fundo branco para não ficar tudo preto */
  border-radius: 12px;
  overflow: hidden;
  margin: 20px auto;
}

/* Centralização */
.center {
  text-align: center;
}

.section-light p {
  color: #f1eeee; /* Parágrafo mais visível */
  font-size: 1rem;
  margin-bottom: 16px;
}