/* ==========================================================================
   Damí Beauty Blog — estilos do conteúdo editorial
   Enviar para: wp-content/uploads/dami-blog/blog.css  (WP File Manager)
   Carregado pelo snippet 03 no site e dentro do editor de blocos.
   Tokens: ver dami-beauty-blog/DESIGN.md
   ========================================================================== */

:root {
  --dami-vinho-titulo: #6f393e;
  --dami-vinho: #8e444b;
  --dami-vinho-profundo: #5f0913;
  --dami-vinho-escuro: #4b1b21;
  --dami-vinho-medio: #5a1f26;
  --dami-coral: #e3747d;
  --dami-coral-claro: #ffc2b7;
  --dami-pessego: #ffd8db;
  --dami-taupe: #8e7779;
  --dami-leitura: #5c4a4c;
  --dami-papel: #ffffff;
  --dami-blush: #faf4f3;
  --dami-blush-card: #fff8f8;
  --dami-hairline: #e0e1e2;
  --dami-rodape: #2b0a0e;
  --dami-serif: 'Perfectly Nineties', 'DM Serif Display', Georgia, ui-serif, serif;
  --dami-sans: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dami-raio: 10px;
  --dami-pilula: 72px;
  --dami-grad-vinho: linear-gradient(90deg, #4b1b21 0%, #5a1f26 50%, #5f0913 100%);
  --dami-grad-rosa: linear-gradient(90deg, #ff7482 0%, #f58c96 50%, #ffb9c0 100%);
}

/* --------------------------------------------------------------------------
   Escopo: conteúdo do post (widget "Conteúdo do post" do Elementor) e o editor
   -------------------------------------------------------------------------- */
.elementor-widget-theme-post-content .elementor-widget-container,
.editor-styles-wrapper,
.dami-artigo {
  font-family: var(--dami-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--dami-leitura);
}

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) p {
  margin: 0 0 1.35em;
}

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h2,
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h3,
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h4 {
  font-family: var(--dami-serif);
  font-weight: 600;
  color: var(--dami-vinho);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h2 { font-size: 32px; }
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h3 { font-size: 24px; letter-spacing: -0.005em; }
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) h4 { font-size: 19px; }

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) a {
  color: var(--dami-vinho);
  text-decoration: underline;
  text-decoration-color: var(--dami-coral);
  text-underline-offset: 3px;
}
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) a:hover {
  color: var(--dami-coral);
}

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) ul,
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) ol {
  padding-left: 1.4em;
  margin: 0 0 1.35em;
}
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) li { margin-bottom: 0.45em; }
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) li::marker { color: var(--dami-coral); }

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) figure { margin: 2em 0; }
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) img { border-radius: var(--dami-raio); }
:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) figcaption {
  font-size: 0.875rem;
  color: var(--dami-taupe);
  margin-top: 0.6em;
  text-align: left;
  line-height: 1.45;
}

/* Imagem larga: escapa da coluna de leitura (680px) e vai a 900px */
.dami-img-larga {
  width: 900px;
  max-width: 92vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Duas imagens lado a lado (antes/depois, comparações) */
.dami-duo { gap: 16px; }
.dami-duo .wp-block-column { margin: 0; }
.dami-duo figure { margin: 0 !important; }
.dami-duo figcaption { text-align: center; }
@media (max-width: 600px) {
  .dami-duo { flex-wrap: wrap !important; }
  .dami-duo .wp-block-column { flex-basis: 100% !important; }
}

/* Avatar redondo (assinatura da Sandra dentro das caixas) */
.dami-avatar { margin: 0 !important; flex: none; }
.dami-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) blockquote:not(.dami-quote) {
  border-left: 2px solid var(--dami-coral);
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.4em;
  font-family: var(--dami-serif);
  font-size: 1.35em;
  line-height: 1.4;
  color: var(--dami-vinho-titulo);
}

:where(.elementor-widget-theme-post-content, .editor-styles-wrapper, .dami-artigo) hr {
  border: 0;
  border-top: 1px solid var(--dami-hairline);
  margin: 3em 0;
}

/* --------------------------------------------------------------------------
   Kicker (rótulo em caixa alta)
   -------------------------------------------------------------------------- */
.dami-kicker {
  font-family: var(--dami-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--dami-coral);
  margin: 0 0 0.9em !important;
}
.dami-kicker--taupe { color: var(--dami-taupe); }

/* --------------------------------------------------------------------------
   Caixas editoriais
   -------------------------------------------------------------------------- */
.dami-box {
  background: var(--dami-blush-card);
  border: 1px solid var(--dami-hairline);
  border-radius: var(--dami-raio);
  padding: 28px 32px;
  margin: 2.4em 0;
}
.dami-box > :last-child { margin-bottom: 0 !important; }
.dami-box h2, .dami-box h3, .dami-box h4 { margin-top: 0 !important; }
.dami-box p { font-size: 1em; }

/* Transparência (aviso de afiliado, antes do artigo) */
.dami-box--transparencia {
  background: var(--dami-blush);
  border-color: transparent;
  padding: 18px 22px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dami-taupe);
  margin: 0 0 2em;
}
.dami-box--transparencia .dami-kicker { margin-bottom: 0.4em !important; }

/* Resposta rápida */
.dami-box--resposta {
  background: var(--dami-papel);
  border-left: 3px solid var(--dami-coral);
  border-radius: 0 var(--dami-raio) var(--dami-raio) 0;
}
.dami-box--resposta h2 { font-size: 24px; }

/* Sandra explica (invertida) */
.dami-box--sandra {
  background: var(--dami-vinho);
  border-color: var(--dami-vinho);
  color: var(--dami-blush);
  padding: 32px 36px;
}
.dami-box--sandra .dami-kicker { color: var(--dami-coral-claro); }
.dami-box--sandra .dami-quote {
  border: 0;
  margin: 0 0 1.2em;
  padding: 0;
  font-family: var(--dami-serif);
  font-weight: 600;
  font-size: 1.45em;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--dami-blush);
}
.dami-box--sandra .dami-quote p { margin: 0; font-size: inherit; }
.dami-box--sandra .dami-quote cite { display: none; }
.dami-box--sandra .dami-autor {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--dami-coral-claro);
}
.dami-box--sandra .dami-autor p { margin: 0; font-size: inherit; }
.dami-box--sandra .dami-autor strong { color: var(--dami-blush); font-weight: 600; }
.dami-box--sandra .dami-autor img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(255,255,255,.25);
}
.dami-box--sandra a { color: var(--dami-blush); text-decoration-color: var(--dami-coral-claro); }

/* Curiosidade da Coreia */
.dami-box--curiosidade { background: var(--dami-blush); border-color: transparent; }
.dami-box--curiosidade .dami-sabia {
  font-family: var(--dami-serif);
  font-weight: 600;
  font-size: 1.25em;
  color: var(--dami-vinho-titulo);
  margin: 0 0 0.4em;
}

/* Guia Damí (ingrediente / conceito) */
.dami-box--guia h3 { font-size: 26px; margin-bottom: 0.3em !important; }
.dami-box--guia .dami-guia-lista {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 0;
  border-top: 1px solid var(--dami-hairline);
}
.dami-box--guia .dami-guia-lista li {
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px solid var(--dami-hairline);
  font-size: 0.95em;
}
.dami-box--guia .dami-guia-lista li strong {
  display: block;
  font-family: var(--dami-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dami-vinho);
  margin-bottom: 4px;
}

/* Importante / atenção */
.dami-box--importante {
  background: var(--dami-papel);
  border: 1px solid var(--dami-coral);
  font-size: 0.95em;
}
.dami-box--importante .dami-kicker { color: var(--dami-vinho); }

/* Revisão do conteúdo */
.dami-box--revisao {
  font-size: 0.875rem;
  color: var(--dami-taupe);
  padding: 18px 22px;
  background: var(--dami-papel);
}
.dami-box--revisao strong { color: var(--dami-vinho); }

/* Resumo final */
.dami-box--resumo { background: var(--dami-blush); border-color: transparent; }
.dami-box--resumo ul { margin-bottom: 0; }

/* Índice do artigo */
.dami-box--indice { background: var(--dami-papel); padding: 22px 28px; }
.dami-box--indice ol { margin: 0; padding-left: 1.3em; }
.dami-box--indice li { margin-bottom: 0.35em; }
.dami-box--indice a { text-decoration: none; color: var(--dami-vinho); }
.dami-box--indice a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Produto relacionado (bloco Mídia e texto) e Seleção Damí
   -------------------------------------------------------------------------- */
.dami-produto {
  background: var(--dami-blush-card);
  border: 1px solid var(--dami-hairline);
  border-radius: var(--dami-raio);
  overflow: hidden;
  margin: 2.4em 0;
}
.dami-produto .wp-block-media-text__media { background: var(--dami-papel); }
.dami-produto .wp-block-media-text__media img { border-radius: 0; object-fit: contain; padding: 16px; }
.dami-produto .wp-block-media-text__content { padding: 28px 32px; }
.dami-produto h3 { font-size: 24px; margin: 0 0 0.15em !important; }
.dami-produto .dami-tipo {
  font-size: 0.875rem;
  color: var(--dami-taupe);
  margin: 0 0 0.9em;
}
.dami-produto .dami-nota {
  font-size: 0.75rem;
  color: var(--dami-taupe);
  margin: 0.9em 0 0;
}
@media (max-width: 600px) {
  .dami-produto .wp-block-media-text { grid-template-columns: 1fr !important; }
  .dami-produto .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .dami-produto .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: 22px; }
}

.dami-selecao .dami-selecao-item {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--dami-hairline);
}
.dami-selecao .dami-selecao-item:last-of-type { border-bottom: 1px solid var(--dami-hairline); }
.dami-selecao .dami-num {
  font-family: var(--dami-serif);
  font-weight: 600;
  font-size: 1.25em;
  color: var(--dami-coral);
}
.dami-selecao .dami-selecao-item p { margin: 0; }
.dami-selecao .dami-selecao-item strong { color: var(--dami-vinho); font-weight: 600; }
.dami-selecao .dami-selecao-item small { font-size: 0.875rem; color: var(--dami-taupe); }
.dami-selecao .dami-selecao-item br { display: none; }
.dami-selecao .dami-selecao-item strong ~ small::before { content: ' — '; }
.dami-selecao .dami-ver-todos { margin-top: 1.2em; }
@media (max-width: 560px) {
  .dami-selecao .dami-selecao-item { grid-template-columns: 2.2em 1fr; }
  .dami-selecao .dami-selecao-item > :nth-child(3) { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Botões (estilos de bloco registrados no snippet 02)
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-dami-pilula .wp-block-button__link {
  background: var(--dami-grad-vinho);
  color: var(--dami-blush);
  border-radius: var(--dami-pilula);
  padding: 13px 26px;
  font-family: var(--dami-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: filter .18s ease;
}
.wp-block-button.is-style-dami-pilula .wp-block-button__link:hover { filter: brightness(0.92); color: var(--dami-blush); }

.wp-block-button.is-style-dami-seta .wp-block-button__link {
  background: none;
  color: var(--dami-coral);
  padding: 0;
  border-radius: 0;
  font-family: var(--dami-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}
.wp-block-button.is-style-dami-seta .wp-block-button__link:hover { color: var(--dami-vinho); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */
.dami-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.dami-table th, .dami-table td {
  border: 0;
  border-bottom: 1px solid var(--dami-hairline);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.dami-table th {
  font-family: var(--dami-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dami-vinho);
  background: var(--dami-blush);
}
.dami-table td:first-child { color: var(--dami-vinho); font-weight: 600; }
.dami-table figcaption { margin-top: 0.6em; }
@media (max-width: 600px) {
  .dami-table { overflow-x: auto; }
  .dami-table table { min-width: 520px; }
}

/* --------------------------------------------------------------------------
   Perguntas frequentes (bloco Detalhes)
   -------------------------------------------------------------------------- */
.dami-faq details {
  border-top: 1px solid var(--dami-hairline);
  padding: 4px 0;
}
.dami-faq details:last-of-type { border-bottom: 1px solid var(--dami-hairline); }
.dami-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 32px 14px 0;
  position: relative;
  font-family: var(--dami-serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--dami-vinho);
  line-height: 1.3;
}
.dami-faq summary::-webkit-details-marker { display: none; }
.dami-faq summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  color: var(--dami-coral);
  font-family: var(--dami-sans);
  font-size: 1.4em;
  font-weight: 300;
}
.dami-faq details[open] summary::after { content: '–'; }
.dami-faq details > :not(summary) { padding: 0 0 16px; font-size: 0.97em; }

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.dami-chip {
  display: inline-block;
  background: var(--dami-pessego);
  color: var(--dami-vinho);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--dami-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.dami-meta {
  font-family: var(--dami-sans);
  font-size: 0.875rem;
  color: var(--dami-taupe);
}
.dami-largo { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   TEMPLATES DO ELEMENTOR
   Classes aplicadas via "Avançado → Classes CSS" nos templates importados
   (wordpress/templates/*.json). O visual mora aqui; o JSON só carrega
   estrutura, conteúdo e tags dinâmicas.
   ========================================================================== */

/* --- larguras --------------------------------------------------------------
   1140px é a largura padrão do site (--container-max-width do Elementor e
   max-width do .site-main do Hello). Cabeçalho, rodapé, artigo e arquivos usam
   a mesma, com 24px de respiro lateral, para os textos alinharem verticalmente. */
:root { --dami-largura: 1140px; --dami-gutter: 24px; }

/* !important obrigatório: o Elementor grava --content-width no próprio elemento
   (`.elementor-1927 .elementor-element.elementor-element-XXXX.e-con`), com
   especificidade acima de qualquer seletor nosso. Sem isto o cabeçalho fica
   com os 1200px do template e desalinha 30px do texto do artigo. */
.dami-header, .dami-footer {
  --content-width: var(--dami-largura) !important;
  position: relative;
}
.dami-header > .e-con-inner,
.dami-footer > .e-con-inner { max-width: var(--dami-largura) !important; }

/* Alinhamento com o cabeçalho — a conta importa:
   no Elementor o padding fica no elemento EXTERNO (.e-con) e a largura no
   INTERNO (.e-con-inner), então o conteúdo começa em (vw − 1140)/2.
   O .site-main do tema usa border-box, logo o padding entra DENTRO do
   max-width. Para o texto começar no mesmo x, o max-width precisa ser
   1140 + os dois paddings. Sem isso sobra exatamente 24px de desencontro.
   Escopo :not(.elementor-page) para não estrangular as seções de largura
   total depois que o template "Post único" assumir a página. */
.single-post:not(.elementor-page) .site-main,
.archive:not(.elementor-page) .site-main,
.search:not(.elementor-page) .site-main,
.blog:not(.elementor-page) .site-main {
  max-width: calc(var(--dami-largura) + 2 * var(--dami-gutter));
  padding-inline: var(--dami-gutter);
}

.dami-leitura > .e-con-inner, .dami-leitura { max-width: 680px; margin-inline: auto; }
.dami-lg > .e-con-inner, .dami-lg { max-width: 900px; margin-inline: auto; }

/* --- camada estrutural (rede de segurança) --------------------------------
   Alcança os widgets pela ESTRUTURA, sem depender do campo "Classes CSS".
   Existe porque o Elementor descarta em silêncio a classe de um widget quando
   o JSON usa a chave errada (o controle de widget é _css_classes, não
   css_classes) — foi o que aconteceu na primeira importação.

   Escopo body:has(.dami-header): só as páginas que carregam o cabeçalho do
   blog. As páginas de venda da Damí (Spa Coreano) não têm esse cabeçalho e
   ficam intocadas.

   :where() zera a especificidade do escopo, então estas regras perdem para
   qualquer .dami-* mais específica logo abaixo — são piso, não teto. */

/* rótulo (eyebrow): os templates escrevem rótulo como heading com tag <div> */
:where(body:has(.dami-header)) div.elementor-heading-title {
  font-family: var(--dami-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dami-coral) !important;
}
/* títulos: h1–h4 */
:where(body:has(.dami-header)) h1.elementor-heading-title,
:where(body:has(.dami-header)) h2.elementor-heading-title,
:where(body:has(.dami-header)) h3.elementor-heading-title,
:where(body:has(.dami-header)) h4.elementor-heading-title {
  font-family: var(--dami-serif) !important;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--dami-vinho-titulo) !important;
}
:where(body:has(.dami-header)) h1.elementor-heading-title { font-size: 56px; line-height: 1.1; }
:where(body:has(.dami-header)) h2.elementor-heading-title { font-size: 48px; line-height: 1.2; }
:where(body:has(.dami-header)) h3.elementor-heading-title { font-size: 32px; line-height: 1.3; letter-spacing: -0.3px; color: var(--dami-vinho); }
:where(body:has(.dami-header)) h4.elementor-heading-title { font-size: 22px; line-height: 1.3; letter-spacing: -0.2px; }
:where(body:has(.dami-header)) .elementor-heading-title a { color: inherit !important; text-decoration: none; }

/* o widget "Título do post" sai como h3 dentro dos cards — lá vale 22px */
:where(body:has(.dami-header)) :is(.dami-card, .dami-cat-card, .dami-mais-lidos-item) h3.elementor-heading-title {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--dami-vinho-titulo);
}
/* texto corrido e resumo */
:where(body:has(.dami-header)) .elementor-widget-text-editor .elementor-widget-container,
:where(body:has(.dami-header)) .elementor-widget-theme-post-excerpt .elementor-widget-container {
  font-family: var(--dami-sans) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--dami-taupe);
}
:where(body:has(.dami-header)) .elementor-widget-text-editor p { margin: 0 0 1em; }
:where(body:has(.dami-header)) .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --- tipografia dos widgets ------------------------------------------------ */
.dami-k .elementor-heading-title {
  font-family: var(--dami-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dami-coral) !important;
}
.dami-k--claro .elementor-heading-title { color: var(--dami-coral-claro) !important; }
.dami-k--taupe .elementor-heading-title { color: var(--dami-taupe) !important; }

.dami-h1 .elementor-heading-title,
.dami-h2 .elementor-heading-title,
.dami-h3 .elementor-heading-title,
.dami-h4 .elementor-heading-title {
  font-family: var(--dami-serif) !important;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.dami-h1 .elementor-heading-title { font-size: 56px; line-height: 1.1; color: var(--dami-vinho-titulo) !important; }
.dami-h2 .elementor-heading-title { font-size: 48px; line-height: 1.2; color: var(--dami-vinho-titulo) !important; }
.dami-h3 .elementor-heading-title { font-size: 32px; line-height: 1.3; letter-spacing: -0.3px; color: var(--dami-vinho) !important; }
.dami-h4 .elementor-heading-title { font-size: 22px; line-height: 1.3; letter-spacing: -0.2px; color: var(--dami-vinho-titulo) !important; }
.dami-claro .elementor-heading-title { color: var(--dami-blush) !important; }

.dami-h1 .elementor-heading-title a,
.dami-h2 .elementor-heading-title a,
.dami-h3 .elementor-heading-title a,
.dami-h4 .elementor-heading-title a { color: inherit !important; text-decoration: none; }
.dami-h3 .elementor-heading-title a:hover,
.dami-h4 .elementor-heading-title a:hover { color: var(--dami-coral); }

.dami-lead .elementor-widget-container,
.dami-lead .elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dami-taupe) !important;
}
.dami-texto .elementor-widget-container,
.dami-texto .elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--dami-taupe) !important;
}
.dami-texto .elementor-widget-container p { margin: 0 0 1em; }
.dami-texto .elementor-widget-container p:last-child { margin-bottom: 0; }
.dami-texto strong { color: var(--dami-vinho); }
.dami-info .elementor-widget-container,
.dami-info .elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dami-taupe) !important;
}
.dami-claro-txt .elementor-widget-container,
.dami-claro-txt .elementor-widget-container p,
.dami-claro-txt .elementor-heading-title { color: var(--dami-blush) !important; }
.dami-claro-txt strong { color: #ffffff; }
.dami-mini .elementor-widget-container { font-size: 13px; line-height: 1.5; color: var(--dami-taupe) !important; }

/* --- cabeçalho ------------------------------------------------------------- */
.dami-header { transition: box-shadow .2s ease; }
.dami-header.elementor-sticky--effects { box-shadow: 0 1px 12px rgba(75,27,33,.06); }
/* respiro em volta do logo de 46px */
.dami-header > .e-con-inner { padding-block: 20px; }
/* nas páginas de artigo o cabeçalho fica um pouco mais baixo (docs/01 §01),
   mas não colado */
.single-post .dami-header > .e-con-inner { padding-block: 15px; }

/* Respiro no topo do artigo enquanto o template "Post único" não for importado
   (o tema Hello cola o título no cabeçalho). Depois do import esta regra sai
   de cena sozinha, porque a página passa a ter a classe .elementor-page. */
.single-post:not(.elementor-page) .site-main { padding-top: 48px; }

/* logo: altura fixa, largura proporcional (nunca esticado).
   Usa o lockup horizontal (logo-dami-horizontal.svg, 681×230 ≈ 3:1). */
.dami-header .elementor-widget-image { flex: none; }
.dami-header .elementor-widget-image img {
  height: 46px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

/* busca que se abre no lugar do ícone (skin "Minimal" do Elementor).
   Colapsada é só a lupa; ao clicar, o campo cresce para o lado. Sem JS:
   o ícone recebe pointer-events:none, então o clique cai no input e o
   :focus-within do container dispara a expansão.                            */
/* O widget guarda sempre 42px de espaço; o campo cresce por cima do menu,
   em vez de empurrá-lo e fazer o menu quebrar linha.
   z-index alto porque o widget de menu do Elementor cria contexto de
   empilhamento próprio e, sem isso, os links são pintados sobre o campo. */
.dami-header .elementor-widget-search-form {
  flex: none;
  position: relative;
  z-index: 100;
  width: 42px;
  height: 42px;
}
/* !important é necessário: o Elementor gera CSS por widget com seletores do tipo
   `.elementor-1927 .elementor-element.elementor-element-XXXX .elementor-search-form__…`
   (especificidade 0,4,0+), que sobrepõe qualquer regra nossa. Ele impõe
   border-radius 3px, min-height 50px e padding lateral no ícone e no input. */
.dami-header .elementor-widget-search-form { --e-search-form-icon-size-minimal: 18px; }
.dami-header .elementor-widget-search-form .elementor-search-form { min-height: 0; }
.dami-header .elementor-widget-search-form .elementor-search-form__container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  min-height: 42px !important;
  border-radius: 72px !important;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid transparent;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), background-color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.dami-header .elementor-widget-search-form .elementor-search-form__icon {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center !important;
  padding: 0 !important;
  opacity: 1 !important;
  color: var(--dami-vinho-titulo) !important;
  fill: var(--dami-vinho-titulo) !important;
  pointer-events: none;
  z-index: 1;
}
/* tamanho do ícone travado aqui: não depender de --e-search-form-icon-size-minimal */
.dami-header .elementor-widget-search-form .elementor-search-form__icon svg,
.dami-header .elementor-widget-search-form .elementor-search-form__icon i {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}
.dami-header .elementor-widget-search-form .elementor-search-form__input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--dami-sans);
  font-size: 15px;
  color: var(--dami-vinho-titulo);
  cursor: pointer;
}
.dami-header .elementor-widget-search-form .elementor-search-form__input::placeholder {
  color: transparent;
  opacity: 1;
}
.dami-header .elementor-widget-search-form .elementor-search-form__input:focus { outline: 0; }
/* o contorno padrão do Elementor cercaria a caixa de 42px, não o campo aberto */
.dami-header .elementor-search-form--skin-minimal:focus-within { outline: none !important; }
.dami-header .elementor-widget-search-form .elementor-search-form__container:hover {
  background: var(--dami-blush) !important;
}
/* aberta: com foco, ou quando já existe texto digitado.
   Cresce para a esquerda, sobre o menu — fundo opaco e sombra leve separam. */
.dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within,
.dami-header .elementor-widget-search-form .elementor-search-form__container:has(input:not(:placeholder-shown)) {
  width: 280px;
  background: var(--dami-blush) !important;
  border-color: var(--dami-hairline);
  box-shadow: 0 2px 14px rgba(75, 27, 33, .10), 0 0 0 2px rgba(227, 116, 125, .32);
}
.dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within .elementor-search-form__input { cursor: text; }
.dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within .elementor-search-form__input::placeholder { color: var(--dami-taupe); }
/* No celular o campo cresce a partir da direita; o limite garante que a borda
   esquerda nunca passe da margem da página. */
@media (max-width: 1024px) {
  .dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within,
  .dami-header .elementor-widget-search-form .elementor-search-form__container:has(input:not(:placeholder-shown)) {
    /* ocupa todo o espaço disponível: da margem esquerda da página até o
       hambúrguer, cobrindo o logo.
       100vw − (2 × margem) − (hambúrguer 42 + espaço 10) */
    width: calc(100vw - 2 * var(--dami-gutter) - 52px);
  }
  /* com o campo sobre o logo, o ícone e o texto ficam mais soltos */
  .dami-header .elementor-widget-search-form .elementor-search-form__input {
    padding-right: 20px !important;
  }
}
/* computador: o campo já fica aberto, com "Buscar no Damí Beauty Blog…" à vista
   (22/10/2026, pedido do time). Mesma largura com e sem foco, para nada pular ao clicar.
   Medido no ar, de "Sobre a Sandra" até a borda direita da lupa: 242px em 1025px,
   280px em 1100px, 324px de 1240px para cima. Daí 200 / 240 / 280px, sempre com
   ~40px de folga. Nas duas menores o texto termina em "…". Tablet e celular seguem
   com a lupa. */
@media (min-width: 1025px) {
  .dami-header .elementor-widget-search-form { width: 280px; }
  .dami-header .elementor-widget-search-form .elementor-search-form__container {
    width: 280px;
    background: var(--dami-blush) !important;
    border-color: var(--dami-hairline);
  }
  .dami-header .elementor-widget-search-form .elementor-search-form__container:hover { border-color: var(--dami-coral-claro); }
  .dami-header .elementor-widget-search-form .elementor-search-form__input { cursor: text; text-overflow: ellipsis; }
  .dami-header .elementor-widget-search-form .elementor-search-form__input::placeholder { color: var(--dami-taupe); }
}
@media (min-width: 1025px) and (max-width: 1239px) {
  .dami-header .elementor-widget-search-form,
  .dami-header .elementor-widget-search-form .elementor-search-form__container,
  .dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within,
  .dami-header .elementor-widget-search-form .elementor-search-form__container:has(input:not(:placeholder-shown)) { width: 240px; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  .dami-header .elementor-widget-search-form,
  .dami-header .elementor-widget-search-form .elementor-search-form__container,
  .dami-header .elementor-widget-search-form .elementor-search-form__container:focus-within,
  .dami-header .elementor-widget-search-form .elementor-search-form__container:has(input:not(:placeholder-shown)) { width: 200px; }
}

/* menu numa linha só; vira hambúrguer no tablet */
.dami-header > .e-con-inner { flex-wrap: nowrap; }
.dami-header .elementor-nav-menu { flex-wrap: nowrap; }
.dami-header .elementor-nav-menu--main .elementor-item { white-space: nowrap; }
@media (max-width: 1200px) {
  .dami-header .elementor-nav-menu--main .elementor-item { font-size: 14px; padding-inline: 8px; }
}

/* --- dropdown "Blog" com os artigos recentes (snippet 05) ------------------
   !important em tudo que o Elementor define por widget: ele aplica cor de
   hover/ativo escura (#3f444b) nos itens de submenu e uma largura estreita,
   herdadas dos padrões do widget. */
.dami-header .elementor-nav-menu--dropdown {
  border: 1px solid var(--dami-hairline);
  border-radius: var(--dami-raio);
  box-shadow: 0 8px 28px rgba(75, 27, 33, .10);
  overflow: hidden;
  padding: 6px 0;
  background-color: var(--dami-papel) !important;
}
/* títulos de artigo precisam de largura: um menu comum é estreito demais */
.dami-header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  width: 360px !important;
  min-width: 360px !important;
}

/* zera os estados escuros padrão do Elementor antes de aplicar os nossos */
.dami-header .elementor-nav-menu--dropdown a,
.dami-header .elementor-nav-menu--dropdown a:hover,
.dami-header .elementor-nav-menu--dropdown a:focus,
.dami-header .elementor-nav-menu--dropdown a.highlighted,
.dami-header .elementor-nav-menu--dropdown a.elementor-item-active {
  background-color: transparent !important;
  color: var(--dami-vinho-titulo) !important;
}

.dami-header .dami-recente > a.elementor-sub-item {
  white-space: normal;
  line-height: 1.4;
  font-size: 14px !important;
  font-weight: 400;
  padding: 11px 20px !important;
}
.dami-header .dami-recente > a.elementor-sub-item:hover {
  background-color: var(--dami-blush) !important;
  color: var(--dami-vinho) !important;
}
.dami-header .dami-recente + .dami-recente > a.elementor-sub-item {
  border-top: 1px solid var(--dami-hairline);
}

.dami-header .dami-menu-vertodos > a.elementor-sub-item {
  margin-top: 6px;
  border-top: 1px solid var(--dami-hairline);
  padding: 13px 20px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--dami-coral) !important;
  background-color: var(--dami-blush-card) !important;
  white-space: nowrap;
}
.dami-header .dami-menu-vertodos > a.elementor-sub-item:hover {
  background-color: var(--dami-blush) !important;
  color: var(--dami-vinho) !important;
}

/* --- cabeçalho no tablet e no celular -------------------------------------
   Sem isto o container quebra linha e a busca cai para baixo do logo — e,
   como o campo se expande a partir da direita dela, abria para fora da tela. */
@media (max-width: 1024px) {
  .dami-header > .e-con-inner {
    flex-wrap: nowrap !important;
    gap: 10px;
  }
  /* ordem: logo · busca · hambúrguer, os dois últimos colados à direita.
     O widget de menu herda --container-widget-width:100% do Elementor e por
     isso empurrava a busca para junto do logo; aqui ele encolhe ao conteúdo. */
  .dami-header .elementor-widget-image { order: 1; flex: none; }
  .dami-header .elementor-widget-search-form { order: 2; margin-left: auto; }
  .dami-header .elementor-widget-nav-menu,
  .dami-header .elementor-widget-nav-menu > .elementor-widget-container {
    order: 3;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none;
  }
  /* CHAVE: o widget precisa deixar de ser o bloco de referência.
     Enquanto ele é `position:relative` e tem 42px, o painel do menu se ancora
     nele e sai com 42px de largura, vazando pela direita. Com `static`, o
     painel passa a se posicionar pelo .dami-header (que é `relative` e ocupa
     a largura toda) e left/right = 0 o esticam de ponta a ponta. */
  .dami-header .elementor-widget-nav-menu { position: static !important; }
  .dami-header .elementor-widget-nav-menu .elementor-nav-menu--main { position: static; }

  .dami-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;      /* left + right definem a largura */
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    border-top: 1px solid var(--dami-hairline);
    border-radius: 0 0 var(--dami-raio) var(--dami-raio);
    box-shadow: 0 10px 24px rgba(75, 27, 33, .10);
    background-color: var(--dami-papel) !important;
  }
  /* submenu dos artigos dentro do painel: vira sanfona, largura total */
  .dami-header .elementor-nav-menu__container .sub-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--dami-blush) !important;
  }
  .dami-header .elementor-nav-menu--dropdown .elementor-item,
  .dami-header .elementor-nav-menu--dropdown .elementor-sub-item {
    padding-inline: var(--dami-gutter) !important;
    white-space: normal;
  }
  .dami-header .elementor-nav-menu__container .sub-menu .elementor-sub-item {
    padding-inline: calc(var(--dami-gutter) + 12px) !important;
  }
  .dami-header .elementor-menu-toggle {
    background-color: transparent !important;
    color: var(--dami-vinho-titulo) !important;
    padding: 0;
    width: 42px;
    height: 42px;
  }
  .dami-header .elementor-menu-toggle svg { fill: var(--dami-vinho-titulo); width: 26px; height: 26px; }

  /* o dropdown vira parte da sanfona: largura total, sem caixa */
  .dami-header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .dami-header .elementor-nav-menu--dropdown li a { padding-left: 24px !important; }
  .dami-header .dami-recente > a.elementor-sub-item { font-size: 15px !important; }
  .dami-header .dami-menu-vertodos > a.elementor-sub-item { white-space: normal; }
}
@media (max-width: 767px) {
  .dami-header .elementor-widget-image img { height: 38px !important; }
}

/* logo do rodapé: usa logo-dami-horizontal-claro.svg (já vem nas cores claras,
   sem precisar de filtro CSS) */
.dami-footer .elementor-widget-image img {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
}

/* --- rodapé ---------------------------------------------------------------- */
.dami-footer .elementor-heading-title {
  font-family: var(--dami-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--dami-blush);
}
.dami-footer .elementor-widget-container { color: var(--dami-coral-claro); }
.dami-footer a { color: var(--dami-coral-claro); text-decoration: none; }
.dami-footer a:hover { color: #ffffff; }
.dami-footer .elementor-nav-menu a {
  font-family: var(--dami-sans);
  font-size: 15px;
  font-weight: 400;
  padding: 5px 0;
  color: var(--dami-coral-claro);
}
.dami-footer .elementor-nav-menu a:hover { color: #ffffff; }
.dami-footer-base { border-top: 1px solid rgba(255,255,255,.12); }
.dami-footer-base .elementor-widget-container { font-size: 13px; line-height: 1.55; color: rgba(255,216,219,.72); }

/* --- cards de loop --------------------------------------------------------- */
.dami-card, .dami-card > .e-con-inner {
  background: var(--dami-blush-card);
  border-radius: var(--dami-raio);
  overflow: hidden;
  height: 100%;
}
.dami-card { border: 1px solid var(--dami-hairline); transition: border-color .18s ease; }
.dami-card:hover { border-color: var(--dami-coral); }
.dami-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.dami-card-produto img {
  aspect-ratio: 1/1;
  object-fit: contain;
  background: #ffffff;
  padding: 18px;
}
.dami-card-corpo { padding: 20px 22px; }

/* destaque da semana: imagem à esquerda, texto à direita */

/* mais lidos: numeração automática 01, 02, 03… */
.dami-mais-lidos .e-loop-item { counter-increment: dami-n; }
.dami-mais-lidos .elementor-widget-theme-post-title .elementor-heading-title::before {
  content: counter(dami-n, decimal-leading-zero) " - ";
  color: var(--dami-coral);
  font-family: var(--dami-serif);
}
.dami-mais-lidos-item { border-top: 1px solid var(--dami-hairline); }
.dami-mais-lidos .e-loop-item:last-child .dami-mais-lidos-item { border-bottom: 1px solid var(--dami-hairline); }

/* lista de títulos sobre fundo vinho (Segredos da Coreia) */
.dami-lista-clara .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: 22px;
  color: var(--dami-blush);
}
.dami-lista-clara .dami-mais-lidos-item,
.dami-lista-clara .e-loop-item:last-child .dami-mais-lidos-item { border-color: rgba(255,255,255,.18); }

/* --- botões ---------------------------------------------------------------- */
.dami-btn .elementor-button {
  background: var(--dami-grad-vinho) !important;
  color: var(--dami-blush) !important;
  border-radius: var(--dami-pilula);
  padding: 14px 28px;
  font-family: var(--dami-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  transition: filter .18s ease;
}
.dami-btn .elementor-button:hover { filter: brightness(0.92); color: var(--dami-blush) !important; }
.dami-btn--claro .elementor-button {
  background: var(--dami-grad-rosa) !important;
  color: var(--dami-vinho-escuro) !important;
}
.dami-btn--claro .elementor-button:hover { color: var(--dami-vinho-escuro) !important; }

.dami-link .elementor-button {
  background: none !important;
  border: 0;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--dami-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--dami-coral) !important;
  letter-spacing: 0;
  text-transform: none;
}
.dami-link .elementor-button:hover { color: var(--dami-vinho) !important; text-decoration: underline; text-underline-offset: 3px; }
.dami-link--claro .elementor-button { color: var(--dami-coral-claro) !important; }
.dami-link--claro .elementor-button:hover { color: #ffffff !important; }

.dami-tag .elementor-button {
  background: var(--dami-pessego) !important;
  color: var(--dami-vinho) !important;
  border: 0;
  border-radius: 3px !important;
  padding: 9px 14px !important;
  font-family: var(--dami-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dami-tag .elementor-button:hover { background: var(--dami-coral) !important; color: #ffffff !important; }

/* --- página do artigo ------------------------------------------------------ */
.dami-breadcrumb .elementor-widget-container,
.dami-breadcrumb #breadcrumbs {
  font-family: var(--dami-sans);
  font-size: 14px;
  color: var(--dami-taupe);
}
.dami-breadcrumb a { color: var(--dami-vinho); text-decoration: none; }
.dami-breadcrumb a:hover { text-decoration: underline; }
.dami-autoria { border-bottom: 1px solid var(--dami-hairline); }
.dami-autoria img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.dami-capa img { border-radius: var(--dami-raio); width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.dami-sobre-autora { background: var(--dami-vinho); border-radius: 16px; }
.dami-sobre-autora img { border-radius: var(--dami-raio); aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.dami-faixa .elementor-widget-container,
.dami-faixa .elementor-widget-container p {
  font-family: var(--dami-sans) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--dami-coral-claro) !important;
}

/* --- cards estáticos de categoria (home do blog) --------------------------- */
.dami-cat-card {
  background: var(--dami-blush-card);
  border: 1px solid var(--dami-hairline);
  border-radius: var(--dami-raio);
  transition: border-color .18s ease;
}
.dami-cat-card:hover { border-color: var(--dami-coral); }

/* --- selo Amazon ----------------------------------------------------------- */
.dami-selo-amazon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--dami-hairline);
  border-radius: 6px;
  padding: 8px 14px;
}
.dami-selo-amazon img { max-height: 24px; width: auto; }

/* --- paginação do arquivo -------------------------------------------------- */
.dami-paginacao .elementor-pagination { font-family: var(--dami-sans); font-size: 15px; }
.dami-paginacao .page-numbers { color: var(--dami-taupe); padding: 6px 12px; text-decoration: none; }
.dami-paginacao .page-numbers.current { color: var(--dami-coral); font-weight: 600; }

/* --- responsivo ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .dami-h1 .elementor-heading-title { font-size: 44px; }
  .dami-h2 .elementor-heading-title { font-size: 38px; }
}
@media (max-width: 767px) {
  .dami-h1 .elementor-heading-title { font-size: 34px; }
  .dami-h2 .elementor-heading-title { font-size: 30px; }
  .dami-h3 .elementor-heading-title { font-size: 24px; }
  .dami-h4 .elementor-heading-title { font-size: 20px; }
  .dami-lead .elementor-widget-container { font-size: 17px; }
  .dami-card-corpo { padding: 18px 18px 22px; }
}

/* ==========================================================================
   AJUSTES DE REVISÃO — 25/09/2026
   Respostas ao documento "Ajustes blog dami".
   ========================================================================== */

/* --- 1. rótulos (eyebrow) sempre em sans, em todo o site ------------------
   Regra universal pedida na revisão: nenhum rótulo em caixa alta usa a
   serifada. Vale para o rótulo de seção, a categoria do post no topo do
   artigo ("REJUVENESCIMENTO") e os títulos de coluna do rodapé. */
.dami-k .elementor-heading-title,
.dami-footer .elementor-heading-title,
:where(body:has(.dami-header)) div.elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.9px;
}

/* breadcrumb ("Início › Categoria › …") também em sans */
.dami-breadcrumb .elementor-widget-container,
.dami-breadcrumb #breadcrumbs,
:where(body:has(.dami-header)) .elementor-widget-breadcrumbs .elementor-widget-container {
  font-family: var(--dami-sans) !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dami-taupe);
}

/* título do arquivo (categoria / tag / autora) em sans, por pedido da revisão */
.dami-h1--sans .elementor-heading-title,
:where(body:has(.dami-header)) .elementor-widget-theme-archive-title .elementor-heading-title,
:where(body:has(.dami-header)) .elementor-widget-archive-title .elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--dami-vinho-titulo);
}

/* --- 2. rodapé ------------------------------------------------------------ */

/* 2a. as quatro colunas cabem em uma linha só.
   Antes: marca 30% + 3 x 20% + 3 x 40px de vão passava de 1140px e a última
   coluna caía para baixo. Agora a marca é fixa e as listas dividem o resto. */
.dami-footer .dami-footer-cols,
.dami-footer .dami-footer-cols > .e-con-inner { flex-wrap: nowrap !important; }
.dami-footer .dami-footer-marca { flex: 0 0 30% !important; }
.dami-footer .dami-footer-col {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
}

/* 2b. cada lista em uma coluna só, sem quebrar item no meio */
.dami-footer .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
}
.dami-footer .elementor-nav-menu li { width: 100%; }
.dami-footer .elementor-nav-menu a { display: block; white-space: normal; }

/* 2c. tudo alinhado à esquerda (o widget de imagem e o de redes sociais
   vêm centralizados por padrão no Elementor) */
.dami-footer .elementor-widget-image,
.dami-footer .elementor-widget-image .elementor-widget-container,
.dami-footer .elementor-widget-social-icons,
.dami-footer .elementor-widget-social-icons .elementor-widget-container,
.dami-footer .elementor-widget-text-editor { text-align: left !important; }
.dami-footer .elementor-social-icons-wrapper { justify-content: flex-start !important; }
.dami-footer .dami-footer-marca,
.dami-footer .dami-footer-marca > .e-con-inner { align-items: flex-start !important; }

/* 2d. descrição da marca em tom mais próximo do fundo do rodapé */
.dami-footer .dami-footer-marca .elementor-widget-text-editor .elementor-widget-container,
.dami-footer .dami-footer-marca .elementor-widget-text-editor p {
  color: rgba(250,244,243,.40) !important;
}

/* 2e. rodapé-base (aviso da Amazon + direitos reservados): bem menor e
   quase fundido ao fundo, como pedido na revisão */
.dami-footer-base .elementor-widget-container,
.dami-footer-base .elementor-widget-container p,
.dami-footer-base .dami-mini .elementor-widget-container {
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: rgba(250,244,243,.26) !important;
}
.dami-footer-base .elementor-widget-container strong { color: inherit; }

@media (max-width: 880px) {
  .dami-footer .dami-footer-cols,
  .dami-footer .dami-footer-cols > .e-con-inner { flex-wrap: wrap !important; }
  .dami-footer .dami-footer-marca { flex: 1 1 100% !important; }
  .dami-footer .dami-footer-col { flex: 1 1 40% !important; }
}

/* --- 3. newsletter -------------------------------------------------------- */
/* Campo e botão na mesma linha, com o rótulo do botão sem quebrar.
   Escopo pelo tipo de widget do Elementor (.elementor-widget-form) para o
   estilo não depender da classe do widget. */
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-form-fields-wrapper {
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 10px;
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-group { padding: 0 !important; }
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-group:not(.elementor-field-type-submit) {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-type-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-textual {
  font-family: var(--dami-sans);
  font-size: 15px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--dami-hairline) !important;
  border-radius: 72px !important;
  background: #ffffff;
  color: var(--dami-vinho-titulo);
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-textual::placeholder { color: var(--dami-taupe); }
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-textual:focus {
  border-color: var(--dami-coral) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(227,116,125,.16);
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form button[type="submit"] {
  font-family: var(--dami-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap !important;
  min-width: max-content;
  height: 52px;
  padding: 0 30px !important;
  border-radius: 72px !important;
  background: linear-gradient(90deg,#4b1b21 0,#5a1f26 50%,#5f0913 100%) !important;
  color: var(--dami-blush) !important;
  border: 0;
}
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form button[type="submit"]:hover { filter: brightness(.92); }
:where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-label { display: none; }

@media (max-width: 600px) {
  :where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-form-fields-wrapper { flex-wrap: wrap !important; }
  :where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-group,
  :where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form .elementor-field-type-submit { flex: 1 1 100% !important; }
  :where(body:has(.dami-header), .dami-newsletter) .elementor-widget-form button[type="submit"] { width: 100%; }
}

/* --- 4. assinatura do artigo (autoria) ------------------------------------
   As duas linhas ("Por …" e "Atualizado em … • N min") vinham com a margem
   de parágrafo do tema, afastadas e desencontradas da foto. Agora formam um
   bloco compacto, centralizado verticalmente com o avatar de 48px. */
.dami-byline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.dami-byline p { margin: 0 !important; }
.dami-byline__autor {
  font-family: var(--dami-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dami-vinho);
}
.dami-byline__autor a { color: inherit; text-decoration: none; }
.dami-byline__autor a:hover { color: var(--dami-coral); text-decoration: underline; text-underline-offset: 3px; }
.dami-byline__meta {
  font-family: var(--dami-sans);
  font-size: 13px;
  line-height: 1.3;
  color: var(--dami-taupe);
}
.dami-autoria,
.dami-autoria > .e-con-inner { align-items: center !important; }
.dami-autoria .elementor-widget-shortcode,
.dami-autoria .elementor-widget-shortcode .elementor-widget-container { display: flex; align-items: center; }

/* ==========================================================================
   RODAPÉ — ancorado no atributo do Elementor (25/09/2026, 2ª rodada)
   --------------------------------------------------------------------------
   As regras de rodapé acima dependem das classes `dami-footer*`. Na tela do
   Victor elas não estavam pegando: os títulos saíam no azul padrão do Kit
   (--e-global-color-primary: #6EC1E4) e o texto legal no tamanho padrão,
   embora o blog.css do servidor fosse idêntico a este arquivo.

   Aqui o escopo é `[data-elementor-type="footer"]`, que o próprio Elementor
   escreve em todo rodapé de Construtor de temas. Não é classe, não passa pelo
   campo "Classes CSS" e não se perde na importação. É o único rodapé de
   template do site — as páginas de venda do Spa usam Elementor Canvas, sem
   cabeçalho nem rodapé.

   Os blocos são identificados pelo que contêm, não por posição:
     · coluna da marca  → o bloco que tem widget de imagem
     · colunas de lista → os blocos que têm widget de menu
     · rodapé-base      → o bloco que não tem nem menu nem imagem
   ========================================================================== */

/* --- títulos de coluna: sans, caixa alta, blush (nunca o azul do Kit) ----- */
[data-elementor-type="footer"] .elementor-widget-heading .elementor-heading-title {
  font-family: var(--dami-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.9px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--dami-blush) !important;
}

/* --- listas: 14px, uma coluna só ----------------------------------------- */
[data-elementor-type="footer"] .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
}
[data-elementor-type="footer"] .elementor-nav-menu li { width: 100%; }
[data-elementor-type="footer"] .elementor-nav-menu a,
[data-elementor-type="footer"] .elementor-nav-menu a.elementor-item {
  display: block;
  white-space: normal;
  font-family: var(--dami-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 5px 0 !important;
  color: var(--dami-coral-claro) !important;
}
[data-elementor-type="footer"] .elementor-nav-menu a:hover,
[data-elementor-type="footer"] .elementor-nav-menu a.elementor-item:hover { color: #ffffff !important; }

/* --- as 4 colunas em uma linha só ---------------------------------------- */
/* o bloco em caixa que contém os menus é a linha das colunas */
[data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner { flex-wrap: nowrap !important; }
[data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner > .e-con {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
}
/* a coluna da marca (a que tem o logo) é fixa em 30% */
[data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner > .e-con:has(.elementor-widget-image) {
  flex: 0 0 30% !important;
}

/* --- tudo à esquerda ------------------------------------------------------ */
[data-elementor-type="footer"] .elementor-widget-image,
[data-elementor-type="footer"] .elementor-widget-image .elementor-widget-container,
[data-elementor-type="footer"] .elementor-widget-social-icons,
[data-elementor-type="footer"] .elementor-widget-social-icons .elementor-widget-container,
[data-elementor-type="footer"] .elementor-widget-text-editor { text-align: left !important; }
[data-elementor-type="footer"] .elementor-social-icons-wrapper { justify-content: flex-start !important; }

/* --- descrição da marca: tom mais próximo do fundo ------------------------ */
[data-elementor-type="footer"] .e-con:has(> .elementor-widget-image) .elementor-widget-text-editor,
[data-elementor-type="footer"] .e-con:has(> .elementor-widget-image) .elementor-widget-text-editor p {
  font-family: var(--dami-sans) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(250,244,243,.40) !important;
}

/* --- rodapé-base: o bloco sem menu e sem imagem --------------------------
   Aviso da Amazon + direitos reservados. 12px: o Victor pediu "pelo menos
   uns 14px" depois de ter pedido "diminuir bastante" — 12px atende os dois. */
[data-elementor-type="footer"] .e-con:not(:has(.elementor-widget-nav-menu)):not(:has(.elementor-widget-image)) .elementor-widget-text-editor,
[data-elementor-type="footer"] .e-con:not(:has(.elementor-widget-nav-menu)):not(:has(.elementor-widget-image)) .elementor-widget-text-editor .elementor-widget-container,
[data-elementor-type="footer"] .e-con:not(:has(.elementor-widget-nav-menu)):not(:has(.elementor-widget-image)) .elementor-widget-text-editor p {
  font-family: var(--dami-sans) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(250,244,243,.26) !important;
}

/* --- logo do rodapé ------------------------------------------------------- */
[data-elementor-type="footer"] .elementor-widget-image img {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 880px) {
  [data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner { flex-wrap: wrap !important; }
  [data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner > .e-con:has(.elementor-widget-image) { flex: 1 1 100% !important; }
  [data-elementor-type="footer"] .e-con:has(.elementor-widget-nav-menu) > .e-con-inner > .e-con { flex: 1 1 40% !important; }
}

/* ==========================================================================
   HOME DO BLOG — herói + grade (25/09/2026)
   Composição vinda da referência que o Victor enviou: herói sem foto, com o
   título à esquerda e o texto de apoio numa coluna estreita à direita,
   rente à base do título; grade de artigos sobre faixa tingida; card com
   pílula de categoria e data na mesma linha, acima do título.
   ========================================================================== */

/* --- herói ---------------------------------------------------------------- */
.dami-hero,
.dami-hero > .e-con-inner { align-items: flex-end; }
/* o texto de apoio alinha pela base do título, não pelo topo */
.dami-hero-apoio { padding-bottom: 6px; }
/* sem max-width aqui: a largura da coluna já segura o título, e o 14ch
   espremia também o rótulo de 12px, que quebrava em cinco linhas. */

@media (max-width: 1024px) {
  .dami-hero,
  .dami-hero > .e-con-inner { flex-direction: column !important; align-items: stretch !important; }
  .dami-hero-apoio { width: 100% !important; flex: 1 1 100% !important; padding-bottom: 0; }

}

/* --- pílula de categoria + data, acima do título do card ------------------ */
.dami-card-meta,
.dami-card-meta > .e-con-inner { align-items: center; }
.dami-pilula-cat .elementor-heading-title {
  display: inline-block;
  font-family: var(--dami-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--dami-vinho);
  background: var(--dami-pessego);
  border-radius: var(--dami-pilula);
  padding: 5px 12px;
}
.dami-card-meta .dami-info .elementor-heading-title,
.dami-card-meta .elementor-widget-heading:not(.dami-pilula-cat) .elementor-heading-title {
  font-family: var(--dami-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dami-taupe);
}

/* --- link sublinhado (rodapé do card e herói) ----------------------------- */
.dami-link--sublinhado .elementor-button {
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.dami-link--sublinhado .elementor-button:hover {
  color: var(--dami-coral);
  text-decoration: underline;
}

/* --- "Em destaque" da home some quando nenhum post tem a tag Destaque -------
   (22/10/2026). Sem post marcado, sobrava o rótulo "Em destaque" sobre um vão
   vazio. Basta marcar um post com a tag para a seção voltar. .e-con restringe ao
   container da seção 03: a grade do "Ingrediente em destaque" (07) também leva a
   classe dami-destaque, mas é widget. */
.e-con.dami-destaque:not(:has(.e-loop-item)) { display: none !important; }

/* --- card em destaque: deitado no desktop --------------------------------
   Correção: .dami-card é container de largura total, então não tem
   .e-con-inner — a regra antiga só mirava o filho interno e nunca pegava. */
.dami-destaque .dami-card img { aspect-ratio: 3/2; }
@media (min-width: 1025px) {
  .dami-destaque .dami-card,
  .dami-destaque .dami-card > .e-con-inner { flex-direction: row !important; align-items: stretch; }
  .dami-destaque .dami-card > .elementor-widget-theme-post-featured-image,
  .dami-destaque .dami-card > .e-con-inner > :first-child { flex: 0 0 55%; }
  .dami-destaque .dami-card img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  /* !important porque a regra geral de .dami-card-corpo também o usa,
     para vencer o padding padrão de container do Elementor */
  .dami-destaque .dami-card-corpo {
    --padding-block-start: 40px; --padding-block-end: 40px;
    --padding-inline-start: 40px; --padding-inline-end: 40px;
    padding: 40px !important;
    align-self: center;
  }
  .dami-destaque .dami-card .elementor-widget-theme-post-title .elementor-heading-title { font-size: 34px; }
}

/* --- redes sociais do rodapé: repouso e hover ----------------------------
   Repouso: círculo translúcido, glifo coral-claro (como já estava no JSON).
   Hover: o círculo acende em coral-claro e o glifo inverte para o vinho do
   rodapé. É a mesma inversão que o sistema já usa na caixa "Sandra explica"
   e no selo do KBS — nada de sombra nem de salto, que não são desta marca.
   O !important é obrigatório: o Elementor grava as cores do widget com
   especificidade de 4 classes, e ainda aplica opacity .9 no próprio :hover. */
[data-elementor-type="footer"] .elementor-social-icon {
  background-color: rgba(255,255,255,.08) !important;
  transition: background-color .18s ease, transform .18s ease;
}
[data-elementor-type="footer"] .elementor-social-icon svg,
[data-elementor-type="footer"] .elementor-social-icon i {
  fill: var(--dami-coral-claro) !important;
  color: var(--dami-coral-claro) !important;
  transition: fill .18s ease, color .18s ease;
}
[data-elementor-type="footer"] .elementor-social-icon:hover,
[data-elementor-type="footer"] .elementor-social-icon:focus-visible {
  background-color: var(--dami-coral-claro) !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}
[data-elementor-type="footer"] .elementor-social-icon:hover svg,
[data-elementor-type="footer"] .elementor-social-icon:hover i,
[data-elementor-type="footer"] .elementor-social-icon:focus-visible svg,
[data-elementor-type="footer"] .elementor-social-icon:focus-visible i {
  fill: var(--dami-rodape) !important;
  color: var(--dami-rodape) !important;
}
/* foco visível pelo teclado: o hover sozinho não atende quem navega por Tab */
[data-elementor-type="footer"] .elementor-social-icon:focus-visible {
  outline: 2px solid var(--dami-coral-claro);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  [data-elementor-type="footer"] .elementor-social-icon { transition: background-color .18s ease; }
  [data-elementor-type="footer"] .elementor-social-icon:hover,
  [data-elementor-type="footer"] .elementor-social-icon:focus-visible { transform: none; }
}

/* ==========================================================================
   MARKUP OTIMIZADO DO ELEMENTOR — 27/09/2026
   --------------------------------------------------------------------------
   Este site roda com o "markup otimizado" do Elementor, que REMOVE a div
   `.elementor-widget-container`. Trinta e uma regras deste arquivo miravam
   nela e simplesmente não pegavam. Medido na página publicada:
     · texto do artigo saía em 16px cinza #7a7a7a (padrão do Kit)
       em vez de 17px no tom de leitura;
     · a faixa "+12 mil alunos…" saía em 16px cinza em vez de 13px coral-claro.

   Aqui as mesmas regras são ancoradas na RAIZ do widget, que existe nos dois
   modos. O !important é necessário porque a raiz do widget é exatamente onde o
   Elementor grava o CSS dele, com especificidade de 4 classes.

   A ordem interna importa: as variantes claras vêm por último para continuarem
   ganhando sobre fundo vinho.
   ========================================================================== */

/* --- corpo do artigo ------------------------------------------------------ */
.elementor-widget-theme-post-content {
  font-family: var(--dami-sans) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--dami-leitura) !important;
}

/* --- utilitários de texto, agora na raiz do widget ------------------------ */
.dami-lead {
  font-family: var(--dami-sans) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--dami-taupe) !important;
}
.dami-texto {
  font-family: var(--dami-sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--dami-taupe) !important;
}
.dami-info {
  font-family: var(--dami-sans) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--dami-taupe) !important;
}
.dami-mini {
  font-family: var(--dami-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--dami-taupe) !important;
}
.dami-faixa {
  font-family: var(--dami-sans) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--dami-coral-claro) !important;
}
.dami-breadcrumb,
.dami-breadcrumb #breadcrumbs {
  font-family: var(--dami-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--dami-taupe) !important;
}

/* o parágrafo herda do widget; só a margem precisa ser dita */
.dami-lead p, .dami-texto p, .dami-info p, .dami-mini p, .dami-faixa p { margin: 0 0 1em; }
.dami-lead p:last-child, .dami-texto p:last-child,
.dami-info p:last-child, .dami-mini p:last-child, .dami-faixa p:last-child { margin-bottom: 0; }
.dami-texto strong { color: var(--dami-vinho); }

/* --- variantes claras: por último, para vencerem as base ------------------ */
.dami-claro-txt,
.dami-claro-txt p { color: var(--dami-blush) !important; }
.dami-claro-txt strong { color: #ffffff !important; }
.dami-footer-base .dami-mini,
.dami-footer-base .dami-mini p { font-size: 12px !important; color: rgba(250,244,243,.26) !important; }
.dami-footer .dami-footer-marca .dami-texto,
.dami-footer .dami-footer-marca .dami-texto p { color: rgba(250,244,243,.40) !important; }

/* --- alinhamento do card (28/09/2026) -------------------------------------
   Medido: a pílula de categoria saía 10px à direita do título e do "Ler
   artigo →". Todo container do Elementor nasce com 10px de padding, e a linha
   da meta herdava isso — enquanto título e link, irmãos dela, começavam no
   zero do corpo do card.

   O padding é declarado nas duas formas de propósito: nas custom properties,
   que é por onde o Elementor calcula, e em `padding` com !important, para o
   caso de o widget trazer valor próprio. Assim alinha nos dois cenários. */
.dami-card-corpo {
  --padding-block-start: 20px;
  --padding-block-end: 24px;
  --padding-inline-start: 22px;
  --padding-inline-end: 22px;
  padding: 20px 22px 24px !important;
}
.dami-card-meta {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .dami-card-corpo {
    --padding-inline-start: 18px;
    --padding-inline-end: 18px;
    padding: 18px 18px 22px !important;
  }
}

/* ==========================================================================
   CANTOS E QUEBRA DE LINHA — 28/09/2026
   --------------------------------------------------------------------------
   Dois pedidos do Victor, olhando a caixa "Sobre a autora" no ar:
     · os cantos não estavam arredondados, nem da caixa nem da foto;
     · títulos deixavam palavra sozinha na última linha ("…na / Coreia").

   Cantos: o Elementor calcula o raio do container pela custom property
   `--border-radius`, e grava a dele com especificidade de 4 classes. Por isso
   o raio é declarado das duas formas — na custom property e em
   `border-radius` com !important. `overflow: hidden` no card faz a imagem do
   topo seguir o raio sem precisar arredondá-la separadamente.

   Quebra: `balance` distribui as linhas de um título para que nenhuma fique
   órfã (o navegador só aplica em blocos curtos, que é o caso de título).
   `pretty` é o equivalente para texto corrido: evita a última linha com uma
   palavra só, sem reequilibrar o parágrafo inteiro.
   ========================================================================== */

/* --- cantos arredondados, consistentes ------------------------------------ */
.dami-card {
  --border-radius: var(--dami-raio);
  border-radius: var(--dami-raio) !important;
  overflow: hidden;            /* a imagem do topo segue o raio do card */
}
.dami-cat-card {
  --border-radius: var(--dami-raio);
  border-radius: var(--dami-raio) !important;
}
.dami-sobre-autora {
  --border-radius: 16px;
  border-radius: 16px !important;
}
.dami-sobre-autora img,
.dami-capa img,
.dami-card-produto img {
  border-radius: var(--dami-raio) !important;
}
.dami-destaque .dami-card {
  --border-radius: 16px;
  border-radius: 16px !important;
}
/* a imagem dentro do card já é recortada pelo overflow; o raio próprio dela
   atrapalharia o encaixe no topo */
.dami-card > .elementor-widget-theme-post-featured-image img { border-radius: 0 !important; }

/* --- quebra de linha ------------------------------------------------------ */
.dami-h1 .elementor-heading-title,
.dami-h2 .elementor-heading-title,
.dami-h3 .elementor-heading-title,
.dami-h4 .elementor-heading-title,
.dami-card .elementor-widget-theme-post-title .elementor-heading-title,
:where(body:has(.dami-header)) h1.elementor-heading-title,
:where(body:has(.dami-header)) h2.elementor-heading-title,
:where(body:has(.dami-header)) h3.elementor-heading-title,
:where(body:has(.dami-header)) h4.elementor-heading-title {
  text-wrap: balance;
}
.dami-lead,
.dami-texto,
.dami-lead p,
.dami-texto p,
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-excerpt,
.dami-artigo p {
  text-wrap: pretty;
}

/* --- topo do arquivo alinhado com a grade ---------------------------------
   O rótulo e a descrição estavam num container de 900px (x=270) enquanto a
   grade usa 1140px (x=150) — 120px de descompasso. Igualando a caixa, o texto
   passa a começar na mesma vertical dos cards e do rodapé. A descrição
   continua com medida de leitura curta, para não virar uma linha de 1140px. */
[data-elementor-type="archive"] .e-con-boxed > .e-con-inner {
  --content-width: var(--dami-largura) !important;
  max-width: var(--dami-largura) !important;
}
[data-elementor-type="archive"] .dami-lead { max-width: 70ch; }

/* --- containers aninhados sem o padding padrão do Elementor (28/09/2026) ---
   Medido na /blog/: o herói saía 10px à direita do cabeçalho (x=160 vs 150).
   A cadeia mostrou a causa: o container interno `dami-hero-titulo` herdava os
   10px de padding que o Elementor dá a todo container por padrão (Site
   Settings → Layout, que não mexemos porque vale também para as páginas de
   venda do Spa). Mesmo bug da linha da meta do card.

   Aqui o padding lateral é zerado nos containers internos das seções do blog.
   Ficam de fora os componentes que TÊM padding de propósito — card, corpo do
   card, card de categoria e a caixa "Sobre a autora". Sem !important: se um
   container trouxer padding definido no JSON, o do Elementor continua valendo. */
:where(.dami-hero, .dami-faixa-grade, .dami-destaque, .dami-newsletter,
       .dami-sobre-autora, .dami-single, .dami-leitura, .dami-lg)
  .e-con-full:not(.dami-card):not(.dami-card-corpo):not(.dami-cat-card):not(.dami-sobre-autora) {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* --- formulário da newsletter com largura própria (28/09/2026) -------------
   Medido na /blog/: o campo de e-mail tinha 58px — só se lia "Se". A seção da
   newsletter centraliza os filhos (align-items: center), e item centralizado
   num flex em coluna encolhe até o conteúdo: o widget do formulário ficou com
   219px e o campo, sem largura mínima, com o que sobrou.
   Agora o formulário ocupa a linha até 520px, continua centralizado, e o campo
   cresce para preencher o que o botão não usa. Abaixo de 600px os dois já
   empilham em 100% pela regra do bloco 3. */
.dami-newsletter .elementor-widget-form {
  width: 100% !important;
  max-width: 520px !important;
  align-self: center !important;
  margin-inline: auto !important;
}
.dami-newsletter .elementor-form,
.dami-newsletter .elementor-form-fields-wrapper { width: 100% !important; }
.dami-newsletter .elementor-field-textual { width: 100% !important; min-width: 0; }

/* --- formulário da newsletter: botão no tamanho do rótulo, empilha no celular
   Duas correções medidas na /blog/ depois do bloco anterior:
   · o botão ficava com 306px e o campo com 204px — o Elementor dá ao botão
     flex-basis 100%, e ele disputava a linha com o campo;
   · no celular os dois seguiam lado a lado: a regra de desktop usa
     `:not(.elementor-field-type-submit)`, que é mais específica que a da
     media query, e especificidade vence media query.
   Aqui os seletores têm a MESMA especificidade no desktop e no celular.
   O grupo do botão é .elementor-field-type-submit (+ .e-form__buttons) nesta
   versão — NÃO existe .elementor-field-group-submit. Medido no ar. */
.dami-newsletter .elementor-field-group.elementor-field-type-submit {
  flex: 0 0 auto !important;
  width: auto !important;
}
.dami-newsletter .elementor-field-group.elementor-field-type-submit button[type="submit"] {
  flex: 0 0 auto !important;
  width: auto !important;
}
.dami-newsletter .elementor-field-group:not(.elementor-field-type-submit) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
@media (max-width: 600px) {
  .dami-newsletter .elementor-form-fields-wrapper { flex-wrap: wrap !important; }
  .dami-newsletter .elementor-field-group:not(.elementor-field-type-submit),
  .dami-newsletter .elementor-field-group.elementor-field-type-submit {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .dami-newsletter .elementor-field-group.elementor-field-type-submit button[type="submit"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* --- card de produto: respiro antes do botão (28/09/2026) ------------------
   O corpo do card de produto tem 8px entre os itens. Quando o tipo do produto
   e o resumo vêm vazios, o "Ver na Amazon →" encostava no título.
   `padding-top` garante o mínimo de 16px sempre; `margin-top: auto` empurra o
   botão para o pé do card quando os cards da linha têm alturas diferentes,
   deixando os botões alinhados entre si. */
.dami-card-produto .dami-card-corpo { flex-grow: 1; }
.dami-card-produto .elementor-widget-button {
  margin-top: auto !important;
  padding-top: 16px !important;
}
.dami-card-produto .dami-info { margin-top: -2px; }

/* ==========================================================================
   /sobre/, BOTÕES E NEWSLETTER — 28/09/2026
   ========================================================================== */

/* --- lista "Mais lidos" sobre a faixa vinho --------------------------------
   Medido na /sobre/: o título saía rgb(111,57,62) sobre rgb(142,68,75) — vinho
   sobre vinho. Regressão: quando as cores de .dami-h4 ganharam !important, a
   variante clara da lista (sem !important) passou a perder. */
.dami-lista-clara .elementor-widget-theme-post-title .elementor-heading-title,
.dami-lista-clara .elementor-widget-theme-post-title .elementor-heading-title a {
  color: var(--dami-blush) !important;
}
.dami-lista-clara .elementor-widget-theme-post-title .elementor-heading-title a:hover {
  color: #ffffff !important;
}
.dami-lista-clara .elementor-widget-theme-post-title .elementor-heading-title::before {
  color: var(--dami-coral-claro) !important;
}

/* o "Ler artigo →" da lista ficava com 45×45px e quebrava em três linhas:
   dentro da linha, o título tomava todo o espaço e o botão encolhia */
.dami-mais-lidos .elementor-widget-button { flex: 0 0 auto !important; }
.dami-mais-lidos .elementor-widget-button .elementor-button { white-space: nowrap !important; }
.dami-mais-lidos .elementor-widget-theme-post-title { flex: 1 1 auto; min-width: 0; }

/* numeração explícita: um contador por grade, zerado no contêiner dos itens.
   Sem o reset o navegador pode abrir um contador novo em cada item e a lista
   aparece como "00". */
.dami-mais-lidos .elementor-loop-container { counter-reset: dami-n; }

/* --- newsletter na medida de leitura ----------------------------------------
   O bloco é .dami-leitura (680px), mas o Elementor grava --content-width com o
   valor do JSON (1140) e ganha o empate: o título ficava com 764px e o texto
   com linhas de 1140. Agora a medida é a da coluna de leitura em todas as
   páginas onde a newsletter aparece (home, sobre, post). */
.dami-newsletter {
  --content-width: 680px !important;
}
.dami-newsletter > .e-con-inner { max-width: 680px !important; }

/* --- botões com o mesmo corpo do botão do formulário ------------------------
   Pedido: os botões pareciam estreitos, com pouco respiro em cima e embaixo;
   o do formulário (52px de altura, 30px de lado) era a referência. */
.dami-btn .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px !important;
  padding-block: 0 !important;
  padding-inline: 30px !important;
  line-height: 1.2 !important;
}
/* o "Ler artigo →" da lista também clareia sobre a faixa vinho — coral sobre
   vinho ficava fraco; coral-claro é o mesmo tom do "Descobrir mais segredos" */
.dami-lista-clara .dami-link .elementor-button { color: var(--dami-coral-claro) !important; }
.dami-lista-clara .dami-link .elementor-button:hover { color: #ffffff !important; }

/* --- padding padrão zerado em TODO container interno das páginas do blog ---
   A regra anterior listava seções uma a uma, e as seções novas da /sobre/
   (dami-hero-sobre, dami-manifesto) caíram fora: a foto do herói saiu 10px à
   direita do logo. Esta vale para qualquer container aninhado dentro de uma
   página, post ou arquivo do blog.
   Fora do escopo: cabeçalho e rodapé (outro data-elementor-type), as páginas
   de venda do Spa (não têm .dami-header) e os componentes com padding de
   propósito. Sem !important: padding definido no JSON continua valendo. */
:where(body:has(.dami-header))
  :where([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"])
  .e-con .e-con-full:not(.dami-card):not(.dami-card-corpo):not(.dami-cat-card):not(.dami-sobre-autora):not(.dami-mais-lidos-item) {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* --- numeração da lista "Mais lidos" (28/09/2026) ---------------------------
   No ar a lista mostrava "00" em todos os itens. Medido: o counter-increment
   computado no .e-loop-item era "n 1" — o Elementor usa um contador próprio
   chamado `n` nos itens da grade e, como carrega depois deste arquivo, a regra
   dele substituía a nossa. counter-increment aceita vários contadores: aqui
   incrementamos o dele E o nosso, com !important para não depender da ordem. */
.dami-mais-lidos .e-loop-item { counter-increment: n 1 dami-n 1 !important; }

/* --- cards da mesma altura na linha (28/09/2026) ----------------------------
   Medido: na grade de Novidades um card tinha 560px e os outros 531px — o de
   título em três linhas. Agora o card ocupa a altura toda da linha da grade,
   o corpo cresce, e o "Ler artigo →" desce para o pé, alinhado entre os cards. */
.elementor-loop-container:has(.dami-card) {
  align-items: stretch !important;
  /* todas as linhas com a altura da mais alta: cards iguais na grade inteira,
     não só dentro da mesma linha */
  grid-auto-rows: 1fr !important;
}
.elementor-loop-container > .e-loop-item:has(.dami-card) { height: 100%; }
.e-loop-item > .dami-card { height: 100% !important; }
.dami-card > .dami-card-corpo { flex-grow: 1 !important; }
.dami-card .dami-card-corpo > .elementor-widget-button { margin-top: auto !important; }

/* --- mais respiro entre o título da seção e a grade -------------------------
   Pedido: "Os favoritos das leitoras" ficava a 20px da lista e "Novidades" a
   24px dos cards. Vale quando a grade vem logo depois de um H2 ou de um texto
   de abertura — não depois do rótulo "Em destaque", que é legenda do card e
   tem que ficar colado nele. */
:where(body:has(.dami-header)) .elementor-widget-heading:has(> h2.elementor-heading-title, > .elementor-widget-container > h2.elementor-heading-title) + .elementor-widget-loop-grid,
:where(body:has(.dami-header)) .elementor-widget-text-editor + .elementor-widget-loop-grid {
  margin-top: 24px !important;
}

/* --- rodapé no celular: listas, nunca sanduíche (28/09/2026) ----------------
   O widget de menu vem com "Breakpoint: tablet": de 1024px para baixo cada
   coluna virava um botão sanduíche e os links sumiam. Num rodapé as listas são
   curtas e precisam ficar à vista. As colunas continuam quebrando linha quando
   falta espaço (regra do bloco 2, abaixo de 880px). O JSON novo já vem com
   Breakpoint "Nenhum"; esta regra cobre o rodapé que já está importado. */
[data-elementor-type="footer"] .elementor-menu-toggle,
[data-elementor-type="footer"] .elementor-nav-menu--dropdown { display: none !important; }
[data-elementor-type="footer"] .elementor-nav-menu--main { display: block !important; }

/* conteúdo das colunas do rodapé alinhado à grade da página: sem os 10px de
   padding padrão que o Elementor dá aos containers internos (no celular os
   títulos saíam em x=34, com a página em x=24) */
[data-elementor-type="footer"] .e-con .e-con-full {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* --- post: capa e "Sobre a autora" na largura do texto (28/09/2026) ---------
   Pedido: as duas ficavam em 900px, entre o texto (680) e o cabeçalho (1140),
   sem alinhar com nada. Agora acompanham a coluna de leitura. O Elementor grava
   --content-width com o valor do JSON, por isso o !important. */
.dami-capa { --content-width: 680px !important; }
.dami-capa > .e-con-inner { max-width: 680px !important; }
.e-con-boxed:has(> .e-con-inner > .dami-sobre-autora) { --content-width: 680px !important; }
.e-con-boxed:has(> .e-con-inner > .dami-sobre-autora) > .e-con-inner { max-width: 680px !important; }

/* --- quebra de linha em TODO parágrafo do blog -----------------------------
   O subtítulo do post ("…e o que ela / evita.") saía com palavra sozinha: ele
   vem de um shortcode com classe própria, fora das regras anteriores. Agora
   vale para qualquer parágrafo e item de lista das páginas do blog. Texto curto
   (subtítulo) usa balance, que reparte as linhas por igual e funciona também
   no Firefox; texto longo usa pretty, que só evita a última linha órfã. */
:where(body:has(.dami-header)) :is(p, li) { text-wrap: pretty; }
.dami-subtitulo,
:where(body:has(.dami-header)) .dami-byline__meta { text-wrap: balance; }

/* --- produtos automáticos (snippet 06, 28/09/2026) --------------------------
   O card "Produto relacionado" agora vem do cadastro de produtos. Ele imita o
   bloco Mídia e Texto, mas não é um: o WordPress pode não carregar o CSS do
   core para ele, por isso a grade é declarada aqui. */
.dami-produto--auto.wp-block-media-text {
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
}
/* o core centraliza a mídia (.wp-block-media-text > …); aqui o fundo branco vai até o pé do card */
.dami-produto.wp-block-media-text > .wp-block-media-text__media,
.dami-produto--auto .wp-block-media-text__media {
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dami-produto--auto .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
}
.dami-produto--auto .wp-block-buttons { display: flex; margin-top: 4px; }
/* o core põe "padding: 0 8%" no texto (.wp-block-media-text > …), que zerava o respiro de cima */
.dami-produto.wp-block-media-text > .wp-block-media-text__content { padding: 28px 32px; }
/* sem foto no cadastro: uma coluna só, sem metade vazia */
.dami-produto--sem-foto .wp-block-media-text__content { padding: 28px 32px; }
@media (max-width: 600px) {
  .dami-produto--auto.wp-block-media-text { grid-template-columns: 1fr; }
  .dami-produto--auto .wp-block-media-text__media img { max-height: 280px; }
  .dami-produto.wp-block-media-text > .wp-block-media-text__content,
  .dami-produto--sem-foto .wp-block-media-text__content { padding: 22px; }
}
.dami-selecao .wp-block-buttons { display: flex; }
/* linhas coladas: o layout "constrained" do WordPress punha 24px entre elas,
   o que deixava um vão embaixo de cada item, antes do fio da linha seguinte */
.dami-selecao .dami-selecao-item + .dami-selecao-item { margin-block-start: 0; }

/* só dentro do editor: avisos e seletor do bloco (nunca aparecem para o visitante) */
.dami-prod-aviso {
  margin: 1.6em 0;
  padding: 14px 18px;
  border: 1px dashed var(--dami-coral);
  border-radius: var(--dami-raio);
  background: var(--dami-blush-card);
  color: var(--dami-vinho-escuro);
  font: 400 14px/1.5 var(--dami-sans);
}
.dami-prod-origem {
  margin: 1.6em 0 -1.9em;
  font: 400 12px/1.4 var(--dami-sans);
  color: var(--dami-taupe);
}
.dami-prod-escolha {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--dami-papel);
  border: 1px solid var(--dami-hairline);
  border-radius: var(--dami-raio);
  font-family: var(--dami-sans);
}
.dami-prod-escolha--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* card antigo (texto fixo) cujo produto não tem foto no cadastro: some a metade
   vazia e o texto ocupa o card todo (o snippet 06 põe esta classe) */
.dami-produto--sem-midia.wp-block-media-text { grid-template-columns: 1fr !important; }
.dami-produto--sem-midia > .wp-block-media-text__media { display: none !important; }
.dami-produto--sem-midia > .wp-block-media-text__content { grid-column: 1 !important; grid-row: 1 !important; }

/* --- foto do card de produto preenchendo a metade esquerda (29/09/2026) ------
   Antes a foto ficava "contida" com 16px de respiro e sobrava branco em volta.
   Agora cobre a metade inteira, da borda ao pé do card, recortando as sobras
   (o produto fica no centro da foto, então o recorte pega só fundo). */
.dami-produto.wp-block-media-text > .wp-block-media-text__media {
  position: relative;
  min-height: 280px;
  padding: 0;
  overflow: hidden;
}
.dami-produto.wp-block-media-text > .wp-block-media-text__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-height: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 600px) {
  /* empilhado no celular: a foto ganha altura própria (quadrada) */
  .dami-produto.wp-block-media-text > .wp-block-media-text__media { min-height: 0; aspect-ratio: 1 / 1; }
}

/* --- "Sobre a autora" sem o link e com a foto na altura do texto (29/09/2026) --
   O link "Conheça a trajetória de Sandra Jang →" saiu do card (a assinatura do
   topo do artigo já leva ao site da Sandra). No computador a foto deixa de ser
   um retrato pequeno centralizado e ocupa a altura toda do card. */
.dami-sobre-autora .elementor-widget-button { display: none !important; }
@media (min-width: 768px) {
  .dami-sobre-autora { --align-items: stretch !important; align-items: stretch !important; }
  .dami-sobre-autora > .e-con:first-child {
    --padding-block-start: 0px; --padding-block-end: 0px;
    --justify-content: stretch;
    align-self: stretch;
  }
  .dami-sobre-autora > .e-con:first-child .elementor-widget-image {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
  .dami-sobre-autora > .e-con:first-child .elementor-widget-image img {
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center 20%;
  }
}

/* --- Perguntas frequentes com o mesmo respiro das caixas (29/09/2026) --------
   Nos artigos do editor clássico o conteúdo não tem o espaçamento automático
   entre blocos; sem isto o título "Perguntas frequentes" colava no parágrafo
   de cima. */
.dami-faq { margin: 2.4em 0 0; }
.dami-faq > h2 { margin-top: 0 !important; }

/* --- paginação « Anterior 1 2 3 Próxima » (Todos os artigos e categorias) ---
   29/09/2026: página /artigos/ com todos os artigos, paginada como o blog do
   Nanum Coreano. Números em pílula, a página atual marcada em blush. */
.dami-paginacao .elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
}
.dami-paginacao .page-numbers {
  min-width: 40px;
  padding: 8px 12px;
  border-radius: var(--dami-pilula);
  text-align: center;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease;
}
.dami-paginacao a.page-numbers:hover { background: var(--dami-blush); color: var(--dami-vinho); }
.dami-paginacao .page-numbers.current { background: var(--dami-blush); color: var(--dami-vinho); }
.dami-paginacao .page-numbers.prev,
.dami-paginacao .page-numbers.next { color: var(--dami-vinho); font-weight: 600; padding-inline: 16px; }
.dami-paginacao a.page-numbers:focus-visible { outline: 2px solid var(--dami-coral); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dami-paginacao .page-numbers { transition: none; } }