/* ══════════════════════════════════════════════════════════════════════
   site.css — shared foundations across all pages
   Tokens, reset, nav, progress bar, footer, shared button pattern.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --azulejo: #1B4D8E;
  --azulejo-light: #3B7DD8;
  --azulejo-dark: #133A6B;
  --terracotta: #C4613A;
  --terracotta-light: #D4795A;
  --dourado: #D4A843;
  --dourado-light: #E8C876;
  --marfim: #FAF6EE;
  --calcada: #F2EDE3;
  --cortica: #8B7355;
  --noite: #1A1A2E;
  --verde: #2D6A4F;
  --border: #D6CFC0;
  --white: #FFFFFF;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-tile: 4px 4px 0 0 var(--azulejo);
  --shadow-tile-lg: 8px 8px 0 0 var(--border);
  --shadow-warm: 6px 6px 0 0 var(--terracotta);
  --shadow-gold: 6px 6px 0 0 var(--dourado);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--noite);
  background: var(--marfim);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  font-feature-settings: "liga", "kern";
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
::selection { background: var(--terracotta); color: var(--white); }

/* ════════════════════════════════════════════════════════════════════
   PROGRESS BAR (scroll-driven gold-to-terracotta hairline)
   ════════════════════════════════════════════════════════════════════ */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200; pointer-events: none;
}
.progress-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--dourado), var(--terracotta));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: grow linear forwards;
    animation-timeline: scroll(root);
  }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ════════════════════════════════════════════════════════════════════
   NAV, transparent over hero, solid past hero
   ════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(250,246,238,0);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 400ms ease, border-color 400ms ease;
}
.nav.scrolled {
  background: rgba(250,246,238,0.82);
  border-bottom-color: rgba(214,207,192,0.4);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 32px;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.nav.scrolled .nav-brand { color: var(--noite); }
.nav-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--azulejo); object-fit: cover;
}
.nav-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
}
.nav-name em { color: var(--terracotta); font-style: normal; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  font-size: 14px; font-weight: 600;
}
.nav-links a { transition: color 200ms ease; color: rgba(255,255,255,0.72); }
.nav.scrolled .nav-links a { color: var(--cortica); }
.nav-links a:hover { color: var(--dourado); }
.nav.scrolled .nav-links a:hover { color: var(--azulejo); }
.nav-links a.active { color: var(--white); }
.nav.scrolled .nav-links a.active { color: var(--noite); }

.nav-cta {
  padding: 9px 20px; border-radius: 999px;
  background: var(--terracotta);
  color: var(--white) !important;
  border: 2px solid var(--noite);
  box-shadow: var(--shadow-tile);
  font-size: 13px; font-weight: 700;
  transition: transform 300ms var(--ease-bounce), box-shadow 300ms var(--ease-bounce);
}
.nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--azulejo); }
.nav-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--azulejo); }

/* Hamburger toggle, desktop hidden */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -10px;
  color: var(--white);
  transition: color 400ms ease;
}
.nav.scrolled .nav-toggle { color: var(--noite); }
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 250ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-inner { padding: 0 20px; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 20px 22px;
    background: rgba(250, 246, 238, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(26, 26, 46, 0.1);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 250ms ease, opacity 200ms ease;
    font-size: 16px;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a:not(.nav-cta),
  .nav.scrolled .nav-links a:not(.nav-cta) {
    display: block;
    padding: 14px 4px;
    color: var(--noite);
    border-bottom: 1px solid rgba(214, 207, 192, 0.5);
  }
  .nav-links a:not(.nav-cta):hover,
  .nav.scrolled .nav-links a:not(.nav-cta):hover { color: var(--azulejo); }
  .nav-links a.active,
  .nav.scrolled .nav-links a.active { color: var(--azulejo); }
  .nav-links .nav-cta {
    justify-content: center;
    margin-top: 16px;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* When drawer is open, force solid nav chrome so brand/toggle are readable */
  .nav:has(.nav-links.open) {
    background: rgba(250, 246, 238, 0.98);
    border-bottom-color: rgba(214, 207, 192, 0.4);
  }
  .nav:has(.nav-links.open) .nav-brand { color: var(--noite); }
  .nav:has(.nav-links.open) .nav-toggle { color: var(--noite); }
}

/* ════════════════════════════════════════════════════════════════════
   SHARED BUTTONS (used across pages)
   ════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 15px;
  border: 2px solid var(--noite);
  transition: transform 300ms var(--ease-bounce), box-shadow 300ms var(--ease-bounce);
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: translate(2px, 2px); }

.btn-terracotta {
  background: var(--terracotta);
  color: var(--white) !important;
  box-shadow: var(--shadow-warm);
}
.btn-terracotta:hover { box-shadow: 8px 8px 0 0 var(--terracotta); }
.btn-terracotta:active { box-shadow: 3px 3px 0 0 var(--terracotta); }

.btn-outline {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgba(255,255,255,0.2); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER (site-wide dark bar)
   ════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--noite);
  color: rgba(255,255,255,0.6);
  padding: 48px 32px;
  text-align: center;
}
.footer-inner { max-width: 720px; margin: 0 auto; }
.footer p { font-size: 13px; margin-bottom: 4px; }
.footer a {
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 200ms, border-color 200ms;
}
.footer a:hover { color: var(--dourado); border-color: var(--dourado); }
.footer-fine {
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.footer-guides {
  margin-bottom: 22px;
  font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 8px 12px;
}
.footer-guides-label {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--dourado);
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.footer-guides a {
  color: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.footer-guides a:hover {
  color: var(--dourado) !important;
  border-bottom-color: var(--dourado);
}
.footer-guides-sep { color: rgba(255, 255, 255, 0.3); }

/* ════════════════════════════════════════════════════════════════════
   FLOATING WHATSAPP BUTTON (sitewide)
   ════════════════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(37, 211, 102, 0.28);
  opacity: 0;
  transform: translateY(12px);
  animation: wa-appear 450ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;
  transition: transform 280ms var(--ease-bounce), box-shadow 280ms ease;
}
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22), 0 5px 12px rgba(37, 211, 102, 0.38);
}
.wa-float:active { transform: translateY(0); }
.wa-float svg { flex-shrink: 0; display: block; }
.wa-float-label { white-space: nowrap; }

/* The library is a reading surface. The floating button covers the text on
   phones, and every item already ends with its own lesson CTA, so hide it
   here. Declared in site.css (render blocking) so it never flashes in. */
body.library .wa-float { display: none; }

@keyframes wa-appear {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .wa-float {
    padding: 0;
    width: 56px;
    height: 56px;
    justify-content: center;
    right: 18px;
  }
  .wa-float-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .wa-float:hover { transform: none; }
}