/* =========================================================
   MARÍA ALEJANDRA FLORES — LA VOZ DEL ORINOCO
   Sistema visual "RÍO DE LUZ"
   ---------------------------------------------------------
   La información y la paleta son las mismas del sitio actual.
   Lo que cambia es la forma de presentarla: profundidad,
   capas, 3D y movimiento.
   ========================================================= */

:root{
  /* ---- PALETA ORIGINAL (no se toca) ---- */
  --verde:        #1C2313;
  --dorado:       #B6842E;
  --texto:        #F9F9F9;
  --blanco:       #FCFCFC;
  --dorado-claro: #FFE3B1;
  --oliva:        #3A3203;

  /* ---- Profundidades derivadas de la misma paleta ---- */
  --verde-hondo:  #0C1008;
  --verde-medio:  #141A0E;
  --verde-alto:   #26311A;
  --dorado-hondo: #7C5A1E;

  /* ---- Tipografías originales ---- */
  --f-serif:  "Libre Baskerville", Georgia, serif;
  --f-script: "Great Vibes", cursive;
  --f-menu:   "Poppins", sans-serif;
  --f-btn:    "Work Sans", sans-serif;

  /* ---- Medidas ---- */
  --ancho:    1200px;
  --ancho-sm: 1140px;
  --ancho-lg: 1420px;

  /* ---- TAMAÑOS UNIFICADOS (corrección 2, se mantiene) ---- */
  --fs-titulo:   clamp(27px, 3.2vw, 38px);
  --lh-titulo:   1.21;
  --fs-subtexto: 16px;
  --lh-subtexto: 24px;

  --radio: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 68px;
}

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:var(--header-h);}
@supports (overflow-x: clip){html{overflow-x:clip;}}
body{
  margin:0;
  background:var(--verde);
  color:var(--texto);
  font-family:var(--f-serif);
  font-size:var(--fs-subtexto);
  line-height:var(--lh-subtexto);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@supports (overflow-x: clip){body{overflow-x:clip;}}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul{margin:0;}
ul{padding-left:1.2em;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--dorado);color:var(--verde-hondo);}

.container{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px;}
.container-sm{width:100%;max-width:var(--ancho-sm);margin:0 auto;padding:0 24px;}
.container-lg{width:100%;max-width:var(--ancho-lg);margin:0 auto;padding:0 24px;}
.center{text-align:center;}
.center-block{display:flex;justify-content:center;}
.hide-mobile{display:block;}
.show-mobile-only{display:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ===================== FONDO VIVO ===================== */
/* Capas fijas detrás de todo: degradado profundo + auroras + grano */
.fondo-vivo{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(120% 80% at 50% -10%, #26311A 0%, var(--verde) 42%, var(--verde-hondo) 100%);}
.fondo-vivo::before,
.fondo-vivo::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;
  will-change:transform;
}
.fondo-vivo::before{
  width:52vw;height:52vw;left:-12vw;top:8vh;
  background:radial-gradient(circle, rgba(182,132,46,.55), transparent 65%);
  animation:derivaA 26s ease-in-out infinite alternate;
}
.fondo-vivo::after{
  width:46vw;height:46vw;right:-10vw;bottom:2vh;
  background:radial-gradient(circle, rgba(58,50,3,.85), transparent 65%);
  animation:derivaB 32s ease-in-out infinite alternate;
}
@keyframes derivaA{to{transform:translate3d(10vw,-6vh,0) scale(1.15);}}
@keyframes derivaB{to{transform:translate3d(-8vw,5vh,0) scale(1.1);}}

.grano{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.055;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:granoMov .9s steps(3) infinite;
}
@keyframes granoMov{
  0%{background-position:0 0}33%{background-position:-40px 26px}66%{background-position:32px -38px}100%{background-position:0 0}
}

/* ===================== PRELOADER ===================== */
.preload{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--verde-hondo);
  transition:opacity .7s var(--ease), visibility .7s;
}
.preload.fuera{opacity:0;visibility:hidden;}
.preload-in{display:flex;flex-direction:column;align-items:center;gap:22px;}
.preload-logo{width:120px;filter:drop-shadow(0 0 26px rgba(182,132,46,.5));animation:latido 2.4s ease-in-out infinite;}
@keyframes latido{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.preload-txt{font-family:var(--f-script);font-size:30px;color:var(--dorado-claro);letter-spacing:.02em;}
.preload-barra{width:180px;height:1px;background:rgba(249,249,249,.18);overflow:hidden;}
.preload-barra i{display:block;height:100%;width:40%;background:var(--dorado);animation:barra 1.15s var(--ease) infinite;}
@keyframes barra{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(20,26,14,.55);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid rgba(182,132,46,.22);
  padding-top:env(safe-area-inset-top, 0px);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease);
}
.site-header.solido{background:rgba(12,16,8,.88);border-bottom-color:rgba(182,132,46,.4);}
.site-header.oculto{transform:translateY(-100%);}
.barra-scroll{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--dorado-hondo),var(--dorado),var(--dorado-claro));
  box-shadow:0 0 12px rgba(182,132,46,.8);transition:width .1s linear;}
.header-inner{display:flex;align-items:center;gap:18px;min-height:var(--header-h);}

.marca{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.marca img{width:34px;filter:drop-shadow(0 0 10px rgba(182,132,46,.45));transition:transform .5s var(--ease);}
.marca:hover img{transform:rotate(-6deg) scale(1.08);}
.marca span{font-family:var(--f-script);font-size:19px;color:var(--dorado-claro);white-space:nowrap;}

.main-nav{flex:1 1 auto;}
.nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:clamp(10px,1.8vw,26px);
}
.nav-list > li{position:relative;flex:0 0 auto;}
.nav-item{
  display:block;padding:12px 0;
  font-family:var(--f-serif);
  font-size:clamp(11px,1.1vw,14px);font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto);position:relative;white-space:nowrap;
  transition:color .3s;
}
.nav-item::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:var(--dorado);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-item:hover,.nav-item.is-active{color:var(--dorado-claro);}
.nav-item:hover::after,.nav-item.is-active::after{transform:scaleX(1);}
.caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .3s;}
.has-submenu:hover .caret{transform:rotate(180deg);}

.submenu{
  list-style:none;margin:0;padding:6px;
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px) rotateX(-12deg);
  transform-origin:top center;
  min-width:260px;
  background:rgba(12,16,8,.96);
  border:1px solid rgba(182,132,46,.35);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  z-index:30;
}
.has-submenu:hover .submenu,
.has-submenu.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) rotateX(0);}
.submenu a{
  display:block;padding:11px 16px;
  font-family:var(--f-menu);font-weight:500;font-size:14px;color:var(--texto);
  border-left:2px solid transparent;
  transition:background .25s,color .25s,border-color .25s,padding-left .25s;
}
.submenu a:hover{background:rgba(182,132,46,.16);color:var(--dorado-claro);border-left-color:var(--dorado);padding-left:22px;}

.btn-indice{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-btn);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dorado-claro);
  border:1px solid rgba(182,132,46,.45);padding:9px 14px;
  transition:background .3s,color .3s,box-shadow .3s;
}
.btn-indice:hover{background:var(--dorado);color:var(--verde-hondo);box-shadow:0 0 22px rgba(182,132,46,.45);}
.btn-indice i{display:block;width:13px;height:9px;position:relative;}
.btn-indice i::before,.btn-indice i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;}
.btn-indice i::before{top:0;}.btn-indice i::after{bottom:0;}

.nav-toggle{display:none;width:42px;height:34px;position:relative;flex:0 0 auto;}
.nav-toggle span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--texto);transition:transform .35s var(--ease),opacity .25s;}
.nav-toggle span:nth-child(1){top:10px;}
.nav-toggle span:nth-child(2){top:16px;}
.nav-toggle span:nth-child(3){top:22px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===================== ÍNDICE GENERAL (overlay 3D) ===================== */
.indice{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:rgba(8,11,6,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;padding:90px 0 60px;
}
.indice.abierto{opacity:1;visibility:visible;}
.indice-cerrar{position:fixed;top:18px;right:20px;width:46px;height:46px;border:1px solid rgba(182,132,46,.45);
  display:grid;place-items:center;color:var(--dorado-claro);font-size:26px;line-height:1;transition:background .3s,transform .3s;z-index:2;}
.indice-cerrar:hover{background:var(--dorado);color:var(--verde-hondo);transform:rotate(90deg);}
.indice-titulo{text-align:center;font-family:var(--f-script);font-size:40px;color:var(--dorado-claro);margin-bottom:6px;}
.indice-sub{text-align:center;font-family:var(--f-btn);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(249,249,249,.55);margin-bottom:34px;}
.indice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;perspective:1100px;}
.indice-card{
  display:block;padding:20px 20px 22px;
  background:linear-gradient(160deg, rgba(38,49,26,.9), rgba(12,16,8,.9));
  border:1px solid rgba(182,132,46,.28);
  transform:translateY(26px) rotateX(10deg);opacity:0;
  transition:transform .6s var(--ease-out),opacity .6s var(--ease-out),border-color .3s,box-shadow .3s;
}
.indice.abierto .indice-card{transform:none;opacity:1;}
.indice-card:hover{border-color:var(--dorado);box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 0 1px rgba(182,132,46,.25) inset;}
.indice-card h3{font-family:var(--f-serif);font-size:17px;color:var(--dorado-claro);margin-bottom:8px;letter-spacing:.02em;}
.indice-card ul{list-style:none;padding:0;margin:0;}
.indice-card li{font-family:var(--f-menu);font-size:13px;color:rgba(249,249,249,.72);padding:4px 0 4px 15px;position:relative;transition:color .25s,padding-left .25s;}
.indice-card li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;background:var(--dorado);transform:rotate(45deg);}
.indice-card li:hover{color:var(--dorado-claro);padding-left:20px;}

/* ===================== TIPOGRAFÍA COMÚN ===================== */
.h-gold, .section-title, .titulo-linea, .genero-title, .footer-follow, .album-titulo{
  font-family:var(--f-serif);
  font-size:var(--fs-titulo);
  line-height:var(--lh-titulo);
  font-weight:700;
}
.h-gold{color:var(--dorado);}
.section-title{
  color:var(--blanco);text-align:center;margin-bottom:14px;
  text-shadow:0 2px 30px rgba(182,132,46,.25);
}
.eyebrow{
  display:block;text-align:center;font-family:var(--f-btn);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dorado);margin-bottom:14px;
}
.rich p,.rich li,.texto-centrado,.eco-text,.genero-text,.hero-text{
  font-size:var(--fs-subtexto);line-height:var(--lh-subtexto);
  overflow-wrap:break-word;
}
.rich p + p{margin-top:14px;}
.rich ul{padding-left:0;list-style:none;}
.rich li{position:relative;padding-left:22px;margin-bottom:10px;}
.rich li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  background:var(--dorado);transform:rotate(45deg);
  box-shadow:0 0 10px rgba(182,132,46,.7);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.rich li:hover::before{transform:rotate(135deg) scale(1.25);box-shadow:0 0 16px rgba(182,132,46,1);}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--dorado),transparent);margin:18px 0;}
.divider-hero{max-width:260px;}
.divider-voz{max-width:320px;}

.lineadoble{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 30px;max-width:520px;}
.lineadoble::before,.lineadoble::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(182,132,46,.8));}
.lineadoble::after{background:linear-gradient(270deg,transparent,rgba(182,132,46,.8));}
.lineadoble i{color:var(--dorado);font-style:normal;font-size:13px;}

/* ===================== BOTÓN ===================== */
.btn{
  display:inline-block;position:relative;isolation:isolate;
  border:1px solid var(--dorado);
  padding:0;overflow:hidden;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
  transform-style:preserve-3d;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--dorado-hondo),var(--dorado),var(--dorado-claro));
  transform:translateY(101%);transition:transform .45s var(--ease-out);
}
.btn:hover::before{transform:translateY(0);}
.btn:hover{box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 26px rgba(182,132,46,.35);transform:translateY(-2px);}
.btn-inner{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;transition:color .35s;}
.btn:hover .btn-inner{color:var(--verde-hondo);}
.btn-text{font-family:var(--f-btn);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.btn-icon{display:inline-flex;}
.btn-icon svg{width:15px;height:15px;fill:currentColor;transition:transform .4s var(--ease);}
.btn:hover .btn-icon svg{transform:translateX(3px) scale(1.1);}

/* ===================== REVEALS ===================== */
.con-js [data-rev]{opacity:0;will-change:transform,opacity;}
.con-js [data-rev="up"]{transform:translate3d(0,42px,0);}
.con-js [data-rev="right"]{transform:translate3d(-22px,0,0);}
.con-js [data-rev="left"]{transform:translate3d(22px,0,0);}
.con-js [data-rev="zoom"]{transform:scale(.88);}
.con-js [data-rev="flip"]{transform:perspective(1200px) rotateX(9deg) translate3d(0,40px,0);transform-origin:50% 100%;}
.con-js [data-rev].visto{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.linea-txt{display:block;overflow:hidden;}
.con-js .linea-txt > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease-out);transition-delay:var(--d,0ms);}
.visto .linea-txt > span,.linea-txt.visto > span{transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  [data-rev]{opacity:1 !important;transform:none !important;}
  .linea-txt > span{transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ===================== HERO WEBGL ===================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 80px;
  overflow:hidden;
}
#rioCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 58% at 20% 52%, rgba(12,16,8,.78) 0%, rgba(12,16,8,.25) 62%, transparent 78%),
    radial-gradient(46% 34% at 62% 44%, rgba(182,132,46,.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(12,16,8,.6) 0%, transparent 22%, transparent 66%, var(--verde) 100%);
}
.hero-inner{
  position:relative;z-index:2;perspective:1200px;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,60px);align-items:center;
}
.hero-copy{max-width:640px;transform-style:preserve-3d;}
.hero-foto{
  display:block;width:100%;max-width:400px;justify-self:end;
  transform-style:preserve-3d;
  border-color:rgba(182,132,46,.55);
  box-shadow:0 28px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(182,132,46,.16), 0 0 70px rgba(182,132,46,.16);
}
.hero-foto img{width:100%;height:auto;display:block;}
.hero-name,.hero-surname{
  font-family:var(--f-serif);font-weight:400;color:var(--blanco);
  line-height:.98;letter-spacing:-.01em;
}
.hero-name{font-size:clamp(34px,6.4vw,74px);}
.hero-surname{
  font-size:clamp(46px,9vw,112px);font-weight:700;
  background:linear-gradient(100deg,var(--dorado-claro) 0%,var(--dorado) 42%,#FFF1D4 62%,var(--dorado-hondo) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo 7s linear infinite;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
@keyframes brillo{0%{background-position:0% 0}100%{background-position:200% 0}}
.hero-kicker{
  margin-top:16px;font-family:var(--f-btn);font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.42em;text-transform:uppercase;color:var(--dorado);
}
.hero-tagline{font-family:var(--f-script);font-size:clamp(30px,4.6vw,48px);color:var(--dorado-claro);line-height:1.1;}
.hero-text{margin-top:14px;color:rgba(249,249,249,.88);max-width:430px;}
.hero-cta{margin-top:30px;}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--f-btn);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(249,249,249,.5);
}
.hero-scroll i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--dorado),transparent);position:relative;overflow:hidden;}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:var(--dorado-claro);animation:bajar 2.1s var(--ease) infinite;}
@keyframes bajar{0%{transform:translateY(0)}100%{transform:translateY(92px)}}

/* ===================== PANELES PARALLAX (bandas) ===================== */
.panel{position:relative;overflow:hidden;isolation:isolate;}
.panel-media{position:absolute;inset:-12% 0;z-index:-1;}
.panel-media img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.banda{position:relative;overflow:hidden;}
.banda img{width:100%;display:block;will-change:transform;}
.banda img[data-par]{transform:scale(1.16);}
.banda::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--verde) 0%,transparent 16%,transparent 84%,var(--verde) 100%);
}


/* ===================== ECO ===================== */
.eco{padding:clamp(70px,10vw,130px) 0;}
.eco-card{
  position:relative;max-width:900px;margin:0 auto;text-align:center;
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,54px);
  background:linear-gradient(155deg, rgba(38,49,26,.72), rgba(12,16,8,.72));
  border:1px solid rgba(182,132,46,.3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 34px 80px rgba(0,0,0,.45);
  transform-style:preserve-3d;
}
.eco-card::before,.eco-card::after{
  content:"";position:absolute;width:26px;height:26px;border:1px solid var(--dorado);
}
.eco-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.eco-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.eco-title{font-family:var(--f-serif);font-size:var(--fs-titulo);line-height:var(--lh-titulo);color:var(--dorado-claro);font-weight:700;}
.eco-text{margin-top:16px;color:rgba(249,249,249,.88);}

/* ===================== VOZ (video tonina de fondo) ===================== */
/* La animación es una escena ancha: el medallón queda a la izquierda y el
   texto ocupa el espacio libre de la derecha, como está compuesta. */
.voz{
  position:relative;min-height:clamp(430px,45vw,660px);
  display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  background:var(--oliva);
}
.voz-media{position:absolute;inset:0;z-index:-2;}
.voz-media img,.voz-media video{width:100%;height:100%;object-fit:cover;object-position:center;}
.voz-media video{position:absolute;inset:0;}
.voz::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(12,16,8,.18) 0%, rgba(12,16,8,.06) 34%, rgba(12,16,8,.52) 58%, rgba(12,16,8,.80) 100%),
    linear-gradient(180deg, rgba(12,16,8,.45), transparent 26%, transparent 74%, rgba(12,16,8,.5));
}
.voz-inner{width:100%;max-width:var(--ancho-lg);margin:0 auto;padding:60px 24px;display:flex;}
.voz-copy{
  position:relative;z-index:1;
  margin-left:auto;width:min(520px,50%);
  transform-style:preserve-3d;
}
.voz-copy .h-gold{color:var(--dorado-claro);text-shadow:0 4px 40px rgba(0,0,0,.85);}
.voz-copy .rich p{color:rgba(249,249,249,.95);text-shadow:0 2px 22px rgba(0,0,0,.9);}
.voz-marco{position:absolute;inset:26px;border:1px solid rgba(182,132,46,.35);pointer-events:none;z-index:0;}
.voz-marco::before,.voz-marco::after{content:"";position:absolute;background:var(--dorado);}
.voz-marco::before{left:50%;top:-1px;width:70px;height:1px;transform:translateX(-50%);box-shadow:0 0 14px var(--dorado);}
.voz-marco::after{left:50%;bottom:-1px;width:70px;height:1px;transform:translateX(-50%);box-shadow:0 0 14px var(--dorado);}

/* ===================== BIO ===================== */
.bio{padding:clamp(70px,10vw,140px) 0;position:relative;}
.bio-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,70px);align-items:start;}
.bio-head{display:flex;align-items:center;gap:20px;margin-bottom:24px;}
.bio-sun{flex:0 0 auto;width:clamp(64px,8vw,104px);}
.bio-sun img{animation:girar 44s linear infinite;filter:drop-shadow(0 0 26px rgba(182,132,46,.55));}
@keyframes girar{to{transform:rotate(360deg);}}
.bio-head-title .h-gold{margin:0;}
.bio-texto{position:relative;padding-left:22px;}
.bio-texto::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,var(--dorado),rgba(182,132,46,.05));
}
.bio-texto .rich p{color:rgba(249,249,249,.85);}
.bio-texto .rich p.destaca{
  font-family:var(--f-serif);font-weight:700;color:var(--dorado-claro);
  font-size:var(--fs-subtexto);line-height:var(--lh-subtexto);letter-spacing:.04em;text-transform:uppercase;
  margin-top:26px;
}
.bio-texto .rich p.cita{
  font-style:italic;color:var(--dorado-claro);border-left:2px solid var(--dorado);
  padding:4px 0 4px 18px;margin-top:18px;
}

.bio-gallery{perspective:1300px;}
.bio-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;transform-style:preserve-3d;}
.bio-cell{
  position:relative;overflow:hidden;border:1px solid rgba(182,132,46,.28);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  transform-style:preserve-3d;
}
.bio-cell img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .6s;}
.bio-cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(182,132,46,.22),transparent 45%);
  opacity:0;transition:opacity .5s;
}
.bio-cell:hover img{transform:scale(1.07);}
.bio-cell:hover::after{opacity:1;}
.bio-stack > .bio-cell:nth-child(1){grid-column:1;grid-row:1 / span 2;}
.bio-stack > .bio-cell:nth-child(2){grid-column:2;grid-row:1;aspect-ratio:1/1;}
.bio-stack > .bio-cell:nth-child(3){grid-column:2;grid-row:2;aspect-ratio:4/3;}

/* ============ ACADEMIA LATINA DE LA GRABACIÓN ============ */

/* ===================== TRAYECTORIA (tarjetas 3D) ===================== */
.tray{padding:clamp(60px,9vw,120px) 0;}
.tray-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;}
.tray-col{display:flex;flex-direction:column;gap:20px;min-width:0;}
.tarjeta{
  position:relative;padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(165deg, rgba(38,49,26,.62), rgba(12,16,8,.78));
  border:1px solid rgba(182,132,46,.24);
  box-shadow:0 26px 60px rgba(0,0,0,.4);
  transform-style:preserve-3d;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
  height:100%;
}
.tarjeta:hover{border-color:rgba(182,132,46,.6);box-shadow:0 34px 80px rgba(0,0,0,.55),0 0 40px rgba(182,132,46,.12);}
.tarjeta .h-gold{text-align:center;margin-bottom:6px;hyphens:auto;}
.tarjeta .lineadoble{margin-bottom:22px;}
.tray-img{margin-top:24px;overflow:hidden;border:1px solid rgba(182,132,46,.25);}
.tray-img img{width:100%;transition:transform 1.1s var(--ease-out);}
.tray-img:hover img{transform:scale(1.06);}

/* ===================== GÉNEROS (círculo con un solo aro dorado) ===================== */
.generos{padding:clamp(60px,9vw,120px) 0;}
.generos-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px;perspective:1400px;
}
.genero-card{
  position:relative;text-align:center;padding:42px 22px 34px;
  background:linear-gradient(170deg, var(--card-bg, var(--verde-alto)) 0%, rgba(12,16,8,.92) 110%);
  border:1px solid rgba(182,132,46,.22);
  transform-style:preserve-3d;overflow:hidden;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.genero-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(60% 50% at 50% 0%, rgba(182,132,46,.28), transparent 70%);
}
.genero-card:hover{border-color:rgba(182,132,46,.65);box-shadow:0 30px 70px rgba(0,0,0,.55);}
.genero-card:hover::before{opacity:1;}
.genero-img{
  position:relative;width:clamp(120px,14vw,168px);aspect-ratio:1;margin:0 auto 26px;
  border-radius:50%;overflow:hidden;
  border:2px solid var(--dorado);           /* UN SOLO ARO DORADO */
  box-shadow:0 0 0 0 rgba(182,132,46,.5),0 18px 40px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.genero-card:hover .genero-img{transform:translateZ(38px) scale(1.04);box-shadow:0 0 30px 3px rgba(182,132,46,.35),0 26px 50px rgba(0,0,0,.6);}
.genero-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);}
.genero-card:hover .genero-img img{transform:scale(1.1);}
.genero-title{color:var(--blanco);margin-bottom:12px;hyphens:auto;min-height:2.42em;}
.genero-text{color:rgba(249,249,249,.8);}

/* ===================== VIDEOS ===================== */
.videos{padding:clamp(60px,9vw,120px) 0;}
.videos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px;perspective:1500px;}
.video-card{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(182,132,46,.3);
  background:linear-gradient(150deg,var(--verde-alto),var(--verde-hondo));
  transform-style:preserve-3d;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  transition:border-color .4s,box-shadow .4s;
}
.video-card:hover{border-color:var(--dorado);box-shadow:0 34px 76px rgba(0,0,0,.6),0 0 34px rgba(182,132,46,.18);}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-facade{
  position:absolute;inset:0;display:grid;place-items:center;gap:0;cursor:pointer;width:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.yt-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.video-facade::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(182,132,46,.18), transparent 70%),
    linear-gradient(0deg, rgba(12,16,8,.88) 0%, rgba(12,16,8,.42) 55%, rgba(12,16,8,.5) 100%),
    repeating-linear-gradient(115deg, rgba(249,249,249,.028) 0 2px, transparent 2px 9px);
  transition:opacity .5s;
}
.video-card:hover .video-facade::before{opacity:.82;}
.play{
  position:relative;z-index:2;width:74px;height:74px;border-radius:50%;
  border:1px solid var(--dorado);display:grid;place-items:center;
  transition:transform .5s var(--ease),background .4s,box-shadow .5s;
}
.play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid var(--dorado-claro);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  transition:border-left-color .4s;
}
.play::before{
  content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(182,132,46,.3);
  animation:pulso 2.6s var(--ease) infinite;
}
@keyframes pulso{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.video-card:hover .play{transform:scale(1.1) translateZ(30px);background:var(--dorado);box-shadow:0 0 40px rgba(182,132,46,.5);}
.video-card:hover .play::after{border-left-color:var(--verde-hondo);}
.video-nombre{
  position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 18px;
  font-family:var(--f-btn);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dorado-claro);text-align:left;
  background:linear-gradient(0deg, rgba(12,16,8,.9), transparent);
}

/* ===================== FRASE / MONTAÑA ===================== */
.montana{margin-top:56px;}
.montana img{max-width:min(760px,100%);opacity:.9;}
.montana-linea{display:flex;justify-content:center;margin-top:60px;}
.montana-linea img{max-width:min(620px,100%);opacity:.85;}

/* ===================== PÁGINAS INTERNAS ===================== */
.pagina{padding:calc(var(--header-h) + clamp(50px,7vw,90px)) 0 clamp(60px,9vw,110px);}
.titulo-linea{
  text-align:center;color:var(--blanco);margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.rombo{color:var(--dorado);font-size:.52em;display:inline-block;animation:latidoRombo 3.4s ease-in-out infinite;}
@keyframes latidoRombo{0%,100%{transform:rotate(0) scale(1);opacity:.8}50%{transform:rotate(180deg) scale(1.2);opacity:1}}
.subtitulo{
  font-family:var(--f-serif);font-size:var(--fs-titulo);line-height:var(--lh-titulo);
  color:var(--dorado);text-align:center;margin:44px 0 16px;font-weight:700;
}
.subtitulo-nota{
  font-family:var(--f-btn);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dorado);text-align:center;margin:36px 0 12px;
}
.texto-centrado{text-align:center;max-width:820px;margin:0 auto;color:rgba(249,249,249,.87);}
.pagina .rich{max-width:860px;margin:0 auto;color:rgba(249,249,249,.87);}

.lista-datos,.lista-dorada{
  list-style:none;padding:0;max-width:860px;margin:0 auto;
}
.lista-datos li,.lista-dorada li{
  position:relative;padding:15px 18px 15px 46px;margin-bottom:10px;
  background:linear-gradient(120deg, rgba(38,49,26,.48), rgba(12,16,8,.48));
  border:1px solid rgba(182,132,46,.2);
  border-left:2px solid var(--dorado);
  font-size:var(--fs-subtexto);line-height:var(--lh-subtexto);
  transition:transform .45s var(--ease),border-color .35s,background .35s,box-shadow .35s;
}
.lista-datos li::before,.lista-dorada li::before{
  content:"";position:absolute;left:20px;top:22px;width:7px;height:7px;background:var(--dorado);
  transform:rotate(45deg);box-shadow:0 0 10px rgba(182,132,46,.8);transition:transform .45s var(--ease);
}
.lista-datos li:hover,.lista-dorada li:hover{
  transform:translateX(7px);border-color:rgba(182,132,46,.55);
  background:linear-gradient(120deg, rgba(58,50,3,.55), rgba(12,16,8,.55));
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.lista-datos li:hover::before,.lista-dorada li:hover::before{transform:rotate(135deg) scale(1.2);}

.lista-nombres{
  list-style:none;padding:0;margin:34px auto 0;max-width:1000px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
}
.lista-nombres li{
  padding:12px 14px;text-align:center;
  border:1px solid rgba(182,132,46,.22);
  background:rgba(38,49,26,.35);
  font-size:15px;color:rgba(249,249,249,.88);
  transition:transform .4s var(--ease),border-color .35s,color .35s,background .35s;
}
.lista-nombres li:hover{transform:translateY(-4px);border-color:var(--dorado);color:var(--dorado-claro);background:rgba(58,50,3,.5);}

.bloque-img{display:flex;justify-content:center;margin:34px 0;}
.bloque-img-doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;max-width:900px;margin:34px auto;align-items:start;}
.marco-img{
  display:block;position:relative;overflow:hidden;
  border:1px solid rgba(182,132,46,.3);box-shadow:0 24px 54px rgba(0,0,0,.45);
  transform-style:preserve-3d;
}
.marco-img img{width:100%;transition:transform 1.1s var(--ease-out);}
.marco-img:hover img{transform:scale(1.06);}
.marco-img::after{
  content:"⤢";position:absolute;right:12px;bottom:10px;
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--verde-hondo);background:var(--dorado);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.marco-img:hover::after{opacity:1;transform:none;}

/* Ficha de álbum */
.album{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,4vw,46px);
  align-items:start;max-width:1040px;margin:50px auto 0;perspective:1300px;
}
.album-portada{transform-style:preserve-3d;}
.album-titulo{color:var(--dorado-claro);}
.album-sub{font-family:var(--f-btn);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--dorado);margin-top:6px;}
.album-datos .rich{margin:18px 0 22px;max-width:none;}
.tracks-grid{display:grid;gap:9px;}
.track-card{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border:1px solid rgba(182,132,46,.24);
  background:linear-gradient(110deg, rgba(38,49,26,.5), rgba(12,16,8,.5));
  transition:transform .4s var(--ease),border-color .3s,background .3s,box-shadow .3s;
}
.track-card:hover{transform:translateX(8px);border-color:var(--dorado);background:linear-gradient(110deg, rgba(58,50,3,.6), rgba(12,16,8,.6));box-shadow:0 14px 34px rgba(0,0,0,.4);}
.track-card .num{
  flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(182,132,46,.45);color:var(--dorado);
  font-family:var(--f-btn);font-size:12px;transition:background .3s,color .3s;
}
.track-card:hover .num{background:var(--dorado);color:var(--verde-hondo);}
.track-card span:nth-child(2){flex:1;font-size:15px;}
.track-card .sp{width:19px;height:19px;fill:var(--dorado);flex:0 0 auto;transition:fill .3s,transform .3s;}
.track-card:hover .sp{fill:var(--dorado-claro);transform:scale(1.15);}

.sol-chico{width:clamp(70px,9vw,110px);animation:girar 40s linear infinite;filter:drop-shadow(0 0 22px rgba(182,132,46,.5));}
.galeria-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px auto 0;max-width:1000px;perspective:1200px;}
.galeria-fila .marco-img{aspect-ratio:3/4;}
.galeria-fila .marco-img img{width:100%;height:100%;object-fit:cover;}

/* ===================== GALERÍA (masonry + lightbox) ===================== */
.masonry{columns:3;column-gap:16px;margin-top:40px;}
.masonry-item{
  display:block;break-inside:avoid;margin-bottom:16px;position:relative;overflow:hidden;
  border:1px solid rgba(182,132,46,.22);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
  transform-style:preserve-3d;
  transition:border-color .4s,box-shadow .4s;
}
.masonry-item img{width:100%;transition:transform 1.1s var(--ease-out),filter .6s;}
.masonry-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(160deg,rgba(182,132,46,.25),transparent 55%);
}
.masonry-item:hover{border-color:var(--dorado);box-shadow:0 26px 60px rgba(0,0,0,.6);}
.masonry-item:hover img{transform:scale(1.06);}
.masonry-item:hover::after{opacity:1;}

.lightbox{
  position:fixed;inset:0;z-index:180;display:grid;place-items:center;
  background:rgba(6,9,4,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lightbox.abierto{opacity:1;visibility:visible;}
.lightbox img{
  max-width:88vw;max-height:84vh;object-fit:contain;
  border:1px solid rgba(182,132,46,.4);box-shadow:0 40px 100px rgba(0,0,0,.8);
  transform:scale(.9) rotateX(8deg);transition:transform .5s var(--ease-out);
}
.lightbox.abierto img{transform:none;}
.lb-close,.lb-prev,.lb-next{
  position:absolute;width:52px;height:52px;display:grid;place-items:center;
  color:var(--dorado-claro);border:1px solid rgba(182,132,46,.4);font-size:24px;line-height:1;
  transition:background .3s,color .3s,transform .3s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--dorado);color:var(--verde-hondo);}
.lb-close{top:20px;right:20px;}
.lb-close:hover{transform:rotate(90deg);}
.lb-prev{left:22px;top:50%;transform:translateY(-50%);}
.lb-next{right:22px;top:50%;transform:translateY(-50%);}
.lb-prev:hover{transform:translateY(-50%) translateX(-4px);}
.lb-next:hover{transform:translateY(-50%) translateX(4px);}

/* ===================== FOOTER ===================== */
footer{position:relative;margin-top:clamp(50px,8vw,100px);}
.footer-main{
  padding:clamp(50px,7vw,86px) 0 clamp(40px,5vw,60px);
  background:linear-gradient(180deg, transparent, rgba(12,16,8,.85) 40%, var(--verde-hondo));
  border-top:1px solid rgba(182,132,46,.22);
}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,60px);align-items:center;}
.footer-logo img{width:clamp(130px,16vw,200px);height:auto;filter:drop-shadow(0 0 30px rgba(182,132,46,.35));transition:transform .7s var(--ease);}
.footer-logo:hover img{transform:translateY(-6px) rotate(-3deg);}
.footer-quote{
  margin-top:20px;font-family:var(--f-script);font-size:clamp(22px,2.7vw,30px);line-height:1.35;
  background:linear-gradient(100deg,var(--dorado-claro),var(--dorado),var(--dorado-claro));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo 9s linear infinite;max-width:440px;
}
.footer-right{text-align:right;}
.footer-follow{color:var(--blanco);margin-bottom:22px;}
.social{display:flex;gap:14px;justify-content:flex-end;margin-bottom:28px;perspective:700px;}
.social-icon{
  width:50px;height:50px;display:grid;place-items:center;
  border:1px solid rgba(182,132,46,.4);
  transition:transform .55s var(--ease),background .4s,box-shadow .4s;
  transform-style:preserve-3d;
}
.social-icon svg{width:19px;height:19px;fill:var(--dorado-claro);transition:fill .35s;}
.social-icon:hover{transform:rotateY(180deg);background:var(--dorado);box-shadow:0 0 28px rgba(182,132,46,.45);}
.social-icon:hover svg{fill:var(--verde-hondo);transform:rotateY(180deg);}
.footer-btn-wrap{display:flex;justify-content:flex-end;}
.footer-bottom{background:var(--verde-hondo);padding:20px 0;border-top:1px solid rgba(182,132,46,.16);}
.footer-copy{
  text-align:center;font-family:var(--f-btn);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(249,249,249,.5);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1260px){
  .generos-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tray-grid{grid-template-columns:minmax(0,1fr);}
  .masonry{columns:2;}
}
@media (max-width:1100px){
  .hero-inner{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);}
  .hero-foto{max-width:320px;}
}
@media (max-width:900px){
  :root{--header-h:62px;}
  .hero{padding:calc(var(--header-h) + 28px) 0 124px;}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:clamp(18px,4vw,28px);}
  .hero-copy{max-width:none;}
  .hero-foto{justify-self:center;max-width:min(300px,62vw);}
  .nav-toggle{display:block;}
  .marca span{display:none;}
  .main-nav{position:fixed;top:var(--header-h);left:0;right:0;
    background:rgba(8,11,6,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(182,132,46,.3);
    max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
  .main-nav.abierto{max-height:80vh;overflow-y:auto;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;}
  .nav-list > li{width:100%;border-bottom:1px solid rgba(182,132,46,.12);}
  .nav-item{padding:16px 0;font-size:14px;}
  .nav-item::after{display:none;}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none;
    min-width:0;max-height:0;overflow:hidden;padding:0;transition:max-height .4s var(--ease);}
  .has-submenu.open .submenu{max-height:200px;transform:none;padding-bottom:8px;}
  .has-submenu:hover .submenu{max-height:0;}
  .has-submenu.open:hover .submenu{max-height:200px;}
  .header-inner{justify-content:flex-start;gap:10px;}
  .btn-indice{order:2;margin-left:auto;padding:8px 12px;font-size:10px;}
  .nav-toggle{order:3;}

  /* en el móvil el medallón queda arriba y el texto debajo, sobre el degradado */
  .voz{min-height:clamp(540px,118vw,740px);align-items:flex-end;}
  .voz-inner{padding:0;}
  .voz-copy{width:100%;margin:0;text-align:center;padding:0 22px 44px;}
  .voz-copy .divider{margin-left:auto;margin-right:auto;}
  .voz-media img,.voz-media video{object-position:40% 26%;}
  .voz::before{background:linear-gradient(180deg, rgba(12,16,8,.28) 0%, rgba(12,16,8,.22) 30%, rgba(12,16,8,.88) 58%, rgba(12,16,8,.96) 100%);}
  .voz-marco{inset:14px;}

  .bio-inner{grid-template-columns:1fr;}
  .tray-grid{grid-template-columns:minmax(0,1fr);}
  .album{grid-template-columns:1fr;}
  .album-portada{max-width:340px;margin:0 auto;}
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-right{text-align:center;}
  .social,.footer-btn-wrap{justify-content:center;}
  .footer-quote{margin-left:auto;margin-right:auto;}
  .footer-logo{display:flex;justify-content:center;}
  .videos-grid{grid-template-columns:1fr;}
  .galeria-fila{grid-template-columns:1fr;max-width:480px;}
  .bloque-img-doble{grid-template-columns:1fr;max-width:480px;}
}
@media (max-width:640px){
  :root{--fs-subtexto:15px;--lh-subtexto:23px;}
  .container,.container-sm,.container-lg{padding:0 16px;}
  .tarjeta{padding:22px 16px;}
  .genero-card{padding:34px 16px 28px;}
  .hide-mobile{display:none;}
  .show-mobile-only{display:block;}
  .generos-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto;}
  .masonry{columns:1;}
  .lista-nombres{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .bio-stack{grid-template-columns:1fr;}
  .bio-cell-tall{grid-row:auto;}
  .bio-cell-wide{grid-column:auto;}
  .lb-prev{left:8px;}.lb-next{right:8px;}
  .indice-grid{grid-template-columns:1fr;}
}

@media (max-width:380px){
  .container,.container-sm,.container-lg{padding:0 10px;}
  .tarjeta{padding:20px 10px;}
}