/* ==========================================================
   PALETA
   ========================================================== */

:root {
    --azul-oscuro: #0B1D33;
    --azul-medio: #123A5A;
    --azul-claro: #1F5A7A;
    --gris-azulado: #6B7C8A;
    --gris-claro: #D7DDE2;
    --blanco: #FFFFFF;
}


/* ==========================================================
   RESET / BASE
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--azul-oscuro);
    color: var(--azul-oscuro);

    overflow: hidden;
}


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ========================================================== */

.servicios {
    width: 100%;
    height: 100dvh;

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

    gap: 12px;
    padding: 12px;
}


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

.tarjeta {
    min-width: 0;
    min-height: 0;

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

    text-align: center;

    padding: clamp(1rem, 2vw, 2rem);

    border-radius: 20px;

    overflow: hidden;
}


/* Luz */

.tarjeta-luz {
    background: var(--gris-claro);
}


/* Agua */

.tarjeta-agua {
    background: var(--azul-claro);
}


/* ==========================================================
   LOGOS
   ========================================================== */

.logo {
    width: clamp(95px, 9vw, 150px);
    height: clamp(55px, 7vw, 95px);

    object-fit: contain;

    margin-bottom: clamp(0.9rem, 2vh, 1.7rem);
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

.tarjeta h1 {
    margin: 0;

    max-width: 100%;

    font-size: clamp(2rem, 3.6vw, 4.3rem);
    line-height: 1;

    font-weight: 750;
}


/* Texto de luz */

.tarjeta-luz h1 {
    color: var(--azul-oscuro);
}


/* Texto de agua */

.tarjeta-agua h1 {
    color: var(--blanco);
}


/* ==========================================================
   MONTO
   ========================================================== */

.monto {
    margin:
        clamp(1rem, 2.5vh, 1.8rem)
        0
        0;

    font-size: clamp(2rem, 3vw, 3.4rem);

    font-weight: 750;

    line-height: 1;
}


.tarjeta-luz .monto {
    color: var(--azul-oscuro);
}


.tarjeta-agua .monto {
    color: var(--blanco);
}


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

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: clamp(1.2rem, 2.8vh, 2rem);

    padding: 0.75rem 1.35rem;

    border-radius: 999px;

    text-decoration: none;

    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 700;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        filter 0.15s ease;
}


/* Botón luz */

.boton-luz {
    background: var(--azul-medio);
    color: var(--blanco);
}


/* Botón agua */

.boton-agua {
    background: var(--azul-oscuro);
    color: var(--blanco);
}


/* Hover solo donde existe mouse */

@media (hover: hover) {

    .boton:hover {
        transform: translateY(-2px);
        filter: brightness(1.08);
    }

}


/* Al pulsar */

.boton:active {
    transform: scale(0.97);
}


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

@media (max-width: 700px) {

    .servicios {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);

        gap: 7px;
        padding: 7px;
    }


    .tarjeta {
        border-radius: 14px;

        padding: 0.65rem 1rem;
    }


    .logo {
        width: 72px;
        height: 42px;

        margin-bottom: 0.35rem;
    }


    .tarjeta h1 {
        font-size: clamp(1.45rem, 6.8vw, 2rem);
        line-height: 1;
    }


    .monto {
        margin-top: 0.45rem;

        font-size: clamp(1.4rem, 5.8vw, 1.9rem);
    }


    .boton {
        margin-top: 0.55rem;

        padding: 0.45rem 1rem;

        font-size: 0.88rem;
    }

}


/* ==========================================================
   PANTALLAS MUY BAJAS
   ========================================================== */

@media (max-height: 600px) {

    .servicios {
        gap: 6px;
        padding: 6px;
    }


    .tarjeta {
        padding: 0.5rem 0.8rem;
    }


    .logo {
        width: 62px;
        height: 34px;

        margin-bottom: 0.25rem;
    }


    .tarjeta h1 {
        font-size: clamp(1.2rem, 4.5vh, 1.8rem);
    }


    .monto {
        margin-top: 0.3rem;

        font-size: clamp(1.2rem, 4vh, 1.6rem);
    }


    .boton {
        margin-top: 0.4rem;

        padding: 0.35rem 0.8rem;

        font-size: 0.8rem;
    }

}