/* Residencial Maria AP Silva I — portal do WiFi (marca: verde #739500, azul #22aed3, lima #a1c510) */
body[data-residencial="maria-ap-i"] {
  --cor: #739500 !important; --marca: #739500; --azul: #1597ba; --lima: #a1c510; --tinta: #1f2a2e; --tinta-2: #55636a; --linha-r: #e3ebe4;
  background: #f3f7f2; color: var(--tinta); font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body[data-residencial="maria-ap-i"] .app { max-width: 100%; background: transparent; }

/* Capa: clara, logo em destaque, faixa da marca embaixo */
body[data-residencial="maria-ap-i"] .capa,
body[data-residencial="maria-ap-i"] .capa.com-foto {
  position: relative; overflow: hidden; color: var(--tinta);
  background: radial-gradient(120% 90% at 100% 0%, #e3f5fa 0%, rgba(227,245,250,0) 60%), radial-gradient(90% 70% at 0% 100%, #eef6d9 0%, rgba(238,246,217,0) 65%), #fff !important;
  padding: 26px 22px 76px; border: 0; border-bottom: 6px solid var(--lima);
}
body[data-residencial="maria-ap-i"] .capa::before, body[data-residencial="maria-ap-i"] .capa::after { display: none; }
body[data-residencial="maria-ap-i"] .capa > * { position: relative; }
body[data-residencial="maria-ap-i"] .logo {
  position: static; width: min(300px, 78%); height: auto; aspect-ratio: 3; margin: 0 0 22px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}
body[data-residencial="maria-ap-i"] .logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
body[data-residencial="maria-ap-i"] .rotulo-capa { color: #5b7600; font-weight: 700; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; }
body[data-residencial="maria-ap-i"] .rotulo-capa::before { animation: none; background: var(--azul); box-shadow: none; }
body[data-residencial="maria-ap-i"] .capa h1 { font: 700 clamp(28px, 7vw, 34px)/1.12 "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -.02em; color: var(--tinta); margin: 6px 0 8px; max-width: 18ch; }
body[data-residencial="maria-ap-i"] .capa p { max-width: 46ch; line-height: 1.6; opacity: 1; color: var(--tinta-2); }

/* Como funciona */
body[data-residencial="maria-ap-i"] .info-residencial { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
body[data-residencial="maria-ap-i"] .info-residencial li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--linha-r); border-radius: 14px; background: rgba(255,255,255,.78); }
body[data-residencial="maria-ap-i"] .info-residencial .icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #eef5df; color: #4f6a00; }
body[data-residencial="maria-ap-i"] .info-residencial li:nth-child(2) .icone { background: #e2f4f9; color: #0f6f8a; }
body[data-residencial="maria-ap-i"] .info-residencial li:nth-child(3) .icone { background: #eef0f2; color: #3d4b52; }
body[data-residencial="maria-ap-i"] .info-residencial svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-residencial="maria-ap-i"] .info-residencial b { display: block; font-size: 15px; margin-bottom: 2px; }
body[data-residencial="maria-ap-i"] .info-residencial span { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
body[data-residencial="maria-ap-i"] .info-residencial em { font-style: normal; font-weight: 700; color: var(--tinta); }
body[data-residencial="maria-ap-i"] .contato-residencial { margin-top: 16px; font-size: 13.5px; }
body[data-residencial="maria-ap-i"] .contato-residencial strong { color: var(--tinta); white-space: nowrap; }

/* Cartão do acesso */
body[data-residencial="maria-ap-i"] .conteudo { max-width: 520px; margin-top: -46px; padding: 0 16px 24px; }
body[data-residencial="maria-ap-i"] .tela { border: 1px solid var(--linha-r); border-top: 4px solid var(--cor); background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 18px 50px rgba(31,52,40,.10); animation: none; }
body[data-residencial="maria-ap-i"] .tela h2 { font: 700 24px/1.2 "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -.01em; }
body[data-residencial="maria-ap-i"] .tela .fraco { color: var(--tinta-2); line-height: 1.55; }
body[data-residencial="maria-ap-i"] .entrada { border-radius: 12px; }
body[data-residencial="maria-ap-i"] .entrada:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21,151,186,.18); }
body[data-residencial="maria-ap-i"] .acao { background: var(--cor); color: #fff; border-radius: 12px; font-weight: 700; box-shadow: 0 6px 16px rgba(115,149,0,.25); }
body[data-residencial="maria-ap-i"] .acao:hover { background: #658300; }
body[data-residencial="maria-ap-i"] #sou-visita { margin-top: 4px; min-height: 54px; border-radius: 12px; border: 2px solid var(--azul); background: #f0fafd; color: #0b5d74; font-weight: 700; box-shadow: none; }
body[data-residencial="maria-ap-i"] #sou-visita:hover { background: #e2f4f9; }
body[data-residencial="maria-ap-i"] .rodape { color: var(--tinta-2); }

@media (max-width: 380px) { body[data-residencial="maria-ap-i"] .tela { padding: 22px 18px; } body[data-residencial="maria-ap-i"] .info-residencial li { padding: 10px 12px; } }

/* Computador: capa vira painel à esquerda, cartão centralizado à direita */
@media (min-width: 760px) {
  body[data-residencial="maria-ap-i"] .app .capa { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; border-radius: 22px; border-bottom-width: 8px; box-shadow: 0 20px 60px rgba(31,52,40,.08); }
  body[data-residencial="maria-ap-i"] .app .capa .logo { position: static; width: min(380px, 80%); height: auto; margin-bottom: 30px; }
  body[data-residencial="maria-ap-i"] .app .capa h1 { font-size: clamp(36px, 3.4vw, 46px); }
  body[data-residencial="maria-ap-i"] .app .capa p { font-size: 16px; }
  body[data-residencial="maria-ap-i"] .app .conteudo { margin-top: 0; padding: 24px 0; }
  body[data-residencial="maria-ap-i"] .app .tela { padding: 32px; }
}

/* Logo sem caixa e no tamanho certo em qualquer tela */
body[data-residencial="maria-ap-i"] .capa .logo, body[data-residencial="maria-ap-i"] .capa .logo.com-imagem { position: static !important; inset: auto !important; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
body[data-residencial="maria-ap-i"] .info-celular { display: none; }
@media (max-width: 759px) {
  body[data-residencial="maria-ap-i"] .capa { padding: 22px 20px 70px; }
  body[data-residencial="maria-ap-i"] .capa .logo { width: min(250px, 72%) !important; height: auto !important; margin-bottom: 16px; }
  body[data-residencial="maria-ap-i"] .capa .info-residencial, body[data-residencial="maria-ap-i"] .capa .contato-residencial { display: none; }
  body[data-residencial="maria-ap-i"] .info-celular { display: block; margin-top: 22px; }
  body[data-residencial="maria-ap-i"] .info-celular .info-residencial { margin-top: 0; }
  body[data-residencial="maria-ap-i"] .info-celular .contato-residencial { text-align: center; color: var(--tinta-2); }
}

body[data-residencial="maria-ap-i"] .contato-residencial a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body[data-residencial="maria-ap-i"] .contato-residencial a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Logo sem depender de aspect-ratio (Safari antigo zera a altura) */
body[data-residencial="maria-ap-i"] .capa .logo, body[data-residencial="maria-ap-i"] .capa .logo.com-imagem { height: auto !important; aspect-ratio: auto !important; display: block; overflow: visible; }
body[data-residencial="maria-ap-i"] .capa .logo img { display: block; width: 100% !important; height: auto !important; max-height: none; object-fit: contain; }