/* ==========================================================================
   COMPONENTES
   ========================================================================== */

/* Tarjetas (Cards) de proyectos o servicios */
.service-card, .card {
    background: var(--white);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: 0.3s;
}

.card { padding: 0; overflow: hidden; } /* Para que la imagen no se salga de las esquinas redondeadas */

/* Efecto de zoom en la imagen de la tarjeta al pasar el ratón */
.card-image { 
    height: 200px; 
    background-size: cover; 
    background-position: center; 
    background-color: #ddd; 
    transition: 0.5s; 
}
.card:hover .card-image { transform: scale(1.1); }

.card-content { padding: 20px; }

/* Botones con estilo profesional */
.btn {
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
}
.primary { background: var(--primary); color: white; }
.github { background: #333; color: white; }

/* Botón flotante de contacto (WhatsApp) */
.whatsapp-float {
    position: fixed; 
    bottom: 30px; 
    right: 30px;
    background: #25d366; 
    color: white;
    padding: 12px 25px; 
    border-radius: 50px;
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    z-index: 1500;
}