/**
 * EmMemoria — Template Público do Memorial
 * Complementa design-tokens.css (nunca duplica variáveis).
 */

/* ── Reset mínimo ──────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Corpo ──────────────────────────────────────────────────────────────── */

.emm-memorial-body {
    background-color: var(--emm-fundo-pagina);
    font-family: var(--emm-fonte-sans);
    color: var(--emm-oliva-escuro);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Necessário para o breakout full-bleed do hero não gerar scrollbar horizontal */
    overflow-x: hidden;
}

/* ── Container principal ────────────────────────────────────────────────── */

.emm-memorial {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.emm-memorial-hero {
    position: relative;
    /* espaço abaixo da capa para o avatar que sobrepõe a borda inferior */
    margin-bottom: 132px; /* 117px (metade do avatar 234px) + 15px de respiro */
    /* Breakout full-bleed: escapa do max-width do container pai para cobrir 100vw */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Capa — imagem de fundo ou fallback capa-fallback.webp.
   Proporção de exibição (4:1) unificada com a proporção de crop no upload
   (wizard.js/media-painel.js, aspectRatio: 4) — em qualquer largura de tela
   até 1920px, aspect-ratio + max-width garantem exatamente a mesma
   proporção que foi cropada, sem nenhuma zona de corte adicional entre o
   que a família selecionou e o que é exibido. Sem max-height: com 4:1 e
   max-width: 1920px, a altura já para sozinha em 1920÷4=480px acima desse
   ponto — um teto de altura separado seria redundante (e reintroduziria o
   mesmo tipo de corte extra que esta unificação elimina). width: 100% é
   obrigatório aqui — sem largura explícita, aspect-ratio combinado com um
   teto de tamanho recalcularia a largura "pra trás" a partir da altura já
   limitada, em vez de manter a largura cheia do pai (100vw). */
.emm-memorial-capa {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: 4 / 1;
    background-size: cover;
    background-position: center 30%;
    background-color: var(--emm-verde-claro-fundo-suave); /* fallback se imagem falhar */
    border-radius: 0;
}

/* Avatar wrapper — absolutamente posicionado, sobrepõe a borda da capa */
.emm-memorial-avatar-wrap {
    position: absolute;
    bottom: -117px; /* metade de 234px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.emm-memorial-avatar {
    display: block;
    width: 234px;
    height: 234px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--emm-fundo-card);
    background-color: var(--emm-verde-claro-fundo); /* visível enquanto carrega */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Identidade: epitáfio curto + nome + epitáfio longo ────────────────── */

.emm-memorial-identity {
    text-align: center;
    padding: 0 var(--emm-espaco-md) var(--emm-espaco-lg);
}

.emm-memorial-epitafio-curto {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--emm-texto-terciario);
    margin-bottom: var(--emm-espaco-xs);
}

.emm-memorial-nome {
    font-family: var(--emm-fonte-serifada);
    font-size: 2rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    line-height: 1.2;
    margin-bottom: var(--emm-espaco-sm);
}

/* Apelido — subtítulo logo abaixo do nome, entre aspas, itálico e menor
   (25/07/2026). Reduz o margin-bottom herdado de .emm-memorial-nome antes
   dela via seletor irmão, pra não duplicar respiro entre os dois. */
.emm-memorial-nome + .emm-memorial-apelido {
    margin-top: calc(-1 * var(--emm-espaco-sm) + 4px);
}

.emm-memorial-apelido {
    font-family: var(--emm-fonte-serifada);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--emm-oliva-texto-secundario);
    margin-bottom: var(--emm-espaco-sm);
}

/* Datas + idade ao falecer — duas linhas empilhadas e centralizadas
   (nascimento/falecimento), cada uma com ícone no lugar da palavra
   "Nasceu"/"Faleceu" (28/07/2026). Token --emm-texto-terciario
   ("datas, metadados") é exatamente o uso pretendido pra este bloco.
   Idade volta pra dentro da própria linha de falecimento (mesmo dia,
   ajuste seguinte) — com os textos de "Nasceu em"/"Faleceu em"
   substituídos por ícones compactos, a linha ficou curta o suficiente
   pra não precisar mais de uma 3ª linha só pra idade; gap pequeno (2px)
   já mantém nascimento/falecimento visualmente agrupados como um único
   bloco de "dados vitais". */
.emm-memorial-datas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--emm-fonte-sans);
    font-size: 0.95rem;
    color: var(--emm-texto-terciario);
    margin-bottom: var(--emm-espaco-sm);
    text-align: center;
}

.emm-memorial-data-linha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.emm-memorial-data-icone {
    font-size: 0.9em;
    line-height: 1;
}

/* Estrela dourada — mesma paleta "mel" já usada em outros destaques do
   design system (ex: .emm-secao-olho). O emoji de vela (falecimento) já
   vem colorido nativamente, sem precisar de cor própria aqui — decisão
   consciente de não usar cruz, por neutralidade religiosa (Duvanir,
   26/07/2026). */
.emm-memorial-data-icone--estrela {
    color: var(--emm-mel-escuro);
}

.emm-memorial-idade {
    font-weight: 500;
}

.emm-memorial-epitafio-longo {
    font-family: var(--emm-fonte-serifada);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--emm-oliva-texto-secundario);
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto;
}

/* ── Barra de preview (rascunho visualizado pelo autor logado) ──────────── */

.emm-preview-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--emm-oliva-escuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--emm-espaco-sm);
    padding: 8px var(--emm-espaco-md);
    font-size: 0.875rem;
}

.emm-preview-bar__texto {
    opacity: 0.9;
}

.emm-preview-bar__acoes {
    display: flex;
    gap: var(--emm-espaco-sm);
    flex-shrink: 0;
}

.emm-preview-bar__btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.15s;
}

.emm-preview-bar__btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

.emm-preview-bar__btn--publicar {
    background: var(--emm-mel-escuro);
    color: #fff;
}

.emm-preview-bar__btn--editar {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Cor explícita nos 4 pseudo-estados — "Continuar editando" é um <a> (volta
   pro wizard), sujeito ao azul padrão do navegador em :visited sem esta
   regra. .emm-preview-bar__btn--publicar fica de fora por ser <button>. */
.emm-preview-bar__btn--editar,
.emm-preview-bar__btn--editar:link,
.emm-preview-bar__btn--editar:visited,
.emm-preview-bar__btn--editar:active {
    color: #fff;
}

/* Quando a barra de preview está presente, a nav sticky deve colar abaixo dela */
.emm-tem-barra-preview .emm-memorial-nav {
    top: 44px;
}

/* ── Navegação sticky ───────────────────────────────────────────────────── */

.emm-memorial-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--emm-fundo-card);
    border-bottom: 1px solid var(--emm-borda);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.emm-memorial-nav__container {
    display: flex;
    /* flex-start, não center: com overflow-x:auto, um container flex centralizado
       cujo conteúdo não cabe pode deixar o início (aqui, o logo) parcialmente fora
       da área alcançável por scroll em alguns navegadores — mesmo bug já corrigido
       só no breakpoint mobile antes, agora corrigido na regra base (qualquer
       largura onde a barra não caiba inteira). Quando os itens da nav já preenchem
       a largura do container (max-width: 900px), não há diferença visual. Em
       memoriais com poucas seções opcionais (só Homenagens/Velas/Flores + logo)
       exibidos numa tela larga, a barra passa a começar colada à esquerda em vez
       de centralizada na página — troca deliberada em favor de nunca esconder
       conteúdo, não um efeito colateral não percebido. */
    justify-content: flex-start;
    gap: var(--emm-espaco-xs);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    max-width: 900px;
    margin: 0 auto;
    /* scroll horizontal suave em telas muito estreitas */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.emm-memorial-nav__container::-webkit-scrollbar {
    display: none;
}

.emm-memorial-nav__btn {
    display: inline-block;
    padding: 6px var(--emm-espaco-md);
    border-radius: var(--emm-radius-pill);
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Cor explícita nos 4 pseudo-estados — sem isso, os botões da nav sticky do
   memorial público (Biografia/Timeline/Fotos/.../Homenagens, todos <a href
   ="#âncora">, portanto sempre ":link" e nunca navegam pra outra URL, mas
   ainda sujeitos ao :visited do navegador em alguns casos) vazam o azul/
   sublinhado padrão em vez da paleta — mesma classe de bug já corrigida no
   cabeçalho/rodapé institucional. */
.emm-memorial-nav__btn,
.emm-memorial-nav__btn:link,
.emm-memorial-nav__btn:visited {
    color: var(--emm-oliva-texto-secundario);
}

.emm-memorial-nav__btn:hover,
.emm-memorial-nav__btn:active,
.emm-memorial-nav__btn--ativo {
    background-color: var(--emm-mel-claro);
    color: var(--emm-oliva-escuro);
}

/* ── Conteúdo principal ─────────────────────────────────────────────────── */

.emm-memorial-content {
    padding: var(--emm-espaco-xl) var(--emm-espaco-md) calc(var(--emm-espaco-xl) / 2);
}

/* ── Seções de conteúdo ─────────────────────────────────────────────────── */

.emm-memorial-secao {
    /* Compensa a nav sticky (~48px) ao navegar por âncora ou scrollIntoView */
    scroll-margin-top: 64px;
    margin-bottom: var(--emm-espaco-xl);
}

/* Última seção da página (Flores) — metade do espaço antes do rodapé
   (28/07/2026), tanto desktop quanto mobile (nenhuma media query sobrepõe
   isto). As demais seções mantêm o espaçamento normal entre si; só o
   espaço final antes do rodapé foi reduzido. */
#emm-secao-flores {
    margin-bottom: calc(var(--emm-espaco-xl) / 2);
}

/* Olho editorial — rótulo curto em caixa alta acima do título, mesmo padrão
   agora aplicado em TODAS as seções do memorial público (25/07/2026,
   padronização pedida pelo Duvanir). Elemento novo — nenhuma seção tinha
   esse tratamento antes, apesar de já ter sido usado como referência de
   "padrão existente"; a padronização real acontece aqui, de uma vez. */
.emm-secao-olho {
    display: block;
    font-family: var(--emm-fonte-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--emm-mel-escuro);
    margin-bottom: 6px;
}

.emm-secao-titulo {
    font-family: var(--emm-fonte-serifada);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    margin-bottom: var(--emm-espaco-md);
}

/* ── Seção: Biografia ───────────────────────────────────────────────────── */

.emm-secao-biografia__conteudo,
.emm-secao-selos__conteudo {
    background-color: var(--emm-fundo-card);
    padding: var(--emm-espaco-lg);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
    font-family: var(--emm-fonte-sans);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--emm-oliva-texto-secundario);
}

/* Normaliza elementos comuns do TinyMCE dentro do conteúdo da biografia */
.emm-secao-biografia__conteudo p,
.emm-secao-biografia__conteudo ul,
.emm-secao-biografia__conteudo ol {
    margin-bottom: var(--emm-espaco-md);
}

.emm-secao-biografia__conteudo p:last-child,
.emm-secao-biografia__conteudo ul:last-child,
.emm-secao-biografia__conteudo ol:last-child {
    margin-bottom: 0;
}

.emm-secao-biografia__conteudo ul,
.emm-secao-biografia__conteudo ol {
    padding-left: var(--emm-espaco-lg);
}

/* ── Seção: Como será lembrado ───────────────────────────────────────────
   Mesmo card de .emm-secao-biografia__conteudo (regra combinada acima) —
   aqui só o CONTEÚDO interno muda de bloco de texto para fileira de chips,
   com respiro generoso entre eles (era o problema relatado: chips
   espremidos direto no cabeçalho, sem card e com gap pequeno). ────────── */

.emm-secao-selos__conteudo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emm-espaco-md);
}

.emm-selo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--emm-fonte-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--emm-oliva-escuro);
    /* Fundo neutro/sóbrio (28/07/2026, decisão do Duvanir) — o fundo
       dourado/mel anterior, combinado com a cor fixa de cada emoji nativo
       (📚 marrom, 😄 amarelo, ❤️ vermelho, 🎣 azul...), dava um efeito de
       "confete" destoante da paleta discreta do resto do site. */
    background: var(--emm-verde-claro-fundo-suave);
    border: 1px solid var(--emm-verde-claro-fundo);
    border-radius: var(--emm-radius-pill);
    padding: 9px var(--emm-espaco-md);
    line-height: 1.3;
}

.emm-selo-pill__emoji {
    font-size: 1.05rem;
}

/* ── Seção: Linha do Tempo ──────────────────────────────────────────────── */

.emm-timeline {
    position: relative;
    padding-left: 44px;
}

/* Linha vertical conectando os eventos */
.emm-timeline::before {
    content: '';
    position: absolute;
    left: 10px;   /* alinha com o centro do marcador (22px / 2 = 11px ≈ 10px + 1px borda) */
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--emm-oliva);
    opacity: 0.35;
}

/* Preenchimento progressivo sobreposto ao ::before — mesma posição/dimensão
   exatas (inclusive nos offsets responsivos), cor cheia (sem a opacity 0.35
   do fundo). --emm-timeline-progresso (0 a 1) é escrito via JS conforme o
   scroll (ver memorial-publico.js). scaleY() em vez de animar height/bottom:
   composta na GPU, sem disparar layout/paint a cada frame de scroll. */
.emm-timeline::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--emm-oliva);
    transform: scaleY(var(--emm-timeline-progresso, 0));
    transform-origin: top;
    transition: transform 0.1s linear;
}

.emm-timeline__item {
    position: relative;
    margin-bottom: var(--emm-espaco-lg);
}

.emm-timeline__item:last-child {
    margin-bottom: 0;
}

/* Marcador circular sobre a linha */
.emm-timeline__marcador {
    position: absolute;
    left: -44px;   /* item começa em 44px; 44px de volta = borda esquerda do container */
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--emm-oliva);
    border: 3px solid var(--emm-fundo-pagina);
    box-shadow: 0 0 0 2px var(--emm-oliva);
}

.emm-timeline__card {
    background-color: var(--emm-fundo-card);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
    padding: var(--emm-espaco-md);
}

.emm-timeline__data {
    display: block;
    font-family: var(--emm-fonte-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--emm-oliva);
    margin-bottom: 4px;
}

.emm-timeline__titulo {
    font-family: var(--emm-fonte-serifada);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    line-height: 1.3;
    margin-bottom: var(--emm-espaco-sm);
}

.emm-timeline__titulo:last-child {
    margin-bottom: 0;
}

.emm-timeline__descricao {
    font-family: var(--emm-fonte-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--emm-oliva-texto-secundario);
    margin-bottom: var(--emm-espaco-sm);
}

.emm-timeline__descricao:last-child {
    margin-bottom: 0;
}

.emm-timeline__descricao p,
.emm-timeline__descricao ul,
.emm-timeline__descricao ol {
    margin-bottom: var(--emm-espaco-sm);
}

.emm-timeline__descricao p:last-child,
.emm-timeline__descricao ul:last-child,
.emm-timeline__descricao ol:last-child {
    margin-bottom: 0;
}

.emm-timeline__descricao ul,
.emm-timeline__descricao ol {
    padding-left: var(--emm-espaco-lg);
}

.emm-timeline__imagem {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--emm-radius-md);
    margin-top: var(--emm-espaco-sm);
}

/* ── Seções placeholder (conteúdo chegará em prompts futuros) ───────────── */

.emm-secao-placeholder {
    background-color: var(--emm-fundo-card);
    padding: var(--emm-espaco-lg);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
    text-align: center;
    color: var(--emm-texto-terciario);
    font-family: var(--emm-fonte-sans);
    font-size: 0.9rem;
}

/* ── Logo EmMemoria na nav ──────────────────────────────────────────────── */

.emm-nav-logo {
    display: flex;
    align-items: center;
    margin-right: var(--emm-espaco-md);
    /* Sem isso, o logo tem flex-shrink:1 (padrão) igual aos botões da nav e
       encolhe competindo por espaço com eles quando a barra não cabe — mesma
       proteção já usada em .emmhome-topo-logo (module-10-home/assets/css/home.css). */
    flex-shrink: 0;
}

.emm-nav-logo-img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}

/* ── Seção: Galeria de Fotos ────────────────────────────────────────────── */

.emm-galeria-grade {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: var(--emm-espaco-sm);
}

.emm-galeria-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--emm-radius-md);
    background-color: var(--emm-verde-claro-fundo); /* placeholder enquanto carrega */
}

.emm-galeria-item__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Indicador de carregamento da próxima página */
.emm-galeria-carregando {
    text-align: center;
    padding: var(--emm-espaco-md) 0 0;
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    color: var(--emm-texto-terciario);
}

/* ── Seção: Vídeos ───────────────────────────────────────────────────────── */

.emm-videos-grade {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: var(--emm-espaco-sm);
}

.emm-video-item {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--emm-radius-md);
    background-color: var(--emm-verde-claro-fundo); /* placeholder enquanto a thumb carrega */
}

.emm-video-item__trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.emm-video-item__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emm-video-item__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--emm-radius-pill);
    background-color: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.emm-video-item__trigger:hover .emm-video-item__play,
.emm-video-item__trigger:focus-visible .emm-video-item__play {
    background-color: var(--emm-mel-escuro);
    transform: translate(-50%, -50%) scale(1.08);
}

/* ── Seção: Local de Sepultamento ──────────────────────────────────────── */

.emm-sepultamento-card {
    background-color: var(--emm-fundo-card);
    padding: var(--emm-espaco-lg);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
}

.emm-sepultamento-lista {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--emm-espaco-md);
}

.emm-sepultamento-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emm-sepultamento-label {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--emm-oliva-texto-secundario);
}

.emm-sepultamento-valor {
    font-family: var(--emm-fonte-sans);
    font-size: 1rem;
    color: var(--emm-oliva-escuro);
    display: flex;
    align-items: center;
    gap: var(--emm-espaco-sm);
    flex-wrap: wrap;
    margin: 0;
}

.emm-sepultamento-mapa-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* área de toque mínima recomendada */
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 2px var(--emm-espaco-sm);
    border: 1px solid var(--emm-mel-escuro);
    border-radius: var(--emm-radius-sm);
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

/* Cor explícita nos 4 pseudo-estados — o link "Ver no mapa" abre o Google
   Maps em nova aba; sem esta regra vaza o azul padrão do navegador em
   :visited em vez do contorno dourado. */
.emm-sepultamento-mapa-link,
.emm-sepultamento-mapa-link:link,
.emm-sepultamento-mapa-link:visited,
.emm-sepultamento-mapa-link:active {
    color: var(--emm-mel-escuro);
}

.emm-sepultamento-mapa-link:hover,
.emm-sepultamento-mapa-link:focus {
    background-color: var(--emm-mel-escuro);
    color: #fff;
}

/* ── Seção: Família ──────────────────────────────────────────────────────
   Mesmo card visual de .emm-sepultamento-card (fundo/padding/radius/sombra
   compartilhados abaixo) — conteúdo é uma lista simples, um bloco por
   GRUPO (categoria de parentesco), não por pessoa (agrupamento hierárquico
   de 28/07/2026, ver $familia_agrupada em single-memorial.php): rótulo do
   grupo em negrito numa linha, nomes daquele grupo como texto corrido na
   linha seguinte (28/07/2026 — antes era tudo numa linha só), regra de
   conjunção em português (vírgula entre todos, "e" só antes do último —
   ver $familia_juntar_pt). Cada nome já vem com seu próprio sufixo de
   anos/in memoriam embutido (ver $familia_texto_pessoa). */

.emm-familia-card {
    background-color: var(--emm-fundo-card);
    padding: var(--emm-espaco-lg);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
}

.emm-familia-lista-publica {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--emm-espaco-md);
}

.emm-familia-linha {
    font-family: var(--emm-fonte-sans);
    font-size: 1rem;
    color: var(--emm-oliva-escuro);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

.emm-familia-parentesco {
    font-weight: 600;
}

.emm-familia-nomes {
    font-weight: 400;
    color: var(--emm-oliva-texto-secundario);
}

.emm-familia-in-memoriam {
    font-style: italic;
    color: var(--emm-oliva-texto-secundario);
}

/* ── Seção: Homenagens ──────────────────────────────────────────────────── */

/* Cada um dos 3 blocos (Mensagens, Velas, Flores) */
.emm-homenagens-bloco {
    background-color: var(--emm-fundo-card);
    border-radius: var(--emm-radius-lg);
    box-shadow: var(--emm-sombra-card);
    padding: var(--emm-espaco-lg);
    margin-bottom: var(--emm-espaco-md);
}

.emm-homenagens-bloco:last-child {
    margin-bottom: 0;
}

/* Linha topo do bloco: só o título h3 agora — o botão de ação vive abaixo,
   ocupando a largura toda do card (ver .emm-homenagens-bloco__btn) */
.emm-homenagens-bloco__cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emm-espaco-sm);
    margin-bottom: var(--emm-espaco-sm);
}

.emm-homenagens-bloco__titulo {
    font-family: var(--emm-fonte-serifada);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    display: flex;
    align-items: center;
    gap: var(--emm-espaco-sm);
}

/* Badge numérico (ex: "12 velas") */
.emm-homenagens-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--emm-espaco-xs);
    border-radius: var(--emm-radius-pill);
    background-color: var(--emm-mel-claro);
    color: var(--emm-oliva-escuro);
    font-family: var(--emm-fonte-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* Estado vazio — mensagem acolhedora, bloco continua visível */
.emm-homenagens-vazio {
    font-family: var(--emm-fonte-sans);
    font-size: 0.95rem;
    color: var(--emm-texto-terciario);
    text-align: center;
    padding: var(--emm-espaco-md) 0;
}

/* Botão de ação de cada bloco (Deixar Mensagem / Acender Vela / Enviar
   Flores) — abaixo do título, largura total. Outline com preenchimento no
   hover, mesmo padrão de .emm-sepultamento-mapa-link (Seção Sepultamento),
   com o mesmo --emm-radius-md dos cards em vez de pílula. */
.emm-homenagens-bloco__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--emm-espaco-xs);
    width: 100%;
    min-height: 44px; /* área de toque mínima recomendada */
    margin-bottom: var(--emm-espaco-md);
    background-color: transparent;
    color: var(--emm-mel-escuro);
    border: 1px solid var(--emm-mel-escuro);
    border-radius: var(--emm-radius-md);
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.emm-homenagens-bloco__btn:hover,
.emm-homenagens-bloco__btn:focus-visible {
    background-color: var(--emm-mel-escuro);
    color: #fff;
}

.emm-homenagens-bloco__btn svg {
    flex-shrink: 0;
}

/* Botão de envio dentro dos modais (Deixar Homenagem / Acender Vela /
   Enviar Flores no rodapé) — preenchido, pílula; NÃO é o mesmo botão do
   cabeçalho de cada bloco (ver .emm-homenagens-bloco__btn acima).
   Preenchimento em --emm-mel-escuro (mais saturado que --emm-mel) +
   sombra própria — reforça que esta é a ação primária do rodapé, ao lado
   do Cancelar ghost (.emm-modal__cancelar), que fica propositalmente
   mais discreto. */
.emm-btn-interacao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* área de toque mínima recomendada */
    padding: 8px var(--emm-espaco-lg);
    background-color: var(--emm-mel-escuro);
    color: var(--emm-fundo-card); /* branco — contraste sobre o dourado mais escuro */
    border: none;
    border-radius: var(--emm-radius-pill);
    box-shadow: 0 2px 8px rgba(155, 117, 30, 0.35);
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease;
}

.emm-btn-interacao:hover {
    filter: brightness(0.9);
}

/* ── Tributos ── */

.emm-tributos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--emm-espaco-sm);
}

.emm-tributo-card {
    padding: var(--emm-espaco-md);
    background-color: var(--emm-fundo-pagina);
    border-radius: var(--emm-radius-md);
    border-left: 3px solid var(--emm-mel);
}

/* Linha: nome do autor + data relativa */
.emm-tributo-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--emm-espaco-xs);
    margin-bottom: var(--emm-espaco-xs);
}

.emm-tributo-autor {
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--emm-oliva-escuro);
}

.emm-tributo-data {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-texto-terciario);
}

.emm-tributo-mensagem {
    font-family: var(--emm-fonte-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--emm-oliva-texto-secundario);
    margin: 0;
}

/* Até 8 fotos, quebrando em várias linhas conforme a largura disponível */
.emm-tributo-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emm-espaco-xs);
    margin-top: var(--emm-espaco-sm);
}

.emm-tributo-foto {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--emm-radius-sm);
    /* cursor zoom-in e hover brightness herdam de .emm-lightbox-trigger */
}

/* Resposta da família — diferenciada visualmente da homenagem original,
   pra não ser confundida com uma nova homenagem de visitante */
.emm-tributo-replica {
    margin-top: var(--emm-espaco-sm);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    background: var(--emm-verde-claro-fundo-suave);
    border-left: 3px solid var(--emm-mel);
    border-radius: 0 var(--emm-radius-sm) var(--emm-radius-sm) 0;
}

.emm-tributo-replica__rotulo {
    display: block;
    font-family: var(--emm-fonte-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--emm-oliva-texto-secundario);
    margin-bottom: 4px;
}

.emm-tributo-replica__texto {
    font-family: var(--emm-fonte-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--emm-oliva-escuro);
    margin: 0;
}

.emm-tributo-replica__editado {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--emm-oliva-texto-secundario);
    margin-left: 4px;
}

/* ── Widget de reação ── (componente compartilhado: Tributo, Vela, Flor,
   Réplica, Foto e Vídeo — ver emmemoria_reacao_widget_html() / reacaoWidgetHtml()
   em module-9-memorial-publico.php / memorial-publico.js).

   Padrão único nos 6 contextos: ícone discreto por padrão; um contador
   numérico sobreposto (soma de todas as reações) aparece assim que a soma
   é > 0 — nunca uma lista de badges por emoji lado a lado (histórico: os
   badges transbordavam sobre o tile vizinho da Vela, e a mesma limitação
   valeria pra Foto/Vídeo em telas estreitas; padronizado pra todos os
   contextos pra não manter dois comportamentos). Clicar no resumo expande
   uma fileira horizontal com as 6 opções, cada uma já com a contagem
   daquele emoji (ver .emm-reacao-menu/.emm-reacao-opcao-contagem mais
   abaixo — data-contagens alimenta isso, sempre presente). */

.emm-reacao {
    display: inline-flex;
}

/* Modo "canto" — tiles de tamanho fixo (Vela, Foto, Vídeo): ancora no canto
   inferior direito do container, que precisa de position:relative (ver
   .emm-vela-item, .emm-galeria-item, .emm-video-item). */
.emm-reacao--canto {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
}

/* Foto/Vídeo: o resumo fica sobre a própria miniatura (fundo variável) —
   sombra leve garante contraste em qualquer imagem, sem precisar de um
   fundo opaco pesado. */
.emm-galeria-item .emm-reacao--canto .emm-reacao-resumo,
.emm-video-item .emm-reacao--canto .emm-reacao-resumo {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Modo "rodapé" — Tributo/Flor/Réplica (conteúdo de altura variável): fica
   no fluxo normal, alinhado à direita como última linha do card. Lê
   visualmente como "canto inferior direito" sem o risco de sobrepor texto
   de tamanho imprevisível que o posicionamento absoluto teria aqui. */
.emm-reacao-rodape {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--emm-espaco-sm);
}

.emm-tributo-replica .emm-reacao-rodape,
.emm-flor-replica .emm-reacao-rodape {
    margin-top: var(--emm-espaco-xs);
}

.emm-reacao-resumo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 28px;
    min-height: 28px;
    padding: 4px 6px;
    background-color: var(--emm-fundo-card);
    border: 1px solid var(--emm-borda);
    border-radius: var(--emm-radius-pill);
    color: var(--emm-oliva-texto-secundario);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Alvo de toque expandido pra 44px efetivos sem crescer visualmente — mesma
   técnica já usada em .emm-vela-item .emm-reacao-resumo::after. */
.emm-reacao-resumo::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.emm-reacao-resumo:hover {
    background-color: var(--emm-verde-claro-fundo-suave);
    border-color: var(--emm-mel);
}

.emm-reacao-icone {
    display: block;
}

/* Contador total sobreposto no canto do ícone, estilo "badge de
   notificação" — só aparece quando a soma de todas as reações é > 0.
   Depende de .emm-reacao-resumo ter position:relative (já definido acima). */
.emm-reacao-notificacao {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--emm-mel-escuro);
    color: #FFFFFF;
    font-family: var(--emm-fonte-sans);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--emm-radius-pill);
    box-shadow: 0 0 0 1.5px var(--emm-fundo-card);
}

/* Menu de opções (popover) — fileira horizontal, mesmo padrão do seletor de
   reação do Facebook/WhatsApp. position:fixed calculado em JS a partir do
   botão-resumo (mesmo padrão já usado pelos popovers de vela/flor), pra
   escapar do overflow:hidden das miniaturas da Galeria de Fotos/Vídeos.
   z-index 10001 — precisa ficar acima do .emm-lightbox (9999), já que o
   widget de reação também abre de dentro do lightbox (Foto/Vídeo
   ampliados). O menu já é anexado direto ao <body> em abrirMenuReacao()
   (memorial-publico.js), então não há contexto de empilhamento isolado
   envolvido — só a ordem numérica errada (9998 < 9999 do lightbox) fazia o
   menu renderizar atrás do overlay. Colocado 1 acima do .emm-toast (10000,
   o maior z-index já usado no arquivo) para não empatar com ele. */
.emm-reacao-menu {
    position: fixed;
    z-index: 10001;
    display: flex;
    flex-direction: row;
    gap: 2px;
    background-color: var(--emm-fundo-card);
    border-radius: var(--emm-radius-md);
    box-shadow: var(--emm-sombra-card);
    padding: 4px;
}

.emm-reacao-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    background: none;
    border: none;
    border-radius: var(--emm-radius-sm);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.emm-reacao-opcao:hover:not(:disabled) {
    background-color: var(--emm-verde-claro-fundo-suave);
}

.emm-reacao-opcao:disabled,
.emm-reacao-opcao--reagido {
    cursor: default;
    background-color: var(--emm-mel-claro);
}

/* Contagem de cada emoji nas opções do menu (data-contagens, sempre presente
   — ver abrirMenuReacao() em memorial-publico.js) — já que o resumo mostra
   só o total somado, não o detalhe por emoji (ver .emm-reacao-notificacao). */
.emm-reacao-opcao-contagem {
    font-family: var(--emm-fonte-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--emm-oliva-texto-secundario);
}

/* ── Velas ── */

.emm-velas-grade {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emm-espaco-sm);
}

.emm-vela-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--emm-espaco-xs);
    width: 64px;
    padding: var(--emm-espaco-xs);
    cursor: pointer;
    border-radius: var(--emm-radius-sm);
    transition: background-color 0.15s;
}

/* O item de vela é bem menor que os outros 5 contextos (64px de largura) —
   o widget de reação encolhe pra caber sem brigar com o SVG/nome, mas
   mantém uma área de toque efetiva de 44px via ::after (maior que o ícone
   visível), mesmo padrão de "alvo de toque expandido sem crescer
   visualmente" recomendado pra elementos compactos. */
.emm-vela-item .emm-reacao--canto {
    bottom: 0;
    right: 0;
}

.emm-vela-item .emm-reacao-resumo {
    min-width: 20px;
    min-height: 20px;
    padding: 2px;
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.85);
}

.emm-vela-item .emm-reacao-resumo::after {
    content: '';
    position: absolute;
    inset: -12px;
}

.emm-vela-item .emm-reacao-icone {
    width: 12px;
    height: 12px;
}

/* Contador sobreposto também encolhe pra caber no ícone de 12px sem
   estourar o tile (mesma lógica de compactação do resto desta seção). */
.emm-vela-item .emm-reacao-notificacao {
    top: -3px;
    right: -3px;
    min-width: 12px;
    height: 12px;
    font-size: 0.55rem;
}

.emm-vela-item:hover {
    background-color: var(--emm-verde-claro-fundo-suave);
}

/* SVG da vela */
.emm-vela-svg {
    width: 28px;
    height: 44px;
    display: block;
    overflow: visible;
}

/* Animação da chama — aplicada apenas nos elementos da chama, não no corpo */
@keyframes emm-chama-tremula {
    from { opacity: 0.85; transform: scaleX(0.90) scaleY(0.94); }
    to   { opacity: 1;    transform: scaleX(1.10) scaleY(1.06); }
}

.emm-vela-chama-fogo {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: emm-chama-tremula 2s ease-in-out infinite alternate;
}

/* Popover de informações (vela e flor) */
.emm-vela-popover,
.emm-flor-popover {
    position: fixed;
    z-index: 9997;
    max-width: 220px;
    background: var(--emm-oliva-escuro);
    color: var(--emm-fundo-card);
    font-family: var(--emm-fonte-sans);
    font-size: 0.8rem;
    line-height: 1.45;
    border-radius: var(--emm-radius-sm);
    padding: var(--emm-espaco-xs) var(--emm-espaco-sm);
    pointer-events: none;
    box-shadow: var(--emm-sombra-card);
}

.emm-vela-nome {
    font-family: var(--emm-fonte-sans);
    font-size: 0.68rem;
    color: var(--emm-texto-terciario);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Flores ── */

.emm-flores-grade {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: var(--emm-espaco-sm);
}

.emm-flor-item {
    display: flex;
    flex-direction: column;
    gap: var(--emm-espaco-xs);
    cursor: pointer;
}

/* Imagem do arranjo (img) e fallback emoji (div) compartilham a mesma base */
.emm-flor-imagem {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--emm-radius-md);
    background-color: var(--emm-verde-claro-fundo);
}

/* Fallback: div com emoji centralizado quando não há imagem de arranjo */
.emm-flor-imagem--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background-color: var(--emm-verde-claro-fundo-suave);
    object-fit: unset; /* sobrescreve a herança desnecessária de img */
}

.emm-flor-remetente {
    font-family: var(--emm-fonte-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--emm-oliva-escuro);
    text-align: center;
    margin: 0;
}

.emm-flor-mensagem {
    font-family: var(--emm-fonte-sans);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--emm-texto-terciario);
    text-align: center;
    margin: 0;
    /* 2 linhas máximo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Resposta da família — mesmo tratamento visual de .emm-tributo-replica */
.emm-flor-replica {
    margin-top: var(--emm-espaco-xs);
    padding: var(--emm-espaco-xs) var(--emm-espaco-sm);
    background: var(--emm-verde-claro-fundo-suave);
    border-left: 3px solid var(--emm-mel);
    border-radius: 0 var(--emm-radius-sm) var(--emm-radius-sm) 0;
    text-align: left;
}

.emm-flor-replica__rotulo {
    display: block;
    font-family: var(--emm-fonte-sans);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--emm-oliva-texto-secundario);
    margin-bottom: 3px;
}

.emm-flor-replica__texto {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--emm-oliva-escuro);
    margin: 0;
}

.emm-flor-replica__editado {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--emm-oliva-texto-secundario);
    margin-left: 4px;
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */
/* Extraído para assets/css/lightbox.css (componente compartilhado, também
   usado pela aba Moderação do painel de gerenciamento — Módulo 3). Este
   arquivo continua enfileirando-o via emmemoria_enqueue_lightbox() (ver
   module-9-memorial-publico.php). */

/* ── Responsivo — mobile first ──────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Em telas estreitas a barra de preview quebra em 2 linhas (~88px) */
    .emm-preview-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .emm-tem-barra-preview .emm-memorial-nav {
        top: 88px;
    }

    .emm-memorial-hero {
        margin-bottom: 95px; /* 80px (metade de 160px) + 15px */
    }

    .emm-memorial-avatar-wrap {
        bottom: -80px; /* metade de 160px */
    }

    .emm-memorial-avatar {
        width: 160px;
        height: 160px;
    }

    .emm-memorial-nome {
        font-size: 1.6rem;
    }

    /* Sem estas reduções, os títulos de seção (e "Homenagens" em especial)
       ficam quase do mesmo tamanho do nome (1.6rem) neste breakpoint,
       quebrando a hierarquia visual que existe no desktop (2rem vs 1.4rem) */
    .emm-secao-titulo {
        font-size: 1.15rem;
    }

    .emm-homenagens-bloco__titulo {
        font-size: 0.95rem;
    }

    .emm-memorial-nav__container {
        /* justify-content: flex-start já é a regra base agora — só o padding
           muda neste breakpoint */
        padding-left: var(--emm-espaco-md);
        padding-right: var(--emm-espaco-md);
    }

    .emm-memorial-epitafio-longo {
        font-size: 1rem;
    }

    /* Timeline mobile — mesma coluna vertical, dimensões reduzidas */
    .emm-timeline {
        padding-left: 36px;
    }

    .emm-timeline::before {
        left: 8px;
    }

    .emm-timeline::after {
        left: 8px;
    }

    .emm-timeline__marcador {
        left: -36px;
        width: 18px;
        height: 18px;
        top: 5px;
    }

    .emm-timeline__card {
        padding: var(--emm-espaco-sm);
    }

    /* Galeria: 2 colunas em tablet/mobile */
    .emm-galeria-grade {
        grid-template-columns: repeat( 2, 1fr );
    }

    /* Vídeos: 1 coluna em tablet/mobile — itens já são 16:9 (bem mais largos
       que as fotos quadradas), 2 colunas ficariam pequenas demais */
    .emm-videos-grade {
        grid-template-columns: 1fr;
    }

    /* Homenagens: bloco com padding reduzido */
    .emm-homenagens-bloco {
        padding: var(--emm-espaco-md);
    }

    /* Flores: 2 colunas em tablet/mobile */
    .emm-flores-grade {
        grid-template-columns: repeat( 2, 1fr );
    }

    /* Botão de interação: texto ligeiramente menor */
    .emm-btn-interacao {
        font-size: 0.8rem;
        padding: 7px var(--emm-espaco-sm);
    }

    /* Compensa o FAB de compartilhamento (fixed, 48px + offset lg) para não
       sobrepor o rodapé — 48px do botão + offset de posicionamento + margem
       de segurança. Antes ficava em .emm-memorial-content (era o último
       elemento da página); agora que existe um rodapé real, a compensação
       pertence a ele */
    .emm-memorial-footer {
        padding-bottom: calc(48px + var(--emm-espaco-lg) + var(--emm-espaco-xl));
    }
}

@media (max-width: 380px) {
    /* Galeria: 1 coluna em telas muito pequenas */
    .emm-galeria-grade {
        grid-template-columns: 1fr;
    }

    /* Flores: 1 coluna em telas muito pequenas */
    .emm-flores-grade {
        grid-template-columns: 1fr;
    }
}

/* ── Modais de Interação ─────────────────────────────────────────────────── */

/* Overlay: cobre a tela inteira, invisível por padrão */
.emm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: var(--emm-overlay-modal);
    align-items: center;
    justify-content: center;
    padding: var(--emm-espaco-md);
}

.emm-modal--ativo {
    display: flex;
}

/* Card de conteúdo */
.emm-modal__conteudo {
    background-color: var(--emm-fundo-card);
    border-radius: var(--emm-radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

/* Cabeçalho: título + botão × */
.emm-modal__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--emm-espaco-md);
    padding: var(--emm-espaco-md) var(--emm-espaco-lg);
    border-bottom: 1px solid var(--emm-borda);
    flex-shrink: 0;
}

.emm-modal__titulo {
    font-family: var(--emm-fonte-serifada);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    margin: 0;
}

.emm-modal__fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* área de toque mínima recomendada */
    min-height: 44px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--emm-texto-terciario);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--emm-radius-sm);
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.emm-modal__fechar:hover {
    color: var(--emm-oliva-escuro);
    background-color: var(--emm-verde-claro-fundo);
}

/* Corpo: área rolável com os campos. NÃO usa gap aqui de propósito (bug
   real corrigido em 29/07/2026): o único filho direto deste flex container
   é o <form> (#emm-form-tributo/vela/flor) — com 1 filho só, "gap" não tem
   nada pra espaçar, é sempre inerte. O espaçamento ENTRE grupos de campo
   precisa estar no próprio .emm-modal__campo (margin-bottom), que é quem
   de fato se repete várias vezes dentro do <form> — ver abaixo. */
.emm-modal__corpo {
    padding: var(--emm-espaco-lg);
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Campos — 2 espaçamentos com propósitos diferentes:
   - gap (4px): label -> SEU PRÓPRIO input/textarea, bem pequeno de
     propósito (label "grudado" na caixa dele).
   - margin-bottom (20px/1.25rem): fim deste campo -> label do PRÓXIMO
     grupo — é aqui que mora o respiro entre grupos, mesmo ritmo visual do
     painel de gerenciamento de conteúdo (.emmpainel-campo, media-painel.css). */
.emm-modal__campo {
    display: flex;
    flex-direction: column;
    gap: var(--emm-espaco-xs);
    margin-bottom: 1.25rem;
}

.emm-modal__campo:last-child {
    margin-bottom: 0;
}

.emm-modal__label {
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--emm-oliva-escuro);
    /* Sem isto, herda line-height:1.6 de .emm-memorial-body — o "meio-
       leading" abaixo do texto do label soma com o gap acima e faz o vão
       até o input parecer bem maior que 4px (causa raiz real do label
       "flutuando", corrigida aqui na origem, não com margem negativa). */
    line-height: 1.2;
}

.emm-modal__opcional {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--emm-texto-terciario);
}

.emm-modal__input,
.emm-modal__textarea {
    font-family: var(--emm-fonte-sans);
    font-size: 0.9375rem;
    color: var(--emm-oliva-escuro);
    background-color: var(--emm-fundo-pagina);
    border: 1px solid var(--emm-borda);
    border-radius: var(--emm-radius-md);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emm-modal__input:focus,
.emm-modal__textarea:focus {
    outline: none;
    border-color: var(--emm-oliva);
    box-shadow: 0 0 0 3px var(--emm-verde-claro-fundo);
}

.emm-modal__textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

.emm-modal__contador-chars {
    font-family: var(--emm-fonte-sans);
    font-size: 0.75rem;
    color: var(--emm-texto-terciario);
    text-align: right;
}

/* Só fica proeminente perto do limite (ver TRIBUTO_MENSAGEM_AVISO no JS) —
   discreto o resto do tempo pra não chamar atenção em mensagens curtas. */
.emm-modal__contador-chars--perto-limite {
    color: var(--emm-erro-texto);
    font-weight: 600;
}

/* ── Seletor de emojis curado (componente reutilizável) ──────────────────── */

.emm-emoji-wrapper {
    position: relative;
}

/* Respiro pra não deixar o botão de emoji sobrepondo texto digitado no canto
   (aumentado de 40px pra acompanhar o trigger maior, 44px de área de toque) */
.emm-emoji-wrapper textarea {
    padding-right: 56px;
}

.emm-emoji-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* área de toque mínima recomendada — ícone em si continua 16x16 (SVG inline) */
    min-height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--emm-borda);
    border-radius: 50%;
    color: var(--emm-oliva-texto-secundario);
    cursor: pointer;
    padding: 0;
}

.emm-emoji-trigger:hover,
.emm-emoji-trigger[aria-expanded="true"] {
    background: #fff;
    color: var(--emm-mel);
    border-color: var(--emm-mel);
}

.emm-emoji-painel {
    position: absolute;
    top: 56px; /* logo abaixo do trigger de 44px (era 44px, calibrado pro trigger de 30px) */
    right: 8px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 172px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--emm-borda);
    border-radius: var(--emm-radius-md);
    box-shadow: var(--emm-sombra-card), 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Abre para cima em vez de para baixo — aplicado via JS (emoji-picker.js)
   quando não há espaço suficiente abaixo do trigger, evitando o painel
   cortado pelo scroll interno de .emm-modal__corpo. translateY(-100%) some
   com a necessidade de saber a altura do wrapper/textarea de antemão. */
.emm-emoji-painel--acima {
    top: 8px;
    bottom: auto;
    transform: translateY(calc(-100% - 4px));
}

/* CSS de autor (display:flex acima) empata em especificidade com a regra
   nativa "[hidden] { display: none; }" do navegador e vence — sem isto, o
   painel fica sempre visível mesmo com o atributo hidden presente no HTML */
.emm-emoji-painel[hidden] {
    display: none;
}

.emm-emoji-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* área de toque mínima recomendada — o glifo do emoji continua 1.3rem */
    min-height: 44px;
    font-size: 1.3rem;
    line-height: 1;
    background: none;
    border: none;
    border-radius: var(--emm-radius-sm);
    cursor: pointer;
    padding: 0;
}

.emm-emoji-opcao:hover,
.emm-emoji-opcao:focus-visible {
    background: var(--emm-verde-claro-fundo-suave);
    outline: none;
}

/* ── Upload de fotos no modal de tributo ── */

.emm-modal__btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* área de toque mínima recomendada */
    gap: var(--emm-espaco-xs);
    padding: var(--emm-espaco-xs) var(--emm-espaco-sm);
    font-family: var(--emm-fonte-sans);
    font-size: 0.85rem;
    color: var(--emm-oliva-escuro);
    background: var(--emm-verde-claro-fundo-suave);
    border: 1px dashed var(--emm-oliva-borda);
    border-radius: var(--emm-radius-sm);
    cursor: pointer;
    margin-top: var(--emm-espaco-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.emm-modal__btn-upload:hover {
    background: var(--emm-verde-claro-fundo);
    border-color: var(--emm-oliva-texto-secundario);
}

.emm-tributo-fotos-contador {
    display: block;
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-oliva-texto-secundario);
    margin-top: var(--emm-espaco-xs);
}

.emm-tributo-fotos-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emm-espaco-xs);
    margin-top: var(--emm-espaco-sm);
}

.emm-tributo-preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--emm-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.emm-tributo-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emm-tributo-preview-remover {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease;
}

.emm-tributo-preview-remover:hover {
    background: rgba(0, 0, 0, 0.8);
}

.emm-modal__aviso-privacidade {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-texto-terciario);
    background-color: var(--emm-verde-claro-fundo-suave);
    border-radius: var(--emm-radius-sm);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    line-height: 1.5;
    margin-top: var(--emm-espaco-xs);
}

/* Checkbox de consentimento (reengajamento) — é um grupo próprio, mesmo
   respiro de grupo dos campos acima (era --emm-espaco-md/16px). */
.emm-modal__campo--checkbox {
    margin-top: var(--emm-espaco-lg);
}

.emm-modal__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--emm-espaco-sm);
    cursor: pointer;
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    color: var(--emm-oliva-texto-secundario);
    line-height: 1.45;
}

.emm-modal__checkbox-label:hover {
    color: var(--emm-oliva-escuro);
}

.emm-modal__checkbox-input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--emm-oliva-escuro);
}

/* Mensagem de erro inline */
.emm-modal__erro {
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    color: var(--emm-erro-texto);
    background-color: var(--emm-erro-fundo);
    border: 1px solid var(--emm-erro-borda);
    border-radius: var(--emm-radius-md);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
}

/* Rodapé: botões */
.emm-modal__rodape {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--emm-espaco-sm);
    padding: var(--emm-espaco-md) var(--emm-espaco-lg);
    border-top: 1px solid var(--emm-borda);
    flex-shrink: 0;
}

/* Ghost/outline — ação secundária do rodapé, propositalmente mais discreta
   que .emm-btn-interacao ao lado (mesmo padrão de par primário/secundário
   já usado em .emm-wizard-btn--primario/--secundario, Módulo 8) */
.emm-modal__cancelar {
    background: none;
    border: 1px solid var(--emm-borda);
    border-radius: var(--emm-radius-pill);
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--emm-texto-terciario);
    padding: 8px var(--emm-espaco-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.emm-modal__cancelar:hover {
    background-color: var(--emm-verde-claro-fundo);
}

/* ── Grade de arranjos (modal de flores) ─────────────────────────────────── */

.emm-arranjos-grade {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--emm-espaco-sm);
    padding-bottom: var(--emm-espaco-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Cada arranjo: botão com imagem (nome só como alt/aria-label, não visível) */
.emm-arranjo-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--emm-espaco-xs);
    min-width: 90px;
    width: 90px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: var(--emm-espaco-xs);
    border: 2px solid var(--emm-borda);
    border-radius: var(--emm-radius-md);
    cursor: pointer;
    background: none;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.emm-arranjo-item:hover {
    border-color: var(--emm-mel);
    background-color: var(--emm-mel-claro);
}

.emm-arranjo-item--selecionado {
    border-color: var(--emm-mel);
    background-color: var(--emm-mel-claro);
    box-shadow: 0 0 0 2px var(--emm-mel);
}

.emm-arranjo-item__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--emm-radius-sm);
    background-color: var(--emm-verde-claro-fundo-suave);
}

.emm-arranjo-item__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: 1.75rem;
    background-color: var(--emm-verde-claro-fundo-suave);
    border-radius: var(--emm-radius-sm);
}

.emm-arranjo-item__zoom {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: var(--emm-oliva-texto-secundario);
    cursor: zoom-in;
}

.emm-arranjo-item__zoom:hover,
.emm-arranjo-item__zoom:focus-visible {
    background: #fff;
    color: var(--emm-mel);
    outline: none;
}

/* Miniaturas maiores em telas largas — 90px fica pequeno demais em desktop;
   o comportamento em mobile (tira horizontal com scroll-snap) já está OK e
   não é alterado aqui. */
@media (min-width: 1024px) {
    .emm-arranjo-item {
        min-width: 130px;
        width: 130px;
    }

    .emm-arranjo-item__zoom {
        width: 26px;
        height: 26px;
    }
}

.emm-arranjos-carregando {
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    color: var(--emm-texto-terciario);
    text-align: center;
    padding: var(--emm-espaco-md) 0;
    flex: 1 0 100%;
}

/* Área de detalhes do arranjo selecionado */
.emm-arranjo-detalhes {
    margin-top: var(--emm-espaco-sm);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    background: var(--emm-verde-claro-fundo-suave);
    border-radius: var(--emm-radius-md);
    border-left: 3px solid var(--emm-mel);
    max-height: 90px;
    overflow-y: auto;
}

.emm-arranjo-detalhes__texto {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-oliva-texto-secundario);
    line-height: 1.45;
    margin: 0;
}

.emm-arranjo-detalhes__texto + .emm-arranjo-detalhes__texto {
    margin-top: var(--emm-espaco-xs);
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.emm-memorial-footer {
    background: var(--emm-fundo-pagina);
    border-top: 1px solid var(--emm-borda);
    /* Metade do valor original (28/07/2026) — reduz o espaço antes do
       rodapé; o padding INTERNO do rodapé (abaixo) fica como estava, não
       faz parte do "espaço até o rodapé". */
    margin-top: calc(var(--emm-espaco-xl) / 2);
    padding: var(--emm-espaco-xl) var(--emm-espaco-md);
    text-align: center;
}

.emm-memorial-footer__conteudo {
    max-width: 480px;
    margin: 0 auto;
}

.emm-memorial-footer__marca {
    font-family: var(--emm-fonte-serifada);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--emm-oliva-escuro);
    letter-spacing: 0.5px;
    margin: 0 0 var(--emm-espaco-xs);
}

.emm-memorial-footer__copyright {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-texto-terciario);
    margin: 0 0 var(--emm-espaco-md);
}

.emm-memorial-footer__cta {
    font-family: var(--emm-fonte-sans);
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Cor explícita nos 4 pseudo-estados — sem isso, o CTA do rodapé do memorial
   público vaza o azul padrão do navegador em :visited, mesma classe de bug
   já corrigida no cabeçalho/rodapé institucional. */
.emm-memorial-footer__cta,
.emm-memorial-footer__cta:link,
.emm-memorial-footer__cta:visited,
.emm-memorial-footer__cta:active {
    color: var(--emm-oliva-texto-secundario);
}

.emm-memorial-footer__cta:hover {
    color: var(--emm-oliva-escuro);
    border-bottom-color: var(--emm-oliva-escuro);
}

/* ── FAB: Compartilhar ──────────────────────────────────────────────────── */

.emm-share-fab {
    position: fixed;
    bottom: var(--emm-espaco-lg);
    right: var(--emm-espaco-lg);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--emm-espaco-sm);
}

.emm-share-fab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--emm-radius-pill);
    background-color: var(--emm-oliva-escuro);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: background-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.emm-share-fab__btn:hover,
.emm-share-fab__btn:focus-visible {
    background-color: var(--emm-oliva);
    transform: scale(1.07);
    outline: 2px solid var(--emm-oliva);
    outline-offset: 2px;
}

.emm-share-popover {
    background-color: var(--emm-fundo-card);
    border: 1px solid var(--emm-borda);
    border-radius: var(--emm-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
    padding: var(--emm-espaco-xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 168px;
    order: -1; /* abre acima do botão */
}

.emm-share-popover[hidden] {
    display: none;
}

.emm-share-popover__item {
    display: flex;
    align-items: center;
    min-height: 44px; /* área de toque mínima recomendada */
    gap: var(--emm-espaco-sm);
    padding: var(--emm-espaco-sm) var(--emm-espaco-md);
    border-radius: var(--emm-radius-sm);
    font-family: var(--emm-fonte-sans);
    font-size: 0.9rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.1s;
    text-align: left;
    width: 100%;
    white-space: nowrap;
}

/* Cor explícita nos 4 pseudo-estados — o item de WhatsApp é um <a>, sujeito
   ao azul padrão do navegador em :visited sem esta regra. Os demais itens
   (copiar link, compartilhamento nativo) são <button>, não afetados. */
.emm-share-popover__item,
.emm-share-popover__item:link,
.emm-share-popover__item:visited,
.emm-share-popover__item:active {
    color: var(--emm-oliva-escuro);
}

.emm-share-popover__item:hover,
.emm-share-popover__item:focus-visible {
    background-color: var(--emm-verde-claro-fundo);
    outline: none;
}

/* ── Toast de confirmação ────────────────────────────────────────────────── */

.emm-toast {
    position: fixed;
    bottom: var(--emm-espaco-lg);
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%) translateY(120%);
    background-color: var(--emm-oliva-escuro);
    color: var(--emm-fundo-card);
    font-family: var(--emm-fonte-sans);
    font-size: 0.9rem;
    padding: var(--emm-espaco-sm) var(--emm-espaco-lg);
    border-radius: var(--emm-radius-pill);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    max-width: calc(100vw - var(--emm-espaco-xl));
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.emm-toast--visivel {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Animação de entrada para itens inseridos no DOM após envio ──────────── */

@keyframes emm-item-entrada {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.emm-item-novo {
    animation: emm-item-entrada 0.35s ease;
}

/* ── Modal responsivo: desliza de baixo em telas pequenas ────────────────── */

@media (max-width: 640px) {
    .emm-modal {
        padding: var(--emm-espaco-sm);
        align-items: flex-end;
    }

    .emm-modal__conteudo {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--emm-radius-lg) var(--emm-radius-lg) 0 0;
    }

    .emm-modal__corpo,
    .emm-modal__cabecalho,
    .emm-modal__rodape {
        padding: var(--emm-espaco-md);
    }

}