/* ============================================================
   V2 — camada nova sobre style-base.css
   Norte: especialista em CRM que usa IA como diferencial
   ============================================================ */

/* ---- seletor de idioma ---- */
.lang { position: relative; }
.lang-btn { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: #fff; background: transparent; border: 0; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lang-btn::after { content: '▾'; font-size: 10px; opacity: 0.7; }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(20,27,45,0.28); padding: 6px; min-width: 190px; display: none; z-index: 60; }
.lang-btn[aria-expanded="true"] + .lang-menu, .lang:hover .lang-menu { display: block; }
.lang-menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--deep) !important; font-size: 13.5px; font-weight: 500; padding: 10px 12px; border-radius: 8px; }
.lang-menu a:hover { background: var(--sail); }
.lang-menu em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---- hero: claim maior, 2 linhas ---- */
.hero2 h1 { font-size: clamp(34px, min(4.8vw, 7.6vh), 68px); }
.hero2 .lead strong { color: #fff; }

/* ---- as duas portas ---- */
.portas { background: var(--snow); }
.portas .kicker { display: block; }
.portas h2 { font-size: clamp(28px, 3.4vw, 44px); }
.portas .sub { margin-top: 12px; max-width: 58ch; color: var(--muted); font-size: 15.5px; }
.portas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(28px, 3.5vw, 44px); }
.porta { position: relative; display: block; background: var(--deep); color: #fff; border-radius: 18px; padding: clamp(28px, 3.4vw, 46px); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; }
.porta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 420px 320px at 88% 8%, rgba(27,71,242,0.35), transparent 68%); pointer-events: none; }
.porta:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(20,27,45,0.28); }
.porta > * { position: relative; z-index: 1; }
.p-num { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); color: #7C9BFF; line-height: 1; }
.porta h3 { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 2.8vw, 36px); color: #fff; margin: 12px 0 4px; letter-spacing: -0.02em; }
.p-sub, .p-desc-top { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-claro); }
.p-desc { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.75); }
.p-cta { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 700; color: #fff; border-bottom: 1.5px solid var(--cobalto); padding-bottom: 3px; }
@media (max-width: 900px) { .portas-grid { grid-template-columns: 1fr; } }

/* ---- treinamentos: 3 cards ---- */
.tr-grid { grid-template-columns: repeat(3, 1fr) !important; }
.tr-card.destaque { background: var(--deep); border-color: transparent; }
.tr-card.destaque h3 { color: #fff; }
.tr-card.destaque .tr-num { color: #7C9BFF; }
.tr-card.destaque .tr-meta { color: var(--azul-claro); }
.tr-card.destaque .tr-desc, .tr-card.destaque .tr-mods li { color: rgba(255,255,255,0.72); }
.tr-card.destaque .tr-mods li::before { border-color: #7C9BFF; }
@media (max-width: 980px) { .tr-grid { grid-template-columns: 1fr !important; } }

/* ---- formatos ---- */
.formatos { margin-top: clamp(24px, 3vw, 36px); background: var(--sail); border-radius: 16px; padding: clamp(24px, 3vw, 36px); }
.f-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); }
.f-grid > div { display: grid; gap: 5px; }
.f-n { font-family: var(--sans); font-weight: 800; font-size: 17px; color: var(--deep); }
.f-d { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; } }

/* ---- consultoria ---- */
.consult { background: var(--snow); }
.consult-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.consult h2 { font-size: clamp(26px, 3.2vw, 42px); margin-top: 12px; }
.c-lead { margin-top: 16px; font-size: 16px; line-height: 1.7; color: #454B62; max-width: 56ch; }
.c-lead strong { color: var(--deep); }
.c-etapas { margin: 28px 0; display: grid; gap: 16px; }
.c-etapas > div { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.c-etapas > div:last-child { border-bottom: 0; padding-bottom: 0; }
.e-n { flex-shrink: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--cobalto); width: 32px; }
.c-etapas h4 { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--deep); }
.c-etapas p { margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.c-card { background: var(--deep); border-radius: 18px; padding: clamp(26px, 3vw, 38px); text-align: center; }
.cc-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: 18px; }
.c-card img { width: min(170px, 62%); height: auto; margin: 0 auto 18px; }
.c-card p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.75); }
.c-card p strong { color: #fff; }
@media (max-width: 900px) { .consult-grid { grid-template-columns: 1fr; } }

/* ---- IA como diferencial ---- */
.ia-band { position: relative; background: var(--deep); color: #fff; overflow: hidden; }
.ia-band::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(ellipse 760px 520px at 12% 6%, rgba(27,71,242,0.30), transparent 62%),
  radial-gradient(ellipse 620px 520px at 92% 92%, rgba(14,54,97,0.55), transparent 70%); pointer-events: none; }
.ia-band .wrap { position: relative; z-index: 1; }
.ia-band .kicker { display: block; color: var(--azul-claro); }
.ia-band h2 { color: #fff; font-size: clamp(28px, 3.6vw, 48px); max-width: 20ch; }
.ia-band h2 .hl { color: #7C9BFF; }
.ia-band .sub { margin-top: 14px; max-width: 62ch; color: rgba(255,255,255,0.7); font-size: 15.5px; }
.ia-casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 3.5vw, 44px); }
.ia-caso { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: clamp(22px, 2.6vw, 32px); }
.ic-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.ic-num { display: block; margin-top: 12px; font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.03em; color: #7C9BFF; }
.ic-res { margin-top: 8px; font-size: 15px; font-weight: 700; color: #fff; }
.ic-desc { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.ia-nota { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,0.4); }
.ia-provas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid rgba(255,255,255,0.12); }
.ia-prova h3 { font-family: var(--sans); font-weight: 800; font-size: clamp(18px, 1.9vw, 23px); color: #fff; margin-bottom: 10px; }
.ia-prova p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72); }
.ia-prova p strong { color: #fff; }
.ia-selos { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.ia-selos img { width: 54px; height: 54px; object-fit: contain; }
@media (max-width: 900px) { .ia-casos, .ia-provas { grid-template-columns: 1fr; } }

/* ---- ajustes de ritmo entre seções ---- */
.exper { background: var(--snow); }
.portas { background: var(--sail); }
.trein { background: var(--snow); }
.consult { background: var(--sail); }
.sobre2 { background: var(--snow); }
.conteudos { background: var(--sail) !important; }
.exper h2 { margin-bottom: 0; }

/* ---- Experiências: centralizado, igual à seção de Conteúdos ---- */
.exper { text-align: center; }
.exper .kicker { display: block; text-align: center; }
.exper h2 { max-width: 22ch; margin-inline: auto; text-align: center; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.exper .sub { margin: 12px auto 0; max-width: 58ch; text-align: center; color: var(--muted); font-size: 15.5px; }

/* ---- Sobre no mesmo padrão editorial das demais seções ---- */
.sobre2 .kicker { display: block; }
.sobre2 h2 { font-size: clamp(26px, 3.2vw, 40px); text-transform: none; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; margin: 14px 0 0; }
.sobre2 .sub { margin-top: 16px; max-width: 54ch; color: #454B62; font-size: 15.5px; line-height: 1.7; }
.sobre2 .sub strong { color: var(--deep); }
.exper .marquee { margin-top: clamp(30px, 4vw, 48px); }

/* ritmo: Sobre subiu para depois dos logos */
.sobre2 { background: var(--sail); }
.portas { background: var(--snow); }
.trein { background: var(--sail); }
.consult { background: var(--snow); }
.conteudos { background: var(--snow) !important; }
.s2-res-label { margin-top: 26px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalto); }
.sobre2 .s2-stats { margin-top: 14px; }
.sobre2 .s2-stats .n { font-size: clamp(28px, 3vw, 38px); color: var(--cobalto); }
.sobre2 .s2-stats .l { line-height: 1.4; }
/* título dos logos em uma linha só */
.exper h2 { max-width: none; white-space: nowrap; font-size: clamp(24px, 3vw, 42px); }
@media (max-width: 720px) { .exper h2 { white-space: normal; font-size: clamp(24px, 6.4vw, 34px); } }

/* ---- campo de telefone com país + máscara ---- */
.tel-group { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.tel-ddi { font-family: var(--sans); font-size: 15px; color: var(--deep); background: var(--sail); border: 1px solid var(--line); border-radius: 10px; padding: 13px 10px; outline: none; cursor: pointer; }
.tel-ddi:focus-visible { border-color: var(--cobalto); }
.tel-input { width: 100%; }
.prop-form .hint { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin: -2px 0 4px; line-height: 1.5; }
.prop-form label.full textarea { min-height: 118px; }
@media (max-width: 520px) { .tel-group { grid-template-columns: 104px 1fr; } }

/* ---- Sobre em coluna única ---- */
.sobre2-solo { max-width: 1000px; }
.sobre2-solo .sobre2-col { display: block; }
.sobre2-solo h2 { max-width: 26ch; }
.sobre2-solo .sub { max-width: 62ch; }
.sobre2-solo .sobre2-col > p:not(.sub):not(.s2-res-label) { max-width: 62ch; }
.s2-assin-solo { height: 48px; width: auto; margin-top: 22px; filter: invert(1) brightness(0.15); }
.sobre2-solo .s2-stats { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.sobre2-solo .s2-stats > div { padding: 22px 20px; }
@media (max-width: 980px) { .sobre2-solo .s2-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sobre2-solo .s2-stats { grid-template-columns: 1fr; } }

/* ---- Sobre com retrato ao lado ---- */
.sobre2-foto { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1180px; }
.sobre2-foto h2 { max-width: 24ch; }
.sobre2-foto .sub, .sobre2-foto .sobre2-col > p:not(.sub):not(.s2-res-label) { max-width: 58ch; }
.sobre2-foto .s2-stats { grid-template-columns: 1fr 1fr; }
.s2-retrato { position: sticky; top: 100px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 27, 45, 0.18); }
.s2-retrato img { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  .sobre2-foto { grid-template-columns: 1fr; }
  .s2-retrato { position: static; max-width: 460px; margin-inline: auto; order: -1; }
}

/* ---- card do selo Elite acompanha a rolagem, como o retrato ---- */
.c-side { position: sticky; top: 100px; }
@media (max-width: 900px) { .c-side { position: static; } }

/* ---- correção do sticky: o item do grid estica, o filho é que gruda ---- */
.consult-grid { align-items: stretch; }
.c-side { position: static; }
.c-side .c-card { position: sticky; top: 100px; }
.sobre2-foto { align-items: stretch; }
.s2-retrato { position: static; box-shadow: none; border-radius: 0; overflow: visible; }
.s2-retrato picture { position: sticky; top: 100px; display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 27, 45, 0.18); }
@media (max-width: 980px) { .s2-retrato picture { position: static; } }
@media (max-width: 900px) { .c-side .c-card { position: static; } }

/* ---- as duas portas: identidades distintas ---- */
.porta--time { background: var(--cobalto); }
.porta--time::before { background: radial-gradient(ellipse 460px 340px at 88% 6%, rgba(255,255,255,0.22), transparent 66%); }
.porta--time .p-num { color: rgba(255,255,255,0.55); }
.porta--time .p-sub { color: rgba(255,255,255,0.9); }
.porta--time .p-desc { color: rgba(255,255,255,0.88); }
.porta--time .p-cta { border-bottom-color: #fff; }
.porta--time:hover { box-shadow: 0 22px 50px rgba(27,71,242,0.38); }

.porta--operacao { background: var(--deep); border: 1px solid rgba(255,255,255,0.14); }
.porta--operacao::before { background: radial-gradient(ellipse 420px 320px at 88% 8%, rgba(27,71,242,0.28), transparent 68%); }
.porta--operacao .p-num { color: #7C9BFF; }
.porta--operacao .p-desc-top { color: var(--azul-claro); }
.porta--operacao .p-cta { border-bottom-color: var(--cobalto); }

/* formatos diferentes: a porta 01 (conversão nº1) ganha mais presença */
.portas-grid { grid-template-columns: 1.08fr 0.92fr; align-items: stretch; }
.porta--time { padding: clamp(32px, 3.8vw, 52px); }
.porta { display: flex; flex-direction: column; }
.porta .p-cta { margin-top: auto; padding-top: 22px; align-self: flex-start; }
@media (max-width: 900px) { .portas-grid { grid-template-columns: 1fr; } }

/* ---- etiqueta que amarra a seção à sua porta ---- */
.tag-porta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 18px 9px 10px; border-radius: 999px; margin-bottom: 6px; }
.tag-porta b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.tag-porta--time { background: var(--cobalto); color: #fff; }
.tag-porta--time b { background: rgba(255,255,255,0.22); color: #fff; }
.tag-porta--operacao { background: var(--deep); color: #fff; }
.tag-porta--operacao b { background: var(--cobalto); color: #fff; }
/* faixa escura: etiqueta com contraste próprio */
.depo-band .tag-porta--time { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.depo-band .tag-porta--time b { background: var(--cobalto); }

/* ---- trajetória: linha do tempo da carreira ---- */
.traj { margin-top: clamp(56px, 6vw, 84px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.traj-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalto); margin: 0 0 34px; }
.traj-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.traj-rail::before { content: ""; position: absolute; left: 7px; right: 0; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(20,27,45,0.14) 0%, rgba(27,71,242,0.18) 46%, var(--cobalto) 83.3%, rgba(27,71,242,0) 100%); }
.traj-item { position: relative; padding-right: 22px; }
.traj-item::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--sail); border: 2px solid rgba(20,27,45,0.26); margin: 16px 0 22px; position: relative; z-index: 1; }
.traj-item--own::before { background: var(--cobalto); border-color: var(--cobalto); }
.traj-item--now::before { box-shadow: 0 0 0 6px rgba(27,71,242,0.16); }
.t-ano { display: block; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 25px); line-height: 1; color: var(--muted); }
.traj-item--own .t-ano { color: var(--cobalto); }
.t-org { display: block; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.t-role { display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.traj-legenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 36px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.traj-legenda .lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.traj-legenda .lg--own { background: var(--cobalto); }
.traj-legenda .lg--emp { background: var(--sail); border: 2px solid rgba(20,27,45,0.26); margin-left: 20px; }

@media (max-width: 900px) {
  .traj-rail { grid-template-columns: 1fr; gap: 0; }
  .traj-rail::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(20,27,45,0.14), var(--cobalto)); }
  .traj-item { padding: 0 0 26px 34px; }
  .traj-item::before { position: absolute; left: 0; top: 6px; margin: 0; }
  .t-ano { font-size: 18px; margin-bottom: 4px; }
}

/* ---- trajetória rev.2: chips de logo sobre a linha ---- */
.traj-rail { grid-template-columns: repeat(6, 1fr); gap: 0 18px; }
.traj-rail::before { top: 27px; left: 28px; right: 28px; }
.traj-item::before { display: none; }
.t-chip { display: block; width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid rgba(20,27,45,0.12); box-shadow: 0 3px 10px rgba(20,27,45,0.07); overflow: hidden; position: relative; z-index: 1; margin-bottom: 20px; }
.t-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.traj-item--own .t-chip { border: 2px solid var(--cobalto); box-shadow: 0 4px 14px rgba(27,71,242,0.24); }
.traj-item--now .t-chip { box-shadow: 0 4px 14px rgba(27,71,242,0.24), 0 0 0 5px rgba(27,71,242,0.12); }
.traj-item { padding-right: 4px; }
.t-ano { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; }
.traj-item--own .t-ano { color: var(--cobalto); }
.t-org { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); margin-bottom: 4px; }
.t-role { display: block; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 7px; }
.t-desc { display: block; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.t-desc strong { color: var(--ink); font-weight: 700; }

/* ---- em paralelo: ensino e mentoria ---- */
.paralelo { margin-top: 46px; padding-top: 34px; border-top: 1px dashed rgba(20,27,45,0.14); }
.par-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.par-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.par-card { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.par-card .t-chip { margin-bottom: 0; flex: 0 0 56px; }
.par-org { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 3px; }
.par-role { display: block; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--cobalto); margin-bottom: 7px; }
.par-desc { display: block; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---- resultados em faixa de largura total ---- */
.s2-resultados { margin-top: clamp(52px, 5vw, 76px); }
.s2-resultados .s2-stats { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .traj-rail { gap: 0; }
  .traj-rail::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .traj-item { padding: 0 0 30px 76px; position: relative; }
  .t-chip { position: absolute; left: 0; top: 0; margin: 0; }
  .par-grid { grid-template-columns: 1fr; }
  .s2-resultados .s2-stats { grid-template-columns: 1fr 1fr; }
}

/* ---- trajetória rev.3: segmentos de linha entre chips ---- */
@media (min-width: 901px) {
  .traj-rail::before { display: none; }
  .traj-item { position: relative; }
  .traj-item::after { content: ""; position: absolute; left: 28px; top: 27px; width: calc(100% + 18px); height: 2px; z-index: 0; }
  .traj-item:last-child::after { display: none; }
  .traj-item:nth-child(1)::after { background: rgba(20,27,45,0.13); }
  .traj-item:nth-child(2)::after { background: rgba(27,71,242,0.22); }
  .traj-item:nth-child(3)::after { background: rgba(27,71,242,0.36); }
  .traj-item:nth-child(4)::after { background: rgba(27,71,242,0.54); }
  .traj-item:nth-child(5)::after { background: rgba(27,71,242,0.78); }
}
/* legenda com o mesmo vocabulário dos chips */
.traj-legenda { gap: 9px; margin-top: 30px; }
.traj-legenda .lg { width: 16px; height: 16px; border-radius: 5px; background: #fff; }
.traj-legenda .lg--own { border: 2px solid var(--cobalto); box-shadow: 0 2px 6px rgba(27,71,242,0.22); }
.traj-legenda .lg--emp { border: 1px solid rgba(20,27,45,0.16); box-shadow: 0 1px 4px rgba(20,27,45,0.07); margin-left: 26px; }

/* ---- formatos: escada de profundidade ---- */
.formatos { margin-top: clamp(46px, 4.5vw, 68px); background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(30px, 3.2vw, 46px); box-shadow: 0 10px 34px rgba(20,27,45,0.05); }
.f-head { max-width: 640px; margin-bottom: clamp(28px, 3vw, 40px); }
.f-titulo { font-family: var(--sans); font-size: clamp(20px, 1.95vw, 26px); font-weight: 800; line-height: 1.24; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; text-transform: none; }
.f-sub { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.f-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.f-card { padding: 4px 30px; border-left: 1px solid var(--line); }
.f-card:first-child { padding-left: 0; border-left: 0; }
.f-card:last-child { padding-right: 0; }
.f-escala { display: flex; align-items: flex-end; gap: 4px; height: 20px; margin-bottom: 16px; }
.f-escala i { width: 7px; border-radius: 2px; background: rgba(20,27,45,0.13); }
.f-escala i:nth-child(1) { height: 9px; }
.f-escala i:nth-child(2) { height: 14px; }
.f-escala i:nth-child(3) { height: 20px; }
.f-escala i.on { background: var(--cobalto); }
.f-n { display: block; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); color: var(--ink); line-height: 1.1; margin-bottom: 6px; }
.f-dur { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cobalto); margin-bottom: 12px; }
.f-d { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted); }
.f-nota { margin: clamp(28px, 3vw, 38px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 14px; color: var(--muted); }
.f-nota strong { color: var(--ink); font-weight: 700; }

@media (max-width: 860px) {
  .f-grid { grid-template-columns: 1fr; }
  .f-card { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .f-card:first-child { padding-top: 0; border-top: 0; }
}

/* ---- cards de treinamento rev.2: para quem / o que muda / módulos ---- */
.tr-card { padding: clamp(28px, 3vw, 40px); overflow: hidden; }
/* número vira marca d'água, não título */
.tr-num { position: absolute; top: 18px; right: 24px; font-size: clamp(52px, 5.4vw, 76px); line-height: 1; color: rgba(27,71,242,0.09); pointer-events: none; }
.tr-card.destaque .tr-num { color: rgba(124,155,255,0.16); }

.tr-quem { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cobalto); background: rgba(27,71,242,0.08); border-radius: 999px; padding: 7px 14px; margin-bottom: 16px; align-self: flex-start; position: relative; z-index: 1; }
.tr-card.destaque .tr-quem { color: var(--azul-claro); background: rgba(157,185,255,0.13); }

.tr-card h3 { margin: 0 0 14px; position: relative; z-index: 1; }

/* o que muda: a promessa, com peso visual próprio */
.tr-muda { position: relative; z-index: 1; margin: 0 0 26px; padding-left: 18px; border-left: 3px solid var(--cobalto); font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.tr-card.destaque .tr-muda { border-left-color: #7C9BFF; color: rgba(255,255,255,0.94); }

.tr-mods-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tr-card.destaque .tr-mods-label { color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.14); }

/* módulos numerados, com filete entre eles */
.tr-mods { counter-reset: mod; margin: 0 0 28px; display: block; }
.tr-mods li { counter-increment: mod; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: #454B62; }
.tr-mods li:last-child { border-bottom: 0; }
.tr-mods li::before { content: counter(mod, decimal-leading-zero); border: 0; width: auto; height: auto; top: 13px; left: 0; font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--cobalto); opacity: 0.75; }
.tr-card.destaque .tr-mods li { border-bottom-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.76); }
.tr-card.destaque .tr-mods li::before { color: #7C9BFF; opacity: 1; }

/* chamada por card */
.tr-cta { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--cobalto); text-decoration: none; border-bottom: 2px solid rgba(27,71,242,0.35); padding-bottom: 3px; transition: border-color .18s ease, color .18s ease; }
.tr-cta:hover { border-bottom-color: var(--cobalto); }
.tr-card.destaque .tr-cta { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.tr-card.destaque .tr-cta:hover { border-bottom-color: #fff; }

/* selo do card em destaque */
.tr-selo { position: absolute; top: 0; left: clamp(28px, 3vw, 40px); font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); background: #F5C542; border-radius: 0 0 8px 8px; padding: 7px 13px 6px; z-index: 2; }
.tr-card.destaque { padding-top: calc(clamp(28px, 3vw, 40px) + 12px); }

@media (max-width: 980px) {
  .tr-grid { grid-template-columns: 1fr !important; }
}

/* correções: marcador nativo do <ol> e colisão com a marca d'água */
.tr-mods { list-style: none; padding-left: 0; }
.tr-mods li::marker { content: none; }
.tr-quem { max-width: 68%; }
.tr-num { top: 14px; right: 22px; }

/* ---- fase da carreira acima do logo ---- */
.t-fase { display: block; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; line-height: 1; }
.traj-item--now .t-fase { color: var(--cobalto); }
@media (min-width: 901px) { .traj-item::after { top: 54px; } }
@media (max-width: 900px) {
  .traj-rail::before { top: 34px; }
  .traj-item { padding-left: 76px; }
  .t-fase { position: absolute; left: 0; top: 0; width: 56px; font-size: 9px; letter-spacing: 0.06em; margin: 0; }
  .t-chip { top: 24px; }
}

/* ---- trajetória rev.4: sem legenda, sem destaque em azul ---- */
.traj-legenda { display: none; }
.traj-item--own .t-chip,
.traj-item--now .t-chip { border: 1px solid rgba(20,27,45,0.12); box-shadow: 0 3px 10px rgba(20,27,45,0.07); }
.traj-item--own .t-ano,
.traj-item--now .t-ano { color: var(--muted); }
.traj-item--now .t-fase { color: var(--ink); }
@media (min-width: 901px) {
  .traj-item:nth-child(1)::after,
  .traj-item:nth-child(2)::after,
  .traj-item:nth-child(3)::after,
  .traj-item:nth-child(4)::after,
  .traj-item:nth-child(5)::after { background: rgba(20,27,45,0.13); }
}
/* fase da carreira em negrito, na cor do texto */
.t-fase { color: var(--ink); font-weight: 800; }
/* paralelo: uma linha por atuação, sem azul */
.par-role { color: var(--muted); font-weight: 400; font-size: 13.5px; line-height: 1.55; margin-bottom: 0; }

/* nome das empresas na sans, não na serifada */
.t-org { font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.par-org { font-family: var(--sans); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

/* ---- faixas escuras viram painéis sobre fundo claro contínuo ---- */
.consult, .conteudos { background: var(--sail) !important; }
.depo-band, .ia-band { background: var(--sail); padding-block: clamp(30px, 3.4vw, 52px); }
.ia-band::before { display: none; }
.depo-band > .wrap, .ia-band > .wrap {
  background: var(--deep);
  border-radius: clamp(26px, 3vw, 44px);
  padding: clamp(44px, 5vw, 78px) clamp(26px, 3.4vw, 56px);
  overflow: hidden;
  position: relative;
}
.ia-band > .wrap { background:
  radial-gradient(ellipse 900px 520px at 82% -6%, rgba(27,71,242,0.30), transparent 62%),
  radial-gradient(ellipse 700px 460px at 6% 104%, rgba(27,71,242,0.16), transparent 60%),
  var(--deep); }
.depo-band h2 { color: #fff; font-size: clamp(26px, 3.2vw, 42px); margin: 14px 0 0; max-width: 22ch; }
.depo-band .nps-row { margin-top: clamp(30px, 3.4vw, 46px); }

/* sem a marca d'água, a etiqueta pode ocupar a largura toda */
.tr-quem { max-width: 100%; }

/* três vídeos: volta para grade de 3 colunas */
.vid-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: none; }
.vid-card h3 { font-size: 16px; }
@media (max-width: 980px) { .vid-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .vid-grid { grid-template-columns: 1fr !important; } }

/* ---- blog em breve: captura de e-mail ---- */
.blog-soon { margin-top: clamp(44px, 5vw, 72px); background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(30px, 3.4vw, 50px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 60px); align-items: center; text-align: left; box-shadow: 0 10px 34px rgba(20,27,45,0.05); }
.bs-badge { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalto); background: rgba(27,71,242,0.09); border-radius: 999px; padding: 7px 15px; margin-bottom: 16px; }
.blog-soon h3 { font-family: var(--sans); font-size: clamp(21px, 2.1vw, 28px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.22; color: var(--ink); margin: 0 0 12px; }
.bs-txt p { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.bs-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.bs-form input { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--sail); border: 1px solid rgba(20,27,45,0.13); border-radius: 12px; padding: 15px 18px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease; }
.bs-form input::placeholder { color: #8A90A0; }
.bs-form input:focus { outline: 0; border-color: var(--cobalto); box-shadow: 0 0 0 3px rgba(27,71,242,0.14); background: #fff; }
.bs-form button { font-family: var(--sans); font-size: 14px; font-weight: 700; color: #fff; background: var(--cobalto); border: 0; border-radius: 12px; padding: 15px 24px; cursor: pointer; white-space: nowrap; transition: background .18s ease, transform .18s ease; }
.bs-form button:hover { background: var(--cobalto-2); transform: translateY(-1px); }
.bs-nota, .bs-ok { grid-column: 1 / -1; margin: 2px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bs-ok { color: var(--cobalto); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .blog-soon { grid-template-columns: 1fr; gap: 26px; }
  .bs-form { grid-template-columns: 1fr; }
}

/* mais ar entre a etiqueta de porta e o título da seção */
.tag-porta { margin-bottom: 20px; }
.tag-porta + h2 { margin-top: 0; }
.depo-band h2 { margin-top: 0; }

/* ---- trajetória rev.5: uma âncora por coluna, não três ---- */
.t-fase { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; color: var(--muted); }
.t-ano { font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: #8A90A0; margin-bottom: 4px; }
.t-org { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.t-role { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.par-org { font-weight: 700; }

/* ---- vídeos: capa limpa, player só no clique ---- */
.vid-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--deep); cursor: pointer; display: block; overflow: hidden; }
.vid-play picture, .vid-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-play img { transition: transform .4s ease, filter .3s ease; }
.vid-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,27,45,0) 45%, rgba(20,27,45,0.34) 100%); opacity: 0; transition: opacity .3s ease; }
.vp-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(20,27,45,0.62); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; padding-left: 4px; transition: background .22s ease, transform .22s ease; z-index: 1; }
.vid-card:hover .vid-play img { transform: scale(1.04); }
.vid-card:hover .vid-play::after { opacity: 1; }
.vid-card:hover .vp-btn { background: var(--cobalto); transform: translate(-50%, -50%) scale(1.08); }
.vid-play:focus-visible { outline: 3px solid var(--cobalto); outline-offset: -3px; }

/* ============================================================
   TELAS GRANDES: o layout parava de crescer acima de 1440px
   ============================================================ */
@media (min-width: 1600px) {
  :root { --w: 1340px; --gut: 56px; }
  .hero2-in { max-width: 1560px; }
  .hero2 h1 { font-size: clamp(34px, min(4.5vw, 8.4vh), 84px); }
  .hero2 .lead { font-size: 19px; max-width: 48ch; }
  .hero2-ctas .h2-btn { font-size: 15px; padding: 17px 32px; }
}
@media (min-width: 1920px) {
  :root { --w: 1460px; --gut: 64px; }
  .hero2-in { max-width: 1760px; }
  .hero2 h1 { font-size: clamp(34px, min(4.4vw, 9vh), 88px); }
  .hero2 .lead { font-size: 20px; }
  .hdr-in { max-width: 1760px; }
}
@media (min-width: 2400px) {
  :root { --w: 1560px; }
  .hero2-in { max-width: 1960px; }
  .hero2 h1 { font-size: min(4.2vw, 9.4vh, 92px); }
  .hdr-in { max-width: 1960px; }
}

/* linhas de texto não podem esticar junto com o container */
.sobre2-col p, .consult .sub, .consult p:not(.c-card p) { max-width: 62ch; }
.trein .sub, .portas .sub, .exper .sub, .conteudos .sub { max-width: 68ch; }
.tr-muda, .tr-mods li, .f-d { max-width: 46ch; }

/* tetos fixos que impediam o conteúdo de crescer junto com a tela */
.sobre2-foto { max-width: none; }
@media (min-width: 1600px) {
  .hdr-in { max-width: 1560px; }
  .sobre2-foto { grid-template-columns: 1.15fr 0.85fr; }
  .form-card { max-width: 820px; }
}

/* o carrossel de logos é mais largo que a tela de propósito: contê-lo */
.marquee { overflow: hidden; }

/* ============================================================
   MOBILE — precisa vir por último: as regras de 6 colunas da
   trajetória foram escritas depois do media query original e
   estavam vencendo no celular, empurrando a página na horizontal
   ============================================================ */
@media (max-width: 900px) {
  .traj-rail { grid-template-columns: 1fr !important; gap: 0; }
  .traj-rail::before { display: block; left: 27px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; background: rgba(20,27,45,0.13); }
  .traj-item { position: relative; padding: 0 0 30px 76px; }
  .traj-item::after { display: none; }
  .t-fase { position: static; width: auto; margin: 0 0 5px; font-size: 10px; letter-spacing: 0.1em; }
  .t-chip { position: absolute; left: 0; top: 0; margin: 0; }
  .t-ano { margin-bottom: 3px; }
}

/* ============================================================
   HERO · nome como manchete (capa D), paleta atual
   ============================================================ */
.heroD { position: relative; background: var(--deep); color: #fff; overflow: hidden; padding-block: 0 !important; }
.heroD::before { content: ''; position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(ellipse 900px 620px at 78% 8%, rgba(27,71,242,0.20), transparent 62%),
  radial-gradient(ellipse 700px 520px at 4% 92%, rgba(27,71,242,0.12), transparent 60%); }
.heroD-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr 0.94fr;
  align-items: center; gap: clamp(32px, 4.5vw, 70px); max-width: 1440px; margin-inline: auto;
  min-height: 100svh; padding: clamp(120px, 13vh, 168px) var(--gut) clamp(96px, 11vh, 132px); }
.heroD-txt { max-width: 720px; }

.heroD h1 { font-family: var(--sans); font-size: clamp(46px, min(6.4vw, 13.5vh), 108px); font-weight: 800;
  line-height: 0.86; letter-spacing: -0.055em; color: #fff; text-transform: lowercase; }
.heroD h1 .pt { color: var(--cobalto); }
.hd-tese { font-family: var(--serif); font-size: clamp(19px, min(1.85vw, 3.5vh), 29px); font-weight: 500;
  line-height: 1.32; letter-spacing: -0.01em; color: #fff; max-width: 24ch; margin-top: clamp(22px, 3.4vh, 34px); }
.hd-tese em { font-style: italic; color: #7C9BFF; }
.hd-desc { font-size: clamp(15px, 1.15vw, 16.5px); font-weight: 700; line-height: 1.55; color: #fff;
  max-width: 46ch; margin-top: clamp(20px, 3vh, 30px); }
.hd-ctx { font-size: clamp(14.5px, 1.1vw, 15.5px); line-height: 1.62; color: rgba(255,255,255,0.66);
  max-width: 48ch; margin-top: 12px; }
.hd-ctx strong { color: rgba(255,255,255,0.9); font-weight: 600; }

.hd-ctas { margin-top: clamp(26px, 3.8vh, 38px); display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); flex-wrap: wrap; }
.hd-btn { display: inline-block; background: var(--cobalto); color: #fff; font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 19px 32px; text-decoration: none;
  transition: background .18s ease, transform .18s ease; }
.hd-btn:hover { background: var(--cobalto-2); transform: translateY(-2px); }
.hd-lnk { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.42); padding-bottom: 5px; transition: border-color .18s ease; }
.hd-lnk:hover { border-bottom-color: #fff; }

.heroD-foto { position: relative; align-self: center; }
.heroD-foto img { position: relative; z-index: 1; width: 100%; max-height: 74svh; aspect-ratio: 4 / 4.6;
  object-fit: cover; object-position: 56% 16%; filter: contrast(1.06); }
.hd-bloco { position: absolute; right: -26px; bottom: -26px; width: 62%; height: 64%; background: var(--cobalto); z-index: 0; }

.heroD-pe { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.42); }
.heroD .scroll-hint { bottom: 62px; }

@media (min-width: 1600px) { .heroD-in, .heroD-pe { max-width: 1560px; } }
@media (min-width: 1920px) { .heroD-in, .heroD-pe { max-width: 1760px; } .heroD h1 { font-size: min(6.2vw, 13.5vh, 118px); } }
@media (min-width: 2400px) { .heroD-in, .heroD-pe { max-width: 1960px; } }

@media (max-width: 1000px) {
  .heroD-in { grid-template-columns: 1fr; min-height: auto; gap: 40px;
    padding: clamp(112px, 16vh, 140px) var(--gut) clamp(72px, 10vh, 96px); }
  .heroD-foto { order: -1; max-width: 420px; }
  .heroD-foto img { max-height: none; aspect-ratio: 4 / 4.2; }
  .hd-bloco { right: -14px; bottom: -14px; }
  .heroD-pe { position: static; margin-top: 40px; padding-bottom: 30px; font-size: 10px; letter-spacing: 0.14em; }
  .heroD .scroll-hint { display: none; }
}

/* hero D: acertos finais */
.heroD .scroll-hint { display: none; }
@media (max-width: 1000px) {
  .heroD-foto { order: 0; max-width: none; margin-top: 8px; }
  .heroD-foto img { aspect-ratio: 4 / 3.3; object-position: 56% 14%; }
  .hd-bloco { width: 54%; height: 58%; }
}

/* o atributo height="2048" vira altura CSS e anula a aspect-ratio */
.heroD-foto img { height: auto; }

/* a regra de chip absoluto era ampla demais e arrancava as logos
   dos cards "Em paralelo", jogando-as no topo da página no mobile */
@media (max-width: 900px) {
  .par-card { position: relative; }
  .par-card .t-chip { position: static; left: auto; top: auto; flex: 0 0 56px; }
}

/* ============================================================
   HERO · adaptado à linguagem suave do resto do site
   ============================================================ */
/* botões voltam à cápsula padrão */
.hd-ctas { gap: 14px; }
.hd-ctas .h2-btn { display: inline-block; text-decoration: none; }
.hd-ctas .h2-btn.ghost { padding: 15px 32px; }

/* foto com canto arredondado, como as demais imagens do site */
.heroD-foto img { border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.34); }
.hd-bloco { border-radius: 18px; }

/* faixa do pé: sai a mono, entra o mesmo rótulo em sans do resto do site */
.heroD-pe { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5); }
.hd-cred { color: rgba(255,255,255,0.58); }

/* o ponto final do nome ganha o mesmo arredondamento visual do conjunto */
.heroD h1 { letter-spacing: -0.05em; }

/* ════════════════════════════════════════════════════════════
   SISTEMA VISUAL — derivado da capa, aplicado ao site inteiro
   Tokens únicos para raio, acento, rótulo, título e sombra.
   Qualquer peça nova deve usar estes valores.
   ════════════════════════════════════════════════════════════ */
:root {
  --r-1: 14px;   /* chips e peças pequenas */
  --r-2: 18px;   /* cards e imagens — o raio da foto da capa */
  --r-3: 22px;   /* painéis grandes */
  --azul-claro: #7C9BFF;               /* acento sobre fundo escuro (o da capa) */
  --sombra-card: 0 10px 34px rgba(20, 27, 45, 0.06);
  --sombra-foto: 0 24px 60px rgba(20, 27, 45, 0.18);
}

/* ── 1. TÍTULOS: uma escala só ─────────────────────────────── */
.exper h2, .sobre2 h2, .portas h2, .trein h2, .depo-band h2, .consult h2,
.ia-band h2, .conteudos h2 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; letter-spacing: -0.032em;
}
/* o toque serifado em itálico é o eco da tese da capa */
.serif-touch { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -0.01em; }

/* ── 2. ACENTO: dois valores, não sete ─────────────────────── */
.ia-band .kicker, .ia-band h2 .hl, .depo-band .kicker,
.tr-card.destaque .tr-quem, .tr-card.destaque .tr-mods li::before,
.c-card .kicker, .hd-tese em { color: var(--azul-claro); }
.tr-card.destaque .tr-muda { border-left-color: var(--azul-claro); }
.hl { color: var(--cobalto); }

/* ── 3. RÓTULOS: uma especificação ─────────────────────────── */
.kicker, .traj-label, .par-label, .vid-cat, .tr-quem, .s2-res-label,
.hd-local, .hd-cred, .f-dur, .tag-porta, .bs-badge, .tr-mods-label {
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.bs-badge, .tag-porta { font-weight: 700; }

/* ── 4. RAIOS: três tokens ─────────────────────────────────── */
.t-chip, .vid-card, .par-card .t-chip { border-radius: var(--r-1); }
.tr-card, .porta, .par-card, .vid-card, .depo-card, .c-card, .nps-big,
.s2-stats > div, .heroD-foto img, .hd-bloco, .s2-retrato picture,
.ia-caso, .certs-grid img { border-radius: var(--r-2); }
.formatos, .blog-soon, .form-card { border-radius: var(--r-3); }
.f-card { border-radius: 0; }  /* colunas internas do painel, sem card próprio */

/* ── 5. SOMBRAS: cards com o mesmo peso ────────────────────── */
.tr-card, .par-card, .vid-card, .formatos, .blog-soon { box-shadow: var(--sombra-card); }
.tr-card.destaque, .porta { box-shadow: none; }
.s2-retrato picture { box-shadow: var(--sombra-foto); }

/* ── 6. ASSINATURA GRÁFICA DA CAPA: bloco de cor deslocado ──
      o retrato do Sobre repete o gesto da foto do hero        */
.s2-retrato { position: relative; }
.s2-retrato picture { position: sticky; z-index: 1; }
.s2-retrato::after {
  content: ''; position: absolute; right: -22px; bottom: -22px;
  width: 58%; height: 42%; background: var(--cobalto);
  border-radius: var(--r-2); z-index: 0;
}
@media (max-width: 980px) { .s2-retrato::after { right: -12px; bottom: -12px; } }

/* especificidade: regras antigas venciam o sistema */
.vid-card .vid-cat { font-size: 12px; letter-spacing: 0.14em; font-weight: 700; }
.ia-band .kicker, .depo-band .kicker, .c-card .kicker { font-size: 12px; letter-spacing: 0.14em; }
/* o azul claro antigo (var(--azul-claro)) some em favor do da capa */
.ia-band .sub strong, .ia-band .kicker, .ia-band h2 .hl, .tr-card.destaque .tr-meta,
.tr-card.destaque .tr-quem, .c-card strong, .depo-band .kicker, .hero-quotes .hl2,
.lang-menu em, .cs-label { color: var(--azul-claro); }

/* o bloco precisa acompanhar a foto sticky: vira sombra sólida da própria imagem */
.s2-retrato::after { display: none; }
.s2-retrato picture { box-shadow: 22px 22px 0 0 var(--cobalto), var(--sombra-foto); }
@media (max-width: 980px) { .s2-retrato picture { box-shadow: 12px 12px 0 0 var(--cobalto), var(--sombra-foto); } }

/* ════════════════════════════════════════════════════════════
   MENU FIXO
   Sobre o hero ele flutua como hoje. Ao sair do hero, encosta
   no topo e ganha barra escura com blur — a assinatura é branca
   e sumiria sobre as seções claras sem esse fundo.
   ════════════════════════════════════════════════════════════ */
.hdr { position: fixed; transition: top .3s ease, background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.hdr.rolou {
  top: 0; padding-block: 12px;
  background: rgba(20, 27, 45, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.09), 0 10px 34px rgba(20,27,45,0.22);
}
.hdr.rolou .hdr-in nav { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
/* esconde ao descer, revela ao subir: devolve altura de tela na leitura */
.hdr.oculto { transform: translateY(calc(-100% - 40px)); transition: transform .34s ease; }

/* âncoras não podem parar embaixo do menu */
#sobre, #treinamentos, #consultoria, #conteudos, #contato, #logos, #ia { scroll-margin-top: 96px; }

@media (max-width: 900px) { .hdr.rolou { padding-block: 8px; } }
@media (prefers-reduced-motion: reduce) { .hdr, .hdr.oculto { transition: none; } }

/* correção: `max-width: none` tinha anulado a margem do .wrap nesta seção */
.sobre2-foto { max-width: var(--w); }

/* ── margens casadas: menu, hero e seções na mesma coluna ── */
.hdr-in, .heroD-in, .heroD-pe { max-width: var(--w); }
@media (min-width: 1600px) { .hdr-in, .heroD-in, .heroD-pe { max-width: var(--w); } }
@media (min-width: 1920px) { .hdr-in, .heroD-in, .heroD-pe { max-width: var(--w); } }
@media (min-width: 2400px) { .hdr-in, .heroD-in, .heroD-pe { max-width: var(--w); } }

/* coluna de texto do Sobre ganha respiro: o título estava quebrando
   em 4 linhas com a serifada começando no meio da linha */
.sobre2-foto { grid-template-columns: 1.34fr 0.66fr; }
.sobre2-foto h2 { max-width: 21ch; }
@media (min-width: 1600px) { .sobre2-foto { grid-template-columns: 1.28fr 0.72fr; } }

/* neste título a serifada precisa abrir a própria linha:
   misturada com a sans no meio da linha fica confusa */
.sobre2-foto h2 .serif-touch { display: block; }

/* ── Sobre: foto estática e assinatura abaixo dela ── */
.s2-retrato picture { position: static; }
.sobre2-foto { align-items: start; }
.s2-assin-solo { display: block; width: clamp(150px, 62%, 230px); height: auto; margin: 26px 0 0; opacity: .9; }

/* ════════════════════════════════════════════════════════════
   ASSINATURA NO MENU: só depois que o nome grande sai de cena
   No topo, o h1 já é a marca. Repetir a assinatura ao lado dele
   dizia o nome duas vezes na mesma tela.
   ════════════════════════════════════════════════════════════ */
.hdr .brand { opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .32s ease, transform .32s ease; }
.hdr.rolou .brand { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hdr .brand { transition: none; } }

/* nome com iniciais maiúsculas: altura de caixa alta pede entrelinha
   um pouco maior e tracking menos apertado que a caixa baixa */
.heroD h1 { text-transform: none; line-height: 0.92; letter-spacing: -0.045em; }

/* ── mandala do método ── */
.c-mandala { margin: 0 0 26px; }
.mandala { display: block; width: 100%; height: auto; font-family: var(--sans); }
.mdl-base { fill: var(--deep); }
.mdl-seg { stroke: none; }
.mdl-seg--0 { fill: #1B2540; }
.mdl-seg--1 { fill: #141B2D; }
.mdl-quad { fill: #1E2A47; stroke: rgba(124,155,255,0.26); stroke-width: 1.5; }
.mdl-aro { fill: none; stroke: #3D63F0; stroke-width: 3; }
.mdl-nucleo { fill: #3F6BFF; }
.mdl-aro-nucleo { fill: none; stroke: rgba(255,255,255,0.32); stroke-width: 1.5; }
.mdl-lbl-ext { fill: #fff; font-size: 27px; font-weight: 700; }
.mdl-lbl-int { fill: rgba(255,255,255,0.9); font-size: 19px; font-weight: 600; }
.mdl-crm { fill: #fff; font-size: 62px; font-weight: 800; letter-spacing: -1px; }
.c-mandala figcaption { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: center; }
.c-mandala figcaption strong { color: var(--ink); font-weight: 700; }

/* logos: proporções por marca após os recortes */
.marquee-track img[alt="Suzano"] { height: 29px; max-width: 210px; }
.marquee-track img[alt="BRDE"] { height: 36px; max-width: 120px; }
.marquee-track img[alt="Copel"] { height: 34px; max-width: 130px; }
/* faixa da capa agora tem um item só */
.heroD-pe { justify-content: flex-start; }
/* chamada ao fim do Sobre */
.s2-cta { margin-top: 8px; }

/* ── as duas portas: oferta explícita e quem entrega ── */
.porta { padding: clamp(30px, 3.4vw, 46px); }
.p-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.p-num { font-family: var(--serif); font-size: 20px; line-height: 1; opacity: .75; }
.p-quem { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.p-selo { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 12px; }
.porta h3 { font-family: var(--sans); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.1; margin: 0 0 14px; }
.p-desc { font-size: 15.5px; line-height: 1.62; margin: 0; }
.p-itens { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.p-itens li { position: relative; padding: 11px 0 11px 24px; font-size: 14.5px; line-height: 1.45; }
.p-itens li + li { border-top: 1px solid; }
.p-itens li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 8px; height: 8px; border-radius: 50%; }
.p-entrega { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid; display: grid; gap: 4px; }
.p-entrega span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.p-entrega strong { font-size: 14.5px; font-weight: 700; line-height: 1.4; }

/* porta 01 · cobalto */
.porta--time .p-num, .porta--time .p-quem { color: rgba(255,255,255,0.8); }
.porta--time h3 { color: #fff; }
.porta--time .p-desc { color: rgba(255,255,255,0.9); }
.porta--time .p-itens li { color: rgba(255,255,255,0.9); }
.porta--time .p-itens li + li, .porta--time .p-entrega { border-color: rgba(255,255,255,0.2); }
.porta--time .p-itens li::before { background: rgba(255,255,255,0.75); }
.porta--time .p-entrega span { color: rgba(255,255,255,0.68); }
.porta--time .p-entrega strong { color: #fff; }

/* porta 02 · deep sea, com selo da consultoria */
.porta--operacao .p-num, .porta--operacao .p-quem { color: rgba(255,255,255,0.62); }
.porta--operacao .p-selo { background: var(--cobalto); color: #fff; }
.porta--operacao h3 { color: #fff; }
.porta--operacao .p-desc { color: rgba(255,255,255,0.72); }
.porta--operacao .p-itens li { color: rgba(255,255,255,0.78); }
.porta--operacao .p-itens li + li, .porta--operacao .p-entrega { border-color: rgba(255,255,255,0.13); }
.porta--operacao .p-itens li::before { background: var(--azul-claro); }
.porta--operacao .p-entrega span { color: rgba(255,255,255,0.5); }
.porta--operacao .p-entrega strong { color: #fff; }

.porta .p-cta { margin-top: auto; padding-top: 26px; }

/* ════════ DEPOIMENTOS DE CLIENTES ════════ */
.depo2-band { background: var(--sail); }
.d2-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 4px; }
.depo2-band h2 { max-width: 18ch; }

/* nota do marketplace: prova externa e verificável */
.d2-nota { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 16px 22px; box-shadow: var(--sombra-card); transition: transform .18s ease, box-shadow .18s ease; }
.d2-nota:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(20,27,45,0.1); }
.d2n-estrelas { color: #F5A623; font-size: 14px; letter-spacing: 1px; display: block; }
.d2n-num { font-family: var(--sans); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.d2n-txt { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.d2n-txt strong { color: var(--ink); font-weight: 700; }
.d2-nota > .d2n-estrelas { align-self: flex-start; }

.depo2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 22px);
  margin-top: clamp(30px, 3.5vw, 46px); }
.depo2 { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-2); padding: clamp(24px, 2.4vw, 32px); box-shadow: var(--sombra-card); }
.d2-titulo { font-family: var(--sans); font-size: 17px; font-weight: 800; line-height: 1.24;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; }
.d2-quote { margin: 0 0 auto; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: #454B62; quotes: '“' '”'; }
.d2-quote::before { content: open-quote; } .d2-quote::after { content: close-quote; }
.d2-autor { display: flex; align-items: center; gap: 13px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.d2-foto { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--deep); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.d2-id { display: grid; gap: 2px; min-width: 0; }
.d2-id strong { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.d2-id span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

@media (max-width: 1100px) { .depo2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .depo2-grid { grid-template-columns: 1fr; } .d2-cab { align-items: flex-start; } }

/* ── três soluções em vez de duas ── */
.portas-grid { grid-template-columns: repeat(3, 1fr); }
.porta { padding: clamp(26px, 2.6vw, 36px); }
.porta h3 { font-size: clamp(22px, 2.1vw, 28px); }
.p-desc { font-size: 14.5px; }
.p-itens li { font-size: 13.5px; padding: 10px 0 10px 22px; }
.p-entrega strong { font-size: 13.5px; }

/* 03 · conteúdos: card claro, sinaliza que é aberto e gratuito */
.porta--conteudo { background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra-card); }
.porta--conteudo .p-num, .porta--conteudo .p-quem { color: var(--muted); }
.porta--conteudo .p-selo { background: rgba(27,71,242,0.09); color: var(--cobalto); }
.porta--conteudo h3 { color: var(--ink); }
.porta--conteudo .p-desc { color: var(--muted); }
.porta--conteudo .p-itens li { color: #454B62; }
.porta--conteudo .p-itens li + li, .porta--conteudo .p-entrega { border-color: var(--line); }
.porta--conteudo .p-itens li::before { background: var(--cobalto); }
.porta--conteudo .p-entrega span { color: var(--muted); }
.porta--conteudo .p-entrega strong { color: var(--ink); }
.porta--conteudo .p-cta { color: var(--cobalto); border-bottom-color: rgba(27,71,242,0.4); }
.porta--conteudo:hover { box-shadow: 0 18px 46px rgba(20,27,45,0.12); }

/* CTA do Sobre em caixa normal */
.s2-cta { text-transform: none; font-size: 14.5px; letter-spacing: 0; }

@media (max-width: 1000px) { .portas-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   TRÊS SOLUÇÕES, TRÊS AZUIS
   A cor é escala de profundidade, não decoração:
   quanto mais escuro, maior o compromisso e a duração.
   03 gelo (aberto) · 01 elétrico (sala) · 02 profundo (projeto)
   ════════════════════════════════════════════════════════════ */
.porta { position: relative; overflow: hidden; }
/* filete no topo identifica cada bloco */
.porta::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; }

/* 01 · AZUL ELÉTRICO — energia de sala de aula */
.porta--time { background: linear-gradient(152deg, #2E5BFF 0%, #1B47F2 52%, #1539C9 100%); }
.porta--time::before { background: radial-gradient(ellipse 420px 320px at 88% 4%, rgba(255,255,255,0.22), transparent 68%); }
.porta--time::after { background: #7FA0FF; }

/* 02 · AZUL PROFUNDO — projeto longo, decisão pesada */
.porta--operacao { background: linear-gradient(152deg, #16294F 0%, #0F1D3A 55%, #0A1428 100%); border: 1px solid rgba(124,155,255,0.16); }
.porta--operacao::after { background: var(--cobalto); }

/* 03 · AZUL GELO — conteúdo aberto, sem barreira */
.porta--conteudo { background: linear-gradient(152deg, #EDF2FF 0%, #E2EAFD 100%); border: 1px solid rgba(27,71,242,0.14); }
.porta--conteudo::after { background: #9DB4F5; }
.porta--conteudo .p-num { color: #7189C4; }
.porta--conteudo .p-quem { color: #5A6B96; }
.porta--conteudo .p-selo { background: rgba(27,71,242,0.12); color: var(--cobalto); }
.porta--conteudo h3 { color: #16294F; }
.porta--conteudo .p-desc { color: #4A5878; }
.porta--conteudo .p-itens li { color: #3E4C6B; }
.porta--conteudo .p-itens li + li, .porta--conteudo .p-entrega { border-color: rgba(27,71,242,0.14); }
.porta--conteudo .p-entrega span { color: #6B7A9E; }
.porta--conteudo .p-entrega strong { color: #16294F; }
.porta--conteudo:hover { box-shadow: 0 20px 48px rgba(27,71,242,0.16); }

/* padding uniforme já que o filete ocupa o topo */
.porta { padding-top: calc(clamp(26px, 2.6vw, 36px) + 6px); }

/* ════════════════════════════════════════════════════════════
   A COR DA SOLUÇÃO SEGUE PARA A SEÇÃO DE DESTINO
   Cada card leva a uma seção. Sem isso, o sistema de cor morre
   nos cards e as seções de baixo ficam intercambiáveis.
   Três reforços: fundo, etiqueta e traço de identidade.
   ════════════════════════════════════════════════════════════ */

/* 1 · fundo em escala, ecoando os três cards */
.trein     { background: #EEF2FF !important; }  /* elétrico, mais saturado */
.consult, .depo2-band { background: #FAFBFD !important; }  /* profundo, quase branco */
.conteudos { background: #E9EFFC !important; }  /* gelo, igual ao card 03 */

/* as faixas escuras acompanham o fundo da seção que as recebe */
.depo-band { background: #EEF2FF; }
.ia-band   { background: #FAFBFD; }

/* 2 · etiqueta da solução também na seção de conteúdos */
.tag-porta--conteudo { background: #DCE5FA; color: #1B3468; }
.tag-porta--conteudo b { background: var(--cobalto); color: #fff; }

/* 3 · traço de identidade acima da etiqueta, o mesmo filete dos cards */
.trein .tag-porta, .depo-band .tag-porta, .consult .tag-porta,
.depo2-band .tag-porta, .conteudos .tag-porta { position: relative; margin-top: 20px; }
.trein .tag-porta::before, .depo-band .tag-porta::before, .consult .tag-porta::before,
.depo2-band .tag-porta::before, .conteudos .tag-porta::before {
  content: ''; position: absolute; left: 0; top: -20px; width: 52px; height: 4px; border-radius: 2px;
}
.trein .tag-porta::before, .depo-band .tag-porta::before { background: var(--cobalto); }
.consult .tag-porta::before, .depo2-band .tag-porta::before { background: #16294F; }
.conteudos .tag-porta::before { background: #9DB4F5; }
.depo-band .tag-porta::before { background: var(--azul-claro); }

/* a seção de conteúdos deixa de ser centralizada, para a etiqueta fazer sentido */
.conteudos .wrap { text-align: left; }
.conteudos .vid-grid { text-align: left; }

/* conteúdos: alinhar título e subtítulo com a etiqueta */
.conteudos h2, .conteudos .sub { text-align: left; margin-inline: 0; }
.conteudos .sub { max-width: 62ch; }
.conteudos .vid-card { background: #fff; }
.conteudos .yt-cta { margin-inline: 0; }
.conteudos .wrap > div[style*="text-align: center"] { text-align: left !important; }

/* ════════════════════════════════════════════════════════════
   TOM MAIS SÓBRIO
   O azul gelo puxava para pastel. A identidade passa a viver
   nos acentos (etiqueta e filete), não em campos de cor.
   Fundos ficam quase neutros, sentidos mais que vistos.
   ════════════════════════════════════════════════════════════ */
/* card 03 · neutro da casa, não pastel */
.porta--conteudo { background: var(--sail); border: 1px solid rgba(20,27,45,0.12); }
.porta--conteudo::after { background: #8A93A8; }
.porta--conteudo .p-num { color: #8A93A8; }
.porta--conteudo .p-quem { color: var(--muted); }
.porta--conteudo .p-selo { background: rgba(20,27,45,0.07); color: var(--muted); }
.porta--conteudo h3 { color: var(--ink); }
.porta--conteudo .p-desc, .porta--conteudo .p-itens li { color: #4A5162; }
.porta--conteudo .p-itens li + li, .porta--conteudo .p-entrega { border-color: rgba(20,27,45,0.1); }
.porta--conteudo .p-itens li::before { background: #8A93A8; }
.porta--conteudo .p-entrega span { color: var(--muted); }
.porta--conteudo .p-entrega strong { color: var(--ink); }
.porta--conteudo:hover { box-shadow: 0 18px 44px rgba(20,27,45,0.12); }

/* fundos das seções: quase imperceptíveis */
.trein     { background: #F2F4F9 !important; }
.consult, .depo2-band { background: #FAFAF9 !important; }
.conteudos { background: var(--sail) !important; }
.depo-band { background: #F2F4F9; }
.ia-band   { background: #FAFAF9; }

/* etiqueta e filete da trilha 03 em tom neutro */
.tag-porta--conteudo { background: rgba(20,27,45,0.08); color: var(--ink); }
.tag-porta--conteudo b { background: var(--deep); color: #fff; }
.conteudos .tag-porta::before { background: #8A93A8; }
.conteudos .vid-card { background: #fff; }

/* ── cores sólidas: sem degradê nos cards ── */
.porta--time      { background: #1B47F2; }
.porta--operacao  { background: #142544; border: 1px solid rgba(124,155,255,0.18); }
.porta--conteudo  { background: var(--sail); border: 1px solid rgba(20,27,45,0.12); }
.porta::before    { display: none; }

/* ── módulos recolhidos: ementa é detalhe de quem já decidiu ── */
.tr-det { margin-bottom: 24px; }
.tr-det > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 0; transition: color .15s ease; }
.tr-det > summary::-webkit-details-marker { display: none; }
.tr-det > summary::after { content: '+'; margin-left: auto; font-size: 16px; font-weight: 700; line-height: 1; opacity: .7; }
.tr-det[open] > summary::after { content: '–'; }
.tr-det > summary:hover { color: var(--cobalto); }
.tr-det .tr-mods { margin-bottom: 0; }
.tr-card.destaque .tr-det > summary { border-bottom-color: rgba(255,255,255,0.14); }
.tr-card.destaque .tr-det > summary:hover { color: var(--azul-claro); }

/* ── respiro geral um pouco menor ── */
section { padding-block: clamp(40px, 4.8vw, 72px); }
.depo2-band { padding-block: clamp(36px, 4.2vw, 60px); }

/* ── números junto dos depoimentos: prova concentrada ── */
.d2-numeros { background: #16294F; border-radius: var(--r-3);
  padding: clamp(28px, 3vw, 40px) clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(26px, 3vw, 38px); }
.d2n + .d2n { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: clamp(20px, 2.4vw, 34px); }
.d2n .n { display: block; font-family: var(--sans); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1; color: #fff; }
.d2n .l { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.7); }
.d2-nota-nps { margin: 14px 0 0; font-size: 12px; color: var(--muted); opacity: .8; }
.depo2-grid { margin-top: clamp(24px, 2.6vw, 34px); }
@media (max-width: 900px) { .d2-numeros { grid-template-columns: 1fr; }
  .d2n + .d2n { border-left: 0; padding-left: 0; padding-top: clamp(18px, 2.4vw, 26px);
    border-top: 1px solid rgba(255, 255, 255, 0.16); } }

/* link do canal dentro do texto */
.hl-link { color: var(--cobalto); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(27,71,242,0.35); transition: border-color .18s ease; }
.hl-link:hover { border-bottom-color: var(--cobalto); }

/* ── credencial HubSpot: selo Elite e nota do marketplace juntos ── */
.d2-cab { display: block; }
.depo2-band h2 { max-width: 22ch; }
.d2-cred { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(22px, 2.4vw, 30px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  padding: clamp(18px, 1.8vw, 24px) clamp(22px, 2.2vw, 30px); box-shadow: var(--sombra-card);
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.d2-cred:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(20,27,45,0.1); }
.d2c-selo { width: clamp(52px, 5vw, 66px); height: auto; display: block; }
.d2c-txt { display: grid; gap: 3px; }
.d2c-txt strong { font-family: var(--sans); font-size: clamp(15px, 1.3vw, 17px); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.d2c-txt > span { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 52ch; }
.d2c-nota { display: grid; justify-items: end; gap: 1px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.d2c-nota .d2n-estrelas { color: #F5A623; font-size: 12px; letter-spacing: 1px; }
.d2c-nota .d2n-num { font-family: var(--sans); font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.d2c-nota .d2n-txt { font-size: 11.5px; color: var(--muted); }
@media (max-width: 820px) {
  .d2-cred { grid-template-columns: auto 1fr; gap: 16px; }
  .d2c-nota { grid-column: 1 / -1; justify-items: start; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); }
}

/* âncora nova respeita o menu fixo */
#solucoes { scroll-margin-top: 96px; }

/* ── Sobre mais compacto: o gordo era o respiro entre blocos ── */
.traj { margin-top: clamp(34px, 3.4vw, 48px); padding-top: clamp(28px, 2.8vw, 38px); }
.traj-label { margin-bottom: 24px; }
.paralelo { margin-top: 30px; padding-top: 24px; }
.par-label { margin-bottom: 16px; }
.par-linhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.par-linhas li { display: flex; align-items: center; gap: 14px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.par-linhas .t-chip { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; }
.par-linhas strong { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) { .par-linhas { grid-template-columns: 1fr; } }

/* rótulos das duas fileiras de números na seção de prova */
.d2-rot { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: clamp(24px, 2.6vw, 34px) 0 12px; }
.d2-numeros { margin-top: 0; }

/* credencial Elite depois dos depoimentos, com a chamada fechando a seção */
.d2-cred--fim { margin-top: clamp(24px, 2.6vw, 34px); }
.d2-cta { margin-top: clamp(22px, 2.4vw, 30px); }
.d2-cta .pill { margin-top: 0; text-transform: none; font-size: 14.5px; letter-spacing: 0; }
.d2-numeros { margin-top: clamp(22px, 2.4vw, 30px); }
/* três blocos de número, sem o NPS */
.d2-numeros { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .d2-numeros { grid-template-columns: 1fr; } }

/* ════════ TREINAMENTOS EM LINHAS EXPANSÍVEIS ════════ */
.tr-linhas { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }
.tr-linha { border-bottom: 1px solid var(--line); }
.tr-linha > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; padding: clamp(22px, 2.2vw, 30px) 4px;
  transition: background .18s ease; }
.tr-linha > summary::-webkit-details-marker { display: none; }
.tr-linha > summary:hover { background: rgba(27,71,242,0.03); }
.trl-esq { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); flex-wrap: wrap; min-width: 0; }
.trl-quem { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--cobalto); background: rgba(27,71,242,0.08);
  border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.trl-titulo { font-family: var(--sans); font-size: clamp(19px, 1.9vw, 25px); font-weight: 800;
  letter-spacing: -0.025em; color: var(--ink); }
.trl-selo { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--deep); background: #F5C542; border-radius: 999px; padding: 5px 11px; }
.trl-dir { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.trl-mods { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); }
.trl-sinal { position: relative; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(20,27,45,0.2); flex-shrink: 0; transition: border-color .18s ease, background .18s ease; }
.trl-sinal::before, .trl-sinal::after { content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--ink); transition: transform .22s ease, opacity .22s ease; }
.trl-sinal::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.trl-sinal::after { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }
.tr-linha[open] .trl-sinal { border-color: var(--cobalto); background: var(--cobalto); }
.tr-linha[open] .trl-sinal::before, .tr-linha[open] .trl-sinal::after { background: #fff; }
.tr-linha[open] .trl-sinal::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.trl-corpo { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 3vw, 48px);
  align-items: start; padding: 0 4px clamp(28px, 2.8vw, 38px); }
.trl-muda { margin: 0; padding-left: 18px; border-left: 3px solid var(--cobalto);
  font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.trl-lista { counter-reset: m; list-style: none; margin: 0; padding: 0; }
.trl-lista li { counter-increment: m; position: relative; padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: #454B62; }
.trl-lista li:last-child { border-bottom: 0; }
.trl-lista li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 0; top: 11px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 800; color: var(--cobalto); opacity: .75; }
.trl-corpo .tr-cta { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 860px) {
  .tr-linha > summary { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trl-dir { width: 100%; justify-content: space-between; }
  .trl-corpo { grid-template-columns: 1fr; }
}
/* botões que devem ficar em caixa normal */
.pill--normal { text-transform: none; font-size: 14.5px; letter-spacing: 0; }

/* ════════ FAQ ════════ */
.faq { background: #FAFAF9; }
.faq-lista { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; padding: clamp(18px, 1.9vw, 24px) 4px; transition: background .18s ease; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: rgba(27,71,242,0.03); }
.faq-p { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 19px); font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.35; }
.faq-r { padding: 0 4px clamp(20px, 2vw, 26px); }
.faq-r p { margin: 0; max-width: 68ch; font-size: 15.5px; line-height: 1.68; color: #454B62; }

/* rótulo padrão também sobre fundo escuro */
.kicker--claro { color: var(--azul-claro); }
.blog-hero .kicker { display: block; margin-bottom: 20px; }
/* FAQ na largura do conteúdo, igual às demais seções */
.faq-lista { max-width: none; }

/* ════════ CONSULTORIA · layout C ════════ */
.consult .wrap { display: block; }
.cc-topo { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.cc-fig { margin: 0; max-width: 330px; justify-self: center; }
.cc-fig .mandala { width: 100%; height: auto; }
.cc-rot { margin: clamp(34px, 3.6vw, 50px) 0 18px; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fc-faixa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.fc-faixa li { position: relative; padding-right: 18px; }
.fc-faixa li::after { content: ''; position: absolute; left: 0; top: 16px; width: 100%; height: 2px;
  background: rgba(20,27,45,0.1); }
.fc-faixa li:last-child::after { display: none; }
.fc-n { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cobalto); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 800; }
.fc-faixa h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 800; color: var(--ink);
  margin: 20px 0 6px; letter-spacing: -0.015em; }
.fc-faixa p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cc-cta { margin-top: clamp(32px, 3.4vw, 44px); }
@media (max-width: 1000px) { .cc-topo { grid-template-columns: 1fr; } .fc-faixa { grid-template-columns: 1fr 1fr; gap: 26px 0; } }
@media (max-width: 620px) { .fc-faixa { grid-template-columns: 1fr; } .fc-faixa li::after { display: none; } }

/* ── avaliações do marketplace na Consultoria ── */
.mk-grid { display: grid; grid-template-columns: 0.9fr 1fr 1fr; gap: clamp(14px, 1.6vw, 20px); }
.mk-cred, .mk-rev { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  padding: clamp(20px, 2vw, 26px); box-shadow: var(--sombra-card); margin: 0; }
.mk-cred { display: grid; align-content: start; gap: 10px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease; }
.mk-cred:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20,27,45,0.1); }
.mk-selo { width: 54px; height: auto; }
.mk-nota { display: flex; align-items: baseline; gap: 10px; }
.mk-nota strong { font-family: var(--sans); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.mk-est { color: #F5A623; font-size: 12px; letter-spacing: 1px; }
.mk-txt { font-size: 13px; line-height: 1.55; color: var(--muted); }
.mk-txt strong { color: var(--ink); font-weight: 700; }
.mk-link { margin-top: 4px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--cobalto);
  border-bottom: 1px solid rgba(27,71,242,0.35); justify-self: start; padding-bottom: 3px; }
.mk-rev h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 800; color: var(--ink);
  margin: 10px 0 8px; letter-spacing: -0.015em; }
.mk-rev blockquote { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: #454B62;
  quotes: '“' '”'; }
.mk-rev blockquote::before { content: open-quote; } .mk-rev blockquote::after { content: close-quote; }
.mk-rev figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink); display: grid; gap: 2px; }
.mk-rev figcaption span { font-size: 12px; font-weight: 400; color: var(--muted); }
@media (max-width: 980px) { .mk-grid { grid-template-columns: 1fr; } }
/* chamada da seção de treinamentos, no mesmo padrão da consultoria */
.tr-cta-secao { display: inline-block; margin-top: clamp(30px, 3.2vw, 42px); }

/* ── seção de logos com mais respiro ── */
.exper { padding-block: clamp(56px, 6vw, 92px); }
.exper .marquee { margin-top: clamp(44px, 4.6vw, 72px); }
.marquee-track { gap: clamp(64px, 7.5vw, 120px); }

/* ════════ TREINAMENTOS EM ABAS ════════ */
.ab-barra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 40px); }
.ab-b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15.5px;
  font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 24px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.ab-b > span { font-family: var(--serif); font-size: 14px; opacity: .5; }
.ab-b:hover { border-color: rgba(27,71,242,0.35); color: var(--ink); }
.ab-b.on { background: var(--cobalto); border-color: transparent; color: #fff; }
.ab-b.on > span { opacity: .8; }
.ab-b:focus-visible { outline: 3px solid rgba(27,71,242,0.4); outline-offset: 2px; }
.ab-selo { font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--deep); background: #F5C542; border-radius: 999px; padding: 4px 10px; margin-left: 4px; }

.ab-painel { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-3);
  padding: clamp(26px, 3vw, 42px); box-shadow: var(--sombra-card); }
.ab-p { display: none; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.6vw, 52px); }
.ab-p.on { display: grid; }
.ab-p h3 { font-family: var(--sans); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800;
  letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 12px; }
.ab-prom { padding-left: 16px; border-left: 3px solid var(--cobalto); font-size: 16px; font-weight: 600;
  line-height: 1.55; color: var(--ink); margin-bottom: 24px; }
.ab-esq .pill { margin-top: 0; }
.ab-mods { counter-reset: m; list-style: none; margin: 0; padding: 0; }
.ab-mods li { counter-increment: m; position: relative; padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: #454B62; }
.ab-mods li:last-child { border-bottom: 0; }
.ab-mods li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 0; top: 13px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 800; color: var(--cobalto); opacity: .75; }
@media (max-width: 900px) { .ab-p { grid-template-columns: 1fr; } .ab-b { font-size: 14px; padding: 11px 18px; } }
/* a DAF é bem horizontal (3,7:1): altura menor para equilibrar */
.marquee-track img[alt="DAF Caminhões"], .marquee-track img[src$="daf.svg"] { height: 30px; max-width: 130px; }
/* BTA é quase quadrada (2,6:1): altura um pouco maior para o peso bater */
.marquee-track img[alt="BTA Aditivos"], .marquee-track img[src$="bta.svg"] { height: 40px; max-width: 110px; }

/* ════════ MOSAICO "EM SALA" ════════ */
.sala-rot { margin: clamp(38px, 4vw, 54px) 0 18px; font-family: var(--sans); font-size: 12px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sala-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.sala-item { position: relative; margin: 0; border-radius: var(--r-2); overflow: hidden;
  background: var(--deep); box-shadow: var(--sombra-card); }
.sala-item img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease; }
.sala-item--alta { grid-row: span 2; aspect-ratio: 4 / 5; }
.sala-item--baixa { aspect-ratio: 4 / 3; }
.sala-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: #fff; line-height: 1.35;
  background: linear-gradient(180deg, transparent, rgba(11,16,30,0.82) 55%);
  opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease; }
.sala-item:hover img { transform: scale(1.05); }
.sala-item:hover figcaption { opacity: 1; transform: none; }
@media (hover: none) { .sala-item figcaption { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .sala-mosaico { grid-template-columns: 1fr 1fr; }
  .sala-item--alta { grid-row: span 1; }
}
/* empacotamento do mosaico: sem buracos e com altura de linha coerente */
.sala-mosaico { grid-auto-flow: dense; grid-auto-rows: 1fr; align-items: stretch; }
.sala-item--alta, .sala-item--baixa { aspect-ratio: auto; }
.sala-item--alta { grid-row: span 3; }
.sala-item--baixa { grid-row: span 2; }
.sala-mosaico { grid-auto-rows: clamp(76px, 8.2vw, 118px); }
@media (max-width: 900px) { .sala-item--alta { grid-row: span 3; } .sala-item--baixa { grid-row: span 2; } }
/* colunas equilibradas: cada uma recebe uma foto alta e uma baixa */
.sala-mosaico { grid-auto-flow: row; }
.sala-item:nth-child(1), .sala-item:nth-child(4) { grid-column: 1; }
.sala-item:nth-child(2), .sala-item:nth-child(5) { grid-column: 2; }
.sala-item:nth-child(3), .sala-item:nth-child(6) { grid-column: 3; }
@media (max-width: 900px) {
  .sala-mosaico { grid-auto-flow: dense; }
  .sala-item:nth-child(n) { grid-column: auto; }
}

/* ── fotos em uma fileira só ── */
.sala-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.sala-fila .sala-item { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .sala-fila { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sala-fila { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   FAIXA DE CHAMADA
   O botão solto no fim da seção não dizia o que acontece depois
   nem tinha âncora visual. Vira um bloco: convite + reforço + ação.
   ════════════════════════════════════════════════════════════ */
.cta-faixa { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap; margin-top: clamp(30px, 3.4vw, 44px); padding: clamp(24px, 2.6vw, 34px) clamp(26px, 2.8vw, 38px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--sombra-card); }
.ctaf-t { margin: 0; font-family: var(--sans); font-size: clamp(18px, 1.8vw, 23px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.ctaf-s { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 56ch; }
.ctaf-btn { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none;
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: #fff; background: var(--cobalto);
  border-radius: 999px; padding: 16px 30px; box-shadow: 0 8px 24px rgba(27,71,242,0.28);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.ctaf-btn:hover { background: var(--cobalto-2); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(27,71,242,0.36); }
.ctaf-seta { display: inline-block; transition: transform .22s ease; }
.ctaf-btn:hover .ctaf-seta { transform: translateX(4px); }

/* variante escura, para a consultoria */
.cta-faixa--escura { background: var(--deep); border-color: transparent; }
.cta-faixa--escura .ctaf-t { color: #fff; }
.cta-faixa--escura .ctaf-s { color: rgba(255,255,255,0.7); }

@media (max-width: 760px) {
  .cta-faixa { flex-direction: column; align-items: flex-start; }
  .ctaf-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   ÁLBUM MAIOR, EM SANGRIA, SEM BOTÃO DIREITO
   As fotos entram como fundo (não há <img> para "salvar imagem
   como"), com o menu de contexto e o arraste bloqueados.
   Isso aumenta o atrito; não é proteção absoluta.
   ════════════════════════════════════════════════════════════ */
.sala-fila { grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1vw, 14px);
  max-width: none; margin-inline: calc(50% - 50vw); padding-inline: clamp(14px, 2vw, 28px); }
.sala-fila .sala-item { aspect-ratio: 5 / 4; border-radius: var(--r-2); overflow: hidden;
  position: relative; user-select: none; -webkit-user-select: none; }
.sala-foto { position: absolute; inset: 0; background-size: cover; background-position: center;
  background-repeat: no-repeat; transition: transform .5s ease; pointer-events: none; }
.sala-item:hover .sala-foto { transform: scale(1.05); }
.sala-item figcaption { padding: 30px 18px 15px; font-size: 13px; }
@media (max-width: 900px) {
  .sala-fila { grid-template-columns: repeat(2, 1fr); margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 520px) { .sala-fila { grid-template-columns: 1fr; } }
/* álbum um pouco maior: sangria sem recuo e proporção mais alta */
.sala-fila { gap: clamp(8px, 0.8vw, 12px); padding-inline: clamp(8px, 0.9vw, 14px); }
.sala-fila .sala-item { aspect-ratio: 9 / 8; }
/* faixa do canal: mesma estrutura, identidade do YouTube no botão */
.ctaf-btn--yt { background: #FF0000; box-shadow: 0 8px 24px rgba(255,0,0,0.26); }
.ctaf-btn--yt:hover { background: #E00000; box-shadow: 0 12px 32px rgba(255,0,0,0.34); }

/* ── fora os traços azuis ── */
.trein .tag-porta::before, .depo-band .tag-porta::before, .consult .tag-porta::before,
.depo2-band .tag-porta::before, .conteudos .tag-porta::before,
.solucoes .tag-porta::before, .tag-porta::before { display: none; }
.trein .tag-porta, .depo-band .tag-porta, .consult .tag-porta,
.depo2-band .tag-porta, .conteudos .tag-porta { margin-top: 0; }
/* barra azul à esquerda da promessa nas abas */
.ab-prom { border-left: 0; padding-left: 0; }

/* ════════════════════════════════════════════════════════════
   ÁLBUM EM CARROSSEL
   Dentro da margem do conteúdo, como as logos: as fotos giram
   em vez de encolher para caber.
   ════════════════════════════════════════════════════════════ */
.sala-carrossel { position: relative; overflow: hidden; margin-inline: 0; padding-inline: 0; }
.sala-carrossel::before, .sala-carrossel::after { content: ''; position: absolute; top: 0; bottom: 0;
  width: 90px; z-index: 2; pointer-events: none; }
.sala-carrossel::before { left: 0; background: linear-gradient(90deg, #F2F4F9, transparent); }
.sala-carrossel::after { right: 0; background: linear-gradient(270deg, #F2F4F9, transparent); }
.sala-trilha { display: flex; gap: 16px; width: max-content; animation: salaGira 46s linear infinite; }
.sala-carrossel:hover .sala-trilha { animation-play-state: paused; }
.sala-trilha .sala-item { flex: 0 0 auto; width: clamp(240px, 24vw, 340px); aspect-ratio: 9 / 8;
  border-radius: var(--r-2); overflow: hidden; position: relative; margin: 0;
  user-select: none; -webkit-user-select: none; box-shadow: var(--sombra-card); }
@keyframes salaGira { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
  .sala-trilha { animation: none; overflow-x: auto; }
  .sala-carrossel { overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   BLOCO DO BLOG EM ESCURO
   Três blocos brancos seguidos deixavam a seção monótona.
   O escuro separa o que ainda não existe do que já está no ar.
   ════════════════════════════════════════════════════════════ */
.blog-soon { position: relative; overflow: hidden; border-color: transparent;
  background:
    radial-gradient(ellipse 720px 420px at 88% 0%, rgba(27,71,242,0.28), transparent 62%),
    var(--deep);
  box-shadow: 0 18px 46px rgba(20,27,45,0.18); }
.blog-soon .bs-badge { background: rgba(124,155,255,0.16); color: var(--azul-claro); }
.blog-soon h3 { color: #fff; }
.blog-soon .bs-txt p { color: rgba(255,255,255,0.72); }
.blog-soon .bs-form input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.blog-soon .bs-form input::placeholder { color: rgba(255,255,255,0.5); }
.blog-soon .bs-form input:focus { background: rgba(255,255,255,0.14); border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(124,155,255,0.22); }
.blog-soon .bs-form button { background: #fff; color: var(--deep); }
.blog-soon .bs-form button:hover { background: var(--azul-claro); color: var(--deep); }
.blog-soon .bs-nota { color: rgba(255,255,255,0.5); }
.blog-soon .bs-ok { color: var(--azul-claro); }

/* ════════════════════════════════════════════════════════════
   TODAS AS FAIXAS DE CHAMADA NO PADRÃO ESCURO DO BLOG
   ════════════════════════════════════════════════════════════ */
.cta-faixa { position: relative; overflow: hidden; border-color: transparent;
  background:
    radial-gradient(ellipse 720px 420px at 88% 0%, rgba(27,71,242,0.28), transparent 62%),
    var(--deep);
  box-shadow: 0 18px 46px rgba(20,27,45,0.18); }
.cta-faixa .ctaf-t { color: #fff; }
.cta-faixa .ctaf-s { color: rgba(255,255,255,0.72); }
.ctaf-btn { background: #fff; color: var(--deep); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.ctaf-btn:hover { background: var(--azul-claro); color: var(--deep);
  box-shadow: 0 12px 32px rgba(124,155,255,0.34); }
/* o do canal mantém a cor da plataforma */
.ctaf-btn--yt { background: #FF0000; color: #fff; box-shadow: 0 8px 24px rgba(255,0,0,0.3); }
.ctaf-btn--yt:hover { background: #E00000; color: #fff; box-shadow: 0 12px 32px rgba(255,0,0,0.4); }
/* sem legenda nas fotos e loop de 1/3 da trilha */
.sala-item figcaption { display: none; }
@keyframes salaGira { from { transform: translateX(0); } to { transform: translateX(calc(-33.3333% - 5.33px)); } }

/* ════════════════════════════════════════════════════════════
   HUB DE CONTEÚDO
   Canal e blog num bloco só, separados por um filete: o que já
   está no ar à esquerda, o que vem depois à direita.
   ════════════════════════════════════════════════════════════ */
.conteudo-hub { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; margin-top: clamp(30px, 3.4vw, 44px); border-radius: var(--r-3);
  background: radial-gradient(ellipse 820px 460px at 92% 0%, rgba(27,71,242,0.28), transparent 62%), var(--deep);
  box-shadow: 0 18px 46px rgba(20,27,45,0.18); }
.ch-lado { padding: clamp(28px, 3vw, 42px); display: flex; flex-direction: column; align-items: flex-start; }
.ch-canal { border-right: 1px solid rgba(255,255,255,0.12); }
.ch-t { margin: 0; font-family: var(--sans); font-size: clamp(18px, 1.7vw, 22px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.28; color: #fff; }
.ch-s { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 46ch; }
.ch-lado .ctaf-btn { margin-top: auto; padding-top: 0; }
.ch-canal .ctaf-btn { margin-top: clamp(22px, 2.4vw, 30px); }
.ch-blog .bs-badge { background: rgba(124,155,255,0.16); color: var(--azul-claro); margin-bottom: 14px; }
.ch-blog .bs-form { margin-top: clamp(20px, 2.2vw, 26px); width: 100%; }
.ch-blog .bs-form input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.ch-blog .bs-form input::placeholder { color: rgba(255,255,255,0.5); }
.ch-blog .bs-form input:focus { background: rgba(255,255,255,0.14); border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(124,155,255,0.22); }
.ch-blog .bs-form button { background: #fff; color: var(--deep); }
.ch-blog .bs-form button:hover { background: var(--azul-claro); }
.ch-blog .bs-nota { color: rgba(255,255,255,0.5); }
.ch-blog .bs-ok { color: var(--azul-claro); }
@media (max-width: 860px) {
  .conteudo-hub { grid-template-columns: 1fr; }
  .ch-canal { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
}

/* foto real no depoimento */
.d2-foto { overflow: hidden; padding: 0; }
.d2-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d2-autor { justify-content: flex-start; }

/* logos dos clientes: tamanhos revisados */
.marquee-track img[alt="Copel"], .marquee-track img[src$="copel.png"] { height: 38px; max-width: 150px; }
.marquee-track img[alt="SEBRAE"] { height: 38px; max-width: 150px; }
.marquee-track img[alt="Britânia"] { height: 38px; max-width: 150px; }
.marquee-track img[alt="BRDE"], .marquee-track img[src$="brde.png"] { height: 38px; max-width: 130px; }
/* tese do hero em duas linhas */
.hd-tese { max-width: 34ch; }
.depo2 { position: relative; }
.d2-id strong { white-space: nowrap; }
.d2-titulo { padding-right: 0; }
/* 6 depoimentos: grade de 3 colunas fica mais legível que 4 */
.depo2-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .depo2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .depo2-grid { grid-template-columns: 1fr; } }
/* hub: as duas colunas com a mesma estrutura e a ação na base */
.ch-lado { justify-content: flex-start; }
.ch-badge--ar { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.ch-canal .ctaf-btn { margin-top: auto; padding-top: 0; }
.ch-canal .ch-s { margin-bottom: clamp(22px, 2.4vw, 30px); }
.ch-blog .bs-form { margin-top: auto; }
/* Zerezes: logotipo 4:1 */
.marquee-track img[alt="Zerezes"], .marquee-track img[src$="zerezes.svg"] { height: 26px; max-width: 130px; }
/* o padding-top zerado (regra do hub) descentralizava o conteúdo do botão */
.ch-lado .ctaf-btn, .ch-canal .ctaf-btn { padding: 16px 30px; }
/* parágrafo único no hero: peso intermediário, não todo em negrito */
.hd-desc { font-weight: 500; color: rgba(255,255,255,0.86); max-width: 52ch; }
.hd-desc strong { color: #fff; font-weight: 700; }


/* ── botão flutuante de WhatsApp ── */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; display:grid; place-items:center;
  border-radius:999px; background:#25D366; color:#fff;
  box-shadow:0 10px 28px rgba(18,140,70,.34), 0 2px 6px rgba(20,27,45,.18);
  transition:transform .22s ease, box-shadow .22s ease;
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 36px rgba(18,140,70,.42), 0 2px 6px rgba(20,27,45,.18); }
.wa-float:focus-visible{ outline:3px solid var(--cobalto); outline-offset:3px; }
@media (max-width:640px){
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float svg{ width:27px; height:27px; }
}
@media (prefers-reduced-motion:reduce){ .wa-float{ transition:none; } }

/* 5 temas: cabem em uma linha só a partir do desktop */
@media (min-width:1024px){
  .ab-barra{ gap:8px; }
  .ab-b{ padding-left:18px; padding-right:18px; font-size:15px; }
  .ab-b span{ margin-right:7px; }
  .ab-selo{ margin-left:7px; }
}

.ab-esq .ab-selo{ margin-left:8px; vertical-align:middle; }


/* ══════════════════════════════════════════════════════════════════
   MOBILE
   Este bloco fica no fim do arquivo de propósito: várias regras de
   layout acima foram escritas sem media query e sobrescreviam os
   colapsos de coluna. Aqui nada mais vence.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. a coluna de texto do Sobre estava em 128px no celular ── */
@media (max-width: 980px) {
  .sobre2-foto { grid-template-columns: 1fr !important; }
  .sobre2-foto h2 { max-width: 100% !important; }
  .s2-retrato { position: static; max-width: 420px; margin-inline: auto; order: -1; }
}

/* ── 2. menu de telas pequenas ── */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn {
    display: grid; place-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px; cursor: pointer; order: 3;
  }
  .menu-btn span {
    display: block; width: 19px; height: 2px; border-radius: 2px;
    background: #fff; transition: transform 220ms ease, opacity 180ms ease;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hdr-in { gap: 12px; }
  .hdr nav {
    position: fixed; left: 12px; right: 12px; top: 74px;
    display: grid !important; gap: 2px;
    background: #101728; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-3); padding: 12px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 200ms ease, transform 220ms ease, visibility 220ms;
    max-height: calc(100dvh - 92px); overflow-y: auto;
  }
  body.menu-aberto .hdr nav { opacity: 1; visibility: visible; transform: none; }
  /* o menu não pode sumir junto com o cabeçalho que se esconde ao rolar */
  body.menu-aberto .hdr.oculto { transform: none; }

  .hdr nav a:not(.cta) {
    display: block !important;
    padding: 14px 14px; border-radius: var(--r-1);
    font-size: 16px; color: rgba(255, 255, 255, 0.9);
  }
  .hdr nav a:not(.cta):active { background: rgba(255, 255, 255, 0.08); }
  .hdr nav .cta {
    margin-top: 8px; justify-self: stretch; text-align: center;
    padding: 15px 20px; font-size: 16px;
  }
  .hdr nav .lang { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
  .hdr nav .lang-btn { width: 100%; text-align: left; padding: 13px 14px; font-size: 15px; }
  .hdr nav .lang-menu { position: static; box-shadow: none; background: transparent; border: 0; padding: 0; }
  .hdr nav .lang-menu a { font-size: 15px; }

  /* a assinatura fica sempre visível: é a única âncora de marca no topo */
  .hdr .brand { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .hdr .brand img { height: 30px; }
}

/* ── 3. alvos de toque: mínimo de 44px, recomendação da Apple.
   Vale por tipo de ponteiro: o celular deitado tem 932px de largura
   e passaria batido por um breakpoint de largura. ── */
@media (max-width: 900px), (pointer: coarse) {
  .hdr .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .f-nav a, .fr-nav a, .f-social a, .hl-link, .p-cta, .vid-info a, .brand,
  .lang-menu a, .d2-cred a { min-height: 44px; display: inline-flex; align-items: center; }
  .f-nav { gap: 2px 18px; }
  .faq-item summary { padding-block: 18px; }
  .ab-b { min-height: 46px; }
  .pill, .h2-btn, .ctaf-btn, .prop-form button { min-height: 48px; }
  .lang-btn { min-height: 44px; }
}

/* ── 4. nada de texto abaixo de 12px no celular ──
   Rótulos em caixa alta com espaçamento aguentam corpo menor, mas
   abaixo de 12px o iPhone come as letras. Piso de 12 em tudo. */
@media (max-width: 900px), (pointer: coarse) {
  .kicker,
  .t-fase,
  .d2n-txt,
  .trl-quem,
  .sala-rot,
  .cc-rot,
  .p-entrega span,
  .tag-porta b,
  .prop-form label,
  .scroll-hint span { font-size: 12px; letter-spacing: 0.1em; }
  .ab-selo, .d2c-nota .d2n-txt { font-size: 12px; }
}

/* ── 4b. o menu do rodapé tinha 23px de altura ── */
@media (max-width: 900px), (pointer: coarse) {
  .fr-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .fr-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── 5. o iOS dá zoom no campo se a fonte for menor que 16px ── */
@media (max-width: 900px), (pointer: coarse) {
  .prop-form input, .prop-form select, .prop-form textarea,
  .bs-form input, .tel-ddi, .tel-input { font-size: 16px; }
}

/* ── 6. o botão do WhatsApp não pode cobrir o CTA do formulário ── */
@media (max-width: 620px) {
  .wa-float { bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; }
}

/* ── 7. telas muito estreitas: item de grid não encolhe sozinho ──
   Por padrão o filho de grid tem min-width:auto e para de encolher no
   min-content. Uma palavra longa (frequente em espanhol) trava a coluna
   e empurra a página inteira. Aqui eles passam a poder encolher. */
@media (max-width: 480px) {
  .ab-p, .ab-esq, .ab-mods, .ab-mods li,
  .porta, .p-itens, .p-itens li,
  .depo2, .d2-autor, .d2-id,
  .traj-item, .fc-faixa li, .prop-form label,
  .c-fase, .f-item, .vid-card { min-width: 0; }

  .ab-mods li, .p-itens li, .d2-quote, .faq-r p,
  .ab-prom, .sobre2-col p, .hd-desc { overflow-wrap: break-word; }
}

/* o chip de público estava com nowrap: em espanhol o texto é mais
   longo que a coluna e empurrava a página inteira para o lado */
@media (max-width: 620px) {
  .trl-quem { white-space: normal; }
}

/* ── 8. o menu aberto precisa ficar acima de tudo ──
   O .hdr tem z-index 40 e cria contexto de empilhamento; o painel é
   fixo dentro dele, então seções abaixo na página pintavam por cima
   dos links. Com o menu aberto o cabeçalho sobe para o topo da pilha
   e um véu escuro isola o painel do conteúdo. */
@media (max-width: 900px) {
  body.menu-aberto .hdr { z-index: 1000; }
  .hdr nav { z-index: 1001; }

  body.menu-aberto::before {
    content: ""; position: fixed; inset: 0; z-index: 998;
    background: rgba(8, 12, 22, 0.62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  /* o botão do WhatsApp não pode flutuar sobre o menu */
  body.menu-aberto .wa-float { opacity: 0; pointer-events: none; }
}

/* o fundo do painel precisa vencer `.hdr.rolou .hdr-in nav`, que é
   mais específico e deixava o menu translúcido sobre o conteúdo */
@media (max-width: 900px) {
  .hdr .hdr-in nav,
  .hdr.rolou .hdr-in nav {
    background: #101728;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* ── 9. logos da Conquer e da AAA fugindo do bloco no celular ──
   Existem dois `.t-chip { position: absolute }` sem escopo dentro de
   media queries, escritos para os cards da linha do tempo. No bloco
   "Em paralelo" eles jogavam as logos para o canto da página. */
@media (max-width: 900px) {
  .par-linhas .t-chip,
  .par-card .t-chip {
    position: static; left: auto; top: auto;
    flex: 0 0 44px; width: 44px; height: 44px; margin: 0;
  }
  .par-linhas li { align-items: flex-start; }
  .par-linhas .t-chip { margin-top: 2px; }
}

/* ── 10. cabeçalho sempre visível + seção ativa em destaque ── */
.hdr.oculto { transform: none; }

.hdr nav a.ativo {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.hdr.rolou .hdr-in nav a.ativo { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 900px) {
  .hdr nav a.ativo {
    background: rgba(124, 155, 255, 0.16);
    box-shadow: inset 3px 0 0 var(--azul-claro);
  }
  .hdr.rolou .hdr-in nav a.ativo { background: rgba(124, 155, 255, 0.16); }
}

/* a linha de leitura do scrollspy fica logo abaixo do cabeçalho fixo */
#sobre, #solucoes, #treinamentos, #consultoria, #conteudos, #contato, #logos, #faq {
  scroll-margin-top: 104px;
}