/* Creative Wild Artists — productora independiente. Tinta de imprenta sobre papel oscuro; cada producto con su color. */
:root{
  --tinta:#17131A;      /* fondo: carbón con un punto de ciruela */
  --tinta2:#201A24;     /* superficies */
  --linea:#3A3140;
  --papel:#EDE4D3;      /* texto */
  --hueso:#A89F92;      /* texto secundario */
  --lobo:#E9C15B;       /* oro de la melena del león: enlaces y foco */
  --c:#E3A23B;          /* color del producto (cada ficha pone el suyo) */
  --ancho:1080px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--papel);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:17px;line-height:1.55;font-optical-sizing:auto}
img{max-width:100%;display:block}
a{color:var(--lobo);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--lobo);outline-offset:3px;border-radius:2px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
/* idioma: solo se ve el elegido */
html[data-l="es"] [lang="en"]:not(html), html[data-l="en"] [lang="es"]:not(html){display:none!important}

/* cabecera */
.cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.marca{display:flex;align-items:center;gap:10px;color:var(--papel);text-decoration:none;font-weight:700;letter-spacing:-.01em;font-size:18px}
.marca img{width:34px;height:auto}
.lenguas{display:flex;gap:2px;border:1px solid var(--linea);border-radius:999px;padding:3px}
.lenguas button{font:inherit;font-size:14px;background:none;border:0;color:var(--hueso);padding:4px 12px;border-radius:999px;cursor:pointer}
.lenguas button[aria-pressed="true"]{background:var(--papel);color:var(--tinta);font-weight:600}

/* portada */
.portada{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding:48px 0 72px}
.lobo{justify-self:center;width:min(100%,400px);height:auto;filter:drop-shadow(0 0 50px rgba(64,190,214,.22))}
.portada h1{font-size:clamp(38px,6.4vw,78px);line-height:.98;letter-spacing:-.03em;font-weight:800;margin:0 0 22px;font-stretch:80%;max-width:14ch}
.portada p{font-size:clamp(18px,2.2vw,22px);color:var(--hueso);max-width:40ch;margin:0}

/* estanterías */
.estante{padding:20px 0 64px;border-top:1px solid var(--linea)}
.estante h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:28px 0 8px;font-weight:700}
.estante > .envoltura > p{color:var(--hueso);margin:0 0 28px;max-width:60ch}
.fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* un producto: como la etiqueta de un cartucho, con su color arriba */
.ficha{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--tinta2);border:1px solid var(--linea);padding:0 0 20px;min-height:320px;overflow:hidden}
.ficha .franja{height:118px;background:var(--c);position:relative;display:flex;align-items:flex-end;padding:0 20px 14px}
.ficha .franja b{font-size:34px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--tinta)}
.ficha .franja img{position:absolute;right:16px;top:16px;width:64px;height:64px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ficha .franja img.px{image-rendering:pixelated}
.ficha .tipo{padding:0 20px;font-size:14px;color:var(--hueso)}
.ficha p{padding:0 20px;margin:0}
.ficha .estado{margin-top:auto;padding:0 20px;display:flex;align-items:center;gap:8px;font-size:15px}
.ficha .estado i{width:9px;height:9px;border-radius:50%;background:var(--hueso);flex:none}
.ficha .estado.vivo i{background:#7BC86C}
.ficha .estado a{font-weight:600}

/* música: el disco asoma de la funda */
.discos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.disco{display:grid;grid-template-columns:184px minmax(0,1fr);gap:18px;align-items:center}
.funda{position:relative;width:140px;height:140px}
.funda{margin-right:44px}
.funda .vinilo{position:absolute;left:52px;top:6px;width:128px;height:128px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0c0a0d 0 2px,#2b2431 2px 3px);box-shadow:0 0 0 1px #3d3444}
.funda .vinilo::after{content:"";position:absolute;inset:44px;border-radius:50%;background:var(--c)}
.funda .tapa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--c);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.funda .tapa.musas{display:flex;align-items:center;justify-content:center;padding:10px;background:#fff} .funda .tapa.musas img{width:100%;height:auto}
.disco h3{margin:0 0 2px;font-size:26px;letter-spacing:-.02em}
.disco p.album{color:var(--papel);margin:0 0 6px;font-size:18px}
.disco p{margin:0 0 8px;color:var(--hueso)}

/* contacto y pie */
.contacto{border-top:1px solid var(--linea);padding:48px 0 56px}
.contacto h2{font-size:clamp(28px,4vw,40px);margin:0 0 10px;letter-spacing:-.02em}
.contacto a.correo{font-size:clamp(20px,3vw,28px);font-weight:600;word-break:break-all}
.pie{border-top:1px solid var(--linea);padding:22px 0 40px;color:var(--hueso);font-size:14px}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.pie a{color:var(--hueso)}
.pie a:hover{color:var(--papel)}

/* páginas de texto (legales) */
.texto{max-width:72ch;margin:0 auto;padding:24px 20px 72px}
.texto h1{font-size:clamp(32px,5vw,48px);letter-spacing:-.025em;line-height:1.05;margin:24px 0 6px}
.texto .fecha{color:var(--hueso);margin:0 0 32px}
.texto h2{font-size:22px;margin:36px 0 8px;letter-spacing:-.01em}
.texto p,.texto li{color:#D9D0BF}
.texto ul{padding-left:22px}
.texto table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0}
@media (max-width:640px){ .texto table{display:block;overflow-x:auto;font-size:14px} .texto th,.texto td{min-width:150px} }
.texto th,.texto td{border:1px solid var(--linea);padding:8px 10px;text-align:left;vertical-align:top}
.texto th{background:var(--tinta2);color:var(--papel)}
.volver{display:inline-block;margin-top:8px;font-size:15px}

@media (max-width:820px){
  .portada{grid-template-columns:1fr;gap:20px;padding:24px 0 52px}
  .lobo{width:min(64vw,260px)}
  .fila{grid-template-columns:1fr}
  .discos{grid-template-columns:1fr}
  .ficha{min-height:0}
}
@media (max-width:420px){ .disco{grid-template-columns:140px minmax(0,1fr)} .funda{width:104px;height:104px;margin-right:34px} .funda .vinilo{width:96px;height:96px;left:40px;top:4px} .funda .vinilo::after{inset:34px} }