/* Página Mídia paga (/marketing-digital/performance-midias-pagas/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo mp-.
   O que é novo: o desenho do bloco "Na prática" (.mp-motores: quem chega, a loja no meio e quem volta), os cartões dos clientes de hoje (.mp-contas)
   e a lista de trabalhos entregues ao lado do depoimento (.mp-mais). Rótulos em Fira Sans. Ilustração sem número e sem nome de pessoa. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.mp-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.mp-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: o valor desce para baixo do rótulo nas três telas, como no celular.
     Só a primeira linha: a segunda continua escondida nesta faixa. A altura mínima iguala a tela com pílula e a tela com valor em negrito */
  .mp-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .mp-topo .hero-fluxo .ui .linha > b{text-align:left}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .mp-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .mp-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:980px){
  /* atalhos são navegação: 44px de altura para o dedo */
  .mp-topo .ja-integramos > b{margin-bottom:0}
  .mp-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}
@media (max-width:359px){
  /* telas muito estreitas (320px): o título cabe sem palavra sozinha na última linha */
  .mp-topo h1{font-size:1.9rem}
}

/* ---------- 3. na prática (#na-pratica): os dois grupos de campanhas da Jabuticaba, com a loja no meio ---------- */
/* o título fica em meia coluna e precisa ser menor */
.mp-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.mp-motores{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;margin-top:44px}
/* cartões translúcidos sobre o roxo; o pé de cada um (número ou públicos) encosta na base */
.mp-motor{display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.mp-motor .tag{font-size:13px;font-weight:600;line-height:1.4;color:var(--acento)}
.mp-motor h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;color:var(--titulo)}
.mp-motor .mp-canal{font-size:16px;font-weight:700;color:var(--titulo)}
.mp-motor p{font-size:15.5px;line-height:1.5;color:var(--fg2)}
.mp-pe{margin-top:auto;padding-top:16px}
.mp-pe > *{padding-top:16px;border-top:1px solid var(--linha)}
.mp-num{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.mp-num b{font-size:clamp(2.2rem,3.2vw,2.9rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--oliva);font-variant-numeric:tabular-nums}
.mp-motor .mp-num span{font-size:14.5px;line-height:1.4;color:var(--fg)}
.mp-publicos{display:flex;flex-wrap:wrap;gap:8px}
.mp-publicos li{padding:5px 12px;border-radius:999px;border:1px solid var(--linha);font-size:13px;font-weight:600;line-height:1.4;color:var(--titulo)}
/* a loja no meio: uma tela ilustrada e as duas setas que apontam para ela */
.mp-loja{display:grid;grid-template-columns:84px minmax(0,212px) 84px;align-items:center}
/* o cartão .ui nasce solto (posição absoluta e 37% de largura): aqui ele ocupa a coluna do meio */
.mp-loja .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;font-size:13px}
.mp-loja .ui header{padding:9px 12px;font-size:13.5px}
.mp-loja .ui header small{opacity:1}
.mp-loja .ui .corpo{padding:12px 12px 14px;gap:9px}
.mp-seta{position:relative;display:grid;place-items:center;min-height:44px}
.mp-seta::before{content:"";position:absolute;left:0;right:6px;top:calc(50% - 1px);border-top:2px dashed var(--acento);opacity:.8}
.mp-seta::after{content:"";position:absolute;right:0;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid var(--acento);border-right:0}
.mp-seta-volta::before{left:6px;right:0}
.mp-seta-volta::after{right:auto;left:0;border:5px solid transparent;border-right:7px solid var(--acento);border-left:0}
.mp-seta i{position:relative;z-index:1;padding:3px 9px;border-radius:999px;background:#fff;color:var(--roxo-900);font:600 12px/1.3 var(--fonte);box-shadow:0 6px 14px -10px rgba(42,8,40,.5)}
/* ficha do cliente: o logo da Jabuticaba é baixo e largo, e a 26px sumia */
.mp-pratica .tg-cab img{height:36px}
/* a ficha tem uma linha só de dados: sem a sobra embaixo (a lista trazia a margem padrão do navegador) */
.mp-pratica .ficha{padding-bottom:12px}
.mp-pratica .tg-dados{margin-bottom:0}

/* ---------- 4. o que fazemos (#o-que-fazemos): os três cartões da casa, com dois pares na ficha ---------- */
.mp-fazemos .caminho h3{font-size:1.35rem}
.mp-fazemos .caminho dl{grid-template-columns:4.8em 1fr}

/* ---------- 5. até a venda (#ate-a-venda): a tabela da casa e a faixa do fluxo da própria Olivas ---------- */
.mp-proprio .marca-case{gap:2px}
.mp-venda .caminhos-pe{margin-top:28px}

/* ---------- 6. clientes (#clientes): três cartões de hoje, a lista do que já foi entregue e um depoimento ---------- */
.mp-contas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
/* as cinco linhas (logo, etiqueta, título, texto e link) ficam na mesma altura nos três cartões */
.mp-conta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:10px;align-content:start;padding:24px 24px 26px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
.mp-conta-logo{display:flex;align-items:center;height:40px;margin-bottom:4px}
.mp-conta-logo img{display:block;width:auto;height:34px;max-width:150px;object-fit:contain;object-position:left center}
.mp-conta-logo img[alt="Travelex Confidence"]{height:26px;max-width:160px}
.mp-conta .tag{font-size:13px;font-weight:600;line-height:1.4;color:var(--roxo)}
.mp-conta h3{font-size:1.25rem;line-height:1.22;color:var(--roxo-900);text-wrap:balance}
.mp-conta p{font-size:15.5px;line-height:1.5;color:var(--tinta-2)}
.mp-conta .link-seta{justify-self:start;align-self:end;margin-top:6px;font-size:15px}
.mp-mais{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:18px clamp(28px,4vw,56px);align-items:start;margin-top:44px}
.mp-feitos h3{font-size:1.2rem;color:var(--titulo)}
.mp-feitos ul{margin-top:14px;border-top:1px solid var(--linha)}
.mp-feitos li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--linha);font-size:15.5px;line-height:1.5;color:var(--fg2)}
.mp-feitos li b{font-size:16px;color:var(--titulo)}
/* o depoimento da casa (.depo) nasce para a fileira de três da Home: aqui ele é um cartão sozinho */
.mp-mais .depo{display:flex;flex-direction:column;justify-content:flex-start;gap:18px;grid-row:auto}

/* ---------- responsivo ---------- */
@media (min-width:981px) and (max-width:1180px){
  /* colunas dos lados mais estreitas: a loja e as setas encolhem, e o número fica em cima do texto */
  .mp-loja{grid-template-columns:60px minmax(0,190px) 60px}
  .mp-seta i{padding-inline:7px;font-size:11.5px}
  .mp-num{grid-template-columns:minmax(0,1fr);gap:6px}
  .mp-motor{padding:22px 20px 20px}
}
@media (max-width:980px){
  /* um embaixo do outro: quem chega, a loja e quem volta; as setas passam a ser verticais */
  .mp-motores{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .mp-loja{grid-template-columns:minmax(0,1fr);justify-items:center}
  .mp-loja .ui{max-width:300px}
  .mp-seta{width:100%;min-height:58px}
  .mp-seta::before{left:calc(50% - 1px);right:auto;top:0;bottom:6px;border-top:0;border-left:2px dashed var(--acento)}
  .mp-seta::after{right:auto;left:calc(50% - 5px);top:auto;bottom:0;border:5px solid transparent;border-top:7px solid var(--acento);border-bottom:0}
  .mp-seta-volta::before{left:calc(50% - 1px);top:6px;bottom:0}
  .mp-seta-volta::after{left:calc(50% - 5px);top:0;bottom:auto;border:5px solid transparent;border-bottom:7px solid var(--acento);border-top:0}
  .mp-mais{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (min-width:621px) and (max-width:980px){
  /* a ficha da casa cai para duas colunas no tablet; com três dados, o último ocupa a linha toda */
  .mp-pratica .tg-ficha .tg-dados > div:last-child{grid-column:1/-1}
  /* três cartões não cabem lado a lado: dois em cima e o terceiro na linha de baixo, inteiro */
  .mp-contas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-conta:last-child{grid-column:1/-1}
}
@media (max-width:620px){
  .mp-motor{padding:20px 20px 20px}
  .mp-num{gap:12px}
  /* os três cartões viram o carrossel da casa: fora da grade, o link encosta na base do cartão */
  .mp-contas.carrossel{display:flex}
  .mp-conta{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 20px 24px}
  .mp-conta .link-seta{align-self:flex-start;margin-top:auto}
  .mp-feitos li{grid-template-columns:minmax(0,1fr);gap:2px}
}