/* ===== Lawrence · funnel.css — enxertos de produção sobre a landing v1.2-Navy =====
   Componentes que NÃO existem no brandbook do sandbox (landing.css fica fiel ao sandbox):
   lang toggle, toggle mensal/anual, FAQ, modais de contato/registro, cookie banner,
   WhatsApp float. Estilo segue o design system v1.3-Navy (skill design-system-lawrence):
   card aprovado (paper + hairline + radius 16 + sombra sutil), estado sem barra lateral,
   stepper cornflower sem conectores, foco = anel 2px navy. */

:root{
  --easing:var(--ease);               /* checkout.js injeta animation com var(--easing) */
  --state-success:#1B4332;
  --state-error:#7A1F1F;
  --state-warning:#94590E;
  --ink-soft:#353B49;
  --ink-mute:#5B6373;
  --hairline:rgba(10,10,18,.13);
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

@keyframes priceSwitch{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes modalIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:none}}

/* ===== seletor de idioma (header) =====
   Formato do portal de conta (.lang-menu): gatilho + dropdown com os idiomas por extenso.
   No header largo o gatilho é SÓ o ícone (a cápsula é apertada e o rótulo não cabe); dentro
   do painel do menu (≤380px) ele vira item de linha com ícone + rótulo + chevron, igual ao
   .lang-menu--sidebar do account. */
.lang-menu{position:relative}
.lang-menu-trigger{display:flex;align-items:center;gap:10px;width:44px;height:44px;justify-content:center;
  border-radius:10px;color:var(--ink-mute);background:none;border:0;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease)}
.lang-menu-trigger:hover{color:var(--navy);background:var(--mist)}
.lang-menu-trigger:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.lang-menu-icon{width:20px;height:20px;flex:none}
/* No header largo só o ícone: rótulo e chevron entram apenas no painel do mobile. */
.lang-menu-label,.lang-menu-chevron{display:none}
.lang-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;z-index:120;
  display:none;flex-direction:column;padding:6px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:14px;
  box-shadow:0 1px 2px rgba(10,10,18,.05),0 16px 40px -16px rgba(10,10,18,.30)}
.lang-menu.open .lang-menu-dropdown{display:flex}
.lang-menu.open .lang-menu-chevron{transform:rotate(90deg)}
.lang-menu-option{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;
  font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-soft);
  background:none;border:0;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.lang-menu-option:hover{background:var(--mist);color:var(--navy)}
.lang-menu-option.active{background:var(--mist);color:var(--navy);font-weight:600}
.lang-menu-option:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* Rótulos de botão nunca quebram em duas linhas (regra dura do DS). */
.site-header .btn{white-space:nowrap}
@media (max-width:920px){
  .site-header .logo__wm{display:none}
}
/* ≤380px a cápsula fica só com logo + hambúrguer (painel em landing.css), então sobra espaço
   e o wordmark volta — o lockup completo identifica a marca melhor que o símbolo sozinho.
   Precisa morar aqui: o funnel.css carrega DEPOIS do landing.css e venceria a regra de lá. */
@media (max-width:380px){
  .site-header .logo__wm{display:block}
  /* No painel o gatilho vira item de linha: ícone + rótulo à esquerda, chevron à direita. */
  .lang-menu-trigger{width:100%;height:auto;justify-content:flex-start;padding:11px 12px;
    font-family:var(--font-body);font-size:14px;font-weight:500}
  .lang-menu-label{display:block}
  .lang-menu-chevron{display:block;margin-left:auto;flex:none;transition:transform .2s var(--ease)}
  .lang-menu-icon{width:18px;height:18px}
  /* O painel rola e tem altura cheia: o dropdown abre PRA CIMA, ancorado no gatilho. */
  .lang-menu-dropdown{top:auto;bottom:calc(100% + 6px);left:0;right:0}
}

/* ===== toggle mensal/anual (IDs/classes do checkout.js) ===== */
.pricing-toggle-pill{display:flex;width:fit-content;margin:26px auto 0;position:relative;border:1px solid var(--hairline);border-radius:12px;padding:4px;background:var(--white)}
.pricing-pill-option{position:relative;z-index:1;font-family:var(--font-head);font-size:14px;font-weight:500;color:var(--ink-mute);padding:9px 24px;border-radius:9px;transition:color .3s;display:flex;align-items:center;gap:8px;white-space:nowrap}
.pricing-pill-option.active{color:var(--navy);font-weight:600}
.pricing-pill-option:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pricing-pill-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--navy);background:var(--mist);padding:2px 7px;border-radius:6px}
.pricing-pill-slider{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:9px;background:var(--mist);transition:transform .3s var(--easing),width .3s var(--easing);z-index:0}
.pricing-trial-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);opacity:.6;text-align:center;margin:16px 0 44px}

/* preço anual: original riscado + teaser alterna (checkout.js toggla .pricing-annual no .price-grid) */
.pcard__orig{display:none;font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink-mute);text-decoration:line-through;margin-right:6px;opacity:.6;align-self:baseline}
.pricing-annual .pcard__orig{display:inline}
.pcard__annual-a{display:none}
.pricing-annual .pcard__annual-m{display:none}
.pricing-annual .pcard__annual-a{display:inline}

/* ===== FAQ (markup/JS do core.js + analytics por índice) ===== */
.faq{background:var(--white);color:var(--navy);padding:110px 0}
.faq__head{text-align:center;margin-bottom:44px}
.faq__head h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px}
.faq-grid{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:first-child{border-top:1px solid var(--hairline)}
.faq-question{width:100%;text-align:left;padding:22px 0;display:flex;align-items:center;gap:18px;color:var(--navy);transition:opacity .2s}
.faq-question:hover{opacity:.75}
.faq-question:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.faq-num{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute);flex:none;width:24px}
.faq-question > span[data-pt]{flex:1;font-family:var(--font-head);font-weight:500;font-size:16px;line-height:1.35}
.faq-icon{width:16px;height:16px;position:relative;flex:none;transition:transform .3s var(--ease)}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:currentColor;transition:.3s}
.faq-icon::before{top:7px;left:0;width:16px;height:2px}
.faq-icon::after{top:0;left:7px;width:2px;height:16px}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s var(--easing)}
.faq-answer-inner{padding:0 0 24px 42px;font-family:var(--font-body);color:var(--ink-soft);font-size:15px;line-height:1.7;max-width:640px}

/* ===== botões legados dos enxertos (modais, cookie) — mapeados pro vocabulário da marca ===== */
.btn.btn-primary{background:var(--navy);color:var(--paper);box-shadow:0 10px 22px -10px rgba(26,48,80,.7)}
.btn.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(26,48,80,.8)}
.btn.btn-secondary,.btn.btn-ghost{border:1px solid var(--hairline);color:var(--navy);background:var(--white)}
.btn.btn-secondary:hover,.btn.btn-ghost:hover{background:var(--mist)}
.btn.btn-lg{width:100%;justify-content:center;padding:13px 24px;font-size:15px}
.btn.btn-sm{padding:8px 14px;font-size:13px}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn.loading{opacity:.65;pointer-events:none;position:relative}
.btn.loading::after{content:'';width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* ===== modais (contato + registro) — card aprovado ===== */
.contact-overlay,.register-overlay{position:fixed;inset:0;background:rgba(10,10,18,.45);z-index:200;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px}
.contact-overlay.open,.register-overlay.open{display:flex}
.contact-modal,.register-modal{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 40px -16px rgba(0,0,0,.22);padding:36px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .24s var(--ease)}
.register-modal{max-width:460px}
.contact-modal h2,.register-modal h2{font-family:var(--font-head);font-weight:500;font-size:22px;color:var(--navy);margin-bottom:8px}
.contact-modal p,.register-modal p{font-family:var(--font-body);font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.55}
.contact-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--ink-mute);font-size:20px;transition:background .2s}
.contact-modal-close:hover{background:var(--mist);color:var(--navy)}
.contact-modal-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form label,.register-modal form label{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--navy);display:flex;flex-direction:column;gap:6px}
.contact-form input,.contact-form textarea,
.register-modal form input:not(.register-otp-digit),.register-modal form select{padding:10px 13px;background:var(--white);border:1px solid var(--hairline);border-radius:9px;font-size:15px;font-family:var(--font-body);color:var(--ink);transition:border-color .2s;-webkit-appearance:none;appearance:none}
.contact-form input::placeholder,.contact-form textarea::placeholder,.register-modal form input::placeholder{color:var(--ink-mute)}
.contact-form input:focus,.contact-form textarea:focus,
.register-modal form input:focus,.register-modal form select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.contact-form textarea{resize:vertical;min-height:80px}
.contact-form .btn{margin-top:8px}
.register-modal form{display:flex;flex-direction:column;gap:14px}
.register-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.register-modal form select{background-image: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' fill='none' stroke='%231A3050' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* erro de formulário: estado sem barra lateral (regra dura do DS) */
.register-error,.contact-error{background:rgba(122,31,31,.08);color:var(--state-error);border-radius:9px;padding:10px 14px;font-family:var(--font-body);font-size:13px;line-height:1.5;margin-bottom:4px}
.register-error::before,.contact-error::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}

/* stepper do registro: v1.3 — bolas, concluído/ativo = cornflower, SEM linhas conectoras */
.register-steps{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.register-step{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-mute);background:var(--mist);transition:background .2s,color .2s}
.register-step.active,.register-step.done{background:var(--cornflower);color:var(--navy)}

.register-screen{display:none}
.register-screen.active{display:block}
.register-required{color:var(--state-error)}
.register-password-wrapper{position:relative;display:flex}
.register-password-wrapper input{width:100%;padding-right:42px}
.register-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink-mute);border-radius:7px}
.register-password-toggle:hover{color:var(--navy);background:var(--mist)}
.register-password-reqs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:-4px}
.register-password-reqs .req{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.register-password-reqs .req.met{color:var(--state-success)}
.register-password-reqs .req.met::before{content:'\2713\00a0'}
.register-consent{flex-direction:row !important;align-items:flex-start;gap:9px !important;font-weight:400 !important;color:var(--ink-soft) !important;font-size:13px !important;line-height:1.5}
.register-consent input{accent-color:var(--navy);margin-top:2px;flex:none}
.register-consent a{color:var(--navy);text-decoration:underline}
.register-btn{margin-top:4px}
.register-footer{margin-top:18px;text-align:center;font-family:var(--font-body);font-size:13px;color:var(--ink-soft)}
.register-footer a,.register-link{color:var(--navy);text-decoration:underline;font-size:13px}
.register-link:disabled{opacity:.5;text-decoration:none;cursor:default}
.register-email-display{font-family:var(--font-mono);font-size:14px;color:var(--navy);margin-bottom:18px !important}
.register-otp-inputs{display:flex;gap:8px;justify-content:center;margin-bottom:6px}
.register-otp-digit{width:44px;height:52px;text-align:center;font-family:var(--font-mono);font-size:20px;color:var(--navy);background:var(--white);border:1px solid var(--hairline);border-radius:9px}
.register-otp-digit:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}

/* ===== cookie banner ===== */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:95;background:var(--paper);border-top:1px solid var(--hairline);padding:14px 24px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-family:var(--font-body);font-size:13px;color:var(--ink-soft)}
.cookie-banner a{color:var(--navy);text-decoration:underline}

/* ===== WhatsApp float (verde oficial do WhatsApp, marca de terceiro) ===== */
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:90;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(10,10,18,.35);transition:transform .2s var(--ease)}
.whatsapp-float:hover{transform:translateY(-2px)}

@media (max-width:560px){
  .contact-modal,.register-modal{padding:26px 20px}
  .register-form-row{grid-template-columns:1fr}
  .faq{padding:72px 0}
  .faq-answer-inner{padding-left:0}
  .whatsapp-float{right:14px;bottom:14px;width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .contact-modal,.register-modal{animation:none}
  .pricing-pill-slider{transition:none}
}