/* Página /elo (13/10): mesmos componentes da home (passos numerados, abas de tema, balão, botões).
   Prévia da arte à esquerda no desktop, passos à direita; no celular, prévia em cima. */
.elo-fluxo{padding-top:clamp(16px,2.4vw,32px)}
.elo-grade{display:grid;gap:clamp(24px,4vw,64px);align-items:start;justify-self:center;width:min(1040px,100%)}
.elo-grade>*{min-width:0}
@media (min-width:860px){.elo-grade{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.elo-previa{position:sticky;top:calc(var(--topo) + 16px)}}

/* Prévia: moldura com a mesma sombra dura dos cartões; o canvas segue o formato escolhido */
.elo-previa{display:grid;justify-items:center;gap:12px;margin:0}
.elo-formatos{width:auto;margin:0;padding:0;-webkit-mask-image:none;mask-image:none;overflow:visible}
.elo-moldura{width:min(400px,100%);border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:5px 6px 0 var(--tinta);overflow:hidden;line-height:0}
.elo-moldura[data-formato-atual=story]{width:min(300px,78%)}
.elo-moldura canvas{display:block;width:100%;height:auto}
.elo-legenda{margin:0;font:600 15px/1.35 var(--texto);color:var(--tinta-2);text-align:center}

/* Passos: os da home ("Mostre seu elo"), com o título em h2 e as ações dentro de cada passo */
.elo-passos{grid-area:auto;gap:clamp(22px,3vw,34px)} /* a home põe .passos na 2ª coluna no celular; aqui não */
.elo-passos li{grid-template-columns:auto minmax(0,1fr)}
.elo-passos h2{margin:2px 0 4px;font:900 clamp(20px,1.9vw,28px)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.elo-passos li>div{display:grid;gap:10px;justify-items:start;min-width:0}
.elo-passos p{margin:0}
.elo-entrar{width:min(380px,100%);font-size:clamp(17px,5.2vw,28px);white-space:normal;text-align:center}
/* E-mail (13/10): campo no mesmo traço dos botões; aviso de uso logo abaixo */
.elo-rotulo{margin:6px 0 0!important;font:800 15px/1.2 var(--texto)!important}
.elo-rotulo span{font-weight:600;color:var(--tinta-2)}
.elo-email{width:min(380px,100%);min-height:48px;padding:0 16px;border:2.5px solid var(--tinta);border-radius:var(--raio-p);background:#fff;font:600 17px/1 var(--texto);color:var(--tinta)}
.elo-email:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.elo-email[aria-invalid=true]{border-color:var(--vermelho,#d00)}
.elo-aviso{max-width:46ch;font:500 14px/1.4 var(--texto)!important;color:var(--tinta-2)}
.elo-status{min-height:1.2em;font:600 15px/1.35 var(--texto)!important;color:var(--tinta-2)}
.elo-status:empty{display:none}

/* Botões que a home não tinha: claro (borda) e tinta (fundo preto), no mesmo formato dos outros */
.btn-tinta,.btn-claro,.elo-foto-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.15em;border:2.5px solid var(--tinta);border-radius:999px;font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-claro,.elo-foto-btn{background:#fff;color:var(--tinta)}
.elo-foto-btn{position:relative;box-shadow:0 3px 0 var(--tinta)}
.elo-foto-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.elo-foto-btn:focus-within{outline:3px solid var(--azul);outline-offset:4px}
:is(.btn-tinta,.btn-claro,.btn-insta,.btn-zap):disabled{opacity:.45;cursor:not-allowed}

/* Recorte: foto quadrada com o círculo do perfil marcado */
.recorte{display:grid;gap:6px;width:min(340px,100%)}
.recorte[hidden]{display:none}
.recorte-palco{position:relative;width:min(240px,100%);aspect-ratio:1;border:2.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden;touch-action:none;background:var(--cinza)}
.recorte-palco::after{content:'';position:absolute;inset:6%;border:3px dashed rgba(255,255,255,.9);border-radius:50%;pointer-events:none}
.recorte-palco canvas{display:block;width:100%;max-width:100%;height:100%;cursor:grab}
.recorte label{font:700 14px/1.2 var(--texto)}
.recorte input[type=range]{width:100%;min-height:32px;accent-color:var(--azul)}

/* Chama 3: a mensagem no balão do WhatsApp e os três toques */
.elo-mensagem{align-self:auto;max-width:min(560px,100%);font-size:16px}
.elo-chama-botoes{flex-direction:column;align-items:stretch;width:min(320px,100%)} /* os três elos em coluna e o Copiar embaixo */
.elo-chama-botoes .btn-zap.enviado{background:#fff}

/* Foto de perfil: prévia redonda, como aparece no Instagram */
.elo-perfil-in{display:grid;justify-items:center;gap:12px}
.elo-perfil-in canvas{width:min(220px,60vw);height:auto;aspect-ratio:1;border:3px solid var(--tinta);border-radius:50%;box-shadow:4px 5px 0 var(--tinta);background:#fff}

.elo-privacidade{width:min(720px,100%);padding:14px 18px;border:2px solid var(--linha);border-radius:var(--raio);background:#fff}
.elo-privacidade summary{min-height:32px;font:800 16px/1.3 var(--texto);cursor:pointer}
.elo-privacidade p{margin:10px 0 0;font:500 15px/1.5 var(--texto)}

/* Turnstile (Cloudflare): só aparece quando pede interação; fica visível em cima de tudo */
.turnstile-caixa{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;translate:-50% 0}
#passo-entrar{scroll-margin-top:calc(var(--topo) + 16px)}
[data-recorte-abrir][hidden]{display:none}

/* iPad e desktop (13/10, regra do Thiago): cada seção cabe na altura útil da tela (janela menos o topo fixo).
   Prévia e passos lado a lado já a partir de 700 px; o tamanho da prévia acompanha a altura da tela; no passo 1,
   e-mail e foto ficam em duas colunas quando os passos têm largura para isso. Densidade contínua pela altura (svh),
   as mesmas variáveis da home (--pv, --vao, --tfs). */
.elo-campo{display:grid;gap:10px;justify-items:start;align-content:start;min-width:0}
@media (min-width:700px) and (min-height:521px){
  html[data-pagina=elo]{--u:calc(100svh - var(--topo));--pv:clamp(14px,min(5vw,3.5svh),72px);--vao:clamp(7px,1.5svh,18px);--tfs:clamp(26px,min(5.4vw,6.4svh),72px)}
  html[data-pagina=elo] .bloco{padding-block:var(--pv);gap:var(--vao)}
  html[data-pagina=elo] .bloco .titulo-caixa{font-size:var(--tfs)}
  html[data-pagina=elo] .bloco .bloco-sub{font-size:clamp(14px,2.4svh,19px);line-height:1.3}
  .elo-fluxo{--prev:min(400px,28vw,calc((var(--u) - 2 * var(--pv) - 140px) * .8))}
  .elo-grade{grid-template-columns:var(--prev) minmax(0,1fr);gap:clamp(20px,3vw,64px)}
  .elo-previa{position:sticky;top:calc(var(--topo) + 16px);gap:clamp(6px,1.4svh,12px)}
  .elo-moldura{width:100%}
  .elo-moldura[data-formato-atual=story]{width:min(78%,calc((var(--u) - 2 * var(--pv) - 140px) * .5625))}
  .elo-legenda{font-size:clamp(12.5px,2.1svh,15px)}
  .elo-passos{gap:clamp(8px,2.1svh,34px);container-type:inline-size}
  .elo-passos li{gap:14px}
  .elo-passos b{width:clamp(32px,5.6svh,44px);height:clamp(32px,5.6svh,44px);font-size:clamp(16px,2.8svh,22px)}
  .elo-passos h2{font-size:clamp(17px,3.2svh,28px)}
  .elo-passos li>div,.elo-campo{gap:clamp(4px,1svh,10px)}
  .elo-passos li p:not(.elo-aviso):not(.elo-status){font-size:clamp(13.5px,1.9svh,17px);line-height:1.34}
  .elo-aviso{font-size:clamp(12.5px,2.1svh,14px)!important;line-height:1.3!important}
  .elo-rotulo{margin-top:2px!important}
  .elo-email{min-height:clamp(42px,6svh,48px)}
  .elo-entrar{min-height:clamp(44px,8svh,58px);font-size:clamp(17px,min(5.2vw,3.6svh),28px)}
  .btn-tinta,.btn-claro,.elo-foto-btn{min-height:clamp(42px,6.4svh,48px)}
  .elo-perfil-in{gap:clamp(6px,1.4svh,12px)}
  .elo-perfil-in canvas{width:min(220px,60vw,calc(var(--u) * .27))}
  .elo-mensagem{font-size:clamp(14px,2.3svh,16px)}
  /* Passo 3: "Copiar legenda e baixar imagem" quebra em duas linhas dentro do botão, ao lado de Compartilhar */
  .elo-passos [data-baixar]{flex:1 1 0;min-width:0;white-space:normal;line-height:1.1;font-size:.85rem;text-align:center;padding-inline:.7em}
  .elo-passos li:last-child .acoes{flex-wrap:nowrap;width:100%}
}
@container (min-width:380px){
  .elo-passos li:first-child>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}
  .elo-passos li:first-child>div>h2{grid-column:1/-1}
}
/* Fim do passo 1 (14/10): o "Entrar na corrente" pulsa duas vezes quando a foto fica pronta */
.elo-entrar.chamando{animation:elo-chamar .7s ease-in-out 2}
@keyframes elo-chamar{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(237,28,36,.35)}}
@media (prefers-reduced-motion:reduce){.elo-entrar.chamando{animation:none;outline:3px solid #ffd400;outline-offset:3px}}