/* ============================================================
   UNA SPA — landing própria, na mesma linha do site (25/09/2026).
   Do material aprovado vêm só textos e fotos; a diagramação é desta página. Linha do site: Cabinet Grotesk
   500 (títulos), Satoshi (texto), Spline Sans Mono (rótulos e dados); marfim, tinta, areia, verde Western;
   um acento (cobre); canto curvo único em cima à direita; texto sobre foto só no véu de baixo; grão de filme.
   Assinatura: os cinco tons — um índice dos nomes que acende enquanto o mesmo UNA troca de pedra.
   Paleta das seções (revista em 25/09): marfim e areia se alternam entre as fotos de borda a borda; a noite
   (seis pessoas e incluso) é um bloco escuro só, no preto esverdeado; o fecho fica no verde do rodapé e os dois
   viram um bloco só no fim.
   Dials: energia 3, ritmo 3, movimento 2. Tudo aqui vale só em body[data-page="una"].
   Estados: celular (< 640), tablet (640 a 991), computador (>= 992).
   ============================================================ */

body[data-page="una"] {
  --u-marfim: #f9f6ed;
  --u-areia: #d8c7a7;
  --u-verde: #23261b;          /* o verde Western do rodapé do site */
  --u-tinta: #191711;
  --u-cobre: #93755e;          /* o acento: a seta de saída e o foco */
  --u-regra: rgba(80, 62, 45, .22);
  --u-regra-clara: rgba(249, 246, 237, .22);
  --u-display: "Cabinet Grotesk", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --u-texto: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --u-dados: "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --u-saida: cubic-bezier(.16, 1, .3, 1);
  --u-canto: 2px 32px 2px 2px;
  --u-veu: linear-gradient(to top, rgba(25,23,17,.74) 0%, rgba(25,23,17,.52) 34%, rgba(25,23,17,.18) 66%, rgba(25,23,17,0) 100%);
  --u-g: var(--ws-gutter, clamp(20px, 3.5vw, 64px));
  --u-espaco: clamp(84px, 10vw, 168px);
}
/* o grão do site não passa por cima: as fotos e os fundos já trazem o grão do universo UNA */
body[data-page="una"] .grain-bg { display: none !important; }
body[data-page="una"] ::selection { background: var(--u-areia); color: var(--u-tinta); }

/* ---------- fundos com grão (quadrado periódico, 1:1 com o pixel da tela) ---------- */
.una-pagina { background-color: var(--u-marfim); background-image: image-set(url("../img/una-site/grao-marfim-256.jpg") 1x, url("../img/una-site/grao-marfim-512.jpg") 2x, url("../img/una-site/grao-marfim-768.jpg") 3x); }
.una-pagina .u-sustentavel, .una-pagina .u-antes { background-color: var(--u-areia); background-image: image-set(url("../img/una-site/grao-areia-256.jpg") 1x, url("../img/una-site/grao-areia-512.jpg") 2x, url("../img/una-site/grao-areia-768.jpg") 3x); }
/* a noite: o grão do musgo multiplicado até o preto esverdeado; a foto das seis pessoas se dissolve nele */
.una-pagina .u-noite { background-color: #3a4230; background-image: image-set(url("../img/una-site/grao-musgo-256.jpg") 1x, url("../img/una-site/grao-musgo-512.jpg") 2x, url("../img/una-site/grao-musgo-768.jpg") 3x);
  background-blend-mode: multiply; color: var(--u-marfim); }
/* o fecho no verde do rodapé, com o mesmo grão nos dois (sem o grão do site, o rodapé ficaria liso ao lado) */
.una-pagina .u-fecho, body[data-page="una"] .ws-footer { background-color: var(--u-verde); background-image: image-set(url("../img/una-site/grao-verde-256.jpg") 1x, url("../img/una-site/grao-verde-512.jpg") 2x, url("../img/una-site/grao-verde-768.jpg") 3x); color: var(--u-marfim); }
.una-pagina, .una-pagina .u-sustentavel, .una-pagina .u-antes, .una-pagina .u-noite, .una-pagina .u-fecho, body[data-page="una"] .ws-footer { background-size: 256px 256px; background-repeat: repeat; }
/* a divisa entre o fecho e o rodapé: um fio nas margens, como os fios da página */
body[data-page="una"] .ws-footer::before { content: ""; position: absolute; top: 0; left: var(--ws-gutter, 24px); right: var(--ws-gutter, 24px); height: 1px; background: var(--u-regra-clara); }

/* ---------- base ---------- */
.una-pagina { color: var(--u-tinta); font-family: var(--u-texto); -webkit-font-smoothing: antialiased; }
.una-pagina :where(section) :is(h1, h2, h3, p, figure, ul, ol, li, dl, dt, dd) { margin: 0; padding: 0; }
.una-pagina :where(section) :is(ul, ol) { list-style: none; }
.una-pagina :where(section) img { display: block; max-width: none; }
.una-pagina section { position: relative; }
.una-pagina a:focus-visible, .una-pagina button:focus-visible { outline: 2px solid var(--u-cobre); outline-offset: 4px; border-radius: 2px; }
.una-pagina figure { position: relative; overflow: hidden; }
.una-pagina figure picture { display: block; width: 100%; height: 100%; }
.una-pagina figure img { width: 100%; height: 100%; object-fit: cover; }

/* tipo: uma frase de cena, um título de seção, o texto, o rótulo e a nota */
.una-pagina .u-frase { font: 500 clamp(44px, 7vw, 128px)/.96 var(--u-display); letter-spacing: -.042em; text-wrap: balance; }
.una-pagina .u-titulo { font: 500 clamp(34px, 4.2vw, 72px)/1.02 var(--u-display); letter-spacing: -.035em; text-wrap: balance; }
.una-pagina .u-texto { font: 400 clamp(17px, 1.3vw, 21px)/1.6 var(--u-texto); max-width: 38ch; text-wrap: pretty; }
.una-pagina .u-texto--longo { max-width: 44ch; }
.una-pagina .u-rotulo { font: 500 12px/1.5 var(--u-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.una-pagina .u-nota { font: 400 clamp(14.5px, 1vw, 16px)/1.5 var(--u-texto); max-width: 52ch; opacity: .74; }

/* véu: o texto sobre foto mora só no escuro de baixo */
.una-pagina .u-veu { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; pointer-events: none; background: var(--u-veu); z-index: 1; }

/* botão: uma ação de verdade (abre o WhatsApp); a seta diz que o toque sai da página */
.una-pagina .u-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 0 22px 0 26px;
  background: var(--u-tinta); color: var(--u-marfim); border-radius: 2px 16px 2px 2px; text-decoration: none;
  font: 500 clamp(17px, 1.25vw, 20px)/1 var(--u-display); letter-spacing: -.01em; transition: background-color .3s ease, transform .3s var(--u-saida); }
.una-pagina .u-botao--claro { background: var(--u-marfim); color: var(--u-tinta); }
.una-pagina .u-seta { width: 26px; height: 26px; flex: none; }
.una-pagina .u-seta path { fill: none; stroke: var(--u-cobre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--u-saida); }
@media (hover: hover) {
  .una-pagina .u-botao:hover { transform: translateY(-2px); }
  .una-pagina .u-botao:hover .u-seta path { transform: translate(3px, -3px); }
}
.una-pagina .u-botao:active { transform: translateY(0); }

/* ============================================================ 1. abertura: a capa de borda a borda */
.una-pagina .u-abre { height: 100svh; min-height: 620px; max-height: 1180px; color: var(--u-marfim); overflow: hidden; }
.una-pagina .u-abre-foto { position: absolute; inset: 0; }
.una-pagina .u-abre-texto { position: absolute; z-index: 2; left: var(--u-g); right: var(--u-g); bottom: clamp(34px, 7vh, 84px);
  display: grid; justify-items: start; gap: 22px; max-width: 1080px; }
.una-pagina .u-abre-logo { width: clamp(156px, 15vw, 260px); height: auto; margin-bottom: 4px; filter: drop-shadow(0 0 18px #19171155); }
.una-pagina .u-abre-titulo { font: 500 clamp(40px, 5.4vw, 98px)/.98 var(--u-display); letter-spacing: -.04em; max-width: 13ch; text-wrap: balance; text-shadow: 0 0 24px #19171166; }
.una-pagina .u-abre-fatos { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 12px/1.4 var(--u-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.una-pagina .u-abre-fatos li + li::before { content: "·"; margin-right: 28px; opacity: .6; }
.una-pagina .u-abre .u-botao { margin-top: 10px; }
/* uma sombra bem leve vinda da esquerda, só para o logo UNA Spa ler sobre a parede clara (pedido do dono, 25/09) */
.una-pagina .u-abre .u-veu { background: linear-gradient(to right, rgba(25,23,17,.3) 0%, rgba(25,23,17,.12) 34%, rgba(25,23,17,0) 58%), var(--u-veu); }

/* ============================================================ 2. um novo conceito: a frase e a panorâmica */
.una-pagina .u-conceito { padding: var(--u-espaco) var(--u-g) calc(var(--u-espaco) * .8); }
.una-pagina .u-conceito-texto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; }
.una-pagina .u-conceito .u-frase { grid-column: 1 / span 8; }
.una-pagina .u-conceito .u-texto { grid-column: 9 / -1; padding-bottom: .6em; }
.una-pagina .u-panorama { margin-top: clamp(48px, 6vw, 104px); aspect-ratio: 21 / 9; border-radius: var(--u-canto); }

/* ============================================================ 3 e 5. cenas de borda a borda */
.una-pagina .u-cena { height: 100svh; min-height: 620px; max-height: 1180px; color: var(--u-marfim); overflow: hidden; }
.una-pagina .u-cena-foto { position: absolute; inset: 0; }
.una-pagina .u-cena-texto { position: absolute; z-index: 2; left: var(--u-g); right: var(--u-g); bottom: clamp(40px, 8vh, 96px); display: grid; gap: 22px; }
.una-pagina .u-cena .u-frase, .una-pagina .u-cena .u-texto { text-shadow: 0 0 14px #19171180; }
.una-pagina .u-cena .u-texto { max-width: 34ch; opacity: .92; }
/* o toque fala do outro lado: a mão entra pela esquerda, o texto responde à direita */
.una-pagina .u-cena--toque .u-cena-texto { justify-items: end; text-align: right; }

/* ============================================================ 4. ateliê: a foto em pé encostada na borda */
.una-pagina .u-atelie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  padding: var(--u-espaco) var(--u-g) var(--u-espaco) 0; }
.una-pagina .u-atelie-foto { grid-column: 1 / span 5; aspect-ratio: 4 / 5.2; border-radius: 0 32px 2px 0; }
.una-pagina .u-atelie-texto { grid-column: 7 / -1; display: grid; gap: 30px; }

/* ============================================================ 6. onde cabe: o jardim grande e, embaixo, o par (deck e cobertura) */
.una-pagina .u-lugares { padding: var(--u-espaco) var(--u-g); }
.una-pagina .u-lugares-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.una-pagina .u-lugares-cabeca .u-titulo { grid-column: 1 / span 7; }
.una-pagina .u-lugares-cabeca .u-texto { grid-column: 9 / -1; }
.una-pagina .u-lugar { display: grid; gap: 14px; overflow: visible; }
.una-pagina .u-lugar--grande { margin-top: clamp(48px, 5vw, 88px); }
.una-pagina .u-lugar-foto { position: relative; overflow: hidden; border-radius: var(--u-canto); aspect-ratio: 4 / 3; }
.una-pagina .u-lugar--grande .u-lugar-foto { aspect-ratio: 16 / 9; }
.una-pagina .u-lugares-par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 28px); margin-top: clamp(40px, 4vw, 72px); }
.una-pagina .u-lugar figcaption { font: 500 12px/1.4 var(--u-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

/* ============================================================ 7. sustentável: a foto à esquerda, o texto responde à direita */
.una-pagina .u-sustentavel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: var(--u-espaco) var(--u-g); }
.una-pagina .u-sustentavel-foto { grid-column: 1 / span 7; grid-row: 1; aspect-ratio: 1152 / 1080; border-radius: var(--u-canto); }
.una-pagina .u-sustentavel-texto { grid-column: 9 / -1; grid-row: 1; display: grid; gap: 30px; }

/* ============================================================ 8. assinatura: o mesmo UNA, em cinco tons */
.una-pagina .u-tons { padding: var(--u-espaco) var(--u-g); }
.una-pagina .u-tons-palco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center; }
.una-pagina .u-tons-indice { grid-column: 1 / span 4; display: grid; gap: clamp(28px, 3vw, 48px); align-self: start; }
.una-pagina .u-tons-lista { grid-column: 5 / -1; display: grid; gap: 18px; position: relative; }
.una-pagina .u-tom { aspect-ratio: 1.4; border-radius: var(--u-canto); }
.una-pagina .u-tom-nome { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 9px 14px 8px; border-radius: 2px 14px 2px 2px;
  background: var(--u-marfim); color: var(--u-tinta); font: 500 16px/1 var(--u-display); }
.una-pagina .u-tons-nomes { display: none; }
.una-pagina .u-tons-nomes button { appearance: none; background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer; color: inherit; text-align: left;
  font: 500 clamp(40px, 5.2vw, 92px)/1 var(--u-display); letter-spacing: -.04em; opacity: .16; transition: opacity .6s ease; }
.una-pagina .u-tons-nomes button[aria-current="true"] { opacity: 1; }
@media (hover: hover) { .una-pagina .u-tons-nomes button:hover { opacity: .5; } .una-pagina .u-tons-nomes button[aria-current="true"]:hover { opacity: 1; } }

/* palco (com JS e sem "reduzir movimento"): a lista vira um quadro fixo e os nomes, o índice */
.una-palco .una-pagina .u-tons { height: calc(100svh * 4.6); padding: 0 var(--u-g); overflow: visible; }
.una-palco .una-pagina .u-tons-palco { position: sticky; top: 0; height: 100svh; align-content: center; }
.una-palco .una-pagina .u-tons-nomes { display: grid; gap: clamp(2px, .4vw, 8px); }
.una-palco .una-pagina .u-tons-lista { display: block; aspect-ratio: 1.4; overflow: hidden; border-radius: var(--u-canto); }
.una-palco .una-pagina .u-tons-lista .u-tom { position: absolute; inset: 0; aspect-ratio: auto; width: auto; height: auto; border-radius: 0; opacity: var(--o, 0); }
.una-palco .una-pagina .u-tons-lista .u-tom:first-child { opacity: 1; }
.una-palco .una-pagina .u-tom-nome { display: none; }

/* ============================================================ 9 e 10. a noite: seis pessoas e o incluso, um bloco escuro só.
   O texto fica numa coluna só (1 a 5) nas duas seções; a foto sai pela borda direita e se dissolve no preto
   pela esquerda (a árvore escura da foto encosta no texto), por cima e por baixo (encosta no incluso). */
.una-pagina .u-medidas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  padding: var(--u-espaco) var(--u-g) 0; }
.una-pagina .u-medidas-foto { grid-column: 6 / -1; grid-row: 1; margin-right: calc(var(--u-g) * -1); aspect-ratio: 1.15;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 12%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 12%, #000 78%, transparent 100%);
  mask-composite: intersect; }
.una-pagina .u-medidas-texto { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: 28px; align-content: center; position: relative; z-index: 2; }
.una-pagina .u-dimensoes { display: grid; margin: 4px 0; border-bottom: 1px solid var(--u-regra-clara); }
.una-pagina .u-dimensoes div { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: baseline; border-top: 1px solid var(--u-regra-clara); padding: 8px 0 12px; }
.una-pagina .u-dimensoes dd { grid-column: 1; grid-row: 1; font: 300 clamp(48px, 5vw, 92px)/1 var(--u-display); letter-spacing: -.045em; font-variant-numeric: lining-nums tabular-nums; }
.una-pagina .u-dimensoes dd span { font: 400 .28em/1 var(--u-texto); letter-spacing: 0; margin-left: .12em; }
.una-pagina .u-dimensoes dt { grid-column: 2; grid-row: 1; font: 500 11.5px/1.4 var(--u-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

.una-pagina .u-incluso { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start;
  padding: clamp(56px, 6vw, 104px) var(--u-g) var(--u-espaco); }
.una-pagina .u-incluso > .u-titulo { grid-column: 1 / span 5; }
.una-pagina .u-itens { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 36px); row-gap: clamp(22px, 2.4vw, 36px); }
.una-pagina .u-itens div { border-top: 1px solid var(--u-regra-clara); padding-top: 16px; display: grid; gap: 6px; }
.una-pagina .u-itens dt { font: 500 clamp(18px, 1.35vw, 23px)/1.15 var(--u-display); letter-spacing: -.012em; }
.una-pagina .u-itens dd { font: 400 clamp(14.5px, 1vw, 16px)/1.4 var(--u-texto); opacity: .78; }

/* ============================================================ 11. antes de pedir: o valor e, com foco menor, o espaço.
   Desde 06/10 (sem preço, decisão do dono): a foto do UNA ao lado da piscina e, ao lado, "Valores sob consulta.", as
   condições com o time e o que está incluso e à parte, como a pág. 13 do material sem preço. O que o espaço
   precisa ter vem depois de um fio, num título pequeno, com os quatro pontos desenhados. */
.una-pagina .u-antes { display: grid; row-gap: clamp(64px, 7vw, 120px); padding: var(--u-espaco) var(--u-g); }
.una-pagina .u-antes-linha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: start; }
.una-pagina .u-valor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center; }
.una-pagina .u-valor-foto { grid-column: 1 / span 6; aspect-ratio: 800 / 840; border-radius: var(--u-canto); }
.una-pagina .u-valor-texto { grid-column: 8 / -1; display: grid; justify-items: start; gap: 26px; }
.una-pagina .u-valor-texto > .u-texto { text-wrap: balance; }
.una-pagina .u-ficha { width: 100%; }
.una-pagina .u-ficha div { display: grid; grid-template-columns: minmax(96px, 22%) 1fr; column-gap: 20px; align-items: baseline; border-top: 1px solid var(--u-regra); padding: 18px 0 20px; }
.una-pagina .u-ficha div:last-child { border-bottom: 1px solid var(--u-regra); }
.una-pagina .u-ficha dt { font: 500 11.5px/1.5 var(--u-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.una-pagina .u-ficha dd { font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--u-texto); max-width: 46ch; }
.una-pagina .u-requisitos { border-top: 1px solid var(--u-regra); padding-top: clamp(28px, 3vw, 44px); }
.una-pagina .u-requisitos-cabeca { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: start; }
.una-pagina .u-subtitulo { font: 500 clamp(22px, 1.8vw, 30px)/1.12 var(--u-display); letter-spacing: -.02em; text-wrap: balance; }
.una-pagina .u-requisitos .u-nota { max-width: 34ch; }
.una-pagina .u-reqs { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 28px); }
.una-pagina .u-reqs li { display: grid; gap: 16px; align-content: start; font: 500 clamp(16px, 1.15vw, 19px)/1.25 var(--u-display); letter-spacing: -.01em; }
.una-pagina .u-icone { width: clamp(42px, 3.4vw, 54px); height: auto; aspect-ratio: 1; margin-left: -4px; }
.una-pagina .u-icone :is(path, circle, rect) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================ 12. fecho, no verde do rodapé */
.una-pagina .u-fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(48px, 5vw, 88px); padding: var(--u-espaco) var(--u-g); }
.una-pagina .u-fecho-cabeca { grid-column: 1 / -1; display: grid; gap: 30px; justify-items: start; }
.una-pagina .u-fecho-logo { width: clamp(104px, 8vw, 150px); height: auto; }
.una-pagina .u-caminho { grid-column: 1 / span 7; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 28px; align-content: start; }
.una-pagina .u-caminho li { border-top: 1px solid var(--u-regra-clara); padding-top: 16px; display: grid; gap: 10px; }
.una-pagina .u-caminho span { font: 500 12px/1 var(--u-dados); letter-spacing: .14em; opacity: .7; }
.una-pagina .u-caminho p { font: 400 clamp(16.5px, 1.2vw, 20px)/1.45 var(--u-texto); max-width: 30ch; }
.una-pagina .u-fecho-acao { grid-column: 9 / -1; display: grid; gap: 18px; align-content: start; justify-items: start; }
.una-pagina .u-numero { font: 300 clamp(36px, 3.4vw, 60px)/1 var(--u-display); letter-spacing: -.03em; color: inherit; text-decoration: none; margin-top: 18px; font-variant-numeric: lining-nums; }
.una-pagina .u-fecho .u-nota { margin-top: 10px; }

/* ============================================================ movimento (só com JS e sem "reduzir movimento") */
.una-vivo .una-pagina .u-camera img { transform: scale(calc(1.02 + .085 * var(--p, 0))); transform-origin: 50% 58%; }
.una-vivo .una-pagina .u-camera.u-perto img { will-change: transform; }
.una-vivo .una-pagina .u-sussurro { opacity: 0; filter: blur(14px); transform: translateY(14px); }
.una-vivo .una-pagina .u-ouvindo .u-sussurro { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 1.9s var(--u-saida), filter 2.3s var(--u-saida), transform 2.3s var(--u-saida); }
.una-vivo .una-pagina .u-ouvindo .u-sussurro + .u-sussurro { transition-delay: .5s; }
.una-vivo .una-pagina .u-abre-foto img { animation: u-assenta 2.8s var(--u-saida) .3s both; }
.una-vivo .una-pagina .u-abre-texto > * { animation: u-sobe 1.4s var(--u-saida) both; }
.una-vivo .una-pagina .u-abre-texto > :nth-child(2) { animation-delay: .12s; }
.una-vivo .una-pagina .u-abre-texto > :nth-child(3) { animation-delay: .24s; }
.una-vivo .una-pagina .u-abre-texto > :nth-child(4) { animation-delay: .36s; }
@keyframes u-assenta { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes u-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================ tablet (640 a 991): uma coluna com respiro */
@media (max-width: 991.98px) {
  .una-pagina .u-conceito-texto, .una-pagina .u-lugares-cabeca { grid-template-columns: 1fr; }
  .una-pagina .u-conceito .u-frase, .una-pagina .u-conceito .u-texto,
  .una-pagina .u-lugares-cabeca .u-titulo, .una-pagina .u-lugares-cabeca .u-texto { grid-column: auto; }
  .una-pagina .u-panorama { aspect-ratio: 4 / 3; }
  .una-pagina .u-atelie, .una-pagina .u-sustentavel, .una-pagina .u-medidas, .una-pagina .u-incluso, .una-pagina .u-antes-linha, .una-pagina .u-valor, .una-pagina .u-fecho { grid-template-columns: 1fr; }
  .una-pagina .u-valor-foto { aspect-ratio: 4 / 3; }
  .una-pagina .u-atelie { padding: var(--u-espaco) 0; row-gap: 44px; }
  .una-pagina .u-atelie-foto, .una-pagina .u-atelie-texto, .una-pagina .u-sustentavel-texto, .una-pagina .u-sustentavel-foto,
  .una-pagina .u-medidas-foto, .una-pagina .u-medidas-texto, .una-pagina .u-incluso > .u-titulo, .una-pagina .u-itens,
  .una-pagina .u-valor-foto, .una-pagina .u-valor-texto, .una-pagina .u-requisitos-cabeca, .una-pagina .u-reqs,
  .una-pagina .u-caminho, .una-pagina .u-fecho-acao { grid-column: auto; grid-row: auto; }
  .una-pagina .u-atelie-foto { aspect-ratio: 4 / 5; border-radius: 0 32px 2px 0; width: 92%; }
  .una-pagina .u-atelie-texto { padding: 0 var(--u-g); }
  .una-pagina .u-sustentavel { row-gap: 44px; }
  /* a noite abre com a foto de borda a borda, que se dissolve para baixo no preto onde o texto começa */
  .una-pagina .u-medidas { padding-top: 0; row-gap: 12px; }
  .una-pagina .u-medidas-foto { margin: 0 calc(var(--u-g) * -1);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-composite: add; }
  .una-pagina .u-incluso { padding-top: 72px; }
  .una-pagina .u-tons-palco { grid-template-columns: 1fr; }
  .una-pagina .u-tons-indice, .una-pagina .u-tons-lista { grid-column: auto; }
  .una-palco .una-pagina .u-tons-palco { align-content: start; padding-top: max(92px, 11svh); row-gap: 22px; }
  .una-palco .una-pagina .u-tons-indice { gap: 16px; }
  .una-palco .una-pagina .u-tons-nomes { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .una-palco .una-pagina .u-tons-nomes button { font-size: clamp(22px, 5.4vw, 34px); padding: 8px 0; }
  .una-palco .una-pagina .u-tons-lista { aspect-ratio: auto; height: min(56svh, 128vw); }
}

/* ============================================================ celular (< 640): uma coluna, na escala do telefone */
@media (max-width: 639.98px) {
  body[data-page="una"] { --u-espaco: 76px; }
  .una-pagina .u-abre { height: 92svh; min-height: 560px; }
  .una-pagina .u-abre-texto { gap: 16px; bottom: 30px; }
  .una-pagina .u-abre-fatos { gap: 6px 16px; font-size: 11px; }
  .una-pagina .u-abre-fatos li + li::before { margin-right: 16px; }
  .una-pagina .u-abre .u-botao { width: 100%; }
  .una-pagina .u-cena { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .una-pagina .u-cena-texto { gap: 14px; bottom: 30px; }
  .una-pagina .u-cena .u-frase { font-size: clamp(36px, 10vw, 46px); }
  .una-pagina .u-panorama { aspect-ratio: 4 / 5; margin-left: calc(var(--u-g) * -1); margin-right: calc(var(--u-g) * -1); border-radius: 0; }
  /* os lugares, um embaixo do outro, em pé */
  .una-pagina .u-lugar--grande { margin-top: 40px; }
  .una-pagina .u-lugar-foto, .una-pagina .u-lugar--grande .u-lugar-foto { aspect-ratio: 4 / 5; }
  .una-pagina .u-lugares-par { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .una-pagina .u-sustentavel-foto { aspect-ratio: 1080 / 760; margin: 0 calc(var(--u-g) * -1); border-radius: 0; }
  .una-pagina .u-tons-lista .u-tom { aspect-ratio: 4 / 5; }
  .una-palco .una-pagina .u-tons-palco { padding-top: max(96px, 12svh); }
  .una-palco .una-pagina .u-tons-lista { height: min(54svh, 116vw); margin: 0 calc(var(--u-g) * -1); border-radius: 0; }
  .una-pagina .u-medidas-foto { aspect-ratio: 4 / 5; }
  .una-pagina .u-dimensoes dd { font-size: clamp(40px, 12vw, 56px); }
  .una-pagina .u-incluso { padding-top: 64px; }
  .una-pagina .u-itens { grid-template-columns: 1fr 1fr; }
  .una-pagina .u-reqs { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .una-pagina .u-reqs li { font-size: 16.5px; gap: 12px; }
  .una-pagina .u-valor { row-gap: 32px; }
  .una-pagina .u-valor-foto { margin: 0 calc(var(--u-g) * -1); border-radius: 0; }
  .una-pagina .u-valor-texto { gap: 22px; }
  .una-pagina .u-ficha div { grid-template-columns: 1fr; row-gap: 8px; padding: 16px 0 18px; }
  .una-pagina .u-ficha dd { font-size: 17px; }
  .una-pagina .u-caminho { grid-template-columns: 1fr; }
  .una-pagina .u-fecho-acao .u-botao { width: 100%; }
}