/* ============================================================================
   Landing pages M50 — V2: estilo de seção, blocos ricos e modo de edição.
   Complementa landing.css. Continua valendo a lei de cor do design system:
   somente tokens (--m50ui-* com fallback --m50-*), nunca hex em `color`.
   ========================================================================== */

/* ─── Estilo aplicável a qualquer seção ─────────────────────────────────── */

.site-sec--compacto { padding-block: clamp(24px, 4vw, 44px); }
.site-sec--normal   { padding-block: clamp(48px, 8vw, 96px); }
.site-sec--amplo    { padding-block: clamp(72px, 12vw, 152px); }

.site-sec--esquerda .site-secao__cabecalho { text-align: left; }
.site-sec--esquerda .site-secao__subtitulo { margin-inline: 0; }
.site-sec--centro   .site-secao__cabecalho { text-align: center; }

.site-sec--superficie { background: var(--m50ui-surface, var(--m50-surface-elevated)); }

.site-sec--destaque {
    background: var(--m50-gradient-primary, var(--m50ui-primary));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
}

.site-sec--destaque .site-secao__titulo,
.site-sec--destaque .site-secao__subtitulo { color: inherit; }

/* Fundo em imagem: véu por cima para o texto continuar legível em qualquer foto. */
.site-sec--imagem {
    position: relative;
    background-image: var(--sec-imagem);
    background-size: cover;
    background-position: center;
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    isolation: isolate;
}

.site-sec--imagem::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / var(--sec-veu, 0.45));
}

.site-sec--imagem .site-secao__titulo,
.site-sec--imagem .site-secao__subtitulo,
.site-sec--imagem .site-hero__titulo,
.site-sec--imagem .site-hero__subtitulo { color: inherit; }

/* Parallax: só onde o navegador aguenta bem — desligado no mobile (iOS não suporta)
   e sob prefers-reduced-motion. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .site-sec--parallax { background-attachment: fixed; }
}

/* ─── Slides (scroll-snap: funciona sem JavaScript) ─────────────────────── */

.site-slides__trilho {
    display: flex;
    gap: var(--m50ui-sp-lg, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.site-slides__trilho::-webkit-scrollbar { display: none; }

.site-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: var(--m50-radius-2xl, 24px);
    overflow: hidden;
    min-height: clamp(260px, 42vw, 460px);
    display: grid;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    isolation: isolate;
}

.site-slide__imagem {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.site-slide__conteudo {
    grid-area: 1 / 1;
    align-self: end;
    padding: clamp(20px, 4vw, 44px);
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent);
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
}

/* Slide sem imagem: sem véu, texto no tom da superfície. */
.site-slide:not(:has(.site-slide__imagem)) .site-slide__conteudo {
    background: none;
    color: var(--m50ui-on-surface, var(--m50-text-primary));
    align-self: center;
    text-align: center;
}

.site-slide__titulo {
    margin: 0 0 8px;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: var(--m50-font-weight-bold, 700);
}

.site-slide__subtitulo { margin: 0 0 16px; max-width: 54ch; opacity: 0.92; }

.site-slides__pontos {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: var(--m50ui-sp-lg, 16px);
}

.site-slides__ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--m50ui-border, var(--m50-border));
    transition: background var(--m50-duration-fast, 150ms);
}

.site-slides__ponto:hover,
.site-slides__ponto:focus-visible { background: var(--m50ui-accent-text, var(--m50-info)); }

@media (min-width: 861px) {
    .site-slide { flex-basis: calc(100% - 80px); }
}

/* ─── Galeria ───────────────────────────────────────────────────────────── */

.site-galeria__grade { display: grid; gap: var(--m50ui-sp-md, 12px); }
.site-galeria__grade--grade { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.site-galeria__grade--mosaico {
    grid-template-columns: repeat(var(--galeria-colunas, 3), 1fr);
    grid-auto-rows: 12rem;
}

.site-galeria__grade--mosaico .site-galeria__item:nth-child(4n+1) { grid-row: span 2; }

.site-galeria__grade--faixa {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.site-galeria__grade--faixa .site-galeria__item { scroll-snap-align: start; }

.site-galeria__item { margin: 0; position: relative; }

.site-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--m50ui-r-lg, 12px);
    display: block;
    transition: transform var(--m50-duration-normal, 250ms) var(--m50-ease-out, ease-out);
}

.site-galeria__item a:hover img { transform: scale(1.02); }

.site-galeria__item figcaption {
    margin-top: 6px;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* Ampliação por :target — lightbox sem JavaScript. */
.site-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(0 0 0 / 0.9);
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
}

.site-lightbox:target { display: grid; }

.site-lightbox img {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--m50ui-r-lg, 12px);
}

.site-lightbox__fechar {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 34px;
    line-height: 1;
    text-decoration: none;
    color: var(--m50-text-inverse, #ffffff);
}

/* ─── Vitrine (produtos/serviços em cartões) ────────────────────────────── */

.site-vitrine__grade { display: grid; gap: var(--m50ui-sp-lg, 16px); }

/* No mobile as colunas configuradas não cabem: auto-fit decide; a partir do
   desktop vale o número escolhido no painel (--vitrine-colunas). */
.site-vitrine__grade--grade { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

@media (min-width: 861px) {
    .site-vitrine__grade--grade { grid-template-columns: repeat(var(--vitrine-colunas, 3), 1fr); }
}

.site-vitrine__grade--lista { grid-template-columns: 1fr; }

.site-vitrine__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
    transition: transform var(--m50-duration-normal, 250ms) var(--m50-ease-out, ease-out),
                box-shadow var(--m50-duration-normal, 250ms) var(--m50-ease-out, ease-out);
}

.site-vitrine__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--m50-shadow-md, 0 6px 20px rgb(0 0 0 / 0.08));
}

.site-vitrine__item--destaque { border-color: var(--m50ui-accent-text, var(--m50-info)); }

.site-vitrine__imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--m50ui-r-lg, 12px) var(--m50ui-r-lg, 12px) 0 0;
}

/* Lista: imagem à esquerda, conteúdo à direita. */
.site-vitrine__grade--lista .site-vitrine__item {
    display: grid;
    grid-template-columns: clamp(120px, 28vw, 240px) 1fr;
}

.site-vitrine__grade--lista .site-vitrine__imagem {
    height: 100%;
    min-height: 140px;
    aspect-ratio: auto;
    border-radius: var(--m50ui-r-lg, 12px) 0 0 var(--m50ui-r-lg, 12px);
}

.site-vitrine__conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: var(--m50ui-sp-lg, 16px);
}

.site-vitrine__categoria {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--m50ui-bg, var(--m50-surface-secondary));
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-xs, 12px);
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    text-transform: uppercase;
}

.site-vitrine__nome {
    margin: 0;
    font-size: var(--m50ui-fs-lg, 17px);
    font-weight: var(--m50-font-weight-bold, 700);
}

.site-vitrine__descricao {
    flex: 1;
    margin: 0;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-vitrine__preco {
    font-weight: var(--m50-font-weight-bold, 700);
    color: var(--m50ui-accent-text, var(--m50-info));
}

.site-vitrine__conteudo .site-botao { margin-top: 4px; }

/* ─── Vídeo ─────────────────────────────────────────────────────────────── */

.site-video__moldura {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--m50-radius-2xl, 24px);
    overflow: hidden;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
}

.site-video__moldura iframe,
.site-video__moldura video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ─── Texto livre ───────────────────────────────────────────────────────── */

.site-textorico__corpo {
    font-size: var(--m50ui-fs-lg, 17px);
    line-height: var(--m50-line-height-relaxed, 1.7);
}

.site-textorico__corpo > * + * { margin-top: 1em; }

.site-textorico__corpo h2,
.site-textorico__corpo h3,
.site-textorico__corpo h4 {
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: var(--m50-line-height-tight, 1.25);
}

.site-textorico__corpo ul { padding-left: 1.3em; }
.site-textorico__corpo li + li { margin-top: 0.35em; }
.site-textorico__corpo a { color: var(--m50ui-accent-text, var(--m50-info)); }

/* ─── Logos ─────────────────────────────────────────────────────────────── */

.site-logos__titulo {
    text-align: center;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-sm, 13px);
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    text-transform: uppercase;
    margin: 0 0 var(--m50ui-sp-lg, 16px);
}

.site-logos__faixa {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 56px);
}

.site-logos__faixa img { height: clamp(26px, 4vw, 40px); width: auto; display: block; }

.site-logos__faixa--cinza img {
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter var(--m50-duration-normal, 250ms), opacity var(--m50-duration-normal, 250ms);
}

.site-logos__faixa--cinza img:hover { filter: grayscale(0); opacity: 1; }

/* ─── Mapa, agenda e conteúdo externo ───────────────────────────────────── */

.site-mapa__moldura,
.site-agenda__moldura,
.site-embed__moldura {
    border-radius: var(--m50ui-r-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    background: var(--m50ui-surface, var(--m50-surface-elevated));
}

.site-mapa__moldura { height: var(--mapa-altura, 380px); }
.site-agenda__moldura { height: var(--agenda-altura, 640px); }
.site-embed__moldura { min-height: var(--embed-altura, 420px); }

.site-mapa__moldura iframe,
.site-agenda__moldura iframe,
.site-embed__moldura iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.site-mapa__acoes { margin-top: var(--m50ui-sp-md, 12px); text-align: center; }

/* Marcadores exibidos NO EDITOR no lugar do conteúdo externo — evita carregar
   iframe de terceiro a cada render do canvas. */
.site-mapa__marcador,
.site-agenda__marcador,
.site-video__marcador,
.site-embed__marcador {
    height: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--m50ui-sp-lg, 16px);
    text-align: center;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-sm, 13px);
}

.site-mapa__marcador span,
.site-agenda__marcador span,
.site-video__marcador span,
.site-embed__marcador span {
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-accent-text, var(--m50-info));
}

.site-mapa__marcador code,
.site-agenda__marcador code,
.site-video__marcador code,
.site-embed__marcador code {
    font-family: var(--m50ui-mono, monospace);
    font-size: var(--m50ui-fs-xs, 12px);
    word-break: break-all;
}

.site-embed__bloqueado {
    padding: var(--m50ui-sp-lg, 16px);
    text-align: center;
    color: var(--m50-warning, var(--m50ui-on-surface-muted));
}

/* ─── Agenda em lista de eventos ────────────────────────────────────────── */

.site-agenda__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--m50ui-sp-md, 12px);
}

.site-agenda__evento {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--m50ui-sp-lg, 16px);
    padding: var(--m50ui-sp-lg, 16px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
}

.site-agenda__data {
    display: grid;
    place-content: center;
    text-align: center;
    min-width: 62px;
    padding: 10px;
    border-radius: var(--m50ui-r-md, 8px);
    background: var(--m50ui-bg, var(--m50-surface-secondary));
}

.site-agenda__dia {
    display: block;
    font-size: 26px;
    line-height: 1;
    font-weight: var(--m50-font-weight-extrabold, 800);
    color: var(--m50ui-accent-text, var(--m50-info));
    font-variant-numeric: tabular-nums;
}

.site-agenda__mes {
    display: block;
    margin-top: 2px;
    font-size: var(--m50ui-fs-xs, 12px);
    letter-spacing: 0.08em;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-agenda__conteudo h3 { margin: 0 0 4px; font-size: var(--m50ui-fs-lg, 17px); }

.site-agenda__conteudo p {
    margin: 0 0 8px;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Modo edição: existe só dentro do editor ───────────────────────────── */

.site-landing--edicao .site-bloco { position: relative; }

.site-landing--edicao .site-bloco::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color var(--m50-duration-fast, 150ms);
}

.site-landing--edicao .site-bloco:hover::after { border-color: var(--m50ui-border, var(--m50-border)); }
.site-landing--edicao .site-bloco--selecionado::after { border-color: var(--m50ui-accent-text, var(--m50-info)); }
.site-landing--edicao .site-bloco--oculto { opacity: 0.38; }

.site-bloco__etiqueta {
    /* DENTRO do canto do próprio bloco (como as setas de ordem): acima da borda
       (translateY(-100%)) ela invadia a faixa do bloco vizinho e a navbar do site —
       que tem empilhamento próprio — cobria a etiqueta do bloco de baixo. */
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 3px 10px;
    font-family: var(--m50ui-mono, monospace);
    font-size: 11px;
    background: var(--m50ui-accent-text, var(--m50-info));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .35);
    opacity: 0;
    transition: opacity var(--m50-duration-fast, 150ms);
    pointer-events: none;
    white-space: nowrap;
    z-index: 50; /* acima da .site-navbar sticky (z-index 40) */
}

.site-landing--edicao .site-bloco:hover .site-bloco__etiqueta,
.site-landing--edicao .site-bloco--selecionado .site-bloco__etiqueta { opacity: 1; }

/* Texto editável no lugar. */
.site-editavel { outline: none; border-radius: 3px; }
.site-editavel:hover { box-shadow: 0 0 0 2px var(--m50ui-border, var(--m50-border)); }

.site-editavel:focus {
    box-shadow: 0 0 0 2px var(--m50ui-focus-ring, var(--m50-border-focus));
    background: var(--m50ui-surface, var(--m50-surface-elevated));
}

.site-editavel:empty::before {
    content: attr(data-vazio);
    opacity: 0.45;
    font-style: italic;
}

/* Selo discreto nos marcadores de conteúdo externo: lembra que aquilo é prévia.
   É <small> de propósito — as regras `.site-*__marcador span` não o alcançam. */
.site-previa-selo {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: 999px;
    background: var(--m50ui-bg, var(--m50-surface-secondary));
    color: var(--m50ui-on-surface-muted, var(--m50-text-tertiary));
    font-size: var(--m50ui-fs-xs, 12px);
    font-weight: var(--m50-font-weight-normal, 400);
}

/* Item sem imagem no canvas: orienta em vez de mostrar imagem quebrada,
   ocupando a área que a imagem ocuparia. */
.site-imagem-vazia {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    min-height: 140px;
    aspect-ratio: 4 / 3;
    padding: var(--m50ui-sp-lg, 16px);
    text-align: center;
    border: 2px dashed var(--m50ui-border, var(--m50-border));
    border-radius: var(--m50ui-r-lg, 12px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-sm, 13px);
}

/* Alternância Editar ↔ Prévia do texto livre — botão no canto da seção. */
.site-textorico__ferramentas {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.site-textorico__ferramentas button {
    padding: 3px 12px;
    border: 1px solid var(--m50ui-border, var(--m50-border));
    border-radius: 999px;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font: inherit;
    font-size: var(--m50ui-fs-xs, 12px);
    cursor: pointer;
    transition: color var(--m50-duration-fast, 150ms), border-color var(--m50-duration-fast, 150ms);
}

.site-textorico__ferramentas button:hover,
.site-textorico__ferramentas button:focus-visible {
    color: var(--m50ui-accent-text, var(--m50-info));
    border-color: var(--m50ui-accent-text, var(--m50-info));
}

/* ─── Bloco vazio: o vazio É o pedido ao Digo ───────────────────────────── */

.site-pedido { padding: clamp(28px, 6vw, 64px) var(--m50ui-sp-lg, 16px); }

.site-pedido__interior {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    padding: clamp(22px, 4vw, 40px);
    border: 2px dashed var(--m50ui-border, var(--m50-border));
    border-radius: var(--m50-radius-2xl, 24px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
}

.site-pedido__selo {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-accent-text, var(--m50-info));
}

.site-pedido__dica { margin: 0 0 16px; color: var(--m50ui-on-surface-muted, var(--m50-text-secondary)); }

.site-pedido__entrada {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.site-pedido__entrada input {
    flex: 1 1 280px;
    padding: 11px 14px;
    border-radius: var(--m50ui-r-md, 8px);
    border: 1px solid var(--m50ui-border, var(--m50-border));
    background: var(--m50ui-bg, var(--m50-surface-secondary));
    color: var(--m50ui-on-bg, var(--m50-text-primary));
    font: inherit;
    font-size: var(--m50ui-fs-md, 15px);
}

.site-pedido__entrada input:focus {
    outline: 2px solid var(--m50ui-focus-ring, var(--m50-border-focus));
    outline-offset: 1px;
}

.site-pedido__botao {
    padding: 11px 22px;
    border: none;
    border-radius: var(--m50ui-r-md, 8px);
    background: var(--m50ui-primary, var(--m50-primary));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    font: inherit;
    font-weight: var(--m50-font-weight-semibold, 600);
    cursor: pointer;
}

.site-pedido__botao:disabled { opacity: 0.5; cursor: default; }

.site-pedido__alternativa {
    margin: 14px 0 0;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-tertiary));
}

/* Setas de ordem do bloco (só no editor): DENTRO do canto superior direito do próprio
   bloco — fora dele (translateY(-100%), como a etiqueta) elas invadiam a faixa do bloco
   vizinho e ficavam escondidas atrás da navbar do site. Visibilidade igual à da etiqueta. */
.site-bloco__ordem {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease-out;
    z-index: 50; /* acima da .site-navbar sticky (z-index 40) */
}

.site-landing--edicao .site-bloco:hover .site-bloco__ordem,
.site-landing--edicao .site-bloco--selecionado .site-bloco__ordem { opacity: 1; }

.site-bloco__ordem button {
    padding: 3px 10px;
    border: 0;
    border-radius: 4px;
    background: var(--m50ui-accent-text, var(--m50-info));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    font-size: 10px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / .35);
}

.site-bloco__ordem button:hover:not(:disabled) { filter: brightness(1.15); }
.site-bloco__ordem button:disabled { opacity: 0.35; cursor: default; }

/* Excluir seção: cor de perigo para não confundir com as setas de ordem. */
.site-bloco__ordem .site-bloco__excluir {
    background: var(--m50-danger, #b4453f);
    color: var(--m50-text-inverse, #fff);
    margin-left: 4px;
}