/* ═══════════════════════════════════════════════════════════
   APEX — /contacto/  (creado 2026-09-01)

   Depende de apex-legal.css: de ahí salen el nav, el footer y la tipografía
   de .legal-wrap/.legal-h1/.legal-h2. Acá SOLO vive lo propio del formulario,
   con prefijo .ct- para no pisar el .sp- de /soporte/ (que es la versión
   interna, con sidebar, para alumnos con sesión).
   ═══════════════════════════════════════════════════════════ */

.ct-wrap{padding-bottom:72px}

/* ── Vías de contacto directas ── */
.ct-vias{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 8px}
.ct-via{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:18px 20px}
.ct-via-label{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2);margin-bottom:8px}
.ct-via-valor{display:block;font-size:15px;font-weight:600;color:var(--text);word-break:break-word}
a.ct-via-valor{color:var(--accent);transition:filter .15s}
a.ct-via-valor:hover{filter:brightness(1.15)}
.ct-via-nota{font-size:12px;color:var(--gray);margin-top:6px;line-height:1.5}

.ct-callout p{font-size:14px}
.ct-callout a{color:var(--accent);border-bottom:1px solid var(--accent-bd)}
.ct-callout a:hover{border-bottom-color:var(--accent)}

/* ── Formulario ── */
.ct-form{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:28px;margin:20px 0 8px}
.ct-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-row{margin-bottom:18px;min-width:0}
.ct-label{display:block;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.ct-req{color:var(--accent)}
.ct-opt{color:var(--gray2);font-weight:400;letter-spacing:.04em;text-transform:none}
.ct-hint{font-size:12px;color:var(--gray2);margin-top:6px}
.ct-hint a{color:var(--accent)}

.ct-input,.ct-select,.ct-textarea{
  width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:4px;
  color:var(--text);font-family:var(--font-body);font-size:14px;padding:11px 13px;
  transition:border-color .15s,box-shadow .15s;
}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{
  outline:none;border-color:var(--accent-bd);box-shadow:0 0 0 3px var(--accent-dm);
}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--gray2)}
.ct-input[readonly]{background:var(--bg3);color:var(--gray);cursor:default}
.ct-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fb0bd' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.ct-textarea{min-height:170px;resize:vertical;line-height:1.6}
.ct-counter{font-family:var(--font-mono);font-size:11px;color:var(--gray2);text-align:right;margin-top:6px}
.ct-counter.warn{color:var(--warning)}

/* Consentimiento
   ⚠️ Los !important de acá NO son pereza: style.css declara un bloque global
   `label { ... !important }` (mono, 10px, versalitas, display:block) que hacía
   que este texto se leyera TODO EN MAYÚSCULAS Y DIMINUTO — justo la frase que
   la persona tiene que poder leer antes de marcar la casilla. Contra un
   !important sólo gana otro !important, y `.ct-check` (0,1,0) tiene más
   especificidad que `label` (0,0,1), así que la pelea se gana acá y no hay que
   tocar la regla global, que sostiene el resto de los formularios del sitio. */
.ct-check{display:flex !important;align-items:flex-start;gap:10px;line-height:1.55;margin:4px 0 22px;cursor:pointer;
  font-family:var(--font-body) !important;font-size:13px !important;font-weight:400 !important;
  text-transform:none !important;letter-spacing:normal !important;color:var(--gray) !important}
.ct-check input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.ct-check a{color:var(--accent);border-bottom:1px solid var(--accent-bd)}

/* Honeypot — fuera de pantalla, nunca display:none (algunos bots lo detectan) */
.ct-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Envío */
.ct-submit-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:20px}
.ct-legal{font-size:12px;color:var(--gray2);margin:0;max-width:420px;line-height:1.5}
.ct-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-t);
  font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 26px;border:none;border-radius:3px;transition:filter .15s,opacity .15s}
.ct-btn:hover{filter:brightness(1.08)}
.ct-btn:disabled{opacity:.55;cursor:wait}

/* Avisos de resultado */
.ct-msg{display:none;font-size:14px;line-height:1.55;padding:13px 16px;border-radius:5px;margin-bottom:20px}
.ct-msg.show{display:block}
.ct-msg.ok{background:var(--green-bg);border:1px solid var(--green);color:var(--text)}
.ct-msg.error{background:var(--red-bg);border:1px solid var(--red);color:var(--text)}

/* ── Responsive ── */
@media(max-width:900px){
  .ct-vias{grid-template-columns:1fr;gap:12px}
}
@media(max-width:600px){
  .ct-form{padding:20px 16px}
  .ct-grid2{grid-template-columns:1fr;gap:0}
  .ct-submit-row{flex-direction:column;align-items:stretch}
  .ct-btn{justify-content:center}
}