/* ═══ harmonia-mobile.css — padrão visual do celular (27/09/2026) ═══
   Resultado da análise de UI do mobile (390 px) em todas as páginas. Só vale até 768 px.
   Os seletores começam com "html:root body" para vencer as regras antigas sem depender da ordem de carga.
   1. margem lateral única de 22 px (antes 18, 20, 26, 28, 44 e 46 px conforme a seção)
   2. escala tipográfica: título de topo das páginas internas 36 px · título de seção 30 px (antes 24 a 48 px)
   3. rótulo de seção ("eyebrow"): 13 px, filete de 52 px à esquerda, mesma cor em todo o site
   4. cabeçalhos de seção alinhados à esquerda, como na home (antes havia seções centralizadas no meio)
   5. botões de chamada: verde cheio nas seções claras, dourado cheio nas escuras, sempre na largura toda
   6. seletor de idioma rola junto com o topo (fixo, ele passava por cima dos títulos)
   7. ajustes pontuais: card de abertura da história, vãos dos cards do blog, área de toque dos pontos */
@media (max-width:768px){

  /* 1 ── margem lateral 22 px */
  html:root body :is(.acblog-hero-inner,.acsp-hero-inner,.actc-hero-inner,.acpp-hero-inner,.actc-intro-inner,.acvid-inner,.acpp-content-inner){padding-left:22px !important;padding-right:22px !important}
  html:root body .acexp-inner{padding-left:0 !important;padding-right:0 !important;margin-left:-2px !important;margin-right:-2px !important}
  html:root body .acbc-inner{padding-left:0 !important;padding-right:0 !important}

  /* 2 ── escala tipográfica */
  html:root body :is(.acblog-title,.acsp-title,.actc-hero-title,.acpp-hero-title){font-size:36px !important;line-height:1.06 !important;letter-spacing:-.01em !important}
  html:root body :is(.acpf-title,.acauth-title,.acvar-title,.ac6k-title,.acvid-title,.acsol-title,.acexp-title,.ac4-title,.acbc-title,.acfaq-title,.acblog-sec-title,.acblog-ponte-tit,.acbf-title,.acvg-title,.acsp-guias-tit,.acspf-title,.actc-intro-title,.actc-sec-tit,.acpp-section-title){font-size:30px !important;line-height:1.12 !important}

  /* regras antigas mais específicas (com id ou com a seção-mãe) */
  html:root body #ac6kWrap .ac6k-title,html:root body .ac4 .ac4-left .ac4-title,html:root body .ac4 .ac4-title{font-size:30px !important;line-height:1.12 !important}
  html:root body .acpp-hero .acpp-hero-title{font-size:36px !important;line-height:1.06 !important}

  /* 3 ── rótulos de seção */
  html:root body :is(.acauth-tag,.acvg-tag,.acspf-tag,.acbf-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag,.acfaq-tag){font-size:13px !important;letter-spacing:.18em !important}
  html:root body .acfaq-tag{display:inline-flex !important;align-items:center !important;gap:16px !important;margin:0 0 22px !important;color:#a48334 !important;-webkit-text-fill-color:#a48334 !important}
  html:root body .acfaq-tag::before{content:'';width:52px;height:2px;flex:none;background:linear-gradient(90deg,#e7c785,#cfa048)}
  html:root body .acfaq-line{display:none !important}

  /* 4 ── cabeçalhos à esquerda */
  html:root body :has(> :is(.acvg-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag)){align-items:flex-start !important;text-align:left !important}
  html:root body :is(.acvg-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag){justify-content:flex-start !important;margin-left:0 !important;margin-right:0 !important;align-self:flex-start !important}
  html:root body :is(.acvg-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag)::after{display:none !important}
  html:root body :is(.acvg-tag,.acsp-guias-tag,.actc-sec-tag,.acvid-tag)::before{width:52px !important}
  html:root body :is(.acvg-title,.acvg-desc,.acsp-guias-tit,.acsp-guias-sub,.actc-sec-tit,.actc-sec-sub,.acvid-title,.acvid-sub){text-align:left !important;margin-left:0 !important;margin-right:0 !important;align-self:stretch !important}

  /* 5 ── botões de chamada */
  html:root body :is(.acpf-cta,.acstat-cta,.acbc-btn){display:flex !important;align-items:center !important;justify-content:center !important;gap:0 !important;width:100% !important;max-width:none !important;height:52px !important;margin-left:0 !important;margin-right:0 !important;padding:0 24px !important;border:0 !important;border-radius:999px !important;
    background:#0a4323 !important;color:#F0DFB9 !important;-webkit-text-fill-color:#F0DFB9 !important;font-family:'Crimson Pro',Georgia,serif !important;font-size:18px !important;font-weight:600 !important;letter-spacing:.4px !important;text-decoration:none !important;box-shadow:0 10px 22px -12px rgba(10,67,35,.55) !important}
  html:root body :is(.acpf-cta,.acstat-cta) *{color:#F0DFB9 !important;-webkit-text-fill-color:#F0DFB9 !important;font:inherit !important;letter-spacing:inherit !important}
  html:root body :is(.acpf-cta-icon,.acstat-cta-icon){display:none !important}
  html:root body :is(.acvar-cta,.ac6k-cta,.acvid-cta){display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;max-width:none !important;height:52px !important;margin-left:0 !important;margin-right:0 !important;padding:0 24px !important;border:0 !important;border-radius:999px !important;
    background:linear-gradient(180deg,#e7c887,#cfa04a) !important;color:#1a4a28 !important;-webkit-text-fill-color:#1a4a28 !important;box-shadow:0 12px 26px -14px rgba(0,0,0,.6) !important}
  html:root body #ac6kWrap .ac6k-cta{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;max-width:none !important;height:52px !important;margin-left:0 !important;margin-right:0 !important;padding:0 24px !important;border:0 !important;border-radius:999px !important;
    background:linear-gradient(180deg,#e7c887,#cfa04a) !important;color:#1a4a28 !important;-webkit-text-fill-color:#1a4a28 !important;box-shadow:0 12px 26px -14px rgba(0,0,0,.6) !important}
  html:root body :is(.acvar-cta,.ac6k-cta,.acvid-cta) *{color:#1a4a28 !important;-webkit-text-fill-color:#1a4a28 !important}
  html:root body :is(.acvar-cta,.ac6k-cta,.acvid-cta)::before,html:root body :is(.acvar-cta,.ac6k-cta,.acvid-cta)::after{display:none !important}

  /* 6 ── seletor de idioma: fica no topo da página, não flutua sobre o conteúdo */
  html:root body .ac-lang{position:absolute !important}

  /* 7 ── ajustes pontuais */
  html:root body #ah-section .ah-intro{justify-content:center !important}
  html:root body #ah-section .ah-intro .ah-intro-left{flex-grow:0 !important}
  html:root body .elementor-post__thumbnail__link{margin-bottom:0 !important}
  html:root body .elementor-post__text{margin-top:0 !important;padding-top:24px !important}
  html:root body .elementor-post__read-more{margin-bottom:0 !important}
  html:root body .elementor-post__read-more-wrapper{padding-top:14px !important}
  html:root body :is(.ac-dots,#acauthDots) > *{position:relative}
  html:root body :is(.ac-dots,#acauthDots) > *::after{content:'';position:absolute;left:-7px;right:-7px;top:-16px;bottom:-16px}
}

/* 27/09 ── sombras e cores no celular */
@media (max-width:768px){
  /* 8 ── carrosséis: a rolagem lateral corta tudo o que passa da altura da faixa. Antes o respiro era 6 px em cima e
     10 px embaixo para sombras de até 48 px (sombra cortada seca embaixo dos cards). Mais respiro por dentro,
     compensado por margem negativa: o espaçamento da página não muda. */
  html:root body :is(.ac-carrossel,.acauth-grid,#ah-inner){padding-top:22px !important;padding-bottom:42px !important;margin-top:-16px !important;margin-bottom:-32px !important}
  /* sombras dos cards mais curtas e suaves no celular: cabem na faixa e não "sujam" o card vizinho */
  html:root body :is(.ac-carrossel,.acauth-grid) > *:not(.actc-pillar):not(.acsp-passo){box-shadow:0 1px 2px rgba(3,10,6,.05),0 12px 26px -14px rgba(10,67,35,.28) !important}
  html:root body #ah-section:not(.ah-enhanced) #ah-inner .ah-pcard,html:root body #ah-inner .ah-pcard{box-shadow:0 14px 30px -18px rgba(10,67,35,.4) !important}
  html:root body .acsol-card .acsol-card-img{box-shadow:none !important}

  /* 9 ── cores: textos pequenos claros demais sobre branco/creme (contraste 2,7 a 4,3; mínimo de leitura 4,5) */
  html:root body :is(.ac4-lgpd,.acpp-card-text,.acsp-atalho-txt span,.acsp-passo p,.actc-area p,.actc-pillar-desc,.elementor-post__excerpt p,.ah-isub){color:rgba(10,67,35,.78) !important;-webkit-text-fill-color:rgba(10,67,35,.78) !important}
  html:root body :is(.ah-intro-note,.acblog-temas-lbl){color:rgba(10,67,35,.74) !important;-webkit-text-fill-color:rgba(10,67,35,.74) !important}
  html:root body :is(.acpf-desc,.acexp-desc,.acsol-subtitle,.acsol-card-desc){color:rgba(10,67,35,.84) !important;-webkit-text-fill-color:rgba(10,67,35,.84) !important}
  /* dourado em texto pequeno (Leia mais, números das áreas) e o "a sua demanda." sobre o creme escuro: um tom mais fechado */
  html:root body :is(.elementor-post__read-more,.actc-area-num){color:#86691f !important;-webkit-text-fill-color:#86691f !important}
  html:root body #ac6kWrap .ac6k-cta,html:root body #ac6kWrap .ac6k-cta *{color:#1a4a28 !important;-webkit-text-fill-color:#1a4a28 !important}
  html:root body .acsol-wrap .acsol-title em,html:root body .acsol-title em{color:#8f7126 !important;-webkit-text-fill-color:#8f7126 !important}
  /* história: as regras antigas usam o id da seção */
  html:root body #ah-section:not(.ah-enhanced) #ah-inner,html:root body #ah-section #ah-inner{padding-top:22px !important;padding-bottom:42px !important;margin-top:-16px !important;margin-bottom:-32px !important}
  html:root body #ah-section .ah-isub{color:rgba(10,67,35,.78) !important;-webkit-text-fill-color:rgba(10,67,35,.78) !important}
  html:root body #ah-section .ah-intro-note{color:rgba(10,67,35,.74) !important;-webkit-text-fill-color:rgba(10,67,35,.74) !important}
}

/* texto da página "Como é feito seu rótulo" estava em preto puro (fora da paleta) — vale para todas as telas */
html:root body .elementor-804 :is(li,p){color:rgba(10,67,35,.84)}