:root{
/* ---- Paleta oficial: verde escuro premium, hero mais escuro que o fundo, dourado fosco ---- */
--noite:#46644F;
--noite-2:#15382D;
--noite-3:#173F31;
--forma:#4F6256;
--vida:#15382D;
--sage:#35473C;
--sage-glow:#78B693;
--proposito:#C9A25D;
--proposito-2:#D9B873;
--gold-deep-tone:#A67E3E;
--graca:#F1E8D8;
--creme:#F1E8D8;
--gold-grad: linear-gradient(135deg, #D9B873 0%, #C9A25D 55%, #A67E3E 100%);
--shadow-soft: 0 6px 20px rgba(10,25,18,.28);
--shadow-strong: 0 14px 34px rgba(10,25,18,.4);
--dark:var(--noite);
--dark2:var(--noite-2);
--green:var(--forma);
--green-deep:var(--vida);
--green-tint:#1E4A3A;
--gold:var(--proposito);
--gold-deep:#D9B873;
--cream:#2A4839;
--cream2:#2C3C33;
--text:#F1E8D8;
--text-soft:#D1CCC0;
--line:rgba(216,182,117,.22);
--white:rgba(18,57,44,.78);
--success:#5FA07C;
--warn:#C9A25D;
--danger:#C76363;
/* ---- Proporção das molduras de foto ----
Quando a moldura tem proporção diferente da foto, o navegador preenche a
moldura e corta o que sobra. Era daí que vinha o corte nas capas dos
módulos: a moldura de "Sua jornada" é 3/4 (em pé, no formato das suas
capas) e ficava certa, mas em Minha Jornada e em "Continuar assistindo"
as molduras eram 4/3 e 3/2, quase quadrada e deitada. A mesma foto em pé
dentro de uma moldura deitada perde topo e base.
Agora existe UMA medida para as capas de módulo, e todas as molduras
seguem ela. Se um dia as capas mudarem de formato, troque só esta linha
e a plataforma inteira acompanha. */
--capa-proporcao: 3/4; /* capas dos módulos, em pé, como um pôster */
--foto-casal-proporcao: 3/2; /* a foto de vocês na capa da Home, deitada */
--radius:14px;
--radius-sm:10px;
--shadow: 0 6px 20px rgba(10,25,18,.28);
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{background:var(--cream); overflow-x:hidden;}
body{
margin:0;
overflow-x:hidden;
font-family:'Inter',sans-serif;
background-color:#2A4839;
background-image:
/* o verde da hero desce pela página inteira, clareando de leve, hero e conteúdo viram
a mesma superfície, sem emenda */
linear-gradient(180deg, rgba(21,56,45,.85) 0%, rgba(21,56,45,.5) 14%, rgba(21,56,45,.22) 34%, rgba(21,56,45,.06) 60%, transparent 100%),
radial-gradient(ellipse 1100px 750px at 82% -10%, rgba(217,184,115,.10), transparent 62%),
radial-gradient(ellipse 900px 620px at 4% 100%, rgba(120,182,147,.11), transparent 65%),
radial-gradient(ellipse 700px 500px at 50% 40%, rgba(241,233,220,.03), transparent 70%);
background-attachment:scroll, fixed, fixed, fixed;
color:var(--text);
-webkit-font-smoothing:antialiased;
transition:background-color .25s ease, color .25s ease;
position:relative;
}
body::before{
content:"";
position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:top right, bottom left;
}
.main-col, .sidebar, .full-dark{position:relative; z-index:1;}
h1,h2,h3,.serif{font-family:'Playfair Display','Fraunces',serif; letter-spacing:-0.01em;}
button{font-family:'Inter',sans-serif; cursor:pointer;}
a{color:inherit;}
::selection{background:var(--gold); color:var(--dark);}
.view{display:none;}
.view.active{display:block;}
/* ---------- LOGIN / SETUP / PROFILE (full-bleed dark) ---------- */
.full-dark{
min-height:100vh;
/* Mesma superfície do resto da plataforma: o verde do body, com os mesmos halos de
dourado e sage. Antes esta tela usava --noite (#46644F), um verde mais claro e
acinzentado, por isso login e perfis destoavam de dentro da plataforma. */
background-color:#2A4839;
background-image:
linear-gradient(180deg, rgba(21,56,45,.85) 0%, rgba(21,56,45,.5) 14%, rgba(21,56,45,.22) 34%, rgba(21,56,45,.06) 60%, transparent 100%),
radial-gradient(ellipse 1100px 750px at 82% -10%, rgba(217,184,115,.10), transparent 62%),
radial-gradient(ellipse 900px 620px at 4% 100%, rgba(120,182,147,.11), transparent 65%),
radial-gradient(ellipse 700px 500px at 50% 40%, rgba(241,233,220,.03), transparent 70%);
display:flex; align-items:center; justify-content:center;
padding:32px; position:relative; overflow:hidden;
/* essa tela é sempre escura por design, variáveis redefinidas aqui dentro pra
ficar legível mesmo se a paleta geral do site mudar de tema. */
--text:var(--creme);
--text-soft:rgba(240,233,220,.72);
--line:rgba(184,154,95,.28);
--white:rgba(255,255,255,.05);
--cream2:rgba(255,255,255,.06);
color:var(--text);
}
@media(max-width:480px){
.full-dark{padding:16px;}
.auth-card{padding:28px 22px; border-radius:16px;}
.auth-card h1{font-size:22px;}
.profiles-row{gap:24px;}
.profile-item, .profile-avatar{width:168px !important;}
.profile-avatar{height:212px !important; font-size:44px !important;}
}
.full-dark::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
}
.profiles-wrap{position:relative; z-index:1;}
.brand-mark{
display:flex; align-items:center; gap:10px; justify-content:center;
margin-bottom:36px; color:var(--text);
}
.brand-mark .house{
width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--green-deep),#1D2E25);
display:flex;align-items:center;justify-content:center; color:var(--gold);
}
.brand-mark span{font-family:'Fraunces',serif; font-size:22px; font-weight:600; letter-spacing:.2px;}
.brand-mark span em{color:var(--gold); font-style:normal;}
.auth-card{
width:100%; max-width:420px; background:var(--white);
border:1px solid var(--line);
border-radius:20px; padding:38px 34px; box-shadow:var(--shadow-strong);
position:relative; z-index:1;
}
.auth-card h1{color:var(--text); font-size:26px; font-weight:500; margin:0 0 6px;}
.auth-card p.sub{color:var(--text-soft); font-size:14px; margin:0 0 26px; line-height:1.5;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--text-soft); margin-bottom:7px; letter-spacing:.3px; text-transform:uppercase;}
/* Um campo de texto precisa parecer um buraco na superfície, não a superfície.
O fundo era var(--cream2), a MESMA cor dos cartões em que quase todo campo mora:
dentro de um cartão o campo sumia, sobrava o texto solto e a borda dourada de 22%,
fraca demais para desenhar uma caixa. Quem olhava não via onde escrever.
Agora o fundo é escuro e translúcido, então ele afunda em qualquer superfície,
clara ou escura, e a borda ficou mais firme. */
.field input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], input[type="time"], input[type="tel"], input:not([type]){
width:100%; padding:13px 14px; border-radius:10px;
border:1px solid rgba(216,182,117,.34);
background:rgba(0,0,0,.32); color:var(--text); font-size:15px; outline:none;
font-family:'Inter',sans-serif;
transition:border-color .18s ease, background .18s ease;
}
.field input::placeholder,
input::placeholder{color:rgba(209,204,192,.62);}
.field input:focus,
input:focus{border-color:var(--gold); background:rgba(0,0,0,.42);}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:13px 24px; border-radius:8px; border:1.5px solid transparent;
font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn svg{flex-shrink:0;} /* senão o ícone é esmagado quando o texto quebra em duas linhas */
.btn:hover{transform:translateY(-2px) scale(1.02);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-gold{background:var(--gold-grad); color:var(--noite); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 32px -14px rgba(201,169,110,.55);}
.btn-hero-cta{
background:var(--text); color:#17382D; border:none; padding:13px 26px; border-radius:10px;
font-weight:600; font-size:13px; letter-spacing:.3px; transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-hero-cta:hover{filter:brightness(1.03); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2);}
.btn-hero-cta .cta-arrow{display:inline-block; transition:transform .2s ease;}
.btn-hero-cta:hover .cta-arrow{transform:translateX(3px);}
.btn-hero{
padding:19px 38px; font-size:14px; border-radius:12px; position:relative; overflow:hidden;
animation:hero-glow 2.6s ease-in-out infinite;
}
.btn-hero::before{
content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
transform:translateX(-120%); animation:hero-sheen 3.2s ease-in-out infinite;
}
@keyframes hero-glow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 32px -14px rgba(201,169,110,.55);} 50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 20px 46px -12px rgba(201,169,110,.85);}}
@keyframes hero-sheen{0%{transform:translateX(-120%);} 60%,100%{transform:translateX(120%);}}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 20px 40px -12px rgba(201,169,110,.7);}
.btn-block{width:100%;}
.btn-outline{background:transparent; border-color:var(--line); color:var(--text);}
.btn-outline:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
.btn-green{background:linear-gradient(160deg, var(--green), var(--green-deep)); color:var(--creme); box-shadow:0 14px 30px -16px rgba(45,74,62,.5);}
.btn-green:hover{box-shadow:0 18px 36px -14px rgba(45,74,62,.75);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.auth-foot{margin-top:18px; font-size:12.5px; color:var(--text-soft); text-align:center; line-height:1.6;}
.err-msg{color:var(--danger); font-size:13px; margin:-6px 0 14px;}
/* profile select */
.profiles-wrap{text-align:center; color:var(--text); position:relative; z-index:1;}
.profiles-wrap h1{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(26px,3.4vw,36px); margin:0 0 58px; letter-spacing:.01em;}
.profiles-row{display:flex; gap:56px; justify-content:center; flex-wrap:wrap; align-items:flex-start;}
.profile-item{cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:16px; width:180px; transition:opacity .3s cubic-bezier(.22,1,.36,1);}
.profiles-row:hover .profile-item{opacity:.55;}
.profiles-row:hover .profile-item:hover{opacity:1;}
.profile-item.selected{opacity:1 !important;}
.profiles-row.choosing .profile-item:not(.selected){opacity:.15 !important;}
.profile-item{width:212px; position:relative;}
.profile-avatar{
width:212px; height:268px; border-radius:24px; display:flex; align-items:center; justify-content:center; position:relative;
font-family:'Playfair Display',serif; font-weight:600; font-size:58px; color:var(--creme); border:1px solid rgba(232,222,204,.16);
box-shadow:0 24px 50px -22px rgba(0,0,0,.55); background-size:cover; background-position:center;
transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1);
}
.profile-item::before{
content:""; position:absolute; top:50%; left:50%; width:280px; height:280px; border-radius:50%;
transform:translate(-50%,-50%); filter:blur(30px); opacity:.28; z-index:-1; transition:opacity .35s ease;
background:radial-gradient(circle, var(--glow-color, var(--gold)), transparent 70%);
}
.profile-item:hover::before{opacity:.5;}
.profile-item.avatar-slot-ela::before{--glow-color:#C98294;}
.profile-item.avatar-slot-ele::before{--glow-color:#64799D;}
.profile-avatar::after{content:""; position:absolute; inset:10px; border-radius:18px; border:1px solid rgba(232,222,204,.22); pointer-events:none;}
.profile-item:hover .profile-avatar, .profile-item.selected .profile-avatar{
transform:translateY(-8px) scale(1.03); border-color:var(--gold);
box-shadow:0 32px 64px -20px rgba(0,0,0,.6), 0 0 46px -8px rgba(201,169,110,.5);
}
.profile-item span{font-size:17px; color:var(--text); font-weight:600;}
.profile-item .tag{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:-8px;}
.profile-item .enter-indicator{
height:14px; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease;
font-size:10.5px; color:var(--gold); font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.profile-item:hover .enter-indicator{opacity:1; transform:translateY(0);}
.avatar-ele{background-image:linear-gradient(165deg,#6E85AA 0%,#4C6683 55%,#33465C 100%);}
.avatar-ela{background-image:linear-gradient(165deg,#D391A3 0%,#B0687C 55%,#7C4655 100%);}
@keyframes profilesEntryFade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.profiles-entry-fade{opacity:0; animation:profilesEntryFade .5s cubic-bezier(.22,1,.36,1) forwards;}
.btn-exit-tertiary{
display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid rgba(184,154,95,.22);
color:rgba(240,233,220,.55); font-size:12.5px; font-weight:600; padding:9px 18px; border-radius:999px;
min-height:44px; justify-content:center;
transition:color .2s ease, border-color .2s ease;
}
.btn-exit-tertiary:hover{color:var(--creme); border-color:rgba(184,154,95,.4);}
.profile-avatar::before{
content:""; position:absolute; top:0; left:14%; right:14%; height:40%; border-radius:50% 50% 0 0/100% 100% 0 0;
background:linear-gradient(180deg, rgba(255,255,255,.14), transparent); pointer-events:none;
}
.avatar-casal{background:linear-gradient(160deg,var(--gold),var(--gold-deep)); font-size:26px;}
/* ---------- APP SHELL ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
width:250px; flex-shrink:0; background:var(--cream); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border-right:1px solid var(--line);
padding:26px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
transition:width .28s cubic-bezier(.22,1,.36,1), padding .28s ease;
color:var(--text);
}
/* ---------- MOBILE: a barra lateral vira uma gaveta que desliza por cima ---------- */
.mobile-menu-btn{display:none;}
.sidebar-backdrop{display:none;}
@media(max-width:860px){
.mobile-menu-btn{
display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px;
background:var(--white); border:1px solid var(--line); color:var(--text); flex-shrink:0; margin-right:auto;
}
.sidebar{
position:fixed; top:0; left:0; height:100dvh; z-index:200; width:82vw; max-width:300px;
transform:translateX(-100%); transition:transform .3s cubic-bezier(.22,1,.36,1); box-shadow:0 0 40px rgba(0,0,0,.3);
}
.sidebar.mobile-open{transform:translateX(0);}
.sidebar.collapsed{width:82vw; max-width:300px; padding:26px 18px;} /* no mobile, "recolher" não faz sentido, a gaveta sempre abre cheia */
.sidebar.collapsed .nav-label, .sidebar.collapsed #profile-pill-text{display:inline;}
.sidebar.collapsed .nav-item, .sidebar.collapsed .sidebar-bottom-item{justify-content:flex-start; padding-left:13px;}
.sidebar-collapse-icon-btn{display:none;} /* recolher/expandir não existe no mobile, só abrir/fechar a gaveta */
.sidebar-backdrop{
display:none; position:fixed; inset:0; background:rgba(10,25,18,.5); z-index:199; backdrop-filter:blur(2px);
}
.sidebar-backdrop.show{display:block;}
.content.content-wide, .sidebar.collapsed ~ .main-col .content, .sidebar.collapsed ~ .main-col .content.content-wide{max-width:100%;}
}
.sidebar.collapsed{width:78px; padding-left:14px; padding-right:14px;}
#sidebar-collapse-icon{transition:transform .28s cubic-bezier(.22,1,.36,1);}
.sidebar.collapsed #sidebar-collapse-icon{transform:rotate(180deg);}
.sidebar.collapsed .nav-label, .sidebar.collapsed #profile-switch-hint, .sidebar.collapsed #profile-pill-text,
.sidebar.collapsed .sidebar-invite, .sidebar.collapsed .profile-switch-exit-ic{display:none;}
.sidebar.collapsed .sidebar-logo{justify-content:center;}
.sidebar.collapsed .nav-item, .sidebar.collapsed .sidebar-bottom-item{justify-content:center; padding-left:0; padding-right:0;}
.sidebar.collapsed .profile-pill{justify-content:center !important; padding:10px !important;}
.sidebar.collapsed .sidebar-couple{justify-content:center;}
.sidebar-logo{display:flex; align-items:center; gap:9px; padding:0 8px 26px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.sidebar-collapse-icon-btn{
margin-left:auto; width:26px; height:26px; border-radius:8px; background:none; border:1px solid var(--line);
color:var(--text-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-collapse-icon-btn:hover{background:var(--cream2); color:var(--text);}
.sidebar.collapsed .sidebar-collapse-icon-btn{margin-left:0;}
.sidebar-logo .mark{width:30px;height:30px;border-radius:8px; background:var(--gold-grad); display:flex;align-items:center;justify-content:center; color:var(--noite); box-shadow:0 8px 18px -8px rgba(201,169,110,.6);}
.sidebar-logo span{font-family:'Playfair Display',serif; font-weight:600; font-size:19px;}
.sidebar-logo span em{color:var(--gold-deep); font-style:normal;}
.nav-item{
display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; margin-bottom:3px;
color:var(--text-soft); font-size:14.5px; font-weight:500; border:none; background:transparent; width:100%; text-align:left;
transition:background .22s ease, color .22s ease, transform .22s ease;
}
.nav-item svg{flex-shrink:0; transition:transform .22s ease;}
/* Contador de item novo no próprio menu: o número de sugestões que ainda
não foram lidas. Fica na ponta para não empurrar o nome do item. */
.nav-badge{
margin-left:auto; flex-shrink:0; min-width:20px; height:20px; padding:0 6px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; background:var(--gold-grad); color:var(--noite);
font-size:11px; font-weight:800; line-height:1;
}
.nav-item:hover{background:rgba(217,184,115,.08); color:var(--creme); transform:translateX(2px);}
.nav-item:hover svg{transform:scale(1.08);}
.nav-item.active{
background:linear-gradient(90deg, rgba(217,184,115,.16), rgba(217,184,115,.04));
color:var(--gold); font-weight:700; border-left:2px solid var(--gold); padding-left:15px;
box-shadow:inset 0 0 20px -14px rgba(217,184,115,.5);
}
.nav-item.active svg{color:var(--gold);}
/* Ajuda, Privacidade e Configurações ficam no rodapé do menu e também acendem */
.sidebar-bottom-item.active{
background:linear-gradient(90deg, rgba(217,184,115,.16), rgba(217,184,115,.04));
color:var(--gold); font-weight:700; border-left:2px solid var(--gold);
}
.sidebar-bottom-item.active svg{color:var(--gold);}
/* Títulos de grupo no menu do administrador */
.nav-grupo{
padding:16px 13px 6px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
font-weight:800; color:rgba(217,184,115,.6);
}
.nav-grupo:first-child{padding-top:6px;}
.sidebar.collapsed .nav-grupo{padding:14px 0 4px;}
.sidebar.collapsed .nav-grupo .nav-label{display:none;}
.sidebar.collapsed .nav-grupo::after{content:''; display:block; height:1px; background:var(--line); margin:0 10px;}
.profile-switch-btn{margin-bottom:16px; border:1px solid var(--line);}
.sidebar-spacer{flex:1;}
.sidebar-couple{
display:flex; align-items:center; gap:10px; padding:10px 8px; border-top:1px solid var(--line); margin-top:10px; cursor:pointer;
}
.sidebar-couple .heart{width:34px;height:34px;border-radius:50%; background:var(--cream2); display:flex;align-items:center;justify-content:center;}
.sidebar-couple .names{font-size:13.5px; font-weight:600; line-height:1.25;}
.sidebar-couple .edit{font-size:11.5px; color:var(--text-soft);}
.sidebar-invite{
background:var(--cream2); border-radius:12px; padding:12px; font-size:12.5px; color:var(--text-soft);
display:flex; gap:9px; align-items:flex-start; margin-top:10px; line-height:1.45;
}
.sidebar-bottom-item{display:flex; align-items:center; gap:10px; padding:10px 8px; font-size:13.5px; color:var(--text-soft); cursor:pointer;}
.sidebar-bottom-item:hover{color:var(--text);}
.profile-pill{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--cream2); border-radius:999px; font-size:12px; font-weight:700; color:var(--green-deep); margin-bottom:14px;}
.main-col{flex:1; min-width:0; position:relative;}
.topbar{
display:flex; justify-content:flex-end; align-items:center; gap:12px;
padding:22px 34px 0;
}
/* Só na Home: a busca/sequência/pontos/sino flutuam transparentes por cima da própria hero,
sem criar uma faixa de cor separada no topo, exatamente como pedido. */
.main-col.home-hero-mode .topbar{
position:absolute; top:0; left:0; right:0; z-index:6; padding:28px 40px 0; background:transparent;
}
.main-col.home-hero-mode .content{padding-top:0;}
.main-col.home-hero-mode .topbar .search-wrap input{
background:rgba(15,38,29,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border-color:rgba(217,184,115,.3); color:var(--creme);
}
.main-col.home-hero-mode .topbar .search-wrap input::placeholder{color:rgba(241,233,220,.6);}
.main-col.home-hero-mode .topbar .pill{
background:rgba(15,38,29,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border-color:rgba(217,184,115,.3); color:var(--creme);
}
.main-col.home-hero-mode .topbar .pill.gem{color:var(--gold);}
.main-col.home-hero-mode .bell{color:var(--creme);}
/* na Home, a linha divisória da sidebar some pra ela se integrar à hero sem contraste */
.sidebar:has(~ .main-col.home-hero-mode){border-right-color:transparent;}
@media(max-width:860px){
.topbar{padding:16px 16px 0; gap:8px; flex-wrap:wrap;}
.topbar .search-wrap{order:3; width:100% !important; max-width:none !important; margin-top:8px;}
.pill{padding:7px 12px; font-size:12px;}
.pill .val{font-size:12px;}
.notif-panel{position:fixed !important; top:64px !important; right:14px !important; left:14px !important; width:auto !important;}
}
.pill{
display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
}
.pill .val{font-weight:700;}
.pill.flame{color:#B8622E;}
.pill.gem{color:var(--gold-deep);}
.bell{
width:38px;height:38px;border-radius:50%; background:var(--white); border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;
}
.content{padding:22px 34px 70px; max-width:1180px; transition:max-width .28s cubic-bezier(.22,1,.36,1);}
@media(max-width:640px){ .content{padding:16px 16px 60px;} }
.sidebar.collapsed ~ .main-col .content{max-width:1400px;}
.sidebar.collapsed ~ .main-col .content.content-wide{max-width:1620px;}
.content.content-wide{max-width:1450px;}
.card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:26px; box-shadow:none; transition:box-shadow .25s ease, transform .25s ease;}
/* ---------- FUNDO FLUTUANTE (decorativo) ---------- */
.ambient-layer{display:none;}
.tech-bg-canvas{display:none;}
.main-col, .full-dark, .content{position:relative; z-index:1;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media(max-width:760px){ .grid2{grid-template-columns:1fr !important;} }
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){ .grid2,.grid3{grid-template-columns:1fr;} }
.page-title{font-size:30px; font-weight:500; margin:0 0 22px;}
.eyebrow{
font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:700;
display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--proposito); display:inline-block;}
.hero-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:34px; position:relative; overflow:hidden; margin-bottom:26px; box-shadow:var(--shadow-soft);}
/* ---------- HERO EDITORIAL DA HOME (sem card, integrado ao fundo) ---------- */
.hero-editorial{
display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding:28px 30px 44px; position:relative;
background:rgba(232,222,204,.05); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border:1px solid rgba(201,169,110,.14); border-radius:22px; overflow:hidden;
}
.hero-editorial::before{
content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
background:linear-gradient(90deg, transparent, rgba(232,222,204,.35), transparent);
}
.micro-label{
position:absolute; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep);
font-weight:700; opacity:.65; display:flex; align-items:center; gap:6px;
}
.micro-label::after{content:""; width:16px; height:1px; background:var(--gold-deep); opacity:.5;}
.hero-editorial-text{flex:1; min-width:280px;}
.hero-editorial-name{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(38px,5vw,58px); line-height:1.05; margin:0 0 14px; letter-spacing:-.01em;}
.hero-editorial-sub{color:var(--text-soft); font-size:15px; max-width:420px; margin:0;}
.hero-editorial-xp{position:relative; width:220px; height:220px; flex-shrink:0;}
.hero-editorial-xp-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.hero-editorial-xp-num .n{font-family:'Playfair Display',serif; font-size:clamp(40px,4vw,52px); font-weight:600; line-height:1;}
.hero-editorial-xp-num .l{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-soft); font-weight:700; margin-top:6px;}
@media(max-width:760px){ .hero-editorial{justify-content:center; text-align:center;} .hero-editorial-sub{margin:0 auto;} }
.hero-card::after{
content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-80px; top:-80px;
background:radial-gradient(circle, rgba(201,169,110,.28), transparent 70%); filter:blur(30px); pointer-events:none;
animation:ambient-pulse 9s ease-in-out infinite;
}
@keyframes ambient-pulse{0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:.9; transform:scale(1.18);}}
.hero-greet{font-size:15px; color:var(--text-soft); margin:0; position:relative; z-index:1;}
.hero-names{font-size:30px; margin:2px 0 6px; position:relative; z-index:1;}
.hero-names em{color:var(--gold-deep); font-style:italic; font-weight:500;}
.hero-sub{color:var(--text-soft); font-size:14.5px; margin:0 0 22px; position:relative; z-index:1;}
.level-label{font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-soft); font-weight:700;}
.level-name{font-size:26px; margin:4px 0 6px;}
.progress-track{height:9px; background:var(--cream2); border-radius:999px; overflow:hidden; width:340px; max-width:100%;}
.progress-fill{height:100%; background:var(--gold-grad); border-radius:999px; transition:width .4s ease;}
.progress-pct{font-size:34px; font-weight:600; margin:14px 0 18px; font-family:'Playfair Display',serif;}
.leaf-deco{position:absolute; right:24px; top:20px; opacity:.5;}
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
@media(max-width:900px){.quick-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.quick-grid{grid-template-columns:1fr;}}
.quick-card{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.quick-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:rgba(201,169,110,.5);}
.quick-icon{width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; transition:transform .3s ease;}
.quick-card:hover .quick-icon{transform:rotate(-6deg) scale(1.1);}
.quick-title{font-weight:600; font-size:15.5px;}
.quick-desc{font-size:12.5px; color:var(--text-soft); line-height:1.4; flex:1;}
.quick-arrow{width:30px;height:30px;border-radius:50%; border:1px solid var(--line); display:flex;align-items:center;justify-content:center;}
.quick-arrow:hover{background:var(--cream2);}
.section-title{font-size:22px; margin:0;}
.row-between{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.link-small{font-size:13px; color:var(--text-soft); font-weight:600;}
.link-small:hover{color:var(--text);}
.stat-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.stat-row:last-child{border-bottom:none;}
.stat-row .lbl{display:flex; align-items:center; gap:10px; color:var(--text-soft);}
.stat-row .val{font-weight:700;}
.verse-mark{color:var(--gold); margin-bottom:0; font-family:'Playfair Display',serif; font-size:56px; font-weight:700; line-height:.6; height:34px;}
.verse-text{font-size:19px; font-family:'Fraunces',serif; font-style:italic; line-height:1.5; margin:4px 0 12px;}
.verse-ref{color:var(--text-soft); font-size:13.5px;}
.badge-grid{display:flex; flex-wrap:wrap; gap:18px;}
.badge{width:92px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;}
.badge-hex{
width:64px; height:64px; border-radius:50%; position:relative;
display:flex; align-items:center; justify-content:center;
background:var(--cream2); color:var(--text-soft);
box-shadow:0 0 0 2px var(--line), inset 0 2px 5px rgba(0,0,0,.08);
transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.badge:hover .badge-hex{transform:translateY(-4px) rotate(-4deg);}
.badge.unlocked .badge-hex{
background:var(--gold-grad); color:var(--noite);
box-shadow:0 0 0 2px var(--proposito-2), 0 16px 30px -14px rgba(201,169,110,.65), inset 0 2px 4px rgba(255,255,255,.45);
}
.badge-name{font-size:11.5px; font-weight:700; color:var(--text-soft);}
.badge.unlocked .badge-name{color:var(--text);}
.badge-name{font-size:12.5px; font-weight:600; line-height:1.3;}
.badge:not(.unlocked) .badge-name{color:var(--text-soft);}
.rank-search{width:100%; padding:12px 14px 12px 40px; border-radius:10px; border:1px solid var(--line); background:var(--cream2); font-size:14px; margin-bottom:14px;}
/* ---------- Painel completo do casal (Admin) ----------
Antes essa tela tinha fundo escuro e fonte de terminal, destoando de todo o resto.
Agora usa as mesmas cores, as mesmas fontes e os mesmos cartões da plataforma. */
.couple-hub-inner{
background:var(--cream) !important; width:min(96vw, 920px) !important; height:min(92vh, 880px) !important;
padding:40px; border-radius:20px; border:1px solid var(--line);
box-shadow:var(--shadow-strong);
}
@media(max-width:640px){ .couple-hub-inner{padding:22px 16px;} }
/* ---------- Leitor de e-book embutido ---------- */
.ebook-viewer-inner{
background:var(--cream) !important;
/* Largo o bastante para o livro abrir nas duas páginas sem espremer a leitura.
Era 900px, que dava 450px por folha: pouco para ler com conforto. */
width:min(96vw, 1400px) !important; height:min(94vh, 960px) !important;
padding:0 !important; border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
}
.ebook-viewer-header{padding:16px 54px 16px 22px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; color:var(--text); flex-shrink:0;}
.ebook-viewer-body{
position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
-webkit-user-select:none; user-select:none; background:#0F231B;
}
/* O palco é onde a página desenhada aparece. Rola só na vertical. */
/* ---------- O palco: a mesa onde o livro está aberto ----------
Um fundo quente e escuro, com um halo por trás do livro, em vez do preto chapado
de antes. É o que faz o objeto parecer pousado em algum lugar. */
.ebook-palco{
flex:1; min-height:0; overflow:hidden; display:flex;
align-items:center; justify-content:center;
padding:20px 16px; position:relative;
background:
radial-gradient(ellipse 70% 60% at 50% 45%, rgba(217,184,115,.07), transparent 70%),
linear-gradient(180deg, #14291F 0%, #0E1F18 60%, #0B1A14 100%);
}
/* ---------- Com zoom, a página precisa poder ser percorrida ----------
Duas coisas cortavam a leitura aqui.
A primeira: o livro tinha teto de altura igual ao do palco, e a folha corta o que
passa disso. Com zoom, o desenho da página ficava maior que a folha e era aparado
em cima e embaixo, sem aviso. O topo da página simplesmente não existia.
A segunda: o palco centraliza o livro com flex. Quando um item de flex centralizado
fica maior que a caixa, a parte que sobra para o lado de cima e para a esquerda vira
zona morta, não dá para rolar até lá. É uma armadilha conhecida do centro com flex.
Com zoom, então, o palco deixa de ser flex e vira um bloco que rola, e o livro perde
o teto e passa a ter o tamanho do desenho. Centralizado enquanto couber, percorrível
quando não couber. */
.ebook-palco.ebook-palco-rola{
overflow:auto; display:block; padding:16px; text-align:center;
-webkit-overflow-scrolling:touch;
}
.ebook-palco-rola .ebook-livro{
display:inline-flex; vertical-align:top;
max-width:none; max-height:none;
}
/* As faixas de toque sairiam do lugar ao rolar, e atrapalhariam arrastar a página. */
.ebook-palco-rola .ebook-toque{display:none;}
/* ---------- O livro ---------- */
.ebook-livro{
display:flex; align-items:stretch; position:relative;
max-width:100%; max-height:100%;
filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
.ebook-folha{
position:relative; background:#FBF7EF; overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
/* Uma folha só: cantos arredondados dos dois lados, como uma página solta. */
.ebook-folha{border-radius:4px;}
/* Livro aberto: os cantos de fora arredondam, os de dentro encostam no vinco. */
.ebook-livro-aberto .ebook-folha-esq{border-radius:4px 0 0 4px;}
.ebook-livro-aberto .ebook-folha-dir{border-radius:0 4px 4px 0;}
/* O vinco do meio. Duas sombras que se encontram, uma de cada folha, mais uma
linha fina no encontro. É o detalhe que faz o cérebro ver "livro" e não "imagem". */
.ebook-livro-aberto .ebook-folha-esq::after,
.ebook-livro-aberto .ebook-folha-dir::after{
content:''; position:absolute; top:0; bottom:0; width:34px; pointer-events:none;
}
.ebook-livro-aberto .ebook-folha-esq::after{
right:0; background:linear-gradient(90deg, transparent, rgba(60,44,20,.16));
}
.ebook-livro-aberto .ebook-folha-dir::after{
left:0; background:linear-gradient(270deg, transparent, rgba(60,44,20,.16));
}
.ebook-livro-aberto::before{
content:''; position:absolute; top:6px; bottom:6px; left:50%; width:1px;
transform:translateX(-.5px); z-index:3; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(60,44,20,.4) 12%, rgba(60,44,20,.4) 88%, transparent);
}
.ebook-canvas{
display:block; -webkit-user-select:none; user-select:none; pointer-events:none;
}
/* O número da página no pé da folha, como num livro impresso. */
/* O número no canto de fora da folha, como num livro impresso: par à esquerda,
ímpar à direita. Fica longe do vinco e longe da linha do rodapé. */
.ebook-folio{
position:absolute; bottom:6px;
font-size:10.5px; color:rgba(60,44,20,.4); font-variant-numeric:tabular-nums;
pointer-events:none;
}
.ebook-folha-esq .ebook-folio{left:14px;}
.ebook-folha-dir .ebook-folio{right:14px;}
/* Fora do livro aberto existe uma folha só: o número vai para a direita. */
.ebook-livro:not(.ebook-livro-aberto) .ebook-folha-esq .ebook-folio{left:auto; right:14px;}
/* A virada: um deslize curto no sentido da leitura. */
.ebook-livro.virando-frente{animation:folhaFrente .36s cubic-bezier(.22,1,.36,1);}
.ebook-livro.virando-tras{animation:folhaTras .36s cubic-bezier(.22,1,.36,1);}
@keyframes folhaFrente{
0%{transform:translateX(22px) scale(.985); opacity:.35;}
100%{transform:none; opacity:1;}
}
@keyframes folhaTras{
0%{transform:translateX(-22px) scale(.985); opacity:.35;}
100%{transform:none; opacity:1;}
}
@media(prefers-reduced-motion:reduce){
.ebook-livro, .ebook-livro.virando-frente, .ebook-livro.virando-tras{animation:none; transition:none;}
}
.ebook-carregando{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
color:var(--text-soft); font-size:13.5px; text-align:center; padding:24px;
}
.ebook-carregando svg{color:var(--gold); opacity:.7;}
.ebook-barra{
flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
padding:11px 14px calc(11px + env(safe-area-inset-bottom));
background:rgba(8,20,15,.85); border-top:1px solid var(--line);
}
.ebook-btn{
width:38px; height:38px; flex-shrink:0; border-radius:10px; cursor:pointer;
border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--creme);
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700;
transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.ebook-btn:hover:not(:disabled){border-color:rgba(217,184,115,.5); color:var(--gold);}
.ebook-btn:disabled{opacity:.3; cursor:default;}
.ebook-conta{font-size:12.5px; color:var(--text-soft); font-variant-numeric:tabular-nums; min-width:62px; text-align:center;}
.ebook-conta b{color:var(--creme); font-weight:700;}
.ebook-separador{width:1px; height:22px; background:var(--line);}
.ebook-acao{
margin-left:6px; padding:10px 18px; border-radius:999px; cursor:pointer; min-height:38px;
border:0; background:var(--gold-grad); color:var(--noite);
font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
text-transform:uppercase; letter-spacing:.05em;
}
.ebook-acao.feito{background:rgba(155,211,174,.16); color:#9BD3AE; border:1px solid rgba(155,211,174,.35);}
.ebook-aviso-antigo{
display:flex; align-items:flex-start; gap:8px; margin:10px 0 0;
padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.55;
border:1px solid rgba(201,99,99,.35); background:rgba(201,99,99,.08); color:var(--text);
}
.ebook-aviso-antigo svg{color:var(--danger); flex-shrink:0; margin-top:2px;}
@media(max-width:600px){
.ebook-viewer-inner{width:100vw !important; height:100dvh !important; border-radius:0 !important;}
.ebook-palco{padding:10px;}
.ebook-barra{gap:7px; padding:9px 10px calc(9px + env(safe-area-inset-bottom));}
.ebook-acao{width:100%; margin:4px 0 0; order:9;}
}
.hub-header{position:relative; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.hub-header-glow{display:none;}
.hub-meta-row{display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--text-soft); font-size:12.5px; }
.hub-dot{width:4px; height:4px; border-radius:50%; background:var(--gold-deep);}
.hub-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px;}
@media(max-width:640px){ .hub-grid{grid-template-columns:1fr 1fr;} }
.hub-stat{background:var(--cream2); border:1px solid var(--line); border-radius:10px; padding:14px;}
.hub-stat-label{font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:6px;}
.hub-stat-value{font-family:'Playfair Display',serif; color:var(--text); font-size:22px; font-weight:600;}
.hub-section{margin-bottom:22px; padding-top:18px; border-top:1px dashed var(--line);}
.hub-section-title{color:var(--gold-deep); font-size:11px; letter-spacing:1.3px; text-transform:uppercase; font-weight:700; margin-bottom:12px;}
.hub-btn{
background:rgba(217,184,115,.1); border:1px solid rgba(217,184,115,.45); color:var(--gold-deep);
padding:10px 17px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer;
transition:background .2s ease, transform .2s ease;
}
.hub-btn:hover{background:rgba(217,184,115,.2); transform:translateY(-1px);}
.hub-btn.danger{border-color:rgba(192,90,68,.45); color:var(--danger);}
.hub-btn.danger:hover{background:rgba(192,90,68,.12);}
#hub-pts-delta{background:var(--cream2); border:1px solid var(--line); color:var(--text);}
.couple-hub-inner h1{font-family:'Playfair Display',serif !important; font-weight:600 !important;}
.couple-hub-inner input, .couple-hub-inner select, .couple-hub-inner textarea{
background:var(--cream2) !important; border:1px solid var(--line) !important; color:var(--text) !important;
font-family:'Inter',sans-serif !important;
}
.rank-row{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; margin-bottom:6px; transition:background .2s ease, transform .2s ease; border:1px solid transparent;}
.rank-row:hover{background:rgba(217,184,115,.05); transform:translateX(2px);}
.rank-row.you{background:var(--green-tint); border-color:rgba(217,184,115,.25);}
.rank-row.top3{font-weight:600;}
.rank-you-tag{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--gold-deep); font-weight:700; margin-left:6px; background:var(--cream2); padding:2px 6px; border-radius:999px;}
.rank-pos{width:26px;height:26px;border-radius:50%; background:var(--gold); color:#3A2A0F; font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
/* ---------- Pódio (Ranking) ---------- */
.podium-wrap{display:flex; align-items:flex-end; justify-content:center; gap:16px; margin-bottom:28px; padding-top:20px;}
.podium-col{text-align:center; width:120px;}
.podium-name{font-weight:700; font-size:13px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.podium-xp{color:var(--gold-deep); font-weight:700; font-size:12px; margin-bottom:10px;}
.podium-platform{
border-radius:10px 10px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:10px;
box-shadow:0 -4px 16px -6px rgba(0,0,0,.2);
}
.podium-platform span{font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--noite);}
@media(max-width:520px){ .podium-wrap{gap:8px;} .podium-col{width:90px;} }
.rank-pos.other{background:var(--cream2); color:var(--text-soft);}
.rank-name{flex:1; min-width:0; font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; line-height:1.3;}
.rank-xp{font-weight:700; font-size:14px; flex-shrink:0; white-space:nowrap;}
/* jornada map */
.journey-map{padding:10px 0 0;}
.journey-node-row{display:flex; align-items:center; gap:14px; margin-bottom:6px; cursor:pointer;}
/* ---------- MÓDULOS: cartão editorial foto+creme ---------- */
.module-photo-list{display:flex; flex-direction:column; gap:16px;}
/* ---------- Grid grande de módulos (Minha Jornada), mais visível que a lista fina ---------- */
/* A grade ocupa a largura inteira e decide sozinha quantas colunas cabem:
cada pôster tem no mínimo 215px e cresce para preencher o que sobrar.
Assim não fica espaço vazio na lateral em tela nenhuma, e o pôster sai
sempre no tamanho dos de "Sua jornada", em vez de três colunas esticadas
até o fim, que davam pôsteres de meia tela de altura. */
.module-photo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:18px;}
.module-photo-card-lg{
border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--white);
transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.module-photo-card-lg:hover{transform:translateY(-4px); box-shadow:var(--shadow-strong); border-color:rgba(217,184,115,.35);}
.module-photo-card-lg.locked{cursor:default;}
.module-photo-card-lg.locked:hover{transform:none; box-shadow:none; border-color:var(--line);}
.mpclg-photo{
width:100%; aspect-ratio:var(--capa-proporcao); background-size:cover; background-position:center; position:relative;
background-color:var(--cream2); display:flex; align-items:center; justify-content:center;
}
.module-photo-card-lg.locked .mpclg-photo{filter:grayscale(55%) brightness(.75);}
.mpclg-info{padding:16px 18px 18px;}
.mpclg-title{font-family:'Playfair Display',serif; font-size:17px; font-weight:600; margin:4px 0 0; color:var(--creme);}
.module-photo-card{
display:flex; height:150px; border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid var(--line);
transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.module-photo-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft);}
.module-photo-card.locked{cursor:default;}
.module-photo-card.locked:hover{transform:none; box-shadow:none;}
.mpc-photo{
width:65%; flex-shrink:0; background-size:cover; background-position:center; position:relative;
background-color:var(--cream2); display:flex; align-items:center; justify-content:center;
}
.module-photo-card.locked .mpc-photo{filter:grayscale(60%) brightness(.75);}
.mpc-photo-fallback{color:var(--gold-deep); opacity:.55;}
.mpc-lock, .mpc-done-badge{
position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
display:flex; align-items:center; justify-content:center; color:var(--creme);
background:rgba(16,40,31,.55); backdrop-filter:blur(6px);
}
.mpc-done-badge{background:var(--green-deep); color:var(--creme);}
.mpc-info{width:35%; background:var(--cream2); padding:20px 22px; display:flex; flex-direction:column; justify-content:center;}
.mpc-num{font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:8px;}
.mpc-title{font-family:'Playfair Display',serif; font-weight:600; font-size:19px; line-height:1.2; margin:0 0 18px; color:var(--text);}
.progress-track.thin{height:3px;}
/* ---------- DEVOCIONAL: progresso conectado ---------- */
.devocional-page-wrap{max-width:1180px; margin:0 auto;}
.dev-progress-line{display:flex; align-items:center; margin-bottom:30px; flex-wrap:wrap; justify-content:center;}
.dev-progress-step{display:flex; align-items:center; gap:8px; background:none; border:none; padding:4px 2px;}
.dev-progress-dot{
width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--white); border:1.5px solid var(--line); color:var(--text-soft); font-size:12px; font-weight:700; flex-shrink:0;
}
.dev-progress-step.active .dev-progress-dot{background:var(--vida); border-color:var(--vida); color:var(--creme);}
.dev-progress-step.done .dev-progress-dot{background:var(--green-tint); border-color:var(--gold); color:var(--gold-deep);}
.dev-progress-label{font-size:12.5px; font-weight:600; color:var(--text-soft); white-space:nowrap;}
.dev-progress-step.active .dev-progress-label{color:var(--text);}
.dev-progress-connector{width:44px; height:1.5px; background:var(--line); margin:0 8px;}
@media(max-width:480px){
.dev-progress-connector{width:16px; margin:0 3px;}
.dev-progress-label{font-size:11px;}
.dev-progress-dot{width:24px; height:24px;}
}
/* ---------- Leitor bíblico compartilhado (Devocional + Bíblia) ---------- */
.reader-grid{display:grid; grid-template-columns:1fr 360px; gap:26px; align-items:start;}
@media(max-width:900px){ .reader-grid{grid-template-columns:1fr;} }
.reader-grid-solo{display:block; max-width:1040px; margin:0 auto;}
.reader-passage-immersive{padding:56px 64px;}
.reader-verses-immersive{font-size:calc(21px * var(--rfs, 1)); line-height:2.5; text-align:justify; font-family:'Fraunces','Playfair Display',serif; font-weight:400; letter-spacing:.1px;}
/* ---------- Convite pra Bíblia (dentro do Devocional), reaproveita o card premium do Kiwify ---------- */
/* ---------- Cartão claro "Devocional concluído" ---------- */
.dev-hero-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:32px 34px; margin-bottom:22px;}
.dev-hero-date{color:var(--gold-deep); font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px;}
.dev-hero-title{font-family:'Playfair Display',serif; font-size:24px; margin:0 0 16px;}
.dev-hero-verse{font-family:'Playfair Display',serif; font-style:italic; font-size:20px; line-height:1.5; color:var(--text); margin:0 0 8px; border:none; padding:0;}
.dev-hero-ref{color:var(--gold-deep); font-size:12.5px; font-weight:700; margin:0 0 14px;}
.dev-hero-reflexao{color:var(--text-soft); font-size:13.5px; line-height:1.6; margin:0;}
/* ---------- Modal imersivo da Bíblia ---------- */
.biblia-modal-immersive{
background:linear-gradient(180deg, #15382D 0%, #15382D 220px, #425F50 220px, #425F50 100%) !important;
overflow-y:auto !important; padding:40px 48px 60px;
width:min(98vw, 1680px) !important; height:min(96vh, 1040px) !important;
border-radius:22px;
}
@media(max-width:640px){
.biblia-modal-immersive{padding:24px 16px 40px;}
.biblia-modal-title{font-size:26px !important;}
.reader-passage-immersive{padding:26px 18px !important;}
}
.biblia-modal-controls{max-width:900px; margin:0 auto 24px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.biblia-modal-header{text-align:center; margin-bottom:28px;}
.biblia-modal-title{font-family:'Playfair Display',serif; font-size:38px; color:var(--creme); margin:10px 0 0;}
.biblia-modal-immersive .eyebrow{color:var(--gold);}
.biblia-modal-immersive .dev-reading-card{
background:#F0EBDD; border:none; box-shadow:0 10px 30px rgba(0,0,0,.25);
--text:#19382D; --text-soft:#66746A; --line:#DCD3BC; --gold-deep:#A47B34; --cream2:#E5DEC9;
color:var(--text);
}
.biblia-modal-immersive .biblia-pickers{justify-content:center;}
.biblia-modal-immersive .biblia-picker-btn{background:var(--white); border-color:var(--line); color:var(--text);}
.biblia-modal-immersive .biblia-picker-btn:hover{border-color:var(--gold);}
.biblia-modal-immersive .biblia-dropdown{background:var(--white); border-color:var(--line);}
.biblia-modal-immersive .biblia-dropdown-item{color:var(--text);}
.biblia-modal-immersive .biblia-dropdown-item:hover{background:var(--cream2);}
.biblia-modal-immersive #biblia-search-input{background:var(--white); border-color:var(--line); color:var(--text);}
.biblia-modal-immersive .reader-toolbar{background:var(--cream2); border-color:var(--line);}
.biblia-modal-immersive .reader-tool-btn{color:var(--text-soft);}
.biblia-modal-immersive .reader-tool-btn:hover{background:var(--white);}
.biblia-modal-immersive .reader-tool-sep{background:var(--line);}
.biblia-modal-immersive .reader-verses-wrap,
.biblia-modal-immersive .reader-verse,
.biblia-modal-immersive .reader-verses-wrap p{color:var(--text) !important;}
.biblia-modal-immersive .reader-verse-num{color:var(--gold); font-family:'Inter',sans-serif; font-weight:700;}
.biblia-modal-immersive h2{color:var(--text); font-size:26px;}
.biblia-modal-immersive .iframe-modal-close{background:var(--white); border:1px solid var(--line); color:var(--text);}
.biblia-modal-immersive .iframe-modal-close:hover{background:var(--cream2);}
.biblia-modal-immersive .btn-outline{border-color:rgba(241,233,220,.45); color:var(--creme); background:rgba(241,233,220,.06); font-weight:600;}
.biblia-modal-immersive .btn-outline:hover:not(:disabled){border-color:var(--gold); color:var(--gold); background:rgba(217,184,115,.1);}
.biblia-modal-immersive .btn-outline:disabled{border-color:rgba(241,233,220,.12); color:rgba(241,233,220,.3); background:none;}
.reader-passage-card{position:relative;}
.reader-notes-card{position:sticky; top:16px;}
.reader-notes-card textarea{width:100%; min-height:220px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--cream2); color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.6;}
.reader-note-tip{margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--cream2); font-size:12px; color:var(--text-soft); line-height:1.6;}
.reader-note-tip b{color:var(--gold-deep);}
.reader-toolbar{display:flex; align-items:center; gap:4px; flex-wrap:wrap; background:var(--cream2); border:1px solid var(--line); border-radius:10px; padding:6px; margin-bottom:22px;}
.reader-tool-group{display:flex; align-items:center; gap:8px;}
.reader-tool-btn{
display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; border:none; background:transparent;
color:var(--text-soft); font-size:12.5px; font-weight:600;
}
.reader-tool-btn:hover{background:var(--white);}
.reader-tool-btn.active{background:var(--vida); color:var(--creme);}
.reader-tool-sep{width:1px; height:20px; background:var(--line); margin:0 4px;}
.reader-font-controls{display:flex; align-items:center; gap:2px; background:var(--white); border-radius:8px; padding:2px;}
.reader-font-controls .reader-tool-btn{padding:6px 10px; font-family:'Playfair Display',serif;}
.reader-color-row{display:flex; gap:6px; align-items:center; margin-left:4px;}
.reader-color-swatch{width:20px; height:20px; border-radius:50%; border:2px solid transparent; padding:0;}
.reader-color-swatch.active{border-color:var(--gold-deep);}
.reader-verses-wrap{position:relative; font-size:calc(19px * var(--rfs, 1)); line-height:1.95; color:var(--text); font-family:'Fraunces','Playfair Display',serif; font-weight:400;}
.reader-verse{padding:1px 2px; border-radius:3px; transition:background .15s ease;}
.reader-mark{color:inherit; border-radius:2px; padding:0 1px;}
.reader-verse-num{color:var(--gold-deep); font-size:12px; font-weight:700; margin-right:6px; vertical-align:super; font-family:'Inter',sans-serif;}
.reader-verse-star{color:var(--gold-deep); margin-right:4px; display:inline-flex; vertical-align:middle;}
#reader-canvas{width:100%; height:100%;}
/* ---------- Seletores da Bíblia (livro / capítulo / versão) ---------- */
.biblia-pickers{display:flex; gap:10px; flex-wrap:wrap;}
.biblia-picker-btn{
display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--line);
background:var(--white); color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
}
.biblia-picker-btn:hover{border-color:var(--gold);}
.biblia-dropdown{
margin:8px auto 0; max-width:720px; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--white);
display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:4px; max-height:260px; overflow-y:auto;
}
.biblia-dropdown-item{
text-align:left; padding:8px 10px; border-radius:8px; border:none; background:transparent; color:var(--text);
font-size:13px; font-family:'Inter',sans-serif;
}
.biblia-dropdown-item:hover{background:var(--cream2);}
.biblia-dropdown-item.active{background:var(--vida); color:var(--creme); font-weight:600;}
.dev-step-btn{
background:var(--white); border:1px solid var(--line); color:var(--text-soft); padding:10px 18px; border-radius:999px;
font-size:12.5px; font-weight:700; letter-spacing:.3px; transition:all .2s ease;
}
.dev-step-btn.active{background:var(--vida); color:var(--creme); border-color:var(--vida);}
.dev-step-btn.done:not(.active){color:var(--gold-deep); border-color:var(--gold);}
.dev-reading-card{
background:#DCE7DD; border:1px solid #C3D3C5; border-radius:12px; padding:48px; max-width:900px; margin:0 auto;
/* essas caixas de leitura ficam sempre claras, mesmo com o resto do site escuro,
por isso redefinimos as variáveis de texto localmente aqui dentro. */
--text:#1D352A; --text-soft:#5A6B5D; --line:#C3D3C5; --gold-deep:#8A6A2E; --cream2:#CCDBCE;
color:var(--text);
}
.reader-grid .dev-reading-card{max-width:none; margin:0;}
@media(max-width:640px){ .dev-reading-card{padding:28px 22px;} }
.dev-passage-text{font-size:17px; line-height:1.9; color:var(--text); white-space:pre-wrap;}
/* ---------- Faixa editorial do devocional na Home ---------- */
.quick-card-dev{background:var(--vida) !important; border-color:var(--vida) !important;}
.quick-card-dev:hover{transform:translateY(-2px);}
/* ---------- HOME ESTILO NETFLIX ---------- */
/* ---------- Faixa de propaganda/evento rolando (Home) ---------- */
.promo-ticker{
background:linear-gradient(90deg, var(--vida), var(--forma)); border:1px solid rgba(217,184,115,.25);
border-radius:10px; overflow:hidden; margin-bottom:18px; white-space:nowrap; position:relative;
}
.promo-ticker.clickable{cursor:pointer;}
.promo-ticker-track{display:inline-block; padding:11px 0; animation:promoScroll 26s linear infinite;}
.promo-ticker:hover .promo-ticker-track{animation-play-state:paused;}
.promo-ticker-item{color:var(--creme); font-size:13px; font-weight:600; letter-spacing:.3px; padding:0 40px; position:relative;}
.promo-ticker-item::after{content:"✦"; color:var(--gold); position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:10px;}
@keyframes promoScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(max-width:640px){
.promo-ticker-track{padding:8px 0;}
.promo-ticker-item{font-size:11.5px; padding:0 26px;}
}
/* A hero NÃO é um card: sai do padding do .content e vai da sidebar até o limite direito. */
.netflix-hero{
position:relative; margin:0 -34px 4px; height:clamp(520px, 68vh, 650px);
overflow:hidden; border-radius:0;
/* fundo próprio da hero também se dissolve na base, nada de cor sólida até o fim */
background:linear-gradient(180deg, var(--vida) 0%, var(--vida) 58%, rgba(21,56,45,.55) 80%, transparent 100%);
}
/* CAMADA 1, a fotografia ocupando 100% da hero, de ponta a ponta. object-position prioriza
a parte de cima (rostos) e puxa o casal pro centro/centro-direita. Escurecimento mínimo. */
.nh-bg-img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% 26%;
z-index:0; filter:brightness(.94); display:block;
/* pede ao navegador a reamostragem de melhor qualidade ao redimensionar a foto */
image-rendering:auto; -ms-interpolation-mode:bicubic;
backface-visibility:hidden;
/* a foto some progressivamente na base. Como ela fica TRANSPARENTE (e não coberta por uma
cor fixa), o que aparece embaixo é o fundo real da página, então combina sempre, em
qualquer tamanho de tela ou altura de página. */
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.65) 76%, rgba(0,0,0,.28) 89%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.65) 76%, rgba(0,0,0,.28) 89%, transparent 100%);
animation:heroPhotoFade .5s ease-out both;
}
/* CAMADA 2a, overlay ESQUERDO longo pra leitura do texto: a foto continua existindo,
discretamente, atrás da região do texto; o verde desaparece aos poucos até ~70%. */
.nh-fusion-overlay{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(90deg,
rgba(8,55,43,.96) 0%, rgba(8,55,43,.90) 18%,
rgba(8,55,43,.70) 32%, rgba(8,55,43,.35) 45%,
rgba(8,55,43,.08) 58%, transparent 70%
);
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
/* CAMADA 2b, tom localizado, tudo muito leve: um véu verde quase nulo no centro e um pouco
mais presente na extremidade direita (integra com o card), sem monocromia e sem "noturno". */
.nh-fusion-overlay::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(90deg, transparent 58%, rgba(8,55,43,.05) 76%, rgba(8,55,43,.13) 90%, rgba(8,55,43,.20) 100%),
linear-gradient(180deg, rgba(8,55,43,.08) 0%, transparent 22%);
}
/* CAMADA 2c, fusão INFERIOR longa (começa em ~55%), sem blur, sem faixa: o verde da página
"sobe" tão devagar que não dá pra apontar onde a foto termina. Termina exatamente no fundo
da seção seguinte. */
.nh-bottom-fade{
position:absolute; left:0; right:0; bottom:0; top:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,
transparent 52%, rgba(21,56,45,.12) 66%, rgba(21,56,45,.26) 78%,
rgba(21,56,45,.22) 92%, transparent 100%
);
}
/* CAMADA 3, conteúdo. Texto à esquerda, centralizado na vertical, um pouco abaixo da busca. */
.nh-text-col{
position:absolute; top:0; bottom:0; left:0; z-index:3; width:36%; min-width:300px; max-width:500px;
padding:80px 0 30px 34px; display:flex; flex-direction:column; justify-content:center;
animation:heroTextIn .5s cubic-bezier(.22,1,.36,1) .15s both;
}
.netflix-hero .hero-editorial-name{font-size:clamp(28px,3vw,40px); line-height:1.06;}
.netflix-hero .hero-editorial-sub{margin:0 0 18px; font-size:14px;}
/* "Sua Jornada", flutua sobre a foto, a ~4.5% da direita, equilibrado na vertical. Vidro discreto. */
.nh-jornada-card{
position:absolute; top:50%; right:4.5%; transform:translateY(-44%); z-index:3; width:200px;
background:rgba(10,38,29,.58); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
border:1px solid rgba(217,184,115,.22); border-radius:14px; padding:20px 16px;
box-shadow:0 10px 28px -16px rgba(0,0,0,.35); text-align:center;
animation:heroCardIn .45s cubic-bezier(.22,1,.36,1) .3s both;
}
/* "Role para continuar", bem discreto, some ao rolar */
.nh-scroll-hint{
position:absolute; right:4.5%; bottom:14px; z-index:3; display:flex; align-items:center; gap:7px;
color:rgba(241,233,220,.68); font-size:10.5px; letter-spacing:.4px; pointer-events:none;
animation:heroTextIn .4s cubic-bezier(.22,1,.36,1) .5s both;
transition:opacity .35s ease;
}
.nh-scroll-hint.is-hidden{opacity:0 !important;}
.nh-scroll-wheel{animation:scrollWheel 2.2s ease-in-out infinite;}
.nh-scroll-arrow{animation:scrollArrow 2.2s ease-in-out infinite;}
@keyframes scrollWheel{0%,100%{transform:translateY(0); opacity:1;} 50%{transform:translateY(4px); opacity:.35;}}
@keyframes scrollArrow{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}
@keyframes heroPhotoFade{from{opacity:0;} to{opacity:1;}}
@keyframes heroTextIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
@keyframes heroCardIn{from{opacity:0; transform:translateY(-44%) translateY(6px);} to{opacity:1; transform:translateY(-44%);}}
@media(prefers-reduced-motion:reduce){
.nh-scroll-wheel, .nh-scroll-arrow{animation:none;}
.nh-text-col, .nh-scroll-hint{animation:heroPhotoFade .4s ease-out both;}
.nh-jornada-card{animation:none;}
.nh-bg-img{transform:none !important;}
}
/* notebooks: título e card reduzem antes de mexer na foto */
@media(max-width:1180px){
.netflix-hero .hero-editorial-name{font-size:clamp(26px,2.8vw,34px);}
.nh-jornada-card{width:186px; padding:16px 12px;}
.nh-text-col{width:38%;}
}
/* As seções abaixo da hero acompanham a largura da tela até 1480px, em vez de parar em
1112px e deixar uma faixa vazia na lateral. Em telas maiores que isso, a coluna se
centraliza, então a sobra fica igual dos dois lados. */
.main-col.home-hero-mode #sub-home > *:not(.netflix-hero){max-width:1480px; margin-left:auto; margin-right:auto;}
.main-col.home-hero-mode .content{max-width:none;}
.nh-xp-ring-wrap{position:relative; margin:0 auto 16px; width:fit-content;}
.nh-xp-ring-wrap::before{
content:""; position:absolute; inset:-18px; border-radius:50%; z-index:-1;
background:radial-gradient(circle, rgba(217,184,115,.14), transparent 72%);
}
.nh-xp-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.nh-xp-ring-center .n{font-family:'Playfair Display',serif; font-size:24px; color:var(--creme); font-weight:600; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.4);}
.nh-xp-ring-center .l{font-size:8.5px; letter-spacing:1px; color:var(--gold); margin-top:4px; font-weight:700;}
.nh-xp-level-row{display:flex; align-items:center; gap:10px; margin-bottom:8px; text-align:left;}
.nh-xp-level-seal{width:30px; height:30px; border-radius:50%; background:rgba(217,184,115,.16); border:1px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.nh-xp-level-name{color:var(--creme); font-weight:700; font-size:13px; text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.4);}
.nh-xp-level-sub{color:rgba(241,233,220,.7); font-size:10px; text-align:left;}
.nh-xp-next{font-size:10.5px; color:rgba(241,233,220,.75); margin:6px 0 16px; line-height:1.4;}
.nh-level-track{display:flex; align-items:center; gap:0; justify-content:center;}
.nh-level-node{width:7px; height:7px; border-radius:50%; background:rgba(217,184,115,.3); flex-shrink:0;}
.nh-level-node.past{background:var(--gold);}
.nh-level-node.current{width:11px; height:11px; background:var(--gold); box-shadow:0 0 0 3px rgba(217,184,115,.22);}
.nh-level-line{width:14px; height:1px; background:rgba(217,184,115,.3);}
/* ---------- Hero simples e independente, só pro celular ---------- */
.mobile-hero-simple{display:none;}
@media(max-width:860px){
.netflix-hero{display:none;}
.mobile-hero-simple{
display:block; border-radius:18px; overflow:hidden; background:var(--vida); margin:8px 0 28px;
border:1px solid rgba(217,184,115,.16);
}
/* A altura fixa de antes (190px) deixava a foto numa faixa larga e baixa:
numa tela de celular isso é quase o dobro de largura por altura, então a
imagem entrava cortada em cima e embaixo. Agora a faixa acompanha a
proporção da foto (4:3), com um teto para não engolir a tela inteira. */
.mhs-img{
width:100%; aspect-ratio:var(--foto-casal-proporcao); max-height:min(320px, 40vh);
background-size:cover; background-position:center; background-color:var(--vida);
}
.mhs-img-empty{background:linear-gradient(155deg, var(--forma), var(--vida)); aspect-ratio:16/7;}
.mhs-body{padding:22px 20px 20px;}
.mhs-title{
font-family:'Playfair Display',serif; font-weight:500; font-size:26px; line-height:1.1; color:var(--creme);
margin:0 0 8px;
}
.mhs-sub{color:rgba(245,241,232,.75); font-size:13.5px; line-height:1.5; margin:0;}
/* O botão principal da capa no celular: com 42px de altura ele ficava dois
pixels abaixo da medida que um dedo acerta de primeira. */
.mhs-cta{margin-top:18px; width:100%; min-height:46px; text-align:center;
justify-content:center; display:flex; align-items:center;}
.mhs-pts{
display:flex; align-items:center; gap:14px; padding:16px 20px; border-top:1px solid rgba(217,184,115,.16);
}
.mhs-pts-num{font-family:'Playfair Display',serif; font-size:22px; font-weight:600; color:var(--gold); flex-shrink:0;}
.mhs-pts-info{flex:1; min-width:0;}
.mhs-pts-level{font-size:11.5px; font-weight:700; letter-spacing:.5px; color:var(--creme); margin-bottom:6px;}
.mhs-pts-level span{color:rgba(245,241,232,.55); font-weight:500; text-transform:none; letter-spacing:0;}
.mhs-pts-track{height:4px; border-radius:999px; background:rgba(217,184,115,.2); overflow:hidden;}
.mhs-pts-track-fill{height:100%; background:var(--gold-grad); border-radius:999px;}
}
@media(max-width:420px){
.mhs-img{max-height:min(280px, 38vh);}
.mhs-title{font-size:22px;}
}
.netflix-hero-nav{
display:flex; gap:22px; flex-wrap:wrap; margin-bottom:34px; border-bottom:1px solid rgba(245,241,232,.16); padding-bottom:0;
}
.nx-nav-btn{
background:none; color:rgba(245,241,232,.55); border:none; border-bottom:2px solid transparent;
padding:0 0 12px; font-size:12.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
transition:color .2s ease, border-color .2s ease;
}
.nx-nav-btn.active{color:var(--creme); border-bottom-color:var(--proposito);}
.nx-nav-btn:hover{color:var(--creme);}
.netflix-hero-content{max-width:480px; position:relative;}
.netflix-hero .hero-editorial-name{margin:0 0 14px;}
.netflix-row{margin-bottom:56px;}
@media(max-width:640px){
.hide-on-mobile-home{display:none;}
.netflix-row{margin-bottom:34px;}
.section-title{font-size:19px !important;}
.quick-card{padding:16px;}
.eyebrow{font-size:10px;}
}
.netflix-row .section-title{margin-bottom:16px;}
.netflix-scroll{display:flex; gap:16px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity;}
.netflix-scroll::-webkit-scrollbar{height:6px;}
.netflix-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px;}
/* pôster dos módulos maior: aproveita a largura nova e deixa a capa mais legível */
.poster-card{width:216px; flex-shrink:0; cursor:pointer; scroll-snap-align:start; transition:transform .2s ease;}
.poster-card:hover{transform:translateY(-3px);}
.poster-card.locked{cursor:default;}
.poster-card.locked:hover{transform:none;}
.poster-photo{
width:100%; aspect-ratio:var(--capa-proporcao); border-radius:8px; background-size:cover; background-position:center;
background-color:var(--cream2); position:relative; display:flex; align-items:center; justify-content:center;
margin-bottom:8px; border:1px solid var(--line);
}
.cw-card{width:270px; flex-shrink:0; cursor:pointer; scroll-snap-align:start; transition:transform .2s ease; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--cream2);}
.cw-card:hover{transform:translateY(-2px) scale(1.015);}
.cw-photo{
width:100%; aspect-ratio:var(--capa-proporcao); background-size:cover; background-position:center;
background-color:var(--sage); position:relative; display:flex; align-items:center; justify-content:center;
}
.cw-photo.locked{filter:saturate(.65) brightness(.92);}
.cw-lock{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:var(--creme); color:var(--vida); display:flex; align-items:center; justify-content:center;}
.cw-info{padding:12px 14px 14px;}
.cw-num{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:4px;}
.cw-title{font-size:14px; font-weight:700; margin-bottom:8px;}
.netflix-row{position:relative;}
.netflix-row-arrow{
position:absolute; top:50%; right:-6px; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
background:var(--text); border:1px solid rgba(217,184,115,.4); display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px -6px rgba(0,0,0,.35); z-index:3; color:#173C2D; transition:transform .2s ease, background .2s ease;
}
.netflix-row-arrow:hover{background:#F8F1E4; transform:translateY(-50%) scale(1.06);}
.netflix-row-arrow.left{right:auto; left:-6px;}
.netflix-row-arrow.left svg{transform:rotate(180deg);}
.poster-card.locked .poster-photo{filter:saturate(.65) brightness(.92);}
.poster-fallback{color:var(--gold-deep); opacity:.5;}
.poster-lock{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:var(--creme); color:var(--vida); display:flex; align-items:center; justify-content:center;}
.poster-title{font-size:12.5px; font-weight:600; margin-bottom:6px; line-height:1.3;}
@media(max-width:640px){
.module-photo-card{height:auto; flex-direction:column;}
.mpc-photo, .mpc-info{width:100%;}
.mpc-photo{height:120px;}
.poster-card{width:158px;} /* no celular o pôster volta ao tamanho antigo */
}
.journey-node{
width:56px;height:56px;border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
background:var(--cream2); color:var(--text-soft); position:relative; border:2px solid transparent;
}
.journey-node.done{background:var(--green-deep); color:var(--creme);}
.journey-node.current{background:var(--white); border-color:var(--green-deep); color:var(--green-deep);}
.journey-node .num{position:absolute; bottom:-6px; right:-4px; width:20px;height:20px;border-radius:50%; background:var(--white); border:1px solid var(--line); font-size:10.5px; display:flex;align-items:center;justify-content:center; color:var(--text-soft);}
.journey-info{}
.journey-info .t{font-weight:600; font-size:15px;}
.journey-info .s{font-size:12.5px; color:var(--text-soft);}
.journey-connector{width:2px; height:26px; background:var(--line); margin-left:27px;}
.module-list-row{display:flex; justify-content:space-between; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); cursor:pointer;}
.module-list-row:last-child{border-bottom:none;}
.module-list-row:hover .m-title{color:var(--green-deep);}
.m-left{display:flex; align-items:center; gap:16px;}
.m-num{width:30px;height:30px;border-radius:50%; background:var(--cream2); display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:700; color:var(--text-soft);}
.m-num.done{background:var(--green-deep); color:var(--creme);}
.m-title{font-weight:600; font-size:15px;}
.m-desc{font-size:12.5px; color:var(--text-soft); margin-top:2px;}
.m-right{display:flex; align-items:center; gap:16px;}
.m-progress-mini{width:70px; height:6px; border-radius:99px; background:var(--cream2); overflow:hidden;}
.m-progress-mini > div{height:100%; background:var(--gold-deep);}
.m-status{font-size:12.5px; color:var(--text-soft); min-width:78px; text-align:right;}
.locked-tag{font-size:12px; color:var(--text-soft);}
/* module detail */
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-soft); margin-bottom:14px; cursor:pointer; font-weight:600; background:none; border:none; padding:0;}
.back-link:hover{color:var(--text);}
.video-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:18px;}
/* ---------- CARD "ASSISTIR NO KIWIFY" (estilo cinematográfico) ---------- */
.kiwify-video-card{
position:relative; overflow:hidden; border-radius:18px; padding:60px 26px;
background:#17382D; border:1px solid rgba(211,178,105,.16);
text-align:center; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.biblia-invite-card2{aspect-ratio:auto; padding:70px 26px 34px;}
@media(max-width:480px){ .biblia-invite-card2{padding:56px 20px 26px;} }
/* usada em outros cartões (desafio da semana, próximo evento, carta com IA, bíblia) */
.kvc-chip{
position:absolute; top:16px; left:16px; background:var(--white); backdrop-filter:blur(6px);
color:var(--text); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
padding:6px 12px; border-radius:999px; border:1px solid var(--line);
display:inline-flex; align-items:center; gap:6px;
}
.kvc-glow{display:none;}
.kvc-play{
position:relative; width:74px; height:74px; flex-shrink:0; margin:14px auto 18px; border-radius:50%;
background:var(--gold-grad); display:flex; align-items:center; justify-content:center;
box-shadow:0 16px 34px -14px rgba(201,169,110,.6); transition:transform .25s ease;
}
.kiwify-video-card:hover .kvc-play{transform:scale(1.08);}
.kvc-title{color:var(--creme); font-size:18px; margin:0 0 6px; position:relative;}
.kvc-sub{color:rgba(241,233,220,.75); font-size:13px; margin:0 0 22px; position:relative; max-width:280px; margin-left:auto; margin-right:auto;}
.video-frame-wrap{position:relative; background:var(--dark2); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;}
.video-frame-wrap iframe{width:100%;height:100%;border:0;}
.video-placeholder{color:var(--text-soft); text-align:center; padding:24px; font-size:13.5px; line-height:1.6;}
/* ---------- Player de vídeo embutido do módulo ---------- */
.video-player-card{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.vpc-frame{
position:relative; width:100%; aspect-ratio:16/9; background:linear-gradient(155deg, #123A2D, #0A241C);
-webkit-user-select:none; user-select:none;
}
.vpc-frame img, .vpc-frame video{-webkit-user-drag:none; user-drag:none;}
.vpc-frame iframe, .vpc-frame video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#0E1512;}
.video-edit-btn{position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.45); color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:8px; padding:6px 10px; font-size:11.5px;}
.video-meta{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; flex-wrap:wrap; gap:10px;}
.video-who{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px;}
/* ---------- Tela de vídeo grande, estilo YouTube ---------- */
.video-theater{width:100%; max-width:100%;}
/* ---------- Página do módulo: layout de duas colunas ---------- */
.lesson-grid{display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; margin-top:22px;}
@media(max-width:980px){ .lesson-grid{grid-template-columns:1fr;} }
.lesson-main{min-width:0;}
.lesson-resource-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
@media(max-width:900px){ .lesson-resource-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .lesson-resource-grid{grid-template-columns:1fr;} }
.lesson-resource-card{
background:linear-gradient(155deg, #103E32, #0B4032); border:1px solid rgba(211,178,105,.16); border-radius:16px; padding:20px 18px;
cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.lesson-resource-card:hover{transform:translateY(-3px); border-color:rgba(211,178,105,.4); box-shadow:0 14px 30px -16px rgba(0,0,0,.4);}
.lesson-resource-card.disabled{cursor:default;}
.lesson-resource-card.disabled:hover{transform:none; border-color:rgba(211,178,105,.16); box-shadow:none;}
.lrc-icon{
width:38px; height:38px; border-radius:50%; background:rgba(217,184,115,.14); color:var(--gold);
display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.lrc-label{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px;}
.lrc-title{font-family:'Playfair Display',serif; color:var(--creme); font-size:14.5px; line-height:1.3; margin-bottom:10px;}
.lrc-cta{font-size:11.5px; color:#CBD2C7; font-weight:600; display:inline-flex; align-items:center; gap:4px; transition:color .2s ease, gap .2s ease;}
.lesson-resource-card:hover:not(.disabled) .lrc-cta{color:var(--gold); gap:7px;}
.lesson-side{display:flex; flex-direction:column; gap:16px;}
.lesson-side-card{
background:linear-gradient(155deg, #164638, #103E32); border:1px solid rgba(211,178,105,.16); border-radius:16px; padding:18px 20px;
transition:transform .25s ease, border-color .25s ease;
}
.lesson-side-card:hover{border-color:rgba(211,178,105,.32);}
.lsc-title{font-family:'Playfair Display',serif; color:var(--creme); font-size:14.5px; margin-bottom:12px;}
/* ---------- Painel da aula: três cartões viraram um ----------
Antes esta coluna repetia rótulo, explicação e resposta de cada coisa
("Status do parceiro / Fulano assistiu / Ainda não / Respondeu as perguntas /
Ainda não"). No celular isso empilhava e virava uma parede de texto embaixo
do vídeo. Agora é um cartão só: a ação principal em cima, as perguntas no
meio e o parceiro numa linha de selos. */
.aula-painel{
background:linear-gradient(155deg, #164638, #103E32); border:1px solid rgba(211,178,105,.16);
border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px;
}
.aula-acao{
width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
padding:14px 16px; border-radius:12px; cursor:pointer; font-size:13.5px; font-weight:700;
border:1px solid rgba(217,184,115,.42); background:rgba(217,184,115,.1); color:var(--gold);
transition:background .2s ease, border-color .2s ease, color .2s ease;
font-family:inherit; min-height:48px;
}
.aula-acao:hover{background:rgba(217,184,115,.18);}
.aula-acao-ic{
width:22px; height:22px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1.5px solid rgba(217,184,115,.5); color:transparent; transition:all .2s ease;
}
.aula-acao.feito{background:var(--gold-grad); border-color:transparent; color:var(--noite);}
.aula-acao.feito .aula-acao-ic{background:rgba(26,42,34,.22); border-color:transparent; color:var(--noite);}
.aula-linha{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:13px 14px; border-radius:12px; cursor:pointer; text-align:left; min-height:48px;
border:1px solid rgba(241,233,220,.12); background:rgba(255,255,255,.03);
color:var(--creme); font-family:inherit; transition:border-color .2s ease, background .2s ease;
}
.aula-linha:hover{border-color:rgba(217,184,115,.35); background:rgba(255,255,255,.06);}
.aula-linha-tx{font-size:13px; font-weight:600;}
.aula-linha-st{
font-size:11.5px; font-weight:700; color:var(--gold); flex-shrink:0;
display:inline-flex; align-items:center; gap:4px;
}
.aula-linha-st.ok{color:#9BD3AE;}
.aula-parceiro{
display:flex; align-items:center; flex-wrap:wrap; gap:6px;
padding:11px 14px 2px; border-top:1px solid rgba(241,233,220,.1);
}
.aula-parceiro-nome{font-size:11.5px; font-weight:700; color:rgba(241,233,220,.75); margin-right:2px;}
.aula-selo{
font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;
background:rgba(241,233,220,.07); color:rgba(241,233,220,.5);
border:1px solid transparent;
}
.aula-selo.ok{background:rgba(155,211,174,.14); color:#9BD3AE; border-color:rgba(155,211,174,.28);}
.video-theater .video-player-card{border-radius:16px; border-color:rgba(217,184,115,.22);}
/* ---------- Modal "Assistir como casal" ---------- */
.video-casal-modal-inner{
background:var(--vida) !important; overflow-y:auto; padding:48px;
width:min(980px, 96vw) !important; height:min(84vh, 720px) !important;
}
.chip{font-size:10.5px; padding:3px 9px; border-radius:999px; background:var(--cream2); color:var(--text-soft); font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
.chip.ok{background:var(--green-tint); color:var(--green-deep);}
.check-btn{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--white); color:var(--text-soft);}
.check-btn.done{background:var(--green-tint); border-color:var(--green-deep); color:var(--green-deep);}
/* ---------- LISTA DE ATIVIDADES DO MÓDULO (e-book, perguntas, nps, gamificação) ---------- */
.module-actions{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.couple-page-link-card{
position:relative; overflow:hidden; display:flex; align-items:center; gap:20px; background:var(--vida); border-radius:16px; padding:28px 30px;
margin-top:16px; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; border:1px solid rgba(217,184,115,.2);
}
.couple-page-link-card::after{
content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
background-image:url("data:image/svg+xml;utf8,");
pointer-events:none;
}
.couple-page-link-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-strong); border-color:rgba(217,184,115,.4);}
.cplc-icon{width:52px; height:52px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--gold-grad); color:var(--noite); position:relative; z-index:1;}
.cplc-title{color:var(--creme); font-weight:700; font-size:17px; margin-bottom:6px; font-family:'Playfair Display',serif; position:relative; z-index:1;}
.cplc-sub{color:rgba(241,233,220,.7); font-size:13px; line-height:1.5; max-width:480px; position:relative; z-index:1;}
.cplc-arrow{
color:var(--gold); flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(217,184,115,.3);
display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:transform .25s ease, background .25s ease;
}
.couple-page-link-card:hover .cplc-arrow{transform:translateX(3px); background:rgba(217,184,115,.12);}
.module-action-item{
display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
border:1px solid var(--line); background:var(--white); width:100%; text-align:left;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.module-action-item:not(:disabled):hover{transform:translateY(-2px); box-shadow:var(--shadow-soft); border-color:rgba(201,169,110,.5);}
.module-action-item:disabled{cursor:default; opacity:.85;}
.mai-icon{
width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:var(--cream2); color:var(--gold-deep); border:1px solid rgba(201,169,110,.3);
}
.module-action-item.done .mai-icon{background:var(--green-tint); color:var(--green-deep); border-color:transparent;}
.module-action-item:disabled:not(.done) .mai-icon{background:var(--cream2); color:var(--text-soft); border-color:var(--line);}
.mai-text{flex:1; min-width:0;}
.mai-title{font-weight:700; font-size:14px;}
.mai-sub{font-size:12px; color:var(--text-soft); margin-top:2px;}
.mai-status{flex-shrink:0; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;}
.mai-status.pending{color:var(--gold-deep);}
.mai-status.done{color:var(--green-deep);}
.points-banner{
display:flex; align-items:center; gap:14px; background:linear-gradient(155deg, #164638, #103E32);
border:1px solid rgba(217,184,115,.18); border-radius:14px; padding:14px 20px; font-size:13.5px; color:var(--creme); margin-bottom:18px;
}
.points-banner-ic{width:34px; height:34px; border-radius:50%; background:rgba(217,184,115,.14); color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.points-banner b{color:var(--gold); font-weight:700;}
.points-banner b{color:var(--text);}
/* O texto vive dentro de um span: sem isso, cada pedaço da frase virava uma
coluna do flex e a frase quebrava em três blocos no celular. */
.points-banner > span{flex:1; min-width:0; line-height:1.55;}
.cta-together{display:flex; align-items:center; gap:16px; background:var(--green-tint); border:1px solid #CFE0D4; border-radius:16px; padding:20px; margin-top:6px;}
.cta-together .ic{width:44px;height:44px;border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cta-together .t{font-weight:600; font-size:15px;}
.cta-together .s{font-size:12.5px; color:var(--text-soft);}
textarea, select{
width:100%; padding:12px 14px; border-radius:10px;
border:1px solid rgba(216,182,117,.34); font-size:14px; font-family:'Inter',sans-serif;
resize:vertical; background:rgba(0,0,0,.32);
color:var(--text); transition:border-color .2s ease, background .2s ease;
}
textarea::placeholder{color:rgba(209,204,192,.62);}
textarea:focus, select:focus{outline:none; border-color:var(--gold); background:rgba(0,0,0,.42);}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:13px; font-weight:600; margin-bottom:7px;}
.nps-scale{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;}
.nps-dot{width:34px;height:34px;border-radius:8px; border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:600; color:var(--text-soft); background:var(--white);}
.nps-dot.sel{background:var(--green-deep); color:var(--creme); border-color:var(--green-deep);}
.nps-anchors{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-soft); margin-bottom:16px;}
.yn-row{display:flex; gap:10px; flex-wrap:wrap;}
.yn-btn{flex:1; min-width:140px; padding:11px; border-radius:10px; border:1px solid var(--line); background:var(--white); font-weight:600; font-size:13.5px; color:var(--text-soft);}
.yn-btn.sel{background:var(--green-tint); border-color:var(--green-deep); color:var(--green-deep);}
.wizard-progress{font-size:11.5px; color:var(--text-soft); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.wizard-nav{display:flex; justify-content:space-between; gap:14px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(217,184,115,.14);}
.wizard-nav .btn{padding:12px 22px; font-size:13px;}
/* cards do casal */
.cards-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:14px;}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(4,1fr);}}
.flip-card{
aspect-ratio:3/4; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer;
color:var(--gold-deep); position:relative; border:1px solid var(--line);
background:linear-gradient(155deg, var(--cream2), var(--white));
transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.flip-card::before{
content:""; position:absolute; inset:6px; border:1px dashed rgba(201,169,110,.35); border-radius:8px; pointer-events:none;
}
.flip-card .fc-num{position:absolute; top:8px; left:10px; font-size:9.5px; font-weight:700; color:var(--text-soft); letter-spacing:.5px;}
.flip-card.flipped{background:linear-gradient(155deg, var(--green-tint), var(--white)); color:var(--green-deep);}
.flip-card:hover{transform:translateY(-4px) scale(1.03); box-shadow:var(--shadow-soft); border-color:rgba(201,169,110,.5);}
.card-modal-backdrop{position:fixed; inset:0; background:rgba(34,57,46,0.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.nps-overlay{position:fixed; inset:0; background:rgba(34,57,46,0.65); z-index:70; display:none; align-items:center; justify-content:center; padding:20px;}
.nps-overlay.show{display:flex;}
.nps-overlay-panel{background:var(--white); max-width:560px; width:100%; max-height:88vh; overflow-y:auto; border-radius:20px; padding:38px 34px; position:relative;}
.nps-overlay-close{position:absolute; top:16px; right:16px; width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:var(--white); display:flex;align-items:center;justify-content:center; cursor:pointer; color:var(--text-soft);}
.nps-overlay-close:hover{color:var(--text); border-color:var(--gold-deep);}
/* ---------- COMEMORAÇÃO (conclusão de módulo/tarefa) ---------- */
.celebrate-modal{
position:fixed; inset:0; z-index:260; display:none; align-items:center; justify-content:center; padding:24px;
background:rgba(20,32,26,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.celebrate-modal.show{display:flex;}
.celebrate-confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
/* Os confetes ficavam empilhados no pé da tela para sempre. Duas causas juntas:
a animação terminava com opacidade .9, ou seja, visível, e o "forwards" manda o
navegador segurar exatamente esse último quadro. Resultado: cada peça parava no
fundo e ficava lá. Agora eles somem antes de chegar, e o JavaScript ainda limpa
as peças quando a queda acaba. */
.confetti-piece{position:absolute; top:-20px; border-radius:2px; opacity:0; animation:confetti-fall linear forwards;}
@keyframes confetti-fall{
0%{opacity:0; transform:translateY(-10px) rotate(0deg);}
8%{opacity:1;}
75%{opacity:1;}
100%{opacity:0; transform:translateY(100vh) rotate(540deg);}
}
.celebrate-box{
position:relative; z-index:2; width:min(420px,92vw); text-align:center; padding:44px 32px;
background:var(--white); border-radius:24px; box-shadow:var(--shadow-strong);
animation:celebrateBoxIn .5s cubic-bezier(.2,.9,.25,1.15);
}
@keyframes celebrateBoxIn{
0%{opacity:0; transform:scale(.75) translateY(20px);}
60%{opacity:1; transform:scale(1.04) translateY(0);}
100%{opacity:1; transform:scale(1) translateY(0);}
}
.celebrate-badge{
width:82px; height:82px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); box-shadow:0 20px 40px -16px rgba(201,169,110,.6);
animation:celebrateBadgePop .6s cubic-bezier(.2,.9,.25,1.3) .1s both, celebrateBadgeGlow 2.2s ease-in-out .7s infinite;
}
@keyframes celebrateBadgePop{0%{transform:scale(0) rotate(-30deg);} 100%{transform:scale(1) rotate(0deg);}}
@keyframes celebrateBadgeGlow{0%,100%{box-shadow:0 20px 40px -16px rgba(201,169,110,.6);} 50%{box-shadow:0 22px 48px -12px rgba(201,169,110,.85);}}
.iframe-modal{
position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; padding:24px;
background:rgba(8,24,18,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@media(max-width:480px){ .iframe-modal{padding:10px;} }
.iframe-modal.show{display:flex;}
.iframe-modal-inner{
width:min(920px, 94vw); height:min(720px, 92vh); background:var(--noite); border-radius:26px; overflow:hidden;
position:relative; box-shadow:var(--shadow-strong);
transform:perspective(1400px) rotateY(-14deg) scale(.82); opacity:0;
animation:cardGrowIn .5s cubic-bezier(.22,.85,.3,1.1) forwards;
}
@keyframes cardGrowIn{
0%{transform:perspective(1400px) rotateY(-14deg) scale(.8); opacity:0;}
60%{transform:perspective(1400px) rotateY(2deg) scale(1.02); opacity:1;}
100%{transform:perspective(1400px) rotateY(0deg) scale(1); opacity:1;}
}
/* só o quadro do episódio vira coluna, os outros modais seguem como estavam */
#iframe-modal .iframe-modal-inner{display:flex; flex-direction:column;}
.iframe-modal-frame{width:100%; flex:1; min-height:0; border:0; display:block; background:var(--noite);}
/* Barra abaixo do player: título do episódio e a saída para o YouTube, para o caso de
o canal não permitir a incorporação daquele vídeo. Fica escondida quando está vazia. */
.iframe-modal-rodape{
display:none; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
padding:14px 20px; background:rgba(0,0,0,.35); border-top:1px solid rgba(255,255,255,.08);
color:var(--creme); flex-shrink:0;
}
.iframe-modal-rodape:not(:empty){display:flex;}
.ifm-titulo{font-size:13.5px; font-weight:600; line-height:1.4; flex:1; min-width:0;}
.ifm-link{
display:inline-flex; align-items:center; gap:7px; flex-shrink:0; text-decoration:none;
font-size:12px; font-weight:700; color:var(--gold); border:1px solid rgba(217,184,115,.4);
padding:8px 14px; border-radius:999px; transition:background .2s ease;
}
.ifm-link:hover{background:rgba(217,184,115,.12);}
@media(max-width:520px){
.iframe-modal-rodape{padding:12px 14px;}
.ifm-link{width:100%; justify-content:center;}
}
.iframe-modal-close{
position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%;
background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.iframe-modal-close:hover{background:rgba(0,0,0,.6);}
.card-modal{background:var(--white); border-radius:20px; padding:48px 44px; max-width:480px; width:100%; text-align:center; border:1px solid rgba(217,184,115,.2);}
.card-modal .num{color:var(--gold-deep); font-weight:700; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;}
.card-modal .quote-mark{display:block; font-family:'Playfair Display',serif; color:var(--gold); font-size:44px; line-height:.6; margin:14px 0 4px;}
.card-modal p{font-family:'Playfair Display',serif; font-size:23px; font-style:normal; font-weight:500; line-height:1.5; letter-spacing:.1px; color:var(--text); margin:0 0 28px;}
.chat-empty{color:var(--text-soft); font-style:italic; text-align:center; margin:auto;}
.chat-input-row{display:flex; gap:10px;}
.chat-input-row input{flex:1; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--cream2);}
.send-btn{width:46px;height:46px;border-radius:50%; background:var(--green-deep); color:var(--white); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
/* ---------- FEED DA COMUNIDADE (curtir / comentar / compartilhar) ---------- */
.community-delete-btn{
background:none; border:none; color:var(--text-soft); padding:6px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.community-delete-btn:hover{background:var(--cream2); color:var(--danger);}
.community-action-btn{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border-radius:9px;
border:none; background:transparent; color:var(--text-soft); font-size:12.5px; font-weight:700; transition:background .2s ease, color .2s ease;
}
.community-action-btn:hover{background:var(--cream2);}
.community-action-btn.active{color:#C76363;}
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--dark); color:var(--creme); padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:99; opacity:0; transition:opacity .25s ease, transform .25s ease; display:flex; align-items:center; gap:8px; max-width:90vw; text-align:center;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}
.toast .gem-ic{color:var(--gold);}
.footer-note{text-align:center; color:var(--text-soft); font-size:12px; letter-spacing:.5px; text-transform:uppercase; margin-top:40px; opacity:.75;}
.empty-soon{display:flex; flex-direction:column; align-items:center; gap:14px; padding:50px 20px; text-align:center; color:var(--text-soft);}
.support-fab{
position:fixed; bottom:22px; right:22px; background:var(--green-deep); color:var(--creme); border:none; border-radius:999px;
width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden;
font-weight:700; font-size:12.5px; letter-spacing:.2px;
box-shadow:var(--shadow-soft); z-index:40; transition:width .25s ease, box-shadow .25s ease, transform .2s ease;
}
.support-fab-label{max-width:0; opacity:0; white-space:nowrap; overflow:hidden; transition:max-width .25s ease, opacity .2s ease;}
.support-fab:hover{width:170px; padding:0 16px 0 14px; justify-content:flex-start; box-shadow:var(--shadow-strong);}
.support-fab:hover .support-fab-label{max-width:140px; opacity:1;}
.support-panel{
display:none; flex-direction:column; position:fixed; bottom:26px; right:26px; width:340px; max-height:480px;
background:var(--white); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-strong); z-index:80; overflow:hidden;
}
.support-panel.show{display:flex;}
.support-panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line);}
.support-panel-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-height:200px;}
.support-msg{max-width:80%; padding:11px 15px; border-radius:16px; font-size:13.5px; line-height:1.45; box-shadow:0 4px 14px -8px rgba(20,32,26,.15); animation:msgFadeIn .3s ease;}
@keyframes msgFadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.support-msg.mine{align-self:flex-end; background:linear-gradient(160deg, var(--vida), var(--forma)); color:var(--creme); border-bottom-right-radius:5px;}
.support-msg.theirs{align-self:flex-start; background:var(--cream2); border-bottom-left-radius:5px;}
.support-msg .meta{font-size:10px; opacity:.7; margin-top:4px;}
.support-panel-foot{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}
.support-panel-foot input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--cream2); font-size:13px; color:var(--text);}
.support-panel-foot button{width:38px; height:38px; border-radius:50%; border:none; background:var(--gold-grad); color:var(--noite); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
/* ---------- Botão "Sugerir resposta com IA" ---------- */
.ai-suggest-btn{
position:relative; overflow:hidden; width:100%; margin-top:10px; padding:12px 16px; border-radius:12px;
display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:12.5px;
background:var(--cream2); border:1px solid rgba(201,169,110,.35); color:var(--gold-deep); cursor:pointer;
transition:background .25s ease, border-color .25s ease;
}
.ai-suggest-btn:hover:not(:disabled){
background:linear-gradient(100deg, var(--cream2) 0%, #F3E9D2 50%, var(--cream2) 100%); background-size:200% 100%;
animation:aiShimmer 1.6s linear infinite; border-color:rgba(201,169,110,.6);
}
.ai-suggest-btn:disabled{opacity:.5; cursor:not-allowed; animation:none;}
@keyframes aiShimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}
.settings-block{margin-bottom:28px;}
.settings-block h3{font-size:15px; margin:0 0 12px;}
.danger-btn{background:transparent; border:1px solid #C97A66; color:#C05A44; padding:11px 18px; border-radius:10px; font-weight:600; font-size:13.5px;}
/* ---------- Alunos (tabela) ---------- */
.alunos-table{width:100%; border-collapse:collapse; margin-top:6px;}
.alunos-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-soft); padding:10px 12px; border-bottom:1px solid var(--line);}
.alunos-table td{padding:12px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
.alunos-table tr:hover td{background:rgba(217,184,115,.04);}
#admin-nav-group{margin-top:4px;}
/* Correção de contraste: verde-escuro em cima de verde-escuro (quase invisível no modo noturno) */
.private-note{display:flex; gap:10px; background:var(--cream2); border:1px solid var(--gold); border-radius:12px; padding:14px 16px; font-size:12.5px; color:var(--text-soft); margin-bottom:20px; line-height:1.5;}
.journal-entry{border-bottom:1px solid var(--line); padding:14px 0;}
.journal-entry:last-child{border-bottom:none;}
.journal-date{font-size:11.5px; color:var(--text-soft); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}
/* ---------- THEME TOGGLE ---------- */
.theme-toggle{display:flex; gap:4px; background:var(--cream2); border-radius:999px; padding:4px;}
.theme-toggle button{
border:none; background:transparent; width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center; color:var(--text-soft);
}
.theme-toggle button.active{background:var(--white); color:var(--gold-deep); box-shadow:var(--shadow);}
/* ---------- Animação de entrada de página ---------- */
@keyframes pageFadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}
.page-enter{animation:pageFadeIn .38s cubic-bezier(.22,.85,.3,1);}
/* ---------- TABS (Ranking&Conquistas, Comunidade&Eventos) ---------- */
.page-tabs{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.page-tab{
padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--white);
font-size:13.5px; font-weight:600; color:var(--text-soft);
}
.page-tab.active{background:var(--green-deep); color:var(--creme); border-color:var(--green-deep);}
/* ---------- ADMIN DASHBOARD ---------- */
.admin-tabbar{display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px;}
.admin-tab-btn{
display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:12px; border:1px solid transparent;
background:transparent; font-size:13px; font-weight:700; color:var(--text-soft); transition:all .2s ease;
}
.admin-tab-btn:hover{background:var(--cream2); color:var(--text);}
.admin-tab-btn.active{background:var(--gold-grad); color:var(--noite); box-shadow:var(--shadow-soft);}
.admin-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
@media(max-width:900px){.admin-stat-grid{grid-template-columns:repeat(2,1fr);}}
/* ---------- Escolha do modo de resposta do suporte ---------- */
.reply-mode-picker{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:520px){.reply-mode-picker{grid-template-columns:1fr;}}
.reply-mode-opt{
text-align:left; padding:16px 18px; border-radius:14px; border:1.5px solid var(--line); background:var(--white);
transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.reply-mode-opt:hover{transform:translateY(-2px);}
.reply-mode-opt.active{border-color:var(--gold); background:linear-gradient(155deg, var(--vida), var(--forma)); box-shadow:0 10px 24px -14px rgba(0,0,0,.3);}
.rmo-title{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:4px;}
.reply-mode-opt.active .rmo-title{color:var(--creme);}
.rmo-sub{font-size:12px; color:var(--text-soft);}
.reply-mode-opt.active .rmo-sub{color:rgba(241,233,220,.75);}
/* ---------- Aviso flutuante de mensagem nova (Admin) ---------- */
.admin-new-msg-toast{
position:fixed; bottom:28px; right:28px; z-index:400; cursor:pointer;
background:var(--vida); color:var(--creme); padding:14px 22px; border-radius:999px;
display:flex; align-items:center; gap:10px; font-weight:600; font-size:13.5px;
box-shadow:0 16px 40px -12px rgba(0,0,0,.5); border:1px solid rgba(217,184,115,.3);
animation:adminToastIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes adminToastIn{from{transform:translateY(20px); opacity:0;} to{transform:translateY(0); opacity:1;}}
/* ---------- Casais novos (entraram pela página de vendas) ---------- */
.nav-selo{
margin-left:auto; flex-shrink:0; min-width:19px; height:19px; padding:0 6px; border-radius:999px;
background:var(--gold-grad); color:var(--noite); font-size:10.5px; font-weight:800;
display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.sidebar.collapsed .nav-selo{display:none;}
.chip-novo{
display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; vertical-align:middle;
background:var(--gold-grad); color:var(--noite); font-size:9.5px; font-weight:800;
text-transform:uppercase; letter-spacing:.06em;
}
.novos-casais{
border:1px solid rgba(217,184,115,.45); border-radius:18px; padding:20px 22px; margin-bottom:22px;
background:linear-gradient(150deg, rgba(217,184,115,.12), rgba(217,184,115,.03));
}
.novos-casais-topo{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.novos-casais-ic{
width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite);
}
.novos-casais-titulo{font-family:'Playfair Display',serif; font-size:18px; font-weight:600; line-height:1.3;}
.novos-casais-sub{font-size:12.5px; color:var(--text-soft); margin-top:3px; line-height:1.5;}
.novos-casais-btn{flex-shrink:0; padding:9px 15px; font-size:11.5px;}
.novos-casais-lista{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
.novo-casal{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--white);
}
.novo-casal-nome{font-size:14px; font-weight:700;}
.novo-casal-meta{font-size:11.5px; color:var(--text-soft); margin-top:2px; word-break:break-word;}
.novo-casal-btn{padding:8px 13px; font-size:11px; flex-shrink:0; text-decoration:none;}
.novo-casal-mais{font-size:12px; color:var(--text-soft); padding:4px 2px;}
@media(max-width:600px){
.novos-casais-btn{width:100%; justify-content:center;}
.novo-casal-btn{flex:1; justify-content:center; text-align:center;}
}
.admin-stat-card{
position:relative; overflow:hidden;
background:linear-gradient(155deg, var(--vida), var(--forma)); border:1px solid rgba(217,184,115,.2); border-radius:18px; padding:22px;
box-shadow:0 10px 26px -16px rgba(0,0,0,.35); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.admin-stat-card::before{
content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.16), transparent 70%); pointer-events:none;
}
.admin-stat-card:hover{transform:translateY(-5px); box-shadow:0 18px 40px -16px rgba(0,0,0,.5);}
.admin-stat-card .ic{
width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.14); color:var(--gold); margin-bottom:14px; position:relative;
}
.admin-stat-card .n{font-family:'Playfair Display',serif; font-size:30px; font-weight:600; line-height:1; color:var(--creme); position:relative;}
.admin-stat-card .l{font-size:12px; color:rgba(241,233,220,.65); margin-top:6px; font-weight:600; position:relative;}
.mural-post-row{display:flex; align-items:flex-start; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line);}
.mural-post-row:last-child{border-bottom:none;}
/* ---------- EM CONSTRUÇÃO (FormaCast / Jogos) ---------- */
.construction-hero{
background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
padding:60px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.construction-icon{
width:96px; height:96px; border-radius:50%; background:var(--green-tint); color:var(--green-deep);
display:flex; align-items:center; justify-content:center;
}
/* ---------- GAME CARDS (Jogos em Casal) ---------- */
.game-card{
background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-soft);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.game-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-strong); border-color:rgba(201,169,110,.5);}
.game-card .num{
width:30px; height:30px; border-radius:50%; background:var(--gold-grad); color:var(--noite);
display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; transition:transform .3s ease;
}
.game-card:hover .num{transform:scale(1.15) rotate(-6deg);}
/* ---------- Impressão / "Baixar PDF" (Minhas Respostas) ---------- */
.mr-print-only{display:none;}
@media print{
.sidebar, .topbar, .mobile-menu-btn, .sidebar-backdrop, .support-fab, .mr-no-print, .back-link{display:none !important;}
.content{max-width:100% !important; padding:0 !important;}
body, .app-shell, .main-col{background:#fff !important;}
.mr-print-only{display:block !important; margin-bottom:24px;}
.mr-print-only h1{font-family:'Playfair Display',serif; color:#123426; margin:0 0 4px;}
.mr-print-only p{color:#555; margin:0; font-size:13px;}
.mr-module-card{
background:#fff !important; border:1px solid #ddd !important; color:#1D352A !important;
break-inside:avoid; page-break-inside:avoid; box-shadow:none !important;
}
.mr-module-card *{color:#1D352A !important;}
.mr-module-card .eyebrow{color:#8A7040 !important;}
}
/* ---------- Envio de vídeos no Admin + aviso de carregamento no player ---------- */
.video-slot{
border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:14px;
background:var(--cream2);
}
.video-slot-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.video-slot-status{display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; max-width:60%;}
@media(max-width:640px){
.video-slot-status{align-items:flex-start; text-align:left; max-width:100%;}
}
.video-slot-badge{
font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:4px 9px; border-radius:999px; border:1px solid var(--line); color:var(--text-soft);
display:inline-flex; align-items:center; gap:5px;
}
.video-slot-badge.ok{color:var(--gold-deep); border-color:rgba(217,184,115,.45); background:rgba(217,184,115,.1);}
.video-slot-badge.empty{opacity:.7;}
.video-slot-progress{height:6px; border-radius:999px; background:rgba(217,184,115,.18); overflow:hidden; margin-top:12px;}
.video-slot-progress-fill{height:100%; width:0; background:var(--gold-grad); border-radius:999px; transition:width .25s ease;}
.video-loading-msg{
display:flex; align-items:center; justify-content:center; height:100%; min-height:180px;
padding:20px; text-align:center; font-size:13px; color:rgba(241,233,220,.75);
}
/* ================= MEUS ARQUIVOS (aluno) ================= */
.arq-resumo{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px;}
.arq-resumo-item{
flex:1; min-width:150px; background:var(--white); border:1px solid var(--line);
border-radius:14px; padding:16px 18px;
}
.arq-resumo-num{font-family:'Playfair Display',serif; font-size:28px; font-weight:600; color:var(--gold-deep); line-height:1;}
.arq-resumo-num span{font-size:15px; color:var(--text-soft);}
.arq-resumo-lbl{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-soft); font-weight:700; margin-top:8px;}
/* ---- Pastas do caderno: fechadas por padrão, abrem no clique ---- */
.arq-pasta{margin-bottom:12px; padding:0 !important; overflow:hidden; transition:border-color .2s ease;}
.arq-pasta:hover{border-color:rgba(217,184,115,.45);}
.arq-pasta-topo{
width:100%; display:flex; align-items:center; gap:14px; text-align:left;
background:none; border:0; cursor:pointer; padding:18px 20px; font:inherit; color:inherit;
}
.arq-pasta-ic{
width:40px; height:40px; border-radius:11px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
color:var(--gold-deep); background:rgba(217,184,115,.13); border:1px solid rgba(217,184,115,.3);
transition:background .2s ease;
}
.arq-pasta.aberta .arq-pasta-ic{background:rgba(217,184,115,.22);}
.arq-pasta-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.arq-pasta-nome{font-family:'Playfair Display',serif; font-size:17px; font-weight:600; line-height:1.3;}
.arq-pasta-sub{font-size:12px; color:var(--text-soft); line-height:1.45;}
.arq-pasta-seta{color:var(--text-soft); flex-shrink:0; display:flex; transition:transform .25s ease;}
.arq-pasta.aberta .arq-pasta-seta{transform:rotate(180deg);}
.arq-pasta-vazia .arq-pasta-ic{opacity:.5;}
.arq-pasta-vazia .arq-pasta-nome{opacity:.72;}
.arq-pasta-corpo{display:none; padding:0 20px 22px; border-top:1px solid var(--line);}
.arq-pasta.aberta .arq-pasta-corpo{display:block;}
.arq-pasta-acoes{display:flex; justify-content:flex-end; padding-top:16px;}
.arq-modulo{margin-bottom:18px;}
.arq-modulo-vazio{opacity:.72;}
.arq-modulo-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.arq-modulo-titulo{font-family:'Playfair Display',serif; font-size:21px; font-weight:600; margin:4px 0 0;}
.arq-btn-pdf{padding:9px 14px; font-size:11px; flex-shrink:0;}
.arq-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;}
.arq-chip{
display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--text-soft);
}
.arq-chip.ok{color:var(--gold-deep); border-color:rgba(217,184,115,.45); background:rgba(217,184,115,.1);}
.arq-secao{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.arq-secao-titulo{
font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
color:var(--gold-deep); margin-bottom:14px;
}
.arq-bloco{margin-bottom:18px;}
.arq-bloco-nome{font-size:13px; font-weight:700; margin-bottom:10px;}
.arq-qa{margin:0 0 12px; padding-left:14px; border-left:2px solid var(--line);}
.arq-pergunta{font-size:12.5px; color:var(--text-soft); line-height:1.5; margin-bottom:3px;}
.arq-resposta{font-size:14px; line-height:1.6; white-space:pre-wrap;}
.arq-vazio{font-size:12.5px; color:var(--text-soft); margin:0; font-style:italic;}
.arq-gam{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:14px;}
.arq-gam-pts{font-size:12px; font-weight:700; color:var(--gold-deep); margin-left:auto;}
.arq-lista-arquivos{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
.arq-arquivo{
display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
border:1px solid var(--line); background:var(--cream2); text-decoration:none; color:var(--text);
transition:border-color .2s ease, transform .2s ease;
}
.arq-arquivo:hover{border-color:rgba(217,184,115,.5); transform:translateX(2px);}
.arq-arquivo-ic{color:var(--gold-deep); display:flex; flex-shrink:0;}
.arq-arquivo-nome{flex:1; min-width:0; font-size:13.5px; font-weight:600; word-break:break-all;}
.arq-arquivo-acao{font-size:11.5px; font-weight:700; color:var(--gold-deep); flex-shrink:0;}
@media(max-width:520px){
.arq-modulo-head{flex-direction:column;}
.arq-btn-pdf{width:100%; justify-content:center;}
.arq-pasta-topo{padding:16px;}
.arq-pasta-corpo{padding:0 16px 18px;}
.arq-pasta-nome{font-size:15.5px;}
.arq-pasta-acoes .arq-btn-pdf{width:100%;}
}
@media print{
.print-hide{display:none !important;}
/* no PDF toda pasta sai aberta, senão o caderno sairia em branco */
.arq-pasta-corpo{display:block !important; padding:0 !important; border-top:1px solid #ddd !important;}
.arq-pasta-seta, .arq-pasta-acoes{display:none !important;}
.arq-pasta-topo{padding:0 0 10px !important;}
.arq-pasta{padding:16px 18px !important;}
.arq-pasta-ic{background:none !important; border:0 !important;}
.arq-resumo, .arq-chips{display:none !important;}
.arq-secao{border-top:1px solid #ddd !important;}
.arq-qa{border-left:2px solid #ddd !important;}
.arq-secao-titulo{color:#8A7040 !important;}
}
/* ================= ARQUIVOS (Admin) ================= */
.arqadm-modulo{border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:12px; background:var(--cream2);}
.arqadm-modulo-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.arqadm-modulo-ic{
width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.14); color:var(--gold-deep);
}
.arqadm-linhas{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:8px 18px; margin-top:14px;}
.arqadm-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text-soft); padding:5px 0;}
.arqadm-link{font-size:11.5px; font-weight:700; color:var(--gold-deep); text-decoration:underline; flex-shrink:0;}
.arqadm-arquivo-row{
display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
border:1px solid var(--line); margin-bottom:8px;
}
.arqadm-arquivo-ic{color:var(--gold-deep); display:flex; flex-shrink:0;}
/* ---------- Painel do casal: progresso por módulo ---------- */
.hub-modulos{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.hub-modulos-head, .hub-modulos-row{
display:grid; grid-template-columns:1fr 70px 70px 64px 46px; gap:8px; align-items:center;
padding:9px 14px; font-size:12.5px;
}
.hub-modulos-head{
background:rgba(127,232,184,.06); font-size:10.5px;
letter-spacing:.6px; text-transform:uppercase; color:var(--gold-deep); font-weight:700;
}
.hub-modulos-head span:not(:first-child), .hub-modulos-row span:not(.hub-mod-nome){text-align:center;}
.hub-modulos-row{border-top:1px solid rgba(217,184,115,.1); color:var(--text);}
.hub-mod-nome{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hub-mod-nome b{color:var(--gold-deep); margin-right:6px;}
.hub-pessoa{display:inline-flex; gap:8px; justify-content:center;}
.hub-ok{color:var(--gold-deep); display:inline-flex;}
.hub-nao{color:var(--text-soft);}
.hub-mod-pts{color:var(--text); font-weight:700;}
.hub-legenda{font-size:11px; color:var(--text-soft); margin:10px 0 0; }
@media(max-width:640px){
.hub-modulos-head, .hub-modulos-row{grid-template-columns:1fr 62px 62px 50px 40px; font-size:11.5px; padding:8px 10px;}
}
/* ================= DIAGNÓSTICO DENTRO DA PLATAFORMA ================= */
.diag-cta{
display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
background:var(--white); border:1px solid rgba(217,184,115,.35); border-radius:16px;
padding:26px 28px; box-shadow:var(--shadow-soft);
}
.diag-cta-bloqueada{border-color:var(--line); box-shadow:none; opacity:.9;}
.diag-cta h3{display:flex; align-items:center; gap:9px;}
@media(max-width:600px){ .diag-cta{flex-direction:column; align-items:stretch;} .diag-cta .btn{width:100%;} }
/* O rodapé do diagnóstico: duas ações nas pontas na tela grande, uma embaixo
da outra e da largura inteira no celular. Lado a lado em 360px, o nome do
botão de baixar quebrava em três linhas. */
.diag-rodape{
display:flex; flex-wrap:wrap; gap:12px; align-items:center;
padding-top:22px; margin-top:4px; border-top:1px solid var(--line);
}
.diag-rodape-fim{margin-left:auto;}
@media(max-width:600px){
.diag-rodape{flex-direction:column-reverse; align-items:stretch; gap:10px;}
.diag-rodape .btn{width:100%;}
.diag-rodape-fim{margin-left:0;}
}
/* Comentários: no celular, o aviso de erro ocupa a linha dele, senão ele
espremia os dois botões contra a borda direita da tela. */
@media(max-width:600px){
.coment-acoes{flex-wrap:wrap;}
.coment-aviso{flex-basis:100%; margin-right:0; order:-1;}
}
.diag-pergunta{
font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(20px,2.6vw,26px);
line-height:1.45; margin:0 0 24px;
}
.diag-opcoes{display:flex; flex-direction:column; gap:11px;}
.diag-opcao{
display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%;
padding:16px 18px; border-radius:12px; border:1.5px solid var(--line);
background:var(--cream2); color:var(--text); font-size:14.5px; line-height:1.5;
transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.diag-opcao:hover{border-color:rgba(217,184,115,.6); background:rgba(217,184,115,.08); transform:translateY(-1px);}
.diag-opcao.escolhida{border-color:var(--gold); background:rgba(217,184,115,.12);}
.diag-opcao-letra{
flex-shrink:0; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
font-size:11.5px; font-weight:700; color:var(--gold-deep); border:1px solid var(--line); background:var(--white);
}
.diag-calculando{display:flex; flex-direction:column; align-items:center; gap:22px; padding:70px 20px; text-align:center;}
.diag-calculando p{color:var(--text-soft); margin:0; font-size:14px;}
.diag-calculando-anel{
width:58px; height:58px; border-radius:50%; border:2px solid rgba(217,184,115,.25);
border-top-color:var(--gold); animation:diagGira 1s linear infinite;
}
@keyframes diagGira{to{transform:rotate(360deg);}}
.diag-geral{text-align:right; flex-shrink:0;}
.diag-geral-num{display:block; font-family:'Playfair Display',serif; font-size:34px; font-weight:600; color:var(--gold-deep); line-height:1;}
.diag-geral-lbl{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-soft); font-weight:700;}
.diag-areas{margin-top:24px; display:flex; flex-direction:column; gap:15px;}
.diag-area-topo{display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap;}
.diag-area-nome{font-weight:600; font-size:14px; flex:1; min-width:120px;}
.diag-area-tag{font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid;}
.diag-area-pct{font-size:13px; font-weight:700; min-width:40px; text-align:right;}
.diag-barra{height:6px; border-radius:999px; background:var(--cream2); overflow:hidden;}
.diag-barra-fill{height:100%; border-radius:999px;}
.diag-foco{margin-top:26px; padding:20px 22px; border-radius:14px; background:var(--cream2); border:1px solid var(--line);}
.diag-foco p{margin:0; font-size:14px; line-height:1.8; color:var(--text-soft);}
.diag-evo-lista{display:flex; flex-direction:column; gap:2px;}
.diag-evo-linha{
display:grid; grid-template-columns:1fr 54px 20px 54px 52px; gap:8px; align-items:center;
padding:11px 12px; border-radius:10px; font-size:13.5px;
}
.diag-evo-linha:nth-child(odd){background:var(--cream2);}
.diag-evo-area{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.diag-evo-antes{color:var(--text-soft); text-align:right;}
.diag-evo-seta{color:var(--text-soft); text-align:center;}
.diag-evo-depois{font-weight:700; text-align:right;}
.diag-evo-delta{font-size:12px; font-weight:700; text-align:right;}
.diag-evo-delta.subiu{color:#5FA07C;}
.diag-evo-delta.caiu{color:#C08A6E;}
.diag-evo-delta.igual{color:var(--text-soft);}
@media(max-width:520px){
.diag-evo-linha{grid-template-columns:1fr 46px 16px 46px 44px; font-size:12.5px; padding:9px 8px;}
}
.diag-aviso{
display:flex; align-items:center; gap:16px; cursor:pointer; margin-bottom:18px;
padding:18px 22px; border-radius:16px; border:1px solid rgba(217,184,115,.4);
background:linear-gradient(120deg, rgba(217,184,115,.14), rgba(21,56,45,.5));
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
transition:transform .22s ease, border-color .22s ease;
}
.diag-aviso:hover{transform:translateY(-2px); border-color:var(--gold);}
.diag-aviso-ic{
width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.18); color:var(--gold-deep);
}
.diag-aviso-titulo{font-weight:700; font-size:15px; color:var(--creme);}
.diag-aviso-sub{font-size:12.5px; color:rgba(241,233,220,.72); margin-top:3px; line-height:1.5;}
.diag-aviso-cta{font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0;}
@media(max-width:600px){
.diag-aviso{flex-wrap:wrap;}
.diag-aviso-cta{width:100%; text-align:right;}
}
/* ================= DIAGNÓSTICO EM TELA CHEIA ================= */
.diag-overlay{
display:none; position:fixed; inset:0; z-index:400; overflow-y:auto;
background:#15382D;
}
.diag-overlay.show{display:block;}
.diag-overlay-fundo{
position:fixed; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(ellipse 900px 620px at 50% -10%, rgba(217,184,115,.16), transparent 64%),
radial-gradient(ellipse 760px 520px at 10% 100%, rgba(120,182,147,.13), transparent 62%),
repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 48px),
repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 48px);
}
.diag-overlay-body{
position:relative; z-index:1; min-height:100%;
display:flex; flex-direction:column; align-items:center;
padding:22px clamp(18px,5vw,40px) 60px; color:var(--creme);
}
.diag-topo{
width:100%; max-width:760px; display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:16px;
}
.diag-marca{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,233,220,.5); font-weight:700;}
.diag-marca span{font-family:'Playfair Display',serif; font-size:17px; letter-spacing:0; text-transform:none; color:var(--creme);}
.diag-marca em{color:var(--gold); font-style:normal;}
.diag-sair{
background:none; border:1px solid rgba(217,184,115,.3); color:rgba(241,233,220,.6);
font-size:12px; font-weight:600; padding:7px 15px; border-radius:999px;
transition:color .2s ease, border-color .2s ease;
}
.diag-sair:hover{color:var(--creme); border-color:var(--gold);}
.diag-barra-topo{width:100%; max-width:760px; height:3px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:clamp(26px,6vh,56px);}
.diag-barra-topo-fill{height:100%; border-radius:999px; background:var(--gold-grad); transition:width .5s cubic-bezier(.4,0,.2,1);}
.diag-tela{
width:100%; max-width:760px; flex:1; display:flex; flex-direction:column; justify-content:center;
animation:diagEntra .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes diagEntra{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.diag-area-corrente{
font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
color:var(--gold); margin-bottom:16px;
}
.diag-overlay .diag-pergunta{
font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(23px,3.4vw,34px);
line-height:1.35; margin:0 0 30px; color:rgba(255,255,255,.97);
}
.diag-overlay .diag-opcao{
background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.92);
animation:diagEntra .4s cubic-bezier(.22,1,.36,1) both; padding:18px 20px;
}
.diag-overlay .diag-opcao:hover{border-color:var(--gold); background:rgba(217,184,115,.12);}
.diag-overlay .diag-opcao.escolhida{border-color:var(--gold); background:rgba(217,184,115,.18);}
.diag-overlay .diag-opcao-letra{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--gold);}
.diag-opcao-txt{flex:1; padding-top:3px;}
.diag-rodape{
display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px;
font-size:11.5px; letter-spacing:.1em; color:rgba(241,233,220,.4); font-weight:600;
}
.diag-voltar{background:none; border:none; color:rgba(241,233,220,.5); font-size:12.5px; font-weight:600;}
.diag-voltar:hover{color:var(--gold);}
.diag-intervalo, .diag-final, .diag-analisando{align-items:center; text-align:center; gap:18px; position:relative;}
.diag-intervalo-titulo{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(25px,3.6vw,34px); margin:0; color:rgba(255,255,255,.97);}
.diag-intervalo-msg{margin:0; font-size:14.5px; line-height:1.75; color:rgba(241,233,220,.6); max-width:420px;}
.diag-intervalo-msg b{color:var(--gold);}
.diag-contagem{font-size:11px; font-weight:700; letter-spacing:.16em; color:rgba(241,233,220,.42);}
.diag-check{
width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1.5px solid rgba(217,184,115,.55); color:var(--gold);
}
.diag-mini-barra{width:100%; max-width:300px; height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
.diag-mini-barra-fill{height:100%; border-radius:999px; background:var(--gold-grad); animation:diagDesenha .9s cubic-bezier(.4,0,.2,1) both;}
@keyframes diagDesenha{from{width:0;} to{width:100%;}}
.diag-anel{
width:132px; height:132px; border-radius:50%; padding:7px; display:flex; align-items:center; justify-content:center;
}
.diag-anel-interno{
width:100%; height:100%; border-radius:50%; background:#15382D;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.diag-anel-pct{font-family:'Playfair Display',serif; font-size:29px; font-weight:600; color:var(--creme); line-height:1;}
.diag-anel-tag{font-size:8.5px; letter-spacing:.14em; color:rgba(241,233,220,.45); font-weight:700;}
.diag-faisca{
position:absolute; bottom:32%; width:4px; height:4px; border-radius:50%; background:var(--gold);
animation:diagSobe 2.8s ease-out infinite; pointer-events:none;
}
@keyframes diagSobe{
0%{opacity:0; transform:translateY(16px) scale(.5);}
35%{opacity:.85;}
100%{opacity:0; transform:translateY(-52px) scale(1);}
}
.diag-spinner{position:relative; width:78px; height:78px; display:flex; align-items:center; justify-content:center;}
.diag-spinner-a1, .diag-spinner-a2{position:absolute; border-radius:50%; border:1.5px solid rgba(217,184,115,.55);}
.diag-spinner-a1{inset:0; animation:diagPulsa 1.8s ease-in-out infinite;}
.diag-spinner-a2{inset:13px; border-color:rgba(120,182,147,.5); animation:diagPulsa 1.8s ease-in-out .4s infinite;}
.diag-spinner-ponto{width:12px; height:12px; background:var(--gold); border-radius:50% 0 50% 0;}
@keyframes diagPulsa{0%,100%{opacity:.45; transform:scale(1);} 50%{opacity:.95; transform:scale(1.12);}}
.diag-etapas{width:100%; max-width:400px; display:flex; flex-direction:column; gap:9px; margin-top:8px;}
.diag-etapa{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; border-radius:12px; font-size:13px;
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); color:rgba(241,233,220,.7);
}
.diag-etapa-status{font-size:11px; font-weight:700; color:rgba(241,233,220,.3);}
.diag-etapa.ativa .diag-etapa-status{color:var(--gold);}
.diag-etapa.pronta .diag-etapa-status{color:#78B693;}
.diag-etapa.pronta{border-color:rgba(120,182,147,.28);}
@media(max-width:600px){
.diag-overlay-body{padding:16px 16px 44px;}
.diag-anel{width:112px; height:112px;}
}
/* ================= RELATÓRIO DO DIAGNÓSTICO ================= */
.diag-relatorio{padding:clamp(24px,4vw,38px);}
.diag-rel-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.diag-rel-titulo{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(22px,3vw,28px); margin:8px 0 6px;}
.diag-rel-sub{color:var(--text-soft); font-size:13.5px; margin:0;}
.diag-anel-rel{width:104px; height:104px; flex-shrink:0;}
.diag-anel-rel .diag-anel-interno{background:var(--white);}
.diag-anel-rel .diag-anel-pct{font-size:24px;}
.diag-secao{margin-top:32px; padding-top:26px; border-top:1px solid var(--line);}
.diag-secao:first-of-type{border-top:none;}
.diag-secao-eyebrow{
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
color:var(--gold-deep); margin-bottom:16px;
}
.diag-secao-titulo{
font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(19px,2.4vw,23px);
margin:0 0 12px; line-height:1.3;
}
.diag-texto{
margin:0; font-size:14.5px; line-height:1.85; color:var(--text-soft); text-wrap:pretty;
}
.diag-texto + .diag-texto{margin-top:12px;}
.diag-secao-foco{
background:var(--cream2); border:1px solid rgba(217,184,115,.28); border-radius:16px;
padding:24px 26px; border-top:1px solid rgba(217,184,115,.28);
}
.diag-citacoes{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);}
.diag-citacoes-lbl{
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
color:var(--text-soft); margin-bottom:14px;
}
.diag-citacao{margin-bottom:14px; padding-left:14px; border-left:2px solid rgba(217,184,115,.4);}
.diag-citacao-p{font-size:12.5px; color:var(--text-soft); line-height:1.55; margin-bottom:4px;}
.diag-citacao-r{font-size:14px; line-height:1.6; font-family:'Playfair Display',serif; font-style:italic; color:var(--text);}
.diag-padrao{margin-bottom:26px;}
.diag-padrao:last-child{margin-bottom:0;}
.diag-padrao-titulo{
font-family:'Playfair Display',serif; font-weight:500; font-size:19px; margin:0 0 10px; line-height:1.35;
}
.diag-forca{margin-bottom:18px;}
.diag-forca:last-child{margin-bottom:0;}
.diag-forca-nome{
display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px;
color:var(--gold-deep); margin-bottom:7px;
}
.diag-passo{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.diag-passo:last-child{margin-bottom:0;}
.diag-passo-num{
flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite); font-size:12px; font-weight:700;
}
.diag-passo-area{font-weight:700; font-size:14.5px;}
.diag-passo-modulo{
margin-top:8px; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--gold-deep);
}
.diag-casal, .diag-casal-espera{margin-top:22px; padding:clamp(24px,4vw,34px);}
.diag-casal{border-color:rgba(217,184,115,.35);}
.diag-casal-aviso{
margin:28px 0 0; padding:16px 18px; border-radius:12px; background:var(--cream2);
font-size:12.5px; line-height:1.7; color:var(--text-soft);
}
@media(max-width:600px){
.diag-rel-topo{flex-direction:column-reverse; align-items:flex-start;}
.diag-secao-foco{padding:20px 18px;}
}
@media print{
.diag-secao{break-inside:avoid; page-break-inside:avoid;}
.diag-secao-eyebrow, .diag-forca-nome, .diag-passo-modulo{color:#8A7040 !important;}
.diag-texto, .diag-citacao-p{color:#3A4A40 !important;}
.diag-passo-num{background:#C9A25D !important; color:#fff !important;}
}
/* ================= FAIXA DA HOME ================= */
.home-faixa{
display:flex; align-items:center; gap:16px; cursor:pointer; margin-bottom:26px;
padding:18px 22px; border-radius:16px; border:1px solid rgba(217,184,115,.4);
background:linear-gradient(120deg, rgba(217,184,115,.14), rgba(21,56,45,.5));
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
transition:transform .22s ease, border-color .22s ease;
}
.home-faixa:hover{transform:translateY(-2px); border-color:var(--gold);}
.home-faixa-ic{
width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.18); color:var(--gold-deep);
}
.home-faixa-titulo{font-weight:700; font-size:15px; color:var(--creme);}
.home-faixa-sub{font-size:12.5px; color:rgba(241,233,220,.72); margin-top:3px; line-height:1.5;}
.home-faixa-cta{font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0;}
@media(max-width:600px){
.home-faixa{flex-wrap:wrap;}
.home-faixa-cta{width:100%; text-align:right;}
}
/* ================= MINHA JORNADA ================= */
.jornada-numeros{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px;}
@media(max-width:900px){ .jornada-numeros{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .jornada-numeros{grid-template-columns:1fr;} }
/* ================= JOGOS EM CASAL ================= */
.jogo-inicio, .jogo-espera{padding:clamp(26px,4vw,38px);}
.jogo-espera{text-align:center; display:flex; flex-direction:column; align-items:center;}
.jogo-espera-ic{
width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.14); color:var(--gold-deep); margin-bottom:18px;
}
.jogo-progresso{display:flex; align-items:center; gap:7px; margin:18px 0 22px;}
.jogo-ponto{width:26px; height:4px; border-radius:999px; background:var(--cream2); transition:background .3s ease;}
.jogo-ponto.feito{background:rgba(217,184,115,.55);}
.jogo-ponto.atual{background:var(--gold); width:38px;}
.jogo-progresso-num{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--text-soft);}
.jogo-pergunta-card{padding:clamp(26px,4vw,40px); max-width:720px;}
.jogo-pergunta{
font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(21px,2.9vw,27px);
line-height:1.35; margin:0 0 10px;
}
.jogo-ajuda{font-size:13.5px; line-height:1.7; color:var(--text-soft); margin:0 0 20px;}
.jogo-texto{
width:100%; border-radius:12px; border:1.5px solid var(--line); background:var(--cream2);
color:var(--text); padding:16px 18px; font-family:'Inter',sans-serif; font-size:15px; line-height:1.7;
resize:vertical; outline:none;
}
.jogo-texto:focus{border-color:var(--gold);}
.jogo-exemplos{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;}
.jogo-exemplos > span:first-child{font-size:11.5px; color:var(--text-soft); font-weight:600;}
.jogo-exemplo{
font-size:11.5px; color:var(--text-soft); padding:5px 11px; border-radius:999px;
border:1px dashed var(--line);
}
.jogo-acoes{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px;}
.jogo-revelacao{padding:clamp(26px,4vw,40px);}
.jogo-par{margin-top:28px; padding-top:22px; border-top:1px solid var(--line);}
.jogo-par-pergunta{
font-family:'Playfair Display',serif; font-size:18px; font-weight:500; margin-bottom:16px; line-height:1.4;
}
.jogo-resposta{
border-radius:12px; padding:16px 18px; background:var(--cream2); border:1px solid var(--line);
margin-bottom:10px;
}
.jogo-resposta-outro{border-color:rgba(217,184,115,.45); background:rgba(217,184,115,.09);}
.jogo-resposta-quem{
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
color:var(--gold-deep); margin-bottom:8px;
}
.jogo-resposta p{margin:0; font-size:14.5px; line-height:1.8; white-space:pre-wrap;}
.jogo-fecho{margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.jogo-fecho p{margin:0 0 18px; font-size:14px; line-height:1.8; color:var(--text-soft);}
.jogo-fecho-acoes{display:flex; gap:10px; flex-wrap:wrap;}
/* ---------- Cápsula do tempo ---------- */
.capsula-lacrada{display:flex; gap:20px; align-items:flex-start; margin-bottom:18px; padding:26px 28px;}
.capsula-selo{
width:58px; height:58px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.14); border:1px solid rgba(217,184,115,.4); color:var(--gold-deep);
}
.capsula-barra{height:5px; border-radius:999px; background:var(--cream2); overflow:hidden; max-width:420px;}
.capsula-barra-fill{height:100%; border-radius:999px; background:var(--gold-grad); transition:width .5s ease;}
.capsula-aberta{margin-bottom:18px; padding:clamp(24px,4vw,34px); border-color:rgba(217,184,115,.4);}
.capsula-carta{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.capsula-carta-quem{
font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
color:var(--gold-deep); margin-bottom:16px;
}
.capsula-trecho{margin-bottom:18px; padding-left:14px; border-left:2px solid rgba(217,184,115,.35);}
.capsula-trecho-p{font-size:12px; color:var(--text-soft); margin-bottom:5px;}
.capsula-trecho p{margin:0; font-size:14.5px; line-height:1.8; white-space:pre-wrap;}
.capsula-nova{padding:clamp(24px,4vw,34px);}
.capsula-prazos{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;}
.capsula-prazo{
text-align:left; padding:18px 20px; border-radius:14px; border:1.5px solid var(--line);
background:var(--cream2); color:var(--text); display:flex; flex-direction:column; gap:6px;
transition:border-color .2s ease, transform .2s ease;
}
.capsula-prazo:hover{border-color:var(--gold); transform:translateY(-2px);}
.capsula-prazo-n{font-family:'Playfair Display',serif; font-size:21px; font-weight:600; color:var(--gold-deep);}
.capsula-prazo-d{font-size:12.5px; color:var(--text-soft); line-height:1.5;}
/* ================= FORMACAST ================= */
.fc-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.fc-links{display:flex; gap:9px; flex-shrink:0;}
.fc-links a{
display:inline-flex; align-items:center; gap:7px; text-decoration:none;
padding:9px 16px; border-radius:999px; border:1px solid var(--line); color:var(--text-soft);
font-size:12px; font-weight:600; transition:border-color .2s ease, color .2s ease;
}
.fc-links a:hover{border-color:var(--gold); color:var(--gold-deep);}
/* esqueleto enquanto carrega, para a página não piscar vazia */
.fc-esqueleto{animation:fcPulsa 1.6s ease-in-out infinite;}
.fc-esq-destaque{width:100%; max-width:1280px; aspect-ratio:16/9; border-radius:20px; background:var(--cream2); margin:0 auto 28px;}
.fc-esq-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;}
.fc-esq-card{height:210px; border-radius:16px; background:var(--cream2);}
@keyframes fcPulsa{0%,100%{opacity:.5;} 50%{opacity:.85;}}
/* destaque do episódio mais recente */
.fc-destaque{
position:relative; overflow:hidden; border-radius:20px; cursor:pointer;
display:flex; align-items:flex-end;
border:1px solid rgba(217,184,115,.25); background:var(--vida); margin:0 auto 28px;
/* A moldura acompanha a proporção da miniatura do YouTube: 16 por 9.
Antes era uma faixa de 380px de altura numa largura de até 1280px, quase
3,4 por 1, então a capa entrava cortada em cima e embaixo e só metade da
imagem aparecia. Agora a capa cabe inteira, e a moldura ficou bem maior.
A miniatura boa do YouTube tem 1280px de largura: limitar a faixa a esse
tamanho evita ampliar a imagem, que é o que borra. */
width:100%; max-width:1280px; aspect-ratio:16/9;
transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.fc-destaque:hover{transform:translateY(-3px); border-color:rgba(217,184,115,.6);}
.fc-destaque-img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
image-rendering:auto; -ms-interpolation-mode:bicubic; backface-visibility:hidden;
transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.fc-destaque:hover .fc-destaque-img{transform:scale(1.04);}
.fc-destaque-veu{
position:absolute; inset:0; z-index:1;
/* O texto agora fica na faixa de baixo, então o escurecimento sobe do rodapé.
O véu lateral de antes existia porque a moldura era baixa e larga. */
background:linear-gradient(0deg, rgba(8,45,35,.96) 0%, rgba(8,45,35,.82) 28%, rgba(8,45,35,.34) 55%, transparent 78%);
}
.fc-destaque-txt{position:relative; z-index:2; padding:clamp(20px,3vw,36px); max-width:680px; width:100%;}
.fc-etiqueta{
display:inline-block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
color:var(--noite); background:var(--gold-grad); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.fc-destaque-titulo{
font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(22px,3.2vw,34px);
line-height:1.22; margin:0 0 12px; color:var(--creme);
}
.fc-destaque-resumo{margin:0 0 20px; font-size:14px; line-height:1.7; color:rgba(241,233,220,.75);}
.fc-destaque-meta{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
font-size:12px; color:rgba(241,233,220,.6); font-weight:600;
}
.fc-btn-play{
display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:10px;
background:var(--gold-grad); color:var(--noite); font-size:12.5px; font-weight:700;
box-shadow:0 10px 24px -12px rgba(201,169,110,.7);
}
/* busca e filtros */
.fc-barra{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px;}
.fc-busca{
position:relative; display:flex; align-items:center; gap:10px; flex:1; min-width:240px;
padding:11px 16px; border-radius:999px; border:1px solid var(--line); background:var(--white);
color:var(--text-soft); transition:border-color .2s ease;
}
.fc-busca:focus-within{border-color:var(--gold);}
.fc-busca input{
flex:1; min-width:0; border:none; background:none; outline:none;
color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px;
}
.fc-limpar{background:none; border:none; color:var(--gold-deep); font-size:11.5px; font-weight:700;}
.fc-filtros{display:flex; gap:8px; flex-wrap:wrap;}
.fc-chip{
display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
border:1px solid var(--line); background:transparent; color:var(--text-soft);
font-size:12px; font-weight:600; transition:all .2s ease;
min-height:44px; /* o dedo precisa de 44px; o texto sozinho dava 34 */
}
.fc-chip span{
font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
background:var(--cream2); color:var(--text-soft);
}
.fc-chip:hover{border-color:rgba(217,184,115,.5); color:var(--text);}
.fc-chip.ativo{background:var(--gold-grad); border-color:transparent; color:var(--noite);}
.fc-chip.ativo span{background:rgba(23,60,45,.18); color:var(--noite);}
/* grade de episódios */
.fc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;}
.fc-card{
cursor:pointer; border-radius:16px; overflow:hidden; background:var(--white);
border:1px solid var(--line);
transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.fc-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-strong); border-color:rgba(217,184,115,.45);}
.fc-capa{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--cream2);}
.fc-capa img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1);}
.fc-card:hover .fc-capa img{transform:scale(1.06);}
.fc-capa-veu{
position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,45,35,.55), transparent 55%);
opacity:.85; transition:opacity .28s ease;
}
.fc-card:hover .fc-capa-veu{opacity:.45;}
.fc-play{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(241,233,220,.92); color:var(--vida); opacity:0;
transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.fc-card:hover .fc-play{opacity:1; transform:translate(-50%,-50%) scale(1);}
.fc-duracao{
position:absolute; bottom:9px; right:9px; font-size:10.5px; font-weight:700;
padding:3px 8px; border-radius:6px; background:rgba(8,45,35,.8); color:var(--creme);
}
.fc-info{padding:15px 16px 17px;}
.fc-titulo{
font-size:14px; font-weight:600; line-height:1.45; margin-bottom:10px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fc-meta{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--text-soft);}
.fc-tipo{
font-size:10px; font-weight:700; letter-spacing:.06em; padding:3px 8px; border-radius:999px;
background:rgba(217,184,115,.14); color:var(--gold-deep);
}
.fc-tipo.audio{background:rgba(120,182,147,.16); color:#78B693;}
.fc-mais{display:flex; justify-content:center; margin-top:28px;}
.fc-vazio{text-align:center; padding:50px 20px;}
.fc-vazio p{color:var(--text-soft); margin:0 0 18px; font-size:14px;}
.fc-rodape{margin:26px 0 0; font-size:11.5px; color:var(--text-soft); text-align:center;}
@media(max-width:600px){
.fc-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.fc-titulo{font-size:13px;}
.fc-barra{gap:10px;}
}
/* ---------- Rodapé com as redes ---------- */
.footer-note{display:flex; flex-direction:column; align-items:center; gap:14px;}
.footer-redes{display:flex; gap:10px;}
.footer-redes a{
width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); color:var(--text-soft); text-decoration:none;
transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-redes a:hover{color:var(--gold-deep); border-color:var(--gold); transform:translateY(-2px);}
.footer-texto{font-size:12px; letter-spacing:.5px; text-transform:uppercase;}
/* ---------- Devocional sem publicação ---------- */
.dev-sugestoes{display:flex; flex-direction:column; gap:12px; margin-bottom:24px;}
.dev-sugestao{
display:flex; gap:15px; align-items:flex-start; cursor:pointer;
padding:18px 20px; border-radius:14px; border:1px solid var(--line); background:var(--white);
transition:border-color .22s ease, transform .22s ease;
}
.dev-sugestao:hover{border-color:rgba(217,184,115,.55); transform:translateY(-2px);}
.dev-sugestao-ic{
width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.14); color:var(--gold-deep);
}
.dev-sugestao-t{font-weight:700; font-size:14.5px; margin-bottom:4px;}
.dev-sugestao-s{font-size:12.5px; line-height:1.6; color:var(--text-soft);}
/* ---------- Aviso da chave no FormaCast ---------- */
.fc-aviso{
display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;
padding:16px 18px; border-radius:14px;
border:1px solid rgba(217,184,115,.4); background:rgba(217,184,115,.08);
font-size:12.5px; line-height:1.7; color:var(--text-soft);
}
.fc-aviso b{color:var(--text); display:block; margin-bottom:3px;}
.fc-aviso-ic{color:var(--gold-deep); flex-shrink:0; display:flex; padding-top:2px;}
/* ---------- Meu Perfil ---------- */
.perfil-hero{
display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:22px;
padding:clamp(22px,3.5vw,32px); border-radius:20px;
background:linear-gradient(120deg, rgba(217,184,115,.13), rgba(21,56,45,.45));
border:1px solid rgba(217,184,115,.28);
}
.perfil-hero-foto{flex-shrink:0;}
.perfil-hero-txt{flex:1; min-width:220px;}
.perfil-hero-nome{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(26px,3.4vw,34px); margin:8px 0 6px;}
.perfil-hero-sub{margin:0; font-size:13.5px; color:var(--text-soft); line-height:1.6;}
.perfil-hero-nivel{text-align:center; flex-shrink:0;}
.perfil-nivel-anel{
width:104px; height:104px; border-radius:50%; padding:6px; margin:0 auto 10px;
display:flex; align-items:center; justify-content:center;
}
.perfil-nivel-interno{
width:100%; height:100%; border-radius:50%; background:var(--cream);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.perfil-nivel-n{font-family:'Playfair Display',serif; font-size:24px; font-weight:600; color:var(--creme); line-height:1;}
.perfil-nivel-l{font-size:8.5px; letter-spacing:.14em; color:var(--gold); font-weight:700;}
.perfil-nivel-nome{font-size:13px; font-weight:700; color:var(--gold-deep);}
.perfil-nivel-falta{font-size:11px; color:var(--text-soft); margin-top:2px;}
.perfil-numeros{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
@media(max-width:900px){ .perfil-numeros{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .perfil-numeros{grid-template-columns:1fr;} }
.perfil-atalhos{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.perfil-atalho{
display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:999px;
border:1px solid var(--line); background:var(--white); color:var(--text-soft);
font-size:12.5px; font-weight:600; transition:all .2s ease;
}
.perfil-atalho:hover{border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px);}
@media(max-width:600px){
.perfil-hero{flex-direction:column; text-align:center;}
.perfil-hero-txt{min-width:0;}
.perfil-atalho{flex:1; justify-content:center;}
}
/* ---------- Selo de módulo concluído ---------- */
.selo-concluido{
position:absolute; top:10px; left:10px; z-index:2;
display:inline-flex; align-items:center; gap:5px;
padding:5px 11px; border-radius:999px;
background:var(--gold-grad); color:var(--noite);
font-size:10.5px; font-weight:700; letter-spacing:.04em;
box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
}
.module-photo-card-lg.concluido{border-color:rgba(217,184,115,.55);}
.module-photo-card-lg.concluido .mpclg-info{background:rgba(217,184,115,.07);}
/* ---------- FormaCast: controles do Admin ---------- */
.fc-info{position:relative;}
.fc-ocultar{
position:absolute; top:-30px; right:10px; z-index:3;
display:inline-flex; align-items:center; gap:5px;
padding:5px 10px; border-radius:999px; border:none;
background:rgba(8,45,35,.85); color:var(--creme);
font-size:10.5px; font-weight:700; opacity:0;
transition:opacity .2s ease, background .2s ease;
}
.fc-card:hover .fc-ocultar{opacity:1;}
.fc-ocultar:hover{background:#C08A6E;}
.fc-ocultos{
margin-top:26px; padding:16px 18px; border-radius:14px;
border:1px dashed var(--line); background:var(--cream2);
}
.fc-ocultos-topo{
display:flex; justify-content:space-between; align-items:center; gap:12px;
font-size:12.5px; color:var(--text-soft); font-weight:600;
}
.fc-ocultos-lista{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
.fc-oculto-item{
display:flex; justify-content:space-between; align-items:center; gap:12px;
font-size:12.5px; padding:8px 0; border-top:1px solid var(--line);
}
.fc-oculto-item span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* ---------- Player dos módulos: o mínimo na tela ---------- */
.vpc-frame{position:relative;}
.vpc-frame video{
width:100%; height:100%; display:block; background:var(--cream2);
outline:none;
}
/* tira o que o navegador ainda oferece de atalho para baixar ou espelhar */
.vpc-frame video::-webkit-media-controls-enclosure{overflow:hidden;}
.vpc-frame video::-internal-media-controls-download-button{display:none;}
.vpc-frame video::-webkit-media-controls-overflow-button{display:none;}
.video-marca{
position:absolute; bottom:52px; right:14px; z-index:2; pointer-events:none;
font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.34);
text-shadow:0 1px 3px rgba(0,0,0,.6); font-weight:600;
mix-blend-mode:screen; user-select:none;
}
@media(max-width:600px){
.video-marca{bottom:46px; right:10px; font-size:9.5px;}
}
/* ================= SORTEIO, PAINEL DO ADMIN ================= */
.sort-numeros{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0;}
@media(max-width:900px){ .sort-numeros{grid-template-columns:1fr 1fr;} }
.sort-num{
background:linear-gradient(155deg, var(--vida), var(--forma)); border:1px solid rgba(217,184,115,.2);
border-radius:16px; padding:20px 22px;
}
.sort-num-n{font-family:'Playfair Display',serif; font-size:34px; font-weight:600; color:var(--gold); line-height:1;}
.sort-num-l{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); font-weight:700; margin-top:10px;}
.sort-premios{display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.sort-premio{
display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px;
border:1px solid var(--line); background:var(--cream2); transition:border-color .2s ease;
}
.sort-premio:hover{border-color:rgba(217,184,115,.45);}
.sort-premio.inativo{opacity:.55;}
.sort-premio-foto{
width:58px; height:58px; border-radius:12px; flex-shrink:0; overflow:hidden;
display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.12); border:1px solid var(--line); color:var(--gold-deep);
}
.sort-premio-foto img{width:100%; height:100%; object-fit:cover;}
.sort-premio-txt{flex:1; min-width:0;}
.sort-premio-nome{font-family:'Playfair Display',serif; font-size:18px; font-weight:600; line-height:1.3; color:var(--text);}
.sort-premio-meta{font-size:12px; color:var(--text-soft); margin-top:4px; line-height:1.5;}
.sort-tag{
display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px; vertical-align:middle;
background:var(--gold-grad); color:var(--noite); font-size:9.5px; font-weight:800;
text-transform:uppercase; letter-spacing:.07em;
}
.sort-tag.off{background:none; border:1px solid var(--line); color:var(--text-soft);}
.sort-premio-acoes{display:flex; gap:5px; flex-shrink:0;}
.sort-ic-btn{
width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); background:transparent; color:var(--text-soft); cursor:pointer;
transition:all .18s ease;
}
.sort-ic-btn:hover:not(:disabled){border-color:var(--gold); color:var(--gold-deep);}
.sort-ic-btn:disabled{opacity:.3; cursor:default;}
.sort-ic-btn.perigo:hover:not(:disabled){border-color:var(--danger); color:var(--danger);}
.sort-check{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-soft); cursor:pointer;}
.sort-check input{width:auto; margin:0;}
.sort-busca-linha{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.sort-busca-linha .rank-search{flex:1; min-width:240px;}
.sort-busca-linha select{width:auto; min-width:200px;}
.sort-tabela td{vertical-align:middle;}
.sort-chip{
display:inline-block; margin:2px 4px 2px 0; padding:4px 10px; border-radius:999px;
border:1px solid rgba(217,184,115,.4); color:var(--gold-deep); font-size:11px; font-weight:600;
}
/* Sorteio ao vivo */
.sort-aovivo{display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start;}
@media(max-width:860px){ .sort-aovivo{grid-template-columns:1fr;} }
.sort-premio-lista{
display:flex; flex-direction:column; gap:6px; padding:12px;
border:1px solid var(--line); border-radius:18px; background:var(--cream2);
}
.sort-premio-opt{
display:flex; align-items:center; gap:11px; text-align:left; width:100%; cursor:pointer;
padding:11px 12px; border-radius:12px; border:1px solid transparent; background:transparent;
color:var(--text); transition:all .18s ease;
}
.sort-premio-opt:hover{background:rgba(217,184,115,.08);}
.sort-premio-opt.ativo{border-color:rgba(217,184,115,.5); background:rgba(217,184,115,.12);}
.sort-opt-foto{
width:38px; height:38px; border-radius:9px; flex-shrink:0; overflow:hidden;
display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.12); color:var(--gold-deep);
}
.sort-opt-foto img{width:100%; height:100%; object-fit:cover;}
.sort-opt-nome{display:block; font-size:13.5px; font-weight:700; line-height:1.35;}
.sort-opt-meta{display:block; font-size:11px; color:var(--text-soft); margin-top:3px;}
.sort-palco{
position:relative; overflow:hidden; border-radius:20px; padding:46px 30px 34px; text-align:center;
background:linear-gradient(155deg, var(--vida), var(--forma));
border:1px solid rgba(217,184,115,.28); box-shadow:0 18px 44px -22px rgba(0,0,0,.45);
}
.sort-palco:fullscreen{display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:0;}
.sort-tela-cheia{
position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9px; cursor:pointer;
border:1px solid var(--line); background:transparent; color:var(--text-soft);
display:flex; align-items:center; justify-content:center; transition:all .18s ease;
}
.sort-tela-cheia:hover{border-color:var(--gold); color:var(--gold);}
.sort-palco-tag{
display:inline-block; padding:6px 15px; border-radius:999px; margin-bottom:18px;
background:rgba(217,184,115,.16); border:1px solid rgba(217,184,115,.35); color:var(--gold);
font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.sort-palco-premio{font-family:'Playfair Display',serif; font-size:clamp(24px,3.6vw,38px); font-weight:600; color:var(--creme); line-height:1.2;}
.sort-palco-conta{font-size:13px; color:rgba(241,233,220,.66); margin-top:8px;}
.sort-palco-nome{
font-family:'Playfair Display',serif; font-size:clamp(30px,5.6vw,58px); font-weight:600; line-height:1.15;
color:rgba(241,233,220,.34); margin:38px 0 6px; min-height:1.15em; word-break:break-word;
transition:opacity .12s ease;
}
.sort-palco.girando .sort-palco-nome{color:rgba(241,233,220,.8); opacity:.75;}
.sort-palco.revelado .sort-palco-nome{
color:var(--gold); animation:sortRevela .75s cubic-bezier(.22,1,.36,1);
text-shadow:0 0 46px rgba(217,184,115,.4);
}
@keyframes sortRevela{
0%{transform:scale(.84); opacity:0;}
60%{transform:scale(1.07); opacity:1;}
100%{transform:scale(1); opacity:1;}
}
.sort-palco-acoes{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.sort-btn-sortear{padding:15px 38px; font-size:13px; letter-spacing:.1em;}
.sort-btn-sec{padding:13px 24px; font-size:12px; border-color:rgba(241,233,220,.4); color:var(--creme);}
.sort-check-palco{justify-content:center; margin-top:20px; color:rgba(241,233,220,.72);}
.sort-palco-ganhos{margin-top:16px; font-size:12px; color:rgba(241,233,220,.55);}
@media(max-width:520px){
.sort-palco{padding:34px 18px 26px;}
.sort-btn-sortear, .sort-btn-sec{width:100%; justify-content:center;}
}
.sort-ajuste{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px;}
.sort-toggle{
width:58px; height:32px; border-radius:999px; flex-shrink:0; cursor:pointer; position:relative;
border:1px solid var(--line); background:var(--cream2); transition:background .22s ease, border-color .22s ease;
}
.sort-toggle span{
position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
background:var(--text-soft); transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s ease;
}
.sort-toggle.ligado{background:rgba(217,184,115,.2); border-color:rgba(217,184,115,.5);}
.sort-toggle.ligado span{transform:translateX(26px); background:var(--gold-grad);}
.sort-historico{display:flex; flex-direction:column; gap:6px;}
.sort-hist-linha{
display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
border:1px solid var(--line); background:var(--cream2);
}
.sort-hist-ic{color:var(--gold-deep); display:flex; flex-shrink:0;}
.sort-hist-nome{font-size:13.5px; font-weight:700;}
.sort-hist-meta{font-size:11.5px; color:var(--text-soft); margin-top:2px;}
/* ================= SORTEIO, PÁGINA DO CASAL ================= */
.sorteio-hero{
position:relative; overflow:hidden; border-radius:22px; padding:48px 38px;
background:linear-gradient(150deg, var(--vida), var(--forma) 70%);
border:1px solid rgba(217,184,115,.26); margin-bottom:24px;
}
.sorteio-hero-brilho{
position:absolute; top:-140px; right:-90px; width:420px; height:420px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.2), transparent 68%); pointer-events:none;
}
.sorteio-hero-txt{position:relative; max-width:560px;}
.sorteio-hero-titulo{
font-family:'Playfair Display',serif; font-size:clamp(28px,4.2vw,42px); font-weight:600;
color:var(--creme); line-height:1.15; margin:10px 0 12px;
}
.sorteio-hero-sub{font-size:14.5px; line-height:1.65; color:rgba(241,233,220,.78); margin:0;}
@media(max-width:600px){ .sorteio-hero{padding:34px 22px;} }
.sorteio-ganhou{
display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:18px; margin-bottom:22px;
background:linear-gradient(140deg, rgba(217,184,115,.2), rgba(217,184,115,.05));
border:1px solid rgba(217,184,115,.5);
}
.sorteio-ganhou-ic{
width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite);
}
.sorteio-ganhou-t{font-family:'Playfair Display',serif; font-size:20px; font-weight:600; color:var(--gold);}
.sorteio-ganhou-s{font-size:13px; color:var(--text-soft); margin-top:4px; line-height:1.55;}
.sorteio-aviso{
display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; margin-bottom:20px;
border:1px solid var(--line); background:var(--cream2); color:var(--text-soft); font-size:13px;
}
.sorteio-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;}
.sorteio-premio{
display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer;
border-radius:18px; border:1.5px solid var(--line); background:var(--cream2); color:var(--text);
transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .2s ease, box-shadow .25s ease;
}
.sorteio-premio:hover:not(:disabled){transform:translateY(-4px); border-color:rgba(217,184,115,.5); box-shadow:0 16px 32px -20px rgba(0,0,0,.5);}
.sorteio-premio.marcado{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.sorteio-premio.encerrado{opacity:.5; cursor:default;}
.sorteio-premio:disabled{cursor:default;}
.sorteio-premio-img{
position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden;
background:linear-gradient(150deg, var(--vida), var(--sage));
display:flex; align-items:center; justify-content:center;
}
.sorteio-premio-img img{width:100%; height:100%; object-fit:cover;}
.sorteio-premio-sem{color:rgba(217,184,115,.6); display:flex;}
.sorteio-marca{
position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite);
opacity:0; transform:scale(.5); transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.sorteio-premio.marcado .sorteio-marca{opacity:1; transform:scale(1);}
.sorteio-premio-info{display:block; padding:16px 18px 18px;}
.sorteio-premio-nome{display:block; font-family:'Playfair Display',serif; font-size:17px; font-weight:600; line-height:1.3;}
.sorteio-premio-meta{display:block; font-size:11.5px; color:var(--text-soft); margin-top:6px;}
.sorteio-rodape{
position:sticky; bottom:16px; margin-top:24px; z-index:5;
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
padding:18px 22px; border-radius:18px;
background:linear-gradient(150deg, var(--vida), var(--forma));
border:1px solid rgba(217,184,115,.35); box-shadow:0 18px 40px -20px rgba(0,0,0,.55);
}
.sorteio-rodape-txt{font-size:14px; color:var(--creme); flex:1; min-width:220px; line-height:1.5;}
.sorteio-rodape-txt b{color:var(--gold);}
.sorteio-ok{
display:inline-block; margin-left:10px; padding:4px 11px; border-radius:999px;
border:1px solid rgba(217,184,115,.45); color:var(--gold); font-size:10.5px; font-weight:800;
text-transform:uppercase; letter-spacing:.08em;
}
@media(max-width:600px){
.sorteio-rodape{position:static; padding:18px;}
.sorteio-rodape .btn{flex:1; justify-content:center;}
}
/* As caixinhas de marcar vinham no azul padrão do navegador, destoando de tudo */
input[type="checkbox"], input[type="radio"]{accent-color:var(--proposito);}
/* ================= PLAYER PRÓPRIO (Vimeo sem a cara do Vimeo) ================= */
.vp{position:relative; width:100%; aspect-ratio:16/9; background:#0E1512; overflow:hidden;}
.vp:fullscreen{aspect-ratio:auto; height:100%;}
.vp-frame{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
/* Véu por cima do quadro: é ele que recebe o clique de tocar/pausar e, de quebra,
impede qualquer toque de chegar no player do Vimeo por baixo. */
.vp-veu{position:absolute; inset:0; cursor:pointer; background:transparent;}
.vp.reserva .vp-veu,
.vp.reserva .vp-barra,
.vp.reserva .vp-play-central,
.vp.reserva .vp-carregando{display:none;}
.vp-carregando{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:rgba(241,233,220,.6); font-size:13px; pointer-events:none;
}
.vp.pronto .vp-carregando{display:none;}
.vp-play-central{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:78px; height:78px; border-radius:50%; border:0; cursor:pointer;
background:var(--gold-grad); color:var(--noite);
display:flex; align-items:center; justify-content:center;
box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
opacity:0; transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}
.vp.pronto .vp-play-central{opacity:1; pointer-events:auto;}
.vp.pronto.tocando .vp-play-central{opacity:0; transform:translate(-50%,-50%) scale(.85); pointer-events:none;}
.vp-play-central:hover{transform:translate(-50%,-50%) scale(1.07);}
.vp-play-central svg{margin-left:4px;}
.vp-barra{
position:absolute; left:0; right:0; bottom:0; z-index:3;
display:flex; align-items:center; gap:11px; padding:14px 16px 13px;
background:linear-gradient(to top, rgba(8,20,15,.92), rgba(8,20,15,.55) 60%, transparent);
opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease;
pointer-events:none;
}
.vp.pronto:hover .vp-barra,
.vp.pronto:not(.tocando) .vp-barra,
.vp.pronto:focus-within .vp-barra{opacity:1; transform:translateY(0); pointer-events:auto;}
.vp-btn{
width:32px; height:32px; flex-shrink:0; border:0; background:transparent; cursor:pointer;
color:var(--creme); display:flex; align-items:center; justify-content:center; border-radius:8px;
transition:color .18s ease, background .18s ease;
}
.vp-btn:hover{color:var(--gold); background:rgba(255,255,255,.08);}
.vp-tempo{font-size:11.5px; color:rgba(241,233,220,.8); font-variant-numeric:tabular-nums; flex-shrink:0;}
.vp-trilho{
position:relative; flex:1; min-width:40px; height:16px; cursor:pointer;
display:flex; align-items:center;
}
.vp-trilho::before{
content:''; position:absolute; left:0; right:0; height:4px; border-radius:999px;
background:rgba(241,233,220,.25);
}
.vp-trilho-fill{
position:absolute; left:0; height:4px; width:0; border-radius:999px;
background:var(--gold-grad); transition:width .12s linear;
}
.vp-trilho-bola{
position:absolute; left:0; width:11px; height:11px; border-radius:50%; margin-left:-5.5px;
background:var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.5);
opacity:0; transition:opacity .18s ease;
}
.vp-trilho:hover .vp-trilho-bola, .vp:hover .vp-trilho-bola{opacity:1;}
/* Tela cheia de verdade (computador e Android) */
.vp:fullscreen, .vp:-webkit-full-screen{aspect-ratio:auto; width:100%; height:100%;}
/* Quase tela cheia: o plano B de quando o navegador não deixa (iPhone).
A caixa sai do lugar e cobre a tela inteira, com o vídeo centralizado. */
.vp-cheia-falsa{
position:fixed !important; inset:0 !important; z-index:9999 !important;
width:100vw !important; height:100dvh !important; aspect-ratio:auto !important;
border-radius:0 !important; background:#000 !important;
}
.vp-cheia-falsa .vp-frame{
top:50%; bottom:auto; left:0; right:0; width:100%; height:auto;
aspect-ratio:16/9; transform:translateY(-50%);
}
.vp-cheia-falsa .vp-barra{padding-bottom:calc(13px + env(safe-area-inset-bottom));}
body.sem-rolagem{overflow:hidden;}
/* No celular não existe passar o mouse por cima: a barra fica sempre à mostra,
e os botões ganham o tamanho que um dedo acerta sem erro. */
@media(hover:none){
.vp.pronto .vp-barra{opacity:1; transform:none; pointer-events:auto;}
.vp-trilho-bola{opacity:1;}
.vp-btn{width:44px; height:44px;}
.vp-trilho{height:26px;}
.vp-trilho::before, .vp-trilho-fill{height:5px;}
.vp-trilho-bola{width:14px; height:14px; margin-left:-7px;}
}
@media(max-width:520px){
.vp-barra{gap:6px; padding:12px 8px 11px;}
.vp-play-central{width:62px; height:62px;}
.vp-tempo{font-size:10.5px;}
/* Numa tela estreita, a barra inteira não cabe com o tempo total repetido. */
.vp-total{display:none;}
}
/* ---------- Atalhos dentro da Minha Jornada (Formulários e FormaCast) ---------- */
.jornada-atalhos{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 4px;}
@media(max-width:700px){ .jornada-atalhos{grid-template-columns:1fr;} }
.jornada-atalho{
display:flex; align-items:center; gap:14px; text-align:left; width:100%; cursor:pointer;
padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--cream2);
color:var(--text); transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .2s ease;
}
.jornada-atalho:hover{transform:translateY(-3px); border-color:rgba(217,184,115,.5);}
.jat-ic{
width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.13); border:1px solid rgba(217,184,115,.3); color:var(--gold-deep);
}
.jat-txt{flex:1; min-width:0;}
.jat-titulo{display:block; font-family:'Playfair Display',serif; font-size:17px; font-weight:600; line-height:1.3;}
.jat-sub{display:block; font-size:12px; color:var(--text-soft); margin-top:3px; line-height:1.45;}
.jat-seta{color:var(--text-soft); flex-shrink:0; display:flex; transition:transform .22s ease;}
.jornada-atalho:hover .jat-seta{transform:translateX(3px); color:var(--gold);}
/* ---------- Barra de rolagem: discreta e na paleta da plataforma ----------
A barra cinza padrão do navegador destoava de tudo. Aqui ela vira um fiozinho
dourado translúcido, que só aparece quando o mouse está por perto. */
.sidebar{scrollbar-width:thin; scrollbar-color:rgba(217,184,115,.25) transparent;}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:transparent; border-radius:999px;}
.sidebar:hover::-webkit-scrollbar-thumb{background:rgba(217,184,115,.28);}
.sidebar:hover::-webkit-scrollbar-thumb:hover{background:rgba(217,184,115,.5);}
/* ---------- Abas e cartões do Meu Perfil ----------
A parte de cima da página (a capa com o anel dourado e as pílulas de atalho) era
bonita, e a de baixo era um formulário comum. Aqui a de baixo passa a falar a mesma
língua: mesmas pílulas, mesmos cantos, mesmos títulos em Playfair. */
.perfil-abas{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.perfil-aba{
display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:999px;
border:1px solid var(--line); background:var(--white); color:var(--text-soft);
font-size:12.5px; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.perfil-aba:hover{border-color:rgba(217,184,115,.5); color:var(--gold-deep); transform:translateY(-2px);}
.perfil-aba.ativa{
background:var(--gold-grad); border-color:transparent; color:var(--noite); font-weight:700;
box-shadow:var(--shadow-soft);
}
#sub-configuracoes .card{
border-radius:18px; border:1px solid var(--line);
background:linear-gradient(155deg, var(--cream2), var(--white));
}
#sub-configuracoes .card h3{
font-family:'Playfair Display',serif; font-weight:600; font-size:19px;
}
@media(max-width:600px){
.perfil-aba{flex:1; justify-content:center;}
}
/* ================= BANNER DE MEUS FORMULÁRIOS (Minha Jornada) ================= */
.form-banner{
position:relative; overflow:hidden; width:100%; text-align:left; cursor:pointer;
display:flex; align-items:center; gap:20px; flex-wrap:wrap;
padding:26px 28px; margin:24px 0 4px; border-radius:20px;
background:linear-gradient(140deg, var(--vida), var(--forma) 78%);
border:1px solid rgba(217,184,115,.3); color:var(--creme);
box-shadow:0 16px 38px -24px rgba(0,0,0,.5);
transition:transform .28s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .28s ease;
}
.form-banner:hover{transform:translateY(-4px); border-color:rgba(217,184,115,.6); box-shadow:0 22px 46px -22px rgba(0,0,0,.6);}
.form-banner-brilho{
position:absolute; top:-110px; right:-60px; width:330px; height:330px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.22), transparent 68%); pointer-events:none;
}
.form-banner-ic{
position:relative; width:62px; height:62px; border-radius:17px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite);
box-shadow:0 12px 26px -12px rgba(201,169,110,.7);
}
.form-banner-txt{position:relative; flex:1; min-width:230px;}
.form-banner-eyebrow{
display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
font-weight:800; color:var(--gold);
}
.form-banner-titulo{
display:block; font-family:'Playfair Display',serif; font-size:25px; font-weight:600;
line-height:1.2; margin:6px 0 7px;
}
.form-banner-sub{display:block; font-size:13px; line-height:1.6; color:rgba(241,233,220,.74); max-width:520px;}
.form-banner-cta{
position:relative; display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
padding:11px 20px; border-radius:999px; border:1px solid rgba(217,184,115,.45);
font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
transition:background .22s ease;
}
.form-banner:hover .form-banner-cta{background:rgba(217,184,115,.14);}
@media(max-width:640px){
.form-banner{padding:22px 20px; gap:16px;}
.form-banner-titulo{font-size:21px;}
.form-banner-cta{width:100%; justify-content:center;}
}
/* ================= DEVOCIONAL ================= */
.dev-capa{
position:relative; overflow:hidden; border-radius:22px; margin-bottom:24px;
background:linear-gradient(150deg, var(--vida), var(--forma) 72%);
border:1px solid rgba(217,184,115,.26);
box-shadow:0 18px 44px -26px rgba(0,0,0,.5);
}
.dev-capa-brilho{
position:absolute; top:-150px; left:-80px; width:460px; height:460px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.17), transparent 68%); pointer-events:none;
}
.dev-capa-dentro{position:relative; padding:40px 38px;}
.dev-capa-linha{display:flex; align-items:center; gap:34px; flex-wrap:wrap;}
.dev-capa-data{
font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
color:var(--gold); margin-bottom:12px;
}
.dev-capa-titulo{
font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,40px); font-weight:600;
line-height:1.14; color:var(--creme); margin:0 0 10px;
}
.dev-capa-sub{font-size:14.5px; line-height:1.65; color:rgba(241,233,220,.76); margin:0 0 22px; max-width:440px;}
.dev-capa-acoes{display:flex; gap:10px; flex-wrap:wrap;}
.dev-capa-btn{
display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; cursor:pointer;
border:1px solid rgba(241,233,220,.28); background:rgba(241,233,220,.06); color:var(--creme);
font-size:12.5px; font-weight:600; transition:all .2s ease;
}
.dev-capa-btn:hover{border-color:var(--gold); color:var(--gold); background:rgba(217,184,115,.12);}
.dev-anel-caixa{text-align:center; flex-shrink:0;}
.dev-anel{
width:112px; height:112px; border-radius:50%; padding:7px; margin:0 auto;
display:flex; align-items:center; justify-content:center;
}
.dev-anel-interno{
width:100%; height:100%; border-radius:50%; background:var(--vida);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.dev-anel-n{font-family:'Playfair Display',serif; font-size:28px; font-weight:600; color:var(--creme); line-height:1;}
.dev-anel-n span{font-size:15px; color:rgba(241,233,220,.5);}
.dev-anel-l{font-size:8.5px; letter-spacing:.16em; color:var(--gold); font-weight:800;}
.dev-anel-tempo{font-size:11.5px; color:rgba(241,233,220,.6); margin-top:10px;}
@media(max-width:700px){
.dev-capa-dentro{padding:30px 22px;}
.dev-capa-linha{gap:24px;}
.dev-anel-caixa{width:100%;}
}
/* A capa da tela sem devocional publicado: o versículo do dia em destaque */
.dev-capa-versiculo .dev-capa-dentro{padding:56px 46px; text-align:center;}
.dev-capa-marca{
position:absolute; top:6px; left:30px; font-family:'Playfair Display',serif;
font-size:150px; line-height:1; color:rgba(217,184,115,.14); pointer-events:none;
}
.dev-capa-eyebrow{
font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
color:var(--gold); margin-bottom:20px;
}
.dev-versiculo{
font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(20px,2.8vw,28px);
line-height:1.55; color:var(--creme); margin:0 auto; max-width:620px;
}
.dev-versiculo-ref{
margin-top:20px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
font-weight:800; color:var(--gold);
}
@media(max-width:700px){ .dev-capa-versiculo .dev-capa-dentro{padding:40px 22px;} }
.dev-aviso-suave{
display:flex; align-items:center; gap:11px; padding:14px 18px; border-radius:13px; margin-bottom:22px;
border:1px solid var(--line); background:var(--cream2); color:var(--text-soft);
font-size:13px; line-height:1.5;
}
.dev-aviso-suave svg{color:var(--gold-deep); flex-shrink:0;}
/* Os três passos do dia */
.dev-passos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px;}
@media(max-width:700px){ .dev-passos{grid-template-columns:1fr;} }
.dev-passo{
display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer;
padding:15px 17px; border-radius:15px; border:1px solid var(--line); background:var(--cream2);
color:var(--text); transition:all .22s cubic-bezier(.22,1,.36,1);
}
.dev-passo:hover{border-color:rgba(217,184,115,.5); transform:translateY(-2px);}
.dev-passo-num{
width:38px; height:38px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-family:'Playfair Display',serif; font-size:15px; font-weight:600;
border:1px solid var(--line); color:var(--text-soft); background:transparent;
transition:all .22s ease;
}
.dev-passo-txt{flex:1; min-width:0;}
.dev-passo-nome{display:block; font-size:14.5px; font-weight:700; line-height:1.3;}
.dev-passo-estado{display:block; font-size:11px; color:var(--text-soft); margin-top:2px;}
.dev-passo.ativo{border-color:var(--gold); background:rgba(217,184,115,.1); box-shadow:0 0 0 1px var(--gold) inset;}
.dev-passo.ativo .dev-passo-num{background:var(--gold-grad); border-color:transparent; color:var(--noite);}
.dev-passo.ativo .dev-passo-estado{color:var(--gold-deep); font-weight:700;}
.dev-passo.feito .dev-passo-num{background:rgba(217,184,115,.18); border-color:rgba(217,184,115,.5); color:var(--gold-deep);}
.dev-passo.feito .dev-passo-nome{color:var(--text-soft);}
/* A folha: onde o conteúdo do dia é lido */
/* A folha é clara de propósito: o passo 01 (a passagem) já era lido em papel, e agora
a reflexão e a oração usam a mesma superfície. A capa escura em cima, as páginas
claras embaixo, como abrir um devocional de verdade. */
.dev-folha{
border-radius:20px; border:1px solid #C3D3C5; background:#DCE7DD;
padding:38px 40px; margin-bottom:18px; max-width:900px;
box-shadow:0 12px 30px -22px rgba(0,0,0,.45);
--text:#1D352A; --text-soft:#5A6B5D; --line:#C3D3C5; --gold-deep:#8A6A2E; --cream2:#CCDBCE;
color:var(--text);
}
.dev-folha textarea{
width:100%; background:#EDF2EC; border:1px solid #C3D3C5; border-radius:12px;
padding:14px 16px; color:var(--text); font-family:'Inter',sans-serif;
font-size:14px; line-height:1.7; resize:vertical;
}
.dev-folha textarea::placeholder{color:#8B9A8D;}
.dev-folha .btn-outline{border-color:#B2C4B4; color:#3C5847;}
.dev-folha .btn-outline:hover:not(:disabled){border-color:var(--gold-deep); color:var(--gold-deep); background:rgba(138,106,46,.08);}
@media(max-width:700px){ .dev-folha{padding:28px 22px;} }
.dev-folha-topo{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.dev-folha-num{
font-family:'Playfair Display',serif; font-size:13px; font-weight:600; color:var(--noite);
width:30px; height:30px; border-radius:50%; background:var(--gold-grad);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dev-folha-ic{color:var(--gold-deep); display:flex; flex-shrink:0;}
.dev-folha-eyebrow{
font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--gold-deep);
}
.dev-folha-titulo{
font-family:'Playfair Display',serif; font-size:clamp(22px,3vw,30px); font-weight:600;
line-height:1.25; margin:0;
}
.dev-regua{width:52px; height:2px; border-radius:999px; background:var(--gold-grad); margin:18px 0 22px;}
.dev-folha-texto{
font-size:16px; line-height:1.85; color:var(--text); margin:0; white-space:pre-wrap;
}
.dev-folha-oracao{font-family:'Playfair Display',serif; font-style:italic; font-size:18px; line-height:1.8;}
.dev-folha-btn{margin-top:28px;}
.dev-perguntas{margin-top:34px; padding-top:28px; border-top:1px solid var(--line);}
.dev-perguntas-t{
display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; font-weight:800; color:var(--gold-deep); margin-bottom:18px;
}
.dev-pergunta{display:flex; gap:15px; padding:14px 0; border-bottom:1px solid var(--line);}
.dev-pergunta:last-child{border-bottom:0; padding-bottom:0;}
.dev-pergunta-n{
font-family:'Playfair Display',serif; font-size:17px; font-weight:600; color:var(--gold-deep);
flex-shrink:0; line-height:1.5;
}
.dev-pergunta-txt{flex:1; font-size:15px; line-height:1.65; font-weight:500;}
.dev-folha-intima{background:linear-gradient(155deg, #E3ECE2, #DCE7DD 60%);}
.dev-intima-sub{font-size:12.5px; color:var(--text-soft); margin:0 0 14px; line-height:1.55;}
.dev-concluido{
position:relative; overflow:hidden; text-align:center; padding:48px 30px; margin-bottom:24px;
border-radius:20px; background:linear-gradient(150deg, var(--vida), var(--forma));
border:1px solid rgba(217,184,115,.4);
}
.dev-concluido-anel{
width:72px; height:72px; border-radius:50%; margin:0 auto 18px;
display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite);
box-shadow:0 16px 34px -14px rgba(201,169,110,.6);
}
.dev-concluido-t{font-family:'Playfair Display',serif; font-size:26px; font-weight:600; color:var(--creme); margin:0 0 8px;}
.dev-concluido-s{color:rgba(241,233,220,.78); margin:0 auto; max-width:440px; line-height:1.65; font-size:14px;}
/* Aviso de link do Vimeo sem o código de privacidade */
.video-aviso-codigo{
display:flex; align-items:flex-start; gap:9px; margin:12px 0 0;
padding:12px 14px; border-radius:11px; font-size:12px; line-height:1.6;
border:1px solid rgba(201,99,99,.4); background:rgba(201,99,99,.08); color:var(--text);
}
.video-aviso-codigo svg{color:var(--danger); flex-shrink:0; margin-top:2px;}
.video-aviso-codigo code{
background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:6px;
padding:2px 6px; font-size:11.5px; word-break:break-all;
}
/* =====================================================================
CELULAR, ACABAMENTO GERAL
---------------------------------------------------------------------
Tudo o que está aqui só vale em tela de celular. Nada nesta seção muda
uma vírgula do que aparece no computador.
===================================================================== */
@media(max-width:860px){
/* 1. O TOPO PASSA A ACOMPANHAR A ROLAGEM
Antes, quem descia numa página longa perdia o botão do menu de vista e
tinha que voltar ao topo só para trocar de página. Agora a barra fica
colada no alto, em uma linha só. */
.topbar{
position:sticky; top:0; z-index:50;
flex-wrap:nowrap; gap:8px; padding:10px 14px;
background:rgba(24,58,46,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}
/* A busca volta para a mesma linha, em vez de abrir uma segunda faixa */
.topbar .search-wrap{order:0; flex:1 1 90px; min-width:0; max-width:none !important; margin:0 !important;}
.topbar .search-wrap input{padding-left:34px !important;}
/* 2. NA HOME, O TOPO NÃO FLUTUA MAIS POR CIMA DA CAPA
No computador a barra flutua transparente sobre a foto grande da hero.
No celular essa hero não existe, quem aparece é a capa simples, e a
barra flutuante caía em cima dela, comendo o topo da foto. É por isso
que a capa parecia cortada. Aqui ela volta a ser uma barra normal. */
.main-col.home-hero-mode .topbar{
position:sticky; padding:10px 14px;
background:rgba(24,58,46,.94); border-bottom:1px solid var(--line);
}
.main-col.home-hero-mode .content{padding-top:16px;}
.main-col.home-hero-mode .topbar .pill{
background:var(--white); border-color:var(--line); color:var(--text-soft);
}
.main-col.home-hero-mode .topbar .pill.gem{color:var(--gold-deep);}
.main-col.home-hero-mode .topbar .pill.flame{color:#E0A97C;}
/* 3. O IPHONE DÁ ZOOM SOZINHO EM CAMPO DE TEXTO PEQUENO
Qualquer campo com letra menor que 16px faz o Safari aproximar a tela
na hora de digitar, e o usuário tem que afastar no dedo depois. */
input:not([type="file"]), textarea, select{font-size:16px !important;}
/* 4. TAMANHO DE TOQUE
Um dedo precisa de uns 44px para acertar de primeira. */
.btn{min-height:46px;}
.nav-item, .sidebar-bottom-item{min-height:46px;}
.perfil-aba, .page-tab, .danger-btn, .perfil-atalho{min-height:44px;}
.mobile-menu-btn{width:44px; height:44px;}
.bell{width:44px; height:44px; flex-shrink:0;}
.check-btn{min-height:46px;}
/* Os redondinhos das redes no rodapé tinham 34px, e os atalhos do FormaCast
35px de altura: dava para errar o toque nos dois. */
.footer-redes a{width:44px; height:44px;}
.fc-links a{min-height:44px; padding:10px 18px;}
.fc-links{flex-wrap:wrap;}
/* "Ver meu diagnóstico ›" e irmãos: texto puro, 16px de altura, e eram para
ser tocados. Ganham altura de botao sem virar botao. */
.link-small{display:inline-flex; align-items:center; min-height:44px;}
p .link-small{display:inline; min-height:0;}
/* Sobrancelhas de seção: 10px é pouco para ler num aparelho na mão. */
.eyebrow{font-size:11px;}
/* 5. AS FILEIRAS QUE ROLAM DE LADO VÃO ATÉ A BORDA DA TELA
Assim fica claro que tem mais coisa para o lado, e o dedo arrasta a
partir de qualquer ponto. */
.netflix-scroll{
margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px;
scroll-padding-left:16px; scrollbar-width:none;
}
.netflix-scroll::-webkit-scrollbar{display:none;}
.netflix-row-arrow{display:none;} /* no celular se arrasta com o dedo */
/* 6. TIRAS DE ABAS ROLAM EM VEZ DE QUEBRAR EM VÁRIAS LINHAS */
.netflix-hero-nav{flex-wrap:nowrap; overflow-x:auto; gap:18px; scrollbar-width:none;}
.netflix-hero-nav::-webkit-scrollbar{display:none;}
.nx-nav-btn{flex-shrink:0;}
/* 7. BOTÕES DE AVANÇAR/VOLTAR UM EMBAIXO DO OUTRO
Lado a lado, com nome de módulo dentro, eles ficavam espremidos. */
.wizard-nav{flex-direction:column-reverse; gap:10px;}
.wizard-nav .btn{width:100%;}
/* 8. FOLGA EMBAIXO para a barra de gestos do celular não cobrir o conteúdo */
.content{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
/* 9. MODAIS MENOS FOLGADOS POR DENTRO, sobra mais espaço para o conteúdo */
.card-modal{padding:32px 22px;}
.iframe-modal-inner{width:100%; height:min(720px, 86dvh); border-radius:20px;}
/* 10. O PAINEL DA AULA ENTRA COLADO NO VÍDEO */
.lesson-grid{gap:18px; margin-top:16px;}
/* 11. O BOTÃO DE RECOLHER A BARRA LATERAL SOME DE VEZ
Ele já era para estar escondido no celular, mas uma regra mais abaixo na
folha o trazia de volta, e dentro da gaveta ele não faz nada. */
.sidebar-collapse-icon-btn{display:none;}
/* 12. "← Voltar" tinha 15px de altura: quase impossível de acertar */
.back-link{min-height:44px; padding:10px 4px; margin-bottom:6px;}
/* 13. As abas da Home ganham altura de toque */
.nx-nav-btn{padding:12px 0 14px;}
/* ---------------------------------------------------------------
14. OS NOVE MÓDULOS VIRAM UMA LISTA, NÃO NOVE PÔSTERES
No computador cada módulo é um cartão grande com capa, e está certo,
cabem três lado a lado. No celular eles empilhavam: nove cartões de
356px, sendo 267px só de foto. Quase seis telas de rolagem, e para
chegar no módulo 7 a pessoa passava por seis capas enormes.
Aqui cada módulo vira uma linha: miniatura à esquerda, nome, e a
barrinha de progresso embaixo. Mesma informação, um quarto da altura.
--------------------------------------------------------------- */
.module-photo-grid{grid-template-columns:1fr; gap:10px;}
.module-photo-card-lg{display:flex; align-items:center; border-radius:12px;}
/* A miniatura guarda o formato em pé das capas em vez de esticar até a
altura da linha, esticada, ela virava quase quadrada e cortava a foto. */
.mpclg-photo{
width:62px; flex-shrink:0; align-self:center; margin:10px 0 10px 10px;
aspect-ratio:var(--capa-proporcao); border-radius:8px; overflow:hidden;
}
.mpclg-photo .mpc-photo-fallback svg{width:22px; height:22px;}
.mpclg-info{flex:1; min-width:0; padding:12px 14px; display:flex; flex-direction:column; justify-content:center;}
.mpclg-title{font-size:15px; line-height:1.25;}
.mpclg-info .progress-track{margin-top:8px !important;}
/* Numa miniatura desse tamanho não cabe o selo escrito: fica só o visto. */
.selo-concluido{top:5px; left:5px; padding:3px; gap:0; font-size:0;}
.mpc-lock{width:22px; height:22px; top:5px; right:5px;}
.mpc-lock svg{width:12px; height:12px;}
/* ---------------------------------------------------------------
15. QUATRO NÚMEROS NÃO PRECISAM DE QUATRO LINHAS
Estes blocos caíam para uma coluna só abaixo de 460px, quatro
cartões empilhados, 640px de rolagem para ler quatro números.
Dois por linha cabem folgados num celular (é o que Meus Formulários
já faz, e funciona).
--------------------------------------------------------------- */
.jornada-numeros, .perfil-numeros, .quick-grid, .admin-stat-grid{
grid-template-columns:repeat(2,1fr); gap:10px;
}
.quick-card{padding:15px 14px; gap:7px; border-radius:14px;}
.quick-icon{width:32px; height:32px; border-radius:9px;}
.quick-title{font-size:14px; line-height:1.25;}
.quick-desc{font-size:12px;}
.quick-arrow{display:none;} /* o cartão inteiro já é o botão */
/* ---------------------------------------------------------------
16. O BOTÃO DE SUPORTE PARA DE COBRIR O CONTEÚDO
Ele é fixo no canto e, num celular, ficava por cima de botão de
verdade, na página do módulo, em cima do "Aula assistida".
--------------------------------------------------------------- */
/* 44px é o menor alvo confortável para um dedo. Estava em 40, e num celular a
diferença entre 40 e 44 é a diferença entre acertar e errar o toque. */
.support-fab{
width:48px; height:48px; right:14px;
bottom:calc(14px + env(safe-area-inset-bottom));
opacity:.92;
}
.support-fab:hover{width:48px; padding:0; justify-content:center;}
.support-fab:hover .support-fab-label{max-width:0; opacity:0;}
/* Enquanto a pessoa rola para baixo ele sai da frente, e volta quando ela
para ou sobe. Ver vigiarBotaoDeAjuda() no app.js. */
.support-fab{transition:width .25s ease, box-shadow .25s ease,
transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;}
.support-fab.fab-recolhido{
transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none;
}
.support-panel{
right:10px; left:10px; width:auto;
bottom:calc(60px + env(safe-area-inset-bottom)); max-height:70dvh;
}
}
/* ---------------------------------------------------------------
17. O QUADRO DO VÍDEO NÃO PISCA MAIS BRANCO
Enquanto o Vimeo não responde, o iframe é branco por padrão, um
retângulo claro no meio de um app todo verde-escuro.
--------------------------------------------------------------- */
.vp-frame{background:#0E1512;}
/* 18. O "Choose File" cru do navegador vira um botão da plataforma. */
input[type="file"]{
color:var(--text-soft); font-size:12.5px;
border:1px dashed var(--line); border-radius:10px; padding:10px 12px; background:var(--cream2);
}
input[type="file"]::file-selector-button{
margin-right:12px; padding:9px 16px; border-radius:999px; cursor:pointer;
border:1px solid rgba(217,184,115,.42); background:rgba(217,184,115,.12);
color:var(--gold); font-family:'Inter',sans-serif; font-weight:700; font-size:12px;
}
input[type="file"]::file-selector-button:hover{background:rgba(217,184,115,.2);}
/* Telas bem estreitas: o rótulo escrito sai e fica só o número. */
@media(max-width:430px){
.pill .pill-txt{display:none;}
.pill{padding:8px 11px; gap:6px;}
.poster-card{width:146px;}
.cw-card{width:236px;}
}
/* ================= FAIXA DE INSTRUÇÕES (topo das páginas de módulo) =================
Substitui a frase solta que ficava no topo e não dizia o que fazer com a página.
São três passos curtos, numerados, lado a lado no computador e empilhados no celular. */
.passos{
border:1px solid var(--line); border-radius:16px; padding:16px 18px 14px;
background:linear-gradient(155deg, rgba(22,70,56,.7), rgba(16,62,50,.7));
margin:0 0 20px;
}
.passos-titulo{
font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:var(--gold-deep); margin-bottom:12px;
}
.passos-lista{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.passo{display:flex; align-items:flex-start; gap:10px; min-width:0;}
.passo-num{
width:22px; height:22px; flex-shrink:0; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(217,184,115,.16); border:1px solid rgba(217,184,115,.4);
color:var(--gold-deep); font-size:11px; font-weight:700;
}
.passo-txt{min-width:0;}
.passo-txt b{display:block; font-size:13px; font-weight:600; color:var(--creme); line-height:1.3;}
.passo-txt span{display:block; font-size:12px; color:var(--text-soft); line-height:1.45; margin-top:3px;}
.passos-rodape{
display:flex; align-items:center; gap:7px; margin-top:14px; padding-top:12px;
border-top:1px solid rgba(216,182,117,.14);
font-size:12px; color:var(--text-soft);
}
.passos-rodape svg{color:var(--gold); flex-shrink:0;}
@media(max-width:860px){
.passos{padding:14px 15px 12px; border-radius:14px;}
.passos-lista{grid-template-columns:1fr; gap:11px;}
}
/* ================= DEVOCIONAL: A ESTANTE =================
O devocional virou um livro só, enviado uma vez. Esta é a capa dele na
plataforma: o volume de um lado, o convite para ler do outro. */
.dev-estante{
position:relative; overflow:hidden; display:flex; align-items:center; gap:34px;
padding:34px 36px; margin:0 0 24px; border-radius:22px;
background:linear-gradient(150deg, #164638 0%, #103E32 55%, #0E3529 100%);
border:1px solid rgba(217,184,115,.26);
box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
}
.dev-estante-brilho{
position:absolute; top:-40%; right:-10%; width:420px; height:420px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.16), transparent 68%);
pointer-events:none;
}
/* O volume: uma capa dourada com lombada, em pé, na proporção de um livro. */
.dev-livro{
position:relative; flex-shrink:0; width:148px; aspect-ratio:3/4.2;
cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
filter:drop-shadow(0 20px 34px rgba(0,0,0,.55));
}
.dev-livro:hover{transform:translateY(-5px) rotate(-1.2deg);}
.dev-livro.vazio{cursor:default; filter:grayscale(70%) brightness(.7);}
.dev-livro.vazio:hover{transform:none;}
.dev-livro-lombada{
position:absolute; inset:0 auto 0 0; width:13px; border-radius:5px 2px 2px 5px;
background:linear-gradient(180deg, #A67E3E, #8A6A2E 60%, #A67E3E);
}
.dev-livro-frente{
position:absolute; inset:0 0 0 10px; border-radius:3px 9px 9px 3px;
background:var(--gold-grad); color:var(--noite-2);
display:flex; flex-direction:column; justify-content:space-between;
padding:18px 16px 20px;
}
.dev-livro-marca{opacity:.85;}
.dev-livro-txt{display:flex; flex-direction:column; gap:3px;}
.dev-livro-selo{
font-size:8.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; opacity:.75;
}
.dev-livro-nome{font-family:'Playfair Display',serif; font-size:25px; font-weight:600; line-height:1;}
.dev-livro-fio{height:2px; border-radius:2px; background:rgba(21,56,45,.4); width:38px;}
.dev-estante-txt{position:relative; flex:1; min-width:0;}
.dev-estante-data{
font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-deep); margin-bottom:9px;
}
.dev-estante-titulo{
font-family:'Playfair Display',serif; font-size:32px; font-weight:500; line-height:1.1;
color:var(--creme); margin:0 0 10px; letter-spacing:-.01em;
}
.dev-estante-sub{color:rgba(241,233,220,.8); font-size:14px; line-height:1.6; margin:0 0 20px; max-width:460px;}
.dev-estante-acoes{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.dev-estante-estado{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding-top:16px; border-top:1px solid rgba(216,182,117,.16);
}
.dev-selo-dia, .dev-selo-seq{
display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px;
background:rgba(241,233,220,.07); color:var(--text-soft); border:1px solid transparent;
}
.dev-selo-dia.ok{background:rgba(155,211,174,.14); color:#9BD3AE; border-color:rgba(155,211,174,.3);}
.dev-selo-seq{color:#E0A97C;}
.dev-sugestoes-titulo{
font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-deep); margin:28px 0 12px;
}
@media(max-width:760px){
.dev-estante{flex-direction:column; align-items:flex-start; gap:22px; padding:24px 20px; border-radius:18px;}
.dev-livro{width:112px;}
.dev-estante-titulo{font-size:26px;}
.dev-estante-acoes .btn{flex:1; min-width:150px; justify-content:center;}
}
/* ================= BLOCO DE OPINIÃO SOBRE O MÉTODO =================
Aparece na Home e em Minha Jornada depois do diagnóstico, e some quando o casal
responde. Precisa ser visível sem parecer propaganda: por isso o dourado entra
só no ícone, na borda e no botão. */
.opiniao{
position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:18px;
padding:24px 26px; margin:0 0 26px; border-radius:18px;
background:linear-gradient(150deg, rgba(22,70,56,.92), rgba(16,62,50,.92));
border:1px solid rgba(217,184,115,.34);
}
.opiniao-brilho{
position:absolute; top:-60%; right:-6%; width:320px; height:320px; border-radius:50%;
background:radial-gradient(circle, rgba(217,184,115,.14), transparent 70%); pointer-events:none;
}
.opiniao-ic{
width:46px; height:46px; border-radius:13px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--gold-grad); color:var(--noite-2);
box-shadow:0 10px 24px -12px rgba(201,169,110,.6);
}
.opiniao-corpo{position:relative; flex:1; min-width:0;}
.opiniao-eyebrow{
font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-deep); margin-bottom:6px;
}
.opiniao-titulo{
font-family:'Playfair Display',serif; font-size:21px; font-weight:600; line-height:1.2;
color:var(--creme); margin:0 0 8px;
}
.opiniao-sub{color:var(--text-soft); font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:560px;}
.opiniao-estrelas{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:14px;}
.opiniao-estrela{
width:40px; height:40px; border:0; background:none; cursor:pointer; padding:0;
display:flex; align-items:center; justify-content:center; border-radius:10px;
color:rgba(241,233,220,.34); transition:color .18s ease, transform .18s ease;
}
.opiniao-estrela:hover{color:var(--gold-deep); transform:scale(1.12);}
.opiniao-estrela.marcada{color:var(--gold-deep);}
.opiniao-estrela.marcada svg{fill:currentColor;}
.opiniao-nota-txt{font-size:12px; color:var(--gold-deep); font-weight:600; margin-left:8px;}
.opiniao textarea{
width:100%; padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.55;
border:1px solid var(--line); background:rgba(0,0,0,.18); color:var(--text);
font-family:'Inter',sans-serif; resize:vertical; min-height:74px;
}
.opiniao textarea:focus{outline:none; border-color:var(--gold);}
.opiniao-acoes{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px;}
.opiniao-aviso{font-size:11.5px; color:var(--text-soft);}
.opiniao-obrigado{align-items:center;}
.opiniao-obrigado .opiniao-ic{background:rgba(155,211,174,.16); color:#9BD3AE; box-shadow:none;}
@media(max-width:700px){
.opiniao{flex-direction:column; gap:14px; padding:20px 18px; border-radius:16px;}
.opiniao-titulo{font-size:18px;}
.opiniao-acoes .btn{width:100%; justify-content:center;}
.opiniao-nota-txt{width:100%; margin:4px 0 0;}
}
/* ---------- Opiniões no painel do administrador ---------- */
.opiniao-media{
display:flex; align-items:baseline; gap:10px; margin-bottom:16px;
padding-bottom:14px; border-bottom:1px solid var(--line);
}
.opiniao-media-n{font-family:'Playfair Display',serif; font-size:34px; font-weight:600; color:var(--gold-deep);}
.opiniao-media-l{font-size:12.5px; color:var(--text-soft);}
.opiniao-lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.opiniao-card{
border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--cream2);
display:flex; flex-direction:column; gap:8px;
}
.opiniao-card-topo{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.opiniao-card-casal{font-size:13px; font-weight:700; color:var(--creme); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.opiniao-card-nota{font-size:13px; color:var(--gold-deep); letter-spacing:1px; flex-shrink:0;}
.opiniao-card-nota span{color:rgba(241,233,220,.2);}
.opiniao-card-semnota{font-size:11px; color:var(--text-soft); flex-shrink:0;}
.opiniao-card-txt{font-size:13px; line-height:1.55; color:var(--text); margin:0; white-space:pre-wrap;}
.opiniao-card-txt.vazio{color:var(--text-soft); font-style:italic;}
.opiniao-card-pe{font-size:11px; color:var(--text-soft); padding-top:8px; border-top:1px solid rgba(216,182,117,.12);}
/* ---------- O destaque do FormaCast no celular ----------
No computador o texto fica por cima da capa, e cabe: a moldura tem quase 400px
de altura. Num celular de 390px de largura, a mesma moldura 16 por 9 tem 201px,
e o texto sozinho pedia 196px. Ou seja, a etiqueta, o título e o botão cobriam a
capa inteira e ficavam em cima da imagem, ilegíveis.
No celular, então, a capa e o texto deixam de se sobrepor: a imagem fica inteira
em cima, o texto inteiro embaixo, em fundo cheio. Nada tapa nada. */
@media(max-width:700px){
.fc-destaque{
display:block; border-radius:16px;
aspect-ratio:auto; height:auto;
background:var(--cream2);
}
.fc-destaque-img{
position:relative; inset:auto;
width:100%; height:auto; aspect-ratio:16/9; display:block;
border-radius:16px 16px 0 0;
}
.fc-destaque-veu{display:none;}
.fc-destaque-txt{
max-width:none; padding:14px 15px 16px;
}
.fc-destaque-resumo{display:none;}
.fc-destaque-titulo{font-size:18px; line-height:1.3; margin:0 0 12px;}
.fc-etiqueta{margin-bottom:10px;}
/* O botão ocupa a linha inteira e a data com a duração ficam juntas embaixo,
em vez de a duração cair sozinha numa terceira linha. */
.fc-destaque-meta{gap:8px 12px;}
.fc-destaque-meta .fc-btn-play{flex:0 0 100%; justify-content:center;}
.fc-btn-play{padding:11px 18px; font-size:13px;}
}
/* ---------- A capa verdadeira do devocional ----------
Enquanto a primeira página do PDF não chega, fica o livro dourado desenhado.
Quando ela chega, entra no lugar, com a mesma sombra e o mesmo formato. */
.dev-livro.com-capa{background:none;}
.dev-livro.com-capa .dev-livro-lombada,
.dev-livro.com-capa .dev-livro-frente{display:none;}
.dev-livro-capa{
display:block; width:100%; height:100%;
object-fit:cover; border-radius:3px 9px 9px 3px;
border-left:4px solid rgba(21,56,45,.5); /* a lombada, agora só uma sombra na borda */
/* Um anel claro em volta, para o livro se destacar do fundo verde mesmo quando
a capa dele for escura. */
box-shadow:0 0 0 1px rgba(241,233,220,.28), 0 18px 32px -16px rgba(0,0,0,.65);
-webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
/* ---------- Leitor: virar a página com o dedo ----------
Faixas invisíveis nas laterais. Quem lê num celular vira a página tocando na
borda, que é o gesto de todo aplicativo de leitura, em vez de mirar num botão. */
.ebook-toque{
position:absolute; top:0; bottom:56px; width:22%;
border:0; background:transparent; cursor:pointer; z-index:2; padding:0;
-webkit-tap-highlight-color:transparent;
}
.ebook-toque-esq{left:0;}
.ebook-toque-dir{right:0;}
.ebook-toque:active{background:rgba(241,233,220,.05);}
@media(hover:hover){ .ebook-toque{display:none;} } /* no computador as setas bastam */
/* ---------- Leitor: onde estamos no livro ---------- */
.ebook-progresso{
flex-shrink:0; height:12px; display:flex; align-items:center;
padding:0 14px; cursor:pointer; background:rgba(8,20,15,.85);
}
.ebook-progresso::before{
content:''; position:absolute; left:14px; right:14px; height:3px;
border-radius:999px; background:rgba(241,233,220,.16);
}
.ebook-progresso{position:relative;}
.ebook-progresso-fill{
position:relative; height:3px; border-radius:999px; width:0;
background:var(--gold-grad); transition:width .25s ease; z-index:1;
}
/* ---------- Validade do acesso ----------
A faixa entra como primeiro item da área de conteúdo e some ao ser fechada, mas
volta no dia seguinte enquanto o prazo estiver correndo. Na última semana ela
muda de cor: é aviso, não enfeite. */
.validade-faixa{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin:0 0 20px; padding:12px 16px; border-radius:14px;
border:1px solid rgba(216,182,117,.34); background:rgba(201,169,110,.10);
font-size:13.5px; line-height:1.45; color:var(--text);
}
.validade-faixa.urgente{
border-color:rgba(214,110,90,.55); background:rgba(214,110,90,.13);
}
.validade-ic{display:inline-flex; color:var(--gold-deep); flex-shrink:0;}
.validade-faixa.urgente .validade-ic{color:#E08B74;}
.validade-txt{flex:1; min-width:180px;}
.validade-txt b{color:var(--creme);}
.validade-btn{
padding:8px 16px; border-radius:9px; border:0; cursor:pointer; flex-shrink:0;
background:var(--gold-grad); color:var(--noite); font-size:12.5px; font-weight:700;
}
.validade-x{
background:none; border:0; cursor:pointer; color:var(--text-soft);
font-size:19px; line-height:1; padding:2px 4px; flex-shrink:0;
}
.validade-x:hover{color:var(--creme);}
.acesso-card{text-align:center; max-width:460px;}
.acesso-selo{
display:inline-flex; align-items:center; justify-content:center;
width:74px; height:74px; border-radius:50%; margin-bottom:18px;
color:var(--gold); background:rgba(201,169,110,.12);
border:1px solid rgba(216,182,117,.3);
}
.acesso-nome{
margin:-4px 0 14px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep);
}
.acesso-guardado{
font-size:12.5px; padding:12px 14px; border-radius:12px; margin-bottom:18px;
background:rgba(255,255,255,.04); border:1px solid rgba(216,182,117,.16);
}
.hub-acesso-linha{
display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.hub-acesso-estado{font-size:15px; font-weight:700;}
.hub-acesso-datas{font-size:12px; color:var(--text-soft);}
.hub-acesso-motivo{
margin:8px 0 0; font-size:12.5px; color:var(--text-soft); font-style:italic;
}
@media(max-width:700px){
.validade-faixa{padding:11px 13px; font-size:13px; gap:9px;}
.validade-btn{padding:8px 14px;}
.acesso-selo{width:62px; height:62px;}
}
/* ---------- Painel de acessos ---------- */
.ac-aviso{
display:flex; gap:13px; align-items:flex-start;
padding:14px 16px; border-radius:14px; margin-bottom:20px;
border:1px solid rgba(216,182,117,.34); background:rgba(201,169,110,.10);
font-size:13.5px; line-height:1.5; color:var(--text);
}
.ac-aviso.grave{border-color:rgba(214,110,90,.55); background:rgba(214,110,90,.12);}
.ac-aviso.ok{border-color:rgba(216,182,117,.18); background:rgba(255,255,255,.03);}
.ac-aviso b{color:var(--creme);}
.ac-aviso-ic{display:inline-flex; color:var(--gold-deep); flex-shrink:0; margin-top:1px;}
.ac-aviso.grave .ac-aviso-ic{color:#E08B74;}
.ac-aviso.ok .ac-aviso-ic{color:var(--gold-deep);}
.ac-email{font-size:11.5px; color:var(--text-soft); margin-top:3px;}
.ac-tag{
display:inline-block; padding:4px 10px; border-radius:999px;
font-size:11.5px; font-weight:700; white-space:nowrap;
}
.ac-tag.calma {background:rgba(255,255,255,.06); color:var(--text-soft);}
.ac-tag.atencao{background:rgba(201,169,110,.18); color:var(--gold-deep);}
.ac-tag.ruim {background:rgba(214,110,90,.18); color:#E9A08C;}
@media(max-width:700px){
.ac-aviso{padding:12px 13px; font-size:13px;}
}
/* ---------- A opinião já enviada, em Minha Jornada ---------- */
.opiniao-lida-notas{display:flex; gap:5px; margin:0 0 12px;}
.opiniao-lida-estrela{display:inline-flex; color:rgba(241,233,220,.22);}
.opiniao-lida-estrela.cheia{color:var(--gold-deep);}
.opiniao-lida-txt{
margin:0 0 14px; padding:12px 14px; border-radius:12px;
background:rgba(255,255,255,.04); border:1px solid rgba(216,182,117,.16);
font-size:13.5px; line-height:1.6; color:var(--text); white-space:pre-wrap;
}
/* Alvo de toque mínimo no celular, onde o dedo é o ponteiro. */
@media(max-width:860px){
.opiniao-estrela{min-width:44px; min-height:44px;}
.fc-limpar{min-height:44px; padding-left:10px; padding-right:10px;}
}
/* ---------- Escrever uma anotação ----------
A página de anotações mostrava sem deixar escrever. A caixa abaixo é a caneta
que faltava, e fica no topo da lista, onde a pessoa já está olhando. */
.anot-nova{
padding:16px 18px 18px; border-radius:16px; margin-bottom:18px;
border:1px solid rgba(216,182,117,.28); background:rgba(201,169,110,.07);
}
.anot-nova-topo{display:flex; align-items:center; gap:9px; margin-bottom:11px;}
.anot-nova-ic{display:inline-flex; color:var(--gold-deep);}
.anot-nova-eyebrow{
font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep);
}
.anot-nova textarea,
.anot-card-edicao textarea{
width:100%; resize:vertical; min-height:80px;
padding:12px 14px; border-radius:12px;
border:1px solid rgba(216,182,117,.34); background:rgba(0,0,0,.32);
color:var(--text); font-size:14px; line-height:1.6; font-family:inherit;
}
.anot-nova textarea:focus,
.anot-card-edicao textarea:focus{outline:none; border-color:var(--gold);}
.anot-nova-acoes{
display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
}
.anot-nova-aviso{font-size:11.5px; color:var(--text-soft);}
.anot-card-topo{
display:flex; align-items:baseline; justify-content:space-between;
gap:12px; margin-bottom:8px;
}
.anot-card-label{color:var(--gold-deep); font-weight:700; font-size:12.5px;}
.anot-card-acoes{display:flex; gap:12px; flex-shrink:0;}
.anot-btn{
background:none; border:0; cursor:pointer; padding:4px 2px;
font-size:12px; color:var(--text-soft);
}
.anot-btn:hover{color:var(--gold-deep);}
.anot-card-txt{font-size:14px; line-height:1.6; white-space:pre-wrap;}
.anot-card-edicao{margin-top:4px;}
@media(max-width:860px){
.anot-nova{padding:14px 15px 16px;}
.anot-btn{min-height:44px; padding:0 6px;} /* alvo de dedo */
.anot-card-acoes{gap:6px;}
}
/* ---------- O Termo em destaque, antes do vídeo ----------
Ele estava num cartão igual aos outros, embaixo. Mas o Termo é o que o casal
combina ANTES de assistir, então ele sobe e ganha a largura inteira. */
.termo-destaque{
display:flex; align-items:center; gap:16px; cursor:pointer;
padding:18px 20px; border-radius:16px; margin:0 0 22px;
background:linear-gradient(135deg, rgba(201,169,110,.16), rgba(201,169,110,.07));
border:1px solid rgba(216,182,117,.42);
transition:transform .2s ease, border-color .2s ease;
}
.termo-destaque:hover{transform:translateY(-2px); border-color:var(--gold);}
.termo-destaque-ic{
display:flex; align-items:center; justify-content:center; flex-shrink:0;
width:48px; height:48px; border-radius:13px;
background:var(--gold-grad); color:var(--noite);
}
.termo-destaque-txt{flex:1; min-width:0;}
.termo-destaque-eyebrow{
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep); margin-bottom:4px;
}
.termo-destaque-titulo{
font-family:'Playfair Display',serif; font-size:19px; font-weight:500;
color:var(--creme); line-height:1.2; margin-bottom:5px;
}
.termo-destaque-sub{font-size:13px; line-height:1.55; color:var(--text-soft);}
.termo-destaque-cta{
flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--gold-deep); white-space:nowrap;
}
.termo-destaque.feito{
background:rgba(255,255,255,.04); border-color:rgba(216,182,117,.2);
}
.termo-destaque.feito .termo-destaque-ic{background:rgba(201,169,110,.2); color:var(--gold-deep);}
.termo-destaque.indisponivel{
cursor:default; opacity:.55;
background:rgba(255,255,255,.03); border-color:rgba(216,182,117,.14);
}
.termo-destaque.indisponivel:hover{transform:none;}
.termo-destaque.indisponivel .termo-destaque-ic{background:rgba(255,255,255,.07); color:var(--text-soft);}
/* ---------- O vídeo do casal trancado até o formulário ----------
Ocupa o mesmo lugar e quase a mesma altura que o vídeo ocuparia, para a
página não dar um salto quando ele destrava. */
.video-trancado{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:14px; padding:54px 26px; min-height:290px;
border-radius:18px;
background:
radial-gradient(circle at 50% 0%, rgba(201,169,110,.1), transparent 68%),
rgba(255,255,255,.028);
border:1px solid rgba(216,182,117,.2);
}
.video-trancado-ic{
display:flex; align-items:center; justify-content:center;
width:60px; height:60px; border-radius:50%;
background:rgba(201,169,110,.14); border:1px solid rgba(216,182,117,.34);
color:var(--gold-deep);
}
.video-trancado-eyebrow{
font-size:10px; letter-spacing:.2em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep);
}
.video-trancado-titulo{
font-family:'Playfair Display',serif; font-size:23px; font-weight:500;
color:var(--creme); line-height:1.25; margin-top:-6px;
}
.video-trancado-txt{
margin:0; max-width:430px; font-size:14px; line-height:1.7; color:var(--text-soft);
}
.video-trancado-nota{font-size:12px; color:rgba(241,232,216,.42);}
@media(max-width:700px){
.video-trancado{padding:38px 18px; min-height:0; gap:12px;}
.video-trancado-ic{width:52px; height:52px;}
.video-trancado-titulo{font-size:19px;}
.video-trancado-txt{font-size:13.5px;}
.video-trancado .btn{width:100%;}
}
/* ---------- Cadeado: a página existe, o conteúdo é que não ----------
Nada some do menu. Quem não comprou abre a página e encontra isto. */
.cadeado-tela{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:13px; padding:64px 26px; min-height:360px;
border-radius:20px; margin-top:8px;
background:
radial-gradient(circle at 50% 0%, rgba(201,169,110,.1), transparent 70%),
rgba(255,255,255,.028);
border:1px solid rgba(216,182,117,.2);
}
.cadeado-ic{
display:flex; align-items:center; justify-content:center;
width:68px; height:68px; border-radius:50%;
background:rgba(201,169,110,.14); border:1px solid rgba(216,182,117,.34);
color:var(--gold-deep);
}
.cadeado-eyebrow{
font-size:10px; letter-spacing:.2em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep);
}
.cadeado-titulo{
font-family:'Playfair Display',serif; font-size:27px; font-weight:500;
color:var(--creme); line-height:1.2; margin:-4px 0 0;
}
.cadeado-txt{margin:0; font-size:15px; line-height:1.6; color:var(--text-soft); max-width:420px;}
.cadeado-produto{
margin:2px 0 0; font-size:13px; line-height:1.65; max-width:440px;
color:rgba(241,232,216,.5);
}
.cadeado-botoes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
@media(max-width:700px){
.cadeado-tela{padding:44px 18px; min-height:0;}
.cadeado-titulo{font-size:22px;}
.cadeado-txt{font-size:14px;}
.cadeado-botoes{width:100%; flex-direction:column;}
.cadeado-botoes .btn{width:100%;}
}
/* ---------- A vitrine de produtos ---------- */
.prod-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
gap:16px; margin-top:14px;
}
.prod-card{
display:flex; flex-direction:column; cursor:pointer; overflow:hidden;
border-radius:16px; background:rgba(255,255,255,.04);
border:1px solid rgba(216,182,117,.2);
transition:transform .16s ease, border-color .16s ease;
}
.prod-card:hover{transform:translateY(-3px); border-color:var(--gold);}
.prod-capa{
position:relative; aspect-ratio:var(--capa-proporcao);
background-size:cover; background-position:center;
background-color:rgba(201,169,110,.1);
display:flex; align-items:center; justify-content:center;
}
.prod-capa-ic{color:var(--gold-deep); opacity:.7;}
.prod-cadeado{
position:absolute; top:10px; right:10px;
display:flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%;
background:rgba(16,38,30,.82); border:1px solid rgba(216,182,117,.4);
color:var(--gold-deep);
}
.prod-corpo{padding:14px 15px 10px; flex:1;}
.prod-nome{
font-family:'Playfair Display',serif; font-size:16px; font-weight:500;
color:var(--creme); line-height:1.25; margin-bottom:6px;
}
.prod-resumo{font-size:12.5px; line-height:1.55; color:var(--text-soft);}
.prod-pe{padding:0 15px 14px;}
.prod-tag{
display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.prod-tag.liberado{color:var(--gold-deep);}
.prod-tag.comprar{color:var(--creme);}
/* O valor fica acima do "Quero este", em linha própria e em serifada:
ele é a informação que decide a compra, e precisa ser lido antes do
botão, não junto com ele. */
.prod-preco{
display:block; margin-bottom:5px;
font-family:'Playfair Display',Georgia,serif; font-weight:600;
font-size:17px; line-height:1.1; color:var(--gold);
}
/* O produto que a pessoa não tem: cinza, mas visível. Ela precisa saber
que existe, senão não tem o que querer. */
.prod-card.bloqueado{background:rgba(255,255,255,.022); border-color:rgba(216,182,117,.12);}
.prod-card.bloqueado .prod-capa{filter:grayscale(1); opacity:.42;}
.prod-card.bloqueado .prod-nome{color:rgba(241,232,216,.6);}
.prod-card.bloqueado .prod-resumo{color:rgba(241,232,216,.34);}
.prod-card.bloqueado:hover{border-color:rgba(216,182,117,.4);}
.prod-card.bloqueado:hover .prod-capa{filter:grayscale(.4); opacity:.7;}
.prod-faixa{
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
padding:14px 18px; border-radius:14px; margin-top:16px;
background:rgba(255,255,255,.035); border:1px solid rgba(216,182,117,.2);
font-size:13.5px; color:var(--text-soft);
}
.prod-faixa b{color:var(--gold-deep); font-size:15px;}
.prod-faixa-completo{
display:flex; align-items:center; gap:14px;
padding:16px 18px; border-radius:14px; margin-top:16px;
background:linear-gradient(135deg, rgba(201,169,110,.15), rgba(201,169,110,.06));
border:1px solid rgba(216,182,117,.36); color:var(--gold-deep);
}
.prod-faixa-completo b{display:block; color:var(--creme); font-size:15px; margin-bottom:3px;}
.prod-faixa-completo span{font-size:13px; color:var(--text-soft); line-height:1.55;}
@media(max-width:700px){
.prod-grid{grid-template-columns:1fr 1fr; gap:12px;}
.prod-nome{font-size:14px;}
.prod-resumo{font-size:11.5px;}
.prod-faixa{flex-direction:column; align-items:stretch; text-align:center;}
.prod-faixa .btn{width:100%;}
}
/* O hero proprio desta tela foi removido: a home de quem comprou avulso
passou a usar exatamente o mesmo hero da home completa (.netflix-hero no
computador, .mobile-hero-simple no celular). Era dai que vinha o corte:
o "modo hero" da home tira o espaco do topo e deixa a barra superior
transparente, porque espera um hero que ocupa a largura inteira, e o
daqui nao ocupava. Duas pecas para a mesma funcao sempre acabam assim. */
/* ---------- Admin: escolher o que o casal vai ter ----------
Estas opções moram dentro de um .field, e o .field tem regras antigas que
valem para campo de digitar: input com largura total e rótulo em maiúscula.
Aplicadas a um rádio, elas esticam a bolinha pela linha toda e gritam o
texto. As três regras abaixo desfazem isso só aqui dentro. */
.plano-op input[type="radio"], .prod-check input[type="checkbox"]{
width:17px; height:17px; min-width:17px; padding:0; border-radius:50%;
background:none; border:none; flex:0 0 auto;
}
.prod-check input[type="checkbox"]{border-radius:4px;}
/* O .field prefixa os dois seletores abaixo de propósito: sem ele, a regra
antiga ".field label" ganha por ser mais específica, e volta a empilhar o
rádio em cima do texto e a gritar tudo em maiúscula. */
.field .plano-op, .field .prod-check{
display:flex; text-transform:none; letter-spacing:normal; margin-bottom:0;
}
.field .plano-op{align-items:flex-start;}
.field .prod-check{align-items:center;}
.plano-escolha{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.plano-op{
display:flex; align-items:flex-start; gap:11px; cursor:pointer;
padding:13px 15px; border-radius:13px;
background:rgba(255,255,255,.035); border:1px solid rgba(216,182,117,.2);
transition:border-color .15s ease, background .15s ease;
}
.plano-op:hover{border-color:rgba(216,182,117,.45);}
.plano-op input{margin-top:3px; flex-shrink:0; accent-color:var(--gold);}
.plano-op b{display:block; font-size:14px; color:var(--creme); margin-bottom:3px;}
.plano-op small{display:block; font-size:12.5px; line-height:1.55; color:var(--text-soft);}
.plano-op:has(input:checked){
background:linear-gradient(135deg, rgba(201,169,110,.14), rgba(201,169,110,.05));
border-color:var(--gold);
}
/* Jogo que precisa de duas pessoas, visto por quem tem acesso individual.
Continua na tela, apagado, dizendo o que é. */
.game-card-travado{opacity:.62; border-style:dashed;}
.game-card-travado h3{color:var(--text-soft);}
/* A marcação de acesso individual fica visualmente à parte das duas opções
de plano: ela não substitui nenhuma das duas, se soma a elas. */
.plano-op-solo{
border-style:dashed;
background:rgba(0,0,0,.14);
}
.plano-op-solo:has(input:checked){
border-style:solid;
background:linear-gradient(135deg, rgba(201,169,110,.14), rgba(201,169,110,.05));
border-color:var(--gold);
}
.field .plano-op-solo input[type="checkbox"]{
width:17px; height:17px; min-width:17px; padding:0; border-radius:4px;
background:none; border:none; flex:0 0 auto; margin-top:3px;
}
.prod-lista{
margin-top:12px; padding:14px 16px; border-radius:13px;
background:rgba(0,0,0,.14); border:1px solid rgba(216,182,117,.16);
}
.prod-lista-aviso{
font-size:12px; line-height:1.55; color:var(--gold-deep);
padding-bottom:11px; margin-bottom:11px;
border-bottom:1px solid rgba(216,182,117,.16);
}
.prod-lista-grupo{margin-bottom:14px;}
.prod-lista-grupo:last-child{margin-bottom:0;}
.prod-lista-grupo > b{
display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
font-weight:700; color:var(--gold-deep); margin-bottom:7px;
}
.prod-check{
display:flex; align-items:center; gap:9px; cursor:pointer;
padding:6px 2px; font-size:13px; color:var(--text-soft); line-height:1.4;
}
.prod-check:hover{color:var(--creme);}
.prod-check input{flex-shrink:0; accent-color:var(--gold); width:15px; height:15px;}
.prod-check input:checked + span{color:var(--creme); font-weight:600;}
/* ---------- Progresso do módulo, em uma linha ---------- */
.modulo-progresso{
display:flex; align-items:center; gap:14px; cursor:pointer;
padding:12px 16px; border-radius:12px; margin:18px 0 0;
background:rgba(255,255,255,.03); border:1px solid rgba(216,182,117,.16);
font-size:12.5px; color:var(--text-soft);
}
.modulo-progresso:hover{border-color:rgba(216,182,117,.34);}
.modulo-progresso-txt{flex-shrink:0;}
.modulo-progresso-barra{flex:1; min-width:60px; margin:0;}
.modulo-progresso-pct{font-weight:700; color:var(--gold-deep); flex-shrink:0;}
.modulo-progresso-link{flex-shrink:0; color:var(--text-soft);}
@media(max-width:700px){
.termo-destaque{padding:15px 16px; gap:13px;}
.termo-destaque-ic{width:42px; height:42px;}
.termo-destaque-titulo{font-size:17px;}
.termo-destaque-cta{display:none;}
.modulo-progresso{flex-wrap:wrap; gap:9px 12px; font-size:12px;}
.modulo-progresso-barra{order:3; flex-basis:100%;}
}
/* ---------- Perfil: os números em faixa, e o topo mais baixo ---------- */
.perfil-numeros{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0 0 18px;
border-radius:14px; overflow:hidden;
background:rgba(216,182,117,.14); border:1px solid rgba(216,182,117,.2);
}
.perfil-numero{
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:14px 6px; background:var(--cream); text-align:center;
}
.pn-n{font-family:'Playfair Display',serif; font-size:22px; color:var(--gold-deep); line-height:1;}
.pn-l{font-size:10.5px; color:var(--text-soft); letter-spacing:.04em;}
@media(max-width:860px){
/* O topo do perfil empilhava foto, nome e anel de pontos, um debaixo do outro,
e sozinho já tomava dois terços da primeira tela. Agora a foto e o anel ficam
lado a lado, com o nome no meio. */
.perfil-hero{
display:grid; grid-template-columns:auto 1fr; gap:14px 16px;
align-items:center; text-align:left; padding:18px 16px;
}
.perfil-hero-foto{grid-row:1; grid-column:1;}
.perfil-hero-foto > *{width:64px !important; height:64px !important; font-size:26px !important;}
.perfil-hero-txt{grid-row:1; grid-column:2; text-align:left;}
.perfil-hero-nome{font-size:22px; margin:2px 0 4px;}
.perfil-hero-sub{font-size:12.5px; line-height:1.5;}
.perfil-hero-nivel{
grid-row:2; grid-column:1 / -1;
display:flex; align-items:center; gap:14px; text-align:left;
padding-top:14px; border-top:1px solid rgba(216,182,117,.16);
}
.perfil-nivel-anel{width:70px !important; height:70px !important; flex-shrink:0;}
.perfil-nivel-interno{width:58px !important; height:58px !important;}
.perfil-nivel-n{font-size:17px !important;}
/* 8.5px e 9.5px são pequenos demais num aparelho na mão: estes rótulos
dizem o que cada número significa, e sem eles os números não querem
dizer nada. */
.perfil-nivel-l{font-size:11.5px !important; letter-spacing:.09em;}
.perfil-nivel-nome{margin:0;}
.perfil-nivel-falta{margin:0; font-size:11.5px;}
.pn-n{font-size:18px;}
.pn-l{font-size:11.5px;}
.perfil-numero{padding:11px 4px;}
}
/* ---------- Anotações do devocional ---------- */
.anot-capa{
position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:16px;
padding:22px 22px 24px; border-radius:18px; margin:0 0 20px;
background:linear-gradient(135deg, rgba(201,169,110,.13), rgba(201,169,110,.05));
border:1px solid rgba(216,182,117,.3);
}
.anot-capa-brilho{
position:absolute; top:-70px; right:-50px; width:200px; height:200px; border-radius:50%;
background:radial-gradient(circle, rgba(201,169,110,.18), transparent 70%); pointer-events:none;
}
.anot-capa-ic{
position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0;
width:52px; height:52px; border-radius:14px; background:var(--gold-grad); color:var(--noite);
}
.anot-capa > div:last-child{position:relative;}
.aba-conta{
display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
font-size:10.5px; font-weight:700; background:rgba(201,169,110,.2); color:var(--gold-deep);
}
.page-tab.active .aba-conta{background:rgba(18,57,44,.2); color:var(--noite);}
.anot-lista-titulo{
font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
color:var(--text-soft); margin:22px 0 10px;
}
.anot-vazio{
text-align:center; padding:44px 26px; border-radius:16px;
background:rgba(255,255,255,.03); border:1px dashed rgba(216,182,117,.26);
}
.anot-vazio-ic{color:var(--gold-deep); margin-bottom:14px;}
.anot-vazio-t{font-size:15px; font-weight:700; color:var(--creme); margin-bottom:7px;}
.anot-vazio-s{font-size:13px; color:var(--text-soft); margin:0 auto 16px; max-width:330px; line-height:1.6;}
@media(max-width:700px){
.anot-capa{padding:18px 16px 20px; gap:13px;}
.anot-capa-ic{width:44px; height:44px;}
}
/* O seletor de arquivo vinha cru do navegador, com "Choose File" em inglês e o
visual do sistema no meio de uma página em português. Não dá para trocar o texto
por CSS, mas dá para vestir o botão e esconder o nome do arquivo cortado. */
input[type="file"]{
font-family:inherit; font-size:12.5px; color:var(--text-soft);
max-width:100%;
}
input[type="file"]::file-selector-button{
margin-right:12px; padding:10px 18px; border-radius:10px; cursor:pointer;
border:1px solid rgba(216,182,117,.42); background:rgba(201,169,110,.12);
color:var(--gold-deep); font-family:inherit; font-size:12.5px; font-weight:700;
transition:background .2s ease, border-color .2s ease;
}
input[type="file"]::file-selector-button:hover{
background:rgba(201,169,110,.2); border-color:var(--gold);
}
@media(max-width:700px){
input[type="file"]{font-size:11.5px;}
input[type="file"]::file-selector-button{padding:11px 14px; margin-right:9px;}
/* No celular o "Espaço de " quebrava em duas linhas e empurrava o nome. */
.perfil-hero-txt .eyebrow{font-size:9.5px; letter-spacing:.12em;}
}
/* ---------- Marca d'água identificada sobre o vídeo ----------
Discreta o bastante para não atrapalhar quem assiste, legível o bastante para
aparecer em qualquer gravação de tela. Troca de canto sozinha, então não dá para
cortar fora na edição. Não recebe cliques: o vídeo continua respondendo normal. */
.video-marca{
position:absolute; z-index:6; pointer-events:none; user-select:none;
font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
color:rgba(255,255,255,.34); text-shadow:0 1px 3px rgba(0,0,0,.65);
padding:5px 9px; border-radius:6px; background:rgba(0,0,0,.14);
transition:top .8s ease, bottom .8s ease, left .8s ease, right .8s ease, opacity .8s ease;
max-width:70%; overflow:hidden; text-overflow:ellipsis;
}
.video-marca.canto-1{top:12px; left:12px; right:auto; bottom:auto;}
.video-marca.canto-2{top:12px; right:12px; left:auto; bottom:auto;}
.video-marca.canto-3{bottom:52px; right:12px; top:auto; left:auto;}
.video-marca.canto-4{bottom:52px; left:12px; top:auto; right:auto;}
.vpc-frame{position:relative;}
@media(max-width:700px){
.video-marca{font-size:9.5px; padding:4px 7px; max-width:60%;}
.video-marca.canto-3, .video-marca.canto-4{bottom:46px;}
}
/* ================================================================
ACABAMENTO
Esta camada vem por último de propósito, e não muda a estrutura de
nenhuma tela: nada troca de lugar, nada muda de tamanho, nada entra
e nada sai. O que ela mexe é no acabamento, que é o que separa uma
plataforma "funcionando" de uma plataforma que parece cara:
1. como o texto é desenhado na tela
2. a profundidade das superfícies (sombra, brilho de topo)
3. o que acontece ao tocar, passar o mouse e navegar pelo teclado
4. os detalhes que ninguém nomeia mas todo mundo sente
Se um dia algo aqui não agradar, dá para apagar este bloco inteiro
e a plataforma volta exatamente ao que era.
================================================================ */
/* ---------- 1. O TEXTO ----------
Fontes bonitas mal desenhadas parecem fontes feias. Três ajustes que
mudam a percepção sem trocar uma palavra: suavização nas duas pontas,
números de largura fixa (para preço e pontuação não dançarem ao mudar
de valor) e ligaduras tipográficas ligadas. */
body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:'kern' 1, 'liga' 1, 'calt' 1;
}
/* Qualquer número que muda sozinho na tela usa largura fixa: sem isso o
texto ao lado se mexe a cada atualização, e esse tremor é uma das
coisas que mais faz um produto parecer amador. */
.pill .val, .topbar .val, .nh-xp-ring-center .n, .mhs-pts-num,
.modulo-progresso-pct, .prod-faixa b, .hub-stat-valor, .ac-tag{
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum' 1;
}
/* Títulos grandes pedem entrelinha mais curta e letras mais juntas;
títulos pequenos pedem o contrário. Antes era tudo igual. */
h1, .page-title{line-height:1.14; letter-spacing:-.018em;}
h2{line-height:1.22; letter-spacing:-.012em;}
h3{line-height:1.3; letter-spacing:-.006em;}
.eyebrow, .micro-label, .secao-titulo{
font-feature-settings:'kern' 1;
-webkit-font-smoothing:antialiased;
}
/* Texto corrido não deve atravessar a tela inteira: linha longa demais
cansa e faz o olho perder o começo da próxima. */
.page-sub, .cadeado-txt, .video-trancado-txt{max-width:62ch;}
/* ---------- 2. PROFUNDIDADE ----------
A sombra preta é o erro mais comum em tema escuro: suja a cor em vez
de afastar a superfície. Estas sombras são tingidas com o verde da
marca, e vêm acompanhadas de um fio de luz no topo, que é o que faz o
cartão parecer iluminado de cima em vez de recortado. */
:root{
--elev-1: 0 1px 2px rgba(8,26,19,.28), 0 2px 8px rgba(8,26,19,.18);
--elev-2: 0 2px 4px rgba(8,26,19,.3), 0 8px 24px -6px rgba(8,26,19,.38);
--elev-3: 0 4px 8px rgba(8,26,19,.34), 0 18px 44px -10px rgba(8,26,19,.46);
--luz-topo: inset 0 1px 0 rgba(255,255,255,.055);
--mola: cubic-bezier(.22,.61,.36,1);
}
.card, .lesson-resource-card, .game-card, .prod-card, .quick-card,
.termo-destaque, .video-player-card, .modulo-progresso, .acesso-card,
.anot-card, .hub-section, .prod-faixa, .prod-faixa-completo,
.cadeado-tela, .video-trancado{
box-shadow: var(--elev-1), var(--luz-topo);
}
.card{border-radius:14px;}
.netflix-hero, .video-theater .video-player-card{
box-shadow: var(--elev-3), var(--luz-topo);
}
/* ---------- 3. O QUE ACONTECE AO TOCAR ----------
Movimento tem que ter a mesma curva no site inteiro. Curvas diferentes
em cada canto é o que faz a interface parecer remendada. */
.card, .lesson-resource-card, .game-card, .prod-card, .quick-card,
.termo-destaque, .nav-item, .sidebar-bottom-item, .btn, .hub-btn,
.modulo-progresso, .form-banner, .couple-page-link-card{
transition: transform .2s var(--mola),
box-shadow .2s var(--mola),
border-color .2s var(--mola),
background-color .2s var(--mola),
opacity .2s var(--mola);
}
.card:hover, .lesson-resource-card:hover, .game-card:hover,
.quick-card:hover, .couple-page-link-card:hover{
box-shadow: var(--elev-2), var(--luz-topo);
}
.prod-card:hover, .termo-destaque:hover{
box-shadow: var(--elev-2), var(--luz-topo);
}
/* Ao pressionar, a peça afunda de leve. É o retorno que o dedo espera e
que quase nenhum site em tela de toque entrega. */
.btn:active, .hub-btn:active, .prod-card:active, .quick-card:active,
.game-card:active, .termo-destaque:active, .lesson-resource-card:active,
.nav-item:active, .couple-page-link-card:active{
transform: scale(.985);
}
/* O retângulo azul que o Android pinta ao tocar não combina com nada
aqui, e some sem prejuízo: o afundar acima já dá o retorno. */
a, button, .nav-item, .sidebar-bottom-item, .card, .prod-card,
.quick-card, .game-card, .termo-destaque, .lesson-resource-card{
-webkit-tap-highlight-color: transparent;
}
/* Quem navega pelo teclado precisa enxergar onde está. O contorno
padrão do navegador é azul e feio; este é dourado e combina. */
:focus-visible{
outline:2px solid var(--gold-deep);
outline-offset:3px;
border-radius:6px;
}
/* Quem prefere menos movimento tem o direito de não ver nenhum. */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ---------- 4. OS BOTÕES ----------
O dourado já era bonito; faltava o relevo. Um fio de luz em cima e uma
sombra tingida embaixo fazem o botão parecer uma peça, não um
retângulo pintado. */
.btn-green, .btn-hero-cta{
box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
0 2px 6px rgba(8,26,19,.3),
0 8px 20px -8px rgba(201,162,93,.5);
}
.btn-green:hover, .btn-hero-cta:hover{
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
0 3px 10px rgba(8,26,19,.34),
0 14px 30px -10px rgba(201,162,93,.62);
}
.btn-outline{box-shadow: var(--luz-topo);}
.btn-outline:hover{border-color:var(--gold); background:rgba(201,162,93,.09);}
.btn[disabled], .btn:disabled{box-shadow:none; opacity:.5; cursor:not-allowed;}
/* ---------- 5. AS BORDAS ----------
Borda de uma cor só, na mesma intensidade em cima e embaixo, deixa
tudo chapado. Aqui a borda de cima é um pouco mais clara que a de
baixo, imitando luz vindo de cima. */
.card, .prod-card, .game-card, .hub-section, .acesso-card, .anot-card{
border-top-color:rgba(216,182,117,.3);
border-bottom-color:rgba(216,182,117,.16);
}
/* ---------- 6. O MENU ----------
O item ativo ganha um traço dourado à esquerda, que diz onde a pessoa
está sem precisar de cor de fundo berrante. */
.nav-item{position:relative;}
.nav-item.active::before, .sidebar-bottom-item.active::before{
content:"";
position:absolute; left:0; top:50%; transform:translateY(-50%);
width:3px; height:19px; border-radius:0 3px 3px 0;
background:var(--gold-grad);
}
/* ---------- 7. AS IMAGENS ----------
Capa de módulo e foto de perfil ganham um aro interno sutil, que
resolve o efeito de "figura colada" sobre o fundo escuro. */
.prod-capa, .mhs-img, .modulo-capa, .poster-img{
box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}
/* ---------- 8. A BARRA DE ROLAGEM ----------
Pequeno detalhe que quase ninguém faz, e que entrega desleixo quando
fica cinza do Windows no meio de uma tela verde e dourada. */
* { scrollbar-width: thin; scrollbar-color: rgba(216,182,117,.34) transparent; }
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
background:rgba(216,182,117,.28);
border-radius:99px;
border:3px solid transparent;
background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(216,182,117,.46); background-clip:content-box;}
/* ---------- 9. O TEXTO SELECIONADO E OS CAMPOS ---------- */
::selection{background:rgba(201,162,93,.32); color:var(--creme);}
input, textarea, select{
-webkit-font-smoothing:antialiased;
transition:border-color .18s var(--mola), background-color .18s var(--mola), box-shadow .18s var(--mola);
}
.field input:focus, .field textarea:focus, input:focus, textarea:focus{
box-shadow:0 0 0 3px rgba(201,162,93,.16);
}
/* ---------- 10. AS IMAGENS QUE AINDA NÃO CHEGARAM ----------
Enquanto a capa carrega, o espaço fica com um brilho que percorre o
lugar dela. Sem isso aparece um buraco escuro e a página parece
quebrada por um instante. */
@keyframes brilho-carregando{
0%{background-position:-180% 0;}
100%{background-position:180% 0;}
}
.prod-capa:empty, .mhs-img-empty{
background-image:linear-gradient(100deg,
rgba(255,255,255,.02) 20%, rgba(255,255,255,.07) 40%, rgba(255,255,255,.02) 60%);
background-size:220% 100%;
animation:brilho-carregando 1.6s ease-in-out infinite;
}
/* ---------- 11. AS SUPERFÍCIES ----------
Este é o ajuste que mais muda a sensação da plataforma, e o mais
difícil de notar quando falta: até aqui, cartão e fundo eram quase o
mesmo verde, com uma borda fina separando. O olho lê isso como
"desenho plano".
Superfície de verdade tem gradiente: o topo recebe mais luz que a
base. É um gradiente de pouquíssimo contraste, quase invisível quando
se olha de perto, e é justamente ele que faz o cartão parecer um
objeto pousado sobre a página em vez de um retângulo pintado nela. */
.card, .lesson-resource-card, .game-card, .hub-section, .acesso-card,
.anot-card, .quick-card, .aula-painel, .passos, .points-banner,
.prod-faixa, .modulo-progresso, .form-banner, .couple-page-link-card{
background-image: linear-gradient(180deg,
rgba(255,255,255,.035) 0%,
rgba(255,255,255,.012) 38%,
rgba(0,0,0,.025) 100%);
background-repeat:no-repeat;
}
/* Os cartões de produto já têm foto no topo, então o gradiente entra só
no corpo, senão ele clarearia a imagem. */
.prod-card .prod-corpo{
background-image: linear-gradient(180deg,
rgba(255,255,255,.03) 0%, rgba(0,0,0,.02) 100%);
}
/* ---------- 12. OS RÓTULOS PEQUENOS ----------
As etiquetas em maiúscula são a assinatura tipográfica da marca, e
estavam espremidas. Letra maiúscula precisa de mais ar entre os
caracteres que a minúscula, sempre. */
.eyebrow, .micro-label, .secao-titulo, .prod-lista-grupo > b,
.cadeado-eyebrow, .video-trancado-eyebrow, .termo-destaque-eyebrow,
.hub-stat-label, .nav-grupo .nav-label{
letter-spacing:.14em;
}
.eyebrow{opacity:.96;}
/* ---------- 13. O TRAÇO DOURADO ----------
Um fio de luz dourada no topo das peças principais. É o detalhe que
plataformas caras usam para dizer "esta parte importa", sem precisar
de cor forte nem de caixa alta. */
.netflix-hero::after,
.termo-destaque::after, .prod-faixa-completo::after{
content:"";
position:absolute; left:0; right:0; top:0; height:1px;
background:linear-gradient(90deg,
transparent, rgba(217,184,115,.55) 22%, rgba(217,184,115,.55) 78%, transparent);
pointer-events:none;
}
.termo-destaque, .prod-faixa-completo{position:relative; overflow:hidden;}
/* ---------- 14. O VÍDEO ----------
A moldura do player ganha um aro quente, para a área escura do vídeo
não parecer um buraco recortado na página. */
.video-player-card{
border-radius:18px;
box-shadow: var(--elev-3), inset 0 0 0 1px rgba(217,184,115,.14);
overflow:hidden;
}
.vpc-frame{border-radius:17px; overflow:hidden;}
/* ---------- 15. O MENU, DE NOVO ----------
O item ativo recebe um fundo com gradiente em vez de cor chapada, e o
ícone acompanha o dourado do texto. */
.nav-item.active{
background-image:linear-gradient(90deg,
rgba(201,162,93,.16) 0%, rgba(201,162,93,.05) 70%, transparent 100%);
}
.nav-item:hover:not(.active){
background-image:linear-gradient(90deg, rgba(255,255,255,.045), transparent 80%);
}
/* ---------- 16. A BARRA DE PROGRESSO ----------
Barra lisa parece desenho; barra com brilho interno parece medida. */
.progress-fill{
background-image:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
box-shadow:0 0 12px -2px rgba(217,184,115,.5);
}
/* ================================================================
ACABAMENTO, PARTE 2: NADA MAIS CORTA
Quase todo "corte" numa interface nasce do mesmo lugar: o layout foi
desenhado com um texto curto na cabeça, e um dia chega um texto
longo. Nome de casal comprido, título de módulo comprido, nome de
produto comprido. A peça não cresce, e o texto some.
As regras abaixo não corrigem um corte de cada vez: tiram a causa.
Tipografia que encolhe sozinha quando o texto é grande, caixas que
crescem em vez de esconder, e palavras longas que quebram em vez de
empurrar a página para o lado.
================================================================ */
/* ---------- 17. TIPOGRAFIA QUE SE AJUSTA ----------
clamp() dá três números: o menor tamanho aceitável, o tamanho ideal
proporcional à tela, e o maior. Assim o mesmo título serve para
"Ana & João" e para "Maria Fernanda & José Henrique" sem estourar. */
.page-title{font-size:clamp(23px, 4.4vw, 34px);}
.cadeado-titulo{font-size:clamp(20px, 4.6vw, 27px);}
.video-trancado-titulo{font-size:clamp(18px, 4.2vw, 23px);}
.prod-nome{font-size:clamp(13.5px, 3.4vw, 16px);}
.hero-editorial-name{font-size:clamp(26px, 5.2vw, 46px);}
.mhs-title{font-size:clamp(20px, 5.4vw, 26px);}
/* ---------- 18. PALAVRA LONGA NÃO EMPURRA A PÁGINA ----------
Um e-mail, um link ou uma palavra sem espaço faziam a linha crescer
além da caixa e a página inteira ganhar rolagem lateral. Agora a
palavra quebra, que é sempre melhor que a página torta. */
h1, h2, h3, p, span, div, label, li, td, .prod-nome, .prod-resumo,
.page-title, .section-title, .cplc-title, .cplc-sub{
overflow-wrap:anywhere;
word-break:break-word;
}
/* Títulos quebram por palavra inteira sempre que couber: quebrar no meio
de uma palavra só é aceitável quando não há alternativa. */
h1, h2, h3, .page-title, .prod-nome{ hyphens:auto; }
/* ---------- 19. CAIXA QUE CRESCE EM VEZ DE ESCONDER ----------
Altura mínima é promessa de espaço; altura fixa é promessa de corte.
Onde havia altura travada, agora há altura mínima. */
.admin-stat-card, .game-card, .quick-card, .lesson-resource-card,
.prod-card, .cplc-title, .prod-corpo{
height:auto;
min-height:0;
}
.prod-card{display:flex; flex-direction:column;}
.prod-corpo{flex:1 1 auto;}
/* Dentro de peças em linha, o bloco de texto precisa poder encolher.
Sem isto, o texto empurra o vizinho para fora em vez de quebrar. */
.cplc-title, .cplc-sub, .termo-destaque-txt, .prod-faixa > span,
.form-banner-txt, .aula-linha-tx, .modulo-progresso-txt{
min-width:0;
}
/* ---------- 21. RESPIRO ----------
Densidade é o que mais separa um produto caro de um barato. Não é
fonte nem cor: é o espaço em volta. Estes são os blocos que estavam
mais apertados. */
.section-title{margin-bottom:15px;}
.prod-grid{gap:18px;}
.prod-corpo{padding:16px 17px 11px;}
.prod-pe{padding:0 17px 16px;}
.card{padding:28px;}
@media(max-width:700px){
.card{padding:20px;}
.prod-grid{gap:13px;}
.prod-corpo{padding:13px 13px 9px;}
.prod-pe{padding:0 13px 13px;}
}
/* ---------- 22. A COMUNIDADE ----------
Sem a coluna do ranking, o feed ocupa a largura toda. Uma coluna de
texto larga demais cansa, então ela ganha um limite e fica centrada. */
#sub-comunidade .card{max-width:860px;}
#community-feed{max-width:860px;}
/* ================================================================
ACABAMENTO, PARTE 3: O QUE A TELA DO CELULAR MOSTROU
Olhando a plataforma no tamanho em que ela é realmente usada, três
coisas saltam e nenhuma delas é "falta de enfeite":
o conteúdo encosta nas bordas,
o texto de apoio grita no mesmo volume do título,
e os cartões da grade não se alinham entre si.
================================================================ */
/* ---------- 23. A MARGEM ----------
16px é o mínimo de um site; não é a margem de um produto que se paga.
Com 20px o conteúdo descola da borda e a tela inteira respira, sem
perder largura útil de leitura. */
@media(max-width:700px){
.content{padding-left:20px; padding-right:20px;}
}
/* ---------- 24. A HIERARQUIA DO TEXTO ----------
O parágrafo abaixo do título estava do mesmo tamanho do texto comum e
ocupando três linhas largas: ele competia com o título em vez de
apoiá-lo. Texto de apoio é apoio: menor, mais claro, mais curto. */
.page-sub{
font-size:14px;
line-height:1.65;
color:rgba(241,232,216,.62);
max-width:56ch;
margin-top:6px;
}
/* Os títulos de seção dentro de uma página são degrau abaixo do título
da página, e estavam quase do mesmo tamanho. */
.section-title{
font-size:clamp(16px, 3.4vw, 19px);
letter-spacing:-.005em;
}
/* O rótulo acima do título fica mais perto dele: eles são um par, e o
espaço entre os dois era maior que o espaço entre o par e o resto. */
.eyebrow + .page-title, .eyebrow + h1{margin-top:3px;}
/* ---------- 25. OS CARTÕES DA GRADE ALINHADOS ----------
Numa grade, o cartão com título de duas linhas empurrava o texto para
baixo e o rodapé de cada cartão parava numa altura diferente. Fica
desarrumado mesmo quando cada cartão, sozinho, está certo.
A correção: todos os cartões da mesma fila têm a mesma altura (já é o
padrão da grade), o corpo cresce para ocupar a sobra, e o rodapé vai
para o fim. Assim as etiquetas "Liberado" e "Quero este" ficam todas
na mesma linha do olho. */
.prod-grid{align-items:stretch;}
.prod-card{height:100%;}
.prod-corpo{display:flex; flex-direction:column; gap:5px;}
.prod-nome{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; min-height:2.5em;
}
.prod-resumo{flex:1 1 auto;}
.prod-pe{margin-top:auto;}
/* ---------- 26. A FAIXA DO MÉTODO COMPLETO ----------
O ícone de confirmação estava alinhado ao meio do bloco de texto, o
que no celular o jogava para a segunda linha, ao lado da descrição em
vez de ao lado do título. */
.prod-faixa-completo{align-items:flex-start;}
.prod-faixa-completo > svg,
.prod-faixa-completo > :first-child{flex-shrink:0; margin-top:1px;}
/* ---------- 27. AS CAPAS DA VITRINE ----------
As capas dos módulos são pôsteres em pé: a variável --capa-proporcao,
lá no topo deste arquivo, diz 3/4, e é ela que Minha Jornada obedece.
A vitrine, porém, tinha 16/10 cravado na mão, um formato deitado. Com
background-size:cover, o navegador preenche a moldura e corta o que
sobra, então um pôster em pé entrando numa moldura deitada perdia o
topo e o pé da arte. É exatamente onde fica o texto da capa. Daí as
duas queixas ao mesmo tempo: a moldura parecia baixa e quase quadrada
ao lado da de Minha Jornada, e não se lia o que estava escrito.
Agora as duas telas leem a mesma variável. Uma variável só manda nas
duas, então não há como divergirem de novo: se um dia as capas
mudarem de formato, muda-se um número no topo do arquivo e a
plataforma inteira acompanha.
A exceção é o cartão sem capa. Devocional e diagnóstico aparecem só
com um ícone, e numa moldura em pé o ícone ficaria solto no meio de
uma caixa alta e vazia. Esses seguem deitados. O gancho é o próprio
atributo style, que o app.js só escreve quando existe imagem de
fundo, e o seletor de atributo tem precedência maior que a classe
sozinha, então vence sem precisar de !important. */
.prod-capa{height:auto; aspect-ratio:var(--capa-proporcao);}
.prod-capa:not([style]){aspect-ratio:16/10;}
@media(max-width:700px){
.prod-capa:not([style]){aspect-ratio:3/2;}
}
/* ================================================================
REDE DE SEGURANÇA PARA O HERO ANTIGO
Houve um dia em que o styles.css novo subiu para a Vercel e o app.js
ficou para trás. O app.js antigo desenhava um hero com estas classes,
cujo estilo este arquivo já não tinha: sem estilo nenhum, a foto
apareceu no tamanho original dela, gigante, engolindo a tela, e o
texto do hero sumiu junto.
O erro foi meu, de dividir uma mudança entre dois arquivos de um jeito
que subir só um quebra pior do que não subir nenhum. As regras abaixo
existem para que isso não se repita: se um dia um app.js antigo voltar
a desenhar este hero, ele aparece decente em vez de explodir.
Quando o app.js novo estiver no ar, nada aqui tem efeito, porque estas
classes deixam de existir na página. É um cinto de segurança: não se
sente que está lá, e um dia evita o estrago.
================================================================ */
.home-avulso-hero{
position:relative; overflow:hidden; border-radius:20px;
min-height:200px; max-height:420px;
display:flex; align-items:flex-end;
background:var(--cream2); margin-bottom:10px;
box-shadow: var(--elev-3), var(--luz-topo);
}
.home-avulso-hero .hav-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.5;
}
.home-avulso-hero .hav-fade{
position:absolute; inset:0;
background:linear-gradient(to top, rgba(21,56,45,.96) 8%, rgba(21,56,45,.72) 46%, rgba(21,56,45,.3) 100%);
}
.home-avulso-hero .hav-txt{position:relative; padding:30px 32px 28px; max-width:620px;}
.home-avulso-hero .hav-titulo{
font-family:'Playfair Display',serif; font-size:clamp(21px, 5.6vw, 34px);
font-weight:500; color:var(--creme); line-height:1.12; margin:6px 0 8px;
}
.home-avulso-hero .hav-sub{
margin:0; font-size:14.5px; line-height:1.6;
color:rgba(245,241,232,.75); max-width:460px;
}
.home-avulso-hero .hav-cta{min-width:168px;}
.home-avulso-hero .hav-cta-nome{
margin-top:11px; font-size:13px; line-height:1.5;
color:rgba(245,241,232,.78); max-width:min(100%, 44ch);
}
@media(max-width:700px){
.home-avulso-hero{min-height:180px; max-height:340px; border-radius:16px;}
.home-avulso-hero .hav-txt{padding:24px 22px 22px;}
.home-avulso-hero .hav-cta{width:100%; min-width:0;}
.home-avulso-hero .hav-cta-nome{font-size:12.5px; text-align:center;}
}