/* ==========================================================================
   ESTILOS INDEPENDIENTES: CONTACTO.HTML
   Paleta Agresiva de Alto Contraste: Sangre Oscura (#3a0ca3), Rojo (#f72585)
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Helvetica, Arial, sans-serif; background-color: #1a1a2e; color: #e2e8f0; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.top-disclaimer-banner { background-color: #ffb703; color: #000; padding: 12px 0; font-size: 13px; font-weight: bold; }
.container-disclaimer { display: flex; align-items: center; gap: 10px; }

.main-header { background-color: #161625; padding: 25px 0; border-bottom: 2px solid #f72585; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-brand { text-decoration: none; display: flex; align-items: center; gap: 5px; }
.logo-text { font-size: 24px; color: #fff; font-weight: 800; }
.logo-red { color: #f72585; }
.logo-ext { color: #64748b; font-size: 12px; }
.main-nav { display: flex; gap: 20px; }
.nav-link { color: #94a3b8; text-decoration: none; font-weight: bold; }
.nav-link.active { color: #f72585; }

.contact-section { padding: 100px 0; background: linear-gradient(180deg, #161625 0%, #1a1a2e 100%); }
.grid-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.badge-contact { color: #f72585; font-weight: bold; text-transform: uppercase; font-size: 14px; }
.info-side h1 { font-size: 42px; color: #fff; margin-top: 10px; }
.info-lead { font-size: 18px; color: #cbd5e1; margin-top: 20px; }
.office-data { margin-top: 30px; background-color: #161625; padding: 20px; border-left: 4px solid #f72585; }

.contact-card-form { background-color: #161625; padding: 40px; border-radius: 8px; border: 1px solid #2d2d44; }
.contact-card-form h3 { color: #fff; margin-bottom: 25px; }
.field-box { margin-bottom: 20px; }
.field-box label { display: block; color: #94a3b8; margin-bottom: 5px; font-size: 14px; }
.field-box input { width: 100%; padding: 12px; background-color: #1a1a2e; border: 1px solid #2d2d44; color: #fff; border-radius: 4px; }
.field-box input:focus { border-color: #f72585; outline: none; }
.btn-submit { width: 100%; padding: 15px; background-color: #f72585; color: #fff; border: none; font-weight: bold; border-radius: 4px; cursor: pointer; }
.btn-submit:hover { background-color: #b5179e; }
.err-msg { color: #f72585; font-size: 12px; display: none; margin-top: 5px; }

.main-footer { background-color: #161625; padding: 60px 0 30px 0; margin-top: 5px; }
.grid-four-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer-description { color: #64748b; font-size: 12px; }
.footer-navigation-list h4 { color: #fff; font-size: 14px; margin-bottom: 15px; }
.footer-navigation-list ul { list-style: none; }
.footer-navigation-list ul li a { color: #94a3b8; text-decoration: none; font-size: 13px; }
.footer-divider { border: 0; border-top: 1px solid #2d2d44; margin: 30px 0; }
.footer-disclaimer-legal-box { background-color: #1a1a2e; padding: 15px; border-radius: 4px; }
.footer-disclaimer-legal-box p { font-size: 11px; color: #64748b; }
.footer-bottom-flex { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.copyright, .legal-footer-links a { color: #64748b; font-size: 12px; text-decoration: none; }
.legal-footer-links a { margin-left: 15px; }
.text-white { color: #fff; }

@media(max-width: 768px) { .grid-two-columns, .grid-four-columns { grid-template-columns: 1fr; } }