/* Casa Ônix · direção em direcao.md. Tokens: tudo que muda por tela muda aqui (RSP-01, DSY-02). */
@font-face { font-family: 'Poly'; src: url(fonts/poly-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url(fonts/mona-sans.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  --noite: #070706; --sup: #0f0e0c; --sup-2: #1c1a16; --sup-3: #26231e;
  --papel: #f4efe6; --apoio: #cfc5b4; --sutil: #a2988a;
  --ouro: #d4a452; --ouro-fundo: #8a6224; --ouro-hover: #9c7029; --ouro-txt: #fbf3e3;
  --traco: rgba(244, 239, 230, .1); --perigo: #f2a48f;
  --margem: 80px; --sec: 128px; --raio: 16px; --gap: 24px; --topo-h: 96px;
  --h1: 64px; --h2: 48px; --h3: 24px; --apoio-fs: 24px;
  --curva: cubic-bezier(.165, .84, .44, 1); --curva-ui: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}
@media (max-width: 1024px) { :root { --margem: 40px; --sec: 96px; --h1: 56px; --h2: 40px; --apoio-fs: 20px; --topo-h: 80px; } }
@media (max-width: 640px) { :root { --margem: 16px; --sec: 64px; --gap: 16px; --h1: 32px; --h2: 32px; --h3: 20px; --apoio-fs: 16px; --topo-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 24px); }
body { margin: 0; background: var(--noite); color: var(--papel); font: 400 16px/1.5 'Mona Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
:where(h1, h2, h3, p, dl, dd, fieldset, legend) { margin: 0; padding: 0; border: 0; }
h1, h2, h3, .irma__nome, .irma__preco, .fi__preco { font-family: 'Poly', Georgia, serif; font-weight: 400; }
h1, h2, h3 { text-wrap: balance; } p, dd { text-wrap: pretty; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: rgba(212, 164, 82, .3); }
:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--noite), 0 0 0 4px var(--ouro); border-radius: 8px; }
.img-esp img:not(.img-ok):not([src$=".svg"]) { opacity: 0; }
.pular { position: fixed; left: 16px; top: -64px; z-index: 60; background: var(--papel); color: var(--noite); padding: 12px 16px; border-radius: 99px; }
.pular:focus { top: 16px; }
.wrap { width: min(100% - 2 * var(--margem), 1280px); margin-inline: auto; }
.sec { padding-block: var(--sec); } .sec--sup { background: var(--sup); }

.ic { width: 24px; height: 24px; stroke-width: 1.5; transition: stroke-width 250ms; flex: none; }
.ic--16 { width: 16px; height: 16px; } .ic--32 { width: 32px; height: 32px; color: var(--ouro); }
a:hover .ic, button:hover .ic { stroke-width: 2.25; }

/* selo */
.selo { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 99px; background: rgba(14, 13, 11, .55); color: var(--apoio); font-size: 14px; line-height: 1; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sec .selo:not(.selo--p) { background: var(--sup-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sec--sup .selo { background: var(--sup-3) !important; }

/* botões: 40 e 48, seta que atravessa e volta (MOT-05) */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 99px; font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; transition: background-color 250ms, color 250ms; }
.bt:active { scale: .98; }
.bt--lg { height: 48px; padding: 0 16px 0 24px; font-size: 16px; }
.bt--ouro { background: var(--ouro-fundo); color: var(--ouro-txt); } .bt--ouro:hover { background: var(--ouro-hover); }
.bt--vidro { background: rgba(14, 13, 11, .55); color: var(--papel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .bt--vidro:hover { background: rgba(38, 35, 30, .8); }
.bt--sup { background: var(--sup-3); } .bt--sup:hover { background: #312d27; }
.bt-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; flex: none; transition: background-color 250ms; }
.bt__seta { display: grid; place-items: center; overflow: clip; width: 24px; height: 24px; }
.bt:hover .bt__seta .ic, .irma:hover .irma__ver .ic { animation: co-seta 400ms var(--curva-ui); }
@keyframes co-seta { 0% { translate: 0 } 49% { translate: 28px 0 } 50% { translate: -28px 0 } 100% { translate: 0 } }

/* header */
.logo { display: inline-flex; align-items: center; height: 40px; } .logo__svg { height: 32px; width: auto; display: block; }
.topo { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--topo-h); padding: 0 max(var(--margem), calc((100% - 1280px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: height 400ms var(--curva); }
.topo::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(7, 7, 6, .76); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: opacity 400ms; }
.topo.is-solido { height: 72px; } .topo.is-solido::before { opacity: 1; }
.topo__nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; color: var(--apoio); }
.topo__nav a { line-height: 40px; transition: color 250ms; } .topo__nav a:hover { color: var(--papel); }
.topo__acoes { grid-column: 3; justify-self: end; position: relative; display: flex; align-items: center; gap: 8px; }
.topo__cta, .topo__casa { transition: opacity 250ms, translate 250ms var(--curva-ui), background-color 250ms; }
.topo__cta { position: absolute; right: 0; opacity: 0; translate: 0 8px; pointer-events: none; }
.topo.is-cta .topo__cta { opacity: 1; translate: 0; pointer-events: auto; }
.topo.is-cta .topo__casa { opacity: 0; translate: 0 -8px; pointer-events: none; }
.topo__menu { display: none; }
@media (max-width: 1199px) {
  .topo { grid-template-columns: 1fr auto; } .topo__nav { display: none; } .topo__acoes { grid-column: 2; }
  .topo__menu { display: grid; } .topo__cta { right: 48px; }
}
@media (max-width: 640px) { .topo__casa { display: none; } .logo__svg { height: 28px; } }

.gaveta { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 96px var(--margem) 40px; border: 0; background: var(--noite); color: var(--papel); overscroll-behavior: contain; }
.gaveta[open] { animation: co-entra 180ms var(--curva-ui); }
.gaveta__x { position: absolute; top: calc((var(--topo-h) - 40px) / 2); right: var(--margem); background: var(--sup-2); }
.gaveta nav { display: grid; } .gaveta nav a { font: 400 32px/1.2 'Poly', serif; padding: 16px 0; } .gaveta nav a + a { border-top: 1px solid var(--traco); }
@keyframes co-entra { from { opacity: 0; translate: 0 -4px; } }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; overflow: clip; isolation: isolate; background: var(--noite); }
.hero__midia { position: absolute; inset: 0; z-index: -1; }
.hero__midia img, .hero__midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__midia video { opacity: 0; transition: opacity 600ms; } video.tocando { opacity: 1 !important; }
.hero__midia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 7, 6, .7), rgba(7, 7, 6, 0) 58%), linear-gradient(180deg, rgba(7, 7, 6, .45), rgba(7, 7, 6, 0) 22%, rgba(7, 7, 6, 0) 40%, var(--noite) 100%); }
.hero__conteudo { width: min(100% - 2 * var(--margem), 1280px); margin: auto auto 0; padding-block: calc(var(--topo-h) + 48px) 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero__texto { max-width: 720px; display: grid; justify-items: start; gap: 24px; animation: co-hero 800ms var(--curva) both; }
@keyframes co-hero { from { opacity: .01; transform: translateY(12px); } }
h1 { font-size: var(--h1); line-height: 1.08; letter-spacing: -.02em; }
.hero__apoio { max-width: 560px; color: var(--apoio); font-size: var(--apoio-fs); line-height: 1.4; }
.hero__texto .bt { margin-top: 8px; }
.tour { display: flex; align-items: center; gap: 8px; animation: co-hero 800ms 200ms var(--curva) both; }
.tour__caps { display: flex; padding: 4px; height: 40px; border-radius: 99px; background: rgba(14, 13, 11, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tour__caps button { position: relative; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--apoio); transition: background-color 250ms, color 250ms; }
.tour__caps button::after { content: ''; position: absolute; inset: -4px 0; }
.tour__caps button:hover { color: var(--papel); }
.tour__caps [aria-current] { background: rgba(244, 239, 230, .14); color: var(--papel); }

/* cabeçalho de seção */
.cab { display: grid; justify-items: start; gap: 16px; margin-bottom: 48px; }
.cab .selo { margin-bottom: 8px; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -.02em; }
.apoio { color: var(--apoio); font-size: var(--apoio-fs); line-height: 1.4; max-width: 1100px; }

/* entrada: sobe 12px e a mídia acende */
.js .rv { opacity: 0; translate: 0 12px; }
.js .rv.in { opacity: 1; translate: 0; transition: opacity 800ms var(--d, 0ms) var(--curva), translate 800ms var(--d, 0ms) var(--curva); }
.js .rv:is(.amb, .irma, .agendar__foto, .planta__img) img, .js .amb.rv video { filter: brightness(.4); }
.js .rv.in:is(.amb, .irma, .agendar__foto, .planta__img) img, .js .amb.rv.in video { filter: none; transition: filter 1400ms calc(var(--d, 0ms) + 200ms) ease-out, transform 900ms var(--curva), opacity 600ms; }

/* ambientes: proporções variadas */
.galeria { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 500px; gap: var(--gap); }
.amb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--raio); overflow: hidden; isolation: isolate; padding: 24px; background: var(--sup-2); }
.amb--7 { grid-column: span 7; } .amb--5 { grid-column: span 5; } .amb--4 { grid-column: span 4; }
.amb__midia { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.amb__midia img, .amb__midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--curva), opacity 600ms; }
.amb__midia video { opacity: 0; }
.amb__midia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .84) 100%); }
.amb h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -.01em; }
.amb p { color: var(--apoio); line-height: 1.4; max-width: 46ch; margin-top: 8px; }
@media (hover: hover) { .amb:hover .amb__midia :is(img, video), .irma:hover .irma__foto img { transform: scale(1.04); } }

/* planta: abas com prévia */
.planta { display: grid; grid-template-columns: 4fr 8fr; grid-template-rows: auto auto 1fr; column-gap: 48px; }
.planta__cab { grid-column: 1; margin-bottom: 32px; }
.abas { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.abas button { height: 40px; padding: 0 12px; border-radius: 99px; font-size: 15px; font-weight: 500; line-height: 1; color: var(--apoio); background: var(--sup-2); transition: background-color 250ms, color 250ms; }
.abas button:hover { color: var(--papel); }
.abas [aria-selected=true] { background: var(--sup-3); color: var(--papel); }
.ficha { grid-column: 1; align-self: end; margin-top: 40px; }
.ficha div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; } .ficha div:first-child { padding-top: 0; } .ficha div:last-child { padding-bottom: 0; }
.ficha div + div { border-top: 1px solid var(--traco); }
.ficha dt { color: var(--sutil); } .ficha dd { font-variant-numeric: tabular-nums; }
.planta__img { grid-column: 2; grid-row: 1 / span 3; border-radius: var(--raio); overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; background: var(--sup-2); }
.planta__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--curva), filter 1400ms ease-out; }

/* irmãs */
.irmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.irma { border-radius: var(--raio); overflow: hidden; isolation: isolate; background: var(--sup-2); transition: background-color 400ms; }
.irma:hover { background: var(--sup-3); }
.irma__bt { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; text-align: left; }
.irma__foto { position: relative; display: block; height: 383px; overflow: hidden; }
.irma__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 900ms var(--curva), filter 1400ms ease-out; }
.selo--p { position: absolute; top: 16px; right: 16px; padding: 0 12px; }
.irma__info { display: grid; padding: 24px; }
.irma__nome { font-size: 24px; line-height: 1; letter-spacing: -.01em; }
.irma__dados { margin-top: 12px; color: var(--apoio); font-size: 14px; line-height: 1.3; }
.irma__base { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--traco); }
.irma__preco { color: var(--ouro); font-size: 28px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.irma__ver { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ouro-txt); overflow: clip; }

/* agendar */
.agendar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.agendar__foto { position: relative; border-radius: var(--raio); overflow: hidden; isolation: isolate; min-height: 480px; }
.agendar__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agendar__lado .cab { margin-bottom: 32px; }
.form { display: grid; gap: 20px; }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo label[for], legend { font-size: 14px; font-weight: 500; line-height: 1; color: var(--apoio); }
legend { margin-bottom: 8px; }
.campo input:not([type=radio]) { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--traco); background: var(--sup-2); color: var(--papel); font: inherit; font-size: 16px; transition: border-color 250ms; }
.campo input::placeholder { color: var(--sutil); }
.campo input:hover { border-color: rgba(244, 239, 230, .2); }
.campo input:focus { outline: 0; border-color: var(--ouro); }
.campo input[aria-invalid] { border-color: var(--perigo); }
.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ops--dias { grid-template-columns: repeat(6, 1fr); } .ops--horas { grid-template-columns: repeat(3, 1fr); }
.op { position: relative; display: block; cursor: pointer; }
.op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.op span { display: grid; place-items: center; height: 48px; padding: 0 4px; border-radius: 12px; border: 1px solid transparent; background: var(--sup-2); font-size: 14px; line-height: 1; white-space: nowrap; color: var(--apoio); transition: background-color 250ms, color 250ms, border-color 250ms; font-variant-numeric: tabular-nums; }
.op:hover span { background: var(--sup-3); color: var(--papel); }
.op input:checked + span { border-color: var(--ouro); background: rgba(212, 164, 82, .08); color: var(--papel); }
.op input:focus-visible + span { box-shadow: 0 0 0 2px var(--noite), 0 0 0 4px var(--ouro); }
.erro { color: var(--perigo); font-size: 14px; line-height: 1.3; }
.form__env { justify-self: start; margin-top: 4px; }
.form__env[aria-busy] { opacity: .8; cursor: progress; }
[hidden] { display: none !important; }
.ok { display: grid; justify-items: start; gap: 16px; padding: 32px; border-radius: var(--raio); background: var(--sup-2); animation: co-entra 250ms var(--curva-ui); }
.ok:focus { outline: 0; } .ok h3 { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; } .ok p { color: var(--apoio); font-size: 18px; }
.ok__bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .ok .bt--ouro { padding: 0 12px 0 20px; }

/* ficha da irmã */
.fi { width: min(100% - 32px, 920px); padding: 0; border: 0; border-radius: var(--raio); background: var(--sup-2); color: var(--papel); overflow: hidden; }
.fi[open] { display: grid; grid-template-columns: 1fr 1fr; animation: co-entra 180ms var(--curva-ui); }
.fi::backdrop { background: rgba(0, 0, 0, .7); }
body:has(dialog[open]) { overflow: hidden; }
.fi__foto { position: relative; min-height: 520px; background: var(--sup-3); }
.fi__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fi__txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; }
.fi__x { position: absolute; top: 16px; right: 16px; background: var(--sup-3); } .fi__x:hover { background: #312d27; }
.fi h2 { font-size: 40px; }
.fi__dados { width: 100%; margin-block: auto 8px; padding-top: 32px; }
.fi__dados div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; } .fi__dados div + div { border-top: 1px solid var(--traco); }
.fi__dados dt { color: var(--sutil); } .fi__preco { color: var(--ouro); font-size: 28px; line-height: 1; white-space: nowrap; }

/* rodapé */
.rod { padding-block: 48px 32px; border-top: 1px solid var(--traco); }
.rod__l1, .rod__l2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rod__nav { display: flex; flex-wrap: wrap; gap: 32px; color: var(--apoio); font-weight: 500; font-size: 15px; }
.rod__nav a { line-height: 40px; transition: color 250ms; } .rod__nav a:hover { color: var(--papel); }
.rod__l2 { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--traco); color: var(--sutil); font-size: 14px; }
.rod__sr { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; transition: color 250ms; } .rod__sr:hover { color: var(--papel); }
.rod__sr img { height: 14px; width: auto; }

@media (max-width: 1024px) {
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 420px; } .amb--7 { grid-column: span 2; } .amb--5, .amb--4 { grid-column: span 1; } .amb--4:last-child { grid-column: span 2; }
  .planta { grid-template-columns: 1fr; grid-template-rows: none; } .planta__cab { margin-bottom: 24px; } .planta__img { grid-column: 1; grid-row: 3; margin-top: 24px; } .ficha { grid-row: 4; margin-top: 32px; }
  .irma__foto { height: 280px; } .irma__preco { font-size: 24px; } .irma__base { flex-wrap: wrap; }
  .agendar { grid-template-columns: 1fr; gap: 40px; } .agendar__foto { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 1240px) { .hero__conteudo { flex-direction: column; align-items: stretch; justify-content: flex-end; } .tour { justify-content: space-between; } }
@media (max-width: 900px) { .irmas { grid-template-columns: 1fr; } .irma__foto { height: 320px; } .irma__preco { font-size: 28px; } }
@media (max-width: 640px) {
  .hero__midia img, .hero__midia video { object-position: 58% 60%; }
  .hero__midia::after { background: linear-gradient(180deg, rgba(7, 7, 6, .45), rgba(7, 7, 6, 0) 20%, rgba(7, 7, 6, 0) 40%, rgba(7, 7, 6, .9) 70%, var(--noite) 100%); }
  .hero__conteudo { padding-bottom: 24px; gap: 16px; } .hero__texto { gap: 16px; } .hero__texto .bt, .form__env { width: 100%; justify-content: space-between; margin-top: 0; }
  .tour__caps { display: none; } .tour { position: absolute; top: calc(var(--topo-h) + 8px); right: var(--margem); }
  .galeria { grid-template-columns: 1fr; grid-auto-rows: 400px; } .amb, .amb--7, .amb--5, .amb--4, .amb--4:last-child { grid-column: span 1; } .amb { padding: 16px; }
  .cab { margin-bottom: 32px; } .abas { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scrollbar-width: none; } .abas button { flex: none; }
  .planta__img { aspect-ratio: 4 / 3; } .irma__foto { height: 260px; } .irma__info { padding: 16px; }
  .ops--dias { grid-template-columns: repeat(3, 1fr); }
  .ok { padding: 24px; } .ok__bts, .ok__bts .bt { width: 100%; } .ok .bt--ouro { justify-content: space-between; }
  .fi { max-height: calc(100dvh - 32px); overflow-y: auto; } .fi[open] { grid-template-columns: 1fr; } .fi__foto { min-height: 220px; } .fi__txt { padding: 24px 16px; } .fi .bt { width: 100%; justify-content: space-between; } .fi__dados { padding-top: 8px; }
  .rod__nav { gap: 8px 24px; }
}
@media (hover: none) { .bt:hover .bt__seta .ic, .irma:hover .irma__ver .ic { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .rv { opacity: 1; translate: 0; } .js .rv img, .js .rv video { filter: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .bt--vidro, .selo, .tour__caps, .topo::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sup-2); } }
@media (forced-colors: active) { .bt, .bt-ic, .op span, .tour__caps button { border: 1px solid ButtonText; } }
.so-m { display: none; }
@media (max-width: 640px) { .so-d { display: none; } .so-m { display: inline; } }
@media (max-width: 359px) { :root { --h1: 28px; --h2: 28px; } .ops--casa .op span { font-size: 14px; } }
.fi .selo { background: var(--sup-3); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- v2: hero em 95%, abertura, cortina nas mídias, faixa presa, rodapé revelado ---------- */
main { position: relative; z-index: 1; background: var(--noite); }
.sec { position: relative; z-index: 1; background: var(--noite); }
.sec--sup { background: var(--sup); }
img { transition: opacity 500ms ease-out; }

/* hero: conteúdo e header em 95% da tela */
.hero__conteudo { width: min(100% - 32px, 95%); }
.topo { padding-inline: max(16px, 2.5%); transition: height 400ms var(--curva), padding 700ms var(--curva); }
.topo.is-solido { padding-inline: max(var(--margem), calc((100% - 1280px) / 2)); }
.hero__midia { transform-origin: 50% 60%; will-change: transform; animation: co-abre 2400ms var(--curva) both; }
@keyframes co-abre { from { transform: scale(1.1); } }
.hero__midia::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--noite); opacity: var(--c, 0); pointer-events: none; }
.hero__midia::after { z-index: 1; }
.hero__midia video { transition: opacity 400ms ease-out; }
.hero__texto { animation: none; }
.h-in { animation: co-hero 1000ms calc(200ms + var(--i) * 140ms) var(--curva) both; }
.tour { animation-delay: 800ms; }
.topo { animation: co-topo 800ms 300ms var(--curva) both; }
@keyframes co-topo { from { opacity: 0; translate: 0 -16px; } }

/* menu: sublinhado que desenha e item ativo */
.topo__nav a { position: relative; }
.topo__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--ouro); transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--curva-ui); }
.topo__nav a:hover::after, .topo__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.topo__nav a[aria-current] { color: var(--papel); }

/* botões: fundo que sobe por dentro */
.bt { position: relative; overflow: hidden; isolation: isolate; }
.bt--ouro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ouro-hover); transform: translateY(101%); transition: transform 350ms var(--curva-ui); }
.bt--ouro:hover { background: var(--ouro-fundo); } .bt--ouro:hover::before { transform: none; }

/* entrada: texto sobe, mídia abre como cortina e acende */
.js .rv:is(.amb, .irma, .agendar__foto, .planta__img) { opacity: 1; translate: 0; clip-path: inset(10% 6% 10% 6% round var(--raio)); }
.js .rv.in:is(.amb, .irma, .agendar__foto, .planta__img) { clip-path: inset(0 0 0 0 round var(--raio)); transition: clip-path 1200ms var(--d, 0ms) var(--curva); }
.js .rv:is(.amb, .irma, .agendar__foto, .planta__img) img, .js .amb.rv video { filter: brightness(.3); }
.js .rv.in:is(.amb, .irma, .agendar__foto, .planta__img) img, .js .amb.rv.in video { filter: none; transition: filter 1600ms calc(var(--d, 0ms) + 150ms) ease-out, transform 900ms var(--curva), opacity 500ms ease-out; }
.js .amb .amb__txt { opacity: 0; translate: 0 12px; }
.js .amb.in .amb__txt { opacity: 1; translate: 0; transition: opacity 800ms calc(var(--d, 0ms) + 500ms) var(--curva), translate 800ms calc(var(--d, 0ms) + 500ms) var(--curva); }
.js .cab.rv { opacity: 1; translate: 0; }
.js .cab > :not(h2) { opacity: 0; translate: 0 12px; }
.js .cab.in > :not(h2) { opacity: 1; translate: 0; transition: opacity 800ms var(--curva), translate 800ms var(--curva); }
.js .cab.in > .apoio { transition-delay: 350ms; }
.pal { display: inline-block; }
.js .cab .pal { opacity: 0; translate: 0 .35em; }
.js .cab.in .pal { opacity: 1; translate: 0; transition: opacity 700ms calc(var(--p) * 45ms) var(--curva), translate 700ms calc(var(--p) * 45ms) var(--curva); }

/* irmãs: as outras recuam quando uma ganha o ponteiro */
.irma { transition: background-color 400ms, opacity 400ms; }
@media (hover: hover) { .irmas:hover .irma:not(:hover) { opacity: .55; } }

/* confirmação do agendamento */
.ok .ic--32 { stroke-dasharray: 24; stroke-dashoffset: 24; animation: co-check 700ms 150ms var(--curva-ui) forwards; }
@keyframes co-check { to { stroke-dashoffset: 0; } }

/* ficha da irmã abre como as mídias */
.fi[open] { animation: co-fi 500ms var(--curva-ui); }
@keyframes co-fi { from { opacity: 0; clip-path: inset(8% 6% 8% 6% round var(--raio)); } to { opacity: 1; clip-path: inset(0 round var(--raio)); } }
.fi__foto img { transition: opacity 500ms ease-out; }

/* a partir de 1025px: hero presa, faixa horizontal e rodapé revelado */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .hero { position: sticky; top: 0; z-index: 0; }
  main { background: none; }
  .faixa { padding: 0; border-radius: 24px 24px 0 0; z-index: 1; }
  .faixa > .wrap { position: sticky; top: 0; width: 100%; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; padding-block: 96px 32px; }
  .faixa .cab { margin: 0 max(var(--margem), calc((100% - 1280px) / 2)) 32px; }
  .faixa h2 { white-space: nowrap; }
  .galeria { display: flex; flex: 1; min-height: 0; width: max-content; gap: 24px; padding-inline: max(var(--margem), calc((100vw - 1280px) / 2)); grid-auto-rows: unset; will-change: transform; }
  .amb, .amb--7, .amb--5, .amb--4 { flex: none; height: 100%; aspect-ratio: 16 / 9; }
  .amb::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--noite); opacity: var(--v, 0); pointer-events: none; }
  .amb__midia img, .amb__midia video { inset: 0 -6%; width: 112%; max-width: none; }
  .amb p { max-width: 56ch; }
  .rod { position: sticky; bottom: 0; z-index: 0; background: var(--sup); }
  .sec:last-of-type { border-radius: 0 0 24px 24px; }
}
@media (max-height: 760px) and (min-width: 1025px) { .faixa .apoio { display: none; } .faixa .selo { display: none; } }
.rod { background: var(--noite); }
.rod__l2 { align-items: center; }
.rod__sr span { white-space: nowrap; }
@media (max-width: 640px) { .rod__sr { flex-wrap: wrap; } .rod__sr img { height: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .js .rv:is(.amb, .irma, .agendar__foto, .planta__img) { clip-path: none; }
  .js .amb .amb__txt, .js .cab > :not(h2), .js .cab .pal { opacity: 1; translate: 0; }
  .hero__midia { animation: none; }
}