/* ════════════════════════════════════════════════════════════════════════
   COTESA — inline-refactor.css
   Classes que substituem os atributos style="" inline removidos das páginas
   públicas (CSP sem 'unsafe-inline' / style-src-attr 'none').
   Carregado SEMPRE depois de custom.css (para poder sobrepor quando preciso).
   ════════════════════════════════════════════════════════════════════════ */

/* ── GTM noscript (substitui style="display:none;visibility:hidden") ── */
.gtm-noscript-frame { display: none !important; visibility: hidden; }

/* ── Utilitários genéricos ── */
.is-hidden            { display: none !important; }
.is-default-cursor    { cursor: default; }
.pos-rel             { position: relative; }

/* ── Header / Footer (includes) ── */
.foot-phone-link     { color: #fff; }
.wpp-ic              { width: 28px; height: 28px; }

/* ── Lightbox (custom.css define .post-lightbox{display:flex}; o style inline
      "display:none" escondia por padrão — reproduzido aqui via classe) ── */
.post-lightbox            { display: none; }
.post-lightbox.is-open    { display: flex; }
body.no-scroll            { overflow: hidden; }

/* ── Vídeo YouTube injetado por js/main.js (substitui cssText inline) ── */
.video.is-playing  { position: relative; }
.video-embed       { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }

/* ════════════════════════════════════════════════════════════════════════
   blog-post.php / en/blog-post.php
   ════════════════════════════════════════════════════════════════════════ */
.pp-404            { text-align: center; padding: 140px 40px 120px; }
.pp-404-code       { font-size: 80px; font-weight: 800; color: var(--orange); line-height: 1; }
.pp-404-title      { font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--navy); margin: 16px 0 12px; }
.pp-404-text       { color: var(--muted); margin-bottom: 32px; }

.page-title-block .tag.post-meta {
  color: var(--orange-2);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3em;
  margin-bottom: 12px;
}
.page-title-block h1.post-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.1;
}
.post-cover-img    { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(20,28,60,.2); margin-bottom: 48px; width: 100%; }
.post-actions      { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; }
.btn-cotesa.btn-navy { background: var(--navy); }
.gallery-zoom-ic   { width: 20px; height: 20px; }

/* ════════════════════════════════════════════════════════════════════════
   Compartilhados (várias páginas)
   ════════════════════════════════════════════════════════════════════════ */
.z-2                              { z-index: 2; }
.section-eyebrow.is-centered      { justify-content: center; }
.mb-60                            { margin-bottom: 60px; }
/* ícones SVG inline reaproveitados */
.ic-16   { width: 16px; height: 16px; }
.ic-20   { width: 20px; height: 20px; }
.ic-56   { width: 56px; height: 56px; }
.svg-ic-orange { color: var(--orange); }

/* ════════════════════════════════════════════════════════════════════════
   index.php / en/index.php
   ════════════════════════════════════════════════════════════════════════ */
.hero-eyebrow-indent  { margin-left: 44px; }
.eyebrow-block        { display: block; margin-bottom: 14px; }
.video-label .orange-bar {
  background: var(--orange);
  display: inline-block;
  width: 26px; height: 2px;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════════════════
   governanca.php / en/governance.php
   ════════════════════════════════════════════════════════════════════════ */
.gov-ic        { width: 56px; height: 56px; color: var(--orange); margin: 0 auto 24px; }
.lead-cta      { max-width: 600px; margin: 0 auto 32px; }

/* ════════════════════════════════════════════════════════════════════════
   blog.php / en/blog.php
   ════════════════════════════════════════════════════════════════════════ */
.blog-empty    { text-align: center; padding: 80px 0; }
.s-lead-center { text-align: center; max-width: 500px; margin: 0 auto; }
.pagination-row { display: flex; justify-content: center; gap: 8px; margin-top: 60px; flex-wrap: wrap; }
.page-num {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; text-decoration: none;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
}
.page-num.is-current { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ════════════════════════════════════════════════════════════════════════
   a-cotesa.php / en/about.php
   ════════════════════════════════════════════════════════════════════════ */
.pos-rel-hidden                        { position: relative; overflow: hidden; }
.top-orange-bar                        { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--orange); }
.section-eyebrow.is-inline-centered    { display: inline-flex; justify-content: center; }
.section-eyebrow.is-white              { color: #fff; }
.section-eyebrow .bar.is-white         { background: #fff; }
.commits-title { background: transparent; padding: 0; font-weight: 500; font-size: 32px; text-transform: uppercase; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   certificacoes.php / en/certifications.php
   ════════════════════════════════════════════════════════════════════════ */
.s-lead-wide          { text-align: center; max-width: 780px; margin: 0 auto 32px; }
.iso-row.is-centered  { justify-content: center; }
.border-top-orange    { border-top: 4px solid var(--orange); }
.img-rounded-shadow   { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(20,28,60,.2); }

/* ════════════════════════════════════════════════════════════════════════
   Espaçamentos utilitários (valores px específicos do projeto)
   ════════════════════════════════════════════════════════════════════════ */
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }
.mt-48 { margin-top: 48px; }
.text-navy { color: var(--navy); }
/* Aviso "post só em PT" (en/blog-post.php) */
.translation-note { background: #fff8e1; border-left: 3px solid #f59e0b; padding: 10px 16px; border-radius: 6px; font-size: 12px; color: #92400e; margin-bottom: 28px; }

/* ════════════════════════════════════════════════════════════════════════
   areas-de-atuacao.php / en/service-areas.php  +  fornecedores.php / en/suppliers.php
   ════════════════════════════════════════════════════════════════════════ */
.s-lead-700   { text-align: center; max-width: 700px; margin: 0 auto; }
.lead-narrow  { max-width: 560px; margin: 0 auto 32px; }
.list-plain   { padding-left: 0; list-style: none; }
.feat-li      { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0;  border-bottom: 1px solid var(--line); }
.feat-row     { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.feat-diamond { width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); flex-shrink: 0; margin-top: 7px; display: block; }
.feat-diamond.is-navy { background: var(--navy); }
.feat-text    { font-size: 14px; color: #5b6177; }
.cta-grey     { padding: 70px 0; background: #4b5563; }
.s-title.s-title-cta  { color: #fff; font-size: 38px; }
.req-note     { margin-top: 16px; font-size: 13px; color: var(--muted); }
.req-card.border-top-navy { border-top-color: var(--navy); }

/* ════════════════════════════════════════════════════════════════════════
   backoffice.php / en/backoffice.php
   ════════════════════════════════════════════════════════════════════════ */
.req-card.p-24 { padding: 24px; }
.h3-benef      { font-size: 16px; margin-bottom: 8px; }
.s-lead-sm     { margin: 0; font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   contato.php / en/contact.php
   ════════════════════════════════════════════════════════════════════════ */
.s-title.s-title-mb32 { margin-bottom: 32px; }
.req-star      { color: var(--orange); }
.mt-8          { margin-top: 8px; }
.mt-10         { margin-top: 10px; }
.wa-check-label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ic-16-shrink  { width: 16px; height: 16px; flex-shrink: 0; }
.ic-22-shrink  { width: 22px; height: 22px; flex-shrink: 0; }
.link-white    { color: #fff; }
.value.value-sm { font-size: 14px; line-height: 1.65; }
.contact-map-frame { width: 100%; height: 420px; border: 0; display: block; }
.fs-13 { font-size: 13px; }