/* Carregar DEPOIS de style.css. Só ajusta layout, não muda cores/fontes. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, iframe { max-width: 100%; }

/* Botão hambúrguer (escondido no desktop) */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; position: relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 2px;
  background: currentColor; transition: transform .25s, background .25s;
}
.menu-toggle span { top: 21px; }
.menu-toggle span::before { top: -7px; left: 0; right: 0; }
.menu-toggle span::after { top: 7px; left: 0; right: 0; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ===== Tablet ===== */
@media (max-width: 992px) {
  .hero { display: flex; flex-direction: column-reverse; height: auto; min-height: 0; }
  .hero-left, .hero-right { width: 100%; max-width: 100%; flex: none; }
  .hero-left { padding: 2.5rem 1.5rem; text-align: center; }
  .hero-content { max-width: 600px; margin: 0 auto; }
  .hero-line { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-right { height: 42vh; max-height: 420px; }
  .hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .header { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .menu-toggle { display: block; color: inherit; }
  .navbar { display: none; width: 100%; }
  .navbar.open { display: block; }
  .navbar ul { flex-direction: column; gap: 0; padding: 0 0 .75rem; }
  .navbar li { width: 100%; }
  .navbar a { display: block; padding: .85rem 1rem; }

  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-logo img { max-width: 200px; height: auto; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .btn-gold, .btn-outline { display: block; width: 100%; text-align: center; }

  .areas-grid { grid-template-columns: 1fr; }
  .area-card { width: 100%; }

  .team-list { flex-direction: column; align-items: center; gap: 2rem; }
  .team-card { width: 100%; max-width: 340px; }
  .team-photo img { width: 100%; height: auto; }

  .contato-grid { display: flex; flex-direction: column; gap: 2rem; }
  .contact-left, .contact-form, .contact-map { width: 100%; }
  .contact-form input, .contact-form textarea { width: 100%; font-size: 16px; } /* evita zoom no iOS */
  .contact-map iframe { width: 100%; height: 260px; border: 0; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid img { margin: 0 auto; max-width: 150px; }
  .floating-whatsapp { right: 1rem; bottom: 1rem; }
}

/* ===== Logo do footer maior ===== */
footer .footer-grid img {
  width: clamp(200px, 20vw, 280px) !important;
  max-width: 100% !important;
  height: auto !important;
}
@media (max-width: 520px) {
  footer .footer-grid img {
    width: 220px !important;
    margin: 0 auto !important;
  }
}

/* ===== Logo no header ===== */
.header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between !important;
  gap: 1rem 2rem;
  padding: .6rem clamp(1rem, 5vw, 4rem) !important;
  background: rgba(248, 246, 243, .97) !important;
}
.header-logo { display: block; flex: none; }
.header-logo img { display: block; height: 76px; width: auto; }
.navbar { margin-left: auto; }
.hero-logo { display: none !important; }
.hero .hero-left { align-items: center; padding-top: 7rem; }

@media (max-width: 768px) {
  .header-logo img { height: 52px; }
  .navbar { margin-left: 0; }
}

/* ===== Header compacto (zera espaços vindos do style.css) ===== */
.header {
  background: #f8f6f3 !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: center !important;
}
.header-logo { margin: 0 !important; padding: 0 !important; }
.header-logo img { height: 64px !important; width: auto !important; margin: 0 !important; }

@media (min-width: 769px) {
  .header .navbar {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }
  .header .navbar ul {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    align-items: center;
  }
  .header .navbar li { margin: 0 !important; padding: 0 !important; }
  .header .navbar a { padding: .5rem 0 !important; }
}

/* ===== Hero: conteúdo abaixo do header fixo ===== */
.hero .hero-left {
  height: auto !important;
  min-height: 100vh !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 3rem !important;
}
.hero .hero-content {
  margin-top: 0 !important;
  padding-top: 7rem !important;   /* maior que a altura do header (~85px) */
  transform: none !important;
}

@media (max-width: 992px) {
  .hero { padding-top: 4.5rem !important; }  /* foto não fica sob o header */
  .hero .hero-left { min-height: 0 !important; padding-top: 2rem !important; }
  .hero .hero-content { padding-top: 0 !important; }
}

/* ===== Telas grandes: textos escalam com a largura (>= 993px) ===== */
@media (min-width: 993px) {
  /* alinhamento lateral igual no header e no hero */
  .header { padding-left: clamp(1.5rem, 4vw, 8rem) !important; padding-right: clamp(1.5rem, 4vw, 8rem) !important; }
  .hero .hero-left { padding-left: clamp(1.5rem, 4vw, 8rem) !important; }

  /* header */
  .header-logo img { height: clamp(64px, 4.6vw, 130px) !important; }
  .header .navbar a { font-size: clamp(.8rem, .85vw, 1.35rem) !important; }
  .header .navbar ul { gap: clamp(1.5rem, 2.6vw, 4.5rem) !important; }

  /* hero */
  .hero .hero-content { max-width: 46vw !important; padding-top: clamp(7rem, 7vw, 12rem) !important; }
  .hero h1 { font-size: clamp(2.4rem, 4.6vw, 8.5rem) !important; }
  .hero-line { width: clamp(55px, 4vw, 120px) !important; height: clamp(2px, .15vw, 4px) !important; margin: clamp(1.5rem, 2vw, 3.5rem) 0 !important; }
  .hero p { font-size: clamp(1rem, 1.25vw, 2.2rem) !important; max-width: 30em !important; }
  .hero-buttons { gap: clamp(.9rem, 1vw, 1.8rem) !important; margin-top: clamp(1.5rem, 2.2vw, 4rem) !important; }
  .btn-gold, .btn-outline {
    font-size: clamp(.8rem, .9vw, 1.5rem) !important;
    padding: clamp(.9rem, 1.1vw, 1.9rem) clamp(1.5rem, 2vw, 3.5rem) !important;
  }

  /* botão flutuante */
  .floating-whatsapp { font-size: clamp(.9rem, 1vw, 1.5rem) !important; padding: clamp(.8rem, .9vw, 1.4rem) clamp(1.3rem, 1.6vw, 2.4rem) !important; }
}

/* ===== Botões do hero: acompanham o tamanho do texto ===== */
@media (min-width: 769px) {
  .hero .btn-gold, .hero .btn-outline {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero .hero-buttons { flex-wrap: wrap; align-items: center; }
}

/* ===== Formulário de contato: mensagem de retorno e campo anti-robô ===== */
.campo-oculto { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: .75rem; font-size: .95rem; }
.form-status.ok { color: #2e7d32; }
.form-status.erro { color: #c62828; }

/* ===== Celular: cabeçalho, logo e botão do WhatsApp ===== */
@media (max-width: 768px) {
  .header {
    background: #f8f6f3 !important;
    padding: .5rem 1rem !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .header .header-logo { flex: 0 1 auto !important; max-width: 70% !important; }
  .header .header-logo img {
    height: 46px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }
  .header .menu-toggle { display: block !important; flex: none; color: #1f2430 !important; }
  .header .menu-toggle span,
  .header .menu-toggle span::before,
  .header .menu-toggle span::after { background-color: #1f2430; }
  .header .menu-toggle[aria-expanded="true"] span { background-color: transparent; }

  .header .navbar { order: 3; width: 100% !important; flex-basis: 100% !important; margin: 0 !important; }
  .header .navbar a { color: #1f2430; }

  .floating-whatsapp {
    font-size: .8rem !important;
    padding: .6rem 1rem !important;
    right: .75rem !important;
    bottom: .75rem !important;
  }
}