/* ══════════════════════════════════════════════════════════════════════
   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;
  --terracotta-ink: #A84E2B;     /* terracotta for text and button fills, 5.5:1 with white */
  --dourado-ink: #7F621C;        /* gold for text on light backgrounds */
  --dourado: #D4A843;
  --dourado-light: #E8C876;
  --marfim: #FAF6EE;
  --calcada: #F2EDE3;
  --cortica: #76603F;           /* darkened from #8B7355 for 4.5:1 on white and calcada */
  --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-ink); 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: #F2A27F; font-style: normal; }
.nav.scrolled .nav-name em, .nav:has(.nav-links.open) .nav-name em { color: var(--terracotta-ink); }
.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-ink);
  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); }

/* Contact button in the phone header. The full nav-cta lives inside the
   closed drawer below 860px, so phones would otherwise have no visible action. */
.nav-cta-mobile { display: none; }

/* 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-cta-mobile {
    display: inline-flex; align-items: center; min-height: 40px;
    margin-left: auto; margin-right: 10px; padding: 8px 16px; font-size: 13px;
  }

  .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-ink);
  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: #9A9AA6;
}
.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: var(--noite);
  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; }
}

/* ════════════════════════════════════════════════════════════════════
   PHONE CONTACT BAR (render_footer with 'contact_bar')
   Service and guide pages only. Replaces the floating WhatsApp button on
   phones. Hidden on wider screens, where the hero and bands are in view.
   ════════════════════════════════════════════════════════════════════ */
.contact-bar { display: none; }

@media (max-width: 640px) {
  .has-contact-bar .wa-float { display: none; }
  .contact-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; gap: 10px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: var(--marfim);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(26, 26, 46, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
  }
  .contact-bar.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
  .contact-bar a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 999px;
    font-family: var(--font-body); font-size: 15px; font-weight: 700; text-decoration: none;
  }
  .contact-bar-main { flex: 1 1 auto; background: var(--terracotta-ink); color: var(--white); }
  .contact-bar-wa { flex: 0 0 auto; padding: 0 20px; background: #25D366; color: var(--noite); }
  .contact-bar a:focus-visible { outline: 3px solid var(--azulejo); outline-offset: 2px; }
  .has-contact-bar .footer { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-bar { transition: none; }
}
@media print { .contact-bar { display: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   SHARE ROW (render_share in _lib/template.php)
   Small pill buttons in the library's own pill language. Sits on light
   surfaces only.
   ════════════════════════════════════════════════════════════════════ */
.share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--border);
}
.share-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--cortica); margin-right: 4px;
}
.share-btn {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--white);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--noite);
  cursor: pointer; transition: transform 160ms ease, border-color 160ms ease;
}
.share-btn:hover { transform: translate(-1px, -1px); border-color: var(--azulejo); }
.share-btn:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.share-btn[hidden] { display: none; }
.share-btn.is-on { background: var(--verde); border-color: var(--verde); color: var(--white); }
.share-status { font-size: 13px; font-weight: 600; color: var(--verde); min-height: 1em; }
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } .share-btn:hover { transform: none; } }
@media print { .share-row { display: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   NUNO'S VOICE (the play button, see blog/lib/audio.php and blog/say.js)
   Shared so a landing page can carry a recorded word the same way the
   pronunciation guide does. The eight-word panel stays in blog.css.
   ════════════════════════════════════════════════════════════════════ */
.say {
  font: inherit;
  color: var(--azulejo);
  background: none;
  border: 0;
  padding: 0 0 1px;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px dotted rgba(27, 77, 142, 0.55);
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.say em { font-style: italic; }
.say:hover { color: var(--azulejo-dark); border-bottom-color: var(--azulejo); }
.say:focus-visible {
  outline: 2px solid var(--azulejo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* a small triangle, so a recorded word reads differently to an ordinary italic */
.say-icon {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: 0.06em;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms ease;
}
.say:hover .say-icon { opacity: 1; }
.say.playing { color: var(--terracotta-ink); border-bottom-color: var(--terracotta); }
.say.playing .say-icon {
  opacity: 1;
  border-left-color: var(--terracotta);
  transform: scale(1.15);
}
.say.failed { color: var(--cortica); border-bottom-style: solid; }

@media (prefers-reduced-motion: reduce) {
  .say, .say-icon { transition: none; }
  .say.playing .say-icon { transform: none; }
}

/* while a clip is fetching */
.say.loading { opacity: 0.75; }
.say.failed .say-icon { opacity: 0.35; }
.say.failed { cursor: default; }

/* Visually hidden, still read out */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════════════════
   ENQUIRY FORM (shared by the homepage, lessons page and level test)
   ═══════════════════════════════════════════════════════════════════ */
/* Cloudflare Turnstile widget container */
.form-turnstile {
  display: flex;
  justify-content: center;
  margin: 18px 0 8px;
}
.form-turnstile .cf-turnstile {
  min-height: 65px;
}
.contact-facts {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 32px; margin-top: 32px; padding: 20px 24px;
  background: var(--white); border: 2px solid var(--border); border-radius: 999px;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.contact-fact { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.contact-fact strong {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--azulejo);
}
.contact-fact span { color: var(--cortica); margin-top: 2px; }
@media (max-width: 640px) {
  .contact-facts { gap: 16px 24px; border-radius: 20px; }
}

.contact-form {
  position: relative; margin-top: 48px;
  background: var(--white); border: 2px solid var(--noite); border-radius: 20px;
  padding: 40px; box-shadow: var(--shadow-tile-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-field { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-field label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cortica); margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--noite);
  padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--marfim); transition: border-color 200ms, box-shadow 200ms;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--azulejo);
  box-shadow: 4px 4px 0 0 var(--azulejo);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-submit { margin-top: 8px; justify-content: center; width: 100%; }
.form-success, .form-error {
  max-width: 800px; margin: 32px auto 0; padding: 20px 24px;
  border-radius: 16px; font-size: 15px; text-align: center;
  border: 2px solid var(--noite);
}
.form-success {
  background: rgba(45,106,79,0.08); color: var(--verde);
  box-shadow: 6px 6px 0 0 var(--verde);
}
.form-success strong { font-family: var(--font-display); font-size: 18px; display: block; margin-bottom: 4px; }
.form-error {
  background: rgba(196,97,58,0.08); color: var(--terracotta-ink);
  box-shadow: var(--shadow-warm);
}
.form-error a { color: var(--terracotta-ink); text-decoration: underline; font-weight: 600; }

@media (max-width: 640px) {
  .contact-form { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
}


/* Shared form extras, inline errors, invalid fields, the rating line, the help text. */
.form-field [aria-invalid="true"] { border-color: var(--terracotta); }
.form-inline-error {
  margin: 4px 0 16px; padding: 14px 18px; border-radius: 12px;
  background: rgba(196,97,58,0.08); border: 2px solid var(--terracotta);
  color: var(--noite); font-size: 15px; line-height: 1.5;
}
.form-inline-error a, .form-error a { color: var(--azulejo); text-decoration: underline; font-weight: 600; }
.form-rating { margin: 14px 0 0; text-align: center; font-size: 14px; }
.form-rating a { color: var(--noite); text-decoration: none; font-weight: 600; }
.form-rating a span { color: #9A6B00; letter-spacing: 1px; }
.form-rating a:hover { text-decoration: underline; }
.form-help {
  max-width: 720px; margin: 24px auto 0; text-align: center;
  font-size: 14px; color: var(--noite); line-height: 1.6;
}
.form-help a { color: var(--azulejo); border-bottom: 1px solid rgba(27,77,142,0.4); }
.form-success:focus { outline: none; }

@media (max-width: 400px) {
  .nav-name { font-size: 16px; }
  .nav-brand { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONVERSION, shared by the lessons page and the guides
   A first-screen action, the Google rating, and a mid-page CTA band.
   ═══════════════════════════════════════════════════════════════════ */
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: 26px;
}
.hero-actions .btn { padding: 13px 26px; font-size: 15px; }
.hero-rating, .band-rating { margin: 0; font-size: 14px; font-weight: 600; }
.hero-rating a, .band-rating a { color: var(--white); text-decoration: none; }
.hero-rating a span, .band-rating a span { color: #F0C860; letter-spacing: 1px; margin-right: 4px; }
.hero-rating a:hover, .band-rating a:hover { text-decoration: underline; }
.band-rating { margin-top: 18px; }
.lp-tldr-cta { margin: 14px 0 0 !important; font-weight: 700; }
.lp-tldr-cta a { color: var(--azulejo); border-bottom: 2px solid rgba(27,77,142,0.35); }
.lp-tldr-cta a:hover { border-bottom-color: var(--azulejo); }

/* The mid-page band sits inside the article, so undo the prose link styles. */
body.landing .lp-prose .lp-cta-band { margin: 56px 0; }
body.landing .lp-prose .lp-cta-band p { margin: 0 0 24px; }
body.landing .lp-prose .lp-cta-band .band-rating { margin: 18px 0 0; }
body.landing .lp-prose .lp-cta-band a { border: 2px solid var(--noite); }
body.landing .lp-prose .lp-cta-band .band-rating a { border: 0; color: var(--white); }

/* WhatsApp green with white text measured 1.98:1. Dark text reads at 8.6:1. */
body.landing .lp-cta-wa { color: var(--noite) !important; }

/* Lessons page form */
.lessons-contact { padding: 88px 0 72px; background: var(--marfim); }
.lessons-contact-intro { color: var(--noite); margin: 14px auto 0; max-width: 520px; }
@media (max-width: 640px) {
  .lessons-contact { padding: 64px 0 48px; }
  body.landing .lp-prose .lp-cta-band { margin: 40px 0; padding: 32px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CTA BAND, one component for the Journal, the Library and the calculator
   ═══════════════════════════════════════════════════════════════════ */
.cta-band {
  max-width: 760px; margin: 64px auto; padding: 40px 36px 32px;
  background: linear-gradient(135deg, var(--azulejo) 0%, var(--azulejo-dark) 100%);
  color: var(--white); border: 2px solid var(--noite); border-radius: 18px;
  box-shadow: 8px 8px 0 0 var(--terracotta); text-align: center;
}
.cta-band-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white); margin: 0 auto 14px; display: block;
}
.cta-band-title {
  font-family: var(--font-display); font-weight: 600; color: var(--white);
  font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0 0 12px;
}
.cta-band-text { margin: 0 auto 22px; max-width: 520px; font-size: 16px; line-height: 1.55; color: #E3ECF8; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-band-wa {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: #25D366; color: var(--noite); border: 2px solid var(--noite);
  font-weight: 700; font-size: 15px;
}
.cta-band-wa:hover { transform: translate(-2px, -2px); }
@media (max-width: 640px) {
  .cta-band { margin: 48px 16px; padding: 32px 20px 26px; }
  .cta-band-actions .btn, .cta-band-wa { width: 100%; justify-content: center; }
}

/* Reduced motion, site-wide. Covers the homepage hero, the journal hero drift
   and fade-ups, the spinning portrait ring and every reveal, without having to
   list each animation. Reveals end visible rather than hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom,
  .js .reveal, .js .reveal-left, .js .reveal-right, .js .reveal-zoom { opacity: 1 !important; transform: none !important; }
}

/* 44px tap targets for the share buttons, label on its own row on phones */
.share-btn { min-height: 44px; }
@media (max-width: 480px) {
  .share-label { flex-basis: 100%; margin: 0 0 2px; }
}

/* A 44px tap area round each recorded word, without changing the line height */
.say { position: relative; }
.say::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Related guides, two cards side by side on every guide */
body.landing .lp-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { body.landing .lp-related-grid { grid-template-columns: 1fr; } }