/* =====================================================
   NAMORA.pt — style.css
   Mobile-first. Cinzas WhatsApp. Sem branco puro.
   ===================================================== */

/* ---------------- TOKENS ---------------- */
:root{
  /* Cinzas WhatsApp */
  --fundo:        #EFEAE2;
  --fundo-alt:    #F0F2F5;
  --cartao:       #E4E1DB;
  --cartao-2:     #E9E6E0;
  --input:        #DDD9D2;
  --borda:        #CFCAC2;
  --escuro:       #202C33;
  --escuro-2:     #111B21;

  /* Texto */
  --texto:        #0B141A;
  --texto-2:      #54656F;
  --texto-claro:  #EFEAE2;
  --texto-grad:   #FFF5F0;

  /* Rosa -> laranja */
  --rosa:         #FF2D6F;
  --rosa-suave:   rgba(255,45,111,.12);
  --vermelho:     #E8103A;
  --laranja:      #FF8A3D;
  --grad:         linear-gradient(90deg,#FF2D6F 0%,#FF5A4E 55%,#FF8A3D 100%);
  --grad-diag:    linear-gradient(135deg,#FF2D6F 0%,#FF7A45 100%);

  --online:       #25D366;
  --aviso:        #E8103A;
  --poupa:        #1D9A5C;

  /* Medidas */
  --app-max:      480px;
  --topo-h:       64px;
  --barra-h:      62px;
  --r-s:          10px;
  --r-m:          16px;
  --r-l:          22px;
  --sombra:       0 1px 2px rgba(11,20,26,.08), 0 4px 14px rgba(11,20,26,.06);
  --sombra-alta:  0 6px 24px rgba(11,20,26,.16);

  --seguro-cima:  env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);

  --fonte:        system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --fonte-titulo: "Outfit", var(--fonte);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  height:100%;
  /* svh = altura minima do ecra (a que sobra quando a barra do
     telemovel esta visivel). Ao contrario do dvh, o svh NUNCA muda
     quando essa barra aparece ou esconde durante o scroll — por
     isso a barra de baixo (.barra) deixa de saltar/desaparecer.
     (Era 100dvh antes; o dvh muda o tempo todo e era essa mudanca
     que fazia o rodape "sair do sitio" em todas as paginas.) */
  height:100svh;
}

body{
  margin:0;
  height:100%;
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.5;
  color:var(--texto);
  background:var(--escuro-2);       /* moldura fora da app */
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  /* REGRA DA APP: o ecra nunca faz scroll.
     Topo fixo em cima, barra fixa em baixo, so o miolo e que rola. */
  overflow:hidden;
}

/* Contentor: sempre largura de telemóvel, mesmo no PC.
   Altura exacta de 1 ecra — nunca mais nem menos.
   height:100% herda do html/body — que agora usam 100svh, um valor
   estavel. E por isso, e nao so por ser "100% em vez de dvh", que
   este contentor fica parado: uma percentagem de um valor estavel
   e sempre estavel. (Antes o html usava 100dvh, por isso o 100%
   aqui herdava essa instabilidade na mesma — o problema nunca
   esteve neste seletor, estava lá em cima.) */
.app{
  max-width:var(--app-max);
  margin:0 auto;
  height:100%;
  max-height:100%;
  background:var(--fundo);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Garante que o atributo "hidden" esconde SEMPRE, mesmo quando um
   componente (ex: .conv-opcoes) define display:grid/flex sem
   condicao — sem isto, esse display ganha ao [hidden] do browser e
   o elemento fica visivel para sempre, apesar do JS o esconder. */
[hidden]{ display:none !important; }

img{ max-width:100%; display:block; }
a{ color:var(--rosa); text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--rosa); color:var(--texto-grad); }

:focus-visible{
  outline:3px solid var(--rosa);
  outline-offset:2px;
  border-radius:6px;
}

h1,h2,h3{
  font-family:var(--fonte-titulo);
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 .5rem;
  color:var(--texto);
}
h1{ font-size:1.5rem; }
h2{ font-size:1.15rem; }
h3{ font-size:1rem; }

.texto-2{ color:var(--texto-2); font-size:.875rem; }
.opcional{ color:var(--texto-2); font-weight:400; }

/* ---------------- TOPO (fixo, nunca rola) ---------------- */
.topo{
  flex:0 0 auto; position:relative; z-index:60;
  height:calc(var(--topo-h) + var(--seguro-cima));
  padding-top:var(--seguro-cima);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:14px;
  background:var(--escuro);
  color:var(--texto-claro);
}

.topo-marca{ display:flex; align-items:center; gap:9px; color:inherit; margin-left:6px; }

.marca-coracao{
  width:44px; height:auto; display:block;
  filter:drop-shadow(0 1px 4px rgba(255,45,111,.4));
}
.marca-nome{
  font-family:var(--fonte-titulo);
  font-weight:700; font-size:1.78rem; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* Sem opacity: dentro de background-clip:text o Chrome renderiza
   um filho com opacity<1 como transparente e o ".pt" desaparece. */
.marca-pt{ font-weight:500; }

.topo-acoes{ display:flex; align-items:center; gap:6px; }

.topo-botao{
  position:relative;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:0; background:transparent; color:var(--texto-claro);
  border-radius:12px; cursor:pointer;
}
.topo-botao:active{ background:rgba(239,234,226,.12); }
.topo-botao .ico{ font-size:19px; }

.hamburguer{ display:grid; gap:5px; }
.hamburguer span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--texto-claro);
}

.pastilha{
  position:absolute; top:4px; right:4px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  font-size:10px; font-weight:700; line-height:1;
  color:var(--texto-grad); background:var(--rosa);
  border-radius:9px;
  border:2px solid var(--escuro);
}

/* ---------------- MENU LATERAL ---------------- */
.lateral-fundo{
  position:fixed; inset:0; z-index:80;
  background:rgba(11,20,26,.55);
  backdrop-filter:blur(2px);
  animation:aparecer .18s ease;
}
.lateral{
  position:fixed; top:0; bottom:0; left:0; z-index:90;
  width:min(84%, 340px);
  background:var(--fundo);
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-alta);
  transform:translateX(-100%);
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
  padding-top:var(--seguro-cima);
  padding-bottom:var(--seguro-baixo);
}
.lateral.aberto{ transform:translateX(0); }

.lateral-topo{
  background:var(--escuro);
  color:var(--texto-claro);
  padding:18px 16px;
  display:flex; align-items:center; gap:12px;
  position:relative;
}
.lateral-perfil{ display:flex; align-items:center; gap:12px; color:inherit; flex:1; }
.lateral-foto{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; border:2px solid var(--rosa);
}
.lateral-info{ display:grid; gap:2px; min-width:0; }
.lateral-info strong{ font-family:var(--fonte-titulo); font-size:1.02rem; }
.lateral-info .texto-2{ color:rgba(239,234,226,.7); font-size:.8rem; }

.lateral-fechar{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border:0; border-radius:50%;
  background:rgba(239,234,226,.12); color:var(--texto-claro);
  cursor:pointer; font-size:15px;
}

.lateral-cta{
  margin:14px 16px 6px;
  padding:13px; border-radius:var(--r-m);
  background:var(--grad); color:var(--texto-grad);
  font-weight:700; text-align:center;
  font-family:var(--fonte-titulo);
}

.lateral-lista{ list-style:none; margin:6px 0; padding:0 8px; flex:1; }
.lateral-lista a{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:var(--r-s);
  color:var(--texto); font-weight:500;
}
.lateral-lista a:active{ background:var(--cartao); }
.lm-ico{ width:24px; text-align:center; font-size:17px; }
.lm-valor{
  margin-left:auto; font-size:.8rem; font-weight:700;
  color:var(--rosa); background:var(--rosa-suave);
  padding:2px 9px; border-radius:10px;
}
.lm-premium{ color:var(--vermelho); font-weight:700; }
.lm-sair{ color:var(--texto-2); }
.lateral-sep{ height:1px; background:var(--borda); margin:8px 12px; }

.lateral-rodape{
  padding:16px; border-top:1px solid var(--borda);
  font-size:.8rem; color:var(--texto-2);
}
.lateral-rodape a{ color:var(--texto-2); }

/* ---------------- CONTEUDO (o unico que faz scroll) ---------------- */
.conteudo{
  flex:1 1 auto;
  min-height:0;                 /* essencial para o scroll dentro do flex */
  overflow-y:auto;
  overflow-x:hidden;            /* nunca ha scroll horizontal */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:12px;
}
/* Ecras sem shell (IA, conversa, etc.) tratam do proprio scroll e tem
   a barra de escrever fixa no fundo (flex:none dentro do seu proprio
   height:100svh). Se o .conteudo tambem rolar, a barra deixa de estar
   fixa e sobe/desce com as mensagens — por isso aqui ele so serve de
   moldura, sem overflow nem padding proprios. */
.sem-shell .conteudo{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding-bottom:0;
}

.ecra{ padding:14px; display:grid; gap:14px; }

.ecra-cabecalho{
  display:flex; align-items:center; gap:10px;
  margin-bottom:2px;
}
.ecra-cabecalho h1{ margin:0; font-size:1.28rem; }
.voltar{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; background:var(--cartao);
  color:var(--texto); font-size:22px; line-height:1;
}

/* ---------------- BARRA INFERIOR (fixa, nunca rola) ---------------- */
.barra{
  flex:0 0 auto; position:relative; z-index:70;
  width:100%;
  height:calc(var(--barra-h) + var(--seguro-baixo));
  padding-bottom:var(--seguro-baixo);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--escuro);
  border-top:1px solid rgba(239,234,226,.06);
}

.barra-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:rgba(239,234,226,.62);
  font-size:.66rem; font-weight:600;
  position:relative;
}
.barra-item.ativo{ color:var(--rosa); }
.barra-ico{ position:relative; display:grid; place-items:center; }
.barra-txt{ letter-spacing:.01em; }

.barra-publicar{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:3px; padding-bottom:9px; position:relative;
}
.publicar-circulo{
  position:absolute; top:-20px;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad-diag); color:var(--texto-grad);
  box-shadow:0 5px 18px rgba(255,45,111,.42);
  border:3px solid var(--escuro);
}
.barra-publicar:active .publicar-circulo{ transform:scale(.94); }
.barra-txt-publicar{ color:var(--rosa); font-size:.66rem; font-weight:700; }

/* ---------------- CARTOES ---------------- */
.cartao{
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:var(--r-m);
  padding:16px;
  box-shadow:var(--sombra);
}
.cartao-titulo{ font-size:1.05rem; margin-bottom:6px; }
.cartao-info{ background:var(--cartao-2); }
.cartao-espera{ display:flex; align-items:center; gap:12px; }
.espera-icone{ font-size:26px; }

/* ---------------- BOTOES ---------------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px;
  border:0; border-radius:var(--r-m);
  font-family:var(--fonte-titulo);
  font-weight:700; font-size:1rem;
  cursor:pointer; text-align:center;
  transition:transform .12s ease, filter .12s ease;
}
.botao:active{ transform:scale(.985); }
.botao-largo{ width:100%; }

.botao-principal{
  background:var(--grad); color:var(--texto-grad);
  box-shadow:0 4px 14px rgba(255,45,111,.3);
}
.botao-principal:active{ filter:brightness(.96); }

.botao-vazio{
  background:var(--input); color:var(--texto);
  border:1px solid var(--borda);
}

.botao-escuro{ background:var(--escuro); color:var(--texto-claro); }

/* ---------------- FORMULARIOS ---------------- */
.form{ display:grid; gap:12px; margin-top:6px; }
.form-inline{ margin-top:10px; text-align:center; }

.campo{ display:grid; gap:6px; border:0; padding:0; margin:0; }
.campo-etiqueta{
  font-size:.82rem; font-weight:700; color:var(--texto-2);
  letter-spacing:.01em;
}
.campo-ajuda{ font-size:.76rem; color:var(--texto-2); }

.campo input[type=text],
.campo input[type=tel],
.campo input[type=email],
.campo input[type=password],
.campo input[type=date],
.campo input[type=number],
.campo select,
.campo textarea{
  width:100%;
  padding:14px 14px;
  font-size:16px;                 /* evita zoom no iOS */
  color:var(--texto);
  background:var(--input);
  border:1px solid var(--borda);
  border-radius:var(--r-s);
  appearance:none;
}
.campo textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--rosa); outline:none;
  box-shadow:0 0 0 3px var(--rosa-suave);
}
.campo input::placeholder{ color:#8A9199; }

.campo select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2354656F' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

.campo-prefixo{ display:flex; align-items:stretch; }
.prefixo{
  display:flex; align-items:center; padding:0 12px;
  background:var(--cartao); border:1px solid var(--borda); border-right:0;
  border-radius:var(--r-s) 0 0 var(--r-s);
  font-weight:600; font-size:.92rem; white-space:nowrap;
}
.campo-prefixo input{ border-radius:0 var(--r-s) var(--r-s) 0 !important; }

.campo-passe{ position:relative; display:block; }
.ver-passe{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:0; background:transparent;
  cursor:pointer; font-size:16px; opacity:.6;
}

.campo-codigo{
  text-align:center;
  font-size:30px !important;
  letter-spacing:.42em;
  font-family:var(--fonte-titulo);
  font-weight:700;
  padding:16px 10px !important;
}

/* Opcoes radio em pastilhas */
.opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.opcao input{ position:absolute; opacity:0; pointer-events:none; }
.opcao span{
  display:inline-block; padding:11px 18px;
  background:var(--input); border:1px solid var(--borda);
  border-radius:var(--r-m); font-weight:600; font-size:.94rem;
  cursor:pointer;
}

/* Tudo numa linha (ex.: Homem/Mulher/Casal/Outro no registo) */
.opcoes-linha{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; flex-wrap:nowrap; }
.opcoes-linha .opcao{ display:block; }
.opcoes-linha .opcao span{
  display:block; text-align:center;
  padding:11px 4px; font-size:.86rem;
}
.opcao input:checked + span{
  background:var(--grad); color:var(--texto-grad);
  border-color:transparent;
  box-shadow:0 3px 10px rgba(255,45,111,.28);
}
.opcao input:focus-visible + span{ outline:3px solid var(--rosa); outline-offset:2px; }
.opcao-ativa span{
  background:var(--grad); color:var(--texto-grad);
  border-color:transparent;
  box-shadow:0 3px 10px rgba(255,45,111,.28);
}

/* Intencoes */
.grelha-intencoes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.cartao-intencao{ position:relative; cursor:pointer; }
.cartao-intencao input{ position:absolute; opacity:0; pointer-events:none; }
.cartao-intencao > span{ pointer-events:none; }
.cartao-intencao{
  display:grid; place-items:center; gap:6px;
  padding:22px 10px;
  background:var(--cartao); border:2px solid var(--borda);
  border-radius:var(--r-m);
  transition:border-color .15s ease, background .15s ease;
}
.ci-icone{ font-size:28px; line-height:1; }
.ci-nome{ font-family:var(--fonte-titulo); font-weight:700; font-size:.98rem; }
.cartao-intencao:has(input:checked){
  border-color:var(--rosa);
  background:var(--rosa-suave);
}

.campo-termos{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.85rem; color:var(--texto-2); line-height:1.45;
}
.campo-termos input{ margin-top:2px; width:20px; height:20px; accent-color:var(--rosa); }

/* ---------------- AVISOS ---------------- */
.aviso{
  padding:12px 14px; border-radius:var(--r-s);
  font-size:.9rem; font-weight:500;
  margin:12px 14px 0;
  border-left:4px solid;
}
.aviso-erro{ background:rgba(232,16,58,.1); border-color:var(--vermelho); color:#8E0722; }
.aviso-ok{ background:rgba(37,211,102,.14); border-color:var(--online); color:#0E6B33; }
.ecra .aviso, .ecra-auth .aviso{ margin-inline:0; }

.nota-rgpd{
  margin-top:12px; padding:11px 12px;
  background:var(--cartao-2); border:1px dashed var(--borda);
  border-radius:var(--r-s);
  font-size:.78rem; color:var(--texto-2); line-height:1.5;
}

/* ---------------- ECRAS DE AUTENTICACAO ---------------- */
/* Ecra sem-shell: o .conteudo a volta fica sempre overflow:hidden
   (regra geral, para o chat/IA gerirem o proprio scroll), por isso
   este ecra nao pode depender da altura que o .conteudo lhe calha
   dar (essa altura pode variar — ex: um aviso "flash" por cima —
   e o excesso ficava cortado pelo overflow:hidden do pai, sem
   nenhum scroll capaz de lá chegar). Em vez disso, fixed ao proprio
   viewport: cobre sempre o ecra inteiro, sempre, sem excepcoes, e
   quem faz scroll e' so ele. Largura limitada a --app-max e
   centrado, tal como o .app, para nao alargar no PC. */
.ecra-auth{
  position:fixed;
  top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; max-width:var(--app-max);
  z-index:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px calc(20px + var(--seguro-baixo));
  /* "safe center": centra o conteudo quando cabe no ecra (login,
     conteudo curto) mas cai para o topo quando NAO cabe (registo,
     formulario comprido) — sem o "safe", um ecra mais alto do que
     o viewport ficava com o topo empurrado para fora da vista, sem
     forma de lhe chegar a fazer scroll. */
  display:grid; gap:18px; align-content:safe center;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,45,111,.12), transparent 70%),
    var(--fundo);
}
.auth-marca{ text-align:center; padding-top:0; }
.auth-logo{ display:flex; align-items:center; justify-content:center; gap:11px; }
.auth-coracao{
  width:64px; height:auto; display:block;
  filter:drop-shadow(0 3px 12px rgba(255,45,111,.45));
}
.auth-nome{
  font-family:var(--fonte-titulo); font-weight:700;
  font-size:2.5rem; letter-spacing:-.035em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.auth-pt{ font-weight:500; }   /* ver nota em .marca-pt */
.auth-lema{
  margin:9px 0 0; color:var(--texto-2);
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
}

.auth-cartao{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-l); padding:18px 16px;
  box-shadow:var(--sombra);
}
.auth-titulo{ font-size:1.42rem; margin-bottom:6px; }
.auth-texto{ color:var(--texto-2); font-size:.92rem; margin:0 0 4px; line-height:1.55; }
.auth-nota{ margin-top:14px; font-size:.78rem; color:var(--texto-2); text-align:center; }
.auth-ligacao{
  display:block; margin-top:14px; text-align:center;
  font-size:.88rem; font-weight:600;
  background:none; border:0; cursor:pointer; color:var(--rosa);
}
.auth-rodape{ display:grid; gap:8px; text-align:center; font-size:.9rem; color:var(--texto-2); }
.auth-selos{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
  font-size:.76rem; color:var(--texto-2);
}

.auth-progresso{ display:flex; gap:6px; padding:0 2px; }
.prog-passo{ flex:1; height:4px; border-radius:2px; background:var(--borda); }
.prog-feito{ background:var(--grad); }

.auth-sucesso{ text-align:center; }
.sucesso-icone{
  width:64px; height:64px; margin:0 auto 12px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag);
  color:var(--texto-grad); font-size:30px; font-weight:700;
  box-shadow:0 6px 20px rgba(255,45,111,.34);
}
.lista-passos{
  list-style:none; padding:0; margin:16px 0;
  display:grid; gap:9px; text-align:left; font-size:.92rem;
}
.lista-passos li{
  padding:11px 13px; background:var(--cartao-2);
  border:1px solid var(--borda); border-radius:var(--r-s);
  color:var(--texto-2);
}
.lista-passos li.feito{ color:var(--texto); font-weight:600; }

/* ---------------- VERIFICACAO ---------------- */
.ver-estado{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.ver-selo{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--input); color:var(--texto-2);
  font-size:22px; font-weight:700;
}
.ver-selo-ativo{
  background:var(--grad-diag); color:var(--texto-grad);
  box-shadow:0 4px 14px rgba(255,45,111,.32);
}
.ver-estado p{ margin:2px 0 0; }

.lista-verificacao{ list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.lista-verificacao li{
  display:flex; align-items:center; gap:10px;
  padding:11px 0; border-top:1px solid var(--borda);
  font-size:.92rem; color:var(--texto-2);
}
.lista-verificacao li.feito{ color:var(--texto); font-weight:600; }
.lv-icone{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--input); font-size:12px;
}
.feito .lv-icone{ background:var(--online); color:var(--texto-grad); }
.lv-estado{ margin-left:auto; font-size:.78rem; }

.gesto-caixa{
  display:flex; align-items:center; gap:12px;
  margin:14px 0;
  padding:16px; border-radius:var(--r-m);
  background:var(--rosa-suave); border:1px solid rgba(255,45,111,.3);
  font-family:var(--fonte-titulo); font-size:1rem;
}
.gesto-icone{ font-size:26px; }

/* ---------------- NOTIFICACOES FLUTUANTES ---------------- */
.notas{
  position:fixed; left:50%; bottom:calc(var(--barra-h) + 18px);
  transform:translateX(-50%);
  z-index:120; width:min(92%, 440px);
  display:grid; gap:8px; pointer-events:none;
}
.nota{
  padding:13px 16px; border-radius:var(--r-m);
  background:var(--escuro); color:var(--texto-claro);
  font-size:.9rem; font-weight:500;
  box-shadow:var(--sombra-alta);
  animation:subir .22s ease;
}
.nota-erro{ background:var(--vermelho); }
.nota-ok{ background:var(--online); color:#06381A; }

/* ---------------- ANIMACOES ---------------- */
@keyframes aparecer{ from{opacity:0} to{opacity:1} }
@keyframes subir{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.a-entrar{ animation:entrar .2s ease; }
@keyframes entrar{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

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

/* ---------------- ECRAS GRANDES: continua telemóvel ---------------- */
@media (min-width: 520px){
  body{
    background:
      radial-gradient(80% 50% at 50% 0%, #16232B, #0B141A 70%);
  }
  .app{
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
}


/* =====================================================
   PERFIL, GALERIA, FOTOS E AUDIO
   ===================================================== */

/* ---------------- GALERIA ---------------- */
.perfil{ position:relative; }

.perfil-galeria{
  position:relative;
  aspect-ratio:3/4;
  background:var(--escuro-2);
  overflow:hidden;
}
.galeria-fita{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.galeria-fita::-webkit-scrollbar{ display:none; }
.galeria-fita img{
  flex:none; width:100%; height:100%;
  object-fit:cover;
  scroll-snap-align:center;
}
.galeria-vazia{
  height:100%; display:grid; place-items:center;
  font-size:70px; color:var(--texto-2);
  background:var(--cartao);
}

.galeria-pontos{
  position:absolute; top:12px; left:14px; right:14px;
  display:flex; gap:4px;
}
.gp{
  flex:1; height:3px; border-radius:2px;
  background:rgba(239,234,226,.35);
}
.gp-ativo{ background:var(--rosa); }

.galeria-voltar{
  position:absolute; top:calc(14px + var(--seguro-cima)); left:12px;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:rgba(17,27,33,.6);
  color:var(--texto-claro); font-size:24px; line-height:1;
  backdrop-filter:blur(6px);
}
.galeria-online{
  position:absolute; top:calc(16px + var(--seguro-cima)); right:12px;
  padding:6px 11px; border-radius:14px;
  background:rgba(17,27,33,.62); color:var(--texto-claro);
  font-size:.74rem; font-weight:700;
  backdrop-filter:blur(6px);
}

.galeria-base{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 16px 16px;
  background:linear-gradient(to top, rgba(11,20,26,.92), transparent);
  color:var(--texto-claro);
}
.perfil-nome{
  margin:0; font-size:1.6rem; color:var(--texto-claro);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.perfil-local{ margin:4px 0 0; font-size:.9rem; opacity:.86; }

.selo-ok{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag);
  color:var(--texto-grad); font-size:12px; font-weight:700;
}
.selo-coroa{ font-size:1rem; }

/* ---------------- CORPO ---------------- */
.perfil-corpo{
  padding:14px 14px calc(var(--barra-h) + 96px);
  display:grid; gap:12px;
}
.perfil-texto{ margin:0; line-height:1.62; font-size:.96rem; }

.perfil-intencoes{ display:flex; flex-wrap:wrap; gap:8px; }
.pastilha-intencao{
  padding:8px 14px; border-radius:16px;
  background:var(--rosa-suave); color:var(--vermelho);
  border:1px solid rgba(255,45,111,.28);
  font-weight:700; font-size:.86rem;
}

/* Compatibilidade */
.compat{ display:flex; align-items:center; gap:14px; }
.compat-numero{
  font-family:var(--fonte-titulo);
  font-size:2rem; font-weight:700; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.compat p{ margin:2px 0 0; }

/* Audio */
.audio-cartao{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, var(--cartao), var(--cartao-2));
}
.audio-play{
  width:46px; height:46px; flex:none;
  border:0; border-radius:50%;
  background:var(--grad-diag); color:var(--texto-grad);
  font-size:16px; cursor:pointer;
  box-shadow:0 4px 12px rgba(255,45,111,.3);
}
.audio-info{ display:grid; gap:1px; }
.audio-info strong{ font-size:.92rem; }
.audio-onda{
  margin-left:auto; display:flex; align-items:center; gap:2px; height:26px;
}
.audio-onda span{
  width:2px; height:7px; border-radius:2px; background:var(--rosa); opacity:.45;
}
.audio-onda.a-tocar span{ animation:onda .85s ease-in-out infinite; }
.audio-onda span:nth-child(3n){ animation-delay:.12s; }
.audio-onda span:nth-child(3n+1){ animation-delay:.26s; }
@keyframes onda{
  0%,100%{ height:6px; opacity:.4; }
  50%{ height:22px; opacity:1; }
}

/* Respostas */
.resposta{ background:var(--cartao-2); }
.resposta-pergunta{
  margin:0 0 6px; font-size:.78rem; font-weight:700;
  color:var(--texto-2); text-transform:uppercase; letter-spacing:.03em;
}
.resposta-texto{
  margin:0; font-family:var(--fonte-titulo);
  font-size:1.08rem; line-height:1.45;
}
.resposta-responder{
  margin-top:10px; padding:7px 13px;
  border:1px solid var(--borda); border-radius:14px;
  background:var(--input); font-size:.82rem; font-weight:600;
  cursor:pointer;
}

/* Interesses e detalhes */
.lista-interesses{ display:flex; flex-wrap:wrap; gap:7px; }
.lista-interesses .pastilha{
  position:static; min-width:auto; height:auto; border:1px solid var(--borda);
  padding:7px 12px; border-radius:14px;
  background:var(--input); color:var(--texto);
  font-size:.84rem; font-weight:600;
}

.lista-detalhes{ margin:0; display:grid; gap:1px; }
.lista-detalhes > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-top:1px solid var(--borda);
}
.lista-detalhes dt{ color:var(--texto-2); font-size:.88rem; }
.lista-detalhes dd{ margin:0; font-weight:600; font-size:.9rem; }

/* Album */
.album-fechado{ display:flex; align-items:center; gap:12px; }
.album-ico{ font-size:26px; }
.album-fechado p{ margin:2px 0 0; }

/* Seguranca */
.perfil-seguranca{ display:flex; gap:8px; justify-content:center; margin-top:6px; }
.ps-botao{
  padding:9px 15px; border:1px solid var(--borda); border-radius:16px;
  background:transparent; color:var(--texto-2);
  font-size:.82rem; cursor:pointer;
}

/* Acoes fixas */
.perfil-acoes{
  position:fixed; bottom:calc(var(--barra-h) + var(--seguro-baixo) + 10px);
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max); z-index:65;
  padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(to top, var(--fundo) 62%, transparent);
}
.pa-principal{ flex:1; }
.pa-botao{
  width:50px; height:50px; flex:none;
  border:1px solid var(--borda); border-radius:50%;
  background:var(--cartao); font-size:20px; cursor:pointer;
  box-shadow:var(--sombra);
}
.pa-ativo{ background:var(--rosa-suave); border-color:var(--rosa); }
.pa-feito{ filter:grayscale(.3); opacity:.85; }

/* ---------------- GESTAO DE FOTOS ---------------- */
.grelha-fotos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:12px;
}
.foto-item{
  position:relative; margin:0;
  aspect-ratio:3/4; border-radius:var(--r-s);
  overflow:hidden; background:var(--input);
  border:2px solid transparent;
  cursor:grab;
}
.foto-item img{ width:100%; height:100%; object-fit:cover; }
.foto-principal{ border-color:var(--rosa); }
.foto-privada{ border-color:var(--texto-2); }
.a-arrastar{ opacity:.45; }

.foto-etiqueta{
  position:absolute; top:5px; left:5px;
  padding:3px 8px; border-radius:9px;
  background:var(--grad); color:var(--texto-grad);
  font-size:.62rem; font-weight:700;
}
.foto-estado{
  position:absolute; top:5px; left:5px;
  padding:3px 8px; border-radius:9px;
  background:rgba(17,27,33,.78); color:var(--texto-claro);
  font-size:.62rem; font-weight:600;
}
.foto-recusada{ background:var(--vermelho); }
.foto-alerta{
  position:absolute; top:5px; right:5px;
  width:20px; height:20px; display:grid; place-items:center;
  border-radius:50%; background:var(--laranja);
  color:var(--texto-grad); font-size:11px; font-weight:700;
}

.foto-acoes{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:center; gap:4px;
  padding:6px 4px;
  background:linear-gradient(to top, rgba(11,20,26,.8), transparent);
}
.fa-form{ margin:0; }
.fa-botao{
  width:28px; height:28px; border:0; border-radius:50%;
  background:rgba(239,234,226,.9); color:var(--texto);
  font-size:12px; cursor:pointer;
}
.fa-apagar{ background:rgba(232,16,58,.92); color:var(--texto-grad); }

.foto-juntar{ margin:0; }
.juntar-area{
  display:grid; place-items:center; gap:4px;
  aspect-ratio:3/4; border-radius:var(--r-s);
  background:var(--input);
  border:2px dashed var(--borda);
  cursor:pointer; color:var(--texto-2);
}
.juntar-mais{ font-size:26px; line-height:1; color:var(--rosa); }
.juntar-txt{ font-size:.72rem; font-weight:600; }

.fotos-contagem{ margin:10px 0 0; text-align:center; }

.aviso-atencao{
  background:rgba(255,138,61,.16);
  border-color:var(--laranja);
  color:#8A4406;
}

.lista-dicas{ margin:8px 0 0; padding-left:18px; display:grid; gap:6px; }
.lista-dicas li{ font-size:.88rem; color:var(--texto-2); line-height:1.5; }

/* Vazio */
.vazio{ text-align:center; }
.vazio-ico{ font-size:42px; display:block; margin-bottom:8px; }

/* Migalhas */
.migalhas{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  padding:10px 14px; font-size:.78rem; color:var(--texto-2);
}
.migalhas a{ color:var(--texto-2); }
.mig-sep{ opacity:.5; }

.auth-marca-peq{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding-top:0;
}
.auth-marca-peq .auth-coracao{ width:46px; }
.auth-marca-peq .auth-nome{ font-size:1.85rem; }

/* =====================================================
   A MINHA CONTA — painel
   ===================================================== */
.conta-cabecalho{ display:flex; align-items:center; gap:14px; }
.conta-foto{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  flex:none; border:2px solid var(--borda);
}
.conta-info{ display:grid; gap:3px; min-width:0; }
.conta-nome{
  font-family:var(--fonte-titulo); font-size:1.2rem; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.conta-nome .selo{
  display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--grad-diag); color:var(--texto-grad);
  font-size:12px; font-weight:700;
}
.conta-premium{ color:var(--laranja); }
.conta-estado{ font-size:.8rem; font-weight:700; margin-top:2px; }
.conta-estado-ok{ color:var(--online); }
.conta-estado-off{ color:var(--texto-2); }

.conta-numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.conta-numero{
  display:grid; gap:2px; justify-items:center;
  padding:14px 6px; border-radius:var(--r-m);
  background:var(--cartao); border:1px solid var(--borda);
  color:var(--texto);
}
.conta-numero strong{
  font-family:var(--fonte-titulo); font-size:1.35rem; font-weight:700;
}
.conta-numero:active{ background:var(--cartao-2); }

.conta-sair{ margin-top:4px; }

/* =====================================================
   CRIAR CONTA — formulario unico
   ===================================================== */
.ecra-registo{
  gap:12px;
  padding:18px 16px calc(22px + var(--seguro-baixo));
  background:var(--fundo);
}

.registo-topo{ margin-bottom:2px; }
.registo-titulo{
  font-family:var(--fonte-titulo);
  font-size:1.72rem; font-weight:700; letter-spacing:-.03em;
  margin:0 0 4px; color:var(--texto); line-height:1.15;
}
.registo-sub{ margin:0; color:var(--texto-2); font-size:.95rem; }

.form-registo{ display:grid; gap:13px; margin-top:2px; }
.obrig{ color:var(--rosa); font-weight:700; }

/* Dois campos lado a lado */
.par{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.par .campo{ min-width:0; }
.par .campo input, .par .campo select{ padding-inline:12px; }
.par .campo-passe input{ padding-right:40px; }

.registo-nota{
  margin:-4px 0 0; font-size:.82rem; line-height:1.5;
  color:var(--texto-2);
}
.registo-nota b{ color:var(--rosa); font-weight:700; }

.registo-termos{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; margin-top:2px;
  background:#FBF3DC; border:1px solid #E8D9A8;
  border-radius:var(--r-m);
  font-size:.86rem; line-height:1.5; color:var(--texto);
}
.registo-termos input{
  flex:0 0 auto; width:21px; height:21px; margin:1px 0 0;
  accent-color:var(--rosa); cursor:pointer;
}
.registo-termos a{ font-weight:700; }

.registo-voltar{
  display:block; text-align:center; margin:4px 0 0;
  font-size:.95rem; font-weight:700; color:var(--rosa);
}

/* O botao redondo de voltar foi retirado. Em todas as paginas de
   autenticacao usa-se o link de texto ".registo-voltar". */


/* =====================================================
   DESCOBRIR, MATCHES E LISTAS
   ===================================================== */

/* ---------------- DESCOBRIR ---------------- */
.descobrir{
  padding:12px 12px calc(var(--barra-h) + 20px);
  display:flex; flex-direction:column;
  min-height:calc(100svh - var(--topo-h) - var(--barra-h));
}
.desc-topo{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.desc-titulo{ margin:0; font-size:1.3rem; }
.desc-restam{
  font-size:.76rem; font-weight:700; color:var(--texto-2);
  background:var(--cartao); border:1px solid var(--borda);
  padding:5px 11px; border-radius:12px;
}
.desc-poucos{ color:var(--vermelho); border-color:var(--vermelho); }

.baralho{
  position:relative; flex:1;
  min-height:400px;
  margin-bottom:14px;
}
.carta{
  position:absolute; inset:0;
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--sombra-alta);
  will-change:transform;
  touch-action:pan-y;
}
.carta:not(:last-child){ pointer-events:none; }
.carta:nth-last-child(2){ transform:scale(.965) translateY(9px); }
.carta:nth-last-child(3){ transform:scale(.93) translateY(18px); }
.carta:nth-last-child(n+4){ opacity:0; }

.carta-foto{ position:relative; height:100%; background:var(--escuro-2); }
.carta-foto > img{ width:100%; height:100%; object-fit:cover; }

.carta-destaque, .carta-online{
  position:absolute; top:12px;
  padding:5px 11px; border-radius:13px;
  font-size:.72rem; font-weight:700;
  backdrop-filter:blur(6px);
}
.carta-destaque{
  left:12px; background:var(--grad); color:var(--texto-grad);
}
.carta-online{
  right:12px; background:rgba(17,27,33,.62); color:var(--texto-claro);
}

.carta-marca{
  position:absolute; top:56px;
  padding:8px 16px; border-radius:10px;
  font-family:var(--fonte-titulo); font-weight:700; font-size:1.5rem;
  letter-spacing:.04em; opacity:0;
  border:4px solid; pointer-events:none;
}
.carta-sim{
  left:18px; transform:rotate(-14deg);
  color:var(--online); border-color:var(--online);
}
.carta-nao{
  right:18px; transform:rotate(14deg);
  color:var(--vermelho); border-color:var(--vermelho);
}

.carta-base{
  position:absolute; left:0; right:0; bottom:0;
  padding:60px 16px 18px;
  background:linear-gradient(to top, rgba(11,20,26,.94) 35%, transparent);
  color:var(--texto-claro);
}
.carta-nome{
  margin:0; font-size:1.5rem; color:var(--texto-claro);
  display:flex; align-items:center; gap:6px;
}
.carta-local{ margin:3px 0 0; font-size:.86rem; opacity:.88; }
.carta-intencoes{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.carta-intencoes span{
  padding:5px 11px; border-radius:12px;
  background:rgba(255,45,111,.85); color:var(--texto-grad);
  font-size:.74rem; font-weight:700;
}
.carta-compat{
  display:inline-block; margin-top:8px;
  padding:4px 10px; border-radius:11px;
  background:rgba(239,234,226,.16); color:var(--texto-claro);
  font-size:.74rem; font-weight:700;
}
.carta-gelo{
  margin-top:11px; padding:11px 13px;
  background:rgba(239,234,226,.12); border-radius:var(--r-s);
  backdrop-filter:blur(4px);
}
.cg-pergunta{
  display:block; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; opacity:.7;
}
.cg-texto{
  display:block; margin-top:3px;
  font-family:var(--fonte-titulo); font-size:.98rem; line-height:1.4;
}
.carta-ver{
  position:absolute; right:12px; bottom:calc(100% - 100%);
  top:52px;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:rgba(17,27,33,.6);
  color:var(--texto-claro); font-size:15px; font-weight:700;
  backdrop-filter:blur(6px);
}

.desc-acoes{
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.da-botao{
  border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:var(--sombra);
  background:var(--cartao);
  border:1px solid var(--borda);
}
.da-voltar{ width:44px; height:44px; font-size:18px; color:var(--laranja); }
.da-passar{ width:58px; height:58px; font-size:24px; color:var(--texto-2); }
.da-super{ width:44px; height:44px; font-size:19px; }
.da-gostar{
  width:58px; height:58px; font-size:25px;
  background:var(--grad-diag); color:var(--texto-grad); border:0;
  box-shadow:0 5px 18px rgba(255,45,111,.42);
}
.da-botao:active{ transform:scale(.92); }

.desc-vazio{
  flex:1; display:grid; place-content:center; text-align:center;
  gap:10px; padding:30px 20px;
}

/* ---------------- ECRA DE MATCH ---------------- */
.match-ecra{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(70% 50% at 50% 40%, rgba(255,45,111,.35), transparent),
    rgba(11,20,26,.94);
  animation:aparecer .25s ease;
}
.match-caixa{ text-align:center; max-width:340px; width:100%; }
.match-coracoes{ animation:bater 1.1s ease-in-out infinite; }
.match-coracoes img{ margin:0 auto; }
@keyframes bater{
  0%,100%{ transform:scale(1); }
  22%{ transform:scale(1.12); }
  44%{ transform:scale(1); }
}
.match-titulo{
  margin:16px 0 6px; font-size:2.1rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.match-texto{ color:var(--texto-claro); margin:0 0 20px; font-size:1rem; }
.match-ecra .auth-ligacao{ color:rgba(239,234,226,.75); }

/* ---------------- SEPARADORES ---------------- */
.separadores{
  display:flex; gap:6px; padding:2px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m);
}
.sep{
  flex:1; padding:10px 6px; text-align:center;
  border-radius:12px; font-size:.84rem; font-weight:700;
  color:var(--texto-2);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.sep-ativo{ background:var(--grad); color:var(--texto-grad); }
.sep-conta{
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--vermelho); color:var(--texto-grad);
  border-radius:9px; font-size:.66rem;
}
.sep-ativo .sep-conta{ background:rgba(255,255,255,.28); }

.seccao-titulo{
  font-size:.82rem; font-weight:700; color:var(--texto-2);
  text-transform:uppercase; letter-spacing:.04em;
  margin:4px 0 10px;
}

/* ---------------- FITA DE MATCHES ---------------- */
.fita-matches{
  display:flex; gap:12px; overflow-x:auto;
  padding-bottom:6px; scrollbar-width:none;
}
.fita-matches::-webkit-scrollbar{ display:none; }
.fm-item{ flex:none; width:72px; text-align:center; color:var(--texto); }
.fm-foto{ position:relative; display:block; }
.fm-foto img{
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; border:3px solid var(--rosa);
}
.fm-online{
  position:absolute; right:3px; bottom:3px;
  width:14px; height:14px; border-radius:50%;
  background:var(--online); border:2px solid var(--fundo);
}
.fm-nome{
  display:block; margin-top:5px;
  font-size:.76rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------- LISTAS EM LINHA ---------------- */
.lista-linhas{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.linha{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--r-m);
  background:var(--cartao); border:1px solid var(--borda);
  color:var(--texto);
}
.linha:active{ background:var(--cartao-2); }
.linha-foto{ position:relative; flex:none; }
.linha-foto img{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
}
.linha-corpo{ flex:1; min-width:0; display:grid; gap:2px; }
.linha-corpo strong{
  font-size:.96rem; display:flex; align-items:center; gap:5px;
}
.linha-corpo .texto-2{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.linha-lado{ flex:none; font-size:.74rem; }

.notif-ico{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cartao-2); font-size:20px;
}
.linha-nova .notif-ico{ background:var(--rosa-suave); }

/* ---------------- GRELHA DE CARTOES ---------------- */
.grelha-cartoes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.mini-cartao{
  position:relative; aspect-ratio:3/4;
  border-radius:var(--r-m); overflow:hidden;
  background:var(--input); color:var(--texto-claro);
  box-shadow:var(--sombra);
}
.mini-cartao img{ width:100%; height:100%; object-fit:cover; }
.mc-oculto img{ filter:blur(16px) saturate(.7); }
.mc-cadeado{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px;
  padding:10px;
  background:rgba(11,20,26,.28);
}
.mc-cadeado-coracao{
  width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.26);
  font-size:38px;
  box-shadow:var(--sombra-alta);
}
.mc-cadeado-texto{
  color:#fff;
  font-size:.92rem; font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.mc-confete{ position:absolute; inset:0; pointer-events:none; }
.mc-confete span{
  position:absolute; font-size:16px; opacity:.6;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.mc-c1{ top:10%; left:14%; transform:rotate(-12deg); }
.mc-c2{ top:14%; right:12%; font-size:12px; transform:rotate(10deg); }
.mc-c3{ bottom:16%; left:10%; font-size:12px; transform:rotate(8deg); }
.mc-c4{ bottom:10%; right:16%; transform:rotate(-8deg); }
.mc-super{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag);
  font-size:14px;
}
.mc-base{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 10px 10px;
  background:linear-gradient(to top, rgba(11,20,26,.9), transparent);
  font-size:.88rem; font-weight:700;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.mc-base small{ width:100%; font-weight:400; opacity:.8; font-size:.74rem; }
.mc-base .selo-ok{ width:16px; height:16px; font-size:9px; }

/* ---------------- CONVITE PREMIUM ---------------- */
.premium-convite{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(255,45,111,.12), rgba(255,138,61,.14));
  border-color:rgba(255,45,111,.3);
}
.pc-coroa{ font-size:28px; }
.premium-convite > div{ flex:1; min-width:0; }
.premium-convite p{ margin:2px 0 0; }


/* =====================================================
   CHAT
   ===================================================== */

.conta-nao-lidas{
  min-width:20px; height:20px; padding:0 6px;
  display:grid; place-items:center;
  background:var(--rosa); color:var(--texto-grad);
  border-radius:10px; font-size:.7rem; font-weight:700;
  margin-top:4px;
}
.linha-nova strong{ font-weight:700; }
.linha-nova .texto-2{ color:var(--texto); font-weight:600; }
.linha-lado{ display:grid; justify-items:end; gap:2px; }

.aviso-burla{ font-size:.82rem; line-height:1.5; color:var(--texto-2); }

/* ---------------- CONVERSA ---------------- */
.conversa{
  display:flex; flex-direction:column;
  height:100svh;          /* svh: a barra de escrever no fundo nao
                             salta quando a barra do browser some */
  background:var(--fundo);
}

.conv-topo{
  flex:none;
  display:flex; align-items:center; gap:8px;
  padding:10px 8px;
  padding-top:calc(10px + var(--seguro-cima));
  background:var(--escuro); color:var(--texto-claro);
}
.conv-voltar{
  width:34px; height:38px; display:grid; place-items:center;
  color:var(--texto-claro); font-size:26px; line-height:1;
}
.conv-quem{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  color:inherit;
}
.conv-quem img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.conv-quem strong{
  display:flex; align-items:center; gap:5px;
  font-size:.98rem; font-family:var(--fonte-titulo);
}
.conv-estado{
  display:block; font-size:.74rem; color:rgba(239,234,226,.66);
}
.conv-botao{
  width:44px; height:44px; border:0; border-radius:50%;
  background:transparent; color:var(--texto-claro);
  font-size:22px; cursor:pointer;
}

.conv-opcoes{
  position:absolute; right:10px;
  top:calc(56px + var(--seguro-cima)); z-index:60;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); box-shadow:var(--sombra-alta);
  display:grid; min-width:180px; overflow:hidden;
}
.conv-opcoes a, .conv-opcoes button{
  padding:12px 15px; text-align:left;
  border:0; background:transparent; color:var(--texto);
  font-size:.9rem; cursor:pointer;
  border-bottom:1px solid var(--borda);
}
.conv-opcoes > *:last-child{ border-bottom:0; color:var(--vermelho); }

/* Corpo */
.conv-corpo{
  flex:1; overflow-y:auto;
  padding:14px 12px;
  display:flex; flex-direction:column; gap:5px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,45,111,.05), transparent 40%),
    var(--fundo);
  overscroll-behavior:contain;
}

.conv-inicio{
  text-align:center; padding:26px 16px 20px;
  display:grid; gap:8px; justify-items:center;
}
.ci-foto{
  width:76px; height:76px; border-radius:50%;
  object-fit:cover; border:3px solid var(--rosa);
}
.conv-inicio h2{ margin:6px 0 0; font-size:1.2rem; }
.ci-sugestoes{ margin-top:14px; display:grid; gap:8px; width:100%; }
.ci-sugestao{
  text-align:left; padding:12px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); cursor:pointer;
  display:grid; gap:3px;
}
.cis-p{
  font-size:.68rem; font-weight:700; color:var(--texto-2);
  text-transform:uppercase; letter-spacing:.03em;
}
.cis-r{ font-family:var(--fonte-titulo); font-size:.95rem; }

/* Mensagens */
.msg{
  position:relative;
  max-width:78%;
  padding:8px 11px 6px;
  border-radius:var(--r-m);
  font-size:.95rem; line-height:1.45;
  animation:entrar .16s ease;
  word-wrap:break-word;
}
.msg-minha{
  align-self:flex-end;
  background:var(--grad-diag); color:var(--texto-grad);
  border-bottom-right-radius:5px;
}
.msg-dele{
  align-self:flex-start;
  background:var(--cartao); color:var(--texto);
  border:1px solid var(--borda);
  border-bottom-left-radius:5px;
}
.msg-texto{ margin:0; }

.msg-rodape{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin-top:3px; font-size:.66rem; opacity:.72;
}
.msg-vistos{ font-size:.72rem; }
.msg-minha .msg-vistos{ color:#DFF7E6; }

.msg-foto{
  display:block;
  width:220px; height:260px; max-width:100%;
  object-fit:cover;
  border-radius:var(--r-s);
  margin:-2px 0 2px;
  cursor:pointer;
}
.msg-audio{ width:220px; max-width:100%; }

.msg-reacao{
  position:absolute; bottom:-9px; right:8px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:10px; padding:1px 5px; font-size:.72rem;
}

/* Imagem tapada */
.msg-tapada{
  position:relative; overflow:hidden;
  width:220px; height:260px; max-width:100%;
  border-radius:var(--r-s);
  margin:-2px 0 2px;
}
.msg-tapada img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(26px) saturate(.6); display:block;
}
.mt-aviso{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:6px; justify-items:center;
  padding:14px; text-align:center;
  background:rgba(17,27,33,.55);
  color:var(--texto-claro);
}
.mt-aviso span{ font-size:24px; }
.mt-aviso p{ margin:0; font-size:.8rem; max-width:190px; }
.mt-acoes{ display:flex; gap:8px; margin-top:4px; }
.mt-acoes button{
  padding:7px 14px; border:0; border-radius:14px;
  font-size:.8rem; font-weight:700; cursor:pointer;
}
.mt-ver{ background:var(--cartao); color:var(--texto); }
.mt-bloquear{ background:var(--vermelho); color:var(--texto-grad); }
.mt-revelada img{ filter:none; }
.mt-revelada .mt-aviso{ display:none; }

/* A escrever */
.msg-escrever{
  align-self:flex-start;
  display:flex; gap:4px; padding:12px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); border-bottom-left-radius:5px;
}
.msg-escrever span{
  width:7px; height:7px; border-radius:50%;
  background:var(--texto-2);
  animation:pontinhos 1.3s ease-in-out infinite;
}
.msg-escrever span:nth-child(2){ animation-delay:.18s; }
.msg-escrever span:nth-child(3){ animation-delay:.36s; }
@keyframes pontinhos{
  0%,60%,100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* Barra de escrita */
.conv-barra{
  flex:none;
  display:flex; align-items:flex-end; gap:8px;
  padding:9px 10px;
  padding-bottom:calc(9px + var(--seguro-baixo));
  background:var(--cartao); border-top:1px solid var(--borda);
}
.conv-anexo{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:var(--input);
  font-size:17px; cursor:pointer;
}
.conv-barra textarea{
  flex:1; resize:none;
  padding:11px 14px;
  font-size:16px; font-family:inherit; line-height:1.4;
  color:var(--texto); background:var(--input);
  border:1px solid var(--borda); border-radius:20px;
  max-height:130px;
}
.conv-barra textarea:focus{
  outline:none; border-color:var(--rosa);
  box-shadow:0 0 0 3px var(--rosa-suave);
}
.conv-enviar{
  width:44px; height:44px; flex:none;
  border:0; border-radius:50%;
  background:var(--grad-diag); color:var(--texto-grad);
  font-size:17px; cursor:pointer;
  box-shadow:0 3px 10px rgba(255,45,111,.32);
}
.conv-enviar:disabled{ opacity:.5; }

.conv-dica{
  margin:0; padding:9px 14px;
  padding-bottom:calc(9px + var(--seguro-baixo));
  background:var(--cartao-2); border-top:1px solid var(--borda);
  font-size:.76rem; color:var(--texto-2); text-align:center;
}
.conv-fechada{
  flex:none; padding:16px;
  padding-bottom:calc(16px + var(--seguro-baixo));
  text-align:center; color:var(--texto-2); font-size:.88rem;
  background:var(--cartao); border-top:1px solid var(--borda);
}


/* =====================================================
   VIDEOCHAMADA E ENCONTRO SEGURO
   ===================================================== */

.chamada{
  position:fixed; inset:0; z-index:200;
  background:var(--escuro-2);
  overflow:hidden;
}
.video-outro{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  background:var(--escuro-2);
}
.video-eu{
  position:absolute; z-index:3;
  top:calc(74px + var(--seguro-cima)); right:14px;
  width:104px; height:148px;
  border-radius:var(--r-m); object-fit:cover;
  background:var(--escuro);
  box-shadow:var(--sombra-alta);
  border:2px solid rgba(239,234,226,.18);
}

.chamada-espera{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; justify-items:center; gap:12px;
  padding:30px;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255,45,111,.28), transparent),
    var(--escuro-2);
}
.ce-foto{
  width:150px; height:150px; border-radius:50%;
  object-fit:cover; border:4px solid var(--rosa);
  animation:pulsar 2.1s ease-in-out infinite;
}
@keyframes pulsar{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,45,111,.5); }
  70%{ box-shadow:0 0 0 26px rgba(255,45,111,0); }
}
.ce-nome{
  margin:10px 0 0; font-size:1.6rem; color:var(--texto-claro);
}
.ce-estado{ margin:0; color:rgba(239,234,226,.72); font-size:.95rem; }

.chamada-topo{
  position:absolute; z-index:4;
  top:calc(16px + var(--seguro-cima)); left:0; right:0;
  display:flex; justify-content:center; gap:10px;
}
.ct-tempo{
  padding:6px 14px; border-radius:14px;
  background:rgba(17,27,33,.6); color:var(--texto-claro);
  font-family:var(--fonte-titulo); font-weight:700; font-size:.9rem;
  backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s ease;
}
.a-decorrer .ct-tempo{ opacity:1; }
.ct-aviso{
  padding:6px 12px; border-radius:14px;
  background:rgba(255,138,61,.85); color:var(--texto-grad);
  font-size:.7rem; font-weight:700;
}

.chamada-acoes{
  position:absolute; z-index:4;
  left:0; right:0; bottom:calc(34px + var(--seguro-baixo));
  display:flex; justify-content:center; align-items:center; gap:18px;
}
.ca-botao{
  width:58px; height:58px;
  border:0; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; cursor:pointer;
  background:rgba(239,234,226,.16); color:var(--texto-claro);
  backdrop-filter:blur(10px);
}
.ca-botao:active{ transform:scale(.92); }
.ca-atender{
  width:68px; height:68px;
  background:var(--online); color:#06381A;
  box-shadow:0 5px 20px rgba(37,211,102,.45);
}
.ca-desligar, .ca-recusar{
  width:68px; height:68px;
  background:var(--vermelho); color:var(--texto-grad);
  box-shadow:0 5px 20px rgba(232,16,58,.45);
}
.ca-cortado{ background:var(--vermelho); }

.chamada-erro{
  position:absolute; z-index:5;
  left:16px; right:16px; bottom:calc(120px + var(--seguro-baixo));
  margin:0; padding:12px 14px;
  background:rgba(232,16,58,.92); color:var(--texto-grad);
  border-radius:var(--r-m);
  font-size:.86rem; text-align:center;
}

.chamada-fim{
  min-height:100svh;
  display:grid; place-content:center; justify-items:center; gap:12px;
  padding:30px; text-align:center;
  background:var(--fundo);
}
.cf-foto{
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; border:3px solid var(--borda);
}

/* ---------------- ENCONTRO SEGURO ---------------- */
.es-selo{
  width:60px; height:60px; margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag);
  font-size:28px;
}
.es-partilhar{ display:grid; gap:12px; }
.es-link{ display:flex; gap:8px; }
.es-link input{
  flex:1; min-width:0;
  padding:12px; font-size:.82rem;
  background:var(--input); border:1px solid var(--borda);
  border-radius:var(--r-s); color:var(--texto-2);
}
.es-link .botao{ padding:12px 16px; font-size:.88rem; }

.es-item{ display:flex; align-items:center; gap:13px; }
.es-passou{ opacity:.6; }
.es-data{
  flex:none; width:52px; text-align:center;
  padding:8px 0; border-radius:var(--r-s);
  background:var(--grad-diag); color:var(--texto-grad);
}
.es-dia{ display:block; font-family:var(--fonte-titulo); font-size:1.3rem; font-weight:700; line-height:1; }
.es-mes{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; }
.es-info{ flex:1; min-width:0; display:grid; gap:2px; }
.es-info strong{ font-size:.96rem; }
.es-acoes{ display:grid; gap:5px; }
.es-acoes form{ margin:0; }
.es-acoes .ps-botao{ padding:6px 11px; font-size:.76rem; }

.es-datahora{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }


/* =====================================================
   INÍCIO, EXPLORAR E LISTAGENS
   ===================================================== */

/* min-height + coluna flex + margin-top:auto no ultimo filho: quando
   ha pouco conteudo (poucos perfis), o que vier por ultimo (normalmente
   ".confianca" ou ".rodape-seo") e' empurrado para junto da barra de
   baixo, em vez de deixar um vazio grande no fundo. Com conteudo
   normal isto nao muda nada — o auto-margin so' "gasta" espaco quando
   sobra espaco. O padding de baixo tambem estava a reservar a altura
   da barra (--barra-h) sem motivo: a barra nao e' fixa, ja tem o seu
   proprio espaco reservado em .app — nao precisa de reforço aqui. */
.inicio{
  min-height:100%;
  padding:12px 12px 18px;
  display:flex; flex-direction:column; gap:18px;
}
.inicio > *:last-child{ margin-top:auto; }

/* ---------------- FILTRO ---------------- */
.filtro{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--sombra);
}
.filtro-resumo{
  display:none; width:100%;
  padding:14px 16px; border:0; background:transparent;
  align-items:center; justify-content:space-between;
  font-weight:700; font-size:.94rem; cursor:pointer;
  font-family:var(--fonte-titulo);
}
.filtro-fechado .filtro-resumo{ display:flex; }
.filtro-fechado .filtro-corpo{ display:none; }
.fr-seta{
  color:var(--rosa); flex:none; margin-left:12px;
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--rosa-suave); border-radius:50%;
  font-size:1.1rem; line-height:1;
}

/* Cabecalho do filtro aberto: titulo + X para fechar.
   Sem isto, ao abrir o filtro nao havia nenhuma forma de o fechar
   outra vez, porque o botao-resumo fica escondido enquanto aberto. */
.filtro-topo{
  display:flex; align-items:center; justify-content:space-between;
}
.filtro-topo strong{ font-family:var(--fonte-titulo); font-size:1rem; }
.filtro-fechar{
  width:32px; height:32px; flex:none;
  border:0; border-radius:50%;
  background:var(--input); color:var(--texto);
  font-size:15px; cursor:pointer;
}

.filtro-corpo{ padding:16px; display:grid; gap:14px; }
.fil-grupo{ border:0; padding:0; margin:0; display:grid; gap:8px; }

/* "O que procuras?" — blocos maiores, para preencherem bem o ecra
   do telemovel em vez de pastilhas pequenas com muito vazio a volta. */
.opcoes-grande{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.opcoes-grande .opcao{ display:block; }
.opcoes-grande .opcao span{
  display:block; text-align:left;
  padding:16px 14px; font-size:.98rem; line-height:1.3;
}
.fil-grupo legend{
  font-family:var(--fonte-titulo);
  font-weight:700; font-size:1rem; padding:0;
}
.fil-local{
  display:flex; align-items:center; gap:8px;
  padding:4px 10px;
  background:var(--input); border:1px solid var(--borda);
  border-radius:var(--r-s);
}
.fil-icone{ font-size:15px; }
.fil-select{
  flex:1; padding:11px 4px; border:0; background:transparent;
  font-size:16px; color:var(--texto); appearance:none;
}
.fil-select:focus{ outline:none; }

/* ---------------- PROVA SOCIAL ---------------- */
.prova-social{
  margin:0; text-align:center;
  font-size:.86rem; color:var(--texto-2);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.prova-social strong{ color:var(--texto); }
.ps-ponto{
  width:8px; height:8px; border-radius:50%;
  background:var(--online); display:inline-block;
  box-shadow:0 0 0 0 rgba(37,211,102,.6);
  animation:respirar 2s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 8px rgba(37,211,102,0); }
}

/* ---------------- BLOCOS ---------------- */
.bloco{ display:grid; gap:10px; }
.bloco-topo{ display:flex; align-items:center; justify-content:space-between; }
.bloco-topo h2{
  margin:0; font-size:1.06rem;
  display:flex; align-items:center; gap:7px;
}
.bloco-mais{ font-size:.84rem; font-weight:700; }

.fita-cartoes{
  display:flex; gap:10px; overflow-x:auto;
  padding-bottom:4px; margin-inline:-12px; padding-inline:12px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.fita-cartoes::-webkit-scrollbar{ display:none; }

.cartao-perfil{
  position:relative; flex:none;
  width:158px; aspect-ratio:3/4;
  border-radius:var(--r-m); overflow:hidden;
  background:var(--input); color:var(--texto-claro);
  scroll-snap-align:start;
  box-shadow:var(--sombra);
}
.cartao-perfil img{ width:100%; height:100%; object-fit:cover; }

.cp-destaque{
  position:absolute; top:7px; left:7px;
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag); font-size:12px;
}
.cp-online{
  position:absolute; top:9px; right:9px;
  width:11px; height:11px; border-radius:50%;
  background:var(--online); border:2px solid rgba(11,20,26,.4);
}
.mc-intencao{ color:var(--laranja); font-weight:700; }

/* ---------------- BANNER PREMIUM ---------------- */
.banner-premium{
  display:flex; align-items:center; gap:12px;
  padding:15px 16px; border-radius:var(--r-l);
  background:var(--grad); color:var(--texto-grad);
  box-shadow:0 5px 18px rgba(255,45,111,.3);
}
.bp-coroa{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.22);
  font-size:23px;
}
.bp-texto{ flex:1; display:grid; gap:2px; min-width:0; }
.bp-texto strong{ font-family:var(--fonte-titulo); font-size:1.06rem; }
.bp-texto span{ font-size:.8rem; opacity:.92; line-height:1.35; }
.bp-seta{ flex:none; font-size:.8rem; font-weight:700; }

/* ---------------- CONFIANÇA ---------------- */
.confianca{ display:grid; gap:9px; }
.conf-item{
  display:grid; grid-template-columns:38px 1fr; gap:4px 12px;
  align-items:center;
  padding:13px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m);
}
.conf-item > span{
  grid-row:span 2;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:var(--rosa-suave);
  color:var(--vermelho); font-size:17px; font-weight:700;
}
.conf-item strong{ font-size:.94rem; }
.conf-item p{ margin:0; font-size:.8rem; }

/* ---------------- RODAPÉ SEO ---------------- */
.rodape-seo{
  padding-top:14px; border-top:1px solid var(--borda);
  display:grid; gap:8px;
}
.rodape-seo h2{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-2); margin:6px 0 0;
}
.seo-ligacoes{ display:flex; flex-wrap:wrap; gap:6px; }
.seo-ligacoes a{
  padding:6px 12px; border-radius:13px;
  background:var(--cartao); border:1px solid var(--borda);
  font-size:.8rem; font-weight:600; color:var(--texto);
}
.seo-legais{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:8px; font-size:.78rem;
}
.seo-legais a{ color:var(--texto-2); }
.seo-empresa{
  margin:8px 0 0; font-size:.74rem; color:var(--texto-2); text-align:center;
}

/* ---------------- EXPLORAR ---------------- */
.explorar .ecra-cabecalho{ justify-content:space-between; }
.exp-filtros{
  display:flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:16px;
  background:var(--cartao); border:1px solid var(--borda);
  font-size:.84rem; font-weight:700; cursor:pointer;
}

.fita-atalhos{
  display:flex; gap:7px; overflow-x:auto;
  margin-inline:-14px; padding:2px 14px 6px;
  scrollbar-width:none;
}
.fita-atalhos::-webkit-scrollbar{ display:none; }
.atalho{
  flex:none; padding:9px 14px; border-radius:16px;
  background:var(--cartao); border:1px solid var(--borda);
  font-size:.82rem; font-weight:700; color:var(--texto);
  display:flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.atalho-ativo{
  background:var(--grad); color:var(--texto-grad); border-color:transparent;
}

.mais-abaixo{ padding:20px; text-align:center; }
.carregando{ font-size:.84rem; color:var(--texto-2); }

/* ---------------- PAINEL DE FILTROS ---------------- */
.painel-fundo{
  position:fixed; inset:0; z-index:100;
  background:rgba(11,20,26,.55);
  animation:aparecer .18s ease;
}
.painel{
  position:fixed; left:50%; bottom:0; z-index:110;
  transform:translate(-50%, 100%);
  width:100%; max-width:var(--app-max);
  max-height:88dvh; overflow-y:auto;
  padding:8px 16px calc(24px + var(--seguro-baixo));
  background:var(--fundo);
  border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--sombra-alta);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.painel-aberto{ transform:translate(-50%, 0); }
.painel-pega{
  width:42px; height:4px; margin:6px auto 12px;
  border-radius:2px; background:var(--borda);
}
.painel-titulo{ margin:0 0 12px; font-size:1.2rem; }

/* ---------------- LISTAGENS SEO ---------------- */
.ls-cabecalho h1{ font-size:1.35rem; margin-bottom:3px; }
.ls-cabecalho p{ margin:0; }
.ls-texto{ line-height:1.65; font-size:.92rem; }
.ls-texto h2{ font-size:1.05rem; }
.ls-texto p{ margin:0 0 10px; }

.paginas{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 0;
}
.paginas .botao{ padding:11px 16px; font-size:.88rem; }


/* =====================================================
   PREMIUM E CRÉDITOS
   ===================================================== */

.pr-topo{ text-align:center; padding:6px 0 2px; }
.pr-coroa{
  width:64px; height:64px; margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag);
  font-size:30px;
  box-shadow:0 6px 20px rgba(255,45,111,.34);
}
.pr-topo h1{
  margin:0 0 4px; font-size:1.6rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.pr-topo p{ margin:0; }
.pr-ativo{ color:var(--online); font-weight:700; font-size:.9rem; }

.pr-gancho{
  text-align:center;
  background:linear-gradient(135deg, rgba(255,45,111,.14), rgba(255,138,61,.16));
  border-color:rgba(255,45,111,.32);
}
.pr-gancho strong{ font-family:var(--fonte-titulo); font-size:1.1rem; }
.pr-gancho p{ margin:4px 0 0; }

.pr-vantagens{ display:grid; gap:2px; }
.pr-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m);
}
.pri-ico{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:var(--rosa-suave);
  font-size:16px;
}
.pr-item strong{ font-size:.95rem; }
.pr-item p{ margin:2px 0 0; line-height:1.45; }

/* Planos */
.pr-planos{ display:grid; gap:10px; }
.pr-plano{
  position:relative;
  display:grid; grid-template-columns:1fr auto; gap:10px 12px;
  align-items:center;
  padding:16px;
  background:var(--cartao); border:2px solid var(--borda);
  border-radius:var(--r-m);
}
.pr-melhor{
  border-color:var(--rosa);
  background:linear-gradient(135deg, rgba(255,45,111,.08), rgba(255,138,61,.09));
}
.pr-etiqueta{
  position:absolute; top:-10px; left:14px;
  padding:3px 11px; border-radius:10px;
  background:var(--grad); color:var(--texto-grad);
  font-size:.68rem; font-weight:700;
}
.prp-info strong{ font-family:var(--fonte-titulo); font-size:1.06rem; display:block; }
.prp-poupa{ color:var(--poupa); font-weight:700; }
.prp-preco{ text-align:right; display:grid; gap:1px; }
.prp-valor{
  font-family:var(--fonte-titulo); font-size:1.35rem; font-weight:700;
}
.pr-plano .botao{ grid-column:1 / -1; padding:12px; }

/* Bloco de pagamento */
.bloco-pagamento{ text-align:center; }
.bp-titulo{ margin:0 0 12px; font-weight:700; font-size:.92rem; }
.bp-logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px;
}
.chip-pg{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 11px; border-radius:999px;
  background:#fff; border:1px solid var(--borda);
  box-shadow:0 1px 3px rgba(11,20,26,.10);
  line-height:0;
}
.chip-pg svg{ display:block; }
.chip-preto{ background:#000; border-color:#000; }
.bp-nota{ margin:12px 0 0; line-height:1.5; }

/* Aviso "a processar o pagamento" — só aparece no envio final,
   nunca ao clicar, para não tapar o formulário do cartão do PayPal.
   Some sozinho quando o PayPal abre; nunca fica preso (~25s). */
.pagamento-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(11,20,26,.82);
}
.pagamento-overlay[hidden]{ display:none; }
.po-caixa{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:280px; padding:26px 30px;
  background:var(--cartao); color:var(--texto);
  border-radius:var(--r-m); box-shadow:var(--sombra-alta);
  text-align:center; font-weight:600;
}
.po-roda{
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--borda); border-top-color:var(--rosa);
  animation:po-girar .8s linear infinite;
}
@keyframes po-girar{ to{ transform:rotate(360deg); } }

/* ---------------- CHECKOUT (botões PayPal embutidos) ---------------- */
.ecra-checkout{
  position:relative;
  height:100svh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--fundo);
}
.chk-topo{
  display:flex; align-items:center; gap:14px;
  padding:calc(18px + var(--seguro-cima)) 18px 20px;
  background:var(--grad); color:var(--texto-grad);
}
.chk-voltar{ color:var(--texto-grad); font-size:22px; line-height:1; flex-shrink:0; }
.chk-topo h1{ margin:0; font-size:1.15rem; }
.chk-topo p{ margin:4px 0 0; font-size:.78rem; opacity:.92; }
.chk-corpo{ padding:16px 16px calc(30px + var(--seguro-baixo)); }
.chk-caixa{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); padding:16px; margin-bottom:14px;
  box-shadow:var(--sombra);
}
.chk-legenda{
  font-size:.72rem; font-weight:800; color:var(--texto-2);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;
}
.chk-linha{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chk-preco{ font-size:1.2rem; font-weight:800; color:var(--rosa); white-space:nowrap; }
.chk-total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; margin-top:12px; border-top:1px solid var(--borda);
  font-weight:700;
}
.chk-total strong{ font-size:1.1rem; color:var(--rosa); }
.chk-info{
  background:var(--cartao-2); border-radius:var(--r-s);
  padding:11px 12px; margin-bottom:14px;
  font-size:.8rem; color:var(--texto-2); line-height:1.5;
}
.chk-chips{ margin-bottom:12px; }
.chk-botoes{ min-height:48px; margin-bottom:14px; }
.chk-termos{ text-align:center; font-size:.78rem; color:var(--texto-2); }
.chk-termos a{ color:var(--rosa); font-weight:600; }
.chk-sucesso{ text-align:center; padding:34px 20px; }
.chk-sucesso-ico{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  background:var(--poupa); color:#fff; font-size:28px; font-weight:800;
  display:grid; place-items:center;
}
.chk-sucesso h2{ margin:0 0 6px; font-size:1.2rem; }

/* FAQ */
.faq{ border-top:1px solid var(--borda); padding:11px 0; }
.faq summary{
  cursor:pointer; font-weight:600; font-size:.92rem;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:' ▾'; color:var(--rosa); }
.faq[open] summary::after{ content:' ▴'; }
.faq p{ margin:8px 0 0; line-height:1.55; }

/* ---------------- CRÉDITOS ---------------- */
.cr-saldo{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:22px;
  background:var(--grad); color:var(--texto-grad);
  border-radius:var(--r-l);
  box-shadow:0 5px 18px rgba(255,45,111,.3);
}
.crs-ico{ font-size:26px; }
.crs-valor{ font-family:var(--fonte-titulo); font-size:2.3rem; font-weight:700; line-height:1; }
.crs-txt{ font-size:.95rem; opacity:.92; }

.cr-ativo{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cra-ico{ font-size:26px; }
.cr-ativo p{ margin:2px 0 0; }

.cr-opcoes{ display:grid; gap:2px; }
.cr-opcao{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); margin:0;
}
.cr-sem{ opacity:.55; }
.cro-ico{ font-size:20px; width:28px; text-align:center; }
.cro-info{ flex:1; min-width:0; display:grid; gap:1px; }
.cro-info strong{ font-size:.93rem; }
.cro-preco{
  flex:none; padding:9px 14px;
  border:0; border-radius:15px;
  background:var(--grad-diag); color:var(--texto-grad);
  font-weight:700; font-size:.84rem; cursor:pointer;
}
.cro-preco:disabled{ background:var(--input); color:var(--texto-2); cursor:default; }

.cr-pacotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cr-pacote{
  position:relative;
  display:grid; gap:5px; justify-items:center;
  padding:18px 12px 14px;
  background:var(--cartao); border:2px solid var(--borda);
  border-radius:var(--r-m); margin:0; text-align:center;
}
.cr-pacote-melhor{
  border-color:var(--rosa);
  background:linear-gradient(135deg, rgba(255,45,111,.08), rgba(255,138,61,.09));
}
.crp-creditos{
  font-family:var(--fonte-titulo); font-size:1.25rem; font-weight:700;
}
.crp-bonus{
  display:block; font-size:.7rem; color:var(--poupa); font-weight:700;
}
.crp-preco{ font-size:1.05rem; font-weight:700; }
.crp-unidade{ font-size:.7rem; }
.cr-pacote .botao{ width:100%; padding:10px; font-size:.88rem; margin-top:4px; }

.cr-historico{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.cr-historico li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-s);
}
.crh-o{ display:grid; gap:1px; }
.crh-o strong{ font-size:.9rem; }
.crh-q{ font-family:var(--fonte-titulo); font-weight:700; font-size:1rem; }
.crh-mais{ color:var(--poupa); }
.crh-menos{ color:var(--texto-2); }


/* =====================================================
   COMPANHIA VIRTUAL — banner + chat
   ===================================================== */

.ia-ecra{
  display:flex; flex-direction:column;
  height:100svh;          /* idem .conversa: evita saltos na barra de baixo */
  background:var(--fundo);
}

.ia-banner{ position:relative; flex:none; }
.ia-banner img{ width:100%; display:block; }
.ia-voltar{
  position:absolute; z-index:3;
  top:calc(12px + var(--seguro-cima)); left:12px;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:rgba(17,27,33,.6);
  color:var(--texto-claro); font-size:24px; line-height:1;
  backdrop-filter:blur(6px);
}

.ia-cabecalho{
  flex:none;
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  background:var(--grad);
  color:var(--texto-grad);
}
.ia-foto{
  width:46px; height:46px; border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,245,240,.55);
}
.ia-quem{ flex:1; min-width:0; display:grid; gap:1px; }
.ia-quem strong{
  display:flex; align-items:center; gap:7px;
  font-family:var(--fonte-titulo); font-size:1.06rem;
}
.ia-quem .etiqueta-ia{
  background:rgba(17,27,33,.42); color:var(--texto-grad);
}
.ia-sub{ font-size:.76rem; opacity:.9; }
.ia-cabecalho .conv-botao{ color:var(--texto-grad); }

/* O menu (Apagar conversa) ancora-se ao proprio cabecalho, nao ao
   ecra inteiro — assim funciona quer haja banner ou nao. */
.ia-cabecalho{ position:relative; }
.ia-cabecalho .conv-opcoes{
  position:absolute; top:100%; right:10px; left:auto;
  margin-top:6px;
}
.ia-fundo{
  position:fixed; inset:0; z-index:58;
  background:rgba(11,20,26,.45);
  animation:aparecer .15s ease;
}

.ia-corpo{
  background:
    radial-gradient(circle at 82% 6%, rgba(255,138,61,.07), transparent 48%),
    var(--fundo);
}

.ia-barra{ background:var(--cartao); }
.ia-rodape{
  flex:none; margin:0;
  padding:8px 14px;
  padding-bottom:calc(8px + var(--seguro-baixo));
  background:var(--escuro); color:rgba(239,234,226,.8);
  font-size:.74rem; text-align:center;
}

/* Lista de personas */
.ia-cartoes{ display:grid; gap:12px; }
.ia-grande{
  position:relative; display:block;
  border-radius:var(--r-l); overflow:hidden;
  background:var(--cartao); border:1px solid var(--borda);
  box-shadow:var(--sombra);
  color:var(--texto-claro);
}
.ia-grande img{ width:100%; display:block; }
.iag-base{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 15px 14px;
  background:linear-gradient(to top, rgba(11,20,26,.92), transparent);
  display:grid; gap:2px;
}
.iag-base strong{ font-family:var(--fonte-titulo); font-size:1.18rem; }
.iag-base .texto-2{
  color:rgba(239,234,226,.82);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ---------------- BLOG ---------------- */
.blog-lista{ display:grid; gap:12px; }
.blog-item{
  display:grid; gap:0;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m); overflow:hidden;
  color:var(--texto);
  box-shadow:var(--sombra);
}
.blog-item img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
}
.bi-corpo{ padding:14px; display:grid; gap:5px; }
.bi-categoria{
  font-size:.68rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--rosa);
}
.bi-corpo strong{
  font-family:var(--fonte-titulo); font-size:1.06rem; line-height:1.32;
}
.bi-corpo .texto-2{ line-height:1.5; }

/* Artigo */
.artigo{ padding-bottom:calc(var(--barra-h) + 30px); }
.art-capa{
  width:calc(100% + 28px); margin-inline:-14px;
  aspect-ratio:16/9; object-fit:cover;
}
.art-topo{ display:grid; gap:6px; }
.art-categoria{
  justify-self:start;
  padding:5px 12px; border-radius:12px;
  background:var(--rosa-suave); color:var(--vermelho);
  font-size:.72rem; font-weight:700;
}
.art-topo h1{ margin:0; font-size:1.5rem; line-height:1.25; }
.art-topo p{ margin:0; }

.art-resumo{
  margin:0; padding:14px 16px;
  background:var(--cartao-2); border-left:4px solid var(--rosa);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:1rem; line-height:1.6; color:var(--texto);
}

.art-corpo{ line-height:1.75; font-size:1rem; }
.art-corpo h2{ margin:26px 0 10px; font-size:1.2rem; }
.art-corpo h3{ margin:20px 0 8px; font-size:1.05rem; }
.art-corpo p{ margin:0 0 15px; }
.art-corpo ul, .art-corpo ol{ margin:0 0 15px; padding-left:20px; }
.art-corpo li{ margin-bottom:7px; }
.art-corpo img{ border-radius:var(--r-m); margin:14px 0; }
.art-corpo blockquote{
  margin:16px 0; padding:12px 16px;
  background:var(--cartao); border-left:4px solid var(--laranja);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-style:italic;
}
.art-corpo a{ text-decoration:underline; }

.art-cta{
  margin:26px 0 20px;
  padding:22px 18px;
  background:linear-gradient(135deg, rgba(255,45,111,.1), rgba(255,138,61,.12));
  border:1px solid rgba(255,45,111,.28);
  border-radius:var(--r-l);
  text-align:center; display:grid; gap:8px; justify-items:center;
}
.art-cta strong{ font-family:var(--fonte-titulo); font-size:1.12rem; }
.art-cta p{ margin:0; }
.art-cta .botao{ margin-top:6px; }


.etiqueta-ia{
  display:inline-block;
  padding:2px 7px; border-radius:8px;
  background:var(--escuro); color:var(--texto-claro);
  font-size:.6rem; font-weight:700; letter-spacing:.06em;
  vertical-align:middle;
}
.ia-avatar{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--grad-diag); color:var(--texto-grad);
  font-family:var(--fonte-titulo); font-weight:700; font-size:1.2rem;
}
.ia-aviso{
  padding:11px 14px;
  background:var(--escuro); color:var(--texto-claro);
  font-size:.78rem; line-height:1.5;
}
.ia-aviso-cartao{ border-radius:var(--r-m); }

/* ---------------- LANDING (anuncios) ---------------- */

/* A pagina usa shell=false para tirar o menu (ver router.php), mas
   esse modo poe .conteudo com overflow:hidden — certo para um
   formulario curto (entrar/registo), errado aqui: a pagina e comprida
   e sem isto ficava cortada no fim do 1o ecra, sem forma de a rolar.
   Isto devolve o scroll normal so nesta rota. */
body[data-rota="/landing"] .conteudo{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:0;
}

.lp{ display:flex; flex-direction:column; }

/* ---- Capa: a foto inteira de fundo, cabecalho e texto por cima ----
   .lp-capa-foto e .lp-capa-escurecer ficam posicionados absolutos
   (inset:0) — por isso .lp-topo e .lp-capa-texto precisam de
   position:relative + z-index:1, senao um elemento absoluto pinta
   sempre por cima de um estatico, mesmo vindo antes no HTML. */
.lp-capa{
  position:relative;
  min-height:min(680px, 92svh);
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--grad-diag);   /* cor de fundo enquanto nao ha foto */
}
.lp-capa-foto{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.lp-capa-escurecer{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(17,27,33,.7) 0%, rgba(17,27,33,.05) 28%,
    rgba(17,27,33,.1) 48%, rgba(17,27,33,.88) 78%, rgba(17,27,33,.96) 100%);
}

.lp-topo{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 0;
}
.lp-marca{
  display:flex; align-items:center; gap:8px;
  font-family:var(--fonte-titulo); font-weight:700; font-size:1.1rem;
  color:var(--texto-claro);
}
.lp-marca .lp-pt{ color:#FF8FB2; }
.lp-entrar{ font-size:.8rem; color:rgba(239,234,226,.72); font-weight:600; }

.lp-capa-texto{
  position:relative; z-index:1;
  margin-top:auto;
  padding:24px 16px 30px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
}

.lp-selo{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,45,111,.24);
  color:#FF9EB8;
  font-size:.74rem; font-weight:700;
}
.lp-capa-texto h1{ font-size:1.7rem; line-height:1.22; color:var(--texto-claro); }
.lp-sub{ color:rgba(239,234,226,.78); font-size:.94rem; max-width:34ch; }
.lp-cta{ max-width:340px; }
.lp-micro{ margin:0; font-size:.76rem; color:rgba(239,234,226,.6); }
.lp-prova{ margin-top:2px; }
.lp-prova strong{ color:var(--texto-claro); }

/* ---- Corpo: resto das seccoes, com margens normais ---- */
.lp-corpo{ display:flex; flex-direction:column; gap:28px; padding:26px 16px 10px; }

.lp-seccao h2{ text-align:center; margin-bottom:14px; }

.lp-intencoes{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.lp-intencao{
  display:flex; align-items:center; gap:9px;
  padding:13px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m);
  color:var(--texto); font-weight:600; font-size:.88rem;
}
.lp-intencao-ico{ font-size:19px; }

.lp-numero{
  text-align:center;
  padding:18px;
  border-radius:var(--r-m);
  background:var(--grad);
  color:var(--texto-grad);
  display:flex; flex-direction:column; gap:2px;
}
.lp-numero strong{ font-size:1.6rem; font-family:var(--fonte-titulo); }
.lp-numero span{ font-size:.82rem; opacity:.92; }

.lp-passos{ display:grid; gap:12px; }
.lp-passo{
  display:grid; grid-template-columns:38px 1fr; gap:3px 12px;
  align-items:center;
  padding:13px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-m);
}
.lp-passo-n{
  grid-row:span 2;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:var(--grad-diag); color:var(--texto-grad);
  font-weight:700; font-family:var(--fonte-titulo);
}
.lp-passo strong{ font-size:.92rem; }
.lp-passo p{ margin:0; font-size:.8rem; }

.lp-cta-final{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:22px 16px;
  border-radius:var(--r-l);
  background:var(--fundo-alt);
  border:1px solid var(--borda);
}
.lp-cta-final h2{ margin:0; }

.lp-rodape{
  text-align:center;
  padding-top:14px; border-top:1px solid var(--borda);
  display:flex; flex-direction:column; gap:8px;
}
.lp-rodape-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; }
.lp-rodape-links a{ color:var(--texto-2); font-size:.78rem; }
.lp-rodape p{ margin:0; font-size:.72rem; color:var(--texto-2); }

/* ---------------- LANDING — tema escuro no corpo ----------------
   O mockup que o dono mostrou era escuro. A capa (foto) ja e escura
   por si (ver .lp-capa-escurecer) — isto pinta o RESTO da pagina a
   condizer, so na rota /landing (via data-rota, escrito por
   _topo.php em todo o body) — nao mexe no tema claro do resto da app. */
body[data-rota="/landing"] .app{ background:var(--escuro-2); }
body[data-rota="/landing"] .lp-corpo{ color:var(--texto-claro); }
body[data-rota="/landing"] .lp-corpo h2{ color:var(--texto-claro); }
body[data-rota="/landing"] .lp-corpo .texto-2{ color:rgba(239,234,226,.62); }
body[data-rota="/landing"] .lp-intencao,
body[data-rota="/landing"] .lp-passo,
body[data-rota="/landing"] .confianca .conf-item,
body[data-rota="/landing"] .lp-cta-final{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
body[data-rota="/landing"] .lp-intencao,
body[data-rota="/landing"] .conf-item strong,
body[data-rota="/landing"] .lp-passo strong{ color:var(--texto-claro); }
body[data-rota="/landing"] .conf-item > span{ background:rgba(255,255,255,.14); color:#FF9EB8; }
body[data-rota="/landing"] .lp-rodape{ border-color:rgba(255,255,255,.14); }
body[data-rota="/landing"] .lp-rodape-links a{ color:rgba(239,234,226,.55); }
body[data-rota="/landing"] .lp-rodape p{ color:rgba(239,234,226,.4); }