/* cursos/templates/cursos/base_cursos.html — extracted from inline <style> in PR-11. */

  /* ═══════════════════════════════════════════════════════════════════
     CURSOS — app-specific tokens (dark default, light override)
     Base colors come from tokens.css; these are cursos-only additions.
     ═══════════════════════════════════════════════════════════════════ */
  [data-app="cursos"] {
    --surface: rgba(240, 235, 224, 0.04);
    --rule-color: rgba(240, 235, 224, 0.1);
    --card-border: rgba(240, 235, 224, 0.06);
    --footer-rule: rgba(240, 235, 224, 0.06);
    --maxw: 1100px;
  }

  [data-theme="light"][data-app="cursos"] {
    --surface: rgba(27, 42, 74, 0.04);
    --rule-color: rgba(27, 42, 74, 0.12);
    --card-border: rgba(27, 42, 74, 0.08);
    --footer-rule: rgba(27, 42, 74, 0.1);
  }

  /* ── Paper noise texture overlay ── */
  .cursos-body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    background:
      repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,0.012) 0px, transparent 1px),
      repeating-radial-gradient(circle at 63% 18%, rgba(255,255,255,0.008) 0px, transparent 1px),
      repeating-radial-gradient(circle at 42% 71%, rgba(255,255,255,0.015) 0px, transparent 1px),
      repeating-radial-gradient(circle at 85% 55%, rgba(255,255,255,0.008) 0px, transparent 1px);
    background-size: 3px 3px, 4px 4px, 2px 2px, 5px 5px;
  }

  [data-theme="light"] .cursos-body::before {
    opacity: 0.4;
    background:
      repeating-radial-gradient(circle at 17% 32%, rgba(0,0,0,0.015) 0px, transparent 1px),
      repeating-radial-gradient(circle at 63% 18%, rgba(0,0,0,0.012) 0px, transparent 1px),
      repeating-radial-gradient(circle at 42% 71%, rgba(0,0,0,0.018) 0px, transparent 1px),
      repeating-radial-gradient(circle at 85% 55%, rgba(0,0,0,0.01) 0px, transparent 1px);
    background-size: 3px 3px, 4px 4px, 2px 2px, 5px 5px;
  }

  /* ── Wrap helper ── */
  .wrap {
    width: min(var(--maxw), calc(100% - 48px));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ── Typography ──
     :where() força specificity 0 — qualquer .ia-* shared (ex: .ia-empty p)
     consegue sobrescrever sem precisar de !important. */
  :where(.cursos-body) p,
  :where(.cursos-body) .section-text {
    text-align: justify;
  }

  /* ── Section label (gold uppercase) ── */
  .section-label {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 20px;
  }

  /* ── Decorative rule between sections ── */
  .section-rule {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--rule-color);
    position: relative;
    z-index: 1;
  }
  .section-rule::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  /* ── Scroll reveal ── */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: .1s; }
  .reveal-delay-2 { transition-delay: .25s; }
  .reveal-delay-3 { transition-delay: .4s; }
  .reveal-delay-4 { transition-delay: .15s; }

  /* ── Forms ── */
  .form-control, .form-select {
    /* background-color (não shorthand) — evita resetar background-image/repeat
     * do <select> customizado em static/shared/base.css.
     */
    background-color: var(--bg-elevated);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: .95rem;
    width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  }
  .form-control::placeholder {
    color: var(--text-secondary);
  }
  /* Native dropdown options need opaque colors — they don't inherit
     transparent backgrounds and the OS default rarely matches the theme. */
  .form-control option, .form-select option,
  select.form-control option, select.form-select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
  }
  .form-label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-error {
    color: #ef4444;
    font-size: .82rem;
    margin-top: 4px;
  }

  /* ── Buttons ── */
  .btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #0F1923;
    border: none;
    padding: 14px 32px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
  }
  .btn-gold:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3);
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 12px 28px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
  }
  .btn-outline:hover {
    background: var(--accent);
    color: #0F1923;
  }

  /* ── Footer ── */
  footer {
    border-top: 1px solid var(--footer-rule);
    background: transparent;
    padding: 48px 0 56px;
    position: relative;
    z-index: 1;
  }
  .footer-inner {
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-brand {
    font-family: var(--font-heading);
    font-weight: 600; font-size: 1.1rem;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
  }
  .footer-brand-icon {
    font-size: 1rem;
    color: var(--accent);
  }
  .footer-contact { text-align: right; }
  .footer-contact-label {
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-secondary);
    margin-bottom: 4px;
  }
  .footer-contact a {
    color: var(--text-primary); text-decoration: none;
    font-size: .95rem; transition: color .2s ease;
  }
  .footer-contact a:hover { color: var(--accent); }
  .footer-copy {
    text-align: center;
    margin-top: 36px; padding-top: 24px;
    border-top: 1px solid var(--footer-rule);
    color: var(--text-secondary);
    font-size: .82rem;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .wrap { width: calc(100% - 32px); }
    .footer-inner { flex-direction: column; text-align: center; gap: 20px; }
    .footer-contact { text-align: center; }
  }