/* 03-nossas-solucoes · H03
   A V1 não tem esta seção. Vocabulário emprestado da V1:
   - cabeçalho e fundo de .results-section (título Aspekta 350 + Sentient 300, filete de luz no topo);
   - cards de vidro de .result-card (raio, bordas, sombras, brilho laranja no pé, hover);
   - REV-07: palco claro sem moldura (não repete as telas escuras do H02), peças de vidro branco e laranja de acento;
     no Academy a escada de níveis, no Consulting o fluxo da estrutura comercial;
   - REV-06: título como assinatura de marca (símbolo + "Facto" pequenos, nome grande em laranja);
   - entrada de [data-reveal] (800 ms, 1.5rem, 80 ms por passo) e, dentro da janela, a entrada
     desfocada dos contadores de .result-card. */

#h03 {
  position: relative;
  z-index: 2;
  padding: var(--section-space) 1.5rem clamp(5rem, 7vw, 6.5rem);
  overflow: hidden;
  background: var(--light);
  color: #161616;
}

/* filete de luz no topo (results-section::before) */
#h03::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100% - 3rem, 74rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0%), rgb(255 255 255 / 96%) 18%, rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 96%) 82%, transparent);
  box-shadow: 0 1px 0 rgb(22 22 22 / 5%), 0 0 24px rgb(255 255 255 / 88%);
  content: "";
  transform: translateX(-50%);
}

/* entrada no ritmo da V1 ([data-reveal]) */
#h03 .reveal {
  transform: translate3d(0, 1.5rem, 0);
  transition-property: opacity, transform;
  transition-duration: 800ms;
}
#h03 .reveal.is-in { transform: translate3d(0, 0, 0); }

/* ── Cabeçalho ─────────────────────────────────────────────── */
#h03 .h03__cabecalho {
  width: min(61rem, 100%);
  margin: 0 auto clamp(3rem, 4vw, 4.5rem);
  text-align: center;
}

#h03 .h03__titulo {
  max-width: 59rem;
  margin: 0 auto;
  color: #161616;
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 4.72vw, 4.75rem);
  font-weight: 350;
  letter-spacing: -0.058em;
  line-height: 0.98;
  text-wrap: balance;
}

#h03 .h03__enfase {
  font-family: var(--font-serif);
  font-size: 1.045em;
  font-variation-settings: "wght" 300;
  font-weight: 300;
  letter-spacing: -0.048em;
}

#h03 .h03__apoio {
  width: min(100%, 42rem);
  margin: clamp(1.25rem, 1.8vw, 1.75rem) auto 0;
  color: rgb(22 22 22 / 64%);
  font-size: clamp(1rem, 1.18vw, 1.125rem);
  font-weight: 350;
  line-height: 1.5;
}

/* ── Cards (result-card) ───────────────────────────────────── */
#h03 .h03__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.45vw, 1.45rem);
  width: min(100%, 64rem);
  margin: 0 auto;
  align-items: stretch;
}

#h03 .h03-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: clamp(0.75rem, 1vw, 0.95rem) clamp(0.75rem, 1vw, 0.95rem) clamp(1.5rem, 2.15vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: clamp(1.6rem, 2vw, 2.25rem);
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(255 255 255 / 46%)),
    rgb(248 248 246 / 70%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 100%),
    inset 0 -1px 0 rgb(255 255 255 / 54%),
    0 1.6rem 4rem rgb(28 22 14 / 8%);
  backdrop-filter: blur(18px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    border-color 240ms ease,
    box-shadow 240ms ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

#h03 .h03-card.is-in:hover,
#h03 .h03-card.is-in:focus-within {
  border-color: rgb(255 108 17 / 30%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 100%),
    inset 0 -1px 0 rgb(255 255 255 / 54%),
    0 2rem 5rem rgb(44 29 16 / 14%),
    0 0 2.25rem rgb(255 108 17 / 7%);
  transform: translate3d(0, -0.4rem, 0);
  transition-delay: 0ms;
  transition-duration: 240ms;
}

/* brilho laranja no pé (result-card::after) */
#h03 .h03-card::after {
  position: absolute;
  inset: auto -18% -42% 18%;
  height: 60%;
  background: radial-gradient(circle, rgb(255 108 17 / 13%) 0, transparent 62%);
  content: "";
  pointer-events: none;
}

#h03 .h03-card__corpo {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding: clamp(1.75rem, 2.4vw, 2.25rem) clamp(1rem, 1.4vw, 1.45rem) 0;
}

#h03 .h03-card__nome {
  color: #101014;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

/* filete interno (result-card__copy) */
#h03 .h03-card__texto {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 1.8vw, 1.6rem);
  padding-top: clamp(1.1rem, 1.5vw, 1.45rem);
  border-top: 1px solid rgb(255 255 255 / 78%);
  box-shadow: inset 0 1px 0 rgb(22 22 22 / 6%);
}

#h03 .h03-card__texto p {
  color: rgb(23 23 25 / 66%);
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  font-weight: 350;
  line-height: 1.5;
}

#h03 .h03-nobr { white-space: nowrap; }

/* CTA: geometria de .hero-cta / .facto-site-footer__cta levada para o claro */
#h03 .h03-cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: clamp(1.75rem, 2.4vw, 2.25rem) clamp(1rem, 1.4vw, 1.45rem) 0;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  box-shadow: 0 0.85rem 2.2rem rgb(10 10 10 / 14%);
  color: var(--white);
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

#h03 .h03-cta svg {
  width: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 180ms var(--ease-out);
}

#h03 .h03-cta:hover,
#h03 .h03-cta:focus-visible {
  background: #222;
  transform: translateY(-2px);
}
#h03 .h03-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#h03 .h03-cta:hover svg { transform: translateX(3px); }

/* ── Assinatura (REV-06): o lockup do site antigo, símbolo + "Facto" pequenos e o nome grande em laranja.
   Sem vetor do lockup: o logo horizontal da marca entra como máscara pintada de laranja; o h3 guarda
   "Facto Academy"/"Facto Consulting" como texto (o "Facto" fica para leitor de tela, o símbolo é imagem). */
#h03 .h03-assinatura {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.3rem, 0.45vw, 0.45rem);
}
#h03 .h03-assinatura__marca {
  display: block;
  width: clamp(4.4rem, 5.4vw, 5.2rem);
  aspect-ratio: 149 / 46;
  background: var(--orange);
  -webkit-mask: url("/marca/v1/facto-logo-horizontal.svg") no-repeat left center / contain;
  mask: url("/marca/v1/facto-logo-horizontal.svg") no-repeat left center / contain;
}
#h03 .h03-assinatura__nome {
  color: var(--orange);
  font-size: clamp(2.5rem, 3.5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

/* ── Palco das ilustrações (REV-07) ─────────────────────────────
   Sem a moldura de tablet escura do H02: um palco claro, aberto, com grade de pontos, onde peças de
   vidro branco (as mesmas do card) flutuam e sangram a borda; laranja só no acento (ícone, filete,
   medidor). Tamanhos de texto acompanham a largura do palco (cqw). */
#h03 .h03-janela {
  position: relative;
  z-index: 1;
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid rgb(22 22 22 / 6%);
  border-radius: clamp(1.1rem, 1.4vw, 1.45rem);
  background:
    radial-gradient(circle at 1px 1px, rgb(22 22 22 / 9%) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(120% 90% at 85% 110%, rgb(255 108 17 / 13%), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 92%), rgb(244 241 236 / 70%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 100%);
  isolation: isolate;
}

/* vidro claro comum às peças */
#h03 :is(.h03-degrau, .h03-chip, .h03-medidor, .h03-painel) {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 100%);
  background: linear-gradient(160deg, rgb(255 255 255 / 96%), rgb(255 255 255 / 74%));
  box-shadow: 0 0 0 1px rgb(22 22 22 / 6%), 0 0.9rem 2rem -0.9rem rgb(28 22 14 / 26%);
  backdrop-filter: blur(10px);
}
#h03 :is(.h03-degrau, .h03-painel, .h03-linha) b { display: block; height: 3px; border-radius: 999px; background: rgb(22 22 22 / 14%); }
#h03 :is(.h03-degrau, .h03-painel, .h03-linha) b.fraco { background: rgb(22 22 22 / 7%); }

/* ícone em traço sobre ladrilho laranja-claro (os chips com ícone do site antigo) */
#h03 .h03-icone {
  display: inline-grid;
  flex: none;
  width: clamp(1.35rem, 6cqw, 2rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 28%;
  background: rgb(255 108 17 / 12%);
  color: var(--orange);
}
#h03 .h03-icone svg { width: 58%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#h03 .h03-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  color: rgb(22 22 22 / 76%);
  font-size: clamp(0.62rem, 2.55cqw, 0.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
#h03 .h03-chip i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0.6em rgb(255 108 17 / 60%); }

/* medidor circular (sem número: o anel é o traço) */
#h03 .h03-medidor { display: grid; place-items: center; border-radius: 50%; }
#h03 .h03-medidor__anel { position: absolute; inset: 10%; width: 80%; height: 80%; fill: none; stroke-linecap: round; transform: rotate(-90deg); }
#h03 .h03-medidor__anel .trilho { stroke: rgb(22 22 22 / 8%); stroke-width: 3.5; }
#h03 .h03-medidor__anel .arco { stroke: var(--orange); stroke-width: 3.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
#h03 .h03-icone--solto { width: 44%; background: transparent; }

/* ── Academy: a escada de níveis ───────────────────────────────
   Quatro degraus de vidro sobem da borda de baixo, da liderança operacional ao C-level, cada um com o
   seu formato (ícone). A cada 3 s o nível ativo sobe um degrau (filete laranja, ladrilho cheio) e o
   medidor fecha mais um quarto. Loop de 12 s só em cena; parado, sem JS ou com movimento reduzido fica no C-level. */
#h03 .h03-escada { position: absolute; inset: 0; }

#h03 .h03-degrau {
  bottom: -1px;
  left: calc(var(--x) * 1%);
  display: flex;
  width: 17%;
  height: calc(var(--h) * 1%);
  flex-direction: column;
  gap: clamp(0.25rem, 1.2cqw, 0.4rem);
  padding: clamp(0.45rem, 2cqw, 0.7rem);
  border-bottom: 0;
  border-radius: clamp(0.6rem, 2.6cqw, 0.95rem) clamp(0.6rem, 2.6cqw, 0.95rem) 0 0;
}
#h03 .h03-degrau .h03-icone { margin-bottom: clamp(0.15rem, 0.8cqw, 0.3rem); }
#h03 .h03-degrau b { width: 72%; }
#h03 .h03-degrau b.fraco { width: 46%; }
#h03 .h03-degrau::after {
  position: absolute;
  inset: -1px -1px 0;
  border: 1.5px solid var(--orange);
  border-bottom: 0;
  border-radius: inherit;
  background: rgb(255 108 17 / 5%);
  box-shadow: 0 0 1.6rem rgb(255 108 17 / 22%);
  content: "";
  opacity: 0;
  animation: h03-ativo 12s var(--ease-out) calc(var(--i) * 3s) infinite both;
}
#h03 .h03-degrau .h03-icone { animation: h03-ativo-icone 12s var(--ease-out) calc(var(--i) * 3s) infinite both; }
#h03 .h03-degrau--topo::after { opacity: 1; }
#h03 .h03-degrau--topo .h03-icone { background: var(--orange); color: var(--white); }

#h03 .h03-chip--base { left: 4%; bottom: calc(46% + 0.7rem); }
#h03 .h03-chip--topo { right: 4%; bottom: calc(78% + 0.6rem); }

#h03 .h03-escada .h03-medidor { top: 9%; left: 7%; width: clamp(2.6rem, 12cqw, 3.7rem); aspect-ratio: 1; }
#h03 .h03-escada .h03-medidor__anel .arco { animation: h03-anel 12s var(--ease-out) infinite both; }

@keyframes h03-ativo { 0%, 1% { opacity: 0; } 4%, 23% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes h03-ativo-icone {
  0%, 1% { background: rgb(255 108 17 / 12%); color: var(--orange); }
  4%, 23% { background: var(--orange); color: var(--white); }
  27%, 100% { background: rgb(255 108 17 / 12%); color: var(--orange); }
}
@keyframes h03-anel {
  0%, 22% { stroke-dashoffset: 75; }
  26%, 47% { stroke-dashoffset: 50; }
  51%, 72% { stroke-dashoffset: 25; }
  76%, 96% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 75; }
}

/* ── Consulting: o fluxo da estrutura comercial ─────────────────
   Três painéis de vidro em cascata, das estratégias de crescimento aos processos e à área comercial
   (que sangra o canto); um filete laranja liga um ao outro, o painel da vez ganha o filete, as linhas
   da área comercial entram e o meio-medidor enche. Loop de 10 s; parado, fica montado. */
#h03 .h03-fluxo { position: absolute; inset: 0; }

#h03 .h03-trilha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: h03-trilha 10s var(--ease-out) infinite both; }
#h03 .h03-trilha path {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-width: 1.5;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

/* pontas do filete, na borda do painel que recebe */
#h03 .h03-ponto {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  animation: h03-entra-ponto 10s var(--ease-out) infinite both;
}
#h03 .h03-ponto--2 { animation-name: h03-entra-ponto-2; }


#h03 .h03-painel {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.3rem, 1.3cqw, 0.45rem);
  padding: clamp(0.45rem, 2cqw, 0.7rem);
  border-radius: clamp(0.65rem, 2.8cqw, 1rem);
  color: rgb(22 22 22 / 80%);
  font-size: clamp(0.62rem, 2.55cqw, 0.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#h03 .h03-painel::after {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--orange);
  border-radius: inherit;
  box-shadow: 0 0 1.6rem rgb(255 108 17 / 20%);
  content: "";
  opacity: 0;
  pointer-events: none;
}
#h03 .h03-painel__topo { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.15em; white-space: nowrap; }
#h03 .h03-painel > b { width: 78%; }
#h03 .h03-painel > b.fraco { width: 52%; }

/* geometria toda em % do palco (posição e tamanho), para o filete casar em qualquer proporção */
#h03 .h03-painel--1 { top: 8%; left: 5%; width: 46%; height: 24%; animation: h03-entra-1 10s var(--ease-out) infinite both; }
#h03 .h03-painel--2 { top: 39%; left: 24%; width: 34%; height: 22%; animation: h03-entra-2 10s var(--ease-out) infinite both; }
#h03 .h03-painel--3 { justify-content: flex-start; top: 66%; left: 53%; width: 52%; height: 52%; animation: h03-entra-3 10s var(--ease-out) infinite both; }
#h03 .h03-painel--1::after { animation: h03-ativo-1 10s ease-in-out infinite both; }
#h03 .h03-painel--2::after { animation: h03-ativo-2 10s ease-in-out infinite both; }
#h03 .h03-painel--3::after { opacity: 1; animation: h03-ativo-3 10s ease-in-out infinite both; }

/* linhas da área comercial (os negócios do pipeline antigo, sem valores) */
#h03 .h03-linha {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em;
  border: 1px solid rgb(22 22 22 / 6%);
  border-radius: 0.6em;
  background: rgb(255 255 255 / 80%);
  animation: h03-linha 10s var(--ease-out) calc(var(--j) * 600ms) infinite both;
}
#h03 .h03-linha .h03-icone { width: clamp(1.1rem, 4.6cqw, 1.6rem); }
#h03 .h03-linha b { width: 52%; }

#h03 .h03-fluxo .h03-medidor { top: 9%; right: 6%; width: clamp(3.2rem, 15cqw, 4.6rem); aspect-ratio: 1.45; border-radius: clamp(0.65rem, 2.8cqw, 1rem); }
#h03 .h03-medidor--meio .h03-medidor__anel { inset: 18% 14% 22%; width: 72%; height: 60%; transform: none; }
#h03 .h03-medidor--meio .arco { stroke-dashoffset: 22; animation: h03-meio 10s var(--ease-out) infinite both; }

/* palco estreito (celular): o painel da estratégia ganha largura para o rótulo caber inteiro */
@container (max-width: 380px) {
  #h03 .h03-painel--1 { width: 68%; }
  #h03 .h03-painel--2 { width: 40%; }
}

@keyframes h03-entra-1 { 0% { opacity: 0; transform: translateY(0.6rem); filter: blur(4px); } 5%, 90% { opacity: 1; transform: none; filter: blur(0); } 97%, 100% { opacity: 0; filter: blur(3px); } }
@keyframes h03-entra-2 { 0%, 14% { opacity: 0; transform: translateY(0.6rem); filter: blur(4px); } 19%, 90% { opacity: 1; transform: none; filter: blur(0); } 97%, 100% { opacity: 0; filter: blur(3px); } }
@keyframes h03-entra-3 { 0%, 30% { opacity: 0; transform: translateY(0.6rem); filter: blur(4px); } 35%, 90% { opacity: 1; transform: none; filter: blur(0); } 97%, 100% { opacity: 0; filter: blur(3px); } }
@keyframes h03-ativo-1 { 0%, 4% { opacity: 0; } 7%, 15% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes h03-ativo-2 { 0%, 18% { opacity: 0; } 21%, 31% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes h03-ativo-3 { 0%, 34% { opacity: 0; } 37%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes h03-trilha { 0%, 6% { clip-path: inset(0 100% 0 0); opacity: 1; } 30%, 90% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes h03-entra-ponto { 0%, 14% { opacity: 0; } 20%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes h03-entra-ponto-2 { 0%, 30% { opacity: 0; } 34%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes h03-linha { 0%, 38% { opacity: 0; transform: translateX(1rem); } 43%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes h03-meio { 0%, 48% { stroke-dashoffset: 100; } 72%, 90% { stroke-dashoffset: 22; } 97%, 100% { stroke-dashoffset: 100; } }

/* sem JS o loop nunca entra em cena: fica no estado final, parado */
.no-js #h03 :is(.h03-escada, .h03-fluxo) *, .no-js #h03 :is(.h03-escada, .h03-fluxo) *::after { animation: none; }

/* peso nos trechos-chave do texto dos cards (sem mudar palavras; o grifo laranja saiu na REV-08) */
#h03 .h03-card__texto p { text-wrap: pretty; }
#h03 .h03-card__texto strong { color: #161616; font-weight: 500; }


/* ── Responsivo (cortes da V1) ─────────────────────────────── */
@media (max-width: 900px) {
  #h03 .h03__cards { grid-template-columns: minmax(0, 1fr); width: min(100%, 36rem); }
}

@media (max-width: 640px) {
  #h03 { padding: 4.5rem 1.25rem 3.5rem; }
  #h03 .h03__titulo { font-size: clamp(2.3rem, 9.7vw, 2.75rem); line-height: 0.99; }
  #h03 .h03-card { border-radius: 1.6rem; }
  #h03 .h03-janela { border-radius: 1.1rem; }
  #h03 .h03-assinatura__nome { font-size: clamp(2.2rem, 10vw, 2.6rem); }
}


@media (prefers-reduced-motion: reduce) {
  #h03 .h03-card.is-in:hover, #h03 .h03-card.is-in:focus-within { transform: none; }
  #h03 [data-loop] *::after { animation: none; }
}