* {
    box-sizing: border-box;    
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

@font-face {
    font-family: 'LiquidAmber';
    src: url('../fonts/LiquidAmber-Regular.woff2') format('woff2'),
        url('../fonts/LiquidAmber-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isidora Sans Medium';
    src: url('../fonts/IsidoraSans-Medium.woff2') format('woff2'),
        url('../fonts/IsidoraSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isidora Sans Regular';
    src: url('../fonts/IsidoraSans-Regular.woff2') format('woff2'),
        url('../fonts/IsidoraSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isidora Sans Semibold';
    src: url('../fonts/IsidoraSans-SemiBold.woff2') format('woff2'),
        url('../fonts/IsidoraSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isidora Sans Bold';
    src: url('../fonts/IsidoraSans-Bold.woff2') format('woff2'),
        url('../fonts/IsidoraSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}




.hero{
    height: 100vh;
    position: relative;
}
    .hero video{
        object-fit: cover;
    }
    .hero h1{
        background: url('../img/titulo.png') no-repeat center center;
        background-size: cover;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'LiquidAmber';
        font-size: 10rem;
        color: transparent;
        padding: 25px 0;
        bottom: 0;
    }
    .box-botones-portada{
        position: absolute;
        right: 0;
    }
        .btn-portada{
            position: relative;
        }
            .btn-portada a{
                color: transparent;
                display: block;
                font-size: 1.2rem;
                text-align: center;
            }
            #btn-portada-1{
                background: url('../img/btn-portada-1.png') no-repeat center center;
                background-size: cover;
                padding: 35px 8px;                
                top: 120px;
                right: 120px;
                width: 205px;
            }
            #btn-portada-2{
                background: url('../img/btn-portada-2.png') no-repeat center center;
                background-size: cover;    
                top: 150px;
                right: 180px;            
                padding: 50px 40px;
                width: 205px;
            }
            #btn-portada-3{
                background: url('../img/btn-portada-3.png') no-repeat center center;
                background-size: cover;
                top: 170px;
                right: 80px;      
                padding: 50px 40px;
                width: 205px;
            }
    @keyframes portadaPulse{
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.07); }
    }
        .btn-portada{
            animation: portadaPulse 2.2s ease-in-out infinite;
        }
            #btn-portada-2{
                animation-duration: 1.05s;   /* el rojo palpita más rápido */
            }

    .box-cta{
        bottom: 35px;
        color: #fff;
        font: 1rem/1.1 'Isidora Sans Semibold';
        position: absolute;
        text-align: center;
        width: 100%;
    }
        .box-cta i{
            background: url('../img/flecha-cta.png') no-repeat center center;
            background-size: cover;
            display: block;
            height: 10px;
            margin: 0 auto;
            margin-top: 8px;
            width: 10px;
        }
    .btn-audio{
        cursor: pointer;
        max-width: 220px;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    /* ===== Intro: activa tu audio ===== */
    .intro-audio{
        align-items: center;
        background: rgba(7, 16, 109, 0.9);
        display: flex;
        flex-direction: column;
        gap: 28px;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        text-align: center;
        transition: opacity .45s ease, visibility .45s ease;
        z-index: 200;
    }
        .intro-audio.is-hidden{
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
        }
        .intro-audio-text{
            color: #fff;
            font: 2.6rem/1.2 'LiquidAmber';
            letter-spacing: .02em;
            text-transform: uppercase;
        }
        .intro-audio-btn{
            cursor: pointer;
            max-width: 40px;
            transition: transform .15s ease;
            width: 70%;
        }
            .intro-audio-btn:hover{ transform: scale(1.05); }
        .intro-close{
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 2.6rem;
            line-height: 1;
            padding: 6px 12px;
            position: absolute;
            right: 20px;
            top: 16px;
        }
            .intro-close:hover{ color: #ffee01; }

    .box-bajada{
        background: #270539;
        height: 400px;
        width: 100%;
        clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 80%);
        position: relative;
        z-index: 10;
        margin-top: -55px;
    }
        .box-bajada p{
            color: #fff;
            font: 1.3rem / 1.5 'Isidora Sans Bold';
            margin: 0 auto;
            max-width: 870px;
            padding: 90px 0;
            text-align: center;
        }
            .box-bajada p span{
                color: #ffee01;
            }

    /* ===== Botón rojo flotante (fuera del hero) ===== */
    .btn-flotante-rojo{
        animation: portadaPulse 1.05s ease-in-out infinite;
        opacity: 0;
        position: fixed;
        right: 14px;
        top: 14px;
        visibility: hidden;
        z-index: 150;
        transition: opacity .35s ease, visibility .35s ease;
    }
        .btn-flotante-rojo.is-visible{
            opacity: 1;
            visibility: visible;
        }
        .btn-flotante-rojo img{
            display: block;
            height: auto;
            width: 150px;
        }

.main-conoce{
    background: url('../img/bg-conoce.jpg') no-repeat center top;
    background-size: cover;
    padding: 120px 0;
    position: relative;
}
    .ctn-conoce{
        margin: 0 auto;
        max-width: 1000px;
    }
        img.ilus-1{
            display: block;
            margin: 0 auto;
            max-width: 400px;
        }
        .ctn-conoce p{
            color: #fff;
            font: 1.2rem/1.5 'Isidora Sans Medium';
            margin: 40px auto;
            max-width: 850px;
            text-align: center;
        }
            .ctn-conoce span{
                color: #ffee01;
                font-family: 'Isidora Sans Bold';
            }
        .ctn-conoce h3{
            color: #fff;
            font: 3rem/1.3 'LiquidAmber';
            margin: 60px auto 40px;
            text-align: center;
        }
        .ctn-conoce ul{
            list-style-type: none;
            text-align: center;
        }
        .conoce-carousel{ position: relative; }
        .conoce-hint,
        .conoce-arrow{ display: none; }
            .ctn-conoce ul li{
                color: #fff;
                display: inline-block;
                margin: 0 10px;
                max-width: 310px;
                vertical-align: top;
            }
                .ctn-conoce ul li img{
                    display: block;
                    margin: 0 auto 10px;
                    max-width: 80px;
                }
                .ctn-conoce ul li h4{
                    font: 1.2rem/1.4 'Isidora Sans Bold';
                }
                .ctn-conoce ul li  p{
                    font: 1.1rem/1.4 'Isidora Sans Regular';    
                    margin: 5px auto;               
                }

.main-discografia{
    background: url('../img/bg-discografia.jpg') no-repeat center top;
    background-size: cover;
    overflow: hidden;
    padding: 140px 0 250px;
    position: relative;
}
    .ctn-discografia{
        margin: 0 auto;
        max-width: 1240px;
        padding: 0 20px;
        text-align: center;
    }

    /* ----- Título (imagen) ----- */
    .titulo-escucha{
        margin: 0 auto 22px;
    }
        .titulo-escucha img{
            display: block;
            height: auto;
            margin: 0 auto;
            max-width: 480px;
            width: 60%;
        }

    /* ----- Leyenda centrada ----- */
    .disco-legend{
        align-items: center;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 44px;
        justify-content: center;
        list-style: none;
        margin-bottom: 46px;
    }
        .disco-legend li{
            align-items: center;
            display: flex;
            font: 1.05rem/1.2 'Isidora Sans Semibold';
            gap: 12px;
        }
        .leg-ico{
            align-items: center;
            display: inline-flex;
            flex: 0 0 auto;
            justify-content: center;
        }
            .leg-drag img{ display: block; height: 30px; width: auto; }
            .leg-play{ background: #2ee06a; border-radius: 50%; height: 34px; width: 34px; }
            .leg-play svg{ fill: #0b0b0b; height: 16px; width: 16px; }

    /* ----- Carrusel + flechas ----- */
    .disco-carousel{
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 58px;
        position: relative;
    }
        .disco-arrow{
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            padding: 0;
            position: absolute;
            top: 124px;
            transform: translateY(-50%);
            transition: opacity .2s ease, transform .15s ease;
            z-index: 5;
        }
            .disco-arrow.prev{ left: 2px; }
            .disco-arrow.next{ right: 2px; }
            .disco-arrow svg{
                fill: none;
                height: 56px;
                stroke: #ffee01;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 3.2;
                width: 56px;
            }
            .disco-arrow:hover{ transform: translateY(-50%) scale(1.14); }
            .disco-arrow.is-disabled{ opacity: .22; pointer-events: none; }

        .disco-track{
            cursor: grab;
            display: flex;
            gap: 24px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            padding: 6px 4px 12px;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
        }
            .disco-track::-webkit-scrollbar{ display: none; }
            .disco-track.is-grabbing{ cursor: grabbing; }

        .disco-card{
            color: #fff;
            flex: 0 0 340px;
            scroll-snap-align: start;
            text-align: left;
            width: 340px;
        }

            /* Media: portada + vinilo saliendo por detrás */
            .disco-media{
                height: 240px;
                margin-bottom: 28px;
                position: relative;
            }
                .disco-vinyl{
                    background:
                        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px),
                        radial-gradient(circle at 42% 38%, #3a3a3a 0%, #141414 40%, #050505 100%);
                    border-radius: 50%;
                    box-shadow: 0 10px 26px rgba(0,0,0,.55);
                    height: 236px;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 236px;
                    z-index: 1;
                    display: none;
                }
                    .disco-vinyl::before{     /* etiqueta = mini portada */
                        background: var(--label) center/cover no-repeat, #b1122e;
                        border-radius: 50%;
                        content: '';
                        inset: 33%;
                        position: absolute;
                    }
                    .disco-vinyl::after{      /* orificio central */
                        background: #0c0c0c;
                        border-radius: 50%;
                        box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
                        content: '';
                        inset: 47.5%;
                        position: absolute;
                    }

                .disco-cover{
                    height: 240px;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 325px;
                    z-index: 2;
                }
                    .disco-cover img{
                        display: block;
                        height: 100%;
                        object-fit: cover;
                        -webkit-user-drag: none;
                        user-select: none;
                        width: 100%;
                    }
                    .disco-cover img.is-missing{ visibility: hidden; }

                .disco-play{
                    align-items: center;
                    background: #2ee06a;
                    border: none;
                    border-radius: 50%;
                    box-shadow: 0 6px 16px rgba(0,0,0,.45);
                    cursor: pointer;
                    display: flex;
                    height: 58px;
                    justify-content: center;
                    left: 4px;
                    position: absolute;
                    top: 198px;
                    transition: transform .15s ease, background .15s ease;
                    width: 58px;
                    z-index: 4;
                }
                    .disco-play:hover{ background: #35f277; transform: scale(1.08); }
                    .disco-play svg{ fill: #0b0b0b; height: 24px; width: 24px; }
                    .disco-play .ico-pause{ display: none; }
                    .disco-card.is-playing .disco-play .ico-play{ display: none; }
                    .disco-card.is-playing .disco-play .ico-pause{ display: block; }

                .embed-holder{
                    bottom: 0;
                    left: 0;
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    transform: translateY(100%);
                    transition: transform .35s ease, opacity .3s ease;
                    width: 240px;
                    z-index: 3;
                }
                    .disco-card.is-open .embed-holder{
                        opacity: 1;
                        pointer-events: auto;
                        transform: translateY(0);
                    }
                    .embed-holder iframe{ border-radius: 0 0 4px 4px; display: block; }

            .disco-card.is-playing .disco-vinyl{ animation: vinylSpin 4s linear infinite; }

            .disco-title{
                font: 1.3rem/1.2 'Isidora Sans Bold';
                margin: 0 0 12px;
                max-width: 240px;
                text-transform: uppercase;
            }
            .disco-desc{
                color: #e9e9e9;
                font: 1rem/1.45 'Isidora Sans Regular';
                max-width: 240px;
            }

@keyframes vinylSpin{ to { transform: translateY(-50%) rotate(360deg); } }

    /* ----- Responsive ----- */
    @media (max-width: 820px){
        .main-discografia{ padding: 45px 0 70px; }
        .titulo-escucha img{ max-width: 300px; width: 78%; }
        .disco-legend{ flex-direction: column; gap: 14px; margin-bottom: 32px; }
        .disco-carousel{ max-width: none; padding: 0; }
        .disco-arrow{ display: none; }   /* en móvil se usa swipe */
        .disco-track{ gap: 16px; padding: 6px 20px 12px; scroll-snap-type: x mandatory; }
        .disco-card{ flex: 0 0 300px; width: 300px; }
    }

.main-melcochometro{
    background: url('../img/bg-melcochometro.jpg') no-repeat center top;
    background-size: cover;
    overflow: hidden;
    margin-top: -90px;
    padding: 80px 0 135px;
    position: relative;
}
    .ctn-melcochometro{
        margin: 0 auto;
        max-width: 1200px;
        padding: 160px 0 0 0;
    }
        img.ilus-melcochometro{
            display: inline-block;
            max-width: 600px;
            vertical-align: bottom;
        }
        .box-embed-melcochometro{
            border-radius: 30px;
            display: inline-block;
            margin: 0 20px;
            vertical-align: top;
            width: 500px;
        }
            .box-titulo-melcochea{
                background-color: #000;
                border-top-left-radius: 32px;
                border-top-right-radius: 32px;
                margin-bottom: -50px;
                position: relative;
            }
            .box-embed-melcochometro h4{
                background: url('../img/titulo-melcochometro.png') no-repeat center center;
                background-size: 100%;
                color: transparent;
                font: 3rem / 1.2 'LiquidAmber';
                padding: 55px 0;
                text-align: center;
                margin: 0 auto;
                max-width: 300px;
                transform: translate(40%, -95%);
                left: 0;
                position: absolute;
            }
        .box-aviso{
            background-color: rgba(0, 0, 0, 0.5);
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
        } 
            .box-aviso p{
                color: #F5E30D;
                font: 1rem / 1.3 'Isidora Sans Medium';
                margin: 0 auto;
                max-width: 400px;
                padding: 40px 0 15px;
                text-align: center;
                margin-top: -30px;
            }
                .box-aviso p a{
                    color: #F5E30D;
                }

.main-habla-bien{
    background: url('../img/bg-habla-bien.jpg') no-repeat center top;
    background-size: cover;
    overflow: hidden;
    padding: 0 0 135px;
    position: relative;
    text-align: center;
}
    .ctn-habla-bien{
        margin: 0 auto;
        max-width: 1200px;
        padding: 120px 0 0 0;
    }
        .box-main-frases{
            display: inline-block;
            min-width: 620px;
            vertical-align: top;
        }
            .box-main-frases h4{
                background: url(../img/titulo-habla-bien.png) no-repeat center center;
                background-size: 100%;
                color: transparent;
                font: 3rem / 1.2 'LiquidAmber';
                padding: 55px 0;
                text-align: center;
                margin: 0 auto;
                max-width: 400px;
                margin-top: -60px;
            }

    /* ----- Tarjeta interactiva ¡Habla bien! ----- */
    .frases-card{
        background: #0c0c0c;
        border-radius: 40px;
        margin: 18px auto 0;
        max-width: 620px;
        padding: 40px 20px 48px;
    }
        .frases-q{
            color: #fff;
            font: 2.5rem/1.2 'LiquidAmber';
            margin-bottom: 22px;
        }

        /* Botones primarios (filtro) */
        .frases-primary{
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 14px;
            max-width: 300px;
            margin: 0 auto;
        }
            .fp-btn{
                border: 3px solid transparent;
                border-radius: 40px;
                cursor: pointer;
                font: 1.5rem/1 'LiquidAmber';
                max-width: 460px;
                padding: 17px 30px;
                transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
                width: 100%;
            }
                .fp-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
                .fp-btn.is-active{ box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
                .fp-frases{ background: #F5E30D; color: #141414; }
                .fp-chistes{ background: #F5E30D; color: #141414; }

        /* Subsecciones */
        .frases-subs{ margin-top: 34px; }
            .frases-sublabel{
                color: #f5e40f;
                font: 2rem/1.2 'LiquidAmber';
                margin-bottom: 20px;
            }
            .frases-pills{
                display: flex;
                flex-wrap: wrap;
                gap: 14px;
                justify-content: center;
            }
                .frases-pill{
                    border: 3px solid transparent;
                    border-radius: 40px;
                    color: #141414;
                    cursor: pointer;
                    font: 1.5rem/1 'LiquidAmber';
                    padding: 14px 26px;
                    transition: transform .12s ease, box-shadow .15s ease;
                }
                    .frases-pill:hover{ transform: translateY(-2px); }
                    .frases-pill.is-active{ box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
                    .pill-amarillo{ background: #0BEC26; }
                    .pill-rosa{     background: #0BEC26; }
                    .pill-morado{   background: #0BEC26; }
                    /* Chistes: todos los pills en celeste */
                    .frases-pills.is-chistes .frases-pill{ background: #46D4FF; }

            .frases-select{
                background: #f5e40f;
                border: none;
                border-radius: 40px;
                color: #141414;
                cursor: pointer;
                display: block;
                font: 2rem/1 'LiquidAmber';
                margin: 38px auto 0;
                min-width: 300px;
                padding: 20px 40px;
                transition: transform .12s ease, filter .15s ease;
            }
                .frases-select:hover:not(:disabled){ transform: translateY(-2px); filter: brightness(.96); }
                .frases-select:disabled{ cursor: not-allowed; opacity: .45; transform: none; }
                .frases-select.is-playing{ animation: selectPulse 1s ease-in-out infinite; }

    /* Reproductor de resultado */
    .frases-player{
        align-items: center;
        background: #1a1a1a;
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 26px auto 0;
        max-width: 460px;
        padding: 20px 24px;
    }
        .frases-player[hidden]{ display: none; }
        .fpl-cat{
            color: #ffd23b;
            font: 1.15rem/1.2 'Isidora Sans Bold';
            text-align: center;
        }
        .fpl-controls{
            align-items: center;
            display: flex;
            gap: 12px;
            width: 100%;
        }
            .fpl-toggle{
                align-items: center;
                background: #2ee06a;
                border: none;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                flex: 0 0 auto;
                height: 46px;
                justify-content: center;
                transition: transform .12s ease, background .15s ease;
                width: 46px;
            }
                .fpl-toggle:hover{ background: #35f277; transform: scale(1.06); }
                .fpl-toggle svg{ fill: #0b0b0b; height: 20px; width: 20px; }
                .fpl-toggle .ico-pause{ display: none; }
                .frases-player.is-playing .fpl-toggle .ico-play{ display: none; }
                .frases-player.is-playing .fpl-toggle .ico-pause{ display: block; }
            .fpl-time{
                color: #cfcfcf;
                flex: 0 0 auto;
                font: .95rem/1 'Isidora Sans Semibold';
                min-width: 38px;
                text-align: center;
            }
            .fpl-bar{
                background: rgba(255,255,255,.18);
                border-radius: 4px;
                cursor: pointer;
                flex: 1 1 auto;
                height: 8px;
                overflow: hidden;
                position: relative;
                touch-action: none;
            }
                .fpl-fill{
                    background: #2ee06a;
                    border-radius: 4px;
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 0;
                }

    @keyframes selectPulse{
        0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,59,.6); }
        50%      { box-shadow: 0 0 0 10px rgba(255,210,59,0); }
    }

    @media (max-width: 820px){
        .frases-card{ border-radius: 30px; padding: 30px 24px 36px; }
        .frases-q, .frases-sublabel{ font-size: 1.3rem; }
        .fp-btn{ font-size: 1.15rem; padding: 15px 22px; }
        .frases-pill{ font-size: 1.1rem; padding: 12px 20px; }
        .frases-select{ font-size: 1.25rem; min-width: 0; width: 100%; }
        .frases-player{ max-width: none; }
    }
    img.ilus-habla-bien{
        display: inline-block;
        max-width: 500px;
        vertical-align: top;
    }

    @media (max-width: 820px){
        .intro-audio-text{ font-size: 1.7rem; }
        .intro-audio-btn{ width: 78%; }
        .intro-close{ font-size: 2.2rem; right: 12px; top: 10px; }
        .btn-flotante-rojo img{ width: 104px; }
    }


/* ================= ¡No lo aprietes! (botón + modal) ================= */
.btn-apretar{
    animation: apretarWiggle 3.2s ease-in-out infinite;
    cursor: pointer;
    left: 28px;
    position: absolute;
    top: 24px;
    transform-origin: 50% 90%;
    width: 130px;
    z-index: 30;
}
    .btn-apretar:hover{ animation: none; transform: scale(1.07) rotate(-4deg); }

@keyframes apretarWiggle{
    0%, 92%, 100% { transform: rotate(0deg); }
    94%  { transform: rotate(-5deg); }
    96%  { transform: rotate(4deg); }
    98%  { transform: rotate(-2deg); }
}

.dato-modal{
    align-items: center;
    background: rgba(6, 8, 20, 0.86);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 300;
}
    .dato-modal[hidden]{ display: none; }

    .dato-box{
        max-width: 640px;
        position: relative;
        width: 100%;
    }
        .dato-chili{
            left: 50%;
            position: absolute;
            top: -20px;
            width: 150px;
            z-index: 2;
            transform: translate(-50%, 0);
        }
        .dato-close{
            align-items: center;
            background: #ffd23b;
            border: none;
            border-radius: 50%;
            color: #111;
            cursor: pointer;
            display: flex;
            font-size: 1.9rem;
            height: 48px;
            justify-content: center;
            line-height: 1;
            position: absolute;
            right: 10%;
            top: 20px;
            transition: transform .12s ease, background .15s ease;
            width: 48px;
            z-index: 4;
        }
            .dato-close:hover{ background: #ffe152; transform: scale(1.09); }
        .dato-card{
            background: #e8391f;
            border-radius: 6px;
            box-shadow: 0 18px 50px rgba(0,0,0,.5);
            margin-top: 90px;
            padding: 55px 30px;
            position: relative;
            transform: rotate(-2deg);
            z-index: 1;
        }
            .dato-text{
                color: #fff;
                font: 1.35rem/1.55 'Isidora Sans Regular';
                text-align: center;
            }
                .dato-text strong{
                    color: #ffd23b;
                    font-family: 'Isidora Sans Bold';
                }

@media (max-width: 820px){
    .btn-apretar{ left: 14px; top: 16px; width: 104px; }
    .dato-chili{ width: 150px; }
    .dato-close{ height: 42px; top: 50px; width: 42px; font-size: 1.7rem; }
    .dato-card{ margin-top: 66px; padding: 44px 26px; }
    .dato-text{ font-size: 1.1rem; }
}

.main-apura-oye{
    background: url('../img/bg-apura-oye.jpg') no-repeat center top;
    background-size: cover;
    overflow: hidden;
    padding: 0 0 40px;
    position: relative;
    text-align: center;
}
    .ctn-apura-oye{
        
    }
        .ctn-apura-oye h2{
            background: url(../img/titulo-apura-oye.png) no-repeat center center;
            background-size: 100%;
            color: transparent;
            font: 3rem / 1.2 'LiquidAmber';
            padding: 55px 0;
            text-align: center;
            margin: 0 auto;
            max-width: 400px;
        }
            .ctn-apura-oye h2.no-vuelvas{
                background: url(../img/titulo-no-vuelvas.png) no-repeat center center;
                background-size: 100%;
                font: 5rem / 1.2 'LiquidAmber';
                max-width: 500px;
            }
        img.ilus-no-vuelvas{
            max-width: 500px;
            position: relative;
            z-index: 50;

            animation: pulse 2s infinite;
        }
            @keyframes pulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.1);
                }
                100% {
                    transform: scale(1);
                }
            }


/* ================= APURA OYE — Trivia ================= */
.trivia{
    margin: 24px auto 100px;
    max-width: 640px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
    .trivia-card{
        background: #d3342a;
        border-radius: 12px;
        margin: 20px auto 0;
        max-width: 600px;
        padding: 44px 44px 40px;
        position: relative;
        text-align: center;
        transform: rotate(-1.2deg);
    }
        /* Esquinas amarillas */
        .tc-corner{
            background: #F5E30D;
            height: 62px;
            position: absolute;
            width: 62px;
            z-index: 3;
        }
            .tc-tr{ clip-path: polygon(100% 0, 0 0, 100% 100%); right: -12px; top: -12px; }
            .tc-bl{ bottom: -12px; clip-path: polygon(0 0, 0 100%, 100% 100%); left: -12px; }

        .tc-progress{
            color: #F5E30D;
            font: 2rem/1 'LiquidAmber';
            margin-bottom: 20px;
        }
        .tc-question{
            color: #fff;
            font: 2rem/1.3 'LiquidAmber';
            margin-bottom: 26px;
            text-transform: uppercase;
        }

        .tc-options{
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 20px;
        }
            .tc-opt{
                align-items: center;
                background: #fff;
                border: none;
                border-radius: 40px;
                color: #111;
                cursor: pointer;
                display: flex;
                font: 1.15rem/1.2 'Isidora Sans Semibold';
                gap: 14px;
                padding: 9px 16px;
                text-align: left;
                transition: transform .1s ease, background .15s ease;
                width: 100%;
            }
                .tc-opt:hover:not(:disabled){ transform: translateY(-2px); }
                .tc-opt:disabled{ cursor: default; opacity: 1; }
                .tc-letter{
                    align-items: center;
                    background: #111;
                    border-radius: 50%;
                    color: #fff;
                    display: flex;
                    flex: 0 0 auto;
                    font: 1.2rem/1 'Isidora Sans Bold';
                    height: 44px;
                    justify-content: center;
                    width: 44px;
                }
                .tc-opt.is-correct{ background: #F5E30D; }
                .tc-opt.is-wrong{ background: #a5271a; color: #fff; }

        .tc-explain{
            color: #F5E30D;
            font: 1.05rem/1.45 'Isidora Sans Semibold';
            margin-bottom: 24px;
            text-align: left;
        }
            .tc-explain[hidden]{ display: none; }

        .tc-next, .tc-replay{
            background: #000;
            border: none;
            border-radius: 40px;
            color: #fff;
            cursor: pointer;
            font: 2rem/1 'LiquidAmber';
            margin: 0 auto;
            min-width: 230px;
            padding: 16px 32px;
            text-transform: uppercase;
            transition: transform .12s ease, filter .15s ease;
        }
        .tc-replay{
            background: #F5E30D;
            color: #000;
        }
            .tc-next:hover:not(:disabled), .tc-replay:hover{ filter: brightness(1.05); transform: translateY(-2px); }
            .tc-next:disabled{ cursor: not-allowed; opacity: .5; transform: none; }

        /* ----- Tarjeta de resultado ----- */
        .trivia-card.result{ background: #0c0c0c; }
            .tc-face{
                display: block;
                height: auto;
                margin: 0 auto 6px;
                width: 150px;
            }
            .tc-eres{
                color: #F5E30D;
                font: 1rem/1 'Isidora Sans Bold';
                letter-spacing: .1em;
                margin-bottom: 8px;
                text-transform: uppercase;
            }
            .tc-title{
                color: #fff;
                font: 2.6rem/1.05 'Isidora Sans Bold';
                margin-bottom: 22px;
                text-transform: uppercase;
            }
            .tc-desc{
                color: #f0f0f0;
                font: 1.15rem/1.5 'Isidora Sans Regular';
                margin: 0 auto 28px;
                max-width: 440px;
            }

@media (max-width: 820px){
    .trivia-card{ padding: 34px 22px 30px; }
    .tc-progress{ font-size: 1.6rem; }
    .tc-question{ font-size: 1.2rem; }
    .tc-opt{ font-size: 1rem; }
    .tc-letter{ height: 38px; width: 38px; font-size: 1.05rem; }
    .tc-title{ font-size: 2rem; }
    .tc-next, .tc-replay{ min-width: 0; width: 100%; }
    .tc-corner{ height: 48px; width: 48px; }
}

/* ================= FOOTER / créditos ================= */
.main-footer{
    background: #0a0a0a;
    clip-path: polygon(0 72px, 100% 0, 100% 100%, 0 100%);   /* trazo diagonal en el top */
    color: #fff;
    margin-top: -72px;                                         /* solapa la sección roja anterior */
    padding: 140px 20px 0;
    position: relative;
    text-align: center;
    z-index: 2;
}
    .footer-logo{
        color: #fff;
        margin-bottom: 40px;
    }
        .footer-logo img{
            display: block;
            margin: 0 auto;
            max-width: 150px;
        }
    .footer-creditos{
        margin: 0 auto 50px;
        max-width: 900px;
    }
        .footer-creditos p{
            color: #d6d6d6;
            font: 1rem/1.3 'Isidora Sans Regular';
            margin-bottom: 16px;
        }
            .footer-creditos strong{
                color: #fff;
                font-family: 'Isidora Sans Bold';
            }
    .bg-melcocha-footer{
        display: block;
        margin: 0 auto;
        max-width: 900px;
    }

@media (max-width: 820px){
    .main-footer{ clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%); margin-top: -46px; padding: 90px 20px 50px; }
    .footer-logo{ font-size: 2.4rem; margin-bottom: 28px; }
    .footer-creditos p{ font-size: 1rem; }
}

#heroVideo,
img.ilus-1,
.btn-melcochea-top{
    display: block;
}
img.ilus-habla-bien{
    display: inline-block;
}
#heroVideoMovil,
.box-sombra-hero-movil,
img.ilus-habla-bien-movil,
img.ilus-1-movil,
img.btn-melcochea-bottom,
.ilus-melcochometro-movil{
    display: none;
}

@media (max-width: 640px){

    #heroVideo,
    #btnFlotanteRojo .btn-melcochea-top{
        display: none;
    }
    #heroVideoMovil,
    #btnFlotanteRojo .btn-melcochea-bottom{
        display: block;
    }
    .btn-flotante-rojo{
        animation: none;
        bottom: 0;
        right: inherit;
        top: inherit !important;
        width: 100%;
    }
        .btn-flotante-rojo img{
            width: 100%;
        }
    
    .box-botones-portada{
        right: inherit;
        width: 100%;
    }
    #btn-portada-1,
    #btn-portada-3,
    img.ilus-habla-bien,
    img.ilus-1{
        display: none;
    }
    #btn-portada-2{
        background: url(../img/btn-melcochea-a-tu-pata-aqui-movil.png) no-repeat center center;
        background-size: 100%;         
        left: 25%;
        margin-top: 20px;
        padding: 15px;       
        right: inherit;
        top: 0;        
        width: 230px;
    }
    .hero h1{
        font-size: 5rem;
        padding: 25px 10px;
        z-index: 10;
    }
    .box-cta{
        z-index: 10;
    }
    .box-sombra-hero-movil{
        background: #000000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
        bottom: 0;
        display: block;    
        height: 40%;    
        position: absolute;
        width: 100%;
    }
    .box-bajada{
        clip-path: none;
        margin-top: -1px;
        height: auto;
    }
        .box-bajada p{
            font: 1.5rem / 1.5 'Isidora Sans Medium';
            padding: 50px 35px;
        }
    .box-btn-apretar{
        background-color: #e73323;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
        padding: 10px;
        position: absolute;
    }
        .btn-apretar{
            position: relative;
            left: 0;
            top: 0;
            width: 90px;
        }
        .box-btn-apretar-dos{
            top: 175px;
        }   
        .box-btn-apretar-tres{
            top: 220px;
        }  
        .box-btn-apretar-cuatro{
            top: 5px;
        }  
        .box-btn-apretar-cinco{
            top: 200px;
        }  
    .main-melcochometro{
        background: url(../img/bg-melcochometro-movil.jpg) no-repeat center top;
        background-size: cover;
        overflow: hidden;
        margin-top: 0;
        padding: 25px 0 135px;
        position: relative;
    }
        .ctn-melcochometro{
            padding: 0;
        }
        img.ilus-melcochometro{
            display: none;
        }
        img.ilus-melcochometro-movil{
            display: block;
        }
        .box-embed-melcochometro{
            margin: 0;
            width: 100%;
        }
        .box-embed-melcochometro h4{
            font: 4rem / 1.2 'LiquidAmber';
            max-width: 340px;
            transform: translate(10%, -85%);
        }
    .disco-cover img{
        height: 80%;
        width: 80%;
    }
    .main-habla-bien{
        background: url('../img/bg-habla-bien-movil.jpg') no-repeat center top;
        background-size: cover;
        padding: 60px 0;
    }
        .ctn-habla-bien{
            padding: 0;
        }
            .box-main-frases{
                min-width: inherit;
                width: 95%;
            }
                .box-main-frases h4{
                    margin-bottom: 60px;
                    max-width: 350px;
                }
                .frases-card{
                    margin-top: -30px;
                    position: relative;
                    z-index: 10;
                }
                img.ilus-habla-bien-movil{
                    display: block;
                }
                    .fp-btn{
                        font-size: 1.8rem;
                    }
                    .frases-q, .frases-sublabel,
                    .frases-pill{
                        font-size: 1.8rem;
                    }
    .main-conoce{
        background: url('../img/bg-conoce-movil.jpg') no-repeat center top;
        background-size: cover;
        padding: 40px 0 60px;
    }
        img.ilus-1-movil{
            display: block;
            margin: 0 auto;
            max-width: 85%;            
        }
        .ctn-conoce h3{ font-size: 2.4rem; margin: 26px auto 12px; }

        .conoce-carousel{ position: relative; }

        .conoce-hint{
            align-items: center;
            color: #fff;
            display: flex;
            font: 1.2rem/1.2 'Isidora Sans Semibold';
            gap: 8px;
            justify-content: center;
            margin: 0 auto 10px;
        }
            .conoce-hint-ico{ display: inline-flex; width: 30px; }
            .conoce-hint-ico img{ display: block; width: 100%; }

        .ctn-conoce ul{
            display: flex;
            gap: 0;
            margin: 0;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
        }
            .ctn-conoce ul::-webkit-scrollbar{ display: none; }
            .ctn-conoce ul li{
                box-sizing: border-box;
                flex: 0 0 100%;
                margin: 0;
                max-width: none;
                padding: 6px 56px 12px;
                scroll-snap-align: center;
            }
                .ctn-conoce ul li img{ margin: 0 auto 16px; max-width: 120px; }
                .ctn-conoce ul li h4{ font-size: 1.6rem; }
                .ctn-conoce ul li p{ font-size: 1.25rem; }

        .conoce-arrow{
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            padding: 0;
            position: absolute;
            top: 92px;
            transform: translateY(-50%);
            z-index: 5;
        }
            .conoce-arrow.prev{ left: 0; }
            .conoce-arrow.next{ right: 0; }
            .conoce-arrow svg{
                fill: none;
                height: 46px;
                stroke: #ffee01;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 3.2;
                width: 46px;
            }
            .conoce-arrow.is-disabled{ opacity: .25; pointer-events: none; }
    .main-discografia{
        background: url(../img/bg-discografia-movil.jpg) no-repeat center top;
        background-size: cover;
    }
        .ctn-discografia{
            padding: 50px 20px 0;
        }
            .titulo-escucha img {
                max-width: 332px;
                width: 90%;
            }
            .disco-legend li{
                font: 1.1rem / 1.2 'Isidora Sans Semibold';
                gap: 7px;
            }
    .main-apura-oye{
        padding-top: 40px;
    }   
        .ctn-apura-oye h2{
            font-size: 2rem;
            max-width: 300px;
        }
        .ctn-apura-oye h2.no-vuelvas{
            max-width: 350px;
        }
        .trivia{
            margin-top: 140px;
        }
        .trivia-card{
            min-height: 760px;
        }
            .tc-progress{
                font-size: 1.8rem;
            }
            .tc-question{
                font-size: 2rem;
            }
            .tc-opt,
            .tc-explain{
                font-size: 1.3rem;
            }
    .footer-creditos{

    }
        .footer-creditos p{

        }
            .footer-creditos p span{
                display: block;
            }

}