/* ===================================================================
   TRASHTORNA2 POR EL ROCK — styles.css
   =================================================================== */
/* === Paleta colores ===
- Acento: #a13d2b
- Fondo: #fdfbf5
- Fondo (por probar): #EBE5D8
*/

:root {
  /* === Papel / tarjetas === */
  --color-papel: #f3ead6;
  --color-papel-alt: #fdfbf5;
  --color-texto-oscuro: #3a3128;
  --color-texto-oscuro-secundario: #8a7a5f;

  --color-texto-claro: #f0e4c8;
  --color-texto-claro-fuerte: #f5ead0;
  --color-texto-claro-tenue: #cbb98f;

  /* === Acento === */
  --color-acento: #a13d2b;
  --color-acento-claro: #e8b98a;

  /* === Detalles físicos === */
  --color-cinta: rgba(230, 215, 180, 0.75);
  --color-cinta-borde: rgba(180, 160, 120, 0.4);
  --color-borde-divisor: #5c4830;

  /* === Neutros === */
  --color-negro: #000;
  --color-blanco: #ffffff;
  --color-texto-alto-contraste: #1a1a1a;
  --color-texto-btn-hover: #111111;
  --color-fondo-placeholder: #0d0d0d;
  --color-marco-plata: #888888;
  --color-marco-plata-oscuro: #777777;
  --color-lomo-oscuro: #101010;
  --color-lomo-claro: #222222;

  /* === RGB === */
  --rgb-negro: 0, 0, 0;
  --rgb-blanco: 255, 255, 255;
  --rgb-overlay: 20, 14, 9;
  --rgb-fade: 10, 7, 5;
  --rgb-concierto-fondo: 12, 8, 6;
  --rgb-acento: 161, 61, 43;
  --rgb-texto-claro-fuerte: 245, 234, 208;
  --rgb-boton-oscuro: 20, 20, 20;

  /* === Fondos de imagen === */
  /* --img-ladrillo: url('../img/textura-ladrillo.jpg'); */
  --img-hero: url('../img/hero.jpg');
  --img-logo: url('../img/logo.jpg');
  --overlay-oscuro: linear-gradient(180deg, rgba(var(--rgb-overlay), 0.15), rgba(var(--rgb-overlay), 0.6) 85%);
  --overlay-tronco: linear-gradient(180deg, rgba(var(--rgb-overlay), 0.35), rgba(var(--rgb-overlay), 0.55));
  --overlay-oscuro-reves: linear-gradient(180deg, rgba(var(--rgb-overlay), 0.6), rgba(var(--rgb-overlay), 0.15) 85%);
  --the-first-interior: url('../img/the-first-interior.jpg');
  --textura-cuero: url('../img/textura-cuero.jpg');

  /* === Tipografía === */
  --fuente-titulo: 'Anton', 'Impact', sans-serif;
  --fuente-texto: Georgia, serif;

  /* === Espaciado (escala de 8px) === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 46px;

  /* === Bordes y sombras === */
  --radius-sm: 4px;
  --radius-full: 9999px;
  --sombra-tarjeta: 0 4px 10px rgba(var(--rgb-negro), 0.3);
  --sombra-elevada: 0 8px 18px rgba(var(--rgb-negro), 0.5);

  /* === Tamaños específicos === */
  --header-height: 80px;
}

/* ===================================================================
   RESET BÁSICO
   =================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--color-fondo);
  background-image: var(--textura-grano);
  font-family: var(--fuente-texto);
  color: var(--color-texto-claro);
  line-height: 1.5;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

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

/* ===================================================================
   LAYOUT GENERAL
   =================================================================== */
.contenedor {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-md);
}

/* ===================================================================
   CABECERA Y NAVEGACIÓN
   =================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-image: var(--textura-cuero);
}

.header__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}

.header__logo {
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
}

.header--hero-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background-color .3s ease, box-shadow .3s ease;
}

.header--hero-mode.is-scrolled {
  background-color: var(--color-acento) !important;
  background-image: var(--textura-cuero) !important;
  box-shadow: var(--sombra-tarjeta) !important;
}

/* Cabecera transparente fija sin animaciones ni escalados */
.header--transparente {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
}

.header--transparente .nav__link {
  background-image: none;
  font-size: 20px;
  padding: var(--space-sm) var(--space-sm);
  text-shadow: 0 1px 3px rgba(var(--rgb-negro), 0.85), 0 3px 10px rgba(var(--rgb-negro), 0.5);
}

/* Menú hamburguesa (móvil) */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-texto-claro);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav {
  display: none;
  gap: var(--space-sm);
}

.nav__link {
  display: inline-block;
  padding: var(--space-md) var(--space-md);
  background-color: var(--overlay-tronco);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
  color: var(--color-texto-claro-fuerte);
  font-family: var(--fuente-titulo);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__link:hover { filter: brightness(1.15); color: var(--color-acento); }

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--color-acento);
  padding: var(--space-md);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile__link {
  color: var(--color-texto-claro);
  text-decoration: none;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-borde-divisor);
}

/* ===================================================================
   FOOTER: CONTACTO Y REDES
   =================================================================== */
.footer {
  position: relative;
  padding: var(--space-xl) 0px var(--space-xl);
  overflow: hidden; 
}
/* ===================================================================
   COMPONENTE: PANEL DE LADRILLO
   =================================================================== */
/* .brick-panel {
  position: relative;
  background-image: var(--overlay-oscuro), var(--img-ladrillo);
  background-size: cover;
  background-position: center;
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
} */

/* ===================================================================
   COMPONENTE: TARJETA
   =================================================================== */
.tarjeta {
  position: relative;
  max-width: 680px; 
  margin: 50px auto 120px auto; 
  padding: 30px 30px;
  
  /* EL PAPEL: Blanco mate */
  background-color: var(--color-texto-claro);
  border-radius: 5px;
  
  /* Sombra del papel sobre el atril */
  box-shadow: 0 5px 15px rgba(var(--rgb-negro), 0.4);
}

/* ===================================================================
   TEXTO
   =================================================================== */
.tarjeta__titulo{
  color: var(--color-acento); 
  margin-bottom: 18px;
  text-shadow: none; 
  border-bottom: 2px solid rgba(var(--rgb-acento), 0.15);
  padding-bottom: 12px;
}

.tarjeta__meta, .bio__texto {
  color: var(--color-texto-alto-contraste) !important; 
  line-height: 1.65;
  font-size: 1.05rem;
  font-weight: 500;
  text-shadow: none;
}

/* ===================================================================
   COMPONENTE: POLAROID (fotos de Galería)
   =================================================================== */
.polaroid {
  background: var(--color-papel);
  padding: 8px 8px 20px;
  box-shadow: var(--sombra-tarjeta);
}
.polaroid__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.polaroid--tilt-left  { transform: rotate(-2deg); }
.polaroid--tilt-right { transform: rotate(2deg); }

/* ===================================================================
   COMPONENTE: CÍRCULO DE ICONO
   =================================================================== */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-claro-fuerte);
  border: 1px solid var(--color-acento);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.icon-circle:hover {
  background: var(--color-texto-claro-fuerte);
  color: var(--color-acento);
}
.icon-circle--sm { width: 22px; height: 22px; }
.icon-circle--md { width: 30px; height: 30px; }
.icon-circle--lg { width: 42px; height: 42px; }

/* ===================================================================
   COMPONENTE: BOTÓN
   =================================================================== */
.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  font-family: var(--fuente-texto);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: filter .2s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn--accent {
  background: var(--color-acento);
  color: var(--color-texto-claro-fuerte);
  border: 1px solid var(--color-acento);
  transition: background-color .2s ease, color .2s ease;
}
.btn--accent:hover {
  filter: none;
  background: var(--color-texto-claro-fuerte);
  color: var(--color-acento);
}
.btn--outline {
  background: transparent;
  border: 1px solid var(--color-acento);
  color: var(--color-acento-claro);
}

/* ===================================================================
   TÍTULOS
   =================================================================== */
.section-title {
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  font-size: 40px;
  letter-spacing: 2px;
  margin-bottom: var(--space-md);
  text-align: center;
}

.section-label {
  color: var(--color-texto-claro-tenue);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  text-align: center;
}

/* ===================================================================
   TÍTULO DE PÁGINA (Conciertos, La banda, Discografía, Galería)
   =================================================================== */
.pagina-titulo {
  margin: var(--space-lg) 0;
  font-size: 38px;
  text-align: center;
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===================================================================
   ESPACIADO ENTRE SECCIONES
   =================================================================== */
.seccion {
  position: relative;
  z-index: 2;
  background: var(--color-fondo);
  background-image: var(--textura-grano);
  display: flow-root;

  min-height: 95vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 6vh var(--space-md);
}

/* .seccion--brick {
  position: relative;
  overflow: hidden;
  background-image: var(--overlay-oscuro), var(--img-ladrillo);
  background-size: cover;
  background-position: center;
  padding: 34px 0 var(--space-xl);
}
.seccion--brick__alt{
  background-image: var(--overlay-oscuro-reves), var(--img-ladrillo);
} */

.seccion--alta{
  display: flex;
  align-items: center;
  min-height: 75vh;
}

/* ===================================================================
   SECCIONES CON FOTO DE FONDO (macro zoom + degradado direccional)
   =================================================================== */
.seccion--foto {
  position: relative;

  background-image:
    /* DEGRADADO VERTICAL: funde el borde superior o inferior */
    linear-gradient(var(--seccion-fade-v, to bottom), rgb(var(--rgb-fade)) 0%, transparent 20%),

    /* DEGRADADO HORIZONTAL: oscurece de un lado a otro */
    linear-gradient(var(--seccion-fade-h, to right), rgb(var(--rgb-fade)) 0%, rgba(var(--rgb-fade), 0.7) 60%, rgba(var(--rgb-fade), 0.1) 100%),

    /* IMAGEN DE FONDO */
    var(--seccion-img);

  background-size: cover, cover, var(--seccion-zoom, 250%);
  background-position: center, center, 32% 52%;
  background-repeat: no-repeat;
}

.seccion--espuma    { --seccion-img: url('../img/textura-espuma.jpg'); }
.seccion--guitarra  {
  --seccion-img: url('../img/guitarra.jpg');
  background-image:
    linear-gradient(var(--seccion-fade-v, to bottom), rgb(var(--rgb-fade)) 0%, transparent 20%),
    linear-gradient(var(--seccion-fade-h, to right), rgb(var(--rgb-fade)) 0%, rgba(var(--rgb-fade), 0.7) 60%, rgba(var(--rgb-fade), 0.35) 100%),
    var(--seccion-img);
}
.seccion--bateria   { --seccion-img: url('../img/bateria.jpg'); --seccion-fade-h: to left; }
.seccion--microfono { --seccion-img: url('../img/microfono.jpg'); --seccion-fade-v: to top; }
.seccion--marshall  { --seccion-img: url('../img/ampli.jpg'); --seccion-zoom: 100%; --seccion-fade-h: to left; }
.seccion--pasados {
  --seccion-img: url('../img/concierto.jpg'); 
  background-image:
    linear-gradient(var(--seccion-fade-v, to bottom), rgb(var(--rgb-fade)) 0%, transparent 20%),
    linear-gradient(var(--seccion-fade-h, to right), rgb(var(--rgb-fade)) 0%, rgba(var(--rgb-fade), 0.9) 60%, rgba(var(--rgb-fade), 0.35) 100%),
    var(--seccion-img);
}

.seccion__marca{
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  background-image: var(--img-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  mix-blend-mode: screen;
  opacity: 0.60;
  pointer-events: none;
}
.seccion__marca--izq { left: 4%; }
.seccion__marca--der { left: auto; right: 4%; }
.seccion__marca--centro {
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  opacity: 0.12;
}
/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-image: var(--overlay-oscuro), var(--img-hero);
  background-size: cover;
  background-position: center;
  min-height: calc(100vh - var(--header-height));
  /* display: flex;
  align-items: flex-end;
  justify-content: center; */
  text-align: center;
  padding: var(--space-xl) var(--space-lg) 50px;
  border-radius: 0;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--overlay-oscuro), var(--img-hero);
  background-size: cover;
  background-position: center;
  z-index: -1;
  will-change: transform;
}
/* --- Base / fallback: navegadores sin soporte de scroll-driven animations --- */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: var(--color-negro);
  opacity: 0;
  pointer-events: none;
}
.hero__content{
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

/* --- Mejora progresiva: navegadores con soporte de scroll(root block) --- */
@supports (animation-timeline: scroll()) {
  .hero__overlay,
  .hero__content {
    will-change: transform, opacity;
    transform: translateZ(0);
  }
  .hero__overlay{
    animation: hero-oscurecer linear;
    animation-timeline: scroll(root block);
    animation-range: 0px 60vh;
    animation-fill-mode: both;
  }
  .hero__content{
    position: fixed;
    transform: translateX(-50%) translateY(0) scale(1);
    animation: hero-texto linear;
    animation-timeline: scroll(root block);
    animation-range: 0px 60vh;
    animation-fill-mode: both;
  }
}
@keyframes  hero-oscurecer{
  from { opacity: 0; }
  to   { opacity: 0.75; }
}
@keyframes hero-texto{
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to   { transform: translateX(-50%) translateY(-70vh) scale(1.2); }
}
.hero__title {
  font-family: var(--fuente-titulo);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--color-texto-claro-fuerte);
  text-shadow: 0 2px 6px rgba(var(--rgb-negro), 0.6);
}
.hero__subtitle {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--color-texto-claro-tenue);
  margin-top: var(--space-sm);
}

/* ===================================================================
   BIO / PROPUESTA
   =================================================================== */

.bio__wrapper {
  max-height: none !important;
  overflow: visible !important;
}

/* Sólo para móvil */
.bio__btn-leer-mas {
  display: none !important;
}

.bio__card {
  max-width: 560px;
  margin: 0 auto;
}
.bio__subtitulo{
  font-size: 20px;
  font-weight: bold;
  color: var(--color-acento);
}
.bio__texto {
  color: var(--color-texto-oscuro);
  font-size: 15px;
  line-height: 1.6;
}
.bio__texto b {
  color: var(--color-acento);
}
.bio__leer-mas {
  display: block;
  text-align: right;
  color: var(--color-acento);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  margin-top: var(--space-sm);
}

/* ===================================================================
   ESTUCHE DE DISCOGRAFÍA (selector de álbumes tipo jewel-case)
   =================================================================== */
.discografia__card {
  margin: 0 auto;
}

.jewel-case-container {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

.jewel-case {
  position: relative;
  width: 100%;
  aspect-ratio: 1.14 / 1; 
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(var(--rgb-negro), 0.6);
  overflow: hidden;

  border: 1px solid rgba(var(--rgb-blanco), 0.35);
  transition: transform 0.3s ease;
}

.jewel-case:hover {
  transform: scale(1.05);
}

.jewel-case::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-blanco), 0.22) 0%,
    rgba(var(--rgb-blanco), 0.08) 35%,
    rgba(var(--rgb-blanco), 0.02) 60%,
    rgba(var(--rgb-blanco), 0.12) 100%
  );
  mix-blend-mode: overlay;
}

/* CARÁTULAS */
.jewel-case__ventana {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 3px;
  left: 47px; 
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  z-index: 1;
}

.jewel-case__ventana::-webkit-scrollbar { display: none; }

.jewel-case__pista {
  display: flex;
  height: 100%;
}

.jewel-case__item {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.jewel-case__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PLACEHOLDER "Próximamente" */
.album-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-fondo-placeholder);
}

.album-placeholder__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.3;
}

.album-placeholder__texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 2.2rem;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(var(--rgb-negro), 0.9);
  width: 90%;
  pointer-events: none;
  user-select: none;
}

/* MARCO PLÁSTICO */
.jewel-case__marco {
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: -3px;
  left: 0;
  pointer-events: none;
  z-index: 2;

  border-top: 3px solid var(--color-marco-plata);
  border-right: 3px solid var(--color-marco-plata);
  border-bottom: 3px solid var(--color-marco-plata);
  border-left: none;
  border-radius: 4px;

  background: 
    linear-gradient(
      135deg, 
      rgba(var(--rgb-blanco), 0.35) 0%, 
      rgba(var(--rgb-blanco), 0.05) 35%, 
      rgba(var(--rgb-blanco), 0) 50%, 
      rgba(var(--rgb-blanco), 0.15) 100%
    );
    
  box-shadow: inset -2px 0 10px rgba(var(--rgb-negro), 0.3);
}

/* LOMO NEGRO ESTRIADO */
.jewel-case__marco::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 45px;
  
  background: repeating-linear-gradient(
    90deg,
    var(--color-lomo-oscuro) 0px,
    var(--color-lomo-oscuro) 2px,
    var(--color-lomo-claro) 2px,
    var(--color-lomo-claro) 3px
  );
  
  border-right: 2px solid var(--color-marco-plata-oscuro);
}

/* BOTONERA DE CONTROL (ESTILO REPRODUCTOR) */
.jewel-case__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 1.5rem;
}

.jewel-case__info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 1.4rem;
}

.jewel-case__nombre{
  color: var(--color-texto-claro-fuerte);
}

.jewel-case__anio{
  color: var(--color-acento-claro);
}

.jewel-case__nombre,
.jewel-case__anio {
  font-family: var(--fuente-titulo);
  font-weight: normal;
  font-size: 40px;
  letter-spacing: 1px;
  text-shadow: 0 2px 14px rgba(var(--rgb-negro), 0.85);
}
.jewel-case__anio::before {
  content: '·';
  margin: 0 8px;
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  font-size: 40px;
}

.jewel-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rgb-boton-oscuro), 0.85);
  color: var(--color-blanco);
  border: 1px solid rgba(var(--rgb-blanco), 0.2);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(var(--rgb-negro), 0.5);
  transition: all 0.2s ease;
}

/* Botones de Anterior y Siguiente */
.jewel-case__btn--prev,
.jewel-case__btn--next {
  width: 44px;
  height: 44px;
}

/* Botón central de Play (Destacado) */
.jewel-case__btn--play {
  width: 56px;
  height: 56px;
  background: var(--color-acento);
  border-color: rgba(var(--rgb-blanco), 0.4);
}

/* Efectos al pasar el cursor (Hover) */
.jewel-case__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(var(--rgb-negro), 0.7);
}

.jewel-case__btn--prev:hover,
.jewel-case__btn--next:hover {
  background: var(--color-blanco);
  color: var(--color-texto-btn-hover);
}

.jewel-case__btn--play:hover {
  background: var(--color-texto-claro-fuerte);
  color: var(--color-acento);
}

.discografia-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxl);
}

.discografia-titulo-grande {
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  text-transform: uppercase;
  font-size: clamp(48px, 11vw, 110px);
  line-height: 0.92;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 4px 18px rgba(var(--rgb-negro), 0.55);
}

.discografia-cuerpo {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ===================================================================
   SCROLL SNAP
   =================================================================== */
.pagina-conciertos {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
  background-image:
    linear-gradient(to bottom, rgba(10, 7, 5, 0.6) 0%, rgba(10, 7, 5, 0.6) 100%),
    linear-gradient(to right, rgba(10, 7, 5, 0.9) 0%, rgba(10, 7, 5, 0.7) 60%, rgba(10, 7, 5, 0.35) 80%),
    url('../img/concierto.jpg');
  background-position: 32% 52%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200%;
}

.pagina-conciertos .seccion {
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: transparent !important;
}

.pagina-conciertos .header--hero-mode.is-scrolled {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pagina-conciertos .header--hero-mode .header__logo {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.pagina-conciertos .contenedor {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pagina-conciertos .concierto-item,
.pagina-conciertos .pasados-panel {
  margin-top: auto;
  margin-bottom: auto;
}

#pasados { padding-bottom: 0; }
#pasados .contenedor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.pagina-conciertos #pasados .pasados-panel {
  margin: 0;
  width: 100%;
}

/* ===================================================================
   BOTONES DE NAVEGACIÓN ENTRE CONCIERTOS
   =================================================================== */
.conciertos-nav-flotante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Posición superior (Conciertos pasados): 24px bajo el header */
.conciertos-nav-flotante.is-top {
  bottom: auto;
  top: calc(var(--header-height) + 24px);
}

/* Estado invisible durante el cambio de posición */
.conciertos-nav-flotante.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.btn-scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 22px;
  background: var(--color-acento);
  color: var(--color-texto-claro-fuerte);
  border: 1px solid rgba(var(--rgb-blanco), 0.25);
  border-radius: var(--radius-full);
  font-family: var(--fuente-titulo);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sombra-elevada);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-scroll:hover {
  background: var(--color-texto-claro-fuerte);
  color: var(--color-acento);
  transform: scale(1.04);
}

 /* ===================================================================
   CONCIERTOS — PRÓXIMOS
   (sección "Próximo concierto" de Portada y "Próximos" de conciertos.html
   comparten estos mismos componentes: cartel + info)
   =================================================================== */
.seccion--concierto {
  position: relative;
  background-image: linear-gradient(rgba(var(--rgb-concierto-fondo), 0.8), rgba(var(--rgb-concierto-fondo), 0.8));
  background-size: cover;
  background-position: center;
}

/* Titulo izq, contenido der */
.concierto-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxl);
}

.concierto-titulo-grande {
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  text-transform: uppercase;
  font-size: clamp(48px, 11vw, 110px);
  line-height: 0.92;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 4px 18px rgba(var(--rgb-negro), 0.55);
}

.concierto-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.cartel {
  position: relative;
  container-type: inline-size;
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}

.cartel:hover {
  transform: rotate(-3deg) scale(1.05);
}

.cartel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-blanco), 0.22) 0%,
    rgba(var(--rgb-blanco), 0.08) 35%,
    rgba(var(--rgb-blanco), 0.02) 60%,
    rgba(var(--rgb-blanco), 0.12) 100%
  );
  mix-blend-mode: overlay;
}

.cartel__imagen {
  width: 100%;
  display: block;
  box-shadow: 0 20px 40px rgba(var(--rgb-negro), 0.6);
}

.cartel__cinta {
  position: absolute;
  z-index: 2;
  width: 20cqw;
  aspect-ratio: 2.5 / 1;
  background: var(--color-cinta);
  border: 1px solid var(--color-cinta-borde);
  box-shadow: 0 2px 5px rgba(var(--rgb-negro), 0.3);
}
.cartel__cinta--tl { top: -2.5cqw; left: -7cqw;  transform: rotate(-45deg); }
.cartel__cinta--tr { top: -2.5cqw; right: -7cqw; transform: rotate(45deg); }
.cartel__cinta--bl { bottom: -2.5cqw; left: -7cqw;  transform: rotate(45deg); }
.cartel__cinta--br { bottom: -2.5cqw; right: -7cqw; transform: rotate(-45deg); }

.concierto-info {
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.concierto-info__evento {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 var(--space-lg);
  text-shadow: 0 2px 14px rgba(var(--rgb-negro), 0.85);
}

.concierto-info__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px dashed rgba(var(--rgb-texto-claro-fuerte), 0.25);
}
.concierto-info__dato { display: flex; flex-direction: column; gap: 4px; }
.concierto-info__dato-label {
  color: var(--color-acento-claro);
  opacity: 0.9;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(var(--rgb-negro), 0.85);
}
.concierto-info__dato-valor {
  color: var(--color-texto-claro-fuerte);
  font-weight: bold;
  font-size: 21px;
  text-shadow: 0 1px 8px rgba(var(--rgb-negro), 0.85);
}

.concierto-info__btn { width: 100%; max-width: 260px; text-align: center; }

.concierto-info__ubicacion {
  margin-top: var(--space-md);
}

.concierto-info__direccion {
  color: var(--color-texto-claro-fuerte);
  font-weight: bold;
  font-size: 21px;
  line-height: 1.3;
  margin: 4px 0 var(--space-sm);
  text-shadow: 0 1px 8px rgba(var(--rgb-negro), 0.85);
}

.concierto-info__mapa {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--color-acento);
  box-shadow: var(--sombra-elevada);
  margin-bottom: var(--space-sm);
}

.concierto-info__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(35%) sepia(12%) contrast(1.05) brightness(0.88);
}

.concierto-info__enlace {
  display: inline-block;
  color: var(--color-acento-claro);
  font-size: 13px;
  font-weight: bold;
  text-decoration: underline;
}

/* Separador cuando hay más de un concierto próximo (conciertos.html) */
.concierto-item + .concierto-item {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xxl);
  border-top: 1px dashed rgba(var(--rgb-texto-claro-fuerte), 0.15);
}

/* ===================================================================
   CONCIERTOS — PASADOS
   =================================================================== */
.entrada-container {
  max-width: 780px;
  margin: var(--space-xl) auto 0;
}

.entrada {
  display: flex;
  height: 290px;
  background: var(--color-papel);
  background-image: var(--textura-grano);
  box-shadow: 0 15px 40px rgba(var(--rgb-negro), 0.55);
  position: relative;
  overflow: hidden;
}

.entrada__cartel {
  width: 220px;
  flex-shrink: 0;
  object-fit: cover;
}

.entrada__cuerpo {
  position: relative;
  flex: 1;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow: hidden;
  z-index: 1;
}

/* Sello SOLD OUT */
.entrada__tampon {
  position: absolute;
  top: -20px;
  right: -90px;
  width: 290px;
  height: 290px;
  border: 7px double rgba(185, 55, 45, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-18deg);
  color: var(--color-acento);
  font-family: var(--fuente-titulo, sans-serif);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: grayscale(18%);
  user-select: none;
  pointer-events: none;
}

.entrada__evento {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 38px;
  line-height: 1.05;
  max-width: 80%;
  overflow: hidden;
  flex: 1;
}

.entrada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.entrada__dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entrada__dato-label {
  color: var(--color-texto-alto-contraste);
  opacity: 0.55;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.entrada__dato-valor {
  color: var(--color-texto-oscuro);
  font-weight: bold;
  font-size: 16px;
}

.entrada__codigo {
  padding-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entrada__barras {
  width: 150px;
  height: 30px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-texto-alto-contraste) 0px, var(--color-texto-alto-contraste) 2px,
    transparent 2px, transparent 4px,
    var(--color-texto-alto-contraste) 4px, var(--color-texto-alto-contraste) 5px,
    transparent 5px, transparent 8px,
    var(--color-texto-alto-contraste) 8px, var(--color-texto-alto-contraste) 11px,
    transparent 11px, transparent 13px,
    var(--color-texto-alto-contraste) 13px, var(--color-texto-alto-contraste) 14px,
    transparent 14px, transparent 17px
  );
  opacity: 0.85;
}

.entrada__numero {
  color: var(--color-texto-alto-contraste);
  opacity: 0.5;
  font-size: 11px;
  letter-spacing: 2px;
}

.entrada__talon {
  position: relative;
  width: 70px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: var(--space-sm) 0;
  border-left: 2px dashed rgba(var(--rgb-negro), 0.25);
}

/* Texto vertical ENTRADA */
.entrada__texto-vertical {
  font-family: var(--fuente-titulo);
  font-size: 40px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-texto-alto-contraste);
  opacity: .8;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  user-select: none;
}

.entrada__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-acento);
  color: var(--color-texto-claro-fuerte);
  cursor: pointer;
  transition: filter .2s ease;
}
.entrada__btn:hover { filter: brightness(1.15); }

/* ===================================================================
   PANEL CONCIERTOS PASADOS
   =================================================================== */

.pasados-panel {
  display: flex;
  gap: 8rem;
  height: 600px;
  position: relative;
}

.pasados-panel__rueda-wrap {
  width: 250px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.pasados-panel__rueda-box {
  position: relative;
  width: 100%;
  height: 300px;
}

.pasados-panel__guia {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  height: 80px;
  border-top: 2px solid rgba(161, 61, 43, 0.65);
  border-bottom: 2px solid rgba(161, 61, 43, 0.65);
  pointer-events: none;
  z-index: 2;
}

.pasados-panel__rueda {
  height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
}
.pasados-panel__rueda::-webkit-scrollbar { display: none; }

.anio {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  letter-spacing: 4px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  transition: font-size 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.pasados-panel__tickets-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.pasados-panel__tickets {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;
  scrollbar-width: none;
}
.pasados-panel__tickets::-webkit-scrollbar { display: none; }

.ticket {
  margin-bottom: 24px;
  position: relative;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ticket--nuevo-anio {
  margin-top: 48px;
}

/* ===================================================================
   LISTA DE CONCIERTOS (página Conciertos)
   =================================================================== */
.lista-conciertos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.concierto-card__galeria {
  display: block;
  text-align: right;
  color: var(--color-texto-claro-tenue);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  margin-top: var(--space-sm);
}

/* ===================================================================
   CONCIERTOS PASADOS (agrupados por año)
   =================================================================== */
.conciertos-grupo + .conciertos-grupo {
  margin-top: var(--space-xxl);
}

.conciertos-grupo__anio {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* ===================================================================
   COMUNIDAD / SELLO (Banner)
   =================================================================== */
.comunidad-banner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-lg);
  max-width: 850px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.comunidad-banner__etiqueta {
  display: block;
  color: var(--color-texto-oscuro-secundario);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bold;
  margin-bottom: var(--space-xs);
}

.comunidad-banner__titulo {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 34px;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

.comunidad-banner__texto {
  color: var(--color-texto-oscuro);
  font-size: 15px;
  line-height: 1.6;
}

.comunidad-banner__logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid var(--color-acento);
  object-fit: cover;
  box-shadow: var(--sombra-tarjeta);
  flex-shrink: 0;
}

.comunidad--lema{
  font-size: 17px;
  color: var(--color-acento);
}

/* ===================================================================
   CUADRÍCULAS (Integrantes, Álbumes, Galería)
   =================================================================== */
.grid-integrantes,
.grid-albumes,
.grid-galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.album-card { text-decoration: none; }

/* ===================================================================
   LAYOUT PÁGINA DEL ÁLBUM
   =================================================================== */
.album-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.album-layout__left {
  flex: 1;
  padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* 1. Imagen de fondo original */
  background-image: var(--the-first-interior);
  background-size: cover;
  background-position: center;
  position: relative;
}

.album-layout__left::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(3px); 
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1; 
}

.album-tracklist-container {
  position: relative;
  z-index: 2;
}

.album-layout__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
  
  background-color: var(--color-acento);
  background-image: url('../img/textura-cuero.jpg'), linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35));
}

.album-layout__right iframe {
  display: none;
}

.album-info-meta {
  margin-top: var(--space-lg);
  text-align: center;
}

.album-info-meta__texto {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-texto-claro-fuerte);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.album-info-meta__punto,
.album-info-meta__fecha {
  color: var(--color-acento-claro);
  font-weight: 400;
}

.album-layout__left,
.album-layout__right {
  padding-top: calc(var(--header-height) + var(--space-xl));
}

/* ===================================================================
   DETALLE DE ÁLBUM
   =================================================================== */
.album-detalle__cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-top: 12px;
}
.album-portada { width: 200px; }
.album-detalle__titulo {
  font-size: 20px;
  color: var(--color-texto-claro-fuerte);
  margin-bottom: 4px;
}
.album-detalle__enlaces {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: var(--space-md);
}
.cancion-fila {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  
  padding: var(--space-sm) 0 var(--space-md) 0;
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-borde-divisor);
}
.cancion-fila__titulo {
  flex: 1;
  font-family: var(--fuente-titulo);
  font-size: 22px;
  color: var(--color-texto-claro);
  letter-spacing: 1px;
}
.cancion-fila__duracion {
  font-family: var(--fuente-titulo);
  font-size: 15px;
  color: var(--color-acento-claro);
  letter-spacing: 1px;
}
.cancion-fila__cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cancion-fila__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.cancion-fila__titulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cancion-fila__progreso {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 20px;
  cursor: pointer;
}
.cancion-fila__progreso .barra-eq {
  flex: 1;
  min-width: 1px;
  height: var(--h, 40%);
  background: var(--color-borde-divisor);
  border-radius: 0.5px;
  transition: background-color 0.15s ease;
}
.cancion-fila__progreso .barra-eq.activa {
  background: var(--color-acento-claro);
}

.cancion-fila__volumen {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 1px;
}
.cancion-fila__vol-icono {
  color: var(--color-texto-claro-tenue);
  width: 17px;
  height: 17px;
}
.cancion-fila__vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 56px;
  height: 4px;
  background: var(--color-borde-divisor);
  border-radius: 2px;
  cursor: pointer;
}
.cancion-fila__vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 1px solid rgba(var(--rgb-blanco), 0.4);
  margin-top: -3px;
}
.cancion-fila__vol-slider::-moz-range-track {
  height: 4px;
  background: var(--color-borde-divisor);
  border-radius: 2px;
}
.cancion-fila__vol-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 1px solid rgba(var(--rgb-blanco), 0.4);
}

/* ===================================================================
   LISTA DE CANCIONES
   =================================================================== */
.album-tracklist-container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.btn-play-pause {
  background: var(--color-acento);
  color: var(--color-texto-claro-fuerte);
  border: 1px solid rgba(var(--rgb-blanco), 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 10px rgba(var(--rgb-negro), 0.4);
  transition: all 0.2s ease;
}

.btn-play-pause:hover {
  transform: scale(1.1);
  background: var(--color-texto-claro-fuerte);
  color: var(--color-acento);
  box-shadow: 0 6px 15px rgba(var(--rgb-negro), 0.7);
}

.btn-play-pause svg {
  display: block;
}

/* ===================================================================
   CD GIRATORIO
   =================================================================== */
.cd-reproductor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.cd-info h2 {
  font-family: var(--fuente-titulo);
  color: var(--color-texto-claro-fuerte);
  font-size: 28px;
  margin-bottom: 4px;
}

.cd-info p {
  color: var(--color-texto-claro-tenue);
  font-size: 14px;
}

.cd-disco-wrap {
  position: relative;
  width: 420px;
  height: 420px;
}

.cd-disco {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background-image: url('../img/album-the-first.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(var(--rgb-negro), 0.6);
  
  animation: girar-cd 4s linear infinite;
  animation-play-state: paused;

  border-radius: 50%;
  position: relative;

  border: 1px solid rgba(var(--rgb-blanco), 0.25);
  outline: 1px solid rgba(var(--rgb-blanco), 0.25);
  outline-offset: 6px;
}

/* Brillo del CD */
.cd-disco::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg, 
    rgba(255, 255, 255, 0.02), 
    rgba(255, 255, 255, 0.15) 45deg, 
    rgba(255, 255, 255, 0.02) 90deg, 
    rgba(255, 255, 255, 0.15) 135deg, 
    rgba(255, 255, 255, 0.02) 180deg, 
    rgba(255, 255, 255, 0.15) 225deg, 
    rgba(255, 255, 255, 0.02) 270deg, 
    rgba(255, 255, 255, 0.15) 315deg, 
    rgba(255, 255, 255, 0.02) 360deg
  );
  opacity: 1;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cd-disco-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(var(--rgb-blanco), 0.2);
  background: var(--textura-cuero), rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.cd-disco.girando {
  animation-play-state: running;
}

@keyframes girar-cd {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===================================================================
   FILTRO DE GALERÍA
   =================================================================== */
.galeria-filtro {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-lg);
}
.galeria-filtro__menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: var(--color-papel);
  border-radius: var(--radius-sm);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
  min-width: 160px;
  z-index: 10;
}
.galeria-filtro__opcion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(var(--rgb-negro), 0.1);
  color: var(--color-texto-oscuro);
  font-size: 12px;
  cursor: pointer;
}
.galeria-filtro__opcion:last-child { border-bottom: none; }

/* ===================================================================
   CONTACTO Y REDES
   =================================================================== */
.contacto__directo {
  display: flex;
  flex-direction: row;
  width: fit-content;
  gap: var(--space-xl);
  margin: 0 auto var(--space-lg);
}
.contacto__item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-texto-claro);
  font-size: 14px;
}
.contacto__divisor {
  border: none;
  border-top: 1px solid var(--color-borde-divisor);
  margin: var(--space-lg) 0 var(--space-xl);
}
.contacto__redes {
  display: flex;
  gap: 16px;
  margin-bottom: var(--space-lg);
  justify-content: center;
}
.contacto__copyright {
  margin-top: 0;
  color: var(--color-texto-claro-tenue);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ===================================================================
   MODAL (popup "Info y entradas")
   =================================================================== */
.modal {
  margin: auto;
  background: var(--color-papel-alt);
  color: var(--color-texto-oscuro);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  max-width: 420px;
  width: 90%;
  box-shadow: var(--sombra-elevada);
}
.modal::backdrop {
  background: rgba(var(--rgb-negro), 0.6);
}
.modal .tarjeta__titulo {
  font-size: 1.6rem;
}
.modal p {
  font-size: 17px;
  line-height: 1.5;
  margin: var(--space-md) 0 var(--space-lg);
}
.modal__etiqueta {
  font-weight: bold;
  color: var(--color-acento);
}
.modal__enlace {
  color: var(--color-acento);
  text-decoration: underline;
}
.modal .btn {
  font-size: 15px;
  padding: 12px 24px;
}

/* ===================================================================
   RESPONSIVE — TABLET Y ESCRITORIO
   =================================================================== */
@media (min-width: 769px) {
  .grid-integrantes,
  .grid-albumes,
  .grid-galeria {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__title { font-size: 40px; }
  .comunidad-banner {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    padding: var(--space-xl);
  }
  
  .comunidad-banner__contenido {
    flex: 1;
  }
  
  .comunidad-banner__logo {
    width: 180px;
    height: 180px;
  }

  .album-layout {
    flex-direction: row;
  }

  #discografia .contenedor {
    max-width: 1400px;
  }
  .discografia-split {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(120px, 12vw, 160px);
  }
  .discografia-titulo-grande {
    flex: 0 0 30%;
    text-align: left;
  }
  .discografia-cuerpo {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  #proximo-concierto .contenedor {
    max-width: 1400px;
  }
  .concierto-split {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(120px, 12vw, 160px);
  }
  .concierto-titulo-grande {
    flex: 0 0 30%;
    text-align: left;
  }
  .concierto-cuerpo {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: stretch; 
    gap: var(--space-xl);
    flex: 1 1 auto;
    min-width: 0;
  }
  .cartel {
    max-width: none;
    width: 100%;
  }
  .concierto-info {
    max-width: none;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .concierto-info__datos { justify-content: flex-start; }
  .concierto-info__btn { width: auto; }
  .concierto-info__mapa {
    max-width: 320px;
    height: 160px;
    flex-grow: 0;
    margin-left: 0;
  }
  .concierto-info__ubicacion {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav { display: flex; }
  .nav-mobile { display: none !important; }

  .hero { min-height: 100vh; }
  .hero__title { font-size: 48px; letter-spacing: 3px; }

  .header--hero-mode{
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    box-shadow: none;
    transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
  }

  .header--hero-mode .header__inner{
    justify-content: space-between;
  }

  .header--hero-mode .header__logo{
    opacity: 0;
    transform: scale(0.95);
    transition: opacity .3s ease, transform .3s ease;
  }

  .header--hero-mode:not(.is-scrolled) .nav__link{
    background-image: none;
    font-size: 20px;
    padding: var(--space-sm) var(--space-sm);
    text-shadow: 0 1px 3px rgba(var(--rgb-negro), 0.85), 0 3px 10px rgba(var(--rgb-negro), 0.5);
  }

  .header--hero-mode .nav__link{
    transition: font-size .3s ease, padding .3s ease, text-shadow .3s ease;
  }

  .header--hero-mode.is-scrolled{
    background-image: var(--textura-cuero);
    box-shadow: var(--sombra-tarjeta);
  }

  .header--hero-mode.is-scrolled .header__logo{
    opacity: 1;
    transform: scale(1);
  }

  .grid-integrantes { grid-template-columns: repeat(4, 1fr); }
  .grid-albumes { grid-template-columns: repeat(3, 1fr); }
  .grid-galeria { grid-template-columns: repeat(4, 1fr); }

  .lista-conciertos {
    grid-template-columns: repeat(2, 1fr);
  }
  .concierto-card { flex: 1 1 calc(50% - var(--space-lg)); }

  .album-detalle__cabecera {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .album-detalle__enlaces { justify-content: flex-start; }
  .bio__leer-mas { text-align: left; }
  .concierto-cuerpo {
    grid-template-columns: 380px 1fr;
  }
}

/* ===================================================================
   RESPONSIVE - MÓVIL
   =================================================================== */
@media (max-width: 768px) {

  html, body {
    touch-action: none !important;
    width: 100%;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    position: fixed; 
  }

  body.pagina-conciertos {
    overflow-y: auto !important;
    touch-action: none !important;
    position: static;
  }

  #ticketsWrap,
  #ruedaWrap {
    touch-action: pan-y !important;
  }

  .app-wrapper {
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }

  .hero,
  .seccion,
  .footer {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding-top: 60px;
    padding-bottom: 1rem;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .contenedor {
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
    z-index: 2;
  }

  .header,
  .header__inner {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  .header {
    padding: 1.5rem 1rem;
  }
  
  .header__inner {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header__logo,
  .nav-toggle {
    position: relative;
    z-index: 1001;
  }

  .header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-image: var(--textura-cuero);
    background-repeat: repeat;
    background-size: auto;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  }
  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .header__nav .nav-list,
  .header__nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
  }
  .header__nav a {
    font-family: var(--fuente-titulos);
    font-size: 2.2rem;
    color: var(--color-texto-claro);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .header__nav a:active,
  .header__nav a:hover {
    color: var(--color-acento, #e63946);
    transform: scale(1.08);
  }
  .header--hero-mode:not(.is-scrolled) .header__logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .header--transparente .header__inner{
    justify-content: right;
    min-height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
  }

  .header--transparente .nav-toggle,
  .header--transparente .header__inner > * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .header--transparente .header__logo{
    display: none;
  }
  
  .hero__title {
    font-size: 3rem;
    line-height: 1.1;
    padding: 0 15px;
    text-align: center;
  }

  .header__logo,
  .nav-toggle {
    position: relative;
    z-index: 1000;
  }

  .header--hero-mode .nav__link,
  .header--transparente .nav__link,
  .header--hero-mode .nav-mobile a,
  .header--transparente .nav-mobile a {
    font-size: 1.8rem !important;
    font-family: 'Anton', sans-serif;
  }

  .header--transparente .nav__link,
  .header--transparente .nav-mobile a {
    text-shadow: none !important;
    filter: none !important;
  }

  .entradas-grid, 
  .tickets-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .entrada, 
  .ticket {
    width: 100%;
    margin: 0; 
  }

    .tarjeta {
    margin: 30px auto 60px auto; 
    padding: 20px 15px;
  }

  .section-title {
    font-size: 30px;
  }
  .pagina-titulo {
    font-size: 28px;
  }

  .header__logo {
    font-size: 16px;
  }

  .nav-toggle {
    position: relative;
    z-index: 1001;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--color-texto-claro);
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    
    background-color: var(--color-acento, #1a1a1a);
    background-image: var(--textura-cuero, none);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;

    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .nav__link {
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .bio__card {
    padding: 1.5rem 1.25rem !important;
    margin: 0 0.5rem;
  }

  .bio__texto {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
    letter-spacing: 0.2px;
  }

  .bio__texto b {
    color: var(--color-acento, #e63946);
    font-weight: 600;
  }

  #bio .seccion__marca--der {
    display: none !important;
  }

  #bio .seccion__marca--izq {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    
    
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
  }

  #bio.seccion--espuma {
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .concierto-titulo-grande{
    font-size: 2rem !important;
  }
  .concierto-cuerpo {
    flex-direction: column;
    align-items: center;
  }
  .concierto-info {
    margin-top: 20px;
    padding-left: 0;
  }

  #concierto .section-title,
  #proximo-concierto .section-title,
  .concierto__titulo {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .concierto__cartel,
  .cartel__imagen,
  #concierto img {
    max-height: 300px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0.5rem auto !important;
  }
  
  .concierto-info h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center;
  }
  .concierto-info__dato{
    padding-bottom: 0;
  }
  .concierto-info__dato-label{
    font-size: .8rem;
  }
  .concierto-info__dato-valor{
    font-size: 1rem;
    margin-bottom: 0.1rem;
  }
  .concierto__card,
  #concierto .tarjeta {
    padding: 1rem 1.25rem !important;
  }
 
  .album-layout__left {
    display: none !important;
  }
  .album-layout__right iframe{
    display: block;
  }
  .cd-reproductor{
    display: none !important;
  }

  .pagina-conciertos{
    background-size: cover;
  }
  .concierto-info__evento{
    font-size: 2rem;
  }
  .concierto-info__ubicacion{
    display: none !important;
  }
  .conciertos-nav-flotante {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  }
  
  .conciertos-nav-flotante.is-top {
    bottom: auto;
    top: 70px;
  }
  .entrada {
    flex-direction: column;
    height: auto;
    margin-bottom: 10px;
  }
  .entrada__cartel {
    width: 100%;
    height: 180px;
  }
  .entrada__evento {
    font-size: 28px;
    max-width: 100%;
  }
  .entrada__talon {
    display: none !important;
  }
  
  .entrada__tampon {
    width: 180px;
    height: 180px;
    font-size: 2.4rem;
    top: -10px;
    right: -50px;
  }

  .pasados-panel {
    flex-direction: column;
    gap: var(--space-lg);
    height: auto;
  }
  .pasados-panel__rueda-wrap {
    width: 100%;
  }
  .pasados-panel__rueda-box {
    height: 160px;
  }
  .pasados-panel__guia {
    top: 54px;
    height: 50px;
  }
  .pasados-panel__rueda {
    height: 160px;
  }
  .anio {
    height: 44px;
  }
  .pasados-panel__tickets-wrap {
    flex: none;
    height: 60vh;
  }

  .jewel-case__nombre,
  .jewel-case__anio,
  .jewel-case__anio::before {
    font-size: 26px;
  }
  .jewel-case__info {
    flex-wrap: wrap;
    text-align: center;
  }
}