/* ---------- Base do bloco ---------- */
.oc-wrap{ max-width:80rem; margin:0 auto; padding:0 24px; }
@media (min-width:1024px){ .oc-wrap{ padding:0 40px; } }
.oc-sec{ padding:24px 0; scroll-margin-top:96px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }             /* 96px = header fixo (78px) + folga */
@media (min-width:1024px){ .oc-sec{ padding:64px 0; } }
.oc-eyebrow{ color:#0E6B58; font-size:14px; font-weight:600; letter-spacing:.025em; margin:0 0 12px; }
.oc-h2{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:30px; line-height:1.2; letter-spacing:-.018em; color:#16233D; margin:0; }
@media (min-width:640px){ .oc-h2{ font-size:36px; } }
.oc-lead{ margin:16px 0 0; color:#4b5563; font-size:16px; line-height:1.65; max-width:32rem; }
.oc-textlink{ display:inline-flex; align-items:center; min-height:24px; margin-top:20px; color:#0E6B58; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:4px; }
.oc-textlink:hover{ color:#16233D; }
.oc-textlink:focus-visible{ outline:2px solid #F2994A; outline-offset:3px; border-radius:4px; }

/* ---------- FAQ ---------- */
.oc-faq{ background:#F5F3EC; }
.oc-faq-grid{ display:grid; gap:32px; }
@media (min-width:1024px){
  .oc-faq-grid{ grid-template-columns:5fr 7fr; gap:64px; }
  .oc-faq-side{ position:sticky; top:110px; align-self:start; }
}
.oc-q{ border:1px solid #DBD6C6; background:#fff; border-radius:12px; transition:border-color var(--nx-t1) var(--nx-ease), box-shadow var(--nx-t1) var(--nx-ease); interpolate-size:allow-keywords; }
.oc-q::details-content{ height:0; overflow:clip; transition:height var(--nx-t2) var(--nx-ease),content-visibility var(--nx-t2) allow-discrete; }
.oc-q[open]::details-content{ height:auto; }
.oc-q + .oc-q{ margin-top:10px; }
.oc-q[open]{ border-color:#0E6B58; box-shadow:0 10px 28px -18px rgba(22,35,61,.4); }
.oc-q summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:24px; padding:18px 20px; font-size:16px; font-weight:600; line-height:1.4; color:#16233D; }
.oc-q summary::-webkit-details-marker{ display:none; }
.oc-q summary:focus-visible{ outline:2px solid #F2994A; outline-offset:2px; border-radius:12px; }
.oc-chev{ flex:none; width:28px; height:28px; border-radius:999px; background:#DCEAE5; color:#0E6B58; display:grid; place-items:center; transition:transform var(--nx-t2) var(--nx-ease), background var(--nx-t1) var(--nx-ease), color var(--nx-t1) var(--nx-ease); }
.oc-q[open] .oc-chev{ transform:rotate(180deg); background:#0E6B58; color:#fff; }
.oc-a{ padding:0 20px 20px; color:#4b5563; font-size:15px; line-height:1.7; max-width:44rem; }

/* ---------- Formulário: bloco claro em duas colunas ---------- */
.oc-form-sec{ background:#fff; }
.oc-card{ position:relative; display:grid; overflow:hidden; border-radius:22px; border:1px solid #DBD6C6; background:#fff; color:#16233D; }
@media (min-width:1024px){ .oc-card{ grid-template-columns:2fr 3fr; } }   /* ≈40% Navy | ≈60% formulário */
.oc-card [hidden]{ display:none !important; }

/* Coluna Navy (em cima no celular, compacta) */
.oc-intro{ position:relative; overflow:hidden; background:#16233D; color:#F5F3EC; padding:28px 20px 32px; }
@media (min-width:640px){ .oc-intro{ padding:40px 40px 44px; } }
@media (min-width:1024px){ .oc-intro{ padding:56px 44px 64px; } }
.oc-intro > *:not(.oc-ring){ position:relative; z-index:1; }
.oc-tag{ margin:0 0 14px; color:#DCEAE5; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.oc-intro .oc-h2{ color:#F5F3EC; }
.oc-intro .oc-lead{ color:rgba(245,243,236,.8); }
.oc-ring{ position:absolute; right:-100px; bottom:-120px; width:230px; height:230px; pointer-events:none; }
@media (min-width:1024px){ .oc-ring{ right:-90px; bottom:-100px; width:340px; height:340px; } }

/* Três passos (lista numerada, círculo com borda Teal Suave; acende conforme o preenchimento) */
.oc-steps{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px; counter-reset:oc-step; }
.oc-steps li{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start; counter-increment:oc-step; opacity:.7; transition:opacity var(--nx-t2); }
.oc-steps li::before{ content:counter(oc-step); box-sizing:border-box; width:30px; height:30px; border-radius:50%; border:1.5px solid #DCEAE5; color:#DCEAE5; display:grid; place-items:center; font-size:13px; font-weight:700; transition:background var(--nx-t2),border-color var(--nx-t2),color var(--nx-t2),transform var(--nx-t2) var(--nx-ease); }
.oc-steps strong{ display:block; font-size:15px; color:#F5F3EC; line-height:1.35; margin-top:4px; }
.oc-steps span{ display:block; font-size:14px; color:rgba(245,243,236,.8); line-height:1.55; margin-top:2px; }
.oc-steps li.on{ opacity:1; }
.oc-steps li.on::before{ content:"✓"; background:#F2994A; border-color:#F2994A; color:#16233D; transform:scale(1.08); }

/* Divisor + linhas de detalhe */
.oc-details{ list-style:none; margin:26px 0 0; padding:24px 0 0; border-top:1px solid #2A3C60; display:grid; gap:12px; }
.oc-details li{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:14px; line-height:1.5; color:rgba(245,243,236,.8); }
.oc-details svg{ margin-top:1px; color:#DCEAE5; }
.oc-details a{ white-space:nowrap; color:#F5F3EC; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.oc-details a:hover{ color:#F2994A; }
.oc-details a:focus-visible{ outline:2px solid #F2994A; outline-offset:2px; border-radius:3px; }

/* Coluna do formulário */
.oc-panel{ padding:28px 20px; background:#fff; }
@media (min-width:640px){ .oc-panel{ padding:40px; } }
@media (min-width:1024px){ .oc-panel{ padding:56px 52px; } }

.oc-form{ display:grid; gap:26px; }
.oc-fs{ border:0; margin:0; padding:0; min-width:0; }
.oc-group{ display:grid; gap:16px; }
.oc-legend{ display:block; margin:0 0 4px; padding:0; font-family:'Lora',Georgia,serif; font-size:19px; font-weight:600; color:#16233D; }
.oc-hint{ margin:0 0 12px; font-size:13.5px; color:#4B5262; }
.oc-field label, .oc-sublegend{ display:block; margin:0 0 6px; padding:0; font-size:13.5px; font-weight:600; color:#16233D; }
.oc-opt{ font-weight:400; color:#4B5262; }
.oc-field input[type=text], .oc-field input[type=tel], .oc-field input[type=email], .oc-field textarea{
  width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px;
  border:1px solid #DBD6C6; background:#fff;
  font:inherit; font-size:16px; color:#16233D;                    /* 16px evita zoom automático no iOS */
  transition:border-color var(--nx-t1) var(--nx-ease), box-shadow var(--nx-t1) var(--nx-ease); }
.oc-field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.oc-field input::placeholder, .oc-field textarea::placeholder{ color:#8A8F9C; }
.oc-field input:focus, .oc-field textarea:focus{ outline:none; border-color:#0E6B58; box-shadow:0 0 0 3px rgba(14,107,88,.22); }
.oc-field.has-err input, .oc-field.has-err textarea{ border-color:#B42318; }
.oc-err{ margin:6px 0 0; font-size:13px; line-height:1.4; color:#B42318; }
.oc-err:empty{ display:none; }

/* Serviços: etiquetas clicáveis (checkbox em formato pílula; marcada = Navy) */
.oc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.oc-chip{ position:relative; display:block; }
.oc-chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.oc-chip span{ display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:999px; box-sizing:border-box;
  border:1.5px solid #DBD6C6; background:#fff; font-size:14px; font-weight:600; color:#16233D; line-height:1.25;
  transition:border-color var(--nx-t1) var(--nx-ease), background var(--nx-t1) var(--nx-ease), color var(--nx-t1) var(--nx-ease); }
.oc-chip:hover span{ border-color:#0E6B58; }
.oc-chip input:checked + span{ background:#16233D; border-color:#16233D; color:#F5F3EC; }
.oc-chip input:focus-visible + span{ outline:2px solid #F2994A; outline-offset:2px; }
.oc-chips.has-err .oc-chip span{ border-color:#B42318; }

/* Retorno por: rádio simples na mesma linha */
.oc-radios{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.oc-radio{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#16233D; cursor:pointer; min-height:32px; }
.oc-radio input{ width:18px; height:18px; margin:0; accent-color:#0E6B58; cursor:pointer; }
.oc-radio input:focus-visible{ outline:2px solid #F2994A; outline-offset:2px; }

.oc-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:#4B5262; cursor:pointer; }
.oc-consent input{ flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:#0E6B58; cursor:pointer; }
.oc-consent input:focus-visible{ outline:2px solid #F2994A; outline-offset:2px; }
.oc-consent a{ color:#0E6B58; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.oc-consent a:hover{ color:#16233D; }
.oc-consent a:focus-visible{ outline:2px solid #F2994A; outline-offset:2px; border-radius:3px; }
.oc-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* honeypot anti-spam */

.oc-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.oc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; min-height:52px; padding:0 26px; border-radius:10px;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.2; letter-spacing:.005em; text-align:center; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background-color var(--nx-t1) var(--nx-ease), transform var(--nx-t1) var(--nx-ease), opacity var(--nx-t1) var(--nx-ease); }
.oc-btn svg{ flex:none; transition:transform var(--nx-t1) var(--nx-ease); }
.oc-btn:focus-visible{ outline:2px solid #16233D; outline-offset:3px; }
/* Texto ESCURO sobre o laranja: marinho #16233D dá contraste 7,0:1 (branco daria só 2,2:1) */
/* .oc-btn--primary: cor/formato em css/style.css (Botões v2 sitewide, adendo 7 item A) */
.oc-btn--primary:hover svg{ transform:translateX(3px); }
.oc-btn--primary:active{ transform:translateY(1px); }
.oc-btn--primary[disabled]{ opacity:.65; cursor:progress; }
.oc-btn--primary[disabled]:hover svg{ transform:none; }
.oc-status{ margin:0; font-size:14px; line-height:1.5; }
.oc-status:empty{ display:none; }
.oc-status.is-error{ color:#B42318; }
.oc-status.is-error a{ color:#16233D; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Celular: botão de enviar fixo embaixo enquanto o formulário está sendo preenchido.
   overflow:hidden no .oc-card impediria o sticky funcionar — por isso overflow:clip aqui. */
@media (max-width:640px){
  .oc-actions{ position:sticky; bottom:0; z-index:5; margin-inline:-4px; padding:14px 4px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(255,255,255,0),#fff 32%); }
  .oc-actions .oc-btn{ width:100%; justify-content:center; }
  .oc-card, .oc-panel, .oc-sec{ overflow:clip !important; }
}

.oc-form input[type=checkbox]:checked+*{ animation:kChip .35s var(--nx-ease-confirm); }
@keyframes kChip{ 50%{ transform:scale(1.06); } }

/* ---------- Estado final: selo de confirmação (desenha uma vez e estaciona) ---------- */
.oc-done{ display:grid; justify-items:center; align-content:center; gap:14px; text-align:center; padding:12px 0; min-height:320px; }
.oc-seal{ width:112px; height:112px; }
.oc-seal .ring{ fill:none; stroke:#0E6B58; stroke-width:5; stroke-linecap:round; stroke-dasharray:264; stroke-dashoffset:264; transition:stroke-dashoffset var(--nx-t3) cubic-bezier(.4,0,.2,1); }
.oc-seal .halo{ fill:rgba(14,107,88,.14); opacity:0; transform:scale(.7); transform-origin:50px 50px; transition:opacity var(--nx-t2) var(--nx-ease) var(--nx-t3), transform var(--nx-t2) var(--nx-ease) var(--nx-t3); }
.oc-seal .tick{ fill:none; stroke:#F2994A; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:44; stroke-dashoffset:44; transition:stroke-dashoffset var(--nx-t2) var(--nx-ease) var(--nx-t3); }
.oc-done.is-in .ring, .oc-done.is-in .tick{ stroke-dashoffset:0; }
.oc-done.is-in .halo{ opacity:1; transform:scale(1); }
.oc-done h3{ margin:0; font-family:'Lora',Georgia,serif; font-weight:600; font-size:26px; letter-spacing:-.015em; color:#16233D; }
.oc-done h3:focus{ outline:none; }
.oc-done p{ margin:0; max-width:26rem; font-size:15px; line-height:1.6; color:#4B5262; }
.oc-done .oc-summary{ font-size:13.5px; color:#4B5262; }
.oc-again{ margin-top:6px; background:none; border:0; padding:6px; font:inherit; font-size:14px; font-weight:600; color:#0E6B58; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.oc-again:hover{ color:#16233D; }
.oc-again:focus-visible{ outline:2px solid #F2994A; outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  .oc-q, .oc-chev, .oc-btn, .oc-chip span, .oc-field input, .oc-field textarea,
  .oc-seal .ring, .oc-seal .halo, .oc-seal .tick, .oc-btn svg{ transition:none !important; }
}
