/* ============================================================
   Razones en el Aire — Sitio / escaparate de repertorio
   Estilos de página (sobre colors_and_type.css del sistema)
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0; background:var(--noche-980); color:var(--fg1);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
img{display:block; max-width:100%;}
button{font-family:var(--font-body); cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit;}
::selection{background:var(--voz-500); color:#fff;}

:root{
  --nav-h:68px;
  --accent-live:var(--voz-500);     /* acento de la "voz" — cambia con Tweak */
  --grain-opacity:0.5;
}

.wrap{max-width:1220px; margin:0 auto; padding:0 40px;}

/* ---------- grano de película (controlable) ---------- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================== ESQUEMA DE TEXTO =================== */
.eyebrow{font-family:var(--font-body); font-weight:700; font-size:12px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent-live);
  display:inline-block;}
.eyebrow.azul{color:var(--azul-300);}
.dim{color:var(--noche-400);}

/* =================== BOTONES =================== */
.btn{font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:14px 26px; border-radius:2px;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; position:relative;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), background-position .5s ease, background .2s, filter .15s, box-shadow .28s, color .15s; will-change:transform;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-duo{background:var(--grad-duotono); background-size:210% 100%; background-position:0% 50%; color:#fff;}
.btn-duo:hover{background-position:100% 50%; box-shadow:var(--glow-azul);}
.btn-rojo{background:var(--accent-live); color:#fff;}
.btn-rojo:hover{background:var(--azul-500); box-shadow:0 8px 26px rgba(0,7,255,.42);}
.btn-outline{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px #fff; background:rgba(255,255,255,.06);}
.btn-ghost{background:transparent; color:var(--azul-300); padding-left:0; padding-right:0;}
.btn-ghost:hover{color:var(--azul-200);}
.btn-sm{padding:10px 18px; font-size:11px;}

/* =================== NAV =================== */
.nav{position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:24px;
  height:var(--nav-h); padding:0 40px;
  background:rgba(13,13,15,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.10);}
.brand{display:flex; align-items:center; gap:12px; white-space:nowrap; cursor:pointer;}
.brand img{width:30px; height:30px;}
.brand .w1{font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:0; color:#fff; line-height:1;}
.brand .w2{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:18px; letter-spacing:.2em; color:#fff; line-height:1;}
.nav .links{display:flex; gap:2px; margin-left:10px;}
.nav .links a{font-weight:600; font-size:13px; color:var(--noche-200); padding:8px 12px; cursor:pointer; transition:.15s; letter-spacing:.01em;}
.nav .links a:hover{color:#fff;}
.nav .spacer{flex:1;}
.lang-switch{display:flex; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill);}
.lang-switch button{font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.08em; color:var(--noche-300);
  background:transparent; padding:5px 11px; border-radius:var(--r-pill); cursor:pointer; transition:.15s;}
.lang-switch button:hover{color:#fff;}
.lang-switch button.on{background:#fff; color:var(--noche-980);}

/* ---- Menú móvil (hamburguesa) · QA móvil 2026-06-05 ---- */
.burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:transparent; border:0; flex:none;}
.burger span{display:block; width:100%; height:2px; background:#fff; border-radius:2px;}
.mobile-menu{display:none;}

/* =================== HERO — variante FOTO =================== */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden;}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03);}
.hero-slides{position:absolute; inset:0; z-index:0;}
.hero-slides .hbg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.4s ease; filter:saturate(1.05) contrast(1.03);}
.hero-slides .hbg.on{opacity:1;}
.hero>.wrap,.hero-type>.wrap{width:100%;}
.hero .veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,13,15,.70) 0%, rgba(13,13,15,.40) 38%, rgba(13,13,15,.97) 100%);}
.hero .inner{position:relative; z-index:4; padding:0 0 90px; max-width:900px;}
.hero h1{font-family:var(--font-display); font-weight:500; font-size:clamp(44px,6.6vw,92px);
  line-height:1.04; letter-spacing:-.015em; margin:18px 0 0; color:#fff; text-wrap:initial;}
.hero h1 em{font-style:italic;}
.hero .sub{font-size:clamp(16px,1.7vw,21px); color:var(--noche-100); max-width:52ch;
  margin:28px 0 34px; line-height:1.55; font-weight:300;}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero .ph-note{display:flex; align-items:center; gap:10px; margin-left:6px; color:var(--noche-300); font-size:12px; font-weight:600; letter-spacing:.02em;}
.hero .ph-note .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-live); box-shadow:0 0 0 4px rgba(255,60,20,.18);}

/* =================== HERO — variante TIPOGRÁFICA =================== */
.hero-type{position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, rgba(0,7,255,.16), transparent 55%), var(--noche-980);}
.hero-type .eclipse{position:absolute; right:-12%; top:50%; transform:translateY(-50%);
  width:min(64vw,820px); aspect-ratio:1; opacity:.9; pointer-events:none;}
.hero-type .strip{position:absolute; left:0; right:0; bottom:0; height:34%; overflow:hidden; opacity:.5;}
.hero-type .strip img{width:100%; height:100%; object-fit:cover;}
.hero-type .strip .mask{position:absolute; inset:0; background:linear-gradient(180deg, var(--noche-980) 0%, transparent 40%, var(--noche-980) 100%);}
.hero-type .inner{position:relative; z-index:4; max-width:1100px;}
.hero-type h1.big{text-wrap:initial;}
.hero-type .big{font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; line-height:.92; color:#fff;
  font-size:clamp(56px,12vw,168px); margin:14px 0 0;}
.hero-type .big em{font-style:italic; color:var(--noche-100);}
.hero-type .sub{font-size:clamp(16px,1.7vw,21px); color:var(--noche-200); max-width:54ch; margin:30px 0 34px; line-height:1.55; font-weight:300;}
.hero-type .cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* =================== SECCIONES =================== */
section{padding:104px 0; position:relative;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:46px; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:20px;}
.sec-head h2{font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.6vw,58px);
  letter-spacing:-.01em; margin:12px 0 0; color:#fff; line-height:1.04;}
.sec-head .meta{font-size:13px; color:var(--noche-400); font-weight:600; text-align:right; white-space:nowrap;}
.paper{background:var(--papel-500); color:var(--noche-980);}
.paper .sec-head{border-color:rgba(13,13,15,.16);}
.paper .sec-head h2{color:var(--noche-980);}
.paper .eyebrow{color:var(--voz-600);}
.paper .meta{color:var(--noche-500);}

/* =================== REPERTORIO — LISTA =================== */
.tracks{display:flex; flex-direction:column;}
.track{display:grid; grid-template-columns:34px 44px 1fr auto; align-items:center; gap:22px;
  padding:17px 10px; border-top:1px solid rgba(255,255,255,.10); cursor:pointer;
  transition:background .2s, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; position:relative;}
.track:last-child{border-bottom:1px solid rgba(255,255,255,.10);}
.track:hover{background:linear-gradient(90deg, color-mix(in srgb, var(--accent-live) 10%, transparent), rgba(0,7,255,.05) 72%, transparent); transform:translateX(5px); box-shadow:inset 3px 0 0 var(--accent-live);}
.track.active{box-shadow:inset 3px 0 0 var(--accent-live);}
.track .num{font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--noche-500);
  font-variant-numeric:tabular-nums; text-align:center; transition:.15s;}
.track:hover .num,.track.active .num{color:var(--accent-live);}
.track .pp{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; flex:none; transition:.15s;}
.track:hover .pp,.track.active .pp{background:var(--accent-live);}
.track.active .pp{box-shadow:0 0 0 4px rgba(255,60,20,.16);}
.track .tt b{font-family:var(--font-display); font-weight:600; font-size:23px; color:#fff; display:block; line-height:1.12;}
.track .tt span{font-size:13px; color:var(--noche-400); display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.track .tags{display:flex; align-items:center; gap:10px;}
.fmt{font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.26); padding:5px 10px; border-radius:2px; white-space:nowrap;}
.soon{font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-live);
  border:1px solid color-mix(in srgb, var(--accent-live) 55%, transparent); padding:5px 10px; border-radius:2px; white-space:nowrap;}
.track .dur{font-weight:600; font-size:13px; color:var(--noche-400); font-variant-numeric:tabular-nums; text-align:right; min-width:46px;}
.track.active .dur{color:var(--accent-live);}
/* fila de plataformas que se revela */
.track .plats{grid-column:3 / -1; display:flex; gap:8px; align-items:center; max-height:0; overflow:hidden;
  opacity:0; transition:max-height .25s ease, opacity .2s ease, margin .25s ease; margin-top:0;}
.track:hover .plats,.track.active .plats{max-height:40px; opacity:1; margin-top:12px;}
.plat-link{font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--noche-300);
  border:1px solid rgba(255,255,255,.16); padding:5px 11px; border-radius:999px; transition:.15s; cursor:pointer;}
.plat-link:hover{color:#fff; border-color:rgba(255,255,255,.5);}
.plat-link.dis{opacity:.5; cursor:not-allowed;}

/* =================== REPERTORIO — CUADRÍCULA =================== */
.grid-tracks{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);}
.card{background:var(--noche-980); padding:0; cursor:pointer; position:relative; transition:background .15s;}
.card:hover{background:var(--noche-950);}
.card .cover{position:relative; aspect-ratio:1; background:var(--grad-duotono); overflow:hidden;
  display:flex; align-items:flex-end; justify-content:space-between; padding:18px;}
.card .cover .cn{font-family:var(--font-display); font-weight:600; font-size:64px; color:rgba(255,255,255,.92); line-height:.8;}
.card .cover .mk{width:34px; height:34px; opacity:.9;}
.card .cover .scrim{position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(13,13,15,.55) 100%);}
.card .cover .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,15,.45); opacity:0; transition:.18s; z-index:4;}
.card:hover .cover .play{opacity:1;}
.card .cover .play .circ{width:56px; height:56px; border-radius:50%; background:var(--accent-live);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-voz);}
.card.active .cover .play{opacity:1; background:rgba(13,13,15,.32);}
.card .body{padding:16px 18px 20px;}
.card .body b{font-family:var(--font-display); font-weight:600; font-size:21px; color:#fff; display:block; line-height:1.14;}
.card .body .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;}
.card .body .meta{font-size:12px; color:var(--noche-400); font-weight:600; font-variant-numeric:tabular-nums;}

/* =================== AVÍSAME (captura email) =================== */
.avisame{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, var(--noche-900), var(--noche-980)); border-radius:var(--r-md);
  padding:54px clamp(28px,5vw,72px); margin-top:64px;}
.avisame .spot{position:absolute; inset:0; background:var(--spot-azul); opacity:.7; pointer-events:none;}
.avisame .in{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.avisame h3{font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.4vw,44px); color:#fff; line-height:1.08; margin:14px 0 0; text-wrap:balance;}
.avisame h3 em{font-style:italic;}
.avisame p{color:var(--noche-200); font-size:15px; line-height:1.6; margin:16px 0 0; max-width:46ch;}
.form{display:flex; gap:10px; flex-wrap:wrap;}
.form input{flex:1; min-width:200px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18);
  border-radius:2px; padding:15px 16px; color:#fff; font-family:var(--font-body); font-size:15px; transition:.15s;}
.form input::placeholder{color:var(--noche-400);}
.form input:focus{outline:none; border-color:var(--azul-400); box-shadow:0 0 0 3px var(--ring);}
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px var(--noche-900) inset;
  box-shadow:0 0 0 1000px var(--noche-900) inset;
  caret-color:#fff; transition:background-color 600000s 0s;}
.form input.err{border-color:var(--voz-500); box-shadow:0 0 0 3px rgba(255,60,20,.3);}
.form .hint{flex-basis:100%; font-size:12px; color:var(--noche-400); margin-top:2px;}
.form .hint.bad{color:var(--voz-400);}
.ok-msg{display:flex; align-items:center; gap:14px;}
.ok-msg .ico{width:46px; height:46px; border-radius:50%; background:var(--grad-duotono); display:flex; align-items:center; justify-content:center; flex:none;}
.ok-msg b{font-family:var(--font-display); font-weight:600; font-size:24px; color:#fff; display:block;}
.ok-msg span{font-size:13px; color:var(--noche-300);}

/* =================== DIRECTO =================== */
.directo-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center;}
.directo-grid .ph{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md);}
.directo-grid .ph img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.directo-grid .ph .tag{position:absolute; left:16px; top:16px; z-index:4; display:flex; align-items:center; gap:8px;
  background:rgba(13,13,15,.66); backdrop-filter:blur(6px); padding:8px 13px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;}
.directo-grid .ph .tag .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-live); box-shadow:0 0 0 4px rgba(255,60,20,.2);}
.gigs{display:flex; flex-direction:column;}
.gig{display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:22px;
  padding:20px 6px; border-top:1px solid rgba(255,255,255,.12);}
.gig:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.gig .d{display:flex; flex-direction:column; align-items:flex-start;}
.gig .d b{font-family:var(--font-display); font-weight:600; font-size:40px; line-height:.82; color:#fff;}
.gig .d span{font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--accent-live); text-transform:uppercase; margin-top:5px;}
.gig .v b{font-family:var(--font-display); font-weight:600; font-size:25px; color:#fff; display:block; line-height:1.08;}
.gig .v span{font-size:14px; color:var(--noche-400);}
.gig .stat{font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--noche-300);
  border:1px solid rgba(255,255,255,.2); padding:8px 13px; border-radius:2px; white-space:nowrap; transition:.15s;}
.gig .stat:hover{color:#fff; border-color:#fff;}
.directo-foot{margin-top:30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--noche-400); font-size:13px;}
.nofechas{display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); background:rgba(255,255,255,.03);}
.nofechas .nf-ico{width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);}
.nofechas .nf-tx b{font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff; display:block; line-height:1.1;}
.nofechas .nf-tx span{font-size:13px; color:var(--noche-300);}

/* =================== SINCRO (papel) — pilares =================== */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(13,13,15,.14);
  border:1px solid rgba(13,13,15,.14);}
.pillar{background:var(--papel-500); padding:40px 32px;}
.pillar .ico{width:34px; height:34px; margin-bottom:20px;}
.pillar .ico img{width:100%; height:100%;}
.pillar .k{font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--voz-600);}
.pillar h3{font-family:var(--font-display); font-weight:600; font-size:30px; margin:14px 0 12px; color:var(--noche-980);}
.pillar p{font-size:15px; color:var(--noche-600); line-height:1.65; margin:0;}
.sincro-cta{margin-top:42px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.sincro-cta .lead{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(20px,2.4vw,30px); color:var(--noche-980); max-width:24ch; margin:0;}

/* =================== PROYECTO / BIO =================== */
.bio{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.bio .ph{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md);}
.bio .ph.bio-ph{aspect-ratio:4/3;}
.bio .ph img{width:100%; height:100%; object-fit:cover; object-position:center;}
.bio .lead2{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,2.8vw,40px); color:#fff; line-height:1.16; margin:18px 0 22px; text-wrap:balance;}
.bio .lead2 em{font-style:italic;}
.bio p{font-size:17px; line-height:1.75; color:var(--noche-200); font-weight:300;}
.bio .pillars-mini{display:flex; gap:28px; margin-top:30px; flex-wrap:wrap;}
.bio .pillars-mini div{display:flex; flex-direction:column;}
.bio .pillars-mini b{font-family:var(--font-body); font-weight:600; font-size:34px; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1;}
.bio .pillars-mini span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-live); font-weight:700; margin-top:4px;}

/* =================== GALERÍA (masonry por columnas, respeta proporción) =================== */
.gal-grid{column-count:3; column-gap:10px;}
.gal-cell{display:block; width:100%; margin:0 0 10px; padding:0; break-inside:avoid; position:relative;
  overflow:hidden; border-radius:var(--r-md); cursor:pointer; background:var(--noche-900);
  border:1px solid rgba(255,255,255,.08); line-height:0;}
.gal-cell img{width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s;
  filter:saturate(1.04) contrast(1.02);}
.gal-cell:hover img{transform:scale(1.04);}
.gal-credit{margin:22px 0 0; font-size:12px; letter-spacing:.06em; color:var(--noche-400); font-weight:600;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.gal-credit b{color:var(--noche-200); font-weight:700; margin-left:6px;}
.gal-credit .sep{color:var(--noche-600);}
.gal-hover{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 60% at 50% 50%, rgba(0,7,255,.18), rgba(13,13,15,.5)); opacity:0; transition:opacity .25s; z-index:2;}
.gal-cell:hover .gal-hover{opacity:1;}
.gal-hover img{width:34px; height:34px;}
.gal-cell:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring);}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:120; background:rgba(8,8,9,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:40px; animation:lbin .2s ease-out;}
@keyframes lbin{from{opacity:0;}to{opacity:1;}}
.lb-fig{margin:0; max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:14px;}
.lb-fig img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r-md); box-shadow:var(--shadow-xl);}
.lb-fig figcaption{font-size:12px; letter-spacing:.06em; color:var(--noche-300); font-variant-numeric:tabular-nums; text-transform:uppercase; font-weight:600;}
.lb-close{position:fixed; top:22px; right:26px; width:46px; height:46px; border-radius:50%; color:#fff;
  background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:.15s;}
.lb-close:hover{background:rgba(255,255,255,.18);}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; color:#fff;
  font-size:34px; line-height:1; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:.15s; font-family:var(--font-display);}
.lb-nav:hover{background:var(--accent-live);}
.lb-nav.prev{left:26px;} .lb-nav.next{right:26px;}

/* =================== SINCRO HUB (papel) =================== */
.sincro-intro{font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--noche-600); max-width:64ch; margin:0 0 36px; font-weight:300;}
.sincro-intro strong{color:var(--noche-980); font-weight:600;}
.moods{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(13,13,15,.14); border:1px solid rgba(13,13,15,.14);}
.mood{display:flex; align-items:center; gap:16px; background:var(--papel-500); padding:24px 26px; cursor:pointer; transition:background .15s;}
.mood:hover{background:var(--noche-50);}
.mood .mood-play{width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--noche-980); transition:.15s;}
.mood:hover .mood-play{background:var(--voz-500);}
.mood .mood-tx{flex:1;}
.mood .mood-tx b{font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--noche-980); display:block; line-height:1.05;}
.mood .mood-tx span{font-size:13px; color:var(--noche-500); line-height:1.4; display:block; margin-top:3px;}
.mood .mood-go{color:var(--noche-300); font-size:20px; transition:.15s; transform:translateX(0);}
.mood:hover .mood-go{color:var(--voz-600); transform:translateX(3px);}
.sincro-cta{margin-top:42px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.sincro-cta .lead{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(20px,2.4vw,30px); color:var(--noche-980); max-width:26ch; margin:0;}

/* =================== CREADORES (dualidad) =================== */
.creadores{display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; margin-top:84px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:54px;}
.cr{padding:6px 4px;}
.cr-razon{text-align:right;}
.cr-k{font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul-300); display:block;}
.cr-k.aire{color:var(--accent-live);}
.cr h3{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.2vw,42px); color:#fff; margin:12px 0 10px; line-height:1;}
.cr .cr-role{font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--noche-200); margin:0 0 10px;}
.cr .cr-d{font-size:15px; line-height:1.6; color:var(--noche-400); font-weight:300; margin:0; max-width:34ch;}
.cr-razon .cr-d{margin-left:auto;}
.cr-union{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; padding:0 8px;}
.cr-union span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--noche-500); text-align:center; font-weight:700; line-height:1.5;}

/* =================== FOOTER / CONTACTO =================== */
footer{background:var(--noche-980); padding:84px 0 150px; border-top:1px solid rgba(255,255,255,.12); position:relative;}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px;}
.foot-top .lead3{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3vw,40px); color:#fff; line-height:1.1; margin:0; text-wrap:balance;}
.foot-top .lead3 em{font-style:italic;}
.foot-col h5{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--noche-400); margin:0 0 16px; font-weight:700;}
.foot-col a{display:block; color:var(--noche-100); font-size:15px; padding:6px 0; cursor:pointer; transition:.15s; width:fit-content;}
.foot-col a:hover{color:var(--accent-live);}
.foot-bot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center;
  border-top:1px solid rgba(255,255,255,.1); padding-top:26px;}
.foot-bot .brand .w1{font-size:17px;}
.foot-bot .brand .w2{font-size:17px;}
.foot-bot small{font-size:12px; color:var(--noche-400);}

/* =================== PLAYER BAR (teaser) =================== */
.pbar{position:fixed; left:0; right:0; bottom:0; z-index:80; transform:translateY(125%);
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
  background:rgba(18,18,20,.92); backdrop-filter:blur(18px); border-top:1px solid rgba(255,255,255,.12);}
.pbar.show{transform:translateY(0);}
.pbar .in{max-width:1320px; margin:0 auto; padding:11px 32px; display:flex; align-items:center; gap:18px;}
.pbar .pp{width:46px; height:46px; border-radius:50%; background:var(--accent-live); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-voz); transition:transform .12s;}
.pbar .pp:hover{transform:scale(1.06);}
.pbar .art{width:48px; height:48px; border-radius:3px; background:var(--grad-duotono); flex:none; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-end; padding:4px;}
.pbar .art .cn{font-family:var(--font-display); font-weight:600; font-size:15px; color:rgba(255,255,255,.95); line-height:1;}
.pbar .meta{min-width:170px; max-width:230px;}
.pbar .meta b{font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; display:block; line-height:1.12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbar .meta span{font-weight:600; font-size:11px; color:var(--noche-300); display:flex; align-items:center; gap:7px;}
.pbar .meta .soon-mini{color:var(--accent-live); letter-spacing:.06em; text-transform:uppercase; font-weight:700; font-size:10px;}
.pbar .prog{flex:1; display:flex; align-items:center; gap:14px; min-width:0;}
.pbar .wave{flex:1; display:flex; align-items:center; gap:2px; height:30px; overflow:hidden;}
.pbar .wave i{width:3px; flex:none; border-radius:1px; background:var(--noche-700); transition:background .12s;}
.pbar .wave i.on{background:var(--azul-400);}
.pbar .t{font-weight:600; font-size:12px; color:var(--noche-200); font-variant-numeric:tabular-nums; white-space:nowrap;}
.pbar .avisar{flex:none;}
.pbar .close{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--noche-300); transition:.15s;}
.pbar .close:hover{color:#fff; background:rgba(255,255,255,.08);}

/* entrada suave de secciones */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ====== TEXTURAS / FONDOS DEL SISTEMA (sutil) ====== */
#escucha::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 42% at 12% 0%, rgba(0,7,255,.09), transparent 58%), radial-gradient(58% 42% at 92% 4%, rgba(255,60,20,.07), transparent 58%);}
#escucha .wrap{position:relative; z-index:1;}
#galeria::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("assets/patterns/patron-puntos.svg") repeat; background-size:264px auto; opacity:.75;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);}
#galeria .wrap{position:relative; z-index:1; background:var(--noche-980); padding:52px 56px; border-radius:var(--r-lg);}
#galeria .gal-grid, #galeria .sec-head, #galeria .gal-credit{position:relative;}

.creadores::before{content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%); z-index:0; pointer-events:none;
  width:720px; max-width:100%; height:360px; opacity:.10;
  background:url("assets/patterns/patron-vesica.svg") center top no-repeat; background-size:contain;}
.creadores>*{position:relative; z-index:1;}

.avisame::after{content:""; position:absolute; right:-50px; top:50%; transform:translateY(-50%);
  width:360px; height:360px; z-index:0; pointer-events:none; opacity:.18;
  background:url("assets/patterns/patron-eclipse.svg") center/contain no-repeat;}
.avisame .in{position:relative; z-index:2;}

/* divisor lunar (patron-fases) */
.fase-orn{width:300px; max-width:64%; height:26px; margin:46px auto; opacity:.5;
  background:url("assets/patterns/patron-fases.svg") center/contain no-repeat;}
.tracks + .fase-orn{margin:54px auto 40px;}
footer .fase-orn{margin:0 auto 56px; opacity:.4;}

/* ====== APARICIÓN AL SCROLL (scroll-driven CSS, con fallback seguro) ====== */
@keyframes revealUp{ from{opacity:0; transform:translateY(34px);} to{opacity:1; transform:none;} }
@keyframes revealItem{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@supports (animation-timeline: view()){
  .sec-head{ animation:revealUp both linear; animation-timeline:view(); animation-range:entry 0% entry 24%; }
  .track,.card,.mood,.cr,.cr-union,.gal-cell,.nofechas,.bio .ph,.directo-grid .ph,.directo-grid>div:last-child,.avisame,.sincro-intro,.pillars-mini{
    animation:revealItem both linear; animation-timeline:view(); animation-range:entry 4% entry 30%; }
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important; transition:none;}}

/* =================== RESPONSIVE =================== */
@media(max-width:1000px){
  .avisame .in{grid-template-columns:1fr; gap:30px;}
  .directo-grid{grid-template-columns:1fr; gap:34px;}
  .directo-grid .ph{aspect-ratio:16/9;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .foot-top .lead3{grid-column:1 / -1;}
}
@media(max-width:860px){
  .wrap{padding:0 22px;}
  .nav{padding:0 22px;}
  .nav .links{display:none;}
  .bio{grid-template-columns:1fr; gap:30px;}
  .pillars{grid-template-columns:1fr;}
  .grid-tracks{grid-template-columns:repeat(2,1fr);}
  .gal-grid{column-count:2;}
  .moods{grid-template-columns:1fr;}
  .creadores{grid-template-columns:1fr; gap:32px; text-align:left;}
  .cr-razon{text-align:left;}
  .cr-razon .cr-d{margin-left:0;}
  .cr-union{flex-direction:row; gap:18px;}
  .pbar .meta{min-width:120px;}
  .pbar .avisar{display:none;}
  section{padding:76px 0;}
  .track{grid-template-columns:26px 40px 1fr auto; gap:14px;}
}
@media(max-width:700px){
  .hero-slides .hbg{object-position:center 22%;}
}
@media(max-width:560px){
  .grid-tracks{grid-template-columns:1fr;}
  .gal-grid{column-count:1;}
  .hero .cta .ph-note{display:none;}
  .pbar .wave{display:none;}
  .track .dur{display:none;}

  /* --- Nav: hamburguesa + panel; libera ancho del header --- */
  .nav{gap:10px; padding:0 14px;}
  .nav .avisame-btn{display:none;}        /* el CTA pasa al panel móvil */
  .burger{display:flex;}
  .brand .w1,.brand .w2{font-size:16px;}  /* mantener "RAZONES en el Aire" completo */
  .brand .w2{letter-spacing:.12em;}
  .brand img{width:28px; height:28px;}
  .lang-switch button{padding:6px 10px; font-size:11px;}
  .mobile-menu{display:flex; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(13,13,15,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.10);
    max-height:0; overflow:hidden; transition:max-height .26s ease; z-index:59;}
  .mobile-menu.open{max-height:85vh;}
  .mobile-menu a{color:#fff; font-weight:600; font-size:16px; padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer;}
  .mobile-menu .mm-cta{margin:16px 20px 22px; align-self:stretch; justify-content:center;}

  /* --- Ancho útil + ritmo --- */
  .wrap{padding:0 16px;}
  section{padding:64px 0;}

  /* --- Cabeceras: apilar para que el meta nowrap no desborde --- */
  .sec-head{flex-direction:column; align-items:flex-start; gap:10px; padding-bottom:16px; margin-bottom:34px;}
  .sec-head .meta{white-space:normal; text-align:left;}

  /* --- Player bar: que quepa en 320px --- */
  .pbar .in{padding:9px 14px; gap:10px;}
  .pbar .art{display:none;}
  .pbar .prog{display:none;}
  .pbar .meta{min-width:0; max-width:none; flex:1;}
  .pbar .close{width:44px; height:44px;}

  /* --- Repertorio (lista): columna que encoge + título ellipsis + chips wrap --- */
  .track{grid-template-columns:24px 40px minmax(0,1fr) auto; gap:10px; padding:16px 4px;}
  .track .tt{min-width:0;}
  .track .tt b{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .track .plats{flex-wrap:wrap; gap:6px;}
  .track:hover .plats,.track.active .plats{max-height:none;}
  .track .tags .soon,.track .tags .fmt{font-size:9px; padding:4px 7px; letter-spacing:.08em;}

  /* --- Creadores: apilar + permitir partir nombres largos --- */
  .cr-union{flex-direction:column; gap:10px;}
  .cr h3{overflow-wrap:break-word; word-break:break-word;}

  /* --- Footer: 1 columna + enlaces sin desbordar + tap target --- */
  .foot-top{grid-template-columns:1fr; gap:28px; margin-bottom:44px;}
  footer{padding:60px 0 120px;}
  .foot-col a{width:auto; overflow-wrap:anywhere; padding:11px 0;}

  /* --- Tap targets ≥44px --- */
  .btn{min-height:44px;}
  .btn-sm{min-height:44px; padding:12px 16px;}
  .directo-foot{overflow-wrap:anywhere;}
}
@media(max-width:360px){
  .wrap{padding:0 13px;}
  .nav{gap:8px; padding:0 12px;}
  .brand .w1,.brand .w2{font-size:15px;}
  .bio .pillars-mini{gap:18px;}
}