:root {
    color-scheme: light;
    --ink: #202421;
    --muted: #585f59;
    --line: #e2e5e1;
    --surface: #f5f7f3;
    --brand: #24543e;
    --brand-hover: #173b2a;
    --content: 1120px;
    font-family: "DM Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; line-height: 1.5; }
h1, h2, h3, p, dl, dd { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #287858; outline-offset: 4px; }
[id] { scroll-margin-top: 24px; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.container, .topo-conteudo { width: min(calc(100% - 64px), var(--content)); margin-inline: auto; }
.topo { border-bottom: 1px solid var(--line); }
.topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.logo { width: 42px; height: 42px; padding: 5px; border-radius: 8px; background: var(--brand); object-fit: contain; }
.topo nav { display: flex; gap: 24px; }
.topo nav a { color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.topo nav a:hover { color: var(--ink); text-decoration: underline; }

.botao-contorno, .botao-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-weight: 700;
    font-size: .92rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.botao-contorno:hover { border-color: var(--ink); background: var(--surface); }
.botao-principal { border-color: var(--brand); background: var(--brand); color: #fff; }
.botao-principal:hover { border-color: var(--brand-hover); background: var(--brand-hover); }
.botao-texto {
    padding: 10px 0;
    border: 0;
    background: none;
    font-weight: 700;
    text-underline-offset: 3px;
    text-decoration: underline;
    cursor: pointer;
}

.titulo-anuncio { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 28px 0 18px; }
.identificacao-hospedagem { padding-top: 28px; }
.identificacao-hospedagem p, .secao-mapa > p { margin-top: 6px; color: var(--muted); }
.destaque-avaliacoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center;
    max-width: 480px;
    margin-top: 18px;
    padding: 13px 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    line-height: 1.2;
}
.destaque-avaliacoes h3 { font-size: 1rem; }
.avaliacoes-nota, .avaliacoes-total { display: grid; gap: 4px; padding: 0 4px; }
.avaliacoes-nota { border-right: 1px solid var(--line); }
.avaliacoes-total { border-left: 1px solid var(--line); }
.destaque-avaliacoes strong { font-size: 1.3rem; }
.avaliacoes-estrelas { font-size: .65rem; letter-spacing: .04em; }
.avaliacoes-total span { font-size: .76rem; }
h1 { font-size: clamp(1.85rem, 3.5vw, 2.65rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.compartilhar { flex-shrink: 0; }
.galeria-wrapper { position: relative; }
.mosaico {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7px;
    height: clamp(300px, 36vw, 440px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface);
}
.mosaico.fotos-3 { grid-template-columns: 2fr 1fr; }
.mosaico.fotos-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.mosaico.fotos-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.foto-mosaico { min-width: 0; padding: 0; overflow: hidden; border: 0; background: var(--surface); cursor: zoom-in; }
.foto-mosaico:first-child { grid-row: 1 / -1; }
.fotos-4 .foto-mosaico:last-child { grid-column: 2 / -1; }
.foto-mosaico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-mosaico:hover img { filter: brightness(.9); }
.foto-mosaico:focus-visible { outline-offset: -4px; }
.foto-apenas-movel, .acoes-galeria-movel, .contador-galeria-movel { display: none; }
.link-copiado { color: var(--brand); }
.abrir-fotos { position: absolute; right: 14px; bottom: 14px; border-color: var(--ink); }
.galeria-dialogo {
    width: min(960px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: 18px;
    border: 0;
    border-radius: 16px;
    color: var(--ink);
    background: #fff;
}
.galeria-dialogo::backdrop { background: rgb(16 24 19 / .76); }
.galeria-barra, .galeria-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.galeria-barra { margin-bottom: 14px; }
.galeria-controles { margin-top: 14px; }
.galeria-controles button:disabled { opacity: .5; cursor: default; }
.galeria-visualizador { display: grid; place-items: center; background: var(--surface); border-radius: 10px; overflow: hidden; }
.galeria-visualizador img { display: block; width: 100%; height: min(63dvh, 620px); object-fit: contain; }

.layout-anuncio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 355px); gap: clamp(32px, 7vw, 90px); padding: 34px 0 65px; }
.secao-mapa { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 26px; }
.mapa-localizacao { position: relative; margin-top: 16px; border-radius: 14px; overflow: hidden; background: var(--surface); }
.mapa-localizacao iframe { display: block; width: 100%; height: clamp(285px, 43vw, 460px); border: 0; }
.abrir-mapa { margin-top: 14px; }
.secao-anuncio, .calendario-secao { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.secao-anuncio p, .secao-descricao { margin-top: 10px; color: var(--muted); }
.secao-anuncio .botao-contorno { margin-top: 14px; }
.dados-espaco {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.dados-espaco div { border-left: 2px solid var(--line); padding-left: 11px; }
.dados-espaco dt { color: var(--muted); font-size: .86rem; }
.dados-espaco dd { margin-top: 3px; font-weight: 800; }
.comodidades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.comodidades li { padding: 9px 12px; border-radius: 8px; background: var(--surface); }

.calendario-secao { border: 0; padding-bottom: 0; margin-bottom: 0; }
.mes-atual { margin: 22px 0 5px; font-size: 1.1rem; }
.instrucao { color: var(--muted); font-size: .9rem; margin-bottom: 13px; }
.dias-semana, .dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.dias-semana { color: var(--muted); font-size: .82rem; font-weight: 700; padding-bottom: 8px; }
.dias { row-gap: 3px; }
.dia { min-height: 42px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: #fff; font-weight: 700; cursor: pointer; }
.dia:enabled:hover { border-color: var(--brand); }
.dia:disabled { color: #6e756e; cursor: default; }
.dia.passado { color: #737973; text-decoration: line-through; }
.dia.ocupada, .legenda-bolinha.ocupada { color: #8b3434; background: #fae8e6; }
.dia.limpeza, .legenda-bolinha.limpeza { color: #755214; background: #f9eed5; }
.dia.no-intervalo { border-radius: 0; background: #e3eee6; color: var(--brand); }
.dia.selecionado, .dia.inicio-periodo, .dia.fim-periodo { background: var(--brand); color: #fff; }
.dia.inicio-periodo { border-radius: 9px 0 0 9px; }
.dia.fim-periodo { border-radius: 0 9px 9px 0; }
.calendario.carregando .dias { opacity: .5; pointer-events: none; }
.navegacao, .legenda { display: flex; align-items: center; gap: 12px; }
.navegacao { justify-content: space-between; margin-top: 16px; }
.botao-nav { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 700; text-underline-offset: 3px; }
.botao-nav.desativado { color: #777; text-decoration: none; pointer-events: none; }
.legenda { margin-top: 12px; font-size: .83rem; color: var(--muted); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-bolinha { width: 14px; height: 14px; border-radius: 4px; }
.mensagem-erro, .aviso-periodo { display: none; }
.mensagem-erro.ativo, .aviso-periodo.ativo { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: .9rem; }
.mensagem-erro.ativo { color: #852c2c; background: #fae8e6; }
.aviso-periodo.ativo { color: #634715; background: #f9eed5; }

.resumo-reserva {
    position: sticky;
    top: 24px;
    align-self: start;
    min-width: 0;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgb(22 40 29 / .11);
}
.resumo-titulo { font-size: 1.16rem; }
.preco-inicial { margin-top: 8px; color: var(--muted); font-size: .88rem; }
.preco-inicial strong { color: var(--ink); font-size: 1.55rem; letter-spacing: -.03em; }
.resumo-inicial .botao-principal, .acoes-reserva .botao-principal { width: 100%; margin-top: 15px; }
.resumo-selecao, .resumo-reserva.ativo .resumo-inicial { display: none; }
.resumo-reserva.ativo .resumo-selecao { display: block; margin-top: 14px; }
.resumo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .91rem; }
.resumo-linha > span { color: var(--muted); }
.resumo-linha strong { text-align: right; }
.resumo-divisor { margin: 9px 0; border: 0; border-top: 1px solid var(--line); }
.resumo-valor strong { font-size: 1.15rem; }
.botao-limpar { display: block; margin: 4px auto 0; }
.resumo-nota { margin-top: 11px; color: var(--muted); font-size: .82rem; text-align: center; }
.barra-movel { display: none; }

@media (max-width: 760px) {
    :root {
        font-family: -apple-system, BlinkMacSystemFont, "DM Sans", system-ui, sans-serif;
        --brand: #ce174d;
        --brand-hover: #ae1240;
    }
    .topo, .titulo-anuncio .compartilhar, .abrir-fotos { display: none; }
    .container { display: flex; flex-direction: column; width: 100%; --sobreposicao-foto: 22px; }
    .galeria-wrapper { order: -1; }
    .titulo-anuncio {
        display: block;
        text-align: center;
        padding: 34px 24px 0;
        padding-right: max(24px, env(safe-area-inset-right));
        padding-left: max(24px, env(safe-area-inset-left));
    }
    .titulo-com-fotos {
        position: relative;
        z-index: 1;
        margin-top: calc(-1 * var(--sobreposicao-foto));
        border-radius: 24px 24px 0 0;
        background: #fff;
    }
    .titulo-anuncio > div:first-child { display: flex; flex-direction: column; }
    .titulo-anuncio h1 { order: -1; font-size: clamp(1.65rem, 6.8vw, 2rem); letter-spacing: -.04em; }
    .identificacao-hospedagem { padding: 9px 24px 20px; text-align: center; border-bottom: 1px solid var(--line); }
    .identificacao-hospedagem h2 { font-size: 1.05rem; letter-spacing: 0; }
    .identificacao-hospedagem p { font-size: .91rem; }
    .destaque-avaliacoes { margin-inline: auto; }
    .mosaico, .mosaico.fotos-1, .mosaico.fotos-2, .mosaico.fotos-3, .mosaico.fotos-4 {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        grid-template-rows: 1fr;
        height: clamp(265px, 78vw, 440px);
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-radius: 0;
    }
    .foto-mosaico { display: block; scroll-snap-align: start; }
    .fotos-4 .foto-mosaico:last-child { grid-column: auto; }
    .acoes-galeria-movel {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
        display: flex;
        gap: 10px;
    }
    .botao-redondo {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 10px rgb(0 0 0 / .13);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }
    .botao-redondo[aria-pressed="true"] { color: var(--brand); }
    .icone-compartilhar {
        position: relative;
        width: 17px;
        height: 15px;
        margin-top: 5px;
        border: 1.5px solid currentColor;
        border-radius: 3px;
        font-size: 1.2rem;
        line-height: 0;
    }
    .icone-compartilhar::first-letter { background: #fff; }
    .contador-galeria-movel {
        position: absolute;
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(13px + var(--sobreposicao-foto));
        display: block;
        min-width: 49px;
        min-height: 36px;
        padding: 5px 11px;
        border: 0;
        border-radius: 7px;
        background: rgb(0 0 0 / .72);
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
    }
    .galeria-dialogo {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }
    .galeria-dialogo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
    .galeria-visualizador img { height: 100%; min-height: 0; touch-action: pan-y pinch-zoom; }
    .layout-anuncio {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 22px max(24px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    }
    .resumo-reserva { position: static; }
    .resumo-reserva:not(.ativo) { display: none; }
    .dados-espaco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comodidades { grid-template-columns: 1fr; gap: 0; }
    .comodidades li { padding: 11px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
    .comodidades li:last-child { border-bottom: 0; }
    .barra-movel {
        position: fixed;
        z-index: 2;
        inset: auto 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-top: 1px solid var(--line);
        background: #fff;
        padding: 12px max(24px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    }
    .barra-movel strong { display: block; }
    .barra-movel small { display: block; color: var(--muted); font-size: .75rem; }
    .barra-movel .botao-principal { min-height: 48px; padding-inline: 17px; }
    .resumo-reserva { scroll-margin-bottom: 88px; }
    .datas-movel {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: min(92dvh, 720px);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 22px 22px 0 0;
        color: var(--ink);
        background: #fff;
    }
    .datas-movel[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
    .datas-movel::backdrop { background: rgb(0 0 0 / .47); }
    .datas-movel-topo { padding: 8px 16px; }
    .datas-movel-topo .botao-redondo { box-shadow: none; }
    .datas-movel-conteudo { overflow: auto; overscroll-behavior: contain; padding: 0 24px 16px; }
    .datas-movel-rodape {
        padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
    }
    .datas-movel-rodape button { width: 100%; min-height: 48px; }
    .datas-movel-rodape button:disabled { background: #ddd; border-color: #ddd; color: #535353; cursor: default; }
    body:has(dialog[open]) { overflow: hidden; }
}