/* Entrar / criar conta: tela dividida, arte à esquerda e formulário escuro à direita */
.dividida { min-height: 100svh; display: grid; }
@media (min-width: 900px) { .dividida { grid-template-columns: 1fr 1fr; } }

.lado-arte { position: relative; overflow: hidden; min-height: 180px; display: grid; align-content: end; padding: 32px; }
.lado-arte picture, .lado-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lado-arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 11, 8, .92) 0%, rgba(14, 11, 8, .2) 55%, rgba(14, 11, 8, .05)); }
.arte-texto, .copy { position: relative; z-index: 1; }
.versiculo { font: 600 26px/1.3 var(--serifa); max-width: 460px; text-wrap: balance; }
.ref { margin-top: 8px; color: var(--ouro-claro); font-weight: 600; font-size: 14px; }
.copy { margin-top: 32px; font-size: 12px; color: var(--fraco); }
@media (max-width: 899px) { .lado-arte { min-height: 200px; padding: 24px var(--lateral); } .versiculo { font-size: 18px; } .copy { display: none; } }

.lado-form { background: #141414; display: grid; place-items: center; padding: 48px var(--lateral); }
@media (min-width: 900px) { .lado-form { background: #161310; } }
.caixa { width: 100%; max-width: 400px; }
.marca.grande { display: block; text-align: center; font-size: 26px; margin-bottom: 32px; }

.abas { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 28px; border-bottom: 1px solid var(--linha); }
.abas button { position: relative; height: 48px; background: none; border: 0; color: var(--fraco); font-weight: 600; font-size: 15px; cursor: pointer; transition: color .16s; }
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--ouro-claro); }
.abas button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ouro); border-radius: 2px; }

.form { display: grid; gap: 18px; }
.form[hidden], .aviso[hidden] { display: none; }
.form-titulo { font: 600 24px/1.2 var(--serifa); text-align: center; }
.form-apoio { color: var(--apoio); text-align: center; font-size: 15px; margin-top: -6px; }
.campo { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--apoio); }
.campo small { font-weight: 400; font-size: 12px; color: var(--fraco); }
.campo input { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(245, 239, 228, .12); background: #0d0b09; color: var(--texto); font-size: 16px; transition: border-color .16s, box-shadow .16s; }
.campo input:hover { border-color: rgba(245, 239, 228, .22); }
.campo input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.com-ddi { display: flex; border-radius: 12px; }
.com-ddi .ddi { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid rgba(245, 239, 228, .12); border-right: 0; border-radius: 12px 0 0 12px; background: #1b1814; color: var(--texto); font-weight: 600; font-size: 15px; }
.com-ddi input { border-radius: 0 12px 12px 0; }
.com-olho { position: relative; display: block; }
.com-olho input { padding-right: 52px; }
.olho { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent no-repeat center / 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); cursor: pointer; transition: background-color .16s; }
.olho:hover { background-color: rgba(245, 239, 228, .06); }
.olho[aria-pressed="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a24c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }

.link-sutil { justify-self: end; margin-top: -8px; background: none; border: 0; color: var(--ouro-claro); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .16s; }
.link-sutil:hover { text-decoration-color: currentColor; }
.link-sutil.centro { justify-self: center; margin-top: 0; }
.msg { font-size: 14px; padding: 12px 14px; border-radius: 10px; }
.msg.erro { color: #ffd2c9; background: rgba(232, 128, 111, .12); border: 1px solid rgba(232, 128, 111, .3); }
.msg.ok { color: #d3f1df; background: rgba(111, 191, 142, .12); border: 1px solid rgba(111, 191, 142, .3); }

.aceite { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 12px; background: rgba(245, 239, 228, .04); border: 1px solid var(--linha); font-size: 14px; line-height: 1.5; color: var(--apoio); cursor: pointer; transition: border-color .16s, background .16s; }
.aceite:hover { border-color: rgba(212, 162, 76, .35); }
.aceite:has(input:checked) { border-color: rgba(212, 162, 76, .5); background: var(--ouro-fundo); color: var(--texto); }
.aceite input { appearance: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(245, 239, 228, .3); background: #0d0b09; cursor: pointer; transition: background .16s, border-color .16s; }
.aceite input:checked { border-color: var(--ouro); background: var(--ouro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1308' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.aceite input:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.legal { font-size: 12px; color: var(--fraco); text-align: center; }
.legal a { color: var(--apoio); }

.aviso { display: grid; gap: 16px; justify-items: center; text-align: center; }
.aviso-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro-fundo); color: var(--ouro-claro); }
.aviso-icone svg { width: 28px; height: 28px; }
.aceite a { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: 2px; }
.aceite.invalido { border-color: rgba(224, 122, 106, .7); }