/* =========================================
   ESTILO FINAL: YC CLEAN & MASSIVE
   ========================================= */

.yc-clean-section {
    background-color: #000;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    position: relative;

    padding-top: 250px;
    padding-bottom: 150px;

    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(10, 20, 10, 0.85) 50%, rgba(0, 0, 0, 1) 100%),
        url('../public/img/imagenmejorada.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.yc-layout {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
}

/* --- CARRILES LATERALES --- */
.side-track {
    width: 44%;
    display: flex;
    flex-direction: column;
}

.yc-scene {
    height: 70vh;
    min-height: 500px;
    /* Pantalla completa por video */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WRAPPER DEL VIDEO (Estado Base: Apagado) */
.yc-media-wrapper {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;

    /* Estado Inicial: Borroso y Transparente */
    opacity: 0.1;
    transform: scale(0.9);
    filter: blur(5px) grayscale(100%);
    transition: all 0.8s ease-out;
    /* Suavidad al activarse */
}

/* MARCO DEL VIDEO */
.yc-media-wrapper video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
}

/* --- ESTADO ACTIVO (Cuando el JS lo detecta) --- */
.yc-scene.active .yc-media-wrapper {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) grayscale(0);
    /* Se enfoca y toma color */
}

/* Etiquetas */
.yc-label {
    margin-top: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.8s ease;
}

.yc-scene.active .yc-label {
    opacity: 1;
    transform: translateY(0);
}

.yc-label h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.yc-label p {
    font-size: 0.9rem;
    color: #777;
    margin: 4px 0 0;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

/* --- TEXTO CENTRAL (STICKY) --- */
.center-track {
    width: 12%;
    position: relative;
    z-index: 50;
}

.yc-sticky-content {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yc-word-stack {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

/* PALABRA (Estado Base: Apagado) */
.yc-word {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #333;
    /* Gris oscuro */
    margin: 0;
    transition: all 0.5s ease;
    transform: scale(1);
}

/* PALABRA ACTIVA (Blanco Brillante) */
.yc-word.active {
    color: #fff;
    transform: scale(1.3);
    /* Crece */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}


/* Clase para activar el modo vertical */
.yc-media-wrapper.is-vertical video {
    /* Cambiamos la proporción a Vertical (9:16) */
    aspect-ratio: 9/16;

    /* Ajustes para que no se vea gigantesco en pantallas anchas */
    max-height: 80vh;
    /* Nunca más alto que el 80% de la pantalla */
    width: auto;
    /* El ancho se adapta a la altura */
    max-width: 100%;
    /* Pero nunca se sale de su columna */

    /* Centrado */
    margin: 0 auto;
    display: block;
}

/* Ajuste para la etiqueta de texto en videos verticales */
.yc-media-wrapper.is-vertical .yc-label {
    /* La pegamos un poco más porque el video es más angosto visualmente */
    max-width: 100%;
    margin-top: 20px;
    text-align: center;
    /* En verticales queda mejor centrado */
}

/* --- Ajuste Móvil --- */
@media (max-width: 900px) {
    .yc-media-wrapper.is-vertical video {
        width: 100%;
        /* En celular que ocupe todo el ancho */
        height: auto;
        max-height: 80vh;
    }
}

/* =========================================
   SOLUCIÓN VIDEOS VERTICALES (MAGNETIC ALIGN)
   ========================================= */

.yc-media-wrapper.is-vertical video {
    aspect-ratio: 9/16;
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    display: block;

    /* QUITAMOS EL MARGIN: 0 AUTO GENÉRICO */
    /* Lo controlaremos abajo según el lado */
}

/* 1. Si el video está a la DERECHA -> Pegarlo a la IZQUIERDA */
/* Esto elimina el hueco con el texto central */
.side-track.right .yc-media-wrapper.is-vertical video {
    margin-left: 0;
    margin-right: auto;
}

/* 2. Si el video está a la IZQUIERDA -> Pegarlo a la DERECHA */
/* Para que también quede cerca del texto central */
.side-track.left .yc-media-wrapper.is-vertical video {
    margin-left: auto;
    margin-right: 0;
}

/* Ajuste de Texto para Verticales */
.yc-media-wrapper.is-vertical .yc-label {
    max-width: 100%;
    margin-top: 20px;
    /* El texto sigue la alineación del video */
}

.side-track.right .yc-media-wrapper.is-vertical .yc-label {
    text-align: left;
}

.side-track.left .yc-media-wrapper.is-vertical .yc-label {
    text-align: right;
}


/* --- MÓVIL (CENTRADOS) --- */
@media (max-width: 900px) {
    .yc-media-wrapper.is-vertical video {
        width: 100%;
        height: auto;
        max-height: 80vh;
        /* En móvil sí los queremos centrados */
        margin: 0 auto;
    }
}


/* --- NUEVA BARRA DE CRÉDITOS --- */
.yc-credits-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 60px 20px;
    /* Más aire vertical */
    border-top: none;
    width: 100%;
    margin: 0 auto;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Separación amplia entre elementos */
    flex-wrap: wrap;
    justify-content: center;
}

.social-link {
    color: #fff;
    text-decoration: none;

    /* 1. AGRANDADO: Texto mucho más legible */
    font-weight: 600;
    font-size: 1.3rem;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote suave */
    display: flex;
    align-items: center;
    opacity: 0.7;
    /* Sutil por defecto */
}

/* Estilo del Icono (Agrandado) */
.social-link i {
    margin-right: 12px;
    font-size: 1.6rem;
    /* Icono grande */
    transition: transform 0.3s ease;
}

/* Separador */
.separator {
    color: #333;
    font-size: 1.5rem;
    /* Separador más grande */
    font-weight: 100;
}

/* --- COLORES ESPECÍFICOS AL HOVER --- */

/* Facebook (Azul) */
.social-link.fb:hover {
    color: #1877F2;
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
    text-shadow: 0 0 20px rgba(24, 119, 242, 0.6);
    /* Resplandor Azul */
}

/* Instagram (Rosa Vibrante) */
.social-link.ig:hover {
    color: #E1306C;
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
    text-shadow: 0 0 20px rgba(225, 48, 108, 0.6);
    /* Resplandor Rosa */
}

/* TikTok (Rojo/Neon) */
.social-link.tt:hover {
    color: #FE2C55;
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
    text-shadow: 0 0 20px rgba(254, 44, 85, 0.6);
    /* Resplandor Rojo */
}

/* Animación extra para el icono al pasar el mouse */
.social-link:hover i {
    transform: rotate(10deg);
    /* Pequeña rotación divertida */
}


.yc-credits-bar {
    display: flex;
    flex-direction: column;
    /* ESTO HACE LA MAGIA: Pone uno arriba del otro */
    justify-content: center;
    align-items: center;
    gap: 30px;
    /* Espacio entre el título y los iconos */
    padding: 80px 20px 40px 20px;
    border-top: none;
    width: 100%;
    margin: 0 auto;
}

/* Estilo del Título Centrado */
.credits-title {
    color: #888;
    /* Gris elegante */
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-align: center;
}

/* --- (MANTÉN TU CSS DE ICONOS IGUAL QUE ANTES) --- */
.social-links {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Ajuste Móvil */
@media (max-width: 600px) {
    .social-links {
        gap: 20px;
        flex-direction: column;
    }

    .social-link {
        font-size: 1.2rem;
        /* Un poco menos gigante en móvil */
        width: 100%;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        /* Fondo suave en móvil para facilitar el click */
        padding: 10px 20px;
        border-radius: 10px;
    }

    .separator {
        display: none;
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {

    .yc-clean-section {
        padding-top: 150px;
        padding-bottom: 50px;
    }

    /* 1. LAYOUT: Columna única */
    .yc-layout {
        flex-direction: column;
    }

    .side-track {
        width: 100%;
        padding: 0 10px;
    }

    /* Ocultamos duplicados de la derecha */
    .side-track.right {
        display: none;
    }

    /* Altura reducida en móvil para mejor scroll */
    .yc-scene {
        height: 10vh;
    }

    /* 2. MENU FLOTANTE INFERIOR (Inteligente) */
    .center-track {
        position: fixed;
        bottom: 30px;
        top: auto;
        width: 100%;
        height: auto;
        z-index: 100;

        display: flex;
        justify-content: center;

        /* ESTADO INICIAL: OCULTO (Para no molestar en otras secciones) */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        pointer-events: none;
    }

    /* ESTADO VISIBLE (Activado por JS 'sectionObserver') */
    .center-track.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .yc-sticky-content {
        position: relative;
        height: auto;
        width: auto;
        top: 0;
    }

    /* Diseño Píldora Horizontal */
    .yc-word-stack {
        flex-direction: row;
        gap: 20px;

        /* Estilo Vidrio (Glassmorphism) */
        background: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(10px);
        padding: 12px 30px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .yc-word {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
}