/* =================================================================
   Arquivo:   blocos.tipos.css   (REESTRUTURA Rodada 3)
   Versao:    KIMERA-030
   Papel:     Estilos dos 9 tipos de CB: Equipe, Logos, Galeria CB, Cardapio, Video, Mapa, FAQ, Grade, Agenda.
   ================================================================= */


/* ---------- EQUIPE ---------- */
.ss-cbk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px;
}
.ss-cbk-card {
    text-align: center;
    /* fundo default do card (1 classe, sem !important): o Kimera edita via
       .ssx-blocos-{id}-card e VENCE. Editavel: cor/degrade/transparente. */
    background: var(--white, #fff);
    border-radius: 18px;
    padding: 32px 20px 26px;
    /* KIMERA-027 — capricho: borda sutil + sombra em camadas (padrao Lista
       de Precos). Nao toca no fundo editavel. */
    border: 1px solid rgba(108,92,231,0.10);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 14px 34px rgba(90,46,166,0.10);
    transition: transform .28s ease, box-shadow .28s ease;
}
.ss-cbk-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 22px 46px rgba(90,46,166,0.18);
}
/* anel decorativo atras da foto (usa a cor primaria do tema) */
.ss-cbk-foto-wrap {
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ss-cbk-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid var(--white, #fff);
}
.ss-cbk-nome { font-size: 1.18rem; margin: 0 0 1px; font-weight: 700; color: var(--dark, #2c3e50); line-height: 1.2; }
.ss-cbk-sobrenome { font-size: 1.18rem; margin: 0 0 6px; font-weight: 700; color: var(--dark, #2c3e50); line-height: 1.2; }
.ss-cbk-cargo {
    font-size: 0.82rem; margin: 0; color: var(--primary, #FF6B9D);
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}

/* ---------- LOGOS ---------- */
.ss-cbk-logos-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
/* KIMERA-025 — cada logo ocupa uma VAGA fixa e fica CENTRALIZADA nela
   (independente da largura real da logo). Isso mantem o alinhamento bonito
   em 2 colunas no mobile e da area uniforme. */
.ss-cbk-logo-item {
    flex: 0 0 auto;
    width: 80px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-cbk-logo-img {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}
.ss-cbk-logo-img:hover { filter: grayscale(0); opacity: 1; }

/* modo carrossel: faixa que rola lentamente (sem JS, animacao CSS) */
.ss-cbk-logos-carrossel .ss-cbk-logos-track {
    flex-wrap: nowrap;
    overflow: hidden;
}
.ss-cbk-logos-carrossel .ss-cbk-logo-item {
    animation: ss-cbk-logos-scroll 30s linear infinite;
}
@keyframes ss-cbk-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- GALERIA CB (sem lightbox) ---------- */
.ss-cbk-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ss-cbk-galeria-item {
    margin: 0; position: relative; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.ss-cbk-galeria-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ss-cbk-galeria-item:hover .ss-cbk-galeria-img { transform: scale(1.08); }
.ss-cbk-galeria-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 14px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
    transform: translateY(8px);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.ss-cbk-galeria-item:hover .ss-cbk-galeria-cap { transform: translateY(0); opacity: 1; }
/* legenda vazia some no publico (igual a galeria padrao) */
.ss-cbk-galeria-cap:empty { display: none; }

/* ---------- CARDAPIO (por categoria) — visual caprichado ----------
   BUG#2 FIX: o degrade default mora na CLASSE DE TIPO do bloco
   (.ss-cb-cardapio), que esta no MESMO elemento <section.ss-cb> onde o
   Kimera aplica a classe ssx-blocos-{id}. Assim a edicao de fundo pelo
   Kimera (regra ssx com !important) VENCE o default. Antes o default
   estava no filho .ss-cbk-cardapio e vencia o ssx do pai. */
.ss-cb-cardapio {
    background: linear-gradient(160deg, #1f1147 0%, #2d1b5e 55%, #3a1c4d 100%);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(31,17,71,0.35);
}
.ss-cbk-cardapio {
    border-radius: 20px;
    padding: 48px 40px;
}
.ss-cbk-card-head { text-align: center; margin-bottom: 34px; }
.ss-cbk-card-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c471ed;
    font-weight: 700;
    margin-bottom: 6px;
}
.ss-cbk-card-titulo {
    color: #ffffff;
    font-size: 2rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ss-cbk-card-divisor {
    display: block;
    width: 60px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: #c471ed;
}
.ss-cbk-cardapio-lista {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ss-cbk-cardapio-item { padding: 0; border: none; }
.ss-cbk-cardapio-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ss-cbk-cardapio-nome {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 500;
}
.ss-cbk-cardapio-fill {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(196,113,237,0.5);
    transform: translateY(-5px);
}
.ss-cbk-cardapio-preco {
    color: #FFD93D;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}
.ss-cbk-cardapio-desc {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    font-style: italic;
}
/* PUBLICO: descricao vazia some. ADMIN: nunca some (ver editor.css) -
   a regra :empty abaixo vale para o site publico; no admin o editor.css
   reverte com placeholder clicavel (BUG#1). */
.ss-cbk-cardapio-desc:empty { display: none; }

/* ================================================================
   VIDEO — moldura cinematografica 16:9, sombra forte, cantos suaves
   ================================================================ */
.ss-cbk-video-frame {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #0b0b12;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.ss-cbk-video-iframe,
.ss-cbk-video-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* placeholder (sem URL ainda / aviso) */
.ss-cbk-video-aviso {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7); font-size: 0.95rem; padding: 24px; text-align: center;
}
.ss-cbk-video-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; color: #fff; text-align: center; padding: 24px;
}
.ss-cbk-video-ph > i {
    font-size: 2rem;
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary, #FF6B9D);
    box-shadow: 0 0 0 0 rgba(255,107,157,0.6);
    animation: ss-cbk-pulse 2.2s ease-out infinite;
}
@keyframes ss-cbk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,107,157,0.55); }
    70%  { box-shadow: 0 0 0 22px rgba(255,107,157,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,157,0); }
}

/* ================================================================
   MAPA — moldura arredondada com borda de destaque
   ================================================================ */
.ss-cbk-mapa-frame {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #e8eef3;
    box-shadow: 0 16px 44px rgba(0,0,0,0.18);
    border: 4px solid var(--white, #fff);
    outline: 1px solid rgba(0,0,0,0.06);
}
.ss-cbk-mapa-iframe,
.ss-cbk-mapa-preview iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.ss-cbk-mapa-aviso {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray, #7f8c8d); font-size: 0.95rem; padding: 24px; text-align: center;
}
.ss-cbk-mapa-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; color: var(--dark, #2c3e50); text-align: center; padding: 24px;
}
.ss-cbk-mapa-ph > i {
    font-size: 2.4rem; color: var(--primary, #FF6B9D);
}

/* ================================================================
   FAQ — pilulas soltas (gradiente lilas default), icone "+" que vira "x";
   resposta desliza. Fundo das pilulas EDITAVEL pelo Kimera (1 superficie
   para todas). No ADMIN os itens ficam abertos para edicao (ver editor.css).
   ================================================================ */
.ss-cbk-faq-lista {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ss-cbk-faq-item {
    /* FUNDO DEFAULT da pilula (1 classe, sem !important): o Kimera edita via
       .ssx-blocos-{id}-pilula com !important e VENCE. Cor/degrade/transparente. */
    background: linear-gradient(135deg, #5a2ea6 0%, #7b3fd1 100%);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(90,46,166,0.22);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .2s ease;
}
.ss-cbk-faq-item:hover { box-shadow: 0 10px 28px rgba(90,46,166,0.32); transform: translateY(-2px); }
.ss-cbk-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 2;
    /* KIMERA-027 — 3D FAKE LEVE: a PERGUNTA fica com impressao de estar ACIMA.
       Sombra projetada para baixo + leve clareamento no topo (luz vinda de
       cima). Mantem o fundo editavel da pilula (so adiciona profundidade). */
    box-shadow: 0 4px 10px rgba(0,0,0,0.28);
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
}
.ss-cbk-faq-pergunta {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    flex: 1 1 auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
/* icone "+" desenhado por CSS; vira "x" (rotaciona 45deg) quando aberto */
.ss-cbk-faq-icone {
    flex: 0 0 auto;
    position: relative;
    width: 22px; height: 22px;
    transition: transform .3s ease;
}
.ss-cbk-faq-icone::before,
.ss-cbk-faq-icone::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    background: rgba(255,255,255,0.92);
    border-radius: 2px;
}
.ss-cbk-faq-icone::before { width: 16px; height: 2.5px; transform: translate(-50%,-50%); }
.ss-cbk-faq-icone::after  { width: 2.5px; height: 16px; transform: translate(-50%,-50%); }
.ss-cbk-faq-item.is-open .ss-cbk-faq-icone { transform: rotate(45deg); }
.ss-cbk-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    position: relative;
    z-index: 1;
    /* RESPOSTA fica "ABAIXO" da pergunta: tom levemente mais escuro e sombra
       interna no topo (como se a pergunta projetasse sombra sobre ela). */
    background: rgba(0,0,0,0.16);
    box-shadow: inset 0 6px 10px -6px rgba(0,0,0,0.5);
}
.ss-cbk-faq-item.is-open .ss-cbk-faq-a { max-height: 600px; }
.ss-cbk-faq-resposta {
    margin: 0;
    padding: 16px 24px 20px;
    color: rgba(255,255,255,0.82);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* ================================================================
   GRADE — cards de servico com icone em "selo" circular; hover levanta
   ================================================================ */
.ss-cbk-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 26px;
}
.ss-cbk-grade-card {
    text-align: center;
    background: var(--white, #fff);
    border-radius: 18px;
    padding: 36px 24px 30px;
    /* KIMERA-027 — capricho: profundidade em camadas + borda sutil + hover
       elevado (padrao Lista de Precos). Nao toca no fundo editavel. */
    border: 1px solid rgba(108,92,231,0.10);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 14px 34px rgba(90,46,166,0.10);
    transition: transform .28s ease, box-shadow .28s ease;
}
.ss-cbk-grade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 22px 46px rgba(90,46,166,0.18);
}
.ss-cbk-grade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.13);
}
.ss-cbk-grade-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    box-shadow: 0 8px 20px rgba(108,92,231,0.25);
}
.ss-cbk-grade-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: var(--white, #fff);
    line-height: 1;
}
.ss-cbk-grade-titulo { font-size: 1.18rem; margin: 0 0 8px; font-weight: 700; color: var(--dark, #2c3e50); }
.ss-cbk-grade-texto { margin: 0; color: var(--gray, #7f8c8d); font-size: 0.96rem; line-height: 1.55; }

/* ================================================================
   AGENDA — timeline; coluna de data em "ticket" colorido
   ================================================================ */
.ss-cbk-agenda-lista {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ss-cbk-agenda-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--white, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.ss-cbk-agenda-item:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); }
.ss-cbk-agenda-quando {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 10px;
    color: var(--white, #fff);
    /* FUNDO DEFAULT do ticket (1 classe, sem !important): o Kimera edita
       via .ssx-blocos-{id}-quando com !important e VENCE este default.
       Cor simples / degrade / transparente, tudo isolado por superficie. */
    background: linear-gradient(160deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    text-align: center;
}
.ss-cbk-agenda-data { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1.15; }
.ss-cbk-agenda-hora { font-size: 0.82rem; opacity: 0.9; }
.ss-cbk-agenda-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 22px;
    /* FUNDO DEFAULT da caixa de texto (editavel pelo Kimera, isolado). */
    background: var(--white, #fff);
}
.ss-cbk-agenda-evento { font-size: 1.12rem; margin: 0 0 4px; font-weight: 700; color: var(--dark, #2c3e50); }
.ss-cbk-agenda-local { margin: 0; color: var(--gray, #7f8c8d); font-size: 0.92rem; }
.ss-cbk-agenda-local::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; opacity: 0.6; font-size: 0.85em; }