/*
Theme Name: Carrear
Theme URI: https://carrear.com.br
Description: Tema do site da Carrear — Logística para Marcas. Portfólio com cases, soluções e páginas institucionais. Os cases saem da tabela em inc/cases.php.
Author: Imagine.IDE
Author URI: https://imagineide.com.br
Version: 1.6.8
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietário
Text Domain: carrear
*/
/* =========================================================
   CARREAR — Logística para Marcas
   Design system claro: branco/gelo, cinza 9A9A9A e amarelo da marca
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* marca */
  --brand:#FCD040;
  --brand-2:#EECC6D;
  --brand-ink:#8A6B00;      /* amarelo escurecido, para texto sobre claro */
  --graphite:#343432;
  --gray:#9A9A9A;
  --bone:#F5F4F2;

  /* superfícies */
  --bg:#FFFFFF;
  --bg-alt:#F5F4F2;
  --surface:#FFFFFF;
  --line:#E6E4E0;
  --line-strong:#CFCCC6;

  /* texto */
  --tx:#2B2B29;
  --tx-dim:#6A6965;
  --tx-mute:#9A9A9A;

  /* tipografia */
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --label:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* medidas */
  --pad:clamp(18px,4vw,56px);
  --max:1300px;
  --rad:10px;
  --rad-lg:14px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:76px;
  --rail-gap:18px;    /* espaço entre os cards do trilho */
  --rail-peek:54px;   /* pedaço do 5º card que fica espiando */
  --shadow:0 1px 2px rgba(43,43,41,.05), 0 8px 24px -12px rgba(43,43,41,.12);
  --shadow-h:0 2px 4px rgba(43,43,41,.06), 0 16px 38px -14px rgba(43,43,41,.20);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure{margin:0}
::selection{background:var(--brand);color:#2B2B29}
:focus-visible{outline:2px solid var(--graphite);outline-offset:3px;border-radius:3px}

/* ---------- 3. Tipografia ---------- */
h1,.d-1{
  font-size:clamp(1.95rem,3.9vw,3.05rem);
  font-weight:700;line-height:1.1;letter-spacing:-.02em;
  text-wrap:balance;
}
.d-2{
  font-size:clamp(1.5rem,2.5vw,2.15rem);
  font-weight:700;line-height:1.15;letter-spacing:-.018em;text-wrap:balance;
}
.d-3{
  font-size:clamp(1.22rem,1.7vw,1.55rem);
  font-weight:700;line-height:1.25;letter-spacing:-.014em;text-wrap:balance;
}
.d-4{
  font-size:1.06rem;font-weight:700;line-height:1.35;letter-spacing:-.008em;
}

.eyebrow{
  font-family:var(--label);
  font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--brand);flex:none;border-radius:2px}
.eyebrow.no-rule::before{display:none}

.lead{font-size:1.02rem;line-height:1.7;color:var(--tx-dim);max-width:64ch}
.muted{color:var(--tx-dim)}
.mono{font-family:var(--label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mute)}
strong,b{font-weight:700;color:var(--tx)}
p{font-size:1rem}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(54px,6.5vw,92px)}
.section--tight{padding-block:clamp(40px,4.5vw,62px)}
.section--alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column}
.gap-s{gap:12px}.gap-m{gap:18px}.gap-l{gap:32px}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* cabeçalho de seção padrão */
.shead{margin-bottom:clamp(26px,3vw,42px)}
.shead h2{margin-top:14px}
.shead .lead{margin-top:14px}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:12px 22px;border-radius:6px;
  background:var(--brand);color:#2B2B29;
  font-weight:600;font-size:.94rem;
  border:1px solid var(--brand);
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}
.btn:hover{background:#F0BE22;border-color:#F0BE22;box-shadow:var(--shadow)}
.btn .arw{transition:transform .3s var(--ease-out)}
.btn:hover .arw{transform:translateX(3px)}

.btn--dark{background:var(--graphite);border-color:var(--graphite);color:#fff}
.btn--dark:hover{background:#1F1F1E;border-color:#1F1F1E}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--tx)}
.btn--ghost:hover{background:var(--bg-alt);border-color:var(--graphite);box-shadow:none}
.btn--sm{padding:9px 16px;font-size:.88rem}
.btn--lg{padding:14px 26px;font-size:.98rem}

/* Botão de WhatsApp: o glifo do aplicativo na cor dele, que é o que faz
   o botão ser reconhecido de longe. O tamanho acompanha o botão de base —
   só o grande (btn--lg) é que cresce um pouco mais que os irmãos. */
.btn--wa{gap:.6em}
.btn--wa .wa-ico{width:1.3em;height:1.3em;flex:none;color:#1FAF54}
.btn--wa:hover .wa-ico{color:#189A48}
.btn--lg.btn--wa{padding:16px 30px;font-size:1.04rem}

.link{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;font-size:.95rem;
  color:var(--tx);
  border-bottom:2px solid var(--brand);
  padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.link--brand{color:var(--tx)}

/* ---------- 6. Header ---------- */
.header{
  position:sticky;top:0;z-index:90;
  height:var(--header-h);
  display:flex;align-items:center;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.header.is-solid{box-shadow:var(--shadow)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:28px;width:auto}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;padding:8px 13px;border-radius:5px;
  font-size:.94rem;font-weight:500;color:var(--tx-dim);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav a:hover{color:var(--tx);background:var(--bg-alt)}
.nav a[aria-current="page"]{color:var(--tx);font-weight:600}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--brand);border-radius:2px;
}
.header__cta{display:flex;align-items:center;gap:10px;flex:none}

/* Área do Cliente: botão secundário, visível em todas as larguras */
.header__cta .portal{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 13px;border-radius:6px;
  border:1px solid var(--line-strong);
  font-size:.86rem;font-weight:600;color:var(--tx);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.header__cta .portal:hover{color:var(--tx);background:var(--bg-alt);border-color:var(--tx)}
.header__cta .portal .ext{flex:none;opacity:.65}
.menu__links .ext{margin-left:auto;opacity:.5}

.burger{
  display:none;width:42px;height:42px;border-radius:6px;
  border:1px solid var(--line-strong);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:17px;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:var(--header-h) 0 0;z-index:89;
  background:var(--bg);
  padding:8px var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateX(100%);
  transition:transform .38s var(--ease-out);
  overflow-y:auto;
}
.menu.is-open{transform:none}
.menu__links{display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:center;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:1.1rem;font-weight:600;
}
.menu__foot{display:flex;flex-direction:column;gap:6px;padding-top:24px;font-size:.92rem;color:var(--tx-dim)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  /* alinha o texto com o container, mas deixa a foto sangrar até a borda direita */
  padding-left:calc((100% - min(100%, var(--max))) / 2 + var(--pad));
}
.hero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch;
  min-height:min(580px,76vh);
}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(44px,5.5vw,76px);
  padding-right:clamp(24px,4vw,60px);
}
.hero h1{margin:16px 0 18px;max-width:16ch}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%,var(--brand) 62%);
  padding:0 .06em;
}
.hero__lead{max-width:50ch;margin-bottom:26px}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3.5vw,42px)}
.hero__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  padding-top:22px;border-top:1px solid var(--line-strong);
}
.hero__meta .k{
  display:block;font-family:var(--label);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-mute);margin-bottom:4px;
}
.hero__meta .v{display:block;font-size:.92rem;color:var(--tx);font-weight:500;line-height:1.45}

/* painel de imagem — sangra até a borda direita da tela */
.hero__media{position:relative;overflow:hidden;background:var(--graphite)}
.hero__media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s var(--ease)}
.hero__media figure.is-on{opacity:1}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__dots{position:absolute;left:22px;bottom:20px;z-index:3;display:flex;gap:6px}
.hero__dots button{
  width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);
  position:relative;overflow:hidden;
}
.hero__dots button span{position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left}
.hero__dots button.is-on span{animation:dot 6s linear forwards}
@keyframes dot{to{transform:scaleX(1)}}
/* painel com muitas fotos: traços mais curtos, quebrando linha se faltar espaço */
.hero__dots--many{right:22px;gap:5px;flex-wrap:wrap}
.hero__dots--many button{width:20px}

/* ---------- 8. Marquee de marcas ---------- */
.marquee{
  position:relative;overflow:hidden;
  padding-block:20px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marq 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee__row{display:flex;align-items:center}
.marquee__row li{display:flex;align-items:center;gap:clamp(24px,3vw,44px);padding-inline:clamp(12px,1.6vw,22px)}
.marquee__row .nm{
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  color:var(--tx-mute);white-space:nowrap;transition:color .3s var(--ease);
}
.marquee__row li:hover .nm{color:var(--tx)}
.marquee__row .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}

.marquee__row .lg{
  height:clamp(22px,2.4vw,32px);width:auto;flex:none;
  filter:grayscale(1);opacity:.62;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.marquee__row li:hover .lg{filter:none;opacity:1}
.marcas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
.marca{
  background:var(--surface);padding:clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column;gap:8px;min-height:118px;justify-content:center;
}
.marca .lg{height:clamp(26px,2.6vw,36px);width:auto;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.72}
.marca:hover .lg{filter:none;opacity:1}
.marca .nome{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.marca .cat{font-family:var(--label);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mute)}
.marca--cta{background:var(--brand)}
.marca--cta .nome{color:#2B2B29}
.marca--cta .cat{color:rgba(43,43,41,.7)}
/* ---------- 9. Cards ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  padding:clamp(20px,2vw,28px);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card__ico{
  width:42px;height:42px;border-radius:9px;flex:none;
  display:grid;place-items:center;margin-bottom:18px;
  background:var(--brand);color:#2B2B29;
}
.card__ico svg{width:21px;height:21px}
.card h3{margin-bottom:8px}
.card p{color:var(--tx-dim);font-size:.95rem}
.card__list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.card__list li{display:flex;gap:9px;font-size:.9rem;color:var(--tx-dim);line-height:1.5}
.card__list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none;margin-top:.5em}

/* ---------- 10. Números ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;
}
.stat{background:var(--surface);padding:clamp(22px,2.4vw,32px)}
.stat__n{
  font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--tx);
  display:flex;align-items:baseline;gap:.04em;
}
.stat__n .sfx{font-size:.55em;color:var(--brand-ink)}
.stat__l{margin-top:10px;font-size:.88rem;color:var(--tx-dim);max-width:24ch}

/* ---------- 11. Cases — trilho horizontal ----------
   O trilho já prendeu a rolagem da página (sticky + scroll-jack): para
   passar dele era obrigatório atravessar os cases. Agora é uma faixa
   normal, que anda sozinha pelas setas ou pelo arrasto. */
.rail{position:relative;background:var(--bg-alt);border-block:1px solid var(--line)}
.rail__sticky{padding-block:clamp(54px,6.5vw,92px)}
.rail__head{
  padding-inline:var(--pad);margin-bottom:clamp(16px,2.2vw,26px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.rail__head h2{max-width:22ch}

.rail__viewport{position:relative}
.rail__track{
  display:flex;gap:var(--rail-gap);padding-inline:var(--pad);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  /* sem isto o primeiro card encaixa DEPOIS do respiro da esquerda: a
     pista nunca descansa no zero e a seta de voltar fica acesa no começo */
  scroll-padding-inline:var(--pad);
  scrollbar-width:none;cursor:grab;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail__bar{margin:clamp(16px,2.2vw,26px) var(--pad) 0;height:3px;background:var(--line-strong);border-radius:2px;position:relative}
.rail__bar i{position:absolute;left:0;top:0;height:100%;width:var(--p,0%);background:var(--brand);border-radius:2px;transition:width .15s linear}

/* ---------- 11b. Setas das faixas que andam para o lado ----------
   Uma peça só, usada pelo trilho de cases e pela faixa de bastidores.
   Amarelo cheio, grande e por cima da faixa: quem chega na seção tem de
   ver na hora que dá para ir para o lado. */
.gnav{
  position:absolute;top:50%;z-index:4;
  width:clamp(44px,4vw,54px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:#2B2B29;
  border:1px solid rgba(43,43,41,.14);
  box-shadow:var(--shadow-h);
  transform:translateY(-50%);
  transition:opacity .25s var(--ease),transform .25s var(--ease-out),background .25s var(--ease);
}
.gnav:hover{background:#F5CE34;transform:translateY(-50%) scale(1.07)}
.gnav:active{transform:translateY(-50%) scale(.97)}
.gnav svg{width:22px;height:22px}
.gnav--prev{left:max(8px, calc(var(--pad) - 24px))}
.gnav--next{right:max(8px, calc(var(--pad) - 24px))}
.gnav[disabled]{opacity:0;pointer-events:none}
/* sem JS a seta não faz nada — melhor não prometer */
.no-js .gnav{display:none}

.case{
  position:relative;flex:none;
  /* largura: exatamente 4 cards visíveis + um pedaço do quinto espiando.
     A altura não depende mais da tela — o trilho deixou de ocupar a
     janela inteira, então ela é uma medida própria. */
  width:calc((100% + var(--pad) - 4 * var(--rail-gap) - var(--rail-peek)) / 4);
  height:clamp(280px, 30vw, 400px);
  scroll-snap-align:start;
  border-radius:var(--rad-lg);
  overflow:hidden;background:var(--graphite);
  border:1px solid var(--line);
  isolation:isolate;
}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.case:hover img{transform:scale(1.05)}
.case::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,28,26,0) 38%,rgba(28,28,26,.55) 66%,rgba(28,28,26,.92) 100%);
}
.case__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.5vw,20px);color:#fff}
.case__tag{
  display:inline-flex;align-items:center;margin-bottom:8px;
  padding:4px 9px;border-radius:4px;
  background:var(--brand);color:#2B2B29;
  font-family:var(--label);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
}
.case h3{font-size:1.12rem;font-weight:700;letter-spacing:-.012em;line-height:1.25;margin-bottom:4px;color:#fff}
.case p{font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.82);max-width:36ch}
.case__count{
  position:absolute;top:12px;right:12px;z-index:2;
  padding:5px 10px;border-radius:4px;
  background:rgba(255,255,255,.92);color:#2B2B29;
  font-family:var(--label);font-size:.62rem;letter-spacing:.06em;
}
.case--cta{
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);border-color:var(--brand);text-align:center;
  }
.case--cta::after{display:none}
.case--cta .inner{padding:24px}
.case--cta h3{color:#2B2B29;margin-bottom:10px;font-size:1.25rem}
.case--cta p{color:rgba(43,43,41,.72);max-width:none}

/* ---------- 12. Grade de cases ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px)}
.filters button{
  padding:8px 16px;border-radius:5px;border:1px solid var(--line-strong);
  font-size:.88rem;font-weight:500;color:var(--tx-dim);background:var(--surface);
  transition:all .25s var(--ease);
}
.filters button:hover{color:var(--tx);border-color:var(--graphite)}
.filters button.is-on{background:var(--brand);border-color:var(--brand);color:#2B2B29;font-weight:600}

.cases-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.cases-grid .case{width:auto;height:auto}
.cases-grid .case.sp-6{grid-column:span 6;aspect-ratio:16/11}
.cases-grid .case.sp-4{grid-column:span 4;aspect-ratio:4/5}
.cases-grid .case.sp-8{grid-column:span 8;aspect-ratio:16/9}
.cases-grid .case.sp-12{grid-column:span 12;aspect-ratio:21/8}
.cases-grid .case.pano{grid-column:span 12;aspect-ratio:3.63/1}
.cases-grid .case.is-out{display:none}
.cases-grid .case h3{font-size:1.2rem}

/* ---------- 12b. Página de case ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:5px;
  background:var(--surface);border:1px solid var(--line-strong);
  font-size:.84rem;color:var(--tx-dim);
}
.chip b{color:var(--tx);font-weight:600}

/* galeria da página de case */
.cgal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.cgal figure{
  position:relative;margin:0;overflow:hidden;border-radius:var(--rad);
  background:var(--bg-alt);border:1px solid var(--line);cursor:zoom-in;
}
.cgal figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.cgal figure:hover img{transform:scale(1.04)}
.cgal figure::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--brand);transition:box-shadow .3s var(--ease);
}
.cgal figure:hover::after{box-shadow:inset 0 0 0 3px var(--brand)}
.cgal .sq{grid-column:span 4;aspect-ratio:1}
.cgal .sq2{grid-column:span 6;aspect-ratio:1}
.cgal .pano{grid-column:span 12;aspect-ratio:3.63/1}
.cgal .pano6{grid-column:span 6;aspect-ratio:1.82/1}
.cgal__zoom{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:32px;height:32px;border-radius:5px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--tx);
  opacity:0;transform:translateY(5px);transition:opacity .3s var(--ease),transform .3s var(--ease-out);
}
.cgal figure:hover .cgal__zoom{opacity:1;transform:none}

/* navegação entre cases */
.cnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.cnav a{
  position:relative;background:var(--surface);
  padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,36px);
  display:flex;flex-direction:column;gap:6px;
  transition:background .25s var(--ease);
}
.cnav a:hover{background:var(--bg-alt)}
.cnav a.next{text-align:right;align-items:flex-end}
.cnav .k{
  font-family:var(--label);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mute);
  display:flex;align-items:center;gap:7px;
}
.cnav .t{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:700;letter-spacing:-.015em}
.cnav a:hover .t{color:var(--brand-ink)}

/* ---------- 13. Filmstrip de bastidores ---------- */
.strip__viewport{position:relative}
.strip{
  display:flex;gap:clamp(10px,1.2vw,16px);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:12px;scrollbar-width:none;cursor:grab;
}
.strip::-webkit-scrollbar{display:none}
.strip.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.strip figure{
  position:relative;margin:0;flex:none;scroll-snap-align:start;
  height:clamp(150px,20vw,250px);
  aspect-ratio:1388/382;
  border-radius:var(--rad);overflow:hidden;background:var(--bg-alt);
  border:1px solid var(--line);
}
.strip figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.strip figure:hover img{transform:scale(1.04)}
.strip figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 14px 11px;
  background:linear-gradient(180deg,transparent,rgba(28,28,26,.88));
  font-family:var(--label);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.strip__hint{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--label);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mute);
}
.strip__hint .ln{flex:1;height:3px;background:var(--line);border-radius:2px;position:relative;max-width:200px}
.strip__hint .ln i{position:absolute;left:0;top:0;height:100%;width:var(--p,10%);background:var(--brand);border-radius:2px;transition:width .15s linear}

/* ---------- 14. Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(255,255,255,.99)}
.lb.is-open{display:grid;grid-template-rows:auto 1fr auto}
.lb__top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px var(--pad);border-bottom:1px solid var(--line)}
.lb__title{display:flex;flex-direction:column;gap:1px}
.lb__title .t{font-weight:600;font-size:.98rem}
.lb__title .c{font-family:var(--label);font-size:.68rem;letter-spacing:.12em;color:var(--tx-mute)}
.lb__x{width:42px;height:42px;border-radius:6px;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background .25s,border-color .25s}
.lb__x:hover{background:var(--brand);border-color:var(--brand)}
.lb__stage{position:relative;display:grid;place-items:center;padding:20px clamp(56px,7vw,100px);min-height:0}
.lb__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;opacity:0;transition:opacity .3s var(--ease)}
.lb__stage img.is-on{opacity:1}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:6px;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  background:var(--surface);transition:background .25s,border-color .25s;
}
.lb__nav:hover{background:var(--brand);border-color:var(--brand)}
.lb__nav.prev{left:clamp(8px,1.4vw,22px)}
.lb__nav.next{right:clamp(8px,1.4vw,22px)}
.lb__thumbs{display:flex;gap:7px;overflow-x:auto;padding:14px var(--pad);border-top:1px solid var(--line);scrollbar-width:none}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs button{flex:none;width:70px;aspect-ratio:4/3;border-radius:5px;overflow:hidden;opacity:.5;border:2px solid transparent;transition:opacity .25s,border-color .25s}
.lb__thumbs button img{width:100%;height:100%;object-fit:cover}
.lb__thumbs button.is-on{opacity:1;border-color:var(--brand)}

/* ---------- 15. Split / media ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.2vw,58px);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}
.media{position:relative;border-radius:var(--rad-lg);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:4/5}
.media--wide{aspect-ratio:16/10}
.media__badge{
  position:absolute;left:18px;bottom:18px;z-index:2;
  padding:11px 16px;border-radius:8px;
  background:var(--brand);color:#2B2B29;
}
.media__badge .n{font-size:1.3rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.media__badge .l{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}

/* lista de diferenciais */
.checks{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.checks .ic{flex:none;width:18px;height:18px;margin-top:.28em;color:var(--brand-ink)}
.checks .t{font-weight:600;font-size:.99rem;margin-bottom:3px}
.checks .d{font-size:.91rem;color:var(--tx-dim);line-height:1.55}

/* ---------- 15b. Tecnologia ----------
   Quatro blocos curtos, cada um pendurado num fio da marca. Sem caixa:
   os cartões com borda já são a linguagem das Soluções, e repetir aqui
   faria as duas seções lerem como a mesma coisa. */
.techs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
.techs li{padding-top:16px;border-top:2px solid var(--brand)}
.techs .t{font-weight:600;font-size:1.02rem;line-height:1.35;margin-bottom:7px}
.techs .d{font-size:.93rem;line-height:1.6;color:var(--tx-dim)}
@media (max-width:1080px){.techs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.techs{grid-template-columns:1fr}}

/* ---------- 16. Processo ---------- */
/* Linha do tempo: um fio atravessa as etapas e cada uma ganha um marcador.
   Era uma fileira de caixas encostadas — lia como tabela, não como percurso. */
.flow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  --flow-y:26px;          /* onde o fio corre, medido do topo da etapa */
  --flow-ponto:15px;      /* diâmetro do marcador */
}
.flow__step{
  position:relative;background:none;
  padding:calc(var(--flow-y) + 26px) 0 0;
}
.flow__step + .flow__step{margin-left:0}

/* o marcador */
.flow__step::before{
  content:"";position:absolute;z-index:1;
  left:0;top:calc(var(--flow-y) - var(--flow-ponto) / 2);
  width:var(--flow-ponto);height:var(--flow-ponto);border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px var(--bg-alt), 0 0 0 4px var(--line-strong);
}
/* o fio até a próxima etapa — a última não puxa fio nenhum */
.flow__step::after{
  content:"";position:absolute;
  left:var(--flow-ponto);top:calc(var(--flow-y) - 1px);
  width:calc(100% + clamp(14px,1.8vw,26px) - var(--flow-ponto));height:2px;
  background:var(--line-strong);
}
.flow__step:last-child::after{display:none}

.flow__n{
  position:absolute;top:0;left:0;
  font-family:var(--label);font-size:.66rem;letter-spacing:.14em;color:var(--brand-ink);
}
.flow__t{font-weight:600;font-size:1rem;margin-bottom:6px}
.flow__d{font-size:.89rem;color:var(--tx-dim);line-height:1.55}

/* ---------- 17. Faixa CTA ---------- */
.cta{background:var(--brand);color:#2B2B29;border-block:1px solid #EFC331}
.cta .wrap{padding-block:clamp(44px,5vw,72px)}
.cta h2{color:#2B2B29;margin-bottom:14px}
.cta p{color:rgba(43,43,41,.76);max-width:58ch;margin-bottom:26px}
.cta .eyebrow{color:rgba(43,43,41,.68)}
.cta .eyebrow::before{background:#2B2B29}
.cta .btn{background:var(--graphite);border-color:var(--graphite);color:#fff}
.cta .btn:hover{background:#1F1F1E;border-color:#1F1F1E}
.cta .btn--ghost{background:transparent;border-color:rgba(43,43,41,.32);color:#2B2B29}
.cta .btn--ghost:hover{background:rgba(43,43,41,.07);border-color:#2B2B29}

/* ---------- 18. Formulário ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:var(--tx)}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--tx);font-size:.95rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-mute)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--graphite);box-shadow:0 0 0 3px rgba(252,208,64,.35);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6965' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.form__note{grid-column:1/-1;font-size:.84rem;color:var(--tx-dim)}

/* ---------- 19. Footer ---------- */
.footer{background:var(--graphite);color:#E9E7E3;padding-top:clamp(44px,5vw,68px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,2.6vw,40px);padding-bottom:clamp(32px,4vw,52px)}
.footer h4{font-family:var(--label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:9px}
.footer__links a{font-size:.93rem;color:#C9C7C2;transition:color .25s var(--ease)}
.footer__links a:hover{color:var(--brand)}
.footer__brand img{height:30px;margin-bottom:16px}
.footer__brand p{font-size:.92rem;color:#B6B4AF;max-width:36ch}
.unit{font-size:.9rem;color:#B6B4AF;line-height:1.6}
.unit strong{display:block;color:#fff;font-size:.85rem;margin-bottom:3px;font-weight:600}
.unit a{color:#B6B4AF}
.unit a:hover{color:var(--brand)}
.unit + .unit{margin-top:15px}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{
  width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#C9C7C2;transition:all .25s var(--ease);
}
.socials a:hover{background:var(--brand);border-color:var(--brand);color:#2B2B29}
.socials svg{width:16px;height:16px}
.footer__bot{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  padding-block:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:#9A9A9A;
}
.footer__bot a:hover{color:var(--brand)}

/* ---------- 20. WhatsApp flutuante ---------- */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:80;
  display:flex;align-items:center;gap:11px;
  padding:14px 22px 14px 17px;border-radius:8px;
  background:#1FAF54;color:#fff;font-weight:600;font-size:.96rem;
  box-shadow:0 6px 22px -8px rgba(31,175,84,.6);
  transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease-out),opacity .3s var(--ease);
}
.wa.is-on{transform:none;opacity:1;pointer-events:auto}
.wa svg{width:25px;height:25px;flex:none}

/* ---------- 21. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(14px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .55s var(--ease-out) var(--d,0s);
}
[data-reveal="fade"]{transform:none}
[data-parallax]{will-change:transform}

/* ---------- 22. Page head (subpáginas) ---------- */
.phead{
  position:relative;background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding-block:clamp(34px,4.5vw,58px);
}
.phead h1{max-width:18ch}
.phead .lead{margin-top:16px}
.crumb{display:flex;gap:8px;align-items:center;margin-bottom:16px;font-size:.84rem;color:var(--tx-mute)}
.crumb a:hover{color:var(--tx)}
.crumb .sep{color:var(--line-strong)}

/* ---------- 23. Acordeão ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:center;gap:18px;justify-content:space-between;padding:18px 0;text-align:left}
.acc__btn .t{font-weight:600;font-size:1.02rem}
.acc__btn .ic{
  width:30px;height:30px;flex:none;border-radius:5px;border:1px solid var(--line-strong);
  display:grid;place-items:center;transition:all .3s var(--ease-out);position:relative;
}
.acc__btn .ic::before,.acc__btn .ic::after{content:"";position:absolute;background:currentColor;transition:transform .3s var(--ease-out)}
.acc__btn .ic::before{width:11px;height:2px}
.acc__btn .ic::after{width:2px;height:11px}
.acc__item.is-open .ic{background:var(--brand);border-color:var(--brand)}
.acc__item.is-open .ic::after{transform:scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height .35s var(--ease-out)}
.acc__panel .in{padding:0 0 22px;color:var(--tx-dim);max-width:76ch}
.acc__panel .in p{font-size:.96rem}

/* ---------- 24. Responsivo ---------- */
@media (max-width:1080px){
  .footer__top{grid-template-columns:1fr 1fr}

  /* Abaixo de 1080 a linha do tempo vira vertical: em duas colunas o fio
     quebraria no fim da primeira fileira e voltaria, que não é percurso
     nenhum. Aqui ele desce pela esquerda, ligando etapa a etapa. */
  .flow{grid-template-columns:1fr;gap:0}
  .flow__step{padding:0 0 clamp(22px,3vw,30px) 32px}
  .flow__step:last-child{padding-bottom:0}
  .flow__n{position:static;display:block;margin-bottom:6px}
  .flow__step::before{left:0;top:3px}
  .flow__step::after{
    left:calc(var(--flow-ponto) / 2 - 1px);top:calc(3px + var(--flow-ponto));
    width:2px;height:calc(100% - var(--flow-ponto) - 3px);
  }
}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .header__cta .btn{display:none}
  /* Área do Cliente continua à mostra no cabeçalho, mais compacta */
  .header__in{gap:12px}
  .header__cta{gap:8px}
  .header__cta .portal{padding:7px 11px;font-size:.8rem}
  .header__cta .portal .ext{display:none}
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__text{padding-right:0;padding-block:clamp(32px,5vw,52px)}
  .hero__media{order:-1;aspect-ratio:16/10;min-height:0;margin-left:calc(-1 * var(--pad))}
  .split,.split--wide{grid-template-columns:1fr}
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{grid-template-columns:1fr}
  .cases-grid .case.sp-6,.cases-grid .case.sp-4,.cases-grid .case.sp-8{grid-column:span 6}
  .cases-grid .case.sp-4{aspect-ratio:4/5}
  .cases-grid .case.sp-6,.cases-grid .case.sp-8{aspect-ratio:16/11}
  .cases-grid .case.sp-12{aspect-ratio:16/9}
  .cgal .sq,.cgal .sq2{grid-column:span 6}
  .cgal .pano6{grid-column:span 12;aspect-ratio:3.63/1}
  /* trilho vira carrossel no toque */
  .rail{height:auto !important}
  .rail__sticky{position:static;height:auto;padding-block:clamp(44px,6vw,72px)}
  .rail__track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
  .rail__track::-webkit-scrollbar{display:none}
  .case{scroll-snap-align:center;height:auto;width:min(86vw,420px);aspect-ratio:4/5}
  .rail__bar{display:none}
}
@media (max-width:660px){
  :root{--header-h:64px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .cases-grid .case{grid-column:span 12 !important;aspect-ratio:4/5 !important}
  .cases-grid .case.sp-12,.cases-grid .case.sp-8{aspect-ratio:16/11 !important}
  .cases-grid .case.pano{aspect-ratio:2/1 !important}
  .strip figure{height:clamp(130px,30vw,180px)}
  .cnav{grid-template-columns:1fr}
  .cnav a.next{text-align:left;align-items:flex-start}
  .wa{right:12px;bottom:12px;padding:15px}
  .wa span{display:none}
  .wa svg{width:34px;height:34px}   /* sem rótulo, o glifo é que faz o botão ser reconhecido */
  .lb__stage{padding-inline:10px}
  .lb__nav.prev{left:4px}
  .lb__nav.next{right:4px}
}

@media (max-width:400px){
  .header__in{gap:10px}
  .header__cta{gap:6px}
  .header__cta .portal{padding:7px 9px;font-size:.76rem}
}

/* ---------- 25. Acessibilidade / motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .rail{height:auto !important}
  .rail__sticky{position:static;height:auto}
  .rail__track{transform:none !important;overflow-x:auto}
  .case{height:auto;width:min(86vw,420px);aspect-ratio:4/5}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  padding:10px 18px;border-radius:6px;background:var(--brand);color:#2B2B29;font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{top:12px}

/* ---------- 26. Instagram ---------- */
.ig__head{align-items:flex-start;margin-bottom:clamp(26px,3vw,42px)}
.ig__head .link{margin-top:4px}
.ig__sub{margin-top:14px;max-width:56ch;color:var(--tx-dim)}

.ig__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.ig__card{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--rad-lg);background:var(--bg-alt);
}
.ig__card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
a.ig__card:hover img{transform:scale(1.05)}
.ig__legenda{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:12.5px;line-height:1.35;color:#fff;
  background:linear-gradient(180deg,rgba(43,43,41,0) 0%,rgba(43,43,41,.72) 65%);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* espaço reservado: mesma caixa, sem conteúdo */
.ig__card--vaga{display:grid;place-items:center;border-style:dashed;border-color:var(--line-strong)}
.ig__glifo{display:block;color:var(--line-strong)}
.ig__glifo svg{width:26px;height:26px;display:block}
.ig__card--vaga::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-100%);animation:ig-brilho 3.2s var(--ease) infinite;
}
.ig__card--vaga:nth-child(2)::after{animation-delay:.18s}
.ig__card--vaga:nth-child(3)::after{animation-delay:.36s}
.ig__card--vaga:nth-child(4)::after{animation-delay:.54s}
.ig__card--vaga:nth-child(5)::after{animation-delay:.72s}
.ig__card--vaga:nth-child(6)::after{animation-delay:.9s}
@keyframes ig-brilho{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}
.ig__nota{margin-top:22px;color:var(--tx-mute)}

@media (max-width:980px){
  .ig__grid{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:560px){
  .ig__grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .ig__card--vaga::after{display:none}
}

/* ---------- Páginas do WordPress / Elementor ----------
   O tema não constrange o conteúdo de página: quem monta no
   Elementor manda no layout. Aqui vai só o mínimo para o
   conteúdo do editor padrão não sair torto. */
.pagina-wp{max-width:none}
.pagina-wp h2,.pagina-wp h3{color:var(--tx);margin:32px 0 12px}
.pagina-wp h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.pagina-wp h3{font-size:clamp(1.1rem,2vw,1.3rem)}
.pagina-wp p{margin:0 0 16px}
.pagina-wp ul,.pagina-wp ol{margin:0 0 16px;padding-left:20px}
.pagina-wp li{margin-bottom:8px}
.pagina-wp a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.pagina-wp img{max-width:100%;height:auto;border-radius:8px}
.pagina-wp table{width:100%;border-collapse:collapse;margin:0 0 16px}
.pagina-wp th,.pagina-wp td{border:1px solid var(--line);padding:10px 12px;text-align:left}

/* ---------- Convivência com o CSS do Elementor ----------
   O frontend.min.css do Elementor traz `.elementor img{height:auto}`.
   Isso empata em especificidade com as regras do tema que esticam a
   imagem dentro de um card (`.case img`, `.media img`, …) e, dependendo
   da ordem em que as folhas entram, ganha — e a foto passa a ocupar uma
   tira no alto do card, com o resto vazio. Foi o que aconteceu com as
   capas panorâmicas do trilho: 101px de imagem num card de 400px.

   Estas repetem as regras do tema com um nível a mais de especificidade,
   para valerem tanto na versão codada quanto na montada no Elementor. */
.hero__media figure img{height:100%}
.rail__track .case img{height:100%}
figure.media img{height:100%}
.cases-grid .case img{height:100%}
.ig__grid .ig__card img{height:100%}
.header .brand img{height:28px}
.footer .footer__brand img{height:30px}

/* Altura automática é o que o widget de imagem DO ELEMENTOR quer —
   e só ele. */
.elementor-widget-image img{height:auto}
.elementor-widget-text-editor a{text-underline-offset:3px}