:root {
    /* Frío: la identidad de boki.es, tomada del logo. */
    --fondo:      #0A1017;
    --fondo-alto: #101922;
    --panel:      rgba(180, 215, 235, .045);
    --cian:       #3FBEE6;
    --cian-hondo: #1B6F92;

    --texto:      #E9F2F7;
    --texto-mute: rgba(233, 242, 247, .60);
    --texto-faint:rgba(233, 242, 247, .36);
    --linea:      rgba(233, 242, 247, .13);
    --linea-soft: rgba(233, 242, 247, .075);

    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --ancho: 900px;
    --r: 16px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--display);
    font-variation-settings: "wdth" 100, "wght" 400;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Halo frío muy tenue tras la cabecera. */
  body::before {
    content: "";
    position: fixed;
    inset: -20% 0 auto 0;
    height: 70vh;
    z-index: -1;
    background: radial-gradient(70% 60% at 22% 0%, rgba(63, 190, 230, .13), transparent 70%);
    pointer-events: none;
  }

  .wrap {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 24px;
  }

  /* ── Barra superior ── */
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-faint);
  }
  .top b { color: var(--texto); font-weight: 500; }

  /* ── Cabecera ── */
  .hero {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 34px);
    padding-block: clamp(38px, 7vw, 66px) clamp(30px, 5vw, 48px);
  }
  .avatar {
    flex: none;
    width: clamp(96px, 15vw, 132px);
    height: clamp(96px, 15vw, 132px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 25%, rgba(63,190,230,.18), rgba(10,16,23,0) 70%);
    box-shadow: inset 0 0 0 1px rgba(63,190,230,.30);
  }
  .avatar img { width: 84%; height: 84%; object-fit: contain; display: block; }

  .hero h1 {
    margin: 0;
    font-variation-settings: "wdth" 112, "wght" 800;
    font-size: clamp(38px, 7vw, 64px);
    line-height: .96;
    letter-spacing: -.025em;
    text-wrap: balance;
  }
  .hero .rol {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cian);
  }
  .hero .rol span { color: var(--texto-faint); padding-inline: 8px; }

  /* ── Los singles ──
     Cada tarjeta trae su propia paleta cálida en variables, muestreada de su
     portada; la estructura y el reproductor son los mismos para todas. */
  .singles { display: grid; gap: 14px; }

  .single {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas:
      "portada info"
      "portada fila";
    gap: 16px clamp(18px, 3vw, 28px);
    align-items: center;
    padding: 22px;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--fondo-card), var(--fondo-alto);
  }
  .single > * { position: relative; z-index: 1; }

  /* Ella No Duerme: negro azulado y naranja sodio. */
  .single.noche {
    --acento:     #FFAB4A;
    --acento-vivo:#FF6B1A;
    --crema:      #F6ECE0;
    --tinta:      #1A0C05;
    --borde:      rgba(255, 138, 46, .28);
    --fondo-card:
      radial-gradient(70% 60% at 88% 112%, rgba(255,107,26,.34), transparent 70%),
      radial-gradient(40% 70% at 0% 0%, rgba(40,20,48,.9), transparent 70%),
      linear-gradient(115deg, #0B0A12 0%, #150C1A 55%, #1A0F1A 100%);
    --viz-a: #F6ECE0; --viz-b: #FFAB4A; --viz-c: #FF6B1A;
  }
  /* Málaga Garantizada: oro, brasa y magenta de atardecer. */
  .single.malaga {
    --acento:     #FCBD3C;
    --acento-vivo:#D75E37;
    --crema:      #FBF2E9;
    --tinta:      #1A0E05;
    --borde:      rgba(252, 189, 60, .26);
    --fondo-card:
      linear-gradient(115deg, rgba(23,10,45,.92) 0%, rgba(70,19,76,.88) 38%, rgba(146,41,94,.72) 70%, rgba(215,94,55,.55) 100%);
    --viz-a: #FBF2E9; --viz-b: #FCBD3C; --viz-c: #D75E37;
  }

  /* Decorado de Málaga: la rejilla que corre mientras suena. */
  .single .rejilla {
    position: absolute;
    inset: 55% -40% -45%;
    z-index: 0;
    background-image:
      repeating-linear-gradient(90deg, rgba(252,189,60,.22) 0 1px, transparent 1px 70px),
      repeating-linear-gradient(0deg,  rgba(252,189,60,.16) 0 1px, transparent 1px 34px);
    transform: perspective(220px) rotateX(72deg);
    transform-origin: 50% 0;
    animation: correr 5s linear infinite;
    animation-play-state: paused;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
    pointer-events: none;
  }
  .single.sonando .rejilla { animation-play-state: running; }
  @keyframes correr { to { background-position: 0 34px, 0 34px; } }

  /* Decorado de Ella No Duerme: la línea de neón de la portada, que late
     mientras suena. */
  .single .neon {
    position: absolute;
    left: 10%; right: 10%; bottom: 0;
    height: 3px;
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,107,26,0), #FF8A2E 18%, #FFB268 50%, #FF8A2E 82%, rgba(255,107,26,0));
    box-shadow: 0 0 18px 4px rgba(255,120,40,.45);
    opacity: .55;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .single.sonando .neon { opacity: 1; animation: latir-neon 1.23s ease-in-out infinite; }
  @keyframes latir-neon {
    50% { opacity: .55; box-shadow: 0 0 10px 2px rgba(255,120,40,.3); }
  }

  .portada {
    grid-area: portada;
    align-self: center;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(251,242,233,.14);
  }
  .portada img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .info { grid-area: info; min-width: 0; }

  .eyebrow {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acento);
  }
  .punto {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
  }
  .eyebrow em { font-style: normal; white-space: nowrap; color: color-mix(in srgb, var(--crema) 50%, transparent); }

  .single h2 {
    margin: 0;
    font-variation-settings: "wdth" 116, "wght" 800;
    font-size: clamp(26px, 4.4vw, 40px);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--crema);
  }
  .single h2 .acento { color: var(--acento); }
  .single .ficha {
    margin: 8px 0 0;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .05em;
    color: color-mix(in srgb, var(--crema) 62%, transparent);
    font-variant-numeric: tabular-nums;
  }

  .fila {
    grid-area: fila;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .play {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--acento);
    color: var(--tinta);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .play:hover { transform: scale(1.07); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento) 15%, transparent); }
  .play.cargando { animation: latir 1s ease-in-out infinite; }
  @keyframes latir { 50% { opacity: .55; transform: scale(.94); } }
  .play svg { width: 17px; height: 17px; fill: currentColor; }
  .play .icono-pausa { display: none; }
  .single.sonando .play .icono-play { display: none; }
  .single.sonando .play .icono-pausa { display: block; }

  .medidor {
    flex: 1 1 150px;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .viz { flex: 1; min-width: 0; height: 34px; display: block; }
  .tiempo {
    flex: none;
    font-family: var(--mono);
    font-size: 12px;
    color: color-mix(in srgb, var(--crema) 55%, transparent);
    font-variant-numeric: tabular-nums;
  }

  .cta {
    flex: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--crema);
    color: var(--tinta);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease;
  }
  .cta:hover { transform: translateY(-2px); background: #fff; }
  .cta svg { width: 19px; height: 19px; flex: none; }



  /* Plataformas secundarias: solo el icono, redondo. */
  .tambien {
    flex: none;
    display: inline-flex;
    gap: 8px;
  }
  .tambien a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--crema) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crema) 16%, transparent);
    transition: transform .18s ease, background .18s ease;
  }
  .tambien a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--crema) 18%, transparent); }
  .tambien svg { width: 19px; height: 19px; display: block; }

  /* La tarjeta menor: el single anterior, más recogido. */
  .single.menor {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 18px 22px;
    gap: 12px clamp(16px, 3vw, 24px);
  }
  .single.menor h2 { font-size: clamp(22px, 3.4vw, 30px); }
  .single.menor .eyebrow { margin-bottom: 6px; }
  .single.menor .ficha { margin-top: 6px; }
  .single.menor .play { width: 42px; height: 42px; }
  .single.menor .viz { height: 30px; }

  /* ── Secciones ── */
  section { padding-block: clamp(44px, 7vw, 68px) 0; }

  .titulo-seccion {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texto-faint);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .titulo-seccion::after { content: ""; flex: 1; height: 1px; background: var(--linea-soft); }

  /* ── Enlaces ── */
  .enlaces {
    display: grid;
    gap: 1px;
    background: var(--linea-soft);
    border: 1px solid var(--linea-soft);
    border-radius: var(--r);
    overflow: hidden;
  }
  .enlace {
    display: grid;
    grid-template-columns: 22px minmax(0, 150px) minmax(0, 1fr) 18px;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--fondo);
    text-decoration: none;
    color: var(--texto);
    transition: background .2s ease;
  }
  .enlace:hover, .enlace:focus-visible { background: var(--fondo-alto); }
  .enlace svg { width: 20px; height: 20px; color: var(--texto-faint); transition: color .2s ease; }
  .enlace:hover svg { color: var(--cian); }
  .enlace .plataforma {
    font-variation-settings: "wdth" 106, "wght" 600;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .005em;
  }
  .enlace .handle {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--texto-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .enlace .flecha { font-family: var(--mono); color: var(--texto-faint); transition: transform .2s ease, color .2s ease; }
  .enlace:hover .flecha { color: var(--cian); transform: translate(3px, -3px); }

  /* ── Sobre mí ── */
  .sobre {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 52px);
    align-items: start;
  }
  .sobre p {
    margin: 0 0 14px;
    max-width: 60ch;
    color: var(--texto-mute);
  }
  .sobre p:last-child { margin-bottom: 0; }
  .sobre strong { color: var(--texto); font-weight: 600; }

  .stack { display: grid; gap: 1px; background: var(--linea-soft); border-radius: 12px; overflow: hidden; }
  .stack div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 15px;
    background: var(--fondo);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--texto-mute);
  }
  .stack div b { color: var(--texto); font-weight: 500; }
  .stack div span { color: var(--cian); }

  /* ── Pie ── */
  footer {
    margin-top: clamp(48px, 8vw, 80px);
    border-top: 1px solid var(--linea-soft);
    padding-block: 26px 44px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-faint);
  }

  :where(a, button):focus-visible {
    outline: 2px solid var(--cian);
    outline-offset: 3px;
    border-radius: 8px;
  }

  .entra {
    opacity: 0;
    transform: translateY(12px);
    animation: entrar .7s cubic-bezier(.2, .7, .25, 1) forwards;
  }
  @keyframes entrar { to { opacity: 1; transform: none; } }

  /* Los botones del single piden unos 570 px de fila: por debajo de ese ancho
     la tarjeta pasa a la forma compacta, con la fila entera bajo la portada. */
  @media (max-width: 880px) {
    .single, .single.menor {
      grid-template-columns: clamp(96px, 13vw, 132px) minmax(0, 1fr);
      grid-template-areas:
        "portada info"
        "fila fila";
      gap: 16px;
      padding: 18px;
    }
    .single.menor { grid-template-columns: clamp(80px, 11vw, 112px) minmax(0, 1fr); }
    .single .portada { align-self: start; }
    .single .fila { gap: 10px; }
    .cta { flex: 1 1 auto; justify-content: center; }
  }
  /* Columna de texto estrecha: la ficha del single sigue cabiendo en una línea. */
  @media (max-width: 560px) {
    .eyebrow { font-size: 10px; letter-spacing: .07em; }
    .punto { margin-right: 8px; }
    .single .ficha .autor { display: none; }
  }
  @media (max-width: 720px) {
    .sobre { grid-template-columns: 1fr; }
    .enlace { grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 14px; }
    .enlace .handle { display: none; }
  }
  @media (max-width: 420px) {
    .hero { flex-direction: column; align-items: flex-start; }
    .single h2 { font-size: clamp(20px, 5.6vw, 26px); }
    .medidor { flex: 1 1 110px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .entra { opacity: 1; transform: none; }
  }