/* ==========================================================================
   Ponte entre os blocos do Gutenberg e o CSS da landing.

   O arquivo landing.css é o mesmo do site estático, já testado em 13
   tamanhos de tela. Aqui só traduzimos as diferenças: os invólucros que o
   editor de blocos acrescenta, e os ícones que antes eram SVG no HTML e
   agora vêm por CSS — para a lista e os cartões virarem blocos editáveis.
   ========================================================================== */

/* --- o editor não deve empurrar as seções ---
   O Gutenberg injeta margem entre irmãos com a variável --wp--style--block-gap.
   Zeramos a variável em vez de zerar as margens: assim as margens do
   landing.css (por exemplo .hero .lead{margin-top:18px}) continuam valendo. */
.marulho-main .wp-block-group{--wp--style--block-gap:0}
.marulho-main .wp-block-image{margin:0}
.marulho-main figure{margin:0}
.pagina-landing .wp-site-blocks > *{margin-block-start:0}
.marulho-main .wp-block-buttons{gap:12px}

/* --- respiros nomeados, no lugar dos style= do HTML antigo --- */
.respiro-sm{margin-top:12px}
.respiro-md{margin-top:18px}
.respiro-lg{margin-top:30px}
.respiro-xl{margin-top:44px}

/* --- botões: o bloco nativo com a aparência do .btn --- */
.marulho-main .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:var(--r);
  font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap;
  background:var(--accent); color:var(--accent-ink); border:none;
  transition:background .15s ease-out, border-color .15s ease-out, transform .15s ease-out;
}
.marulho-main .wp-block-button__link:hover{background:var(--accent-hover)}
.marulho-main .wp-block-button__link:active{transform:translateY(1px)}
.marulho-main .wp-block-button.is-style-outline .wp-block-button__link{
  background:var(--surface); color:var(--text); border:1px solid var(--line-strong);
}
.marulho-main .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--surface); border-color:var(--text-3);
}
.marulho-main .btn-grande .wp-block-button__link{height:54px; padding:0 28px; font-size:16px}
.marulho-main .btn-inverso .wp-block-button__link{background:#FAFAF8; color:var(--ink-950)}
.marulho-main .btn-inverso .wp-block-button__link:hover{background:#fff}

/* --- lista com check: o ícone saiu do HTML e virou CSS --- */
.list li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px 16px;
}
.ink .list li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* --- cartões de funcionalidade: ícone por classe --- */
.card::before{
  content:""; display:block; width:38px; height:38px; border-radius:var(--r-sm);
  background-color:var(--accent-soft); background-repeat:no-repeat;
  background-position:center; background-size:19px 19px; margin-bottom:16px;
}
.card.ico-funil::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='18' rx='1'/%3E%3Crect x='10' y='3' width='6' height='12' rx='1'/%3E%3Crect x='17' y='3' width='4' height='8' rx='1'/%3E%3C/svg%3E")}
.card.ico-rodizio::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 18H3'/%3E%3C/svg%3E")}
.card.ico-regras::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 6h3a3 3 0 013 3v1'/%3E%3Cpath d='M10 18H7a3 3 0 01-3-3v-1'/%3E%3C/svg%3E")}
.card.ico-campanhas::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E")}
.card.ico-webhook::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007.5.5l3-3a5 5 0 00-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 00-7.5-.5l-3 3a5 5 0 007 7l1.7-1.7'/%3E%3C/svg%3E")}
.card.ico-conexao::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%230A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11 11 13 15 9'/%3E%3C/svg%3E")}
.card.destaque{border-color:var(--accent)}
.card h3{font-size:17.5px; font-weight:700; margin-bottom:8px}

/* --- seta do fluxo de regras --- */
.flow .seta{
  flex:none; width:14px; height:14px; display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2374747C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:14px 14px;
}

/* --- textos que antes eram style= no HTML --- */
.panel-titulo{
  font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3);
}
.frase-forte{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--text)}
.reforco{font-weight:600; color:var(--text)}
.h2-curto{max-width:26ch}
.h2-planos{max-width:24ch}
.pull-centro{margin-inline:auto; max-width:34ch}
.finale-sub{margin:20px auto 0; max-width:46ch; font-size:16px}
.finale-cta{justify-content:center; margin-top:34px}

/* --- cartões de regra: parágrafos no lugar de b/span --- */
.rule-card .rule-t{display:block; font-size:13.5px; font-weight:700; margin-bottom:3px; color:var(--text)}
.rule-card .rule-x{font-size:13px; color:var(--text-3)}

/* --- planos: o botão do bloco encosta no rodapé do cartão --- */
.plan .wp-block-buttons{margin-top:auto; width:100%}
.plan .wp-block-button{width:100%}
.plan .wp-block-button__link{width:100%}
.plan .badge{
  position:absolute; top:-11px; left:24px; width:max-content;
}
.secao-funcionalidades{background:var(--surface-2)}

/* --- logo do rodapé dentro da grade, não numa linha própria --- */
.marulho-rodape .foot-brand .wp-block-site-logo,
.marulho-rodape .foot-brand .marulho-logo,
.marulho-rodape .foot-brand p,
.marulho-rodape .foot-brand img{margin:0}
.marulho-rodape .foot-brand .marulho-logo a{display:inline-block; line-height:0}
.marulho-rodape .foot-brand img{height:26px; width:auto; max-width:none; filter:var(--logo-filter)}
.marulho-rodape .foot-top > .wp-block-group{margin:0}

/* --- logo do site no lugar do <a class="brand"> --- */
.marulho-hdr .wp-block-site-logo{flex:none; margin-right:auto}
.marulho-hdr .wp-block-site-logo img{height:26px; width:auto; filter:var(--logo-filter)}
.marulho-hdr .wp-block-site-logo a{display:block; line-height:0}

/* --- o editor do WordPress precisa ver as seções reveladas --- */
.editor-styles-wrapper .rv{opacity:1; transform:none}
.editor-styles-wrapper .proof-track{animation:none}

/* --- blog e páginas internas herdam a mesma linguagem --- */
.card-post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; height:100%;
}
.card-post img{border-radius:var(--r); margin-bottom:14px}
.card-post h3{font-size:18px; margin-bottom:8px}
.artigo p{margin-bottom:18px; font-size:17px; line-height:1.7}
.artigo h2{margin:34px 0 14px}
.artigo h3{margin:26px 0 10px}

/* --- cor do texto corrido fora da landing ---------------------------------
   Isto morava no theme.json, em styles.blocks.core/paragraph. De lá o
   WordPress emitia ":root :where(p){color:...}" com um hex FIXO, e isso
   causava dois estragos:

   1. No tema escuro o hex não mudava: parágrafo cinza-escuro sobre fundo
      escuro.
   2. A regra quebrava a herança de cor. O preço dos planos é
      <p class="price"> sem cor própria — ele herdava a tinta do cartão. Com
      a regra do WordPress no meio, o número de R$ 997 saía cinza em vez de
      acompanhar o tema.

   Aqui a cor volta a ser variável do tema e só alcança o texto corrido do
   blog e das páginas comuns. A landing volta a herdar, como no site
   estático. */
.artigo p,
.artigo li,
main:not(.marulho-main) .wp-block-post-content p,
main:not(.marulho-main) .wp-block-post-content li{color:var(--text-2)}