/**
 * AGEEMCTI - Paleta de Colores Institucional
 * Navy + Gold theme
 */

:root {
  /* Colores primarios */
  --color-navy: #0A192F;
  --color-navy-light: #112240;
  --color-navy-dark: #061224;
  --color-navy-transparent: rgba(10, 25, 47, 0.9);
  
  /* Colores acento */
  --color-gold: #C9A84C;
  --color-gold-light: #D4B76A;
  --color-gold-dark: #A68A3D;
  --color-gold-transparent: rgba(201, 168, 76, 0.1);
  
  /* Colores neutrales */
  --color-white: #FFFFFF;
  --color-gray-100: #F8F9FA;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-600: #6C757D;
  --color-gray-800: #343A40;
  --color-black: #000000;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(10, 25, 47, 0.05);
  --shadow-md: 0 4px 6px rgba(10, 25, 47, 0.1);
  --shadow-lg: 0 10px 15px rgba(10, 25, 47, 0.15);
  --shadow-gold: 0 4px 14px rgba(201, 168, 76, 0.3);
  
  /* Tipografía */
  --font-heading: 'Merriweather', serif;
  --font-body: 'Open Sans', sans-serif;
}

/* Clases de utilidad personalizadas */
.bg-navy { background-color: var(--color-navy); }
.bg-navy-light { background-color: var(--color-navy-light); }
.bg-navy-dark { background-color: var(--color-navy-dark); }
.bg-gold { background-color: var(--color-gold); }
.bg-gold-light { background-color: var(--color-gold-light); }

.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-gold-light { color: var(--color-gold-light); }

.border-gold { border-color: var(--color-gold); }
.border-navy { border-color: var(--color-navy); }

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* ============================================
   FORMULARIO DE CONTACTO - ESTILOS ESPECÍFICOS
   ============================================ */

/* Focus states para inputs */
.form-input:focus {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2) !important;
}

/* Estados de error */
.form-input.border-red-500 {
    border-color: #ef4444 !important;
}

.form-input.border-red-500:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Botón de submit */
#submitBtn {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
    transition: all 0.3s ease;
}

#submitBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(201, 168, 76, 0.3);
}

#submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Animación para alertas */
.contacto-alert {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para mensajes de error */
.error-message {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hover effects para tarjetas de información */
#contacto .flex.items-start.gap-4 {
    transition: all 0.3s ease;
}

#contacto .flex.items-start.gap-4:hover {
    transform: translateX(5px);
    border-color: rgba(201, 168, 76, 0.5);
}

/* Iconos sociales hover */
#contacto a[aria-label]:hover {
    transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #contacto .bg-white {
        padding: 1.5rem;
    }
    
    #contacto h2 {
        font-size: 1.875rem;
    }
}