/* Painel da conta do Baru.
   Celular: uma coluna, abas fixas embaixo, alvos de toque de 48 px.
   Computador (≥ 960 px): menu lateral fixo e o conteúdo em grade. */
:root {
  --branco: #ffffff;
  --creme: #fbf6ec;
  --tom: #f4ecdd;
  --borda: #e8dfcf;
  --ink: #3d332a;
  --texto: #66594d;
  --suave: #77695c;
  --verde: #428130;
  --verde-borda: #33661f;
  --verde-texto: #36722d;
  --verde-tinta: #eaf4e4;
  --mel: #f2b64a;
  --mel-tinta: #fff3d6;
  --mel-texto: #8a5a00;
  --alerta: #a4471c;
  --alerta-tinta: #fdeee2;
  --raiz: #a64c27;
  --raio: 22px;
  --sombra: 0 14px 32px -22px rgba(61, 51, 42, .45);
  --mola: cubic-bezier(.34, 1.56, .5, 1);
  --saida: cubic-bezier(.2, .8, .2, 1);
  --abas: 68px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--creme); color: var(--texto);
  font: 500 16.5px/1.55 "Nunito", ui-rounded, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2 { margin: 0; color: var(--ink); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(26px, 6vw, 34px); line-height: 1.12; }
h2 { font-weight: 900; font-size: 18px; }
p { margin: 0; }
a { color: var(--verde-texto); font-weight: 800; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.suave { color: var(--suave); font-weight: 700; }
.miudo { font-size: 13.5px; color: var(--suave); margin-top: 8px; }
.centro { text-align: center; }
.olho { font: 900 12.5px/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #5b8fc7; outline-offset: 3px; border-radius: 10px; }

/* ---------- botões e campos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 54px; padding: 14px 22px; margin-top: 16px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--verde); color: #fff; box-shadow: 0 4px 0 var(--verde-borda);
  font: 900 16.5px/1 "Nunito", sans-serif; text-decoration: none; transition: transform .06s, box-shadow .06s, filter .12s;
}
.botao:hover { filter: brightness(1.05); }
.botao:active { transform: translateY(4px); box-shadow: 0 0 0 var(--verde-borda); }
.botao:disabled { opacity: .7; cursor: progress; }
.botao--calmo { background: var(--branco); color: var(--verde-texto); border: 2px solid var(--borda); box-shadow: 0 4px 0 var(--borda); }
.botao--google { background: var(--branco); color: var(--ink); border: 2px solid var(--borda); box-shadow: 0 4px 0 var(--borda); font-size: 17px; }
.link { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: 800 15px "Nunito", sans-serif; color: var(--verde-texto); cursor: pointer; text-decoration: underline; }
.link--perigo { color: var(--alerta); }
.campo { display: grid; gap: 6px; margin-top: 14px; font-weight: 800; color: var(--ink); font-size: 14.5px; }
.campo input {
  width: 100%; min-height: 52px; padding: 12px 15px; border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--branco); color: var(--ink); font: 700 16.5px "Nunito", sans-serif;
}
.campo input:focus { outline: 3px solid var(--verde-tinta); border-color: var(--verde); }
.campo small { font-weight: 600; color: var(--suave); font-size: 13px; }
.aviso { border-radius: 14px; padding: 12px 15px; margin-top: 14px; font-weight: 700; font-size: 15px; }
.aviso--erro { background: var(--alerta-tinta); color: var(--alerta); }
.aviso--ok { background: var(--verde-tinta); color: var(--verde-texto); }
.aviso:empty { display: none; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; margin-top: 16px; box-shadow: var(--sombra); }
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 20px; }
.marca img { border-radius: 9px; }

/* ---------- carregando ---------- */
.carregando { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; font-weight: 800; }
.carregando img { width: 120px; animation: respira 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respira { 50% { transform: scale(1.04, .96); } }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
/* A cena do entrar: o habitat na hora do dia de verdade, com quatro bichos
   vivos (folhas de animação do app). Eles reagem ao mouse e ao toque, e a
   capivara fecha os olhos enquanto a senha é digitada. */
.entrar-cena {
  --c1: #9fd3ef; --c2: #f6ead2; --m1: #b5d6a0; --m2: #9cc489; --ch: #8dbb79; --astro: #ffd36b; --lago: #8fcbe0;
  position: relative; height: 290px; overflow: hidden; background: linear-gradient(180deg, var(--c1), var(--c2) 78%);
  transition: background .8s;
}
.entrar-cena[data-periodo="amanhecer"] { --c1: #f7c9a6; --c2: #fbe8cf; --astro: #ffb36b; }
.entrar-cena[data-periodo="entardecer"] { --c1: #f2a77e; --c2: #f9d9b4; --m1: #c3bf86; --m2: #a9ad72; --ch: #94a263; --astro: #ff9a5c; --lago: #e7b08a; }
.entrar-cena[data-periodo="noite"] { --c1: #171b45; --c2: #463d7a; --m1: #3a5560; --m2: #2f4a4d; --ch: #2a4537; --astro: #f3efd6; --lago: #3b4f7d; }
.ec-camada { position: absolute; inset: 0; transition: transform .6s var(--saida); will-change: transform; }
.ec-astro { position: absolute; top: 12%; right: 14%; width: 12%; max-width: 96px; aspect-ratio: 1; border-radius: 50%; background: var(--astro); box-shadow: 0 0 0 14px color-mix(in srgb, var(--astro) 28%, transparent), 0 0 70px var(--astro); }
.entrar-cena[data-periodo="noite"] .ec-astro { box-shadow: inset -16px -8px 0 rgba(0, 0, 0, .18), 0 0 50px rgba(243, 239, 214, .45); }
.ec-estrelas { position: absolute; inset: 0 0 45% 0; opacity: 0; transition: opacity .8s;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 34% 12%, #fff, transparent), radial-gradient(2px 2px at 58% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 40%, #fff, transparent), radial-gradient(2px 2px at 22% 48%, #fff, transparent), radial-gradient(1.5px 1.5px at 46% 52%, #fff, transparent); }
.entrar-cena[data-periodo="noite"] .ec-estrelas { opacity: 1; animation: cintila 4s ease-in-out infinite; }
.ec-nuvem { position: absolute; height: auto; opacity: .92; }
.ec-nuvem--a { top: 14%; left: -30%; width: 26%; animation: atravessa 70s linear infinite; }
.ec-nuvem--b { top: 30%; left: -30%; width: 18%; opacity: .7; animation: atravessa 95s linear -40s infinite; }
@keyframes atravessa { to { transform: translateX(560%); } }
.entrar-cena[data-periodo="noite"] .ec-nuvem { opacity: .2; }
.ec-morro { position: absolute; border-radius: 50%; transition: background .8s; }
.ec-morro--a { left: -14%; bottom: 20%; width: 72%; height: 44%; background: var(--m1); }
.ec-morro--b { right: -18%; bottom: 16%; width: 78%; height: 50%; background: var(--m2); }
.ec-chao { position: absolute; left: -12%; right: -12%; bottom: -24%; height: 50%; border-radius: 50% 50% 0 0; background: var(--ch); transition: background .8s; }
.ec-lago { position: absolute; right: 6%; bottom: 6%; width: 34%; height: 13%; border-radius: 50%; background: var(--lago); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08), 0 0 0 5px rgba(255, 255, 255, .25); }
.ec-peca { position: absolute; height: auto; transition: filter .8s; }
.ec-arvore { left: 6%; bottom: 18%; width: 13%; max-width: 110px; transform-origin: 50% 100%; animation: balanca 6s ease-in-out infinite; }
@keyframes balanca { 50% { transform: rotate(1.6deg); } }
.ec-juncos { right: 37%; bottom: 10%; width: 7%; max-width: 60px; }
.ec-cogumelos { left: 22%; bottom: 13%; width: 7%; max-width: 60px; }
.ec-pedra { right: 4%; bottom: 22%; width: 13%; max-width: 120px; }
.ec-vagalumes { left: 0; top: 28%; width: 100%; opacity: 0; transition: opacity .8s; pointer-events: none; }
.entrar-cena[data-periodo="noite"] .ec-vagalumes, .entrar-cena[data-periodo="entardecer"] .ec-vagalumes { opacity: .9; animation: cintila 3s ease-in-out infinite; }
.entrar-cena[data-periodo="noite"] .ec-peca:not(.ec-vagalumes), .entrar-cena[data-periodo="noite"] .ec-bicho { filter: brightness(.7) saturate(.85); }
@keyframes cintila { 50% { opacity: .45; } }

/* os bichos: folhas de animação, um quadro por passo */
.folha {
  --n: 12; --d: 1.5s; position: absolute; padding: 0; border: 0; cursor: pointer; background-color: transparent;
  aspect-ratio: var(--w) / var(--h); background-repeat: no-repeat; background-size: calc(var(--n) * 100%) 100%;
  animation: anda-quadros var(--d) steps(var(--n)) infinite; -webkit-tap-highlight-color: transparent;
}
@keyframes anda-quadros { to { background-position-x: calc(var(--n) / (var(--n) - 1) * 100%); } }
.folha--respira { --w: 300; --h: 386; --n: 8; --d: 3s; background-image: url(/assets/anim/respira-capybara.webp); animation: respira-quadros var(--d) steps(8, jump-none) infinite alternate; }
@keyframes respira-quadros { to { background-position-x: 100%; } }
.folha--voa { --w: 370; --h: 244; background-image: url(/assets/anim/voa-owl.webp); --d: .9s; }
.folha--anda { --w: 193; --h: 223; background-image: url(/assets/anim/anda-fox.webp); }
.folha--nada { --w: 306; --h: 272; background-image: url(/assets/anim/nada-otter.webp); --d: 2s; }
.ec-bicho { transition: filter .8s, scale .25s var(--mola); }
.ec-bicho:hover { scale: 1.05; }
.ec-bicho:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 30%; }

.ec-voo { position: absolute; top: 9%; left: 0; width: 100%; height: 22%; animation: voo-x 22s ease-in-out infinite alternate; pointer-events: none; }
.ec-voo .folha { height: 100%; left: 0; pointer-events: auto; animation: anda-quadros var(--d) steps(var(--n)) infinite, voo-y 3.2s ease-in-out infinite; }
@keyframes voo-x { from { transform: translateX(4%); } to { transform: translateX(78%); } }
@keyframes voo-y { 50% { translate: 0 22%; } }
.ec-passeio { position: absolute; left: 0; bottom: 14%; width: 100%; height: 19%; animation: passeio 30s ease-in-out infinite alternate; pointer-events: none; }
.ec-passeio .folha { height: 100%; left: 0; pointer-events: auto; }
@keyframes passeio { from { transform: translateX(14%); } to { transform: translateX(44%); } }
.folha--nada { right: 14%; bottom: 3%; height: 22%; animation: anda-quadros var(--d) steps(var(--n)) infinite, boia 3s ease-in-out infinite; }
@keyframes boia { 50% { translate: 0 -6%; } }
.ec-anfitriao { position: absolute; left: 50%; bottom: 8%; height: 46%; aspect-ratio: 300 / 386; translate: -50% 0; }
.ec-anfitriao .folha { inset: 0; height: 100%; }
.ec-anfitriao.olhos-fechados .folha { animation: none; background: url(/assets/bichos/capybara-sono.webp) center bottom / contain no-repeat; }
.ec-balao {
  position: absolute; z-index: 2; bottom: 100%; left: 50%; width: max-content; max-width: min(240px, 60vw); translate: -50% -8px;
  padding: 10px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; line-height: 1.35; text-align: center;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); transition: opacity .3s, transform .4s var(--mola);
}
.ec-balao::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; }
.ec-balao.troca { opacity: 0; transform: translateY(6px) scale(.92); }
.coracao { position: absolute; z-index: 3; pointer-events: none; font-size: 20px; animation: sobe-coracao 1s var(--saida) forwards; }
@keyframes sobe-coracao { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) scale(1.2); } }

/* lá dentro */
.la-dentro { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--borda); }
.la-dentro ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.la-dentro li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; animation: entra .5s var(--saida) both; }
.la-dentro li:nth-child(2) { animation-delay: .08s; } .la-dentro li:nth-child(3) { animation-delay: .16s; } .la-dentro li:nth-child(4) { animation-delay: .24s; }
.la-dentro b { color: var(--ink); }
.la-dentro small { font-size: inherit; }
.ld-icone { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; background: var(--tom); }

.entrar-cartao {
  position: relative; z-index: 2; margin-top: -26px; background: var(--creme); border-radius: 28px 28px 0 0;
  padding: 26px 20px 40px; width: 100%; max-width: 480px; justify-self: center;
}
.entrar-cartao h1 { margin-top: 18px; }
.entrar-cartao > p { margin-top: 8px; }
.com-email { margin-top: 18px; border-top: 1px solid var(--borda); }
.com-email summary { list-style: none; cursor: pointer; padding: 16px 0 4px; font-weight: 800; color: var(--verde-texto); text-align: center; }
.com-email summary::-webkit-details-marker { display: none; }
.linha-botoes { display: flex; justify-content: space-between; margin-top: 6px; }

/* ---------- painel: celular ---------- */
.painel { min-height: 100vh; padding-bottom: calc(var(--abas) + env(safe-area-inset-bottom) + 16px); }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgba(251, 246, 236, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda);
}
.topo-email { font-size: 13px; font-weight: 700; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.conteudo { max-width: 640px; margin: 0 auto; padding: 18px 16px 8px; }
.aba { animation: entra .4s var(--saida) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.abas {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--abas) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--branco); border-top: 1px solid var(--borda); box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .3);
}
.abas button {
  display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: none; cursor: pointer;
  font: 800 12px "Nunito", sans-serif; color: var(--suave); min-height: 48px;
}
.abas svg { width: 24px; height: 24px; fill: currentColor; transition: transform .25s var(--mola); }
.abas button[aria-current="page"] { color: var(--verde-texto); }
.abas button[aria-current="page"] svg { transform: translateY(-2px) scale(1.1); }

/* início */
/* A toca: o habitat da hora do dia, com o bicho respirando (ou dormindo) no chão. */
.toca { background: var(--branco); border: 1px solid var(--borda); border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); }
.toca-cena { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.toca-ceu {
  --c1: #9fd3ef; --c2: #f6ead2; --m1: #a9cf94; --m2: #8dbb79; --ch: #7fae69; --astro: #ffd36b;
  position: absolute; inset: 0; background: linear-gradient(180deg, var(--c1), var(--c2) 70%);
}
.toca[data-periodo="amanhecer"] .toca-ceu { --c1: #f7c9a6; --c2: #fbe8cf; --astro: #ffb36b; }
.toca[data-periodo="entardecer"] .toca-ceu { --c1: #f2a77e; --c2: #f9d9b4; --m1: #b5b77d; --m2: #9aa66c; --ch: #8b9b5c; --astro: #ff9a5c; }
.toca[data-periodo="noite"] .toca-ceu { --c1: #1f2350; --c2: #4b4380; --m1: #3f5a62; --m2: #344d50; --ch: #2f4a3c; --astro: #f3efd6; }
.astro { position: absolute; top: 12%; right: 14%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--astro); box-shadow: 0 0 0 14px color-mix(in srgb, var(--astro) 30%, transparent), 0 0 60px var(--astro); }
.toca[data-periodo="noite"] .astro { box-shadow: inset -14px -6px 0 rgba(0, 0, 0, .18), 0 0 40px rgba(243, 239, 214, .5); }
.morro { position: absolute; border-radius: 50%; }
.morro--a { left: -12%; bottom: 18%; width: 70%; height: 46%; background: var(--m1); }
.morro--b { right: -16%; bottom: 14%; width: 76%; height: 52%; background: var(--m2); }
.chao { position: absolute; left: -10%; right: -10%; bottom: -26%; height: 52%; border-radius: 50% 50% 0 0; background: var(--ch); }
.peca { position: absolute; height: auto; }
.peca--nuvem { top: 10%; left: 6%; width: 22%; opacity: .9; animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translateX(120%); } }
.peca--arvore { left: 8%; bottom: 16%; width: 15%; transform-origin: 50% 100%; animation: balanca 6s ease-in-out infinite; }
@keyframes balanca { 50% { transform: rotate(1.6deg); } }
.peca--pedra { right: 9%; bottom: 13%; width: 17%; }
.peca--cogumelos { left: 26%; bottom: 10%; width: 8%; }
.peca--lirio { right: 30%; bottom: 2%; width: 15%; opacity: .95; }
.peca--vagalumes { left: 0; right: 0; top: 30%; width: 100%; opacity: 0; transition: opacity .6s; }
.toca[data-periodo="noite"] .peca--vagalumes, .toca[data-periodo="entardecer"] .peca--vagalumes { opacity: .9; animation: cintila 3s ease-in-out infinite; }
.toca[data-periodo="noite"] .peca--nuvem { opacity: .25; }
.toca[data-periodo="noite"] .peca--arvore, .toca[data-periodo="noite"] .peca--pedra, .toca[data-periodo="noite"] .peca--cogumelos, .toca[data-periodo="noite"] .peca--lirio { filter: brightness(.55) saturate(.8); }
@keyframes cintila { 50% { opacity: .45; } }
.toca-bicho {
  position: absolute; z-index: 1; left: 50%; bottom: 9%; height: 46%; aspect-ratio: 560 / 500; transform: translateX(-50%);
  background: center bottom / contain no-repeat; filter: drop-shadow(0 10px 8px rgba(40, 30, 20, .25));
}
.toca-bicho--anima { background-size: calc(var(--n) * 100%) 100%; background-position: 0 0; animation: quadros var(--d) steps(var(--n), jump-none) infinite alternate; }
@keyframes quadros { to { background-position: 100% 0; } }
.toca-fase {
  position: absolute; z-index: 2; top: 14px; left: 14px; padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .92);
  font: 900 12px/1 "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-texto);
}
.toca-texto { padding: 18px 20px 20px; }
.toca-juntos { margin-top: 6px; font-weight: 700; color: var(--texto); }
.vazio { background: var(--tom); color: var(--texto); border-radius: var(--raio); padding: 18px; margin-top: 16px; }
.vazio b { color: var(--ink); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.numero { background: var(--branco); border: 1px solid var(--borda); border-radius: 20px; padding: 14px 16px; display: grid; box-shadow: var(--sombra); }
.numero-rotulo { font: 900 11.5px/1.2 "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.numero b { font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1.15; margin-top: 4px; }
.numero-nota { font-size: 13px; color: var(--suave); }
.numero--raiz b { color: var(--raiz); }
.grande { font-size: 17px; margin-top: 6px; }
.grande b { font-size: 28px; color: var(--ink); font-weight: 900; }
.barra { height: 12px; border-radius: 99px; background: var(--tom); margin-top: 12px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width 1s var(--saida); }
.barra i.acima { background: var(--alerta); }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; margin-top: 14px; }
.dia { display: grid; justify-items: center; gap: 4px; }
.dia-barra { display: flex; align-items: flex-end; width: 100%; max-width: 34px; height: 110px; border-radius: 10px; background: var(--tom); overflow: hidden; }
.dia-barra i { display: block; width: 100%; height: var(--h); min-height: 4px; border-radius: 10px; background: var(--verde); animation: cresce .9s var(--saida) both; transform-origin: bottom; }
@keyframes cresce { from { transform: scaleY(0); } }
.dia-min { font-size: 11.5px; font-weight: 800; color: var(--suave); min-height: 16px; }
.dia-letra { font-size: 12px; font-weight: 900; color: var(--suave); }
.dia.hoje .dia-letra { color: var(--verde-texto); }

/* jornada: as cinco fases do bicho */
.fases { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fase { display: grid; justify-items: center; text-align: center; gap: 2px; }
.fase-foto { display: grid; place-items: end center; width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--tom); overflow: hidden; padding: 6px 6px 0; }
.fase-foto img { max-height: 100%; width: auto; }
.fase b { font-size: 13px; font-weight: 900; color: var(--ink); margin-top: 4px; }
.fase small { font-size: 11.5px; color: var(--suave); font-weight: 700; }
.fase--agora .fase-foto { background: var(--verde-tinta); box-shadow: 0 0 0 3px var(--verde); }
.fase--agora b { color: var(--verde-texto); }
.fase--falta .fase-foto img { filter: grayscale(1) brightness(1.15); opacity: .45; }

/* raiz da semana */
.raiz-semana { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.raiz-dia { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: var(--suave); }
.raiz-dia i { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--borda); display: grid; place-items: center; }
.raiz-dia--present i { border: 0; background: var(--raiz); }
.raiz-dia--present i::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.raiz-dia--frozen i { border: 0; background: #d7ecf7; }
.raiz-dia--frozen i::after { content: "❄"; color: #3d7fa6; font-size: 17px; }
.raiz-dia--today i { border: 3px solid var(--raiz); animation: pulsa 2s ease-in-out infinite; }
.raiz-dia--today { color: var(--raiz); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(166, 76, 39, .15); } }

/* mês de foco */
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.mes i, .mes-legenda i { display: block; aspect-ratio: 1; border-radius: 7px; background: var(--tom); }
.mes i[data-n="1"], .mes-legenda i[data-n="1"] { background: #cfe5c4; }
.mes i[data-n="2"], .mes-legenda i[data-n="2"] { background: #8fc27c; }
.mes i[data-n="3"], .mes-legenda i[data-n="3"] { background: var(--verde); }
.mes i.futuro { background: transparent; border: 1.5px dashed var(--borda); }
.mes i[data-hoje] { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.mes i { animation: aparece .5s var(--saida) both; }
@keyframes aparece { from { transform: scale(.4); opacity: 0; } }
.mes-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--suave); }
.mes-legenda i { width: 13px; }

/* últimos focos */
.focos { list-style: none; padding: 0; margin: 10px 0 0; }
.foco { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--borda); }
.foco:last-child { border-bottom: 0; }
.foco b { color: var(--ink); }
.foco small { display: block; font-size: 13px; color: var(--suave); }
.foco-icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-tinta); color: var(--verde-texto); font-weight: 900; }
.foco--parou .foco-icone { background: var(--tom); color: var(--suave); }
.foco-folhas { font: 900 12.5px/1 "Nunito", sans-serif; color: var(--texto); background: var(--tom); padding: 7px 9px; border-radius: 99px; white-space: nowrap; }

/* lembretes */
.lembretes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.lembretes li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); }
.lembretes span { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--tom); font-size: 17px; }

/* plano */
.situacao-cartao h2 { font-size: 20px; }
.situacao-cartao p { margin-top: 6px; }
.situacao--ok { border-color: #cfe5c4; background: linear-gradient(180deg, var(--verde-tinta), var(--branco)); }
.situacao--alerta { border-color: #f1d2bf; background: linear-gradient(180deg, var(--alerta-tinta), var(--branco)); }
.planos { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.plano {
  position: relative; display: grid; gap: 2px; cursor: pointer; background: var(--branco); border: 2px solid var(--borda);
  border-radius: var(--raio); padding: 16px 18px 16px 52px; transition: border-color .15s, box-shadow .15s;
}
.plano input { position: absolute; left: 18px; top: 20px; width: 22px; height: 22px; margin: 0; accent-color: var(--verde); }
.plano:has(input:checked) { border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-tinta); }
.plano-selo { justify-self: start; margin-bottom: 4px; font: 900 11px/1 "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--tom); padding: 6px 9px; border-radius: 99px; }
.plano-nome { font-weight: 900; color: var(--ink); font-size: 18px; }
.plano-preco { color: var(--ink); }
.plano-preco b { font-size: 24px; font-weight: 900; }
.plano-nota { font-size: 13.5px; color: var(--suave); }
.formas { border: 0; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.formas legend { font-weight: 800; color: var(--ink); font-size: 14.5px; margin-bottom: 8px; }
.formas label { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 2px solid var(--borda); border-radius: 14px; font-weight: 800; color: var(--ink); cursor: pointer; }
.formas label:has(input:checked) { border-color: var(--verde); background: var(--verde-tinta); color: var(--verde-texto); }
.formas label:has(input:focus-visible) { outline: 3px solid #5b8fc7; outline-offset: 2px; }
.formas input { position: absolute; opacity: 0; pointer-events: none; }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; cursor: pointer; }
.aceite input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--verde); }
.cartao--pagar { text-align: center; }
#pix-imagem { margin: 14px auto 4px; border-radius: 14px; border: 1px solid var(--borda); }
.codigo { display: flex; gap: 8px; margin-top: 12px; }
.codigo input { flex: 1; min-width: 0; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--borda); border-radius: 14px; font: 600 13.5px ui-monospace, monospace; color: var(--ink); }
.codigo .botao { width: auto; margin: 0; }
.acoes-plano { display: grid; justify-items: center; gap: 4px; margin-top: 8px; }

/* faturas */
.faturas { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.fatura {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 18px; padding: 14px 16px; box-shadow: var(--sombra);
}
.fatura--carregando { display: block; color: var(--suave); font-weight: 700; }
.fatura-valor { display: block; font-size: 18px; font-weight: 900; color: var(--ink); }
.fatura-data { font-size: 13.5px; color: var(--suave); }
.fatura-estado { font: 900 12px/1 "Nunito", sans-serif; padding: 7px 10px; border-radius: 99px; background: var(--tom); color: var(--ink); }
.fatura-estado--ok { background: var(--verde-tinta); color: var(--verde-texto); }
.fatura-estado--alerta { background: var(--alerta-tinta); color: var(--alerta); }
.fatura-estado--neutro { background: var(--tom); color: var(--suave); }
.fatura-link { grid-column: 1 / -1; justify-self: start; font-size: 14.5px; min-height: 32px; display: inline-flex; align-items: center; }

/* conta */
.rotulo { font: 900 11.5px "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.valor { color: var(--ink); font-weight: 800; margin-bottom: 12px; word-break: break-all; }
.lista-links { display: grid; margin-top: 16px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.lista-links a { padding: 16px 18px; border-bottom: 1px solid var(--borda); text-decoration: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; }
.lista-links a::after { content: "›"; font-size: 22px; color: var(--suave); }
.lista-links a:last-child { border-bottom: 0; }

/* ---------- tablet ---------- */
@media (min-width: 600px) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .planos { grid-template-columns: 1fr 1fr; }
  .entrar-cena { height: 340px; }
  .entrar-cartao { border-radius: 28px; margin-bottom: 40px; box-shadow: var(--sombra); background: var(--branco); padding: 32px 32px 36px; }
}

/* ---------- computador: menu lateral e grade ---------- */
@media (min-width: 960px) {
  .entrar { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .entrar-cena { height: 100vh; height: 100dvh; position: sticky; top: 0; align-self: start; }
  .ec-anfitriao { height: 40%; }
  .entrar-cartao { align-self: center; margin: 0 auto; max-width: 440px; box-shadow: none; background: transparent; }

  .painel { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: auto 1fr; padding-bottom: 0; }
  .topo { grid-column: 1 / -1; padding: 14px 28px; }
  .abas {
    position: sticky; top: 64px; grid-column: 1; grid-row: 2; align-self: start; height: auto; display: grid; grid-template-columns: 1fr;
    gap: 4px; padding: 20px 14px; background: transparent; border: 0; box-shadow: none;
  }
  .abas button {
    grid-auto-flow: column; justify-content: start; justify-items: start; gap: 12px; padding: 12px 16px;
    border-radius: 14px; font-size: 15.5px; color: var(--texto);
  }
  .abas button:hover { background: var(--tom); }
  .abas button[aria-current="page"] { background: var(--verde-tinta); color: var(--verde-texto); }
  .abas button[aria-current="page"] svg { transform: none; }
  .conteudo { grid-column: 2; grid-row: 2; max-width: 1000px; width: 100%; margin: 0; padding: 28px 36px 56px; }
  #aba-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  #aba-inicio > .toca, #aba-inicio > .vazio, #aba-inicio > .numeros, #aba-inicio > .cartao--jornada { grid-column: 1 / -1; }
  .toca { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; }
  .toca-cena { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .toca-texto { padding: 28px; }
  #aba-inicio[hidden] { display: none; }
  h1 { font-size: 34px; }
  #aba-plano, #aba-faturas, #aba-conta { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- a entrada em 3D (entrada.js): a ilha do Baru de perto ---------- */
.e3-canvas, .e3-veu, .e3-olho, .e3-dica { display: none; }
.entrar.com-3d { position: relative; display: grid; grid-template-rows: 1fr; height: 100vh; height: 100dvh; overflow: hidden; color: var(--texto); background: #f6e7c8; }
html.sem-rolagem, html.sem-rolagem body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* Cartão compacto: cabe na altura da janela, sem rolar a página. */
.com-3d .entrar-cartao h1 { margin-top: 4px; }
.com-3d .entrar-cartao > p#entrar-texto { margin-top: 6px; font-size: 15px; }
.com-3d .botao--google { margin-top: 14px; min-height: 52px; }
.com-3d .com-email { margin-top: 12px; }
.com-3d .com-email summary { padding-top: 12px; }
.com-3d .la-dentro { margin-top: 14px; padding-top: 12px; }
.com-3d .la-dentro ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.com-3d .la-dentro li { gap: 6px; padding: 5px 10px 5px 5px; border-radius: 99px; background: rgba(255, 255, 255, .6); font-size: 12.5px; }
.com-3d .la-dentro small { display: none; }
.com-3d .ld-icone { width: 24px; height: 24px; border-radius: 99px; font-size: 13px; }
.com-3d[data-periodo="noite"] .la-dentro li { background: rgba(255, 255, 255, .08); }
.com-3d .entrar-cartao:has(.com-email[open]) #entrar-texto,
.com-3d .entrar-cartao:has(.com-email[open]) .la-dentro,
.com-3d .entrar-cartao:has(.com-email[open]) .e3-dica { display: none; }

.entrar.com-3d[data-periodo="noite"] { background: #1a1d4a; }
.com-3d .entrar-cena { display: none; }
.com-3d .e3-canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }
.com-3d .e3-veu {
  display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #3a2616, #120b06 70%); transition: opacity .5s ease-in;
}
.e3-veu.cobre { opacity: 1; }
.e3-veu.cobre.sai { opacity: 0; transition: opacity .8s var(--saida); }
#e3-veu.ativo, #e3-veu.cobre { display: block; }

.com-3d .e3-olho, .com-3d .e3-dica { display: block; }
.com-3d .entrar-cartao {
  position: relative; z-index: 2; align-self: end; margin: 0 10px 10px; width: auto; max-width: 480px; justify-self: center;
  max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 20px 20px 18px; border-radius: 28px; background: rgba(255, 251, 243, .82); border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 70px -30px rgba(40, 25, 10, .55); transition: opacity .7s .55s, transform 1s var(--saida) .5s;
}
.com-3d .entrar-cartao::-webkit-scrollbar { display: none; }
@keyframes cartao-sobe { from { opacity: 0; transform: translateY(40px) scale(.97); } }
.com-3d .entrar-cartao h1 { margin-top: 6px; font: 800 clamp(34px, 8vw, 46px)/1.02 "Fraunces", Georgia, serif; letter-spacing: -0.035em; }
.com-3d .e3-olho { margin-top: 18px; }
.e3-dica { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--suave); }
.e3-dica::before { content: "✦ "; color: inherit; }
.com-3d .la-dentro { border-top-color: rgba(61, 51, 42, .12); }
.com-3d .com-email { border-top-color: rgba(61, 51, 42, .12); }
.com-3d[data-periodo="noite"] .entrar-cartao { background: rgba(18, 22, 58, .7); border-color: rgba(255, 255, 255, .12); color: #d9d6ee; }
.com-3d[data-periodo="noite"] .entrar-cartao h1, .com-3d[data-periodo="noite"] .la-dentro b, .com-3d[data-periodo="noite"] .marca { color: #fbf6ec; }
.com-3d[data-periodo="noite"] .miudo, .com-3d[data-periodo="noite"] .e3-dica { color: #a9a6c8; }
.com-3d[data-periodo="noite"] .com-email summary, .com-3d[data-periodo="noite"] .link, .com-3d[data-periodo="noite"] .entrar-cartao a { color: #f2c86a; }
.com-3d[data-periodo="noite"] .olho { color: #a9a6c8; }
.com-3d[data-periodo="noite"] .campo { color: #fbf6ec; }
.com-3d[data-periodo="noite"] .la-dentro, .com-3d[data-periodo="noite"] .com-email { border-top-color: rgba(255, 255, 255, .12); }

.e3-balao {
  position: fixed; z-index: 3; left: 0; top: 0; bottom: auto; translate: 0 -14px; transition: opacity .25s;
  will-change: transform; pointer-events: none;
}
.e3-balao.troca { opacity: 0; }

@media (min-width: 960px) {
  .entrar.com-3d { grid-template-columns: 1fr minmax(400px, 470px); padding: 32px clamp(28px, 5vw, 80px); align-items: center; }
  .com-3d .entrar-cartao { grid-column: 2; align-self: center; margin: 0; padding: 34px 34px 30px; max-width: none; }
}

@media (max-width: 959px) {
  .com-3d .la-dentro, .com-3d .e3-dica { display: none; }
  .com-3d .entrar-cartao .marca { display: none; }
  .com-3d .e3-olho { margin-top: 0; }
  .com-3d .entrar-cartao h1 { font-size: 32px; }
}
.e3-carta {
  position: fixed; z-index: 70; font-size: 34px; line-height: 1; color: #fff; pointer-events: none; opacity: 0;
  translate: -50% -50%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
  transition: transform 1.1s cubic-bezier(.3, .8, .25, 1), opacity .35s;
}

/* Enquanto a cena 3D monta, nada aparece pela metade: fica a abertura. */
.e3-carregando { display: none; }
html.tem-3d .entrar .entrar-cena { display: none; }
html.tem-3d .entrar .e3-carregando {
  display: grid; position: fixed; inset: 0; z-index: 80; place-content: center; justify-items: center; gap: 10px;
  background: var(--creme); font-weight: 800; color: var(--texto); transition: opacity .6s ease, visibility 0s .6s;
}
.e3-carregando img { width: 120px; animation: respira 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.e3-barra { width: 140px; height: 6px; border-radius: 99px; background: var(--tom); overflow: hidden; margin-top: 6px; }
.e3-barra i { display: block; height: 100%; width: 8%; border-radius: 99px; background: var(--verde); transition: width .3s ease; }
html.tem-3d .entrar.pronta-3d .e3-carregando { opacity: 0; visibility: hidden; }
html.tem-3d .entrar:not(.pronta-3d) .entrar-cartao { opacity: 0; transform: translateY(34px) scale(.98); }
html.tem-3d .entrar:not(.pronta-3d) .e3-balao { opacity: 0; }

/* senha com olhinho */
.senha-caixa { position: relative; display: block; }
.senha-caixa input { padding-right: 54px; }
.olhinho {
  position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  display: grid; place-items: center; background: none; color: var(--suave); cursor: pointer;
}
.olhinho:hover { background: var(--tom); color: var(--ink); }
.olhinho[aria-pressed="true"] .risco { display: none; }
.olhinho[aria-pressed="true"] { color: var(--verde-texto); }
.campo > label { font-weight: 800; color: var(--ink); }
.com-3d[data-periodo="noite"] .campo > label { color: #fbf6ec; }
#form-entrar .aviso { margin-top: 12px; }

/* ---------- as vistas do cartão: entrar, criar conta, confirmar ---------- */
.vista { animation: entra .45s var(--saida) both; }
.troca-vista { margin-top: 14px; font-size: 14.5px; color: var(--texto); }
.troca-vista .link { padding: 6px 2px; min-height: 0; }
.link--forte { font-weight: 900; }
.linha-botoes--fim { justify-content: flex-end; }
.vista-texto { margin-top: 6px; font-size: 15px; }
.ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; font-size: 12.5px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: rgba(61, 51, 42, .14); }
#form-criar .campo { margin-top: 10px; }
#form-criar .campo input { min-height: 48px; }
#form-criar .aceite { margin-top: 12px; font-size: 13.5px; }
.forca { display: block; height: 5px; border-radius: 99px; background: var(--tom); overflow: hidden; }
.forca i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--alerta); transition: width .3s ease, background .3s; }
.forca i[data-nivel="1"] { background: #c98a5a; }
.forca i[data-nivel="2"] { background: #8fc27c; }
.forca i[data-nivel="3"] { background: var(--verde); }
.campo small#forca-texto { margin-top: -2px; }
.vista--confirma { text-align: center; }
.vista--confirma .olho { margin-top: 6px; }
.carta-grande { font-size: 64px; line-height: 1; margin-top: 10px; animation: carta-chega 1.1s var(--mola) both; }
@keyframes carta-chega { from { opacity: 0; transform: translate(-80px, -60px) rotate(-30deg) scale(.4); } }
.vista--confirma .botao { margin-top: 18px; }
.com-3d[data-periodo="noite"] .troca-vista, .com-3d[data-periodo="noite"] .vista-texto { color: #d9d6ee; }
@media (min-width: 960px) {
  #form-criar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  #form-criar > * { grid-column: 1 / -1; }
  #form-criar > .campo.metade { grid-column: auto; }
  #vista-criar h1 { font-size: 38px; }
  #vista-criar .botao--google { margin-top: 10px; min-height: 48px; }
}
@media (max-width: 959px) {
  .com-3d #vista-criar .vista-texto { display: none; }
}

.vista--feito { text-align: center; }
.vista--feito .vista-texto { margin-top: 8px; }
.selo-feito { color: var(--verde); margin-top: 6px; display: grid; place-items: center; }
.selo-feito svg circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: traca .7s ease-out .15s forwards; }
.selo-feito svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traca .45s ease-out .7s forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }
.passos { text-align: left; margin: 14px 0 0; padding: 14px 16px 14px 36px; border-radius: 16px; background: rgba(255, 255, 255, .6); display: grid; gap: 6px; font-size: 14.5px; }
.passos b { color: var(--ink); }
.com-3d[data-periodo="noite"] .passos { background: rgba(255, 255, 255, .08); }

/* campos alinhados pelo topo, mesmo quando um tem barra e dica embaixo */
.campo { align-content: start; align-self: start; }
.gerador { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.gerador .link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; min-height: 32px; text-decoration: none; }
.gerador .link:hover { text-decoration: underline; }
.gerada { font-size: 13px; font-weight: 800; color: var(--verde-texto); }
.com-3d[data-periodo="noite"] .gerada { color: #9fd98a; }
/* telas mais baixas: o cartão do cadastro fica compacto e cabe inteiro */
@media (max-height: 860px) and (min-width: 960px) {
  #vista-criar .vista-texto, .com-3d .entrar-cartao[data-vista="criar"] .marca { display: none; }
  #vista-criar h1 { font-size: 32px; }
  .com-3d .entrar-cartao[data-vista="criar"] { padding-top: 22px; padding-bottom: 18px; }
  #vista-criar .ou { margin-top: 10px; }
  #form-criar .campo { margin-top: 8px; }
  #form-criar .campo input { min-height: 44px; }
  #form-criar > label.campo { grid-column: auto; }
  #form-criar .aceite { margin-top: 8px; }
  #vista-criar .botao--google { min-height: 44px; }
  .com-3d #vista-criar .e3-olho { display: none; }
  #vista-criar .troca-vista { margin-top: 8px; }
}

/* celular: o cadastro cabe inteiro, as senhas lado a lado */
@media (max-width: 959px) {
  #form-criar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  #form-criar > * { grid-column: 1 / -1; }
  #form-criar > .campo.metade { grid-column: auto; }
  #form-criar .campo { margin-top: 8px; font-size: 14px; }
  #form-criar .campo input { min-height: 46px; font-size: 16px; }
  .com-3d #vista-criar .e3-olho { display: none; }
  .com-3d #vista-criar h1 { font-size: 28px; }
  #vista-criar .botao--google { min-height: 46px; margin-top: 10px; }
  #vista-criar .ou { margin: 10px 0 0; }
  #form-criar .aceite { margin-top: 10px; font-size: 13px; }
  #form-criar .botao { min-height: 50px; margin-top: 12px; }
  #vista-criar .troca-vista { margin-top: 8px; }
  .senha-caixa input { padding-right: 46px; }
  .olhinho { width: 40px; height: 40px; right: 3px; }
}
@media (max-width: 959px) and (max-height: 760px) {
  .com-3d .entrar-cartao { padding: 16px 16px 14px; }
  .com-3d .entrar-cartao h1 { font-size: 28px; }
  .com-3d #entrar-texto, .com-3d .vista-texto { font-size: 14px; }
}