/*======================================================
        PYRO
        Sistema de Gestión de Extintores
        Autor: ChatGPT
======================================================*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #061423;
    color: white;
    overflow-x: hidden;
}

/*===============================
        FONDO
================================*/

.background {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: 
        radial-gradient(circle at top left, #134A8E 0%, transparent 40%),
        radial-gradient(circle at bottom right, #0C2444 0%, transparent 45%),
        linear-gradient(130deg, #04111F, #071C35, #03101D);
    z-index: -3;
}

/*===========================
        PARTICULAS
===========================*/

.particles {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#4EA5FF 1px, transparent 1px);
    background-size: 55px 55px;
    opacity: .12;
    animation: particles 40s linear infinite;
    z-index: -2;
}

@keyframes particles {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-900px);
    }
}

/*=====================================
            NAVBAR
======================================*/

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(20px);
    background: rgba(5, 15, 28, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    z-index: 1000;
}

nav {
    width: 92%;
    max-width: 1450px;
    margin: auto;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 68px;
    transition: .4s;
}

.logo img:hover {
    transform: scale(1.06);
}

/*=====================
        MENU
======================*/

nav ul {
    display: flex;
    list-style: none;
    gap: 45px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: .4s;
    position: relative;
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #49A6FF;
    transition: .4s;
}

nav ul li a:hover {
    color: #49A6FF;
}

nav ul li a:hover::after {
    width: 100%;
}

/*=========================
        BOTON LOGIN
==========================*/

.loginBtn {
    text-decoration: none;
    color: white;
    padding: 14px 30px;
    border-radius: 40px;
    border: 1px solid #BD1E00;
    transition: .35s;
    background: rgba(20, 40, 70, .25);
}

.loginBtn:hover {

    background:#e50914;

    box-shadow:
    0 0 35px rgba(229,9,20,.7);

}

/*===============================
        CONTENIDO
================================*/

.principal {
    width: 92%;
    max-width: 1450px;
    margin: auto;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 120px;
}

/*=========================
        IZQUIERDA
==========================*/

.izquierda {
    width: 50%;
    animation: fadeLeft 1.2s;
}

.etiqueta {

    border:1px solid rgba(229,9,20,.5);
    
    color:#59AFFF;
    
    background:rgba(229,9,20,.08);
    
    }

.izquierda h1 {
    font-size: 72px;
    font-weight: 700;
    line-height: 80px;
}

.izquierda h1 span {

    display:block;
    font-size:105px;

    color:#e50914;

    text-shadow:
    0 0 20px rgba(229,9,20,.6),
    0 0 40px rgba(229,9,20,.35);

}

.izquierda h2 {
    margin-top: 10px;
    font-size: 34px;
    color: #E6EEF8;
    font-weight: 500;
}

.izquierda p {
    margin-top: 25px;
    width: 80%;
    color: #B7C9DA;
    line-height: 34px;
    font-size: 20px;
}

/*==================================================
                BOTONES
===================================================*/

.botones {
    margin-top: 45px;
    display: flex;
    gap: 20px;
}

.btnAzul {
    text-decoration: none;
    color: white;
    background: linear-gradient(135deg, #BD1E00, #BD1E00);
    padding: 18px 38px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: .4s;
    box-shadow: 0 15px 35px rgba(211, 7, 7, 0.854);
}

.btnAzul:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(255, 0, 0, 0.55);
}

.btnTransparente {
    text-decoration: none;
    color: #E3F2FD;
    padding: 18px 38px;
    border-radius: 50px;
    border:1px solid rgba(229,9,20,.45);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px);
    transition: .4s;
}

.btnTransparente:hover {

    background:rgba(229,9,20,.15);

    border-color:#e50914;

    transform:translateY(-5px);

}

/*==================================================
            LADO DERECHO
===================================================*/

.derecha {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circulo {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(41, 121, 255, .35), rgba(0, 0, 0, 0));
    animation: flotar 5s ease-in-out infinite;
    position: relative;
}

.circulo::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 1px solid rgba(80, 170, 255, .15);
}

.circulo::after {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .05);
}

.circulo img {
    width: 320px;
    filter: drop-shadow(0 20px 50px rgba(0, 140, 255, .45));
}

/*==================================================
                TARJETAS
===================================================*/

.cards {
    width: 92%;
    max-width: 1450px;
    margin: 70px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.card {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 25px;
    padding: 40px;
    transition: .4s;
}

.card:hover {
    transform: translateY(-12px);
    border-color: #2196F3;
    box-shadow: 0 20px 45px rgba(33, 150, 243, .25);
}

.card i {

    font-size:45px;

    color:#e50914;

    margin-bottom:20px;

    text-shadow:
    0 0 15px rgba(229,9,20,.6);

}

.card h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.card p {
    color: #B8C7D6;
    line-height: 28px;
}

/*==================================================
            ESTADÍSTICAS
===================================================*/

.estadisticas {
    width: 92%;
    max-width: 1450px;
    margin: 100px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.estadisticas div {
    text-align: center;
    padding: 35px;
    background: rgba(255, 255, 255, .04);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
}

.estadisticas h3 {

    font-size:48px;

    color:#e50914;

    text-shadow:
    0 0 20px rgba(229,9,20,.5);

}

.estadisticas p {
    margin-top: 12px;
    color: #C5D5E3;
}

/*==================================================
                FOOTER
===================================================*/

footer {
    text-align: center;
    padding: 35px;
    color: #8CA4BA;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

/*==================================================
                ANIMACIONES
===================================================*/

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flotar {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

@media (max-width:1100px){

    .principal{

        flex-direction:column;
        text-align:center;
        padding-top:130px;
    }

    .izquierda,
    .derecha{

        width:100%;

    }

    .izquierda p{

        width:100%;
        margin:auto;
        margin-top:25px;

    }

    .botones{

        justify-content:center;

    }

    .cards{

        grid-template-columns:repeat(2,1fr);

    }

    .estadisticas{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    nav{

        flex-direction:column;
        height:auto;
        padding:20px 0;
        gap:15px;

    }

    nav ul{

        flex-wrap:wrap;
        justify-content:center;
        gap:20px;

    }

    .principal{

        padding-top:180px;

    }

    .izquierda h1{

        font-size:48px;
        line-height:55px;

    }

    .izquierda h1 span{

        font-size:70px;

    }

    .izquierda h2{

        font-size:24px;

    }

    .izquierda p{

        font-size:17px;
        line-height:30px;

    }

    .botones{

        flex-direction:column;
        align-items:center;

    }

    .loginBtn,
    .btnTransparente{

        width:280px;
        text-align:center;

    }

    .circulo{

        width:300px;
        height:300px;

    }

    .circulo::before{

        width:340px;
        height:340px;

    }

    .circulo::after{

        width:380px;
        height:380px;

    }

    .circulo img{

        width:180px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .estadisticas{

        grid-template-columns:1fr;

    }

    .card{

        padding:25px;

    }

}

@media (max-width:480px){

    nav{

        width:95%;

    }

    nav ul{

        display:flex;
        flex-direction:column;
        gap:12px;

    }

    .logo img{

        height:55px;

    }

    .izquierda h1{

        font-size:36px;
        line-height:42px;

    }

    .izquierda h1 span{

        font-size:52px;

    }

    .izquierda h2{

        font-size:20px;

    }

    .izquierda p{

        font-size:15px;
        line-height:26px;

    }

    .etiqueta{

        font-size:13px;
        padding:8px 16px;

    }

    .loginBtn,
    .btnTransparente{

        width:100%;
        padding:15px;

    }

    .circulo{

        width:220px;
        height:220px;

    }

    .circulo::before{

        width:250px;
        height:250px;

    }

    .circulo::after{

        width:280px;
        height:280px;

    }

    .circulo img{

        width:130px;

    }

    .card{

        padding:20px;

    }

    .card h3{

        font-size:20px;

    }

    .estadisticas h3{

        font-size:34px;

    }

    footer{

        font-size:14px;
        padding:20px;

    }

}

/*==========================================
        DESTELLOS
==========================================*/

.glow {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4FC3F7;
    box-shadow:
        0 0 10px #4FC3F7,
        0 0 25px #4FC3F7,
        0 0 45px #4FC3F7;
    animation: glowMove 4s linear forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes glowMove {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-220px) scale(3);
    }
}

/*=====================================
        MENU HAMBURGUESA
======================================*/

.menu-toggle{

    display:none;
    font-size:30px;
    color:#e50914;
    cursor:pointer;

}

.mobileLogin{

    display:none;

}

/*=====================================
        MOVILES
======================================*/

@media(max-width:768px){

    nav{

        width:95%;
        height:80px;
        position:relative;

    }

    .menu-toggle{

        display:block;

    }

    .desktopLogin{

        display:none;

    }

    nav ul{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#061423;

        border-radius:15px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:0;

        overflow:hidden;

        max-height:0;

        transition:.4s;

        box-shadow:0 15px 40px rgba(0,0,0,.4);

    }

    nav ul.activo{

        max-height:500px;

        padding:20px 0;

    }

    nav ul li{

        width:100%;

        text-align:center;

    }

    nav ul li a{

        display:block;

        padding:18px;

    }

    .mobileLogin{

        display:block;

    }

}

/*==========================================
      ENLACES LEGALES
==========================================*/

.legal-links{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:15px;
    margin:60px auto 25px;
}

.legal-links a{
    color:#fff;               /* Texto blanco */
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    transition:.3s;
}

.legal-links a:visited{
    color:#fff;               /* Evita que cambien a morado */
}

.legal-links a:hover{
    color:#49A6FF;            /* Azul al pasar el mouse */
}

.legal-links span{
    color:#fff;
}

/* Responsive */
@media (max-width:600px){

    .legal-links{
        flex-direction:column;
        gap:10px;
    }

    .legal-links span{
        display:none;
    }

}

/*==========================================
        MÓVIL
==========================================*/

@media(max-width:600px){

    .legal-links{

        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        gap:10px;

    }

    .legal-links span{

        display:none;

    }

}