/* LiteraryScore™ — correcciones y componentes compartidos de la portada (index) y del archivo (ensayo).
   Se carga después del <style> de cada página, así que sus reglas tienen prioridad a igual especificidad. */

/* ── Contraste AA: mismos tonos, más luz ── */
:root {
  --muted:  #A39A87;
  --muted2: #93A0BD;
}
.video-label, .hero-scroll, .segunda-obra-counter, .streaming-soon, .footer-ile { color: var(--gold); }
.footer-copy   { color: var(--muted); }
.package-price { color: var(--gold2); }
.contact-sub   { color: rgba(15,21,53,0.88); }
.contact-domain{ color: rgba(15,21,53,0.8); }

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

/* Imágenes con width/height en el HTML: la altura sigue al ancho */
img { height: auto; }

/* ── Navegación ── */
nav.scrolled {
  padding-top: 0.9rem; padding-bottom: 0.9rem;
  background: rgba(15,21,53,0.96);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nav-toggle {
  display: none; position: relative; z-index: 3;
  width: 44px; height: 44px; margin-left: 0.6rem;
  border: 0.5px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: var(--gold); transition: transform .4s cubic-bezier(0.16,1,0.3,1); }
nav.menu-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
nav.menu-open .nav-toggle span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
.nav-right { display: flex; align-items: center; }
.nav-logo { position: relative; z-index: 3; }

@media (max-width: 1400px) { .nav-links { gap: 1.6rem; } }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: flex; position: fixed; inset: 0; z-index: 2;
    flex-direction: column; align-items: center; justify-content: safe center; gap: 1.1rem;
    padding: 6rem 1.5rem 3rem; overflow-y: auto;
    background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(196,150,58,0.10), transparent 70%), rgba(10,14,38,0.98);
    opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
  }
  nav.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
  nav.menu-open .nav-links { opacity: 1; visibility: visible; transition: opacity .45s ease; }
  .nav-links a {
    font-family: var(--font-serif); font-size: clamp(1.5rem, 6vw, 2.1rem); font-style: italic;
    letter-spacing: 0.01em; text-transform: none; color: var(--cream2);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .6s cubic-bezier(0.16,1,0.3,1), color .3s;
  }
  nav.menu-open .nav-links a { opacity: 1; transform: none; }
  nav.menu-open .nav-links li:nth-child(2) a { transition-delay: .04s; }
  nav.menu-open .nav-links li:nth-child(3) a { transition-delay: .08s; }
  nav.menu-open .nav-links li:nth-child(4) a { transition-delay: .12s; }
  nav.menu-open .nav-links li:nth-child(5) a { transition-delay: .16s; }
  nav.menu-open .nav-links li:nth-child(6) a { transition-delay: .20s; }
  nav.menu-open .nav-links li:nth-child(7) a { transition-delay: .24s; }
  nav.menu-open .nav-links li:nth-child(8) a { transition-delay: .28s; }
  nav.menu-open .nav-links li:nth-child(9) a { transition-delay: .32s; }
}
@media (max-width: 420px) { .nav-cta { padding: 0.6rem 0.9rem; } .nav-logo-text { font-size: 1.05rem; } }
html.menu-lock { overflow: hidden; }

/* ── FAQ como botones ── */
.faq-question {
  width: 100%; background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; line-height: inherit; text-align: left; cursor: pointer;
}

/* ── Vídeo: miniatura que carga YouTube solo al pulsar ── */
.yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: #0A0E26; display: block;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .4s ease, transform .8s cubic-bezier(0.16,1,0.3,1); }
.yt-facade:hover img, .yt-facade:focus-visible img { opacity: 1; transform: scale(1.02); }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E2BD6E, var(--gold) 60%, #A87C2C);
  box-shadow: 0 12px 30px -8px rgba(196,150,58,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1);
}
.yt-play::after { content: ''; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--navy); }
.yt-facade:hover .yt-play { transform: scale(1.08); }

/* ── Contenido visible aunque el script no corra ── */
.reveal { opacity: 1; transform: none; }
.js .reveal:not(.visible) { opacity: 0; transform: translateY(40px); }

/* ── Táctil: lo que antes solo aparecía con el ratón ── */
@media (hover: none) {
  .inmersion-caption { opacity: 1; transform: none; }
}
/* Las pistas de la portada son informativas: sin desplazamiento que sugiera un clic */
.track:hover { transform: none; }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal:not(.visible) { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════
   FASE 2 — SISTEMA COMPARTIDO (tokens de ls-core.css)
══════════════════════════════════════ */

/* Botones: misma forma que en los reproductores, dorado metálico en las acciones principales */
.btn-primary, .btn-ghost, .nav-cta, .btn-ile-player, .btn-amazon-ca, .stream-btn-logo, .btn-dark {
  border-radius: var(--r-pill);
}
.btn-primary, .nav-cta, .btn-ile-player {
  background: var(--gold-metal); background-size: 200% 100%; background-position: 100% 0;
  transition: background-position var(--dur-slow) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn-primary:hover, .nav-cta:hover, .btn-ile-player:hover {
  background: var(--gold-metal); background-size: 200% 100%; background-position: 0 0;
  box-shadow: var(--sh-gold);
}
.package .btn-ghost, .package .btn-primary { border-radius: var(--r-pill); }
.obra-badge, .segunda-obra-badge { border-radius: var(--r-pill); }
.station-pill, .cert-tag, .segunda-obra-counter, .footer-ile { border-radius: var(--r-pill); }

/* Escala tipográfica: ninguna etiqueta por debajo de 11,2 px */
.nav-links a, .station-pill, .cert-tag { font-size: var(--fs-micro); }
.nav-links a { letter-spacing: 0.1em; }
.nav-cta, .hero-eyebrow, .btn-primary, .btn-ghost, .video-label, .hero-scroll, .stat-label, .section-tag,
.comp-header, .obra-author, .track, .stream-btn-logo, .segunda-obra-counter, .segunda-obra-badge,
.segunda-obra-genre, .segunda-obra-subtitle, .soa-label, .btn-ile-player, .btn-amazon-ca, .streaming-soon,
.inmersion-caption, .principle-num, .package-badge, .contact-domain, .footer-ile, .footer-copy, .obra-badge, .btn-dark {
  font-size: var(--fs-label);
}
/* Textos largos en serif: la monoespaciada queda para etiquetas */
.faq-answer, .step-desc { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.75; }

/* ══════════════════════════════════════
   PILOTO — BIBLIOTECA SONORA
══════════════════════════════════════ */
.biblioteca {
  --cover-h: clamp(260px, 25vw, 340px);
  --amb-a: rgba(196,150,58,0.12); --amb-b: rgba(139,58,42,0.08);
  position: relative; overflow: hidden; padding: 7rem 0 6rem;
  background: var(--navy-deep);
  transition: --amb-a 1.2s ease, --amb-b 1.2s ease;
}
.biblioteca[data-amb="sea"]     { --amb-a: var(--amb-sea-a);     --amb-b: var(--amb-sea-b); }
.biblioteca[data-amb="sunrise"] { --amb-a: var(--amb-sunrise-a); --amb-b: var(--amb-sunrise-b); }
.biblioteca[data-amb="desert"]  { --amb-a: var(--amb-desert-a);  --amb-b: var(--amb-desert-b); }
.bs-ambient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 62%, var(--amb-a), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 15%, var(--amb-b), transparent 70%),
    radial-gradient(ellipse 35% 35% at 12% 20%, var(--amb-b), transparent 70%);
}
.bs-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 3rem; }
.bs-head { text-align: center; max-width: 720px; margin: 0 auto 4.5rem; }
.bs-head .section-tag { justify-content: center; }
.bs-head .section-tag::after { content: ''; display: block; width: 30px; height: 0.5px; background: var(--gold); }
.bs-lede { font-size: 1.2rem; font-style: italic; font-weight: 300; color: rgba(245,240,232,0.75); line-height: 1.7; }

.bs-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; align-items: start; }
.bs-book { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; transition: opacity var(--dur-base) ease; }
/* Cada libro dibuja su tramo de estante a la altura de la base de las portadas */
.bs-book::before {
  content: ''; position: absolute; left: -1.5rem; right: -1.5rem; top: calc(var(--cover-h) + 1px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,150,58,0.55) 20%, rgba(240,208,138,0.8) 50%, rgba(196,150,58,0.55) 80%, transparent);
}
.bs-book::after { /* reflejo de luz sobre el estante */
  content: ''; position: absolute; left: 10%; right: 10%; top: calc(var(--cover-h) + 2px); height: 28px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,208,138,0.18), transparent 70%);
  opacity: 0.4; transition: opacity var(--dur-base) ease; pointer-events: none;
}
.bs-book:hover::after, .bs-book:focus-visible::after, .bs-book.is-active::after { opacity: 1; }
.bs-book .lc-frame { height: var(--cover-h); width: max-content; max-width: 100%; }
.bs-book .lc-frame img { height: 100%; width: auto; max-width: none; }
.bs-meta { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 2rem; }
.bs-num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold); }
.bs-title { font-family: var(--font-serif); font-size: 1.6rem; font-style: italic; font-weight: 400; color: var(--cream2); line-height: 1.2; text-wrap: balance; }
.bs-tracks { font-family: var(--font-serif); font-size: 1rem; color: var(--muted); }

/* Al elegir un libro, los demás retroceden */
@media (hover: hover) {
  .bs-shelf:has(.bs-book:hover) .bs-book:not(:hover),
  .bs-shelf:has(.bs-book:focus-visible) .bs-book:not(:focus-visible) { opacity: 0.55; }
}
.bs-dots { display: none; }

@media (max-width: 900px) { .bs-inner { padding: 0 1.5rem; } .bs-shelf { gap: 1.5rem; } .biblioteca { --cover-h: clamp(200px, 26vw, 260px); } }

/* Móvil: estante deslizable, el libro centrado queda activo */
@media (max-width: 760px) {
  .biblioteca { --cover-h: min(300px, 72vw); padding: 5rem 0 4rem; }
  .bs-inner { padding: 0; }
  .bs-head { padding: 0 1.5rem; margin-bottom: 3rem; }
  .bs-shelf {
    display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1rem 12vw 1.5rem; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .bs-shelf::-webkit-scrollbar { display: none; }
  .bs-book { flex: 0 0 auto; width: 76vw; scroll-snap-align: center; opacity: 0.55; }
  .bs-book.is-active { opacity: 1; }
  .bs-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.5rem; }
  .bs-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(196,150,58,0.3); transition: background var(--dur-base), transform var(--dur-base); }
  .bs-dots i.on { background: var(--gold); transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .biblioteca { transition: none; } }

/* ══════════════════════════════════════
   FASE 4 — RECORRIDO NARRATIVO
══════════════════════════════════════ */

/* Hero compacto: la propuesta cabe en la primera pantalla */
.hero { min-height: min(100svh, 920px); padding: 9rem 2rem 6rem; }
@media (max-width: 900px) { .hero { min-height: 100svh; padding: 7.5rem 1.5rem 5rem; } }

/* Polvo dorado en dos capas a distinta velocidad */
.hero-dust {
  position: absolute; inset: -20%; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--gold2) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 14%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 70%, var(--gold2) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 55%, var(--cream) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 25% 88%, var(--gold) 50%, transparent 51%);
  background-size: 420px 420px;
  animation: ls-drift 70s linear infinite;
}
.hero-dust.d2 { background-size: 290px 290px; opacity: .28; animation-duration: 100s; animation-direction: reverse; }
@keyframes ls-drift { to { background-position: -420px -140px; } }

/* Lema revelado línea a línea detrás de una máscara */
.hero-tagline { animation: none; opacity: 1; }
.mask-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-line > span { display: inline-block; animation: ls-mask-up 1.2s var(--ease-out) both; animation-delay: .55s; }
.mask-line:nth-child(2) > span { animation-delay: .68s; }
.mask-line:nth-child(3) > span { animation-delay: .81s; }
.hero-tagline::after {
  content: ''; display: block; width: 72px; height: 1px; margin: 1.4rem auto 0;
  background: var(--gold-metal); transform-origin: center;
  animation: ls-line 1.2s var(--ease-out) 1.15s both;
}
@keyframes ls-mask-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ls-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Segunda escena: vídeo y libro con Spotify, fuera del hero */
.escena-video { position: relative; padding: 1rem 3rem 7rem; }
.escena-video-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
.escena-video .hero-video-wrap, .escena-video .hero-visual { margin-top: 0; max-width: none; animation: none; opacity: 1; }
.escena-video .hero-visual img { max-width: 420px; }
@media (max-width: 900px) {
  .escena-video { padding: 0 1.5rem 5rem; }
  .escena-video-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* Escenas cromáticas: cada obra trae su luz al entrar en pantalla */
[data-scene] { position: relative; isolation: isolate; }
[data-scene]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 22% 45%, var(--scene-a), transparent 70%),
    radial-gradient(ellipse 45% 50% at 88% 85%, var(--scene-b), transparent 70%);
  opacity: 0; transition: opacity 1.6s ease;
}
[data-scene].in-scene::before { opacity: 1; }
[data-scene="sea"]     { --scene-a: var(--amb-sea-a);     --scene-b: var(--amb-sea-b); }
[data-scene="sunrise"] { --scene-a: var(--amb-sunrise-a); --scene-b: var(--amb-sunrise-b); }
[data-scene="desert"]  { --scene-a: var(--amb-desert-a);  --scene-b: var(--amb-desert-b); }

/* Títulos de sección revelados con máscara al entrar */
.js .reveal .section-heading, .js .reveal .segunda-obra-title, .js .reveal .obra-title {
  clip-path: inset(-15% -4% -15% -4%); transform: none;
  transition: clip-path 1.3s var(--ease-out) .2s, transform 1.3s var(--ease-out) .2s;
}
.js .reveal:not(.visible) .section-heading,
.js .reveal:not(.visible) .segunda-obra-title,
.js .reveal:not(.visible) .obra-title { clip-path: inset(-15% -4% 100% -4%); transform: translateY(24px); }

/* Cómo funciona: los cuatro pasos avanzan con el scroll (solo escritorio) */
#como-funciona.pin { height: 340vh; padding-top: 0 !important; padding-bottom: 0 !important; }
#como-funciona.pin > div { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 5.5rem; padding-bottom: 1.5rem; }
#como-funciona.pin .steps { margin-top: 2.2rem; }
#como-funciona.pin .step { padding: 2.2rem 2rem; }
.steps { position: relative; }
#como-funciona.pin .steps::before {
  content: ''; position: absolute; left: 0; top: -1px; z-index: 2; height: 2px;
  width: calc(var(--p, 0) * 100%); background: var(--gold-metal);
}
#como-funciona.pin .step { opacity: .38; transition: opacity .6s ease, background .6s ease; }
#como-funciona.pin .step.is-past { opacity: .7; }
#como-funciona.pin .step.is-on { opacity: 1; background: #1c2a50; }
.step-num { transition: color .6s ease; }
.step.is-on .step-num { color: var(--gold); }

/* Capas en parallax: se mueven con la propiedad translate, sin tocar otros transform */
[data-parallax] { will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  .hero-dust { animation: none; }
  .js .reveal .section-heading, .js .reveal .segunda-obra-title, .js .reveal .obra-title { clip-path: none !important; transform: none !important; }
  [data-scene]::before { transition: none; }
}
@media (max-width: 900px) { .hero-dust { animation: none; } }

/* ══════════════════════════════════════
   OBRAS CONDENSADAS
══════════════════════════════════════ */
/* Listas de melodías, estaciones y capítulos plegadas tras un botón */
.obra-more { margin: 0 0 2rem; }
.obra-more > summary {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--gold); padding: 0.75rem 1.2rem; border: 0.5px solid var(--line); border-radius: var(--r-pill);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.obra-more > summary::-webkit-details-marker { display: none; }
.obra-more > summary:hover { border-color: var(--gold); background: rgba(196,150,58,0.06); }
.om-chev { width: 16px; height: 16px; fill: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.obra-more[open] > summary .om-chev { transform: rotate(180deg); }
.obra-more[open] > :not(summary) { margin-top: 1rem; animation: om-in .5s var(--ease-out); }
.obra-more .tracks-grid, .obra-more .stations-preview { margin-bottom: 0; }
@keyframes om-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Ritmo vertical más corto entre obras */
.primera-obra, .segunda-obra { padding-top: 6rem; padding-bottom: 6rem; }
.segunda-obra-header { margin-bottom: 3rem; }

@media (max-width: 900px) {
  .primera-obra, .segunda-obra { padding-top: 4rem; padding-bottom: 4rem; }
  .obra-grid, .segunda-obra-grid { gap: 2.2rem; }
  /* Portadas más pequeñas y centradas; la insignia sigue pegada a la portada */
  .obra-cover-box, .segunda-obra-img-wrap { width: fit-content; margin: 0 auto; }
  .obra-cover { max-width: min(240px, 62vw); }
  .segunda-obra-img { max-width: min(270px, 70vw); }
  .primera-obra > .section-tag { margin-bottom: 2rem !important; }
  .segunda-obra-header { margin-bottom: 2rem; padding-bottom: 1.2rem; gap: 0.6rem; }
  .obra-info { padding-top: 0; }
  .obra-title { font-size: 2rem; }
  .obra-desc, .segunda-obra-desc { margin-bottom: 1.5rem; }
  .segunda-obra-stats { margin-bottom: 1.8rem; padding: 1rem 0; }
  /* Botones de escucha en dos columnas */
  .primera-obra .streaming-btns { display: grid !important; grid-template-columns: 1fr 1fr; }
  .primera-obra .streaming-btns .stream-btn-logo { justify-content: center; padding: 0.75rem 0.6rem; }
  .segunda-obra-ctas > a { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .obra-more[open] > :not(summary) { animation: none; } }

/* ══════════════════════════════════════
   FASE 5 — INTERRUPTOR DE SONIDO
══════════════════════════════════════ */
.sound-toggle {
  position: fixed; z-index: 900;
  right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.7rem 1rem 0.7rem 0.85rem; border-radius: var(--r-pill);
  background: rgba(15,21,53,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid var(--line); color: var(--cream);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  box-shadow: var(--sh-1);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.sound-toggle:hover { border-color: var(--gold); color: var(--gold); }
.sound-toggle[aria-pressed="true"] { color: var(--gold); border-color: rgba(196,150,58,0.6); }
.st-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.st-bars i { width: 2px; height: 30%; background: currentColor; border-radius: 1px; transition: height var(--dur-base) var(--ease-out); }
.sound-toggle[aria-pressed="true"] .st-bars i { animation: st-eq 1.1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .st-bars i:nth-child(2) { animation-delay: .2s; }
.sound-toggle[aria-pressed="true"] .st-bars i:nth-child(3) { animation-delay: .45s; }
.sound-toggle[aria-pressed="true"] .st-bars i:nth-child(4) { animation-delay: .1s; }
@keyframes st-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
html.menu-lock .sound-toggle { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .sound-toggle .st-label { display: none; } .sound-toggle { padding: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .sound-toggle[aria-pressed="true"] .st-bars i { animation: none; height: 70%; } }