/* =========================================================
   MEHARY — hoja de estilos
   Sitio multi-página, mobile-first, sin framework.
   Inicio: pantalla estática, sin scroll, con el menú de 6 iconos.
   Páginas secundarias: fondo fijo, contenido con scroll si hace falta.
   Paleta y tipografía provisionales: ajustar --color-* y --font-display
   cuando cierres marca definitiva.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Special+Elite&display=swap');

:root{
  --color-bg: #efe6d2;
  --color-bg-alt: #e6dbc2;
  --color-ink: #211a10;
  --color-ink-dim: #5c5140;
  --color-ink-invert: #f2e9d8;
  --color-accent: #c65a1e;
  --color-accent-dim: #a94d18;
  --color-teal: #1f5c5c;
  --color-blood: #8a1f1f;
  --color-line: rgba(33,26,16,.25);

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-rough: 'Special Elite', 'Courier New', monospace;

  --max-w: 900px;

  /* Tamaño de icono de la trama de calaveras de fondo (ver más abajo):
     siempre el 75% de --nav-icon-size, para que crezca en la misma
     proporción que los iconos del menú en cualquier pantalla (pedido de
     Anna, 24 sept: subir de 50% a 75% -- un 50% más grandes que antes). */
  --calavera-tile: clamp(34.5px, 7.5vh, 48px);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ height: 100%; }

body{
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Inicio: pantalla estática, sin scroll */
body.no-scroll{
  height: 100dvh;
  overflow: hidden;
}

/* Páginas secundarias: ocupan una pantalla si el contenido cabe (footer
   pegado abajo) y crecen con scroll solo si el contenido lo pide. */
body:not(.no-scroll){
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

img{ max-width: 100%; display: block; }

a{ color: var(--color-accent); }
a:hover, a:focus-visible{ color: var(--color-ink); }

h1, h2, h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.1;
  margin: 0 0 .5em;
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #17140f;
  padding: .6em 1em; font-weight: bold;
}
.skip-link:focus{ left: 0; }

/* ---------- Fondo fijo de página ---------- */

.page-bg{
  position: fixed; inset: 0; z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-bg--inicio{
  background-image:
    linear-gradient(180deg, rgba(20,16,10,.08) 0%, rgba(20,16,10,.14) 55%, rgba(20,16,10,.24) 100%),
    url("../assets/fondo-inicio-textura.jpg");
}
.page-bg--secciones{
  background-image:
    linear-gradient(180deg, rgba(255,252,244,.45) 0%, rgba(255,252,244,.55) 100%),
    url("../assets/fondo-secciones-textura.jpg");
}

/* ---------- Trama de calaveras / méharis (capa ambiental de marca) ---------- */
/* Referencia de Anna: el tramado de escudos MEHARY sobre el mar que usó
   en la cabecera de YouTube y el perfil de Spotify. Iconos traslúcidos,
   situados entre el fondo fotográfico (.page-bg, z-index -1, la
   playa/edificios de siempre -- SIGUE viéndose entero, esta capa no lo
   tapa ni lo sustituye) y el resto de la web (todo lo demás tiene
   z-index >= 1) -- pertenecen visualmente al fondo, no al contenido. Es
   una trama muy espaciada a propósito (pedido explícito de Anna): entre
   un icono y el siguiente hay como mínimo 1.5 iconos de hueco vacío -- el
   espaciado (no solo la opacidad) es lo que garantiza que el fondo se
   siga viendo de sobra. El grid real de <img>, con ese espaciado, lo
   genera js/calaveras-fondo.js (GAP_MULTIPLIER ahí controla el hueco;
   también decide ahí qué iconos pone en cada casilla según el modo). Este
   bloque solo define el tamaño del icono (--calavera-tile, el 75% de
   --nav-icon-size en cualquier pantalla — ver :root y el media query de
   abajo) y el comportamiento por modo (ver los dos bloques siguientes).

   Dos modos, con clases modificadoras `--inicio` / `--secciones` (mismo
   patrón que `.page-bg--inicio`/`.page-bg--secciones`), pedidos
   explícitamente por Anna el 28 sept porque cumplen necesidades
   distintas:
   - Inicio (`.pattern-calaveras--inicio`): SOLO calaveras, parpadeando
     ("aparecen y desaparecen") en escritorio -- es la pantalla de
     bienvenida, sin texto que leer, así que el movimiento no molesta.
   - Páginas secundarias (`.pattern-calaveras--secciones`): calaveras Y
     méharis alternados (uno de cada dos, a cuadros -- ver JS), SIEMPRE
     estáticos y más difuminados -- estas páginas sí tienen contenido que
     leer (texto de Bio, listas de plataformas...) y Anna pidió
     explícitamente que ahí no haya "elementos intermitentes" que
     distraigan. */
.pattern-calaveras{
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pattern-calaveras img{
  position: absolute; top: 0; left: 0;
  width: var(--calavera-tile);
  height: var(--calavera-tile);
  object-fit: contain;
}

/* --- Inicio: solo calaveras, parpadeo intermitente en escritorio --- */
.pattern-calaveras--inicio img{
  opacity: .05;
  animation-name: calavera-parpadeo;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Traslúcidas, con picos de parpadeo algo más visibles, para el efecto
   "aparecen y desaparecen" que pedía Anna -- con tanto hueco vacío entre
   ellas (ver arriba) el fondo nunca se llega a tapar, así que el pico no
   necesita ser tan tenue como en la primera versión (más apretada) de
   esta trama. animation-delay y animation-duration se asignan por icono
   desde JS (valores distintos y con delay negativo, para que no
   arranquen todos sincronizados ni todos a la vez). */
@keyframes calavera-parpadeo{
  0%, 100%{ opacity: .05; }
  50%{ opacity: .22; }
}
/* En móvil (mismo breakpoint que el coche y el menú, <700px) las
   calaveras dejan de parpadear -- imagen fija, igual que el coche
   también se queda quieto ahí (petición explícita de Anna: en móvil,
   tanto el coche como las calaveras son imágenes fijas). El JS sigue
   asignando animation-duration/delay a cada `<img>`, pero al quedar
   `animation-name` en `none` aquí no llegan a usarse -- no hace falta
   tocar js/calaveras-fondo.js para esto, es un `@media` normal. */
@media (max-width: 699px){
  .pattern-calaveras--inicio img{ animation: none; opacity: .1; }
}
@media (prefers-reduced-motion: reduce){
  .pattern-calaveras--inicio img{ animation: none; opacity: .1; }
}

/* --- Páginas secundarias: calaveras + méharis a cuadros, siempre
   estáticos y difuminados, en CUALQUIER pantalla (a diferencia de
   Inicio, aquí no hay excepción de escritorio -- pedido explícito de
   Anna el 28 sept: nada de parpadeo donde hay contenido que leer). El
   JS (ver js/calaveras-fondo.js) reparte los dos iconos en tablero de
   ajedrez -- este bloque solo fija opacidad baja + un desenfoque suave
   ("difuminado") para que se noten como textura de fondo sin competir
   con el texto. */
.pattern-calaveras--secciones img{
  opacity: .09; /* pedido de Anna, 30 sept */
  filter: blur(1.5px);
}

/* Grano fotográfico sobre toda la pantalla (no solo el fondo) — la textura
   que más cambia la sensación "ilustración digital" por "cartel impreso".
   SVG feTurbulence como patrón, sin necesitar ningún archivo de imagen.
   Opacidad baja a propósito: pasada de rosca tapa el logo y las etiquetas
   del menú (letras finas) — ver nota de Anna, sesión 11 sept. */
.grain-overlay{
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .28;
}
/* Viñeteado ligero — deliberadamente suave y que no empieza hasta el 60%
   del radio, para no oscurecer la esquina donde vive el logo. */
.vignette-overlay{
  position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(15,10,6,.22) 100%);
}

/* ---------- Logo (fijo, en todas las pantallas) ---------- */

.corner-logo{
  position: fixed; top: 1rem; left: 1rem; z-index: 60;
  line-height: 0;
}
/* Halo suave detrás del logo: con el grano/viñeta encima, la variante
   negra del logo podía "perderse" en la esquina si esa zona caía sobre un
   parche más oscuro. En vez de perseguir dónde cae la sombra, le damos al
   logo su propio claro fijo, independiente del fondo que tenga debajo. */
.corner-logo::before{
  content: ""; position: absolute; inset: -16px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,230,210,.45) 0%, rgba(239,230,210,0) 72%);
}
.logo{
  width: 84px; height: 84px; color: var(--color-ink);
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
/* En escritorio el logo pasa a ~1.5x la altura del wordmark "MEHARY"
   (pedido explícito de Anna) — se usa la misma curva clamp() que
   .wordmark (ver más abajo) multiplicada por 1.5, para que ambos crezcan
   a la par en cualquier tamaño de pantalla ancha. En móvil se deja tal
   cual (84px), que ya estaba bien. */
@media (min-width: 700px){
  .logo{ width: clamp(4.5rem, 19.5vh, 8.4rem); height: clamp(4.5rem, 19.5vh, 8.4rem); }
}

/* ---------- Flecha "volver a inicio" (páginas secundarias) ---------- */

.back-arrow{
  position: fixed; bottom: 1rem; left: 1rem; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(23,20,15,.72);
  border: 1px solid rgba(242,233,216,.3);
  color: var(--color-ink-invert);
  text-decoration: none;
  animation: back-arrow-pulse 2.2s ease-in-out infinite;
}
.back-arrow svg{ width: 20px; height: 20px; }
.back-arrow:hover, .back-arrow:focus-visible{
  background: var(--color-accent); color: #17140f; border-color: var(--color-accent);
}
@keyframes back-arrow-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .4; }
}
@media (prefers-reduced-motion: reduce){
  .back-arrow{ animation: none; }
}

/* ---------- Inicio ---------- */

.inicio-screen{
  position: relative;
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: clamp(3.5rem, 14vh, 5rem) 1.25rem clamp(1rem, 3vh, 1.5rem);
  text-align: center;
  overflow: hidden;
}
/* En pantalla vertical/móvil (<700px) el logo (84px + 1rem de margen)
   quedaba casi pegado al wordmark "MEHARY" porque el padding-top tope
   (5rem=80px) es más bajo que el borde inferior real del logo (~100px).
   Se sube el tope solo en este rango — en escritorio el logo está lejos
   del wordmark (esquina vs. centro), así que no hace falta tocarlo ahí. */
@media (max-width: 699px){
  .inicio-screen{ padding-top: clamp(6.5rem, 18vh, 8rem); }
}

/* El coche va DENTRO del flujo flex de .inicio-screen, entre el nombre y
   el menú (ver orden en el HTML): con justify-content:space-between en el
   padre, los dos huecos (nombre↔coche y coche↔menú) quedan siempre
   iguales, así que el coche cruza equidistante entre ambos sea cual sea
   el tamaño del logo/menú/nombre. No usar position:absolute aquí.
   --car-h controla el tamaño del coche (~1/3 de la pantalla de alto,
   pedido por Anna) y lo comparten .hero-scene y .hero-car para que el
   hueco que reserva el flexbox coincida con el tamaño real del coche. */
.hero-scene{
  --car-h: clamp(80px, 27dvh, 260px);
  position: relative; z-index: 1;
  width: 100%;
  height: var(--car-h);
  pointer-events: none;
}
.hero-car{
  position: absolute; top: 50%;
  /* El coche nunca debe recortarse por los lados, en ningún soporte: en
     vez de fijar la altura a --car-h y dejar que el ancho se salga del
     carril (recortándose con el overflow:hidden de .inicio-screen), se
     deja que el navegador elija el tamaño más grande que quepa ENTERO
     dentro del carril conservando su proporción real (igual que
     object-fit:contain, pero afectando también al hueco que ocupa en el
     layout, no solo al dibujo). max-height tira del alto hacia los ~27dvh
     objetivo; max-width es la red de seguridad en pantallas estrechas y
     altas: si no hay sitio para llegar a esa altura sin salirse por los
     lados, el coche se queda un poco más bajo en vez de recortarse. */
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  left: var(--car-start-x, 160%);
  transform: translateY(-50%) scaleX(-1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.hero-car.is-driving{ animation: drive-across 9s linear 1; }
/* "Marcha atrás" (petición de Anna, 11 sept): entra por la derecha, sale
   por la izquierda — justo al revés que antes. Los valores por defecto
   (160%/-60%) son solo la red de seguridad mientras carga el JS, que es
   quien calcula la posición real alineada con la "M". */
@keyframes drive-across{
  from{ left: var(--car-start-x, 160%); }
  to{ left: var(--car-end-x, -60%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-car{ left: var(--car-start-x, 30%); }
}

.hero-text{ position: relative; z-index: 2; max-width: 680px; width: 100%; }
.hero-text h1{ margin: 0; line-height: 0; }
.wordmark{
  width: auto;
  height: clamp(3rem, 13vh, 5.6rem);
  max-width: 100%;
  margin: 0 auto;
  /* el arte original es blanco; se recolorea a oscuro con filtros CSS
     (no hay versión oscura del archivo) */
  filter: brightness(0) drop-shadow(0 1px 3px rgba(255,255,255,.5));
}

.icon-menu{ position: relative; z-index: 2; width: 100%; max-width: 620px; }
.icon-menu ul{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.4rem, 2vh, 1rem) .5rem;
}
.icon-menu a{
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  text-decoration: none; color: var(--color-ink);
  font-family: var(--font-rough);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
  padding: .5rem .3rem; border-radius: 8px;
  /* Special Elite es una letra fina — sobre el fondo con grano/viñeta
     necesita un halo claro para no perder legibilidad (nota de Anna). */
  text-shadow: 0 1px 3px rgba(239,230,210,.6), 0 0 1px rgba(239,230,210,.45);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.icon-menu a:hover, .icon-menu a:focus-visible{
  background: rgba(138,31,31,.10);
  color: var(--color-blood);
  transform: translateY(-3px) rotate(-1.5deg);
  transition: background .12s ease, color .12s ease, transform .12s cubic-bezier(.3,1.6,.4,1);
}
.nav-icon{
  width: clamp(46px, 10vh, 64px); height: clamp(46px, 10vh, 64px);
  color: var(--color-accent);
  object-fit: contain;
}

@media (min-width: 700px){
  .icon-menu{ max-width: 780px; }
  .icon-menu ul{ grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
  /* Iconos y leyendas un 10% más grandes que en móvil (pedido de Anna,
     11 sept: "siguen siendo muy pequeños" en escritorio). */
  .icon-menu a{ font-size: .86rem; }
  .nav-icon{ width: clamp(50.6px, 11vh, 70.4px); height: clamp(50.6px, 11vh, 70.4px); }
  /* La trama de calaveras de fondo crece a la par (75% del icono). */
  :root{ --calavera-tile: clamp(37.95px, 8.25vh, 52.8px); }
}

.corner-copyright{
  position: fixed; bottom: .6rem; right: .75rem; z-index: 40;
  font-size: .65rem; color: var(--color-ink-dim); opacity: .8; margin: 0;
}

/* ---------- Buttons / forms ---------- */

.btn{
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .5px; font-size: .85rem;
  text-decoration: none;
  padding: .8em 1.4em; border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary{ background: var(--color-accent); color: #17140f; }
.btn-primary:hover, .btn-primary:focus-visible{ background: var(--color-ink); color: #17140f; }
.btn-outline{ background: transparent; border-color: var(--color-ink-dim); color: var(--color-ink); }
.btn-outline:hover, .btn-outline:focus-visible{ border-color: var(--color-accent); color: var(--color-accent); }

.lead-text{ max-width: 520px; }

/* Formulario de Brevo (newsletter, 30 sept) -- versión "HTML" con JS de
   Brevo (no sale de mehary.es al enviarlo). El grueso del recoloreado a la
   marca MEHARY va en estilos inline dentro de newsletter.html, sobre el
   propio HTML que genera Brevo, para no depender de si este archivo carga
   antes o después que el CSS de Brevo (sib-styles.css). Aquí solo van dos
   cosas que no se pueden poner inline: el foco al tabular y el hover del
   botón (con !important porque, si no, el color de fondo puesto inline
   para el estado normal del botón gana siempre a un :hover normal). */
#sib-container input.input:focus-visible{
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
#sib-container .sib-form-block__button:hover,
#sib-container .sib-form-block__button:focus-visible{
  background-color: var(--color-ink) !important;
  color: #17140f !important;
}

/* ---------- Páginas secundarias ---------- */

.page-content{
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 1.25rem 3rem;
}

/* En pantallas estrechas el contenido ocupa casi todo el ancho, así que
   en páginas largas (p. ej. Bio) el texto puede pasar por detrás del logo
   fijo (arriba izq.) o de la flecha fija (abajo izq.) al hacer scroll.
   Se reserva un margen izquierdo que los esquiva en todo momento. */
@media (max-width: 699px){
  .page-content{ padding-left: 6.5rem; }
}

.page-content h1{
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  border-bottom: 2px solid var(--color-line);
  padding-bottom: .4em;
  margin-bottom: 1em;
}

.pending-note{
  color: var(--color-ink-dim);
  font-style: italic;
  font-size: .9rem;
}

.bandcamp-embed{ margin-bottom: 2rem; }

.platform-lead{
  margin: 0 0 .75rem;
  text-transform: uppercase; letter-spacing: .5px; font-size: .8rem;
  color: var(--color-ink-dim);
}

.platform-list, .social-links{
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem .75rem;
  padding: 0; margin: 0 0 1rem;
}
.platform-list li, .social-links a{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5em 1em;
  border: 1px solid var(--color-line); border-radius: 20px;
  text-decoration: none; font-size: .85rem;
}
.social-links a{ color: var(--color-ink); }
.social-links a:hover, .social-links a:focus-visible{
  border-color: var(--color-accent); color: var(--color-accent);
}
.platform-list li.pending{ color: var(--color-ink-dim); }
.platform-icon{ width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; object-fit: contain; }

.video-embed{ max-width: 720px; }
.video-embed iframe{
  width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px;
}
/* El adelanto en Shorts es vertical (9:16), a diferencia del videoclip
   horizontal que lo sustituirá el 9 de octubre — caja más estrecha para
   que no salga un rectángulo horizontal gigante con el vídeo diminuto
   en el centro. */
.video-embed--short{ max-width: 360px; }
.video-embed--short iframe{ aspect-ratio: 9 / 16; }
.video-note{
  color: var(--color-ink-dim);
  font-style: italic;
  font-size: .9rem;
  margin: .75rem 0 1.5rem;
}

/* La foto real (los tres músicos, formato horizontal) va como una
   cabecera/banner encima del texto, no al lado — con foto apaisada un
   layout a dos columnas la dejaba diminuta. Se apila siempre, en
   cualquier ancho de pantalla. */
.bio-content{ display: flex; flex-direction: column; gap: 2rem; }
.bio-photo{
  width: 100%; max-width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--color-line);
}
.bio-text{ max-width: 640px; }
.bio-text p{ margin: 0 0 1em; }
.bio-signoff{
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-accent);
  margin-top: 1.5em;
}

.contact-block{
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
#contact-email{ font-size: 1.1rem; }
.copy-feedback{ font-size: .85rem; color: var(--color-ink-dim); min-height: 1.2em; margin: 0; }

/* ---------- Música: grid de lanzamientos (thumbnails a landing propia) ---------- */
/* Cada single/EP/maxisingle/álbum tiene su propia landing dentro de
   musica/<slug>.html (portada + descripción + fragmento de letra +
   enlaces a plataformas) -- pensada como lo que se comparte en redes en
   cada lanzamiento. Aquí, en Música, solo vive el thumbnail de entrada:
   portada + nombre + "+ info". Pedido de Anna, 30 sept. */
.release-grid{
  list-style: none; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: 460px;
  padding: 0; margin: 0 0 2.5rem;
}
.release-card{
  display: block; text-decoration: none; color: var(--color-ink);
}
.release-card img{
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--color-line);
  margin-bottom: .5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.release-card:hover img, .release-card:focus-visible img{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.release-card .release-name{
  display: block;
  font-family: var(--font-display); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: .15rem;
}
.release-card .release-cta{
  display: block;
  font-family: var(--font-rough); font-size: .75rem;
  color: var(--color-accent);
}
.release-card:hover .release-cta, .release-card:focus-visible .release-cta{
  color: var(--color-blood);
}

/* ---------- Landing de lanzamiento (musica/<slug>.html) ---------- */
.release-hero{
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 700px){
  .release-hero{ flex-direction: row; align-items: flex-start; }
}
.release-cover{
  width: 100%; max-width: 300px;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--color-line);
  flex-shrink: 0;
}
.release-info .release-kicker{
  font-family: var(--font-rough); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--color-ink-dim); margin: 0 0 .3em;
}
.release-info h1{ margin-bottom: .2em; }
.release-info .release-date{
  font-size: .85rem; color: var(--color-ink-dim); margin: 0;
}
.release-desc{ max-width: 640px; }
.release-desc p{ margin: 0 0 1em; }
/* Fragmento de letra: tipografía "de máquina de escribir" (misma que el
   menú de Inicio) para que se lea como una cita manuscrita, no como texto
   de marketing -- con un filo rojo sangre a juego con el acento de hover
   del menú. */
.release-lyric{
  font-family: var(--font-rough);
  font-size: 1.05rem; line-height: 1.75;
  color: var(--color-ink);
  border-left: 3px solid var(--color-blood);
  padding: .1em 0 .1em 1.1em;
  margin: 1.75em 0;
  white-space: pre-line;
  max-width: 560px;
}
.release-links{ margin-top: 2rem; }

/* ---------- Footer (páginas secundarias) ---------- */

.site-footer{
  position: relative; z-index: 1;
  flex-shrink: 0;
  text-align: center; padding: 1.5rem 1rem 2rem;
  color: var(--color-ink-dim); font-size: .8rem;
}