/* Joá — identidade, abertura e interfaces responsivas. */
*, *::before, *::after { box-sizing: border-box; }
:root { --glass: rgba(15,31,52,.86); --glass-strong: rgba(10,24,43,.97); --ink: #f5f2e9; --muted: #b8c5d5; --accent: #d9bd87; --line: rgba(231,228,211,.15); --radius: 20px; --shadow: 0 16px 48px #0004, inset 0 1px 0 #ffffff08; }
html { padding: 0; background: #0c1b2e; }
body { background: #0c1b2e; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button, input, select { min-height: 44px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.panel { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.btn { min-height: 44px; border-radius: 12px; }
.brand { padding: 18px 22px; gap: 10px; }
.brand h1 { font-size: 30px; }
.brand p { max-width: 260px; line-height: 1.5; }
.menu { padding: 6px; border-radius: 16px; }
.menu button { border-radius: 10px; }
.menu button[aria-pressed=true] { background: #d9bd871a; color: var(--accent); box-shadow: inset 0 0 0 1px #d9bd8738; }
.cams { top: calc(env(safe-area-inset-top,0px) + 86px); border-radius: 14px; }
.cams button { padding: 8px 12px; }
.stack { top: calc(env(safe-area-inset-top,0px) + 180px); }
.stack button { min-height: 40px; }
.unit { top: calc(env(safe-area-inset-top,0px) + 154px); }
.unit h2 { font-size: 34px; }
.unit > div:first-of-type { padding-right: 40px; }
.unit-dismiss { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; min-height: 36px; border: 1px solid var(--line); background: var(--glass-strong); border-radius: 50%; font-size: 24px; line-height: 1; z-index: 1; }
.unit .actions > button { flex: 1; }
.unit ul { line-height: 1.6; }
.plan { background: #f2efe7; border-radius: 14px; padding: 12px; }
.plan img { filter: none; }
.plan figcaption { color: #45556b; }
.sunbar { border-radius: 16px; width: min(450px,calc(100% - 36px)); }
.sunlabel { display: none; }
#time { min-height: 0; height: 4px; }
#time::-webkit-slider-thumb { width: 21px; height: 21px; }
#time::-moz-range-thumb { width: 21px; height: 21px; }
.slider { padding-block: 5px; }
.vtog { min-height: 44px; }
.gallery, .lightbox, #admin { overscroll-behavior: contain; }
.gallery { background: #0c1b2e; }
.gallery .grid { min-height: 0; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); grid-auto-rows: max-content; padding-bottom: env(safe-area-inset-bottom,0px); }
.grid button { border: 1px solid var(--line); background: #172d47; border-radius: 16px; min-height: max-content; grid-template-rows: max-content max-content; }
.grid span { padding: 14px 16px; color: var(--ink); }
.grid.plans img { background: #f2efe7; padding: 12px; }
.lightbox .nav { background: #0c1b2ee8; }
.viewbar { max-width: calc(100% - 32px); }

/* A capa abre no empreendimento; a apresentação comercial continua em #apresentacao. */
#intro { background: #10243d; overflow-y: auto; overscroll-behavior: contain; }
#intro .capa { inset: 0 0 0 auto; width: 53%; height: 100%; object-fit: cover; object-position: 50% 48%; animation: none; transform: none; }
#intro::after { position: fixed; background: linear-gradient(90deg,#10243d 0%,#10243d 40%,#10243d99 55%,#10243d00 80%),linear-gradient(0deg,#08182bdd,transparent 45%); }
.it { min-height: 100%; height: auto; padding: clamp(22px,3vw,44px) clamp(24px,4.5vw,76px); gap: 54px; }
.it-top { align-items: center; }
.it-logo img { height: 30px; }
.it-acoes { gap: 10px; }
.it-btn { padding: 10px 18px; border-color: #f5f2e933; background: #0d203899; font-weight: 500; }
.it-onde { display: none; }
.it-content { padding-top: min(8vh,70px); }
.hero-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
#intro h2 { font-size: clamp(76px,9vw,140px); font-weight: 300; line-height: .9; letter-spacing: -.045em; max-width: 600px; }
#intro h2 span { display: block; }
#intro h2 .hero-prefix { font-size: .38em; letter-spacing: .005em; line-height: 1.6; }
#intro .lead { font-size: 15px; line-height: 1.7; color: #e0e8f2; max-width: 420px; margin-top: 24px; text-wrap: pretty; }
.hero-details { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.hero-details span { border: 1px solid #d9bd873d; color: #ded9c9; border-radius: 6px; padding: 7px 11px; font-size: 11px; letter-spacing: .02em; }
.it-carga { font-size: 12px; font-weight: 400; color: #bdcbdd; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.it-carga i { max-width: 180px; flex: 0 1 180px; height: 2px; }
.it-carga.ok::before { content: ''; width: 6px; height: 6px; border-radius: 100%; background: #aac9ef; box-shadow: 0 0 0 4px #aac9ef12; }
.cards { max-width: 1040px; margin-top: 22px; gap: 12px; }
.card { min-height: 156px; border-radius: 14px; background: #142b46; box-shadow: none; }
.card img { opacity: .42; transition: opacity .3s,transform .5s; }
.card:hover img { opacity: .64; transform: scale(1.03); }
.card::after { background: linear-gradient(90deg,#0b2039d9,#0b203920),linear-gradient(0deg,#08182bcc,transparent); }
.card div { padding: 18px 20px; }
.card .tag { font-size: 9px; color: #e1d0ab; border: 0; background: none; padding: 0; margin-bottom: 7px; }
.card b { font-size: 21px; }
.card .d { font-size: 12px; color: #cdd9e8; }
.card .ir { padding: 0; margin-top: 13px; color: var(--accent); background: none; font-weight: 500; }
.cards.espera .card[data-entra] { pointer-events: auto; }
.cards.espera .card[data-entra] .ir { color: #b9cadf; background: none; }
.intro-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; color: #9db1cc; font-size: 10px; letter-spacing: .03em; }
.text-button { border: 0; padding: 0; min-height: 24px; font-size: 11px; color: #bdcce0; background: none; text-decoration: underline; text-underline-offset: 4px; }
#splash { overflow: auto; }
.sp-in { margin-block: auto; }
.sp-tela img { object-position: center; }
.hint { position: fixed; pointer-events: none; top: calc(env(safe-area-inset-top,0px) + 150px); left: 50%; transform: translateX(-50%); padding: 9px 16px; border-radius: 30px; font-size: 11px; color: var(--ink); background: #10243dd9; border: 1px solid var(--line); z-index: 2; white-space: nowrap; }
body.na-capa .hint { display: none; }
body.modo-mapa .vtogs, body.modo-mapa .hint { display: none; }
#realEnvironmentNotice { color: var(--ink); background: #10243d; width: min(470px,calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 24px 90px #0008; }
#realEnvironmentNotice::backdrop { background: #030d1cc9; backdrop-filter: blur(8px); }
#realEnvironmentNotice h2 { margin: 0 0 16px; font: 300 32px var(--font-display); }
#realEnvironmentNotice p { font-size: 14px; line-height: 1.7; color: #d7e2ef; }
#realEnvironmentNotice .note { font-size: 12px; color: var(--muted); }
#realEnvironmentNotice .actions { margin-top: 22px; }
#realEnvironmentNotice .actions button { flex: 1 1 160px; }

@media (min-width:761px) and (max-width:1150px) {
 .brand p { display: none; } .brand { padding: 12px 16px; } .brand h1 { font-size: 25px; }
 .menu button { padding-inline: 10px; gap: 6px; font-size: 12px; }
 .stack { top: 160px; } .unit { width: 340px; }
 .vtogs { bottom: 90px; flex-direction: column; align-items: flex-start; }
}
@media (max-width:760px) {
 #intro .capa { width: 100%; height: 54svh; min-height: 340px; object-position: 52% 45%; }
 #intro::after { position: absolute; height: max(54svh,340px); background: linear-gradient(180deg,#08182b55,transparent 25%,#10243d33 55%,#10243d 100%); }
 .it { padding: calc(18px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)); gap: 0; }
 .it-top { gap: 8px; flex-wrap: nowrap; }
 .it-logo img { height: 24px; }
 .it-acoes { gap: 6px; flex-wrap: nowrap; }
 .it-btn { padding: 8px 12px; font-size: 11px; min-height: 40px; }
 .it-content { padding-top: clamp(170px,27svh,260px); }
 .hero-eyebrow { font-size: 9px; letter-spacing: .16em; margin-bottom: 10px; }
 #intro h2 { font-size: clamp(76px,21vw,110px); }
 #intro h2 .hero-prefix { font-size: .32em; }
 #intro .lead { font-size: 13px; line-height: 1.65; max-width: 38ch; margin-top: 18px; }
 .hero-details { margin-block: 16px 22px; gap: 6px; }
 .hero-details span { font-size: 10px; padding: 6px 8px; }
 .it-carga { font-size: 11px; gap: 8px; }
 .it-carga i { flex-basis: 90px; }
 .cards { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
 .card { min-height: 86px; border-color: #aac4e426; }
 .card img { left: auto; width: 96px; opacity: .6; object-position: center 40%; }
 .card::after { background: linear-gradient(90deg,#112b49 48%,#112b4966); }
 .card div { padding: 13px 16px; display: grid; grid-template-columns: 1fr auto; width: 100%; align-items: center; column-gap: 10px; }
 .card .tag { grid-column: 1; margin-bottom: 3px; font-size: 8px; }
 .card b { grid-column: 1; font-size: 18px; }
 .card .d { display: none; }
 .card .ir { grid-column: 2; grid-row: 1 / 3; font-size: 10px; margin: 0; max-width: 83px; text-align: right; }
 .intro-foot { margin-top: 18px; font-size: 9px; gap: 8px; }
 .brand { top: calc(env(safe-area-inset-top,0px) + 12px); left: max(12px,env(safe-area-inset-left,0px)); max-width: 48%; padding: 10px 13px; gap: 4px; border-radius: 14px; }
 .brand img { height: 15px; } .brand h1 { font-size: 21px; padding-top: 4px; }
 .vtogs { top: calc(env(safe-area-inset-top,0px) + 12px); right: max(12px,env(safe-area-inset-right,0px)); gap: 5px; max-width: 46%; }
 .vtog { font-size: 10px; min-height: 36px; padding: 6px 10px; gap: 6px; }
 .vtog i { width: 24px; height: 14px; flex: none; } .vtog i::after { width: 10px; height: 10px; }
 .vtog[aria-pressed=true] i::after { transform: translateX(10px); }
 .cams { display: flex; top: calc(env(safe-area-inset-top,0px) + 99px); left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); overflow-x: auto; padding: 3px; gap: 0; justify-content: space-between; scrollbar-width: none; border-radius: 12px; }
 .cams .label { display: none; } .cams button { flex: 1; min-height: 36px; padding: 6px 8px; font-size: 10px; }
 .menu { width: auto; max-width: none; left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); transform: none; bottom: calc(env(safe-area-inset-bottom,0px) + 12px); border-radius: 16px; padding: 5px; }
 .menu button { min-width: 0; min-height: 50px; font-size: 9px; gap: 5px; }
 .menu button svg.ic { width: 18px; height: 18px; }
 .sunbar { left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); transform: none; width: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 85px); padding: 7px 14px; }
 .clock { font-size: 20px; }
 .ticks { font-size: 9px; }
 .stack { top: auto; left: 12px; bottom: calc(env(safe-area-inset-bottom,0px) + 153px); max-height: min(42dvh,350px); padding: 14px; }
 .unit { left: 12px; right: 12px; top: auto; width: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 153px); max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 310px); padding: 18px; gap: 12px; border-radius: 22px; overscroll-behavior: contain; scroll-padding: 16px; }
 body.unit-open .stack { display: none; }
 .unit h2 { font-size: 28px; }
 .unit .plan img { max-height: 190px; }
 .unit .tabs { flex-wrap: nowrap; overflow-x: auto; }
 .unit .tabs button { flex-shrink: 0; }
 .unit .btn { font-size: 12px; }
 .unit .btn.entrar { flex-wrap: wrap; }
 .mapa { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom,0px) + 88px); width: auto; max-height: calc(100dvh - 205px); overflow: auto; }
 body.modo-mapa .menu { justify-content: center; }
 body.modo-mapa .menu button { flex: 1; flex-direction: row; gap: 10px; }
 .viewbar { top: calc(env(safe-area-inset-top,0px) + 148px); width: calc(100% - 24px); max-width: none; justify-content: space-between; padding: 8px 12px; font-size: 11px; gap: 8px; }
 .viewbar .btn { font-size: 11px; padding: 8px 12px; }
 .gallery { padding: calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px); gap: 18px; }
 .gallery header { gap: 12px; }
 .gallery header h2 { font-size: 26px; }
 .gallery header .tabs { order: 3; width: 100%; }
 .gallery header .tabs button { flex: 1; }
 .gallery .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .grid span { padding: 10px; font-size: 11px; }
 .lightbox { padding: calc(env(safe-area-inset-top,0px) + 76px) 8px calc(env(safe-area-inset-bottom,0px) + 76px); }
 .lightbox .nav { top: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 16px); transform: none; width: 48px; height: 48px; }
 .lightbox .prev { left: calc(50% - 60px); } .lightbox .next { right: calc(50% - 60px); }
 .hint { top: calc(env(safe-area-inset-top,0px) + 148px); font-size: 10px; }
 body.unit-open .hint { display: none; }
 #login input, #admin input, #admin select { font-size: 16px; }
 .attrib { font-size: 8px; bottom: calc(env(safe-area-inset-bottom,0px) + 76px); max-width: 85%; }
}
@media (max-height:500px) and (orientation:landscape) {
 .brand { max-width: 180px; } .brand img { display: none; } .brand h1 { border: 0; padding: 0; font-size: 20px; }
 .cams { display: none; } .vtogs { flex-direction: row; max-width: 60%; }
 .menu { width: 360px; left: 12px; right: auto; bottom: 10px; }
 .sunbar { width: 260px; left: auto; right: 12px; bottom: 10px; }
 .unit { left: auto; width: min(360px,50%); top: 62px; bottom: 86px; max-height: none; }
 .stack { top: 62px; bottom: 86px; max-height: none; }
 .mapa { left: auto; width: 340px; top: 62px; bottom: 86px; max-height: none; }
 .hint { top: 66px; } .viewbar { top: 62px; width: 300px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }