/* --- T-REX TECHNOLOGIES: SPECIAL MODULES (V2.3 - FIX EMPASTAMIENTO) --- */

/* Reset básico para el contenido interno (reforzado) */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* --- CONTENEDORES Y CARDS MAESTRAS --- */
/* (Este reset es crucial para que el Grid funcione bien) */
.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%;
}

/* La Tarjeta Maestra que envuelve el Grid */
.card, .main-card { 
    background: var(--glass-bg); 
    backdrop-filter: blur(20px); 
    border: 1px solid var(--glass-border); 
    border-radius: 32px; 
    padding: 40px; 
    width: 100%; 
    max-width: 900px; /* Ancho ideal para el Grid de Contacto */
    text-align: center; 
    box-shadow: 0 40px 100px rgba(0,0,0,0.6); 
    margin: 0 auto; /* Centrado horizontal */
}

/* Títulos Centrados */
h1 { font-size: 32px; letter-spacing: -1.5px; margin-bottom: 10px; text-align: center;}
h1 span { color: var(--trex-green); text-shadow: 0 0 15px var(--trex-glow); }

/* --- GRIDS DE CONTACTO (FIX ESPACIO HORIZONTAL Y VERTICAL) --- */
.contact-grid { 
    display: grid; 
    /* Bajamos un poco el minmax para que quepan holgadamente con el gap */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 25px; /* <--- Esto crea el espacio horizontal Y vertical de 25px */
    margin-top: 40px; 
    width: 100%;
}

/* Forzamos que la tarjeta del grupo siempre esté sola arriba */
.group-card { 
    grid-column: 1 / -1; 
    margin-bottom: 5px; /* Espacio extra opcional */
}

.contact-item { 
    background: rgba(255,255,255,0.02); 
    border: 1px solid var(--glass-border); 
    padding: 25px; 
    border-radius: 20px; 
    text-decoration: none; 
    transition: 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    height: 100%;
    /* Aseguramos que el contenido no toque los bordes */
    box-sizing: border-box; 
}

/* Si quieres que se vea aún más separado, podemos añadir este hover sutil */
.contact-item:hover { 
    border-color: var(--trex-green); 
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.1);
    transform: translateY(-3px);
}

/* Textos dentro del Item */
.contact-title { font-weight: 800; font-size: 14px; color: #fff; text-transform: uppercase; margin-bottom: 5px; }
.contact-value { font-family: 'Fira Code', monospace; color: var(--trex-green); font-size: 13px; margin-top: auto; padding-top: 15px;}

/* --- ELEMENTOS ESPECIALES --- */
/* Tarjeta del Grupo con QR (Ocupa todo el ancho) */
.group-card { 
    grid-column: 1 / -1; 
    flex-direction: row !important; /* Fuerza horizontal en escritorio */
    align-items: center;
    text-align: left; 
}

.qr-container { margin-left: auto; padding-left: 20px;}
.qr-container img { border-radius: 12px; border: 4px solid #fff; width: 120px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);}

/* --- RESPONSIVE DE ÉLITE --- */
@media (max-width: 768px) {
    .container { padding: 40px 15px; }
    .card { padding: 30px 20px; border-radius: 24px; }
    h1 { font-size: 26px; }
    
    /* El Grid en móvil se empila */
    .contact-grid { gap: 20px; } 

    /* La tarjeta del Grupo se vuelve vertical en móvil */
    .group-card { flex-direction: column !important; text-align: center; }
    .qr-container { margin: 20px auto 0 auto; padding-left: 0; }
}