/* ============================================
   CONTACT.CSS — Página de contacto independiente
   ============================================ */

.contact-page-body{max-width:1120px;margin:0 auto;padding:1.75rem 24px}

.contact-in{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}

.contact-info{display:flex;flex-direction:column;gap:16px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#eaf4fd,#d5e9fa);display:flex;align-items:center;justify-content:center;color:var(--azure)}
.contact-icon svg{width:20px;height:20px}
.contact-detail-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--azure);font-weight:800;margin-bottom:2px}
.contact-detail-value{color:#3c567a;font-size:1.02rem}
.contact-detail-value a:hover{color:var(--azure)}

/* ── Formulario (tarjeta esmerilada del diseño) ── */
.contact-right{background:linear-gradient(160deg,var(--navy),var(--deep));border-radius:18px;padding:22px 22px;box-shadow:0 16px 40px rgba(8,28,51,.25)}
.contact-form-title{font-family:var(--display);font-size:1.15rem;font-weight:600;margin-bottom:10px;color:#fff}

.form-field{margin-bottom:9px}
.form-label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:800;margin-bottom:3px}
.form-input{width:100%;padding:8px 14px;border-radius:12px;border:1px solid rgba(159,208,245,.3);background:rgba(8,28,51,.45);color:#fff;font-family:var(--body);font-size:.95rem;transition:.2s}
.form-input::placeholder{color:#7fa2c4}
.form-input:focus{outline:none;border-color:var(--azure);background:rgba(8,28,51,.65);box-shadow:0 0 0 3px rgba(47,127,212,.25)}
.form-input.invalid{border-color:#ff9d8a;background:rgba(192,57,43,.14)}
.form-input.invalid:focus{box-shadow:0 0 0 3px rgba(255,157,138,.25)}
textarea.form-input{resize:vertical;min-height:64px}

.form-error{display:block;min-height:15px;font-size:.78rem;color:#ffb4a8;margin-top:5px}
.form-error.form-success{color:#7ee0a8}

/* Checkbox de consentimiento SMS */
.form-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.form-check input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--azure);cursor:pointer}
.form-check span{font-size:.8rem;line-height:1.6;color:#c6dcf0}
.form-check a{color:var(--sky);font-weight:700;text-decoration:underline}
.form-check a:hover{color:#fff}

/* Honeypot: oculto para personas y bots básicos. display:none evita que el
   autocompletado del navegador lo rellene (a diferencia de solo moverlo fuera
   de pantalla, que algunos navegadores sí autocompletan igual). */
.hp-field{display:none}

.form-btn{width:100%;margin-top:6px}