/* ============================================================================
   Teoria Musical — tema "papel & tinta" (página clara) + hero "pauta viva".
   Complementa cursos.css (estrutura compartilhada) e styles.css (marca).
   Nada aqui redefine classes estruturais — só o tema e o hero específico.
   ============================================================================ */

/* ---- tema: papel & tinta ---- */
.t-teoria {
  --c-bg: #f6f1e4;
  --c-bg2: #efe7d3;
  --c-bg3: #faf6ec;
  --c-ink: #1c1a16;
  --c-muted: #6b6353;
  --c-acc: #b0541f;
  --c-acc-strong: #8a3f14;
  --c-line: rgba(28, 26, 22, .16);
  --c-soft: rgba(176, 84, 31, .10);
}

.t-teoria ::selection { background: rgba(176, 84, 31, .22); }

/* ---- header sobre página clara (styles.css assume header branco) ---- */
.t-teoria .site-header { color: var(--c-ink); }
.t-teoria .main-nav .nav-login { color: var(--c-acc); }
.t-teoria .main-nav .nav-login:hover { color: var(--c-acc-strong); }
.t-teoria .menu-button span { background: var(--c-ink); }

/* ---- sound-chip sobre papel ---- */
.t-teoria .sound-chip { background: color-mix(in srgb, var(--c-bg3) 88%, transparent); box-shadow: 0 8px 22px rgba(28, 26, 22, .1); }

/* ---- cortina clara: papel com fio de tinta na borda de saída ---- */
.t-teoria .curtain { border-bottom: 1px solid rgba(28, 26, 22, .22); }

/* ---- hero: folha de papel com grão ---- */
.t-teoria .c-hero {
  cursor: crosshair;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse at 78% 6%, rgba(255, 255, 255, .85), transparent 44%),
    radial-gradient(rgba(28, 26, 22, .05) .6px, transparent .95px);
  background-size: auto, 7px 7px;
}
.t-teoria .c-hero a, .t-teoria .c-hero button { cursor: pointer; }
.t-teoria .c-hint span { background: var(--c-acc); }
.t-teoria .c-lead { max-width: 500px; }

/* ---- fallback estático (.static): pauta em tinta + clave de sol ---- */
.t-teoria .c-strings-fallback i,
.t-teoria .c-strings-fallback i:nth-child(-n+3) { left: 0; right: 0; height: 1px; background: rgba(28, 26, 22, .32); }
.t-teoria .c-hero.static { cursor: default; }
.t-teoria .c-hero.static .c-strings-fallback::before {
  content: "";
  position: absolute;
  top: 27.5%;
  left: max(28px, 5%);
  height: 38%;
  aspect-ratio: 15.186 / 40.768;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.186%2040.768%22%3E%3Cpath%20fill%3D%22%231c1a16%22%20fill-rule%3D%22evenodd%22%20d%3D%22m12.049%203.5296c0.305%203.1263-2.019%205.6563-4.0772%207.7014-0.9349%200.897-0.155%200.148-0.6437%200.594-0.1022-0.479-0.2986-1.731-0.2802-2.11%200.1304-2.6939%202.3198-6.5875%204.2381-8.0236%200.309%200.5767%200.563%200.6231%200.763%201.8382zm0.651%2016.142c-1.232-0.906-2.85-1.144-4.3336-0.885-0.1913-1.255-0.3827-2.51-0.574-3.764%202.3506-2.329%204.9066-5.0322%205.0406-8.5394%200.059-2.232-0.276-4.6714-1.678-6.4836-1.7004%200.12823-2.8995%202.156-3.8019%203.4165-1.4889%202.6705-1.1414%205.9169-0.57%208.7965-0.8094%200.952-1.9296%201.743-2.7274%202.734-2.3561%202.308-4.4085%205.43-4.0046%208.878%200.18332%203.334%202.5894%206.434%205.8702%207.227%201.2457%200.315%202.5639%200.346%203.8241%200.099%200.2199%202.25%201.0266%204.629%200.0925%206.813-0.7007%201.598-2.7875%203.004-4.3325%202.192-0.5994-0.316-0.1137-0.051-0.478-0.252%201.0698-0.257%201.9996-1.036%202.26-1.565%200.8378-1.464-0.3998-3.639-2.1554-3.358-2.262%200.046-3.1904%203.14-1.7356%204.685%201.3468%201.52%203.833%201.312%205.4301%200.318%201.8125-1.18%202.0395-3.544%201.8325-5.562-0.07-0.678-0.403-2.67-0.444-3.387%200.697-0.249%200.209-0.059%201.193-0.449%202.66-1.053%204.357-4.259%203.594-7.122-0.318-1.469-1.044-2.914-2.302-3.792zm0.561%205.757c0.214%201.991-1.053%204.321-3.079%204.96-0.136-0.795-0.172-1.011-0.2626-1.475-0.4822-2.46-0.744-4.987-1.116-7.481%201.6246-0.168%203.4576%200.543%204.0226%202.184%200.244%200.577%200.343%201.197%200.435%201.812zm-5.1486%205.196c-2.5441%200.141-4.9995-1.595-5.6343-4.081-0.749-2.153-0.5283-4.63%200.8207-6.504%201.1151-1.702%202.6065-3.105%204.0286-4.543%200.183%201.127%200.366%202.254%200.549%203.382-2.9906%200.782-5.0046%204.725-3.215%207.451%200.5324%200.764%201.9765%202.223%202.7655%201.634-1.102-0.683-2.0033-1.859-1.8095-3.227-0.0821-1.282%201.3699-2.911%202.6513-3.198%200.4384%202.869%200.9413%206.073%201.3797%208.943-0.5054%200.1-1.0211%200.143-1.536%200.143z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: .62;
}

/* ---- mobile ---- */
@media (max-width: 820px) {
  .t-teoria .c-hero { cursor: default; }
  .t-teoria .c-lead { max-width: 420px; }
  .t-teoria .c-strings-fallback i,
  .t-teoria .c-strings-fallback i:nth-child(-n+3) { background: rgba(28, 26, 22, .26); }
  .t-teoria .c-hero.static .c-strings-fallback::before { top: 25%; height: 32%; left: 18px; opacity: .5; }
  .t-teoria .site-header.menu-open { background: var(--c-bg3); border-bottom: 1px solid var(--c-line); }
  .t-teoria .site-header.menu-open .main-nav { background: var(--c-bg3); box-shadow: 0 18px 30px rgba(28, 26, 22, .12); }
  .t-teoria .site-header.menu-open .main-nav a { border-top-color: var(--c-line); }
}