/* ==========================================================================
   Grupo T&M: molde das páginas POR PERFIL (/para/*) e POR SETOR (/setor/*), 09/2026.
   Carrega DEPOIS de /css/tm-site.css (cores, fontes e componentes comuns vêm de lá).
   Estrutura de cada página: topo dividido (texto + mídia) > dores com a resposta da T&M >
   soluções > como funciona > para quem é > cases > peças indicadas > perguntas > outros
   perfis e setores > chamada final. Agências e formaturas têm também os modelos de parceria.
   ========================================================================== */

/* ---------- topo dividido: texto à esquerda, mídia à direita ---------- */
.ph{text-align:left;padding:34px 0 46px}
.ph::before{top:24px;height:520px}
.ph-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.ph .crumbs{justify-content:flex-start}
.ph h1{font-size:clamp(38px,4.5vw,60px);line-height:.98;margin:14px 0 18px;max-width:none}
.ph .hero-copy{margin:0 0 26px;max-width:560px;font-size:17.5px}
.ph .hero-actions{justify-content:flex-start;margin-bottom:30px}
.ph .hero-note{justify-content:flex-start;margin:0;gap:10px 18px}
.ph-media{position:relative}
.ph-media .stage{margin:0}
.ph-media .stage-video{aspect-ratio:4/3}
.ph-media .browser-view{aspect-ratio:4/3}
.ph-media .tag.t1{left:-30px;top:12%}
.ph-media .tag.t2{right:-26px;top:auto;bottom:14%}
.ph .trust{margin-top:52px}
.trust-logos .txt{font-size:15px;font-weight:800;color:#98A2B3;text-transform:none;letter-spacing:-.01em}

/* ---------- dores com a resposta da T&M ---------- */
.dores{display:grid;gap:16px}
.dor{display:grid;grid-template-columns:1fr 64px 1fr;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.dor-q{padding:28px 10px 30px 28px;display:grid;grid-template-columns:48px 1fr;gap:0 18px;align-content:start}
.dor-q > i{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--bg-alt);color:#475467}
.dor-q > i svg{width:23px;height:23px}
.dor-q small,.dor-a small{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.dor-q small{color:#98A2B3}
.dor-q h3{font-family:var(--f-title);font-size:23px;line-height:1.1;letter-spacing:-.04em;margin:6px 0 10px;text-wrap:balance}
.dor-q p{color:var(--muted);font-size:15px;text-wrap:pretty}
.dor-seta{display:grid;place-items:center;position:relative}
.dor-seta::before{content:"";position:absolute;top:0;bottom:0;right:0;width:50%;background:var(--soft-blue)}
.dor-seta b{position:relative;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,71,187,.3)}
.dor-seta svg{width:20px;height:20px}
.dor-a{padding:28px 30px 30px 18px;background:var(--soft-blue);display:flex;flex-direction:column}
.dor-a small{color:var(--blue)}
.dor-a p{margin-top:10px;color:#344054;font-size:15.5px;font-weight:600;line-height:1.55;text-wrap:pretty}
.dor-a p b{color:var(--ink)}
.dor-a .link-arrow{margin-top:auto;padding-top:16px}

/* ---------- soluções (cartões com loop ou foto) ---------- */
.cards.sols .card-media{aspect-ratio:16/10}
.cards.sols .card-media.shot{background:#EEF3FC}
.cards.sols .card-media.shot img{object-position:top center}
.sols-nota{margin-top:22px;text-align:center;color:#475467;font-size:15px}
.sols-nota a{color:var(--blue);font-weight:800}

/* ---------- modelos de parceria (agências e formaturas) ---------- */
.modelos{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}
.modelo{position:relative;display:flex;flex-direction:column;padding:30px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.modelo .card-ic{margin-bottom:16px}
.modelo .selo{position:absolute;top:26px;right:26px;padding:5px 11px;border-radius:999px;background:var(--soft-blue);color:var(--blue-dark);font-size:11.5px;font-weight:900;letter-spacing:.02em}
.modelo h3{font-family:var(--f-title);font-size:26px;letter-spacing:-.045em;line-height:1.05;margin-bottom:10px}
.modelo p{color:var(--muted);font-size:15px}
.modelo .ideal{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:700;color:#344054}
.modelo p + .ideal{margin-top:18px}
.modelo .ideal b{color:var(--blue)}
.modelo.forte{background:linear-gradient(145deg,#001E60,#0047BB);border-color:transparent;color:#fff}
.modelo.forte .card-ic{background:rgba(255,255,255,.14);color:#fff}
.modelo.forte .selo{background:rgba(255,255,255,.14);color:#fff}
.modelo.forte p{color:rgba(255,255,255,.78)}
.modelo.forte .ideal{border-color:rgba(255,255,255,.18);color:#fff}
.modelo.forte .ideal b{color:#A9C8FF}
.modelos-nota{max-width:980px;margin:18px auto 0;text-align:center;color:#475467;font-size:15px}

/* ---------- para quem é ---------- */
.para-quem .check{margin-top:6px}
.para-quem .check li{font-weight:600;line-height:1.45}
.nao{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px 18px;border-radius:18px;background:#fff;border:1px dashed #C9D2E6;font-size:15px;color:#475467;line-height:1.5}
.soft .nao{background:#fff}
.nao i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);color:#667085;font-style:normal;font-weight:900;font-size:14px}
.nao b{color:var(--ink)}
.nao a{color:var(--blue);font-weight:800}
.para-quem .media-frame{aspect-ratio:4/3}

/* ---------- peças indicadas (faixa rolável no celular) ---------- */
.prod-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.prod-top .section-head{margin:0;text-align:left}
.prod-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.prod{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;transition:transform .25s,box-shadow .25s}
.prod:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(16,24,40,.10)}
.prod figure{margin:0;aspect-ratio:1/1;background:#F4F6FA;overflow:hidden}
.prod figure img{width:100%;height:100%;object-fit:cover}
.prod-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod-txt b{font-size:15.5px;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:8px}
.prod-txt b::after{content:"→";color:var(--blue)}
.prod-desc{font-size:13px;color:var(--muted);line-height:1.4}
.minimo{text-wrap:pretty;display:block;margin-top:18px;padding:16px 20px;border-radius:18px;background:var(--bg);border:1px solid var(--line);font-size:15px;color:#344054}
.soft .minimo{background:#fff}
.minimo b{color:var(--ink)}
.minimo a{color:var(--blue);font-weight:800}

/* ---------- resumo ao lado das perguntas (bom para buscas e respostas de IA) ---------- */
.resumo-box{margin-top:22px;padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.resumo-box small{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.resumo-box p{color:#344054!important;font-size:15px!important;margin:0!important;line-height:1.6}
.resumo-box p + p{margin-top:8px!important}

/* ---------- outros perfis e setores ---------- */
.outros{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:center;max-width:980px;margin:0 auto}
.outros h3{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#98A2B3;white-space:nowrap}
.outros .chips{justify-content:flex-start;margin:0}
.outros a.chip{transition:border-color .2s,color .2s,background .2s}
.outros a.chip:hover{border-color:rgba(0,71,187,.35);color:var(--blue)}
.outros a.chip[aria-current]{background:var(--soft-blue);border-color:rgba(0,71,187,.2);color:var(--blue-dark)}

/* ---------- final ---------- */
.final h2 span{display:block}

/* ---------- responsivo ---------- */
@media(max-width:1100px){.prod-rail{grid-template-columns:repeat(3,1fr)}.ph-media .tag.t1{left:-12px}.ph-media .tag.t2{right:-10px}}
@media(max-width:960px){
  .ph-grid{grid-template-columns:1fr;gap:34px}
  .ph .hero-copy{max-width:680px}
  .ph .trust{margin-top:36px}
  .dor{grid-template-columns:1fr}
  .dor-q{padding:24px 24px 38px}
  .dor-seta{height:0;z-index:1}
  .dor-seta::before{display:none}
  .dor-seta b{position:absolute;left:24px;top:-22px;transform:rotate(90deg)}
  .dor-a{padding:32px 24px 24px}
  .modelos{grid-template-columns:1fr}
  .outros{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ph{padding:22px 0 34px}
  .ph h1{font-size:clamp(34px,9.6vw,42px)}
  .ph .hero-copy{font-size:16px}
  .ph .hero-note{gap:8px 14px}
  .ph .hero-note span{font-size:14px}
  .ph-media .stage-video,.ph-media .browser-view{aspect-ratio:4/3}
  .dor{border-radius:22px}
  .dor-q{grid-template-columns:1fr;gap:0;padding:22px 20px 36px}
  .dor-q > i{width:42px;height:42px;margin-bottom:12px}
  .dor-q h3{font-size:21px}
  .dor-a{padding:30px 20px 22px}
  .dor-seta b{left:20px;width:40px;height:40px;top:-20px}
  .dor-q p,.dor-a p,.modelo p,.nao,.minimo,.sols-nota,.modelos-nota{font-size:15px}
  .modelo{padding:24px 22px}
  .modelo .selo{position:static;align-self:flex-start;margin-bottom:12px}
  .modelo h3{font-size:24px}
  .prod-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:4px 16px 18px;scrollbar-width:none}
  .prod-rail::-webkit-scrollbar{display:none}
  .prod-txt b{font-size:16px}.prod-desc{font-size:15px}
  .cards.sols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:12px;margin:0 -16px;padding:4px 16px 16px;scrollbar-width:none}
  .cards.sols::-webkit-scrollbar{display:none}
  .cards.sols .card{flex:0 0 86%;scroll-snap-align:start}
  .para-quem .check li{font-size:15px}
  .resumo-box{padding:18px}
  /* texto corrido com 15 px no celular (os componentes compartilhados usam 13,5 a 14,5 px) */
  .card-body p,.check.sm li,.faq .resp p,.case-body p,.passo p,.wa-band p span,.wa-box li,.wa-box p{font-size:15px}
}