@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.ga-grafico-container,
.ga-grafico-container * {
    box-sizing: border-box;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.ga-grafico-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.ga-grafico-visual {
    position: relative;
    width: 100%;
}

.ga-grafico-ilustracion {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ga-btn-ilustracion {
    position: absolute;
    transition: transform 0.2s ease;
    cursor: pointer;
    z-index: 10;
    height: auto;
}

.ga-btn-captacion {
    right: 38%;
    top: 15%;
    transform: scale(0.25);
}

.ga-btn-captacion:hover {
    transform: scale(0.3);
}

.ga-btn-potabilizacion {
    right: 48%;
    top: -8%;
    transform: scale(0.2);
}

.ga-btn-potabilizacion:hover {
    transform: scale(0.25);
}

.ga-btn-almacenamiento {
    left: 23%;
    top: 5%;
    transform: scale(0.2);
}

.ga-btn-almacenamiento:hover {
    transform: scale(0.25);
}

.ga-btn-depuracion {
    left: 52%;
    top: 53%;
    transform: scale(0.2);
}

.ga-btn-depuracion:hover {
    transform: scale(0.25);
}

.ga-card-ilustracion {
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 15px;
    position: absolute;
    border: 5px solid rgba(175, 175, 175, 0.2);
    display: none;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ga-card-ilustracion.ga-card-visible {
    display: block;
}

.ga-card-ilustracion h2 {
    font-size: 24px;
    font-weight: 900;
    text-shadow: 1px 1px black;
    margin: 0 0 8px;
    line-height: 1.2;
}

.ga-card-ilustracion p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.ga-card-captacion {
    top: 17%;
    right: -1%;
}

.ga-card-potabilizacion {
    top: -5%;
    right: 11%;
}

.ga-card-almacenamiento {
    top: 7%;
    right: 26%;
}

.ga-card-depuracion {
    top: 57%;
    right: -2%;
}

.ga-card-captacion h2 {
    color: #A6BBC8;
}

.ga-card-potabilizacion h2 {
    color: #00C8D2;
}

.ga-card-almacenamiento h2 {
    color: #82FFFF;
}

.ga-card-depuracion h2 {
    color: #9B6EFF;
}


@media (max-width: 767px) {
    .ga-grafico-visual {
        gap: 14px;
    }

    .ga-btn-captacion {
        right: 27%;
        top: 6%;
        transform: scale(0.32);
    }

    .ga-btn-potabilizacion {
        right: 35%;
        top: -6%;
        transform: scale(0.28);
    }


    .ga-btn-almacenamiento {
        left: 14%;
        top: -3%;
        transform: scale(0.28);
    }

    .ga-btn-depuracion {
        left: 32%;
        top: 18%;
        transform: scale(0.28);
    }

    .ga-card-ilustracion {
        display: block;
        position: initial;
        margin: 8px auto;
        border-radius: 0;
        border: none;
    }
}

@media (max-width: 480px) {
    .ga-btn-ilustracion {
        display: none;
    }

    .ga-card-ilustracion {
        width: calc( 100% - 80px );
        margin: 8px 40px;
    }
}