@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/*Variables*/
:root {
    --azul_kalun: #012E40;
    --naranja_kalun: #DB5800;
    --beige_kalun: #F3E8CC;
    --bg: #F3E8CC;
    --bg-transparente: rgba(0, 0, 0, 0.2);
}

/*tipografias*/
.fredoka {
    font-family: 'Fredoka', sans-serif;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

/*generales*/
p {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-family: 'Fredoka', sans-serif;
}

h2 {
    font-family: 'Fredoka', sans-serif;
}

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

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

/* Quitar borde y sombra del menú hamburguesa */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/*textos*/
.text-kalun-blue {
    color: var(--azul_kalun) !important;

}

.text-kalun-orange {
    color: var(--naranja_kalun) !important;
}

.text-kalun-beige {
    color: var(--beige_kalun) !important;
}


/*Botones*/
.btn-kalun-orange {
    background-color: var(--naranja_kalun);
    color: white;
    font-family: 'Montserrat', sans-serif;
}

.btn-kalun-orange:hover {
    background-color: var(--azul_kalun);
    color: var(--beige_kalun);
}

.btn-kalun-blue {
    background-color: var(--azul_kalun);
    color: var(--beige_kalun);
    font-family: 'Montserrat', sans-serif;
}

.btn-kalun-blue:hover {
    background-color: var(--naranja_kalun);
    color: var(--beige_kalun);
}

.btn-kalun-beige {
    background-color: var(--beige_kalun);
    color: var(--naranja_kalun);
    font-family: 'Montserrat', sans-serif;
}

.btn-kalun-beige:hover {
    background-color: var(--naranja_kalun);
    color: var(--beige_kalun);
}

/*fondos*/
.bg-kalun-orange {
    background-color: var(--naranja_kalun) !important;
}

.bg-kalun-blue {
    background-color: var(--azul_kalun) !important;
}

.bg-kalun-beige {
    background-color: var(--beige_kalun) !important;
}

.contenedor_animacion_sol{
    position: relative;
    width: 470px;
    height: 470px;
    margin: 0 auto;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.contenedor_animacion_sol.cargado {
    opacity: 1;
}

.contenedor_base_cara{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

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

@keyframes girar_aspas {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(90deg); }  /* Derecha 90 */
    30% { transform: rotate(-90deg); } /* Izquierda 180 */
    45% { transform: rotate(90deg); }  /* Derecha 180 */
    90% { transform: rotate(-630deg); } /* Izquierda 2 vueltas (720deg desde 90) */
    100% { transform: rotate(-720deg); } /* Cierre para ciclo infinito suave */
}

.animacion_aspas {
    animation: girar_aspas 35s infinite ease-in-out;
}

.animacion_ojos_seguir {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

@keyframes ojos_movimiento_movil {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(4px, -2px); }
    50% { transform: translate(-4px, 2px); }
    75% { transform: translate(4px, 2px); }
}

.mascara_ojos_principal {
    mask-image: url('../imagenes/Kalun%20descomposicion/Sol/Expresiones/Cara_principal/Base_ojos_sonrojo.png');
    -webkit-mask-image: url('../imagenes/Kalun%20descomposicion/Sol/Expresiones/Cara_principal/Base_ojos_sonrojo.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.mascara_ojos_ejercicio {
    mask-image: url('../imagenes/Kalun%20descomposicion/Sol/Expresiones/Cara_ejercicio/Base_de_ojos.png');
    -webkit-mask-image: url('../imagenes/Kalun%20descomposicion/Sol/Expresiones/Cara_ejercicio/Base_de_ojos.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}


/* Animación de Bostezo */
@keyframes bostezo_boca {
    0%, 20%, 100% { transform: scale(0.8); }
    50%, 70% { transform: scale(1.3); } /* Punto máximo + 1 segundo hold */
}

@keyframes bostezo_lagrimas {
    0%, 25%, 85%, 100% { opacity: 0; }
    50%, 75% { opacity: 1; }
}

@keyframes bostezo_ceja_der {
    0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%, 70% { transform: translate(-4px, 4px) rotate(-8deg); }
}

@keyframes bostezo_ceja_izq {
    0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%, 70% { transform: translate(4px, 4px) rotate(8deg); }
}

.animacion_boca_bostezo {
    animation: bostezo_boca 6s ease-in-out infinite;
    transform-origin: center;
}

.animacion_lagrimas_bostezo {
    animation: bostezo_lagrimas 6s ease-in-out infinite;
    transform-origin: center;
}

.animacion_cejas_bostezo_der {
    animation: bostezo_ceja_der 6s ease-in-out infinite;
    transform-origin: center;
}

.animacion_cejas_bostezo_izq {
    animation: bostezo_ceja_izq 6s ease-in-out infinite;
    transform-origin: center;
}


/* Animación de Grito */
@keyframes grito_boca {
    0%, 20%, 100% { transform: scale(0.8); }
    50% { transform: scale(1.5); }
    70% { transform: scale(1.5); } /* Hold del grito */
}

/* Animación de Grito - Desktop */
@keyframes grito_ceja_der {
    0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%, 70% { transform: translate(15px, 25px) rotate(12deg); }
}

@keyframes grito_ceja_izq {
    0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%, 70% { transform: translate(-15px, 25px) rotate(-12deg); }
}

/* Ajuste Responsivo para Tablets y Celulares */


.animacion_boca_grito {
    animation: grito_boca 4s ease-in-out infinite;
    transform-origin: center;
}

.animacion_cejas_grito_der {
    animation: grito_ceja_der 4s ease-in-out infinite;
    transform-origin: center;
}

.animacion_cejas_grito_izq {
    animation: grito_ceja_izq 4s ease-in-out infinite;
    transform-origin: center;
}

/* Animación de Ojos Grito */
@keyframes grito_ojos_der {
    0%, 20%, 100% { transform: translate(0, 0); }
    50%, 70% { transform: translate(4px, 6px); }
}

@keyframes grito_ojos_izq {
    0%, 20%, 100% { transform: translate(0, 0); }
    50%, 70% { transform: translate(-4px, 6px); }
}

.animacion_ojos_grito_der {
    animation: grito_ojos_der 4s ease-in-out infinite;
    transform-origin: center;
}

.animacion_ojos_grito_izq {
    animation: grito_ojos_izq 4s ease-in-out infinite;
    transform-origin: center;
}



/* Animación de salto con inclinación alterna */
@keyframes jumpAndTilt {
    0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-35px) rotate(10deg); }
    75% { transform: translateY(-35px) rotate(-10deg); }
}
.contenedor_animacion_sol {
    animation: jumpAndTilt 4s infinite ease-in-out;
}

/*Footer*/
.footer_img {
    width: 100%;
    height: 300px;
    background: url("../imagenes/fondo_footer.png");
    background-size: 101%;
    background-position: top;
    background-repeat: no-repeat;
}

.contenerdor-footer {
    background-color: var(--azul_kalun);
    padding: 32px 0;
}

.titulos-footer {
    color: var(--naranja_kalun);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 19px;
}

.footer-enlaces {
    color: var(--beige_kalun);
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    transition: opacity 0.2s;
}

.footer-enlaces:hover {
    color: var(--naranja_kalun);
    opacity: 0.8;
}

.social_icono {
    color: white;
    margin-left: 13px;
    font-size: 18px;
}

.google-play-btn {
    width: 200px;
    height: auto;
}

#QR {
    width: 150px;
}

/*cards de testimonios*/
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-stack {
    position: relative;
    max-width: 1000px;
    margin: 60px auto;
}

.star-rating {
    font-size: 0.9rem;
    color: #ffc107;
}

/*cards de mision y vision*/
.card-kalun-premium {
    background-color: var(--azul_kalun) !important;
    border-radius: 30px !important;
    color: white;
    padding: 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
    border: none !important;
    cursor: default;
}

.card-kalun-premium:hover {
    z-index: 20 !important;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
}


.card-mision {
    margin-bottom: -150px;
    margin-right: 15%;
    width: 85%;
}

.card-vision {
    margin-left: 15%;
    width: 85%;
    z-index: 2;
}

.dot-corner {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
}

.dot-solid {
    background-color: #7D4E2D;
    width: 45px;
    height: 45px;
}

.dot-pattern {
    width: 35px;
    height: 35px;
    background-image: radial-gradient(#7D4E2D 1.5px, transparent 1.5px);
    background-size: 6px 6px;
}

.dt-br {
    bottom: 15px;
    right: 15px;
}

.dt-tr {
    top: 20px;
    right: 20px;
}

.dt-bl {
    bottom: 20px;
    left: 20px;
}

.sun-container {
    background-color: white;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.sun-container img {
    width: 85%;
    object-fit: contain;
}

.contenedor_banner {
    background: url("../imagenes/fondo_transforma.png");
    background-size: 102% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.aplicacion_img {
    transition: transform 0.3s ease;
}

.aplicacion_img:hover {
    transform: scale(1.1);
}

/* Sección de Foro - Tamaño de Avatares */
.foro-avatar {
    width: 60px;
    height: 60px;
    object-fit: contain;
}



/* Media Query para Laptops */
@media (max-width: 1199px) {
    .contenedor_animacion_sol {
        width: 350px;
        height: 350px;
    }
}

/* Media Queries Centralizadas */
@media (max-width: 768px) {
    /* Inicio y Generales */
    .contenedor_animacion_sol {
        width: 200px;
        height: 200px; /* Asegurar altura proporcional */
    }

    .animacion_ojos_seguir {
        animation: ojos_movimiento_movil 6s infinite ease-in-out;
    }

    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    p { font-size: 14px !important; }
    .btn-kalun-orange { font-size: 12px !important; }

    /* Misión y Visión - Tablets/Móvil */
    .card-mision, .card-vision {
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 30px;
        float: none !important;
    }

    .card-kalun-premium h2.display-2 {
        font-size: 2.5rem !important;
    }

    .sun-container {
        width: 180px;
        height: 180px;
        margin: 20px auto;
    }

    .card-kalun-premium {
        padding: 30px;
        margin-bottom: 20px;
    }

    .footer_img{
        height: 150px;
    }

    @keyframes grito_ceja_der {
        0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
        50%, 70% { transform: translate(8px, 10px) rotate(12deg); }
    }
    @keyframes grito_ceja_izq {
        0%, 20%, 100% { transform: translate(0, 0) rotate(0deg); }
        50%, 70% { transform: translate(-8px, 10px) rotate(-12deg); }
    }

    @keyframes grito_ojos_der {
        0%, 20%, 100% { transform: translate(0, 0); }
        50%, 70% { transform: translate(2px, 3px); }
    }

    @keyframes grito_ojos_izq {
        0%, 20%, 100% { transform: translate(0, 0); }
        50%, 70% { transform: translate(-2px, 3px); }
    }
}

@media (max-width: 576px) {
    /* Visibilidad y Alineación Móvil */
    .contenedor-ocultar-celular {
        display: none !important;
    }

    .contenedor-mostrar-celular {
        display: block !important;
    }

    .inicio_h2, .inicio_p {
        text-align: center;
    }
}