/* =============================================================
   base.css — Reset, Variáveis e Estilos Globais
   ============================================================= */

/* ── RESET & BOX-MODEL ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── VARIÁVEIS ── */
:root {
  /* Cores */
  --red:        #c8121a;
  --red-dark:   #8e0b11;
  --red-light:  #f9ecec;
  --white:      #ffffff;
  --gray-100:   #f7f7f7;
  --gray-200:   #ebebeb;
  --gray-500:   #888888;
  --gray-800:   #222222;

  /* Tipografia */
  --font-head: "Sora", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* Layout */
  --max-width:   1200px;
  --section-pad: 72px 5%;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.6;
}

a   { text-decoration: none; }
img { display: block; max-width: 100%; }

section { padding: var(--section-pad); }

/* Container padrão */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Labels e títulos de seção */
.section-label {
  display: inline-block;
  background: var(--red-light);
  color: var(--red-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--gray-800);
  margin-bottom: 0.8rem;
}
.section-title em { font-style: normal; color: var(--red); }

.section-sub {
  font-size: 0.97rem;
  color: var(--gray-500);
  max-width: 560px;
  margin-bottom: 2.5rem;
}

/* Garante que o botão limpe os estilos padrões de botão do navegador */
.dropdown-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

/* Rotação da setinha quando o dropdown estiver ativo */
.dropdown.active .arrow {
  transform: rotate(180deg);
  display: inline-block;
}

/* Comportamento Mobile do Dropdown */
@media (max-width: 900px) {
  .dropdown-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .dropdown.active .dropdown-menu {
    display: block;
    max-height: 300px; /* Altura suficiente para os links internos */
    padding-left: 15px; /* Identação interna no mobile */
  }
}

/* ── ANIMAÇÕES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(30px) scale(0.85); }
  70%  { transform: translateY(-6px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.animate   { animation: fadeUp 0.5s ease both; }
.delay-1   { animation-delay: 0.1s; }
.delay-2   { animation-delay: 0.2s; }
.delay-3   { animation-delay: 0.3s; }