/* =============================================================================
   Thank You (Obrigado) — WP-32 proof-capture page.
   Light hero → single cream ask-card on surface-1. No dark band, no sticky bar.
   Header/footer come from the theme (get_header()/get_footer()). All colour
   lives here (FIX-6 — zero inline hex). Scoped under .op-ob. Idiom shared with
   pages/contact.css.
   ============================================================================= */

.op-ob {
    --ob-ink:        #2B2823;
    --ob-ink-light:  #59554F;
    --ob-ink-muted:  #888580;
    --ob-surface-1:  #FAFAF9;
    --ob-surface-2:  #F4F3F0;
    --ob-line:       #E7E4DD;
    --ob-primary:    #B7780D;
    --ob-gold:       #D8A81B;
    --ob-cta-gold:   #9c6408;   /* AA text-on-gold fill (SD-27 C13) */
    --ob-link:       #7a5c11;   /* AA link/underline on light */
    --ob-wa:         #0c7a43;   /* WhatsApp accent — AA on light */
    --ob-err-bg:     rgba(154,59,31,.08);
    --ob-err-line:   rgba(154,59,31,.35);
    --ob-err-ink:    #7a2c17;
    --ob-ok-bg:      rgba(40,167,69,.10);
    --ob-ok-line:    rgba(40,167,69,.40);
    --ob-ok-ink:     #1c5b2b;
    font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ob-ink);
    background:var(--ob-surface-1);
    -webkit-font-smoothing:antialiased;
}
.op-ob * { box-sizing:border-box; }
.op-ob h1,.op-ob h2 { font-family:'Montserrat',sans-serif; margin:0; color:var(--ob-ink); }
.op-ob p { margin:0; }

.op-ob-wrap { max-width:720px; margin:0 auto; padding:0 32px; }

/* =========================== HERO (light, warm wash) =========================== */
.op-ob-hero {
    position:relative; overflow:hidden; text-align:center;
    padding:clamp(3.25rem,8vw,5.5rem) 0 clamp(1.75rem,4vw,2.5rem);
    background:linear-gradient(180deg,#FFFDF6 0%,#FBF5EA 48%,#F6F0E4 100%);
    background-image:
        linear-gradient(180deg,#FFFDF6 0%,#FBF5EA 48%,#F6F0E4 100%),
        repeating-radial-gradient(circle at 84% 8%,rgba(183,120,13,.075) 0 1.5px,rgba(183,120,13,0) 1.5px 30px);
}
.op-ob-hero .op-ob-wrap { position:relative; z-index:1; }
.op-ob-hero--success { background:linear-gradient(180deg,#FFFDF6 0%,#FBF3E5 55%,#F6EEDF 100%); padding-bottom:clamp(2.5rem,6vw,4rem); }
.op-ob-eyebrow {
    font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; font-size:.74rem; color:var(--ob-link); margin-bottom:1rem;
}
/* was --ob-primary (3.52:1 on --ob-surface-1); --ob-link is 5.97:1 (a11y audit #22) */
.op-ob-h1 { font-weight:800; font-size:clamp(2rem,5.5vw,3.15rem); line-height:1.08; color:var(--ob-ink); }
.op-ob-lead {
    max-width:56ch; margin:1.15rem auto 0; font-size:1.06rem; line-height:1.65; color:var(--ob-ink-light);
}

/* =========================== ASK CARD (cream) =========================== */
.op-ob-ask { padding:0 0 clamp(3.5rem,9vw,6rem); }
.op-ob-card {
    background:var(--ob-surface-2); border:1px solid var(--ob-line); border-radius:16px;
    padding:clamp(1.6rem,4vw,2.5rem); box-shadow:0 1px 2px rgba(43,40,35,.04);
}
.op-ob-formhead { margin-bottom:1.4rem; }
.op-ob-formtt { font-weight:800; font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.2; }
.op-ob-formsub { margin-top:.55rem; color:var(--ob-ink-light); line-height:1.6; }

.op-ob-field { display:block; margin-bottom:1.05rem; }
.op-ob-fieldlabel {
    display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem;
    letter-spacing:.02em; color:var(--ob-ink); margin-bottom:.4rem;
}
.op-ob-input, .op-ob-textarea {
    width:100%; font-family:inherit; font-size:1rem; color:var(--ob-ink);
    background:var(--ob-surface-1); border:1px solid var(--ob-line); border-radius:10px;
    padding:.8rem .9rem; line-height:1.5;
}
.op-ob-textarea { resize:vertical; min-height:120px; }
.op-ob-input:focus, .op-ob-textarea:focus {
    outline:none; border-color:var(--ob-primary); box-shadow:0 0 0 3px rgba(183,120,13,.16);
}
.op-ob-input::placeholder, .op-ob-textarea::placeholder { color:var(--ob-ink-muted); }

.op-ob-consent { display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0 1.3rem; }
.op-ob-check { appearance:none; -webkit-appearance:none; width:20px; height:20px; border:1.5px solid rgba(35,31,25,.4); border-radius:4px; background:#fff; flex:0 0 auto; margin-top:.2rem; }
.op-ob-check:checked { background:#946009 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 70% no-repeat; border-color:#946009; }
.op-ob-check:focus-visible { outline:2px solid var(--ob-primary); outline-offset:2px; }
.op-ob-consent span { font-size:.92rem; line-height:1.5; color:var(--ob-ink-light); }

.op-ob-submit {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; cursor:pointer;
    color:#fff; background:var(--ob-cta-gold); border:0; border-radius:999px;
    padding:.85rem 1.6rem; transition:filter .2s ease, transform .2s ease;
}
.op-ob-submit:hover, .op-ob-submit:focus { filter:brightness(1.06); transform:translateY(-1px); }
.op-ob-submit svg { flex:0 0 auto; }
.op-ob-fine { margin-top:.9rem; font-size:.85rem; color:var(--ob-ink-light); line-height:1.5; } /* was --ob-ink-muted (3.31:1 on the --ob-surface-2 .op-ob-card it renders on); --ob-ink-light is 6.67:1 there (a11y audit #20) */

/* char hint + optional live counter under the textarea */
.op-ob-fieldmeta { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:.45rem; min-height:1rem; }
.op-ob-hint { font-size:.8rem; font-style:italic; color:var(--ob-ink-light); } /* was --ob-ink-muted (3.31:1 on the --ob-surface-2 .op-ob-card it renders on); --ob-ink-light is 6.67:1 there (a11y audit #21) */
.op-ob-counter { display:none; font-family:'Montserrat',sans-serif; font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--ob-ink-light); } /* was #b7b3ac (1.88:1 on --ob-surface-2, the .op-ob-card bg it actually renders on); --ob-ink-light is 6.67:1 there (a11y audit #19) */
.js .op-ob-counter { display:inline; }

/* =========================== HERO PHOTO (Featured Image) =========================== */
.op-ob-figwrap { position:relative; z-index:1; max-width:1080px; margin:clamp(1.6rem,4vw,2.5rem) auto 0; padding:0 32px; }
.op-ob-figure { margin:0; height:clamp(206px,34vw,360px); border-radius:22px; overflow:hidden; border:1px solid rgba(183,120,13,.22); box-shadow:0 26px 54px rgba(43,40,35,.17); background:#EDE8DF; }
.op-ob-figimg { width:100%; height:100%; object-fit:cover; display:block; }

/* =========================== FLAGS =========================== */
.op-ob-flag { display:flex; gap:.6rem; align-items:flex-start; border-radius:10px; padding:.85rem 1rem; margin-bottom:1.3rem; font-size:.95rem; line-height:1.5; }
.op-ob-flag p { margin:0; }
.op-ob-flag-ico { flex:0 0 auto; margin-top:1px; display:inline-flex; color:currentColor; }
.op-ob-flag--err { background:var(--ob-err-bg); border:1px solid var(--ob-err-line); color:var(--ob-err-ink); }
.op-ob-success { text-align:left; }
.op-ob-success .op-ob-formtt { color:var(--ob-ok-ink); }
.op-ob-success .op-ob-formsub { margin-top:.7rem; }

/* =========================== SUCCESS SEAL =========================== */
.op-ob-seal {
    width:clamp(100px,18vw,132px); height:clamp(100px,18vw,132px); margin:0 auto 1.4rem;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E7BE3C'/%3E%3Cstop offset='1' stop-color='%23B7780D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='57' stroke='rgba(183,120,13,.24)' stroke-width='2'/%3E%3Ccircle cx='60' cy='60' r='48' stroke='rgba(183,120,13,.5)' stroke-width='1.5' stroke-dasharray='1.5 7.5' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='60' r='38' fill='url(%23s)'/%3E%3Cpath d='M43 61 l11.5 11.5 l22 -26' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================== HONEYPOT + REVEAL =========================== */
.op-ob .op-hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.op-ob .op-reveal { opacity:1; }
.js .op-ob .op-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .op-ob .op-reveal.is-in { opacity:1; transform:none; }

/* =========================== MEANWHILE (quiet routes) =========================== */
.op-ob-mw { padding:clamp(2rem,5vw,3rem) 0 clamp(3.5rem,9vw,6rem); background:var(--ob-surface-1); }
.op-ob-wrap--wide { max-width:1080px; }
.op-ob-mw-head { text-align:center; margin-bottom:clamp(1.25rem,3vw,1.75rem); }
.op-ob-mw-head .op-ob-eyebrow { margin-bottom:.5rem; }
.op-ob-mw-h { font-weight:800; font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.2; }
.op-ob-mw-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; align-items:stretch; }
/* Route count is set on the grid by obrigado.php. Four routes (guide / course /
   in-person classes / WhatsApp) sit as 2x2 rather than a 3 + stranded-orphan row. */
.op-ob-mw-grid--4up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.op-ob-route {
    display:flex; flex-direction:column; gap:.8rem; background:#fff; border:1px solid var(--ob-line);
    border-radius:16px; padding:clamp(1.25rem,3vw,1.6rem); text-decoration:none; color:var(--ob-ink);
    box-shadow:0 1px 2px rgba(43,40,35,.04); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.op-ob-route:hover, .op-ob-route:focus-visible { transform:translateY(-4px); box-shadow:0 16px 34px rgba(43,40,35,.13); border-color:rgba(183,120,13,.35); }
.op-ob-route-ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--ob-link); background:rgba(183,120,13,.10); flex:0 0 auto; }
.op-ob-route--wa .op-ob-route-ico { color:var(--ob-wa); background:rgba(12,122,67,.10); }
.op-ob-route-body { display:block; }
.op-ob-route-k { display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.03rem; color:var(--ob-ink); }
.op-ob-route-b { display:block; margin-top:.4rem; color:var(--ob-ink-light); font-size:.9rem; line-height:1.55; }
.op-ob-route-cta { margin-top:auto; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; color:var(--ob-link); display:inline-flex; align-items:center; gap:.4rem; }
.op-ob-route--wa .op-ob-route-cta { color:var(--ob-wa); }

@media (max-width:820px) {
    .op-ob-mw-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .op-ob-wrap { padding:0 20px; }
    .op-ob-figwrap { padding:0 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .op-ob-submit, .js .op-ob .op-reveal { transition:none; }
    .js .op-ob .op-reveal { opacity:1; transform:none; }
}