/* ==========================================================================
   Recanto das Nuvens — folha de estilo única
   Camadas em ordem de especificidade crescente.
   ========================================================================== */
@layer base, tipografia, layout, componentes, movimento, utilidades;

/* ------------------------------------------------------------------ base */
@layer base {
  :root {
    color-scheme: dark light;

    /* paleta em oklch — matiz consistente entre claro e escuro */
    --noite-900: oklch(16% 0.028 250);
    --noite-800: oklch(21% 0.032 248);
    --noite-700: oklch(27% 0.035 245);
    --noite-600: oklch(35% 0.034 242);
    --nevoa-400: oklch(64% 0.022 235);
    --nevoa-200: oklch(85% 0.014 230);
    --nevoa-100: oklch(94% 0.010 225);
    --brasa:     oklch(72% 0.155 55);
    --brasa-alt: oklch(80% 0.135 72);
    --musgo:     oklch(58% 0.090 155);

    /* papéis semânticos (tema escuro é o padrão) */
    --fundo:       var(--noite-900);
    --fundo-alto:  var(--noite-800);
    --fundo-topo:  var(--noite-700);
    --tinta:       var(--nevoa-100);
    --tinta-suave: var(--nevoa-400);
    --destaque:    var(--brasa);
    --borda:       oklch(from var(--tinta) l c h / 0.14);
    --borda-forte: oklch(from var(--tinta) l c h / 0.28);
    --vidro:       oklch(from var(--noite-900) l c h / 0.62);

    /* tipografia fluida: escala entre 380px e 1600px de viewport */
    --passo--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
    --passo-0:  clamp(1rem, 0.95rem + 0.22vw, 1.14rem);
    --passo-1:  clamp(1.22rem, 1.11rem + 0.5vw, 1.55rem);
    --passo-2:  clamp(1.52rem, 1.29rem + 1.0vw, 2.2rem);
    --passo-3:  clamp(1.9rem, 1.45rem + 1.9vw, 3.2rem);
    --passo-4:  clamp(2.4rem, 1.5rem + 3.8vw, 4.8rem);
    --passo-5:  clamp(3rem, 1.2rem + 7.6vw, 8rem);

    --serifa: "Fraunces", "Bodoni MT", Didot, "Playfair Display", Georgia, serif;
    --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

    --ritmo: clamp(4rem, 10vh, 9rem);
    --gutter: clamp(1.15rem, 4vw, 4rem);
    --largura: 78rem;
    --raio: 1.25rem;
    --raio-p: 0.6rem;

    --sombra: 0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 34px -12px oklch(0% 0 0 / 0.55);
    --sombra-alta: 0 2px 6px oklch(0% 0 0 / 0.35), 0 40px 80px -28px oklch(0% 0 0 / 0.7);

    --mola: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --suave: cubic-bezier(0.22, 1, 0.36, 1);
  }

  :root[data-tema="claro"] {
    color-scheme: light;
    --fundo:       oklch(97.5% 0.008 220);
    --fundo-alto:  oklch(100% 0 0);
    --fundo-topo:  oklch(93% 0.012 220);
    --tinta:       oklch(22% 0.030 245);
    --tinta-suave: oklch(46% 0.024 240);
    --destaque:    oklch(56% 0.155 45);
    --borda:       oklch(from var(--tinta) l c h / 0.13);
    --borda-forte: oklch(from var(--tinta) l c h / 0.26);
    --vidro:       oklch(100% 0 0 / 0.72);
    --sombra: 0 1px 2px oklch(40% 0.03 240 / 0.10), 0 12px 30px -14px oklch(40% 0.03 240 / 0.28);
    --sombra-alta: 0 2px 8px oklch(40% 0.03 240 / 0.12), 0 40px 70px -30px oklch(40% 0.03 240 / 0.4);
  }

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 6rem;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--passo-0);
    line-height: 1.65;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.5s var(--suave), color 0.5s var(--suave);
  }

  img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
  img { background: var(--fundo-topo); }

  a { color: inherit; text-decoration-color: oklch(from currentColor l c h / 0.35); text-underline-offset: 0.25em; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--destaque);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection { background: var(--destaque); color: var(--noite-900); }

  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--borda-forte);
    border-radius: 99px;
    border: 3px solid var(--fundo);
  }
}

/* ------------------------------------------------------------ tipografia */
@layer tipografia {
  h1, h2, h3, .serifa {
    font-family: var(--serifa);
    font-weight: 400;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  h1 { font-size: var(--passo-4); }
  h2 { font-size: var(--passo-3); }
  h3 { font-size: var(--passo-1); font-variation-settings: "opsz" 20; letter-spacing: -0.012em; }

  p { text-wrap: pretty; max-width: 68ch; }

  .olho {
    font-family: var(--sans);
    font-size: var(--passo--1);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--destaque);
    display: flex;
    align-items: center;
    gap: 0.8em;
    /* Sem isto, em tela estreita o item encolhe e "Sapucaí-Mirim" quebra depois
       do hífen — vira "SAPUCAÍ-" numa linha e "MIRIM" na outra. Cada pedaço
       passa a ser indivisível, e a linha inteira quebra entre os pedaços. */
    flex-wrap: wrap;
  }
  /* A linha "Sapucaí-Mirim · MG · Serra da Mantiqueira", no topo, é a única
     com pedaços marcados. Cada pedaço é indivisível e o separador vem do CSS,
     colado nele — escrito no HTML, virava item solto e podia sobrar pendurado. */
  .heroi .olho > span { white-space: nowrap; }
  .heroi .olho > span + span::before { content: "· "; opacity: 0.65; }

  @media (width < 34rem) {
    /* 0,22em de espaçamento é bonito e caro: em 390px come a linha toda */
    .olho { letter-spacing: 0.14em; gap: 0.6em; }
    /* Em vez de deixar a quebra ao acaso — e o ponto abrindo a segunda linha —
       a região passa a ter linha própria, e ali o separador não faz sentido. */
    .heroi .olho > span:last-child { flex-basis: 100%; }
    .heroi .olho > span:last-child::before { content: none; }
  }
  .olho::before {
    content: "";
    inline-size: clamp(1.5rem, 4vw, 3rem);
    block-size: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  .lead { font-size: var(--passo-1); color: var(--tinta-suave); line-height: 1.5; max-width: 46ch; }
  .miudo { font-size: var(--passo--1); color: var(--tinta-suave); }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .envelope {
    inline-size: min(100% - var(--gutter) * 2, var(--largura));
    margin-inline: auto;
  }
  .envelope-largo { inline-size: min(100% - var(--gutter) * 2, 96rem); margin-inline: auto; }

  section { position: relative; }
  .secao { padding-block: var(--ritmo); }

  .cabeca-secao {
    display: grid;
    gap: 1.1rem;
    margin-block-end: clamp(2.5rem, 6vh, 4.5rem);
    max-width: 54rem;
  }

  .grade { display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
  .duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .tres { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
}

/* ----------------------------------------------------------- componentes */
@layer componentes {

  /* ---------- barra de navegação ---------- */
  .navegacao {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.7rem, 1.6vh, 1.1rem) var(--gutter);
    transition: background-color 0.45s var(--suave), backdrop-filter 0.45s, border-color 0.45s, padding 0.45s var(--suave);
    border-block-end: 1px solid transparent;
    view-transition-name: navegacao;
  }
  .navegacao[data-fixa="sim"] {
    background: var(--vidro);
    backdrop-filter: blur(20px) saturate(1.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    border-block-end-color: var(--borda);
  }

  /* Antes de rolar, a barra fica sobre a foto do topo — e uma foto clara
     engoliria a marca no tema claro. Enquanto ela estiver sobreposta à mídia,
     o texto vai claro, com um véu suave para garantir o contraste. */
  body:has(.heroi[data-midia]) .navegacao:not([data-fixa="sim"]) {
    background: linear-gradient(to bottom, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.15) 65%, transparent);
    color: var(--nevoa-100);
  }
  body:has(.heroi[data-midia]) .navegacao:not([data-fixa="sim"]) .marca > span > span,
  body:has(.heroi[data-midia]) .navegacao:not([data-fixa="sim"]) .menu a {
    color: oklch(from var(--nevoa-100) l c h / 0.82);
  }
  body:has(.heroi[data-midia]) .navegacao:not([data-fixa="sim"]) .menu a:hover {
    color: var(--nevoa-100);
  }
  body:has(.heroi[data-midia]) .navegacao:not([data-fixa="sim"]) .pilula {
    border-color: oklch(100% 0 0 / 0.35);
    background: oklch(0% 0 0 / 0.3);
    color: var(--nevoa-100);
  }

  .marca {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    margin-inline-end: auto;
    font-family: var(--serifa);
    font-size: var(--passo-0);
    letter-spacing: -0.01em;
    line-height: 1.05;
  }
  .marca svg { inline-size: 2.15rem; block-size: 2.15rem; flex: none; color: var(--destaque); }
  /* o <span> que embrulha; não pode herdar o estilo da assinatura interna */
  .marca > span { display: grid; gap: 0.1rem; }
  .marca b { font-weight: 400; display: block; font-size: var(--passo-0); line-height: 1.1; }
  .marca > span > span {
    display: block;
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }

  .menu { display: flex; align-items: center; gap: clamp(0.3rem, 1.4vw, 1.5rem); list-style: none; padding: 0; }
  .menu a {
    text-decoration: none;
    font-size: var(--passo--1);
    letter-spacing: 0.03em;
    color: var(--tinta-suave);
    padding: 0.5rem 0.15rem;
    position: relative;
    transition: color 0.3s;
  }
  .menu a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.15rem;
    block-size: 1px;
    background: var(--destaque);
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.4s var(--suave);
  }
  .menu a:hover { color: var(--tinta); }
  .menu a:hover::after, .menu a[aria-current="page"]::after { scale: 1 1; }

  @media (width < 62rem) {
    .menu { display: none; }
  }

  /* No celular a barra do topo tinha mais coisa do que largura: a assinatura da
     marca quebrava em três linhas e o botão "Ver disponibilidade" era cortado
     pela borda da tela. Aqui ela fica com o essencial — marca, tema e um botão
     curto. A chamada completa está logo abaixo, no próprio topo, e o botão
     flutuante do WhatsApp continua onde estava. */
  @media (width < 34rem) {
    .navegacao { gap: 0.6rem; }
    .marca { gap: 0.5rem; font-size: var(--passo--1); }
    .marca svg { inline-size: 1.8rem; block-size: 1.8rem; }
    /* a assinatura sai: em duas linhas ela empurrava tudo para fora */
    .marca > span > span { display: none; }
    .marca b { white-space: nowrap; }
    #btn-topo-reserva {
      padding-inline: 0.85rem;
      font-size: 0.78rem;
      white-space: nowrap;
    }
    /* o rótulo longo dá lugar a um curto, sem mexer no que o painel guarda */
    #btn-topo-reserva { font-size: 0; }
    #btn-topo-reserva::after {
      content: "Reservar";
      font-size: 0.8rem;
      letter-spacing: 0.01em;
    }
  }

  /* Abaixo de 384px — Android comum de 360, iPhone SE de 320 — não há largura
     para marca, tema e botão ao mesmo tempo. Some o botão, e não a marca: a
     mesma chamada está logo abaixo no topo da página, e o botão flutuante do
     WhatsApp continua no canto. Cortar o nome do lugar seria pior. */
  @media (width < 24rem) {
    #btn-topo-reserva,
    #btn-reservar-topo { display: none; }
  }

  /* ---------- botões ---------- */
  .btn {
    --btn-fundo: var(--destaque);
    --btn-tinta: oklch(18% 0.03 60);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.85em 1.6em;
    border: 1px solid transparent;
    border-radius: 99px;
    background: var(--btn-fundo);
    color: var(--btn-tinta);
    font-size: var(--passo--1);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--mola), box-shadow 0.35s var(--suave), background-color 0.3s;
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
      oklch(100% 0 0 / 0.32), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px oklch(from var(--btn-fundo) l c h / 0.55); }
  .btn:hover::before { opacity: 1; }
  .btn:active { transform: translateY(0) scale(0.98); }

  .btn-fantasma {
    --btn-fundo: transparent;
    --btn-tinta: var(--tinta);
    border-color: var(--borda-forte);
    backdrop-filter: blur(8px);
  }
  .btn-fantasma:hover { border-color: var(--tinta); box-shadow: none; }

  /* sobre foto, a borda fina do botão fantasma some: precisa de contorno próprio */
  .heroi[data-midia] .btn-fantasma {
    --btn-tinta: var(--nevoa-100);
    border-color: oklch(100% 0 0 / 0.5);
    background: oklch(0% 0 0 / 0.25);
  }
  .heroi[data-midia] .btn-fantasma:hover { border-color: oklch(100% 0 0 / 0.9); }

  .btn-zap { --btn-fundo: oklch(68% 0.17 150); --btn-tinta: oklch(15% 0.03 150); }

  /* ---------- herói ---------- */
  .heroi {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-items: end;
    overflow: clip;
    isolation: isolate;
  }
  .heroi-palco {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--noite-900);
  }
  .heroi-palco > * { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .heroi-palco iframe { border: 0; pointer-events: none; }

  /* iframe do YouTube recortado como se fosse "object-fit: cover" */
  .capa-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  /* O iframe é propositalmente maior que a área visível e fica centralizado.
     O YouTube desenha o título do vídeo e o nome do canal na borda superior, e
     os controles na inferior — mesmo com modestbranding e controls=0. Sobrando
     margem para fora da tela, essas faixas ficam recortadas e o que aparece é
     só a imagem. */
  .capa-video iframe {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100vw, 177.78svh);
    block-size: max(100svh, 56.25vw);
    max-inline-size: none;
    border: 0;
    translate: -50% -50%;
    scale: 1.42;
  }

  /* Camada de névoa por cima da foto do topo. Fica acima da imagem e abaixo do
     véu de contraste, para não lavar o texto. */
  .nevoa-camada {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    /* zero: acima do palco (-2) e do véu de contraste (-1), abaixo do texto */
    z-index: 0;
    pointer-events: none;
    /* entra suave: sem isso, a névoa aparece de uma vez ao carregar */
    animation: nevoa-entra 2.4s var(--suave) both;
  }
  @keyframes nevoa-entra { from { opacity: 0; } to { opacity: 1; } }

  .heroi::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, var(--fundo) 2%, oklch(from var(--fundo) l c h / 0.72) 26%, transparent 62%),
      linear-gradient(to right, oklch(from var(--noite-900) l c h / 0.6), transparent 55%),
      radial-gradient(120% 80% at 50% 0%, oklch(from var(--noite-900) l c h / 0.55), transparent 60%);
    pointer-events: none;
  }

  /* Com vídeo atrás, o texto precisa ser claro nos DOIS temas: não dá para
     prever se o quadro do vídeo estará claro ou escuro naquele instante. */
  .heroi[data-midia] {
    --tinta: var(--nevoa-100);
    --tinta-suave: var(--nevoa-200);
    color: var(--nevoa-100);
  }
  .heroi[data-midia]::after {
    background:
      linear-gradient(to top, var(--fundo) 0%, transparent 20%),
      linear-gradient(to top, oklch(10% 0.03 250 / 0.94) 14%, oklch(10% 0.03 250 / 0.6) 46%,
        oklch(10% 0.03 250 / 0.28) 76%, transparent),
      radial-gradient(120% 80% at 50% 0%, oklch(10% 0.03 250 / 0.55), transparent 60%);
  }
  .heroi[data-midia] h1,
  .heroi[data-midia] .lead { text-shadow: 0 2px 30px oklch(0% 0 0 / 0.75); }
  .heroi[data-midia] .clima { background: oklch(10% 0.02 250 / 0.55); border-color: oklch(100% 0 0 / 0.22); }

  /* No tema claro sem vídeo, a sombra escura embaixo do texto escuro suja a
     imagem; um halo claro separa melhor. */
  :root[data-tema="claro"] .heroi:not([data-midia]) h1,
  :root[data-tema="claro"] .heroi:not([data-midia]) .lead {
    text-shadow: 0 1px 22px oklch(100% 0 0 / 0.85);
  }

  .heroi-conteudo {
    position: relative;
    /* o topo reserva a altura da barra fixa: sem isso, um texto mais longo
       sobe e colide com a marca em telas baixas */
    padding-block: clamp(6.5rem, 15vh, 10rem) clamp(3rem, 10vh, 7rem);
    display: grid;
    gap: 1.4rem;
    justify-items: start;
  }
  .heroi h1 {
    font-size: var(--passo-5);
    white-space: pre-line;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 100;
    text-shadow: 0 2px 40px oklch(0% 0 0 / 0.5);
  }
  .heroi .lead { text-shadow: 0 1px 20px oklch(0% 0 0 / 0.6); }
  .heroi-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.6rem; }

  /* faixa de dados no rodapé do herói */
  .heroi-rodape {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: 1.2rem;
    border-block-start: 1px solid var(--borda);
  }
  .dado { display: grid; gap: 0.1rem; }
  .dado b {
    font-family: var(--serifa);
    font-size: var(--passo-2);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .dado b i { font-style: normal; font-size: 0.5em; color: var(--tinta-suave); margin-inline-start: 0.15em; }
  .dado span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }

  /* controles flutuantes do herói */
  .heroi-controles {
    position: absolute;
    inset-block-end: clamp(1rem, 3vh, 2rem);
    inset-inline-end: var(--gutter);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
  }
  .pilula {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    border: 1px solid var(--borda-forte);
    background: var(--vidro);
    backdrop-filter: blur(14px);
    color: var(--tinta);
    transition: background-color 0.3s, transform 0.35s var(--mola), border-color 0.3s;
  }
  .pilula:hover { transform: scale(1.08); border-color: var(--tinta); }
  .pilula svg { inline-size: 1.15rem; block-size: 1.15rem; }

  /* ---------- clima ao vivo ---------- */
  .clima {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem 0.45rem 0.5rem;
    border: 1px solid var(--borda);
    border-radius: 99px;
    background: var(--vidro);
    backdrop-filter: blur(14px);
    font-size: var(--passo--1);
    opacity: 0;
    transition: opacity 0.8s var(--suave);
  }
  .clima[data-pronto] { opacity: 1; }
  .clima i { font-style: normal; font-size: 1.2rem; line-height: 1; }
  .clima b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .clima span { color: var(--tinta-suave); }

  /* ---------- cartões de chalé ---------- */
  .chale {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    isolation: isolate;
    transition: transform 0.5s var(--suave), box-shadow 0.5s var(--suave), border-color 0.5s;
    transform-style: preserve-3d;
  }
  .chale:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-alta); }

  .chale-figura { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; }
  .chale-figura img { inline-size: 100%; block-size: 100%; object-fit: cover;
    transition: scale 0.9s var(--suave), filter 0.9s; }
  .chale:hover .chale-figura img { scale: 1.06; }
  .chale-figura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(from var(--noite-900) l c h / 0.85), transparent 55%);
  }
  .chale-etiqueta {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    border: 1px solid var(--borda);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* ---------- os dois chalés como duas peças da mesma foto ---------- */
  /* Encostadas, a foto é uma só: por isso o vão começa em zero e o cartão não
     pode recortar nada — a ponta do encaixe precisa passar por cima do vizinho. */
  .chales--peca { column-gap: 0; align-items: start; }
  .chales--peca .chale { overflow: visible; }
  .chales--peca .chale-figura { overflow: visible; }
  .chales--peca .chale-figura::after { content: none; }
  .chales--peca .chale-corpo { padding-block-start: clamp(1rem, 2vw, 1.4rem); }

  /* a peça da esquerda por cima: é dela que sai a ponta do encaixe */
  .chales--peca .chale:first-child { z-index: 2; }
  .chales--peca .chale:last-child { z-index: 1; }

  .peca {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--recuo, 0%);
    inline-size: var(--largura, 100%);
    overflow: hidden;
    background: var(--noite-800, var(--fundo-topo));
  }
  .peca img {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--desloca, 0%);
    block-size: 100%;
    inline-size: auto;
    max-inline-size: none;
  }
  /* o véu que deixa o texto legível vai na peça, para ser recortado com ela */
  .peca::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(from var(--noite-900) l c h / 0.85), transparent 55%);
  }

  /* separadas: abre o vão, cada uma inclina para o seu lado e ganha sombra */
  .chales--peca[data-separado] { column-gap: clamp(1rem, 2.4vw, 2rem); }
  .chales--peca .chale {
    transition:
      translate 1.1s var(--mola),
      rotate 1.1s var(--mola),
      box-shadow 0.8s var(--suave),
      border-color 0.5s;
  }
  .chales--peca[data-separado] .chale:first-child { rotate: -1.1deg; translate: -0.25rem 0; }
  .chales--peca[data-separado] .chale:last-child { rotate: 1.1deg; translate: 0.25rem 0; }
  .chales--peca[data-separado] .chale { box-shadow: var(--sombra-alta); }
  /* a etiqueta só faz sentido depois de separar: antes, é legenda sobre paisagem */
  .chales--peca .chale-etiqueta { opacity: 0; transition: opacity 0.7s var(--suave) 0.3s; }
  .chales--peca[data-separado] .chale-etiqueta { opacity: 1; }

  /* passar o mouse levanta a peça escolhida e recua a outra, como quem escolhe */
  .chales--peca[data-separado] .chale:hover { translate: 0 -0.5rem; rotate: 0deg; z-index: 3; }
  .chales--peca[data-separado]:has(.chale:hover) .chale:not(:hover) { opacity: 0.72; }
  .chales--peca .chale { transition-property: translate, rotate, box-shadow, border-color, opacity; }

  /* o zoom da foto no hover brigaria com a emenda: aqui quem se move é a peça */
  .chales--peca .chale:hover .chale-figura img { scale: 1; }

  @media (prefers-reduced-motion: reduce) {
    .chales--peca .chale,
    .chales--peca .chale-etiqueta { transition: none; }
    .chales--peca[data-separado] .chale:first-child,
    .chales--peca[data-separado] .chale:last-child { rotate: 0deg; translate: 0 0; }
  }

  /* No celular as duas peças continuam lado a lado: é a única maneira de a foto
     se recompor. Em troca, o cartão fica enxuto — a descrição longa não cabe em
     coluna de 160px e já está inteira na página do chalé. */
  @media (width <= 52rem) {
    .chales--peca[data-separado] { column-gap: 0.5rem; }
    .chales--peca .chale-corpo {
      padding: 0.85rem 0.7rem 0.2rem;
      gap: 0.5rem;
    }
    .chales--peca .chale-corpo h3 { font-size: var(--passo-0); line-height: 1.15; }
    /* a descrição sai; o subtítulo, que é uma linha, fica */
    .chales--peca .chale-corpo > p:not(.miudo) { display: none; }
    .chales--peca .chale-corpo .ficha { gap: 0.2rem 0.6rem; font-size: 0.72rem; }
    /* quatro itens de ficha viram duas linhas apertadas: ficam os dois que decidem */
    .chales--peca .chale-corpo .ficha span:nth-child(n + 3) { display: none; }
    .chales--peca .chale-corpo .selos { display: none; }
    .chales--peca .preco b { font-size: var(--passo-0); }
    .chales--peca .preco[data-consulte] b { font-size: 0.86rem; }
    .chales--peca .preco span { font-size: 0.7rem; }
    .chales--peca .chale + .chale .chale-corpo,
    .chales--peca .chale .chale-corpo { align-content: start; }
    /* os botões empilham em vez de brigar por largura */
    .chales--peca .chale > div:last-child {
      padding: 0 0.7rem 0.85rem !important;
      flex-direction: column;
      gap: 0.4rem !important;
    }
    .chales--peca .chale > div:last-child .btn {
      inline-size: 100%;
      justify-content: center;
      padding-inline: 0.6rem;
      font-size: 0.78rem;
    }
    /* No celular a pilulinha translúcida no canto da foto não funcionava: sobre
       a foto escura do fim de tarde ela quase desaparecia, e ainda ficava por
       cima justamente da parte onde está o chalé. Aqui ela desce e vira uma
       tarja no pé da foto, ocupando a largura toda, com fundo firme — sobre o
       pasto, onde não esconde nada, e legível. No notebook nada muda. */
    .chale-etiqueta {
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      border: 0;
      border-radius: 0;
      backdrop-filter: none;
      background: linear-gradient(to top, oklch(0% 0 0 / 0.82), oklch(0% 0 0 / 0.5));
      color: var(--nevoa-100);
      text-align: center;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      padding: 0.4rem 0.4rem 0.35rem;
    }
    /* separadas ou juntas, a tarja é informação e não enfeite: aparece sempre */
    .chales--peca .chale-etiqueta,
    .chales--peca[data-separado] .chale-etiqueta { opacity: 1; transition: none; }
    /* a inclinação some: em coluna estreita ela come o texto */
    .chales--peca[data-separado] .chale:first-child,
    .chales--peca[data-separado] .chale:last-child { rotate: 0deg; }
  }

  .chale-corpo { padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1rem; }
  .chale-corpo h3 { font-size: var(--passo-2); }

  .ficha { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--passo--1); color: var(--tinta-suave); }
  .ficha span { display: inline-flex; align-items: center; gap: 0.4em; }
  .ficha svg { inline-size: 1rem; block-size: 1rem; opacity: 0.75; }

  .selos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .selo {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 99px;
    border: 1px solid var(--borda);
    color: var(--tinta-suave);
    background: oklch(from var(--tinta) l c h / 0.04);
  }

  .preco { display: flex; align-items: baseline; gap: 0.4rem; margin-block-start: 0.2rem; }
  .preco b { font-family: var(--serifa); font-size: var(--passo-2); font-weight: 400; font-variant-numeric: tabular-nums; }
  .preco span { font-size: var(--passo--1); color: var(--tinta-suave); }
  /* “Consulte valores” não é um número: o serifado grande de preço, feito para
     algarismos, fica desengonçado em palavra. Volta para o corpo de texto. */
  .preco[data-consulte] b {
    font-family: var(--sans);
    font-size: var(--passo-0);
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* ---------- galeria ---------- */
  .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.7rem;
  }
  .galeria button {
    padding: 0;
    border: 0;
    border-radius: var(--raio-p);
    overflow: hidden;
    background: none;
    aspect-ratio: 4 / 3;
    position: relative;
  }
  .galeria img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.7s var(--suave), filter 0.5s; }
  .galeria button:hover img { scale: 1.07; filter: brightness(1.1); }
  .galeria button:nth-child(1) { grid-column: span 2; aspect-ratio: 8 / 5; }
  @media (width < 44rem) { .galeria button:nth-child(1) { grid-column: auto; aspect-ratio: 4/3; } }

  /* ---------- vídeos ---------- */
  .filme {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--noite-800);
    border: 1px solid var(--borda);
    display: block;
    inline-size: 100%;
    padding: 0;
    isolation: isolate;
    cursor: pointer;
  }
  .filme img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.8s var(--suave), filter 0.6s; }
  .filme:hover img { scale: 1.05; filter: brightness(0.85); }
  .filme iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
  .filme::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(from var(--noite-900) l c h / 0.75), transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .filme[data-tocando]::after, .filme[data-tocando] .play, .filme[data-tocando] .filme-legenda { opacity: 0; pointer-events: none; }

  .play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: clamp(3.6rem, 7vw, 5.2rem);
    block-size: clamp(3.6rem, 7vw, 5.2rem);
    border-radius: 99px;
    display: grid;
    place-items: center;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    border: 1px solid oklch(100% 0 0 / 0.3);
    color: var(--tinta);
    transition: transform 0.45s var(--mola), background-color 0.35s;
    z-index: 2;
  }
  .play::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 99px;
    border: 1px solid oklch(from var(--destaque) l c h / 0.5);
    animation: pulso 3s var(--suave) infinite;
  }
  .filme:hover .play { transform: translate(-50%, -50%) scale(1.12); background: var(--destaque); color: var(--noite-900); }
  .play svg { inline-size: 40%; block-size: 40%; margin-inline-start: 8%; }
  @keyframes pulso { 0% { scale: 1; opacity: 0.8; } 70%, 100% { scale: 1.35; opacity: 0; } }

  .filme-legenda {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: clamp(1rem, 3vw, 1.8rem);
    display: grid;
    gap: 0.2rem;
    text-align: start;
    z-index: 2;
    transition: opacity 0.4s;
  }
  .filme-legenda b { font-family: var(--serifa); font-size: var(--passo-1); font-weight: 400; }
  .filme-legenda span { font-size: var(--passo--1); color: var(--nevoa-400); }

  /* ---------- faixa cinematográfica de vídeo ---------- */
  .faixa-video {
    position: relative;
    min-block-size: clamp(26rem, 72svh, 44rem);
    display: grid;
    place-items: center;
    overflow: clip;
    isolation: isolate;
    border-block: 1px solid var(--borda);
  }
  .faixa-video .capa-video, .faixa-video > img { position: absolute; inset: 0; z-index: -2; }
  .faixa-video > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .faixa-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(oklch(from var(--noite-900) l c h / 0.55), oklch(from var(--noite-900) l c h / 0.8));
  }
  .faixa-video .envelope { text-align: center; display: grid; gap: 1.4rem; justify-items: center; }
  .faixa-video h2 { font-size: var(--passo-4); color: var(--nevoa-100); }
  .faixa-video p { color: var(--nevoa-200); margin-inline: auto; }

  /* ---------- experiências ---------- */
  .exp {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    min-block-size: 22rem;
    display: grid;
    align-items: end;
    isolation: isolate;
    border: 1px solid var(--borda);
    transition: transform 0.55s var(--suave), box-shadow 0.55s;
  }
  .exp img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%;
    object-fit: cover; transition: scale 1s var(--suave); }
  .exp::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, oklch(from var(--noite-900) l c h / 0.92) 8%,
      oklch(from var(--noite-900) l c h / 0.35) 50%, transparent);
    transition: opacity 0.5s;
  }
  .exp:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
  .exp:hover img { scale: 1.08; }
  .exp-corpo { padding: clamp(1.2rem, 3vw, 1.9rem); display: grid; gap: 0.5rem; color: var(--nevoa-100); }
  .exp-corpo h3 { color: var(--nevoa-100); }
  .exp-corpo p { font-size: var(--passo--1); color: var(--nevoa-200); }
  .exp-tempo {
    justify-self: start;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 99px;
    border: 1px solid oklch(100% 0 0 / 0.25);
    background: oklch(0% 0 0 / 0.3);
    backdrop-filter: blur(8px);
    margin-block-end: 0.3rem;
  }

  /* ---------- simulador de reserva ---------- */
  .reserva {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
  }
  @media (width < 60rem) { .reserva { grid-template-columns: 1fr; } }

  .painel {
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.3rem, 3vw, 2.2rem);
    box-shadow: var(--sombra);
  }

  .campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .campo { display: grid; gap: 0.4rem; }
  .campo > span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
  .campo input, .campo select {
    inline-size: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte);
    background: oklch(from var(--fundo) l c h / 0.6);
    transition: border-color 0.3s, background-color 0.3s;
  }
  .campo input:hover, .campo select:hover { border-color: var(--tinta-suave); }
  .campo input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
  :root[data-tema="claro"] .campo input::-webkit-calendar-picker-indicator { filter: none; }

  .escolha-chale { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .escolha-chale label {
    position: relative;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    padding: 0.85rem 1rem;
    display: grid;
    gap: 0.15rem;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--mola);
  }
  .escolha-chale input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .escolha-chale label:hover { border-color: var(--tinta-suave); }
  .escolha-chale label:has(:checked) {
    border-color: var(--destaque);
    background: oklch(from var(--destaque) l c h / 0.1);
  }
  .escolha-chale b { font-weight: 600; font-size: var(--passo--1); }
  .escolha-chale small { color: var(--tinta-suave); font-size: 0.72rem; }

  .extrato { display: grid; gap: 0.55rem; margin-block: 1.4rem 1rem; }
  .linha { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--passo--1); }
  .linha span:first-child { color: var(--tinta-suave); }
  .linha b { font-variant-numeric: tabular-nums; font-weight: 500; }
  .linha[data-desconto] b { color: var(--musgo); }
  .linha-total {
    border-block-start: 1px solid var(--borda);
    padding-block-start: 0.9rem;
    margin-block-start: 0.3rem;
    align-items: baseline;
  }
  .linha-total span:first-child { color: var(--tinta); font-size: var(--passo-0); }
  .linha-total b { font-family: var(--serifa); font-size: var(--passo-2); font-weight: 400; }

  .aviso {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--raio-p);
    background: oklch(from var(--destaque) l c h / 0.12);
    border: 1px solid oklch(from var(--destaque) l c h / 0.3);
    font-size: var(--passo--1);
    margin-block-end: 1rem;
  }
  .aviso[hidden] { display: none; }

  /* calendário */
  .calendario { display: grid; gap: 1.2rem; }
  .cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .cal-topo b { font-family: var(--serifa); font-size: var(--passo-1); font-weight: 400; text-transform: capitalize; }
  .cal-nav { display: flex; gap: 0.35rem; }
  .cal-nav button {
    inline-size: 2.1rem; block-size: 2.1rem;
    display: grid; place-items: center;
    border-radius: 99px;
    border: 1px solid var(--borda-forte);
    background: transparent;
    transition: background-color 0.3s, transform 0.3s var(--mola);
  }
  .cal-nav button:hover:not(:disabled) { background: var(--fundo-topo); transform: scale(1.08); }
  .cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

  .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
  .cal-grade small {
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    padding-block-end: 0.35rem;
  }
  .cal-dia {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    background: transparent;
    font-size: var(--passo--1);
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    transition: background-color 0.25s, color 0.25s, transform 0.25s var(--mola);
  }
  .cal-dia:hover:not(:disabled) { background: var(--fundo-topo); transform: scale(1.1); }
  .cal-dia:disabled { color: oklch(from var(--tinta-suave) l c h / 0.35); cursor: not-allowed; text-decoration: line-through; }
  .cal-dia[data-vazio] { visibility: hidden; }
  .cal-dia[data-intervalo] { background: oklch(from var(--destaque) l c h / 0.16); border-radius: 0; }
  .cal-dia[data-ponta] { background: var(--destaque); color: oklch(18% 0.03 60); font-weight: 600; }
  .cal-dia[data-ponta="entrada"] { border-start-end-radius: 0; border-end-end-radius: 0; }
  .cal-dia[data-ponta="saida"] { border-start-start-radius: 0; border-end-start-radius: 0; }
  .cal-legenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.7rem; color: var(--tinta-suave); }
  .cal-legenda i { inline-size: 0.7rem; block-size: 0.7rem; border-radius: 3px; display: inline-block;
    margin-inline-end: 0.35rem; vertical-align: -1px; }

  /* ---------- o que tem no chalé ---------- */
  .lista-itens {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.5rem 1.4rem;
  }
  .lista-itens li {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--borda);
    font-size: var(--passo-0);
  }
  /* marca discreta em vez de bolinha de lista, para combinar com o resto */
  .lista-itens li::before {
    content: "";
    inline-size: 0.34rem;
    block-size: 0.34rem;
    border-radius: 99px;
    background: var(--destaque);
    flex: none;
    translate: 0 -0.25em;
  }

  /* ---------- nossa história ---------- */
  .historia {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
  }
  @media (width < 60rem) { .historia { grid-template-columns: 1fr; } }

  .historia-foto {
    margin: 0;
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
    position: sticky;
    top: 6rem;
  }
  @media (width < 60rem) { .historia-foto { position: static; } }
  .historia-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
  @media (width < 60rem) { .historia-foto img { aspect-ratio: 16 / 10; } }

  .historia-texto { display: grid; gap: 1.2rem; justify-items: start; }

  /* Versos: as quebras de linha são do próprio texto e precisam ser mantidas,
     por isso `pre-line` em vez de deixar o parágrafo refluir. */
  .versos { display: grid; gap: 1.15rem; max-inline-size: 46ch; }
  .versos p {
    margin: 0;
    white-space: pre-line;
    font-family: var(--serifa);
    font-size: var(--passo-0);
    line-height: 1.55;
    font-variation-settings: "opsz" 16;
    color: var(--tinta);
  }
  .versos p:first-child { font-size: var(--passo-1); line-height: 1.45; }

  .historia-assina { display: grid; gap: 0.5rem; margin-block-start: 0.5rem; }
  .lema {
    font-family: var(--serifa);
    font-size: var(--passo-1);
    line-height: 1.35;
    color: var(--destaque);
    max-inline-size: 40ch;
    margin: 0;
  }

  /* história completa, dentro do visor */
  .historia-cheia {
    max-inline-size: min(100%, 46rem);
    max-block-size: 84svh;
    overflow-y: auto;
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.6rem, 5vw, 3.4rem);
    color: var(--tinta);
    display: grid;
    gap: 1.4rem;
  }
  .historia-cheia h3 {
    font-size: var(--passo-2);
    white-space: pre-line;
    margin: 0;
  }

  /* ---------- mosaico de fotos ---------- */
  /* Grid de altura fixa por linha: com 65 fotos em retrato e 24 em paisagem,
     deixar cada uma com sua proporção criaria degraus irregulares. Aqui cada
     célula tem a mesma altura e a foto preenche por recorte; as em paisagem
     ocupam duas colunas, o que devolve variedade sem quebrar o alinhamento. */
  .mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    grid-auto-rows: 14rem;
    gap: 0.55rem;
  }
  @media (width < 40rem) { .mosaico { grid-auto-rows: 11rem; } }

  .mosaico button {
    padding: 0;
    border: 0;
    border-radius: var(--raio-p);
    overflow: hidden;
    background: var(--fundo-topo);
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    cursor: pointer;
  }
  .mosaico button[data-formato="paisagem"] { grid-column: span 2; }
  @media (width < 30rem) { .mosaico button[data-formato="paisagem"] { grid-column: span 1; } }

  .mosaico img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 0.7s var(--suave), filter 0.4s;
  }
  .mosaico button:hover img { scale: 1.06; filter: brightness(1.06); }

  /* legenda só nas fotos que têm descrição */
  .mosaico .legenda-foto {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 1.6rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: start;
    color: var(--nevoa-100);
    background: linear-gradient(to top, oklch(0% 0 0 / 0.8), transparent);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .mosaico button:hover .legenda-foto,
  .mosaico button:focus-visible .legenda-foto { opacity: 1; }

  /* ---------- indicações: onde comer, pedir e passear ---------- */
  .indicacoes { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }

  .ind-categoria { display: grid; gap: 1rem; }
  .ind-cabeca {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-block-end: 0.8rem;
    border-block-end: 1px solid var(--borda);
  }
  .ind-cabeca i { font-style: normal; font-size: 1.4rem; line-height: 1; }
  .ind-cabeca h3 { font-size: var(--passo-1); }
  .ind-cabeca p { font-size: var(--passo--1); color: var(--tinta-suave); margin-inline-start: auto; max-inline-size: 42ch; }
  @media (width < 48rem) { .ind-cabeca p { margin-inline-start: 0; } }

  .ind-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0.7rem;
  }

  .ind-item {
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    background: var(--fundo-alto);
    transition: border-color 0.3s, transform 0.35s var(--suave);
  }
  .ind-item:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
  .ind-item b { font-size: var(--passo-0); font-weight: 600; }
  .ind-item .ind-tipo {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--destaque);
  }
  .ind-item p { font-size: var(--passo--1); color: var(--tinta-suave); margin: 0; }

  .ind-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.2rem; }
  .ind-acao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    padding: 0.32rem 0.7rem;
    border-radius: 99px;
    border: 1px solid var(--borda-forte);
    color: var(--tinta-suave);
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s, background-color 0.25s;
  }
  .ind-acao:hover { color: var(--tinta); border-color: var(--tinta-suave); background: var(--fundo-topo); }
  .ind-acao svg { inline-size: 0.85rem; block-size: 0.85rem; }
  .ind-acao[data-zap]:hover { color: oklch(70% 0.17 150); border-color: oklch(70% 0.17 150 / 0.6); }

  .ind-distancia {
    font-size: 0.72rem;
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- reserva via Airbnb ---------- */
  .reserva-airbnb {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
  }
  @media (width < 60rem) { .reserva-airbnb { grid-template-columns: 1fr; } }

  .cartao-reserva {
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    box-shadow: var(--sombra);
    display: grid;
    gap: 1.1rem;
    align-content: start;
  }
  .cartao-reserva h3 { font-size: var(--passo-2); }

  /* nota grande, no formato que o hóspede reconhece do Airbnb */
  .nota-grande {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
    padding-block-end: 1.1rem;
    border-block-end: 1px solid var(--borda);
  }
  .nota-grande > div { display: grid; gap: 0.15rem; }
  .nota-grande b {
    font-family: var(--serifa);
    font-size: var(--passo-4);
    font-weight: 400;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
  }
  .nota-grande .estrelas { font-size: var(--passo-0); }
  .nota-grande small { color: var(--tinta-suave); font-size: var(--passo--1); }

  .selo-premiado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 99px;
    border: 1px solid oklch(from var(--destaque) l c h / 0.45);
    background: oklch(from var(--destaque) l c h / 0.12);
    font-size: var(--passo--1);
    font-weight: 600;
  }

  .categorias { display: grid; gap: 0.7rem; }
  .categoria { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; font-size: var(--passo--1); }
  .categoria span:first-child { color: var(--tinta-suave); }
  .categoria b { font-variant-numeric: tabular-nums; }
  .barra-nota {
    grid-column: 1 / -1;
    block-size: 3px;
    border-radius: 99px;
    background: var(--borda);
    overflow: hidden;
  }
  .barra-nota i { display: block; block-size: 100%; background: var(--destaque); border-radius: 99px; }

  .destaques { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .destaque {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 99px;
    border: 1px solid var(--borda);
    font-size: var(--passo--1);
  }
  .destaque b { font-variant-numeric: tabular-nums; color: var(--destaque); }

  /* ---------- depoimentos ---------- */
  /* Trilho de depoimentos.
     Usa flex, e não grid de coluna automática: com grid, todos os cartões
     herdam a altura do maior texto e o conteúdo curto fica boiando. Aqui cada
     cartão tem altura fixa e o texto longo é truncado com um "ler tudo". */
  .trilho {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block: 0.5rem 1.25rem;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }
  .trilho::-webkit-scrollbar { display: none; }

  .depoimento {
    scroll-snap-align: start;
    flex: 0 0 auto;
    inline-size: min(86vw, 24rem);
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.3rem, 3vw, 1.9rem);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.9rem;
    /* altura uniforme: é o que impede o corte irregular entre cartões */
    block-size: 21rem;
    transition: border-color 0.3s, transform 0.4s var(--suave);
  }
  .depoimento:hover { border-color: var(--borda-forte); transform: translateY(-3px); }

  /* Sem line-clamp fixo: a altura livre muda conforme o rodapé tenha ou não o
     botão "ler tudo", e um número fixo de linhas acabava cortando no meio de
     uma delas. Aqui o texto ocupa o espaço que sobrar e, quando não couber, o
     JS marca [data-cortado] e o fim desvanece em vez de ser decepado. */
  .depoimento blockquote {
    font-family: var(--serifa);
    font-size: var(--passo-0);
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
    min-block-size: 0;
  }
  .depoimento blockquote[data-cortado] {
    mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  }
  .depoimento footer { display: grid; gap: 0.1rem; align-content: end; }
  .depoimento footer b { font-size: var(--passo--1); }

  .ler-tudo {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--passo--1);
    color: var(--destaque);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  /* Continua ocupando o mesmo espaço quando não é necessário: assim a altura
     livre do texto é igual em todos os cartões e a medição do corte é estável. */
  .ler-tudo[data-vazio] { visibility: hidden; pointer-events: none; }

  /* navegação do trilho */
  .trilho-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.4rem;
  }
  .trilho-nav { display: flex; gap: 0.4rem; }
  .trilho-nav button {
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    border: 1px solid var(--borda-forte);
    background: var(--fundo-alto);
    color: var(--tinta);
    transition: background-color 0.25s, transform 0.3s var(--mola), opacity 0.25s;
  }
  .trilho-nav button:hover:not(:disabled) { background: var(--fundo-topo); transform: scale(1.08); }
  .trilho-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
  .trilho-nav svg { inline-size: 1.1rem; block-size: 1.1rem; }

  /* depoimento aberto por inteiro dentro do visor */
  .depoimento-cheio {
    max-inline-size: min(100%, 44rem);
    background: var(--fundo-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: grid;
    gap: 1.2rem;
    color: var(--tinta);
    max-block-size: 82svh;
    overflow-y: auto;
  }
  .depoimento-cheio blockquote {
    font-family: var(--serifa);
    font-size: var(--passo-1);
    line-height: 1.5;
    margin: 0;
  }
  .estrelas { color: var(--brasa-alt); letter-spacing: 0.15em; font-size: 0.85rem; }

  .fonte-selo {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    border: 1px solid var(--borda);
    color: var(--tinta-suave);
  }

  /* média das notas, acima do trilho de depoimentos */
  .resumo-notas {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-block-start: 0.4rem;
  }
  .resumo-notas b {
    font-family: var(--serifa);
    font-size: var(--passo-2);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .resumo-notas .estrelas { font-size: var(--passo-0); }

  /* ---------- perguntas ---------- */
  .faq { display: grid; gap: 0.5rem; max-width: 52rem; }
  .faq details {
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--fundo-alto);
    overflow: hidden;
    transition: border-color 0.3s, background-color 0.3s;
    interpolate-size: allow-keywords;
  }
  .faq details:hover { border-color: var(--borda-forte); }
  .faq details[open] { border-color: var(--borda-forte); }
  .faq summary {
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    inline-size: 0.65rem; block-size: 0.65rem;
    border-inline-end: 1.5px solid var(--tinta-suave);
    border-block-end: 1.5px solid var(--tinta-suave);
    rotate: 45deg;
    flex: none;
    transition: rotate 0.4s var(--suave), border-color 0.3s;
  }
  .faq details[open] summary::after { rotate: -135deg; border-color: var(--destaque); }
  .faq details p { padding: 0 1.3rem 1.3rem; color: var(--tinta-suave); font-size: var(--passo--1); }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.45s var(--suave), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }

  /* ---------- mapa ---------- */
  .mapa-caixa { margin-block-end: clamp(1.2rem, 3vw, 2rem); }

  .mapa-palco {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
    background: var(--fundo-alto);
    aspect-ratio: 21 / 8;
    min-block-size: 15rem;
    /* Com aspect-ratio e altura mínima juntas, em tela estreita a altura mínima
       ganha e o navegador calcula a LARGURA a partir dela: 15rem × 4/3 = 320px,
       mais que a tela de um celular pequeno, e a página passava a rolar de lado.
       Este teto corta esse caminho — quem cede é a proporção, não a largura. */
    max-inline-size: 100%;
  }
  @media (width < 48rem) { .mapa-palco { aspect-ratio: 4 / 3; } }

  .mapa-palco iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

  /* Enquanto o mapa não é aberto, mostramos um cartão em vez do iframe: assim a
     página não carrega o mapa de terceiros sem o visitante pedir. */
  .mapa-abrir {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1.5rem;
    color: var(--tinta);
    background:
      radial-gradient(circle at 50% 42%, oklch(from var(--destaque) l c h / 0.14), transparent 62%),
      repeating-linear-gradient(0deg, transparent 0 26px, var(--borda) 26px 27px),
      repeating-linear-gradient(90deg, transparent 0 26px, var(--borda) 26px 27px),
      var(--fundo-alto);
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .mapa-abrir b { font-family: var(--serifa); font-size: var(--passo-1); font-weight: 400; }
  .mapa-abrir .miudo { font-variant-numeric: tabular-nums; font-size: 0.78rem; }
  .mapa-marcador {
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    color: var(--destaque);
    border: 1px solid oklch(from var(--destaque) l c h / 0.45);
    background: oklch(from var(--destaque) l c h / 0.12);
    margin-block-end: 0.3rem;
  }
  .mapa-marcador svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .mapa-toque {
    margin-block-start: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--destaque);
  }
  .mapa-abrir:hover { background-color: var(--fundo-topo); }

  /* ---------- como chegar ---------- */
  .rotas { display: grid; gap: 0; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
  .rota {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 1rem clamp(1rem, 3vw, 1.6rem);
    align-items: center;
    border-block-end: 1px solid var(--borda);
    transition: background-color 0.3s;
  }
  .rota:last-child { border-block-end: 0; }
  .rota:hover { background: var(--fundo-alto); }
  .rota b { font-weight: 500; }
  .rota span { font-variant-numeric: tabular-nums; color: var(--tinta-suave); font-size: var(--passo--1); }

  /* Três colunas em 320px deixam "Centro de Sapucaí-Mirim" quebrando em quatro
     linhas de duas palavras. Melhor empilhar: a origem em cima, a distância e o
     tempo lado a lado embaixo, como uma legenda. */
  @media (width < 30rem) {
    /* Flex em vez de grade: a origem ocupa a primeira linha inteira e os dois
       detalhes caem lado a lado na segunda, sem largura combinada de antemão. */
    .rota {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.15rem 0.8rem;
      padding-block: 0.9rem;
    }
    .rota b { flex-basis: 100%; }
    .rota span + span::before { content: "· "; opacity: 0.6; }
  }

  /* ---------- rodapé ---------- */
  .rodape {
    border-block-start: 1px solid var(--borda);
    padding-block: clamp(3rem, 8vh, 5rem) 2rem;
    background: var(--fundo-alto);
    margin-block-start: var(--ritmo);
  }
  .rodape-grade { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .rodape h4 { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--tinta-suave); font-weight: 500; margin-block-end: 0.9rem; }
  .rodape ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: var(--passo--1); }
  .rodape a { text-decoration: none; color: var(--tinta-suave); transition: color 0.3s; }
  .rodape a:hover { color: var(--destaque); }
  .rodape-fim {
    margin-block-start: 3rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--borda);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--tinta-suave);
  }

  /* assinatura de quem fez: linha própria, para não competir com o © */
  .credito-autoria {
    flex-basis: 100%;
    display: grid;
    gap: 0.2rem;
    justify-items: start;
    margin-block-start: 0.4rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--borda);
  }
  .credito-autoria b { color: var(--tinta); font-weight: 600; }
  .credito-contato {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
  }

  /* ---------- botão da música ambiente ---------- */
  /* Pílula com ícone e rótulo, ao lado do WhatsApp. A primeira versão era só um
     círculo translúcido: sobre foto escura, ficava invisível. Aqui o fundo é
     opaco e o texto diz o que o botão faz. */
  .botao-musica {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 5.9rem;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.05rem 0.62rem 0.85rem;
    border-radius: 99px;
    border: 1px solid oklch(from var(--nevoa-100) l c h / 0.28);
    background: oklch(18% 0.025 250 / 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--nevoa-100);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 22px -8px oklch(0% 0 0 / 0.6);
    transition: transform 0.35s var(--mola), color 0.3s, border-color 0.3s, background-color 0.3s;
    /* dá um aceno logo depois de carregar, para não passar despercebido */
    animation: musica-aparece 0.7s var(--suave) 1.2s both,
               musica-acena 2.6s var(--suave) 2.4s 2;
  }
  .botao-musica svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
  .botao-musica:hover { transform: scale(1.05); border-color: var(--nevoa-100); }
  .botao-musica[data-tocando] {
    color: oklch(20% 0.04 60);
    border-color: transparent;
    background: var(--destaque);
    animation: none;
  }

  @keyframes musica-aparece {
    from { opacity: 0; translate: 0 0.8rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes musica-acena {
    0%, 100% { transform: scale(1); }
    8% { transform: scale(1.07); }
    16% { transform: scale(1); }
  }

  @media (width < 44rem) {
    /* no celular o rótulo sai e o botão sobe, para não brigar com o WhatsApp */
    .botao-musica {
      inset-block-end: 5.2rem;
      inset-inline-end: 1rem;
      padding: 0.6rem;
    }
    .botao-musica .rotulo-musica { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .botao-musica { animation: none; }
  }

  /* ---------- botão flutuante do WhatsApp ---------- */
  .zap-flutua {
    position: fixed;
    inset-block-end: 1.4rem;
    inset-inline-end: 1.4rem;
    z-index: 55;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 99px;
    display: grid;
    place-items: center;
    background: oklch(68% 0.17 150);
    color: oklch(15% 0.03 150);
    box-shadow: 0 10px 30px -8px oklch(68% 0.17 150 / 0.6);
    transition: transform 0.4s var(--mola), inline-size 0.4s var(--suave);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
  }
  .zap-flutua svg { inline-size: 1.65rem; block-size: 1.65rem; flex: none; }
  .zap-flutua:hover { transform: scale(1.08); }
  @media (width < 40rem) { .zap-flutua { inline-size: 3.1rem; block-size: 3.1rem; inset-block-end: 1rem; inset-inline-end: 1rem; } }

  /* ---------- lightbox ---------- */
  dialog.visor {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    border: 0;
    padding: 0;
    background: oklch(8% 0.02 250 / 0.94);
    backdrop-filter: blur(10px);
    color: var(--nevoa-100);
  }
  dialog.visor::backdrop { background: transparent; }
  .visor-palco { block-size: 100%; display: grid; place-items: center; padding: clamp(1rem, 5vh, 4rem); }
  .visor-palco img { max-block-size: 82svh; inline-size: auto; border-radius: var(--raio-p); box-shadow: var(--sombra-alta); }
  .visor-palco .capa-video, .visor-palco iframe { inline-size: min(100%, 90rem); aspect-ratio: 16/9;
    block-size: auto; border-radius: var(--raio-p); border: 0; position: static; translate: none;
    max-inline-size: 100%; max-block-size: 82svh; }
  .visor-fechar { position: absolute; inset-block-start: 1.2rem; inset-inline-end: 1.2rem; z-index: 3; }
  .visor-seta { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 3; }
  .visor-seta[data-dir="ant"] { inset-inline-start: 1.2rem; }
  .visor-seta[data-dir="prox"] { inset-inline-end: 1.2rem; }
  .visor-contador { position: absolute; inset-block-end: 1.4rem; inset-inline: 0; text-align: center;
    font-size: var(--passo--1); color: var(--nevoa-400); font-variant-numeric: tabular-nums; }

  /* ---------- barra de progresso da página ---------- */
  .progresso {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--destaque);
    transform-origin: left;
    scale: 0 1;
    z-index: 70;
    animation: encher linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes encher { to { scale: 1 1; } }
}

/* -------------------------------------------------------------- movimento */
@layer movimento {
  /* A entrada do conteúdo é comandada por IntersectionObserver (classe .js no
     <html> + .visivel via JS), e NÃO por `animation-timeline: view()`.
     Motivo: se a timeline de scroll não progredir — iframe, navegador antigo,
     contexto de impressão —, o conteúdo ficaria preso em opacidade 0 e o site
     inteiro sumiria. Como só escondemos o que o JS pode revelar de volta, sem
     JS a página aparece inteira e legível. */
  .js .surge,
  .js .surge-escala,
  .js .revela-linha > * {
    opacity: 0;
    transition: opacity 0.85s var(--suave), translate 0.85s var(--suave), scale 0.85s var(--suave);
  }
  .js .surge { translate: 0 2.2rem; }
  .js .surge-escala { translate: 0 2.8rem; scale: 0.96; }
  .js .revela-linha > * { translate: 0 2.2rem; }

  .js .surge.visivel,
  .js .surge-escala.visivel,
  .js .revela-linha > *.visivel {
    opacity: 1;
    translate: none;
    scale: 1;
  }

  /* Efeito decorativo: se não progredir, não esconde nada. */
  @supports (animation-timeline: view()) {
    .paralaxe {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

  @keyframes subir { from { translate: 0 6%; } to { translate: 0 -6%; } }

  /* abertura do herói */
  .heroi-conteudo > * { animation: entrar 1.1s var(--suave) both; }
  .heroi-conteudo > *:nth-child(1) { animation-delay: 0.15s; }
  .heroi-conteudo > *:nth-child(2) { animation-delay: 0.28s; }
  .heroi-conteudo > *:nth-child(3) { animation-delay: 0.41s; }
  .heroi-conteudo > *:nth-child(4) { animation-delay: 0.54s; }
  .heroi-conteudo > *:nth-child(5) { animation-delay: 0.67s; }
  @keyframes entrar { from { opacity: 0; translate: 0 1.6rem; filter: blur(6px); } to { opacity: 1; translate: 0; filter: none; } }

  /* transições entre páginas (View Transitions API) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: sai-fade 0.35s var(--suave) both; }
  ::view-transition-new(root) { animation: entra-fade 0.5s var(--suave) both; }
  @keyframes sai-fade { to { opacity: 0; } }
  @keyframes entra-fade { from { opacity: 0; translate: 0 1rem; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .js .surge, .js .surge-escala, .js .revela-linha > * { opacity: 1; translate: none; scale: 1; }
    @view-transition { navigation: none; }
  }
}

/* ------------------------------------------------------------- utilidades */
@layer utilidades {
  [hidden] { display: none !important; }
  .so-leitor {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .pular {
    position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100;
    translate: 0 -200%; transition: translate 0.3s;
  }
  .pular:focus { translate: 0; }
  .centro { text-align: center; }
  .centro p { margin-inline: auto; }
  .sep { border: 0; border-block-start: 1px solid var(--borda); margin-block: var(--ritmo) 0; }
  /* A visibilidade dos ícones do botão de tema é controlada só pelo JS
     (ligarTema), para não haver duas fontes da verdade brigando. */
}