/* ──────────────────────────────────────────────────────────
   GUDIÁLOGOS #2 — Ficha de inscrição + Obrigado
   Direção: editorial, paper-feel, identidade GUDI.
   ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Como";
  src: url("../assets/gudialogos-form/fonts/Como-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Como";
  src: url("../assets/gudialogos-form/fonts/Como-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Como";
  src: url("../assets/gudialogos-form/fonts/Como-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Como";
  src: url("../assets/gudialogos-form/fonts/Como-Heavy.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/gudialogos-form/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}

:root {
  --orange:      #E16E1A;
  --orange-ink:  #B45711;
  --yellow:      #E5B92B;
  --green:       #81C458;
  --teal:        #2ED9C3;
  --navy:        #2D4F76;
  --navy-deep:   #1F3A57;

  --paper:       #F2EDE3;
  --paper-2:     #FAF6EE;
  --paper-3:     #E9E2D2;
  --ink:         #1A1A1A;
  --ink-soft:    #3A3A3A;
  --muted:       #6F6857;
  --rule:        rgba(45, 79, 118, 0.18);
  --rule-strong: rgba(45, 79, 118, 0.55);

  --error:       #B23A2B;
  --success:     #3F8F3A;

  --serif: "Como", "Roboto Condensed", Georgia, serif;
  --sans:  "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --page-max:   1200px;
  --gutter:     22px;
  --form-max:   760px;
  --side-w:     200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Garantir que larguras 100% nunca extrapolem por causa de scrollbars. */
}
html, body {
  /* Backstop final contra qualquer estouro horizontal residual.
     A causa real está corrigida na composição (sem margens negativas,
     sem width > 100%, sem translateX positivo). */
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s;
}
a:hover, a:focus-visible { color: var(--orange); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.skip-link {
  position: absolute; top: -40px; left: 12px;
  background: var(--navy); color: #fff;
  padding: 8px 14px; font-weight: 700;
  border: 0;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ────────────────────────────────────────────────────────
   PAGE
   ──────────────────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

/* ────────────────────────────────────────────────────────
   TOPBAR
   ──────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--rule);
}
.topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  border: 0;
}
.topbar-back:hover { color: var(--orange); }
.topbar-tag {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────
   CONVITE (hero editorial)
   ──────────────────────────────────────────────────────── */
.convite { padding-top: 4px; min-width: 0; }

.convite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 32px 0 26px;
  align-items: end;
  min-width: 0;
}

@media (min-width: 900px) {
  .convite-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px;
    padding: 44px 0 32px;
  }
}

/* meta */
.convite-meta { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 22px;
}
.eyebrow-muted { color: var(--muted); }
.eyebrow-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 900;
  color: var(--navy);
  /* Reduzido para caber integralmente em qualquer viewport, sem quebra. */
  font-size: clamp(2rem, 8.4vw, 5.4rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-transform: uppercase;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.18em;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
}
.wordmark-line {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.wordmark-accent { color: var(--orange); font-style: normal; }
.wordmark-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.30em;
  letter-spacing: 0;
  color: var(--orange);
  border: 2px solid var(--orange);
  padding: 0.2em 0.5em 0.12em;
  line-height: 1;
  align-self: flex-start;
  margin-top: 0.4em;
  transform: translateY(-0.2em);
  white-space: nowrap;
}

.date {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  color: var(--ink);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  white-space: nowrap;
}
.date-d { font-weight: 800; }
.date-sep { color: var(--orange); font-weight: 800; }
.date-y  { font-weight: 700; }

/* mark */
.convite-mark {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.convite-mark img {
  width: 100%;
  max-width: 440px;
  height: auto;
}

@media (min-width: 900px) {
  .convite-mark {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .convite-mark img {
    /* Ocupa a coluna sem extrapolar — sem margin/translate negativos */
    width: 100%;
    max-width: 100%;
  }
}

/* foot (rule editorial) */
.convite-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 4px;

  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.convite-foot-item { color: var(--navy); }
.convite-foot-sep  { color: var(--orange); }

/* ────────────────────────────────────────────────────────
   OPENING (texto original do Forms)
   ──────────────────────────────────────────────────────── */
.opening {
  padding: 48px 0 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 940px;
  min-width: 0;
}

@media (min-width: 900px) {
  .opening {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 40px;
    padding: 64px 0 52px;
    align-items: start;
  }
}

.opening-marker {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  padding-top: 6px;
}

.opening-content { min-width: 0; }

.opening-lead {
  font-family: var(--serif);
  font-weight: 900;
  color: var(--navy);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  max-width: 22ch;
  text-wrap: balance;
}

.opening-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.55;
  min-width: 0;
}
.opening-body p { font-weight: 500; }
.opening-close {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--orange);
  letter-spacing: -0.005em;
  margin-top: 6px;
}

/* ────────────────────────────────────────────────────────
   FICHA
   ──────────────────────────────────────────────────────── */
.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 36px 0 0;
  border-top: 2px solid var(--ink);
  min-width: 0;
}

@media (min-width: 900px) {
  .ficha {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    gap: 48px;
    padding: 48px 0 0;
  }
}

.ficha-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 900px) {
  .ficha-head {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}
.ficha-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.8rem, 4.4vw, 2.4rem);
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: 2px;
}
.ficha-helper {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 6px;
  max-width: 28ch;
}

.req { color: var(--orange); font-weight: 900; }

/* Body do form */
.ficha-body {
  min-width: 0;
  width: 100%;
  display: flex;
}
.form {
  width: 100%;
  max-width: var(--form-max);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
@media (min-width: 720px) {
  .form { padding: 36px 36px 32px; gap: 30px; }
}

/* ── Field ── */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field label,
.field-group legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.35;
}
.field-group legend { padding: 0; margin-bottom: 4px; }

.field-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--orange);
}
.field-q { font-weight: 700; }

/* Linha de campos curtos (Nome/E-mail/Telefone) */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-width: 0;
}
@media (min-width: 720px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
  }
  /* Nome ocupa a linha inteira; E-mail e Telefone dividem a próxima */
  .field-row .field-wide { grid-column: 1 / -1; }
}

/* Inputs — editorial underline */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.other-field input[type="text"] {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  font-size: 1.02rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule-strong);
  border-radius: 0;
  padding: 9px 2px;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  border: 1.5px solid var(--rule-strong);
  padding: 12px 14px;
  background: #fff;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: .7;
}

.field input:hover,
.field textarea:hover { border-color: var(--navy); }

.field input:focus,
.field textarea:focus,
.other-field input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(225, 110, 26, 0.05);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field-group[aria-invalid="true"] {
  border-color: var(--error);
}

/* ── Option groups ── */
.field-group {
  border: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
}

.options {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  min-width: 0;
}
/* Grade fluida que respeita a largura disponível */
.options-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.options-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--rule-strong);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  user-select: none;
  transition: border-color .12s, background .12s, color .12s;
  border-radius: 2px;
  line-height: 1.2;
  min-width: 0;
}
.option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.option input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--navy);
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  margin: 0;
  border-radius: 0;
  transition: background .12s, border-color .12s;
}
.option input[type="radio"] { border-radius: 50%; }

.option input:checked {
  background: var(--orange);
  border-color: var(--orange);
}
.option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

.option input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.option:has(input:checked) {
  border-color: var(--orange);
  background: rgba(225, 110, 26, 0.07);
}

.other-field {
  margin-top: 10px;
  display: none;
}
.other-field.is-visible { display: block; }
.other-field input {
  border: 1.5px solid var(--rule-strong);
  background: #fff;
  padding: 12px 14px;
  border-radius: 2px;
}

/* ── Errors ── */
.field-error {
  color: var(--error);
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 6px;
}
.global-error {
  padding: 12px 14px;
  background: rgba(178, 58, 43, 0.08);
  border: 1px solid rgba(178, 58, 43, 0.4);
  border-radius: 2px;
}

/* ── Actions ── */
.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.btn-primary {
  position: relative;
  width: 100%;
  font: inherit;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 2px;
  padding: 20px 28px;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.btn-primary:hover { background: var(--navy-deep); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn-primary[disabled] {
  cursor: progress;
  background: var(--navy-deep);
}
.btn-primary[disabled] .btn-label { opacity: 0; }

.btn-spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: spin .8s linear infinite;
}
.btn-primary[disabled] .btn-spinner { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
  font: inherit;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  border-radius: 2px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
}
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-secondary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Permite usar <a> com a aparência de botão.
   Importante: NÃO zerar border-bottom aqui — `.btn-secondary` define
   `border: 1.5px solid var(--navy)` (4 lados); zerar o bottom abria a
   caixa do link "Voltar ao site". A regra global `a { border-bottom }`
   é sobrescrita pela própria shorthand de `.btn-primary`/`.btn-secondary`
   (maior especificidade). */
.btn-as-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────
   PÁGINA OBRIGADO
   ──────────────────────────────────────────────────────── */
.page-obrigado { background: var(--paper); }

.obrigado {
  padding-top: 4px;
  min-width: 0;
}

.obrigado-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 56px 0 36px;
  align-items: center;
  min-width: 0;
}

@media (min-width: 900px) {
  .obrigado-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    padding: 80px 0 56px;
  }
}

.obrigado-grid-narrow {
  max-width: 720px;
  padding: 56px 0 40px;
}
@media (min-width: 900px) {
  .obrigado-grid-narrow { grid-template-columns: 1fr; padding: 80px 0 56px; }
}

.obrigado-content { min-width: 0; }

.obrigado-title {
  font-family: var(--serif);
  font-weight: 900;
  color: var(--navy);
  font-size: clamp(2.3rem, 7vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 22px;
  max-width: 14ch;
  text-wrap: balance;
}
.obrigado-title-sm {
  font-size: clamp(1.8rem, 4.6vw, 2.6rem);
  max-width: 20ch;
}

.obrigado-text {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 0 28px;
}

.obrigado-date {
  margin-bottom: 36px;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

.obrigado-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.obrigado-actions .btn-primary {
  width: auto;
  padding: 18px 26px;
}
.obrigado-actions .btn-secondary {
  padding: 16px 22px;
}

.obrigado-mark {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.obrigado-mark img {
  width: 100%;
  max-width: 460px;
  height: auto;
}
@media (min-width: 900px) {
  .obrigado-mark { justify-content: flex-end; }
  .obrigado-mark img { max-width: 100%; }
}

.obrigado-foot {
  padding: 16px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}

/* O estado padrão da página é "fallback" (HTML serve esse view).
   O JS muda data-state pra "confirmed" e troca a visibilidade dos views.
   Se o JS não rodar, o usuário vê o fallback discreto — comportamento seguro. */

/* ────────────────────────────────────────────────────────
   FOOTER (compartilhado)
   ──────────────────────────────────────────────────────── */
.footer {
  margin-top: 64px;
  min-width: 0;
}
.footer-rule {
  height: 6px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--orange) 0,     var(--orange) 20%,
    var(--yellow) 20%,   var(--yellow) 40%,
    var(--green)  40%,   var(--green)  60%,
    var(--teal)   60%,   var(--teal)   80%,
    var(--navy)   80%,   var(--navy)   100%
  );
}
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer a {
  color: var(--navy);
  border-bottom: 1px solid currentColor;
}
.footer a:hover { color: var(--orange); }

/* ────────────────────────────────────────────────────────
   Reduced motion
   ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}