/* Deliza — entrar / cadastro do lojista (marca v3: goiaba neon sobre branco, ver marca/BRAND.md)
   Layout split: formulário à esquerda, painel de marketing à direita (no celular ele desce pra baixo do form). */
:root {
  --branco: #FFFFFF; --nevoa: #FFF0F4; --goiaba-claro: #FFD6E0; --goiaba-suave: #FF8FB1;
  --goiaba: #FF2E63; --goiaba-forte: #FF1744; --tinta: #241A1B; --tinta-suave: #8C7A7C;
  --ok: #2E9E5B; --aviso: #D98A00; --erro: #A51C30;
  --brilho: 0 0 18px rgba(255, 46, 99, .45), 0 0 46px rgba(255, 23, 68, .22);
  --r-pires: 14px; --r-pill: 999px;
  --desliza: cubic-bezier(.22, 1, .36, 1); --babei: cubic-bezier(.34, 1.56, .64, 1);
  --display: 'Sora', system-ui, sans-serif; --texto: 'Manrope', system-ui, sans-serif;
  --linha: #F3E3E7;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--branco); color: var(--tinta); }
body { font: 300 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -.03em; }
p { margin: 0; }
a { color: var(--goiaba-forte); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* wordmark: deliza + ponto goiaba */
.wordmark { font: 800 26px/1 var(--display); letter-spacing: -.05em; color: var(--tinta); display: inline-flex; align-items: baseline; }
.wordmark:hover { text-decoration: none; }
.wordmark i { font-style: normal; color: var(--goiaba); text-shadow: 0 0 14px rgba(255, 46, 99, .55); }
.wordmark.claro { color: #fff; }
.wordmark.claro i { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .7); }

/* ---------- split ---------- */
.tela { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .tela { grid-template-columns: minmax(460px, 46fr) 54fr; height: 100vh; height: 100dvh; }
  .lado-form { overflow-y: auto; }
}

/* ---------- lado do formulário ---------- */
.lado-form { display: flex; flex-direction: column; padding: calc(22px + env(safe-area-inset-top)) 16px 28px; }
@media (min-width: 600px) { .lado-form { padding: 32px 48px; } }
.form-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-topo .voltar-site { font-size: 14px; font-weight: 600; color: var(--tinta-suave); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.form-topo .voltar-site:hover { color: var(--goiaba-forte); text-decoration: none; }

.form-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0 32px; }
.caixa { width: 100%; max-width: 400px; }
.caixa h1 { font-size: clamp(28px, 4vw, 34px); line-height: 1.12; margin-bottom: 8px; }
.sub { color: var(--tinta-suave); font-size: 16px; margin-bottom: 26px; }
.sub b { color: var(--tinta); font-weight: 600; word-break: break-all; }

.etapa[hidden] { display: none; }
/* entrada só com deslize, sem opacidade: se o navegador não rodar a animação (WebView em segundo plano,
   economia de bateria) o conteúdo continua visível em vez de ficar preso no quadro inicial invisível */
.etapa { animation: entra .5s var(--desliza); }
@keyframes entra { from { transform: translateY(8px); } }

/* abas Entrar / Criar conta (são links entre as duas páginas) */
.abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 26px;
  background: var(--nevoa); border: 1px solid var(--goiaba-claro); border-radius: var(--r-pill); }
.abas a { position: relative; z-index: 1; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; color: var(--tinta-suave); transition: color .25s; }
.abas a:hover { text-decoration: none; color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); }
.abas .pilula { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill);
  background: #fff; box-shadow: 0 2px 10px -2px rgba(255, 23, 68, .25), 0 0 0 1px var(--goiaba-claro); transition: transform .45s var(--desliza); }
.abas[data-aba="cadastro"] .pilula { transform: translateX(100%); }

/* campos */
.campo { display: block; margin-bottom: 16px; }
.campo > span { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.entrada { position: relative; }
.entrada svg.ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--tinta-suave);
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .2s; }
.entrada:focus-within svg.ico { stroke: var(--goiaba); }
.entrada input { width: 100%; height: 50px; padding: 0 16px 0 44px; border: 1.5px solid var(--linha); border-radius: var(--r-pires);
  background: #fff; font-size: 15px; font-weight: 500; outline: none; transition: border-color .2s, box-shadow .25s; }
.entrada input::placeholder { color: #BCAAAD; font-weight: 400; }
.entrada input:hover { border-color: var(--goiaba-claro); }
.entrada input:focus { border-color: var(--goiaba); box-shadow: 0 0 0 4px rgba(255, 46, 99, .14); }
.entrada input[aria-invalid="true"] { border-color: var(--erro); }

.senha-box input { padding-right: 50px; }
.olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none;
  border-radius: 10px; display: grid; place-items: center; color: var(--tinta-suave); }
.olho:hover { background: var(--nevoa); color: var(--goiaba-forte); }
.olho svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.olho .fechado { display: none; }
.olho.vendo .aberto { display: none; }
.olho.vendo .fechado { display: block; }

.forca { display: flex; gap: 5px; margin-top: 9px; }
.forca i { flex: 1; height: 4px; border-radius: 4px; background: var(--linha); transition: background .3s; }
.forca[data-n="1"] i:nth-child(-n+1) { background: var(--erro); }
.forca[data-n="2"] i:nth-child(-n+2) { background: var(--aviso); }
.forca[data-n="3"] i { background: var(--ok); }

.linha-acoes { display: flex; justify-content: flex-end; margin: -8px 0 18px; }
.linha-acoes button, .link { border: 0; background: none; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--goiaba-forte); }
.linha-acoes button:hover, .link:hover { text-decoration: underline; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--goiaba-claro); border-radius: 6px;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.check input:checked { background: var(--goiaba-forte); border-color: var(--goiaba-forte); }
.check input:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check input:focus-visible { box-shadow: 0 0 0 4px rgba(255, 46, 99, .18); outline: none; }

/* botões */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; padding: 0 22px;
  border-radius: var(--r-pill); border: 0; font: 700 15px/1 var(--texto); cursor: pointer;
  background: var(--goiaba-forte); color: #fff; box-shadow: var(--brilho);
  transition: transform .25s var(--desliza), background .2s, box-shadow .25s; }
.btn:hover { background: var(--goiaba); transform: translateY(-1px); box-shadow: 0 0 22px rgba(255, 46, 99, .6), 0 0 60px rgba(255, 23, 68, .3); }
.btn:active { transform: scale(.98); }
.btn[disabled] { background: var(--goiaba-suave); box-shadow: none; cursor: progress; transform: none; }
.btn .gira { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.voltar { border: 0; background: none; padding: 0; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--tinta-suave); transition: color .2s; }
.voltar:hover { color: var(--goiaba-forte); }

/* mensagens da API */
.erro { display: none; margin-bottom: 18px; padding: 11px 14px; border-radius: 12px; background: #FDECEF; border: 1px solid #F8CED6;
  color: var(--erro); font-size: 14px; font-weight: 600; line-height: 1.45; }
.erro.mostra { display: block; animation: entra .3s var(--desliza); }
.erro a { color: inherit; text-decoration: underline; }
.erro.ok-msg { background: #E9F6EE; border-color: #C9E8D5; color: #1F7443; }

.rodape { margin-top: 26px; text-align: center; font-size: 14px; font-weight: 500; color: var(--tinta-suave); }
.rodape a { font-weight: 700; }

/* código de 6 dígitos */
.codigo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 4px 0 8px; }
.codigo input { width: 100%; aspect-ratio: 1 / 1.15; max-height: 62px; padding: 0; text-align: center; font: 800 24px/1 var(--display);
  border: 1.5px solid var(--linha); border-radius: var(--r-pires); background: #fff; outline: none; caret-color: var(--goiaba);
  transition: border-color .2s, box-shadow .25s, transform .15s; }
.codigo input:focus { border-color: var(--goiaba); box-shadow: 0 0 0 4px rgba(255, 46, 99, .14); }
.codigo input.cheio { border-color: var(--goiaba-suave); background: var(--nevoa); }
.codigo.treme { animation: treme .35s; }
.codigo.treme input { border-color: var(--erro); }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.reenviar { margin: 8px 0 22px; font-size: 14px; font-weight: 500; color: var(--tinta-suave); }
.reenviar button { border: 0; background: none; padding: 0; color: var(--goiaba-forte); font-weight: 700; }
.reenviar button[disabled] { color: var(--tinta-suave); font-weight: 500; cursor: default; }

.form-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 12.5px; font-weight: 500; color: var(--tinta-suave); }
.form-rodape nav { display: flex; gap: 16px; }
.form-rodape a { color: inherit; font-weight: 500; }
.form-rodape a:hover { color: var(--goiaba-forte); text-decoration: none; }

@media (max-width: 360px) { .codigo { gap: 6px; } }

/* ---------- lado do marketing ---------- */
.lado-mkt { position: relative; overflow: hidden; margin: 0 10px 10px; border-radius: 28px; color: #fff; isolation: isolate;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(255, 143, 177, .55), transparent 60%),
    radial-gradient(70% 55% at 0% 100%, rgba(165, 28, 48, .55), transparent 65%),
    linear-gradient(155deg, #FF4A78 0%, var(--goiaba) 38%, var(--goiaba-forte) 100%);
  padding: 34px 22px 0; display: flex; flex-direction: column; }
@media (min-width: 980px) { .lado-mkt { margin: 10px 10px 10px 0; padding: 44px 52px 0; } }
.lado-mkt::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 80% at 70% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 80% at 70% 30%, #000 20%, transparent 75%); }

.mkt-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 979px) { .mkt-topo .wordmark { display: none; } }
.selo { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; }
.selo svg { width: 13px; height: 13px; fill: #fff; }

.mkt-txt { margin-top: 34px; max-width: 560px; }
.mkt-txt h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.mkt-txt h2 span { color: rgba(255, 255, 255, .72); }
.mkt-txt h2 em { font-style: normal; display: block; color: #fff; text-shadow: 0 0 34px rgba(255, 255, 255, .5); }
.mkt-txt p { margin-top: 16px; font-size: 17px; font-weight: 400; max-width: 30em; color: rgba(255, 255, 255, .88); text-wrap: pretty; }

.beneficios { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 560px; }
@media (min-width: 600px) { .beneficios { grid-template-columns: 1fr 1fr; } }
.beneficios li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.beneficios .ic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: #fff; display: grid; place-items: center; }
.beneficios .ic svg { width: 18px; height: 18px; stroke: var(--goiaba-forte); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.beneficios b { display: block; font: 700 14.5px/1.3 var(--display); letter-spacing: -.01em; }
.beneficios span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .82); }

/* palco: celular com o feed + cards flutuando (ilustração do produto) */
.palco { position: relative; flex: 1; min-height: 440px; margin-top: 30px; display: flex; justify-content: center; align-items: flex-end; }
.fone { position: relative; width: 250px; height: 430px; border-radius: 42px 42px 0 0; overflow: hidden; background: #120708;
  border: 7px solid #1C1012; border-bottom: 0; box-shadow: 0 40px 80px -20px rgba(90, 0, 20, .7), 0 0 0 1px rgba(255, 255, 255, .18); }
@media (min-width: 980px) { .fone { width: 270px; height: 470px; } }
.fone-notch { position: absolute; z-index: 5; top: 8px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 20px; background: #000; }
.trilho { position: absolute; inset: 0; animation: desliza 10s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes desliza { 0%, 40% { transform: translateY(0); } 50%, 90% { transform: translateY(-100%); } 100% { transform: translateY(-200%); } }
.slide { position: relative; height: 100%; overflow: hidden; }
.s-pizza { background: radial-gradient(120% 70% at 50% 38%, #5A2618, #1B0C08 75%); }
.s-burger { background: radial-gradient(120% 70% at 50% 38%, #5B3A12, #1A1006 75%); }
.prato { position: absolute; left: 50%; top: 34%; width: 92%; transform: translate(-50%, -50%); }
.gira-prato { transform-origin: 150px 160px; animation: gira 22s linear infinite; }
.vapor path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 4; stroke-linecap: round; animation: vapor 3s ease-in-out infinite; }
.vapor path:nth-child(2) { animation-delay: .6s; } .vapor path:nth-child(3) { animation-delay: 1.2s; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(14px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.feed-topo { position: absolute; z-index: 4; top: 40px; left: 14px; right: 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.feed-topo .av { width: 22px; height: 22px; border-radius: 50%; background: var(--goiaba); display: grid; place-items: center; font: 800 10px/1 var(--display); }
.feed-topo b { margin-left: auto; font-size: 10.5px; font-weight: 600; background: rgba(255, 255, 255, .16); padding: 3px 9px; border-radius: 999px; }
.slide-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 58px 22px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .78) 45%); }
.slide-info .cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--goiaba-suave); }
.slide-info h3 { font-size: 16px; margin: 6px 0 3px; letter-spacing: -.02em; }
.slide-info p { font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .78); font-weight: 500; }
.pedir { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pedir span { background: var(--goiaba-forte); color: #fff; font-weight: 700; font-size: 11.5px; padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 14px rgba(255, 46, 99, .6); }
.acoes { position: absolute; z-index: 4; right: 9px; bottom: 100px; display: flex; flex-direction: column; gap: 14px; }
.acoes span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; }
.acoes svg { width: 26px; height: 26px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.acoes span:first-child svg { fill: var(--goiaba); animation: babei 3.4s var(--babei) infinite; }
@keyframes babei { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.3); } }

.card { position: absolute; z-index: 6; background: #fff; color: var(--tinta); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 22px 44px -16px rgba(90, 0, 20, .55), 0 0 0 1px rgba(255, 255, 255, .6); animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-8px); } }
.card small { display: block; font-size: 11px; font-weight: 600; color: var(--tinta-suave); }
.card strong { display: block; white-space: nowrap; font: 700 13.5px/1.3 var(--display); letter-spacing: -.01em; }
.card-pedido { left: 0; top: 14px; width: 272px; display: flex; gap: 11px; align-items: center; }
.card-pedido .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--nevoa); display: grid; place-items: center; position: relative; }
.card-pedido .ic svg { width: 20px; height: 20px; stroke: var(--goiaba-forte); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-pedido .ic::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--goiaba);
  border: 2px solid #fff; animation: pulsa 1.6s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 99, .6); } 100% { box-shadow: 0 0 0 9px rgba(255, 46, 99, 0); } }
.card-pedido em { margin-left: auto; white-space: nowrap; font-style: normal; font: 800 13px/1 var(--display); color: var(--goiaba-forte); }
.card-ia { display: flex; align-items: center; gap: 10px; animation-delay: -3s; }
.card-ia .mini { flex: none; width: 34px; height: 34px; border-radius: 10px; background: radial-gradient(circle at 40% 40%, #F7E6BC 0 18%, #C8321F 19% 46%, #D9963F 47% 62%, #2A1410 63%); }
.card-ia .mini.v { position: relative; background: #1B0C08; display: grid; place-items: center; }
.card-ia .mini.v::after { content: ''; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.card-ia .seta { color: var(--goiaba); font-weight: 800; }

/* celular / tablet: palco centrado, cards por cima */
@media (max-width: 979px) {
  .card-pedido { left: 50%; margin-left: -228px; }
  .card-ia { right: 50%; margin-right: -230px; bottom: 120px; }
}
@media (max-width: 560px) {
  .palco { min-height: 430px; margin-top: 26px; }
  .card { padding: 10px 12px; }
  .card-pedido { left: 0; margin-left: 0; top: 0; width: auto; max-width: 100%; }
  .card-ia { display: none; }
  .fone { width: 240px; height: 410px; }
}

/* desktop: palco preenche o resto, celular ancorado embaixo e encolhe em tela baixa (ver --k no auth-vitrine) */
@media (min-width: 980px) {
  .palco { min-height: 0; margin-top: 26px; }
  .fone { position: absolute; right: 6%; bottom: 0; transform: scale(var(--k, 1)); transform-origin: bottom right; }
  .card-ia { left: 34px; top: 104px; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  .card-ia { display: none; }
  .fone { right: 50%; transform: translateX(50%) scale(var(--k, 1)); transform-origin: bottom center; }
}
@media (min-width: 980px) and (max-height: 1000px) {
  .beneficios span { display: none; }
  .beneficios li { align-items: center; padding: 10px 12px; }
  .mkt-txt { margin-top: 28px; }
  .mkt-txt p { font-size: 16px; }
  .mkt-txt h2 { font-size: clamp(30px, 3vw, 42px); }
}
@media (min-width: 980px) and (max-height: 780px) {
  .mkt-txt p { display: none; }
}

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