/* ==========================================================================
   Oxton Education — Contato (público)
   ========================================================================== */
.contact-page { background:#f6f7fb; min-height:60vh; }
.contact-page .container { max-width:1200px; margin:0 auto; padding:0 24px; width:100%; box-sizing:border-box; }

/* ===== HERO ===== */
.contact-hero {
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; padding:72px 0 60px;
  background:#1e1f6b url("/assets/images/articles-hero.svg") center/cover no-repeat;
}
.contact-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(15,23,42,.72) 0%, rgba(30,31,107,.58) 50%, rgba(47,53,216,.52) 100%);
}
.contact-hero > .container{ position:relative; z-index:1; }
.contact-hero .eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;
  color:#dbe1ff;margin-bottom:18px;backdrop-filter:blur(4px);
}
.contact-hero h1{
  font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.02em;
  margin:0 0 14px;line-height:1.05;color:#fff !important;
}
.contact-hero p{font-size:17px;color:#e2e8f0;max-width:720px;line-height:1.6;margin:0;}

/* ===== SUCCESS ===== */
.contact-success-section { padding:30px 0 0; }
.contact-success {
  background:#fff; border:1px solid #d1fae5; border-left:4px solid #10b981; border-radius:18px;
  padding:32px 28px; text-align:center; max-width:760px; margin:0 auto;
}
.contact-success-icon {
  width:60px;height:60px;border-radius:50%;background:#10b981;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;margin-bottom:14px;
}
.contact-success h2 { margin:0 0 8px; font-size:24px; color:#065f46; letter-spacing:-.01em; }
.contact-success p { color:#374151; margin:6px 0; font-size:15px; line-height:1.55; }
.contact-success-protocol {
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  background:#f0fdf4; border:1px dashed #6ee7b7; padding:12px 28px; border-radius:12px; margin:14px 0;
}
.contact-success-protocol small { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#047857; font-weight:700; }
.contact-success-protocol strong { font-family:'Courier New', monospace; font-size:17px; color:#065f46; }
.contact-success-hint { font-size:13px; color:#6b7280; margin-top:8px; }
.contact-success-btn {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:10px 22px; background:#2f35d8; color:#fff; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none;
}
.contact-success-btn:hover { background:#262aa8; color:#fff; }

/* ===== LAYOUT ===== */
.contact-section { padding:48px 0 60px; }
.contact-layout {
  display:grid; grid-template-columns: 360px minmax(0, 1fr); gap:32px; align-items:start;
}

/* ===== INFO COLUMN ===== */
.contact-info-column { display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.contact-info-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:18px;
  padding:20px;
}
.contact-info-card h3 { margin:0 0 6px; font-size:15px; font-weight:700; color:#111827; letter-spacing:-.005em; }
.contact-info-card p { margin:0; font-size:13.5px; line-height:1.55; color:#6b7280; }
.contact-info-icon {
  width:42px;height:42px;border-radius:12px;background:#eef0ff;color:#2f35d8;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px;
}
.contact-info-meta { background:linear-gradient(135deg,#2f35d8 0%,#1f25b3 100%); border-color:transparent; color:#fff; }
.contact-info-meta h3 { color:#fff; }
.contact-info-meta p { color:rgba(255,255,255,.9); font-size:14.5px; }
.contact-info-meta .meta-small { font-size:12.5px; color:rgba(255,255,255,.72); }

/* ===== FORM CARD ===== */
.contact-form-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:22px;
  padding:32px;
}
.contact-form-header h2 { margin:0 0 4px; font-size:22px; color:#111827; font-weight:700; letter-spacing:-.01em; }
.contact-form-header p { margin:0 0 22px; color:#6b7280; font-size:14.5px; }

.contact-alert { padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:18px; }
.contact-alert-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.contact-form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.contact-field-wide { grid-column: 1 / -1; }
.contact-field { display:flex; flex-direction:column; }
.contact-field label {
  font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; letter-spacing:.01em;
}
.contact-field label span { color:#dc2626; margin-left:2px; }
.contact-field input,
.contact-field select,
.contact-field textarea {
  border:1px solid #e5e7eb; border-radius:10px; padding:11px 13px; font:inherit; font-size:14px;
  color:#111827; background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
  width:100%; box-sizing:border-box;
}
.contact-field textarea { resize:vertical; min-height:140px; line-height:1.55; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color:#2f35d8; box-shadow:0 0 0 3px rgba(47,53,216,.12);
}
.contact-field select { appearance:none; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b7280' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center; padding-right:36px; }

.contact-error { color:#dc2626; font-size:12.5px; margin-top:4px; font-weight:500; }

.contact-message-meta {
  display:flex; justify-content:space-between; align-items:center; margin-top:6px;
  font-size:12px; color:#9ca3af;
}
.contact-message-meta .counter.over { color:#dc2626; font-weight:600; }

.contact-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

.contact-form-footer {
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid #f1f3f9;
}
.contact-privacy-note { font-size:12.5px; color:#6b7280; max-width:520px; line-height:1.5; margin:0; }
.contact-privacy-note a { color:#2f35d8; text-decoration:underline; }
.contact-submit {
  background:#2f35d8; color:#fff; border:0; padding:13px 28px; border-radius:11px;
  font:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:background .15s;
}
.contact-submit:hover { background:#262aa8; }
.contact-submit:disabled { opacity:.6; cursor:not-allowed; }
.contact-submit.is-loading::after {
  content:""; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:contactSpin .7s linear infinite; display:inline-block;
}
@keyframes contactSpin { to { transform:rotate(360deg); } }

/* ===== FAQ ===== */
.contact-faq-section { padding:40px 0 80px; }
.contact-faq-section h2 { font-size:22px; color:#111827; margin:0 0 22px; font-weight:700; letter-spacing:-.01em; }
.contact-faq-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.contact-faq-item { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; }
.contact-faq-item h4 { margin:0 0 6px; font-size:14.5px; color:#111827; font-weight:700; }
.contact-faq-item p { margin:0; font-size:13.5px; line-height:1.55; color:#6b7280; }
.contact-faq-item a { color:#2f35d8; text-decoration:underline; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .contact-layout { grid-template-columns:1fr; }
  .contact-info-column { position:static; flex-direction:row; flex-wrap:wrap; }
  .contact-info-column > * { flex:1 1 240px; }
}
@media (max-width:720px){
  .contact-hero { padding:48px 0 40px; }
  .contact-form-card { padding:22px; }
  .contact-form-grid { grid-template-columns:1fr; }
  .contact-faq-grid { grid-template-columns:1fr; }
  .contact-form-footer { flex-direction:column; align-items:stretch; }
  .contact-submit { width:100%; justify-content:center; }
}