/* ========================================
    COMPONENTE: SOLUTIONS
    ========================================
*/

:root {
    --whatsapp-color: #24d272;
}

.solutions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.solutions__container {
    width: 100%;
    height: auto;
    max-width: var(--max-width);
    padding: var(--spacing-s);
    @media only screen and (min-width: 768px) {
        & {
            padding: var(--spacing-l);
        }
    }
}

.solutions--title {
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: clamp(1.8rem, 0.943rem + 4.286vw, 3rem);
    margin: 0 0 var(--spacing-s) 0;
    @media only screen and (min-width: 768px) {
        & {
            font-size: clamp(3rem, 2.537rem + 0.964vw, 3.2rem);
        }
    }@media only screen and (min-width: 1100px) {
        & {
            font-size: 3.2rem;
        }
    }
}

.solutions__grid {
    width: 100%;
    max-width: 450px;
    margin: auto;
    height: fit-content;
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    @media only screen and (min-width: 768px) {
        & {
            grid-template-columns: repeat(2, auto);
            gap: var(--spacing-m);
            max-width: none;
        }
    }
    /* @media only screen and (min-width: 1024px) {
        & {
            gap: var(--spacing-m);
        }
    } */
    /* 
    Para 4 elementos, un grid de 2x2 en desktop es ideal,
    por lo que no necesitamos un breakpoint a 1024px o 1100px que cambie a 3 columnas.
    El breakpoint de 768px ya establece el 2x2.
    */
}

.solutions__grid--element {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: var(--spacing-m) var(--spacing-s);
    transition: all 0.3s ease;
    overflow: hidden;
    max-width: 500px;
    /* aspect-ratio: 3/2; */

    &:hover {
        box-shadow: var(--shadow-elevation-medium);
    }
    
    @media only screen and (min-width: 768px) {
        & {
            padding: var(--spacing-m);
        }
    }
}

.grid--element--link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;

    .icon-container {
        display: inline-block;
        position: relative;

        .solutions__grid--icon {
            font-size: 4.2rem;
            transition: opacity 0.3s ease;
            /* Icono por defecto (naranja y blanco) */
            &:nth-child(1) {
                opacity: 1;
                --fa-primary-color: var(--color-accent);
                --fa-primary-opacity: 1;
                --fa-secondary-color: white;
                --fa-secondary-opacity: 1;
            }
            /* Icono de hover (negro y naranja) */
            &:nth-child(2) {
                opacity: 0;
                inset: 0;
                position: absolute;
                --fa-primary-color: #171717;
                --fa-primary-opacity: 1;
                --fa-secondary-color: var(--color-accent);
                --fa-secondary-opacity: 1;
            }
        }
    }
    
    .solutions__grid--title {
        font-family: var(--font-primary);
        font-size: 1.8rem;
        font-weight: 500;
        text-align: center;
        margin: 0;
        transition: all 0.3s ease;
        @media only screen and (min-width: 768px) {
            & {
                font-size: clamp(1.8rem, 0.6rem + 2.5vw, 2.2rem);
            }
        }@media only screen and (min-width: 1024px) {
            & {
                font-size: clamp(1.8rem, 1.143rem + 2.805vw, 2.6rem); /* Aumentado para llenar mejor el espacio */
            }
        }
    }

    &:hover,
    &:focus {
        transform: scale(1.06);

        .icon-container .solutions__grid--icon:nth-child(1) {
            opacity: 0;
        }
        .icon-container .solutions__grid--icon:nth-child(2) {
            opacity: 1;
        }

        .solutions__grid--title {
            color: var(--color-accent);
        }
    }
}

.solutions__grid--paragraph {
    width: 100%;
    font-family: var(--font-secondary);
    font-weight: 400;
    margin: 0;
    font-size: clamp(1.1rem, 0.9rem + 0.854vw, 1.3rem); /* Aumentado para mayor legibilidad */
    line-height: clamp(1.65rem, 1.4rem + 1.068vw, 1.95rem); /* Ajustado proporcionalmente */
    text-align: center;
    margin-bottom: var(--spacing-s);
    padding: 0;
    flex-grow: 1;
}

.solutions__grid--btn {
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-s);
    width: fit-content;
    margin: auto;
    text-decoration: none;
    background-color: white;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: clamp(1.2rem, 1.057rem + 0.61vw, 1.4rem); /* Aumentado y hecho responsive */
    font-weight: 400;
    transition: all 0.3s ease; 

    &:hover {
        background-color: var(--color-accent);
        color: var(--color-text-wt);
        transform: translateY(-2px);
    }
}

.solutions__grid--btn i {
    animation: arrowMov 1.5s infinite ease-in-out;
    @keyframes arrowMov {
        0% { transform: translateX(0); }
        50% {transform: translateX(3px);}
        100% { transform: translateX(0); }
    }
}


/* =================================================================
   ESTILOS ESPECÍFICOS PARA EL BLOQUE DE CONTACTO (WHATSAPP)
   Usamos una clase ".solutions__grid--element--whatsapp" en el HTML
   para que estos estilos no dependan de la posición del elemento.
   ================================================================= */

/* --- Icono de hover específico para WhatsApp --- */
.solutions__grid--element--whatsapp .grid--element--link .solutions__grid--icon:nth-child(2) {
    --fa-secondary-color: var(--whatsapp-color);
}

/* --- Título específico para WhatsApp (se pone verde en hover) --- */
.solutions__grid--element--whatsapp .grid--element--link:hover .solutions__grid--title {
    color: var(--whatsapp-color);
}

/* --- Botón específico para WhatsApp --- */
.solutions__grid--element--whatsapp .solutions__grid--btn:hover {
    background-color: var(--whatsapp-color);
    border-color: var(--whatsapp-color);
    color: white;
}
/* =================================================================
   LÓGICA PARA MÓVIL vs. ESCRITORIO
   ================================================================= */
/* ESTILOS PARA MÓVIL Y TABLET (hasta 1023px) */
@media only screen and (max-width: 1023px) {
    /* En móvil, el contorno del icono de WhatsApp usa su color de marca por defecto */
    .solutions__grid--element--whatsapp .grid--element--link .solutions__grid--icon:nth-child(1) {
        --fa-primary-color: var(--whatsapp-color);
    }

    /* El botón se muestra "activo" (verde) por defecto */
    .solutions__grid--element--whatsapp .solutions__grid--btn {
        background-color: var(--whatsapp-color);
        border-color: var(--whatsapp-color);
        color: var(--color-text-wt);
    }
}

/* ESTILOS PARA ESCRITORIO (1024px en adelante) */
/* En escritorio, los estilos por defecto se aplican y los de hover ya están definidos arriba,
   por lo que no se necesita una media query específica aquí. El comportamiento ya es el deseado.
*/