/* =====================================================================
   Chalés da Pedra da Boca — ajustes próprios
   Carregado DEPOIS do CSS portado do Elementor. Aqui só entra o que o
   layout original não resolve sozinho: fontes auto-hospedadas (a CSP não
   permite buscar do Google) e utilitários do sistema novo.
   NÃO recriar estilo de layout aqui — o layout vem do CSS portado.
   ===================================================================== */

/* O CSS do Elementor pede "Contrallto" (dois L) e as fontes do Google.
   Como a CSP só permite font-src 'self', registramos os mesmos nomes
   apontando para os arquivos locais. */
@font-face {
    font-family: "Contrallto";
    src: url("../fonts/contralto.woff") format("woff"),
         url("../fonts/contralto.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Contralto";
    src: url("../fonts/contralto.woff") format("woff"),
         url("../fonts/contralto.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Gantari";
    src: url("../fonts/gantari.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* ------------------------------------------------- slideshow de fundo */
/* A marcação é montada por app.js; o Elementor faria o mesmo em runtime.
   Ficam atrás do conteúdo e por baixo do overlay ::before da seção. */

.elementor-background-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.elementor-background-slideshow__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.elementor-background-slideshow__slide.is-ativo { opacity: 1; }

/* O slideshow precisa ficar atrás do conteúdo.
   CUIDADO: NÃO aplicar `position` em `.e-con > .elementor-element`. O CSS do
   Elementor posiciona vários elementos com `position: absolute` (o brasão
   centralizado da seção "Sobre", por exemplo, via `.imagem-centralizada`), e
   uma regra genérica aqui sobrescreve e quebra o layout. Escopo mínimo: só a
   seção que tem slideshow e o wrapper interno, que nunca é absoluto. */
.e-con[data-settings*="slideshow"] { position: relative; }
.e-con[data-settings*="slideshow"] > .e-con-inner { position: relative; z-index: 1; }

/* --------------------------------------------------------- acessibilidade */

.pular-para {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: #41442F; color: #fff; padding: .75rem 1.25rem;
    font: 400 .9375rem/1 "Gantari", system-ui, sans-serif;
}
.pular-para:focus { left: 0; }

/* --------------------------------------------------------------- alertas */

.alerta {
    padding: .875rem 1.25rem;
    font: 400 .9375rem/1.5 "Inter", system-ui, sans-serif;
    text-align: center;
}
.alerta--sucesso { background: #e8f5ec; color: #14532d; }
.alerta--erro    { background: #fdecec; color: #7f1d1d; }

/* ------------------------------------------------- cards de chalé (sistema) */
/* Usado pelas seções dinâmicas do sistema novo, que não existem no
   layout original (listagem de chalés vinda do banco). */

.chales {
    display: grid; gap: 1.5rem;
    list-style: none; margin: 0; padding: 0;
}

.chale-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    overflow: hidden;
}

.chale-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.chale-card__corpo { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.chale-card__desc { font-size: .9375rem; color: #5C6058; flex: 1; }

.chale-card__preco {
    margin: .875rem 0 1rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.375rem;
    color: #41442F;
}
.chale-card__preco small { font-family: "Inter", sans-serif; font-size: .8125rem; color: #5C6058; }

@media (min-width: 48em)      { .chales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64.0625em) { .chales { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}