/* HERO */
.home{
    position: relative;
    height: 90vh;
    top: 10vh;
    
    display: flex;
    flex-direction: column;
    padding: 5% 3% 0 10%;
    
}
.home-content{
    display: flex;
    flex-direction: row;
}

.home h1 {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 20px;
}
.home h1 span{
    font-weight: bold;
}

.home p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #766d73;
}

.btn-primary {
    display: inline-block;
    background: #54e6f5;
    color: white;
    padding: 14px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}
.btn-primary:hover,
.btn-primary:focus {
    color: white; /* Mantenemos el blanco para que se vea en el fondo azul */
    background: #46c7d3; /* Opcional: Un ligero cambio de color de fondo al hacer hover */
}



/* ESTADÍSTICAS */
.home-stats {
    display: flex;
    position: relative;
    margin-top: 40px;
    width: 80%;
    height: 32%;
    justify-content: space-between;
    left: 10%;
    right: 20%;
    z-index: 20;
    bottom: -2vh;
    background-color: white;
    box-shadow: 0px .5px 7px .5px rgba(47, 47, 47, 0.69);
    border-radius: 20px;
}

/* CADA CAJA DE ESTADÍSTICAS */
.stat-box {
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 20px;
    position: relative;
}

/* LÍNEA DIVISORIA */
.stat-box:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1.3px;
    height: 60%;
    background: #bebebe;
}

/* ICONO */
.stat-box .img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    background-color: #E8FCFC;
    border-radius: 50%;
}

.stat-box .img img {
    width: 50%;
    height: 50%;
}

/* DATA EN COLUMNA Y CENTRADA */
.stat-box .data_home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* si querés centrado: center */
}
.number{
    font-size: 24px;
    font-weight: bold;
}

/* ---------------------- */
/*   RESPONSIVE - MOBILE   */
/* ---------------------- */

/* ---------------------- */
/*    RESPONSIVE MOVIL    */
/* ---------------------- */
@media (max-width: 1300px) {
    /* HOME ocupa exactamente TODO el alto y ancho */
    .home {
        width: 100vw;
        height: auto;
        padding: 25vh 0 0 0;
        margin: 0;
        top: 0; /* elimina desplazamiento */
        
        display: flex;
        flex-direction: column;
        justify-content: center;   /* centra vertical */
        align-items: center;       /* centra horizontal */
        text-align: center;
        position: relative;
    }

    /* CONTENIDO CENTRADO y ancho completo */
    .home-content {
        width: 100%;
        padding: 0 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    /* LA IMAGEN NO EXISTE EN MOVIL */
    .img-container {
        max-width: 100vw;
        padding-top: 8vh;
        margin-bottom: 4vh;
        /* Agregamos esto para centrar la imagen si es más chica que el ancho total */
        display: flex;
        justify-content: center; 
    }

    .img-container img {
        width: 100%;       /* Ocupa el ancho disponible del contenedor */
        min-width: 400px;  /* Opcional: limita el ancho máximo para que no sea gigante en tablets */
        height: auto;      /* CLAVE: Calcula la altura automáticamente según el ancho */
        object-fit: contain; /* Asegura que la imagen entre sin deformarse */
    }
    @media (max-width: 600px) {
        .img-container {
            max-width: 300px;
            padding-top: 12vh;
            margin-bottom: 15vh; /* menos espacio arriba en pantallas muy chicas */
        }
    }

    /* TITULO RESPONSIVE */
    .home h1 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    /* TEXTO RESPONSIVE */
    .home p {
        font-size: 14px;
        padding: 0 10px;
        max-width: 320px;
    }

    /* BOTÓN */
    .btn-primary {
        padding: 12px 28px;
        font-size: 14px;
    }
    .btn-primary:hover,
.btn-primary:focus {
    color: white; /* Mantenemos el blanco para que se vea en el fondo azul */
    background: #46c7d3; /* Opcional: Un ligero cambio de color de fondo al hacer hover */
}

    /* ---------------------- */
    /*        STATS ROW       */
    /* ---------------------- */
    .home-stats {
        width: 100%;
        max-height: 15vh;
        position: absolute;
        bottom: 20px;
        left: 0;
        
        display: flex;
        flex-direction: row;         /* siempre horizontal */
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .stat-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        position: relative;
    }

    /* ICONO MÁS CHICO */
    .stat-box .img {
        width: 40px;
        height: 40px;
    }

    /* NÚMERO Y TEXTO MÁS CHICOS */
    .stat-box .number {
        font-size: 18px;
    }

    .stat-box .label {
        font-size: 12px;
    }

    /* LÍNEA DIVISORIA ENTRE STATS */
    .stat-box:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -12px;
        width: 1px;
        height: 60%;
        background: #c7c7c7;
    }
}