/* ========== Variables y Reset ==========
   Tema oscuro con acento rojo metálico */
:root{
  /* Paleta adaptada al logo (monocromo + metálico) */
  --bg:#0a0a0b; --bg-2:#121216; --bg-3:#18191e;
  --fg:#e8eaee; --fg-dim:#aab0b8;
  --accent:#f3f4f6; /* plata claro */
  --accent-2:#d1d5db; /* plata medio */
  /* Color terciario (rojo) */
  --tertiary:#e11d48;
  --tertiary-contrast:#ffffff;
  --accent-contrast:#0b0b0f; /* texto sobre botón/acento */
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --card:#121219cc; --border:#2a2a33; --shadow:0 10px 30px rgba(0,0,0,.5);
  --radius:14px; --radius-sm:10px;
  --font-display:'Metal Mania', 'Bebas Neue', system-ui, sans-serif;
  --font-sans:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
[data-theme="light"]{
  --bg:#f7f8fb; --bg-2:#ffffff; --bg-3:#eef1f6; --fg:#111217; --fg-dim:#495062;
  --accent:#111217; /* acento oscuro en claro */
  --accent-2:#1f2937;
  --tertiary:#b91c1c;
  --tertiary-contrast:#ffffff;
  --accent-contrast:#ffffff;
  --card:#ffffffcc; --border:#e4e8ef; --shadow:0 10px 30px rgba(0,0,0,.08);
}
/* Ajustes visuales específicos para modo claro */
[data-theme="light"] .glitch{ text-shadow:none; }
[data-theme="light"] .glitch::before,
[data-theme="light"] .glitch::after{ content:none; }
*{box-sizing:border-box}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans); color:var(--fg); background: radial-gradient(1000px 600px at 10% -20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
  radial-gradient(800px 500px at 90% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100dvh;
}
.container img, .container svg{max-width:100%; height:auto}
.container{width:min(1100px, 92%); margin-inline:auto}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius-sm)}
/* César: utilidades de accesibilidad */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
:where(a,button):focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border); text-decoration:none; font-weight:700; color:var(--fg); background:var(--bg-3)}
.btn--primary{background:var(--tertiary); color:var(--tertiary-contrast); border-color:color-mix(in srgb, var(--tertiary) 60%, #000); box-shadow:0 8px 22px rgba(225,29,72,.25)}
.btn--primary:hover,.btn--primary:focus{filter:brightness(1.06)}
.btn--ghost{background:transparent}
.btn--ghost:hover,.btn--ghost:focus{color:var(--tertiary); border-color:color-mix(in srgb, var(--tertiary) 60%, var(--border))}

/* Redes sociales con iconos */
.social{display:flex; gap:.6rem; flex-wrap:wrap}
.social a{display:inline-flex; align-items:center; justify-content:center; color:var(--fg-dim); text-decoration:none; background:transparent; border:none; padding:0; transition:color .2s ease}
.social a:hover,.social a:focus{color:var(--tertiary)}
.social svg{width:22px; height:22px; display:block}

/* ========== Header / Nav ==========
   Sticky con blur y sombra */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg-2) 70%, transparent); border-bottom:1px solid var(--border)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg)}
.brand span{font-family:var(--font-display); font-size:1.6rem; letter-spacing:.5px}
.brand img{height:40px; width:auto; display:block}
.brand__img--light{display:none}
[data-theme="light"] .brand__img--light{display:block}
[data-theme="light"] .brand__img--dark{display:none}
.nav__toggle{display:none; border:1px solid var(--border); background:var(--bg-3); color:var(--fg); border-radius:10px; padding:.5rem .7rem}
.nav__list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav__list a{color:var(--fg-dim); text-decoration:none; padding:.5rem .75rem; border-radius:10px}
.nav__list a:hover,.nav__list a:focus{color:var(--fg); background:var(--bg-3)}
.nav__list a:hover,.nav__list a:focus{color:var(--tertiary)}
.theme-toggle{border:1px solid var(--border); background:var(--bg-3); color:var(--fg); border-radius:50px; padding:.5rem .6rem}

@media (max-width: 860px){
  .nav__toggle{display:inline-flex}
  .nav__list{position:absolute; right:1rem; top:62px; width:min(92vw, 320px); max-height:calc(100vh - 88px); overflow:auto; flex-direction:column; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:.6rem; box-shadow:var(--shadow); display:none; z-index:60}
  .nav__list.open{display:flex}
}

/* ========== Hero ==========
   Glitch + botón con glow */
.hero{position:relative; isolation:isolate; padding:6rem 0 4.5rem; background:#000}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.18}
.hero__inner{text-align:center}
.hero__logo{display:block; width:min(90%, 420px); margin:0 auto .6rem; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));}
[data-theme="light"] .hero__logo{filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.hero__logo--light{display:none}
[data-theme="light"] .hero__logo--light{display:block}
[data-theme="light"] .hero__logo--dark{display:none}
.glitch{font-family:var(--font-display); font-size: clamp(2.8rem, 8vw, 7rem); letter-spacing:2px; position:relative; display:inline-block; text-transform:uppercase; text-shadow:0 0 18px rgba(225,29,72,.25)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; left:0; right:0; top:0; bottom:0}
.glitch::before{transform:translate(2px,-2px); color:#ff0033; mix-blend-mode:screen; clip-path: polygon(0 2%, 100% 2%, 100% 44%, 0 44%); animation:gl1 2.5s infinite}
.glitch::after{transform:translate(-2px,2px); color:#00e5ff; mix-blend-mode:screen; clip-path: polygon(0 56%, 100% 56%, 100% 100%, 0 100%); animation:gl2 2.8s infinite}
@keyframes gl1{0%,100%{transform:translate(2px,-2px)}50%{transform:translate(1px,-1px)}}
@keyframes gl2{0%,100%{transform:translate(-2px,2px)}50%{transform:translate(-1px,1px)}}
.lead{color:var(--fg-dim); margin-top:.6rem}
.actions{margin-top:1.6rem; display:flex; gap:.8rem; justify-content:center}

.btn{appearance:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.3px; padding:.8rem 1.1rem; border-radius:12px; transition:transform .05s ease, box-shadow .2s}
.btn--primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--accent-contrast); box-shadow:0 10px 20px color-mix(in srgb, var(--accent) 25%, transparent)}
.btn--primary:hover{box-shadow:0 14px 28px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn--ghost{background:transparent; color:var(--fg); border:1px solid var(--border)}
.btn:active{transform:translateY(1px)}
.icon-btn{background:var(--bg-3); border:1px solid var(--border); color:var(--fg); padding:.5rem .6rem; border-radius:10px}

/* Legibilidad en modo claro: header más opaco y botones visibles sobre hero oscuro */
[data-theme="light"] .site-header{ background: color-mix(in srgb, var(--bg-2) 95%, transparent); }
[data-theme="light"] .hero .btn--ghost{ color:#f7f9fc; border-color:rgba(255,255,255,.55); }
[data-theme="light"] .hero .btn--ghost:hover, [data-theme="light"] .hero .btn--ghost:focus{ border-color:rgba(255,255,255,.75); color:#fff; }

/* ========== Secciones, grid y utilidades ==========
*/
.section{padding:4rem 0}
.section{padding:clamp(2.5rem, 6vw, 4.5rem) 0}
.section + .section{position:relative}
.section + .section::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent)}
.section--alt{background:linear-gradient(180deg, var(--bg-2), var(--bg))}
.section__title{font-family:var(--font-display); letter-spacing:1px; margin:0 0 1.5rem}
.section__title::after{content:""; display:block; width:64px; height:3px; margin-top:.45rem; background:var(--tertiary); border-radius:2px}
.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:2rem}
.inline{display:flex; align-items:center; gap:.6rem}
.muted{color:var(--fg-dim)}
.tiny{font-size:.85rem}

@media (max-width: 860px){
  .grid-2{grid-template-columns:1fr}
}

/* Banda */
.banda{display:grid; grid-template-columns:1.5fr 1fr; gap:2rem}
.members{list-style:none; margin:0; padding:0; display:none}
.members li{padding:.35rem 0; border-bottom:1px dashed var(--border)}
@media(max-width:860px){.banda{grid-template-columns:1fr}}

/* Descripción banda */
.banda .band-desc{grid-column:1/-1}
.band-desc{max-width:100ch}
.band-desc p{margin:0 0 .8rem; text-wrap:pretty; hyphens:auto; -webkit-hyphens:auto}
.band-desc strong{color:var(--accent)}
.band-desc > :not(.desc-new){display:none !important}
@media (min-width: 1200px){
  .band-desc{max-width:110ch}
}
.band-desc strong{color:var(--accent)}

/* Miembros (cards) */
.members-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:.8rem; align-items:stretch}
.member-card{position:relative; display:block; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.member-card__img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.member-card__name{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; text-align:center; font-weight:800; line-height:1.2; color:var(--tertiary-contrast); background:color-mix(in srgb, var(--tertiary) 80%, transparent); transform:translateY(100%); transition:transform .35s ease}
.member-card:hover .member-card__name, .member-card:focus-within .member-card__name{transform:translateY(0)}
.member-card__name strong{display:block; font-size:1.05rem}
.member-card__role{display:block; font-weight:600; font-size:.92rem; opacity:.95; margin-top:.25rem}
.member-card:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 16px 34px rgba(0,0,0,.4)}
.member-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Página de miembro */
.member{display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start}
.member__photo{background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.member__photo img{width:100%; display:block; height:auto}
.member__name{font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); margin:.2rem 0}
.member__role{color:var(--fg-dim); margin:0 0 1rem}
.member__bio{line-height:1.75}
.social{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
.social a{display:inline-flex; text-decoration:none; color:var(--fg-dim); border:none; background:transparent; padding:0; transition:color .2s ease}
.social a:hover,.social a:focus{color:var(--tertiary)}

@media (min-width: 900px){
  .member{grid-template-columns:420px 1fr}
}

/* ========== Cards (álbumes) ==========
*/
.albums{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem}
.section#musica .albums, #musica .albums{display:none !important}
#musica .container > :not(h2):not(.spotify){display:none !important}
.albums .theme-logo{display:block; width:160px; max-width:60%; height:auto; margin:.8rem auto 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card>img{width:100%; aspect-ratio:1/1; object-fit:cover}
.card__body{padding:1rem}
.card__actions{display:flex; gap:.5rem; margin-top:.6rem}

/* ========== Tienda ==========
*/
.shop{padding-top:2rem}
.shop__grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem}
.product__img{width:100%; aspect-ratio:1/1; object-fit:cover}
.price{font-weight:800; font-size:1.1rem}
.product__opts{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.4rem}
.product__opts select,.product__opts input[type="number"]{background:var(--bg-3); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.45rem .6rem}
.pay-badges{display:flex; gap:.4rem; align-items:center; margin-top:.4rem}
.pay-badges span{font-size:.8rem; color:var(--fg-dim); border:1px solid var(--border); border-radius:8px; padding:.15rem .4rem}

/* ========== Carrito ==========
*/
.cart-btn{display:inline-flex; align-items:center; gap:.3rem}
.cart-count{background:var(--accent); color:#fff; border-radius:10px; padding:.05rem .35rem; font-size:.8rem; line-height:1}
.cart{min-width:min(92vw, 820px)}
.cart table{width:100%; border-collapse:collapse}
.cart th,.cart td{padding:.5rem; border-bottom:1px dashed var(--border); text-align:left}
.cart__qty{display:inline-flex; align-items:center; gap:.3rem}
.cart__qty button{min-width:28px}
.cart__row-actions{white-space:nowrap}
.cart__total{display:flex; justify-content:flex-end; gap:1rem; margin-top:.6rem; font-weight:800}

/* ========== Player ==========
*/
.player{margin-top:1.5rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.player__now{display:flex; gap:1rem; align-items:center; margin-bottom:1rem}
.player__cover{width:64px; height:64px; border-radius:10px; border:1px solid var(--border)}
.player__title{font-weight:800}
.player__meta{color:var(--fg-dim); font-size:.9rem}
.player__controls{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}
.player__time{display:flex; align-items:center; gap:.6rem; min-width:260px}
.player__time input[type="range"]{width:160px}
.player__volume{display:flex; align-items:center; gap:.4rem}
.player__list{list-style:none; margin:1rem 0 0; padding:0; max-height:260px; overflow:auto; border-top:1px solid var(--border)}
.player__list li{padding:.6rem .2rem; display:flex; justify-content:space-between; gap:.6rem; border-bottom:1px dashed var(--border); cursor:pointer}
.player__list li.active{color:var(--accent)}

/* Spotify embed */
.spotify{margin-top:1.5rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem; box-shadow:var(--shadow)}
.spotify iframe{display:block; width:100%; border:0; height:520px; border-radius:12px}
@media (max-width: 500px){
  .hero{padding:4rem 0 3rem}
  .brand img{height:36px}
  .actions{flex-wrap:wrap}
  .player__time{min-width:auto}
  .player__time input[type="range"]{width:100%}
  .spotify iframe{height:360px}
}

/* ========== Tour ==========
*/
.tour__filters{display:flex; justify-content:flex-end; margin-bottom:1rem}
.tour{display:grid; gap:.8rem}
.tour__item{display:flex; align-items:center; gap:1.2rem; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem}
.tour__poster{width:180px; max-width:32vw; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.3); object-fit:cover}
.tour__body{display:flex; gap:1.4rem; align-items:flex-start; flex:1}
.tour__date{min-width:150px}
.tour__date strong{display:block; font-size:1.2rem}
.tour__details{flex:1}
.tour__details h3{margin:0; font-size:1.2rem; letter-spacing:.3px}
.tour__details p{margin:.35rem 0 0}
.tour__cta{white-space:nowrap; align-self:stretch; display:flex; align-items:center; justify-content:center; padding-inline:1.4rem}

@media (max-width:600px){
  .tour__item{flex-direction:column; align-items:stretch}
  .tour__poster{width:100%; max-width:100%; border-radius:12px}
  .tour__body{flex-direction:column; gap:.6rem}
  .tour__date{min-width:auto}
  .tour__cta{width:100%; text-align:center; align-self:auto}
}

/* ========== Galería y Lightbox ==========
*/
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem}
.gallery__item{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border)}
.gallery__item img{width:100%; height:100%; display:block; object-fit:cover}
.lightbox{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.8); display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto; align-items:center; justify-items:center; padding:1rem}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:min(94vw,1100px); max-height:80vh; border-radius:12px; border:1px solid var(--border); background:#000}
.lightbox__close{position:absolute; top:1rem; right:1rem}

/* ========== Video ==========
*/
.video__wrap{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)}
.video__wrap iframe{position:absolute; inset:0; width:100%; height:100%}
.video__placeholder{display:flex; align-items:center; justify-content:center; background:radial-gradient(800px 400px at 20% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent), linear-gradient(180deg, var(--bg-3), var(--bg-2));}

/* Logos en tarjetas u otros bloques que deban cambiar por tema */
.theme-logo--light{display:none}
[data-theme="light"] .theme-logo--light{display:block}
[data-theme="light"] .theme-logo--dark{display:none}
.video__cta{position:relative; z-index:1}

/* ========== Formularios ==========
*/
.form .form__row{display:grid; gap:.4rem; margin-bottom:.8rem}
/* Campos de texto/select: no aplicar a range */
input:not([type="range"]),textarea,select{background:var(--bg-3); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; outline:none}
input:not([type="range"]):focus,textarea:focus,select:focus{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}
/* Sliders: sin padding/borde para que alcancen extremos */
input[type="range"]{padding:0; border:none; background:transparent; accent-color:var(--accent)}
.error{color:var(--err); min-height:1.1rem}

/* ========== Footer, Toast ==========
*/
.site-footer{border-top:1px solid var(--border); padding:1.2rem 0; background:linear-gradient(180deg, var(--bg-2), var(--bg))}
.footer__inner{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--fg); text-decoration:none; border:1px solid var(--border); padding:.3rem .5rem; border-radius:10px}
.toast{position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:var(--bg-3); color:var(--fg); border:1px solid var(--border); border-radius:12px; padding:.6rem .9rem; box-shadow:var(--shadow)}

/* ========== Animación reveal ==========
*/
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
[data-reveal].is-visible{opacity:1; transform:none}
/* César: respetar preferencias de movimiento del usuario */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important; transform:none !important}
}
/* César: alto contraste cuando el usuario lo solicita */
@media (prefers-contrast: more){
  :where(a,button):focus-visible{outline-width:3px}
  .member-card{border-width:2px}
  .nav__list a:hover,.nav__list a:focus{text-decoration:underline}
}
/* ===== Modo claro: mejoras visuales ===== */
[data-theme="light"] body{background:linear-gradient(180deg, var(--bg-2), var(--bg-3));}
[data-theme="light"] .hero{color:#f7f9fc}
[data-theme="light"] .spotify{background:#fff; border-color:#e9edf3}
[data-theme="light"] .tour__item{background:#fff}
[data-theme="light"] .gallery__item{background:#fff}