/* ===================================================================
   DILUSA.COM.MX — sistema de diseño
   Todo lo editable a mano vive arriba, en :root.
   =================================================================== */

/* ---------- 1. Tipografías ---------- */

@font-face {
  font-family: "DILUSA Sans";
  src: url("../fonts/DILUSASans.woff2") format("woff2"),
       url("../descargas/DILUSA-Sans.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* block: evita el "flash" de texto con la fuente equivocada */
}

/* Mismo nombre de familia, otro peso: así "font-weight: 700" alcanza
   el Bold solo, sin tener que escribir un nombre de fuente distinto
   en cada regla. */
@font-face {
  font-family: "DILUSA Sans";
  src: url("../fonts/DILUSA Sans Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Paleta (tal cual la entregaste) */
  --rojo:   #8b0203;
  --rosa:   #de3a81;
  --azul:   #0b1a4d;
  --negro:  #000000;
  --blanco: #f8f3f3;

  /* Roles */
  --fondo-home:     var(--rosa);
  --fondo-interior: var(--azul);
  --texto:          var(--blanco);
  --acento:         var(--rosa);
  --link:           var(--azul);

  /* Tipografía
     TODO el sitio va en DILUSA Sans, sin excepciones.
     Los tres nombres existen para poder separarlos después si quieres:
       --f-mano     texto general (menú, listas, campos)
       --f-display  títulos de sección
       --f-lectura  párrafos explicativos y pie de página
     Cambiando uno solo se actualiza ese grupo en todo el sitio. */
  --f-mano: "DILUSA Sans", "Trebuchet MS", Verdana, sans-serif;
  --f-display: var(--f-mano);
  --f-lectura: var(--f-mano);

  /* Escala de espaciado (múltiplos de 8) */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 96px;

  --ancho-max: 1180px;
  --borde: 3px solid var(--blanco);
}

/* ---------- 3. Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo-interior);
  color: var(--texto);
  font-family: var(--f-mano);
  font-size: 18px;
  line-height: 1.35;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote {
  margin: 0;
}

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

a { color: var(--texto); }

::selection { background: var(--rojo); color: var(--blanco); }

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

/* Salto a contenido, para teclado y lectores de pantalla */
.saltar {
  position: absolute; left: -9999px;
  background: var(--blanco); color: var(--azul);
  padding: var(--e1) var(--e2); z-index: 100;
}
.saltar:focus { left: var(--e2); top: var(--e2); }

/* Texto solo para lectores de pantalla */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================================================================
   HOME
   =================================================================== */

.home {
  background: var(--fondo-home);
  min-height: 100dvh;
  display: grid;
  /* minmax(0,...) evita que el SVG del logotipo imponga su ancho
     intrínseco (miles de px) y desborde la pantalla en celular. */
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  isolation: isolate;
}

/* ---------- Fondo tejido: STREAMDILUSA repetido ---------- */

.tejido {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--fondo-home);
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
  pointer-events: none;
}

.tejido__fila {
  color: var(--rojo);
  font-family: var(--f-mano);
  font-size: clamp(19px, 2.6vw, 40px);
  letter-spacing: 0.5em;
  line-height: 1.22;
  white-space: nowrap;
  display: flex;
  width: max-content;
  animation: deriva 90s linear infinite;
}

.tejido__fila:nth-child(even) {
  animation-direction: reverse;
}

.tejido__fila span { padding-right: 0; }

@keyframes deriva {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tejido__fila { animation: none; }
}

/* ---------- Portada ---------- */

.portada {
  display: grid;
  /* minmax(0,1fr): deja que la fila de la foto se encoja cuando se
     abre el menú, en vez de empujar el menú fuera de la pantalla. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
  min-height: 100dvh;
  padding: var(--e3) var(--e2) var(--e3);
}

/* Logotipo: SVG que siempre ocupa el ancho completo */
.logotipo { width: 100%; min-width: 0; }
.logotipo svg { width: 100%; max-width: 100%; height: auto; display: block; }
/* El logotipo de la portada va en azul marino. El de las páginas
   interiores (.encabezado__logo) sigue en blanco, porque allá el fondo
   es azul y en azul desaparecería. */
.logotipo text { fill: var(--azul); font-family: var(--f-mano); }

.logotipo .logotipo--movil { display: none; }

.portada__foto {
  align-self: center;
  justify-self: center;
  margin: 0;
  width: min(340px, 62vw);
  aspect-ratio: 3 / 4;
  /* Tope en alto de pantalla (no en %): así la portada cabe completa
     en un solo golpe de vista, hasta en celular acostado. Si no cabe,
     la foto se recorta en vez de empujar el menú fuera de la pantalla. */
  max-height: 46dvh;
  min-height: 120px;
  overflow: hidden;
  background: var(--azul);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.portada__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Liga invisible del easter egg: llena toda la foto, pero no se ve
   ni se siente distinta a una foto normal. Nada cambia en :hover a
   propósito — sin eso, cursor: default ya basta (en touch no hay
   cursor que cambiar, así que tocar la foto funciona igual). */
.portada__foto-liga {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  text-decoration: none;
}

/* ---------- Menú desplegable (funciona sin JS) ---------- */

.menu {
  justify-self: center;
  text-align: center;
  width: 100%;
}

/* El menú va en blanco hueso, igual que el logotipo. En azul marino se
   perdía: el azul y el rojo de la trama son los dos oscuros y el menú
   se mezclaba con el fondo. En blanco se separa de la trama y la
   portada queda con un solo color de letra. */
.menu__boton {
  display: inline-block;
  font-family: var(--f-mano);
  font-size: clamp(30px, 4.6vw, 52px);
  color: var(--blanco);
  cursor: pointer;
  list-style: none;
  padding: var(--e1) var(--e2);
  line-height: 1;
}

.menu__boton::-webkit-details-marker { display: none; }
.menu__boton::after { content: "+"; }
.menu[open] .menu__boton::after { content: "-"; }

.menu__boton:hover { color: var(--azul); }

.menu__lista {
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e1) var(--e3);
}

.menu__lista a {
  font-family: var(--f-mano);
  font-size: clamp(20px, 2.6vw, 34px);
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding: 4px 2px;
  display: inline-block;
}

.menu__lista a:hover,
.menu__lista a:focus-visible { color: var(--azul); }

/* ---------- Home en pantallas chicas ---------- */

@media (max-width: 640px) {
  .logotipo .logotipo--escritorio { display: none; }
  .logotipo .logotipo--movil { display: block; }

  .portada { padding: var(--e2) var(--e2) var(--e3); gap: var(--e2); }
  .portada__foto { width: min(300px, 78vw); }
  .logo-banda--grande { width: min(180px, 42vw); }

  /* Dos columnas: el menú completo cabe sin empujar la foto. */
  .menu__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e1) var(--e2);
    max-width: min(340px, 100%);
    margin-inline: auto;
  }
  .menu__lista a { font-size: 22px; }
}

/* Celulares angostos (320-380px): "DESCARGABLES" ya no cabe en media
   columna, así que el menú pasa a una sola columna y se compacta para
   que quepa completo sin tener que hacer scroll. */
@media (max-width: 380px) {
  .menu__lista {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .menu__lista a { font-size: 19px; }
  .portada__foto { min-height: 120px; }
}

/* Celular acostado: hay muy poco alto. La foto se hace chica para que
   el menú (que es la única navegación de la portada) siga a la vista. */
@media (max-height: 560px) and (orientation: landscape) {
  .portada {
    gap: var(--e1);
    padding: var(--e2) var(--e2);
  }
  .portada__foto { min-height: 90px; }
  .logo-banda--grande { width: min(120px, 26vw); margin-top: 0; }
  .menu__boton { font-size: 30px; padding: 4px var(--e2); }
  .menu__lista { margin-top: var(--e1); }
  .menu__lista a { font-size: 19px; }
}

/* ===================================================================
   PÁGINAS INTERIORES
   Fondo azul marino: el texto blanco se lee bien encima (15:1).
   Sobre el rosa de la portada el blanco daría 3:1, ilegible en listas.
   =================================================================== */

.pagina {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* La misma trama de la portada, pero apenas insinuada. */
.tejido--interior { background: var(--fondo-interior); }
.tejido--interior .tejido__fila { color: #101f56; }

/* ---------- Encabezado ---------- */

.encabezado {
  padding: var(--e3) var(--e2) var(--e2);
  border-bottom: var(--borde);
  max-width: var(--ancho-max);
  width: 100%;
  margin-inline: auto;
}

/* Fila superior del encabezado: wordmark + logo de marca en la esquina. */
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.encabezado__logo {
  display: block;
  width: 100%;
  max-width: 380px;
  margin-bottom: var(--e1);
  padding-block: var(--e1); /* blanco táctil: en celular el logo mide poco de alto */
}

.encabezado__logo svg { width: 100%; height: auto; display: block; }
.encabezado__logo text { fill: var(--blanco); font-family: var(--f-mano); }
.encabezado__logo:hover text { fill: var(--rosa); }

/* ---------- Logo de marca (el boceto, no el wordmark) ---------- */

.logo-banda {
  display: block;
  height: auto;
}

/* Portada: grande, debajo del wordmark. */
.logo-banda--grande {
  width: min(170px, 30vw);
  margin: 0 auto;
}

/* Páginas interiores: chico, en la esquina del encabezado. */
.logo-banda--esquina {
  width: clamp(40px, 8vw, 64px);
  flex: 0 0 auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
}

.nav a {
  font-family: var(--f-mano);
  font-size: 20px;
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding: 4px 0;
  display: inline-block;
}

.nav a:hover,
.nav a:focus-visible { color: var(--rosa); }

/* Página actual: en rosa y sin subrayado. */
.nav a[aria-current="page"] {
  color: var(--rosa);
  text-decoration: none;
}

.nav a[aria-current="page"]::before { content: "*"; margin-right: 4px; }

/* ---------- Cuerpo ---------- */

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e4) var(--e2) var(--e5);
}

.titulo-seccion {
  font-family: var(--f-display);
  /* El mínimo es chico a propósito: DESCARGABLES es la palabra más
     larga del menú y a 46px no cabía en un celular de 320px de ancho.
     overflow-wrap es la red de seguridad por si algún día pones un
     título más largo todavía. */
  font-size: clamp(32px, 10.5vw, 96px);
  overflow-wrap: anywhere;
  color: var(--blanco);
  line-height: 1;
  margin-bottom: var(--e3);
}

.entradilla {
  font-family: var(--f-lectura);
  /* Más grande y más aireado que un párrafo normal: DILUSA Sans es solo
     mayúsculas, y las mayúsculas necesitan tamaño e interlínea para leerse. */
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--blanco);
  max-width: 52ch;
  margin-bottom: var(--e4);
  opacity: 0.9;
}

.entradilla a { color: var(--rosa); }

/* ---------- Pie ---------- */

.pie {
  border-top: var(--borde);
  max-width: var(--ancho-max);
  width: 100%;
  margin-inline: auto;
  padding: var(--e2);
  font-family: var(--f-lectura);
  font-size: 15px;
  letter-spacing: 0.02em;
  opacity: 0.85;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  justify-content: space-between;
}

.pie a {
  color: var(--blanco);
  display: inline-block;
  padding: var(--e1) 0; /* blanco táctil más cómodo en celular */
}

/* ===================================================================
   LINKS (Spotify, Apple Music, etc.)
   Sin caja ni borde: nada más el PNG "flotando" sobre la página.
   clamp() los encoge en celular; flex-wrap los pasa a dos filas si
   aun así no caben en una sola línea, para que nunca se encimen ni
   se corten.
   =================================================================== */

.plataformas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e4);
  padding: var(--e2) 0;
}

.plataforma {
  display: inline-flex;
  transition: transform 0.12s ease-out;
}

.plataforma img {
  width: clamp(64px, 16vw, 120px);
  height: clamp(64px, 16vw, 120px);
  object-fit: contain;
  display: block;
}

.plataforma:hover,
.plataforma:focus-visible {
  transform: translate(-3px, -3px);
}

@media (max-width: 480px) {
  .plataformas { gap: var(--e3); }
}

/* ===================================================================
   TOQUINES
   =================================================================== */

.toquines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toquines li { border-bottom: 2px solid rgba(248, 243, 243, 0.35); }
.toquines li:first-child { border-top: 2px solid rgba(248, 243, 243, 0.35); }

.toquines a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e2);
  padding: var(--e2) 0;
  color: var(--blanco);
  text-decoration: none;
}

.toquines a:hover,
.toquines a:focus-visible { color: var(--rosa); }

.toquines__ciudad {
  font-family: var(--f-mano);
  font-size: clamp(30px, 5.5vw, 56px);
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.toquines__detalle {
  font-family: var(--f-mano);
  font-size: clamp(15px, 2vw, 20px);
  opacity: 0.8;
  margin-left: auto;
}

/* Mensaje de "no hay fechas" */
.aviso {
  font-family: var(--f-mano);
  color: var(--blanco);
  font-size: clamp(26px, 5vw, 48px);
  line-height: 1.2;
  padding: var(--e4) 0;
}

/* ===================================================================
   RELEASES
   =================================================================== */

.releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--e4) var(--e3);
}

.releases a {
  display: block;
  color: var(--blanco);
  text-decoration: none;
}

.releases img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--negro);
  border: 3px solid transparent;
  transition: border-color 0.12s linear, transform 0.12s ease-out;
}

.releases a:hover img,
.releases a:focus-visible img {
  border-color: var(--rosa);
  transform: translate(-3px, -3px);
}

.releases__titulo {
  display: block;
  font-family: var(--f-mano);
  font-size: clamp(18px, 2.4vw, 24px);
  margin-top: var(--e2);
  line-height: 1.15;
}

.releases a:hover .releases__titulo { color: var(--rosa); }

/* ===================================================================
   CRÉDITOS
   =================================================================== */

.credito-cabeza {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--e3);
  align-items: start;
  margin-bottom: var(--e4);
}

.credito-cabeza img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--negro);
}

.credito-titulo {
  font-family: var(--f-display);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
  color: var(--blanco);
}

.creditos {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 0;
}

.creditos dt,
.creditos dd {
  font-family: var(--f-mano);
  color: var(--blanco);
  padding: var(--e2) 0;
  border-top: 2px solid rgba(248, 243, 243, 0.35);
  margin: 0;
}

.creditos dt {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--rosa);
  padding-right: var(--e2);
}

.creditos dd {
  font-size: clamp(18px, 2.2vw, 22px);
  white-space: pre-line; /* respeta los saltos de línea de la letra */
}

.creditos dd ul { list-style: none; margin: 0; padding: 0; }

/* Sub-subtítulo dentro de un renglón de crédito, p.ej. "Guitarra
   Eléctrica:" antes del nombre. Lo pone pintarCreditos() en site.js. */
.creditos dd strong { font-weight: 700; }

.vacio { opacity: 0.5; }

.volver {
  display: inline-block;
  margin-top: var(--e4);
  font-family: var(--f-mano);
  font-size: 22px;
  color: var(--blanco);
  text-underline-offset: 4px;
  /* Altura mínima cómoda para tocar con el dedo */
  padding: var(--e1) 0;
  min-height: 44px;
}

.volver:hover { color: var(--rosa); }

/* ---------- Interiores en pantallas chicas ---------- */

@media (max-width: 640px) {
  .encabezado { padding: var(--e2) var(--e2); }
  .contenido { padding: var(--e3) var(--e2) var(--e4); }
  .nav a { font-size: 17px; }
  .nav ul { gap: var(--e1) var(--e2); }

  .credito-cabeza {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  .creditos { grid-template-columns: 1fr; }
  .creditos dt { padding-bottom: 0; }
  .creditos dd { border-top: 0; padding-top: 4px; }
}

/* ===================================================================
   BOTONES
   =================================================================== */

.boton {
  display: inline-block;
  font-family: var(--f-mano);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1;
  background: var(--blanco);
  color: var(--azul);
  border: 3px solid var(--blanco);
  padding: var(--e2) var(--e3);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s linear, color 0.12s linear, transform 0.12s ease-out;
}

.boton:hover,
.boton:focus-visible {
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--blanco);
  transform: translate(-2px, -2px);
}

/* ===================================================================
   MERCH
   =================================================================== */

.productos {
  list-style: none;
  margin: 0 0 var(--e4);
  padding: 0;
  display: grid;
  gap: var(--e5);
}

.producto {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}

.producto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* contain, no cover: las fotos de producto vienen con fondo
     transparente y recortarlas les cortaría el pie al calcetín. */
  object-fit: contain;
  background: transparent;
}

.producto__nombre {
  font-family: var(--f-mano);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  margin-bottom: var(--e2);
}

.producto__precio {
  font-family: var(--f-mano);
  font-size: clamp(30px, 4.4vw, 48px);
  color: var(--rosa);
  line-height: 1;
  margin-bottom: var(--e2);
}

.producto__desc {
  font-family: var(--f-mano);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  margin-bottom: var(--e3);
  opacity: 0.9;
}

.producto__pago {
  font-family: var(--f-mano);
  font-size: 15px;
  margin-top: var(--e2);
  opacity: 0.8;
}

.nota {
  font-family: var(--f-mano);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.5;
  border: 3px solid var(--rosa);
  padding: var(--e3);
  max-width: 62ch;
}

/* ===================================================================
   FOTOS
   =================================================================== */

.galeria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--e2);
}

.galeria a {
  display: block;
  background: var(--negro);
  border: 3px solid transparent;
  transition: border-color 0.12s linear;
}

.galeria a:hover,
.galeria a:focus-visible { border-color: var(--rosa); }

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Visor de fotos (etiqueta <dialog> nativa: se cierra con Esc) */
.visor {
  border: 3px solid var(--blanco);
  background: var(--azul);
  padding: 0;
  max-width: min(94vw, 1000px);
  max-height: 92dvh;
  overflow: hidden;
}

.visor::backdrop { background: rgba(0, 0, 0, 0.85); }

.visor img {
  display: block;
  max-width: 100%;
  max-height: calc(92dvh - 60px);
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* ---------- Barra de controles, debajo de la foto ---------- */

.visor__barra {
  display: flex;
  align-items: stretch;
  background: var(--blanco);
  border-top: 3px solid var(--azul);
}

.visor__flecha,
.visor__cerrar {
  font-family: var(--f-mano);
  background: var(--blanco);
  color: var(--azul);
  border: 0;
  cursor: pointer;
  line-height: 1;
}

.visor__flecha {
  width: 60px;
  flex: 0 0 auto;
  font-size: 30px;
  border-right: 3px solid var(--azul);
}

.visor__flecha[hidden] { display: none; }

.visor__cuenta {
  font-family: var(--f-mano);
  font-size: 18px;
  color: var(--azul);
  padding: var(--e2);
  display: grid;
  place-items: center;
  white-space: nowrap;
  border-right: 3px solid var(--azul);
}

.visor__cerrar {
  flex: 1;
  font-size: 20px;
  padding: var(--e2);
  border-left: 3px solid var(--azul);
  margin-left: -3px; /* que no se dupliquen las líneas divisorias */
}

.visor__flecha:hover,
.visor__flecha:focus-visible,
.visor__cerrar:hover,
.visor__cerrar:focus-visible {
  background: var(--rosa);
  color: var(--blanco);
}

@media (max-width: 640px) {
  .visor__flecha { width: 52px; font-size: 26px; }
  .visor__cuenta { font-size: 16px; padding: var(--e1); }
  .visor__cerrar { font-size: 17px; padding: var(--e1); }
}

/* ===================================================================
   CONTACTO
   =================================================================== */

.formulario {
  display: grid;
  gap: var(--e3);
  max-width: 640px;
}

.campo { display: grid; gap: var(--e1); }

.campo label {
  font-family: var(--f-mano);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--rosa);
}

.campo input,
.campo textarea {
  font-family: var(--f-mano);
  font-size: 18px;
  color: var(--blanco);
  background: rgba(0, 0, 0, 0.25);
  border: 3px solid var(--blanco);
  padding: var(--e2);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
}

.campo textarea { min-height: 180px; resize: vertical; line-height: 1.4; }

.campo input:focus,
.campo textarea:focus {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

/* Trampa de spam: invisible para las personas, tentadora para los robots */
.trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ===================================================================
   DESCARGABLES
   =================================================================== */

.muestra-fuente {
  border: 3px solid var(--blanco);
  padding: var(--e3);
  margin-bottom: var(--e4);
  overflow: hidden;
}

.muestra-fuente p {
  font-family: var(--f-mano);
  line-height: 1.15;
  margin-bottom: var(--e1);
  word-break: break-word;
}

.muestra-fuente p:nth-child(1) { font-size: clamp(30px, 6vw, 62px); }
.muestra-fuente p:nth-child(2) { font-size: clamp(20px, 3.4vw, 36px); }
.muestra-fuente p:nth-child(3) { font-size: clamp(15px, 2.2vw, 24px); opacity: 0.85; }

.ficha {
  font-family: var(--f-mano);
  font-size: 16px;
  margin-top: var(--e2);
  opacity: 0.8;
}

/* ---------- Fase 3 en pantallas chicas ---------- */

@media (max-width: 700px) {
  .producto {
    grid-template-columns: 1fr;
    gap: var(--e3);
  }
  .producto img { max-width: 340px; }
}

/* En celular la galería va a dos columnas: con una sola, cada foto
   ocupaba casi toda la pantalla y había que hacer mucho scroll. */
@media (max-width: 640px) {
  .galeria {
    grid-template-columns: 1fr 1fr;
    gap: var(--e1);
  }
}

/* Cuadro que sustituye a la portada mientras no hay imagen. Ocupa
   exactamente el mismo espacio, para que la reja no se desacomode. */
.sin-portada {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--f-mano);
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--blanco);
  background: rgba(0, 0, 0, 0.25);
  border: 3px dashed rgba(248, 243, 243, 0.45);
  padding: var(--e2);
}

.releases a:hover .sin-portada,
.releases a:focus-visible .sin-portada {
  border-color: var(--rosa);
  color: var(--rosa);
}

/* La letra es el campo más largo: le damos aire de renglón para que se
   lea como una letra y no como un bloque.

   Los cortes de verso están puestos a mano en data.js, así que ningún
   renglón debe partirse solo: se leería como un verso de más. El verso
   más largo ("Hay muchas cosas que quiero callar") mide 21.95 veces su
   tamaño de letra; el 22.6 de abajo es ese número con un poco de holgura.
   Así, abajo de ~440px de ancho la letra se encoge lo justo para que el
   verso quepa completo. El piso de 14px evita que se vuelva ilegible en
   pantallas muy angostas (abajo de ~330px sí puede partirse: ahí manda
   la legibilidad). Si la letra cambia y entra un verso más largo, hay
   que volver a medir: es el único número que se toca aquí. */
.creditos dd.letra {
  line-height: 1.6;
  font-size: max(14px, min(clamp(18px, 2.2vw, 22px), calc((100vw - 32px) / 22.6)));
}

/* ===================================================================
   EPK (easter egg)
   Placeholder: no está en el menú ni tiene encabezado/pie — el único
   camino hasta aquí es la foto de la portada.
   =================================================================== */

.epk__contenido {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--e3) var(--e2);
}

.epk .titulo-seccion { margin-bottom: 0; }