/* DH Consulting — blocos de conteúdo acrescentados na revisão 6:
   prova (números, parceria SAP, onde estamos), faixa de clientes,
   plataformas das soluções, diferenciais de carreira e canal do contato.
   Carregado depois de carreiras.css. Nada aqui altera as seções antigas. */

/* ============================================================== prova == */

.proof {
  background:
    radial-gradient(ellipse at 82% 12%, rgba(23, 179, 174, .12), transparent 58%),
    #101a2c;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof .split-title p {
  max-width: 560px;
}

.proof-numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(190, 208, 227, .16);
  border: 1px solid rgba(190, 208, 227, .16);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 56px;
}

.proof-stat {
  background: #101a2c;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.proof-stat strong {
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: #6fddd2;
}

.proof-stat span {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #a7b2c1;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 26px;
}

.proof-card {
  border: 1px solid rgba(190, 208, 227, .17);
  border-radius: 26px;
  padding: 38px;
  background: rgba(233, 240, 247, .03);
}

.proof-card .eyebrow {
  color: #6fddd2;
  margin: 0 0 14px;
}

.proof-card h3 {
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.25;
  font-weight: 400;
  margin: 0 0 16px;
}

.proof-card h3 em {
  font-style: normal;
  color: #6fddd2;
}

.proof-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #cbd6e3;
  margin: 0 0 24px;
}

.proof-lead strong {
  font-weight: 500;
  color: #f6f8fc;
}

.partner-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 26px;
  padding: 20px 0;
  border-top: 1px solid rgba(190, 208, 227, .15);
  border-bottom: 1px solid rgba(190, 208, 227, .15);
}

.partner-meta dt {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8e9dae;
  margin-bottom: 7px;
}

.partner-meta dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #e9f0f7;
}

.cert-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cert-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #bac6d4;
  padding-left: 18px;
  position: relative;
}

.cert-list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #17b3ae;
}

.cert-list strong {
  font-weight: 500;
  color: #f6f8fc;
}

.cert-qtd {
  font-size: 11px;
  letter-spacing: .05em;
  color: #17b3ae;
  white-space: nowrap;
}

.proof-nota {
  font-size: 12px;
  line-height: 1.75;
  color: #8e9dae;
  margin: 0;
}

.place-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.place-photo {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.place-photo img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.place-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 20px 14px;
  font-size: 11px;
  letter-spacing: .06em;
  color: #e9f0f7;
  background: linear-gradient(180deg, transparent, rgba(11, 16, 32, .82));
}

.place-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.place-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid #17b3ae;
}

.place-list strong {
  font-size: 14px;
  font-weight: 500;
  color: #f6f8fc;
}

.place-list span {
  font-size: 12.5px;
  line-height: 1.6;
  color: #a7b2c1;
}

.proof-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.proof-photos figure {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.proof-photos img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.proof-photos figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px 16px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #e9f0f7;
  background: linear-gradient(180deg, transparent, rgba(11, 16, 32, .85));
}

/* =========================================================== clientes == */

.clients-band {
  background: #f4f6f8;
  color: #19384b;
  padding: 80px 0 0;
}

.clients-band .eyebrow {
  color: #27776f;
  margin: 0 0 16px;
}

.clients-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #4d6779;
  margin: 0 0 34px;
  max-width: 620px;
}

.clients-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
}

.client-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 14px 24px;
  border: 1px solid #ccd8de;
  border-radius: 16px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #30586c;
}

.client-mark img {
  display: block;
  max-height: 34px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==================================================== portal do cliente == */

/* A faixa deixou de ter foto de fundo: quem mostra o produto são as duas telas. */
.portal-band {
  background:
    radial-gradient(ellipse at 76% 28%, rgba(23, 179, 174, .22), transparent 60%),
    #0f3751;
}

.portal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  gap: 70px;
  align-items: center;
}

.portal-band .portal-layout h2 {
  font-size: clamp(38px, 3.8vw, 62px);
}

.portal-copy > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.85;
  color: #d0e1eb;
  max-width: 560px;
  margin: 20px 0;
}

.portal-shots {
  margin: 0;
  position: relative;
  padding-bottom: 60px;
}

.portal-shots img {
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(190, 220, 235, .3);
  box-shadow: 0 30px 70px rgba(4, 18, 30, .5);
}

.portal-shot-back {
  width: 100%;
  height: auto;
}

.portal-shot-front {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 46%;
  height: auto;
}

/* ====================================== plataformas das soluções DH == */

.story-plataformas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 18px 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(190, 208, 227, .16);
}

.story-plataformas:before {
  content: 'DISPONÍVEL EM';
  flex: 1 1 100%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
  color: #7fb0b4;
  margin-bottom: 3px;
}

.story-plataformas span {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9fded9;
  border: 1px solid rgba(114, 172, 182, .4);
  border-radius: 30px;
  padding: 6px 11px;
}

.plataformas-nota {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.85;
  color: #a7b2c1;
  max-width: 760px;
}

/* ================================================ carreiras: diferenciais == */

.diferenciais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.diferencial {
  border: 1px solid #c8d5db;
  border-radius: 22px;
  padding: 28px;
  background: #ffffff;
}

.diferencial h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #17384a;
}

.diferencial p {
  font-size: 13.5px;
  line-height: 1.85;
  color: #536a78;
  margin: 0;
}

.diferencial em {
  font-style: italic;
  color: #187f79;
}

/* ============================================ contato: canal de retorno == */

.canal {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}

.canal legend {
  font-size: 12px;
  color: #9fb1c2;
  padding: 0;
  margin-bottom: 11px;
}

.canal label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 22px 0 0;
  font-size: 13.5px;
  cursor: pointer;
}

.canal input {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  border: 1px solid #7d94a6;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.canal input:checked {
  border-color: #17b3ae;
}

.canal input:checked:after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #17b3ae;
}

.canal input:focus-visible {
  outline: 2px solid #17b3ae;
  outline-offset: 2px;
}

.campo-nota {
  color: #8fa3b5;
}

/* ================================================================ respiro == */

@media (max-width: 1250px) {
  .proof-numbers { grid-template-columns: repeat(3, 1fr); }
  .diferenciais { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .proof-grid { grid-template-columns: 1fr; }
  .portal-layout { grid-template-columns: 1fr; gap: 45px; }
  .portal-shots { padding-bottom: 46px; max-width: 620px; }
  .proof-photos { grid-template-columns: 1fr 1fr; }
  .proof-photos figure:last-child { display: none; }
}

@media (max-width: 800px) {
  .proof-card { padding: 28px; }
  .partner-meta { grid-template-columns: 1fr 1fr; }
  .clients-band { padding-top: 60px; }
  .plataformas-nota { margin-top: 34px; }
}

@media (max-width: 620px) {
  .proof-numbers { grid-template-columns: 1fr 1fr; margin-bottom: 40px; }
  .proof-stat { padding: 22px 18px; }
  .diferenciais { grid-template-columns: 1fr; gap: 16px; margin-bottom: 45px; }
  .diferencial { padding: 22px; }
  .proof-photos { grid-template-columns: 1fr; }
  .proof-photos img { height: 240px; }
  .partner-meta { grid-template-columns: 1fr; gap: 14px; }
  .place-photos { grid-template-columns: 1fr; }
  .cert-list li { grid-template-columns: 1fr; }
  .client-mark { min-height: 54px; padding: 12px 16px; font-size: 13px; }
  .portal-shots { padding-bottom: 34px; }
  .portal-shot-front { right: 0; width: 52%; }
  .canal label { margin-bottom: 8px; }
}

/* ============================================================== rodapé == */

.footer-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 26px 34px;
  align-items: start;
}

.footer-bottom p {
  max-width: 100%;
  line-height: 1.75;
}

.footer-bottom p strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 10px;
  color: #cfdcE7;
}

.footer-bottom button {
  justify-self: start;
}

@media (max-width: 980px) {
}

@media (max-width: 620px) {
  .footer-bottom { gap: 20px; }
}

/* ==================================================== DH Innovation Lab == */

.lab {
  background:
    radial-gradient(ellipse at 22% 30%, rgba(23, 179, 174, .16), transparent 62%),
    #0e1626;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lab .side-note {
  color: #6fddd2;
  letter-spacing: .13em;
  font-size: 11px;
}

.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}

.lab-mark {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(190, 208, 227, .16);
  box-shadow: 0 36px 80px rgba(4, 14, 28, .55);
}

.lab-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.lab-copy h2 {
  font-size: clamp(38px, 3.9vw, 62px);
  line-height: 1.14;
  letter-spacing: -.045em;
  font-weight: 400;
  margin: 0 0 26px;
}

.lab-copy h2 em {
  font-style: normal;
  color: #6fddd2;
}

.lab-lead {
  font-size: 17px;
  line-height: 1.8;
  color: #dbe6ef;
  margin: 0 0 20px;
  max-width: 640px;
}

.lab-copy > p:not(.lab-lead) {
  font-size: 15px;
  line-height: 1.85;
  color: #a7b2c1;
  margin: 0 0 18px;
  max-width: 660px;
}

.lab-pilares {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 32px;
  padding: 0;
}

.lab-pilares li {
  font-size: 12px;
  letter-spacing: .02em;
  color: #bfe9e5;
  border: 1px solid rgba(23, 179, 174, .38);
  border-radius: 30px;
  padding: 9px 16px;
}

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: 1fr; gap: 40px; }
  .lab-mark { max-width: 340px; }
}

@media (max-width: 620px) {
  .lab-mark { max-width: 100%; border-radius: 22px; }
  .lab-lead { font-size: 15px; }
  .lab-pilares { gap: 7px; margin: 22px 0 26px; }
}

/* ================================= cartões de solução: bloco branco inteiro == */

/* As artes dos produtos têm fundo branco, então o cartão inteiro é branco —
   nada de placa dentro de cartão escuro, que deixava canto reto de um lado e
   texto branco sobre fundo claro ao abrir o acordeão. Aqui o bloco todo é
   claro e o texto é escuro, do fechado ao aberto. */
.solution-story {
  --arte: 300px;
  background: #ffffff;
  border: 1px solid #ccd9e1;
  box-shadow: 0 24px 54px rgba(4, 18, 30, .3);
  /* coluna, para o "Explore a solução" poder descer até a base */
  flex-direction: column;
  align-items: stretch;
  min-height: 600px;
}

.solution-story > img {
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--arte);
  object-fit: contain;
  object-position: center;
  padding: 26px 20px 6px;
  box-sizing: border-box;
  z-index: 0;
}

.solution-story:hover > img {
  transform: none;
}

.story-shade {
  display: none;
}

.story-content {
  position: relative;
  z-index: 1;
  /* o texto começa abaixo da arte, e nunca por cima dela */
  margin-top: var(--arte);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Descrições de uma e de duas linhas deixam de mudar a altura do cartão:
   o acordeão desce para a base e os seis blocos ficam do mesmo tamanho. */
.solution-story .story-content details {
  margin-top: auto;
  padding-top: 27px;
}

/* ---- texto escuro sobre o branco ---- */

.solution-story .story-number { color: #2f7d77; }
.solution-story .story-content h3 { color: #14344a; }
.solution-story .story-content > p { color: #52697a; }

.solution-story .story-content summary {
  color: #1c4258;
  border-top-color: #d5e0e7;
}

.solution-story .story-content summary span { color: #17a39d; }

.solution-story .story-detail p { color: #52697a; }

.solution-story .product-benefits li {
  background: #f2f7f9;
  border-color: #cddce3;
  color: #43606f;
}

.solution-story .story-plataformas {
  border-top-color: #dde6eb;
}

.solution-story .story-plataformas:before { color: #5f8a8c; }

.solution-story .story-plataformas span {
  color: #2f7d77;
  border-color: rgba(23, 179, 174, .45);
}

.solution-story .text-link {
  color: #14706c;
  border-top-color: #d5e0e7;
}

.solution-story .text-link:hover { color: #0f5b58; }

@media (max-width: 900px) {
  .solution-story { --arte: 262px; }
}

@media (max-width: 620px) {
  .solution-story { --arte: 220px; min-height: 560px; }
  .solution-story > img { padding: 20px 16px 4px; }
}


/* ---- Marca do produto ao lado do nome, do mesmo tamanho nos seis cartões ---- */

.story-head {
  display: flex;
  align-items: center;
  gap: 15px;
  /* herda o respiro que era do h3 */
  margin: 23px 0 15px;
}

.story-head .story-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: block;
}

.story-head h3 { margin: 0; }

@media (max-width: 1100px) {
  .story-head .story-mark { width: 52px; height: 52px; flex-basis: 52px; }
}

@media (max-width: 540px) {
  .story-head { gap: 13px; }
  .story-head .story-mark { width: 54px; height: 54px; flex-basis: 54px; }
}