:root{
--content-width:1600px;
--navbar-height:120px;
--character-thumb:80px;
--character-gap:18px;
}


.characters-section{
position:relative;
width:100%;
max-width:950px;
display:flex;
flex-direction:column;
align-items:center;
}

/* HERO */

.lore-hero{

min-height:100vh;
width:100%;

position:relative;

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

background:url('../assets/img/fondobase.png') center/cover no-repeat;

padding-top:var(--navbar-height);
padding-bottom:80px;

overflow-x:hidden;

}

/* CONTENEDOR */

.personalidades-content{

width:min(var(--content-width),92vw);
margin:0 auto;

display:grid;
grid-template-columns:420px 1fr;

gap:clamp(80px,6vw,120px);

align-items:start;

}

/* TEXTO IZQUIERDA */

.personalidades-left{
max-width:420px;
justify-self:end;
z-index:3;
}

.personalidades-left h1{
font-size:clamp(72px,5vw,110px);
line-height:.9;
margin-bottom:28px;
letter-spacing:2px;
}

.personalidades-left p{
font-size:16px;
line-height:1.7;
max-width:380px;
opacity:.9;
}

/* SECCIÓN PERSONAJES */

.characters-section{
position:relative;
width:100%;
max-width:950px;
display:flex;
flex-direction:column;
align-items:center;
}

/* STAGE */

.characters-stage{

position:relative;

width:100%;

min-height:clamp(520px,60vh,720px);

display:flex;
align-items:flex-end;
justify-content:center;

}

/* PERSONAJE */

.character{
position:absolute;
inset:0;
opacity:1;
transform:translateX(0);
transition:
opacity .35s ease,
transform .35s ease;
}

/* ANIMACIONES */

.character.slide-left{
transform:translateX(-120px);
opacity:0;
}

.character.slide-right{
transform:translateX(120px);
opacity:0;
}

/* IMAGEN PERSONAJE */

.character-visual{
position:absolute;
bottom:0;
left:60%;
transform:translateX(-50%);
z-index:1;
pointer-events:none;
}

.character-visual img{
height:clamp(520px,60vh,680px);
object-fit:contain;
filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));
transition:transform .4s ease;
}

.character.active img{
transform:scale(1.03);
}

/* GLOW DETRÁS DEL PERSONAJE */

.character-visual::after{
content:"";
position:absolute;
width:420px;
height:420px;
background:radial-gradient(
circle,
rgba(255,0,0,.25) 0%,
rgba(255,0,0,0) 70%
);
filter:blur(40px);
z-index:-1;
left:50%;
bottom:40px;
transform:translateX(-50%);
}

/* TEXTO PERSONAJE */

.character-text{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
max-width:420px;
z-index:2;
padding:35px 40px;
background:linear-gradient(
to left,
rgba(0,0,0,.85),
rgba(0,0,0,0)
);
}

.character-text h2{
font-size:clamp(48px,4vw,72px);
line-height:.9;
margin-bottom:10px;
}

.character-text p{
font-size:15px;
line-height:1.7;
}

/* SUBTITULO */

.personaje-subtitulo{
font-size:18px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
margin-top:-5px;
margin-bottom:20px;
color:#f5c542;
text-shadow:0 0 8px rgba(245,197,66,.4);
}

/* WRAPPER CARRUSEL */

.carousel-wrapper{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
position:absolute;
bottom:-40px;
left:50%;
transform:translateX(-50%);
z-index:5;
}

/* CARRUSEL */

.character-selector{
display:flex;
gap:var(--character-gap);
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
}

.character-selector::-webkit-scrollbar{
display:none;
}

/* BOTONES PERSONAJE */

.character-btn{
width:var(--character-thumb);
height:var(--character-thumb);
border:none;
background:none;
cursor:pointer;
overflow:visible;
transition:.25s;
flex-shrink:0;
position:relative;
}

.character-btn img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.55);
border-radius:6px;
transition:.25s;
}

/* HOVER */

.character-btn:hover img{
filter:brightness(.9);
transform:scale(1.08);
}

/* ACTIVA */

.character-btn.active img{
filter:brightness(1);
transform:scale(1.12);
box-shadow:
0 0 10px rgba(255,0,0,.5),
0 0 20px rgba(255,0,0,.35),
0 0 40px rgba(255,0,0,.2);
}

/* FLECHAS */

.carousel-arrow{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.3);
background:rgba(0,0,0,.5);
color:white;
font-size:26px;
cursor:pointer;
transition:.25s ease;
flex-shrink:0;
}

.carousel-arrow:hover{
border-color:#ff1a1a;
box-shadow:
0 0 10px rgba(255,0,0,.5);
}

/* ================================= */
/* SCROLL PARA DESCRIPCIÓN LARGA */
/* ================================= */

.character-text p{
max-height:10.5em;
overflow-y:auto;
padding-right:10px;

/* Firefox */

scrollbar-width:thin;
scrollbar-color:#a10000 transparent;
}

/* Chrome / Edge / Safari */

.character-text p::-webkit-scrollbar{
width:6px;
}

.character-text p::-webkit-scrollbar-track{
background:transparent;
}

.character-text p::-webkit-scrollbar-thumb{
background:linear-gradient(
to bottom,
#5a0000,
#a10000
);
border-radius:4px;
box-shadow:0 0 6px rgba(255,0,0,0.35);
}

.character-text p::-webkit-scrollbar-thumb:hover{
background:#ff1a1a;
box-shadow:0 0 12px rgba(255,0,0,0.7);
}

/* ================================= */
/* TABLET / MOBILE LAYOUT */
/* ================================= */

@media (max-width:1000px){

/* layout vertical */

.personalidades-content{

grid-template-columns:1fr;
gap:50px;
max-width:620px;

}

/* texto centrado */

.personalidades-left{

text-align:center;
justify-self:center;

}

.personalidades-left p{

margin:0 auto;

}

/* sección personajes en flujo */

.characters-section{

width:100%;
align-items:center;

}

/* escenario personaje */

.characters-stage{

height:auto;
min-height:unset;

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

}

/* imagen personaje */

.character-visual{

position:relative;
left:auto;
bottom:auto;
transform:none;

display:flex;
justify-content:center;

}

.character-visual img{

height:420px;
max-width:100%;
object-fit:contain;

}

/* caja texto */

.character-text{

position:relative;
top:auto;
right:auto;
transform:none;

margin-top:20px;

max-width:520px;
width:100%;

padding:28px 30px;

background:rgba(0,0,0,.75);

text-align:left;

}

/* carrusel debajo */

.carousel-wrapper{

position:relative;

bottom:auto;
left:auto;

transform:none;

margin-top:25px;

justify-content:center;

}

}


/* ================================= */
/* MOBILE FIX */
/* ================================= */

@media (max-width:768px){

/* HERO spacing como en Lore */

.lore-hero{
padding:140px 24px 60px;
}

.character-selector{

max-width:calc(
(60px * 3) +
(18px * 2)
);

overflow:hidden;

}

/* Layout vertical */

.personalidades-content{
grid-template-columns:1fr;
gap:40px;
max-width:520px;
}

/* Título sección */

.personalidades-left{
text-align:center;
justify-self:center;
}

.personalidades-left h1{
font-size:42px;
}

.personalidades-left p{
font-size:15px;
margin:0 auto;
}

/* Escenario personaje */

.characters-stage{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
min-height:unset;
height:auto;
}

/* Personaje vuelve al flujo */

.character{
position:relative;
inset:auto;
transform:none;
}

/* Imagen personaje */

.character-visual{
position:relative;
margin-top:20px;
left:auto;
bottom:auto;
transform:none;
display:flex;
justify-content:center;
}

.character-visual img{

height:60vh;
transform:scale(1.8);
max-height:520px;
width:auto;
}

/* Caja texto personaje */

.character-text{
position:relative;
top:auto;
right:auto;
transform:none;

margin-top:20px;
height:55vh;
max-height:580px;
max-width:100%;
padding:22px 24px;

background:rgba(0,0,0,.75);
}

/* Carrusel debajo */

.carousel-wrapper{
position:relative;
bottom:auto;
left:auto;
transform:none;

margin-top:25px;
}

/* Miniaturas */

.character-btn{
width:60px;
height:60px;
}

}


/* ================================= */
/* MOBILE PEQUEÑO */
/* ================================= */

@media (max-width:420px){

.character-visual img{

height:320px;

}

.character-text{

font-size:14px;

}

}