/* =============================================================
   Paletas de cor
   - Claro: tons de verde-água (saúde) e branco-gelo, sem branco puro.
   - Escuro: azul-petróleo escuro, confortável à noite.
   O tema escuro vale quando o <html> tem data-tema="escuro"
   (o app.js define isso pelo celular/computador da pessoa ou pelo botão 🌙).
   ============================================================= */
:root{
  color-scheme:light;
  --bg:#EFEEFF;          /* fundo da página (lavanda clara) */
  --card:#FFFFFF;        /* cartões, painéis, cabeçalho */
  --campo:#FFFFFF;       /* campos de formulário */
  --ink:#1F1F33;         /* texto principal */
  --soft:#6B6B85;        /* texto secundário */
  --line:#E1E0F7; --line-forte:#CBC9F0; --input-b:#D3D1F2;
  --teal:#5D5FEF;        /* índigo principal */
  --teal-btn:#5D5FEF;    /* botões (texto branco com bom contraste) */
  --teal-d:#4547C9;      /* títulos e textos em índigo */
  --teal-l:#E8E7FF;      /* fundo secundário */
  --teal-b:#CFCEFB;
  --azul-destaque:#8B8DF5;
  --lavanda:#8B8DF5; --lavanda-d:#4B4DD1; --lavanda-l:#ECEBFF;
  --deep:#1C1C2E;        /* rodapé, faixas e avisos escuros */
  --hero-tint:#DCDBFF;
  --gold:#B7791F; --gold-d:#8A5A12; --gold-l:#FBF0DC; --gold-l2:#F8E2BA; --gold-b:#E9CF9C;
  --ok:#0B6B3A; --ok-l:#E2F3E8; --ok-b:#BFE3CC;
  --red:#C0392B; --red-d:#8E2A20; --red-l:#F9E7E5; --red-b:#EFC6C1;
  --estrela:#E0A100; --estrela-off:#DAD9EE;
  --wa:#16A34A; --on:#fff;
  --r:16px; --sh:0 1px 3px rgba(31,31,51,.05),0 8px 24px rgba(93,95,239,.08);
}

:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#0F0F1A;
  --card:#181829;
  --campo:#13131F;
  --ink:#E8E8F5;
  --soft:#A3A3C2;
  --line:#26263D; --line-forte:#33334F; --input-b:#3B3B5C;
  --teal:#8B8DF5; --teal-btn:#5D5FEF; --teal-d:#B9BAFB; --teal-l:#222244; --teal-b:#34346A;
  --azul-destaque:#8B8DF5;
  --lavanda:#A5A6F8; --lavanda-d:#C7C8FC; --lavanda-l:#232347;
  --deep:#0A0A14;
  --hero-tint:#1D1D3A;
  --gold:#D99A3E; --gold-d:#F0C27A; --gold-l:#33270F; --gold-l2:#45331A; --gold-b:#6A5022;
  --ok:#62D394; --ok-l:#10301F; --ok-b:#1E5537;
  --red:#E56A5D; --red-d:#F4A69C; --red-l:#3A1916; --red-b:#5E2923;
  --estrela:#F2B824; --estrela-off:#36364F;
  --wa:#17A84D;
  --sh:0 1px 3px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
}
:root[data-tema="escuro"] img{filter:brightness(.92)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.55 'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin:0 0 .4em;line-height:1.15;letter-spacing:-.025em}
h2{font-size:26px} h3{font-size:19px}
a{color:inherit}
:focus-visible{outline:3px solid rgba(93,95,239,.35);outline-offset:2px}

/* Topo */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;position:sticky;top:0;z-index:10;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font:700 23px 'Plus Jakarta Sans',sans-serif;color:var(--teal-d);text-decoration:none;display:flex;align-items:center;gap:9px}
.brand::before{content:'+';width:30px;height:30px;border-radius:9px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font:700 22px/1 'Plus Jakarta Sans',sans-serif}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:9px 15px;border-radius:10px;font:500 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;color:var(--soft);transition:.15s}
.tabs button:hover{background:var(--teal-l);color:var(--teal-d)}
.tabs button.active{background:var(--teal-l);color:var(--teal-d);font-weight:600}

/* Cabeçalho do site */
.top.topo{display:block;padding:0;background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.topo.rolado{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(31,31,51,.08)}
.topo-in{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.topo .brand::before{width:38px;height:38px;border-radius:12px;font-size:24px;background:linear-gradient(135deg,var(--teal),var(--deep));box-shadow:0 4px 12px rgba(93,95,239,.3)}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt small{font:500 11.5px 'Plus Jakarta Sans',sans-serif;color:var(--soft);letter-spacing:.02em;margin-top:3px}
.topo .tabs{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-left:auto}
.topo .tabs button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topo .tabs .nav-link{color:var(--ink);font-weight:500;position:relative}
.topo .tabs .nav-link svg{color:var(--teal)}
.topo .tabs .nav-link.active{background:transparent;color:var(--teal-d);font-weight:600}
.topo .tabs .nav-link.active::after{content:'';position:absolute;left:15px;right:15px;bottom:2px;height:2.5px;border-radius:2px;background:var(--teal)}
.topo .tabs .nav-ghost{border:1.5px solid var(--line);border-radius:999px;color:var(--teal-d);font-weight:600;padding:8px 16px}
.topo .tabs .nav-ghost:hover,.topo .tabs .nav-ghost.active{border-color:var(--teal);background:var(--card)}
.topo .tabs .nav-cta{background:linear-gradient(135deg,#2A2A40,#15151F);color:#fff;font-weight:600;border-radius:999px;padding:9px 18px;box-shadow:0 4px 14px rgba(21,21,31,.25)}
.topo .tabs .nav-cta:hover,.topo .tabs .nav-cta.active{background:linear-gradient(135deg,#3A3A55,#1F1F2E);color:#fff;transform:translateY(-1px)}
.nav-user{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--teal-l);color:var(--teal-d);font-size:14px;font-weight:600;max-width:180px}
.nav-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user .avatar{font-size:12px;box-shadow:none;border:0}
.menu-btn{display:none;border:0;background:transparent;color:var(--teal-d);padding:8px;border-radius:10px;cursor:pointer}
.menu-btn:hover{background:var(--teal-l)}
.menu-btn path{transition:transform .2s,opacity .2s;transform-origin:center}
.topo.aberto .menu-btn .l1{transform:translateY(5px) rotate(45deg)}
.topo.aberto .menu-btn .l2{opacity:0}
.topo.aberto .menu-btn .l3{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .topo .tabs{display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:6px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(31,31,51,.16)}
  .topo.aberto .tabs{display:flex}
  .topo .tabs button{justify-content:center;padding:12px 16px}
  .topo .tabs .nav-link.active::after{display:none}
  .topo .tabs .nav-link.active{background:var(--teal-l)}
  .nav-user{align-self:center;max-width:none}
}
main{flex:1 0 auto;width:100%;max-width:1040px;margin:0 auto;padding:26px 20px 56px}

/* Hero */
.hero{margin-bottom:22px}
.hero p{color:var(--soft);max-width:60ch;margin:0}
.hero.big{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:36px;border-radius:24px;margin-bottom:28px;
  background:linear-gradient(120deg,var(--card) 40%,var(--hero-tint));border:1px solid var(--line);box-shadow:var(--sh)}
.hero.big h1{font-size:clamp(28px,4.2vw,40px);color:var(--teal-d)}
.hero.big p{font-size:17px}
.eyebrow{display:inline-block;background:var(--teal-l);color:var(--teal-d);padding:5px 12px;border-radius:999px;font-size:13px;font-weight:500;margin-bottom:14px}
.trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--teal-d);font-weight:500}
.search{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(93,95,239,.14)}
.search label{margin:0 0 6px;font-weight:600;color:var(--teal-d);font-size:14px}
.search select{font-size:16px}
.tipos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tipos button{border:1.5px solid var(--line);background:var(--card);color:var(--soft);padding:7px 14px;border-radius:999px;font:500 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:.15s}
.tipos button:hover{border-color:var(--teal);color:var(--teal-d)}
.tipos button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sec{font-size:22px;margin:4px 0 16px;color:var(--teal-d)}

/* Passos */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0;margin:34px 0 0}
.steps li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.steps b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center}
.steps strong{display:block;font-size:15px}.steps span{font-size:13px;color:var(--soft)}

/* Formulários */
label{display:block;font-size:13px;font-weight:500;color:var(--soft);margin:16px 0 6px}
input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--input-b);background:var(--campo);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(93,95,239,.14)}
select.inline{width:auto}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.aceite{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink);cursor:pointer}
.aceite input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--teal)}
.aceite a{color:var(--teal);font-weight:600}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
/* Textos longos sem espaço (e-mails, links, "aaaa...") quebram dentro do cartão em vez de vazar */
.grid>*,.card,.name-row>div,.perfil-pub>div,.duas-col>*{min-width:0}
.card{overflow-wrap:anywhere;word-break:break-word}
.chip,.tag{max-width:100%;overflow-wrap:anywhere}
.local{white-space:nowrap}
/* ===== Cartão do profissional ===== */
/* Cor de cada tipo: --tc (principal) e --tc-l (fundo claro) */
.t-cuid{--tc:#5D5FEF;--tc-l:#E8E7FF}
.t-tec{--tc:#8B5CF6;--tc-l:#F1EAFF}
.t-enf{--tc:#3B82F6;--tc-l:#E4EEFF}
:root[data-tema="escuro"] .t-cuid{--tc:#9A9CF8;--tc-l:#222244}
:root[data-tema="escuro"] .t-tec{--tc:#B69BFB;--tc-l:#2A1F45}
:root[data-tema="escuro"] .t-enf{--tc:#7FB0FA;--tc-l:#1A2942}

.card.pro{position:relative;overflow:hidden;padding:0 20px 20px;gap:14px;border-radius:20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card.pro::before{content:'';display:block;height:5px;margin:0 -20px 2px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 55%,var(--card)))}
.card.pro:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tc) 45%,var(--card));box-shadow:0 14px 32px rgba(31,31,51,.12)}

.pro-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tipo-badge{display:inline-flex;align-items:center;gap:6px;background:var(--tc-l);color:var(--tc);font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px}
.pro-topo .local{font-size:12.5px;color:var(--soft)}
.card.pro .name-row{align-items:center;gap:14px}
.card.pro .avatar{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--tc-l);background:var(--tc-l);color:var(--tc);font-size:22px}
.card.pro .name{font-size:19px;line-height:1.2;color:var(--ink)}
.card.pro .nome-link:hover{color:var(--tc)}
.selo-novo{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--gold-d);background:var(--gold-l);padding:2px 9px;border-radius:999px}

.fatos{list-style:none;margin:0;padding:10px 12px;display:flex;flex-direction:column;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:14px;font-size:13.5px;color:var(--ink)}
.fatos li{display:flex;align-items:center;gap:10px;min-width:0}
.fatos .ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 1px 2px rgba(31,31,51,.08)}

.apresentacao{margin:0;padding:2px 0 2px 14px;border-left:3px solid var(--tc);font-size:14.5px;line-height:1.55;color:var(--ink);font-style:italic;white-space:pre-line}
.card.pro .desc{flex-grow:0}
.card.pro .desc .txt{display:block;white-space:pre-line}

/* Na busca, textos longos resumidos em 3 linhas (o texto inteiro fica na página do perfil) */
.card.pro:not(.completo) .apresentacao,
.card.pro:not(.completo) .desc .txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Preço e botões sempre no fim do cartão */
.preco{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.preco-lbl{font-size:12.5px;color:var(--soft)}
.preco-valor{font:700 24px 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.preco-det{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--soft)}
.card.pro .btn-wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;font-size:15px;border-radius:14px;margin-top:2px;box-shadow:0 6px 16px rgba(22,163,74,.25)}
.ver-perfil{text-align:center;font-size:13.5px;font-weight:600;color:var(--tc);text-decoration:none;margin-top:-4px}
.ver-perfil:hover{text-decoration:underline}

/* ===== Versão compacta (busca e prévia do painel) ===== */
.card.pro:not(.completo){gap:10px;padding:0 16px 16px}
.card.pro:not(.completo)::before{margin:0 -16px 0}
.card.pro:not(.completo) .pro-topo{margin-top:10px}
.card.pro:not(.completo) .name-row{gap:12px}
.card.pro:not(.completo) .avatar{width:50px !important;height:50px !important;font-size:18px}
.card.pro:not(.completo) .name{font-size:17px}
/* Informações em etiquetas lado a lado */
.card.pro:not(.completo) .fatos{flex-direction:row;flex-wrap:wrap;gap:6px;padding:0;background:none;border:0;font-size:12.5px}
.card.pro:not(.completo) .fatos li{gap:5px;padding:4px 10px 4px 8px;background:var(--bg);border:1px solid var(--line);border-radius:999px}
.card.pro:not(.completo) .fatos .ic{width:auto;height:auto;background:none;box-shadow:none;font-size:13px}
/* Textos em 2 linhas */
.card.pro:not(.completo) .apresentacao{font-size:14px;-webkit-line-clamp:2}
.card.pro:not(.completo) .desc{font-size:13.5px}
.card.pro:not(.completo) .desc .txt{-webkit-line-clamp:2}
.card.pro:not(.completo) .desc strong{font-size:11px}
/* Preço e botão */
.card.pro:not(.completo) .preco{padding-top:10px}
.card.pro:not(.completo) .preco-valor{font-size:20px}
.card.pro:not(.completo) .btn-wa{padding:11px 16px;font-size:14.5px}
.card.pro:not(.completo) .ver-perfil{font-size:13px;margin-top:-2px}

/* Página do perfil: cartão maior */
.perfil-pub .card.pro .name{font-size:24px}
.grid>.hint{grid-column:1/-1;text-align:center;padding:34px 12px;background:var(--card);border:1px dashed var(--line-forte);border-radius:var(--r);font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh);transition:border-color .2s,box-shadow .2s}
.name-row{display:flex;align-items:center;gap:12px}
.avatar{border-radius:50%;background:var(--teal-l);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font:600 18px 'Plus Jakarta Sans',sans-serif;object-fit:cover;flex:none;border:2px solid var(--card);box-shadow:0 0 0 2px var(--teal-l)}
.name{font:600 17px 'Plus Jakarta Sans',sans-serif}
.age,.hint{font-size:13px;color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip,.tag{font-size:12px;background:var(--teal-l);color:var(--teal-d);border-radius:999px;padding:3px 10px;font-weight:500}
.tag{background:var(--card);border:1px solid var(--line);color:var(--soft);border-radius:6px}
.desc{font-size:14px;color:var(--soft);flex-grow:1;white-space:pre-line}
.desc strong{display:block;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.prices{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.prices span{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:5px 10px;color:var(--teal-d)}

/* Botões */
.btn{border:0;border-radius:12px;padding:12px 20px;font:600 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:filter .15s,transform .15s;display:inline-block}
.btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default}
.btn-p{background:var(--teal-btn);color:#fff}
.btn-o{background:var(--card);border:1.5px solid var(--teal);color:var(--teal-d)}
.btn-wa{background:var(--wa);color:#fff;text-align:center;text-decoration:none;margin-top:4px}

/* Painéis e mensagens */
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;max-width:540px;box-shadow:var(--sh)}
.err{color:var(--red);font-size:14px;margin-top:10px}
.ok{color:var(--ok);font-size:14px;background:var(--ok-l);padding:8px 12px;border-radius:10px}
.warn{color:var(--gold);font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px;max-width:560px}
.spread{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);background:var(--deep);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:90vw;text-align:center;box-shadow:var(--sh)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Rodapé */
.rodape{flex-shrink:0;background:var(--deep);color:#E6E5F7;font-size:14px;padding:44px 24px 0}
.rodape-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.rodape .brand{color:#fff}
.rodape .brand::before{background:#F4F3FF;color:#3B3DB8}
.rodape-marca p{margin:12px 0 16px;color:#BDBCD8;max-width:34ch;line-height:1.6}
.rodape-col{display:flex;flex-direction:column;gap:9px}
.rodape-col h4{margin:4px 0 6px;font:600 13px 'Plus Jakarta Sans',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#fff}
.rodape-col a,.rodape-contato a,.rodape-contato span{color:#E6E5F7;text-decoration:none}
.rodape-col a:hover,.rodape-contato a:hover{color:#fff;text-decoration:underline}
.rodape-contato{display:flex;flex-direction:column;gap:9px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.rodape-contato:empty{display:none}
.rodape-cidades{max-width:1040px;margin:30px auto 0;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);color:#BDBCD8}
.rodape-cidades:empty{display:none}
.rodape-cidades b{color:#fff;font-weight:600}
.rodape-base{max-width:1040px;margin:0 auto;padding:16px 0 28px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:10px 32px;flex-wrap:wrap;font-size:12.5px;color:#A3A2C2}
.rodape-base span:last-child{max-width:62ch}
.redes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.redes[hidden],.rede[hidden]{display:none}
.rede{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s,color .15s,transform .15s}
.rede:hover{background:var(--card);color:var(--teal-d);transform:translateY(-2px)}
@media (max-width:860px){ .rodape-grid{grid-template-columns:1fr 1fr} .rodape-marca{grid-column:1/-1} }
@media (max-width:480px){ .rodape-grid{grid-template-columns:1fr;gap:26px} .rodape{padding:34px 16px 0} }
.foot{flex-shrink:0;text-align:center;color:var(--soft);font-size:13px;padding:24px 20px 36px;background:var(--card);border-top:1px solid var(--line)}

/* Avaliações (estrelas) */
.estrelas{color:var(--estrela);letter-spacing:1px;font-size:15px}
.estrelas i{font-style:normal;color:var(--estrela-off)}
.nota{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:2px}
.nota b{color:var(--ink)}
.nota span{color:var(--soft)}
.nota .estrelas{color:var(--estrela)}
.nota.grande{display:inline-flex;font-size:15px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;margin-left:8px}
.nota.grande .estrelas{font-size:18px}
.nome-link{text-decoration:none}
.nome-link:hover{text-decoration:underline}
.avaliacoes{display:flex;flex-direction:column;gap:10px}
.avaliacao{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.avaliacao p{margin:6px 0 0;font-size:14px;color:var(--ink);white-space:pre-line}
.estrelas-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin:6px 0 2px}
.estrelas-input input{position:absolute;opacity:0;width:1px;height:1px}
.estrelas-input label{margin:0;font-size:32px;line-height:1;color:var(--estrela-off);cursor:pointer;transition:color .1s}
.estrelas-input label:hover,.estrelas-input label:hover~label,.estrelas-input input:checked~label{color:var(--estrela)}
.estrelas-input input:focus-visible+label{outline:3px solid rgba(93,95,239,.35);border-radius:6px}

/* Painel do(a) profissional */
.bloco{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--sh);margin-bottom:18px}
.bloco h3{color:var(--teal-d);margin-bottom:10px}
.bloco-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bloco-head h3{margin:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1.5px solid var(--line);background:var(--card);color:var(--soft);padding:6px 12px;border-radius:999px;font:500 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.seg button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.faixa{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-radius:16px;padding:16px 20px;margin-bottom:18px;border:1px solid}
.faixa strong{display:block;font-size:16px}
.faixa span{font-size:14px}
.faixa.ok-faixa{background:var(--ok-l);border-color:var(--ok-b);color:var(--ok)}
.faixa.aviso{background:var(--gold-l);border-color:var(--gold-b);color:var(--gold-d)}
.faixa.pausa{background:var(--teal-l);border-color:var(--teal-b);color:var(--teal-d)}
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metrica{display:flex;flex-direction:column;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.metrica b{font:700 30px/1.15 'Plus Jakarta Sans',sans-serif;color:var(--teal-d)}
.metrica span:last-child{font-size:13px;color:var(--soft)}
.metrica.destaque-m{background:var(--ok-l);border-color:var(--ok-b)}
.metrica.destaque-m b{color:var(--ok)}
.m-ico{font-size:20px}
.mini-bars{display:flex;align-items:flex-end;gap:3px;height:60px;margin:16px 0 6px}
.mini-bars i{flex:1;background:var(--wa);border-radius:3px 3px 0 0;min-height:3px}
.mini-bars i.zero{background:var(--line)}
.link-box{display:flex;gap:8px}
.link-box input{flex:1;min-width:0;background:var(--bg);font-size:14px}
.duas-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.duas-col>.bloco{margin-bottom:0}
.progresso{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:14px}
.progresso i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--wa));border-radius:999px}
.checklist{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.checklist li>span{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);color:var(--soft);font-size:12px}
.checklist li.feito>span{background:var(--wa);border-color:var(--wa);color:#fff}
.checklist li.feito b{color:var(--soft);font-weight:500}
.checklist small{display:block;color:var(--soft);font-size:12px}
.dicas{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--soft)}
.dicas b{color:var(--ink)}
.mini-form{display:flex;flex-direction:column;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px}
.mini-form label{margin:10px 0 4px}
.mini-form .btn{margin-top:12px;align-self:flex-start}
.perigo{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.perigo summary{cursor:pointer;color:var(--red);font-weight:600;font-size:14px}
.perigo p{font-size:14px;color:var(--soft)}
.btn-perigo{background:var(--red);color:#fff}
.scroll{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;color:var(--soft);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:9px 10px;border-bottom:1px solid var(--line)}
.tabela tr:last-child td{border-bottom:0}
.st{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.st.PAGO{background:var(--ok-l);color:var(--ok)}
.st.ESTORNADO{background:var(--red-l);color:var(--red)}

/* Filtros da busca */
.filtros-busca{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px}
.filtros-busca[hidden]{display:none}
.fb-linha{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.fb-check{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.fb-check input{width:16px;height:16px;margin:0;accent-color:var(--teal)}
.fb-check:has(input:checked){border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}
.fb-sel{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--soft)}
.fb-sel select{width:auto;padding:7px 10px;font-size:13px}

/* Faixas e cupom */
.faixa.erro-faixa{background:var(--red-l);border-color:var(--red-b);color:var(--red-d)}
.cupom-box{margin-top:16px;padding:14px;border:1.5px dashed var(--gold-b);border-radius:14px;background:var(--gold-l)}
.cupom-box label{margin:0 0 8px;font-weight:600;color:var(--gold-d)}
.cupom-ok{color:var(--ok);font-weight:600}
.cupom-destaque{margin:4px 0 12px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,var(--gold-l),var(--gold-l2));color:var(--gold-d);font-size:14px;line-height:1.4}

/* Denúncia */
.denuncia{margin-top:14px}
.denuncia summary{cursor:pointer;color:var(--soft);font-size:13px;font-weight:500}
.denuncia summary:hover{color:var(--red)}
.denuncia form{margin-top:10px}

/* Aplicativo */
.app-bloco{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--card) 50%,var(--teal-l))}
.app-bloco h3{margin-bottom:6px}

.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--sh)}

/* Página pública do perfil */
.perfil-pub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.perfil-pub h3{color:var(--teal-d);display:flex;align-items:center;flex-wrap:wrap}

/* Fotos */
.hero.big.hero-foto{background:linear-gradient(90deg,var(--card) 30%,color-mix(in srgb,var(--card) 82%,transparent) 55%,color-mix(in srgb,var(--card) 25%,transparent)),url(/img/maos-dadas.jpg) right center/cover no-repeat}
.foto-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:0 0 34px}
.foto-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--sh)}
.foto-split h2{color:var(--teal-d)}
.foto-split p{color:var(--soft);font-size:16px;margin:0}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:var(--sh)}
.cta-final.cta-foto{background:linear-gradient(120deg,rgba(31,31,51,.92),rgba(93,95,239,.78)),url(/img/passeio-campo.jpg) center/cover no-repeat}

/* Captação de profissionais */
.tabs button.nav-cta{background:var(--gold);color:#fff;font-weight:600}
.tabs button.nav-cta:hover,.tabs button.nav-cta.active{background:#9A6417;color:#fff}
.familia-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin-bottom:16px;padding:10px 16px;border-radius:12px;background:var(--teal-l);color:var(--teal-d);font-size:14px;text-align:center}
.link{border:0;background:none;padding:0;font:600 14px 'Plus Jakarta Sans',sans-serif;color:var(--teal);cursor:pointer;text-decoration:underline}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-light{background:var(--card);color:var(--teal-d)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.promo .price-card{background:var(--card);border:2px solid var(--teal);border-radius:20px;padding:26px;text-align:center;box-shadow:0 10px 30px rgba(93,95,239,.16)}
.price-lbl{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.price-big{font:700 44px/1.1 'Plus Jakarta Sans',sans-serif;color:var(--teal-d);margin-top:6px}
.price-sub{color:var(--soft);font-size:14px}
.price-day{display:inline-block;margin:14px 0 10px;background:var(--gold-l);color:var(--gold);font-weight:600;padding:6px 14px;border-radius:999px;font-size:14px}
.price-list{list-style:none;padding:0;margin:14px 0 4px;text-align:left}
.price-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.price-list li:last-child{border-bottom:0}
.price-list strong{font:700 20px 'Plus Jakarta Sans',sans-serif;color:var(--teal-d)}
.price-list em{font-style:normal;font-size:12px;font-weight:600;color:#fff;background:var(--gold);border-radius:999px;padding:2px 8px;margin-left:4px}
.planos{display:grid;gap:10px}
.plano{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"radio nome preco" "radio mes econ";align-items:center;gap:2px 12px;margin:0;padding:14px 16px;border:2px solid var(--line);border-radius:14px;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
.plano:hover{border-color:var(--teal)}
.plano.on{border-color:var(--teal);background:var(--teal-l)}
.plano input{grid-area:radio;width:18px;height:18px;margin:0;accent-color:var(--teal)}
.plano-nome{grid-area:nome;font-weight:600;font-size:16px}
.plano-preco{grid-area:preco;font:700 20px 'Plus Jakarta Sans',sans-serif;color:var(--teal-d);text-align:right}
.plano-mes{grid-area:mes;font-size:13px;color:var(--soft)}
.plano-econ{grid-area:econ;font-size:12px;font-weight:600;color:var(--ok);text-align:right}
.plano .selo{position:absolute;top:-10px;right:14px;background:var(--gold);color:#fff;font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.benefit{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh)}
.benefit strong{font-size:16px;color:var(--teal-d)}
.benefit span:last-child{font-size:14px;color:var(--soft)}
.b-ico{font-size:26px}
.faq{display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--teal-d)}
.faq p{margin:10px 0 0;color:var(--soft);font-size:15px}
.cta-final,.recruta{margin-top:38px;border-radius:24px;padding:34px 28px;background:linear-gradient(120deg,var(--deep),var(--teal));color:#fff}
.cta-final{text-align:center}
.cta-final h2{color:#fff;font-size:clamp(22px,3.4vw,30px)}
.cta-final p{opacity:.9;margin:0 0 20px}
.recruta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 26px}
.recruta strong{display:block;font:600 19px 'Plus Jakarta Sans',sans-serif}
.recruta span{opacity:.9;font-size:14px}

@media (max-width:760px){
  .hero.big{grid-template-columns:1fr;padding:24px 20px}
  .row2{grid-template-columns:1fr}
  .hero.big.hero-foto{background:linear-gradient(color-mix(in srgb,var(--card) 90%,transparent),color-mix(in srgb,var(--card) 90%,transparent)),url(/img/maos-dadas.jpg) center/cover no-repeat}
  .foto-split{grid-template-columns:1fr;gap:16px}
  .duas-col,.perfil-pub{grid-template-columns:1fr}
  .metricas{grid-template-columns:1fr}
  .bloco{padding:18px 16px}
  .link-box{flex-direction:column}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria img:last-child{display:none}
  .top{padding:10px 14px}
}
/* ===== Ajustes do tema escuro ===== */
/* Botão claro sobre faixas escuras continua claro */
:root[data-tema="escuro"] .btn-light{background:#EFEEFF;color:#3B3DB8}
/* Selos e etiquetas mais legíveis */
:root[data-tema="escuro"] .selo-novo{background:var(--gold-l);color:var(--gold-d)}
:root[data-tema="escuro"] .toast{background:#26264A;color:var(--ink)}
:root[data-tema="escuro"] .fatos .ic{background:var(--card)}
/* Transição suave ao trocar de tema */
body,.card,.bloco,.panel,.top.topo,input,select,textarea{transition:background-color .25s,border-color .25s,color .25s}

/* Botão de trocar o tema (no cabeçalho) */
.tema-btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;flex:none;transition:border-color .15s,transform .15s}
.tema-btn:hover{border-color:var(--teal);transform:rotate(-12deg)}
.topo-acoes{display:flex;align-items:center;gap:8px}
/* No escuro o azul principal fica claro: elementos com texto branco usam o azul de botão */
:root[data-tema="escuro"] .tipos button.on,
:root[data-tema="escuro"] .steps b,
:root[data-tema="escuro"] .seg button.on{background:var(--teal-btn);border-color:var(--teal-btn)}
:root[data-tema="escuro"] .btn-p{background:var(--teal-btn)}
/* No escuro, o botão preto "Anuncie" some no cabeçalho escuro: vira índigo */
:root[data-tema="escuro"] .topo .tabs .nav-cta{background:linear-gradient(135deg,#6D6FF2,#4B4DD1);box-shadow:0 4px 14px rgba(93,95,239,.3)}

/* =============================================================
   Modo claro "leve": as mesmas cores índigo/lavanda, sem áreas escuras.
   (O modo escuro continua escuro.)
   ============================================================= */
:root:not([data-tema="escuro"]){
  --claro-a:#ECEBFF;   /* lavanda bem clara */
  --claro-b:#DDDCFE;   /* lavanda um pouco mais forte */
}

/* Logo em índigo mais claro */
:root:not([data-tema="escuro"]) .brand::before{background:linear-gradient(135deg,#8587F5,#5D5FEF)}

/* Botão "Anuncie seu perfil" em índigo, não preto */
:root:not([data-tema="escuro"]) .topo .tabs .nav-cta{background:linear-gradient(135deg,#7476F3,#5D5FEF);box-shadow:0 4px 14px rgba(93,95,239,.28)}
:root:not([data-tema="escuro"]) .topo .tabs .nav-cta:hover,
:root:not([data-tema="escuro"]) .topo .tabs .nav-cta.active{background:linear-gradient(135deg,#6466F0,#4B4DD1)}

/* Avisos (toast) em índigo */
:root:not([data-tema="escuro"]) .toast{background:#5153E0}

/* Faixas de chamada: degradê lavanda suave, texto escuro */
:root:not([data-tema="escuro"]) .cta-final,
:root:not([data-tema="escuro"]) .recruta{background:linear-gradient(120deg,var(--claro-a),var(--claro-b));color:var(--ink);border:1px solid #D2D0FB}
:root:not([data-tema="escuro"]) .cta-final.cta-foto{background:linear-gradient(120deg,rgba(239,238,255,.95),rgba(214,213,253,.88)),url(/img/passeio-campo.jpg) center/cover no-repeat}
:root:not([data-tema="escuro"]) .cta-final h2,
:root:not([data-tema="escuro"]) .recruta strong{color:var(--teal-d)}
:root:not([data-tema="escuro"]) .cta-final p,
:root:not([data-tema="escuro"]) .recruta span{color:var(--soft);opacity:1}
:root:not([data-tema="escuro"]) .btn-light{background:var(--teal-btn);color:#fff;box-shadow:0 6px 16px rgba(93,95,239,.25)}

/* Rodapé lavanda claro */
:root:not([data-tema="escuro"]) .rodape{background:linear-gradient(180deg,var(--claro-a),var(--claro-b));color:var(--ink);border-top:1px solid #D2D0FB}
:root:not([data-tema="escuro"]) .rodape .brand{color:var(--teal-d)}
:root:not([data-tema="escuro"]) .rodape .brand::before{color:#fff}
:root:not([data-tema="escuro"]) .rodape-marca p{color:var(--soft)}
:root:not([data-tema="escuro"]) .rodape-col h4{color:var(--teal-d)}
:root:not([data-tema="escuro"]) .rodape-col a,
:root:not([data-tema="escuro"]) .rodape-contato a,
:root:not([data-tema="escuro"]) .rodape-contato span{color:var(--ink)}
:root:not([data-tema="escuro"]) .rodape-col a:hover,
:root:not([data-tema="escuro"]) .rodape-contato a:hover{color:var(--teal)}
:root:not([data-tema="escuro"]) .rodape-contato,
:root:not([data-tema="escuro"]) .rodape-cidades,
:root:not([data-tema="escuro"]) .rodape-base{border-top-color:rgba(93,95,239,.18)}
:root:not([data-tema="escuro"]) .rodape-cidades{color:var(--soft)}
:root:not([data-tema="escuro"]) .rodape-cidades b{color:var(--ink)}
:root:not([data-tema="escuro"]) .rodape-base{color:var(--soft)}
:root:not([data-tema="escuro"]) .rede{background:#fff;color:var(--teal);box-shadow:0 2px 6px rgba(93,95,239,.15)}
:root:not([data-tema="escuro"]) .rede:hover{background:var(--teal);color:#fff}

/* =============================================================
   VISUAL PREMIUM
   Camada final: tipografia, profundidade, vidro e micro-interações.
   ============================================================= */
:root{
  --sh-1:0 1px 2px rgba(31,31,51,.04),0 12px 32px -14px rgba(93,95,239,.22);
  --sh-2:0 2px 4px rgba(31,31,51,.05),0 22px 48px -18px rgba(93,95,239,.32);
  --borda-suave:color-mix(in srgb,var(--teal) 10%,var(--line));
}
:root[data-tema="escuro"]{
  --sh-1:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6);
  --sh-2:0 2px 6px rgba(0,0,0,.35),0 24px 50px -18px rgba(0,0,0,.7);
}

/* Fundo com brilhos suaves de índigo e lavanda */
body{background:
  radial-gradient(1100px 620px at 8% -8%,color-mix(in srgb,var(--teal) 13%,transparent),transparent 62%),
  radial-gradient(900px 560px at 100% 4%,color-mix(in srgb,#B9A8FF 20%,transparent),transparent 60%),
  var(--bg);background-attachment:fixed;letter-spacing:-.005em}

/* Ícones de linha */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}

/* Títulos */
.sec{font-size:clamp(22px,2.6vw,28px);font-weight:800;color:var(--ink);letter-spacing:-.03em}
.hero.big h1{font-size:clamp(30px,3.9vw,44px);font-weight:800;line-height:1.06;letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--ink) 35%,var(--teal) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.big p{font-size:17.5px;line-height:1.65}

/* Cabeçalho flutuante de vidro (em pílula) */
.top.topo{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 16px 0;box-shadow:none}
.top.topo.rolado{border:0;box-shadow:none}
.topo-in{background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--borda-suave);border-radius:999px;padding:9px 10px 9px 16px;box-shadow:0 8px 30px -10px rgba(93,95,239,.25);transition:box-shadow .25s}
.top.topo.rolado .topo-in{box-shadow:0 14px 40px -12px rgba(93,95,239,.35)}
.brand{font-weight:800;letter-spacing:-.03em}
.topo .brand::before{border-radius:12px;box-shadow:0 6px 16px -4px rgba(93,95,239,.55)}
@media (max-width:760px){
  .top.topo{padding:8px 10px 0}
  .topo-in{border-radius:20px}
}

/* Botões em pílula com brilho */
.btn{border-radius:999px;font-weight:700;letter-spacing:-.005em;transition:transform .18s,box-shadow .18s,background .18s,filter .18s}
.btn-p{background:linear-gradient(135deg,#7678F4,var(--teal-btn) 55%,#4B4DD1);color:#fff;
  box-shadow:0 10px 22px -8px rgba(93,95,239,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-p:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(93,95,239,.7),inset 0 1px 0 rgba(255,255,255,.28);filter:none}
.btn-o{background:var(--card);border:1.5px solid color-mix(in srgb,var(--teal) 35%,var(--line));color:var(--teal-d)}
.btn-o:hover:not(:disabled){background:var(--teal-l);border-color:var(--teal);filter:none}
.btn-wa{border-radius:999px}
.card.pro .btn-wa{border-radius:999px;box-shadow:0 10px 22px -8px rgba(22,163,74,.55),inset 0 1px 0 rgba(255,255,255,.25)}

/* Superfícies: cantos maiores, borda suave, sombra em camadas */
.card,.panel,.bloco,.benefit,.steps li,.faq details,.filtros-busca,.search,.price-card{border-color:var(--borda-suave);box-shadow:var(--sh-1)}
.card.pro{border-radius:24px}
.card.pro:hover{box-shadow:var(--sh-2)}
.panel,.bloco{border-radius:24px}
.hero.big{position:relative;overflow:hidden;border-radius:32px;padding:clamp(24px,4vw,52px);border-color:var(--borda-suave);box-shadow:var(--sh-2)}
/* Grade pontilhada sutil no topo */
.hero.big::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(color-mix(in srgb,var(--teal) 22%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 80% at 85% 20%,#000,transparent 70%);mask-image:radial-gradient(70% 80% at 85% 20%,#000,transparent 70%)}
.hero.big>*{position:relative;z-index:1}

/* Etiqueta do topo (eyebrow) com ponto pulsando */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid var(--borda-suave);
  color:var(--teal-d);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 4px 14px -8px rgba(93,95,239,.35)}
.eyebrow .ico{color:var(--teal)}
.pulso{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 50%,transparent);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Selos de confiança com check em círculo */
.trust li{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600}
.trust .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--teal);color:#fff;stroke-width:3}

/* Caixinhas dos ícones */
.b-ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px;color:var(--teal);
  background:linear-gradient(135deg,var(--teal-l),color-mix(in srgb,var(--teal) 16%,var(--card)));border:1px solid var(--borda-suave)}
.b-ico .ico{width:24px;height:24px}
.benefit{border-radius:22px;padding:22px;gap:8px;transition:transform .2s,box-shadow .2s}
.benefit:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.benefit strong{color:var(--ink);font-size:16.5px}
.m-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--card);color:var(--teal);border:1px solid var(--borda-suave)}
.metrica.destaque-m .m-ico{color:var(--ok)}
.faixa strong{display:flex;align-items:center;gap:8px}

/* Cartão do profissional: ícones na cor do tipo e bolinha no selo */
.fatos .ic{color:var(--tc)}
.fatos .ic .ico{width:15px;height:15px}
.tipo-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 22%,transparent)}
.pro-topo .local{display:inline-flex;align-items:center;gap:4px}
.pro-topo .local .ico{color:var(--tc);width:14px;height:14px}
.selo-novo{display:inline-flex;align-items:center;gap:5px}
.selo-novo .ico{width:13px;height:13px}
.preco-det span{display:inline-flex;align-items:center;gap:5px}
.preco-det .ico{width:14px;height:14px;color:var(--gold)}
.fb-check .ico{color:var(--teal)}
.cupom-destaque .ico{color:var(--gold-d);vertical-align:-.25em}

/* Passos numerados */
.steps li{border-radius:20px;padding:18px;transition:transform .2s,box-shadow .2s}
.steps li:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.steps b{width:40px;height:40px;background:linear-gradient(135deg,#7678F4,var(--teal-btn));box-shadow:0 8px 18px -8px rgba(93,95,239,.7);font-weight:800}

/* Perguntas frequentes */
.faq details{border-radius:18px;padding:16px 20px;transition:box-shadow .2s,border-color .2s}
.faq details[open]{border-color:color-mix(in srgb,var(--teal) 35%,var(--line));box-shadow:var(--sh-2)}
.faq summary{color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--teal-l);color:var(--teal);font-size:18px;font-weight:600;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}

/* Pacotes (página principal) com borda em degradê */
.promo .price-card{background:
  linear-gradient(var(--card),var(--card)) padding-box,
  linear-gradient(135deg,var(--teal),#B9A8FF,var(--teal-l)) border-box;border:2px solid transparent;border-radius:26px;box-shadow:var(--sh-2)}

/* Faixa de destaques em números (página principal) */
.destaques{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:-6px 0 34px}
.destaques div{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--borda-suave);border-radius:20px;padding:16px 18px;box-shadow:var(--sh-1)}
.destaques b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--teal-d),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.destaques span{font-size:13px;color:var(--soft)}
@media (max-width:760px){ .destaques{grid-template-columns:1fr 1fr} }

/* Barra "Procurando alguém…" */
.familia-bar{border-radius:999px;border:1px solid var(--borda-suave);background:color-mix(in srgb,var(--card) 70%,transparent)}

/* Imagens com cantos e sombra suaves */
.foto-split img,.galeria img,.hero-img{border-radius:24px;box-shadow:var(--sh-2)}

/* =============================================================
   AGENDA (calendário de disponibilidade)
   ============================================================= */
.agenda-bloco h3,.agenda-pub h3{display:flex;align-items:center;gap:8px}
.agenda-bloco h3 .ico,.agenda-pub h3 .ico{color:var(--teal)}
.agenda-bloco .cal,.agenda-bloco .cal-nav,.agenda-bloco .ag-acoes,.agenda-bloco .cal-legenda{max-width:460px}
.ag-status{font-size:13px;color:var(--soft)}
.ag-status.salvo{color:var(--ok);font-weight:600}

/* Escolha do que marcar */
.ag-modos{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ag-modo{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:999px;font:600 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.ag-modo .ico{width:15px;height:15px}
.ag-modo:hover{border-color:var(--teal)}
.ag-modo.on{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 15%,transparent)}
.ag-modo.m-limpar.on{border-color:var(--red);background:var(--red-l);color:var(--red-d);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)}

/* Navegação de meses */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px}
.cal-nav strong{font-size:16px;letter-spacing:-.01em}
.cal-seta{width:38px;height:38px;border-radius:50%;border:1px solid var(--borda-suave);background:var(--card);color:var(--teal-d);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.cal-seta:hover:not(:disabled){background:var(--teal-l);border-color:var(--teal)}
.cal-seta:disabled{opacity:.35;cursor:default}

/* Grade do mês */
.cal-semana,.cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-semana{margin-bottom:6px}
.cal-semana span{text-align:center;font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.dia{aspect-ratio:1/1;min-width:0;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;padding:0;position:relative}
.dia b{font-size:14px;font-weight:700}
.dia .marcas{display:flex;gap:1px;line-height:0}
.dia .marcas .ico{width:12px;height:12px}
button.dia{cursor:pointer;transition:transform .12s,box-shadow .15s,border-color .15s}
button.dia:hover{border-color:var(--teal);transform:translateY(-1px);box-shadow:var(--sh-1)}
.dia.vazio{border:0;background:none}
.dia.fora{opacity:.38;background:transparent}
.dia.hoje{box-shadow:0 0 0 2px var(--teal)}
.dia.hoje::after{content:"hoje";position:absolute;bottom:3px;font-size:9px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.dia.hoje .marcas{display:none}

/* Cores: dia = dourado, noite = índigo, os dois = metade/metade */
.d-diurno{background:#FFF4DC;border-color:#F1D497;color:#7A5108}
.d-noturno{background:var(--teal-l);border-color:var(--teal-b);color:var(--teal-d)}
.d-ambos{background:linear-gradient(135deg,#FFF1D2 0 50%,var(--teal-l) 50% 100%);border-color:var(--teal-b);color:var(--ink)}
.d-diurno .ico{color:#C98A12}
.d-noturno .ico,.d-ambos .ico:last-child{color:var(--teal)}
.d-ambos .ico:first-child{color:#C98A12}
:root[data-tema="escuro"] .d-diurno{background:var(--gold-l);border-color:var(--gold-b);color:var(--gold-d)}
:root[data-tema="escuro"] .d-ambos{background:linear-gradient(135deg,var(--gold-l) 0 50%,var(--teal-l) 50% 100%)}
:root[data-tema="escuro"] .d-diurno .ico,:root[data-tema="escuro"] .d-ambos .ico:first-child{color:var(--gold-d)}

/* Legenda e ações rápidas */
.cal-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12.5px;color:var(--soft)}
.cal-legenda span{display:inline-flex;align-items:center}
.lg{display:inline-block;width:15px;height:15px;border-radius:5px;border:1px solid var(--line);background:var(--card);margin-right:6px}
.ag-acoes{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px}

@media (max-width:480px){
  .cal-semana,.cal-dias{gap:4px}
  .dia{border-radius:10px}
  .dia b{font-size:13px}
  .dia .marcas .ico{width:10px;height:10px}
  .dia.hoje::after{font-size:8px;bottom:2px}
}

/* Selo de disponibilidade no cartão da busca */
.disp{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--soft);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.disp .ico{width:14px;height:14px;color:var(--teal)}
.disp b{color:var(--ink)}
.disp-hoje{color:var(--ok);background:var(--ok-l);border-color:var(--ok-b)}
.disp-hoje .pulso,.fb-hoje .pulso{background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)}
.fb-hoje:has(input:checked){border-color:var(--ok);background:var(--ok-l);color:var(--ok)}
/* Cores da legenda (precisa vir depois do .lg) */
.lg.d-diurno{background:#FFF4DC;border-color:#F1D497}
.lg.d-noturno{background:var(--teal-l);border-color:var(--teal-b)}
.lg.d-ambos{background:linear-gradient(135deg,#FFF1D2 0 50%,var(--teal-l) 50% 100%);border-color:var(--teal-b)}
:root[data-tema="escuro"] .lg.d-diurno{background:var(--gold-l);border-color:var(--gold-b)}
:root[data-tema="escuro"] .lg.d-ambos{background:linear-gradient(135deg,var(--gold-l) 0 50%,var(--teal-l) 50% 100%)}

/* =============================================================
   CADASTRO: foto do rosto com documento (verificação de identidade)
   ============================================================= */
.selfie-box{margin-top:18px;padding:16px;border-radius:20px;border:1.5px dashed color-mix(in srgb,var(--teal) 40%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--teal-l) 60%,var(--card)),var(--card))}
.selfie-cab{display:flex;gap:14px;align-items:center}
.selfie-ilustra{width:96px;height:auto;flex:none;border-radius:14px}
.selfie-cab strong{display:block;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.selfie-cab span{display:block;font-size:13px;color:var(--soft);margin-top:2px}
.selfie-dicas{list-style:none;padding:0;margin:14px 0 12px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink)}
.selfie-dicas li{display:flex;gap:8px;align-items:flex-start}
.selfie-dicas .ico{flex:none;margin-top:2px;width:16px;height:16px;padding:2px;border-radius:50%;background:var(--ok-l);color:var(--ok);stroke-width:3}
/* Campo de arquivo: o input fica invisível (mas focável, para o "obrigatório" funcionar) */
.selfie-campo{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;cursor:pointer}
.selfie-campo input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.selfie-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#7678F4,var(--teal-btn) 55%,#4B4DD1);box-shadow:0 10px 22px -8px rgba(93,95,239,.6)}
.selfie-campo:focus-within .selfie-btn{outline:3px solid color-mix(in srgb,var(--teal) 35%,transparent);outline-offset:2px}
.selfie-nome{font-size:13px;color:var(--soft);overflow-wrap:anywhere}
.selfie-previa{display:block;margin-top:12px;max-width:220px;max-height:220px;border-radius:14px;object-fit:cover;border:1px solid var(--line);box-shadow:var(--sh-1)}
.selfie-previa[hidden]{display:none}
.selfie-priv{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:12.5px;color:var(--soft)}
.selfie-priv .ico{flex:none;color:var(--ok);width:16px;height:16px;margin-top:1px}
@media (max-width:480px){ .selfie-ilustra{width:72px} }

/* =============================================================
   INDICAÇÃO
   ============================================================= */
/* Faixa "Você foi indicado(a) por ..." na página principal */
.faixa-indicacao{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:14px 18px;border-radius:20px;
  background:linear-gradient(120deg,var(--ok-l),color-mix(in srgb,var(--teal-l) 70%,var(--card)));border:1px solid var(--ok-b);box-shadow:var(--sh-1)}
.faixa-indicacao>div{flex:1 1 260px}
.faixa-indicacao strong{display:block;color:var(--ink);font-size:15.5px}
.faixa-indicacao span{font-size:13.5px;color:var(--soft)}
.fi-ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--card);color:var(--ok);flex:none;box-shadow:var(--sh-1)}
.fi-ico .ico{width:22px;height:22px}

/* Seção "Indique e ganhe" do painel */
.indica-bloco{background:linear-gradient(135deg,var(--card) 55%,color-mix(in srgb,var(--ok-l) 70%,var(--card)))}
.indica-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.indica-topo>div:first-child{flex:1 1 320px}
.indica-topo h3{display:flex;align-items:center;gap:8px}
.indica-topo h3 .ico{color:var(--ok)}
.indica-ganho{flex:none;text-align:center;padding:12px 18px;border-radius:18px;background:var(--card);border:1px solid var(--ok-b);box-shadow:var(--sh-1)}
.indica-ganho b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--ok)}
.indica-ganho span{font-size:12px;color:var(--soft)}
.indica-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.indica-numeros div{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.indica-numeros b{display:block;font-size:22px;font-weight:800;color:var(--ink)}
.indica-numeros span{font-size:12.5px;color:var(--soft)}
.indica-lista{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.indica-lista li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:14px}
.st-ind{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--soft);white-space:nowrap}
.st-ind.meio{background:var(--teal-l);border-color:var(--teal-b);color:var(--teal-d)}
.st-ind.ok{background:var(--ok-l);border-color:var(--ok-b);color:var(--ok)}
@media (max-width:600px){
  .indica-numeros{grid-template-columns:1fr}
  .indica-lista li{grid-template-columns:1fr auto}
  .indica-lista li .hint{display:none}
}
/* Ícone do WhatsApp alinhado ao texto em todos os botões verdes */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-wa svg{flex:none}
@media (max-width:600px){
  .indica-numeros{grid-template-columns:repeat(3,1fr);gap:6px}
  .indica-numeros div{padding:10px}
  .indica-numeros b{font-size:19px}
  .indica-numeros span{font-size:11px;line-height:1.3;display:block}
}
.search-dica{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--soft)}
.search-dica .ico{color:var(--teal);flex:none}
.hero.big .search-dica{font-size:13px;line-height:1.45}

/* =============================================================
   FOTO EM DESTAQUE e STORIES
   ============================================================= */
body.sem-rolagem{overflow:hidden}

/* Foto do cartão: botão com anel (story) ou lupa (ampliar) */
.av-wrap,.av-btn{position:relative;flex:none;display:inline-flex;border-radius:50%}
.av-btn{border:0;padding:0;background:none;cursor:pointer;transition:transform .2s}
.av-btn:hover{transform:scale(1.04)}
.av-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:3px}
.av-btn.com-story{padding:3px;background:conic-gradient(from 210deg,#F5A524,#EC4899,#8B5CF6,#5D5FEF,#F5A524)}
.av-btn.com-story .avatar{box-shadow:0 0 0 3px var(--card) !important;border:0}
.av-novo{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#EC4899,#8B5CF6);padding:2px 7px;border-radius:999px;border:2px solid var(--card);white-space:nowrap}
.av-zoom{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);color:var(--teal);border:1px solid var(--borda-suave);box-shadow:var(--sh-1);opacity:0;transition:opacity .2s}
.av-zoom .ico{width:12px;height:12px}
.av-btn:hover .av-zoom,.av-btn:focus-visible .av-zoom{opacity:1}
@media (hover:none){ .av-zoom{opacity:1} }

/* Foto maior nos cartões da busca */
.card.pro:not(.completo) .avatar{width:62px !important;height:62px !important;font-size:20px}

/* Página do perfil: foto grande em destaque */
.card.pro.completo .name-row{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:6px 0 4px}
.card.pro.completo .avatar{font-size:40px}
.card.pro.completo .av-btn.com-story{padding:4px}
.card.pro.completo .name{font-size:26px}
.card.pro.completo .nota{justify-content:center}

/* Camada em tela cheia */
.camada{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,10,20,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.camada.aberta{opacity:1}
.camada-fechar{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;display:grid;place-items:center}
.camada-fechar:hover{background:rgba(255,255,255,.26)}
.camada-foto figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.camada-foto img{max-width:min(92vw,720px);max-height:80vh;border-radius:20px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.camada-foto figcaption{color:#fff;font-weight:700;font-size:17px}

/* Visualizador de stories */
.story-palco{position:relative;width:min(100vw,440px);height:min(100dvh,820px);background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
@media (max-width:500px){ .story-palco{border-radius:0;height:100dvh} }
.story-carregando{color:#fff;opacity:.8}
.story-img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.story-barras{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;gap:4px}
.story-barras span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.story-barras span i{display:block;height:100%;width:0;background:#fff}
.story-barras span.cheia i{width:100%}
.story-topo{position:absolute;top:20px;left:12px;right:12px;z-index:2;display:flex;align-items:center;gap:10px;color:#fff}
.story-topo .avatar{border:2px solid #fff;box-shadow:none}
.story-topo strong{display:block;font-size:14.5px}
.story-topo span{font-size:12px;opacity:.8}
.story-topo .camada-fechar{position:static;margin-left:auto;width:38px;height:38px}
.story-zona{position:absolute;top:70px;bottom:120px;width:40%;z-index:1;border:0;background:transparent;cursor:pointer}
.story-zona.esq{left:0}
.story-zona.dir{right:0;width:60%}
.story-base{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.story-legenda{margin:0 0 12px;color:#fff;font-size:15px;line-height:1.45;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:pre-line}
.story-acoes{display:flex;gap:8px;flex-wrap:wrap}
.story-acoes .btn{flex:1 1 auto;justify-content:center;text-decoration:none;text-align:center;margin:0}

/* Faixa de stories na busca */
.stories-faixa{margin:0 0 18px;padding:14px 16px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--borda-suave);border-radius:22px;box-shadow:var(--sh-1)}
.stories-faixa[hidden]{display:none}
.sf-titulo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px}
.sf-titulo .ico{color:#EC4899}
.sf-lista{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin}
.sf-item{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:0;width:76px}
.sf-anel{padding:3px;border-radius:50%;background:conic-gradient(from 210deg,#F5A524,#EC4899,#8B5CF6,#5D5FEF,#F5A524);transition:transform .2s}
.sf-item:hover .sf-anel{transform:scale(1.06)}
.sf-anel .avatar{box-shadow:0 0 0 3px var(--card) !important;border:0}
.sf-nome{font-size:12.5px;font-weight:600;color:var(--ink);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Painel: meus stories */
.stories-bloco h3{display:flex;align-items:center;gap:8px}
.stories-bloco h3 .ico{color:#EC4899}
.story-form{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:18px;border:1.5px dashed color-mix(in srgb,#EC4899 35%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,#FCE7F3 55%,var(--card)),var(--card));margin-bottom:6px}
.story-form label:not(.selfie-campo){margin:10px 0 4px}
.story-form .btn{align-self:flex-start;margin-top:10px}
.story-previa{display:block;margin-top:10px;width:140px;aspect-ratio:9/16;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.story-previa[hidden]{display:none}
.meus-stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.meu-story{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:6px}
.meu-story img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.ms-info{display:flex;justify-content:space-between;font-size:12px;color:var(--soft)}
.ms-info b{color:#BE185D}
.meu-story p{margin:0;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.meu-story .link{align-self:flex-start;font-size:12.5px;color:var(--red)}
:root[data-tema="escuro"] .story-form{background:linear-gradient(135deg,#2A1830,var(--card))}
:root[data-tema="escuro"] .ms-info b{color:#F9A8D4}
/* Anel do story: a borda branca fica por dentro, para o degradê aparecer inteiro */
.av-btn.com-story .avatar,.sf-anel .avatar{box-shadow:none !important;border:3px solid var(--card) !important}
.av-btn.com-story,.sf-anel{padding:3px;box-shadow:0 4px 14px -4px rgba(236,72,153,.45)}
.plano-preco s{font-size:.7em;font-weight:500;color:var(--soft);margin-right:4px}
.btn-gratis{background:linear-gradient(135deg,#22C55E,#16A34A) !important;box-shadow:0 10px 22px -8px rgba(22,163,74,.6) !important}

/* =============================================================
   VÍDEO "COMO FUNCIONA"
   ============================================================= */
.btn-video{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--borda-suave);background:color-mix(in srgb,var(--card) 85%,transparent);
  color:var(--ink);padding:7px 16px 7px 7px;border-radius:999px;font:700 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s}
.btn-video:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-video .ico{width:32px;height:32px;padding:9px 8px 9px 10px;border-radius:50%;background:linear-gradient(135deg,#7678F4,var(--teal-btn));color:#fff;box-shadow:0 6px 14px -6px rgba(93,95,239,.7)}
.btn-video small{font-weight:500;color:var(--soft)}
.video-moldura{border-radius:24px;overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--borda-suave);background:#000;aspect-ratio:16/9}
.video-moldura video{display:block;width:100%;height:100%}
.camada-video video{width:min(94vw,1100px);max-height:86vh;border-radius:18px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
