/* =====================================================
   FORMIGA OPERÁRIA — style.css
   Tokens de marca + estilos para a estrutura atual do site
   ===================================================== */

:root {
  --color-black: #111111;
  --color-white: #FFFFFF;
  --color-gray: #F5F5F3;
  --color-red: #C62828;
  --color-text-secondary: #57564F;
  --color-border: #E3E1DB;

  --font-base: 'Poppins', sans-serif;

  --navbar-height: 76px;
  --section-padding: 7.5rem;
  --section-padding-mobile: 4rem;
}

/* =====================================================
   BASE
   ===================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-weight: 300;
  color: var(--color-black);
  background-color: var(--color-white);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--color-red); color: var(--color-white); }

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

img { max-width: 100%; height: auto; }

/* Compensa o menu fixo ao navegar por âncora */
#about, #pillars, #follow {
  scroll-margin-top: var(--navbar-height);
}

/* =====================================================
   NAVBAR
   ===================================================== */

.custom-navbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  transition: box-shadow 0.2s ease;
}

.brand-logo {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-black) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-logo__img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
}

.navbar-toggler {
  border: none;
  font-size: 1.5rem;
  color: var(--color-black);
  padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus { box-shadow: none; }

.navbar-nav .nav-link {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-black);
  padding: 0.5rem 1rem;
  position: relative;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-black);
  color: var(--color-white) !important;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--color-black);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover { background: var(--color-red); border-color: var(--color-red); }

/* =====================================================
   BOTÕES
   ===================================================== */

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.6rem;
  border-radius: 4px;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.primary-button {
  background: var(--color-black);
  color: var(--color-white) !important;
  border: 1px solid var(--color-black);
}
.primary-button:hover { background: var(--color-red); border-color: var(--color-red); transform: translateY(-2px); color: var(--color-white) !important; }

.secondary-button {
  background: transparent;
  color: var(--color-black) !important;
  border: 1px solid var(--color-black);
}
.secondary-button:hover { background: var(--color-black); color: var(--color-white) !important; transform: translateY(-2px); }

/* Chamada final usa fundo escuro: o botão precisa inverter */
.final-cta-section .primary-button {
  background: var(--color-red);
  border-color: var(--color-red);
}
.final-cta-section .primary-button:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black) !important;
}

/* =====================================================
   HERO
   ===================================================== */

.hero-section {
  padding-top: var(--navbar-height);
  background: var(--color-white);
}

.hero-content { padding: 3rem 0; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
}

.hero-description {
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin-bottom: 2.25rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-character {
  width: 100%;
  max-width: 380px;
}

/* =====================================================
   MANIFESTO / STATEMENT
   ===================================================== */

.statement-section {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--section-padding) 0;
}

.statement-section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 44rem;
  margin: 0 auto 1.5rem;
}

.statement-section p {
  font-weight: 300;
  font-size: 1.1rem;
  color: #C9C8C2;
  max-width: 38rem;
  margin: 0 auto;
}

/* =====================================================
   PILARES
   ===================================================== */

.pillars-section {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.section-header h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 1rem;
}

.section-header p {
  font-weight: 300;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  max-width: 32rem;
  margin: 0 auto;
}

.pillar-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  background: var(--color-gray);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pillar-card:hover {
  border-color: var(--color-red);
  transform: translateY(-4px);
}

.pillar-card i {
  font-size: 1.6rem;
  color: var(--color-red);
  margin-bottom: 1.25rem;
  display: block;
}

.pillar-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.pillar-card p {
  font-weight: 300;
  font-size: 0.98rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* =====================================================
   SOBRE
   ===================================================== */

.about-section {
  padding: var(--section-padding) 0;
  background: var(--color-gray);
}

.about-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 1.5rem;
  max-width: 36rem;
}

.about-section p {
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  max-width: 42rem;
  margin-bottom: 1.1rem;
}

/* =====================================================
   ASSINATURA
   ===================================================== */

.signature-section {
  padding: 3.5rem 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.signature-section p {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--color-black);
}

.signature-section span {
  display: block;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* =====================================================
   ACOMPANHE / FOLLOW
   ===================================================== */

.follow-section {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.social-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2.5rem;
  height: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.social-card:hover { border-color: var(--color-black); background: var(--color-gray); }

.social-card i {
  font-size: 1.5rem;
  color: var(--color-red);
  margin-bottom: 1rem;
  display: block;
}

.social-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.social-card p {
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.social-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-black);
  transition: gap 0.2s ease, color 0.2s ease;
}
.social-button:hover { gap: 0.85rem; color: var(--color-red); }

/* =====================================================
   CTA FINAL
   ===================================================== */

.final-cta-section {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--section-padding) 0;
}

.final-cta-section h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.final-cta-section p {
  font-weight: 300;
  font-size: 1.15rem;
  color: #C9C8C2;
  margin-bottom: 2.25rem;
}

/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 3rem 0 2.5rem;
}

.footer h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.footer > .container > p {
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
}

.footer-links a {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-black);
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--color-red); }

/* =====================================================
   RESPONSIVO
   ===================================================== */

@media (max-width: 991.98px) {
  :root { --section-padding: var(--section-padding-mobile); }

  .hero-section .row.min-vh-100 { min-height: auto !important; }
  .hero-content { padding: 2.5rem 0 1rem; text-align: left; }
  .hero-character { max-width: 260px; margin-top: 1rem; }

  .navbar-collapse { padding-top: 1rem; }
  .navbar-nav .nav-link::after { display: none; }
  .nav-cta { justify-content: center; margin-top: 0.5rem; }
}