/* Mr.DBA — responsive overrides.
   Os estilos do site são inline; aqui só entram media queries mobile
   (que CSS inline não consegue expressar), com !important para vencer
   a especificidade dos style="" . */

@media (max-width: 820px) {

  /* ---- Grids viram 1 coluna ---- */
  #dc-root section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #dc-root footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ---- Tipografia reduz ---- */
  #dc-root h1 { font-size: 34px !important; line-height: 1.15 !important; }
  #dc-root h2 { font-size: 25px !important; line-height: 1.25 !important; }
  #dc-root blockquote { font-size: 19px !important; line-height: 1.5 !important; }
  #dc-root section p[style*="font-size:19px"],
  #dc-root section p[style*="font-size:18.5px"] { font-size: 16.5px !important; }
  #dc-root span[style*="font-size:72px"] { font-size: 44px !important; }

  /* ---- Respiro lateral e vertical ---- */
  #dc-root .mx { padding-left: 20px !important; padding-right: 20px !important; }
  #dc-root .mx[style*="padding-top:1"],
  #dc-root .mx[style*="padding-top:8"],
  #dc-root .mx[style*="padding-top:9"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---- Cartões CTA grandes ---- */
  #dc-root div[style*="border-radius:28px"][style*="padding:6"] {
    padding: 40px 24px !important;
  }
  #dc-root div[style*="padding:40px 44px"] { padding: 28px 22px !important; }

  /* ---- Foto do Marcio (seção "quem cuida") ---- */
  #dc-root div[style*="min-height:440px"],
  #dc-root div[style*="min-height:430px"] { min-height: 320px !important; }
  #dc-root img[alt="Marcio Mandarino"] { height: 300px !important; }

  /* ---- Thumbnail do VSL no mobile ----
     A regra acima também acertava a foto DENTRO do <button> (VSL), forçando
     300px num container de ~180px e cortando a cabeça. Como o container é
     baixo, não cabe play centralizado + legenda de 3 linhas: foto inteira,
     play no centro e a legenda (redundante com o H1 logo acima) escondida.
     Seletores ESTRUTURAIS (o runtime re-serializa o style inline com espaços,
     então [style*="width:78px"] não casa; posição no <button> casa). */

  /* foto = height 100% p/ caber inteira (cabeça visível) */
  #dc-root button img[alt="Marcio Mandarino"] { height: 100% !important; }

  /* badge "3 min" = 2º <div> filho (após o círculo decorativo).
     Vai pro canto sup. ESQUERDO — o sup. direito agora é a cabeça do Marcio. */
  #dc-root button > div:nth-of-type(2) {
    right: auto !important;
    left: 14px !important;
    top: 14px !important;
  }

  /* play = único <span> filho direto do <button> → centraliza, sobe um pouco e reduz */
  #dc-root button > span {
    left: 50% !important;
    top: 34% !important;
    transform: translate(-50%, -50%) !important;
    width: 56px !important;
    height: 56px !important;
  }

  /* legenda = 3º <div> filho → mantém no rodapé-esq., compacta p/ caber */
  #dc-root button > div:nth-of-type(3) {
    max-width: 62% !important;
    padding: 14px 16px !important;
  }
  #dc-root button > div:nth-of-type(3) > div {
    font-size: 13px !important;
    margin-top: 6px !important;
    line-height: 1.25 !important;
  }

  /* ---- Vídeo/hero flex rows empilham ---- */
  #dc-root section div[style*="display:flex"][style*="gap:48px"],
  #dc-root section div[style*="display:flex"][style*="gap:56px"] {
    flex-direction: column !important;
  }
}