:root {
    --title-font: "Chakra Petch", system-ui, sans-serif;
    --text-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --subtitle-font: "Rajdhani", system-ui, sans-serif;
    --red-color: #cc0000;
    --text-color: #94a3b8;
    --white-color: #fff;
    --grey-color: #96999d;
    --border-radius: 8px;
    --padding-top: 60px;
    --padding-bottom: 60px;
    --border-grey: 1px solid #FFFFFF1A;
    --redbg-hover: #bf0000;
    --red-gradient: linear-gradient(to right, var(--red-color) 0%, rgba(255, 0, 59, 0.6) 100%);
    --dark-bg: #0a0d12;
}

*,*::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body{
    background-color: var(--dark-bg);
}

/* ============================================================
   MAIN HERO
   ============================================================ */

.main_container{
    max-width: 1400px;
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: 120px;
}

.main_title{
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: var(--padding-bottom);
}

.main_title h1{
    color: var(--white-color);
    font-size: 96px;
    font-family: var(--title-font);
    font-style: italic;
    line-height: 0.9;
}

.main_title h1 span{
    background: var(--red-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main_title h2{
    color: var(--text-color);
    font-family: var(--text-font);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.5;
}

.main_title h2 span{
    font-weight: 400;
}

/* ============================================================
   MAIN VIDEO + ADRIAN INFO
   ============================================================ */

.mainvideo_container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 32px;
    padding-bottom: 80px;
}

/* FIX: flex en lugar de max-width fijo */
.main_video{
    flex: 1 1 60%;
    min-width: 0;
}

.main_video iframe {
    width: 100%;
    display: block;
}

/* FIX: flex en lugar de max-width fijo */
.adrian_info{
    flex: 0 0 380px;
    border: var(--border-grey);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.adrian_img{
    background: linear-gradient(to bottom right, rgba(255, 0, 59, 1), rgba(255, 0, 59, 0.6));
    border-radius: 100%;
    width: 100px;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.adrian_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.adrian h3{
    font-family: var(--title-font);
    font-size: 20px;
    line-height: 1.4;
    color: var(--white-color);
    font-weight: 700;
    margin-bottom: 6px;
}

.adrian h4{
    color: var(--red-color);
    font-family: var(--title-font);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
}

.adrian h5{
    font-family: var(--text-font);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    padding-bottom: 24px;
    border-bottom: var(--border-grey);
}

.adrian_2{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
}

.adrian_2 p{
    font-family: var(--text-font);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
}

.adrian_2 p span{
    font-weight: 400;
    color: var(--white-color);
}

.red-italic{
    color: var(--red-color) !important;
    font-style: italic;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* ============================================================
   HIGHLIGHTED VIDEOS
   ============================================================ */

.highlited_container{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    margin: auto;
    padding-bottom: 60px;
}

.highlited_title{
    font-family: var(--title-font);
    font-weight: 700;
    font-style: italic;
    color: var(--white-color);
    font-size: 48px;
    line-height: 1;
    margin-bottom: 36px;
    text-transform: uppercase;
}

.highlited_title span{
    background: var(--red-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.highlited{
    width: 100%;
}

.highlitedvideos{
    display: flex;
    width: 100%;
}

.highlitedvideos iframe {
    width: 100%;
    display: block;
}

/* ============================================================
   ANIMATION SECTION — VAMOS NENE
   ============================================================ */

.animation_section{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 20px;
    position: relative;
    padding-top: 0;
}

.grain{
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: .12;
    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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.headline{
    max-width: min(1400px, 92vw);
    width: 100%;
    position: relative;
    height: clamp(508px, 42vh, 520px);
    display: grid;
    align-items: end;
    overflow: hidden;
}

.scene{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(10px, 1.1vw, 18px);
    padding: clamp(12px, 1.5vw, 18px);
    opacity: 0;
    transform: translateY(14%) scale(.98);
    transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.9,.15,1);
}

.scene.is-active{
    opacity: 1;
    transform: translateY(0) scale(1);
}

.line{
    font-weight: 700;
    letter-spacing: 2px;
    line-height: .78;
    text-transform: uppercase;
    font-size: clamp(120px, 12vw, 260px);
    font-family: var(--title-font);
    transform: skewX(-10deg);
}

.fill.red { color: var(--red-color); }
.fill.white { color: var(--white-color); }

.outline{
    color: transparent;
    -webkit-text-stroke: 2px var(--grey-color);
    text-stroke: 2px var(--grey-color);
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

.scene .line{
    opacity: 0;
    transform: translateY(35%) skewX(-10deg);
    transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.9,.15,1);
}

.scene.is-active .line{
    opacity: 1;
    transform: translateY(0) skewX(-10deg);
}
.scene.is-active .line:nth-child(1){ transition-delay: 40ms; }
.scene.is-active .line:nth-child(2){ transition-delay: 120ms; }
.scene.is-active .line:nth-child(3){ transition-delay: 200ms; }
.scene.is-active .line:nth-child(4){ transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce){
    .scene, .scene .line{ transition: none !important; }
}

/* ============================================================
   PLAYLISTS
   ============================================================ */

.secondsection_wrapper{
    border-top: var(--border-grey);
    padding-top: 80px;
    padding-bottom: 120px;
}

.playlist_container{
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    width: 90%;
    margin: auto;
}

.playlists{
    display: flex;
    flex-direction: column;
    gap: 100px;
    width: 100%;
    align-items: flex-start;
    padding-top: var(--padding-top);
}

.playlist{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.psection_title{
    font-family: var(--title-font);
    font-weight: 700;
    font-style: italic;
    color: var(--white-color);
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.psection_subtitle{
    color: var(--text-color);
    font-family: var(--text-font);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
}

.playlist_titles{
    border-bottom: var(--border-grey);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 16px;
    gap: 16px;
    margin-bottom: 24px;
}

.playlist_title{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.playlisticon_title{
    align-items: center;
    justify-content: flex-start;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.playlisticon_title img{
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.playlist_icon{
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.playlist_title h4{
    font-family: var(--title-font);
    color: var(--white-color);
    /* FIX: font-weight con px es inválido */
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 1.2;
}

.playlist_title h5{
    color: var(--text-color);
    font-family: var(--text-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
}

.playlist_titles button{
    background-color: var(--red-color);
    cursor: pointer;
    border-radius: var(--border-radius);
    border: none;
    padding: 8px 16px;
    transition: .5s all ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.playlist_titles button a{
    font-family: var(--subtitle-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--white-color);
    text-decoration: none;
}

.playlist_titles button:hover{
    background-color: var(--redbg-hover);
}

.playlist_videos iframe {
    width: 100%;
    display: block;
}

/* Colores de íconos de playlist */
.colapinto{
    background-color: #1447e6;
}

.historias{
    background: linear-gradient(to bottom right, #d97706, #b45309);
}

.curva{
    background: linear-gradient(to bottom right, #9333ea, #7e22ce);
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

/* --- TABLET (≤ 1024px) --- */
@media (max-width: 1024px) {
    .main_container,
    .playlist_container {
        width: 90%;
    }

    .main_title h1 {
        font-size: 64px;
        line-height: 1;
    }

    /* Video + Adrian: apilado en tablet */
    .mainvideo_container {
        flex-direction: column;
        gap: 24px;
        padding-bottom: 60px;
    }
    .main_video {
        flex: none;
        width: 100%;
    }
    .adrian_info {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .highlited_title {
        font-size: 36px;
    }

    /* Animation section más compacta */
    .animation_section {
        min-height: 55vh;
    }
    .line {
        font-size: clamp(72px, 10vw, 120px);
    }
    .headline {
        height: clamp(200px, 35vh, 320px);
    }

    /* Playlists */
    .playlists {
        gap: 72px;
    }
    .playlist_title h4 {
        font-size: 24px;
    }
}

/* --- MOBILE (≤ 768px) --- */
@media (max-width: 768px) {
    :root {
        --padding-top: 40px;
        --padding-bottom: 40px;
    }

    .main_container {
        padding-top: 120px;
    }

    .main_title h1 {
        font-size: 48px;
        line-height: 1.1;
    }
    .main_title h2 {
        font-size: 18px;
    }
    .main_title {
        padding-bottom: 40px;
    }

    .mainvideo_container {
        gap: 20px;
        padding-bottom: 40px;
    }

    .adrian_info {
        padding: 24px 20px;
        gap: 16px;
    }

    .highlited_title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    /* Animation */
    .animation_section {
        min-height: auto;
        padding: 60px 16px;
    }
    .line {
        font-size: clamp(52px, 14vw, 90px);
    }
    .headline {
        height: clamp(180px, 45vw, 260px);
    }

    /* Playlists */
    .secondsection_wrapper {
        padding-top: 48px;
        padding-bottom: 80px;
    }
    .playlists {
        gap: 56px;
        padding-top: 32px;
    }
    .playlist_titles {
        flex-wrap: wrap;
        gap: 12px;
    }
    .playlisticon_title {
        /* FIX: eliminado flex-direction: row-reverse que rompía el orden visual */
        flex-direction: row;
    }
    .playlist_title h4 {
        font-size: 20px;
    }
    .playlist_titles button {
        /* FIX: sin width fijo, que se adapte al contenido */
        width: auto;
        padding: 8px 14px;
    }
    .playlist_titles button a {
        font-size: 14px;
    }
}

/* --- MÓVILES PEQUEÑOS (≤ 480px) --- */
@media (max-width: 480px) {
    .main_title h1 {
        font-size: 38px;
    }
    .highlited_title {
        font-size: 24px;
    }
    .playlist_title h4 {
        font-size: 18px;
    }
    .line {
        font-size: clamp(40px, 13vw, 72px);
    }
    .headline {
        height: clamp(150px, 50vw, 220px);
    }
    .playlists {
        gap: 44px;
    }
}