/* Página do hotspot (tela que abre ao conectar no WiFi), visual novo de 27/09.
   Usa os tokens do /comum/moderno.css; a cor da marca do cliente chega por --cor (definida pelo portal.js). */
:root { --cor: #1f4e79; --marca: var(--cor); }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.mono { font-family: ui-monospace, 'SF Mono', monospace; }
.fraco { color: var(--tinta-2); margin: 0; }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }

/* capa: degradê da marca + grão, logo em vidro, título em serifa */
.capa {
  position: relative; overflow: hidden; color: #fff; padding: 30px max(22px, calc((100% - 452px) / 2)) 76px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--cor) 50%, #fff) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--cor) 65%, #000) 0%, transparent 60%),
    var(--cor);
}
.capa::before {
  content: ''; position: absolute; width: 320px; height: 320px; right: -110px; top: -140px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 40px rgba(255, 255, 255, .05), 0 0 0 80px rgba(255, 255, 255, .03);
}
.capa::after {
  content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.capa > * { position: relative; z-index: 1; }
.logo {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; margin: 0 0 18px;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  font: 600 26px var(--titulo); color: #fff;
}
.logo img { width: 100%; height: 100%; object-fit: cover; }
.logo.com-imagem { background: #fff; }
.rotulo-capa { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.rotulo-capa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7dffb1; box-shadow: 0 0 0 4px rgba(125, 255, 177, .25); animation: brilho 2s ease-in-out infinite; }
@keyframes brilho { 50% { box-shadow: 0 0 0 7px rgba(125, 255, 177, .08); } }
.capa h1 { font: 600 clamp(30px, 8.5vw, 42px)/1.05 var(--titulo); letter-spacing: -.015em; margin: 12px 0 8px; }
.capa p { margin: 0; opacity: .9; font-size: 15.5px; max-width: 36ch; }

.conteudo { flex: 1; width: 100%; max-width: 480px; margin: -52px auto 0; padding: 0 14px 12px; display: grid; gap: 14px; align-content: start; position: relative; z-index: 2; }
.tela {
  background: var(--superficie); border-radius: 24px; box-shadow: var(--sombra); padding: 24px 20px; display: grid; gap: 16px;
  animation: m-entra .45s cubic-bezier(.2, .7, .2, 1) both;
}
.tela.centro { place-items: center; text-align: center; padding: 36px 20px; }
.tela h2 { font: 600 25px/1.15 var(--titulo); letter-spacing: -.01em; margin: 0; }

.campo { display: grid; gap: 7px; }
.campo > span { font-weight: 600; font-size: 14.5px; }
.campo small { color: var(--tinta-3); font-size: 13px; }
.entrada {
  width: 100%; min-height: 56px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--tinta);
  padding: 0 16px; font-size: 17px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.entrada:focus { border-color: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 14%, transparent); }
.entrada.com-erro { border-color: var(--falha); box-shadow: 0 0 0 4px var(--falha-fundo); }
select.entrada { appearance: none; }
.codigo { font: 600 32px var(--texto); letter-spacing: .45em; text-align: center; padding-left: .45em; }

.botao {
  min-height: 52px; border-radius: 16px; border: 0; padding: 0 20px; font-weight: 700; font-size: 16px; cursor: pointer;
  background: var(--superficie-2); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; transition: transform .12s, filter .15s;
}
.botao:active { transform: scale(.98); }
.botao:disabled { opacity: .55; }
.botao.grande { min-height: 58px; font-size: 17px; }
.botao.cheio { width: 100%; }
.botao.acao { background: var(--cor); color: #fff; box-shadow: 0 12px 24px -14px var(--cor); }
.botao.acao:hover { filter: brightness(1.07); }
.botao.amarelo { background: #ffd24a; color: #1d1b18; }
.link { background: none; border: 0; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; cursor: pointer; padding: 6px; justify-self: center; }
.marcar .link { padding: 0; display: inline; color: var(--tinta); }

.marcar { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); cursor: pointer; }
.marcar input {
  appearance: none; flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--linha); background: var(--superficie);
  display: grid; place-items: center; cursor: pointer; margin: 0; transition: background .15s, border-color .15s;
}
.marcar input:checked { background: var(--cor); border-color: var(--cor); }
.marcar input:checked::after { content: '✓'; color: #fff; font-weight: 800; font-size: 14px; }
.marcar em { font-style: normal; color: var(--tinta-3); }

.aviso { border-radius: 14px; padding: 14px 16px; background: var(--alerta-fundo); color: var(--tinta); font-size: 15px; display: flex; gap: 10px; }
.aviso.vermelho { background: var(--falha-fundo); color: var(--falha); }
.erro-campo { color: var(--falha); font-size: 14.5px; font-weight: 600; margin: 0; }
.esperando { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 14px; color: var(--tinta-2); margin: 0; }
.carregando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linha); border-top-color: var(--cor); animation: m-gira .8s linear infinite; display: inline-block; flex: none; }
.esperando .carregando { width: 16px; height: 16px; border-width: 2px; }
.carregando.grande { width: 48px; height: 48px; border-width: 4px; }

.pronto { display: flex; gap: 16px; align-items: center; }
.pronto > span {
  flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--ok-fundo); color: var(--ok); display: grid; place-items: center;
  font-size: 30px; font-weight: 800; animation: m-pulo .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.pronto h2 { margin: 0; }

/* blocos extras: oferta, senha, sorteio, redes */
.oferta, .bloco-senha, .bloco-sorteio, .bloco-redes { background: var(--superficie); border-radius: 24px; box-shadow: var(--sombra); padding: 20px; display: grid; gap: 10px; animation: m-entra .45s .08s both; }
.oferta { background: linear-gradient(160deg, #fff8e6, #ffefc4); color: #2a241a; }
.oferta .rotulo { color: #9a6b00; }
.oferta img { border-radius: 16px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.oferta h3, .bloco-senha h3, .bloco-sorteio h3, .bloco-redes h3 { font: 600 21px/1.15 var(--titulo); margin: 0; }
.oferta p { white-space: pre-line; margin: 0; }
.filas { display: grid; gap: 10px; }
.fila-botao {
  display: flex; justify-content: space-between; align-items: center; background: var(--superficie-2); border: 0; border-radius: 16px;
  padding: 16px 18px; cursor: pointer; text-align: left; font-weight: 700; font-size: 15.5px; color: var(--tinta);
}
.fila-botao small { font-size: 13px; color: var(--tinta-3); font-weight: 600; }
.minha-senha { background: #1d1b18; color: #f3efe8; border-radius: 20px; padding: 22px; text-align: center; }
.minha-senha b { display: block; font: 700 64px/1 var(--texto); color: #ffd24a; margin: 8px 0; letter-spacing: .02em; }
.chamada-sorteio { background: #1d1b18; color: #f3efe8; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; display: flex; gap: 10px; align-items: center; }
.chamada-sorteio b { color: #ffd24a; }
.bloco-sorteio { background: #1d1b18; color: #f3efe8; }
.bloco-sorteio .rotulo { color: #ffd24a; }
.bloco-sorteio p { color: #cfc8ba; margin: 0; }
.redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rede { display: flex; align-items: center; gap: 10px; background: var(--superficie-2); border-radius: 14px; padding: 12px 14px; text-decoration: none; font-weight: 700; color: var(--tinta); }
.rede svg { width: 22px; height: 22px; flex: none; }
.rede.instagram svg { color: #d62976; } .rede.facebook svg { color: #1877f2; } .rede.tiktok svg { color: var(--tinta); } .rede.site svg { color: var(--cor); }

.rodape { text-align: center; font-size: 12.5px; color: var(--tinta-3); padding: 18px 16px 26px; }
dialog { border: 0; border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); padding: 22px; max-width: min(440px, calc(100% - 28px)); max-height: 80vh; margin: auto; background: var(--superficie); color: var(--tinta); }
dialog::backdrop { background: rgba(20, 18, 16, .5); backdrop-filter: blur(3px); }
dialog h3 { font: 600 20px var(--titulo); margin: 0 0 10px; }
#texto-termos { white-space: pre-line; font-size: 14px; color: var(--tinta-2); margin-bottom: 16px; overflow: auto; max-height: 55vh; }
.torrada {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; z-index: 99; max-width: calc(100% - 32px);
  background: #1d1b18; color: #f3efe8; padding: 13px 18px; border-radius: 14px; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); transition: .25s;
}
.torrada.vis { opacity: 1; transform: translate(-50%, 0); }
.torrada.erro { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45), inset 4px 0 0 var(--falha); }

/* Tempo da visita: botões de escolher */
.opcoes-tempo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opcoes-tempo label { position: relative; }
.opcoes-tempo input { position: absolute; opacity: 0; }
.opcoes-tempo span { display: block; text-align: center; padding: 13px 4px; border-radius: 14px; border: 1.5px solid var(--linha); font-weight: 700; cursor: pointer; font-size: 15px; }
.opcoes-tempo input:checked + span { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, transparent); color: var(--cor); }

/* Capa com foto (galeria ou foto da loja): a foto domina, a cor da marca entra por baixo e segura o texto.
   No computador vira duas colunas: foto fixa à esquerda, cadastro à direita. */
.capa.com-foto {
  min-height: min(62vh, 440px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 28px; padding-bottom: 84px;
  background: #111;
}
.capa.com-foto::before {
  content: ''; position: absolute; inset: -4%; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none;
  background: var(--foto) center / cover no-repeat; animation: aproxima 18s ease-out both;
}
.capa.com-foto::after {
  opacity: 1; mix-blend-mode: normal;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(0deg, color-mix(in srgb, var(--cor) 92%, #000) 0%, color-mix(in srgb, var(--cor) 55%, transparent) 38%, transparent 68%);
}
.capa.com-foto .logo { position: absolute; top: 22px; margin: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .35); }
.capa.com-foto h1 { font-size: clamp(34px, 10vw, 50px); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.capa.com-foto p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.capa.com-foto .rotulo-capa { background: rgba(0, 0, 0, .28); backdrop-filter: blur(8px); padding: 6px 12px 6px 10px; border-radius: 99px; opacity: 1; align-self: flex-start; }
@keyframes aproxima { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { .capa.com-foto::before { animation: none; } }

/* Avaliação depois de conectar */
.bloco-avaliacao { background: var(--superficie); border-radius: 24px; box-shadow: var(--sombra); padding: 20px; display: grid; gap: 12px; text-align: center; animation: m-entra .45s .12s both; }
.bloco-avaliacao h3 { font: 600 21px/1.15 var(--titulo); margin: 0; }
.estrelas { display: flex; justify-content: center; gap: 6px; }
.estrelas button { border: 0; background: none; font-size: 42px; line-height: 1; color: var(--linha); cursor: pointer; padding: 4px; transition: transform .12s, color .15s; }
.estrelas button:hover { color: #ffc93c; transform: scale(1.08); }
.estrelas button.acesa { color: #ffb300; }
.bloco-avaliacao form { display: grid; gap: 10px; text-align: left; }
.codigo-visita { display: grid; gap: 10px; }

/* Conecta · hospitalidade editorial. Todos os recursos são locais. */
:root { --fundo: #f3f2ed; --superficie: #fff; --superficie-2: #eeefeb; --tinta: #202d30; --tinta-2: #505e60; --tinta-3: #596566; --linha: #adb6b3; --falha: #a52c21; color-scheme: light; }
.app { max-width: 1200px; margin: auto; }
.capa, .capa.com-foto { min-height: 320px; padding: 108px 26px 34px; background: #193237; display: flex; flex-direction: column; justify-content: flex-end; }
.capa::before { display: none; }
.capa::after, .capa.com-foto::after { background: linear-gradient(0deg, rgba(12,27,30,.95), rgba(12,27,30,.5) 55%, rgba(12,27,30,.12)); opacity: 1; mix-blend-mode: normal; }
.capa.com-foto::before { display: block; inset: 0; background-position: center; animation: none; }
.capa .logo, .capa.com-foto .logo { position: absolute; top: 22px; left: 26px; width: 52px; height: 52px; border-radius: 12px; margin: 0; background: #fff; color: #203337; box-shadow: none; }
.logo img { object-fit: contain; }
.capa h1, .capa.com-foto h1 { font: 600 36px/1.08 var(--titulo); letter-spacing: -.035em; margin: 12px 0; text-shadow: none; overflow-wrap: break-word; }
.capa p, .capa.com-foto p { font-size: 15px; line-height: 1.5; opacity: 1; text-shadow: none; max-width: 42ch; }
.capa .rotulo-capa, .capa.com-foto .rotulo-capa { font-size: 11px; letter-spacing: .15em; background: none; padding: 0; border-radius: 0; backdrop-filter: none; font-weight: 700; }
.rotulo-capa::before { width: 18px; height: 2px; border-radius: 0; background: #fff; box-shadow: none; animation: none; }
.conteudo { margin: 0 auto; max-width: 540px; padding: 24px 20px 16px; gap: 18px; }
.tela { border: 0; border-top: 3px solid var(--cor); border-radius: 0 0 16px 16px; padding: 24px; gap: 18px; box-shadow: 0 8px 24px rgba(25,46,45,.05); }
.tela h2 { font: 600 24px/1.2 var(--titulo); letter-spacing: -.035em; }
.fraco { font-size: 15px; line-height: 1.6; }
.entrada { border-radius: 8px; background: #fafbf9; min-height: 54px; border: 1px solid #929f9c; }
.entrada::placeholder { color: #626e6c; opacity: 1; }
select.entrada { appearance: auto; }
.botao, .botao.grande { border-radius: 8px; min-height: 54px; font-size: 16px; padding: 12px 16px; line-height: 1.35; box-shadow: none; }
.botao.acao { color: var(--sobre-cor, #fff); box-shadow: none; }
.botao:not(.acao):not(.amarelo) { border: 1px solid #b3bdb8; background: #f5f6f2; }
.link { min-height: 44px; }
.marcar { align-items: center; min-height: 44px; gap: 10px; }
.marcar input { border-color: #82918d; border-radius: 5px; }
.marcar input:checked::after { color: var(--sobre-cor, #fff); }
.marcar .link { min-height: 44px; text-align: left; }
.aviso { background: #f4f1e8; border-radius: 8px; border-left: 3px solid #9f8443; font-size: 14px; }
.aviso.vermelho { background: #fbe8e4; border-color: #a52c21; }
button:focus, a:focus, input:focus, select:focus, textarea:focus { outline: 3px solid #246591; outline-offset: 3px; box-shadow: none; }
.opcoes-tempo input:focus + span { outline: 3px solid #246591; outline-offset: 3px; }
.opcoes-tempo input:checked + span { background: #e9efeb; color: #203337; border: 2px solid #203337; }
.estrelas button { min-width: 44px; min-height: 44px; }
.rodape { color: #596566; padding: 16px 20px 24px; }
body[data-modo="kids"] .capa { background-color: #284950; }
body[data-modo="kids"] .tela { border-radius: 0 0 24px 8px; }
@media (max-width: 359px) { .conteudo { padding: 18px 12px; } .tela { padding: 20px 16px; } .capa h1, .capa.com-foto h1 { font-size: 32px; } }
@media (min-width: 760px) {
  body { padding: 40px 28px; }
  .app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); grid-template-rows: 1fr auto; min-height: calc(100vh - 80px); gap: 0 24px; }
  .app .capa { grid-row: 1 / 3; position: sticky; top: 40px; height: calc(100vh - 80px); min-height: 480px; max-height: 960px; padding: 100px 36px 44px; border-radius: 16px; }
  .app .capa .logo { top: 28px; left: 36px; width: 60px; height: 60px; border-radius: 12px; }
  .app .capa h1 { font-size: 46px; max-width: 14ch; }
  .app .capa p { font-size: 16px; }
  .app .capa::after { background: linear-gradient(0deg, rgba(12,27,30,.95), rgba(12,27,30,.4) 55%, rgba(12,27,30,.1)); }
  .app .conteudo { align-self: center; margin: 0 auto; padding: 24px 0; max-width: 480px; }
  .app .tela { border: 0; border-top: 3px solid var(--cor); padding: 28px; }
  .app .rodape { grid-column: 2; }
}

/* Rodada 3 · Empresa e visitas da família. */
body[data-modo="empresa"] { --fundo: #edf1f3; --tinta: #172e3b; --tinta-2: #465d68; }
body[data-modo="empresa"] .tela { border-radius: 0 0 12px 12px; }
body[data-modo="empresa"] .capa .rotulo-capa { letter-spacing: .18em; }
body[data-modo="empresa"] .capa p { border-left: 3px solid #c9e2df; padding-left: 14px; }
body[data-modo="empresa"] .capa::after { background: linear-gradient(0deg, rgba(12,28,40,.98), rgba(12,28,40,.65) 55%, rgba(12,28,40,.12)); }
body[data-modo="empresa"] .tela h2 { font-size: 28px; }
body[data-modo="empresa"] #kids-estado { background: #e7f1ec; border-color: #267151; color: #174c37; line-height: 1.6; }
body[data-modo="empresa"] #kids-estado.vermelho { background: #fff3df; border-color: #9b6618; color: #68420c; }
#kids-novo-aguardando, #kids-aguardando, #kids-visita-aguardando { padding: 16px; border: 1px solid #a1b9af; background: #edf5f0; color: #284d3e; border-radius: 8px; line-height: 1.65; }
.visita-form { gap: 20px; }
.visita-form .campo { gap: 8px; }
.visita-form .marcar { padding-top: 8px; border-top: 1px solid var(--linha); }
.visita-form .marcar > span { min-width: 0; }
.visita-form .link { white-space: normal; }
[data-visita] { margin-top: 8px; }
@media (max-width: 359px) { body[data-modo="empresa"] .tela h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .tela, .carregando { animation: none; } }
.texto-termo { display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); margin-bottom: 14px; overflow: auto; max-height: 50vh; }
.texto-termo p { margin: 0; }
#form-termo-internet { display: grid; gap: 10px; }

.contato-loja { display: grid; gap: 8px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(37, 211, 102, .1); border: 1.5px solid rgba(37, 211, 102, .35); text-align: left; }
.contato-loja p { margin: 0; }
.acoes-contato { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-contato .botao { flex: 1; min-width: 140px; text-align: center; }
.acoes-contato #contato-salvar { background: #1f9d55; border-color: #1f9d55; color: #fff; }