/* ===== VARIABLES DE COLOR ===== */
:root {
    /* Colores principales de la paleta */
    --primary: #4361ee;       /* Azul principal para botones/accentos */
    --secondary: #3a0ca3;     /* Azul oscuro para títulos */
    --accent: #f72585;        /* Rosado para detalles destacados */
    --light: #f8f9fa;         /* Fondo claro */
    --dark: #212529;          /* Texto oscuro principal */
    --gray: #6c757d;          /* Texto gris secundario */
}

/* ===== RESET BÁSICO ===== */
* {
    margin: 0;                /* Elimina márgenes por defecto */
    padding: 0;               /* Elimina padding por defecto */
    box-sizing: border-box;   /* Modelo de caja más intuitivo */
}

/* ===== ESTILOS GENERALES DEL CUERPO ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Fuente moderna */
    line-height: 1.6;         /* Espaciado entre líneas */
    color: var(--dark);       /* Color de texto principal */
    background-color: var(--light); /* Fondo claro */
    min-height: 100vh;        /* Ocupa al menos toda la pantalla */
    display: flex;            /* Flexbox para centrado fácil */
    flex-direction: column;   /* Organización vertical */
    align-items: center;      /* Centrado horizontal */
    justify-content: center;  /* Centrado vertical */
    padding: 2rem;           /* Espaciado interno */
    /* Degradados sutiles de fondo */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(247, 37, 133, 0.05) 0%, transparent 20%);
}

/* ===== TARJETA PRINCIPAL ===== */
.maintenance-card {
    max-width: 800px;         /* Ancho máximo */
    width: 100%;              /* Ocupa todo el ancho disponible */
    background: white;        /* Fondo blanco */
    padding: 3rem;            /* Espaciado interno grande */
    border-radius: 16px;      /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave */
    text-align: center;       /* Texto centrado */
    position: relative;       /* Para pseudo-elementos */
    overflow: hidden;         /* Esconde exceso */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Borde sutil */
}

/* Barra superior decorativa */
.maintenance-card::before {
    content: '';              /* Necesario para pseudo-elementos */
    position: absolute;       /* Posicionamiento absoluto */
    top: 0;                   /* Arriba del todo */
    left: 0;                  /* Izquierda del todo */
    width: 100%;              /* Ancho completo */
    height: 6px;              /* Altura pequeña */
    background: linear-gradient(90deg, var(--primary), var(--accent)); /* Degradado azul-rosado */
}

/* ===== LOGO ===== */
.logo {
    max-width: 180px;         /* Tamaño máximo controlado */
    margin-bottom: 2rem;      /* Espacio debajo */
    height: auto;             /* Altura proporcional */
}

/* ===== TIPOGRAFÍA ===== */
h1 {
    color: var(--secondary);  /* Color azul oscuro */
    margin-bottom: 1.5rem;    /* Espacio debajo */
    font-size: 2.25rem;       /* Tamaño grande */
    font-weight: 700;         /* Negrita */
}

/* Texto descriptivo */
.description {
    font-size: 1.125rem;      /* Tamaño legible */
    color: var(--gray);       /* Color gris */
    max-width: 600px;         /* Ancho máximo para mejor lectura */
    margin-left: auto;        /* Centrado */
    margin-right: auto;       /* Centrado */
}

/* ===== DIVISOR VISUAL ===== */
.divider {
    height: 1px;              /* Línea fina */
    /* Degradado transparente en los extremos */
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 2.5rem 0;         /* Espacio generoso */
}

/* ===== SECCIÓN DE CONTACTO ===== */
.contact-section {
    margin-top: 2rem;         /* Separación de la sección anterior */
}

/* Título de contacto */
.contact-title {
    margin-bottom: 1.5rem;    /* Espacio debajo */
    color: var(--secondary);  /* Mismo azul que h1 */
    font-size: 1.5rem;        /* Tamaño mediano */
}

/* Grid de métodos de contacto */
.contact-grid {
    display: grid;                            /* Usa CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 1.5rem;                              /* Espacio entre items */
    margin-top: 1.5rem;                       /* Espacio arriba */
}

/* Items de contacto individuales */
.contact-item {
    background: var(--light);  /* Fondo gris claro */
    padding: 1.5rem;           /* Espaciado interno */
    border-radius: 8px;        /* Bordes redondeados */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación suave */
    text-align: left;          /* Alineación izquierda */
}

/* Efecto hover para items */
.contact-item:hover {
    transform: translateY(-4px);  /* Levanta ligeramente */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Iconos de contacto */
.contact-icon {
    font-size: 1.5rem;        /* Tamaño grande */
    color: var(--primary);    /* Color azul principal */
    margin-bottom: 1rem;      /* Espacio debajo */
}

/* Etiquetas de contacto */
.contact-label {
    font-weight: 600;         /* Negrita */
    margin-bottom: 0.5rem;    /* Espacio debajo */
    color: var(--dark);       /* Color oscuro */
}

/* Valores de contacto */
.contact-value {
    color: var(--gray);       /* Color gris */
    word-break: break-word;   /* Ajuste de texto largo */
}

/* ===== REDES SOCIALES ===== */
.social-links {
    display: flex;            /* Flexbox para alineación */
    justify-content: center;  /* Centrado horizontal */
    gap: 1rem;                /* Espacio entre iconos */
    margin-top: 2.5rem;       /* Espacio arriba */
}

/* Iconos sociales individuales */
.social-link {
    width: 44px;              /* Tamaño fijo */
    height: 44px;             /* Tamaño fijo */
    border-radius: 50%;       /* Círculo perfecto */
    background: var(--light); /* Fondo gris claro */
    display: flex;            /* Flexbox para centrado */
    align-items: center;      /* Centrado vertical */
    justify-content: center;  /* Centrado horizontal */
    color: var(--dark);       /* Color oscuro */
    text-decoration: none;    /* Sin subrayado */
    transition: all 0.2s ease; /* Transición suave */
}

/* Efecto hover para iconos */
.social-link:hover {
    background: var(--primary); /* Fondo azul */
    color: white;             /* Texto blanco */
    transform: scale(1.1);    /* Ligero aumento de tamaño */
}

.custom-icon {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Evita deformaciones */
    transition: transform 0.2s ease; /* Animación */
}

.custom-icon2 {
    width: 30px;
    height: 30px;
    object-fit: contain; /* Evita deformaciones */
    transition: transform 0.2s ease; /* Animación */
}

/* Efecto hover para el icono*/
.social-link:hover .custom-icon {
    transform: scale(1.1); /* Escala ligeramente al pasar el ratón */
    filter: brightness(1.2); /* Aclara la imagen */
}

/* ===== PIE DE PÁGINA ===== */
.footer {
    margin-top: 3rem;         /* Espacio generoso arriba */
    font-size: 0.875rem;      /* Texto pequeño */
    color: var(--gray);       /* Color gris */
}

/* ===== MEDIA QUERIES RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Ajustes para tablet/móvil */
    .maintenance-card {
        padding: 2rem 1.5rem; /* Menos padding */
    }
    
    /* Títulos más pequeños */
    h1 {
        font-size: 1.75rem;
    }
    
    /* Texto más pequeño */
    .description {
        font-size: 1rem;
    }
}