/*
 * BITSYFER — SEÇÃO "SEU PROJETO, NOSSO FOCO"
 * Espelhos 3D com brilho especular e inclinação sutil.
 * Todo o CSS é escopado em #foco-bitsyfer.
 */
#foco-bitsyfer.bf-focus {
  --bff-bg: #0b0b0b;
  --bff-text: #f5f5f5;
  --bff-muted: rgba(245,245,245,.68);
  --bff-green: #a7f52c;
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(70px, 8vw, 112px) 0 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--bff-bg);
  color: var(--bff-text);
  font-family: "Manrope", "Avenir Next", Avenir, Arial, sans-serif;
}
#foco-bitsyfer.bf-focus,
#foco-bitsyfer.bf-focus * {
  box-sizing: border-box;
}
#foco-bitsyfer.bf-focus .bf-focus__inner {
  width: min(100% - 9.5%, 1320px);
  margin: 0 auto;
}
#foco-bitsyfer.bf-focus .bf-focus__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(38px, 5vw, 62px);
}
#foco-bitsyfer.bf-focus .bf-focus__intro h2 {
  margin: 0;
  color: var(--bff-text);
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
}
#foco-bitsyfer.bf-focus .bf-focus__intro p {
  margin: 4px 0 0;
  max-width: 330px;
  color: var(--bff-muted);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.4;
  font-weight: 400;
}
#foco-bitsyfer.bf-focus .bf-focus__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, .45vw, 6px);
}
#foco-bitsyfer.bf-focus .bf-focus__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(150px, 19vw, 258px);
  align-items: flex-end;
  padding: clamp(12px, 1.6vw, 22px);
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  outline: none;
  /* Gradiente vertical amostrado diretamente da referência enviada. */
  background: linear-gradient(
    180deg,
    #b5fa39 0%,
    #98d330 50%,
    #709c24 100%
  );
  color: #172006;
  box-shadow: none;
  transform: none;
}
#foco-bitsyfer.bf-focus .bf-focus__card::before,
#foco-bitsyfer.bf-focus .bf-focus__card::after {
  content: none;
}
#foco-bitsyfer.bf-focus .bf-focus__card-shine {
  display: none;
}
#foco-bitsyfer.bf-focus .bf-focus__card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  transform: none;
}
#foco-bitsyfer.bf-focus .bf-focus__card h3 {
  margin: 0 0 7px;
  color: #172006;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 600;
}
#foco-bitsyfer.bf-focus .bf-focus__card p {
  margin: 0;
  max-width: 290px;
  color: rgba(23,32,6,.82);
  font-size: clamp(8px, .68vw, 9px);
  line-height: 1.3;
  font-weight: 500;
}
#foco-bitsyfer.bf-focus .bf-focus__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
#foco-bitsyfer.bf-focus .bf-focus__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(72px, 8vw, 112px) 0 clamp(76px, 8vw, 104px);
  text-align: center;
}
#foco-bitsyfer.bf-focus .bf-focus__closing h2 {
  margin: 0;
  color: #98d330;
  background: linear-gradient(
    180deg,
    #b5fa39 0%,
    #98d330 50%,
    #709c24 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 500;
}
#foco-bitsyfer.bf-focus .bf-focus__cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(22px, 2.5vw, 32px);
  padding: 0 24px;
  border: 1px solid var(--bff-green);
  border-radius: 2px;
  background: var(--bff-green);
  color: #142006;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
#foco-bitsyfer.bf-focus .bf-focus__cta:hover {
  transform: translateY(-2px);
  background: transparent;
  color: var(--bff-green);
}
#foco-bitsyfer.bf-focus .bf-focus__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  min-height: 68px;
  padding: 14px max(4.75%, calc((100% - 1320px) / 2));
  border-top: 1px solid rgba(255,255,255,.13);
  color: var(--bff-muted);
}
#foco-bitsyfer.bf-focus .bf-focus__brand,
#foco-bitsyfer.bf-focus .bf-focus__footer-nav a,
#foco-bitsyfer.bf-focus .bf-focus__copyright {
  color: inherit;
  font-size: 10px;
  line-height: 1.3;
  text-decoration: none;
}
#foco-bitsyfer.bf-focus .bf-focus__brand {
  color: var(--bff-text);
  font-weight: 700;
  letter-spacing: .04em;
}
#foco-bitsyfer.bf-focus .bf-focus__footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 42px);
}
#foco-bitsyfer.bf-focus .bf-focus__footer-nav a:hover {
  color: var(--bff-green);
}
#foco-bitsyfer.bf-focus .bf-focus__copyright {
  justify-self: end;
  white-space: nowrap;
}
@media (max-width: 600px) {
  #foco-bitsyfer.bf-focus {
    padding-top: 58px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__inner {
    width: calc(100% - 34px);
  }
  #foco-bitsyfer.bf-focus .bf-focus__intro {
    gap: 12px;
    margin-bottom: 26px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__intro h2 {
    font-size: clamp(17px, 5vw, 23px);
    line-height: 1.05;
  }
  #foco-bitsyfer.bf-focus .bf-focus__intro p {
    max-width: 128px;
    margin-top: 1px;
    font-size: clamp(6px, 1.8vw, 8px);
    line-height: 1.35;
  }
  #foco-bitsyfer.bf-focus .bf-focus__desktop-break {
    display: none;
  }
  #foco-bitsyfer.bf-focus .bf-focus__cards {
    gap: 4px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__card {
    min-height: clamp(116px, 37vw, 145px);
    padding: 7px 7px 9px;
    border-radius: 2px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__card-content {
    transform: none;
  }
  #foco-bitsyfer.bf-focus .bf-focus__card h3 {
    margin-bottom: 5px;
    font-size: clamp(10px, 3.3vw, 13px);
  }
  #foco-bitsyfer.bf-focus .bf-focus__card p {
    font-size: clamp(5px, 1.55vw, 6.5px);
    line-height: 1.25;
  }
  #foco-bitsyfer.bf-focus .bf-focus__closing {
    padding: 58px 0 62px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__closing h2 {
    font-size: clamp(29px, 8.3vw, 39px);
  }
  #foco-bitsyfer.bf-focus .bf-focus__cta {
    min-height: 34px;
    margin-top: 18px;
    padding: 0 17px;
    font-size: 8px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__footer {
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: 54px;
    padding: 12px 17px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__footer-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    gap: 9px;
    order: 3;
  }
  #foco-bitsyfer.bf-focus .bf-focus__brand,
  #foco-bitsyfer.bf-focus .bf-focus__footer-nav a,
  #foco-bitsyfer.bf-focus .bf-focus__copyright {
    font-size: 8px;
  }
  #foco-bitsyfer.bf-focus .bf-focus__copyright {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #foco-bitsyfer.bf-focus .bf-focus__card,
  #foco-bitsyfer.bf-focus .bf-focus__card-shine,
  #foco-bitsyfer.bf-focus .bf-focus__cta {
    transition: none;
  }
}


/* ==========================================================
   ESPELHOS ATIVOS — CARDS + TEXTO DA SEÇÃO FOCO
   Reflexo especular em movimento e resposta 3D ao ponteiro.
   Escopo exclusivo: #foco-bitsyfer.
   ========================================================== */
#foco-bitsyfer.bf-focus .bf-focus__card {
  --mirror-rx: 0deg;
  --mirror-ry: 0deg;
  --mirror-x: 50%;
  --mirror-y: 50%;
  transform:
    perspective(900px)
    rotateX(var(--mirror-rx))
    rotateY(var(--mirror-ry));
  transform-style: preserve-3d;
  will-change: transform;
  border: 1px solid rgba(239,255,210,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -24px 36px rgba(37,62,0,.13),
    0 8px 22px rgba(0,0,0,.10);
  transition:
    transform .18s ease-out,
    box-shadow .25s ease,
    border-color .25s ease;
}
#foco-bitsyfer.bf-focus .bf-focus__card::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 54% 60% at var(--mirror-x) var(--mirror-y),
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.20) 22%,
      rgba(255,255,255,0) 68%
    ),
    linear-gradient(
      125deg,
      transparent 28%,
      rgba(255,255,255,.24) 44%,
      rgba(255,255,255,.04) 50%,
      transparent 65%
    );
  mix-blend-mode: screen;
  opacity: .72;
  transform: translateZ(2px);
}
#foco-bitsyfer.bf-focus .bf-focus__card::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      transparent 28%,
      transparent 72%,
      rgba(20,38,0,.13)
    );
  transform: translateZ(3px);
}
#foco-bitsyfer.bf-focus .bf-focus__card-shine {
  display: block;
  position: absolute;
  z-index: 2;
  inset: -55% -80%;
  pointer-events: none;
  opacity: .56;
  background: linear-gradient(
    110deg,
    transparent 39%,
    rgba(255,255,255,.04) 45%,
    rgba(255,255,255,.62) 49%,
    rgba(255,255,255,.12) 53%,
    transparent 61%
  );
  transform: translateX(-48%) rotate(8deg) translateZ(5px);
  animation: bfCardMirrorSweep 7s ease-in-out infinite;
}
#foco-bitsyfer.bf-focus .bf-focus__card-content {
  z-index: 3;
  transform: translateZ(18px);
}
#foco-bitsyfer.bf-focus .bf-focus__card:hover {
  border-color: rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -24px 36px rgba(37,62,0,.13),
    0 18px 34px rgba(0,0,0,.22);
}
#foco-bitsyfer.bf-focus .bf-focus__closing h2 {
  color: #98d330;
  background-image: linear-gradient(
    112deg,
    #709c24 0%,
    #98d330 24%,
    #b5fa39 42%,
    #ffffff 50%,
    #b5fa39 58%,
    #98d330 76%,
    #709c24 100%
  );
  background-size: 240% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bfTextMirrorSweep 8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(152,211,48,.08));
}
@keyframes bfCardMirrorSweep {
  0%, 10% { transform: translateX(-55%) rotate(8deg) translateZ(5px); opacity: .18; }
  48% { opacity: .70; }
  88%, 100% { transform: translateX(55%) rotate(8deg) translateZ(5px); opacity: .20; }
}
@keyframes bfTextMirrorSweep {
  0%, 12% { background-position: 0% 50%; }
  55%, 100% { background-position: 100% 50%; }
}
@media (max-width: 600px) {
  #foco-bitsyfer.bf-focus .bf-focus__card {
    transform: none;
  }
  #foco-bitsyfer.bf-focus .bf-focus__card-content {
    transform: none;
  }
  #foco-bitsyfer.bf-focus .bf-focus__card-shine {
    animation-duration: 9s;
    opacity: .36;
  }
}
@media (prefers-reduced-motion: reduce) {
  #foco-bitsyfer.bf-focus .bf-focus__card,
  #foco-bitsyfer.bf-focus .bf-focus__card-shine,
  #foco-bitsyfer.bf-focus .bf-focus__closing h2 {
    animation: none;
    transition: none;
  }
}