/* VERSÃO 2 · Estilos do protótipo SoftLiving com cara de portal de notícias.
   Seções: Base · Moldura (faixa, aviso, menu lateral, topo, rodapé, barra do celular) · Componentes · uma seção por tela.
   Títulos em Fraunces, textos em Inter, marca em Times (logo em texto .sig). */

/* ===== Base ===== */
:root{
  --navy:#013565; --green:#1F5519; --green-2:#2e7a4f; --green-dark:#174313;
  --mint:#e6f2ea; --mint-2:#f1f8f3; --mint-line:#9fd0b0;
  --paper:#faf8f4; --paper-light:#fffefb; --paper-dark:#f1ede5; --card:#fff; --line:#ece8e1; --line-2:#d9d4cb;
  --text:#1d2430; --text-2:#56606c; --muted:#7c8591;
  --gold-bg:#fff4dc; --gold:#8a5a0e; --red:#e5484d;
  --shadow:0 12px 30px rgba(1,53,101,.12);
  --sombra-hover:0 10px 24px rgba(18,41,77,.1); /* regra de hover: ver o fim do arquivo */
  color-scheme:light;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
.app.carregando, .app.carregando *{ transition:none !important; } /* sem animação enquanto a página carrega (ex.: menu recolhido) */ /* elementos escondidos continuam escondidos mesmo com display nos estilos (ex.: .btn) */
html{ scroll-behavior:smooth; }
/* Regra do portal: nunca quebrar uma palavra no fim da linha (sem hífen automático); o parágrafo se ajusta.
   text-wrap:pretty evita uma palavra sozinha na última linha, onde o navegador suporta */
html{ -webkit-hyphens:manual; hyphens:manual; }
p, li, blockquote, dd, figcaption{ text-wrap:pretty; }
body{ margin:0; font-family:'Inter',Arial,sans-serif; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }
input{ font:inherit; color:var(--text); }
.ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; color:var(--navy); margin:0; letter-spacing:-.01em; }

/* Logo em texto: Soft itálico azul, Living verde; branco sobre fundo que confunde as cores (layout.js) */
.sig{ font-family:'Times New Roman',Times,serif; font-weight:700; white-space:nowrap; letter-spacing:0; text-transform:none; } /* o logo nunca fica em maiúsculas, mesmo dentro de rótulos */
.sig .soft{ color:#013565; font-style:italic; }
.sig .living{ color:#1F5519; font-style:normal; }
/* Logo em fundo escuro: versões claras das cores da marca, mesma fonte (Soft em itálico, Living normal).
   A classe .sig-light é posta pelo layout.js sempre que o fundo atrás do logo é escuro (ver "Regra do logo em texto"). */
.sig.sig-light .soft, .es-box .sig .soft{ color:#d6e6f5; }
.sig.sig-light .living, .es-box .sig .living{ color:#cfe9c4; }
/* Cartões com foto (texto sempre branco sobre a foto): o logo também fica nas cores claras */
.vc-info .sig .soft{ color:#d6e6f5; } .vc-info .sig .living{ color:#cfe9c4; }

/* ===== Moldura: faixa de protótipo (não removível) ===== */
.proto{ position:sticky; top:0; z-index:50; background:#fdf6e3; color:#7a5c12; border-bottom:1px solid #f0ddac; font-size:12px; line-height:1.4; text-align:center; padding:6px 12px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.proto b{ background:#c98a2e; color:#fff; border-radius:999px; padding:2px 8px; font-size:10.5px; letter-spacing:.06em; white-space:nowrap; }
.proto button, .proto a{ background:none; border:none; padding:0; color:#7a5c12; font-weight:600; text-decoration:underline; font-size:12px; }
.proto-short{ display:none; }

/* Aviso de protótipo (primeira visita) */
.modal-bg{ position:fixed; inset:0; z-index:100; background:rgba(18,20,24,.55); display:none; align-items:center; justify-content:center; padding:16px; }
.modal-bg.show{ display:flex; }
.modal{ background:#fff; border-radius:24px; max-width:480px; width:100%; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal h2{ font-size:26px; margin:14px 0 12px; line-height:1.2; }
.modal p, .modal ul{ font-size:14.5px; color:var(--text-2); line-height:1.6; margin:0 0 12px; }
.modal ul{ padding-left:18px; margin-bottom:22px; }
.modal .btn{ width:100%; justify-content:center; }
.selo{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#7a5c12; background:#fdf6e3; border:1px dashed #c98a2e; padding:3px 10px; border-radius:999px; }

/* ===== Moldura: estrutura (menu lateral flutuante + área principal) ===== */
.app{ display:flex; align-items:flex-start; }
.main{ flex:1; min-width:0; }
.wrap{ max-width:1180px; margin:0; padding:0 24px; position:relative; } /* alinhado à esquerda, perto da barra: sobra espaço à direita */
/* Corpo: coluna do conteúdo + coluna lateral da direita (só nas páginas que têm <aside class="lateral">, hoje a Início).
   A lateral é a faixa clara que vai até a borda da janela, a 24px do conteúdo (a mesma distância da barra esquerda). */
/* O corte do que passa para o lado fica na janela (body), não na área do conteúdo: assim as sombras e caixas brancas do
   hover perto da borda do conteúdo não são cortadas, e a página continua sem rolagem para o lado. */
body{ overflow-x:hidden; overflow-x:clip; }
.corpo{ display:flex; align-items:stretch; }
.corpo > .wrap{ flex:0 1 1180px; min-width:0; container-type:inline-size; }
.lateral{ flex:1 0 340px; margin:36px 0 72px; padding:24px 28px 40px 24px; /* topo alinhado ao primeiro elemento do conteúdo (abertura) e fim alinhado ao fim do último box (newsletter) */ border-radius:26px 0 0 26px;
  background:rgba(255,255,255,.55); box-shadow:inset 1px 1px 0 rgba(255,255,255,.9), -8px 0 24px rgba(1,53,101,.04);
  display:flex; flex-direction:column; gap:18px; }
.lateral > *{ max-width:440px; width:100%; }
/* Regra de largura única: o conteúdo tem a mesma largura em todas as páginas. Nas páginas sem a coluna da direita,
   um espaço vazio ocupa o lugar dela (mesma largura e mesmas regras de tamanho de tela), para o conteúdo não esticar. */
.app:not(.com-lateral) .corpo::after, body.pede-login:not(.logado) .corpo::after{ content:''; flex:1 0 340px; }

/* Menu lateral */
.side-wrap{ position:relative; margin:8px 0 8px 16px; width:264px; flex:none; } /* reserva o espaço da barra; a barra fica fixa na tela */
.side{
  background:rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:26px; padding:22px 16px 16px;
  display:flex; flex-direction:column; gap:12px; transition:width .25s, padding .25s;
}
.me{ display:flex; align-items:center; gap:12px; position:relative; padding:0 4px 14px; border-bottom:1px solid var(--line); }
.avatar{ width:48px; height:48px; border-radius:50%; background:var(--mint); color:var(--green); display:grid; place-items:center; font-weight:700; flex:none; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); }
.me small{ display:block; color:var(--muted); font-size:12.5px; }
.me strong{ font-family:'Fraunces',serif; font-size:21px; color:var(--navy); font-weight:600; }
.collapse{ position:absolute; right:-4px; top:10px; width:28px; height:28px; border-radius:9px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; padding:0; }
/* Botão do menu esquerdo: fica na moldura (fora da área que rola), no alto à direita, ao lado do nome */
.side-wrap > .collapse{ top:32px; right:12px; z-index:3; transition:left .25s, right .25s, width .25s, height .25s, border-radius .25s, transform .15s ease, box-shadow .15s ease; }
.collapse .ic{ width:16px; height:16px; }
.sec-t{ font-size:12px; color:var(--muted); padding:0 8px 4px; }
.nav a{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:14px; color:#4a5461; font-size:15px; font-weight:500; }
.nav a:hover{ background:#fff; } /* hover do menu: branco 100% */
.nav a.on{ background:var(--green); color:#fff; box-shadow:0 6px 16px rgba(31,85,25,.22); }
.nav .tag{ margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:700; border-radius:999px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; }
.nav a.on .tag{ background:#fff; color:var(--green); }
/* Item com submenu (Atividades): botão com a mesma cara dos links; o submenu abre embaixo, recuado */
.nav-abre{ width:100%; display:flex; align-items:center; gap:12px; padding:8px 12px; border:none; background:none; border-radius:14px; color:#4a5461; font-size:15px; font-weight:500; text-align:left; }
.nav-abre:hover{ background:#fff; }
.nav-abre .chev{ margin-left:auto; width:16px; height:16px; color:#a9b2bb; transition:transform .2s; }
.nav-grupo.open .nav-abre .chev{ transform:rotate(180deg); }
.nav-sub{ display:none; padding-left:24px; }
.nav-grupo.open .nav-sub{ display:block; }
.nav-sub a{ font-size:14.5px; padding:9px 12px; }
.nav-sub a .ic{ width:18px; height:18px; }
.wallet{ margin-top:auto; background:var(--mint); border-radius:20px; padding:14px 14px; text-align:center; flex:none; }
.wallet small{ color:var(--green); font-size:12px; font-weight:600; }
.wallet strong{ display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--green); margin:2px 0 8px; }
.wallet .btn{ width:100%; justify-content:center; }
.wallet p{ margin:8px 0 0; font-size:11.5px; color:#51705a; line-height:1.4; }
.side .lbl{ white-space:nowrap; }


/* Computador: a barra acompanha a rolagem do site, como na versão 1 (sem rolagem própria); todos os itens em sequência.
   Seletores com .app para não dependerem da ordem no arquivo. */
@media (min-width:981px){
  .app .side{ position:relative; width:264px; }
  .app .side-wrap > .collapse{ position:absolute; top:32px; left:240px; right:auto; z-index:41; }
}
/* Menu recolhido: só ícones (só no computador; no celular o menu é uma gaveta) */
@media (min-width:981px){
  /* Recolhido: só a barra encolhe; a moldura mantém a largura, então o conteúdo não se mexe */
  .app.mini .side{ width:84px; padding:22px 12px 16px; }
  .app.mini .side .lbl, .app.mini .side .tag, .app.mini .me div, .app.mini .wallet p, .app.mini .wallet small, .app.mini .nav-sub, .app.mini .nav-abre .chev{ display:none; }
  .app.mini .me{ flex-direction:column; }
  /* Recolhido: o botão vira uma etiqueta presa do lado de fora da barra, na mesma altura de quando está aberta */
  .app.mini .side-wrap > .collapse{ right:auto; left:83px; width:28px; height:44px; top:24px; border-radius:0 12px 12px 0; border-left:none; }
  .app.mini .side-wrap > .collapse .ic{ transform:rotate(180deg); }
  .app.mini .nav a{ justify-content:center; padding:12px; }
  .app.mini .sec-t{ text-align:center; padding:0 0 8px; }
  .app.mini .sec-t::before{ content:"·"; }
  .app.mini .nav-abre{ justify-content:center; padding:12px; }
  .app.mini .wallet{ padding:12px 0; background:none; }
  .app.mini .wallet strong{ display:none; }
  .app.mini .wallet .btn{ width:48px; height:48px; padding:0; border-radius:50%; }
  .app.mini .wallet .btn span{ display:none; }
}

/* Topo */
.top{ display:flex; align-items:center; gap:22px; padding:16px 32px; border-bottom:1px solid var(--line); } /* largura toda da janela, acima do menu lateral */
/* No computador, o logo e o menu de cima começam alinhados à esquerda com o conteúdo (menu lateral 16 + 264 + 24 de respiro) */
@media (min-width:981px){ .top{ padding-left:304px; } }
.top .brand{ font-size:32px; }
.site-nav{ display:flex; gap:18px; font-size:13.5px; color:#5a6470; margin-left:10px; white-space:nowrap; }
.site-nav a:hover, .site-nav a.on{ color:var(--green); }
.tools{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.round{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; position:relative; padding:0; flex:none; }
.round .ic{ width:18px; height:18px; }
.round i{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid #fff; }
.menu-btn{ display:none; }
/* Botões do topo (Modo simples, créditos, Entrar): mesmo tamanho; a borda existe em todos para a altura bater */
.tools .btn{ border:1px solid transparent; height:40px; padding:0 18px; }
.btn.simples{ background:var(--mint); color:var(--green); border-color:#bfdcc9; }
.btn.simples:hover{ background:#d6ebdd; }
.btn.creditos{ background:#fdf1dc; color:#8a5a0e; border-color:#f0ddac; }
.btn.creditos:hover{ background:#fbe8c6; }

/* Rodapé */
.rodape{ background:#fff; border-top:1px solid var(--line); padding:52px 0 0; }
/* O rodapé vai de ponta a ponta; o texto fica alinhado com o conteúdo (barra lateral: 16px + 264px) */
.rodape .wrap{ margin-left:280px; }
@media (max-width:980px){ .rodape .wrap{ margin-left:0; } }
.fgrid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; }
.fgrid h4{ font-size:13px; margin:0 0 14px; }
.fgrid a{ display:block; font-size:13.5px; color:#66707c; padding:4px 0; }
.fgrid a:hover{ color:var(--green); }
.fgrid p{ font-size:13.5px; color:#66707c; line-height:1.6; margin:12px 0 16px; }
/* Linha dos logos dos parceiros: título pequeno em cima, logo grande embaixo */
.flogos{ display:flex; flex-direction:row; justify-content:center; align-items:stretch; gap:64px; flex-wrap:nowrap; border-top:1px solid var(--line); margin-top:36px; padding-top:28px; }
.flogo{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.flogo span{ font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#a9b2bb; }
.flogo img{ width:auto; margin:auto 0; } /* títulos alinhados no topo, logos centralizados entre si */
.flogo .logo-fsb{ height:88px; }
.flogo .logo-rb2{ height:118px; } /* a imagem tem margem branca própria */
.fnote{ font-size:12px; color:var(--muted); line-height:1.6; margin:36px 0 0; max-width:820px; }
.fbottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:18px; padding:18px 0; font-size:12.5px; color:var(--muted); }

/* Barra inferior do celular */
.tabbar{ display:none; }

/* Aviso rápido */
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); background:var(--navy); color:#fff; font-size:14px; padding:12px 18px; border-radius:14px; opacity:0; pointer-events:none; transition:.25s; z-index:90; max-width:calc(100vw - 32px); }
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ===== Coluna lateral da direita (Início): cartões ===== */
.lat-card{ position:relative; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); border-radius:22px; padding:18px 18px 16px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 6px 18px rgba(1,53,101,.05); }
.lat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.lat-head h2{ font-size:18px; font-weight:600; display:flex; align-items:center; gap:8px; }
.lat-head h2 .ic{ width:18px; height:18px; color:var(--green); }
.lat-mais{ font-size:12.5px; font-weight:600; color:var(--green); white-space:nowrap; }
.lat-mais:hover{ text-decoration:underline; }
/* Meus grupos */
.lat-grupo{ display:flex; align-items:center; gap:12px; padding:8px; margin:0 -8px; border-radius:14px; }
.lat-grupo:hover{ background:rgba(255,255,255,.7); }
.lat-grupo img{ width:42px; height:42px; border-radius:12px; object-fit:cover; flex:none; background:var(--mint); }
.lat-grupo b{ display:block; font-size:14.5px; color:var(--navy); }
.lat-grupo small{ font-size:12px; color:var(--muted); }
.lat-grupo .novas{ margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:700; border-radius:999px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; }
.lat-grupo > .ic{ margin-left:auto; width:16px; height:16px; color:#a9b2bb; flex:none; }
.lat-grupo .novas + .ic{ margin-left:0; }
.lat-centro{ display:block; text-align:center; font-size:13px; font-weight:600; color:var(--green); margin-top:10px; }
.lat-centro:hover{ text-decoration:underline; }
/* Hoje na SoftLiving */
.lat-stat{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.lat-stat > span{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--mint); color:var(--green); flex:none; }
.lat-stat > span.azul{ background:#e8eef8; color:var(--navy); }
.lat-stat > span.ouro{ background:#fdf1dc; color:#8a5a0e; }
.lat-stat > span .ic{ width:18px; height:18px; }
.lat-stat b{ display:block; font-size:15px; color:var(--navy); }
.lat-stat small{ font-size:12px; color:var(--muted); }
.lat-stat p{ margin:0; }
.lat-vazio{ font-size:13.5px; color:var(--muted); margin:4px 0; }
.lat-card .btn{ width:100%; justify-content:center; margin-top:12px; }
/* Conheça a comunidade */
.lat-membro{ display:flex; align-items:center; gap:12px; padding:7px 0; font-size:14.5px; font-weight:500; color:var(--text); }
.lat-membro .av{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12.5px; font-weight:700; flex:none; }
.lat-membro:hover{ color:var(--green); }
/* Clube de Saúde (parceria em aberto) */
.lat-clube{ border-radius:22px; padding:20px; text-align:center; background:rgba(241,216,152,.45); border:1px dashed #d9b25a; }
.lat-clube em{ display:block; font-style:normal; font-size:12.5px; color:#8a6414; }
.lat-clube strong{ display:block; font-family:'Fraunces',serif; font-size:20px; color:#5c4108; margin:4px 0 8px; }
.lat-clube a{ font-size:13px; font-weight:600; color:#8a6414; text-decoration:underline; }
/* Pesquisa de escuta (escuta.js) */
.es-box{ background:linear-gradient(160deg, #0b4a85, var(--navy) 70%); border-color:rgba(255,255,255,.18); color:#fff;
  box-shadow:0 12px 30px rgba(1,53,101,.22), inset 0 1px 0 rgba(255,255,255,.14); } /* pesquisa de opinião: box azul */
.es-box .lat-head h2{ color:#fff; }
/* .es-box na frente: a página de estabelecimento (vitrine.css) também tem um .es-sub, cinza, que deixava este ilegível */
.es-box .es-sub{ font-size:12.5px; color:rgba(255,255,255,.82); margin:-4px 0 12px; line-height:1.5; }
.es-box .es-sub b{ color:#f5c46b; }
.es-progress{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:rgba(255,255,255,.72); margin-bottom:10px; }
.es-progress span:first-child{ white-space:nowrap; }
.es-bar{ flex:1; height:5px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; }
.es-bar i{ display:block; height:100%; background:#f5c46b; border-radius:999px; transition:width .3s ease; }
.es-q{ font-size:15px; font-weight:600; color:#fff; line-height:1.4; margin:0 0 12px; }
.es-ops{ display:flex; flex-wrap:wrap; gap:6px; }
.es-op{ border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.1); border-radius:999px; padding:7px 12px; font-size:12.5px; font-weight:500; color:#fff; cursor:pointer;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.es-op:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.18); }
.es-op.on{ background:#fff; border-color:#fff; color:var(--navy); font-weight:700; }
.es-nota{ display:grid; grid-template-columns:repeat(11,1fr); gap:3px; }
.es-nota .es-op{ padding:6px 0; border-radius:8px; text-align:center; }
.es-nota-legenda{ display:flex; justify-content:space-between; font-size:10.5px; color:rgba(255,255,255,.6); margin-top:4px; }
.es-texto, .es-porque{ width:100%; font-size:13.5px; border:1px solid rgba(255,255,255,.3); border-radius:12px; padding:8px 10px; font-family:inherit; background:#fff; color:var(--text); }
.es-porque{ margin-top:8px; }
.es-hint{ display:block; font-size:11px; color:rgba(255,255,255,.65); margin-top:5px; }
.es-actions{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.es-send{ flex:1; background:#e0a13f; color:#1d2430; border:none; border-radius:999px; padding:10px 14px; font-size:13px; font-weight:700; cursor:pointer;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.es-send:hover:not(:disabled){ background:#f0b556; transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.es-send:disabled{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.72); cursor:not-allowed; }   /* desativado até escolher uma resposta, mas legível */
.es-skip{ background:none; border:none; color:rgba(255,255,255,.75); font-size:13px; font-weight:600; padding:6px; cursor:pointer; }
.es-skip:hover{ color:#fff; }
.es-fim-t{ font-size:14.5px; color:#fff; line-height:1.45; margin:0 0 6px; }
.es-fim-t b{ color:#f5c46b; }
.es-fim-s{ font-size:12.5px; color:rgba(255,255,255,.75); margin:0 0 12px; }
.es-fim-s b{ color:#fff; }
.es-fim .es-send{ width:100%; }
.es-toast{ position:absolute; top:14px; right:14px; background:var(--green); color:#fff; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; animation:esToast 1.8s ease forwards; pointer-events:none; }
@keyframes esToast{ 0%{ opacity:0; transform:translateY(6px); } 15%,75%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-6px); } }

/* Notebooks (1200 a 1439px, como 1280 e 1366): as três colunas continuam (menu, conteúdo e lateral), com a lateral mais estreita */
@media (min-width:1200px) and (max-width:1439px){ .lateral, .app:not(.com-lateral) .corpo::after, body.pede-login:not(.logado) .corpo::after{ flex-basis:300px; } .lateral{ padding:20px 20px 32px 20px; } }
/* Sem espaço ao lado do conteúdo: a lateral desce para depois dele, em grade */
/* (abaixo de 1200px: tablets, tablets deitados e telas pequenas) */
@media (max-width:1199px){
  .corpo{ flex-direction:column; }
  .corpo > .wrap{ flex:none; }
  .lateral{ flex:none; margin:0 24px 56px; border-radius:26px; padding:24px; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); align-items:start; }
  .lateral > *{ max-width:none; }
  .app:not(.com-lateral) .corpo::after, body.pede-login:not(.logado) .corpo::after{ content:none; }   /* a coluna desce para baixo do conteúdo: o espaço vazio some */
}
@media (max-width:640px){ .lateral{ margin:0 16px 40px; padding:16px; } }

/* ===== Componentes ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; border:none; border-radius:999px; padding:11px 20px; font-size:14px; font-weight:600; white-space:nowrap; }
.btn:hover{ background:var(--green-dark); }
.btn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--line-2); }
.btn.ghost:hover{ border-color:var(--navy); }
.btn .ic{ width:17px; height:17px; }
.kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--green); background:var(--mint); border-radius:999px; padding:6px 12px; }
.cat{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green-2); }
.meta{ font-size:12.5px; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.meta i{ width:3px; height:3px; border-radius:50%; background:#c3c8cf; }
.foto{ background:var(--mint); } /* cor de espera enquanto a foto carrega (ou sem internet) */

/* Seções com título */
.secao{ padding:0 0 72px; }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.head h2{ font-size:36px; font-weight:700; }
.head p{ margin:6px 0 0; color:var(--muted); font-size:14.5px; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.tabs button{ background:none; border:1px solid transparent; border-radius:999px; padding:8px 14px; font-size:13.5px; color:#5a6470; }
.tabs button:hover{ color:var(--green); }
.tabs button.on{ background:#fff; border-color:var(--line); color:var(--navy); font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.tabs .btn{ margin-left:auto; }

/* Fichário: abas encaixadas num painel creme mais claro que o fundo (Explore por assunto) */
.tabs.folder{ gap:6px; margin-bottom:0; align-items:flex-end; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } /* uma linha só; rola para o lado se não couber */
.tabs.folder button{ white-space:nowrap; flex:none; }
.tabs.folder.mais-abas{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent); } /* há mais abas à direita */
.tabs.folder.abas-antes{ -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 64px), transparent); }
.tabs.folder.mais-abas.abas-antes{ -webkit-mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
/* Setas do fichário (layout.js): as duas existem sempre que as abas não cabem na linha; a rolagem dá a volta */
.abas-rolar{ position:relative; }
.abas-seta{ position:absolute; top:4px; z-index:3; width:34px; height:34px; border-radius:50%; display:none; place-items:center; padding:0; cursor:pointer; color:var(--navy);
  background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.95); box-shadow:var(--vidro-brilho), 0 4px 14px rgba(1,53,101,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.abas-seta .ic{ width:16px; height:16px; }
.abas-ant{ left:-4px; }
.abas-ant .ic{ transform:rotate(180deg); }
.abas-prox{ right:-4px; }
.abas-rolar.tem-mais .abas-prox, .abas-rolar.tem-antes .abas-ant{ display:grid; }
.abas-seta:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); animation:none; }
/* As setas do fichário seguem a mesma regra das setas dos carrosséis (decisão de 2026-10-06): com mouse, só a seta do
   lado de onde o mouse está acende, aos poucos, conforme ele se aproxima dela (--perto, de 0 a 1, calculado no
   prepararSetasAbas do layout.js), e apaga devagar ao sair; pelo teclado, as duas aparecem; no celular e no tablet,
   sem mouse, ficam sempre à vista e podem ser tocadas. Sem piscar. */
@media (hover:hover){
  .abas-rolar .abas-seta{ opacity:0; pointer-events:none; transition:opacity .6s cubic-bezier(.22, .61, .36, 1), background-color .15s ease, box-shadow .15s ease, transform var(--hover-t) var(--hover-curva); }
  .abas-rolar:hover .abas-seta{ opacity:var(--perto, 0); pointer-events:auto; transition:opacity .2s linear, background-color .15s ease, box-shadow .15s ease, transform var(--hover-t) var(--hover-curva); }
  .abas-rolar:hover .abas-seta:hover, .abas-rolar:has(:focus-visible) .abas-seta{ opacity:1; pointer-events:auto; }
}
.tabs.folder button{ background:var(--paper-dark); border:none; border-radius:16px 16px 0 0; padding:11px 16px; color:#6b6558; font-weight:500; box-shadow:none; }
.tabs.folder button:hover{ color:var(--green); background:#ebe6dc; }
.tabs.folder button.on{ background:var(--paper-light); color:var(--navy); font-weight:600; padding-top:14px; }
.tabs.folder .btn{ align-self:center; margin-bottom:6px; }
.folder-panel{ background:var(--paper-light); border-radius:0 24px 24px 24px; padding:26px; }

/* Cartão com foto vertical */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* Cartão vertical com foto (assuntos e grupos): foto no cartão inteiro, moldura clara, desfoque que aparece aos poucos
   na parte de baixo, texto branco por cima e botão branco arredondado */
.vcard{ position:relative; display:block; aspect-ratio:3/4; border-radius:26px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.6); background:var(--mint); box-shadow:0 10px 28px rgba(1,53,101,.10); } /* contorno branco bem fino */
.vcard > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform .5s; }
.vcard:hover > img{ transform:scale(1.04); }
.vc-blur{ position:absolute; inset:auto 0 0 0; height:66%; z-index:-1;
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  background:linear-gradient(to top, rgba(12,22,32,.6), rgba(12,22,32,.2) 70%, transparent);
  -webkit-mask-image:linear-gradient(to top, #000 58%, transparent); mask-image:linear-gradient(to top, #000 58%, transparent); }
.vc-info{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px; color:#fff; }
.vc-cat{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.vc-info h3{ color:#fff; font-size:19px; line-height:1.25; font-weight:600; margin:6px 0 14px; text-shadow:0 1px 10px rgba(0,0,0,.18); }
.vc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Selo de acesso dos conteúdos (seloAcesso no layout.js): Grátis (verde) ou pago com cadeado e créditos (dourado);
   conteúdo já destravado fica sem selo. O mesmo selo em todos os cartões; sobre foto, fica um pouco mais opaco. */
.selo-acesso{ display:inline-flex; align-items:center; gap:5px; flex:none; font-size:11.5px; font-weight:700; letter-spacing:.01em; line-height:1.2;
  padding:4px 10px; border-radius:999px; white-space:nowrap; vertical-align:middle; text-transform:none; }
.selo-acesso .ic{ width:12px; height:12px; flex:none; }
.selo-acesso.gratis{ background:#e3f2ea; color:#1f5c3d; }
.selo-acesso.pago{ background:#fdf0d3; color:#8a5a12; }
:is(.vc-info, .ct-tile-txt, .ct-faixa-txt, .vt-col-capa) .selo-acesso{ box-shadow:0 2px 8px rgba(0,0,0,.18); }
.gratis.selo-acesso:is(.vc-info *, .ct-tile-txt *, .ct-faixa-txt *, .vt-col-capa *){ background:rgba(227,242,234,.95); }
.meta .selo-acesso{ margin-left:2px; }
.cl-ultima-selos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cl-ultima-selos .cat{ margin:0; }
.ct-tile-txt > .selo-acesso, .ct-faixa-txt > .selo-acesso{ margin-bottom:8px; }
.vt-col-capa .kicker + .selo-acesso{ margin-left:6px; }
.ct-mini-autor .selo-acesso{ margin-left:8px; }
.vc-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; }
.vc-chip .ic{ width:16px; height:16px; }
.vc-chip.premium{ color:#ffe3a3; }
.vc-btn{ display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--navy); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:background-color .15s ease; }
.vc-btn .ic{ width:15px; height:15px; }
.vcard:hover .vc-btn{ background:var(--mint); }
/* Botão salvar (cartões, matéria em destaque e lista) */
.fav{ position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); border:none; display:grid; place-items:center; color:var(--navy); padding:0; }
.fav .ic{ width:16px; height:16px; }
.fav.on{ background:#fff; color:var(--text); } /* salvo: bandeirinha preta, preenchida e sempre visível */
.fav.on .ic{ fill:currentColor; }
/* Nos cartões com foto (computador, com mouse): o salvar só aparece ao passar o mouse no cartão (ou se já foi salvo).
   No celular e no tablet, sem mouse, continua sempre à vista. */
@media (hover:hover){
  main a:has(> .fav) > .fav:not(.on){ opacity:0; pointer-events:none; transition:opacity .2s ease, background-color .15s ease; }
  main a:has(> .fav):hover > .fav, main a:has(> .fav):focus-within > .fav{ opacity:1; pointer-events:auto; }
}
/* Na matéria em destaque e na lista: no canto de cima à direita da caixa branca, só aparece no hover (ou se já foi salvo) */
.destaque, .item{ position:relative; }
.destaque .fav, .item .fav{ top:14px; right:14px; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease, background-color .15s ease; }
.destaque:hover .fav, .item:hover .fav, .destaque:focus-within .fav, .item:focus-within .fav, .destaque .fav.on, .item .fav.on{ opacity:1; pointer-events:auto; }
.destaque .fav{ top:34px; right:34px; } /* sobre o canto da foto */
.item{ padding-right:56px; } /* espaço para o botão não cobrir o título */
.vcard .new{ position:absolute; top:12px; left:12px; background:#fff; color:var(--green); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; }

/* ===== Tela Início ===== */
.hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:36px 0 64px; }
.hero .kicker{ margin-bottom:18px; }
.hero h1{ font-size:58px; line-height:1.04; font-weight:700; }
.hl{ color:var(--green); font-style:italic; position:relative; white-space:nowrap; }
.hl svg{ position:absolute; left:0; bottom:-10px; width:100%; height:14px; }
.hero p{ font-size:17px; line-height:1.6; color:var(--text-2); margin:26px 0 30px; text-align:justify; } /* justificado na largura do título */
.hero .ctas{ display:flex; gap:10px; flex-wrap:wrap; }

/* Últimas matérias */
.stories{ display:grid; grid-template-columns:1.25fr 1fr; gap:28px; margin-top:40px; } /* afasta do subtítulo: a caixa branca do hover sobe 20px */
.destaque .imgw{ border-radius:24px; overflow:hidden; }
.destaque img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .35s; }
.destaque:hover img{ transform:scale(1.03); }
.destaque .cat{ display:block; margin:18px 0 8px; }
.destaque h3{ font-size:30px; line-height:1.18; }
.destaque p{ color:var(--text-2); line-height:1.6; margin:10px 0 12px; font-size:15.5px; }
.list{ display:flex; flex-direction:column; gap:14px; }
/* Espelhada (Colunas na Início): lista de 4 à esquerda, principal à direita; no celular a principal vem primeiro */
.stories.invertida{ grid-template-columns:1fr 1.25fr; }
@media (max-width:980px){ .stories.invertida{ grid-template-columns:1fr; } .stories.invertida .destaque{ order:-1; } }
.item{ display:grid; grid-template-columns:132px 1fr; gap:16px; align-items:center; padding:16px; margin:0 -16px; border-radius:24px; }
.item img{ width:132px; height:104px; object-fit:cover; border-radius:14px; }
.item h3{ font-size:17px; line-height:1.3; margin:4px 0 6px; font-weight:600; }

/* Acontece nos grupos */
.community{ display:grid; grid-template-columns:1fr 1.6fr; gap:22px; align-items:stretch; }
.community > *{ min-width:0; } /* sem isso, o carrossel de grupos alarga a coluna no celular */
.quote{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; display:flex; flex-direction:column; }
.quote .who{ display:flex; gap:12px; align-items:center; }
.quote .who .avatar{ width:44px; height:44px; font-size:14px; }
.quote .who b{ display:block; font-size:15px; }
.quote .who small{ color:var(--muted); font-size:12.5px; }
.quote h3{ font-size:20px; margin:20px 0 10px; }
.quote p{ color:var(--text-2); line-height:1.65; font-size:15px; margin:0 0 20px; }
.quote .btn{ margin-top:auto; align-self:flex-start; }
.groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.groups .vc-info{ padding:14px 14px 12px; }
.groups .vc-info h3{ font-size:16px; margin:4px 0 10px; }
.groups .vc-btn{ padding:7px 12px; font-size:12.5px; }

/* Patrocinador apoiador entre os conteúdos (sorteado no layout.js): discreto, logo em tom sobre tom */
.apoio{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; margin-bottom:72px; min-height:96px; }
.apoio > img{ grid-column:2; } /* logo no centro exato da faixa; a frase fica à esquerda dele */
.apoio-rotulo{ grid-column:1; justify-self:end; font-size:13.5px; line-height:1.5; color:#a8a194; letter-spacing:.01em; text-align:right; text-wrap:balance; } /* frase sorteada; a largura vem do layout.js (sempre 2 linhas iguais) */
/* Celular e tablet, e também quando a coluna do conteúdo é estreita (ex.: notebook de 1200px com a coluna da direita):
   logo primeiro e a frase centralizada abaixo dele, para as 2 linhas caberem sem diminuir a letra */
@container (max-width:700px){
  .apoio{ grid-template-columns:minmax(0, 1fr); gap:14px; justify-items:center; }
  .apoio > img{ grid-column:1; grid-row:1; }
  .apoio-rotulo{ grid-row:2; justify-self:center; text-align:center; }
}
@media (max-width:900px){
  .apoio{ grid-template-columns:minmax(0, 1fr); gap:14px; justify-items:center; }
  .apoio > img{ grid-column:1; grid-row:1; }
  .apoio-rotulo{ grid-row:2; justify-self:center; text-align:center; }
}
.apoio-rotulo .sig .soft, .apoio-rotulo .sig .living{ color:inherit !important; } /* na faixa de apoio, o logo em texto fica no mesmo tom da frase e do logo do apoiador */
.apoio img{ width:auto; max-width:60vw; filter:grayscale(1) sepia(.35) opacity(.4); } /* tom sobre tom: logo (fundo transparente) em cinza-creme */

/* Faixa azul-marinho lisa, sem foto (newsletter da Início e fechamento das institucionais) */
.news, .photo-band{ position:relative; border-radius:30px; overflow:hidden; display:grid; place-items:center; text-align:center; margin-bottom:72px; background:var(--navy); }
.news > div, .photo-band > div{ position:relative; z-index:1; padding:40px 24px; width:100%; min-width:0; } /* sem limite de largura: título e subtítulo numa linha só (no celular quebram, não cabem) */
.news h2, .photo-band h2{ color:#fff; font-size:40px; line-height:1.12; }
/* Computador: título e subtítulo das faixas numa linha só; o título diminui um pouco nas telas menores para caber */
@media (min-width:1261px){ .news h2, .photo-band h2{ font-size:clamp(28px, 2.7vw, 40px); white-space:nowrap; } .news p, .photo-band p{ white-space:nowrap; } }
.news p, .photo-band p{ color:rgba(255,255,255,.85); margin:12px 0 24px; }
.news form{ display:flex; gap:8px; background:#fff; border-radius:999px; padding:6px; max-width:460px; margin:0 auto; }
.news input{ flex:1; min-width:0; border:none; outline:none; padding:0 14px; font-size:14.5px; background:none; }
.news .ok{ padding:10px 16px; font-size:14px; color:var(--green); font-weight:600; }

/* ===== Telas médias ===== */
/* Links institucionais do topo: só cabem junto com os botões a partir de ~1100px; abaixo disso ficam no rodapé */
@media (max-width:1359px){ .site-nav{ display:none; } } /* o menu institucional cabe no topo a partir de 1360px; abaixo disso fica no rodapé (e no Saiba mais do celular) */
/* 1360 a 1599px: com os 6 links institucionais no topo, "Modo simples" fica só com o ícone (a dica mostra o nome) para caber */
@media (min-width:1360px) and (max-width:1599px){ .tools > .btn.simples{ font-size:0; gap:0; width:40px; padding:0; justify-content:center; } .tools > .btn.simples .ic{ width:18px; height:18px; } }
/* 1360 a 1439px (notebooks de 1366): menu institucional um pouco mais compacto e créditos sem a palavra, para os 6 links caberem */
@media (min-width:1360px) and (max-width:1439px){ .site-nav{ gap:13px; font-size:13px; margin-left:4px; } .tools > .btn.creditos{ padding:0 12px; } .tools > .btn.creditos .saldo-creditos{ font-size:0; } .tools > .btn.creditos .saldo-creditos::before{ content:attr(data-n); font-size:14px; } }
/* Coluna do conteúdo estreita (menos de 1000px, por exemplo com a lateral aberta): cartões de assunto em 2 colunas e grupos
   embaixo do depoimento (em 4 colunas o título invade a foto) */
@container (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr); } .community{ grid-template-columns:1fr; } .tabs.folder .btn{ display:none; } }
@media (max-width:1180px){
  .tabs.folder{ overflow-x:auto; scrollbar-width:none; }
  .tabs.folder .btn{ display:none; } /* o botão Todos os assuntos não cabe ao lado das abas */
  .tabs.folder button{ white-space:nowrap; }
  .hero h1{ font-size:48px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .community{ grid-template-columns:1fr; }
}
@media (max-width:1100px){ .proto-long{ display:none; } .proto-short{ display:inline; } }
/* Celular: a etiqueta PROTÓTIPO fica sozinha na 1ª linha; "Em construção · dados fictícios" e "Saiba mais" na 2ª */
@media (max-width:640px){
  .proto{ row-gap:4px; }
  .proto::before{ content:""; order:1; flex-basis:100%; height:0; }
  .proto > span, .proto > button{ order:2; }
}
@media (max-width:980px){
  .side-wrap{ position:static; width:0; height:auto; margin:0; }
  .side{ position:fixed; left:0; top:0; height:100vh; margin:0; border-radius:0 26px 26px 0; z-index:70; transform:translateX(-105%); transition:transform .25s; width:280px; background:rgba(255,255,255,.96); overflow-y:auto; } /* gaveta do celular: rola por dentro */
  .app.open .side{ transform:none; box-shadow:0 20px 60px rgba(0,0,0,.2); }
  .collapse{ display:none; }
  .scrim{ position:fixed; inset:0; background:rgba(10,20,30,.35); z-index:65; display:none; }
  .app.open .scrim{ display:block; }
  .menu-btn{ display:grid; }
  .hero{ grid-template-columns:1fr; gap:36px; }
  .stories{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .fgrid > div:first-child{ grid-column:1 / 3; }
}

/* ===== Celular ===== */
@media (max-width:640px){
  body{ padding-bottom:84px; }
  .wrap{ padding:0 16px; }
  .top{ gap:10px; padding:12px 16px; }
  .top .brand{ font-size:27px; }
  .tools > .btn{ display:none; } /* só os botões do topo; os de dentro das janelas (ex.: Entrar do formulário) continuam */
  .tools > .btn.simples{ display:inline-flex; font-size:0; gap:0; width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; } /* Modo simples: só o ícone */
  .tools > .btn.simples .ic{ width:18px; height:18px; }
  .head h2{ font-size:28px; }
  .head .btn{ display:none; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 18px; padding:0 16px; scrollbar-width:none; }
  .tabs button{ white-space:nowrap; }
  .tabs .btn{ display:none; }
  .folder-panel{ padding:18px 16px 20px; border-radius:0 20px 20px 20px; }
  .folder-panel .cards{ margin:0 -16px; padding:0 16px 4px; }
  .cards{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 4px; gap:14px; scrollbar-width:none; }
  .cards .vcard{ flex:0 0 72%; scroll-snap-align:start; }
  .fgrid{ gap:22px; }
  .flogos{ gap:24px; }
  .flogo .logo-fsb{ height:70px; }
  .flogo .logo-rb2{ height:90px; }
  .tabbar{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:22px; padding:6px; justify-content:space-between; box-shadow:var(--shadow); }
  .tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:600; color:#6b7581; padding:7px 0; border-radius:16px; }
  .tabbar a.on{ background:var(--mint); color:var(--green); }
  .toast{ bottom:96px; }

  /* Tela Início */
  .hero{ padding:12px 0 48px; }
  .hero h1{ font-size:38px; }
  .hero p{ font-size:16px; margin:18px 0 22px; }
      .destaque h3{ font-size:24px; }
  .item{ grid-template-columns:96px 1fr; padding:12px; margin:0 -12px; gap:12px; }
  .item img{ width:96px; height:84px; }
  .item h3{ font-size:15.5px; }
  .groups{ display:flex; overflow-x:auto; margin:0 -16px; padding:0 16px; gap:12px; scrollbar-width:none; }
  .groups .vcard{ flex:0 0 70%; }
  .news, .photo-band{ border-radius:24px; }
  .news h2, .photo-band h2{ font-size:28px; }
}

/* ===== Telas Conteúdos e Grupos ===== */
/* Cabeçalho da página (título e texto) */
.page-head{ padding:36px 0 24px; } /* subtítulo sem limite de largura: vai até o lado direito do conteúdo */
.page-head h1{ font-size:50px; line-height:1.06; font-weight:700; }
.page-head p{ font-size:17px; line-height:1.6; color:var(--text-2); margin:14px 0 0; }
/* Busca grande */
.busca{ display:flex; align-items:center; gap:12px; height:54px; padding:0 20px; border-radius:999px; margin-bottom:24px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); color:var(--muted);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.busca:focus-within{ border-color:var(--green); }
.busca input{ flex:1; min-width:0; border:none; outline:none; background:none; font-size:15px; box-shadow:none !important; }
/* Destaque largo: foto à esquerda, texto à direita */
.destaque-largo{ display:grid; grid-template-columns:1.1fr 1fr; border-radius:26px; overflow:hidden; margin-bottom:40px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra);
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.destaque-largo:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), 0 16px 36px rgba(1,53,101,.14); }
.dl-foto{ position:relative; min-height:300px; overflow:hidden; }
.dl-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.destaque-largo:hover .dl-foto img{ transform:scale(1.03); }
.dl-texto{ padding:30px 32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.dl-texto .kicker{ margin-bottom:14px; }
.dl-texto h2{ font-size:28px; line-height:1.2; margin:6px 0 10px; }
.dl-texto p{ color:var(--text-2); line-height:1.6; margin:0 0 12px; font-size:15px; }
.dl-texto .btn{ margin-top:14px; }
/* Abas em pílulas (Todos / Grátis / Premium, Todos / Participando / Disponíveis) */
.seg{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; margin-bottom:20px; flex-wrap:wrap;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho); }
.seg button{ border:none; background:none; border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:500; color:#5a6470; }
.seg button small{ font-size:11.5px; color:var(--muted); margin-left:2px; }
.seg button:hover{ color:var(--green); }
.seg button.on{ background:#fff; color:var(--navy); font-weight:600; box-shadow:0 2px 8px rgba(1,53,101,.08); }
/* Grade de cartões verticais: tantas colunas quantas couberem (mínimo 220px) */
.grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:22px; }
.vazio{ text-align:center; color:var(--muted); font-size:15px; padding:40px 0; }
.lista-topo{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lista-conta{ font-size:13.5px; color:var(--muted); margin-bottom:20px; }
/* Detalhes dos cartões verticais nessas telas */
.vc-autor{ display:block; font-size:12.5px; opacity:.85; margin:-8px 0 12px; }
.vc-desc{ font-size:12.5px; line-height:1.45; opacity:.88; margin:-6px 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vc-topo{ position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:2; }
.selo-vc{ background:rgba(255,255,255,.9); color:var(--green); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.selo-vc.premium{ background:rgba(253,241,220,.92); color:#8a5a0e; }
.selo-vc.novas{ background:var(--red); color:#fff; }
.vc-sair{ display:inline-flex; align-items:center; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px;
  padding:8px 14px; font-size:12.5px; font-weight:600; white-space:nowrap; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .15s ease; }
.vc-sair:hover{ background:rgba(255,255,255,.3); }
@media (max-width:980px){ .destaque-largo{ grid-template-columns:1fr; } .dl-foto{ min-height:220px; } }
@media (max-width:640px){
  .page-head{ padding:12px 0 18px; }
  .page-head h1{ font-size:36px; }
  .page-head p{ font-size:16px; }
  .dl-texto{ padding:22px; }
  .dl-texto h2{ font-size:23px; }
  .grade{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap:16px; } /* 1 por linha no celular; 2 a partir de ~420px, para a capa não ficar enorme */
  .grade:has(.at-card, .vcard-grupo){ grid-template-columns:1fr; } /* Curtidas, Salvos e Grupos: capa deitada, uma por linha */
  .seg{ display:flex; }
}

/* ===== Tela Colunas ===== */
.page-head .btn{ margin-top:18px; }
/* Coluna do dia + 4 sugestões no mesmo box */
.coluna-dia{ border-radius:26px; overflow:hidden; margin-bottom:56px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.cd-topo{ display:grid; grid-template-columns:1.05fr 1fr; }
.cd-topo .dl-foto{ min-height:340px; }
.cd-topo:hover .dl-foto img{ transform:scale(1.03); }
.cd-selos{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.cd-selos .kicker{ margin:0; }
.cd-topo h2{ font-size:28px; line-height:1.2; margin:0 0 14px; }
.cd-bio{ font-size:14.5px; line-height:1.6; color:var(--text-2); margin:14px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cd-ultima{ display:block; margin-top:16px; padding:12px 14px; border-radius:14px; background:rgba(230,242,234,.7); }
.cd-ultima small{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green-2); margin-bottom:3px; }
.cd-ultima b{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:var(--navy); line-height:1.35; }
.cd-sugestoes{ border-top:1px solid rgba(1,53,101,.08); padding:22px 24px 24px; }
.cd-sug-titulo{ display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.cd-sug-lista{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; }
.cd-sug{ display:block; padding:8px; margin:-8px; border-radius:18px; }
.cd-sug:hover{ background:rgba(255,255,255,.7); }
.cd-sug img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; }
.cd-sug b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--navy); line-height:1.3; margin:10px 0 4px; }
.cd-sug small{ font-size:12.5px; color:var(--muted); }
/* Navegue por autor: nome completo, nicho da coluna e quantidade de colunas */
.autores{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.autor{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:20px; font:inherit; text-align:left; color:var(--navy);
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.autor .av-col{ width:48px; height:48px; font-size:15px; }
.autor-txt{ display:flex; flex-direction:column; min-width:0; }
.autor-txt b{ font-size:15px; font-weight:600; color:var(--navy); line-height:1.25; }
.autor-nicho{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-2); margin-top:2px; }
.autor-txt small{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.autor:not(.on):hover{ box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.autor.on{ box-shadow:0 0 0 2px var(--green), var(--vidro-sombra); background:rgba(230,242,234,.8); }
/* Todos os colunistas */
.colunistas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.colunista{ display:flex; flex-direction:column; align-items:stretch; gap:4px; text-align:left; padding:20px; border-radius:22px; font:inherit; color:var(--text);
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); }
.colunista:not(.on):hover{ box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.colunista.on{ box-shadow:0 0 0 2px var(--green), var(--vidro-sombra); background:rgba(230,242,234,.7); }
.col-topo{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.col-nome{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--navy); line-height:1.25; }
.colunista b{ font-size:14.5px; font-weight:600; color:var(--text); margin-top:2px; }
.col-tema{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-2); }
.col-bio{ font-size:13.5px; line-height:1.55; color:var(--text-2); margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.col-rodape{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.col-rodape small{ font-size:12.5px; color:var(--muted); }
.col-ler{ font-size:13px; font-weight:600; color:var(--green); }
.av-col{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:16px; flex:none; border:3px solid rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(1,53,101,.12); }
.autor-col{ display:flex; align-items:center; gap:12px; }
.autor-col b{ display:block; font-size:14.5px; color:var(--navy); }
.autor-col small{ font-size:12.5px; color:var(--muted); }
.autor-col .av-col{ width:44px; height:44px; font-size:14px; }
@media (max-width:980px){ .cd-topo{ grid-template-columns:1fr; } .cd-topo .dl-foto{ min-height:220px; } }
@media (max-width:640px){ .cd-sugestoes{ padding:18px; } .cd-sug-lista{ grid-template-columns:1fr 1fr; } }

/* ===== Tela Busca ===== */
.busca-grande{ height:62px; padding:0 22px; margin-bottom:28px; }
.busca-grande input{ font-size:16.5px; }
.busca-grande .ic{ width:22px; height:22px; color:var(--green); }
.bs-limpar{ border:none; background:rgba(1,53,101,.06); color:var(--muted); width:30px; height:30px; border-radius:50%; font-size:13px; display:grid; place-items:center; padding:0; }
.bs-limpar:hover{ background:rgba(1,53,101,.12); color:var(--navy); }
.bs-bloco{ margin-bottom:36px; }
.bs-bloco h2, .bs-grupo h2{ font-size:22px; margin-bottom:14px; }
.bs-grupo h2 small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--muted); margin-left:4px; }
.bs-bloco-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bs-link{ border:none; background:none; color:var(--green); font-size:13px; font-weight:600; padding:0; }
.bs-link:hover{ text-decoration:underline; }
.bs-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bs-chip{ border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.6); color:var(--navy); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:500;
  box-shadow:var(--vidro-brilho), 0 3px 10px rgba(1,53,101,.05); }
.bs-chip:hover{ background:#fff; color:var(--green); }
.bs-assuntos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.bs-assunto{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:18px; text-align:left; font:inherit;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.bs-assunto img{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; }
.bs-assunto b{ display:block; font-size:15px; color:var(--navy); }
.bs-assunto small{ font-size:12.5px; color:var(--muted); }
.bs-resumo{ font-size:15px; color:var(--text-2); margin:0 0 16px; }
.bs-resumo b{ color:var(--navy); }
.bs-grupo{ margin:8px 0 36px; }
.bs-lista .res-item p{ font-size:13.5px; line-height:1.5; color:var(--text-2); margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bs-lista .res-item{ align-items:start; }
.bs-vazio{ margin-top:6px; }
mark{ background:rgba(159,208,176,.55); color:inherit; border-radius:4px; padding:0 2px; }
.seg button:disabled{ opacity:.45; cursor:default; }
@media (max-width:640px){ .busca-grande{ height:54px; } .busca-grande input{ font-size:15px; } }

/* ===== Páginas institucionais (Conhecer, Como funciona, Benefícios, Patrocinadores) ===== */
.inst-hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:36px 0 80px; }
/* Abertura: título e parágrafo ocupam a metade esquerda da página (com ou sem vídeo à direita); parágrafo justificado */
.inst-hero.solo{ grid-template-columns:1.05fr 1fr; }
.inst-hero .kicker{ margin-bottom:18px; }
.inst-hero h1{ font-size:54px; line-height:1.06; font-weight:700; }
.inst-hero .lead{ font-size:17.5px; line-height:1.6; color:var(--text-2); margin:22px 0 28px; text-align:justify; }
.ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.small-note{ font-size:13.5px; color:var(--muted); margin:16px 0 0; }
.small-note a{ color:var(--green); font-weight:600; text-decoration:underline; }
.btn.lg{ padding:14px 26px; font-size:15px; }
.btn.white{ background:#fff; color:var(--green); }
.btn.white:hover{ background:var(--mint); }
/* Botão das faixas azuis de fechamento (institucionais): verde sólido com texto dourado, bem legível no azul */
:root .btn.cta-dourado{ background:var(--green); color:#f5c46b; border:none; box-shadow:0 6px 18px rgba(0,0,0,.22); }
/* hover: o padrão do portal (sobe 2px e a sombra aumenta), sem mudar as cores */
:root .btn.cta-dourado:hover{ background:var(--green); color:#f5c46b; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.32); }

/* Espaço do vídeo: para publicar, trocar o botão e o aviso por <iframe src="https://www.youtube.com/embed/ID" allowfullscreen> dentro de .video */
.video{ position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/10; background:var(--mint); border:1px solid #d3e8da; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video .play{ position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; border:none; background:#fff; color:var(--green); display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .2s; }
.video .play:hover{ transform:translate(-50%,-50%) scale(1.06); }
.video .play svg{ width:30px; height:30px; margin-left:4px; }
.video .note{ position:absolute; z-index:1; left:16px; bottom:16px; background:rgba(255,255,255,.94); border-radius:999px; font-size:12.5px; font-weight:600; color:var(--navy); padding:6px 12px; }

/* Seções */
.inst-sec{ padding:0 0 88px; }
.inst-head{ max-width:700px; margin-bottom:30px; }
.inst-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.inst-head h2{ font-size:40px; line-height:1.12; font-weight:700; }
.inst-head p{ font-size:16.5px; line-height:1.6; color:var(--text-2); margin:12px 0 0; }
.inst-note{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:20px 0 0; }

/* Duas colunas lado a lado + grupos de itens com ícone */
.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
.feats{ display:grid; grid-template-columns:1fr 1fr; gap:30px 28px; }
.feats.three{ grid-template-columns:repeat(3,1fr); }
.feats.four{ grid-template-columns:repeat(4,1fr); }
.feat .ic-box{ width:46px; height:46px; border-radius:14px; background:var(--mint); color:var(--green); display:grid; place-items:center; margin-bottom:14px; }
.feat .ic-box svg{ width:22px; height:22px; }
.feat h3{ font-size:19px; font-weight:600; margin-bottom:6px; }
.feat p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0; }

/* Dois painéis em contraste (FOMO x JOMO, outros portais x SoftLiving) */
.contrast{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel{ border-radius:26px; padding:32px; }
.panel.off{ background:#fff; border:1px solid var(--line); }
.panel.on{ background:var(--mint); }
.panel .tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.03em; border-radius:999px; padding:5px 12px; margin-bottom:16px; }
.panel.off .tag{ background:#f6ecea; color:#a2432e; }
.panel.on .tag{ background:#fff; color:var(--green); }
.panel h3{ font-size:24px; margin-bottom:10px; }
.panel p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0 0 18px; }
.panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.panel li{ font-size:15px; line-height:1.45; padding-left:28px; position:relative; }
.panel li::before{ content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background-position:center; background-size:12px; background-repeat:no-repeat; }
.panel.off li{ color:var(--text-2); }
.panel.off li::before{ background-color:#f6ecea; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2432e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
.panel.on li::before{ background-color:var(--green); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E"); }
.bigquote{ font-family:'Fraunces',serif; font-size:30px; line-height:1.3; color:var(--navy); text-align:center; max-width:780px; margin:44px auto 0; font-weight:500; }
.bigquote strong{ color:var(--green); font-style:italic; font-weight:700; }

/* Três pilares numerados */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.pillars.four{ grid-template-columns:repeat(4,1fr); margin-top:0; }
.pillar{ border-top:2px solid var(--navy); padding-top:18px; }
.pillar .n{ font-family:'Fraunces',serif; font-size:15px; font-weight:700; color:var(--green-2); }
.pillar h3{ font-size:21px; margin:8px 0; font-weight:600; }
.pillar p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0; }

/* Faixa de convite */
.band{ display:flex; gap:28px; align-items:center; justify-content:space-between; background:var(--mint); border-radius:26px; padding:32px 36px; }
.band h3{ font-size:23px; margin-bottom:8px; }
.band p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0; max-width:720px; }
.band.white{ background:#fff; border:1px solid var(--line); }
.bands{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bands .band{ flex-direction:column; align-items:flex-start; }
.bands .band .btn{ margin-top:auto; }

/* Caixa branca: destaca um trecho inteiro sobre o fundo creme (Conhecer: carteira de créditos + patrocinadores) */
.caixa-branca{ background:#fff; border-radius:30px; padding:56px; }
.caixa-branca .panel.off{ background:#f6f5f2; border-color:#eeebe5; }
/* Comparação sem caixas (Quem somos, O que nos move): só as etiquetas, títulos e textos, alinhados ao título da seção */
:root .contrast.sem-caixa .panel{ background:none; border:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; padding:0; }
.contrast.sem-caixa{ gap:48px; }
.contrast.sem-caixa .panel.on .tag{ background:var(--mint); } /* sem a caixa verde, a etiqueta JOMO ganha o verde-claro */
.caixa-branca .band{ margin-top:40px; }
.caixa-branca .inst-head:not(:first-child){ margin-top:64px; } /* segundo título dentro da mesma caixa */
/* Itens com ícone em cartões de borda fina (Conhecer: Por que é diferente) */
.feats.em-cartoes{ gap:18px; }
.feats.em-cartoes .feat{ border:1px solid var(--line); border-radius:22px; padding:26px; }

/* Na mídia */
.press{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px 30px; transition:border-color .2s; }
.press:hover{ border-color:var(--navy); }
.press .src{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:#b3202e; }
.press .t{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; color:var(--navy); line-height:1.3; }
.press .round{ border-color:var(--line-2); }

/* Passo a passo */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; }
.step .n{ font-family:'Fraunces',serif; font-size:52px; line-height:1; font-weight:700; color:var(--mint-line); }
.step .meta-chip{ display:inline-block; font-size:12px; font-weight:600; color:var(--green); background:var(--mint); border-radius:999px; padding:4px 10px; margin:16px 0 10px; }
.step h3{ font-size:20px; margin-bottom:8px; font-weight:600; }
.step p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0; }

/* Carteira de créditos: cartão ilustrativo + regras em linhas */
.wallet-card{ background:var(--navy); color:#fff; border-radius:26px; padding:30px; aspect-ratio:1.6; display:flex; flex-direction:column; justify-content:space-between; max-width:460px; width:100%; box-shadow:var(--shadow); }
.wallet-card .top-line{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.75); }
.wallet-card .sig{ font-size:22px; }
.wallet-card .valor{ font-family:'Fraunces',serif; font-size:46px; font-weight:700; line-height:1; }
.wallet-card .valor small{ display:block; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:rgba(255,255,255,.75); margin-top:8px; }
.wallet-card .bonus{ display:flex; gap:8px; flex-wrap:wrap; }
.wallet-card .bonus span{ background:rgba(255,255,255,.14); border-radius:999px; font-size:12.5px; padding:6px 12px; }
.rows div{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:15px; }
.rows div:first-child{ border-top:1px solid var(--line); }
.rows b{ color:var(--navy); font-weight:600; }
.rows span{ color:var(--text-2); text-align:right; }

/* Regras com marcador */
.rules{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.rules li{ font-size:15px; line-height:1.6; color:var(--text-2); padding-left:34px; position:relative; }
.rules li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5519' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat; }
.rules b{ color:var(--navy); }

/* Cartões com ícone (Benefícios: o que traz para a sua vida): 3 na primeira linha, 2 largos na segunda */
.icon-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.icon-cards .feat{ grid-column:span 2; background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; }
.icon-cards .feat.wide{ grid-column:span 3; }

/* Planos (Benefícios) e cotas (Patrocinadores) */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plans.dois{ grid-template-columns:repeat(2, minmax(0, 1fr)); } /* Empresas e grupos: as duas licenças */
@media (max-width:760px){ .plans.dois{ grid-template-columns:minmax(0, 1fr); } }
.plan-sub{ font-size:15px; line-height:1.6; color:var(--text-2); margin:6px 0 16px; }
.nr1-aviso{ margin-top:28px !important; padding:16px 20px; border-radius:18px; background:#fdf6e3; border:1px dashed #e3c77f; color:#7a5c12 !important; }
.eg-perguntas{ max-width:820px; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:26px; padding:30px; display:flex; flex-direction:column; }
.plan .tag{ align-self:flex-start; font-size:12px; font-weight:700; border-radius:999px; padding:5px 12px; background:var(--mint); color:var(--green); margin-bottom:18px; }
.plan h3{ font-size:26px; margin-bottom:10px; }
.plan p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0 0 14px; }
.plan .price{ color:var(--text); }
.plan .price b{ font-family:'Fraunces',serif; font-size:40px; color:var(--navy); display:block; line-height:1.1; }
.plan .sub{ font-weight:600; color:var(--navy); margin-bottom:10px; }
.plan ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
.plan li{ font-size:14.5px; line-height:1.45; padding-left:28px; position:relative; }
.plan li::before{ content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5519' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan .btn{ margin-top:auto; justify-content:center; }
.plan .kind{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-2); margin-bottom:8px; }
.plan .term{ margin-top:auto; font-size:13px; font-weight:600; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; }
.plan.featured{ background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 18px 40px rgba(31,85,25,.25); }
.plan.featured h3, .plan.featured .price b, .plan.featured .sub{ color:#fff; }
.plan.featured p, .plan.featured .price{ color:rgba(255,255,255,.85); }
.plan.featured .tag{ background:#fff; color:var(--green); }
.plan.featured li::before{ background-color:#fff; }
.plan.featured .kind{ color:#cfe8d7; }
.plan.featured .term{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2); }
.plan.vip{ background:#fdf6e3; border-color:#f0ddac; }
.plan.vip .tag{ background:#fff; color:var(--gold); }
.plan.vip h3{ color:var(--gold); }

/* Cotas de patrocínio: boxes altos (2,5x o cartão comum), textos claros e com mais espaço entre linhas */
.plans.cotas .plan{ min-height:760px; padding:48px 40px 36px; }
.plans.cotas .kind{ font-size:12.5px; margin-bottom:14px; }
.plans.cotas h3{ font-size:34px; margin-bottom:34px; }
.plans.cotas ul{ gap:22px; }
.plans.cotas li{ font-size:16px; line-height:1.9; color:var(--muted); padding-left:32px; }
.plans.cotas li::before{ top:6px; }
.plans.cotas .term{ font-size:14px; padding-top:20px; }

/* Selo co-fundador */
.seal{ display:flex; gap:28px; align-items:center; background:#f1d898; border:1px solid #d9b25a; border-radius:28px; padding:36px 40px; box-shadow:0 18px 40px rgba(170,125,30,.14); } /* dourado, no tom da Assinatura VIP da versão 1 */
.seal .medal{ width:92px; height:92px; flex:none; border-radius:50%; background:#fffaf0; color:#8a6414; display:grid; place-items:center; box-shadow:0 0 0 8px rgba(255,250,240,.45); }
.seal .medal svg{ width:44px; height:44px; }
.seal h2{ color:#5c4108; font-size:30px; margin-bottom:8px; }
.seal p{ color:#5c4108; font-size:15.5px; line-height:1.6; margin:0; }

@media (max-width:1180px){
  .inst-hero h1{ font-size:46px; }
  .steps, .plans, .pillars, .pillars.four{ grid-template-columns:1fr 1fr; }
  .icon-cards .feat, .icon-cards .feat.wide{ grid-column:span 3; }
  .feats.four{ grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  .inst-hero, .inst-hero.solo, .split, .contrast, .bands{ grid-template-columns:1fr; }
  .feats.three{ grid-template-columns:1fr; }
  .band{ flex-direction:column; align-items:flex-start; }
  .caixa-branca{ padding:40px 32px; }
  .press{ grid-template-columns:1fr auto; }
  .press .src{ grid-column:1 / 3; }
}
@media (max-width:640px){
  .inst-hero{ padding:12px 0 56px; gap:30px; }
  .inst-hero h1{ font-size:36px; }
  .inst-hero .lead{ font-size:16px; }
  .inst-sec{ padding-bottom:64px; }
  .inst-head h2{ font-size:29px; }
  .feats, .feats.four, .steps, .plans, .pillars, .pillars.four{ grid-template-columns:1fr; }
  .icon-cards{ grid-template-columns:1fr; }
  .icon-cards .feat, .icon-cards .feat.wide{ grid-column:auto; }
  .panel{ padding:24px; }
  .plans.cotas .plan{ min-height:0; padding:32px 26px 26px; }
  .plans.cotas h3{ font-size:28px; margin-bottom:22px; }
  .caixa-branca{ padding:30px 18px; border-radius:24px; }
  .bigquote{ font-size:23px; }
  .band{ padding:26px 22px; }
  .video .play{ width:66px; height:66px; }
  .wallet-card{ padding:22px; }
  .wallet-card .valor{ font-size:36px; }
  .rows div{ flex-direction:column; gap:4px; }
  .rows span{ text-align:left; }
  .seal{ flex-direction:column; align-items:flex-start; padding:28px 24px; }
  .seal h2{ font-size:24px; }
  .press{ padding:22px; gap:14px; }
  .press .t{ font-size:18px; }
}

/* ===== Tela Amigos (antiga Conexões) ===== */
.am-pedidos{ margin-bottom:34px; }
.am-pedidos h2{ font-size:22px; margin-bottom:14px; }
.am-pedidos h2 small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--muted); margin-left:4px; }
.am-ped-lista{ display:flex; flex-direction:column; gap:10px; }
.am-pedido{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:22px;
  background:rgba(230,242,234,.7); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.am-ped-txt{ flex:1; min-width:0; }
.am-ped-txt > b{ display:block; font-size:16px; color:var(--navy); }
.am-ped-txt span b{ color:var(--navy); font-weight:600; }
.am-ped-txt span{ font-size:13.5px; color:var(--text-2); }
.am-ped-acoes{ display:flex; gap:8px; }
.am-busca{ width:320px; max-width:100%; height:44px; margin-bottom:20px; }
.am-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.am-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 18px 20px; border-radius:24px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.am-card:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); background:rgba(255,255,255,.85); }
.am-card .am-av{ width:76px; height:76px; font-size:24px; font-family:'Fraunces',serif; }
.am-card h3{ font-size:19px; margin:14px 0 4px; }
.am-ctx{ font-size:13px; line-height:1.45; color:var(--text-2); margin:0 0 12px; }
.am-ctx b{ color:var(--navy); font-weight:600; }
.am-gostos{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:16px; }
.am-gostos span{ font-size:12px; font-weight:500; color:var(--green); background:var(--mint); border-radius:999px; padding:4px 10px; }
.am-card .btn{ margin-top:auto; }
.am-card .btn .ic{ width:16px; height:16px; }
.am-enviado{ color:var(--muted) !important; }
@media (max-width:640px){
  .am-pedido{ flex-wrap:wrap; }
  .am-ped-acoes{ width:100%; }
  .am-ped-acoes .btn{ flex:1; justify-content:center; }
  .am-busca{ width:100%; }
}

/* ===== Tela Carteira ===== */
.ct-saldo{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:16px; margin-bottom:44px; }
.ct-total{ padding:26px 28px; border-radius:26px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.ct-total small{ display:block; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.ct-total > b{ font-family:'Fraunces',serif; font-size:64px; line-height:1; color:var(--green); margin-right:8px; }
.ct-total > span{ font-size:18px; color:var(--text-2); }
.ct-partes{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--text-2); }
.ct-partes span{ display:inline-flex; align-items:center; gap:8px; }
.ct-ponto{ width:10px; height:10px; border-radius:50%; }
.ct-ponto.comprados{ background:var(--navy); }
.ct-ponto.bonus{ background:#d4a24c; }
.ct-oferta{ display:flex; flex-direction:column; align-items:flex-start; padding:24px 26px; border-radius:26px; background:#fdf1dc; border:1px solid #f0ddac; }
.ct-oferta-rotulo{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8a5a0e; }
.ct-oferta-rotulo .ic{ width:16px; height:16px; }
.ct-oferta p{ font-size:17px; line-height:1.5; color:#5c3c08; margin:10px 0 18px; }
.ct-oferta .btn{ margin-top:auto; }
.ct-bloco{ margin-bottom:48px; scroll-margin-top:24px; }
.ct-bloco h2{ font-size:26px; margin-bottom:6px; }
.ct-sub{ color:var(--text-2); font-size:15px; margin:0 0 18px; }
.ct-valores{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:18px; }
.ct-valor{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:18px; border-radius:20px; text-align:left; font:inherit;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.ct-valor:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.ct-valor b{ font-family:'Fraunces',serif; font-size:26px; color:var(--navy); }
.ct-valor span{ font-size:13px; color:var(--text-2); }
.ct-valor.on{ background:#fff; box-shadow:0 0 0 2px var(--green), var(--vidro-sombra); }
.ct-valor em{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--green); margin-top:2px; }
.ct-oferta-depois{ font-size:13.5px !important; color:#8a5a0e !important; margin:-10px 0 18px !important; }
.ct-regras{ margin-top:20px; padding:18px 20px; border-radius:20px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); }
.ct-regras p{ margin:0 0 12px; font-size:14.5px; color:var(--text-2); }
.ct-regras p b{ color:var(--navy); }
.ct-regras table{ width:100%; border-collapse:collapse; font-size:14px; }
.ct-regras caption{ text-align:left; font-weight:600; color:var(--navy); padding-bottom:8px; }
.ct-regras th{ text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--line); }
.ct-regras td{ padding:9px 0; border-bottom:1px solid var(--line); color:var(--text); }
.ct-regras tr:last-child td{ border-bottom:none; }
.ct-regras td:nth-child(2){ color:var(--green); font-weight:600; }
.crj-depois{ display:block; margin:-6px 0 12px; font-size:12.5px; color:#8a5a0e; }
.ct-selo{ position:absolute; top:-10px; right:12px; font-size:11px !important; font-weight:700; color:#8a5a0e !important; background:#fdf1dc; border:1px solid #f0ddac; border-radius:999px; padding:3px 9px; }
.ct-pagar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ct-pagar .seg{ margin:0; }
.ct-resumo{ flex:1; margin:0; font-size:15px; color:var(--text-2); }
.ct-resumo b{ color:var(--navy); }
.ct-ganhe{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.ct-ganhe-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:20px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); }
.ct-ganhe-item > div{ flex:1; min-width:0; }
.ct-ganhe-item b{ font-size:15.5px; color:var(--navy); }
.ct-ganhe-item p{ margin:2px 0 0; font-size:13.5px; color:var(--text-2); }
.ct-ganhe-ic{ width:42px; height:42px; flex:none; border-radius:14px; display:grid; place-items:center; background:var(--mint); color:var(--green); }
.ct-feito{ font-size:13px; font-weight:600; color:var(--green); white-space:nowrap; }
.ct-extrato-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ct-extrato-topo .seg{ margin:0; }
.ct-extrato{ border-radius:22px; padding:6px 20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.ct-linha{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.ct-linha + .ct-linha{ border-top:1px solid var(--line); }
.ct-linha > div{ flex:1; min-width:0; }
.ct-linha b{ display:block; font-size:15px; font-weight:600; color:var(--text); }
.ct-linha small{ font-size:13px; color:var(--muted); }
.ct-linha-ic{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; }
.ct-linha-ic .ic{ width:17px; height:17px; }
.ct-linha-ic.entra{ background:var(--mint); color:var(--green); }
.ct-linha-ic.sai{ background:#f1ede5; color:#7c8591; }
.ct-valor-linha{ font-weight:700; font-size:16px; white-space:nowrap; }
.ct-valor-linha.entra{ color:var(--green); }
.ct-valor-linha.sai{ color:var(--text-2); }
.ct-valor-linha small{ font-weight:500; font-size:12px; color:#8a5a0e; }
.ct-nota{ font-size:13px; line-height:1.55; color:var(--muted); margin:14px 0 0; }
@container (max-width:760px){
  .ct-saldo{ grid-template-columns:1fr; }
  .ct-valores{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .ct-pagar .btn{ width:100%; justify-content:center; }
  .ct-ganhe-item{ flex-wrap:wrap; }
  .ct-extrato{ padding:4px 14px; }
}

/* ===== Tela Indicações ===== */
.in-convite{ display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:16px; align-items:stretch; margin-bottom:44px; } /* cartão do convite + resumo ao lado */
/* Cartão do convite (referência aprovada): fundo azul para verde, caixas translúcidas e botões em pílula */
.in-cartao{ padding:28px; border-radius:28px; color:#fff; background:linear-gradient(135deg, #013565 0%, #2c5b58 55%, #3f7a45 100%); box-shadow:0 18px 40px rgba(1,53,101,.2); }
.in-rotulo{ display:flex; align-items:center; gap:9px; margin:0; font-size:15px; font-weight:600; color:rgba(255,255,255,.88); }
.in-rotulo .ic{ width:19px; height:19px; }
.in-codigo{ font-family:'Fraunces',serif; font-size:40px; font-weight:700; letter-spacing:.06em; margin:10px 0 16px; line-height:1.1; }
.in-link-box{ padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.14); margin-bottom:14px; }
.in-link-box small{ display:block; font-size:12.5px; color:rgba(255,255,255,.7); margin-bottom:4px; }
.in-link-box span{ display:block; font-size:15px; font-weight:500; overflow-wrap:anywhere; } /* link longo: só quebra se não couber */
.in-botoes{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.in-bt{ display:inline-flex; align-items:center; gap:8px; border:none; border-radius:999px; padding:10px 16px; font:inherit; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.18);
  cursor:pointer; white-space:nowrap; transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.in-bt .ic{ width:17px; height:17px; }
.in-bt:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); background:rgba(255,255,255,.26); }
.in-bt.in-whats{ background:#25d366; color:#fff; }
.in-bt.in-whats:hover{ background:#20bd5a; }
.in-bt.in-branco{ background:#fff; color:var(--navy); }
.in-bt.in-branco:hover{ background:#f3f7f4; }
.in-email{ display:flex; gap:10px; margin-bottom:14px; }
.in-email input{ flex:1; min-width:0; height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; font:inherit; font-size:14.5px; }
.in-email input::placeholder{ color:rgba(255,255,255,.7); }
.in-regras{ margin:0; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.12); font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.92); }
.in-regras a{ color:#fff; text-decoration:underline; font-weight:600; }
.in-regras .sig .soft{ color:#d6e6f5; } .in-regras .sig .living{ color:#cfe9c4; }   /* fundo escuro: cores claras da marca */
.in-resumo{ display:flex; flex-direction:column; justify-content:center; gap:22px; padding:24px 22px; border-radius:28px; background:#fdf1dc; border:1px solid #f0ddac; }
.in-resumo div{ display:flex; flex-direction:column; gap:4px; }
.in-resumo div + div{ padding-top:18px; border-top:1px solid #f0ddac; }
.in-resumo b{ font-family:'Fraunces',serif; font-size:38px; line-height:1; color:#8a5a0e; }
.in-resumo span{ font-size:14px; color:#6b4c10; }
.in-passos{ list-style:none; counter-reset:passo; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; padding:0; margin:14px 0 0; }
.in-passos li{ counter-increment:passo; padding:20px; border-radius:22px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); }
.in-passos li::before{ content:counter(passo); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff; font-weight:700; margin-bottom:12px; }
.in-passos b{ display:block; font-family:'Fraunces',serif; font-size:18px; color:var(--navy); margin-bottom:4px; }
.in-passos span{ font-size:14px; line-height:1.5; color:var(--text-2); }
.in-lista{ margin-top:14px; border-radius:22px; padding:4px 20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.in-item{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.in-item + .in-item{ border-top:1px solid var(--line); }
.in-item > div{ flex:1; min-width:0; }
.in-item b{ display:block; font-size:15px; color:var(--text); overflow:hidden; text-overflow:ellipsis; }
.in-item small{ font-size:13px; color:var(--muted); }
.in-av{ width:40px; height:40px; font-size:14px; border-width:2px; }
.in-status{ font-size:12.5px; font-weight:600; border-radius:999px; padding:5px 11px; white-space:nowrap; background:#f1ede5; color:var(--muted); }
.in-status.aprovada{ background:var(--mint); color:var(--green); }

/* ===== Tela Meu perfil ===== */
.pf-topo{ margin:28px 0 36px; border-radius:28px; overflow:hidden; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.pf-capa{ height:130px; background:var(--mint); }
.pf-id{ display:flex; align-items:flex-end; gap:18px; padding:0 26px; margin-top:-48px; flex-wrap:wrap; }
.pf-avatar{ display:grid; place-items:center; width:112px; height:112px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:38px; border:5px solid #fff; box-shadow:0 10px 26px rgba(1,53,101,.16); }
.pf-nome{ flex:1; min-width:200px; padding-bottom:6px; }
.pf-nome h1{ font-size:36px; font-weight:700; }
.pf-nome p{ margin:4px 0 0; color:var(--text-2); font-size:15px; }
.pf-id .btn{ margin-bottom:10px; }
.pf-id .btn .ic{ width:16px; height:16px; }
.pf-numeros{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:22px; border-top:1px solid var(--line); }
.pf-numeros a{ display:flex; flex-direction:column; align-items:center; padding:16px 8px; transition:background-color .15s ease; }
.pf-numeros a + a{ border-left:1px solid var(--line); }
.pf-numeros a:hover{ background:rgba(255,255,255,.7); }
.pf-numeros b{ font-family:'Fraunces',serif; font-size:26px; color:var(--navy); }
.pf-numeros span{ font-size:13px; color:var(--muted); }
.pf-bloco{ margin-bottom:38px; }
.pf-bloco h2{ font-size:24px; margin-bottom:14px; }
.pf-bloco-topo{ display:flex; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; column-gap:14px; row-gap:2px; margin-bottom:14px; } /* Editar, Ver todos e dicas logo ao lado do título */
.pf-bloco-topo h2{ margin:0; }
.pf-dica{ font-size:13px; color:var(--muted); }
.pf-sobre{ font-size:16.5px; line-height:1.7; color:var(--text-2); margin:0; max-width:720px; }
#pfSobreCampo{ width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line-2); font:inherit; font-size:15.5px; line-height:1.6; background:#fff; }
.pf-editar-acoes{ display:flex; gap:10px; margin-top:10px; }
.pf-campo{ width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line-2); font:inherit; font-size:15.5px; line-height:1.6; background:#fff; }
.pf-linha > .pf-linha-acoes{ flex:none; min-width:0; display:flex; gap:8px; }
/* Perfil público (perfil.html?publico=1): a mesma página, como os outros a veem em /app/@nome */
body.pf-publico .pf-privado{ display:none; }
.pf-publico-aviso{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-top:24px; padding:12px 12px 12px 18px; border-radius:18px; font-size:14.5px; line-height:1.45; color:var(--text-2);
  background:rgba(230,242,234,.7); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); }
.pf-publico-aviso[hidden]{ display:none; }
.pf-publico-aviso b{ color:var(--navy); overflow-wrap:anywhere; }
.pf-publico-aviso + .pf-topo{ margin-top:16px; }
.pf-numeros.pf-numeros-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pf-numeros > span{ display:flex; flex-direction:column; align-items:center; padding:16px 8px; }
.pf-numeros > span + span{ border-left:1px solid var(--line); }
.pf-interesses-publico{ justify-content:flex-start; margin:0; }
.pf-interesses-publico span{ font-size:13.5px; padding:6px 12px; }
/* Interesses: um bloco só, como a faixa de números do perfil; células coladas, separadas por linhas finas (sem pílulas).
   As linhas são desenhadas em cada célula (à direita e embaixo; as da borda somem no recorte do bloco), então o espaço
   que sobrar na última linha fica da cor do bloco. Marcado: azul-claro com ✓ */
.pf-interesses{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); background:#fbfaf7; border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.pf-chip{ display:flex; align-items:center; gap:8px; min-height:52px; padding:12px 16px; border:none; border-radius:0; font:inherit; font-size:14.5px; font-weight:500; text-align:left;
  color:var(--text-2); background:#fbfaf7; box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.pf-chip:hover{ background:#fff; color:var(--navy); }
.pf-chip.on{ background:#e3ecf6; color:var(--navy); font-weight:600; } /* marcado em azul (azul-claro com texto azul da marca) */
.pf-chip.on:hover{ background:#d6e3f1; }
.pf-grupos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.pf-grupo{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:18px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.pf-grupo:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.pf-grupo img{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none; }
.pf-com-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:12px; flex:none; background:#e3ecf6; color:var(--navy); }
.pf-com-ic svg{ width:24px; height:24px; }
.pf-beneficio{ display:block; margin-top:2px; font-style:normal; font-size:12px; font-weight:600; color:#8a5a0e; }
.pf-vazio{ grid-column:1 / -1; margin:0; font-size:14.5px; color:var(--muted); }
.pf-grupo b{ display:block; font-size:14.5px; color:var(--navy); }
.pf-grupo small{ font-size:12.5px; color:var(--muted); }
.pf-amigos{ display:flex; flex-wrap:wrap; gap:18px; }
.pf-amigo{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text-2); }
.pf-amigo .av-col{ width:58px; height:58px; font-family:'Fraunces',serif; font-size:18px; transition:transform var(--hover-t) var(--hover-curva); }
.pf-amigo:hover .av-col{ transform:translateY(-2px); }
.pf-conta{ border-radius:22px; padding:4px 20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.pf-linha{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; flex-wrap:wrap; }
.pf-linha + .pf-linha{ border-top:1px solid var(--line); }
.pf-linha > span{ flex:1; min-width:200px; }
.pf-linha b{ display:block; font-size:15px; color:var(--text); }
.pf-linha small{ font-size:13px; color:var(--muted); }
.pf-linha .seg{ margin:0; }
.pf-linha b:has(+ .pf-opcional){ display:inline; }
.pf-opcional{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted); background:var(--paper-dark); border-radius:999px; padding:2px 8px; margin-left:4px; }
.pf-linha .pf-opcional + small{ display:block; }
.pf-sair{ color:#b3261e !important; }
/* Saudação do menu (leva ao Meu perfil): no hover, um fundo de vidro que vai de lado a lado do bloco do menu (passa por
   baixo da seta de recolher) e aparece da esquerda para a direita, com a borda da frente em degradê.
   A máscara tem 2,5x a largura: parada à direita fica toda transparente; ao deslizar para a esquerda, revela o fundo. */
a.me{ color:inherit; isolation:isolate; }
a.me::before{ content:""; position:absolute; inset:-7px -7px 7px -7px; z-index:-1; border-radius:18px;
  background:linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,.7) 70%, rgba(230,242,234,.75));
  box-shadow:var(--vidro-brilho), var(--sombra-hover);
  -webkit-mask-image:linear-gradient(to right, #000 45%, transparent 55%); mask-image:linear-gradient(to right, #000 45%, transparent 55%);
  -webkit-mask-size:250% 100%; mask-size:250% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0; transition:-webkit-mask-position .5s ease, mask-position .5s ease; }
a.me:hover::before, a.me:focus-visible::before{ -webkit-mask-position:0 0; mask-position:0 0; }
/* Menu fechado (só ícones): sem a animação; o fundo só aparece em volta do avatar */
.app.mini a.me::before{ inset:-6px -6px 8px; -webkit-mask-image:none; mask-image:none; opacity:0; transition:opacity .15s ease; }
.app.mini a.me:hover::before, .app.mini a.me:focus-visible::before{ opacity:1; }

/* ===== Tela Ajuda ===== */
.aj-busca{ height:58px; max-width:720px; }
.aj-temas{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:40px; }
.aj-tema{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:20px; font:inherit; font-size:15px; font-weight:600; color:var(--navy); text-align:left;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.aj-tema:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.aj-tema .ic{ width:22px; height:22px; color:var(--green); }
.aj-tema.on{ background:var(--mint); box-shadow:0 0 0 2px var(--green), var(--vidro-sombra); }
.aj-perguntas{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.aj-pergunta{ border-radius:20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); }
.aj-pergunta summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; font-weight:600; font-size:15.5px; color:var(--navy); }
.aj-pergunta summary::-webkit-details-marker{ display:none; }
.aj-pergunta summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--green); line-height:1; }
.aj-pergunta[open] summary::after{ content:"\2212"; }
.aj-pergunta p{ margin:0; padding:0 20px 18px; font-size:15px; line-height:1.65; color:var(--text-2); }
.aj-contato{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:24px; padding:26px; border-radius:26px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.aj-contato p{ color:var(--text-2); font-size:15px; margin:6px 0 0; }
.aj-email{ font-weight:600; color:var(--green) !important; margin-top:14px !important; }
.aj-form{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.aj-form select, .aj-form textarea{ width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; }

@container (max-width:760px){
  .aj-contato{ grid-template-columns:1fr; }
  .in-convite{ grid-template-columns:1fr; }
  .in-resumo{ flex-direction:row; flex-wrap:wrap; gap:16px 28px; }
  .in-resumo div + div{ padding-top:0; border-top:none; }
  .in-passos{ grid-template-columns:1fr; }
  .aj-temas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pf-numeros{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pf-numeros a:nth-child(3){ border-left:none; }
  .pf-numeros a:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:640px){
  .in-email{ flex-direction:column; }
  .in-cartao{ padding:22px 18px; }
  .in-codigo{ font-size:32px; }
  .pf-id{ padding:0 18px; }
  .pf-nome h1{ font-size:28px; }
  .aj-temas{ grid-template-columns:1fr; }
}

/* Ajuda: conteúdo e coluna da direita com o mesmo tamanho; a coluna vira o chat do assistente de IA */
@media (min-width:1200px){ body[data-page="ajuda"] .corpo > .wrap, body[data-page="ajuda"] .aj-lateral{ flex:1 1 0; min-width:0; } }
.aj-lateral{ padding:24px; }
.aj-lateral > *{ max-width:none; }
.ajc{ position:sticky; top:24px; display:flex; flex-direction:column; height:calc(100vh - 48px); /* a altura exata é ajustada pelo ajuda.js */ border-radius:24px; overflow:hidden;
  background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.95); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.ajc-topo{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.ajc-av{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:700; font-size:14px; letter-spacing:.04em; }
.ajc-topo b{ display:block; font-family:'Fraunces',serif; font-size:18px; color:var(--navy); }
.ajc-topo small{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.ajc-topo small i{ width:8px; height:8px; border-radius:50%; background:#2fb56a; flex:none; }
.ajc-msgs{ flex:1; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px; padding:18px; scrollbar-width:thin; scrollbar-color:#cfd6dc transparent; }
.ajc-msg{ max-width:86%; padding:11px 14px; border-radius:18px; font-size:14.5px; line-height:1.55; }
.ajc-msg.ia{ align-self:flex-start; background:var(--mint); color:var(--text); border-bottom-left-radius:6px; }
.ajc-msg.eu{ align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:6px; }
.ajc-msg.eu .sig .soft{ color:#d6e6f5; } .ajc-msg.eu .sig .living{ color:#cfe9c4; }   /* sua pergunta é sempre azul: logo nas cores claras (sem depender do layout.js) */
.ajc-fonte{ display:block; margin-top:8px; font-size:12px; color:var(--green); font-weight:600; }
.ajc-msg p{ margin:0 0 8px; }
.ajc-msg p:last-of-type{ margin-bottom:0; }
.ajc-msg ul{ margin:4px 0 8px; padding-left:18px; }
.ajc-msg li{ margin:2px 0; }
.ajc-msg li.sub{ margin-left:16px; list-style:circle; }
.ajc-digitando{ display:inline-flex; gap:4px; padding:4px 2px; }
.ajc-digitando i{ width:7px; height:7px; border-radius:50%; background:var(--green); opacity:.35; animation:ajcPonto 1s infinite; }
.ajc-digitando i:nth-child(2){ animation-delay:.15s; }
.ajc-digitando i:nth-child(3){ animation-delay:.3s; }
@keyframes ajcPonto{ 50%{ opacity:1; transform:translateY(-2px); } }
.ajc-sugestoes{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px; }
.ajc-sugestoes button{ border:1px solid var(--mint-line); background:#fff; color:var(--green); border-radius:999px; padding:8px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.ajc-sugestoes button:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.ajc-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.ajc-form input{ flex:1; min-width:0; height:46px; padding:0 16px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; }
.ajc-enviar{ width:46px; height:46px; flex:none; border-radius:50%; border:none; background:var(--green); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.ajc-enviar .ic{ width:19px; height:19px; }
.ajc-enviar:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.ajc-nota{ margin:0; padding:0 18px 12px; font-size:11.5px; color:var(--muted); text-align:center; }
@media (max-width:1199px){
  .aj-lateral{ display:block; }
  .ajc{ position:static; height:600px; }
}
@media (max-width:640px){ .ajc{ height:540px; } }
/* Chat no topo da página (celular e tablet, movido pelo ajuda.js): primeiro conteúdo, antes dos temas e das perguntas */
main > .aj-lateral.aj-no-topo{ margin:0 0 32px; }
#ajTitulo{ scroll-margin-top:96px; } /* ao escolher um tema no celular, o título das perguntas não fica embaixo do topo */
@media (min-width:641px){ .aj-no-topo .ajc{ height:500px; } } /* no topo, o chat não precisa ser tão alto no tablet */
@media (max-width:640px){ main > .aj-lateral.aj-no-topo{ margin:0 0 28px; padding:16px; } }

/* ===== Atividades (Curtidas, Comentários, Acompanhar, Salvos) ===== */
.at-abas a{ display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:500; color:#5a6470; }
.at-abas a small{ font-size:11.5px; color:var(--muted); margin-left:2px; }
.at-abas a:hover{ color:var(--green); }
.at-abas a.on{ background:#fff; color:var(--navy); font-weight:600; box-shadow:0 2px 8px rgba(1,53,101,.08); }
/* Atividades: o cartão inteiro abre o conteúdo (link por baixo do botão de ação de cada aba) */
.at-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.at-acao{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:none; display:grid; place-items:center; padding:0; background:rgba(255,255,255,.92); color:#c0392b; cursor:pointer; transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.at-acao .ic{ width:18px; height:18px; fill:currentColor; }
.at-acao:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.at-card .vc-btn{ pointer-events:auto; }
.at-comentarios{ display:flex; flex-direction:column; gap:14px; }
.at-coment{ padding:18px 20px; border-radius:22px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.at-coment-alvo{ display:flex; align-items:center; gap:12px; }
.at-coment-alvo img{ width:54px; height:54px; border-radius:12px; object-fit:cover; flex:none; }
.at-coment-alvo small{ display:block; font-size:12px; color:var(--muted); }
.at-coment-alvo b{ font-family:'Fraunces',serif; font-size:16.5px; color:var(--navy); }
.at-coment-alvo:hover b{ color:var(--green); }
.at-coment blockquote{ margin:14px 0 12px; padding:12px 16px; border-radius:16px; background:var(--mint); font-size:15px; line-height:1.6; color:var(--text); }
.at-coment-meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.at-coment-meta span{ display:inline-flex; align-items:center; gap:6px; }
.at-coment-meta .ic{ width:15px; height:15px; }
.at-respostas{ margin-top:12px; padding-left:16px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.at-resp{ display:flex; gap:10px; align-items:flex-start; }
.at-resp p{ margin:0; font-size:14px; line-height:1.5; color:var(--text-2); }
.at-resp b{ display:block; color:var(--navy); font-size:14px; }
.at-av{ width:34px; height:34px; font-size:12px; border-width:2px; }
.at-sec{ font-size:22px; margin:6px 0 14px; }
.at-sec + .autores, .at-sec + .vazio{ margin-bottom:34px; }
.at-sec + .autores{ grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.at-autor{ position:relative; }
.at-deixar{ margin-left:auto; padding:7px 14px; font-size:13px; flex:none; }
.at-deixar:hover{ color:#b3261e !important; }
.at-conversas{ display:flex; flex-direction:column; gap:10px; }
.at-conversa{ display:flex; align-items:center; gap:14px; padding:10px 16px 10px 10px; border-radius:20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho); transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.at-conversa:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.at-conversa img{ width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; }
.at-conversa > span:nth-child(2){ flex:1; min-width:0; }
.at-conversa b{ display:block; font-size:15px; color:var(--navy); }
.at-conversa small{ font-size:13px; color:var(--muted); }
.at-novas{ font-size:12.5px; font-weight:600; color:#fff; background:var(--green); border-radius:999px; padding:4px 10px; white-space:nowrap; }
.at-emdia{ font-size:12.5px; color:var(--muted); white-space:nowrap; }

/* Celular: nenhum botão passa da largura da tela; textos longos quebram em duas linhas */
@media (max-width:640px){ .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.3; } }

/* ===== Telas trazidas da V1 em 2026-10-06 (Conversas e Acessibilidade) =====
   Cartões e botões seguem o efeito vidro e a regra de hover (sobem 2px, com sombra). */
.es-voltar{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--muted); margin-top:20px; }
.es-voltar .ic{ width:16px; height:16px; }
.es-voltar:hover{ color:var(--green); }
.alvo{ outline:2px solid var(--mint-line); outline-offset:4px; }

.am-seguir{ margin-top:10px; }

/* ----- Conversas ----- */
.cv{ display:grid; grid-template-columns:320px minmax(0, 1fr); gap:16px; margin-bottom:72px; height:min(640px, calc(100vh - 200px)); min-height:420px; }
.cv-lista, .cv-conversa{ border-radius:24px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); min-height:0; }
.cv-lista{ padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.cv-item{ display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:1px solid transparent; border-radius:18px; background:none; text-align:left; font:inherit; cursor:pointer;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.cv-item:hover{ transform:translateY(-2px); background:rgba(255,255,255,.85); box-shadow:var(--sombra-hover); }
.cv-item.on{ background:var(--mint); border-color:rgba(255,255,255,.9); }
.cv-item .av-col, .cv-topo .av-col{ width:46px; height:46px; font-size:15px; }
.cv-item-txt{ flex:1; min-width:0; }
.cv-item-txt b{ display:block; font-size:15px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-item-txt small{ display:block; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-novas{ flex:none; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--red); color:#fff; font-size:12px; font-weight:700; font-style:normal; display:grid; place-items:center; }
.cv-conversa{ display:flex; flex-direction:column; overflow:hidden; }
.cv-topo{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.cv-voltar{ display:none; }
.cv-msgs{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px; }
.cv-msg{ max-width:min(78%, 520px); margin:0; padding:10px 14px; border-radius:18px 18px 18px 6px; background:#fff; border:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--text); align-self:flex-start; overflow-wrap:anywhere; }
.cv-msg.eu{ align-self:flex-end; border-radius:18px 18px 6px 18px; background:var(--mint); border-color:#d3e8da; }
.cv-escrever{ display:flex; gap:10px; align-items:flex-end; padding:12px 16px 16px; border-top:1px solid var(--line); }
.cv-escrever textarea{ flex:1; min-width:0; min-height:46px; max-height:140px; resize:none; padding:12px 14px; border-radius:16px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:15px; color:var(--text); }
.cv-escrever textarea:focus{ outline:none; border-color:var(--gold); }
.cv-escolha{ margin:auto; }
@media (max-width:760px){
  .cv{ grid-template-columns:minmax(0, 1fr); height:auto; min-height:0; }
  .cv .cv-conversa{ display:none; }
  .cv.aberta .cv-lista{ display:none; }
  .cv.aberta .cv-conversa{ display:flex; height:calc(100vh - 230px); min-height:380px; }
  .cv-voltar{ display:grid; flex:none; }
  .cv-topo .btn{ padding:9px 14px; font-size:13px; }
}

/* ----- Acessibilidade: tela e o que as escolhas mudam no site (classes postas no <html> pelo layout.js) ----- */
.ac{ max-width:720px; }
.ac-bloco{ margin-bottom:26px; }
.ac-bloco h2{ font-size:24px; }
.ac-bloco p{ margin:6px 0 16px; font-size:15px; color:var(--text-2); }
.ac-letras{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.ac-letra{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-height:104px; padding:16px 10px; border-radius:20px; font:inherit; cursor:pointer; color:var(--navy);
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra);
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.ac-letra:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.ac-letra b{ font-family:'Fraunces',serif; line-height:1; }
.ac-letra span{ font-size:14px; font-weight:600; }
.ac-letra.on{ background:var(--mint); border-color:var(--mint-line); color:var(--green); }
.ac-opcoes{ margin-bottom:22px; }
.ac-chave{ position:relative; flex:none; width:54px; height:32px; border-radius:999px; border:1px solid var(--line-2); background:#e4e0d8; cursor:pointer; padding:0; transition:background-color .2s ease; }
.ac-chave i{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s ease; }
.ac-chave.on{ background:var(--green); border-color:var(--green); }
.ac-chave.on i{ transform:translateX(22px); }
html.ac-letra-1 .corpo{ zoom:1.1; }
html.ac-letra-2 .corpo{ zoom:1.22; }
html.ac-contraste{ --text:#0b0f14; --text-2:#262d36; --muted:#414a55; --line:#b9b2a5; --line-2:#8f887b; --green:#143d10; --navy:#01264a; }
html.ac-contraste .cat{ color:#143d10; }

/* ----- Encaminhar conteúdo (abrirEncaminhar no layout.js): usa a mesma janela do Compartilhar ----- */
.enc-lista{ display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; margin-bottom:14px; }
.enc-amigo{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:16px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:15px; color:var(--navy); font-weight:600; }
.enc-amigo:has(input:checked){ background:var(--mint); border-color:var(--mint-line); }
.enc-amigo input{ width:18px; height:18px; accent-color:var(--green); flex:none; }
.enc-amigo .av-col{ width:38px; height:38px; font-size:13px; border-width:2px; }
.enc-msg{ width:100%; min-height:64px; resize:vertical; padding:10px 14px; margin-bottom:14px; border-radius:14px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; color:var(--text); }
.enc-msg:focus{ outline:none; border-color:var(--gold); }
.enc-fim{ display:flex; justify-content:flex-end; gap:8px; }

/* ----- Decisões em aberto: aviso no topo das telas e a página decisoes.html (material de trabalho do protótipo) ----- */
.proto a.proto-decisoes{ margin-left:4px; }
.dc-aviso{ margin:0 0 24px; border-radius:16px; border:1px dashed #d9b866; background:rgba(253,246,227,.8); color:#6b4f0f; font-size:14px; }
.page-head + .dc-aviso{ margin-top:-6px; }
.dc-aviso summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; cursor:pointer; list-style:none; }
.dc-aviso summary::-webkit-details-marker{ display:none; }
.dc-aviso summary span{ font-size:13px; font-weight:600; text-decoration:underline; }
.dc-aviso[open] summary span{ visibility:hidden; }
.dc-aviso ul{ margin:0; padding:0 16px 4px 34px; }
.dc-aviso li{ margin-bottom:8px; line-height:1.45; }
.dc-aviso li a{ color:#6b4f0f; font-weight:600; text-decoration:underline; }
.dc-aviso li small{ display:block; font-size:13px; color:#1f5c3d; }
.dc-aviso li.feita a{ font-weight:500; }
.dc-aviso-todas{ display:inline-block; margin:0 16px 12px; font-size:13px; font-weight:600; color:#6b4f0f; text-decoration:underline; }
.dc-resumo{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; padding:20px 24px; margin-bottom:26px; border-radius:24px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.dc-conta b{ font-family:'Fraunces',serif; font-size:40px; line-height:1; color:var(--navy); margin-right:8px; }
.dc-conta span{ font-size:15px; color:var(--text-2); }
.dc-barra{ flex:1; min-width:160px; height:10px; border-radius:999px; background:var(--paper-dark); overflow:hidden; }
.dc-barra i{ display:block; height:100%; border-radius:999px; background:var(--green-2); transition:width .3s ease; }
.dc-acoes{ display:flex; flex-wrap:wrap; gap:8px; }
.dc-tema{ margin-bottom:34px; }
.dc-tema > h2{ font-size:26px; margin-bottom:14px; }
.dc-card{ padding:22px 24px; margin-bottom:14px; border-radius:24px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); scroll-margin-top:90px; }
.dc-card.feita{ background:rgba(241,248,243,.8); }
.dc-card-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.dc-estado{ font-size:12px; font-weight:700; border-radius:999px; padding:4px 10px; background:var(--gold-bg); color:var(--gold); }
.dc-card.feita .dc-estado{ background:#e3f2ea; color:#1f5c3d; }
.dc-card h3{ font-size:21px; line-height:1.3; margin-bottom:14px; }
.dc-como{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px; }
.dc-como div{ padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.7); border:1px solid var(--line); }
.dc-como dt{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.dc-como dd{ margin:0; font-size:14.5px; line-height:1.5; color:var(--text-2); }
.dc-opcoes{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dc-opcao{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid var(--line-2); background:#fff; cursor:pointer; font-size:15px; line-height:1.45; color:var(--text);
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), border-color var(--hover-t) var(--hover-curva); }
.dc-opcao:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); border-color:var(--navy); }
.dc-opcao.on{ background:var(--mint); border-color:var(--green-2); font-weight:600; }
.dc-opcao input{ width:18px; height:18px; margin-top:2px; accent-color:var(--green); flex:none; }
.dc-opcao em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--gold); background:var(--gold-bg); border-radius:999px; padding:2px 8px; margin-left:4px; white-space:nowrap; }
.dc-obs{ width:100%; resize:vertical; padding:10px 14px; border-radius:14px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; color:var(--text); }
.dc-obs:focus{ outline:none; border-color:var(--gold); }
.dc-card-fim{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; }
.dc-tomadas h2{ font-size:26px; margin-bottom:12px; }
.dc-tomadas ul{ margin:0; padding-left:20px; }
.dc-tomadas li{ margin-bottom:8px; font-size:15.5px; line-height:1.55; color:var(--text-2); }
@media (max-width:640px){
  .dc-como{ grid-template-columns:1fr; }
  .dc-card{ padding:18px 16px; }
  .dc-card h3{ font-size:19px; }
  .dc-acoes{ width:100%; } .dc-acoes .btn{ flex:1; justify-content:center; }
}

/* ===== SAÍDA LENTA DO HOVER =====
   Entrar no hover é rápido (0,15s); sair é lento (0,6s, desacelerando): o cartão continua descendo devagar mesmo com o
   mouse já fora. Funciona porque o elemento sem hover recebe a duração lenta, e o que está com hover (e os que estão em
   volta dele) herdam a rápida do :root. As transições de hover usam var(--hover-t) e var(--hover-curva). */
:root{ --hover-t:.15s; --hover-curva:ease; }
*:not(:hover){ --hover-t:.6s; --hover-curva:cubic-bezier(.22, .61, .36, 1); }

/* ===== REGRA DE HOVER (igual à versão 1) =====
   Todo botão e toda caixa clicável sobe 2px e ganha sombra ao passar o mouse.
   Ao criar um botão ou caixa clicável novo, acrescente o seletor nas duas listas abaixo.
   Exceções: abas do fichário (se subissem, desgrudariam do painel) e itens do menu lateral e da barra do celular.
   Conteúdos com foto sem moldura (.destaque, .item): no hover ganham uma caixa branca em volta (foto + texto), além de subir e ganhar sombra.
   Cartões verticais (.vcard) já são uma caixa: só sobem e ganham sombra.
   Para a caixa não desalinhar o conteúdo, eles têm padding com margem negativa do mesmo tamanho. */
.destaque{ display:block; padding:20px; margin:-20px; border-radius:26px; }
.destaque:hover, .item:hover{ background:#fff; }
.btn, .round, .collapse, .vcard, .fav, .destaque, .item, .press, .colunista, .autor, .cd-sug, .bs-chip, .bs-assunto{
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva), border-color var(--hover-t) var(--hover-curva), color var(--hover-t) var(--hover-curva);
}
.btn:hover, .round:hover, .collapse:hover, .fav:hover, .item:hover, .press:hover, .colunista:hover, .autor:hover, .cd-sug:hover, .bs-chip:hover, .bs-assunto:hover,
.vcard:hover, .destaque:hover{ transform:translateY(-2px); }
.btn:hover, .round:hover, .collapse:hover, .fav:hover, .item:hover, .press:hover,
.destaque:hover{ box-shadow:var(--sombra-hover); }
.vcard:hover{ box-shadow:0 16px 36px rgba(1,53,101,.16); }
/* No celular os cartões de assunto rolam para o lado: sem margem negativa, para não encostarem uns nos outros */
@media (max-width:640px){ .destaque{ padding:12px; margin:-12px; } } /* margem menor que a da página (16px) */

/* ===== EFEITO VIDRO (visual padrão da versão 2, aprovado em 2026-09-26) =====
   Botões e boxes translúcidos: fundo semitransparente, desfoque do que está atrás, brilho na borda de cima,
   sombra interna embaixo e sombra suave por fora. Fica no fim do arquivo para valer sobre os estilos de cada tela.
   Ao criar um botão ou box novo, acrescente-o nas listas abaixo (vidro claro, verde ou colorido). */
:root{
  --vidro-claro:rgba(255,255,255,.42);
  --vidro-borda:rgba(255,255,255,.85);
  --vidro-brilho:inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(1,53,101,.06);
  --vidro-sombra:0 8px 24px rgba(1,53,101,.08);
  --vidro-desfoque:blur(16px) saturate(1.6);
}
/* Fundo com manchas suaves de cor, para o vidro ter o que desfocar */
body{ background:
  radial-gradient(40vw 40vw at 8% 12%, rgba(159,208,176,.35), transparent 70%),
  radial-gradient(36vw 36vw at 92% 30%, rgba(241,216,152,.30), transparent 70%),
  radial-gradient(44vw 44vw at 40% 85%, rgba(1,53,101,.08), transparent 70%),
  var(--paper); background-attachment:fixed; }

/* Botões claros e caixas brancas: vidro claro */
:root .btn.ghost, :root .btn.white, :root .round, :root .collapse,
:root .caixa-branca, :root .plan:not(.featured):not(.vip), :root .step, :root .panel.off, :root .quote,
:root .band.white, :root .press, :root .rodape, :root .icon-cards .feat,
:root .feats.em-cartoes .feat, :root .side{
  background:var(--vidro-claro); border:1px solid var(--vidro-borda);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-brilho), var(--vidro-sombra);
}
:root .caixa-branca .panel.off, :root .caixa-branca .band.white, :root .caixa-branca .feats.em-cartoes .feat{ background:rgba(255,255,255,.35); }
:root .rodape{ border-width:1px 0 0; box-shadow:var(--vidro-brilho); }

/* Botão verde: vidro verde */
:root .btn:not(.ghost):not(.white):not(.simples):not(.creditos):not(.cta-dourado){
  background:rgba(31,85,25,.78); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.18), 0 6px 18px rgba(31,85,25,.22);
}
:root .btn:not(.ghost):not(.white):not(.simples):not(.creditos):not(.cta-dourado):hover{ background:rgba(23,67,19,.86); }
/* Modo simples e créditos: vidro colorido */
:root .btn.simples{ background:rgba(230,242,234,.55); border-color:rgba(255,255,255,.85); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
:root .btn.creditos{ background:rgba(253,241,220,.6); border-color:rgba(255,255,255,.85); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }

/* Boxes coloridos: mantêm a cor, com transparência e brilho */
:root .plan.featured{ background:rgba(31,85,25,.82); border-color:rgba(255,255,255,.3); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 18px 40px rgba(31,85,25,.22); }
:root .plan.vip, :root .seal{ background:rgba(241,216,152,.55); border-color:rgba(255,255,255,.8); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), 0 18px 40px rgba(170,125,30,.12); }
:root .panel.on, :root .band:not(.white), :root .wallet{ background:rgba(230,242,234,.6); border:1px solid rgba(255,255,255,.85); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
:root .news, :root .photo-band{ background:rgba(1,53,101,.86); border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:inset 0 1px 1px rgba(255,255,255,.25), 0 18px 40px rgba(1,53,101,.18); }

/* Caixa do hover dos conteúdos: vidro em vez de branco */
:root .destaque:hover, :root .item:hover{
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-brilho), var(--sombra-hover);
}
/* Hover dos botões: mantém o brilho do vidro junto com a sombra da regra de hover */
:root .btn:hover, :root .round:hover, :root .collapse:hover{ box-shadow:var(--vidro-brilho), var(--sombra-hover); }

/* Sobre as fotos: selos, salvar, nome do grupo e play em vidro */
:root .fav, :root .video .play, :root .vcard .new{
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10px) saturate(1.6); backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.08);
}
:root .video{ background:rgba(230,242,234,.5); border-color:rgba(255,255,255,.85); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }

/* Botão branco sobre o cartão verde: mais opaco para o texto verde continuar legível */
:root .plan.featured .btn.white{ background:rgba(255,255,255,.88); }

/* Salvo: fundo branco firme e bandeirinha preta (o vidro deixaria o ícone sumir) */
:root .fav.on{ background:rgba(255,255,255,.95); color:var(--text); border-color:var(--line); }
/* Na lista e no destaque (sobre a caixa branca): salvo = só a bandeirinha preta, sem círculo */
:root .item .fav.on, :root .destaque .fav.on{ background:none; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
:root .item .fav.on .ic, :root .destaque .fav.on .ic{ width:14px; height:14px; }
/* Botão salvar sobre a caixa branca da lista: verde claro, para aparecer sobre o branco */
:root .item .fav:not(.on){ background:var(--mint); border-color:#d3e8da; color:var(--green); }

/* Dica do menu recolhido: nome do item numa caixa de vidro, ao lado do ícone (posição definida no layout.js) */
.dica{ position:fixed; z-index:95; transform:translate(-4px, -50%); opacity:0; pointer-events:none; white-space:nowrap;
  padding:8px 14px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--navy);
  background:rgba(255,255,255,.55); border:1px solid var(--vidro-borda);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-brilho), var(--vidro-sombra); transition:opacity .15s ease, transform .15s ease; }
.dica.show{ opacity:1; transform:translate(0, -50%); }
.dica.a-esquerda{ transform:translate(calc(-100% + 4px), -50%); }
.dica.a-esquerda.show{ transform:translate(-100%, -50%); }

/* Celular e tablet: menu aberto como gaveta em vidro bem transparente e muito embaçado, e véu claro sobre a página */
@media (max-width:980px){
  :root .side{ background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
    border-color:rgba(255,255,255,.9); box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 20px 60px rgba(1,53,101,.16); }
  .scrim{ background:rgba(250,248,244,.12); } /* véu leve: não apaga o que aparece através do menu */
}

/* Barra do celular */
:root .tabbar{ background:rgba(255,255,255,.5); border-color:var(--vidro-borda); box-shadow:var(--vidro-brilho), var(--shadow); }

/* ===== CARROSSEL (ativarCarrossel no layout.js) =====
   Blocos de conteúdos menores só se movem pelas setas (cada clique desliza um item, suave, em loop); sem rolagem pela roda do mouse.
   Horizontal: --vis itens por vez, setas nas laterais. Vertical: altura de 4 itens, setas em cima e embaixo.
   O padding com margem negativa deixa espaço para a sombra e a subida dos cartões no hover. */
.carrossel{ position:relative; }
.trilho-h{ display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; --gap:22px; gap:var(--gap) !important;
  grid-auto-columns:calc((100% - (var(--vis, 4) - 1) * var(--gap)) / var(--vis, 4));
  overflow:hidden;
  padding:14px !important; margin:-14px !important; }
.trilho-h > *{ min-width:0; }
/* Lados: cabem a caixa branca do hover (16px) e a sombra (24px). À direita, 40px só com a coluna da direita ao lado
   (a partir de 1200px); abaixo disso, até a borda da página (24px; 16px no celular), para não criar rolagem para o lado. */
.trilho-v{ position:relative; overflow:hidden;
  padding:8px 24px 8px 40px; margin:-8px -24px -8px -40px; }
@media (min-width:1200px){ .trilho-v{ padding-right:40px; margin-right:-40px; } }
@media (max-width:640px){ .trilho-v{ padding:8px 16px; margin:-8px -16px; } }
.trilho-v > *{ flex:none; }
.trilho-h::-webkit-scrollbar, .trilho-v::-webkit-scrollbar{ display:none; }
.cards.trilho-h{ --vis:4; }
.groups.trilho-h{ --vis:3; --gap:14px; }
.cd-sug-lista.trilho-h{ --vis:4; --gap:16px; }

/* Setas */
.car-btn{ position:absolute; z-index:4; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding:0; color:var(--navy);
  background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.95); box-shadow:var(--vidro-brilho), 0 6px 18px rgba(1,53,101,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:opacity .15s ease, box-shadow .15s ease, background-color .15s ease; }
.car-btn .ic{ width:18px; height:18px; }
.car-btn:hover{ background:#fff; box-shadow:var(--vidro-brilho), var(--sombra-hover); }
.carrossel.sem-rolagem .car-btn{ display:none; }
/* Com mouse (computador): sobre o carrossel, só a seta do lado de onde o mouse está acende, aos poucos, conforme o
   mouse se aproxima dela (--perto, de 0 a 1, calculado no ativarCarrossel do layout.js); a outra fica apagada. Ao sair
   do carrossel, apaga devagar. Navegando com o teclado, as duas aparecem inteiras. No celular e no tablet, sem mouse,
   ficam sempre à vista. */
@media (hover:hover){
  .carrossel .car-btn{ opacity:0; pointer-events:none; transition:opacity .6s cubic-bezier(.22, .61, .36, 1), background-color .15s ease, box-shadow .15s ease; }
  .carrossel:hover .car-btn{ opacity:var(--perto, 0); pointer-events:auto; transition:opacity .2s linear, background-color .15s ease, box-shadow .15s ease; }
  .carrossel:hover .car-btn:hover, .carrossel:has(:focus-visible) .car-btn{ opacity:1; pointer-events:auto; }   /* foco só do teclado (clicar na seta não acende as duas) */
}
.carrossel-h .car-btn{ top:50%; transform:translateY(-50%); }
.carrossel-h .car-ant{ left:-20px; }
.carrossel-h .car-prox{ right:-20px; }
.carrossel-h .car-prox .ic{ transform:rotate(180deg); }
.carrossel-v .car-btn{ left:50%; transform:translateX(-50%); }
.carrossel-v .car-ant{ top:-24px; }
.carrossel-v .car-prox{ bottom:-24px; }
.carrossel-v .car-ant .ic{ transform:rotate(90deg); }
.carrossel-v .car-prox .ic{ transform:rotate(-90deg); }

/* Coluna do conteúdo estreita: menos itens por vez. As capas de artigo seguem o tamanho dos cartões de grupo
   (3 por vez, cerca de 230 a 330px de largura); só abaixo de 720px passam a 2 por vez */
@container (max-width:1000px){ .cards.trilho-h{ --vis:3; } .cd-sug-lista.trilho-h{ --vis:3; } }
@container (max-width:720px){ .cards.trilho-h{ --vis:2; } }
/* Celular: mostram um pedaço do próximo item; as setas continuam (única forma de mover) */
@media (max-width:640px){
  .cards.trilho-h{ --vis:1.25; --gap:14px; }
  .groups.trilho-h{ --vis:1.4; }
  .cd-sug-lista.trilho-h{ --vis:1.7; }
  .carrossel-h .car-ant{ left:-6px; }
  .carrossel-h .car-prox{ right:-6px; }
}
@media (min-width:481px) and (max-width:640px){ .cards.trilho-h, .groups.trilho-h{ --vis:2.2; } } /* celular deitado: capa do tamanho padrão */

/* ===== Tela Notificações ===== */
.nt-barra{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.nt-barra .btn:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none; }
.nt-grupo{ margin:8px 0 32px; }
.nt-grupo h2, .nt-pref h2{ font-size:22px; margin-bottom:14px; }
.nt-grupo h2 small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--muted); margin-left:4px; }
.nt-lista{ display:flex; flex-direction:column; gap:10px; }
.nt-item{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px 48px 16px 16px; border-radius:20px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.nt-item.nova{ background:rgba(230,242,234,.75); }
.nt-av{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; }
.nt-av-ic{ background:var(--mint); color:var(--green); }
.nt-av-ic .ic{ width:20px; height:20px; }
.nt-txt p{ margin:2px 0 10px; font-size:15px; line-height:1.5; color:var(--text); }
.nt-txt b{ color:var(--navy); }
.nt-acao{ padding:7px 14px; font-size:13px; }
.nt-marcar{ position:absolute; top:14px; right:12px; width:28px; height:28px; border:none; background:none; border-radius:50%; display:grid; place-items:center; padding:0; }
.nt-marcar i{ width:10px; height:10px; border-radius:50%; background:var(--green); }
.nt-marcar:hover{ background:rgba(1,53,101,.08); }
.nt-vazio{ display:flex; align-items:center; gap:12px; padding:22px; border-radius:20px; margin-bottom:32px; color:var(--text-2); }
.nt-vazio p{ margin:0; }
.nt-pref{ padding:24px; border-radius:24px; margin-bottom:36px; }
.nt-pref > p{ margin:-6px 0 12px; color:var(--text-2); font-size:14.5px; }
.nt-pref-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); cursor:pointer; font-size:15px; }
.nt-chave{ position:absolute; opacity:0; pointer-events:none; }
.nt-pref-item i{ position:relative; width:44px; height:26px; border-radius:999px; background:var(--line-2); flex:none; transition:background-color .15s ease; }
.nt-pref-item i::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--hover-t) var(--hover-curva); }
.nt-chave:checked + i{ background:var(--green); }
.nt-chave:checked + i::after{ transform:translateX(18px); }
.nt-chave:focus-visible + i{ outline:2px solid var(--navy); outline-offset:2px; }
/* regra de hover: caixas de notificação sobem 2px com sombra */
.nt-item{ transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.nt-item:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); }
@media (max-width:640px){ .nt-barra .btn{ width:100%; justify-content:center; margin-bottom:16px; } }

/* ===== Janela do sino (notificações resumidas, no topo de todas as páginas) ===== */
.top{ position:relative; z-index:45; } /* as janelas do topo (sino, créditos, conta, entrar, saiba mais) ficam por cima de todo o conteúdo, inclusive da faixa de boxes de Minhas Comunidades (40); abaixo só da faixa de protótipo (50) */
.tools{ position:relative; }
.janela-topo, .nt-janela{ position:absolute; top:calc(100% + 12px); right:0; z-index:60; width:380px; max-width:calc(100vw - 32px); border-radius:22px; overflow:hidden;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), 0 18px 44px rgba(1,53,101,.16);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); animation:ntj-abre .16s ease; }
/* janela dos créditos usa a mesma base (vidro, sombra, animação de abrir) */
.cr-janela{ width:320px; }
@keyframes ntj-abre{ from{ opacity:0; transform:translateY(-6px); } }
.ntj-topo{ display:flex; align-items:center; gap:8px; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.ntj-topo b{ font-family:'Fraunces',serif; font-size:19px; color:var(--navy); }
.ntj-conta{ white-space:nowrap; font-size:12px; font-weight:600; color:var(--green); background:var(--mint); border-radius:999px; padding:3px 9px; }
.ntj-ler{ margin-left:auto; border:none; background:none; padding:0; font-size:12.5px; font-weight:600; color:var(--green); white-space:nowrap; }
.ntj-ler:hover{ text-decoration:underline; }
.ntj-ler:disabled{ color:var(--muted); text-decoration:none; cursor:default; }
.ntj-lista{ display:flex; flex-direction:column; padding:6px; max-height:min(360px, calc(100vh - 220px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#cfd6dc transparent; } /* todas as notificações, com rolagem */
.ntj-lista::-webkit-scrollbar{ width:6px; }
.ntj-lista::-webkit-scrollbar-thumb{ background:#cfd6dc; border-radius:999px; }
.ntj-item{ position:relative; display:flex; align-items:center; gap:12px; padding:10px 30px 10px 12px; border-radius:14px; font-size:14px; line-height:1.4; color:var(--text); text-decoration:none; }
.ntj-item b{ color:var(--navy); }
.ntj-item.nova{ background:rgba(230,242,234,.7); }
.ntj-item + .ntj-item{ margin-top:2px; }
.ntj-item:hover{ background:#fff; }
.ntj-item .nt-av{ width:38px; height:38px; font-size:12.5px; }
.ntj-item .nt-av-ic .ic{ width:17px; height:17px; }
.ntj-item i{ position:absolute; right:12px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--green); }
.ntj-todas{ display:block; text-align:center; padding:13px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--green); }
.ntj-todas:hover{ background:rgba(255,255,255,.7); }
.sino[aria-expanded="true"]{ background:#fff; border-color:var(--mint-line); }
@media (max-width:640px){ .janela-topo, .nt-janela{ position:absolute; width:auto; max-width:none; } } /* presa ao topo: some junto com ele ao rolar; posição e largura da tela vêm do layout.js */
/* Janela de entrada (botão Entrar) */
.en-janela{ width:360px; max-height:calc(100vh - 110px); overflow-y:auto; }
.enj-topo{ padding:20px 22px 6px; }
.enj-topo b{ font-family:'Fraunces',serif; font-size:22px; color:var(--navy); }
.enj-topo p{ margin:4px 0 0; font-size:14px; color:var(--text-2); }
.enj-social{ display:flex; flex-direction:column; gap:8px; padding:14px 22px 4px; }
.enj-social-bt{ display:flex; align-items:center; justify-content:center; gap:10px; height:44px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; font-weight:600; color:var(--text);
  cursor:pointer; transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.enj-social-bt svg{ width:19px; height:19px; flex:none; }
.enj-social-bt:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.enj-ou{ display:flex; align-items:center; gap:10px; margin:14px 22px 10px; font-size:12.5px; color:var(--muted); }
.enj-ou::before, .enj-ou::after{ content:""; flex:1; height:1px; background:var(--line); }
.enj-form{ display:flex; flex-direction:column; gap:12px; padding:0 22px; }
.enj-form > label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--text); }
.enj-form input[type="email"], .enj-form input[type="password"], .enj-form input[type="text"]{ height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:14.5px; font-weight:400; }
.enj-senha{ position:relative; display:flex; }
.enj-senha input{ flex:1; min-width:0; padding-right:80px !important; }
.enj-ver{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--green); padding:6px 8px; cursor:pointer; }
.enj-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.enj-lembrar{ display:inline-flex; align-items:center; gap:6px; color:var(--text-2); }
.enj-esqueci, .enj-criar{ color:var(--green); font-weight:600; }
.enj-esqueci:hover, .enj-criar:hover{ text-decoration:underline; }
.enj-entrar{ width:100%; justify-content:center; height:46px; }
.enj-cadastro{ margin:14px 0 0; padding:14px 22px 18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text-2); text-align:center; }
.enj-dica{ margin:0; padding:9px 12px; border-radius:12px; background:#fdf6e3; border:1px solid #f0ddac; font-size:13px; color:#7a5c12; }
.enj-erro{ margin:0; font-size:13px; font-weight:600; color:#b3261e; }
/* Avatar do usuário logado, no lugar do Entrar, e a janela da conta */
.tools .round.avatar-topo{ width:44px; height:44px; background:var(--green); border-color:var(--green); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }
.tools .round.avatar-topo:hover{ background:var(--green-dark); }
.avatar-topo[aria-expanded="true"]{ box-shadow:0 0 0 3px rgba(31,85,25,.2); }
.cn-janela{ width:290px; }
.cnj-topo{ display:flex; align-items:center; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.cnj-av{ display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:700; }
.cnj-topo b{ display:block; font-family:'Fraunces',serif; font-size:17px; color:var(--navy); }
.cnj-topo small{ font-size:12.5px; color:var(--muted); }
.cn-janela .crj-links{ padding:8px 6px; }
.cnj-sair{ display:block; width:100%; padding:14px 20px; border:none; border-top:1px solid var(--line); background:none; font:inherit; font-size:14px; font-weight:600; color:#b3261e; text-align:left; cursor:pointer; }
.cnj-sair:hover{ background:rgba(255,255,255,.7); }
.entrar[aria-expanded="true"]{ box-shadow:0 0 0 3px rgba(31,85,25,.18); }
.creditos[aria-expanded="true"]{ background:#fbe8c6; border-color:#e9cf93; }

/* Janela dos créditos */
.crj-saldo{ padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.crj-saldo small{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.crj-saldo p{ margin:4px 0 8px; font-size:15px; color:var(--text-2); }
.crj-saldo p b{ font-family:'Fraunces',serif; font-size:38px; line-height:1; color:var(--green); margin-right:4px; }
.crj-partes{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-2); }
.crj-partes span{ display:inline-flex; align-items:center; gap:7px; }
.crj-oferta{ margin:12px; padding:14px 16px; border-radius:16px; background:#fdf1dc; border:1px solid #f0ddac; }
.crj-oferta span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8a5a0e; }
.crj-oferta span .ic{ width:15px; height:15px; }
.crj-oferta p{ margin:6px 0 12px; font-size:14.5px; line-height:1.45; color:#5c3c08; }
.crj-oferta .btn{ width:100%; justify-content:center; }
.crj-links{ display:flex; flex-direction:column; padding:0 6px 8px; }
.crj-links a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; font-size:14px; font-weight:600; color:var(--navy); }
.crj-links a .ic{ width:17px; height:17px; color:var(--green); }
.crj-links a:hover{ background:#fff; }

/* ===== CELULAR (revisão geral de responsividade, 2026-09-28) =====
   Fica no fim do arquivo para valer sobre as regras de cada tela. */
/* Carrosséis horizontais: no celular e em telas de toque, deslizam com o dedo (sem setas e sem as cópias do loop).
   Os verticais continuam carrossel com as setas de subir e descer, como no computador (deslizar na vertical com o dedo
   brigaria com a rolagem da página) */
@media (max-width:640px), (hover:none) and (pointer:coarse){
  .carrossel-h .car-btn{ display:none !important; }
  .trilho-h{ overflow-x:auto !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .trilho-h > *{ scroll-snap-align:start; }
  .trilho-h > .copia{ display:none !important; }
}
/* Celular: itens das listas verticais (Últimas matérias e Colunas) com a mesma altura, para o carrossel mostrar sempre
   4 itens inteiros: título em até 2 linhas, categoria e autor em 1 linha */
@media (max-width:640px){
  .list .item h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .list .item .cat, .list .item .meta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .list .item > div{ min-width:0; padding-right:40px; } /* espaço para o botão salvar */
}
@media (max-width:640px){
  /* texto justificado abre buracos em coluna estreita */
  .hero p, .inst-hero .lead{ text-align:left; }
  /* Indicações: campo de e-mail com altura própria quando empilha */
  .in-email input{ flex:none; width:100%; }
  .in-email .in-bt{ justify-content:center; }
  /* Acompanhar: botão embaixo do nome do colunista */
  .at-autor{ flex-wrap:wrap; }
  .at-autor .autor-txt{ flex:1 1 calc(100% - 70px); min-width:0; }
  .at-deixar{ margin-left:0; width:100%; justify-content:center; }
  /* respiro nas bordas e nada passa da tela */
  img, video{ max-width:100%; }
}
/* Celulares pequenos (320px): a coluna lateral, que desce para baixo do conteúdo, cabe na largura */
@media (max-width:640px){
  .lateral{ margin:0 16px 48px; padding:16px; grid-template-columns:minmax(0, 1fr); }
}
/* Curtidas, Salvos e Grupos no celular: modo lista (foto pequena à esquerda e texto ao lado, como os cartões das coleções
   da Vitrine), em vez da capa grande */
@media (max-width:640px){
  .grade:has(.at-card, .vcard-grupo){ gap:12px; }
  .vcard.at-card, .grade .vcard-grupo{ aspect-ratio:auto; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:14px; align-items:center;
    padding:12px; border-radius:22px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
  .vcard.at-card:hover, .grade .vcard-grupo:hover{ background:#fff; }
  .vcard.at-card > img, .grade .vcard-grupo > img{ position:static; width:96px; height:100%; min-height:104px; border-radius:16px; z-index:auto; }
  .vcard.at-card:hover > img, .grade .vcard-grupo:hover > img{ transform:none; }
  .vcard.at-card .vc-blur, .grade .vcard-grupo .vc-blur{ display:none; }
  .vcard.at-card .vc-info, .grade .vcard-grupo .vc-info{ position:static; padding:0; color:var(--text); }
  .vcard.at-card .vc-cat, .grade .vcard-grupo .vc-cat{ color:var(--green); opacity:1; padding-right:34px; }
  .vcard.at-card .vc-info h3, .grade .vcard-grupo .vc-info h3{ color:var(--navy); text-shadow:none; font-size:17px; margin:4px 0 4px; padding-right:34px; }
  .vcard.at-card .vc-autor{ color:var(--text-2); opacity:1; margin:0 0 10px; font-size:12.5px; }
  .grade .vcard-grupo .vc-desc{ color:var(--text-2); opacity:1; margin:0 0 10px; -webkit-line-clamp:2; }
  .vcard.at-card .vc-row, .grade .vcard-grupo .vc-row{ flex-wrap:wrap; gap:8px; } /* 320px: o botão desce se não couber */
  .vcard.at-card .vc-chip, .grade .vcard-grupo .vc-chip{ color:var(--text-2); }
  .vcard.at-card .vc-chip.premium{ color:#8a5a0e; }
  .vcard.at-card .vc-btn, .grade .vcard-grupo .vc-btn{ padding:7px 13px; font-size:13px; border:1px solid var(--line); box-shadow:none; }
  .grade .vcard-grupo .vc-sair{ color:var(--navy); background:rgba(1,53,101,.05); border-color:var(--line); padding:7px 12px; }
  .vcard.at-card .at-acao, .vcard.at-card .fav{ top:10px; right:10px; width:32px; height:32px; }
  /* selos do grupo (Grátis/Premium e novas) sobre a foto pequena, um embaixo do outro */
  .grade .vcard-grupo .vc-topo{ top:18px; left:18px; flex-direction:column; align-items:flex-start; gap:4px; }
  .grade .vcard-grupo .selo-vc{ font-size:10.5px; padding:3px 8px; }
}
/* Botão "Saiba mais" do topo: só no celular (no computador e no tablet os institucionais ficam no menu do topo, quando
   cabem, e no rodapé) */
.saiba-mais{ display:none; align-items:center; gap:4px; height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font:inherit; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; white-space:nowrap;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.saiba-mais .chev{ width:15px; height:15px; transition:transform var(--hover-t) var(--hover-curva); }
.saiba-mais:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.saiba-mais[aria-expanded="true"] .chev{ transform:rotate(180deg); }
@media (max-width:640px){ .saiba-mais{ display:inline-flex; } }
/* Celular: topo compacto para caber menu, logo, Saiba mais, busca e sino */
@media (max-width:640px){
  .top{ padding:10px 12px; gap:6px; }
  .top .brand{ font-size:22px; }
  .tools{ gap:6px; }
  .top .round{ width:36px; height:36px; }
  .tools .round.avatar-topo{ width:36px; height:36px; font-size:12.5px; }
  .saiba-mais{ height:36px; padding:0 9px 0 11px; font-size:13px; }
  .janela-topo, .nt-janela, .sm-janela, .cr-janela, .en-janela, .cn-janela{ width:auto; }
}
/* Celulares muito estreitos: a busca sai do topo (continua no menu, em Busca) */
@media (max-width:359px){ .saiba-mais .chev{ display:none; } }
.sm-janela{ width:320px; }
.smj-topo{ padding:16px 20px 12px; border-bottom:1px solid var(--line); }
.smj-topo b{ font-family:'Fraunces',serif; font-size:18px; color:var(--navy); }
.smj-links{ display:flex; flex-direction:column; padding:6px; }
.smj-links a{ display:block; padding:10px 14px; border-radius:12px; }
.smj-links a b{ display:block; font-size:15px; color:var(--navy); }
.smj-links a small{ font-size:12.5px; color:var(--muted); }
.smj-links a:hover, .smj-links a.on{ background:#fff; }
.smj-links a.on b{ color:var(--green); }
@media (max-width:640px){ .sm-janela{ width:auto; } }          /* janela do Saiba mais na largura da tela */
@media (min-width:641px) and (max-width:820px){ .tools > .btn.creditos{ display:none; } } /* tablet estreito: saldo fica no menu (Sua carteira) */
/* Celular: o botão Entrar também aparece no topo. Sem conta, o sino sai (não há notificações); logado, voltam sino e
   avatar. No celular (até 640px) a lupa sai do topo (a Busca continua no menu). */
@media (max-width:640px){
  .tools .btn.entrar:not([hidden]){ display:inline-flex; height:36px; padding:0 14px; font-size:13px; }
  body:not(.logado) .tools .sino{ display:none; }
}
@media (max-width:374px){                                   /* celulares estreitos: logo e Saiba mais um pouco menores */
  .top{ gap:4px; padding:10px 10px; }
  .tools{ gap:4px; }
  .top .brand{ font-size:20px; }
  .saiba-mais{ padding:0 8px; font-size:12.5px; }
  .saiba-mais .chev{ display:none; }
  .tools .btn.entrar:not([hidden]){ padding:0 11px; }
}
@media (max-width:640px){ .janela-topo{ max-height:calc(100vh - 190px); overflow-y:auto; } } /* acima da barra inferior do celular */
/* Topo do celular com o botão Modo simples (só ícone): até 400px o Saiba mais fica sem a setinha e os espaços diminuem;
   até 374px os botões redondos ficam com 32px, para caber logado (menu, logo, Saiba mais, Modo simples, sino e avatar) */
@media (max-width:400px){
  .top{ gap:4px; padding-left:10px; padding-right:10px; }
  .tools{ gap:4px; }
  .top .brand{ font-size:20px; }
  .saiba-mais{ padding:0 10px; }
  .saiba-mais .chev{ display:none; }
}
@media (max-width:374px){
  .top .brand{ font-size:18px; }
  .top .round, .tools .round.avatar-topo, .tools > .btn.simples{ width:32px; height:32px; }
  .tools > .btn.simples .ic{ width:16px; height:16px; }
  .saiba-mais{ height:32px; padding:0 8px; font-size:12px; }
  .tools .btn.entrar:not([hidden]){ height:32px; padding:0 10px; font-size:12.5px; }
}
@media (max-width:340px){ .top{ gap:3px; padding-left:8px; padding-right:8px; } .tools{ gap:3px; } .saiba-mais{ padding:0 7px; font-size:11.5px; } .top .brand{ font-size:17px; } }
/* Aviso de protótipo no topo da coluna da direita */
.lat-aviso{ padding:12px 14px; border-radius:16px; background:#fdf6e3; border:1px dashed #e3c77f; color:#7a5c12; }
.lat-aviso b{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#c98a2e; border-radius:999px; padding:2px 9px; margin-bottom:6px; }
.lat-aviso p{ margin:0; font-size:13px; line-height:1.5; }
/* Grupos: grupo destacado ao chegar por um link (a página interna do grupo ainda está em construção) */
.vcard.destacado{ box-shadow:0 0 0 4px var(--green), 0 16px 36px rgba(1,53,101,.2); }

/* ===== Janela de compartilhar (abrirCompartilhar no layout.js) ===== */
.comp-fundo{ position:fixed; inset:0; z-index:115; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,18,28,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.comp-fundo[hidden]{ display:none !important; }
body.comp-aberta{ overflow:hidden; }
.comp-caixa{ position:relative; width:min(460px, 100%); padding:26px 26px 22px; border-radius:26px; background:#fffefb; box-shadow:0 24px 60px rgba(1,53,101,.25); animation:comp-abre .18s ease; }
@keyframes comp-abre{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.comp-fechar{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:14px; cursor:pointer;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva); }
.comp-fechar:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); color:var(--navy); }
.comp-caixa h2{ font-size:24px; margin:0 0 4px; }
.comp-o-que{ margin:0 44px 18px 0; font-size:14.5px; line-height:1.5; color:var(--text-2); }
.comp-opcoes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin-bottom:16px; }
.comp-op{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:18px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.7);
  box-shadow:var(--vidro-brilho), var(--vidro-sombra); font:inherit; font-size:13.5px; font-weight:600; color:var(--navy); cursor:pointer; text-align:center;
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.comp-op:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); background:#fff; }
.comp-op .ic{ width:24px; height:24px; padding:11px; box-sizing:content-box; border-radius:50%; color:#fff; }
.comp-whatsapp .ic{ background:#25a45a; }
.comp-email .ic{ background:var(--navy); }
.comp-facebook .ic{ background:#3b5c9a; }
.comp-link .ic{ background:var(--green); }
.comp-mais .ic{ background:#8a8f98; }
.comp-campo{ display:flex; gap:8px; }
.comp-campo input{ flex:1; min-width:0; height:44px; padding:0 14px; border-radius:14px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:13.5px; color:var(--text-2); }
.comp-campo .btn{ height:44px; }
@media (max-width:640px){
  .comp-fundo{ align-items:flex-end; padding:0; }
  .comp-caixa{ width:100%; border-radius:26px 26px 0 0; padding:24px 18px 28px; }
  .comp-opcoes{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.comp-caixa:focus{ outline:none; }

/* ===== Só com login: páginas pessoais (perfil, carteira, Atividades) e créditos =====
   Sem login, o conteúdo dessas páginas some e fica o aviso para entrar (montado pelo layout.js); o saldo de créditos
   do topo e a carteira do menu lateral também só aparecem com a pessoa logada. */
body.pede-login:not(.logado) main > :not(.pede-login-aviso){ display:none !important; }
body.logado .pede-login-aviso{ display:none; }
body:not(.logado) .tools .creditos, body:not(.logado) .side .wallet, body:not(.logado) .tools .sino{ display:none !important; }
body.pede-login:not(.logado) .corpo > .lateral{ display:none !important; }   /* a coluna da direita dessas páginas também é pessoal */
body:not(.logado) .nav .tag{ display:none !important; }   /* números de não lidas (notificações, grupos, amigos) também são pessoais */
/* Topo do menu lateral: com login, nome e avatar (leva ao perfil); sem login, saudação e "Entrar" (abre a janela de entrada) */
body:not(.logado) .me:not(.me-visitante), body.logado .me-visitante{ display:none; }
.me-visitante .avatar{ display:grid; place-items:center; }
.me-visitante .avatar .ic{ width:20px; height:20px; }
.me-visitante strong{ color:var(--green); }
/* Menu recolhido na tela de login (computador): 30% visível, para o box ser o foco; volta a 100% ao passar o mouse ou
   navegar pelo teclado. No celular o menu é a gaveta e não muda. */
@media (min-width:981px){
  body.pede-login:not(.logado) .app.mini .side-wrap{ opacity:.3; transition:opacity .2s ease; }
  body.pede-login:not(.logado) .app.mini .side-wrap:hover, body.pede-login:not(.logado) .app.mini .side-wrap:focus-within{ opacity:1; }
}
/* Tela de login: o box de entrada no centro, sobre o fundo de sempre do site; mesmo conteúdo e visual da janela Entrar */
.pede-login-aviso{ display:grid; place-items:center; min-height:calc(100vh - 150px); margin:0 0 40px; padding:40px 0; }
.pla-box{ width:100%; max-width:420px; border-radius:26px; overflow:hidden;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-brilho), var(--vidro-sombra); }
.pla-box .enj-topo{ padding:30px 28px 6px; }
.pla-box .enj-topo b{ font-size:28px; }
.pla-box .enj-topo p{ font-size:15px; line-height:1.5; margin-top:8px; }
.pla-box .enj-social{ padding:18px 28px 4px; }
.pla-box .enj-ou{ margin:16px 28px 12px; }
.pla-box .enj-form{ padding:0 28px; }
.pla-box .enj-form input[type="text"], .pla-box .enj-form input[type="password"]{ height:48px; }
.pla-box .enj-entrar{ height:50px; font-size:16px; }
.pla-box .enj-cadastro{ margin-top:18px; padding:16px 28px 24px; }
/* O box acompanha a orientação da tela: deitada (paisagem) = box horizontal, em duas colunas (título, redes sociais e
   cadastro à esquerda; e-mail e senha à direita); em pé (retrato) = box vertical. Se a tela está deitada mas não há
   largura para as duas colunas (menos de 660px de conteúdo), fica vertical. Na tela de login deitada, o conteúdo usa
   a largura toda (sem o espaço da coluna da direita), para o box horizontal caber em notebooks. */
.pede-login-aviso{ container-type:inline-size; }
@media (orientation:landscape){
  body.pede-login:not(.logado) .corpo::after{ content:none !important; }
  body.pede-login:not(.logado) .corpo > .wrap{ flex:1 1 auto; max-width:none; }
  @container (min-width:660px){
    .pla-box{ max-width:880px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr;
      grid-template-areas:"topo form" "social form" "cadastro form"; }
    .pla-box .enj-topo{ grid-area:topo; }
    .pla-box .enj-social{ grid-area:social; padding-bottom:0; }
    .pla-box .enj-ou{ display:none; }
    .pla-box .enj-form{ grid-area:form; align-self:stretch; justify-content:center; padding:30px 28px; border-left:1px solid var(--line); }
    .pla-box .enj-cadastro{ grid-area:cadastro; align-self:end; margin-top:20px; text-align:left; }
  }
}
@media (orientation:landscape) and (max-height:520px){            /* celular deitado: pouca altura, tudo mais compacto */
  .pede-login-aviso{ min-height:0; padding:16px 0; margin-bottom:24px; }
  .pla-box .enj-topo{ padding-top:20px; } .pla-box .enj-topo b{ font-size:24px; } .pla-box .enj-topo p{ font-size:14px; }
  .pla-box .enj-social{ gap:6px; padding-top:12px; } .pla-box .enj-social-bt{ height:40px; }
  .pla-box .enj-form{ gap:8px; padding-top:18px; padding-bottom:18px; }
  .pla-box .enj-form input[type="text"], .pla-box .enj-form input[type="password"]{ height:42px; }
  .pla-box .enj-entrar{ height:44px; }
  .pla-box .enj-cadastro{ padding-top:12px; padding-bottom:16px; }
}
@media (max-width:640px){
  .pede-login-aviso{ min-height:calc(100vh - 190px); margin:0 0 32px; padding:24px 0; }
  .pla-box .enj-topo{ padding:24px 20px 4px; } .pla-box .enj-topo b{ font-size:25px; }
  .pla-box .enj-social, .pla-box .enj-form{ padding-left:20px; padding-right:20px; } .pla-box .enj-ou{ margin-left:20px; margin-right:20px; }
  .pla-box .enj-cadastro{ padding:14px 20px 20px; }
}
/* O aviso de decisões em aberto aparece também nas telas que pedem login (é material de trabalho do protótipo) */
body.pede-login:not(.logado) main > .dc-aviso{ display:block !important; }
/* Decisões de 2026-10-06: data e hora nas notificações e no extrato, validade do bônus, link de acesso por e-mail,
   botões do perfil público e rótulos da janela Encaminhar */
.nt-quando{ display:block; font-size:12.5px; color:var(--muted); margin:-4px 0 10px; }
.ntj-quando{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.ct-validade{ margin:12px 0 0; font-size:13px; line-height:1.45; color:var(--muted); }
.enj-link-email{ border:none; background:none; padding:6px 0 0; font:inherit; font-size:13.5px; font-weight:600; color:var(--green); text-align:center; cursor:pointer; }
.enj-link-email:hover{ text-decoration:underline; }
.pf-visitante{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.pf-visitante .btn{ margin:0; }
.pf-visitante small{ flex-basis:100%; font-size:12.5px; color:var(--muted); }
.enc-rotulo{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:8px 2px 2px; }
.enc-rotulo{ display:block; }
.enc-busca{ height:46px; margin-bottom:12px; padding:0 16px; }
.enc-busca .ic{ width:18px; height:18px; flex:none; }
.enc-vazio{ margin:8px 2px; font-size:14px; color:var(--muted); }
.enc-fim{ align-items:center; }
.enc-conta{ margin-right:auto; font-size:13px; color:var(--muted); }
@media (max-width:640px){ .pf-visitante{ width:100%; } .pf-visitante .btn{ flex:1; justify-content:center; } }
.pf-endereco-campo{ display:flex; align-items:center; flex-wrap:wrap; margin:8px 0 6px; font-size:14.5px; color:var(--text-2); }
.pf-endereco-campo input{ flex:1; min-width:140px; max-width:260px; height:42px; margin-left:4px; padding:0 12px; border-radius:12px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:15px; color:var(--text); }
.pf-endereco-campo input:focus{ outline:none; border-color:var(--gold); }
.pf-linha small.pf-endereco-erro{ display:block; color:var(--red); font-weight:600; margin-top:4px; }
.pf-linha small.pf-endereco-erro[hidden]{ display:none; }
.pf-linha small.pf-endereco-espera{ display:block; color:var(--gold); margin-top:2px; }
.pf-linha-acoes .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
/* Coluna da direita: Meus amigos, com quem está online (ponto verde) e offline (ponto cinza, nome mais apagado).
   É pessoal: sem login o bloco não aparece. */
.lat-ponto{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#b9bfc7; flex:none; }
.lat-ponto.on{ background:#2e9e5b; }
.lat-online-conta{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:13px; font-weight:600; color:var(--green); }
.lat-amigo .av{ position:relative; }
.lat-amigo .av .lat-ponto{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border:2px solid #fff; }
.lat-amigo-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.lat-amigo-txt small{ font-size:12px; font-weight:500; color:var(--green); }
.lat-amigo.off{ color:var(--text-2); }
.lat-amigo.off .av{ opacity:.6; }
.lat-amigo.off .lat-amigo-txt small{ color:var(--muted); }
body:not(.logado) .lat-amigos, body:not(.logado) .lat-meus-grupos{ display:none; }   /* Meus amigos e Meus grupos são pessoais */
/* Regra dos cartões de conteúdo (2026-10-06): sempre segmento, título, autor, selo e o botão salvar */
.ct-faixa-txt .vc-autor{ margin:10px 0 0; }
.cd-sug, .cd-topo{ position:relative; }
.cd-sug .cat{ display:block; font-size:11px; margin-top:10px; }
.cd-sug .cat + b{ margin-top:2px; }
.cd-sug .selo-acesso{ display:inline-flex; margin-top:8px; }
.cd-sug small{ display:block; }
.cd-sug .fav{ top:16px; right:16px; width:32px; height:32px; }
.cd-topo .fav{ top:14px; left:14px; right:auto; }
/* Salvos: filtro por tipo (conteúdos, colunas, grupos, vitrines, Minhas Comunidades) e uma seção para cada um */
.sv-filtro{ margin-bottom:22px; }
.sv-bloco{ margin-bottom:20px; padding:22px 24px 24px; border-radius:26px; background:rgba(255,254,251,.5); border:1px solid rgba(255,255,255,.85); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-brilho), var(--vidro-sombra); } /* fundo claro com 50% de transparência (vidro) */
.sv-bloco .at-sec{ margin:0 0 16px; }
.sv-bloco .at-sec small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--muted); margin-left:4px; }
.sv-bloco .at-item{ background:#fff; border-color:var(--line); box-shadow:none; }
.sv-bloco .at-item:hover{ background:#fff; box-shadow:var(--sombra-hover); }
.sv-vazio{ text-align:left; padding:0; }
@media (max-width:640px){ .sv-bloco{ padding:18px 14px; border-radius:22px; } }
/* Curtidas e Salvos em modo lista: linhas com foto pequena; duas colunas quando cabe, uma no celular */
.at-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:10px 18px; }
.at-item{ position:relative; display:flex; align-items:center; gap:8px; padding:10px; border-radius:20px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); box-shadow:var(--vidro-brilho);
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), background-color var(--hover-t) var(--hover-curva); }
.at-item:hover{ transform:translateY(-2px); box-shadow:var(--vidro-brilho), var(--sombra-hover); background:rgba(255,255,255,.85); }
.at-item-link{ flex:1; min-width:0; display:flex; align-items:center; gap:14px; color:inherit; }
.at-item-link img{ width:84px; height:68px; flex:none; border-radius:14px; object-fit:cover; }
.at-item-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.at-item-txt .cat{ font-size:11.5px; }
.at-item-txt h3{ font-size:16px; line-height:1.3; font-weight:600; }
.at-item-txt .meta{ font-size:12.5px; }
.at-item-bt{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; color:var(--text); background:#fff; border:1px solid var(--line);
  transition:transform var(--hover-t) var(--hover-curva), box-shadow var(--hover-t) var(--hover-curva), color var(--hover-t) var(--hover-curva); }
.at-item-bt .ic{ width:15px; height:15px; fill:currentColor; }
.at-item-bt.curtida{ color:var(--red); }
.at-item-bt:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
/* Box BDELD dentro da página Conteúdos: o título já dá o respiro, então a grade não precisa dos 40px de cima */
#ctColecao1 .stories, #ct-estilo-e-casa .stories{ margin-top:28px; }
/* Box destaque simples (BDS): botão salvar no canto, como nos outros cartões de conteúdo */
.ct-carta{ position:relative; }
.ct-carta .fav{ top:18px; right:18px; }
/* Boxes de destaque com lista na versão vitrine (BDELDV e BDDLEV) */
.vt-colecao-box + .vt-colecao-box{ margin-top:52px; }
.vt-colecao-box .stories{ margin-top:28px; }
.vt-destaque .imgw{ position:relative; }
.vt-destaque .imgw .vt-logo{ position:absolute; left:16px; bottom:16px; margin:0; }
.vt-destaque .vt-ver{ margin-top:2px; }
.vt-item p{ margin:0 0 6px; font-size:13.5px; line-height:1.5; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vt-ver-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--green); }
.vt-ver-link .ic{ width:14px; height:14px; }
/* Itens de lista com o botão salvar: o texto reserva o espaço da bandeirinha, para ela nunca ficar por cima do segmento
   ou do título (a regra antiga de padding-right era anulada pelo padding geral do .item, definido depois dela) */
main .item:has(> .fav){ padding-right:58px; }
@media (max-width:640px){ main .item:has(> .fav){ padding-right:52px; } }
main .item > div{ min-width:0; }   /* o texto do item respeita a largura da coluna (segmentos longos quebram ou cortam, sem passar por baixo da bandeirinha) */
/* Box BEDH fora das páginas Conteúdos e Vitrines (ex.: "Colunas em destaque", na página Colunas): carrossel horizontal
   de cartões com foto, 4 por vez; 3 quando a coluna do conteúdo fica estreita; no celular, pouco mais de 1 */
.bedh.trilho-h{ --vis:4; --gap:20px; }
@container (max-width:1000px){ .bedh.trilho-h{ --vis:3; } }
@media (min-width:481px) and (max-width:640px){ .bedh.trilho-h{ --vis:2.2; --gap:14px; } }
@media (max-width:480px){ .bedh.trilho-h{ --vis:1.25; --gap:14px; } }
/* Box BRPCV (recomendado pela comunidade vitrine): carrossel horizontal de depoimentos, 3 por vez (também nos notebooks); 2 em telas
   de tablet; no celular, pouco mais de 1. Os cartões ficam sempre em pé (foto em cima), em qualquer largura. */
.vt-recomendas.trilho-h{ --vis:3; --gap:18px; }
.vt-recomendas.trilho-h .vt-reco{ position:relative; flex-direction:column; height:100%; }
.vt-recomendas.trilho-h .vt-reco-foto{ width:auto; height:170px; flex:none; }
.vt-recomendas.trilho-h .vt-reco-foto .vt-logo{ right:auto; left:18px; top:auto; bottom:-24px; }
.vt-recomendas.trilho-h .vt-reco-txt{ padding:34px 20px 20px; }
/* 3 colunas também nos notebooks (coluna do conteúdo com cerca de 720px): o texto fica um pouco menor para caber */
@container (max-width:1000px){
  .vt-recomendas.trilho-h{ --gap:14px; }
  .vt-recomendas.trilho-h .vt-reco-foto{ height:140px; }
  .vt-recomendas.trilho-h .vt-reco-txt{ padding:32px 16px 16px; }
  .vt-recomendas.trilho-h .vt-reco blockquote{ font-size:16px; }
}
@container (max-width:680px){ .vt-recomendas.trilho-h{ --vis:2; } }
@media (max-width:640px){ .vt-recomendas.trilho-h{ --vis:1.15; --gap:14px; } }
/* MSC e MSV · menus de segmentos em círculos (Conteúdos e Vitrines): o segmento aberto fica marcado em verde */
.vt-cat.on img{ box-shadow:0 0 0 3px var(--green), 0 8px 20px rgba(1,53,101,.16); }
.vt-cat.on{ color:var(--green); }
.vs-grade{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
/* Páginas de segmento (assunto.html e vitrine-segmento.html): estrutura padrão de boxes */
.seg-box .stories{ margin-top:28px; }
.vt-faixa .vt-logo{ margin:0 0 12px; }
.vt-faixa .vc-btn{ margin-top:14px; }
.vt-carta .ct-carta-autor{ display:block; margin-bottom:14px; }
/* Box BDVV (dois verticais vitrine): capa e itens compactos com os dados da vitrine */
.vt-capa-card .vt-logo{ margin:0 0 10px; }
.vt-capa-card .vc-btn{ margin-top:4px; }
.vt-item-compacto .vt-ver-link{ font-size:12px; }
#vtDoisVerticais{ margin:26px 0 12px; }
/* Boxes BDVC e BDVV (duas colunas lado a lado): a lista em carrossel de uma coluna não pode avançar sobre a outra.
   A folga lateral do carrossel vertical (feita para a sombra do hover) cobria a bandeirinha dos itens da coluna
   vizinha e o mouse não conseguia clicar nela. Aqui a folga fica menor que a metade do espaço entre as colunas. */
.ct-dupla .trilho-v{ padding:8px 10px; margin:-8px -10px; }
/* Página Grupos em estrutura de revista: o botão de entrar fica num invólucro que não muda o alinhamento da linha */
.gr-acao{ display:contents; }
#grDoisVerticais{ margin:26px 0 12px; }
#grLista .lista-topo{ margin-top:4px; }
.lista-conta .link{ background:none; border:0; padding:0; font:inherit; color:var(--navy); text-decoration:underline; cursor:pointer; }
#grSegmentos .vt-cat{ cursor:pointer; }
.gr-mais{ display:flex; justify-content:center; margin-top:22px; }
.gr-mais[hidden]{ display:none; }