/* ==========================================================================
   Layout y componentes de Nimbalu: la ventana, la consola y la barra.
   Solo se animan transform, opacity, clip-path y propiedades registradas.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities, overrides;

/* ---------------------------------------------------------------- layout */

@layer layout {
  .site-header__inner,
  .stage,
  .section,
  .page,
  .site-footer__inner,
  .player__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  /* Encabezado sticky. El borde aparece a partir de los 8 px de scroll. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--bg);
    background-image: var(--grain);

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: var(--border);
      background: var(--line);
    }
  }

  @supports (animation-timeline: scroll()) {
    .site-header::after {
      opacity: 0;
      animation: header-line linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--space-2);
    }
  }

  @keyframes header-line {
    to { opacity: 1; }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
  }

  .site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-end: calc(-1 * var(--space-2));
  }

  /* El primer pantallazo: ventana y consola. Una columna en mobile; en desktop,
     ventana a la izquierda (5 columnas) y consola a la derecha (7). */
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "window" "console";
    gap: var(--space-5);
    padding-block: var(--space-4) var(--space-6);
  }

  .stage__window {
    grid-area: window;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    min-width: 0;
  }

  .stage__console {
    grid-area: console;
    min-width: 0;
  }

  @media (min-width: 1024px) {
    .stage {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-areas: "window window window window window console console console console console console console";
      column-gap: var(--space-5);
      padding-block: var(--space-5);
      align-items: start;
    }

    .stage__window {
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));
    }

    /* La consola tiene scroll propio para que el producto entero se vea sin bajar. */
    .stage__console {
      max-height: calc(100dvh - var(--header-h) - var(--player-h) - 2 * var(--space-5));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
    }
  }

  .section {
    padding-block: var(--space-7) 0;
  }

  .section__title {
    margin-block-end: var(--space-5);
  }

  .section--ad {
    padding-block-start: var(--space-7);
  }

  /* Bloques de abajo: el navegador no los pinta hasta que se acercan. */
  .presets-section,
  .faq-section {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--intrinsic-block);
  }

  /* Páginas de sonido y de mezcla. */
  .page {
    padding-block: var(--space-3) 0;
  }

  .page__crumbs {
    margin-block-end: var(--space-3);
  }

  .page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "text";
    gap: var(--space-6);
    padding-block-start: var(--space-6);
  }

  .page__text { grid-area: text; }
  .page__side { grid-area: side; }

  @media (min-width: 1024px) {
    .page__grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-areas: "text text text text text text text . side side side side";
      column-gap: var(--space-5);
    }

    .page__side-inner {
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));
    }
  }

  /* El espacio de abajo solo existe cuando la barra está visible. */
  body:has(.player[data-visible]) {
    padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom));
  }

  .site-footer {
    margin-block-start: var(--space-8);
    border-top: var(--border) solid var(--line);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-5);
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .site-footer__note {
    flex: 1 1 20ch;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
  }
}

/* ------------------------------------------------------------ components */

@layer components {

  /* --- Básicos --- */

  .skip-link {
    position: fixed;
    left: var(--space-4);
    top: var(--space-2);
    z-index: calc(var(--z-player) + 1);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    translate: 0 -200%;

    &:focus-visible {
      translate: 0 0;
    }
  }

  .icon {
    width: var(--icon);
    height: var(--icon);
    flex: none;
  }

  .icon--sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  .icon-play path {
    fill: currentColor;
  }

  [aria-pressed="true"] > .icon-play,
  [aria-pressed="false"] > .icon-pause,
  [aria-pressed="true"] > .icon-volume,
  [aria-pressed="false"] > .icon-mute {
    display: none;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink);
  }

  .logo__mark {
    width: auto;
    height: var(--logo-h);
    overflow: visible;
  }

  .logo--small .logo__mark {
    height: var(--logo-h-sm);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding-inline: var(--space-4);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: var(--ui-weight-strong);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      background: var(--bg-sunken);
    }
  }

  .btn--primary {
    border-color: transparent;
    background: var(--moss);
    color: var(--bg);

    &:hover {
      background: var(--moss);
      opacity: .9;
    }
  }

  .btn--clay {
    color: var(--clay);
  }

  .btn--wide {
    width: 100%;
    justify-content: flex-start;
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius-sm);
    color: var(--ink);

    &:hover {
      background: var(--bg-sunken);
    }
  }

  .text-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--ui-weight-strong);
    color: var(--ink-soft);
    white-space: nowrap;

    &:hover {
      color: var(--ink);
    }
  }

  .link-btn {
    min-height: var(--tap);
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-underline-offset: 0.2em;
  }

  .field {
    min-height: var(--tap);
    padding-inline: var(--space-3);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: var(--text-md);
    min-width: 0;
  }

  .dot {
    display: inline-block;
    width: var(--dot);
    height: var(--dot);
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--family, var(--moss));
  }

  /* --- Chips y filas deslizables --- */

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding-inline: var(--space-4);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--ui-weight-strong);
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;

    &:hover {
      color: var(--ink);
    }

    &[aria-pressed="true"],
    &[aria-current="true"] {
      border-color: transparent;
      background: var(--moss-soft);
      color: var(--ink);
    }
  }

  .intent .dot {
    display: none;
  }

  .intent[aria-current="true"] .dot {
    display: inline-block;
    background: var(--moss);
  }

  .scroller {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    mask-image: linear-gradient(to right, transparent, #000 var(--mask-edge), #000 calc(100% - var(--mask-edge)), transparent);

    &::-webkit-scrollbar {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .stage .scroller {
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
      mask-image: linear-gradient(to right, #000 calc(100% - var(--mask-edge)), transparent);
    }
  }

  /* --- La ventana --- */

  .window {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    container: window / inline-size;
    aspect-ratio: 4 / 5;
    max-height: 64svh;
    width: 100%;
    border-radius: var(--radius-lg);
    view-transition-name: ventana;
    /* Fondo estático: se ve antes de que arranque la escena, sin JS y con movimiento reducido. */
    background:
      radial-gradient(120% 70% at 78% 18%, var(--scene-light), transparent 70%),
      linear-gradient(to bottom, var(--bg-raised), var(--bg-sunken));
  }

  @media (min-width: 600px) and (max-width: 1023px) {
    .window--home {
      aspect-ratio: 4 / 3;
    }
  }

  @media (min-width: 1024px) {
    .window--home {
      max-height: calc(100dvh - var(--header-h) - var(--player-h) - var(--scroll-room));
      min-height: var(--window-min-h);
    }
  }

  .window--page {
    aspect-ratio: 4 / 3;
    max-height: 56svh;
  }

  @media (min-width: 768px) {
    .window--page {
      aspect-ratio: 16 / 9;
      max-height: 44svh;
    }
  }

  .window__scene,
  .window__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .window__canvas {
    width: 100%;
    height: 100%;
  }

  /* En pausa: escena congelada con un velo de 20 % de --bg. */
  .window__veil {
    background: var(--veil-pause);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out-soft);
  }

  .window[data-state="paused"] .window__veil {
    opacity: 1;
  }

  .window__head {
    position: relative;
    padding: var(--space-5) calc(var(--tap) + var(--space-5)) var(--space-6) var(--space-5);
    transition: opacity var(--dur-4) var(--ease-in-out);

    /* Velo de --bg al 70 % detrás del texto, para el contraste sobre la escena. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--veil);
      mask-image: linear-gradient(to bottom, #000 72%, transparent);
    }
  }

  /* Cuando suena, el titular se aparta (sigue en el HTML y para lectores de pantalla). */
  .window[data-state="playing"] .window__head {
    opacity: 0;
  }

  .window__title {
    font-size: min(var(--text-hero), 10.5cqi);
    max-width: 14ch;
  }

  .window__lead {
    margin-block-start: var(--space-3);
    max-width: 32ch;
    color: var(--ink-soft);
  }

  .window__focus {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    color: var(--ink-soft);

    &:hover {
      color: var(--ink);
      background: var(--veil);
    }
  }

  .window__foot {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-5);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--veil);
      mask-image: linear-gradient(to top, #000 45%, transparent);
    }
  }

  .window__mix {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .window__name {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-weight: var(--display-weight);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
    border-radius: var(--radius-xs);
    cursor: text;

    &:empty::before {
      content: attr(data-placeholder);
      color: var(--ink-soft);
    }
  }

  input.window__name {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .window__hint {
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .window__icons {
    display: flex;
    gap: var(--space-2);
    color: var(--ink-soft);
  }

  .window[data-state="empty"] .window__name,
  .window[data-state="empty"] .window__icons,
  .window[data-state="ready"] .window__icons,
  .window[data-state="playing"] .window__hint,
  .window[data-state="paused"] .window__hint {
    display: none;
  }

  .window[data-state="empty"] .window__hint {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-size: var(--text-lg);
    color: var(--ink);
  }

  .mix-icons {
    display: inline-flex;
    gap: var(--space-1);
    color: var(--ink-soft);
  }

  /* Play grande con el anillo de progreso del temporizador. */
  .play-big {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--play-big);
    height: var(--play-big);
    border-radius: var(--radius-pill);
    background: var(--moss);
    color: var(--bg);

    & > .icon {
      width: calc(var(--icon) * 1.25);
      height: calc(var(--icon) * 1.25);
    }

    &:disabled {
      cursor: default;
      opacity: .45;
    }
  }

  .play-big__ring {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--play-ring);
    height: var(--play-ring);
    max-width: none;
    translate: -50% -50%;
    rotate: -90deg;
    fill: none;
    stroke-width: 2;
    opacity: 1;
    transition: opacity var(--dur-3) var(--ease-out-soft);
  }

  .window[data-timer="off"] .play-big__ring {
    opacity: 0;
  }

  .play-big__track {
    stroke: var(--line);
  }

  .play-big__progress {
    stroke: var(--moss);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--progress));
    transition: --progress var(--dur-4) linear;
  }

  /* Al llegar desde un link: el play pulsa una sola vez. */
  .window[data-state="ready"] .play-big:not(:disabled) {
    animation: pulse-once var(--dur-pulse) var(--ease-out-soft) var(--dur-4) 1;
  }

  @keyframes pulse-once {
    40% { scale: 1.07; }
  }

  /* --- La consola --- */

  .console {
    container: console / inline-size;
  }

  .console__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  @media (min-width: 1024px) {
    .console__tools,
    .console > .scroller {
      position: sticky;
      z-index: 2;
      background-color: var(--bg);
      background-image: var(--grain);
    }

    .console__tools {
      top: 0;
    }

    .console > .scroller {
      top: calc(var(--tap) + var(--space-3));
      padding-block: var(--space-2);
    }
  }

  .search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: var(--ink-soft);

    & > .icon {
      position: absolute;
      left: var(--space-3);
      pointer-events: none;
    }
  }

  .search__input {
    width: 100%;
    min-height: var(--tap);
    padding-inline: calc(var(--space-3) + var(--icon-sm) + var(--space-2)) var(--space-6);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
    color: var(--ink);

    &::placeholder {
      color: var(--ink-soft);
    }

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .search__key {
    position: absolute;
    right: var(--space-3);
    padding-inline: var(--space-1);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-xs);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    line-height: 1.4;
    pointer-events: none;
  }

  .search__input:focus + .search__key,
  .search__input:not(:placeholder-shown) + .search__key {
    display: none;
  }

  @media (pointer: coarse) {
    .search__key { display: none; }
  }

  .console > .scroller {
    margin-block: var(--space-3) var(--space-2);
  }

  .family {
    padding-block-start: var(--space-4);
  }

  .family__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-1);
  }

  .console__empty {
    padding-block: var(--space-5);
    color: var(--ink-soft);
  }

  /* Fila-fader: la fila entera es el control. Toque: activa o desactiva.
     Arrastre horizontal: volumen, con relleno del color de la familia. */
  .fader {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--row-h);
    padding-inline: var(--space-2) var(--space-3);
    border-top: var(--border) solid var(--line);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: --level var(--dur-2) var(--ease-settle);

    /* Relleno de nivel: el color de la familia al 14 %. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to right,
        color-mix(in oklch, var(--family) var(--fill-alpha), transparent) calc(var(--level) * 100%),
        transparent calc(var(--level) * 100%));
    }

    /* Indicador de nivel: la línea de abajo, con el tono de la familia. */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: var(--border);
      background: var(--family);
      transform-origin: left;
      scale: var(--level) 1;
    }
  }

  .fader.is-dragging {
    transition: none;
    cursor: ew-resize;
  }

  .fader__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: var(--row-h);
    text-align: left;
    color: var(--ink-soft);
  }

  .fader__icon {
    display: grid;
    place-items: center;
    flex: none;
  }

  .fader__name,
  .fader__error {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fader__error {
    display: none;
    color: var(--clay);
  }

  .fader__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  /* Con JS el toque y el arrastre los maneja la fila (Pointer Events). */
  .js .fader__toggle,
  .js .fader__range {
    pointer-events: none;
  }

  .fader__toggle,
  .fader__value,
  .fader__freq {
    position: relative;
    z-index: 1;
  }

  .fader__value {
    min-width: 3ch;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    opacity: 0;
  }

  .fader__freq {
    min-height: var(--tap);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--ui-weight-strong);
    color: var(--ink-soft);
    white-space: nowrap;

    &:hover {
      background: var(--bg-sunken);
      color: var(--ink);
    }
  }

  .fader.is-active {
    .fader__toggle { color: var(--ink); }
    .fader__name { font-weight: var(--ui-weight-strong); }
    .fader__value { opacity: 1; }
    .fader__icon { animation: breathe var(--breath-dur) var(--ease-breath) infinite alternate; }
  }

  /* La respiración se queda quieta cuando no suena. */
  body:not([data-playing]) .fader__icon {
    animation-play-state: paused;
  }

  @keyframes breathe {
    to { scale: calc(1 + var(--breath-amp) * var(--amp) * (0.7 + 0.6 * var(--breath))); }
  }

  .fader.is-pulse .fader__icon > .icon {
    animation: pulse-icon var(--dur-pulse) var(--ease-out-soft) 1;
  }

  @keyframes pulse-icon {
    25% { scale: 1.16; }
  }

  .fader.is-loading::before {
    animation: loading var(--dur-4) var(--ease-in-out) infinite alternate;
  }

  @keyframes loading {
    to { opacity: .35; }
  }

  .fader.is-error {
    .fader__name { display: none; }
    .fader__error { display: inline; }
  }

  .fader:has(.fader__range:focus-visible),
  .fader.is-highlight {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: calc(-1 * var(--focus-width));
  }

  .fader[hidden],
  .family[hidden] {
    display: none;
  }

  @container console (min-width: 420px) {
    .fader { min-height: var(--sheet-row-h); }
  }

  @container console (min-width: 720px) {
    .family__rows {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-5);
    }

    .fader { min-height: var(--row-h); }
  }

  /* --- Barra de reproducción --- */

  .player {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-player);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-raised);
    box-shadow: var(--shadow-float-up);
    view-transition-name: barra;
    transition:
      opacity var(--dur-3) var(--ease-out-soft),
      translate var(--dur-3) var(--ease-out-soft),
      display var(--dur-3) allow-discrete,
      overlay var(--dur-3) allow-discrete;

    &[hidden] {
      opacity: 0;
      translate: 0 var(--space-4);
    }
  }

  @starting-style {
    .player {
      opacity: 0;
      translate: 0 var(--space-4);
    }
  }

  .player__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--player-h);
  }

  .play-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius-pill);
    background: var(--moss);
    color: var(--bg);
  }

  .player__info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }

  .player__name {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-weight: var(--display-weight);
    font-size: var(--text-md);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player__status {
    font-size: var(--text-xs);
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player__dots,
  .player__master,
  .player__timer,
  .player__share,
  .player__more {
    display: none;
  }

  .player__dots {
    align-items: center;
  }

  .player__dot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--space-5);
    height: var(--tap);

    &::after {
      content: attr(data-name);
      position: absolute;
      bottom: calc(100% - var(--space-1));
      left: 50%;
      translate: -50% 0;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-xs);
      background: var(--ink);
      color: var(--bg);
      font-size: var(--text-xs);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-1) var(--ease-out-soft);
    }

    &:hover::after,
    &:focus-visible::after {
      opacity: 1;
    }
  }

  .player__master {
    align-items: center;
    gap: var(--space-1);

    .slider {
      width: var(--master-w);
    }
  }

  @media (min-width: 768px) {
    .player__timer,
    .player__share,
    .player__more {
      display: inline-flex;
    }

    .player__expand {
      display: none;
    }

    .player__info {
      cursor: auto;
    }

    .play-btn {
      width: calc(var(--tap) + var(--space-1));
      height: calc(var(--tap) + var(--space-1));
    }

    .player__name {
      font-size: var(--text-lg);
    }
  }

  @media (min-width: 1024px) {
    .player__dots,
    .player__master {
      display: flex;
    }
  }

  /* Slider genérico (volumen general). */
  .slider {
    --fill: 50%;
    appearance: none;
    height: var(--tap);
    margin: 0;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-runnable-track {
      height: var(--slider-track);
      border-radius: var(--radius-xs);
      background: linear-gradient(to right, var(--moss) var(--fill), var(--bg-sunken) var(--fill));
    }

    &::-moz-range-track {
      height: var(--slider-track);
      border-radius: var(--radius-xs);
      background: linear-gradient(to right, var(--moss) var(--fill), var(--bg-sunken) var(--fill));
    }

    &::-webkit-slider-thumb {
      appearance: none;
      width: var(--slider-thumb);
      height: var(--slider-thumb);
      margin-top: calc((var(--slider-track) - var(--slider-thumb)) / 2);
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--ink);
    }

    &::-moz-range-thumb {
      width: var(--slider-thumb);
      height: var(--slider-thumb);
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--ink);
    }
  }

  /* --- Popovers y menús --- */

  .popover {
    position: fixed;
    inset: auto;
    width: min(var(--popover-w), 100vw - 2 * var(--gutter));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow: auto;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-float);
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--dur-2) var(--ease-out-soft),
      translate var(--dur-2) var(--ease-out-soft),
      display var(--dur-2) allow-discrete,
      overlay var(--dur-2) allow-discrete;

    &:not(:popover-open) {
      opacity: 0;
      translate: 0 var(--space-1);
    }
  }

  @starting-style {
    .popover:popover-open {
      opacity: 0;
      translate: 0 var(--space-1);
    }
  }

  /* Junto a su botón con anchor positioning (el ancla implícita es el botón que lo abre).
     Sin soporte, popover.js calcula la posición. */
  @supports (position-area: top) {
    .popover:not(.popover--center) {
      position-area: top span-left;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      margin: var(--space-2);
    }
  }

  .popover--center {
    inset: 0;
    margin: auto;
    width: min(var(--popover-center-w), 100vw - 2 * var(--gutter));
    height: fit-content;

    &::backdrop {
      background: var(--backdrop);
    }
  }

  .popover__title {
    margin-block-end: var(--space-3);
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
  }

  .popover__note {
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .menu {
    padding: var(--space-2);
  }

  .menu .popover__title {
    padding: var(--space-2) var(--space-2) 0;
    margin-block-end: var(--space-1);
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: var(--text-sm);

    &:hover {
      background: var(--bg-sunken);
    }

    &[aria-pressed="true"] {
      background: var(--moss-soft);
    }
  }

  .menu__item--clay {
    color: var(--clay);
  }

  .menu__hint {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  .timer-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);

    .chip {
      justify-content: center;
      padding-inline: var(--space-2);
    }
  }

  .timer-custom {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-soft);

    .field {
      flex: 1;
      width: 0;
    }
  }

  .toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin-block-start: var(--space-3);
    padding-block: var(--space-3) 0;
    border-top: var(--border) solid var(--line);
    text-align: left;
    font-size: var(--text-sm);
    color: var(--ink-soft);

    strong {
      display: block;
      color: var(--ink);
    }
  }

  .toggle-row__text {
    flex: 1;
  }

  .switch {
    position: relative;
    flex: none;
    width: calc(var(--space-6) + var(--space-2));
    height: var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);

    &::after {
      content: "";
      position: absolute;
      top: var(--space-1);
      left: var(--space-1);
      width: var(--space-4);
      height: var(--space-4);
      border-radius: var(--radius-pill);
      background: var(--ink-soft);
      transition: translate var(--dur-2) var(--ease-settle);
    }
  }

  [aria-pressed="true"] > .switch {
    background: var(--moss);

    &::after {
      background: var(--bg);
      translate: var(--space-4) 0;
    }
  }

  .save-form {
    display: grid;
    gap: var(--space-2);
  }

  .save-form__row {
    display: flex;
    gap: var(--space-2);

    .field {
      flex: 1;
    }
  }

  .save-form__status {
    min-height: 1lh;
    font-size: var(--text-sm);
    color: var(--moss);
  }

  .shortcuts__list {
    display: grid;
    gap: var(--space-2);

    div {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      padding-block: var(--space-1);
      border-top: var(--border) solid var(--line);
    }

    dd {
      margin: 0;
      color: var(--ink-soft);
    }
  }

  kbd {
    display: inline-block;
    min-width: 2.2ch;
    padding-inline: var(--space-1);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--bg);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-align: center;
  }

  /* --- Hoja inferior (mobile) --- */

  .sheet {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: var(--sheet-max);
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--bg-raised);
    box-shadow: var(--shadow-float-up);
    translate: 0 0;
    transition:
      translate var(--dur-3) var(--ease-out-soft),
      display var(--dur-3) allow-discrete,
      overlay var(--dur-3) allow-discrete;

    &:not([open]) {
      translate: 0 100%;
    }

    &::backdrop {
      background: var(--backdrop);
      opacity: 1;
      transition: opacity var(--dur-3) var(--ease-out-soft), display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
    }

    &:not([open])::backdrop {
      opacity: 0;
    }

    &.is-dragging {
      transition: none;
    }
  }

  @starting-style {
    .sheet[open] {
      translate: 0 100%;
    }

    .sheet[open]::backdrop {
      opacity: 0;
    }
  }

  .sheet__handle {
    width: var(--handle-w);
    height: var(--space-1);
    margin: var(--space-2) auto 0;
    border-radius: var(--radius-pill);
    background: var(--line);
  }

  .sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    touch-action: none;
  }

  .sheet__title {
    font-size: var(--text-lg);
    letter-spacing: 0;
  }

  .sheet__body {
    display: grid;
    gap: var(--space-5);
    padding: 0 var(--space-4) var(--space-5);
  }

  .sheet__master {
    display: grid;
    gap: var(--space-1);

    .slider {
      width: 100%;
    }
  }

  .sheet__section {
    display: grid;
    gap: var(--space-2);
  }

  .sheet__actions {
    display: grid;
    gap: var(--space-2);
  }

  .sheet__save {
    summary {
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }
    }

    .save-form {
      padding-block: var(--space-3) var(--space-1);
    }
  }

  /* --- Modo foco --- */

  .focus {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    background: var(--bg);
    color: var(--ink);

    &::backdrop {
      background: var(--bg);
    }

    &[data-idle] {
      cursor: none;
    }

    &[data-idle] .focus__bar {
      opacity: 0;
    }
  }

  .focus[open] {
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .focus__scene {
    position: absolute;
    inset: 0;
    z-index: -1;

    .window__canvas {
      width: 100%;
      height: 100%;
    }
  }

  .focus__center {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    text-align: center;
  }

  .focus__clock {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-weight: var(--display-weight);
    font-size: var(--text-clock);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--veil);
  }

  .focus__done {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-size: var(--text-xl);

    &:empty {
      display: none;
    }
  }

  .focus__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding-block: var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
    transition: opacity var(--dur-3) var(--ease-out-soft);
  }

  .focus__name {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--veil);
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-size: var(--text-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .focus .btn {
    background: var(--veil);
  }

  /* --- Tus mezclas y listas de mezclas --- */

  .library__groups {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 1024px) {
    .library__groups:has(> :not([hidden]) + :not([hidden])) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-7);
    }
  }

  .library__group > .label {
    margin-block-end: var(--space-2);
  }

  .library__note {
    margin-block-start: var(--space-5);
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  @media (min-width: 768px) {
    .mix-list--two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-7);
    }
  }

  .mix-row {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    border-top: var(--border) solid var(--line);
  }

  .mix-row__link {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name icons" "sounds sounds";
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) var(--space-2);
    text-decoration: none;

    .mix-icons { grid-area: icons; }
  }

  .mix-row__name {
    grid-area: name;
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-weight: var(--display-weight);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
  }

  .mix-row__sounds {
    grid-area: sounds;
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  /* Vista previa: la escena de la mezcla, en miniatura y estática, al pasar el mouse o enfocar. */
  .mix-row__preview {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out-soft);
    mask-image: linear-gradient(to right, transparent, #000 60%);
  }

  .mix-row:is(:hover, :focus-within) .mix-row__preview {
    opacity: 1;
  }

  .mix-row__delete {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .mix-row__delete .text-btn[data-confirm="yes"] {
    color: var(--clay);
  }

  .link-rows {
    margin-block: var(--space-3) var(--space-5);
  }

  .link-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: calc(var(--tap) + var(--space-1));
    border-top: var(--border) solid var(--line);
    text-decoration: none;

    & > .icon:first-child {
      color: var(--family, var(--ink-soft));
    }

    span {
      flex: 1;
    }
  }

  .link-row__arrow {
    color: var(--ink-soft);
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    text-decoration: none;

    &:hover {
      color: var(--ink);
    }
  }

  .back-link__icon {
    rotate: 180deg;
  }

  .page__side-inner {
    display: grid;
    gap: var(--space-3);
  }

  .page__faders {
    border-bottom: var(--border) solid var(--line);
  }

  .page__side-link {
    justify-self: start;
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  /* Crédito de la grabación, debajo de la ventana en la página de un sonido. */
  .sound-credit {
    max-width: var(--measure);
    margin-block-start: var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    text-wrap: pretty;
  }

  .prose {
    max-width: var(--measure);

    & > * + * {
      margin-block-start: var(--space-4);
    }

    & > h1 {
      margin-block-start: var(--space-2);
      margin-block-end: var(--space-2);
      font-size: var(--text-xl);
    }

    & > h2 {
      margin-block-start: var(--space-7);
      font-size: var(--text-lg);
      letter-spacing: 0;
    }

    & > .ad {
      margin-block-start: var(--space-7);
    }
  }

  .page-head {
    padding-block: var(--space-5) var(--space-6);
  }

  .credits {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);

    th,
    td {
      padding: var(--space-3) var(--space-3) var(--space-3) 0;
      border-bottom: var(--border) solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      font-weight: var(--ui-weight-strong);
      color: var(--ink-soft);
    }
  }

  /* Un crédito que combina dos fuentes: una por línea. */
  .credits__part {
    display: block;

    & + & {
      margin-block-start: var(--space-1);
    }
  }

  .credits-note {
    max-width: var(--measure);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    text-wrap: pretty;
  }

  .table-wrap {
    overflow-x: auto;
  }

  /* --- Preguntas frecuentes --- */

  .faq {
    max-width: var(--measure);

    details {
      border-top: var(--border) solid var(--line);
    }

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      min-height: var(--tap);
      padding-block: var(--space-3);
      font-weight: var(--ui-weight-strong);
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      .icon {
        color: var(--ink-soft);
        transition: rotate var(--dur-2) var(--ease-out-soft);
      }
    }

    details[open] summary .icon {
      rotate: 180deg;
    }

    p {
      padding-block-end: var(--space-4);
      color: var(--ink-soft);
    }
  }

  @supports selector(::details-content) {
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--dur-3) var(--ease-out-soft),
        content-visibility var(--dur-3) allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* --- Anuncios --- */

  .ad {
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: var(--border) solid var(--line);
    background: var(--bg-sunken);
    content-visibility: auto;
    contain-intrinsic-size: auto calc(var(--ad-h) + var(--space-7));
  }

  .ad__label {
    font-size: var(--text-xs);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-faint);
  }

  .ad__box {
    display: grid;
    place-items: center;
    min-height: var(--ad-h);
    margin-block-start: var(--space-2);
  }

  /* Tamaño exacto por punto de corte: 300 × 250 en mobile y 728 × 90 desde 1024 px. */
  .ad__ins {
    display: inline-block;
    width: var(--ad-ins-w);
    height: var(--ad-ins-h);
  }

  .ad__placeholder {
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  /* --- Tema: sol y luna en un solo botón --- */

  .theme-btn {
    position: relative;

    .icon {
      grid-area: 1 / 1;
      transition:
        opacity var(--dur-3) var(--ease-out-soft),
        rotate var(--dur-3) var(--ease-out-soft),
        scale var(--dur-3) var(--ease-out-soft);
    }
  }

  [data-theme="noche"] .theme-btn__sun,
  :root:not([data-theme="noche"]) .theme-btn__moon {
    opacity: 0;
    rotate: -90deg;
    scale: .6;
  }

  /* --- Guía de estilos --- */

  .sg-section {
    padding-block: var(--space-7) 0;

    & > h2 {
      margin-block-end: var(--space-5);
    }
  }

  .sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-4);
  }

  .sg-swatch__color {
    height: var(--space-8);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-sm);
  }

  .sg-swatch__name {
    margin-block-start: var(--space-2);
    font-weight: var(--ui-weight-strong);
    font-size: var(--text-sm);
  }

  .sg-swatch__value {
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  .sg-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--space-2);

    figure {
      display: grid;
      justify-items: center;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-2);
      border-top: var(--border) solid var(--line);
    }

    figcaption {
      font-size: var(--text-xs);
      color: var(--ink-soft);
    }
  }

  .sg-demo {
    max-width: 30rem;
  }

  .sg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);

    th,
    td {
      padding: var(--space-2) var(--space-3) var(--space-2) 0;
      border-bottom: var(--border) solid var(--line);
      text-align: left;
    }
  }

  .sg-player {
    position: relative;
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-float);

    .player__inner {
      width: auto;
      padding-inline: var(--space-4);
    }
  }

  .sg-logo .logo__mark {
    height: calc(var(--logo-h) * 2.5);
  }
}

/* ------------------------------------------------------------- utilities */

@layer utilities {
  .text-center {
    text-align: center;
  }
}

/* ------------------------------------------------------ view transitions */

@layer overrides {
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
      animation-duration: var(--dur-4);
      animation-timing-function: var(--ease-out-soft);
    }

    /* Cambio de tema: revelación circular desde el botón. */
    html[data-vt="theme"]::view-transition-old(root) {
      animation: none;
    }

    html[data-vt="theme"]::view-transition-new(root) {
      animation: theme-reveal var(--dur-reveal) var(--ease-out-soft);
    }
  }

  @keyframes theme-reveal {
    from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
    to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); }
  }

  html[data-vt="theme"] .window,
  html[data-vt="theme"] .player {
    view-transition-name: none;
  }

  html[data-vt="theme"] body {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .fader__icon,
    .fader__icon > .icon,
    .play-big,
    .fader::before {
      animation: none !important;
    }
  }
}