:root {
    --bg-nav: #17C9C4;
    --border-nav: #227F78;
    --text-nav: #0B2322;
    --bg-inicio: #030C0C;
    --miku-cyan: #44B3B3;
    --latam-pink: #E83DA3;
    --btn-inicio-bg: #A0F2F0;
    --btn-inicio-border: #00D1BD;
    --bg-mision: #17C9C4;
    --bg-ayuda: #000000;
    --text-importancia: #38CEC3;
    --bg-footer: #0B2322;
}

html, body {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
    width: 100%;
    max-width: 100vw;
}

body {
    background-color: var(--bg-inicio);
    color: white;
    padding-top: 80px; 
}

@font-face {
  font-family: 'Chillax';
  src: url(fonts/Chillax-Variable.woff2) format('woff2-variations'),
       url(fonts/Chillax-Variable.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

.clash-regular { font-family: 'Clash Display', sans-serif; font-weight: 400; }
.clash-medium { font-family: 'Clash Display', sans-serif; font-weight: 500; }
.clash-semibold { font-family: 'Clash Display', sans-serif; font-weight: 600; }
.clash-bold { font-family: 'Clash Display', sans-serif; font-weight: 700; }
.chillax-regular { font-family: 'Chillax', sans-serif; font-weight: 400; }
.chillax-medium { font-family: 'Chillax', sans-serif; font-weight: 500; }
.chillax-semibold { font-family: 'Chillax', sans-serif; font-weight: 600; }

.titulo-efecto {
    color: #ffffff;
    font-size: 4.5rem;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px;
}

.sombra-teal { text-shadow: 2px 2px 0 #0f7a78, -2px -2px 0 #0f7a78, 2px -2px 0 #0f7a78, -2px 2px 0 #0f7a78, 6px 6px 0 #0f7a78; }
.sombra-magenta { text-shadow: 2px 2px 0 #930058, -2px -2px 0 #930058, 2px -2px 0 #930058, -2px 2px 0 #930058, 6px 6px 0 #930058; }
.sombra-dark { text-shadow: 2px 2px 0 #040404, -2px -2px 0 #040404, 2px -2px 0 #040404, -2px 2px 0 #040404, 6px 6px 0 #040404; }

.navbar {
    background-color: var(--bg-nav);
    height: 80px; 
    z-index: 1030;
}

.texto-oscuro-nav { color: var(--text-nav); }

.fondo-logo-nav {
    background-color: #0B2322;
    border-radius: 0 0 45px 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100px; 
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.logo-nav { height: 66px; }

.navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

.navbar-nav .nav-link {
    color: var(--text-nav) !important;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 20px;
    transition: transform 0.2s ease;
    letter-spacing: 2px;
}

.navbar-nav .nav-link:hover { transform: scale(1.05); }

.navbar-toggler {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    margin: 0 !important;
    z-index: 1050 !important; 
}

@media (min-width: 768px) {
    .borde-nav {
        border-right: 3px solid var(--border-nav);
        padding: 0 0.9%;
    }
    .nav-item:last-child { border-right: none; }
}

.lang-selector {
    top: 20px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
}

.bandera-idioma {
    width: 45px;
    height: 45px;
    position: relative;
    z-index: 3;
}

.lang-options-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 15px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.lang-selector:hover .lang-options-container {
    opacity: 1;
    visibility: visible;
}

.lang-option {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lang-selector:hover .lang-option {
    transform: translateY(0);
}

.lang-option:hover {
    transform: scale(1.1) !important; 
}

#inicio { background-color: var(--bg-inicio); min-height: 95vh; }
.contenedor-planeta-miku { position: absolute; left: 50%; bottom: -9%; transform: translateX(-50%) translateY(35%); width: 45%; max-width: 500px; z-index: 1; }
.img-planeta { width: 100%; height: auto; position: relative; z-index: 2; }
.img-miku { position: absolute; width: 75%; left: 50%; bottom: 82%; transform: translateX(-50%); z-index: 1; }
.contenido-inicio { min-height: 85vh; justify-content: flex-start; }
.texto-miku { color: var(--miku-cyan); font-size: 84px; line-height: 1.2; }
.texto-blanco-inicio { color: #ffffff; font-size: 81px; line-height: 1; }
.texto-latam { color: var(--latam-pink); font-size: 87px; line-height: 0.8; }
.fondo-texto-miku, .fondo-texto-latam { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 440%; }
.subtitulo-inicio { font-size: 36px; line-height: 0.2; letter-spacing: 1px; }
.limite-parrafo-inicio { font-size: 22px; max-width: 1200px; line-height: 1.5; }
.btn-como-ayudar { margin-bottom: 30px; }
.btn-inicio { background-color: var(--btn-inicio-bg); border: 5px solid var(--btn-inicio-border); color: #002320; font-size: 26px; border-radius: 50px; transition: all 0.3s ease; }
.btn-inicio:hover { background-color: #ffffff; color: #002320; transform: scale(1.05); }

#mision { background-color: var(--bg-mision); background-image: url("/imgs/svg/patron-celeste.svg"); background-size: 270px; background-repeat: repeat; color: var(--text-nav); }
.decoracion-inicio, .decoracion-fin { width: 28px; z-index: 0; }
.decoracion-inicio { top: -55px; left: -10px; }
.decoracion-fin { bottom: -20px; right: -10px; }
.caja-texto-mision { position: relative; z-index: 1; }
.desplazamiento-texto-parrafo { padding-top: 14px; }
.limite-parrafo-mision { max-width: 82ch; }
.parrafo-mision { font-size: 24px; line-height: 1.2; }
.img-mision { max-width: 60%; } 
.img-barra-medio { width: 50%; max-height: 3px; object-fit: cover; }
.img-cuadrado-medio { width: 20px; }
.img-barra-parrafo { width: 50%; }

#ayuda { background-color: var(--bg-ayuda); background-image: url("/imgs/svg/patron-negro.svg"); background-size: 180px; background-repeat: repeat; }
.subtitulo-ayuda { font-size: 30px; max-width: 55ch; line-height: 1.4; } 
#ayuda h3 { font-size: 43px; padding-bottom: 10px; }
.img-numero { width: 90px; height: auto; }
.parrafo-paso { font-size: 25px; letter-spacing: 1px; font-weight: 450; } 
.texto-importancia { color: var(--text-importancia); font-size: 24px !important; padding-left: 20px; padding-bottom: 10px; }
.img-puerro { height: 35px; margin-bottom: 10px; }
.img-paso { height: 200px; width: auto; object-fit: contain; }
.img-barra-horizontal { width: 50%; height: 3px; object-fit: cover; opacity: 0.8; }
.contenedor-btn-encontrar { width: 100%; max-width: 90vw; min-height: 120px; transition: all 0.3s ease; margin: 0 auto; }
.contenedor-btn-encontrar:hover { filter: brightness(1.2); transform: scale(1.03); }
.fondo-img-btn { object-fit: fill; z-index: 0; }
.texto-btn-productoras { color: #0B2322; font-size: 26px; line-height: 1.2; z-index: 1; transform: translateY(32px); }
.img-barra-lateral { width: 10vw; max-width: 120px; }

#eventos { background-color: transparent; }

.eventos-header {
    background-color: #DD1784;
    border-top: 25px solid #930058;
    border-bottom: 25px solid #930058;
    padding: 30px 0; 
}

.eventos-body { background-color: #001419; width: 100%; padding: 25px 0; }
.caja-eventos { width: 100%; }
.eventos-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); align-items: center; width: max-content; }
.evento-slide { width: 95vw; max-width: 800px; padding: 0 20px; opacity: 0.3; transform: scale(0.75); transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); flex-shrink: 0; box-sizing: border-box; }
.evento-slide.active { opacity: 1; transform: scale(1); }
.texto-cyan-evento { color: #3BF2E5; }
.titulo-evento { font-size: 3.5rem; }
.parrafo-evento { max-width: 700px; font-size: 1.2rem; line-height: 1.6; margin-bottom: 1rem !important; }

.evento-icono { 
    height: auto; 
    min-height: 320px; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 5px; 
}

.icono-evento { 
    width: 100%;
    max-width: 380px; 
    max-height: 220px; 
    object-fit: contain; 
    margin-bottom: 0; 
}
.btn-evento-inactivo { background-color: #289389; color: #001419 !important; border: none; font-size: 1.2rem; pointer-events: none; margin-top: 50px !important; }

.btn-flecha-evento { background: transparent; border: none; padding: 0; outline: none;}
.btn-flecha-evento svg { width: 45px; height: 45px; fill: none; stroke: #289389; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; }
.btn-flecha-evento:not(:disabled):hover svg { stroke: #3BF2E5; }
.btn-flecha-evento:disabled svg { stroke: #164f4a; cursor: not-allowed; }

.evento-indicador { width: 38px; height: 38px; border: 5px solid #289389; border-radius: 50%; background-color: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.evento-indicador::after { content: ''; width: 14px; height: 14px; background-color: #289389; border-radius: 50%; transition: all 0.3s; }
.evento-indicador.active { border-color: #3BF2E5; }
.evento-indicador.active::after { background-color: #3BF2E5; }

#collabs {
    background-color: #1FC6C2; 
    background-image: url("imgs/svg/patron-celeste.svg"); 
    background-size: 270px;
    background-repeat: repeat;
}

.banda-oscura-collabs {
    background-color: #0f7a78;
    height: 35px;
    bottom: 67%; 
    left: 0;
}

.caja-altavoz {
    max-width: 1300px; 
    width: 100%;
    box-shadow: 0 15px 0 #00756C; 
    border-radius: 30px;
    background-color: #ffffff;
    border: 6px solid #01635E;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.caja-altavoz-header {
    background-color: #04AFA6;
    color: #ffffff;
    border-bottom: 6px solid #01635E; 
    padding: 15px;
    font-size: 4.5rem; 
    text-align: center;
    text-shadow: 2px 2px 0 #00756C, -2px -2px 0 #00756C, 2px -2px 0 #00756C, -2px 2px 0 #00756C, 6px 6px 0 #00756C;
}

.caja-altavoz-body {
    background-color: #ffffff;
}

.texto-altavoz-normal {
    font-family: 'Chillax', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #00514D;
}

.texto-altavoz-resaltado {
    font-weight: 600;
}

.video-box-collabs {
    background-color: #DD1784; 
    border: 8px solid #ffffff; 
    border-radius: 20px;
    width: 100%;
    max-width: 330px; 
    aspect-ratio: 9/16; 
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: 0 auto;
}

.video-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.etiqueta-video {
    background-color: #002320;
    color: #3BF2E5;
    border-radius: 40px;
    padding: 12px 30px;
    display: inline-flex;
    gap: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: -20px;
    position: relative;
    z-index: 2;
}

.etiqueta-video a { color: #3BF2E5; transition: color 0.3s ease; }
.etiqueta-video a:hover { color: #fff; }

#crypton {
    background-color: var(--bg-ayuda); 
    background-image: url("/imgs/svg/patron-negro.svg"); 
    background-size: 180px;
    background-repeat: repeat;
    padding: 100px 0; 
}
.caja-logo-crypton { width: 100%; max-width: 520px; height: auto; }
.caja-texto-crypton { max-width: 1200px; margin: 0 auto;}
.subtitulo-contacto { font-size: 26px; }
.btn-contacto-crypton { background-color: #A0F2F0; color: #002320; transition: transform 0.3s ease; }
.btn-contacto-crypton:hover { background-color: #ffffff; transform: scale(1.05); }

.footer-personalizado {
    background-color: var(--bg-footer);
    color: var(--text-importancia);
}

.icono-footer {
    color: var(--text-importancia);
    font-size: 2.5rem; 
    transition: color 0.3s ease, transform 0.3s ease;
}

.icono-footer:hover {
    color: white;
    transform: scale(1.1);
}

.logo-footer-centro {
    height: 70px; 
    width: auto;
}

.caja-texto-footer {
    max-width: 1400px; 
    margin: 0 auto;
}

.footer-legales {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    color: #38CEC3;
    font-size: 15px;
    margin: 0 auto;
    line-height: 1.5;
    max-width: 1200px; 
}

body.modal-open,
.modal-open .navbar.fixed-top,
.modal-open .modal {
    padding-right: 0 !important; 
}

body.modal-open {
    overflow-y: scroll !important; 
}

.modal-productoras-content {
    background-color: #0B2322;
    border: 4px solid #17C9C4;
    border-radius: 40px;
    position: relative;
    overflow: visible !important; 
}

.btn-cerrar-modal {
    position: absolute;
    top: 25px;
    right: 45px; 
    background: transparent;
    border: none;
    color: white;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    z-index: 1050;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1; 
}

.btn-cerrar-modal:hover {
    color: #17C9C4;
    transform: scale(1.1);
}

.panel-paises {
    max-height: 65vh;
    overflow-y: auto;
    padding: 10px 15px 10px 10px; 
}

.panel-paises::-webkit-scrollbar, .panel-info::-webkit-scrollbar {
    width: 8px;
}
.panel-paises::-webkit-scrollbar-track, .panel-info::-webkit-scrollbar-track {
    background: transparent;
}
.panel-paises::-webkit-scrollbar-thumb, .panel-info::-webkit-scrollbar-thumb {
    background: #17C9C4;
    border-radius: 10px;
}

.btn-pais {
    background-color: #17C9C4;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-decoration: none;
    width: 100%;
}

.btn-pais:hover, .btn-pais.active {
    transform: scale(1.03);
    filter: brightness(1.1);
    color: white;
}

.btn-pais img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.separador-vertical {
    width: 6px;
    background-color: #17C9C4;
    border-radius: 10px;
    height: auto;
}

.separador-horizontal {
    height: 6px;
    width: 100%;
    background-color: #17C9C4;
    border-radius: 10px;
}

.panel-info {
    max-height: 65vh;
    overflow-y: auto;
    padding: 10px 15px 10px 10px; 
}

.titulo-pais-modal {
    color: #17C9C4;
    font-size: 2.8rem;
    letter-spacing: 1px;
}

.productora-item {
    margin-bottom: 30px;
}

.productora-nombre {
    color: white;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s ease;
}

.productora-nombre.tiene-web {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
}

.productora-nombre:hover {
    color: #17C9C4;
}

.productora-redes {
    display: flex;
    gap: 15px;
    margin-top: 5px;
    padding-left: 5px; 
    padding-bottom: 5px; 
}

.productora-redes a {
    color: white;
    font-size: 2.2rem;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px;
}

.productora-redes a:hover {
    color: #17C9C4;
    transform: scale(1.1);
}

@media (max-width: 992px) {
    .texto-miku { font-size: 70px; }
    .texto-blanco-inicio { font-size: 70px; }
    .texto-latam { font-size: 80px; }
    .contenedor-planeta-miku { width: 50%; transform: translateX(-50%) translateY(30%); }
    .titulo-efecto { font-size: 3.5rem; }
    .limite-parrafo-inicio, .parrafo-mision { font-size: 20px; }
    .subtitulo-ayuda { font-size: 22px; }

    .fondo-logo-nav { padding: 0 30px; border-radius: 0 0 35px 0; height: 90px; }
    .logo-nav { height: 60px; }

    .btn-cerrar-modal {
        right: 35px;
        top: 15px;
        z-index: 1060;
    }
    .modal-body {
        padding-top: 50px !important; 
    }
    .panel-paises { max-height: 250px; }
    .panel-info { max-height: none; overflow-y: visible; }
    .titulo-pais-modal { font-size: 2.8rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-collapse {
        left: auto;
        right: 20px;
        transform: none;
    }
    .navbar-nav .nav-link { font-size: 15px; letter-spacing: 1px; }
    .borde-nav { padding: 0 0.4%; }
}

@media (max-width: 767px) {
    .navbar-collapse { 
        position: relative; 
        left: 0; 
        transform: none; 
        padding-top: 15px; 
        background-color: var(--bg-nav); 
        padding-bottom: 10px; 
        z-index: 105; 
    }

    .texto-miku, .texto-blanco-inicio { font-size: 60px; }
    .texto-latam { font-size: 70px; }
    .contenedor-planeta-miku { width: 150%; transform: translateX(-50%) translateY(35%); }
    .subtitulo-inicio { font-size: 30px; line-height: 0.2; letter-spacing: 1px}
    
    .titulo-efecto { 
        font-size: clamp(1.8rem, 8vw, 2.5rem); 
        word-break: break-word;
        text-shadow: 2px 2px 0 var(--shadow-color), -2px -2px 0 var(--shadow-color), 2px -2px 0 var(--shadow-color), -2px 2px 0 var(--shadow-color), 4px 4px 0 var(--shadow-color);
    }
    .sombra-teal { text-shadow: 2px 2px 0 #0f7a78, -2px -2px 0 #0f7a78, 2px -2px 0 #0f7a78, -2px 2px 0 #0f7a78, 4px 4px 0 #0f7a78; }
    .sombra-magenta { text-shadow: 2px 2px 0 #930058, -2px -2px 0 #930058, 2px -2px 0 #930058, -2px 2px 0 #930058, 4px 4px 0 #930058; }
    .sombra-dark { text-shadow: 2px 2px 0 #040404, -2px -2px 0 #040404, 2px -2px 0 #040404, -2px 2px 0 #040404, 4px 4px 0 #040404; }

    .limite-parrafo-inicio, .parrafo-mision, .subtitulo-ayuda, .subtitulo-contacto { font-size: 18px; }
    
    .texto-btn-productoras { 
        font-size: clamp(15px, 4.5vw, 22px); 
        transform: translateY(22px); 
        line-height: 1.1; 
    }
    
    .img-numero { width: 80px; }
    
    #ayuda h3 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    
    .img-barra-medio, .img-barra-parrafo { width: 70%; }
    .img-barra-medio { height: 5px; object-fit: cover; }
    
    .titulo-evento { font-size: 2.2rem; }
    .parrafo-evento { font-size: 1rem; }
    .evento-slide { max-width: 100vw; }
    .evento-icono { min-height: auto; }
    .icono-evento { width: 150px; height: 150px;}
    .btn-evento-inactivo { margin-top: 15px !important; }

    .caja-altavoz-header { font-size: 2.5rem; padding: 10px 25px; }
    .texto-altavoz-normal { font-size: 18px; }
    
    #crypton { padding: 60px 0; }
    
    .caja-texto-footer { 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }
    .caja-texto-footer .d-flex {
        justify-content: center;
        width: 100%;
        gap: 30px !important;
    }
    
    .titulo-pais-modal { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .btn-pais { font-size: clamp(1rem, 4.5vw, 1.2rem); padding: 10px 15px; }
    .productora-nombre { font-size: 1.4rem; }
}

@media (max-width: 500px) {
    .subtitulo-inicio { font-size: 30px; line-height: 1; letter-spacing: 1px}
    .contenedor-planeta-miku { width: 80%; transform: translateX(-50%) translateY(30%); }
    
    .texto-btn-productoras { font-size: clamp(13px, 4vw, 18px); transform: translateY(18px); }
    
    .decoracion-inicio, .decoracion-fin { width: 25px; }
    .decoracion-inicio { top: -10px; left: 10px; }
    .decoracion-fin { bottom: -10px; right: 10px; }
    #inicio { min-height: 60vh; }
    
    .titulo-pais-modal { font-size: 1.8rem; }
    .btn-pais { font-size: 0.95rem; padding: 8px 15px; gap: 10px; }
    .btn-pais img { width: 25px; height: 25px; }
    .productora-nombre { font-size: 1.2rem; }
}