/* =========================================
   CONFIGURACIÓN GENERAL
   ========================================= */

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


body {
    min-height: 100vh;

    font-family: Georgia, "Times New Roman", serif;

    background-color: #fffde9;
}


/* =========================================
   PANTALLA PRINCIPAL
   ========================================= */

.home {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: linear-gradient(
        180deg,
        #fffdf1 0%,
        #fff59d 100%
    );

    padding: 40px 25px;
}


/* =========================================
   LOGO
   ========================================= */

.logo {

    width: 260px;

    max-width: 90%;

    height: auto;

    margin-top: 5px;
}


/* =========================================
   SECCIÓN DE BIENVENIDA
   ========================================= */

.bienvenida {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 60px;
}


/* =========================================
   TÍTULO
   ========================================= */

.bienvenida h1 {

    text-align: center;

    color: #286b3c;

    font-size: 32px;

    line-height: 1.35;

    font-weight: bold;
}


/* =========================================
   BOTÓN VER MENÚ
   ========================================= */

.btn-menu {

    width: 100%;

    max-width: 265px;

    margin-top: 48px;

    padding: 14px 20px;

    border: none;

    border-radius: 13px;

    background: linear-gradient(
        90deg,
        #2c823b,
        #40d47a
    );

    color: white;

    font-family: Arial, sans-serif;

    font-size: 15px;

    cursor: pointer;

    transition: 0.3s ease;
}


/* =========================================
   EFECTO AL PASAR EL MOUSE
   ========================================= */

.btn-menu:hover {

    transform: scale(1.02);

    opacity: 0.9;
}


/* =========================================
   EFECTO AL PRESIONAR
   ========================================= */

.btn-menu:active {

    transform: scale(0.98);
}

/* ==========================================
   INDICADORES
   ========================================== */
/* ==========================================
   INDICADORES DE PÁGINA
   ========================================== */

.indicadores {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 9px;

    margin-top: 28px;

    padding-bottom: 18px;
}


/* ==========================================
   INDICADOR NORMAL
   ========================================== */

.indicador {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #63cbb5;

    opacity: 0.55;

    transform: scale(1);

    box-shadow: none;

    transition:
        width 0.3s ease,
        height 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================
   INDICADOR ACTIVO
   ========================================== */

.indicador.activo {

    width: 9px;
    height: 9px;

    background: #16806a;

    opacity: 1;

    transform: scale(1.15);

    box-shadow:
        0 0 5px rgba(22, 128, 106, 0.45),
        0 0 10px rgba(22, 128, 106, 0.25);

    animation: iluminacionIndicador 2s ease-in-out infinite;
}


/* ==========================================
   ANIMACIÓN DE ILUMINACIÓN
   ========================================== */

@keyframes iluminacionIndicador {

    0% {

        transform: scale(1.05);

        box-shadow:
            0 0 4px rgba(22, 128, 106, 0.35),
            0 0 8px rgba(22, 128, 106, 0.20);

    }

    50% {

        transform: scale(1.3);

        box-shadow:
            0 0 7px rgba(22, 128, 106, 0.55),
            0 0 16px rgba(22, 128, 106, 0.30);

    }

    100% {

        transform: scale(1.05);

        box-shadow:
            0 0 4px rgba(22, 128, 106, 0.35),
            0 0 8px rgba(22, 128, 106, 0.20);

    }

}





/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 360px) {

    .home {

        padding: 30px 20px;

    }


    .logo {

        width: 230px;

    }


    .bienvenida {

        margin-top: 45px;

    }


    .bienvenida h1 {

        font-size: 28px;

    }


    .btn-menu {

        max-width: 250px;

    }
}

/* ==========================================
   BOTÓN VER MENÚ
   ========================================== */

.btn-menu {

    width: 220px;
    height: 55px;

    border: none;
    border-radius: 30px;

    background-color: #0F6B45;
    color: white;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 30px auto;

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* EFECTO AL PASAR EL MOUSE */

.btn-menu:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.20);
}


/* EFECTO AL PRESIONAR */

.btn-menu:active {

    transform: scale(0.96);

}


/* ==========================================
   TEXTO DEL BOTÓN
   ========================================== */

.texto-boton {

    display: inline-block;

}


/* ==========================================
   CÍRCULO DE CARGA
   ========================================== */

.loader {

    width: 20px;
    height: 20px;

    border: 3px solid rgba(255, 255, 255, 0.4);

    border-top: 3px solid white;

    border-radius: 50%;

    display: none;

    animation: girar 0.8s linear infinite;

}


/* ANIMACIÓN DEL CÍRCULO */

@keyframes girar {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* ==========================================
   ESTADO CARGANDO
   ========================================== */

.btn-menu.cargando {

    cursor: wait;

    opacity: 0.9;

}


/* Cuando está cargando mostramos el loader */

.btn-menu.cargando .loader {

    display: inline-block;

}


/* Ocultamos el texto mientras carga */

.btn-menu.cargando .texto-boton {

    display: none;

}

/* ==========================================
   BOTÓN REGRESAR A HOME
   ========================================== */

.btn-regresar {

    position: absolute;

    top: 20px;
    left: 20px;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 50%;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    z-index: 100;

}


/* ==========================================
   FLECHA
   ========================================== */

.flecha-regresar {

    font-size: 32px;

    line-height: 1;

    color: #176b4d;

    font-family: Arial, sans-serif;

    margin-top: -3px;

    transition: opacity 0.2s ease;

}


/* ==========================================
   HOVER
   ========================================== */

.btn-regresar:hover {

    transform: translateX(-3px);

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.12);

}


/* ==========================================
   CLICK
   ========================================== */

.btn-regresar:active {

    transform: scale(0.94);

}


/* ==========================================
   LOADER
   ========================================== */

.loader-regresar {

    display: none;

    width: 17px;
    height: 17px;

    border: 3px solid rgba(23, 107, 77, 0.25);

    border-top: 3px solid #176b4d;

    border-radius: 50%;

    animation:
        girarRegresar 0.7s linear infinite;

}


/* ==========================================
   ESTADO CARGANDO
   ========================================== */

.btn-regresar.cargando {

    pointer-events: none;

}


/* Ocultar flecha */

.btn-regresar.cargando
.flecha-regresar {

    display: none;

}


/* Mostrar loader */

.btn-regresar.cargando
.loader-regresar {

    display: block;

}


/* ==========================================
   ANIMACIÓN
   ========================================== */

@keyframes girarRegresar {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}