/* modules/por-que-elegir/por-que-elegir.css */
/* Por Qué Elegir - Diseño Visual Profesional */

.por-que-elegir-container {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #FAF7F0 0%, #F5E6D3 100%);
    position: relative;
    overflow: hidden;
}

.por-que-elegir-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.por-que-elegir-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3rem;
    font-weight: 700;
    color: #4A4A4A;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    position: relative;
}

.por-que-elegir-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #8B4513;
}

.por-que-elegir-subtitle {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.2rem;
    color: #6B6B6B;
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    line-height: 1.6;
}

/* === GRID PROFESIONAL === */
.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

/* === CARDS MINIMALISTAS === */
.beneficio-card {
    background: white;
    border: 1px solid #E8E6E1;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.beneficio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #8B4513;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.beneficio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(139, 69, 19, 0.15);
    border-color: #D2B48C;
}

.beneficio-card:hover::before {
    transform: scaleX(1);
}

/* === ICONOS PROFESIONALES === */
.beneficio-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Iconos SVG profesionales */
.beneficio-icon[data-icon="rapido"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-icon[data-icon="seguro"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-icon[data-icon="eficaz"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-icon[data-icon="flexibilidad"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-icon[data-icon="experiencia"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-icon[data-icon="soporte"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.beneficio-card:hover .beneficio-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
}

/* === CONTENIDO OPTIMIZADO === */
.beneficio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.beneficio-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #4A4A4A;
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

.beneficio-description {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #6B6B6B;
    line-height: 1.6;
    font-size: 0.9rem;
    font-weight: 400;
}

/* === NÚMEROS DE ESTADÍSTICAS === */
.beneficio-stat {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(139, 69, 19, 0.1);
    color: #8B4513;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(139, 69, 19, 0.2);
}

/* === RESPONSIVE MÓVIL === */
@media (max-width: 768px) {
    .por-que-elegir-container {
        padding: 3rem 1rem;
    }
    
    .por-que-elegir-title {
        font-size: 2.2rem;
    }
    
    .por-que-elegir-subtitle {
        font-size: 1rem;
        margin-bottom: 3rem;
    }
    
    .beneficios-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .beneficio-card {
        height: 250px;
        padding: 1.5rem 1rem;
    }
    
    .beneficio-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .beneficio-title {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    
    .beneficio-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .por-que-elegir-title {
        font-size: 1.8rem;
    }
    
    .beneficio-card {
        height: 220px;
        padding: 1rem;
    }
    
    .beneficio-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .beneficio-title {
        font-size: 1rem;
    }
    
    .beneficio-description {
        font-size: 0.8rem;
    }
}

/* === PATRÓN DE FONDO SUTIL === */
.por-que-elegir-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 25%, rgba(139, 69, 19, 0.02) 25%),
        linear-gradient(-45deg, transparent 25%, rgba(139, 69, 19, 0.02) 25%);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: 0.5;
}