/* ============================================================
   PRUEBA 1: DEGRADADO TÉCNICO (Elegante y Profesional)
   ============================================================ */
/* */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    background-attachment: fixed;
    
}


/* ============================================================
   PRUEBA 2: REJILLA DE INGENIERÍA (Estilo Blueprint)
   Si quieres probar esta, comenta la anterior y activa esta:
   ============================================================ */
/* 
body {
    background-color: #f4f7f6;
    background-image: 
        linear-gradient(#e0e0e0 1px, transparent 1px),
        linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}
*/

/* ============================================================
   PRUEBA 3: Efecto flotante en el telefono al pasar sobre el.
   ============================================================ */

/* Para que tu foto en el iPhone destaque más */
.phone {
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

.phone:hover {
    transform: translateY(-10px); /* Se mueve un poco al pasar el ratón */
}

/* ============================================================
   PRUEBA 4: Mejora de Botones.
   ============================================================ */

/* Botones más modernos para Skeleton */
.button.button-primary {
    background-color: #2196F3;
    border-color: #2196F3;
    box-shadow: 0 4px 6px rgba(33, 150, 243, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   PRUEBA 5: Efecto rotación en las fotos al pie.
   ============================================================ */
/* 

/* Aplicamos el efecto a las fotos de la sección de contacto/categorías */
.category img {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Un efecto "rebote" más elegante */
    border-radius: 8px; /* Bordes redondeados para que no sean tan rígidas */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.category img:hover {
    transform: scale(1.05); /* En lugar de subir, estas crecen un poquito */
    box-shadow: 0 12px 24px rgba(0,0,0,0.2); /* Sombra más profunda al crecer */
    filter: brightness(1.1); /* Les da un pelín más de luz al tocarlas */
}