/* =====================================================================
   Layout do site público (botões, cards, grids e seções)
   Visual do projeto Agendamento Simples adaptado ao Agendamentos Master: vidro claro,
   brilho suave, borda animada e holofote nos cards, botões com degradê e elevação.
   Vale só para o site público (body.site-public); o painel administrativo não muda.
   As cores continuam vindo da identidade visual (--bs-primary / --bs-secondary) e de
   Configurações > Cores do site; funciona nos temas claro e escuro.
   ===================================================================== */

@property --angulo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body.site-public {
    --lay-texto: var(--bs-body-color);
    --lay-suave: var(--bs-secondary-color);
    --lay-acento: color-mix(in srgb, var(--bs-primary) 78%, #000);
    --lay-destaque: var(--bs-secondary, var(--bs-primary));
    --lay-borda: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    --lay-borda-forte: color-mix(in srgb, var(--bs-primary) 28%, transparent);
    --lay-superficie: color-mix(in srgb, var(--tema-card-fundo, var(--bs-body-bg)) 82%, transparent);
    --lay-grad: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 58%, var(--lay-destaque)) 100%);
    --lay-brilho: 0 10px 28px -12px color-mix(in srgb, var(--bs-primary) 85%, transparent);
    --lay-sombra: 0 1px 2px color-mix(in srgb, var(--bs-primary) 8%, transparent), 0 16px 36px -20px color-mix(in srgb, var(--bs-primary) 32%, transparent);
    --lay-raio-btn: 8px;
    --lay-raio-card: 14px;
    --lay-raio-campo: 8px;

    background:
        radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--bs-primary) 13%, transparent), transparent 60%),
        radial-gradient(760px 460px at 100% 18%, color-mix(in srgb, var(--lay-destaque) 14%, transparent), transparent 60%),
        var(--tema-fundo, var(--bs-body-bg));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

body.site-public ::selection { background: color-mix(in srgb, var(--lay-destaque) 45%, transparent); }
body.site-public :focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* ---------- Botões: cantos arredondados, brilho, elevação e faixa de luz ---------- */
body.site-public .btn {
    --bs-btn-border-radius: var(--lay-raio-btn);
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .55rem;
    border-radius: var(--lay-raio-btn);
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease, box-shadow .28s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}
body.site-public .btn-lg { --bs-btn-border-radius: 14px; border-radius: 14px; padding: .8rem 1.6rem; }
body.site-public .btn-sm { --bs-btn-border-radius: 10px; border-radius: 10px; font-weight: 500; --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .35rem; }
body.site-public .btn:hover { transform: translateY(-2px); }
body.site-public .btn:active { transform: translateY(0) scale(.98); }
body.site-public .btn:disabled, body.site-public .btn.disabled { transform: none; opacity: .6; }
body.site-public .btn-link { transform: none !important; overflow: visible; }

body.site-public .btn-primary::after,
body.site-public .btn-success::after,
body.site-public .btn-warning::after,
body.site-public .btn-danger::after,
body.site-public .site-hero-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: -1;
}
body.site-public .btn-primary:hover::after,
body.site-public .btn-success:hover::after,
body.site-public .btn-warning:hover::after,
body.site-public .btn-danger:hover::after,
body.site-public .site-hero-cta:hover::after { left: 135%; }

body.site-public .btn-primary,
body.site-public .site-hero-cta {
    background-image: var(--lay-grad);
    background-color: var(--bs-primary);
    border-color: transparent;
    color: var(--tema-btn-texto, #fff);
    box-shadow: var(--lay-brilho);
}
body.site-public .btn-primary:hover, body.site-public .btn-primary:focus, body.site-public .btn-primary:active,
body.site-public .site-hero-cta:hover, body.site-public .site-hero-cta:focus {
    background-image: var(--lay-grad);
    border-color: transparent;
    color: var(--tema-btn-texto, #fff);
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--bs-primary) 95%, transparent);
}

body.site-public .btn-outline-primary,
body.site-public .site-hero-cta-ghost {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
}
body.site-public .btn-outline-primary:hover, body.site-public .btn-outline-primary:focus, body.site-public .btn-outline-primary:active,
body.site-public .btn-check:checked + .btn-outline-primary,
body.site-public .site-hero-cta-ghost:hover, body.site-public .site-hero-cta-ghost:focus {
    background-image: var(--lay-grad);
    border-color: transparent;
    color: var(--tema-btn-texto, #fff);
    box-shadow: var(--lay-brilho);
}

body.site-public .btn-outline-secondary {
    border-width: 1.5px;
    --bs-btn-color: var(--lay-suave);
    --bs-btn-border-color: var(--lay-borda-forte);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 9%, var(--bs-body-bg));
    --bs-btn-hover-color: var(--lay-texto);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-body-bg));
    --bs-btn-active-color: var(--lay-texto);
    --bs-btn-active-border-color: var(--bs-primary);
}
body.site-public .btn-success { box-shadow: 0 10px 26px -12px rgba(25, 135, 84, .75); }
body.site-public .btn-danger { box-shadow: 0 10px 26px -12px rgba(220, 53, 69, .7); }
body.site-public .btn-outline-danger, body.site-public .btn-outline-success,
body.site-public .btn-outline-warning, body.site-public .btn-outline-info { border-width: 1.5px; }

/* botão grande de chamada do topo: pulsa de leve */
body.site-public .site-hero-cta { animation: layPulsoBrilho 3.4s ease-in-out infinite; }
@keyframes layPulsoBrilho {
    0%, 100% { box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--bs-primary) 80%, transparent); }
    50% { box-shadow: 0 14px 42px -8px color-mix(in srgb, var(--bs-primary) 100%, transparent); }
}

/* ---------- Formulários ---------- */
body.site-public .form-control,
body.site-public .form-select,
body.site-public .input-group-text {
    border-radius: var(--lay-raio-campo);
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-color: var(--lay-borda-forte);
    transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
body.site-public .form-control,
body.site-public .form-select { background-color: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); }
body.site-public .input-group-text { background-color: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg)); color: var(--lay-acento); }
body.site-public .input-group > .form-control,
body.site-public .input-group > .btn,
body.site-public .input-group > .input-group-text { border-radius: var(--lay-raio-campo); }
body.site-public .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.site-public .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.site-public .input-group > .btn { overflow: visible; }
body.site-public .form-control:focus,
body.site-public .form-select:focus {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 20%, transparent), 0 0 24px -8px color-mix(in srgb, var(--bs-primary) 45%, transparent);
}
body.site-public .form-label { font-weight: 500; font-size: .86rem; margin-bottom: .35rem; }
body.site-public .form-text { font-size: .76rem; }
body.site-public .form-check-input { border-radius: 6px; border-color: var(--lay-borda-forte); }
body.site-public .form-check-input[type="radio"] { border-radius: 50%; }
body.site-public .alert { border-radius: 14px; }
body.site-public .badge { border-radius: 8px; font-weight: 600; }
body.site-public .dropdown-menu,
body.site-public .modal-content { border-radius: 16px; border: 1px solid var(--lay-borda); }
body.site-public .page-link { border-radius: 10px !important; margin: 0 2px; }

/* ---------- Cards: vidro claro, borda animada e holofote que segue o mouse ---------- */
body.site-public .card {
    --bs-card-bg: transparent;
    position: relative;
    isolation: isolate;
    background: var(--lay-superficie);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--lay-borda);
    border-radius: var(--lay-raio-card);
    box-shadow: var(--lay-sombra);
    transition: transform .28s ease, box-shadow .35s ease, border-color .3s ease;
}
body.site-public .card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--angulo),
        var(--bs-primary), var(--lay-destaque) 22%, color-mix(in srgb, var(--bs-primary) 18%, transparent) 45%,
        var(--bs-primary) 68%, var(--lay-destaque) 88%, var(--bs-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .4s ease;
    animation: layGiroBorda 5s linear infinite;
    pointer-events: none;
}
body.site-public .card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--lay-destaque) 24%, transparent), color-mix(in srgb, var(--bs-primary) 8%, transparent) 45%, transparent 66%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
body.site-public .card > * { position: relative; z-index: 1; }
body.site-public .card:hover {
    border-color: transparent;
    box-shadow: 0 26px 56px -26px color-mix(in srgb, var(--bs-primary) 45%, transparent), 0 0 46px -20px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
body.site-public .card:hover::before, body.site-public .card:hover::after { opacity: 1; }
@keyframes layGiroBorda { to { --angulo: 360deg; } }

/* cartões clicáveis levantam; os de formulário mantêm a borda acesa e não pulam */
body.site-public .site-wizard-option:hover,
body.site-public .site-pedido-card:hover,
body.site-public .site-secretaria-card:hover { transform: translateY(-6px); }
body.site-public .site-wizard-card { box-shadow: var(--lay-sombra); }
body.site-public .site-wizard-card::before { opacity: .85; }
body.site-public .site-wizard-card:hover { transform: none; }
/* cartões de secretaria mantêm o friso colorido do topo */
body.site-public .site-secretaria-card { border-top: 4px solid var(--secretaria-cor, var(--bs-primary)); }
body.site-public .site-secretaria-card:hover { border-top-color: var(--secretaria-cor, var(--bs-primary)); }

/* aparecer ao rolar */
body.site-public .reveal { opacity: 0; translate: 0 24px; }
body.site-public .reveal.visivel { animation: layEntrar .75s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0ms) both; }
@keyframes layEntrar { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Menu ---------- */
body.site-public .site-navbar {
    background: color-mix(in srgb, var(--tema-menu-fundo, var(--bs-body-bg)) 78%, transparent);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--lay-borda);
    position: sticky;
}
body.site-public .site-navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-primary) 25%, var(--lay-destaque) 50%, var(--bs-primary) 75%, transparent);
    opacity: .75;
    pointer-events: none;
}
body.site-public .site-navbar-nav .nav-link { border-radius: 11px; }
body.site-public .site-navbar-nav .nav-link:hover,
body.site-public .site-navbar-nav .nav-link:focus { background: color-mix(in srgb, var(--bs-primary) 11%, transparent); }

/* ---------- Topo da página inicial: grade suave, brilhos animados e título em degradê ---------- */
body.site-public .site-hero {
    isolation: isolate;
    color: var(--lay-texto);
    background-image:
        linear-gradient(color-mix(in srgb, var(--bs-primary) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 7%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 70%, transparent), color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg)) 100%);
    background-size: 46px 46px, 46px 46px, auto;
    border-bottom: 1px solid var(--lay-borda);
    padding: clamp(4rem, 9vw, 7.5rem) 0;
}
body.site-public .site-hero::before,
body.site-public .site-hero::after {
    z-index: -1;
    width: 560px; height: 560px;
    border-radius: 50%;
    filter: blur(90px);
    animation: layOrbita 18s ease-in-out infinite alternate;
}
body.site-public .site-hero::before { background: var(--bs-primary); opacity: .26; top: -210px; left: -150px; right: auto; }
body.site-public .site-hero::after { background: var(--lay-destaque); opacity: .34; bottom: -260px; right: -170px; top: auto; left: auto; animation-delay: -9s; }
@keyframes layOrbita { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(90px, 60px) scale(1.18); } }

body.site-public .site-hero-badge {
    color: var(--lay-acento);
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    border-radius: 10px;
}
body.site-public .site-hero-title {
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.03em;
    background: linear-gradient(95deg, color-mix(in srgb, var(--bs-primary) 55%, #000) 0%, var(--bs-primary) 62%, color-mix(in srgb, var(--bs-primary) 60%, var(--lay-destaque)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.site-public .site-hero-subtitle { color: var(--lay-suave); }
body.site-public .site-hero-features,
body.site-public .site-hero-features span { color: var(--lay-suave); }
body.site-public .site-hero-features i { color: var(--bs-primary); }
body.site-public .site-hero-art {
    background: var(--lay-superficie);
    border: 1px solid var(--lay-borda);
    box-shadow: var(--lay-sombra);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.site-public .site-hero-art i { color: var(--bs-primary); }

/* ---------- Seções ---------- */
body.site-public section.bg-light {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 60%, transparent), transparent 70%), color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg)) !important;
    border-top: 1px solid var(--lay-borda);
    border-bottom: 1px solid var(--lay-borda);
}
body.site-public .site-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .9rem;
    margin-bottom: .85rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lay-acento);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 32%, transparent);
}
body.site-public .site-section-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--lay-destaque); box-shadow: 0 0 0 1.5px rgba(29, 28, 28, .45); }
body.site-public .site-section-title { font-weight: 700; letter-spacing: -.025em; }

/* ---------- Como funciona ---------- */
body.site-public .site-step-icon {
    width: 3.6rem; height: 3.6rem;
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-primary) 16%, var(--bs-body-bg)), color-mix(in srgb, var(--lay-destaque) 22%, var(--bs-body-bg)));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}
body.site-public .site-step-icon:hover { transform: scale(1.1) rotate(-4deg); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--bs-primary) 60%, transparent); }
body.site-public .site-step-number {
    border-radius: 10px;
    background: var(--lay-grad);
    box-shadow: var(--lay-brilho);
    border: 2px solid var(--bs-body-bg);
}

/* ---------- Cartões de serviço e de secretaria (grids do portal) ---------- */
body.site-public .site-pedido-icon,
body.site-public .site-secretaria-icon,
body.site-public .site-wizard-option-icon { border-radius: 14px; transition: transform .3s ease; }
body.site-public .site-pedido-card:hover .site-pedido-icon,
body.site-public .site-secretaria-card:hover .site-secretaria-icon,
body.site-public .site-wizard-option:hover .site-wizard-option-icon { transform: scale(1.1) rotate(-5deg); }

/* ---------- Fluxo de agendamento ---------- */
body.site-public .site-wizard-progress { height: .5rem; border-radius: 6px; }
body.site-public .site-wizard-progress-bar { background: var(--lay-grad); box-shadow: 0 0 12px color-mix(in srgb, var(--bs-primary) 55%, transparent); border-radius: 6px; }

body.site-public .site-calendar-nav {
    border-radius: 12px;
    border: 1px solid var(--lay-borda-forte);
    background: var(--bs-body-bg);
    color: var(--lay-texto);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
body.site-public .site-calendar-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); border-color: var(--bs-primary); }
body.site-public .site-calendar-nav:active { transform: scale(.94); }
body.site-public .site-calendar-weekday { color: var(--lay-suave); font-weight: 600; }
body.site-public .site-calendar-day {
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--lay-suave) 55%, transparent);
    transition: background .2s ease, transform .15s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease;
}
body.site-public .site-calendar-day.disponivel {
    background: color-mix(in srgb, var(--bs-primary) 13%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    color: var(--lay-acento);
    font-weight: 600;
    cursor: pointer;
}
body.site-public .site-calendar-day.disponivel:hover {
    background: var(--lay-grad);
    border-color: transparent;
    color: var(--tema-btn-texto, #fff);
    transform: translateY(-2px) scale(1.06);
    box-shadow: var(--lay-brilho);
}

body.site-public .site-timeslot {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.15rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    background: var(--bs-body-bg);
    color: var(--lay-texto);
    font-size: .92rem;
    transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
body.site-public .site-timeslot:hover {
    background: var(--lay-grad);
    border-color: transparent;
    color: var(--tema-btn-texto, #fff);
    transform: translateY(-3px);
    box-shadow: var(--lay-brilho);
}

/* ---------- Linhas de informação, protocolo e sucesso ---------- */
body.site-public .site-info-rows { gap: .95rem; }
body.site-public .site-info-row-icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)), color-mix(in srgb, var(--lay-destaque) 20%, var(--bs-body-bg)));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 24%, transparent);
}
body.site-public .site-info-row-label { font-weight: 500; letter-spacing: .09em; color: var(--lay-suave); }
body.site-public .site-info-row-value { color: var(--lay-texto); font-weight: 500; }
body.site-public .site-protocolo-badge {
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)), color-mix(in srgb, var(--lay-destaque) 22%, var(--bs-body-bg)));
    border: 1.5px dashed color-mix(in srgb, var(--bs-primary) 55%, transparent);
}
body.site-public .site-success-icon {
    width: 4.4rem; height: 4.4rem;
    border-radius: 18px;
    background: var(--lay-grad);
    border: 3px solid var(--bs-body-bg);
    color: var(--tema-btn-texto, #fff);
    box-shadow: 0 0 0 1.5px rgba(29, 28, 28, .4), 0 18px 40px -14px color-mix(in srgb, var(--bs-primary) 80%, transparent);
}

/* ---------- Rodapé: friso colorido no topo ---------- */
body.site-public .site-footer { position: relative; }
body.site-public .site-footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-primary), var(--lay-destaque), var(--bs-primary));
}

@media (prefers-reduced-motion: reduce) {
    body.site-public .card::before,
    body.site-public .site-hero::before,
    body.site-public .site-hero::after,
    body.site-public .site-hero-cta { animation: none; }
    body.site-public .reveal { opacity: 1; translate: none; }
}

/* ---------- Cards com imagem de fundo (Serviços em Destaque, Portal de Serviços) ---------- */
.site-card-img {
    --card-cor: var(--bs-primary);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
    min-height: 210px;
    padding: 1.1rem;
    overflow: hidden;
    border-radius: var(--lay-raio-card, 14px);
    color: #fff;
    text-decoration: none;
    background-color: var(--card-cor);
    background-image: linear-gradient(145deg, var(--card-cor), color-mix(in srgb, var(--card-cor) 55%, #000));
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 16px 36px -20px rgba(15, 23, 42, .45);
    transition: transform .28s ease, box-shadow .35s ease;
}
.site-card-img.tem-imagem { background-color: #0f172a; }
/* película escura para o texto ficar legível sobre qualquer foto */
.site-card-img.tem-imagem::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .78) 100%);
    transition: opacity .3s ease;
}
.site-card-img:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 26px 56px -24px rgba(15, 23, 42, .6); }
.site-card-img.tem-imagem:hover::before { opacity: .88; }

.site-card-img-icone {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 12px;
    font-size: 1.3rem;
    color: #fff;
    background: color-mix(in srgb, var(--card-cor) 55%, rgba(255, 255, 255, .15));
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .3s ease;
}
.site-card-img:hover .site-card-img-icone { transform: scale(1.1) rotate(-5deg); }
.site-card-img-texto { display: flex; flex-direction: column; gap: .15rem; text-align: left; }
.site-card-img-texto strong { font-family: var(--fonte-titulos, inherit); font-size: 1.05rem; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.site-card-img-texto small { font-size: .82rem; opacity: .9; }
.site-card-img-texto em { font-style: normal; font-size: .75rem; font-weight: 600; opacity: .95; margin-top: .35rem; }

/* imagem no topo dos cards da página da secretaria */
.site-pedido-card { overflow: hidden; }
.site-pedido-card-img { display: block; width: 100%; height: 150px; object-fit: cover; }