/* Variables de colores para un estilo gaming/oscuro */
:root {
    --bg-black: #080808;      /* Fondo principal casi negro */
    --top-bar-bg: #111111;    /* Barra superior */
    --accent: #f79c1c;        /* Naranja Omega (parecido a Dragon Ball) */
    --text-light: #ffffff;    /* Texto principal blanco */
    --text-muted: #aaaaaa;    /* Texto secundario gris */
    --font-main: 'Roboto', sans-serif;
}

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

body {
    background-color: var(--bg-black);
    color: var(--text-light);
    font-family: var(--font-main);
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* 1. Estilos Barra Superior */
.top-bar {
    background-color: var(--top-bar-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    height: 70px;
    border-bottom: 1px solid #222;
}

.main-logo { height: 60px; } /* Ajusta esto al tamaño de tu logo */

.search-lang { display: flex; align-items: center; gap: 20px; }

.search-box {
    position: relative;
    background-color: #222;
    border-radius: 5px;
    padding: 5px 10px;
}

.search-box input {
    background: transparent;
    border: none;
    color: var(--text-light);
    padding-left: 25px;
}

.search-box i { position: absolute; left: 10px; top: 10px; color: var(--text-muted); }

.lang { color: var(--text-muted); font-size: 14px; cursor: pointer; }

/* 2. Estilos Menú de Navegación */
.main-nav {
    background-color: #0c0c0c;
    border-bottom: 2px solid #222;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.main-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 25px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Efecto hover con icono a color */
.main-nav li a:hover,
.main-nav li.active a {
    color: var(--accent);
}

.main-nav li a i { font-size: 18px; color: #555; } /* Iconos grisados por defecto */

.main-nav li a:hover i,
.main-nav li.active a i {
    color: var(--accent);
}

/* 3. Estilos Carrusel Simulado */
.main-content {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

.carrusel-simulado {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 750px; /* Mantén la altura para portadas verticales */
    overflow: hidden;
    margin-bottom: 50px;
    perspective: 1000px; /* Da efecto 3D a la rotación */
}
.carrusel-contenedor {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carrusel-item {
    position: absolute;
    height: 500px; /* Tamaño base */
    width: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Esta es la transición suave */
    opacity: 0; /* Ocultamos las que no están en posición */
    z-index: 1;
    will-change: transform, opacity;
}
.carrusel-item .overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.carrusel-item.prev {
    opacity: 1;
    z-index: 2;
    transform: translateX(-150%) scale(0.8) rotateY(-10deg);
    filter: blur(1px) grayscale(50%);
}
.carrusel-item.next {
    opacity: 1;
    z-index: 2;
    transform: translateX(150%) scale(0.8) rotateY(10deg);
    filter: blur(1px) grayscale(50%);
}
.carrusel-item.active h1 {
    font-family: 'Playfair Display', serif; /* O tu fuente de títulos */
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    -webkit-text-stroke: 2px #000
    text-shadow: 0px 4px 10px rgba(0,0,0,0.5);
    
    /* EL BORDE: Aquí creamos una sombra negra en todas las direcciones */
    text-shadow: 
    2px 2px 0 #000, 
   -2px 2px 0 #000, 
    2px -2px 0 #000, 
   -2px -2px 0 #000;
        /* Sombra difuminada extra para profundidad */
}
.carrusel-item.active p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;

    /* BORDE más fino para el texto pequeño */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
/* --- ESTADO: CENTRO (active) --- */
.carrusel-item.active {
    opacity: 1;
    z-index: 10;
    height: 700px; /* Tamaño de la portada de Aiko */
    width: 500px;
    transform: translateX(0) scale(1) rotateY(0deg);
    box-shadow: 0 0 40px rgba(247, 156, 28, 0.4);
    border: 2px solid var(--accent);
}

.carrusel-item.active .overlay {
    opacity: 1;
}
.card {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Las imágenes secundarias (las de los lados) */
.card-side {
    height: 450px;
    width: 250px;
    filter: blur(1.5px) grayscale(70%);
}

/* La imagen principal (centro) */
.card-center {
    height: 500px;
    width: 600px;
    z-content: 10;
    margin: 0 -50px; /* Para que parezca que están "detrás" */
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.card .overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
}

.card-center .overlay {
    padding: 40px;
}

.card-center h1 { font-size: 32px; margin-bottom: 10px; color: var(--text-light); }
.card-center p { color: var(--text-muted); font-size: 16px; }

/* Flechas de navegación */
.nav-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: var(--text-light);
    font-size: 24px;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    z-content: 20;
}

.prev-btn { left: 10%; }
.next-btn { right: 10%; }

/* 4. Estilos Caja de Noticias */
.noticias-caja {
    max-width: 900px;
    margin: 0 auto 60px;
    background-color: #111;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.noticia-header {
    background-color: var(--accent);
    padding: 10px 20px;
}

.noticia-header h2 { font-size: 18px; font-weight: 700; color: #000; letter-spacing: 1px; }

.noticia-body { padding: 20px; }
.noticia-body ul li { margin-bottom: 15px; color: var(--text-light); }
.noticia-body strong { color: var(--accent); margin-right: 10px; }

/* 5. Estilos Footer */
.main-footer {
    background-color: #0c0c0c;
    border-top: 1px solid #222;
    padding: 40px 5%; /* Más espacio arriba y abajo */
    color: var(--text-muted);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Empuja el contenido a los extremos */
    align-items: center;
    flex-wrap: wrap; /* Para que en celulares se vea bien */
    gap: 20px;
}

.footer-left p {
    font-size: 14px;
    margin: 0;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-right span {
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent); /* Tu color naranja */
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    font-size: 20px;
    color: #fff;
    transition: 0.3s ease;
}

/* Efecto al pasar el mouse por los iconos */
.social-icons a:hover {
    color: var(--accent);
    transform: translateY(-3px); /* Pequeño salto hacia arriba */
}
/* Contenedor principal del panel */
.status-panel {
    max-width: 900px;
    margin: 20px auto;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

/* Encabezado del panel */
.status-header {
    background: #222;
    color: var(--accent); /* Tu naranja */
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 1px solid #333;
}

/* Lista de proyectos */
.status-list {
    display: flex;
    flex-direction: column;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #222;
    transition: background 0.3s;
}

.status-item:hover {
    background: #1a1a1a;
}

.status-item:last-child { border-bottom: none; }

.project-name {
    font-weight: bold;
    color: #eee;
    font-size: 15px;
}

/* Estilo de las etiquetas (Badges) */
.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-online {
    background: rgba(46, 204, 113, 0.1);
    color: #f39c12;
    border: 1px solid #f39c12;
    animation: blink 2s infinite;
}

.badge-auditions {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    border: 1px solid #f39c12;
    animation: blink 2s infinite; /* ¡Efecto de parpadeo para llamar la atención! */
}

.badge-prep {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* Animación de parpadeo para las audiciones */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.email-text-fixed {
    /* Mantenemos lo que ya tenías */
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    cursor: default;
    user-select: all;
    display: block;
    margin-top: 5px;

    /* --- ESTA ES LA CLAVE --- */
    /* Color blanco sólido con '!important' para que nada lo cambie */
    color: #ffffff !important; 
}

/* Opcional: Para estar 100% seguros, forzamos blanco también en 'hover' */
.email-text-fixed:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
.content-aiko {
    padding: 50px 10%;
    color: white;
    text-align: center;
}

/* El contenedor de las dos columnas */
.main-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea arriba */
    gap: 40px; /* Espacio entre la sinopsis y el video */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Ajustamos la sinopsis para que ocupe la mitad */
.sinopsis {
    flex: 1; /* Toma la mitad del espacio */
    text-align: left; /* Texto a la izquierda para que sea más legible */
    margin: 0; /* Quitamos el margin auto que tenía antes */
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 10px;
    border-left: 5px solid var(--accent);
}

/* Contenedor del video */
.video-container {
    flex: 1; /* Toma la otra mitad del espacio */
    position: relative;
    padding-bottom: 28.125%; /* Relación de aspecto 16:9 para la mitad de la pantalla */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #333;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- AJUSTE PARA CELULARES --- */
@media (max-width: 900px) {
    .main-grid {
        flex-direction: column; /* Se ponen uno debajo del otro */
    }
    .video-container {
        padding-bottom: 56.25%; /* Video más grande en móvil */
        width: 100%;
    }
}
/* Contenedor del póster para controlar el tamaño */
.poster-container {
    width: 100%;
    margin-bottom: 20px; /* Espacio antes de la palabra SINOPSIS */
    display: flex;
    justify-content: center;
}

.aiko-poster {
    width: 100%; /* Se adapta al ancho de la columna de sinopsis */
    max-width: 400px; /* Pero no dejamos que sea más ancha que esto para que no se vea gigante */
    height: auto; /* Mantiene la proporción 5906x8268 sin deformarse */
    border-radius: 8px;
    border: 2px solid rgba(255, 165, 0, 0.3); /* Un borde naranja sutil */
    box-shadow: 0px 0px 20px rgba(255, 165, 0, 0.2); /* Un brillo naranja suave */
    transition: transform 0.3s ease;
}

/* Efecto opcional: al pasar el mouse, el póster resalta */
.aiko-poster:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 30px rgba(255, 165, 0, 0.5);
    border-color: var(--accent);
}
.content-proyectos {
    padding: 50px 10%;
    color: white;
}

.proyectos-title {
    text-align: center;
    color: var(--accent);
    margin-bottom: 40px;
    font-size: 2.5rem;
}

/* Contenedor principal de las tarjetas */
.proyectos-container {
    display: grid;
    /* Esto crea las 2 columnas iguales */
    grid-template-columns: 1fr 1fr; 
    gap: 25px; /* Espacio entre las tarjetas */
    max-width: 1200px; /* Un poco más ancho para que quepan bien las dos */
    margin: 0 auto;
    padding: 20px;
}

/* Ajuste de la tarjeta para que el logo y el texto sigan funcionando bien */
.proyecto-card {
    display: flex;
    flex-direction: column; /* Cambiamos a vertical para que quepan mejor en la columna */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    border-radius: 15px;
    padding: 20px;
    transition: 0.3s;
    text-align: center; /* Centramos el texto para este diseño */
}

/* El cuadro blanco del logo ajustado */
.proyecto-logo {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    height: 180px; /* Altura fija para que todas las tarjetas midan lo mismo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.proyecto-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Responsivo: Si alguien lo ve en celular, vuelve a 1 sola columna */
@media (max-width: 850px) {
    .proyectos-container {
        grid-template-columns: 1fr;
    }
}
.proyecto-info h2 {
    color: white; /* Cambia var(--accent) por 'white' si las quieres blancas */
    margin-bottom: 10px;
}

.proyecto-info p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
}

.status {
    display: inline-block; /* Para que respete el padding */
    margin-top: 15px;
    padding: 5px 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase; /* Todo en mayúsculas se ve más pro */
    color: var(--accent); /* El naranja de tus títulos */
    border: 1px solid var(--accent);
    border-radius: 20px; /* Bordes redondeados tipo píldora */
    background: rgba(255, 140, 0, 0.1); /* Un fondo naranja muy transparente */
    letter-spacing: 1px;
}

/* Para móviles */
@media (max-width: 768px) {
    .proyecto-card {
        flex-direction: column;
        text-align: center;
    }
    .proyecto-logo {
        flex: 0 0 auto;
        width: 150px;
    }
}
/* Color para los que están en desarrollo */
.status.desarrollo {
    color: #ff8c00;
    border-color: #ff8c00;
}
.status.pronto {
    color: #00ccff; /* Un azul cian para variar */
    border-color: #00ccff;
    background: rgba(0, 204, 255, 0.1);
}
/* Color específico para proyectos Pendientes */
.status.pendiente {
    color: #ff4d4d; /* Un rojo vibrante */
    border-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1); /* Brillo rojo muy suave de fondo */
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2); /* Un pequeño resplandor */
}
.aiko-origins-title {
    color: white; /* Color base para "TheOrigins" */
    font-size: 2.5rem; /* Ajusta el tamaño a tu gusto */
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

/* Estilo para SOLO la parte de 'Aiko' en ROJO */
.aiko-red {
    color: #ff0000; /* Un rojo intenso tipo neón */
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.2); /* Un pequeño resplandor para que destaque */
}




/* Contenedor principal: asegura que las tarjetas se pongan de lado */
.cast-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    width: 100%;
}

/* La Tarjeta: ahora con un ancho fijo para que quepan 2 */
.cast-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #121212;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 15px;
    width: 580px; /* Ancho fijo para que no se estiren */
    box-sizing: border-box; /* Evita que el padding sume al ancho */
}

/* Fotos: Tamaño controlado para que no rompan el diseño */
.character-side img, .actor-side img {
    width: 100px;  /* Tamaño fijo */
    height: 100px; /* Tamaño fijo */
    object-fit: cover;
    border: 2px solid #ff9900;
    border-radius: 10px; /* Opcional: bordes un poco redondeados para que no sea un cuadrado seco */
}

.character-side, .actor-side {
    flex: 0 0 110px; /* No permite que las columnas de las fotos crezcan más de esto */
    text-align: center;
}

/* Texto central */
.cast-description {
    flex: 1;
    padding: 0 15px;
    text-align: center;
}

.cast-description p {
    font-size: 0.85rem; /* Texto un poco más pequeño para que quepa bien */
    line-height: 1.4;
    color: #ccc;
    margin-bottom: 10px;
}

/* Audio: para que no se salga */
audio {
    width: 100%;
    height: 30px;
}
/* Responsive para celulares */
@media (max-width: 768px) {
    .cast-row {
        flex-direction: column;
        gap: 20px;
    }
}

.about-section {
    background-color: #0a0a0a; /* Fondo oscuro como tu captura */
    color: #ffffff;
    padding: 50px 20px;
    font-family: 'Arial', sans-serif;
}

.about-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    gap: 40px;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h2 {
    color: #ff9900; /* El naranja de tu menú */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.intro {
    font-style: italic;
    font-size: 1.2rem;
    border-left: 4px solid #ff9900;
    padding-left: 15px;
    margin-bottom: 25px;
}

.about-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #ccc;
}

.about-image {
    flex: 1;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.page-title {
    width: 100%;          /* Que ocupe todo el ancho */
    text-align: center;   /* Centra el texto */
    margin-top: 40px;     /* Espacio arriba */
    margin-bottom: 20px;  /* Espacio antes de los cuadros */
    color: white;         /* Aseguramos que sea blanco */
    display: block;       /* Asegura que se comporte como un bloque independiente */
}


.search-lang {
    display: flex;       /* Los pone uno al lado del otro */
    align-items: center; /* Los centra verticalmente */
    gap: 15px;           /* Les da espacio entre ellos */
}

.music-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* El slider de volumen */
#volume-slider {
    width: 0; /* Empieza oculto */
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    accent-color: #ff9900; /* Color naranja de tu marca */
}

/* Cuando pasas el mouse, se expande la barra */
.music-container:hover #volume-slider {
    width: 80px;
    opacity: 1;
    margin-left: 10px;
}

.nav-music-btn {
    background: none;
    border: none;
    color: #ff9900;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

/*imagen fondo   */
body {
    /* La ruta debe ser donde esté tu imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/BN43P.jpg');
    
    /* Esto hace que la imagen cubra toda la pantalla sin repetirse */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* El fondo no se mueve al bajar con el mouse */
    background-repeat: no-repeat;
    
    /* Color de respaldo por si la imagen no carga */
    background-color: #000; 
    
    margin: 0;
    color: white; /* Para que todo el texto sea blanco por defecto */
}

/* IMPORTANTE: Para que el header y el nav se mantengan negros solidos 
y no se vea el fondo a través de ellos */
.top-bar, .main-nav {
    background-color: #000 !important;
    position: relative;
    z-index: 100;
}


/* La barrita de la derecha */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #000; 
}
::-webkit-scrollbar-thumb {
    background: #ff9900; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e68a00; 
}


.sakura {
    position: fixed;
    top: -50px;
    z-index: 99; /* Para que caigan delante del fondo pero detrás de los botones */
    pointer-events: none; /* Para que no te impidan hacer clic en los botones */
    background: linear-gradient(to bottom right, #ffb7c5, #ff99aa);
    border-radius: 100% 0 100% 0; /* Forma de pétalo */
    opacity: 0.8;
    transform-style: preserve-3d;
}

@keyframes fall {
    0% {
        top: -10%;
        transform: translateX(0) rotateX(0) rotateY(0);
    }
    100% {
        top: 110%;
        transform: translateX(100px) rotateX(720deg) rotateY(360deg);
    }
}
/* --- ESTO VA AL FINAL DEL ARCHIVO index.css --- */

#sakura-control {
    min-width: 30px; /* Evita que se colapse */
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible !important; /* Fuerza a que se vea */
}
.control-hoja-wrapper {
    margin-right: 15px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
#sakura-control:hover {
    transform: scale(1.2); /* Se agranda un poquito al pasar el mouse */
}




.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo negro traslúcido */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Por encima de todo, incluso de los pétalos */
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Cuando el modal esté activo */
.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    position: relative;
    max-width: 500px;
    text-align: center;
}

.welcome-img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.5); /* Brillo naranja como tu tema */
}

/* El botón de cerrar en la esquina */
.close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #ff9900;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
    z-index: 10001;
}



.fanart-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    display: none; /* Escondemos todas */
    animation: fade 0.5s ease;
}

.slide.active {
    display: block; /* Solo mostramos la activa */
}

@keyframes fade {
    from { opacity: 0.4; } 
    to { opacity: 1; }
}

.slider-controls {
    margin-top: 10px;
    color: white;
    cursor: pointer;
    font-size: 20px;
}



/* ============================================================
   SECCIÓN RESPONSIVA (PARA MÓVILES Y TABLETS)
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Ajuste de la barra superior */
    .top-bar {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 10px;
    }
    
    .search-lang {
        width: 100%;
        justify-content: center;
    }

    /* 2. Ajuste del Menú de Navegación */
    .main-nav ul {
        flex-wrap: wrap; /* Permite que los botones bajen si no caben */
    }
    
    .main-nav li a {
        padding: 10px 15px;
        font-size: 13px;
    }

    /* 3. Ajuste del Carrusel (Lo más importante para tu error) */
    .carrusel-simulado {
        height: auto;
        min-height: 500px;
        perspective: none; /* Quitamos 3D en móvil para evitar errores visuales */
    }

    .carrusel-item.active {
        width: 90% !important; /* Que ocupe casi todo el ancho del cel */
        height: 450px !important;
        position: relative;
        transform: none !important;
    }

    /* Ocultamos las imágenes laterales en móvil para que no estorben */
    .carrusel-item.prev, .carrusel-item.next {
        display: none; 
    }

    /* 4. Ajuste de la Grilla (Sinopsis y Video) */
    .main-grid {
        flex-direction: column; /* Video arriba, texto abajo o viceversa */
        align-items: center;
    }

    .sinopsis, .video-container {
        width: 100% !important;
        flex: none;
    }

    /* 5. Ajuste del Reparto (Cast) */
    .cast-container {
        flex-direction: column;
        align-items: center;
    }

    .cast-row {
        width: 100% !important; /* Ya no es 580px, ahora es el ancho del cel */
        flex-direction: column; /* Foto - Texto - Foto en vertical */
        text-align: center;
    }

    .character-side, .actor-side {
        margin-bottom: 10px;
    }

    /* 6. Proyectos */
    .proyectos-container {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    /* 7. Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

/* Ajuste extra para pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 480px) {
    .aiko-origins-title {
        font-size: 1.8rem;
    }
    
    .main-nav li a {
        padding: 8px;
        font-size: 11px;
    }
}