/* WESTCA — landing pages do flyer porta a porta (template page-flyer, 06/10/2026).
   Desenho e dynamic island vêm do Sharks (westca-sharks-lp). Tudo preso em .fl
   para o theme.json do site não vazar nos títulos, links e espaçamentos. */

body.page-template-page-flyer { background:#0a0a0b; margin:0; overflow-x:clip; }
.page-template-page-flyer .wp-site-blocks { padding:0 !important; }
.page-template-page-flyer .wp-block-post-content,
.page-template-page-flyer .wp-block-post-content > * { margin:0 !important; max-width:none !important; }

.fl {
  --bg:#0a0a0b; --bg2:#111113; --surface:#161618;
  --border:rgba(207,158,85,.18); --soft:rgba(255,255,255,.07);
  --gold:#cf9e55; --gold-light:#e6c486;
  --text:#f4f2ee; --muted:#a8a69f; --muted2:#8b897f;
  --ok:#7fd49a; --bad:#e07a7a;
  --spring:cubic-bezier(.32,1.35,.45,1);
  --display:var(--wp--preset--font-family--bebas, 'Bebas Neue'), 'Bebas Neue', sans-serif;
  --sans:var(--wp--preset--font-family--inter, 'Inter'), 'Inter', system-ui, sans-serif;
  background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6;
  font-size:16px; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.fl *, .fl *::before, .fl *::after { margin:0; padding:0; box-sizing:border-box; }
.fl h1, .fl h2, .fl h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.5px; line-height:.96; color:var(--text); }
.fl p { margin:0; }
.fl img { display:block; max-width:100%; height:auto; }
.fl a { color:inherit; text-decoration:none; }
.fl .wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.fl .gold { color:var(--gold); }
.fl .eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:2.5px; font-size:11.5px; font-weight:700; color:var(--gold); }

.fl .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.4px; text-transform:uppercase;
  padding:16px 34px; border-radius:999px; border:none; cursor:pointer; max-width:100%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1206;
  box-shadow:0 8px 24px rgba(207,158,85,.28);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.fl .btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(207,158,85,.42); }
.fl .btn[disabled] { opacity:.6; cursor:default; transform:none; }
.fl .btn.ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.fl .btn.ghost:hover { border-color:var(--gold); color:var(--gold-light); }

/* ---------- top bar ---------- */
.fl .topbar { position:sticky; top:0; z-index:100; background:rgba(10,10,11,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.05); }
.admin-bar .fl .topbar { top:32px; }
.fl .topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; max-width:1080px; margin:0 auto; }
.fl .topbar img { height:20px; width:auto; }
.fl .btn.top-cta { padding:9px 18px; font-size:12.5px; box-shadow:none; }

/* ---------- hero ---------- */
.fl .hero { position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; background:#000; }
.fl .hero-bg { position:absolute; inset:0; background-position:62% 22%; background-size:cover; background-repeat:no-repeat; }
.fl .hero-grad { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.15) 28%, rgba(10,10,11,.72) 55%, rgba(10,10,11,.95) 74%, var(--bg) 96%); }
.fl .hero-content { position:relative; z-index:2; width:100%; padding:0 20px 44px; }
.fl .hero h1 { font-size:clamp(54px,12vw,120px); margin:10px 0 0; }
.fl .hero h1 .gold { display:block; }
.fl .hero p.tag { font-size:clamp(16px,2.4vw,20px); max-width:560px; margin:14px 0 20px; color:var(--text); }
.fl .price-tag { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 20px; }
.fl .price-tag b { font-family:var(--display); font-weight:400; font-size:64px; line-height:1; color:var(--gold); }
.fl .price-tag s { color:var(--muted2); font-size:16px; }
.fl .price-tag span { font-size:13.5px; color:var(--muted); font-weight:600; }
.fl .chips { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.fl .chips span, .fl .chips a { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; background:rgba(10,10,11,.6); border:1px solid var(--border); border-radius:999px; padding:8px 14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.fl .chips b { color:var(--gold-light); font-weight:700; }
.fl .chips a { transition:border-color .15s ease; }
.fl .chips a:hover { border-color:var(--gold); }
.fl .hero-note { margin-top:14px; font-size:12.5px; color:var(--muted); }
/* Celular: a foto vem inteira em cima e o texto embaixo, sem cobrir o rosto de ninguém. */
@media (max-width:899px){
  .fl .hero { display:block; min-height:0; }
  .fl .hero-bg { position:relative; inset:auto; height:clamp(250px,68vw,460px); background-position:50% 30%; }
  .fl .hero-grad { inset:auto 0 auto 0; top:0; height:clamp(250px,68vw,460px); background:linear-gradient(180deg, rgba(10,10,11,0) 55%, var(--bg) 100%); }
  .fl .hero-content { margin-top:-28px; }
}
@media (min-width:900px){
  /* Computador: texto à esquerda no fundo da página, foto à direita como imagem
     com cantos arredondados. Sem gradiente: o texto nunca fica sobre a foto. */
  .fl .hero { min-height:auto; display:block; background:var(--bg); }
  .fl .hero-content { display:flex; align-items:center; min-height:min(760px, calc(100svh - 58px)); padding:56px 20px 64px; max-width:1080px; margin:0 auto; }
  .fl .hero-copy { max-width:480px; }
  .fl .hero-bg { inset:auto; top:50%; right:max(20px, calc((100% - 1080px) / 2 + 20px)); transform:translateY(-50%);
    width:min(44%, 480px); aspect-ratio:4/5; border-radius:18px; background-position:53% 40%;
    box-shadow:0 24px 60px rgba(0,0,0,.45); border:1px solid var(--soft); }
  .fl .hero-grad { display:none; }
}
}

/* ---------- sections ---------- */
.fl section { padding:68px 0; }
.fl .sec-head { text-align:center; max-width:640px; margin:0 auto 34px; padding:0 20px; }
.fl .sec-head h2 { font-size:clamp(38px,8vw,62px); margin:10px 0 10px; }
.fl .sec-head p { color:var(--muted); font-size:15.5px; }

/* ---------- receipt (value) ---------- */
.fl .value { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.fl .receipt { max-width:620px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px 22px 22px; background-image:radial-gradient(120% 80% at 50% 0%, rgba(207,158,85,.12), transparent 60%); }
.fl .r-row { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline; padding:14px 0; border-bottom:1px dashed rgba(255,255,255,.1); }
.fl .r-row b { font-size:15.5px; font-weight:700; color:var(--text); }
.fl .r-row small { grid-column:1; font-size:13px; color:var(--muted2); }
.fl .r-price { grid-row:1 / span 2; grid-column:2; text-align:right; white-space:nowrap; font-size:15px; }
.fl .r-price s { color:var(--muted2); margin-right:8px; font-size:13.5px; }
.fl .r-price em { font-style:normal; font-weight:800; color:var(--gold-light); }
.fl .r-total { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 0 4px; }
.fl .r-total span { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.fl .r-total b { font-family:var(--display); font-weight:400; font-size:46px; line-height:1; color:var(--gold); }
.fl .r-total s { color:var(--muted2); font-size:15px; margin-right:10px; }
.fl .save { margin:16px 0 0; text-align:center; border:1px dashed var(--border); border-radius:14px; padding:14px 16px; }
.fl .save b { display:block; font-size:clamp(20px,3.4vw,24px); font-weight:800; color:var(--gold-light); }
.fl .save span { font-size:13px; color:var(--muted); }
.fl .value .cta-row { text-align:center; margin-top:28px; }

/* ---------- escolha (versão grátis: uma das duas) ---------- */
.fl .picks { display:grid; gap:14px; max-width:860px; margin:0 auto; align-items:stretch; }
.fl .pick { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px 22px; background-image:radial-gradient(120% 80% at 50% 0%, rgba(207,158,85,.12), transparent 60%); }
.fl .pick h3 { font-size:clamp(30px,6vw,38px); margin:8px 0 10px; }
.fl .pick-price { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.fl .pick-price s { color:var(--muted2); font-size:16px; }
.fl .pick-price b { font-family:var(--display); font-weight:400; font-size:52px; line-height:1; color:var(--gold); }
.fl .pick ul { list-style:none; display:grid; gap:8px; margin-bottom:22px; flex:1; }
.fl .pick li { display:grid; grid-template-columns:20px 1fr; gap:8px; font-size:14.5px; color:var(--muted); }
.fl .pick li::before { content:"✓"; color:var(--gold); font-weight:800; }
.fl .pick .btn { width:100%; padding:15px 18px; font-size:14px; }
.fl .pick-or { align-self:center; justify-self:center; font-family:var(--display); font-size:26px; letter-spacing:1px; text-transform:uppercase; color:var(--muted2); }
.fl .picks-note { text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
@media (min-width:760px){ .fl .picks { grid-template-columns:1fr auto 1fr; gap:18px; } }

/* ---------- how it works ---------- */
.fl .how-grid { display:grid; gap:28px; align-items:center; padding:0 20px; max-width:1080px; margin:0 auto; }
.fl .how-grid img { border-radius:14px; width:100%; object-fit:cover; aspect-ratio:4/3; }
.fl .how-copy h2 { font-size:clamp(36px,7vw,56px); margin:8px 0 18px; }
.fl .steps { list-style:none; display:grid; gap:16px; counter-reset:s; }
.fl .steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; font-size:15px; color:var(--muted); }
.fl .steps li b { color:var(--text); }
.fl .steps li::before { counter-increment:s; content:counter(s); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:20px; color:#1a1206; background:linear-gradient(135deg,var(--gold-light),var(--gold)); }
@media (min-width:860px){ .fl .how-grid { grid-template-columns:1fr 1fr; gap:48px; } }

/* ---------- why westca ---------- */
.fl .why { background:var(--bg2); }
.fl .why-pics { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; max-width:1080px; margin:0 auto 26px; padding:0 20px; }
.fl .why-pics img { width:100%; height:100%; object-fit:cover; border-radius:14px; aspect-ratio:4/3; }
.fl .why-list { list-style:none; display:grid; gap:12px; max-width:1080px; margin:0 auto; padding:0 20px; }
.fl .why-list li { display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14.5px; color:var(--muted); background:var(--surface); border:1px solid var(--soft); border-radius:12px; padding:16px; }
.fl .why-list li::before { content:"✓"; color:var(--gold); font-weight:800; }
.fl .why-list li b { color:var(--text); display:block; font-size:15px; }
@media (min-width:760px){ .fl .why-list { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .fl .why-list { grid-template-columns:repeat(4,1fr); } }

/* ---------- final ---------- */
.fl .final { text-align:center; border-top:1px solid var(--border); }
.fl .final .form-note { margin-top:14px; font-size:12.5px; color:var(--muted2); }
.fl .final .form-note a { color:var(--muted); font-weight:600; }
.fl .fine { max-width:760px; margin:26px auto 0; padding:0 20px; font-size:12px; color:var(--muted2); text-align:center; }

.fl footer { padding:36px 20px 44px; text-align:center; border-top:1px solid rgba(255,255,255,.06); }
.fl footer img { height:24px; width:auto; margin:0 auto 12px; opacity:.85; }
.fl footer p { font-size:12.5px; color:var(--muted2); }
.fl footer a { color:var(--muted); font-weight:600; }
.fl footer a:hover { color:var(--gold); }

/* ---------- sign-up wizard (popup) ---------- */
.fl .wz-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(5,5,6,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.fl .wz-overlay.open { opacity:1; visibility:visible; }
.fl .wz-box {
  position:relative; width:min(520px,100%); max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:22px 22px 26px; box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.985); transition:transform .3s var(--spring);
}
.fl .wz-overlay.open .wz-box { transform:none; }
.fl .wz-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }
.fl .wz-close:hover { color:var(--gold); border-color:var(--gold); }
.fl .wz-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-right:38px; }
.fl .wz-head img { height:20px; width:auto; opacity:.9; }
.fl .wz-head span { font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted2); }
.fl .wz-step { display:none; }
.fl .wz-step.on { display:block; animation:flWzIn .34s var(--spring); }
.fl .wz-step.on.back { animation-name:flWzInBack; }
@keyframes flWzIn { from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none} }
@keyframes flWzInBack { from{opacity:0; transform:translateX(-18px)} to{opacity:1; transform:none} }
.fl .wz-q { font-size:clamp(28px,6vw,36px); line-height:1.02; margin-bottom:6px; }
.fl .wz-sub { font-size:13.5px; color:var(--muted2); margin-bottom:18px; }
.fl .wz-field { margin-bottom:12px; }
.fl .wz-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.fl .wz-field label .req { color:var(--gold); }
.fl .wz-field input { width:100%; background:#0e0e10; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:var(--text); font-family:var(--sans); font-size:15px; padding:13px 14px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.fl .wz-field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(207,158,85,.14); }
.fl .wz-opts { display:grid; gap:10px; }
.fl .wz-opt {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#0e0e10; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:15px 16px; cursor:pointer; color:var(--text);
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.fl .wz-opt:hover { border-color:var(--gold); transform:translateY(-1px); }
.fl .wz-opt.sel { border-color:var(--gold); background:rgba(207,158,85,.1); animation:flPick .32s var(--spring); }
@keyframes flPick { 40%{transform:scale(.97)} 100%{transform:none} }
.fl .wz-opt .dot { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.25); flex-shrink:0; transition:all .15s ease; }
.fl .wz-opt.sel .dot { border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--surface); }
.fl .wz-err { color:var(--bad); font-size:12.5px; min-height:16px; margin:6px 0 2px; }
.fl .wz-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.fl .wz-actions .btn { flex:1; }
.fl .wz-back { background:none; border:none; color:var(--muted2); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; padding:10px 2px; }
.fl .wz-back:hover { color:var(--gold); }
.fl .wz-hp { position:absolute; left:-9999px; opacity:0; }
.fl .wz-done { text-align:center; padding:10px 0 4px; }
.fl .wz-done .ticket { margin:18px 0 20px; border:1px dashed var(--border); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--muted); }
.fl .wz-done .ticket b { color:var(--text); display:block; font-size:15px; }
.fl .wz-done .ticket a { color:var(--gold-light); font-weight:600; }
@media (max-width:560px){
  .fl .wz-overlay { padding:0; }
  .fl .wz-box { width:100%; max-height:100%; height:100%; border-radius:0; border:none; padding:94px 18px 28px; }
  .fl .wz-close { top:86px; }
  .fl .wz-head span { display:none; }
  /* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo. */
  .fl .wz-box input { font-size:16px; }
}

/* ---------- dynamic island ----------
   Pílula preta no topo que muda de forma com o estado do cadastro:
   progresso → enviando → confirmado (ou erro). */
.fl .di {
  position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 12px); z-index:1100;
  height:38px; width:200px; border-radius:22px;
  background:#000; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px; padding:0 14px 0 8px; overflow:hidden;
  transform:translate(-50%,-70px) scale(.9); opacity:0;
  transition:width .5s var(--spring), height .5s var(--spring), border-radius .5s var(--spring),
             transform .5s var(--spring), opacity .25s ease, box-shadow .3s ease;
  pointer-events:none;
}
.fl .di.show { transform:translate(-50%,0) scale(1); opacity:1; }
.fl .di.bump { animation:flDiBump .42s var(--spring); }
@keyframes flDiBump { 40%{ transform:translate(-50%,0) scale(1.05,.94);} 100%{ transform:translate(-50%,0) scale(1);} }
.fl .di-ico { position:relative; width:24px; height:24px; flex-shrink:0; transition:width .5s var(--spring), height .5s var(--spring); }
.fl .di-ico svg { position:absolute; inset:0; width:100%; height:100%; }
.fl .di-ring circle { fill:none; stroke-width:3; }
.fl .di-ring .trk { stroke:rgba(255,255,255,.14); }
.fl .di-ring .val { stroke:var(--gold); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .5s var(--spring); }
.fl .di-spin { opacity:0; animation:flSpin .9s linear infinite; }
.fl .di-spin circle { fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:40 100; }
@keyframes flSpin { to{ transform:rotate(360deg);} }
.fl .di-check { opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .45s var(--spring); }
.fl .di-check circle { fill:var(--ok); }
.fl .di-check path { fill:none; stroke:#062010; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .4s ease .15s; }
.fl .di-x { opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .45s var(--spring); }
.fl .di-x circle { fill:var(--bad); }
.fl .di-x path { stroke:#2a0909; stroke-width:3; stroke-linecap:round; }
.fl .di-txt { flex:1; min-width:0; display:grid; }
.fl .di-txt > * { grid-area:1/1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .2s ease, transform .35s var(--spring); }
.fl .di-t1 { font-size:13px; font-weight:600; }
.fl .di-t2 { font-size:11.5px; color:rgba(255,255,255,.6); opacity:0; }
.fl .di-num { font-size:12.5px; font-weight:700; color:var(--gold-light); font-variant-numeric:tabular-nums; transition:opacity .2s ease; }

.fl .di[data-s="sending"] { width:220px; }
.fl .di[data-s="sending"] .di-ring { opacity:0; }
.fl .di[data-s="sending"] .di-spin { opacity:1; }
.fl .di[data-s="sending"] .di-num { opacity:0; }

.fl .di[data-s="done"] { width:min(340px, calc(100vw - 24px)); height:68px; border-radius:34px; padding:0 20px 0 14px; gap:14px; box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(127,212,154,.25); }
.fl .di[data-s="done"] .di-ico { width:38px; height:38px; }
.fl .di[data-s="done"] .di-ring { opacity:0; }
.fl .di[data-s="done"] .di-check { opacity:1; transform:scale(1); }
.fl .di[data-s="done"] .di-check path { stroke-dashoffset:0; }
.fl .di[data-s="done"] .di-txt { align-content:center; gap:2px; }
.fl .di[data-s="done"] .di-txt > * { grid-area:auto; }
.fl .di[data-s="done"] .di-t1 { font-size:15px; }
.fl .di[data-s="done"] .di-t2 { opacity:1; }
.fl .di[data-s="done"] .di-num { opacity:0; width:0; }

.fl .di[data-s="registered"] { width:142px; }
.fl .di[data-s="registered"] .di-ring { opacity:0; }
.fl .di[data-s="registered"] .di-check { opacity:1; transform:scale(1); }
.fl .di[data-s="registered"] .di-check path { stroke-dashoffset:0; }
.fl .di[data-s="registered"] .di-num { opacity:0; width:0; }

.fl .di[data-s="error"] { width:min(300px, calc(100vw - 24px)); }
.fl .di[data-s="error"] .di-ring { opacity:0; }
.fl .di[data-s="error"] .di-x { opacity:1; transform:scale(1); }
.fl .di[data-s="error"] .di-num { opacity:0; width:0; }
.fl .di.shake { animation:flDiShake .45s ease; }
@keyframes flDiShake { 20%,60%{ transform:translate(calc(-50% - 6px),0);} 40%,80%{ transform:translate(calc(-50% + 6px),0);} }

@media (prefers-reduced-motion:reduce){
  .fl *, .fl *::before, .fl *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .fl .di-spin { animation:none; }
}