/* Catálogo público — Casa Colina */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

:root {
    --marca       : #ae5537;
    --marca-escura: #7e3d26;
    --terracota   : #ae5537;
    --areia       : #efede8;
    --areia-escura: #e4e0d5;
    --texto       : #1a1a1a;
    --texto-fraco : #8a857d;
    --borda       : #e6e1d7;
    --branco      : #fff;
}

* {
    box-sizing: border-box;
}

body {
    margin     : 0;
    font-family: "Parkinsans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background : var(--branco);
    color      : var(--texto);
    line-height: 1.5;
}

.pagina {
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 0 20px;
}

/* ---- Topo / navegação ---- */
.topo-site {
    border-bottom: 1px solid var(--borda);
    padding      : 0 20px;
}

.navegacao {
    max-width            : 1200px;
    margin               : 0 auto;
    display              : grid;
    grid-template-columns: 1fr auto 1fr;
    align-items          : center;
    gap                  : 16px;
    padding              : 18px 0;
}

.nav-links {
    display: flex;
    gap    : 18px;
}

.nav-direita {
    justify-content: flex-end;
}

.nav-links a {
    color          : var(--texto);
    text-decoration: none;
    font-size      : 14px;
}

.nav-links a:hover {
    color: var(--terracota);
}

.marca {
    display        : block;
    color          : var(--marca-escura);
    text-decoration: none;
}

.marca-logo {
    display: block;
    height : 52px;
    width  : auto;
    margin : 0 auto;
}

.marca-logo .cls-1 {
    fill: currentColor;
}

/* ---- Breadcrumb ---- */
.migalhas {
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 14px 20px;
    display  : flex;
    gap      : 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.migalhas a {
    color          : var(--texto-fraco);
    text-decoration: none;
}

.migalhas a:hover {
    color: var(--terracota);
}

.migalhas span {
    color: var(--texto-fraco);
}

.migalhas .atual {
    color: var(--texto);
}

.migalhas-produto {
    max-width      : 880px;
    justify-content: center;
    padding        : 12px 20px 6px;
    gap            : 6px;
    color          : var(--texto-fraco);
    font-size      : 11px;
    text-align     : center;
}

.migalhas-produto a,
.migalhas-produto .atual,
.migalhas-produto>span {
    color  : var(--texto-fraco);
    opacity: .72;
}

.migalhas-produto a:hover {
    opacity: 1;
}

/* ---- Banner ---- */
.banner {
    background   : var(--marca-escura);
    border-radius: 16px;
    padding      : 56px 48px;
    margin       : 8px 0 32px;
}

.banner-texto h2 {
    margin     : 0 0 10px;
    font-size  : 32px;
    font-weight: 700;
    max-width  : 520px;
    line-height: 1.2;
    color      : var(--areia);
}

.banner-texto p {
    margin   : 0;
    max-width: 460px;
    color    : var(--branco);
    font-size: 15px;
}

/* ---- Catálogo: sidebar + produtos ---- */
.catalogo {
    display              : grid;
    grid-template-columns: 240px 1fr;
    gap                  : 32px;
    align-items          : start;
}

.filtros {
    border       : 1px solid var(--borda);
    border-radius: 12px;
    padding      : 20px;
    position     : sticky;
    top          : 16px;
}

.filtros h3 {
    margin   : 0 0 16px;
    font-size: 16px;
}

.filtro-bloco {
    padding       : 14px 0;
    border-top    : 1px solid var(--borda);
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}

.filtro-titulo {
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color         : var(--texto-fraco);
}

.filtro-categoria {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    color          : var(--texto);
    text-decoration: none;
    font-size      : 14px;
    padding        : 4px 8px;
    border-radius  : 6px;
}

.filtro-categoria:hover {
    background: var(--areia);
}

.filtro-categoria.ativa {
    background: var(--marca);
    color     : var(--branco);
}

.filtro-categoria .quantidade {
    font-size: 12px;
    color    : var(--texto-fraco);
}

.filtro-categoria.ativa .quantidade {
    color: rgba(255, 255, 255, .75);
}

input[type="search"] {
    width        : 100%;
    padding      : 9px 12px;
    border       : 1px solid var(--borda);
    border-radius: 8px;
    font         : inherit;
    font-size    : 14px;
    background   : var(--branco);
    color        : var(--texto);
}

input[type="search"]:focus {
    outline       : 2px solid var(--marca);
    outline-offset: 1px;
}

/* ---- Barra de resultados ---- */
.barra-resultados {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 10px;
    margin-bottom  : 18px;
}

.barra-resultados p {
    margin   : 0;
    font-size: 14px;
    color    : var(--texto-fraco);
}

.barra-resultados strong {
    color: var(--texto);
}

.ordenacao {
    display    : flex;
    align-items: center;
    gap        : 8px;
    font-size  : 13px;
    color      : var(--texto-fraco);
}

.ordenacao select {
    padding      : 7px 10px;
    border       : 1px solid var(--borda);
    border-radius: 999px;
    font         : inherit;
    font-size    : 13px;
    background   : var(--branco);
    color        : var(--texto);
    cursor       : pointer;
}

/* ---- Grade de produtos ---- */
.grade {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap                  : 24px 20px;
}

.vazio {
    text-align: center;
    color     : var(--texto-fraco);
    padding   : 60px 0;
}

.cartao {
    display        : block;
    color          : inherit;
    text-decoration: none;
    cursor         : pointer;
}

.cartao-foto {
    aspect-ratio   : 3 / 4;
    background     : var(--areia);
    border-radius  : 10px;
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.cartao-foto img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.cartao:hover .cartao-foto img {
    transform: scale(1.04);
}

.sem-foto {
    color    : var(--texto-fraco);
    font-size: 13px;
}

.cartao-info {
    padding        : 10px 2px 0;
    display        : flex;
    justify-content: space-between;
    align-items    : baseline;
    gap            : 8px;
}

.cartao-info h2 {
    margin        : 0;
    font-size     : 13px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cartao-categoria {
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--terracota);
}

.cartao-id {
    font-size    : 12px;
    color        : var(--texto-fraco);
    font-family  : ui-monospace, Menlo, monospace;
    white-space  : nowrap;
    background   : #eaeaea;
    padding      : 4px;
    border-radius: 15px;
}

/* ---- Paginação ---- */
.paginacao {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 6px;
    margin         : 36px 0 8px;
}

.pagina-link {
    padding        : 7px 14px;
    border         : 1px solid var(--borda);
    border-radius  : 999px;
    color          : var(--texto);
    text-decoration: none;
    font-size      : 13px;
}

.pagina-link:hover {
    border-color: var(--marca);
}

.pagina-numero.ativa {
    background  : var(--marca);
    border-color: var(--marca);
    color       : var(--branco);
}

/* ---- Outras categorias ---- */
.outras-categorias {
    margin: 56px 0 24px;
}

.outras-categorias h2 {
    font-size     : 26px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin        : 0 0 20px;
}

.categorias-destaque {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 20px;
}

.categoria-cartao {
    display              : grid;
    grid-template-columns: 1fr 140px;
    align-items          : center;
    gap                  : 12px;
    border               : 1px solid var(--borda);
    border-radius        : 12px;
    padding              : 20px;
    color                : inherit;
    text-decoration      : none;
    background           : var(--branco);
    transition           : box-shadow .15s ease;
}

.categoria-cartao:hover {
    box-shadow: 0 8px 20px rgba(45, 42, 38, .1);
}

.categoria-texto h3 {
    margin   : 0 0 4px;
    font-size: 18px;
}

.categoria-texto p {
    margin   : 0 0 12px;
    font-size: 13px;
    color    : var(--texto-fraco);
}

.botao-explorar {
    display       : inline-block;
    padding       : 7px 14px;
    border        : 1px solid var(--texto);
    border-radius : 999px;
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.categoria-cartao:hover .botao-explorar {
    background  : var(--marca);
    border-color: var(--marca);
    color       : var(--branco);
}

.categoria-foto {
    aspect-ratio : 1;
    border-radius: 10px;
    overflow     : hidden;
    background   : var(--areia);
}

.categoria-foto img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

/* ---- Rodapé ---- */
.rodape {
    margin-top: 64px;
    background: var(--marca-escura);
    color     : var(--branco);
    padding   : 28px 20px;
}

.rodape-conteudo {
    max-width  : 1200px;
    margin     : 0 auto;
    display    : flex;
    align-items: center;
    gap        : 28px;
}

.rodape-nome,
.rodape-direitos {
    margin: 0;
}

.rodape-nome {
    font-size     : 14px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rodape-links {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 8px 20px;
}

.rodape-links a {
    color          : var(--branco);
    text-decoration: none;
    font-size      : 13px;
    opacity        : .8;
}

.rodape-links a:hover {
    opacity        : 1;
    text-decoration: underline;
}

.rodape-direitos {
    margin-left: auto;
    color      : rgba(255, 255, 255, .55);
    font-size  : 12px;
    white-space: nowrap;
}

/* ---- Popup / detalhe do produto ---- */
dialog#detalhe {
    border       : none;
    border-radius: 12px;
    padding      : 0;
    max-width    : 880px;
    width        : calc(100vw - 40px);
    padding      : 1rem;
}

dialog#detalhe::backdrop {
    background: rgba(45, 42, 38, .55);
}

.fechar {
    position   : absolute;
    top        : 10px;
    right      : 12px;
    border     : none;
    background : none;
    font-size  : 28px;
    line-height: 1;
    cursor     : pointer;
    color      : var(--texto-fraco);
    z-index    : 1;
}

.detalhe-conteudo {
    display              : grid;
    grid-template-columns: 1fr 1fr;
}

.detalhe-galeria,
.detalhe-texto {
    min-width: 0;
    max-width: 100%;
}

#detalhe-foto {
    width        : 100%;
    height       : auto;
    display      : block;
    border-radius: 8px;
    background   : var(--areia);
}

.detalhe-foto-palco {
    position: relative;
    width   : 100%;
    height  : clamp(320px, 55vw, 520px);
    overflow: hidden;
}

.detalhe-foto-palco:focus-visible {
    outline       : 2px solid var(--marca);
    outline-offset: 2px;
}

.detalhe-foto-palco #detalhe-foto {
    width        : 100%;
    height       : 100%;
    max-height   : none;
    object-fit   : cover;
    border       : 0;
    border-radius: 0;
    border-radius: 15px;
}

.galeria-seta {
    position       : absolute;
    top            : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 38px;
    height         : 38px;
    padding        : 0 0 3px;
    border-radius  : 50%;
    color          : var(--marca-escura);
    font-size      : 45px;
    line-height    : 1;
    cursor         : pointer;
    transform      : translateY(-50%);
    background     : transparent;
    border         : none;
}

.galeria-seta:hover {}

.galeria-anterior {
    left: 10px;
}

.galeria-proxima {
    right: 10px;
}

.detalhe-miniaturas {
    display   : flex;
    width     : 100%;
    max-width : 100%;
    gap       : 8px;
    margin-top: 10px;
    flex-wrap : wrap;
}

.detalhe-miniaturas img {
    width        : 56px;
    height       : 56px;
    object-fit   : cover;
    border-radius: 50%;
    cursor       : pointer;
}

.detalhe-miniaturas img.ativa {
    border-color: var(--terracota);
    border      : 5px solid var(--terracota);
}

.detalhe-texto {
    padding      : 0 1rem;
    overflow-wrap: anywhere;
}

.detalhe-texto h2 {
    margin   : 0;
    font-size: 24px;
}

#detalhe-descricao,
.detalhe-texto .descricao {
    overflow-wrap: anywhere;
}

#detalhe-descricao p,
.detalhe-texto .descricao p {
    margin: 0 0 .75em;
}

#detalhe-descricao ul,
#detalhe-descricao ol,
.detalhe-texto .descricao ul,
.detalhe-texto .descricao ol {
    padding-left: 22px;
}

.acoes-produto {
    display    : flex;
    align-items: center;
    gap        : 8px;
    margin-top : 20px;
}

.botao-reservar {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    width          : fit-content;
    padding        : 11px 20px;
    border-radius  : 999px;
    background     : var(--marca);
    color          : var(--branco);
    font-size      : 14px;
    font-weight    : 600;
    text-decoration: none;
}

.botao-reservar svg {
    width      : 19px;
    height     : 19px;
    flex-shrink: 0;
}

.botao-reservar:hover {
    background: var(--marca-escura);
}

.botao-compartilhar {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 43px;
    width          : 43px;
    height         : 43px;
    padding        : 0;
    border         : 1px solid var(--marca);
    border-radius  : 50%;
    background     : var(--branco);
    color          : var(--marca);
    cursor         : pointer;
}

.botao-compartilhar svg {
    width : 19px;
    height: 19px;
}

.botao-compartilhar:hover {
    background: var(--areia);
}

/* ---- Página individual de produto ---- */
.pagina-produto {
    margin-top   : 8px;
    margin-bottom: 40px;
}

.detalhe-pagina {
    overflow : hidden;
    max-width: 880px;
    margin   : 0 auto;
}

.voltar {
    display        : inline-block;
    margin-top     : 16px;
    color          : var(--marca);
    font-size      : 14px;
    text-decoration: none;
}

.voltar:hover {
    text-decoration: underline;
}

a.cartao-categoria {
    text-decoration: none;
}

a.cartao-categoria:hover {
    text-decoration: underline;
}

/* ---- Responsivo ---- */
@media (max-width: 900px) {
    .catalogo {
        grid-template-columns: 1fr;
    }

    .filtros {
        position: static;
    }
}

@media (max-width: 680px) {
    .rodape-conteudo {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 14px;
    }

    .rodape-direitos {
        margin-left: 0;
    }

    .navegacao {
        grid-template-columns: 1fr;
        justify-items        : center;
        gap                  : 8px;
        padding              : 20px 0;
    }

    .nav-links {
        display: none;
    }

    .banner {
        padding: 32px 24px;
    }

    .banner-texto h2 {
        font-size: 24px;
    }

    .grade {
        grid-template-columns: repeat(2, 1fr);
        gap                  : 18px 12px;
    }

    .detalhe-conteudo {
        grid-template-columns: 1fr;
        width                : 100%;
        min-width            : 0;
    }

    #detalhe-foto {
        width     : 100%;
        max-height: 60vh;
        margin    : 0;
        object-fit: contain;
    }

    .detalhe-miniaturas {
        min-width                 : 0;
        flex-wrap                 : nowrap;
        overflow-x                : auto;
        padding-bottom            : 6px;
        scroll-snap-type          : x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width           : thin;
    }

    .detalhe-miniaturas img {
        flex             : 0 0 64px;
        width            : 64px;
        height           : 64px;
        scroll-snap-align: start;
    }

    .detalhe-texto .cartao-id {
        white-space: normal;
    }
}

/* ---- Página bio (index) ---- */
body.pagina-bio {
    background: linear-gradient(180deg, var(--areia) 0%, var(--branco) 320px);
}

.bio {
    max-width : 980px;
    margin    : 0 auto;
    padding   : 40px 16px 24px;
    border-top: 15px solid #ae5536;
}

.bio-cabecalho {
    text-align   : center;
    margin-bottom: 32px;
}

.bio-logo {
    /* margin: 0 0 10px; */
}

.bio-logo img {
    width : min(300px, 35vw);
    height: auto;
}


.bio-descricao {
    margin   : 0 auto 18px;
    max-width: 420px;
    color    : var(--texto-fraco);
    font-size: 15px;
}

.bio-botoes {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 10px;
}

.bio-botao {
    padding        : 10px 22px;
    border         : 1px solid var(--marca);
    border-radius  : 999px;
    color          : var(--marca);
    background     : var(--branco);
    text-decoration: none;
    font-size      : 14px;
    font-weight    : 600;
}

.bio-botao:hover {
    background: var(--areia);
}

.bio-botao-principal {
    background: var(--marca);
    color     : var(--branco);
}

.bio-botao-principal:hover {
    background: var(--marca-escura);
}

/* ---- Galeria bento ---- */
.bio-galeria {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows       : 130px;
    grid-auto-flow       : dense;
    gap                  : 12px;
}

.kit {
    position       : relative;
    display        : block;
    border-radius  : 14px;
    overflow       : hidden;
    background     : var(--areia-escura);
    text-decoration: none;
}

.kit-foto {
    position  : absolute;
    inset     : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    opacity   : 0;
    transition: opacity .9s ease, transform .3s ease;
}

.kit-foto.ativa {
    opacity: 1;
}

.kit:hover .kit-foto.ativa {
    transform: scale(1.05);
}

.kit-nome {
    position      : absolute;
    left          : 0;
    right         : 0;
    bottom        : 0;
    padding       : 22px 14px 12px;
    background    : linear-gradient(180deg, transparent, rgba(45, 42, 38, .72));
    color         : var(--branco);
    font-size     : 14px;
    font-weight   : 600;
    letter-spacing: .02em;
}

.bloco-grande {
    grid-column: span 2;
    grid-row   : span 2;
}

.bloco-largo {
    grid-column: span 2;
}

.bloco-alto {
    grid-row: span 2;
}

.kit-em-breve {
    border         : 1px dashed var(--borda);
    background     : var(--areia);
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.kit-em-breve .kit-nome {
    position   : static;
    padding    : 0;
    background : none;
    color      : var(--texto-fraco);
    font-weight: 500;
}

.bio-ver-tudo {
    display        : block;
    text-align     : center;
    margin         : 28px 0 8px;
    color          : var(--marca);
    font-weight    : 600;
    text-decoration: none;
}

.bio-ver-tudo:hover {
    text-decoration: underline;
}

.bio-rodape {
    text-align: center;
    color     : var(--texto-fraco);
    font-size : 13px;
    margin-top: 24px;
}

@media (max-width: 680px) {
    .bio-botoes {
        flex-wrap: nowrap;
        gap      : 6px;
    }

    .bio-botao {
        padding    : 7px 10px;
        font-size  : 11px;
        white-space: nowrap;
    }

    .bio-galeria {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows       : 120px;
        gap                  : 10px;
    }

    .bio {
        padding-top: 28px;
    }

    .detalhe-texto {
        padding: 0;
    }

    .topo-site {
        background: var(--marca-escura);
    }

    .marca {
        color: var(--branco);
    }
}