/* =========================================================
   Revvotec — estilos
   Tema escuro, destaques em ciano/azul e botões "vidro".
   ========================================================= */

:root {
  --bg: #020308;
  --bg-alt: #05070e;
  --fg: #f8fbff;
  --muted: #a4afbf;
  --line: rgba(161, 185, 214, 0.16);
  --cyan: #5ee9ff;
  --blue: #1b4fd8;
  --blue-bright: #2a8cf0;

  /* cores do tema: as da logo (ciano → azul royal). Os valores *-rgb são usados como rgb(var(--x-rgb) / opacidade) */
  --accent-rgb: 42 140 240;
  --deep-rgb: 27 79 216;
  --neon-rgb: 94 233 255;
  --btn-1: #3fd4ff;
  --btn-2: #2a9bf3;
  --btn-3: #1b5ee0;
  --btn-border-rgb: 120 210 255;
  --btn-depth-rgb: 16 58 170;
  --soft-rgb: 170 230 255;
  --icon-1: #2fc2f5;
  --icon-3: #10299a;
  --icon-fg: #eefbff;
  --navy1-rgb: 10 24 60;
  --navy2-rgb: 16 36 100;

  --radius: 18px;
  --radius-lg: 26px;

  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "League Spartan", "Geist", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.19, 1, .22, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) { .container { padding: 0 32px; } }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, calc(5vw / var(--z, 1)), 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------------- Botões ---------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform .24s var(--ease), box-shadow .4s var(--ease), background .3s, border-color .3s;
}
.btn > * { position: relative; z-index: 2; }
.btn--lg { padding: 12px 32px; font-size: 1rem; letter-spacing: .02em; }
.btn--block { width: 100%; }

.btn--primary {
  color: #fff;
  text-shadow: 0 1px 7px rgba(0, 18, 60, .5);
  background: linear-gradient(180deg, var(--btn-1) 0%, var(--btn-2) 52%, var(--btn-3) 100%);
  border: 1px solid rgb(var(--btn-border-rgb) / .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -6px 12px rgba(0, 30, 90, .34),
    0 4px 0 rgb(var(--btn-depth-rgb) / .9),
    0 14px 18px -8px rgba(0, 12, 40, .5);
}
/* reflexo no topo do botão */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 48%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .08) 64%, transparent);
  opacity: .52;
  pointer-events: none;
  z-index: 0;
}
/* anel de vidro que aparece no hover */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: -5px -7px;
  border-radius: inherit;
  border: 1px solid rgb(var(--soft-rgb) / .78);
  box-shadow: inset 0 1.5px 2px rgba(232, 244, 255, .6), inset 3px 0 0 rgb(var(--soft-rgb) / .3);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .32s var(--ease), transform .44s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.btn--primary:hover::after { opacity: 1; transform: scale(1); }
.btn--primary:hover > * { transform: scale(1.035); transition: transform .4s var(--ease); }
.btn--primary:active { transform: translateY(3px) scale(.985); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 1px 0 rgb(var(--btn-depth-rgb) / .9); }

.btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .08); }

.btn:focus-visible,
a:focus-visible,
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------------- Cabeçalho ---------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.header.is-scrolled,
.header.is-open {
  background: rgba(2, 3, 8, .78);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
  transition: height .3s;
}
.header.is-scrolled .header__bar { height: 68px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.brand span {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.nav { display: none; gap: 4px; }
.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  transition: color .2s, background .2s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }

.header__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  cursor: pointer;
}

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.header.is-open .mobile-menu { grid-template-rows: 1fr; }
.mobile-menu > * { min-height: 0; overflow: hidden; }
.mobile-menu__inner { display: flex; flex-direction: column; gap: 8px; }
.header.is-open .mobile-menu__inner { padding-bottom: 20px; }
.mobile-menu__inner > a:not(.btn) {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
}

@media (min-width: 1024px) {
  .nav, .header__cta { display: flex; }
  .menu-toggle, .mobile-menu { display: none; }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: calc(100vh / var(--z, 1));
  min-height: calc(100svh / var(--z, 1));
  display: flex;
  align-items: center;
  padding: 112px 0 64px;
  overflow: hidden;
}
/* fundo fixo do site inteiro: foto do notebook + partículas */
.site-bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); }
.site-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.site-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(2,3,8,.6) 0%, rgba(2,3,8,.25) 35%, transparent 60%);
}
@media (max-width: 1023px) {
  .hero__shade {
    background: linear-gradient(180deg, rgba(2,3,8,.8), rgba(2,3,8,.72) 50%, rgba(2,3,8,.85));
  }
}

.hero__content { position: relative; z-index: 1; }
.hero__eyebrow {
  display: inline-block;
  margin-bottom: 28px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.hero__title { margin: 0; }
/* no desktop o texto fica na metade esquerda, sem invadir o notebook */
@media (min-width: 1024px) {
  .hero__content > * { max-width: min(calc(44vw / var(--z, 1)), 600px); }
}
.hero__title-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, calc(2vw / var(--z, 1)), 1.75rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
}
.hero__title-main {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, calc(4.4vw / var(--z, 1)), 3.9rem);
  line-height: .95;
  letter-spacing: -0.01em;
  color: var(--cyan);
  text-shadow: 0 0 22px rgb(var(--neon-rgb) / .32), 0 0 50px rgb(var(--neon-rgb) / .16);
}
.hero__text {
  margin-top: 32px;
  max-width: 22rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .85);
}
@media (min-width: 640px) { .hero__text { max-width: 36rem; font-size: 1.3rem; line-height: 1.55; } }

.hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
@media (min-width: 640px) { .hero__actions { flex-direction: row; } }

.hero__content > * { animation: rise .9s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: .12s; }
.hero__content > :nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------------- Seções ---------------- */
.section { position: relative; padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 144px 0; } }
.section--alt {
  background:
    radial-gradient(60% 50% at 80% 0%, rgb(var(--deep-rgb) / .16), transparent 70%),
    var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}
.section__head .display { max-width: 42rem; }
.section__lead { max-width: 24rem; color: var(--muted); line-height: 1.75; }
@media (min-width: 1024px) {
  .section__head { flex-direction: row; align-items: flex-end; }
  .section__head .section__lead { text-align: right; }
}

/* ---------------- Cards de soluções ---------------- */
.cards {
  display: grid;
  gap: 16px;
  margin-top: 64px;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  --x: 80%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 240px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .025);
  overflow: hidden;
  transition: transform .3s ease-out, border-color .3s, box-shadow .3s;
}
/* brilho que segue o mouse */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(400px circle at var(--x) 0%, rgb(var(--accent-rgb) / .16), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
/* linha azul na base */
.card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--blue-bright), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease-out;
}
.card:hover {
  transform: translateY(-8px);
  border-color: rgb(var(--accent-rgb) / .5);
  box-shadow: 0 24px 70px -20px rgb(var(--deep-rgb) / .6);
}
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }

.card__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.card__arrow {
  color: rgba(255, 255, 255, .25);
  opacity: 0;
  transform: translate(4px, -4px);
  transition: all .3s;
}
.card:hover .card__arrow { opacity: 1; transform: none; color: var(--blue-bright); }

.card h3 { position: relative; font-size: 1.25rem; font-weight: 600; transition: color .3s; }
.card:hover h3 { color: var(--blue-bright); }
.card p { position: relative; margin-top: 8px; font-size: .875rem; line-height: 1.6; color: var(--muted); }

.glass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--icon-fg);
  background: linear-gradient(180deg, var(--icon-1) 0%, var(--blue) 62%, var(--icon-3) 100%);
  border: 1px solid rgb(var(--soft-rgb) / .4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -6px 12px rgba(0,20,71,.3), 0 14px 18px -12px rgba(0,16,48,.55);
}
.glass-icon .icon { transition: transform .32s var(--ease); }
.card:hover .glass-icon .icon { transform: scale(1.14); }

/* ---------------- Como funciona ---------------- */
.how { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .how { grid-template-columns: 1.05fr 1fr; gap: 72px; } }

.how__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 60px rgb(var(--deep-rgb) / .3);
}
.how__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.steps { list-style: none; padding: 0; margin: 40px 0 32px; display: grid; gap: 12px; }
.step {
  display: flex;
  gap: 20px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(20, 30, 46, .58), rgba(6, 10, 18, .72));
}
.step__num {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  color: var(--cyan);
  padding-top: 3px;
}
.step h3 { font-size: 1.125rem; font-weight: 600; }
.step p { margin-top: 6px; font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* ---------------- Cases ---------------- */
.cases { display: grid; gap: 20px; margin-top: 64px; }
@media (min-width: 900px) {
  .cases { grid-template-columns: repeat(2, 1fr); }
  .case--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; }
}

.case {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .025);
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.case:hover {
  border-color: rgb(var(--accent-rgb) / .5);
  transform: translateY(-4px);
  box-shadow: 0 24px 70px -20px rgb(var(--deep-rgb) / .6);
}
.case__img { position: relative; overflow: hidden; }
.case__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.case--featured .case__img img { height: 100%; }
.case:hover .case__img img { transform: scale(1.04); }

.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: rgba(2, 3, 8, .7);
  border: 1px solid rgb(var(--neon-rgb) / .5);
  color: var(--cyan);
  backdrop-filter: blur(8px);
}

.case__body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.case h3 { font-size: 1.375rem; font-weight: 600; }
.case--featured h3 { font-family: var(--font-display); font-size: clamp(1.75rem, calc(3vw / var(--z, 1)), 2.5rem); line-height: 1.05; }
.case p { margin-top: 12px; color: var(--muted); line-height: 1.7; font-size: .95rem; }

.tags { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
}

/* ---------------- Contato ---------------- */
.contact { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .contact { grid-template-columns: 1fr 1fr; gap: 80px; } }
.contact .section__lead { margin-top: 24px; max-width: 30rem; }

.checks { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .88); }
.checks li::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(var(--neon-rgb) / .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid rgb(var(--neon-rgb) / .4);
}

.glass {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(161, 185, 214, .18);
  border-top-color: rgba(214, 240, 255, .3);
  background: linear-gradient(160deg, rgba(24, 36, 54, .66), rgba(6, 10, 18, .82));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.contact__form { padding: 28px; display: grid; gap: 18px; }
@media (min-width: 640px) { .contact__form { padding: 40px; } }
.contact__form label { display: grid; gap: 8px; }
.contact__form label span { font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.contact__form em { font-style: normal; color: var(--muted); font-weight: 400; }
.contact__form input,
.contact__form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(2, 3, 8, .55);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.contact__form input::placeholder { color: rgba(255, 255, 255, .3); }
.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25);
}
.contact__form .btn { margin-top: 6px; }
.form__note { text-align: center; font-size: .8rem; color: var(--muted); }
.form__error { text-align: center; font-size: .85rem; color: #ff8a8a; min-height: 1em; }
.form__error:empty { display: none; }

/* ---------------- Rodapé ---------------- */
.footer { padding: 64px 0 32px; border-top: 1px solid var(--line); }
.footer__inner { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.footer__brand p { margin-top: 16px; max-width: 22rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.footer__nav,
.footer__contact { display: grid; gap: 10px; align-content: start; font-size: .9rem; }
.footer__nav a,
.footer__contact a { color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer__nav a:hover,
.footer__contact a:hover { color: var(--cyan); }
.footer__legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: .75rem;
  color: rgba(164, 175, 191, .7);
}

/* ---------------- WhatsApp flutuante ---------------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .35);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }

/* ---------------- Animação de entrada ---------------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Mistura de preto e branco sobre o fundo fixo do notebook
   - .section--dark: faixa escura translúcida + cards claros
   - .light: painel claro suave e semitransparente
   ========================================================= */
.section--dark {
  background: rgba(3, 6, 14, .7);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.section--dark .section__lead { color: #d3dbe8; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }

.light {
  --l-fg: #1a2433;
  --l-muted: #56627a;
  --l-line: #d3dce8;
  background: linear-gradient(180deg, rgba(232, 243, 253, .93) 0%, rgba(207, 228, 248, .93) 100%);
  backdrop-filter: blur(10px);
  color: var(--l-fg);
}
.light .section__lead { color: var(--l-muted); }

/* cards claros (usados nas faixas escuras e na seção clara) */
.section--dark .card,
.section--dark .case,
.light .step {
  --l-fg: #1a2433;
  --l-muted: #56627a;
  background: #eef2f7;
  color: var(--l-fg);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 40px -20px rgba(0, 0, 0, .55);
}
.light .step { border-color: #d3dce8; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 30px -18px rgba(16, 24, 40, .22); }
.section--dark .card p,
.section--dark .case p,
.light .step p { color: var(--l-muted); }

.section--dark .card:hover,
.section--dark .case:hover {
  border-color: rgb(var(--accent-rgb) / .6);
  box-shadow: 0 24px 60px -20px rgb(var(--accent-rgb) / .55);
}
.section--dark .card::before { background: radial-gradient(400px circle at var(--x) 0%, rgb(var(--accent-rgb) / .1), transparent 60%); }
.section--dark .card__arrow { color: #a9b5c8; }
.section--dark .tags li { border-color: #cfd8e5; background: #e2e8f1; color: #334155; }
.light .step__num { color: var(--blue-bright); }
.light .how__media { border-color: var(--l-line); box-shadow: 0 30px 80px -30px rgb(var(--deep-rgb) / .45); }

.section--navy {
  background:
    radial-gradient(60% 60% at 90% 0%, rgb(var(--neon-rgb) / .14), transparent 70%),
    linear-gradient(160deg, rgb(var(--navy1-rgb) / .9) 0%, rgb(var(--navy2-rgb) / .86) 55%, rgb(var(--navy1-rgb) / .92) 100%);
}
.section--navy .section__lead { color: #c3cde0; }

.footer { background: rgba(8, 12, 22, .94); }

/* Cabeçalho branco ao rolar / com menu aberto */
.header.is-scrolled,
.header.is-open {
  background: rgba(233, 238, 245, .94);
  border-bottom-color: #d3dce8;
  box-shadow: 0 6px 24px -12px rgba(16, 24, 40, .18);
}
.header.is-scrolled .brand span,
.header.is-open .brand span { color: #1a2433; }
.header.is-scrolled .nav a,
.header.is-open .nav a { color: #334155; }
.header.is-scrolled .nav a:hover { color: var(--blue-bright); background: #dfe6ef; }
.header.is-scrolled .menu-toggle,
.header.is-open .menu-toggle { color: #1a2433; border-color: #cfd8e5; background: #dfe6ef; }
.header.is-open .mobile-menu__inner > a:not(.btn) { color: #1e293b; border-color: #d3dce8; background: #f4f7fb; }

/* ---------------- Parceiros ---------------- */
.partners {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 900px) { .partners { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 16 / 10;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #d3dce8;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 30px -18px rgba(16, 24, 40, .25);
  transition: transform .3s ease-out, box-shadow .3s, border-color .3s;
}
.partner:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--accent-rgb) / .45);
  box-shadow: 0 24px 50px -22px rgb(var(--accent-rgb) / .45);
}
.partner img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* logo com fundo próprio: preenche o card inteiro */
.partner--cover { padding: 0; }
.partner--cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* espaço vazio convidando novos parceiros */
.partner--empty {
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 2px dashed #b3bfd1;
  box-shadow: none;
  color: #56627a;
  font-size: .9rem;
  font-weight: 600;
}
.partner--empty .icon { width: 26px; height: 26px; }
.partner--empty:hover { color: var(--blue-bright); border-color: var(--blue-bright); background: rgb(var(--accent-rgb) / .05); box-shadow: none; }

/* ---------------- Onde estamos ---------------- */
.location { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .location { grid-template-columns: 1fr 1.25fr; gap: 64px; } }
.location .section__lead { margin-top: 20px; }

.address-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: #eef2f7;
  border: 1px solid #d3dce8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 30px -18px rgba(16, 24, 40, .22);
}
.address-card address { font-style: normal; line-height: 1.6; color: #56627a; }
.address-card strong { display: block; font-size: 1.125rem; color: #1a2433; }

.location__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn--outline {
  color: var(--blue-bright);
  border: 1.5px solid rgb(var(--accent-rgb) / .5);
  background: transparent;
}
.btn--outline:hover { background: rgb(var(--accent-rgb) / .08); border-color: var(--blue-bright); }

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid #d3dce8;
  box-shadow: 0 30px 80px -30px rgb(var(--deep-rgb) / .45);
  background: #dfe6ef;
  aspect-ratio: 4 / 3;
}
.location__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* as fotos originais são azuis: gira o tom para o roxo do tema */
.site-bg img,
.how__media img,
.case__img img { filter: none; }

/* ao ir direto para o formulário, ele não fica escondido atrás do cabeçalho */
#contactForm { scroll-margin-top: 96px; }

/* =========================================================
   Tela do notebook: mini página inicial + parceiros
   (desenhada em 1000x690 e encaixada em perspectiva via JS)
   ========================================================= */
.screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 650px;
  transform-origin: 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 48px 36px;
  color: #fff;
  font-family: var(--font-body);
  /* translúcida: o conteúdo antigo da foto vira só um brilho desfocado */
  background:
    transparent;
  /* a tela da foto já foi limpa (assets/img/hero.png): aqui fica só um brilho leve, sem desfoque */
  border-radius: 12px 12px 9px 9px;
  visibility: hidden; /* aparece quando o JS posiciona */
}
.screen.is-ready { visibility: visible; }

.screen__nav { display: flex; align-items: center; justify-content: space-between; }
.screen__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 600; font-size: 22px; letter-spacing: .16em; }
.screen__brand img { width: 40px; height: 40px; border-radius: 8px; }
.screen__links { display: flex; gap: 30px; font-size: 18px; color: rgba(255, 255, 255, .7); }
.screen__btn {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 rgb(var(--btn-depth-rgb) / .9);
}
.screen__btn--lg { align-self: flex-start; margin-top: 26px; padding: 14px 34px; font-size: 20px; }

.screen__hero { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.screen__kicker { font-family: var(--font-display); font-weight: 300; font-size: 28px; letter-spacing: .12em; }
.screen__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 78px;
  line-height: .95;
  color: var(--cyan);
  text-shadow: 0 0 22px rgb(var(--neon-rgb) / .35);
}
.screen__text { margin-top: 18px; font-size: 22px; color: rgba(255, 255, 255, .8); }

.screen__partners {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.screen__label { font-family: var(--font-mono); font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6); padding-right: 8px; }
.screen__logo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.screen__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.screen__logo--cover { padding: 0; }
.screen__logo--cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.screen__logo--empty { background: transparent; border: 2px dashed rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .6); font-size: 17px; font-weight: 600; }

/* reflexo de vidro */
.screen__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 35%, transparent 36%);
}
/* no celular o título da tela do notebook ficaria atrás do título principal */
@media (max-width: 1023px) { .screen__hero { visibility: hidden; } }

/* logo com fundo escuro (ex.: Rock in Rio) */
.partner--dark,
.screen__logo--dark { background: #000; }
/* 4 logos + 2 convites: 3 colunas no desktop */
@media (min-width: 900px) { .partners { grid-template-columns: repeat(3, 1fr); } }
/* tela do notebook: 4 logos */
.screen__partners { grid-template-columns: auto; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* =========================================================
   Ilustração "Como funciona": problema → solução → resultado
   ========================================================= */
.how__media--visual { aspect-ratio: auto; }
.how-visual {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 32px 28px;
  background:
    radial-gradient(70% 60% at 85% 10%, rgb(var(--accent-rgb) / .35), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgb(var(--deep-rgb) / .45), transparent 70%),
    linear-gradient(160deg, #10284a 0%, #081628 100%);
  color: #fff;
}
@media (min-width: 640px) { .how-visual { padding: 40px 44px; gap: 22px; } }

/* 1. conversa */
.hv-chat { display: grid; gap: 12px; }
.hv-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
.hv-msg p {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: .9rem;
  line-height: 1.45;
}
.hv-msg--client p { background: #fff; color: #1a2433; border-bottom-left-radius: 6px; }
.hv-msg--revvo { justify-self: end; }
.hv-msg--revvo p {
  background: linear-gradient(180deg, var(--btn-1), var(--btn-3));
  border-bottom-right-radius: 6px;
  box-shadow: 0 10px 24px -12px rgb(var(--accent-rgb) / .8);
}
.hv-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dfe6ef;
  color: #56627a;
}
.hv-avatar .icon { width: 18px; height: 18px; }
.hv-avatar--brand { background: #000; overflow: hidden; }
.hv-avatar--brand img { width: 100%; height: 100%; object-fit: cover; }

/* 2. sistema criado */
.hv-app {
  justify-self: center;
  width: min(100%, 360px);
  border-radius: 16px;
  overflow: hidden;
  background: #f4f7fb;
  color: #1a2433;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
  transform: rotate(-2deg);
}
.hv-app__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #e2e8f1;
  font-size: .75rem;
  font-weight: 600;
  color: #56627a;
}
.hv-app__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c3cddc; }
.hv-app__bar span { margin-left: 6px; }
.hv-app__list { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; font-size: .9rem; font-weight: 500; }
.hv-app__list li { display: flex; align-items: center; gap: 10px; }
.hv-app__list b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .75rem;
  color: #fff;
  background: #22b573;
}

/* 3. resultado */
.hv-result {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.hv-result strong { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--cyan); }
.hv-result span { font-size: .8rem; color: rgba(255, 255, 255, .75); }
.hv-chart { width: 110px; height: 44px; }
.hv-chart path { fill: none; stroke: #22e08b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hv-chart circle { fill: #22e08b; }

/* entalhe da câmera (posição calculada via JS a partir da foto) */
.screen__notch {
  position: absolute;
  top: 0;
  z-index: 2;
  background: #000;
  border-radius: 0 0 8px 8px;
}
.screen__notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b1d2b;
  box-shadow: inset 0 0 0 1.5px #2c3040;
  transform: translate(-50%, -50%);
}

/* =========================================================
   Assistente de IA (botão ao lado do WhatsApp + janela de chat)
   ========================================================= */
.ai-fab {
  position: fixed;
  right: 88px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 18px 0 14px;
  border: 1px solid rgb(var(--btn-border-rgb) / .8);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px rgb(var(--accent-rgb) / .45);
  transition: transform .2s;
  animation: ai-pulse 2.8s ease-in-out infinite;
}
.ai-fab:hover { transform: scale(1.06); }
.ai-fab svg { width: 26px; height: 26px; }
.ai-fab__label { font-size: .95rem; letter-spacing: .04em; }
.ai-fab[aria-expanded="true"] { animation: none; }
@keyframes ai-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgb(var(--accent-rgb) / .45), 0 0 0 0 rgb(var(--accent-rgb) / .45); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgb(var(--accent-rgb) / .45), 0 0 0 10px rgb(var(--accent-rgb) / 0); }
}

.ai-chat {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 70;
  width: min(380px, calc(calc(100vw / var(--z, 1)) - 32px));
  height: min(560px, calc(calc(100vh / var(--z, 1)) - 120px));
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f6fb;
  color: #1a2433;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform-origin: bottom right;
  animation: ai-open .28s var(--ease);
}
.ai-chat[hidden] { display: none; }
@keyframes ai-open { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.ai-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  color: #fff;
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(var(--accent-rgb) / .55), transparent 70%),
    linear-gradient(135deg, #1b4a80, #0c2240);
}
.ai-chat__head h2 { font-size: 1rem; font-weight: 700; }
.ai-chat__head p { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #22e08b; box-shadow: 0 0 0 3px rgba(34, 224, 139, .25); }
.ai-chat__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-3));
}
.ai-chat__avatar svg { width: 22px; height: 22px; color: #fff; }
.ai-chat__close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.ai-chat__close:hover { background: rgba(255, 255, 255, .2); }

.ai-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.ai-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-msg--bot { align-self: flex-start; background: #fff; border: 1px solid #e1e6ef; border-bottom-left-radius: 5px; }
.ai-msg--user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(180deg, var(--btn-2), var(--btn-3));
  border-bottom-right-radius: 5px;
}
.ai-msg a { color: var(--blue-bright); font-weight: 600; }
.ai-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a9b3c4; animation: ai-blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-chat__chips { display: flex; gap: 8px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.ai-chat__chips[hidden] { display: none; }
.ai-chat__chips button {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-rgb) / .35);
  background: rgb(var(--accent-rgb) / .08);
  color: #1f5f9e;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.ai-chat__chips button:hover { background: rgb(var(--accent-rgb) / .16); }

.ai-chat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e1e6ef; background: #fff; }
.ai-chat__form input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #dbe1ec;
  background: #f4f6fb;
  font: inherit;
  font-size: .92rem;
  color: #1a2433;
}
.ai-chat__form input:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2); }
.ai-chat__form button {
  display: grid;
  place-items: center;
  width: 44px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-3));
}
.ai-chat__form button:disabled { opacity: .5; cursor: default; }
.ai-chat__foot { padding: 0 14px 10px; background: #fff; font-size: .7rem; color: #7a8599; text-align: center; }
.ai-chat__foot a { color: var(--blue-bright); font-weight: 600; }

/* celular: acima da barra de soluções */
@media (max-width: 1023px) {
  .ai-fab { height: 52px; right: 84px; bottom: 22px; }
  .ai-chat { right: 12px; left: 12px; width: auto; bottom: 88px; height: min(560px, calc(calc(100vh / var(--z, 1)) - 120px)); }
}

/* =========================================================
   Página de soluções: grade de cards + janela de detalhes
   ========================================================= */
.page-solucoes .site-bg img { filter: brightness(.55); }
.sol-page { background: rgba(3, 6, 14, .72); }
.sol-page .display { color: #fff; }
.sol-page .display .accent { color: var(--cyan); }
.sol-page .section__lead { color: #c3cde0; margin-top: 10px; max-width: 36rem; text-align: left; }
.sol-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sol-page__head .btn { flex-shrink: 0; }

.sol-grid { display: grid; gap: 14px; margin-top: 28px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .sol-grid { grid-template-columns: repeat(4, 1fr); } }
.sol-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: #eef2f7;
  color: #1a2433;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease-out, box-shadow .25s, border-color .25s;
}
.sol-card:hover, .sol-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(var(--accent-rgb) / .6);
  box-shadow: 0 20px 50px -20px rgb(var(--accent-rgb) / .6);
}
.sol-card .glass-icon { width: 42px; height: 42px; border-radius: 12px; }
.sol-card__title { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.sol-card__problem { flex: 1; font-size: .83rem; line-height: 1.45; color: #56627a; }
.sol-card__more { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--blue); }
.sol-card__more .icon { width: 16px; height: 16px; transition: transform .2s; }
.sol-card:hover .sol-card__more .icon { transform: translateX(3px); }

.sol-modal {
  width: min(620px, calc(calc(100vw / var(--z, 1)) - 32px));
  max-height: calc(calc(100vh / var(--z, 1)) - 40px);
  padding: 30px 30px 26px;
  border: 0;
  border-radius: 22px;
  background: #f4f6fb;
  color: #1a2433;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.sol-modal[open] { animation: ai-open .25s var(--ease); }
.sol-modal::backdrop { background: rgba(3, 10, 22, .7); backdrop-filter: blur(4px); }
.sol-modal__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 10px; background: #e2e8f1; color: #1a2433; cursor: pointer;
}
.sol-modal__close:hover { background: #d3dce8; }
.sol-modal__icon { margin-bottom: 12px; }
.sol-modal h2 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.sol-modal p { margin-top: 10px; font-size: .93rem; line-height: 1.6; color: #3d4759; }
.sol-modal .sol__problem { color: #1a2433; }
.sol-modal .sol__problem strong, .sol-modal .sol__example strong { color: var(--blue); }
.sol__list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; font-size: .9rem; }
.sol__list li { display: flex; gap: 10px; align-items: flex-start; }
.sol__list li::before {
  content: "✓"; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; font-size: .7rem; font-weight: 700; color: #fff; background: #22b573;
}
.sol__example { padding: 12px 14px; border-radius: 12px; background: #e3f0fb; }
.sol-modal .btn { margin-top: 18px; }

/* =========================================================
   Uma tela por seção (computador): cada seção cabe inteira na janela
   ========================================================= */
@media (min-width: 1024px) and (min-height: 560px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  .hero, main > .section { min-height: calc(100vh / var(--z, 1)); min-height: calc(100svh / var(--z, 1)); scroll-snap-align: start; }
  main > .section {
    display: flex;
    align-items: center;
    padding: 84px 0 28px; /* 68px do cabeçalho + respiro */
  }
  main > .section > .container { width: 100%; }
  .display { font-size: clamp(1.9rem, calc(5.6vh / var(--z, 1)), 3.3rem); }
  .section__head { gap: 12px; }
  .section__lead { line-height: 1.55; }

  /* Como funciona */
  .how { gap: 56px; }
  .how-visual { padding: calc(3.2vh / var(--z, 1)) 32px; gap: calc(1.8vh / var(--z, 1)); }
  .hv-msg p { padding: 9px 14px; font-size: .85rem; }
  .hv-app__list { padding: 10px 14px; gap: 7px; font-size: .85rem; }
  .hv-result { padding: 10px 16px; }
  .hv-result strong { font-size: 1.6rem; }
  .steps { margin: calc(3vh / var(--z, 1)) 0 0; gap: calc(1.2vh / var(--z, 1)); }
  .step { padding: calc(1.6vh / var(--z, 1)) 20px; }
  .step p { margin-top: 4px; font-size: .85rem; }

  /* Cases: os três lado a lado */
  .cases { margin-top: calc(3.5vh / var(--z, 1)); grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .case--featured { grid-column: auto; display: block; }
  .case__img img, .case--featured .case__img img { aspect-ratio: auto; height: calc(37vh / var(--z, 1)); }
  .case__body { padding: 18px 20px; }
  .case h3, .case--featured h3 { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.25; }
  .case p { margin-top: 8px; font-size: .85rem; line-height: 1.55; }
  .tags { margin-top: 12px; }
  .tags li { padding: 4px 10px; }

  /* Parceiros: todos numa linha */
  .partners { margin-top: calc(4vh / var(--z, 1)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .partner { aspect-ratio: auto; height: calc(22vh / var(--z, 1)); }

  /* Contato */
  .contact { gap: 64px; }
  .checks { margin-top: calc(3vh / var(--z, 1)); gap: calc(1.4vh / var(--z, 1)); }
  .contact__form { padding: calc(3vh / var(--z, 1)) 34px; gap: calc(1.6vh / var(--z, 1)); }
  .contact__form input, .contact__form textarea { padding: calc(1.3vh / var(--z, 1)) 14px; }
  .contact__form textarea { height: calc(9vh / var(--z, 1)); min-height: 56px; resize: none; }

  /* Onde estamos + rodapé dividem a última tela */
  #localizacao { min-height: calc(calc(100svh / var(--z, 1)) - 118px); padding-bottom: 20px; }
  .address-card { margin-top: calc(2.6vh / var(--z, 1)); padding: 16px 20px; }
  .location__actions { margin-top: calc(2.4vh / var(--z, 1)); }
  .location__map { aspect-ratio: auto; height: min(calc(52vh / var(--z, 1)), 440px); }
  .footer { padding: 18px 0 14px; scroll-snap-align: end; }
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .footer__brand { display: flex; align-items: center; gap: 20px; }
  .footer__brand p { margin-top: 0; max-width: 17rem; font-size: .8rem; line-height: 1.5; }
  .footer__nav { grid-auto-flow: column; justify-content: center; gap: 24px; }
  .footer__contact { gap: 4px; font-size: .8rem; text-align: right; }
  .footer__contact br { display: none; }
  .footer__legal { margin-top: 12px; padding-top: 10px; }

  /* Soluções: a página inteira numa tela, com rodapé */
  .page-solucoes .sol-page { min-height: calc(calc(100svh / var(--z, 1)) - 118px); }
  .sol-grid { margin-top: calc(3vh / var(--z, 1)); gap: calc(1.6vh / var(--z, 1)) 14px; }
  .sol-card { padding: calc(2vh / var(--z, 1)) 18px; gap: calc(.9vh / var(--z, 1)); }
}

/* ---------- Cards de soluções: vidro escuro com brilho roxo ---------- */
.sol-grid { counter-reset: sol; }
.sol-card {
  position: relative;
  overflow: hidden;
  counter-increment: sol;
  gap: 10px;
  padding: 22px 20px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top-color: rgba(255, 255, 255, .22);
  color: #fff;
  background:
    radial-gradient(120% 70% at 0% 0%, rgb(var(--accent-rgb) / .22), transparent 60%),
    linear-gradient(165deg, rgba(22, 52, 92, .78), rgba(7, 17, 34, .9));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
/* número no canto */
.sol-card::before {
  content: counter(sol, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .28);
}
/* brilho que atravessa no hover */
.sol-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.sol-card:hover, .sol-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgb(var(--accent-rgb) / .7);
  box-shadow: 0 26px 60px -22px rgb(var(--accent-rgb) / .75), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sol-card:hover::after { transform: translateX(100%); }
.sol-card .glass-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px; }
.sol-card:hover .glass-icon .icon { transform: scale(1.14); }
.sol-card__title { font-size: 1.05rem; color: #fff; }
.sol-card__problem { color: #b9c2d6; }
.sol-card__problem::before {
  content: "Resolve";
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.sol-card__problem::first-letter { text-transform: uppercase; }
.sol-card__more {
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgb(var(--accent-rgb) / .22);
  border: 1px solid rgb(var(--accent-rgb) / .4);
  transition: background .25s;
}
.sol-card:hover .sol-card__more { background: rgb(var(--accent-rgb) / .45); }

/* ajuste de altura: última tela e página de soluções dividem a janela com o rodapé (≈140px) */
@media (min-width: 1024px) and (min-height: 560px) {
  #localizacao, .page-solucoes .sol-page { min-height: calc(calc(100svh / var(--z, 1)) - 140px); }
  .page-solucoes .sol-page { padding-top: 80px; padding-bottom: 16px; }
  .sol-page .section__lead { margin-top: 6px; font-size: .92rem; }
  .sol-grid { margin-top: calc(2.4vh / var(--z, 1)); }
  .sol-card { padding: calc(1.9vh / var(--z, 1)) 18px calc(1.6vh / var(--z, 1)); gap: calc(.8vh / var(--z, 1)); }
  .sol-card .glass-icon { width: 40px; height: 40px; margin-bottom: 0; }
  .sol-card__problem { font-size: .8rem; line-height: 1.4; }
}

/* "Ver detalhes" no canto do card (economiza uma linha e a página cabe na tela) */
.sol-card::before { content: none; }
.sol-card__more { position: absolute; top: 18px; right: 16px; margin: 0; padding: 5px 11px; font-size: .75rem; }
.sol-card__title { padding-right: 4px; }
@media (min-width: 1024px) and (min-height: 560px) {
  .page-solucoes .display { font-size: clamp(1.7rem, calc(5vh / var(--z, 1)), 3rem); }
  .sol-card__more { top: calc(1.9vh / var(--z, 1)); }
}
@media (min-width: 1024px) and (min-height: 560px) {
  .page-solucoes .sol-page { padding-top: 76px; padding-bottom: 6px; }
}
.sol-card__problem::first-letter { text-transform: none; }
/* rodapé não fica atrás dos botões flutuantes (IA + WhatsApp) */
@media (min-width: 1024px) and (min-height: 560px) {
  .footer__inner, .footer__legal { padding-right: 200px; }
}

/* partes claras em azul suave (cards, cabeçalho e menu) */
.light .step, .light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty), .address-card { background: #f2f8fe; border-color: #cfe2f4; }
.light .step, .address-card { box-shadow: 0 1px 2px rgba(20, 60, 110, .06), 0 12px 30px -18px rgba(20, 60, 110, .25); }
.light .tags li { border-color: #cfe2f4; background: #e6f1fb; }
.header.is-scrolled, .header.is-open { background: rgba(228, 240, 252, .94); border-bottom-color: #cfe2f4; }
.header.is-scrolled .nav a:hover { background: #d6e8f8; }
.section--dark .card, .section--dark .case { background: #f2f8fe; }
.ai-chat, .sol-modal { background: #f2f8fe; }
.ai-msg--bot { border-color: #d6e6f5; }
/* logos com fundo branco se misturam à cor do card (sem "quadrado branco") */
.partner:not(.partner--cover):not(.partner--dark) img { mix-blend-mode: multiply; }

/* =========================================================
   Nova logo: símbolo "R" sem fundo + nome em azul-marinho/branco
   ========================================================= */
.brand img { border-radius: 0; object-fit: contain; filter: drop-shadow(0 2px 8px rgb(var(--accent-rgb) / .35)); }
.brand span { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .1em; color: #fff; }
.header.is-scrolled .brand span, .header.is-open .brand span { color: #14207a; }
.screen__brand img { border-radius: 0; }
.hv-avatar--brand { background: #fff; padding: 4px; }
.hv-avatar--brand img { object-fit: contain; }
/* títulos das partes claras no azul-marinho da logo */
.light .display, .light h3 { color: #14207a; }

/* textos da tela do notebook seguem legíveis com o fundo mais transparente */
.screen__kicker, .screen__title, .screen__text, .screen__links, .screen__label { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }

/* ---------- Botão "Falar agora" do cabeçalho: vidro com borda em degradê ---------- */
.header__cta.btn--primary {
  padding: 10px 14px 10px 20px;
  gap: 10px;
  color: #fff;
  text-shadow: none;
  background: linear-gradient(rgba(8, 18, 40, .72), rgba(8, 18, 40, .72)) padding-box,
              linear-gradient(135deg, var(--cyan), var(--blue)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 22px -4px rgb(var(--neon-rgb) / .45);
  backdrop-filter: blur(8px);
}
.header__cta.btn--primary::before, .header__cta.btn--primary::after { content: none; }
.header__cta .cta__arrow {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-1), var(--btn-3));
  transition: transform .3s var(--ease);
}
.header__cta .cta__arrow .icon { width: 16px; height: 16px; }
.header__cta.btn--primary:hover { box-shadow: 0 0 30px -2px rgb(var(--neon-rgb) / .7); transform: translateY(-1px); }
.header__cta.btn--primary:hover > * { transform: none; }
.header__cta:hover .cta__arrow { transform: translateX(3px) rotate(-45deg); }
.header__cta .ai-dot { margin-right: -2px; }
/* cabeçalho claro (ao rolar): botão sólido no degradê da logo */
.header.is-scrolled .header__cta.btn--primary {
  background: linear-gradient(135deg, var(--btn-1), var(--btn-3)) padding-box,
              linear-gradient(135deg, var(--cyan), var(--blue)) border-box;
}
.header.is-scrolled .header__cta .cta__arrow { background: rgba(255, 255, 255, .22); }

/* cards de logo em branco azulado (em vez de branco puro), no tema do site */
.screen__logo:not(.screen__logo--cover):not(.screen__logo--dark):not(.screen__logo--empty) { background: linear-gradient(160deg, #e3f0fd, #cfe3f8); }
.screen__logo img { mix-blend-mode: multiply; }
.screen__logo--cover img { mix-blend-mode: normal; }
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) {
  background: linear-gradient(160deg, #e6f1fd 0%, #d3e6f9 100%);
  border-color: #c3dbf3;
}

/* =========================================================
   Galeria de fotos dos cases
   ========================================================= */
.case[data-fotos] { cursor: zoom-in; }
.case__zoom {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(4, 12, 28, .72); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  opacity: .85; transition: opacity .25s, transform .25s;
}
.case__zoom .icon { width: 16px; height: 16px; }
.case:hover .case__zoom, .case:focus-visible .case__zoom { opacity: 1; transform: translateY(-2px); }

.gallery {
  width: min(1100px, calc(calc(100vw / var(--z, 1)) - 32px));
  max-height: calc(calc(100vh / var(--z, 1)) - 32px);
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.gallery::backdrop { background: rgba(3, 10, 22, .88); backdrop-filter: blur(6px); }
.gallery[open] { animation: ai-open .25s var(--ease); }
.gallery figure { margin: 0; }
.gallery img {
  display: block; width: 100%; max-height: calc(calc(100vh / var(--z, 1)) - 120px); object-fit: contain;
  border-radius: 16px; background: #050d1f;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.gallery figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: #fff; font-size: .95rem; }
.gallery figcaption span { color: #a9b8d0; font-family: var(--font-mono); font-size: .85rem; }
.gallery__close, .gallery__nav {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(8, 20, 42, .85); color: #fff; cursor: pointer; z-index: 2;
}
.gallery__close:hover, .gallery__nav:hover { background: var(--blue-bright); }
.gallery__close { top: -14px; right: -14px; }
.gallery__nav { top: calc(50% - 40px); }
.gallery__nav--prev { left: -22px; }
.gallery__nav--next { right: -22px; }
.gallery__nav[hidden] { display: none; }

/* branco um pouco mais azulado (ajuste suave) */
.light { background: linear-gradient(180deg, rgba(222, 237, 252, .94) 0%, rgba(196, 222, 247, .94) 100%); }
.light .step, .address-card, .section--dark .card, .section--dark .case, .case__body { background: #e7f1fc; border-color: #c4dcf3; }
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) { background: linear-gradient(160deg, #deecfb 0%, #c9e0f7 100%); }
.screen__logo:not(.screen__logo--cover):not(.screen__logo--dark):not(.screen__logo--empty) { background: linear-gradient(160deg, #dcebfb, #c6ddf6); }
.header.is-scrolled, .header.is-open { background: rgba(219, 234, 251, .95); }
.ai-chat, .sol-modal { background: #e9f2fc; }
.ai-chat__form, .ai-chat__foot { background: #f1f7fd; }
.hv-app { background: #e9f2fc; }
/* galeria: imagem no tamanho natural (sem esticar imagens pequenas), centralizada em fundo branco */
.gallery figure { display: flex; flex-direction: column; align-items: center; }
.gallery img { width: auto; max-width: 100%; min-width: min(460px, 100%); background: #fff; }
.gallery figcaption { align-self: stretch; }
/* card com logo (fundo branco): logo inteira, sem cortar */
.case__img:has(.case__logo) { background: #fff; }
.case__img img.case__logo { object-fit: contain; padding: 10px 24px; }
.case:hover .case__img img.case__logo { transform: scale(1.03); }

/* =========================================================
   v2 — notebook ocupando a tela inteira + visual mais sóbrio
   (menos brilho neon, sem partículas, botões mais "de site real")
   ========================================================= */

/* ---------- Tela do notebook: página de ponta a ponta, translúcida ---------- */
.screen {
  padding: 0;
  border-radius: 6px 6px 4px 4px;
  /* fundo de tela acesa, mas deixando a foto aparecer por trás */
  background:
    radial-gradient(90% 70% at 85% 30%, rgb(var(--deep-rgb) / .22), transparent 70%),
    linear-gradient(180deg, rgba(8, 16, 34, .38), rgba(4, 9, 20, .22));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55);
  opacity: .9;
}
.screen__nav {
  gap: 28px;
  padding: 26px 44px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025);
}
.screen__brand { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: .1em; }
.screen__brand img { width: 34px; height: 34px; }
.screen__links { margin-left: auto; gap: 30px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .62); }
.screen__btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--btn-3);
  box-shadow: none;
}
.screen__hero { padding: 0 44px; }
.screen__kicker { font-family: var(--font-body); font-weight: 500; font-size: 19px; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
.screen__title {
  margin-top: 12px;
  font-weight: 700;
  font-size: 84px;
  line-height: .98;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: none;
}
.screen__text { margin-top: 20px; max-width: 520px; font-size: 21px; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.screen__actions { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.screen__btn--lg { margin: 0; padding: 15px 30px; font-size: 18px; }
.screen__link { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.screen__kicker, .screen__title, .screen__text, .screen__links, .screen__label { text-shadow: none; }

.screen__partners {
  gap: 14px;
  padding: 18px 44px 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: rgba(0, 0, 0, .18);
}
.screen__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .45); padding-right: 6px; }
.screen__logo { height: 70px; padding: 10px; border-radius: 6px; opacity: .72; }
.screen__logo:not(.screen__logo--cover):not(.screen__logo--dark):not(.screen__logo--empty) { background: #e8eff8; }
.screen__logo--cover { padding: 0; }

/* reflexo do vidro: faixa diagonal suave + leve brilho no topo */
.screen__glare {
  z-index: 3;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 38%, transparent 38.2%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 20%);
}

/* ---------- Hero ---------- */
.hero__title-kicker { font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, calc(1.5vw / var(--z, 1)), 1.25rem); letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
.hero__title-main { margin-top: 14px; font-weight: 700; text-shadow: none; }
.hero__text { margin-top: 24px; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
@media (min-width: 640px) { .hero__text { max-width: 34rem; font-size: 1.15rem; line-height: 1.6; } }
.hero__actions { margin-top: 34px; }
.hero__content > :nth-child(4) { animation-delay: .36s; }

/* ---------- Botões: sólidos, sem efeito 3D/vidro ---------- */
.btn { border-radius: 10px; }
.btn--primary {
  text-shadow: none;
  background: var(--btn-3);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.btn--primary::before, .btn--primary::after { content: none; }
.btn--primary:hover { background: #2a6ff0; }
.btn--primary:hover > * { transform: none; }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.btn--ghost { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); backdrop-filter: none; }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }

/* botão do cabeçalho: sem brilho neon */
.header__cta.btn--primary,
.header.is-scrolled .header__cta.btn--primary {
  padding: 10px 14px 10px 18px;
  background: var(--btn-3);
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.header__cta.btn--primary:hover { background: #2a6ff0; box-shadow: none; transform: none; }
.header__cta .cta__arrow,
.header.is-scrolled .header__cta .cta__arrow { width: auto; height: auto; background: none; }
.header__cta:hover .cta__arrow { transform: translateX(3px); }
.brand img { filter: none; }

/* ---------- Assistente: botão discreto, sem pulsar ---------- */
.ai-fab {
  animation: none;
  gap: 8px;
  padding: 0 18px 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0f1e3a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-weight: 600;
}
.ai-fab svg { width: 20px; height: 20px; }
.ai-fab__label { font-size: .9rem; letter-spacing: 0; }
.ai-fab:hover { transform: none; background: #16294d; }

/* =========================================================
   v3 — tela de vidro: a foto (hero-vidro.png) já mostra a parede e o
   chão através da tela, então o conteúdo flutua direto sobre o fundo,
   como se página e notebook fossem uma tela só.
   ========================================================= */
.screen {
  background: linear-gradient(160deg, rgba(160, 200, 255, .045), rgba(120, 160, 255, .01) 55%, rgba(80, 140, 255, .035));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  opacity: 1;
}
.screen__notch { display: none; }
.screen__nav { background: none; border-bottom-color: rgba(255, 255, 255, .07); }
.screen__partners { background: none; border-top-color: rgba(255, 255, 255, .07); }
.screen__title { color: rgba(255, 255, 255, .94); }
.screen__btn { background: rgb(var(--deep-rgb) / .85); }
.screen__logo { opacity: .6; }
/* reflexo do vidro mais leve */
.screen__glare {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 38%, transparent 38.2%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18%);
}


/* ---------- Tela do notebook simétrica: tudo centralizado ---------- */
.screen__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.screen__links { margin: 0; justify-content: center; }
.screen__nav .screen__btn { justify-self: end; }
.screen__hero { align-items: center; text-align: center; padding: 0 64px; }
.screen__title { font-size: 80px; }
.screen__text { margin-left: auto; margin-right: auto; max-width: 560px; }
.screen__actions { justify-content: center; }
.screen__partners {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: row;
  gap: 12px 16px;
  padding: 16px 44px 22px;
}
.screen__label { grid-column: 1 / -1; text-align: center; padding: 0; }
.screen__logo { height: 64px; }
.screen__text { text-wrap: balance; }

/* =========================================================
   v4 — tela do notebook "tecnológica": painel com as cores do site
   (desenhada em 1000x650 e encaixada em perspectiva via JS)
   ========================================================= */
.screen--tech {
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #eaf6ff;
  font-family: var(--font-body);
  /* vidro escuro com grade técnica bem leve */
  background:
    radial-gradient(60% 55% at 78% 40%, rgb(var(--accent-rgb) / .16), transparent 70%),
    repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgb(var(--neon-rgb) / .045) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, rgba(4, 12, 30, .55), rgba(3, 8, 20, .4));
  box-shadow: inset 0 0 0 1px rgb(var(--neon-rgb) / .08);
}

/* barra superior */
.tela-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 66px;
  padding: 0 34px;
  border-bottom: 1px solid rgb(var(--neon-rgb) / .14);
  background: rgba(2, 8, 22, .45);
}
.tela-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .12em; }
.tela-brand img { width: 30px; height: 30px; }
.tela-tabs { display: flex; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(234, 246, 255, .55); }
.tela-tabs > * { padding: 7px 14px; border-radius: 7px; }
.tela-tabs b { font-weight: 600; color: #fff; background: rgb(var(--accent-rgb) / .2); box-shadow: inset 0 0 0 1px rgb(var(--neon-rgb) / .3); }
.tela-status { justify-self: end; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(234, 246, 255, .7); }
.tela-status i, .tela-chart__live i { width: 8px; height: 8px; border-radius: 50%; background: #22e08b; box-shadow: 0 0 0 3px rgba(34, 224, 139, .2); }

/* área principal: mensagem + painel */
.tela-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 34px;
  align-items: center;
  padding: 26px 34px;
}
.tela-kicker { font-size: 15px; font-weight: 500; color: rgba(234, 246, 255, .65); }
.tela-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 66px;
  line-height: .98;
  letter-spacing: -0.015em;
  color: var(--cyan);
}
.tela-text { margin-top: 16px; font-size: 17px; line-height: 1.45; color: rgba(234, 246, 255, .7); }
.tela-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 24px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--btn-3);
}

.tela-dash { display: grid; gap: 12px; }
.tela-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tela-kpi, .tela-chart, .tela-flow {
  border-radius: 12px;
  background: rgba(10, 30, 66, .55);
  box-shadow: inset 0 0 0 1px rgb(var(--neon-rgb) / .16);
}
.tela-kpi { display: grid; gap: 2px; padding: 12px 14px; }
.tela-kpi span { font-size: 12px; color: rgba(234, 246, 255, .6); }
.tela-kpi strong { font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.1; color: #fff; }
.tela-kpi em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: #22e08b; }

.tela-chart { padding: 12px 14px 8px; }
.tela-chart__head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgba(234, 246, 255, .8); }
.tela-chart__live { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: rgba(234, 246, 255, .6); }
.tela-chart svg { display: block; width: 100%; height: 120px; margin-top: 6px; }
.tela-grid { stroke: rgb(var(--neon-rgb) / .1); stroke-width: 1; fill: none; }
.tela-line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

.tela-flow { display: flex; align-items: center; padding: 11px 14px; }
.tela-flow span { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(var(--deep-rgb) / .55); box-shadow: inset 0 0 0 1px rgb(var(--neon-rgb) / .25); }
.tela-flow i { flex: 1; height: 2px; margin: 0 6px; background: linear-gradient(90deg, rgb(var(--neon-rgb) / .2), var(--cyan)); }

/* logos: mesma altura, mesma largura, centralizadas */
.tela-logos { padding: 14px 34px 20px; border-top: 1px solid rgb(var(--neon-rgb) / .14); background: rgba(2, 8, 22, .4); }
.tela-logos__label { display: block; margin-bottom: 10px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(234, 246, 255, .5); }
.tela-logos__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.tela-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eef4fb;
  overflow: hidden;
}
.tela-logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tela-logo--cover { padding: 0; background: #2fb4e8; }
.tela-logo--cover img { object-fit: cover; mix-blend-mode: normal; }

/* no celular o título da tela ficaria atrás do título principal */
@media (max-width: 1023px) { .tela-hero { visibility: hidden; } }
/* logos com o mesmo "peso" visual: altura igual, sem cortar */
.tela-logo { height: 58px; padding: 8px 12px; }
.tela-logo img { width: auto; height: auto; max-width: 100%; max-height: 40px; }
.tela-logo--cover { padding: 4px; }
.tela-logo--cover img { object-fit: contain; max-height: 50px; }
.tela-logo:nth-child(2) img { max-height: 46px; } /* F1: a arte tem muita margem */
.tela-logo:nth-child(4) img { max-height: 46px; } /* Tomorrowland: símbolo + texto pequeno */
.tela-logo:nth-child(5) img { max-height: 30px; } /* The Town: logo larga */
.tela-main { padding: 22px 34px 18px; }
.tela-logos { padding: 12px 34px 22px; }
.tela-chart svg { height: 190px; } /* sem os indicadores, o gráfico ocupa o espaço */

/* =========================================================
   Abertura da página inicial: a cena acende, a tela "liga" com a
   logo e o painel monta em sequência (≈3s, só na página inicial)
   ========================================================= */
.tela-boot { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .page-home .site-bg > img { animation: cena-acende 1.6s ease-out both; }

  .screen--boot .tela-boot {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #030914;
    pointer-events: none;
    animation: boot-tela 2.3s ease-in-out both;
  }
  .tela-boot img { width: 92px; height: 92px; animation: boot-logo 2.3s ease-out both; }
  .tela-boot span { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: .3em; color: #fff; animation: boot-logo 2.3s .1s ease-out both; }
  .tela-boot i { width: 180px; height: 3px; border-radius: 3px; background: rgb(var(--neon-rgb) / .15); overflow: hidden; position: relative; }
  .tela-boot i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--btn-3), var(--cyan)); transform-origin: left; animation: boot-barra 1.3s .5s ease-in-out both; }

  .screen--boot .tela-bar,
  .screen--boot .tela-hero,
  .screen--boot .tela-chart,
  .screen--boot .tela-flow,
  .screen--boot .tela-logos { animation: tela-entra .7s var(--ease) both; }
  .screen--boot .tela-bar   { animation-delay: 2.0s; }
  .screen--boot .tela-hero  { animation-delay: 2.15s; }
  .screen--boot .tela-chart { animation-delay: 2.3s; }
  .screen--boot .tela-flow  { animation-delay: 2.45s; }
  .screen--boot .tela-logos { animation-delay: 2.6s; }
  .screen--boot .tela-line  { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grafico-desenha 1.4s 2.5s ease-out forwards; }
  .screen--boot .tela-area  { animation: aparece .8s 3.1s ease-out both; }
  .screen--boot .tela-dot   { animation: aparece .3s 3.8s ease-out both; }

  /* o texto da página entra depois que a tela liga */
  .page-home .hero__content > * { animation-delay: 1.1s; }
  .page-home .hero__content > :nth-child(2) { animation-delay: 1.25s; }
  .page-home .hero__content > :nth-child(3) { animation-delay: 1.4s; }
}
@keyframes cena-acende { from { filter: brightness(0); } 40% { filter: brightness(.35); } to { filter: brightness(1); } }
@keyframes boot-tela { 0%, 20% { opacity: 0; } 32%, 82% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes boot-logo { 0%, 25% { opacity: 0; transform: scale(.9); } 45% { opacity: 1; transform: scale(1); } }
@keyframes boot-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tela-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes grafico-desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } }

/* =========================================================
   Hero da página inicial: texto + vídeo do notebook abrindo
   (o vídeo roda uma vez e fica parado no último quadro)
   ========================================================= */
.page-home .site-bg > img { animation: none; }
.page-home .hero__shade { display: none; }
.page-home .hero__content > * { animation-delay: 0s; }
.page-home .hero__content > :nth-child(2) { animation-delay: .12s; }
.page-home .hero__content > :nth-child(3) { animation-delay: .24s; }

.hero__grid { position: relative; z-index: 1; }
.page-home .hero__shade { display: none; }

/* vídeo do hero (sem moldura): notebook abrindo com o próprio cenário */
.hero__bgvideo { display: block; object-fit: cover; }

/* computador: ocupa a parte direita da primeira tela, de cima a baixo;
   só a borda esquerda se mistura ao fundo, onde fica o texto */
@media (min-width: 1024px) {
  .hero__bgvideo {
    position: absolute;
    top: 50%;
    right: calc(-9vw / var(--z, 1)); /* empurrado para a direita: o notebook não passa atrás do texto */
    width: calc(74vw / var(--z, 1));
    height: min(100%, calc(calc(74vw / var(--z, 1)) * 9 / 16)); /* vídeo inteiro, sem ampliar demais em telas grandes */
    transform: translateY(-50%);
    object-position: 50% 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-composite: intersect;
  }
  .page-home .hero__content { max-width: min(calc(40vw / var(--z, 1)), 560px); }
  .page-home .hero { overflow: hidden; }
}

/* celular: texto em cima e o vídeo logo abaixo, na largura toda */
@media (max-width: 1023px) {
  .page-home .hero { flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .hero__bgvideo {
    order: 2;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 32px;
    object-position: 45% 70%;
  }
  .page-home .hero .hero__grid { order: 1; }
}

/* título do hero com o degradê da logo (ciano → azul royal) */
.hero__title-main {
  width: fit-content;
  background: linear-gradient(100deg, #8ee6ff 0%, var(--cyan) 22%, #2a9bf3 58%, #2f6df0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* fundo animado (pontos + linhas que seguem o mouse): fica por cima do fundo e do vídeo do hero,
   mas atrás do texto; as seções claras, que vêm depois, cobrem ele */
.bg-linhas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* o vídeo do hero fica abaixo das linhas animadas (e acima do fundo fixo) */
.hero__bgvideo { z-index: -1; }

/* parceiros: 2 fileiras no computador (5 + 4) */
@media (min-width: 1024px) and (min-height: 560px) {
  .partners { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .partner { height: calc(17vh / var(--z, 1)); padding: 18px 22px; }
}

/* vídeo do hero: só o notebook em destaque; o escritório em volta some no fundo escuro da página */
@media (min-width: 1024px) {
  .hero__bgvideo {
    filter: brightness(.82) saturate(1.05);
    -webkit-mask-image: radial-gradient(ellipse 44% 54% at 54% 55%, #000 58%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-image: radial-gradient(ellipse 44% 54% at 54% 55%, #000 58%, transparent 100%);
            mask-composite: add;
  }
}
@media (max-width: 1023px) {
  .hero__bgvideo {
    filter: brightness(.82);
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 55%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 62% at 50% 55%, #000 55%, transparent 100%);
  }
}
/* cartões dos parceiros mais altos (menos "faixa" larga e baixa) */
@media (min-width: 1024px) and (min-height: 560px) {
  .partner { height: clamp(150px, calc(26vh / var(--z, 1)), 220px); padding: 22px 26px; }
  .partners { gap: 16px; margin-top: calc(3vh / var(--z, 1)); }
}
/* título do hero: mesmas cores da logo (ciano-água → azul → azul royal), na diagonal como no "R" */
.hero__title-main {
  background: linear-gradient(125deg, #03fefd 0%, #02d8fe 22%, #01a1f4 48%, #0062da 72%, #1636cf 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

/* =========================================================
   "Como funciona" no tema escuro do topo, em vidro azul translúcido
   (o fundo e as linhas animadas aparecem por trás; o cabeçalho claro se destaca)
   ========================================================= */
.section--how {
  background: linear-gradient(180deg, rgba(6, 16, 40, .78), rgba(4, 12, 32, .86));
  backdrop-filter: blur(6px);
  border-top: 1px solid rgb(var(--neon-rgb) / .1);
  color: #eaf2ff;
}
.section--how .display { color: #fff; }
.section--how .steps { gap: 0; }
.section--how .step {
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  box-shadow: none;
  padding: calc(2.2vh / var(--z, 1)) 0;
}
.section--how .step:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.section--how .step h3 { color: #fff; font-weight: 600; }
.section--how .step p { color: rgba(234, 242, 255, .66); }
.section--how .step__num { color: var(--cyan); font-family: var(--font-mono); }

/* mini painel de sistema */
.how__media--painel { background: none; border: 0; box-shadow: none; aspect-ratio: auto; overflow: visible; }
.painel {
  border-radius: 12px;
  overflow: hidden;
  background: #0b1424;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  font-size: 13px;
  color: #cfd8e6;
}
.painel__top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #0e192c; }
.painel__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.painel__brand img { width: 20px; height: 20px; }
.painel__busca { flex: 1; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #7d8aa0; }
.painel__user { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1d3a6e; color: #fff; font-size: 11px; font-weight: 600; }
.painel__corpo { display: grid; grid-template-columns: 130px 1fr; }
.painel__menu { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid rgba(255, 255, 255, .07); }
.painel__menu > * { padding: 7px 10px; border-radius: 6px; color: #8794aa; }
.painel__menu b { font-weight: 600; color: #fff; background: rgba(42, 140, 240, .16); }
.painel__main { padding: 14px 16px 16px; }
.painel__resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.painel__resumo > div { padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.painel__resumo span { display: block; font-size: 11px; color: #7d8aa0; }
.painel__resumo strong { font-size: 17px; font-weight: 600; color: #fff; }
.painel__tabela { width: 100%; margin-top: 14px; border-collapse: collapse; }
.painel__tabela th { padding: 8px 6px; text-align: left; font-size: 11px; font-weight: 500; color: #6f7c93; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.painel__tabela td { padding: 9px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.painel__tabela td:first-child { color: #fff; }
.st { font-style: normal; display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.st--ok { color: #6fdca6; background: rgba(34, 181, 115, .14); }
.st--wait { color: #7cc4ff; background: rgba(42, 140, 240, .15); }
.st--late { color: #c7cfdc; background: rgba(255, 255, 255, .08); }
@media (max-width: 640px) {
  .painel__corpo { grid-template-columns: 1fr; }
  .painel__menu { display: none; }
  .painel__tabela th:nth-child(2), .painel__tabela td:nth-child(2) { display: none; }
}
/* "Como funciona": vidro mais transparente (o fundo azul aparece mais) */
.section--how {
  background: linear-gradient(180deg, rgba(10, 26, 60, .42), rgba(8, 20, 48, .52));
  backdrop-filter: blur(3px);
}

/* Parceiros: mesmo vidro azul translúcido de "Como funciona"; os cartões das logos continuam claros (destaque) */
#parceiros.light {
  background: linear-gradient(180deg, rgba(10, 26, 60, .42), rgba(8, 20, 48, .52));
  backdrop-filter: blur(3px);
  border-top: 1px solid rgb(var(--neon-rgb) / .1);
}
#parceiros .display { color: #fff; }
#parceiros .section__lead { color: rgba(234, 242, 255, .7); }
#parceiros .partner:not(.partner--empty) { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
#parceiros .partner--empty { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); color: rgba(234, 242, 255, .75); }
#parceiros .partner--empty:hover { border-color: var(--cyan); color: #fff; }

/* vídeo transparente: só o notebook, direto sobre o fundo azul da página (sem máscara nem escurecido) */
.hero__bgvideo {
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
  object-fit: contain;
  background: transparent;
}
@media (min-width: 1024px) {
  .hero__bgvideo { right: calc(-6vw / var(--z, 1)); width: calc(70vw / var(--z, 1)); height: calc(calc(70vw / var(--z, 1)) * 9 / 16); max-height: 100%; }
}
@media (max-width: 1023px) {
  .hero__bgvideo { aspect-ratio: 16 / 9; margin-top: 12px; }
}

/* painel de demonstração: elementos interativos */
.painel__busca { border: 0; font: inherit; font-size: 13px; color: #e6edf7; outline: none; min-width: 0; }
.painel__busca:focus { box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .5); }
.painel__menu button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 6px; color: #8794aa; }
.painel__menu button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.painel__menu button.is-ativo { font-weight: 600; color: #fff; background: rgba(42, 140, 240, .16); }
.painel__menu button:focus-visible { outline: 2px solid var(--cyan); }
.painel__main { min-height: 310px; }
button.st { border: 0; font-family: inherit; cursor: pointer; transition: transform .15s, filter .15s; }
button.st:hover { filter: brightness(1.25); transform: translateY(-1px); }
.painel__vazio { color: #7d8aa0 !important; text-align: center; padding: 18px 0 !important; }
.painel__acao { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: #9aa6ba; }
.painel__btn { border: 0; padding: 8px 12px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: var(--btn-3); cursor: pointer; }
.painel__btn:hover { background: #2a6ff0; }
.painel__btn:disabled { opacity: .55; cursor: default; }
.painel__lista { list-style: none; margin: 10px 0 0; padding: 0; }
.painel__lista li { display: grid; grid-template-columns: 1fr auto 82px; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.painel__lista li span { color: #fff; }
.painel__lista li b { font-weight: 500; color: #cfd8e6; }
.painel__lista .st { justify-self: end; }
.painel__chat { display: flex; flex-direction: column; gap: 8px; min-height: 250px; justify-content: flex-end; }
.msg { max-width: 82%; margin: 0; padding: 8px 11px; border-radius: 10px; line-height: 1.4; animation: rise .35s var(--ease) both; }
.msg--cliente { align-self: flex-start; background: rgba(255, 255, 255, .07); color: #e6edf7; border-bottom-left-radius: 3px; }
.msg--ia { align-self: flex-end; background: rgba(42, 140, 240, .22); color: #fff; border-bottom-right-radius: 3px; }
.painel__graf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 240px; padding: 10px 4px 0; }
.painel__graf div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.painel__graf i { width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--cyan), var(--btn-3)); }
.painel__graf div:last-child i { box-shadow: 0 0 18px rgb(var(--neon-rgb) / .4); }
.painel__graf b { font-size: 11px; font-weight: 600; color: #cfd8e6; }
.painel__graf span { font-size: 11px; color: #7d8aa0; }
.painel__nota { margin-top: 12px; font-size: 12px; color: #7d8aa0; }
.painel__dica { margin-top: 12px; font-size: 12.5px; color: rgba(234, 242, 255, .6); text-align: center; }
/* celular: menu do painel vira abas em cima */
@media (max-width: 640px) {
  .painel__menu { display: flex; overflow-x: auto; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .painel__menu button { flex-shrink: 0; }
  .painel__acao { flex-direction: column; align-items: stretch; }
}
.painel__graf { height: auto; align-items: end; }
.painel__graf i { flex-shrink: 0; transition: height .5s var(--ease); }
.painel__main { min-height: 330px; }

/* notebook "apoiado" no chão cinza: ancorado na base da primeira tela + sombra de contato */
.hero__sombra { display: none; }
@media (min-width: 1024px) {
  .hero__bgvideo,
  .hero__sombra {
    position: absolute;
    right: calc(-6vw / var(--z, 1));
    width: calc(70vw / var(--z, 1));
    height: calc(calc(70vw / var(--z, 1)) * 9 / 16);
    max-height: 100%;
    top: auto;
    bottom: calc(1vh / var(--z, 1));
    transform: none;
  }
  .hero__sombra {
    display: block;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 33% 4.5% at 54% 91.5%, rgba(0, 0, 0, .75), transparent 70%),
      radial-gradient(ellipse 42% 9% at 54% 92%, rgba(0, 0, 0, .45), transparent 75%),
      radial-gradient(ellipse 30% 7% at 54% 95%, rgb(var(--accent-rgb) / .18), transparent 80%);
  }
}

/* =========================================================
   Tela do notebook em alta definição (estilo MacBook): moldura preta fina,
   entalhe da câmera e a página do site nítida. Encaixada em perspectiva via JS
   sobre o último quadro do vídeo.
   ========================================================= */
.tela-mac {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 1000px;
  height: 620px;
  transform-origin: 0 0;
  padding: 10px 10px 18px;
  border-radius: 20px 20px 8px 8px;
  background: #060608;
  box-shadow: inset 0 0 0 1.5px #34373f, inset 0 0 0 3px #0b0b0d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.tela-mac.is-ligada { opacity: 1; }
.tela-mac__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 3;
  width: 128px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #060608;
}
.tela-mac__notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #2a3550, #0d1018 70%);
}
.tela-mac__tela {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 11px 11px 2px 2px;
  color: #eaf6ff;
  font-family: var(--font-body);
  background:
    radial-gradient(60% 55% at 78% 40%, rgb(var(--accent-rgb) / .2), transparent 70%),
    repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgb(var(--neon-rgb) / .04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, #071226, #050c1c);
}
.tela-mac.is-ligada .tela-mac__tela { animation: tela-liga 1s ease-out both; }
@keyframes tela-liga { from { filter: brightness(1.8) saturate(.6); } to { filter: none; } }
.tela-mac .tela-hero { visibility: visible; }
.tela-mac .tela-bar { padding-top: 6px; }
/* reflexo do vidro */
.tela-mac__reflexo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 36%, transparent 36.2%);
}

/* notebook um pouco menor */
@media (min-width: 1024px) {
  .hero__bgvideo,
  .hero__sombra { right: calc(-3vw / var(--z, 1)); width: calc(58vw / var(--z, 1)); height: calc(calc(58vw / var(--z, 1)) * 9 / 16); }
}
@media (max-width: 1023px) {
  .hero__bgvideo { width: 86%; align-self: center; }
}

/* o notebook fica acima das linhas animadas do fundo (elas não passam por cima dele) */
.hero__bgvideo { position: relative; z-index: 0; }
@media (min-width: 1024px) { .hero__bgvideo { position: absolute; } }
.hero__sombra { z-index: 0; }
.hero__grid { z-index: 1; }

/* vídeo no card do case (mesmo enquadramento da foto) */
.case__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0a1020;
  transition: transform .8s var(--ease);
}
.case--featured .case__video { height: 100%; }
.case:hover .case__video { transform: scale(1.03); }
@media (min-width: 1024px) and (min-height: 560px) {
  .case__video, .case--featured .case__video { aspect-ratio: auto; height: calc(37vh / var(--z, 1)); }
}
/* aviso de demonstração do painel: maior e mais visível */
.painel__dica {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgb(var(--neon-rgb) / .3);
  background: rgb(var(--accent-rgb) / .12);
  font-size: 1rem;
  color: rgba(234, 242, 255, .85);
}
.painel__dica b { color: var(--cyan); font-weight: 600; }
@media (max-width: 640px) { .painel__dica { font-size: .9rem; text-align: center; } }

/* versão MP4 do notebook (Safari/iPhone): bordas esfumadas para o retângulo escuro sumir no fundo */
.hero__bgvideo.is-mp4 {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%);
}

/* cases: o card não abre mais a galeria inteiro; só o botão "Ver fotos" */
.case[data-fotos] { cursor: default; }
button.case__zoom { border: 1px solid rgba(255, 255, 255, .25); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; z-index: 2; }
button.case__zoom:hover { opacity: 1; background: rgba(4, 12, 28, .9); }

/* botão de play (celular/tablet) */
.case__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0 0 0 4px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  color: #fff;
  background: rgba(4, 12, 28, .55);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity .25s, transform .25s;
}
.case__play svg { width: 28px; height: 28px; }
.case__play:active { transform: translate(-50%, -50%) scale(.94); }
.case.is-tocando .case__play { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .case__play { display: none; } }

/* =========================================================
   Celular: notebook logo abaixo do título (aparece na primeira tela,
   então o iPhone deixa o vídeo rodar assim que a página abre)
   ========================================================= */
@media (max-width: 1023px) {
  .page-home .hero { padding-top: 96px; padding-bottom: 28px; min-height: auto; }
  .page-home .hero__grid,
  .page-home .hero__content { display: contents; }
  .page-home .hero__title { order: 1; padding: 0 20px; }
  .page-home .hero__bgvideo { order: 2; width: 100%; max-width: 560px; margin: 8px auto 0; align-self: center; }
  .page-home .hero__text { order: 3; margin-top: 4px; padding: 0 20px; position: relative; z-index: 1; }
  .page-home .hero__actions { order: 4; padding: 0 20px; position: relative; z-index: 1; }
  .page-home .hero__title-main { font-size: clamp(2.3rem, calc(11vw / var(--z, 1)), 3.2rem); }
  .page-home .hero__text { font-size: 1.05rem; line-height: 1.55; }
  /* botões lado a lado, mais compactos */
  .page-home .hero__actions { flex-direction: row; gap: 10px; margin-top: 22px; }
  .page-home .hero__actions .btn { flex: 1; padding: 12px 10px; font-size: .95rem; }
}

/* Celular: "Dúvidas" vira um ícone redondo, empilhado acima do WhatsApp */
@media (max-width: 1023px) {
  .ai-fab {
    right: 24px;
    bottom: 88px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .ai-fab__label { display: none; }
  .ai-fab svg { width: 22px; height: 22px; }
  .whatsapp-float { width: 52px; height: 52px; right: 22px; bottom: 22px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}
@media (max-width: 1023px) {
  .page-home .hero__actions .btn { white-space: nowrap; font-size: .9rem; padding: 13px 8px; }
  /* na primeira tela do celular os botões flutuantes ficam escondidos (não cobrem o notebook);
     aparecem assim que a pessoa começa a rolar */
  .page-home .ai-fab, .page-home .whatsapp-float { transition: opacity .3s, transform .3s; }
  .page-home:not(.rolou) .ai-fab,
  .page-home:not(.rolou) .whatsapp-float { opacity: 0; transform: translateY(16px); pointer-events: none; }
}



/* notebook do topo menor */
@media (min-width: 1024px) {
  .hero__bgvideo, .hero__sombra { right: calc(1vw / var(--z, 1)); width: calc(48vw / var(--z, 1)); height: calc(calc(48vw / var(--z, 1)) * 9 / 16); }
}
@media (max-width: 1023px) {
  .page-home .hero__bgvideo { width: 82%; max-width: 480px; }
}

/* notebook 3D: entra com esmaecimento lento por cima do fim do vídeo */
.hero__3d { opacity: 0; transition: opacity 1.4s ease; cursor: grab; touch-action: pan-y; }
.hero__3d.is-visivel { opacity: 1; }
.hero__3d.is-girando { cursor: grabbing; }
.hero__bgvideo.is-oculto { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
@media (min-width: 1024px) {
  .page-home .hero__grid { pointer-events: none; }
  .page-home .hero__content > * { pointer-events: auto; }
}
.hero__girar {
  position: absolute; z-index: 2; right: calc(20vw / var(--z, 1)); bottom: calc(3vh / var(--z, 1));
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(6, 14, 32, .6); backdrop-filter: blur(6px);
  font-size: .8rem; color: rgba(234, 242, 255, .85); pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s;
}
.hero__girar svg { width: 15px; height: 15px; }
.hero__girar.is-visivel { opacity: 1; transform: none; }
@media (max-width: 1023px) { .hero__girar { display: none; } }

/* computador: "Dúvidas" vira ícone redondo acima do WhatsApp (não cobre o notebook) */
@media (min-width: 1024px) {
  .ai-fab { right: 24px; bottom: 88px; width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .ai-fab__label { display: none; }
  .ai-fab svg { width: 22px; height: 22px; }
}

/* foto final do notebook (alta qualidade): entra com esmaecimento lento por cima do fim do vídeo */
.hero__foto { opacity: 0; transition: opacity 1.6s ease; pointer-events: none; object-fit: contain; }
.hero__foto.is-visivel { opacity: 1; }
.hero__foto.is-mp4 { -webkit-mask-image: none; mask-image: none; }
.hero__bgvideo.is-oculto { opacity: 0; transition: opacity 1.6s ease; }

/* botão de play dos cases: círculo perfeito e ícone centralizado (iPhone incluído) */
.case__play {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding: 0;
  margin: 0;
  line-height: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  aspect-ratio: 1;
}
.case__play svg { display: block; width: 30px; height: 30px; flex: none; }

/* celular: textos do topo centralizados */
@media (max-width: 1023px) {
  .page-home .hero__title,
  .page-home .hero__text { text-align: center; }
  .page-home .hero__title-kicker { text-align: center; }
  .page-home .hero__title-main { margin-left: auto; margin-right: auto; text-align: center; }
  .page-home .hero__text { margin-left: auto; margin-right: auto; max-width: 34rem; }
}

/* "Onde estamos": mesmo vidro azul translúcido das outras seções */
#localizacao.light {
  background: linear-gradient(180deg, rgba(10, 26, 60, .42), rgba(8, 20, 48, .52));
  backdrop-filter: blur(3px);
  border-top: 1px solid rgb(var(--neon-rgb) / .1);
}
#localizacao .display { color: #fff; }
#localizacao .section__lead { color: rgba(234, 242, 255, .7); }
#localizacao .address-card {
  background: rgba(10, 30, 66, .55);
  border: 1px solid rgb(var(--neon-rgb) / .16);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
  backdrop-filter: blur(6px);
}
#localizacao .address-card strong { color: #fff; }
#localizacao address { color: rgba(234, 242, 255, .72); }
#localizacao .btn--outline { color: #fff; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .28); }
#localizacao .btn--outline:hover { border-color: var(--cyan); background: rgb(var(--accent-rgb) / .12); }
#localizacao .location__map { border-color: rgb(var(--neon-rgb) / .16); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }

/* =========================================================
   Soluções (nova): lista de áreas + painel com a explicação
   ========================================================= */
.page-solucoes .sol-page { background: linear-gradient(180deg, rgba(10, 26, 60, .42), rgba(8, 20, 48, .55)); }
.solx-head { max-width: 640px; }
.solx-head .display { color: #fff; }
.solx-head .section__lead { margin-top: 10px; color: rgba(234, 242, 255, .7); }

.solx { display: grid; gap: 0; margin-top: 28px; }
@media (min-width: 900px) {
  .solx { grid-template-columns: minmax(260px, 340px) 1fr; column-gap: 28px; align-items: start; }
  .solx__item { display: contents; }
  .solx__aba { grid-column: 1; }
  .solx__painel { grid-column: 2; grid-row: 1 / span 8; display: none; }
  .solx__item.is-ativo .solx__painel { display: block; animation: solx-entra .35s var(--ease) both; }
}
@keyframes solx-entra { from { opacity: 0; transform: translateY(6px); } }

.solx__aba {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: none;
  color: #eaf2ff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.solx__aba:hover { background: rgba(255, 255, 255, .04); }
.solx__item.is-ativo .solx__aba { background: rgb(var(--accent-rgb) / .12); border-left-color: var(--cyan); }
.solx__nome { flex: 1; display: grid; font-size: .98rem; font-weight: 600; line-height: 1.25; }
.solx__nome small { margin-top: 2px; font-size: .8rem; font-weight: 400; color: rgba(234, 242, 255, .55); }
.solx__seta { width: 18px; height: 18px; color: rgba(234, 242, 255, .35); transition: transform .25s, color .25s; }
.solx__item.is-ativo .solx__seta { color: var(--cyan); }

.solx__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  color: var(--cyan);
  background: rgb(var(--accent-rgb) / .14);
  border: 1px solid rgb(var(--neon-rgb) / .2);
}
.solx__ic .icon { width: 19px; height: 19px; }
.solx__ic--grande { width: 52px; height: 52px; border-radius: 14px; }
.solx__ic--grande .icon { width: 26px; height: 26px; }

.solx__painel {
  padding: 30px 32px;
  border-radius: 18px;
  background: rgba(8, 20, 46, .7);
  border: 1px solid rgb(var(--neon-rgb) / .14);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
  color: #eaf2ff;
}
.solx__painel h2 { margin-top: 16px; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: #fff; }
.solx__oque { margin-top: 10px; font-size: 1.08rem; line-height: 1.5; color: rgba(234, 242, 255, .82); max-width: 34rem; }
.solx__faz { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.solx__faz li { display: flex; align-items: center; gap: 10px; font-size: .98rem; }
.solx__faz .icon { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; color: #06111f; background: var(--cyan); stroke-width: 3; }
.solx__ideal { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .92rem; color: rgba(234, 242, 255, .7); }
.solx__ideal strong { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.solx__painel .btn { margin-top: 22px; }
.solx-ajuda { margin-top: 22px; font-size: .92rem; color: rgba(234, 242, 255, .6); }
.solx-ajuda a { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* celular: cada área abre a explicação logo abaixo */
@media (max-width: 899px) {
  .solx__painel { display: none; margin: 8px 0 14px; padding: 22px 20px; }
  .solx__item.is-ativo .solx__painel { display: block; }
  .solx__item.is-ativo .solx__seta { transform: rotate(90deg); }
  .solx__ic--grande { display: none; }
  .solx__painel h2 { margin-top: 0; font-size: 1.5rem; }
}
/* computador: a página cabe numa tela */
@media (min-width: 1024px) and (min-height: 560px) {
  .page-solucoes .sol-page { padding-top: 96px; padding-bottom: 20px; }
  .solx { margin-top: calc(3vh / var(--z, 1)); }
  .solx__aba { padding: calc(1.15vh / var(--z, 1)) 12px; }
}
/* soluções: painel mais sólido e página cabendo numa tela */
.solx__painel { background: rgba(7, 17, 38, .92); }
@media (min-width: 1024px) and (min-height: 560px) {
  .page-solucoes .solx-head .display { font-size: clamp(1.6rem, calc(4.4vh / var(--z, 1)), 2.5rem); }
  .page-solucoes .solx-head .section__lead { margin-top: 4px; font-size: .95rem; }
  .solx { margin-top: calc(2.4vh / var(--z, 1)); }
  .solx__aba { padding: calc(.8vh / var(--z, 1)) 10px; gap: 12px; }
  .solx__ic { width: 32px; height: 32px; border-radius: 9px; }
  .solx__ic .icon { width: 16px; height: 16px; }
  .solx__nome { font-size: .92rem; }
  .solx__nome small { font-size: .75rem; }
  .solx__painel { padding: calc(3vh / var(--z, 1)) 30px; }
  .solx__painel h2 { margin-top: calc(1.4vh / var(--z, 1)); font-size: clamp(1.4rem, calc(3.6vh / var(--z, 1)), 1.9rem); }
  .solx__faz { margin-top: calc(2vh / var(--z, 1)); gap: calc(1vh / var(--z, 1)); }
  .solx__ideal { margin-top: calc(2vh / var(--z, 1)); padding-top: calc(1.6vh / var(--z, 1)); }
  .solx__painel .btn { margin-top: calc(2vh / var(--z, 1)); }
  .solx-ajuda { margin-top: calc(1.6vh / var(--z, 1)); }
}
@media (min-width: 1024px) and (min-height: 560px) {
  .solx__ic--grande { width: 46px; height: 46px; border-radius: 13px; }
  .solx__ic--grande .icon { width: 23px; height: 23px; }
}

/* =========================================================
   Notebook do topo (foto em alta) abrindo: base fixa + tampa girando na dobradiça
   Medidas da tampa em % do quadro 1920x1080 da foto.
   ========================================================= */
.hero__note { perspective: 1500px; perspective-origin: 50% 8%; }
.hero__note .note-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.note-tampa {
  position: absolute;
  left: 24.896%;
  top: 10.926%;
  width: 49.583%;
  height: 55%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-106deg);          /* fechada: deitada sobre o teclado */
}
.note-tela {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
  filter: brightness(.08);
}
.note-verso {                             /* parte de trás da tampa (alumínio + logo), vista enquanto está fechada */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 2.4% / 3.8%;
  background: linear-gradient(170deg, #5b616b 0%, #474c55 45%, #383c44 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.note-verso img { width: 11%; opacity: .85; transform: scaleX(-1); filter: grayscale(.2) brightness(1.2); }
.hero__note.is-abrindo .note-tampa { animation: note-abre 2.4s cubic-bezier(.25, .8, .25, 1) .3s both; }
.hero__note.is-abrindo .note-tela { animation: note-liga 1.6s ease-out 1.15s both; }
@keyframes note-abre { from { transform: rotateX(-106deg); } to { transform: rotateX(0deg); } }
@keyframes note-liga { from { filter: brightness(.08); } 55% { filter: brightness(.75); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .note-tampa, .hero__note.is-abrindo .note-tampa { animation: none; transform: none; }
  .note-tela, .hero__note.is-abrindo .note-tela { animation: none; filter: none; }
}

/* tampa posicionada por JS (homografia): a caixa fica no canto, do tamanho da tampa */
.hero__note { perspective: none; transform-origin: 50% 70%; }
.note-tampa { left: 0; top: 0; transform-origin: 0 0; transform: none; transform-style: flat; will-change: transform; }
.hero__note.is-abrindo .note-tampa, .hero__note.is-abrindo .note-tela { animation: none; }
.note-tela, .note-verso { backface-visibility: visible; transform: none; }
.note-tela { filter: brightness(.08); }
.note-verso { transform: scaleY(-1); opacity: 0; }   /* vista de cima, a parte de trás aparece invertida no quadro da tampa */
.note-verso img { transform: none; }

/* "Como funciona": mais sóbrio */
.how__rotulo { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.section--how .display { font-size: clamp(1.7rem, calc(3.4vw / var(--z, 1)), 2.5rem); line-height: 1.15; }
.section--how .step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.section--how .step__num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: #fff; background: none;
}
.section--how .step h3 { font-size: 1.05rem; }
.painel__dica {
  margin: 12px 0 0; padding: 0; border: 0; background: none; border-radius: 0;
  width: auto; text-align: left; font-size: .85rem; color: rgba(234, 242, 255, .55);
}
/* painel: cartões e tabela mais discretos */
.painel { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
.painel__resumo > div { background: rgba(255, 255, 255, .025); }
.st { border-radius: 999px; font-weight: 500; }

/* notebook do topo: vídeo em fundo preto (o preto some com "screen") + tela real no fim */
.hero__nv { overflow: hidden; }
.hero__nv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.nv-tela {
  position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; max-width: none;
  transform-origin: 0 0; border-radius: 16px; opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.hero__nv.is-fim .nv-tela { opacity: 1; }
@media (min-width: 1024px) {
  .hero__nv { right: calc(-4vw / var(--z, 1)); width: calc(62vw / var(--z, 1)); height: calc(calc(62vw / var(--z, 1)) * 9 / 16); bottom: calc(-2vh / var(--z, 1)); }
}
@media (max-width: 1023px) {
  .page-home .hero__nv { width: 100%; max-width: 560px; }
}
/* o "screen" precisa estar no bloco inteiro (ele cria um contexto próprio) */
.hero__nv { mix-blend-mode: screen; z-index: 0; }
.hero__nv video { mix-blend-mode: normal; }
/* vídeo com transparência real: notebook sólido (sem "screen"); no Safari/iPhone, MP4 + screen */
.hero__nv { mix-blend-mode: normal; }
.hero__nv.is-mp4 { mix-blend-mode: screen; }

/* botão de tela cheia (canto superior direito do vídeo) */
.case__cheia {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
  color: #fff; background: rgba(4, 12, 28, .6); backdrop-filter: blur(6px); cursor: pointer;
  transition: background .2s, transform .2s;
}
.case__cheia:hover { background: rgba(4, 12, 28, .85); transform: scale(1.06); }
.case__cheia .icon { width: 18px; height: 18px; }
.case__video:fullscreen { object-fit: contain; background: #000; }
/* play só no celular/tablet: no computador o vídeo roda ao passar o mouse */
@media (hover: hover) and (pointer: fine) { .case .case__play { display: none !important; } }
/* vídeo novo: o notebook termina mais à direita no quadro — traz para dentro da tela */
@media (min-width: 1024px) {
  .hero__nv { right: calc(3vw / var(--z, 1)); width: calc(56vw / var(--z, 1)); height: calc(calc(56vw / var(--z, 1)) * 9 / 16); bottom: 0; }
}

/* celular: logo e nome da Revvotec centralizados no cabeçalho (menu continua à direita) */
@media (max-width: 1023px) {
  .header__bar { position: relative; justify-content: center; }
  .header__bar .brand { margin: 0 auto; }
  .header__bar .menu-toggle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
}

/* =========================================================
   Cases (computador): ao passar o mouse, o vídeo ocupa o card inteiro
   por trás e o texto cresce por cima, sobre um degradê escuro
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .case:has(.case__video) { position: relative; overflow: hidden; isolation: isolate; }
  .case:has(.case__video) .case__img { position: relative; z-index: 0; transition: height .6s var(--ease); }
  .case:has(.case__video) .case__video { transition: transform .8s var(--ease), height .6s var(--ease); }
  .case:has(.case__video) .case__body {
    position: relative; z-index: 1;
    transition: background .45s ease, color .45s ease;
  }
  .case:has(.case__video) .case__body h3,
  .case:has(.case__video) .case__body p {
    transform-origin: left bottom;
    transition: transform .55s var(--ease), color .45s ease;
  }
  /* vídeo vira fundo do card inteiro */
  .case:has(.case__video):hover .case__img { position: absolute; inset: 0; height: 100%; }
  .case:has(.case__video):hover .case__video { height: 100%; transform: scale(1.04); }
  .case:has(.case__video):hover .case__body {
    margin-top: auto;
    background: linear-gradient(180deg, rgba(3, 8, 20, 0) 0%, rgba(3, 8, 20, .78) 35%, rgba(3, 8, 20, .92) 100%);
    border-color: transparent;
  }
  .case:has(.case__video):hover .case__body h3 { color: #fff; transform: scale(1.12); }
  .case:has(.case__video):hover .case__body p { color: rgba(234, 242, 255, .88); transform: scale(1.05); }
  .case:has(.case__video):hover .tags li { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
  /* card vira coluna para o texto ficar embaixo, por cima do vídeo */
  .case:has(.case__video) { display: flex; flex-direction: column; }
  .case:has(.case__video) .case__body { flex: 1; }
  .case:has(.case__video):hover .case__body { flex: 0 0 auto; }
  .case:has(.case__video):hover .case__zoom, .case:has(.case__video):hover .case__cheia, .case:has(.case__video):hover .badge { z-index: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .case:has(.case__video) .case__body { justify-content: flex-start; }
  .case:has(.case__video):hover .case__body { justify-content: flex-end; }
  .case:has(.case__video):hover .case__zoom { top: 12px; bottom: auto; right: 60px; }
}

/* =========================================================
   Soluções v3: comece pelo problema
   ========================================================= */
.sol3-head { text-align: center; max-width: 640px; margin: 0 auto; }
.sol3-rotulo { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.sol3-head .display { margin-top: 8px; color: #fff; }
.sol3-sub { margin-top: 10px; font-size: 1.05rem; color: rgba(234, 242, 255, .7); }
.sol3-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.sol3-filtros button {
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03); color: rgba(234, 242, 255, .8);
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: all .2s;
}
.sol3-filtros button:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }
.sol3-filtros button.is-ativo { background: #fff; border-color: #fff; color: #08142b; font-weight: 600; }

.sol3-grid { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sol3 {
  display: flex; flex-direction: column;
  padding: 22px 22px 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 30, 62, .85), rgba(8, 18, 40, .9));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.sol3:hover { transform: translateY(-4px); border-color: rgb(var(--neon-rgb) / .35); box-shadow: 0 24px 50px -28px rgb(var(--accent-rgb) / .7); }
.sol3.is-oculto { display: none; }
.sol3__topo { display: flex; align-items: center; justify-content: space-between; }
.sol3__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--cyan); background: rgb(var(--accent-rgb) / .14); }
.sol3__ic .icon { width: 20px; height: 20px; }
.sol3__cat { font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: rgba(234, 242, 255, .5); }
.sol3__dor { margin-top: 16px; font-size: .95rem; line-height: 1.45; color: rgba(234, 242, 255, .62); font-style: italic; }
.sol3__nome { margin-top: 8px; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #fff; }
.sol3__faz { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.sol3__faz li { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.35; color: rgba(234, 242, 255, .86); }
.sol3__faz .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cyan); stroke-width: 3; }
.sol3__cta {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--cyan);
}
.sol3__cta .icon { width: 16px; height: 16px; transition: transform .25s; }
.sol3:hover .sol3__cta .icon { transform: translateX(4px); }

.sol3-faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; padding: 20px 24px; border-radius: 18px;
  background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--neon-rgb) / .2);
}
.sol3-faixa strong { display: block; font-size: 1.05rem; color: #fff; }
.sol3-faixa span { font-size: .92rem; color: rgba(234, 242, 255, .7); }
@media (min-width: 1024px) { .sol3-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) and (min-height: 560px) { .page-solucoes .sol-page { padding-top: 104px; padding-bottom: 40px; min-height: auto; } }

/* notebook acima das linhas animadas (elas não passam pela tela) */
.page-home .hero__nv { z-index: 1; }
.page-home .hero__grid { z-index: 2; }

/* celular: tocar no card abre o vídeo em destaque, com zoom no texto por cima */
@media not all and (hover: hover) and (pointer: fine) {
  .case.is-aberto { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
  .case.is-aberto .case__img { position: absolute; inset: 0; height: 100%; z-index: 0; }
  .case.is-aberto .case__video { height: 100%; aspect-ratio: auto; transform: scale(1.04); transition: transform .8s var(--ease); }
  .case.is-aberto .case__body {
    position: relative; z-index: 1; margin-top: auto; padding-top: 70px;
    background: linear-gradient(180deg, rgba(3, 8, 20, 0) 0%, rgba(3, 8, 20, .8) 35%, rgba(3, 8, 20, .94) 100%);
    border-color: transparent;
  }
  .case .case__body h3, .case .case__body p { transform-origin: left bottom; transition: transform .5s var(--ease), color .4s; }
  .case.is-aberto .case__body h3 { color: #fff; transform: scale(1.12); }
  .case.is-aberto .case__body p { color: rgba(234, 242, 255, .9); transform: scale(1.04); }
  .case.is-aberto .tags li { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
  .case.is-aberto .case__play { opacity: 0; pointer-events: none; }
  .case.is-aberto { min-height: 440px; }
  .case.is-aberto .case__zoom, .case.is-aberto .case__cheia, .case.is-aberto .badge { z-index: 2; }
  .case.is-aberto .case__zoom { top: 12px; bottom: auto; right: 60px; }
}

/* painel: Dashboard e Monitor de IA */
.painel__vivo { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #22e08b; box-shadow: 0 0 0 3px rgba(34, 224, 139, .2); animation: vivo 1.6s ease-in-out infinite; vertical-align: middle; }
@keyframes vivo { 50% { opacity: .35; } }
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dash__card { padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); display: grid; justify-items: start; gap: 6px; }
.dash__card--larga { grid-column: 1 / -1; justify-items: stretch; }
.dash__tit { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: #7d8aa0; }
.dash__tit b { color: #6fdca6; font-weight: 600; }
.dash__linha { width: 100%; height: 70px; }
.dash__linha polyline { fill: none; stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dash__linha polygon { fill: rgb(var(--neon-rgb) / .12); stroke: none; }
.dash__dias { display: flex; justify-content: space-between; font-size: 10px; color: #6f7c93; }
.dash__anel { --p: 50; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #0b1424 72%, transparent 73%), conic-gradient(#22e08b calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.dash__anel--ia { background: radial-gradient(closest-side, #0b1424 72%, transparent 73%), conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.dash__anel b { font-size: 14px; color: #fff; }
.dash__card small { font-size: 11px; color: #7d8aa0; }
.iam { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; margin-top: 12px; }
.iam__agentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iam__agentes li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.iam__agentes i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.iam__agentes i.on { background: #22e08b; box-shadow: 0 0 0 3px rgba(34, 224, 139, .18); animation: vivo 1.6s ease-in-out infinite; }
.iam__agentes i.off { background: #6f7c93; }
.iam__agentes div { flex: 1; display: grid; min-width: 0; }
.iam__agentes b { font-size: 12px; font-weight: 600; color: #fff; }
.iam__agentes span { font-size: 11px; color: #7d8aa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iam__agentes em { font-style: normal; font-size: 11px; color: #7cc4ff; white-space: nowrap; }
.iam__log { padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .06); font-size: 11.5px; overflow: hidden; }
.iam__log-tit { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--cyan); }
.iam__log p { margin: 0 0 6px; color: #cfd8e6; line-height: 1.35; }
.iam__log p:nth-child(2) { animation: rise .4s var(--ease) both; }
.iam__log time { display: inline-block; min-width: 38px; color: #6f7c93; font-family: var(--font-mono); font-size: 10.5px; }
@media (max-width: 640px) { .iam { grid-template-columns: 1fr; } }

/* cases (computador): o card mantém sempre o mesmo tamanho; no hover só o vídeo roda e o texto cresce de leve */
@media (hover: hover) and (pointer: fine) {
  .case:has(.case__video):hover .case__img { position: relative; inset: auto; height: auto; }
  .case:has(.case__video):hover .case__video { height: calc(37vh / var(--z, 1)); transform: scale(1.03); }
  .case:has(.case__video):hover .case__body { margin-top: 0; flex: 1; justify-content: flex-start; background: #e7f1fc; border-color: #c4dcf3; }
  .case:has(.case__video):hover .case__body h3 { color: #14207a; transform: scale(1.04); }
  .case:has(.case__video):hover .case__body p { color: #56627a; transform: none; }
  .case:has(.case__video):hover .tags li { background: #e6f1fb; border-color: #cfe2f4; color: inherit; }
  .case:has(.case__video):hover .case__zoom { top: auto; bottom: 14px; right: 14px; }
}

/* cases (computador): no hover o card inteiro cresce (vídeo + texto) com transform —
   não mexe no layout, então fica estável enquanto o mouse estiver em cima */
@media (hover: hover) and (pointer: fine) {
  .cases { overflow: visible; }
  .case:has(.case__video) { transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform; }
  .case:has(.case__video):hover { transform: scale(1.08); z-index: 5; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgb(var(--neon-rgb) / .35); }
  .case:has(.case__video):hover .case__video { transform: none; }
  .case:has(.case__video):hover .case__body h3,
  .case:has(.case__video):hover .case__body p { transform: none; }
  .case:has(.case__video):hover .case__body h3 { color: #14207a; }
}
/* destaque maior no hover (card inteiro, vídeo e texto) */
@media (hover: hover) and (pointer: fine) {
  .case:has(.case__video):hover { transform: scale(1.16); z-index: 6; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgb(var(--neon-rgb) / .45), 0 0 50px -10px rgb(var(--accent-rgb) / .5); }
  .case:has(.case__video):hover .case__video { transform: scale(1.06); }
  .case:has(.case__video):hover .case__body h3 { transform: scale(1.06); transform-origin: left center; }
}
/* hover: texto do card ainda maior */
@media (hover: hover) and (pointer: fine) {
  .case:has(.case__video):hover .case__body h3 { transform: scale(1.14); transform-origin: left center; }
  .case:has(.case__video):hover .case__body p { transform: scale(1.08); transform-origin: left top; width: 92%; }
}
/* cases sem título: cards logo no começo da seção */
#cases .cases { margin-top: 0; }

/* parceiros: 15 logos + convite em 2 fileiras de 8 */
@media (min-width: 1024px) and (min-height: 560px) {
  .partners { grid-template-columns: repeat(8, 1fr); gap: 12px; }
  .partner { height: clamp(110px, calc(17vh / var(--z, 1)), 160px); padding: 14px 16px; }
}
@media (max-width: 1023px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .partners { grid-template-columns: repeat(2, 1fr); } }
/* parceiros: 17 logos + convite = 2 fileiras de 9 */
@media (min-width: 1024px) and (min-height: 560px) {
  .partners { grid-template-columns: repeat(9, 1fr); gap: 11px; }
  .partner { padding: 12px 14px; }
}
.painel__main { box-sizing: border-box; overflow: hidden; }

/* notebook que fecha/abre com a rolagem: o canvas assume o lugar do vídeo no fim da abertura */
.nv-scroll { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.hero__nv.is-scroll .nv-scroll { opacity: 1; }
.hero__nv.is-scroll video { visibility: hidden; }

/* fechamento só da tampa (substitui o canvas de quadros) */
.nv-scroll { display: none; }
.nv-fecha { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.hero__nv.is-fecha .nv-fecha { opacity: 1; }
.hero__nv.is-fecha video { visibility: hidden; }
.nv-fecha__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nv-fecha__tampa, .nv-fecha__verso { position: absolute; left: 0; top: 0; width: 1200px; height: 790px; max-width: none; transform-origin: 0 0; }
.nv-fecha__verso {
  display: grid; place-items: center; opacity: 0;
  border-radius: 22px;
  background: linear-gradient(160deg, #5f646d 0%, #484c54 50%, #34373e 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12);
}
.nv-fecha__verso img { width: 150px; opacity: .9; transform: scaleY(-1); }

/* =========================================================
   Sobre a empresa: texto à esquerda, foto à direita
   ========================================================= */
.section--sobre {
  background: linear-gradient(180deg, rgba(10, 26, 60, .42), rgba(8, 20, 48, .52));
  backdrop-filter: blur(3px);
  border-top: 1px solid rgb(var(--neon-rgb) / .1);
  color: #eaf2ff;
}
.sobre { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .sobre { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.sobre__rotulo { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.sobre .display { margin-top: 10px; color: #fff; font-size: clamp(1.7rem, calc(3.4vw / var(--z, 1)), 2.5rem); line-height: 1.15; }
.sobre__lead { margin-top: 16px; font-size: 1.08rem; line-height: 1.6; color: rgba(234, 242, 255, .88); }
.sobre__p { margin-top: 12px; font-size: .98rem; line-height: 1.65; color: rgba(234, 242, 255, .68); }
.sobre__pontos { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.sobre__pontos li { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid rgb(var(--neon-rgb) / .5); }
.sobre__pontos strong { font-size: .98rem; color: #fff; }
.sobre__pontos span { font-size: .9rem; color: rgba(234, 242, 255, .65); }
.sobre__foto { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(72vh / var(--z, 1)); width: 100%;
  border: 1px solid rgb(var(--neon-rgb) / .16); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre__foto-vazia {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px), rgba(10, 30, 66, .5);
  border: 2px dashed rgba(255, 255, 255, .18); border-radius: 22px; color: rgba(234, 242, 255, .5); font-size: .95rem;
}
.sobre__foto-vazia .icon { width: 42px; height: 42px; }
@media (min-width: 1024px) and (min-height: 560px) {
  .sobre__foto { aspect-ratio: auto; height: min(calc(68vh / var(--z, 1)), 560px); }
}
@media (max-width: 1023px) { .sobre__foto { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) and (min-height: 560px) {
  #sobre { padding-top: 96px; }
  .sobre__pontos { margin: calc(2.2vh / var(--z, 1)) 0 calc(2.6vh / var(--z, 1)); gap: calc(1.2vh / var(--z, 1)); }
}
/* parceiros: 18 itens em 3 fileiras de 6 */
@media (min-width: 1024px) and (min-height: 560px) {
  .partners { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: calc(2.6vh / var(--z, 1)); }
  .partner { height: clamp(84px, calc(13.5vh / var(--z, 1)), 130px); padding: 12px 22px; }
}

/* relógio na tela do notebook (coordenadas da tampa retificada 1200x790) */
.nv-relogio {
  position: absolute; left: 0; top: 0; width: 1200px; height: 790px; transform-origin: 0 0;
  pointer-events: none; display: block;
}
.nv-relogio__hora, .nv-relogio__data { position: absolute; left: 490px; width: 380px; text-align: center; font-family: var(--font-body); }
.nv-relogio__hora { top: 468px; font-size: 64px; font-weight: 300; letter-spacing: .04em; color: rgba(234, 244, 255, .92); text-shadow: 0 0 18px rgb(var(--neon-rgb) / .35); }
.nv-relogio__data { top: 548px; font-size: 22px; letter-spacing: .06em; color: rgba(150, 205, 255, .75); text-transform: capitalize; }
.nv-relogio__hora { top: 448px; font-size: 70px; }
.nv-relogio__data { top: 534px; text-transform: none; }

/* parceiros: fundo dos cartões bem fraco (logos já sem fundo branco) */
#parceiros .partner:not(.partner--empty),
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) {
  background: rgba(225, 236, 252, .16);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
#parceiros .partner img { mix-blend-mode: normal; }

/* relógio centralizado na tela do notebook */
.nv-relogio__hora, .nv-relogio__data { left: 0; width: 1200px; }
#parceiros .partner:not(.partner--empty),
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) {
  background: rgba(228, 238, 252, .58);
  border-color: rgba(255, 255, 255, .25);
}
/* logos com fundo branco somem no cartão (multiply); cartão em azul-acinzentado suave */
#parceiros .partner:not(.partner--empty),
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) { background: rgba(214, 228, 248, .62); }
#parceiros .partner img { mix-blend-mode: multiply; }
/* cartão opaco em tom suave: o multiply funciona e o branco das imagens some */
#parceiros .partner:not(.partner--empty),
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) {
  background: #b9c6d9; backdrop-filter: none; border-color: rgba(255, 255, 255, .18); isolation: isolate;
}

/* =========================================================
   Parceiros: logos direto sobre o fundo do site (sem cartão branco)
   ========================================================= */
#parceiros .partner:not(.partner--empty),
.light .partner:not(.partner--dark):not(.partner--cover):not(.partner--empty) {
  background: transparent; border: 1px solid transparent; box-shadow: none; backdrop-filter: none;
  transition: border-color .3s, background .3s;
}
#parceiros .partner:not(.partner--empty):hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
#parceiros .partner img { mix-blend-mode: normal; opacity: .88; max-height: 62%; transition: opacity .3s, transform .3s; }
#parceiros .partner:hover img { opacity: 1; transform: scale(1.05); }
#parceiros .partner img[src*="embracon.svg"] { filter: brightness(0) invert(1); }
#parceiros .partner img { width: auto; height: 58%; max-height: none; max-width: 78%; object-fit: contain; }
#parceiros .partner img[src*="lollapalooza"], #parceiros .partner img[src*="premier"], #parceiros .partner img[src*="dr-batidos"],
#parceiros .partner img[src*="thetown"], #parceiros .partner img[src*="hub360"], #parceiros .partner img[src*="lanap"] { height: 44%; }
#parceiros .partner img { height: 52%; max-width: 74%; }
#parceiros .partner img[src*="lollapalooza"], #parceiros .partner img[src*="premier"], #parceiros .partner img[src*="dr-batidos"],
#parceiros .partner img[src*="thetown"], #parceiros .partner img[src*="hub360"], #parceiros .partner img[src*="lanap"], #parceiros .partner img[src*="venora"] { height: 40%; }
#parceiros .partner img { height: 64%; max-width: 76%; }
#parceiros .partner img[src*="rockinrio"], #parceiros .partner img[src*="tomorrowland"], #parceiros .partner img[src*="open-drinks"], #parceiros .partner img[src*="licitai"] { height: 82%; }
#parceiros .partner img[src*="lollapalooza"], #parceiros .partner img[src*="premier"], #parceiros .partner img[src*="dr-batidos"],
#parceiros .partner img[src*="thetown"], #parceiros .partner img[src*="hub360"], #parceiros .partner img[src*="lanap"], #parceiros .partner img[src*="venora"] { height: 48%; }
#parceiros .partner img[src*="open-drinks"] { height: 80%; }
#parceiros .partner img[src*="venora-w"] { height: 26%; }
#parceiros .partner img[src*="venora-w"] { height: 30%; max-width: 62%; }

/* cases (computador): só o título à mostra; o texto e as tags aparecem ao passar o mouse */
@media (hover: hover) and (pointer: fine) {
  .case .case__body p, .case .case__body .tags {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .5s var(--ease), opacity .4s ease, margin-top .4s var(--ease);
  }
  .case:hover .case__body p { max-height: 140px; opacity: 1; margin-top: 8px; }
  .case:hover .case__body .tags { max-height: 60px; opacity: 1; margin-top: 12px; }
  .cases { align-items: start; }
}
/* fileira com altura reservada: abrir um card não desloca os outros nem a seção */
@media (hover: hover) and (pointer: fine) {
  #cases .cases { min-height: calc(calc(37vh / var(--z, 1)) + 230px); align-items: start; }
}

/* parceiros (computador): logos maiores */
@media (min-width: 1024px) {
  #parceiros .partner { height: clamp(100px, calc(16vh / var(--z, 1)), 150px); }
  #parceiros .partner img { height: 74%; max-width: 86%; }
  #parceiros .partner img[src*="rockinrio"], #parceiros .partner img[src*="tomorrowland"], #parceiros .partner img[src*="open-drinks"], #parceiros .partner img[src*="licitai"] { height: 92%; }
  #parceiros .partner img[src*="lollapalooza"], #parceiros .partner img[src*="premier"], #parceiros .partner img[src*="dr-batidos"],
  #parceiros .partner img[src*="thetown"], #parceiros .partner img[src*="hub360"], #parceiros .partner img[src*="lanap"] { height: 56%; }
  #parceiros .partner img[src*="venora-w"] { height: 36%; max-width: 70%; }
}
/* logos surgem uma a uma quando a seção aparece na tela */
#parceiros .partners > li { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .6s ease, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
#parceiros .partners.is-aparecendo > li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #parceiros .partners > li { opacity: 1; transform: none; } }

/* parceiros: as logos entram vindas da esquerda, uma de cada vez até o seu lugar (~4 s no total) */
#parceiros .partners { overflow: visible; }
#parceiros .partners > li {
  opacity: 0;
  transform: translateX(calc(-110vw / var(--z, 1)));
  transition: transform .9s cubic-bezier(.16, .84, .3, 1), opacity .5s ease;
  transition-delay: calc(var(--i, 0) * 180ms);
}
#parceiros .partners.is-aparecendo > li { opacity: 1; transform: none; }
#parceiros { overflow-x: clip; }
#parceiros .partners > li,
#parceiros .partners > li.partner:not(.partner--empty) {
  transition: transform .9s cubic-bezier(.16, .84, .3, 1), opacity .5s ease, border-color .3s, background .3s;
  transition-delay: calc(var(--i, 0) * 180ms), calc(var(--i, 0) * 180ms), 0s, 0s;
}

/* celular: card mostra só o título; texto e tags aparecem quando o card é tocado (aberto) */
@media not all and (hover: hover) and (pointer: fine) {
  .case .case__body p, .case .case__body .tags {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .5s var(--ease), opacity .4s ease, margin-top .4s var(--ease);
  }
  .case.is-aberto .case__body p { max-height: 160px; opacity: 1; margin-top: 8px; }
  .case.is-aberto .case__body .tags { max-height: 60px; opacity: 1; margin-top: 12px; }
}
/* celular: notebook acima das linhas animadas */
@media (max-width: 1023px) {
  .page-home .hero__nv { position: relative; z-index: 2; }
  .page-home .hero__title, .page-home .hero__text, .page-home .hero__actions { z-index: 3; }
}
/* iPhone (MP4): sem máscara esfumada nas bordas — o notebook fica inteiro; depois da abertura, camadas sólidas sem mistura */
.hero__nv.is-mp4, .hero__bgvideo.hero__nv.is-mp4 { -webkit-mask-image: none; mask-image: none; }
.hero__nv.is-mp4.is-fecha { mix-blend-mode: normal; }

/* fim da abertura: no lugar do vídeo fica uma imagem idêntica ao último quadro (vídeo escondido
   e reexibido piscava no Chrome). Parado: a imagem cobre as camadas; ao fechar a tampa, ela some. */
.nv-fecha__fim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__nv.is-movendo .nv-fecha__fim { opacity: 0; }
.nv-relogio__hora { text-shadow: none; }

/* Hub 360 um pouco maior */
#parceiros .partner img[src*="hub360"] { height: 56%; }
@media (min-width: 1024px) { #parceiros .partner img[src*="hub360"] { height: 66%; } }

/* costas da tampa: cinza-espacial escuro como o corpo do notebook (o cinza claro aparecia como um clarão branco) */
.nv-fecha__verso {
  background: linear-gradient(160deg, #33363c 0%, #25272c 50%, #1a1b1f 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.nv-fecha__verso img { opacity: .35; }

/* Hub 360 maior (logo e frase de baixo) e Seven 360 */
#parceiros .partner img[src*="hub360"] { height: 72%; max-width: 96%; }
#parceiros .partner img[src*="seven360"] { height: 70%; }
@media (min-width: 1024px) {
  #parceiros .partner img[src*="hub360"] { height: 92%; max-width: 100%; }
  #parceiros .partner img[src*="seven360"] { height: 78%; }
}
/* Hub 360 é muito largo: usa a largura toda do card (sem a margem lateral) para crescer de verdade */
#parceiros .partner:has(img[src*="hub360"]) { padding-left: 0; padding-right: 0; overflow: visible; }
#parceiros .partner img[src*="hub360"] { max-width: 112%; height: auto; width: 112%; }
@media (min-width: 1024px) { #parceiros .partner img[src*="hub360"] { max-width: 118%; width: 118%; height: auto; } }


/* relógio na posição do novo vídeo (horário e dia de quem acessa, no fuso do aparelho) */
.nv-relogio__hora { top: 452px; font-size: 98px; font-weight: 300; letter-spacing: .02em; text-shadow: none; color: rgba(240, 246, 255, .95); }
.nv-relogio__data { top: 574px; font-size: 27px; letter-spacing: .02em; color: rgba(225, 235, 250, .85); }

/* sem horário e dia na tela do notebook */
.nv-relogio { display: none !important; }

/* logos parceiras: tamanho uniforme calculado pelo main.js (mesma área visual para todas) */
#parceiros .partner:has(img[src*="hub360"]) { padding-left: 22px; padding-right: 22px; overflow: hidden; }
#parceiros .partner img.is-uniforme { max-width: none !important; max-height: none !important; object-fit: contain; }
#parceiros .partner:has(img.is-uniforme), #parceiros .partner:has(img[src*="hub360"]) { padding-left: 0; padding-right: 0; overflow: visible; }

/* Soluções: cabeçalho "Qual é o seu desafio hoje?" maior */
.sol3-head { max-width: 900px; }
.sol3-rotulo { font-size: .95rem; }
.sol3-head .display { font-size: clamp(2.4rem, calc(5.2vw / var(--z, 1)), 4.2rem); line-height: 1.05; margin-top: 12px; }
.sol3-sub { font-size: clamp(1.1rem, calc(1.6vw / var(--z, 1)), 1.35rem); margin-top: 16px; }
.sol3-filtros { margin-top: 32px; gap: 10px; }
.sol3-filtros button { font-size: 1.05rem; padding: 12px 22px; }

/* telas grandes: o site inteiro é ampliado (zoom definido no <head>); as medidas em vh/vw acima já compensam */

/* notebook mais alto, na altura das frases (computador) */
@media (min-width: 1024px) {
  .page-home .hero__nv, .page-home .hero__sombra { translate: 0 calc(-18vh / var(--z, 1)); }
}

/* "Soluções" grande e em destaque (degradê da logo, em selo) */
.sol3-rotulo {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--font-display, inherit); font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: .16em;
  padding: .32em 1.05em .3em 1.2em; border-radius: 999px;
  border: 1px solid rgb(var(--neon-rgb) / .45);
  background: linear-gradient(100deg, rgb(var(--neon-rgb) / .14), rgba(47, 109, 240, .16));
  box-shadow: 0 0 28px rgb(var(--neon-rgb) / .18), inset 0 0 18px rgb(var(--neon-rgb) / .08);
}
.sol3-rotulo { color: transparent; -webkit-background-clip: padding-box, text; background-clip: padding-box, text;
  background-image: linear-gradient(100deg, rgb(var(--neon-rgb) / .14), rgba(47, 109, 240, .16)), linear-gradient(100deg, #8ee6ff 0%, var(--cyan) 30%, #2a9bf3 65%, #2f6df0 100%); }

/* filtros embaixo dos cards */
.sol3-grid + .sol3-filtros { margin-top: 36px; }
.sol3-head + .sol3-grid { margin-top: 36px; }

/* cards centralizados (fileiras incompletas e filtro ativo ficam no meio) */
.sol3-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sol3-grid > .sol3 { flex: 0 1 100%; }
@media (min-width: 640px) { .sol3-grid > .sol3 { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .sol3-grid > .sol3 { flex-basis: calc((100% - 48px) / 4); } }

/* rodapé organizado (computador): marca + frase | menu numa linha | contatos — tudo alinhado */
@media (min-width: 1024px) {
  .footer { padding: 26px 0 16px; }
  .footer__inner { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); align-items: center; gap: 48px; padding-right: 96px; }
  .footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__brand p { margin: 0; max-width: 21rem; font-size: .85rem; line-height: 1.55; }
  .footer__nav { grid-auto-flow: column; justify-content: center; align-items: center; gap: 28px; font-size: .95rem; }
  .footer__nav a { white-space: nowrap; }
  .footer__contact { justify-items: end; text-align: right; gap: 6px; font-size: .85rem; }
  .footer__contact a { white-space: nowrap; }
  .footer__legal { padding-right: 96px; margin-top: 18px; padding-top: 12px; }
}

/* cards de soluções: zoom e destaque no card sob o mouse; os outros recuam um pouco */
@media (hover: hover) and (pointer: fine) {
  .sol3-grid > .sol3 { position: relative; transition: transform .35s var(--ease), opacity .35s, filter .35s, border-color .3s, box-shadow .35s !important; }
  .sol3-grid:hover > .sol3 { opacity: .55; filter: saturate(.7); }
  .sol3-grid > .sol3:hover {
    transform: scale(1.08) !important; z-index: 3; opacity: 1; filter: none;
    border-color: rgb(var(--neon-rgb) / .6);
    background: linear-gradient(180deg, rgba(20, 44, 88, .97), rgba(10, 24, 54, .98));
    box-shadow: 0 30px 70px -24px rgb(var(--accent-rgb) / .75), 0 0 0 1px rgb(var(--neon-rgb) / .25), 0 0 40px -10px rgb(var(--neon-rgb) / .35);
  }
}

/* sombra do notebook só aparece quando ele termina de abrir (durante a abertura ficava solta, fora do lugar) */
.page-home .hero__sombra { opacity: 0; transition: opacity .6s ease; }
.page-home .hero:has(.hero__nv.is-fim) .hero__sombra { opacity: 1; }

/* Como funciona: formatos da primeira conversa */
.step__formatos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.step__formatos li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 500; color: #eaf4ff;
  background: rgb(var(--neon-rgb) / .08); border: 1px solid rgb(var(--neon-rgb) / .3);
}
.step__formatos .icon { width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   Sobre: celular interativo (proporção do iPhone 17 Pro Max, moldura em titânio)
   ========================================================= */
.fone-palco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; perspective: 1400px; }
.fone {
  --w: min(320px, 74vw); position: relative; width: var(--w); aspect-ratio: 78 / 163;
  border-radius: calc(var(--w) * .17); padding: calc(var(--w) * .035);
  background: linear-gradient(135deg, #8d8f94 0%, #3c3e43 18%, #6f7177 50%, #2c2e33 82%, #85878c 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 0 0 4px #1b1c20, 0 50px 90px -30px rgba(0,0,0,.9), 0 0 80px -20px rgb(var(--accent-rgb) / .45);
  transform: rotateY(-12deg) rotateX(4deg); transition: transform .8s var(--ease);
}
.fone:hover { transform: rotateY(-4deg) rotateX(2deg); }
.fone__botao { position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #2a2b2f, #7b7d82); }
.fone__botao--acao { left: -3px; top: 17%; height: 4.5%; }
.fone__botao--vol1 { left: -3px; top: 25%; height: 9%; }
.fone__botao--vol2 { left: -3px; top: 36%; height: 9%; }
.fone__botao--power { right: -3px; top: 27%; height: 13%; transform: scaleX(-1); }
.fone__botao--camera { right: -3px; top: 52%; height: 8%; transform: scaleX(-1); }
.fone__tela {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .135);
  background: radial-gradient(120% 60% at 50% 0%, #0f2a55 0%, #07122a 55%, #050b1a 100%);
  box-shadow: inset 0 0 0 5px #000; color: #eaf2ff; font-family: var(--font-body);
  font-size: calc(var(--w) * .043);
}
.fone__ilha { position: absolute; top: 2.1%; left: 50%; width: 31%; height: 4.4%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 5; }
.fone__status { position: absolute; inset: 0 0 auto; height: 8.4%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; font-weight: 600; font-size: 1.02em; z-index: 4; }
.fone__icones { display: flex; align-items: center; gap: .35em; }
.fone__icones svg { width: 1.05em; height: 1.05em; }
.fone__bateria { position: relative; width: 1.75em; height: .9em; border: 1.5px solid rgba(255,255,255,.6); border-radius: .25em; padding: 1px; }
.fone__bateria b { display: block; height: 100%; width: 80%; background: #fff; border-radius: .12em; }
.fone__home { position: absolute; bottom: 1.2%; left: 50%; width: 36%; height: .9%; transform: translateX(-50%); background: rgba(255,255,255,.75); border-radius: 999px; z-index: 5; }

.app { position: absolute; inset: 8.4% 0 0; display: flex; flex-direction: column; }
.app__topo { display: flex; align-items: center; justify-content: space-between; padding: 4% 7% 3%; }
.app__topo small { display: block; font-size: .8em; color: rgba(234,242,255,.6); }
.app__topo strong { font-size: 1.25em; font-family: var(--font-display); letter-spacing: .01em; }
.app__topo img { width: 2.3em; height: 2.3em; object-fit: contain; }
.app__pagina { display: none; flex: 1; min-height: 0; overflow: hidden; padding: 0 6% 4%; animation: appEntra .35s var(--ease); }
.app[data-aba="inicio"] [data-pagina="inicio"], .app[data-aba="chat"] [data-pagina="chat"],
.app[data-aba="cobrancas"] [data-pagina="cobrancas"], .app[data-aba="acesso"] [data-pagina="acesso"] { display: flex; flex-direction: column; }
@keyframes appEntra { from { opacity: 0; transform: translateY(8px); } }
.app__saldo { padding: 6% 6%; border-radius: 1.1em; background: linear-gradient(135deg, #1e6ff0, #12b6e8); box-shadow: 0 10px 30px -12px rgba(30,111,240,.8); }
.app__saldo small { font-size: .8em; opacity: .85; }
.app__saldo strong { display: block; margin: .15em 0; font-size: 1.85em; font-family: var(--font-display); }
.app__saldo span { font-size: .75em; background: rgba(255,255,255,.2); padding: .2em .6em; border-radius: 999px; }
.app__grade { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: .8em; }
.app__grade button { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; padding: .75em; border-radius: .95em; text-align: left; font: inherit; font-size: .85em; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: background .2s, transform .15s; }
.app__grade button:hover { background: rgba(94,233,255,.12); }
.app__grade button:active { transform: scale(.96); }
.app__grade b { display: grid; place-items: center; width: 2em; height: 2em; margin-bottom: .3em; border-radius: .6em; background: rgb(var(--neon-rgb) / .14); color: var(--cyan); }
.app__grade small { font-weight: 400; font-size: .85em; color: rgba(234,242,255,.55); }
.fone svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fone__icones svg:first-child { stroke: none; }
.app__titulo { margin: .9em 0 .4em; font-size: .85em; font-weight: 600; color: rgba(234,242,255,.65); }
.app__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.app__lista li { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .8em; background: rgba(255,255,255,.05); font-size: .82em; }
.app__lista span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__lista i { width: .6em; height: .6em; border-radius: 50%; flex: none; }
.app__lista i.ok { background: #34d399; }
.app__lista i.ia { background: var(--cyan); }
.app__lista i.pend { background: #fbbf24; }
.app__lista .pago { color: #34d399; font-weight: 600; }
.cobrar { font: inherit; font-size: .9em; font-weight: 600; color: #fff; background: #1e6ff0; border: 0; border-radius: 999px; padding: .3em .8em; cursor: pointer; }
.cobrar.is-enviado { background: rgba(52,211,153,.18); color: #34d399; cursor: default; }
.cob__barra { height: .55em; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.cob__barra span { display: block; height: 100%; background: linear-gradient(90deg, #12b6e8, #34d399); border-radius: inherit; transition: width .6s var(--ease); }
.cob__legenda { margin: .5em 0 .8em; font-size: .78em; color: rgba(234,242,255,.6); }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; overflow-y: auto; padding-top: .3em; scrollbar-width: none; }
.chat__msg { max-width: 82%; margin: 0; padding: .55em .8em; border-radius: 1em; font-size: .82em; line-height: 1.4; animation: appEntra .3s var(--ease); }
.chat__msg--cli { align-self: flex-end; background: #1e6ff0; border-bottom-right-radius: .3em; }
.chat__msg--ia { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: .3em; }
.chat__msg--digitando { color: rgba(234,242,255,.6); font-style: italic; }
.chat__opcoes { display: flex; flex-wrap: wrap; gap: .4em; padding-top: .6em; }
.chat__opcoes button { font: inherit; font-size: .78em; color: var(--cyan); background: rgb(var(--neon-rgb) / .1); border: 1px solid rgb(var(--neon-rgb) / .35); border-radius: 999px; padding: .4em .8em; cursor: pointer; }
.acesso { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; text-align: center; }
.acesso__rosto { position: relative; display: grid; place-items: center; width: 7em; height: 7em; border-radius: 1.6em; border: 2px solid rgb(var(--neon-rgb) / .5); color: var(--cyan); overflow: hidden; }
.fone .acesso__rosto svg { width: 3.6em; height: 3.6em; }
.acesso__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: 0; }
.acesso.is-lendo .acesso__scan { opacity: 1; animation: scan 1.2s ease-in-out infinite alternate; }
@keyframes scan { to { top: calc(100% - 2px); } }
.acesso.is-liberado .acesso__rosto { border-color: #34d399; color: #34d399; }
.acesso__status { margin: 0; font-size: .85em; color: rgba(234,242,255,.7); }
.acesso.is-liberado .acesso__status { color: #34d399; font-weight: 600; }
.acesso__btn { font: inherit; font-size: .9em; font-weight: 600; color: #fff; background: #1e6ff0; border: 0; border-radius: 999px; padding: .65em 1.4em; cursor: pointer; }
.app__abas { display: grid; grid-template-columns: repeat(4, 1fr); padding: .5em 3% 9%; background: rgba(5,11,26,.85); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(10px); }
.app__abas button { display: flex; flex-direction: column; align-items: center; gap: .2em; font: inherit; font-size: .68em; color: rgba(234,242,255,.5); background: none; border: 0; cursor: pointer; }
.fone .app__abas button svg { width: 1.7em; height: 1.7em; }
.app__abas button.is-ativo { color: var(--cyan); }
.fone-palco__dica { margin: 0; font-size: .85rem; color: var(--muted); }
@media (min-width: 1024px) and (min-height: 560px) { .fone { --w: min(340px, calc(78vh / var(--z, 1) * 78 / 163)); } .fone-palco { gap: 10px; } }
@media (max-width: 1023px) { .fone { transform: none; } }

/* =========================================================
   Celular do "Sobre": Instagram da Revvotec rolando o feed
   ========================================================= */
.ig { position: absolute; inset: 8.4% 0 0; display: flex; flex-direction: column; background: #000; color: #f5f5f5; }
.fone__tela:has(.ig) { background: #000; }
.ig svg { width: 1.45em; height: 1.45em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ig__topo { display: flex; align-items: center; gap: .5em; padding: .45em 4% .55em; }
.ig__topo strong { flex: 1; font-size: 1.12em; font-weight: 700; }
.ig__rolagem { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ig__rolagem::-webkit-scrollbar { display: none; }
.ig__perfil { padding: 0 4%; }
.ig__cabeca { display: flex; align-items: center; gap: 6%; }
.ig__avatar { flex: none; width: 4.6em; height: 4.6em; padding: 3px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig__avatar img, .ig__mini img, .ig__eu img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #000; display: block; }
.ig__numeros { flex: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; text-align: center; font-size: .78em; }
.ig__numeros b { display: block; font-size: 1.25em; }
.ig__bio { margin: .7em 0 0; font-size: .78em; line-height: 1.4; }
.ig__bio b { display: block; }
.ig__bio a { display: inline-flex; align-items: center; gap: .3em; color: #e0f1ff; font-weight: 600; }
.ig__bio a svg { width: 1.1em; height: 1.1em; }
.ig__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; margin: .8em 0; }
.ig__botoes > * { display: grid; place-items: center; font: inherit; font-size: .8em; font-weight: 600; padding: .5em; border-radius: .6em; border: 0; color: #fff; background: #262626; cursor: pointer; }
.ig__seguir { background: #0095f6 !important; }
.ig__seguir.is-seguindo { background: #262626 !important; }
.ig__abas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #262626; margin: 0 -4.2%; }
.ig__abas span { display: grid; place-items: center; padding: .55em 0; color: #8e8e8e; }
.ig__abas span.is-ativo { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.ig__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -4.2%; }
.ig__grade button { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; }
.ig__grade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig__grade i { position: absolute; top: .35em; right: .35em; color: #fff; }
.ig__grade i svg { width: 1.1em; height: 1.1em; fill: #fff; stroke: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ig__feed { padding-top: .6em; border-top: 1px solid #1a1a1a; margin-top: .6em; }
.ig__post header { display: flex; align-items: center; gap: .55em; padding: .55em 4%; font-size: .8em; }
.ig__post header p { flex: 1; margin: 0; }
.ig__mini { width: 2.2em; height: 2.2em; padding: 2px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig__foto { position: relative; aspect-ratio: 4 / 5; background: #111; overflow: hidden; cursor: pointer; user-select: none; }
.ig__foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig__pop { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.ig__pop svg { width: 30%; height: auto; fill: #fff; stroke: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.ig__pop.is-on { animation: igPop .9s ease forwards; }
@keyframes igPop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 45% { transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.ig__acoes { display: flex; align-items: center; gap: .9em; padding: .6em 4% .2em; }
.ig__acoes span { flex: 1; }
.ig__curtir { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ig__curtir.is-curtido { color: #ff3040; }
.ig__curtir.is-curtido svg { fill: #ff3040; animation: igBate .35s ease; }
@keyframes igBate { 50% { transform: scale(1.25); } }
.ig__data { margin: 0; padding: .2em 4% .9em; font-size: .68em; color: #8e8e8e; }
.ig__fim { display: block; margin: .4em 4% 1.2em; padding: .65em; text-align: center; font-size: .78em; font-weight: 600; color: #fff; background: #262626; border-radius: .6em; }
.ig__barra { display: flex; align-items: center; justify-content: space-around; padding: .55em 3% 8.5%; border-top: 1px solid #1a1a1a; background: #000; }
.ig__eu { width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.ig__eu img { border-width: 1px; }

/* =========================================================
   Páginas sob demanda (Como funciona, Sobre, Contato)
   ========================================================= */
body.tem-paginas:not(.modo-pagina) #como-funciona,
body.tem-paginas:not(.modo-pagina) #sobre,
body.tem-paginas:not(.modo-pagina) #contato,
body.tem-paginas:not(.modo-pagina) #localizacao { display: none !important; }
body.modo-pagina main > section:not(.is-pagina-ativa) { display: none !important; }
body.modo-pagina main > section.is-pagina-ativa:first-of-type,
body.modo-pagina main > section.is-pagina-ativa { scroll-margin-top: 0; }
body.modo-pagina main { padding-top: 64px; min-height: 100vh; }
.pagina-entra { animation: paginaEntra .55s var(--ease) both; }
@keyframes paginaEntra { from { opacity: 0; transform: translateY(24px); } }
.pagina-voltar {
  position: fixed; left: 24px; top: 88px; z-index: 40; display: none; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600; color: #eaf4ff; cursor: pointer;
  background: rgba(8, 18, 40, .82); border: 1px solid rgb(var(--neon-rgb) / .35); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); transition: background .2s, border-color .2s, transform .2s;
}
.pagina-voltar .icon { width: 18px; height: 18px; }
.pagina-voltar:hover { background: rgba(20, 44, 88, .95); border-color: rgb(var(--neon-rgb) / .7); transform: translateX(-2px); }
body.modo-pagina .pagina-voltar { display: inline-flex; animation: paginaEntra .4s var(--ease) both; }
.nav a.is-ativo { color: var(--cyan) !important; }
.nav a.is-ativo::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--cyan); }
@media (max-width: 1023px) {
  .pagina-voltar { left: 50%; top: auto; bottom: 22px; transform: translateX(-50%); }
  .pagina-voltar:hover { transform: translateX(-50%); }
  body.modo-pagina main { padding-top: 56px; }
}

/* Soluções: atalho para a IA */
.sol3-ia {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 26px auto 0; max-width: 760px; padding: 14px 16px 14px 22px; border-radius: 999px;
  background: linear-gradient(100deg, rgb(var(--neon-rgb) / .1), rgba(47, 109, 240, .14));
  border: 1px solid rgb(var(--neon-rgb) / .35); box-shadow: 0 0 40px -18px rgb(var(--neon-rgb) / .6);
}
.sol3-ia p { margin: 0; font-size: 1.02rem; color: #eaf4ff; }
.sol3-ia p b { color: var(--cyan); }
.sol3-ia .btn { gap: 8px; }
.sol3-ia .btn .icon { width: 18px; height: 18px; }
@media (max-width: 640px) { .sol3-ia { border-radius: 20px; text-align: center; padding: 16px; } }

/* Instagram do celular: vídeos, legenda, comentários, compartilhar */
.ig__voltar { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ig__foto video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig__mudo { position: absolute; right: .6em; bottom: .6em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(0,0,0,.6); }
.ig__mudo svg { width: 1em !important; height: 1em !important; }
.ig__acoes button { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: transform .15s; }
.ig__acoes button:active { transform: scale(.85); }
.ig__salvar.is-salvo svg { fill: currentColor; }
.ig__legenda { margin: .35em 4% 0; font-size: .74em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; padding-right: 2.6em; }
.ig__legenda.is-aberta { display: block; -webkit-line-clamp: unset; padding-right: 0; }
.ig__mais { position: absolute; right: 0; bottom: 0; padding: 0 0 0 .4em; border: 0; font: inherit; color: #8e8e8e; background: #000; cursor: pointer; }
.ig__legenda.is-aberta .ig__mais { display: none; }
.ig__ver-com { display: block; margin: .3em 4% 0; padding: 0; border: 0; background: none; font: inherit; font-size: .72em; color: #8e8e8e; cursor: pointer; text-align: left; }
.ig__data { padding-top: .3em; }
.ig__folha { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; background: rgba(0,0,0,.45); animation: igFundo .25s ease; }
.ig__folha[hidden] { display: none; }
@keyframes igFundo { from { opacity: 0; } }
.ig__folha-caixa { width: 100%; height: 72%; display: flex; flex-direction: column; background: #262626; border-radius: 1.1em 1.1em 0 0; animation: igSobe .3s var(--ease); }
@keyframes igSobe { from { transform: translateY(100%); } }
.ig__folha-alca { width: 2.6em; height: .25em; margin: .5em auto .3em; border-radius: 999px; background: #8e8e8e; }
.ig__folha-titulo { margin: 0; padding: .2em 0 .6em; text-align: center; font-size: .8em; font-weight: 700; border-bottom: 1px solid #363636; }
.ig__coms { flex: 1; min-height: 0; overflow-y: auto; padding: .7em 4%; display: grid; align-content: start; gap: .8em; scrollbar-width: none; }
.ig__com { display: flex; gap: .55em; font-size: .74em; line-height: 1.35; }
.ig__com .ig__mini { flex: none; width: 2.2em; height: 2.2em; }
.ig__com p { margin: 0; }
.ig__com small { display: block; margin-top: .2em; color: #8e8e8e; }
.ig__com--novo { animation: appEntra .3s var(--ease); }
.ig__coms-vazio { margin: 1.4em 0; text-align: center; font-size: .78em; color: #a8a8a8; }
.ig__com-form { display: flex; align-items: center; gap: .5em; padding: .55em 4% 1.6em; border-top: 1px solid #363636; }
.ig__com-form .ig__mini { flex: none; width: 2em; height: 2em; }
.ig__com-form input { flex: 1; min-width: 0; font: inherit; font-size: .78em; color: #fff; background: transparent; border: 0; outline: none; }
.ig__com-form input::placeholder { color: #8e8e8e; }
.ig__com-form button { font: inherit; font-size: .78em; font-weight: 700; color: #0095f6; background: none; border: 0; cursor: pointer; }
.ig__com-form button:disabled { opacity: .4; cursor: default; }
.ig__aviso { position: absolute; left: 50%; bottom: 16%; z-index: 7; margin: 0; padding: .55em 1em; transform: translate(-50%, 1em); opacity: 0; pointer-events: none; white-space: nowrap; font-size: .74em; font-weight: 600; color: #000; background: #fff; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: opacity .25s, transform .25s; }
.ig__aviso.is-on { opacity: 1; transform: translate(-50%, 0); }
/* botão "Voltar ao início" no canto de baixo (não cobre títulos) */
.pagina-voltar { top: auto; bottom: 24px; left: 24px; }
@media (max-width: 1023px) { .pagina-voltar { left: 16px; bottom: 18px; transform: none; } .pagina-voltar:hover { transform: none; } }

/* Instagram do celular: abas, destaque/story, som, curtidas e comentários reais */
.ig__avatar { border: 0; cursor: pointer; }
.ig__avatar.is-visto, .ig__destaque.is-visto span { background: #3a3a3a; }
.ig__destaques { display: flex; gap: .9em; margin: .2em 0 .8em; }
.ig__destaque { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 0; border: 0; background: none; font: inherit; font-size: .66em; color: #f5f5f5; cursor: pointer; }
.ig__destaque span { width: 4.4em; height: 4.4em; padding: 2px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig__destaque img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #000; display: block; }
.ig__abas button { display: grid; place-items: center; padding: .55em 0; border: 0; background: none; color: #8e8e8e; cursor: pointer; }
.ig__abas button.is-ativo { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.ig__abas span { display: none; }
.ig__grade[hidden], .ig__vazio[hidden] { display: none !important; }
.ig__grade button small { position: absolute; left: .4em; bottom: .3em; display: flex; align-items: center; gap: .2em; font-size: .62em; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ig__grade button small svg { width: 1.1em; height: 1.1em; fill: #fff; stroke: none; }
.ig__grade--reels button { aspect-ratio: 9 / 16; }
.ig__vazio { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 2em 8% 2.4em; text-align: center; }
.ig__vazio span { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; border: 2px solid #f5f5f5; }
.ig__vazio span svg { width: 1.8em !important; height: 1.8em !important; }
.ig__vazio b { font-size: 1.05em; }
.ig__vazio p { margin: 0; font-size: .72em; color: #a8a8a8; line-height: 1.4; }
.ig__vazio a { font-size: .74em; font-weight: 600; color: #0095f6; }
.ig__mudo { border: 0; color: #fff; cursor: pointer; }
.ig__foto video { pointer-events: auto; }
.ig__curtidas { margin: .3em 4% 0; font-size: .74em; font-weight: 700; }
.ig__legenda b, .ig__com b { font-weight: 700; }
.ig__mini--letra { display: grid; place-items: center; padding: 0; background: var(--c); color: #fff; font-weight: 700; font-size: .9em; }
.ig__com { align-items: flex-start; }
.ig__com p { flex: 1; min-width: 0; word-wrap: break-word; }
.ig__com-tempo { color: #8e8e8e; font-size: .9em; }
.ig__com-curtir { flex: none; display: grid; margin-top: .3em; padding: 0; border: 0; background: none; color: #8e8e8e; cursor: pointer; }
.ig__com-curtir svg { width: 1.05em !important; height: 1.05em !important; }
.ig__com-curtir.is-curtido { color: #ff3040; }
.ig__com-curtir.is-curtido svg { fill: #ff3040; }
.ig__coms-mais { display: block; padding: .3em 0 .2em; text-align: center; font-size: .72em; font-weight: 600; color: #a8a8a8; }
.ig__coms-vazio b { display: block; margin-bottom: .2em; color: #f5f5f5; font-size: 1.15em; }
.ig__story { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: #000; animation: igStory .3s var(--ease); }
.ig__story[hidden] { display: none; }
@keyframes igStory { from { transform: scale(.85); opacity: 0; } }
.ig__story-barras { position: absolute; top: 1%; left: 3%; right: 3%; z-index: 3; display: flex; gap: 3px; }
.ig__story-barras span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.ig__story-barras i { display: block; width: 0; height: 100%; background: #fff; }
.ig__story-barras span.is-cheia i { width: 100%; }
.ig__story-topo { position: absolute; top: 2.6%; left: 3%; right: 3%; z-index: 3; display: flex; align-items: center; gap: .45em; font-size: .78em; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ig__story-topo small { flex: 1; color: rgba(255,255,255,.75); }
.ig__story-topo .ig__mini { width: 2.2em; height: 2.2em; }
.ig__story-topo button { display: grid; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.ig__story-midia { flex: 1; display: grid; place-items: center; overflow: hidden; }
.ig__story-midia img, .ig__story-midia video { width: 100%; height: 100%; object-fit: cover; }
.ig__story-ant, .ig__story-prox { position: absolute; top: 10%; bottom: 14%; z-index: 2; width: 40%; border: 0; background: none; cursor: pointer; }
.ig__story-ant { left: 0; } .ig__story-prox { right: 0; }
.ig__story-ver { position: absolute; left: 50%; bottom: 6%; z-index: 3; transform: translateX(-50%); padding: .5em 1.2em; border-radius: 999px; font-size: .74em; font-weight: 600; color: #000; background: #fff; white-space: nowrap; }
.ig__barra button { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }

/* =========================================================
   Faixa "Tecnologia conectada" (foto de TI)
   ========================================================= */
.secao-ti { padding-top: 24px; padding-bottom: 24px; }
.ti {
  position: relative; overflow: hidden; border-radius: 28px; min-height: clamp(380px, 62vh, 560px);
  display: flex; align-items: center; isolation: isolate;
  border: 1px solid rgb(var(--neon-rgb) / .22); box-shadow: 0 40px 100px -40px rgb(var(--accent-rgb) / .6);
}
.ti__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: -2; transform: scale(1.06); animation: tiZoom 22s ease-in-out infinite alternate; }
@keyframes tiZoom { to { transform: scale(1.16) translateX(-1.5%); } }
.ti::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 10, 24, .96) 0%, rgba(4, 10, 24, .82) 34%, rgba(4, 10, 24, .25) 62%, rgba(4, 10, 24, 0) 100%), radial-gradient(60% 80% at 75% 50%, transparent 40%, rgba(4, 10, 24, .35)); }
.ti__texto { max-width: 520px; padding: clamp(28px, 5vw, 64px); }
.ti__rotulo { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.ti h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; color: #fff; }
.ti__texto > p:not(.ti__rotulo) { margin: 16px 0 0; font-size: 1.05rem; line-height: 1.6; color: rgba(234, 242, 255, .78); }
.ti__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; padding: 0; }
.ti__chips li { padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #eaf4ff; background: rgb(var(--neon-rgb) / .1); border: 1px solid rgb(var(--neon-rgb) / .35); backdrop-filter: blur(6px); }
@media (max-width: 767px) {
  .ti { min-height: 0; align-items: flex-end; }
  .ti__foto { position: relative; height: 230px; object-position: 50% 40%; }
  .ti { flex-direction: column; align-items: stretch; }
  .ti::before { background: linear-gradient(180deg, rgba(4, 10, 24, 0) 0, rgba(4, 10, 24, 0) 140px, rgba(4, 10, 24, .96) 230px); }
  .ti__texto { padding: 22px 22px 26px; margin-top: -40px; }
}
@media (prefers-reduced-motion: reduce) { .ti__foto { animation: none; } }

/* =========================================================
   Perguntas frequentes
   ========================================================= */
.secao-faq { padding-bottom: 96px; }
.faq { max-width: 1040px; }
.faq__topo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: clamp(36px, 6vh, 64px); }
.faq__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #8ee6ff, #2a9bf3 55%, #2f6df0); transform: rotate(-6deg); box-shadow: 0 14px 40px -12px rgb(var(--accent-rgb) / .8); }
.faq__icone svg { width: 34px; height: 34px; fill: none; stroke: #05122a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq__topo h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .9; letter-spacing: -.03em; color: #fff; }
.faq__lista { border-top: 1px solid rgba(255, 255, 255, .14); }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; cursor: pointer; list-style: none;
  font-size: clamp(1.08rem, 1.6vw, 1.4rem); font-weight: 500; color: #f2f6ff; transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cyan); }
.faq__seta { flex: none; width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform .35s var(--ease); }
.faq__item.is-aberto .faq__seta { transform: rotate(180deg); color: var(--cyan); }
.faq__item.is-aberto summary { color: var(--cyan); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > p { overflow: hidden; margin: 0; padding: 0 4px; max-width: 820px; font-size: 1.02rem; line-height: 1.7; color: rgba(234, 242, 255, .72); }
.faq__resposta > p { transition: padding .4s var(--ease); }
.faq__item.is-aberto .faq__resposta > p { padding-bottom: 26px; }
.faq__ia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 44px; }
.faq__ia p { margin: 0 8px 0 0; font-size: 1.1rem; color: #eaf4ff; }

/* Instagram: mídia inteira, sem corte (barras pretas quando a proporção não cabe) */
.ig__foto { background: #000; }
.ig__foto img, .ig__foto video { object-fit: contain; }

/* Instagram: quando o celular bloqueia o autoplay, aparece o play (um toque inicia) */
.ig__foto.is-parado::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 7l9 5-9 5z%27 fill=%27white%27/%3E%3C/svg%3E") center/55% no-repeat; pointer-events: none; }

/* Faixa de TI: um pouco menor e na proporção da foto (mais nítida, sem zoom que borra) */
.ti { max-width: 1120px; margin: 0 auto; min-height: 0; aspect-ratio: 16 / 9; }
.ti__foto { object-position: 50% 50%; transform: none; animation: none; transition: transform 1.2s var(--ease); }
.ti:hover .ti__foto { transform: scale(1.025); }
.ti::before { background: linear-gradient(90deg, rgba(4, 10, 24, .92) 0%, rgba(4, 10, 24, .7) 30%, rgba(4, 10, 24, .12) 56%, rgba(4, 10, 24, 0) 72%); }
.ti h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.ti__texto { max-width: 480px; }
@media (max-width: 767px) { .ti { aspect-ratio: auto; } }
/* parceiros: novas logos */

/* =========================================================
   Sobre: mais detalhes (história, como trabalhamos, missão/visão/valores, galeria)
   ========================================================= */
.sobre-mais { display: grid; gap: clamp(48px, 8vh, 88px); margin-top: clamp(64px, 10vh, 112px); }
.foto-vaga { position: relative; margin: 0; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; background: rgba(10, 30, 66, .5); }
.foto-vaga img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.foto-vaga:hover img { transform: scale(1.04); }
.foto-vaga__aviso {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px), rgba(10, 30, 66, .5);
  border: 2px dashed rgba(255, 255, 255, .18); border-radius: inherit; color: rgba(234, 242, 255, .55); font-size: .95rem;
}
.foto-vaga__aviso .icon { width: 38px; height: 38px; }
.foto-vaga__aviso small { font-size: .8rem; color: rgba(234, 242, 255, .4); }
.foto-vaga.tem-foto .foto-vaga__aviso { display: none; }
.sobre-linha { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .sobre-linha { grid-template-columns: 1fr 1fr; gap: 64px; }
  .sobre-linha--inversa .foto-vaga { order: 2; }
}
.sobre-linha__texto h3, .sobre-galeria__topo h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; color: #fff; }
.sobre-linha__texto > p:last-child { margin: 16px 0 0; font-size: 1.05rem; line-height: 1.7; color: rgba(234, 242, 255, .75); }
.sobre-cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .sobre-cards { grid-template-columns: repeat(3, 1fr); } }
.sobre-card {
  padding: 28px 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(14, 30, 62, .85), rgba(8, 18, 40, .9)); border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.sobre-card:hover { transform: translateY(-4px); border-color: rgb(var(--neon-rgb) / .4); box-shadow: 0 24px 50px -28px rgb(var(--accent-rgb) / .7); }
.sobre-card__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(var(--neon-rgb) / .12); color: var(--cyan); }
.sobre-card__ic .icon { width: 24px; height: 24px; }
.sobre-card h3 { margin: 18px 0 8px; font-size: 1.3rem; color: #fff; }
.sobre-card p { margin: 0; font-size: .98rem; line-height: 1.65; color: rgba(234, 242, 255, .72); }
.sobre-galeria__topo { margin-bottom: 24px; }
.sobre-galeria__grade { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .sobre-galeria__grade { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
  .sobre-galeria__grade .foto-vaga { aspect-ratio: auto; }
  .sobre-galeria__grade .foto-vaga:first-child { grid-row: span 2; }
  .sobre-galeria__grade .foto-vaga:last-child { grid-column: span 2; }
}

/* =========================================================
   Página inicial comercial: faixa, produtos, segmentos, chamada final
   ========================================================= */
.faixa-produtos { position: relative; z-index: 2; overflow: hidden; padding: 14px 0; border-block: 1px solid rgb(var(--neon-rgb) / .2); background: linear-gradient(90deg, rgba(8, 20, 46, .9), rgba(14, 40, 90, .85), rgba(8, 20, 46, .9)); }
.faixa-produtos__trilho { display: flex; gap: 44px; width: max-content; animation: faixaRola 38s linear infinite; }
.faixa-produtos span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: #eaf4ff; }
.faixa-produtos .icon { width: 18px; height: 18px; color: var(--cyan); }
@keyframes faixaRola { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .faixa-produtos__trilho { animation: none; } }

.produtos__topo { max-width: 760px; margin: 0 auto clamp(32px, 5vh, 52px); text-align: center; }
.produtos__rotulo { margin: 0 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.produtos__topo h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; color: #fff; }
.produtos__topo > p:last-child:not(.produtos__rotulo) { margin: 14px 0 0; font-size: 1.08rem; color: rgba(234, 242, 255, .72); }
.produtos__grade { display: grid; gap: 18px; }
@media (min-width: 700px) { .produtos__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .produtos__grade { grid-template-columns: repeat(3, 1fr); } }
.produto {
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 36, 74, .88), rgba(8, 18, 40, .94)); border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.produto:hover { transform: translateY(-6px); border-color: rgb(var(--neon-rgb) / .5); box-shadow: 0 30px 60px -30px rgb(var(--accent-rgb) / .8); }
.produto__selo { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #05122a; background: linear-gradient(90deg, #8ee6ff, #2a9bf3); }
.produto__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: var(--cyan); background: rgb(var(--neon-rgb) / .12); }
.produto__ic .icon { width: 26px; height: 26px; }
.produto__nome { margin: 18px 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.produto h3 { margin: 0; font-size: 1.32rem; line-height: 1.25; color: #fff; }
.produto__desc { margin: 10px 0 0; font-size: .97rem; line-height: 1.6; color: rgba(234, 242, 255, .74); }
.produto__itens { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: .93rem; color: #eaf4ff; }
.produto__itens li { display: flex; align-items: center; gap: 8px; }
.produto__itens .icon { width: 16px; height: 16px; color: #34d399; flex: none; }
.produto__exemplo { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: rgb(var(--neon-rgb) / .07); border-left: 3px solid var(--cyan); }
.produto__exemplo b { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.produto__exemplo p { margin: 6px 0 0; font-size: .93rem; line-height: 1.55; color: rgba(234, 242, 255, .85); }
.produto__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--cyan); }
.produto__cta .icon { width: 18px; height: 18px; transition: transform .25s; }
.produto:hover .produto__cta .icon { transform: translateX(4px); }
.produtos__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 34px; text-align: center; }
.produtos__rodape p { margin: 0; font-size: 1.05rem; color: rgba(234, 242, 255, .8); }
.produtos__rodape b { color: #fff; }

.segmentos__abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.segmentos__abas button { padding: 11px 20px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 1rem; color: rgba(234, 242, 255, .78); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; transition: all .25s; }
.segmentos__abas button:hover { color: #fff; border-color: rgb(var(--neon-rgb) / .5); }
.segmentos__abas button.is-ativo { color: #05122a; background: linear-gradient(90deg, #8ee6ff, #2a9bf3); border-color: transparent; }
.segmento { display: grid; gap: 14px; animation: appEntra .45s var(--ease); }
.segmento[hidden] { display: none; }
@media (min-width: 900px) { .segmento { grid-template-columns: 1fr 1.3fr 1fr; } }
.segmento__col { padding: 26px 24px; border-radius: 20px; background: rgba(10, 24, 54, .85); border: 1px solid rgba(255, 255, 255, .08); }
.segmento__col > span { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.segmento__col--antes > span { color: #fca5a5; background: rgba(248, 113, 113, .12); }
.segmento__col--com { border-color: rgb(var(--neon-rgb) / .35); background: linear-gradient(180deg, rgba(18, 44, 92, .9), rgba(10, 24, 54, .92)); }
.segmento__col--com > span { color: var(--cyan); background: rgb(var(--neon-rgb) / .12); }
.segmento__col--depois > span { color: #6ee7b7; background: rgba(52, 211, 153, .12); }
.segmento__col p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #eaf4ff; }
.segmento__col--depois p { font-size: 1.25rem; font-weight: 600; }
.segmento__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.segmento__col li { display: flex; gap: 10px; font-size: 1rem; line-height: 1.45; color: #eaf4ff; }
.segmento__col li .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; color: #34d399; }
.segmento__col--depois .btn { margin-top: 18px; }

.cta-final {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 56px);
  border-radius: 28px; background: linear-gradient(120deg, #0f3fbf 0%, #1e6ff0 45%, #12b6e8 100%); box-shadow: 0 40px 90px -40px rgba(30, 111, 240, .9);
}
.cta-final h2 { margin: 0; max-width: 620px; font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; color: #fff; }
.cta-final p { margin: 12px 0 0; font-size: 1.08rem; color: rgba(255, 255, 255, .88); }
.cta-final__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-final .btn--primary { background: #fff; color: #0b2a6b; }
.cta-final .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* Sobre: blocos um embaixo do outro (antes ficavam lado a lado, cada um com metade da largura) */
#sobre { flex-direction: column; align-items: stretch; }
#sobre > .container { width: 100%; }
.sobre-mais { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: clamp(48px, 8vh, 88px); }
body.modo-pagina .faixa-produtos { display: none !important; }

/* Produtos na página inicial: só o que cabe na tela (3 cards resumidos) + "Ver todos" abre a mini página */
.secao-produtos .produtos__topo { margin-bottom: clamp(20px, 3.5vh, 36px); }
.secao-produtos .produtos__topo h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.secao-produtos .container > .produtos__grade > .produto:nth-child(n+4) { display: none; }
.secao-produtos .container > .produtos__grade .produto__itens,
.secao-produtos .container > .produtos__grade .produto__exemplo { display: none; }
.secao-produtos .produtos__grade .produto { padding: 22px 22px 20px; }
.produtos__mais { display: flex; justify-content: center; margin-top: 24px; }
.secao-produtos .produtos__rodape { margin-top: 18px; }
.produtos-modal { width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid rgb(var(--neon-rgb) / .3); border-radius: 26px; background: #071228; color: #eaf4ff; box-shadow: 0 50px 120px rgba(0, 0, 0, .7); }
.produtos-modal::backdrop { background: rgba(2, 6, 16, .72); backdrop-filter: blur(6px); }
.produtos-modal[open] { animation: paginaEntra .35s var(--ease); }
.produtos-modal__caixa { display: flex; flex-direction: column; max-height: calc(100vh - 42px); }
.produtos-modal__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px clamp(18px, 3vw, 32px) 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.produtos-modal__topo h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; }
.produtos-modal__topo .produtos__rotulo { margin-bottom: 6px; }
.produtos-modal__fechar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; }
.produtos-modal__fechar:hover { border-color: var(--cyan); color: var(--cyan); }
.produtos-modal__fechar .icon { width: 22px; height: 22px; }
.produtos-modal__conteudo { overflow-y: auto; padding: 22px clamp(18px, 3vw, 32px) 30px; }
.produtos-modal__conteudo .produto { opacity: 1 !important; transform: none; }
body:has(.produtos-modal[open]) { overflow: hidden; }
.secao-produtos { padding-top: clamp(36px, 6vh, 64px); padding-bottom: clamp(36px, 6vh, 64px); }
.secao-produtos .produtos__topo > p:last-child { margin-top: 8px; }
.secao-produtos .produtos__grade .produto__desc { margin-top: 8px; }
.secao-produtos .produtos__grade .produto__cta { padding-top: 12px; }
.secao-produtos .produtos__grade .produto__nome { margin-top: 12px; }
.secao-produtos .produtos__grade .produto__ic { width: 46px; height: 46px; }
.produtos__mais { margin-top: 18px; gap: 12px; flex-wrap: wrap; }
.produtos__mais .btn--ghost { gap: 8px; }
.secao-produtos .produtos__rodape { display: none; }
.secao-produtos .produtos__topo { max-width: 980px; }
.secao-produtos { padding-top: clamp(28px, 4.5vh, 56px); }
/* menu: item da página aberta no azul do site (o ciano claro ficava apagado no cabeçalho claro) */
.nav a.is-ativo { color: var(--blue) !important; }
.nav a.is-ativo::after { background: var(--blue); }
.mobile-menu a.is-ativo { color: var(--blue); }

/* =========================================================
   Como funciona: projetos na prática
   ========================================================= */
#como-funciona { flex-direction: column; align-items: stretch; }
#como-funciona > .container { width: 100%; }
.projetos { margin-top: clamp(56px, 9vh, 96px); padding-top: clamp(48px, 8vh, 80px); border-top: 1px solid rgba(255, 255, 255, .1); }
.projetos__abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.projetos__abas button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; font: inherit; font-weight: 600; color: rgba(234, 242, 255, .8); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; transition: all .25s; }
.projetos__abas button b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .78rem; background: rgba(255, 255, 255, .08); }
.projetos__abas button:hover { color: #fff; border-color: rgb(var(--neon-rgb) / .5); }
.projetos__abas button.is-ativo { color: #05122a; background: linear-gradient(90deg, #8ee6ff, #2a9bf3); border-color: transparent; }
.projetos__abas button.is-ativo b { background: rgba(5, 18, 42, .15); }
.projeto { display: grid; gap: 28px; padding: clamp(18px, 3vw, 32px); border-radius: 26px; background: linear-gradient(180deg, rgba(14, 32, 68, .85), rgba(8, 18, 40, .92)); border: 1px solid rgba(255, 255, 255, .08); animation: appEntra .45s var(--ease); }
.projeto[hidden] { display: none; }
@media (min-width: 1000px) { .projeto { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.projeto__fotos { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.proj-foto { position: relative; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #0a1a3a; cursor: zoom-in; aspect-ratio: 4 / 3; }
.proj-foto:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.proj-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proj-foto:hover img { transform: scale(1.04); }
.proj-foto > span:not(.foto-vaga__aviso) { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(4, 10, 24, .72); backdrop-filter: blur(6px); }
.proj-foto--vaga { cursor: default; }
.projeto__seg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: .85rem; font-weight: 600; color: rgba(234, 242, 255, .65); }
.projeto__real, .projeto__ex { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.projeto__real { color: #6ee7b7; background: rgba(52, 211, 153, .14); }
.projeto__ex { color: #fde68a; background: rgba(251, 191, 36, .14); }
.projeto h3 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; color: #fff; }
.projeto__desafio, .projeto__resultado { margin: 14px 0 0; font-size: 1rem; line-height: 1.6; color: rgba(234, 242, 255, .8); }
.projeto__desafio b { color: #fca5a5; }
.projeto__resultado b { color: #6ee7b7; }
.projeto__passos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.projeto__passos li { position: relative; display: flex; gap: 14px; padding-bottom: 14px; }
.projeto__passos li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: linear-gradient(rgb(var(--neon-rgb) / .5), rgb(var(--neon-rgb) / .1)); }
.projeto__passos li > span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: .85rem; font-weight: 700; color: #05122a; background: linear-gradient(135deg, #8ee6ff, #2a9bf3); }
.projeto__passos p { margin: 5px 0 0; font-size: .97rem; line-height: 1.5; color: #eaf4ff; }
.projeto__info .btn { margin-top: 20px; }
/* foto ampliada */
.proj-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 16, .88); backdrop-filter: blur(6px); cursor: zoom-out; animation: igFundo .25s ease; }
.proj-zoom img { max-width: min(1200px, 100%); max-height: 86vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.proj-zoom p { position: absolute; bottom: 22px; margin: 0; color: #eaf4ff; font-weight: 600; }
.projeto__fotos .proj-foto.foto-vaga { aspect-ratio: 4 / 3; }
.projeto__fotos .proj-foto.foto-vaga:first-child { aspect-ratio: 16 / 9; }

/* Mini página de produtos: cabe na tela (inclusive com o zoom de monitor) e rola para o lado, sem descer */
.produtos-modal { max-height: calc((100vh - 32px) / var(--z, 1)); width: min(1240px, calc((100vw - 32px) / var(--z, 1))); }
.produtos-modal__caixa { max-height: calc((100vh - 34px) / var(--z, 1)); }
.produtos-modal__topo { align-items: center; padding: 16px clamp(16px, 2.6vw, 28px) 14px; }
.produtos-modal__topo h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.produtos-modal__topo .produtos__rotulo { margin-bottom: 2px; font-size: .74rem; }
.produtos-modal__topo > div:first-child { flex: 1; min-width: 0; }
.produtos-modal__setas { display: flex; gap: 8px; }
.produtos-modal__seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(var(--neon-rgb) / .4); background: rgb(var(--neon-rgb) / .1); color: var(--cyan); cursor: pointer; transition: background .2s, opacity .2s; }
.produtos-modal__seta:hover { background: rgb(var(--neon-rgb) / .22); }
.produtos-modal__seta:disabled { opacity: .3; cursor: default; }
.produtos-modal__seta .icon { width: 22px; height: 22px; }
.produtos-modal__conteudo { overflow: hidden; padding: 18px clamp(16px, 2.6vw, 28px) 20px; display: flex; flex-direction: column; min-height: 0; }
.produtos-modal__conteudo .produtos__grade {
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgb(var(--neon-rgb) / .5) transparent; min-height: 0;
}
.produtos-modal__conteudo .produto { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; padding: 20px 20px 18px; overflow-y: auto; scrollbar-width: none; }
.produtos-modal__conteudo .produto:hover { transform: none; }
.produtos-modal__conteudo .produto__nome { margin-top: 12px; }
.produtos-modal__conteudo .produto__ic { width: 44px; height: 44px; }
.produtos-modal__conteudo .produto h3 { font-size: 1.18rem; }
.produtos-modal__conteudo .produto__desc { font-size: .92rem; margin-top: 6px; }
.produtos-modal__conteudo .produto__itens { margin-top: 10px; gap: 5px; font-size: .9rem; }
.produtos-modal__conteudo .produto__exemplo { margin-top: 12px; padding: 11px 13px; }
.produtos-modal__conteudo .produto__exemplo p { font-size: .88rem; }
.produtos-modal__conteudo .produto__cta { padding-top: 12px; }
.produtos-modal__pontos { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.produtos-modal__pontos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .25s, background .25s; }
.produtos-modal__pontos button.is-ativo { width: 26px; background: var(--cyan); }
@media (max-width: 1023px) { .produtos-modal__conteudo .produto { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 640px) { .produtos-modal__conteudo .produto { flex-basis: 88%; } .produtos-modal__setas { display: none; } }
.cases__titulo { margin-bottom: clamp(20px, 3.5vh, 36px); }
.cases__titulo h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
/* imagem de TI gerada em alta resolução: já é escura à esquerda, então o véu fica mais leve */
.ti::before { background: linear-gradient(90deg, rgba(4, 10, 24, .7) 0%, rgba(4, 10, 24, .35) 32%, rgba(4, 10, 24, 0) 55%); }
.ti__foto { object-position: 62% 50%; }

/* =========================================================
   Revisão geral: menos espaço vazio e cada bloco cabendo numa tela
   ========================================================= */
/* "Voltar ao início" no cabeçalho, ao lado do logo */
.header__bar .pagina-voltar { position: static; transform: none; margin: 0 auto 0 18px; padding: 7px 14px 7px 10px; font-size: .85rem; color: var(--blue); background: rgba(27, 79, 216, .08); border-color: rgba(27, 79, 216, .3); box-shadow: none; backdrop-filter: none; animation: none; }
.header__bar .pagina-voltar:hover { background: rgba(27, 79, 216, .16); border-color: var(--blue); transform: none; }
@media (max-width: 1023px) { .header__bar .pagina-voltar span { display: none; } .header__bar .pagina-voltar { padding: 8px; margin-left: 10px; } }
/* projetos (cards com vídeo): cabe na tela */
@media (min-width: 1024px) and (min-height: 560px) {
  .case__video, .case--featured .case__video { height: calc(30vh / var(--z, 1)); }
  .case:has(.case__video):hover .case__video { height: calc(30vh / var(--z, 1)); }
  #cases .cases { min-height: calc(calc(30vh / var(--z, 1)) + 230px); }
}
/* tecnologia conectada: largura limitada pela altura da tela */
@media (min-width: 768px) { .ti { width: min(100%, 1120px, calc((100vh - 150px) / var(--z, 1) * 16 / 9)); } }
/* chamada comercial: sem ocupar a tela inteira (era a seção com mais espaço vazio) */
.page-home main > .secao-cta { min-height: 0; padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(24px, 4vh, 40px); }
/* perguntas frequentes em duas colunas: título à esquerda, lista à direita, tudo numa tela */
@media (min-width: 1024px) {
  .faq { max-width: 1200px; display: grid; grid-template-columns: minmax(260px, .8fr) 1.6fr; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .faq__topo { grid-column: 1; grid-row: 1; align-items: flex-start; text-align: left; margin-bottom: 0; }
  .faq__topo h2 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
  .faq__ia { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 28px; }
  .faq__ia p { width: 100%; margin: 0; }
  .faq__lista { grid-column: 2; grid-row: 1 / span 2; }
  .faq__item summary { padding: 15px 4px; font-size: clamp(1rem, 1.25vw, 1.15rem); }
  .faq__item.is-aberto .faq__resposta > p { padding-bottom: 16px; }
  .faq__resposta > p { font-size: .97rem; }
  .secao-faq { padding-bottom: clamp(40px, 7vh, 72px); }
}
/* sobre: primeiro bloco (texto + celular) cabe na tela */
@media (min-width: 1024px) and (min-height: 560px) { .fone { --w: min(320px, calc(66vh / var(--z, 1) * 78 / 163)); } }
/* como funciona: projetos mais compactos */
.projetos .produtos__topo { margin-bottom: 18px; }
.projetos .produtos__topo h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.projetos__abas { margin-bottom: 18px; }
@media (min-width: 1000px) {
  .projeto { gap: 24px; padding: 22px; align-items: center; }
  .projeto__passos li { padding-bottom: 9px; }
  .projeto__passos p { font-size: .93rem; margin-top: 6px; }
  .projeto h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
  .projeto__desafio, .projeto__resultado { font-size: .95rem; margin-top: 10px; }
  .projeto__info .btn { margin-top: 14px; }
}
/* topo: frase comercial + 3 provas rápidas */
.hero__provas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; }
.hero__provas li { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; color: #eaf4ff; }
.hero__provas li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgb(var(--neon-rgb) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.page-home .hero__actions { margin-top: 26px; }
@media (max-width: 1023px) { .page-home .hero__provas { order: 3; padding: 0 20px; position: relative; z-index: 1; margin-top: 10px; } }
/* ajustes finais de altura */
@media (min-width: 1024px) and (min-height: 560px) {
  .case__video, .case--featured .case__video, .case:has(.case__video):hover .case__video { height: calc(27vh / var(--z, 1)); }
  #cases .cases { min-height: calc(calc(27vh / var(--z, 1)) + 230px); }
  .faq__item summary { padding: 13px 4px; }
}
@media (min-width: 1024px) and (min-height: 560px) {
  .case__video, .case--featured .case__video, .case:has(.case__video):hover .case__video { height: calc(36vh / var(--z, 1)); }
  #cases .cases { min-height: calc(calc(36vh / var(--z, 1)) + 150px); }
}
/* projetos: cards centralizados na altura da tela (sem reserva de espaço vazio embaixo) */
@media (min-width: 1024px) { #cases .cases { min-height: 0 !important; } }
@media (max-width: 1023px) { .page-home .hero__provas { justify-content: center; } }
/* cabeçalho de ponta a ponta: logo (e "Voltar ao início") na esquerda, "Fale conosco" na direita */
@media (min-width: 1024px) {
  .header__bar.container { max-width: none; width: 100%; padding-left: clamp(20px, 2.4vw, 40px); padding-right: clamp(20px, 2.4vw, 40px); }
  .header__bar .brand { margin-right: 0; }
  .header__bar .header__cta { margin-left: auto; }
  .header__bar .nav { position: absolute; left: 50%; transform: translateX(-50%); }
}
/* páginas internas: sem encaixe de seção (abria um pouco descido) */
html:has(body.modo-pagina) { scroll-snap-type: none !important; }
body.modo-pagina main { padding-top: 0; }
/* Projetos na prática: o bloco inteiro (título, abas e projeto) cabe numa tela */
@media (min-width: 1000px) and (min-height: 560px) {
  .projetos { padding-top: clamp(28px, 5vh, 56px); }
  .projetos .produtos__topo { margin-bottom: 12px; }
  .projetos .produtos__topo > p:last-child { display: none; }
  .projetos__abas { margin-bottom: 14px; }
  .projetos__abas button { padding: 7px 14px 7px 8px; font-size: .95rem; }
  .projeto { padding: 18px; gap: 22px; align-items: stretch; height: calc(100vh / var(--z, 1) - 290px); min-height: 380px; }
  .projeto__fotos { height: 100%; grid-template-rows: 1fr 34%; }
  .projeto__fotos .proj-foto, .projeto__fotos .proj-foto:first-child, .projeto__fotos .proj-foto.foto-vaga, .projeto__fotos .proj-foto.foto-vaga:first-child { aspect-ratio: auto; height: 100%; }
  .projeto__info { overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; justify-content: center; }
  .projeto h3 { margin-top: 6px; font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
  .projeto__desafio, .projeto__resultado { margin-top: 8px; font-size: .92rem; line-height: 1.5; }
  .projeto__passos { margin-top: 10px; }
  .projeto__passos li { padding-bottom: 6px; gap: 12px; }
  .projeto__passos li > span { width: 28px; height: 28px; font-size: .8rem; }
  .projeto__passos li:not(:last-child)::before { left: 13px; top: 28px; }
  .projeto__passos p { font-size: .9rem; margin-top: 4px; line-height: 1.4; }
  .projeto__info .btn { margin-top: 12px; align-self: flex-start; }
}
/* chamada "Pronto para vender mais": tela inteira, sozinha e centralizada (sem aparecer as seções vizinhas) */
@media (min-width: 1024px) {
  .page-home main > .secao-cta { min-height: calc(100vh / var(--z, 1)); display: flex; align-items: center; padding: 69px 0 0; scroll-snap-align: start; }
  .page-home main > .secao-cta > .container { width: 100%; }
  .cta-final { padding: clamp(40px, 6vw, 80px); }
  .cta-final h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
}

/* =========================================================
   Tablets e telas médias (700–1099 px): aproveita a largura
   ========================================================= */
@media (min-width: 700px) and (max-width: 1099px) {
  .produtos__grade { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .secao-produtos .produto { padding: 18px 16px; }
  .secao-produtos .produto h3 { font-size: 1.08rem; }
  .secao-produtos .produto__desc { font-size: .88rem; }
  .produtos-modal__conteudo .produto { flex-basis: calc((100% - 32px) / 3); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  #cases .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #cases .case, #cases .case--featured { grid-column: auto; display: block; }
  #cases .case__img img, #cases .case__video, #cases .case--featured .case__video { aspect-ratio: auto; height: 22vh; width: 100%; object-fit: cover; }
  #cases .case__body { padding: 14px 16px; }
  #cases .case h3 { font-size: 1rem; }
  .page-home .hero__bgvideo { max-width: 680px; }
  .sobre-cards { grid-template-columns: repeat(3, 1fr); }
  .segmento { grid-template-columns: 1fr 1fr; }
  .segmento__col--depois { grid-column: span 2; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  #parceiros .partners { grid-template-columns: repeat(4, 1fr); }
  #parceiros .partner { height: 96px; }
  .faq__topo { flex-direction: row; justify-content: center; gap: 16px; margin-bottom: 24px; }
  .faq__topo h2 { font-size: 3.2rem; }
  .faq__topo h2 br { display: none; }
  .faq__item summary { padding: 15px 4px; font-size: 1.02rem; }
  .faq__ia { margin-top: 24px; }
}

/* Sobre (computador): cada bloco ocupa uma tela, sem um invadir o outro */
@media (min-width: 1024px) and (min-height: 560px) {
  html:has(#sobre.is-pagina-ativa) { scroll-snap-type: y proximity !important; scroll-padding-top: 69px; }
  .sobre-mais { gap: 0; margin-top: 0; padding-top: 0; border-top: 0; }
  .sobre-mais > * { min-height: calc(100vh / var(--z, 1) - 69px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; scroll-snap-align: start; box-sizing: border-box; }
  .sobre-mais > .sobre-linha { display: grid; }
  .sobre-tela { gap: 28px; }
  .sobre-tela .sobre-linha { gap: 48px; }
  .sobre-mais .foto-vaga { aspect-ratio: auto; height: calc((100vh / var(--z, 1) - 69px) * .55); }
  .sobre-tela .foto-vaga { height: calc((100vh / var(--z, 1) - 69px) * .42); }
  .sobre-tela .sobre-card { padding: 20px 22px; }
  .sobre-tela .sobre-card h3 { margin-top: 12px; }
  .sobre-galeria__grade { grid-template-rows: repeat(2, calc((100vh / var(--z, 1) - 69px - 190px) / 2)); }
  .sobre-galeria__grade .foto-vaga { height: auto; }
}
/* Tecnologia conectada: o card cresce com o texto (em telas mais baixas o texto vazava) */
@media (min-width: 768px) {
  .ti { aspect-ratio: auto; min-height: min(calc(100vh / var(--z, 1) - 150px), 560px); width: min(100%, 1120px); }
  .ti h2 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
  .ti__texto { padding: clamp(24px, 3.5vw, 52px); }
  .ti__chips { margin: 16px 0 20px; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .sobre-tela { gap: 16px; }
  .sobre-tela .foto-vaga { height: calc((100vh / var(--z, 1) - 69px) * .34); }
  .sobre-tela .sobre-linha__texto > p:last-child { font-size: .92rem; line-height: 1.5; margin-top: 8px; }
  .sobre-tela .sobre-card { padding: 14px 18px; }
  .sobre-tela .sobre-card__ic { width: 38px; height: 38px; }
  .sobre-tela .sobre-card h3 { margin: 8px 0 4px; font-size: 1.1rem; }
  .sobre-tela .sobre-card p { font-size: .88rem; line-height: 1.45; }
}
/* celular: botões com área de toque mínima de 44 px (eram 35–38 px) */
@media (max-width: 1023px) {
  .produto__cta { min-height: 44px; display: inline-flex; align-items: center; padding-top: 4px; }
  .case__cheia { width: 44px; height: 44px; }
  .case__zoom { min-height: 44px; }
  .header__bar .pagina-voltar { min-width: 44px; min-height: 44px; justify-content: center; }
}
/* selos da faixa de TI numa linha só */
.ti__chips { flex-wrap: nowrap; gap: 6px; }
.ti__chips li { padding: 6px 12px; font-size: .82rem; white-space: nowrap; }
@media (max-width: 480px) { .ti__chips { flex-wrap: wrap; } }
/* título do topo em duas linhas fixas: "SUA EMPRESA NO" / "MODO AUTOMÁTICO" */
.hero__linha { display: block; white-space: nowrap; }
@media (min-width: 1024px) { .page-home .hero__title-main { font-size: clamp(2.6rem, 4.1vw, 4.6rem); } }
@media (max-width: 1023px) { .page-home .hero__title-main { font-size: clamp(1.7rem, 8.4vw, 3.2rem); } }
/* faixa de produtos dentro da primeira tela, encostada embaixo */
.page-home .hero { position: relative; }
.hero > .faixa-produtos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
@media (max-width: 1023px) { .hero > .faixa-produtos { position: relative; order: 9; margin-top: 24px; width: 100%; } }
/* fotos reais do escritório: enquadramento */
.foto-vaga img[src*="sobre/foto-1"], .foto-vaga img[src*="sobre/foto-2"] { object-position: 50% 60%; }
.foto-vaga img[src*="sobre/foto-3"] { object-position: 50% 55%; }
/* Como funciona (computador): cada parte numa tela, sem a segunda invadir a primeira */
@media (min-width: 1024px) and (min-height: 560px) {
  html:has(#como-funciona.is-pagina-ativa) { scroll-snap-type: y proximity !important; scroll-padding-top: 0; }
  #como-funciona { padding-top: 0; padding-bottom: 0; }
  #como-funciona > .container:first-child { min-height: calc(100vh / var(--z, 1)); display: grid; align-content: center; padding-top: 69px; box-sizing: border-box; scroll-snap-align: start; }
  #como-funciona > .projetos { min-height: calc(100vh / var(--z, 1)); margin-top: 0; padding-top: 69px; border-top: 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; scroll-snap-align: start; }
}
/* topo em telas baixas: faixa de produtos dentro da primeira tela */
@media (min-width: 1024px) and (max-height: 620px) {
  .page-home .hero { min-height: calc(100vh / var(--z, 1)); height: calc(100vh / var(--z, 1)); padding-top: 64px; padding-bottom: 54px; }
  .page-home .hero__title-main { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
  .page-home .hero__text { margin-top: 10px; }
  .page-home .hero__provas { margin-top: 10px; }
  .page-home .hero__actions { margin-top: 16px; }
}

/* texto surgindo ao rolar (estilo Samsung) */
.rv-palavra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.rv-palavra > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; }
.rv-titulo.rv-on .rv-palavra > span { transform: none; opacity: 1; }
.rv-sobe { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--rv-d, 0ms); }
.rv-sobe.rv-on { opacity: 1; transform: none; }
.reveal .rv-sobe { transition-delay: calc(var(--rv-d, 0ms) + 120ms); }
@media (prefers-reduced-motion: reduce) { .rv-palavra > span, .rv-sobe { opacity: 1 !important; transform: none !important; } }
/* título do topo menor: não encosta no notebook enquanto ele abre */
@media (min-width: 1024px) { .page-home .hero__title-main { font-size: clamp(2.2rem, 3.3vw, 3.9rem); } }
.hero__linha.rv-linha { overflow: hidden; padding-bottom: .06em; }
.hero__linha-in { display: inline-block; background: linear-gradient(100deg, #8ee6ff 0%, var(--cyan) 22%, #2a9bf3 58%, #2f6df0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transform: translateY(105%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.rv-linha.rv-on .hero__linha-in { transform: none; }
@media (min-width: 1024px) { .page-home .hero__title-main { font-size: clamp(2.1rem, 3.05vw, 3.6rem); } }
/* botões flutuantes sobem quando algo encosta embaixo (faixa de produtos do topo) */
.ai-fab, .whatsapp-float { transition: transform .35s var(--ease), opacity .3s; }
body.fab-sobe .ai-fab, body.fab-sobe .whatsapp-float { transform: translateY(calc(-1 * var(--fab-sobe, 0px))); }

/* celular: IA e WhatsApp numa barra fixa embaixo, com espaço reservado (não cobrem o conteúdo) */
@media (max-width: 1023px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(68px + env(safe-area-inset-bottom)); z-index: 39; background: rgba(4, 10, 24, .94); border-top: 1px solid rgb(var(--neon-rgb) / .2); backdrop-filter: blur(10px); pointer-events: none; }
  .ai-fab, .whatsapp-float { bottom: calc(10px + env(safe-area-inset-bottom)) !important; height: 48px !important; transform: none !important; }
  .ai-fab { left: 12px !important; right: calc(50% + 6px) !important; width: auto !important; justify-content: center; }
  .ai-fab .ai-fab__label { display: inline !important; }
  .whatsapp-float { right: 12px !important; left: calc(50% + 6px) !important; width: auto !important; border-radius: 999px !important; gap: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; }
  .whatsapp-float::after { content: "WhatsApp"; color: #fff; }
  .ai-chat { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}
/* brilho em volta dos botões ao passar o mouse */
@media (hover: hover) and (pointer: fine) {
  .btn, .header__cta, .produto__cta, .sol3__cta, .cobrar, .acesso__btn, .segmentos__abas button, .projetos__abas button, .produtos-modal__seta, .faq__ia .btn, .ai-fab, .whatsapp-float, .pagina-voltar, .case__zoom, .case__cheia {
    transition: box-shadow .3s ease, transform .25s var(--ease), background-color .25s, border-color .25s, color .25s;
  }
  .btn:hover, .header__cta:hover, .segmentos__abas button:hover, .projetos__abas button:hover, .produtos-modal__seta:hover, .ai-fab:hover, .pagina-voltar:hover, .case__zoom:hover, .case__cheia:hover {
    box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .55), 0 0 18px 2px rgb(var(--neon-rgb) / .45), 0 0 42px 6px rgb(var(--accent-rgb) / .35);
  }
  .whatsapp-float:hover { box-shadow: 0 0 0 1px rgba(37, 211, 102, .6), 0 0 22px 4px rgba(37, 211, 102, .55); }
  .produto__cta:hover, .sol3__cta:hover { text-shadow: 0 0 12px rgb(var(--neon-rgb) / .9); }
}
@media (min-width: 1024px) { body.fab-some .ai-fab, body.fab-some .whatsapp-float { opacity: 0; pointer-events: none; } }
/* título do topo: escondido até a animação estar pronta (antes aparecia, sumia e voltava) */
.hero__linha-in { background-repeat: no-repeat; background-position: 0 0; }
.hero__title-kicker:not(.rv-titulo) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .hero__title-kicker:not(.rv-titulo) { visibility: visible; } }

/* título do topo: revela de cima para baixo como um bloco só (sem dividir as linhas: o degradê não muda nem treme) */
.page-home .hero__title-main { animation: tituloRevela 1.15s cubic-bezier(.16, 1, .3, 1) .35s both; will-change: clip-path; }
@keyframes tituloRevela {
  from { clip-path: inset(0 0 100% 0); opacity: 0; translate: 0 26px; }
  60% { opacity: 1; }
  to { clip-path: inset(-10% -5% -15% -5%); opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .page-home .hero__title-main { animation: none; } }

/* =========================================================
   Tecnologia conectada (nova): jornada da cliente + mapa interativo
   ========================================================= */
.ti2 {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1180px; margin: 0 auto;
  padding: clamp(24px, 3.5vw, 48px); border-radius: 28px; position: relative; overflow: hidden;
  background: radial-gradient(70% 90% at 80% 50%, rgba(30, 111, 240, .22), transparent 70%), linear-gradient(160deg, rgba(10, 24, 54, .92), rgba(5, 12, 30, .96));
  border: 1px solid rgb(var(--neon-rgb) / .22); box-shadow: 0 40px 100px -40px rgb(var(--accent-rgb) / .55);
}
@media (min-width: 900px) { .ti2 { grid-template-columns: 1.05fr 1fr; } }
.ti2 h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.08; color: #fff; }
.ti2__destaque { background: linear-gradient(100deg, #8ee6ff, var(--cyan) 30%, #2a9bf3 70%, #2f6df0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ti2__lead { margin: 12px 0 0; font-size: 1rem; line-height: 1.55; color: rgba(234, 242, 255, .75); }
.ti2__lista { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 6px; counter-reset: p; }
.ti2__lista button {
  width: 100%; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; text-align: left;
  padding: 9px 12px; border-radius: 14px; font: inherit; color: rgba(234, 242, 255, .7); cursor: pointer;
  background: transparent; border: 1px solid transparent; transition: background .25s, border-color .25s, color .25s;
}
.ti2__lista button:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.ti2__lista button.is-ativo { background: rgb(var(--neon-rgb) / .08); border-color: rgb(var(--neon-rgb) / .35); color: #fff; }
.ti2__hora { grid-row: span 2; font-size: .78rem; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ti2__lista b { font-size: .98rem; }
.ti2__txt { display: none; font-size: .9rem; line-height: 1.45; color: rgba(234, 242, 255, .8); margin-top: 2px; }
.ti2__lista button.is-ativo .ti2__txt { display: block; animation: appEntra .35s var(--ease); }
.ti2__mapa { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.ti2__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ti2__linhas path { stroke: rgb(var(--neon-rgb) / .18); stroke-width: 2; fill: none; stroke-dasharray: 6 8; transition: stroke .3s; }
.ti2__linhas path.is-ativo { stroke: url(#tiLinha); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgb(var(--neon-rgb) / .8)); }
.ti2__orbita { fill: none; stroke: rgb(var(--neon-rgb) / .12); stroke-width: 1.5; stroke-dasharray: 2 10; animation: tiGira 60s linear infinite; transform-origin: 300px 300px; }
@keyframes tiGira { to { transform: rotate(360deg); } }
.ti2__centro {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-content: center; justify-items: center; gap: 6px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30, 111, 240, .35), rgba(5, 12, 30, .95) 70%); border: 1px solid rgb(var(--neon-rgb) / .45);
  box-shadow: 0 0 60px rgb(var(--accent-rgb) / .45), inset 0 0 30px rgb(var(--neon-rgb) / .15);
}
.ti2__centro img { width: 46%; }
.ti2__centro span { font-family: var(--font-display); font-weight: 700; font-size: clamp(.7rem, 1.2vw, .95rem); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ti2__centro::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgb(var(--neon-rgb) / .35); animation: tiPulso 2.4s ease-out infinite; }
@keyframes tiPulso { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.ti2__no {
  position: absolute; translate: -50% -50%; width: 18%; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 4px;
  border-radius: 22%; background: rgba(10, 26, 60, .9); border: 1px solid rgb(var(--neon-rgb) / .25); color: rgba(234, 242, 255, .65);
  transition: transform .35s var(--ease), border-color .3s, color .3s, box-shadow .3s, background .3s;
}
.ti2__no .icon { width: 34%; height: auto; }
.ti2__no small { font-size: clamp(.55rem, .8vw, .7rem); font-weight: 700; text-align: center; line-height: 1.1; padding: 0 4px; }
.ti2__no.is-ativo { color: #fff; background: linear-gradient(140deg, #1e6ff0, #12b6e8); border-color: transparent; transform: scale(1.12); box-shadow: 0 0 30px rgb(var(--neon-rgb) / .6); }
.ti2__no.is-feito { color: var(--cyan); border-color: rgb(var(--neon-rgb) / .55); }
.ti2__pulso { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px var(--cyan); translate: -50% -50%; left: 50%; top: 50%; opacity: 0; pointer-events: none; }
.ti2__pulso.is-indo { animation: tiViaja .9s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes tiViaja { 0% { opacity: 0; left: 50%; top: 50%; } 15% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: var(--px); top: var(--py); } }
@media (max-width: 899px) { .ti2__mapa { width: min(100%, 340px); order: -1; } }
@media (min-width: 900px) and (max-height: 700px) { .ti2__lista { margin: 12px 0 14px; gap: 3px; } .ti2__lista button { padding: 6px 12px; } .ti2__mapa { width: min(100%, 380px); } }
@media (prefers-reduced-motion: reduce) { .ti2__orbita, .ti2__centro::after { animation: none; } }

/* =========================================================
   Botões "shiny" (efeito do ShinyButton, em CSS puro e nas cores do site)
   brilho percorrendo a borda; ao passar o mouse o arco abre e o botão acende por dentro
   ========================================================= */
@property --sb-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sb-off { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sb-pct { syntax: "<percentage>"; initial-value: 6%; inherits: false; }
@property --sb-brilho { syntax: "<color>"; initial-value: #ffffff; inherits: false; }
.btn--primary, .header__cta.btn--primary {
  --sb-base: linear-gradient(135deg, #1b4fd8, #2a7cf0);
  position: relative; isolation: isolate; overflow: hidden;
  border: 1.5px solid transparent !important;
  background:
    var(--sb-base) padding-box,
    conic-gradient(from calc(var(--sb-ang) - var(--sb-off)), transparent, #5ee9ff var(--sb-pct), var(--sb-brilho) calc(var(--sb-pct) * 2), #5ee9ff calc(var(--sb-pct) * 3), transparent calc(var(--sb-pct) * 4)) border-box !important;
  animation: sbGira 3s linear infinite;
  transition: --sb-off .8s cubic-bezier(.25, 1, .5, 1), --sb-pct .8s cubic-bezier(.25, 1, .5, 1), --sb-brilho .8s cubic-bezier(.25, 1, .5, 1), box-shadow .3s, transform .2s !important;
}
.btn--primary::before, .header__cta.btn--primary::before {
  content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(-50deg, transparent 35%, rgba(142, 230, 255, .35), transparent 65%);
  translate: -60% 0; transition: translate .9s cubic-bezier(.25, 1, .5, 1);
}
.btn--primary::after, .header__cta.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 -1ex 1.6rem 2px rgba(94, 233, 255, .55); opacity: 0; transition: opacity .6s;
  animation: sbRespira 4.5s linear infinite;
}
.btn--primary:is(:hover, :focus-visible), .header__cta.btn--primary:is(:hover, :focus-visible) { --sb-pct: 20%; --sb-off: 95deg; --sb-brilho: #8ee6ff; }
.btn--primary:is(:hover, :focus-visible)::before, .header__cta.btn--primary:is(:hover, :focus-visible)::before { translate: 60% 0; }
.btn--primary:is(:hover, :focus-visible)::after, .header__cta.btn--primary:is(:hover, :focus-visible)::after { opacity: 1; }
.btn--primary:active { translate: 0 1px; }
.btn--primary > *, .header__cta.btn--primary > * { position: relative; z-index: 1; }
@keyframes sbGira { to { --sb-ang: 360deg; } }
@keyframes sbRespira { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
/* na chamada final (fundo azul) o botão é branco: mantém branco com borda brilhando */
.cta-final .btn--primary { --sb-base: linear-gradient(#fff, #fff); color: #0b2a6b; }
@media (prefers-reduced-motion: reduce) { .btn--primary, .header__cta.btn--primary, .btn--primary::after { animation: none !important; } }
@media (min-width: 900px) {
  .secao-ti { padding-top: 80px !important; padding-bottom: 12px !important; min-height: calc(100vh / var(--z, 1)); display: flex; align-items: center; box-sizing: border-box; }
  .secao-ti > .container { width: 100%; }
  .ti2 { padding: clamp(20px, 2.6vw, 40px); }
}
@media (min-width: 900px) and (max-height: 700px) {
  .ti2 h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
  .ti2__lead { margin-top: 8px; font-size: .93rem; }
  .ti2__lista { margin: 10px 0 12px; gap: 2px; }
  .ti2__lista button { padding: 5px 12px; }
}
@media (min-width: 900px) { .ti2__mapa { width: min(100%, 460px, calc(100vh / var(--z, 1) - 230px)); } }
@media (min-width: 900px) and (max-height: 600px) { .ti2__lead { display: none; } .ti2 h2 { font-size: 1.45rem; } }
@media (min-width: 900px) {
  .ti2 h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
  .ti2__lead { margin-top: 8px; font-size: .95rem; }
  .ti2__lista { margin: 10px 0 12px; gap: 2px; }
  .ti2__lista button { padding: 5px 12px; }
  .secao-ti { padding-top: 74px !important; padding-bottom: 6px !important; }
}
.foto-vaga img[src*="sobre/foto-1"] { object-position: 50% 62%; }
.foto-vaga img[src*="sobre/foto-1"] { object-position: 50% 54%; }
/* ícones do mapa clicáveis */
.ti2__no { cursor: pointer; z-index: 2; }
.ti2__no:not(.is-ativo):hover, .ti2__no:focus-visible { color: #fff; border-color: rgb(var(--neon-rgb) / .7); transform: scale(1.06); box-shadow: 0 0 22px rgb(var(--neon-rgb) / .45); outline: none; }
.foto-vaga img[src*="sobre/foto-2"] { object-position: 50% 62%; }
.foto-vaga img[src*="sobre/foto-3"] { object-position: 50% 55%; }
.foto-vaga img[src*="sobre/foto-6"] { object-position: 50% 55%; }
@media (min-width: 900px) { .sobre-galeria__grade .foto-vaga:nth-child(2) { grid-column: span 2; } }
@media (max-width: 899px) { .sobre-galeria__grade .foto-vaga:last-child { grid-column: span 2; aspect-ratio: 16 / 9; } }
.foto-vaga img[src*="sobre/foto-5"] { object-position: 50% 58%; }
.foto-vaga img[src*="sobre/foto-5"] { object-position: 50% 50%; }

/* =========================================================
   Antes x Depois (exemplos por segmento)
   ========================================================= */
.segmento.ad { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .segmento.ad { grid-template-columns: 1fr 72px 1.15fr; gap: 0; } }
.segmento.ad[hidden] { display: none; }
.ad__lado { padding: clamp(20px, 2.4vw, 32px); border-radius: 22px; }
.ad__lado--antes { background: linear-gradient(160deg, rgba(60, 20, 30, .55), rgba(20, 12, 24, .75)); border: 1px solid rgba(248, 113, 113, .28); filter: saturate(.85); }
.ad__lado--depois { background: linear-gradient(160deg, rgba(18, 52, 110, .9), rgba(8, 26, 60, .95)); border: 1px solid rgb(var(--neon-rgb) / .45); box-shadow: 0 30px 70px -30px rgb(var(--accent-rgb) / .8), 0 0 0 1px rgb(var(--neon-rgb) / .1) inset; }
.ad__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ad__tag .icon { width: 16px; height: 16px; }
.ad__lado--antes .ad__tag { color: #fca5a5; background: rgba(248, 113, 113, .14); }
.ad__lado--depois .ad__tag { color: #6ee7b7; background: rgba(52, 211, 153, .14); }
.ad__lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad__lado li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.04rem; line-height: 1.45; }
.ad__lado li .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; margin-top: 1px; }
.ad__lado--antes li { color: rgba(234, 220, 225, .82); }
.ad__lado--antes li .icon { color: #f87171; background: rgba(248, 113, 113, .15); }
.ad__lado--depois li { color: #eef6ff; font-weight: 500; }
.ad__lado--depois li .icon { color: #34d399; background: rgba(52, 211, 153, .16); }
.ad__seta { display: grid; place-items: center; position: relative; }
.ad__seta img { display: none; }
.ad__seta .icon { width: 52px; height: 52px; padding: 13px; border-radius: 50%; color: #05122a; background: linear-gradient(135deg, #8ee6ff, #2a9bf3); box-shadow: 0 0 30px rgb(var(--neon-rgb) / .6); animation: adPulso 2s ease-in-out infinite; }
@keyframes adPulso { 50% { transform: translateX(5px); } }
@media (max-width: 899px) { .ad__seta .icon { transform: rotate(90deg); animation: none; width: 44px; height: 44px; padding: 11px; } }
.ad__resultado { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; font-size: 1.12rem; font-weight: 600; color: #fff; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }
.ad__resultado b { color: #6ee7b7; }
.ad__lado--depois .btn { margin-top: 16px; }

/* =========================================================
   Perguntas frequentes em chat
   ========================================================= */
.faq-chat { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: rgba(8, 18, 40, .9); border: 1px solid rgb(var(--neon-rgb) / .25); box-shadow: 0 40px 90px -40px rgb(var(--accent-rgb) / .7); height: min(600px, calc(100vh / var(--z, 1) - 170px)); min-height: 440px; }
@media (min-width: 1024px) { .faq-chat { grid-column: 2; grid-row: 1 / span 2; } }
.faq-chat__topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, rgba(30, 111, 240, .35), rgba(18, 182, 232, .15)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.faq-chat__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #071228; border: 1px solid rgb(var(--neon-rgb) / .5); }
.faq-chat__av img { width: 60%; }
.faq-chat__topo b { display: block; color: #fff; }
.faq-chat__topo small { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #6ee7b7; }
.faq-chat__topo small i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.faq-chat__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgb(var(--neon-rgb) / .4) transparent; }
.faq-chat__msg { max-width: 86%; margin: 0; padding: 11px 15px; border-radius: 18px; font-size: .97rem; line-height: 1.5; animation: appEntra .35s var(--ease); }
.faq-chat__msg--bot { align-self: flex-start; color: #eaf4ff; background: rgba(255, 255, 255, .07); border-bottom-left-radius: 5px; }
.faq-chat__msg--eu { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #1b4fd8, #2a7cf0); border-bottom-right-radius: 5px; }
.faq-chat__digitando { display: inline-flex; gap: 4px; }
.faq-chat__digitando i { width: 7px; height: 7px; border-radius: 50%; background: rgba(234, 242, 255, .6); animation: faqPonto 1s infinite; }
.faq-chat__digitando i:nth-child(2) { animation-delay: .15s; } .faq-chat__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes faqPonto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.faq-chat__opcoes { display: flex; gap: 8px; padding: 12px 14px 14px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 12, 30, .6); scrollbar-width: thin; scrollbar-color: rgb(var(--neon-rgb) / .4) transparent; flex-wrap: wrap; max-height: 150px; overflow-y: auto; }
.faq-chat__opcoes button { flex: none; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--cyan); background: rgb(var(--neon-rgb) / .08); border: 1px solid rgb(var(--neon-rgb) / .35); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.faq-chat__opcoes button:hover { background: rgb(var(--neon-rgb) / .18); color: #fff; box-shadow: 0 0 16px rgb(var(--neon-rgb) / .35); }
.faq-chat__opcoes button.is-feita { opacity: .45; }
.faq-chat__opcoes .faq-chat__outra { color: #fff; background: linear-gradient(135deg, #1b4fd8, #2a7cf0); border-color: transparent; }
@media (min-width: 1024px) { .faq__topo { align-self: center; } }
@media (min-width: 900px) { .segmento.ad { align-items: center; } .ad__lado--antes { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } }
.faq__topo::after { content: "Toque numa pergunta e a resposta chega no chat."; display: block; max-width: 18rem; font-size: 1.02rem; line-height: 1.5; color: rgba(234, 242, 255, .7); }
@media (max-width: 1023px) { .faq__topo::after { max-width: none; } }

/* Tecnologia conectada — lado esquerdo: linha do tempo vertical */
.ti2__lista { position: relative; margin: 18px 0 20px; padding: 0 0 0 4px; gap: 0; }
.ti2__lista::before, .ti2__lista::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; }
.ti2__lista::before { background: rgba(255, 255, 255, .1); }
.ti2__lista::after { bottom: auto; height: calc((100% - 36px) * var(--prog-n, 0)); background: linear-gradient(#8ee6ff, #2a9bf3); box-shadow: 0 0 10px rgb(var(--neon-rgb) / .7); transition: height .6s var(--ease); }
.ti2__lista li { position: relative; }
.ti2__lista button {
  grid-template-columns: 28px 1fr auto; column-gap: 14px; padding: 8px 12px 8px 4px; border-radius: 14px; border: 1px solid transparent; background: none;
}
.ti2__lista button::before {
  content: ""; grid-row: span 2; align-self: start; margin-top: 2px; width: 14px; height: 14px; justify-self: center; border-radius: 50%;
  background: #0a1834; border: 2px solid rgba(255, 255, 255, .25); transition: all .3s; position: relative; z-index: 1;
}
.ti2__lista button.is-feito::before { background: var(--cyan); border-color: var(--cyan); }
.ti2__lista button.is-ativo::before { width: 18px; height: 18px; margin-top: 0; background: #fff; border: 4px solid var(--cyan); box-shadow: 0 0 0 5px rgb(var(--neon-rgb) / .2), 0 0 18px rgb(var(--neon-rgb) / .8); }
.ti2__lista b { grid-column: 2; font-size: 1rem; color: rgba(234, 242, 255, .62); transition: color .3s; }
.ti2__lista button.is-feito b { color: rgba(234, 242, 255, .85); }
.ti2__hora { grid-column: 3; grid-row: 1; justify-self: end; padding: 2px 9px; border-radius: 999px; font-size: .72rem; color: rgba(234, 242, 255, .55); background: rgba(255, 255, 255, .05); }
.ti2__txt { grid-column: 2 / span 2; }
.ti2__lista button.is-ativo { background: linear-gradient(100deg, rgb(var(--neon-rgb) / .12), rgba(30, 111, 240, .08)); border-color: rgb(var(--neon-rgb) / .35); }
.ti2__lista button.is-ativo b { color: #fff; font-size: 1.08rem; }
.ti2__lista button.is-ativo .ti2__hora { color: #05122a; background: linear-gradient(90deg, #8ee6ff, #2a9bf3); }
.ti2__lista button.is-ativo .ti2__txt { margin-top: 4px; color: rgba(234, 242, 255, .85); }
.ti2__lista button:hover:not(.is-ativo) b { color: #fff; }
.ti2__lista[data-passo]::marker { content: none; }
.ti2__texto .btn { margin-top: 2px; }
.ti2__passo { display: inline-block; margin: 14px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
@media (min-width: 900px) and (max-height: 700px) { .ti2__lista button { padding-top: 5px; padding-bottom: 5px; } .ti2__lista { margin: 12px 0 14px; } }

/* =========================================================
   Como funciona — Método Revvotec (cards em arco + detalhe)
   ========================================================= */
.metodo { text-align: center; }
.metodo__selo { display: inline-block; margin: 0 0 14px; padding: 7px 18px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); background: rgb(var(--neon-rgb) / .08); border: 1px solid rgb(var(--neon-rgb) / .4); }
.metodo__topo h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; color: #fff; }
.metodo__marca, .metodo__marca span { background: linear-gradient(100deg, #8ee6ff, var(--cyan) 35%, #2a9bf3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metodo__topo > p:last-child { margin: 12px auto 0; max-width: 620px; font-size: 1.05rem; color: rgba(234, 242, 255, .72); }
.metodo__cards { display: flex; justify-content: center; align-items: center; gap: 10px; margin: clamp(22px, 4vh, 40px) auto 0; perspective: 1200px; }
.metodo__card {
  --d: 0; position: relative; flex: 0 0 auto; width: clamp(118px, 10.5vw, 150px); height: clamp(190px, 27vh, 240px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px;
  font: inherit; color: #eaf4ff; text-align: center; cursor: pointer; border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 60, 100, .55), rgba(8, 22, 48, .85)); border: 1px solid rgb(var(--neon-rgb) / .22);
  transform: translateY(calc(var(--d) * 9px)) scale(calc(1 - var(--d) * .045)); opacity: calc(1 - var(--d) * .12);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.2), opacity .4s, border-color .3s, box-shadow .4s, background .4s;
}
.metodo__card:hover { border-color: rgb(var(--neon-rgb) / .6); opacity: 1; }
.metodo__card.is-ativo {
  height: clamp(220px, 32vh, 280px); width: clamp(132px, 12vw, 168px); opacity: 1; transform: none; z-index: 2;
  background: linear-gradient(180deg, rgba(30, 111, 240, .45), rgba(10, 30, 70, .95)); border-color: rgb(var(--neon-rgb) / .8);
  box-shadow: 0 0 0 6px rgb(var(--neon-rgb) / .08), 0 30px 60px -20px rgb(var(--accent-rgb) / .9), 0 0 40px rgb(var(--neon-rgb) / .25);
}
.metodo__num { position: absolute; top: 8px; right: 12px; font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 300; line-height: 1; color: rgb(var(--neon-rgb) / .28); }
.metodo__card.is-ativo .metodo__num { color: rgb(var(--neon-rgb) / .55); }
.metodo__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--cyan); background: rgb(var(--neon-rgb) / .12); }
.metodo__ic .icon { width: 22px; height: 22px; }
.metodo__card.is-ativo .metodo__ic { color: #05122a; background: linear-gradient(135deg, #8ee6ff, #2a9bf3); box-shadow: 0 0 22px rgb(var(--neon-rgb) / .6); }
.metodo__card b { font-size: .95rem; line-height: 1.25; }
.metodo__card small { font-size: .78rem; line-height: 1.35; color: rgba(234, 242, 255, .55); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.metodo__card.is-ativo small { max-height: 60px; opacity: 1; color: var(--cyan); }
.metodo__fases { position: relative; display: grid; grid-template-columns: 2fr 3fr 2fr; max-width: 1080px; margin: 18px auto 0; padding-top: 14px; }
.metodo__fases::before { content: ""; position: absolute; top: 0; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .35), transparent); }
.metodo__fases span { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 242, 255, .38); transition: color .3s; }
.metodo__fases span.is-ativa { color: var(--cyan); }
.metodo__detalhe {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; max-width: 900px; margin: 18px auto 0; padding: 16px 22px; text-align: left;
  border-radius: 18px; background: rgba(8, 20, 46, .85); border: 1px solid rgba(255, 255, 255, .1);
}
.metodo__detalhe-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--cyan); background: rgb(var(--neon-rgb) / .12); }
.metodo__detalhe-ic .icon { width: 24px; height: 24px; }
.metodo__detalhe-titulo { margin: 0; font-size: 1.1rem; color: #fff; }
.metodo__detalhe-titulo em { font-style: normal; color: var(--cyan); margin-right: 6px; }
.metodo__detalhe-txt { margin: 4px 0 0; font-size: .95rem; line-height: 1.5; color: rgba(234, 242, 255, .78); }
.metodo__recebe { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: .9rem; font-weight: 700; color: #6ee7b7; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); max-width: 200px; }
.metodo__recebe small { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(110, 231, 183, .75); }
.metodo__detalhe.is-troca > * { animation: appEntra .4s var(--ease); }
@media (max-width: 899px) {
  .metodo__cards { justify-content: flex-start; overflow-x: auto; padding: 16px 8px 18px; margin-left: -16px; margin-right: -16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .metodo__card { scroll-snap-align: center; transform: none; opacity: .85; width: 132px; height: 200px; }
  .metodo__card.is-ativo { height: 220px; }
  .metodo__fases { display: none; }
  .metodo__detalhe { grid-template-columns: auto 1fr; }
  .metodo__recebe { grid-column: 1 / -1; max-width: none; }
}
/* cada parte do "Como funciona" ocupa uma tela */
@media (min-width: 1024px) and (min-height: 560px) {
  #como-funciona > .container.how { min-height: calc(100vh / var(--z, 1)); display: grid; align-content: center; padding-top: 69px; box-sizing: border-box; scroll-snap-align: start; }
  #como-funciona > .container.metodo { padding-bottom: 12px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .metodo__topo h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .metodo__selo { margin-bottom: 8px; padding: 5px 14px; }
  .metodo__topo > p:last-child { margin-top: 6px; font-size: .95rem; }
  .metodo__cards { margin-top: 16px; }
  .metodo__card { height: 170px; } .metodo__card.is-ativo { height: 200px; }
  .metodo__detalhe { margin-top: 12px; padding: 12px 18px; }
}
.how__lead { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.6; color: rgba(234, 242, 255, .72); }

/* =========================================================
   Projetos na prática — cards limpos
   ========================================================= */
.projetos2__topo { max-width: 760px; }
.projetos2__topo h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; color: #fff; }
.projetos2__topo > p:last-child { margin: 10px 0 0; font-size: 1.05rem; color: rgba(234, 242, 255, .68); }
.projetos2__grade { display: grid; gap: 18px; margin-top: clamp(22px, 4vh, 36px); }
@media (min-width: 900px) { .projetos2__grade { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: rgba(12, 26, 56, .72); border: 1px solid rgba(255, 255, 255, .09); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.pcard:hover { border-color: rgb(var(--neon-rgb) / .45); transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgb(var(--accent-rgb) / .7); }
.pcard header { display: flex; align-items: center; gap: 14px; }
.pcard__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: .85rem; font-weight: 700; color: var(--cyan); background: rgb(var(--neon-rgb) / .1); border: 1px solid rgb(var(--neon-rgb) / .3); }
.pcard__rotulo { margin: 0 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.pcard h3 { margin: 0; font-size: 1.25rem; color: #fff; }
.pcard__frase { margin: 16px 0 0; padding-bottom: 16px; font-size: .95rem; line-height: 1.55; color: rgba(234, 242, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pcard ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pcard li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: #eaf4ff; }
.pcard li .icon { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #05122a; background: linear-gradient(135deg, #8ee6ff, #2a9bf3); stroke-width: 3; }
.pcard__fotos { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: rgba(234, 242, 255, .6); cursor: pointer; transition: color .2s; }
.pcard__fotos .icon { width: 17px; height: 17px; }
.pcard__fotos:hover { color: var(--cyan); }
.pgal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 16, .9); backdrop-filter: blur(6px); animation: igFundo .25s ease; }
.pgal figure { margin: 0; text-align: center; }
.pgal img { max-width: min(1100px, 100%); max-height: 78vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.pgal figcaption { margin-top: 12px; color: #eaf4ff; font-weight: 600; }
.pgal__btn { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(var(--neon-rgb) / .4); background: rgba(8, 20, 46, .8); color: #fff; cursor: pointer; font-size: 1.4rem; }
.pgal__btn--ant { left: 18px; } .pgal__btn--prox { right: 18px; }
.pgal__fechar { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 20, 46, .8); color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (min-width: 1024px) and (min-height: 560px) {
  #como-funciona > .projetos2 { min-height: calc(100vh / var(--z, 1)); display: flex; flex-direction: column; justify-content: center; padding-top: 69px; box-sizing: border-box; scroll-snap-align: start; }
}
.projetos2__topo { max-width: 900px; }
/* Projetos na prática: versão enxuta (foto + título + 1 frase) */
.pcard--limpo { padding: 0; overflow: hidden; }
.pcard__capa { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0 !important; margin: 0 !important; border: 0; overflow: hidden; cursor: zoom-in; }
.pcard__capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.pcard--limpo:hover .pcard__capa img { transform: scale(1.05); }
.pcard__capa span { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(4, 10, 24, .7); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.pcard--limpo:hover .pcard__capa span { opacity: 1; }
.pcard--limpo header { padding: 18px 22px 0; }
.pcard--limpo .pcard__frase { margin: 8px 22px 22px; padding: 0; border: 0; }
/* "Antes": conteúdo centralizado no card (selo do tamanho do texto, lista no meio) */
@media (min-width: 900px) {
  .ad__lado--antes { align-items: center; justify-content: center; text-align: left; }
  .ad__lado--antes .ad__tag { align-self: center; width: auto; }
  .ad__lado--antes ul { width: fit-content; max-width: 100%; margin: 0 auto; }
}
.ad__lado--antes .ad__tag { display: inline-flex; width: fit-content; }
@media (min-width: 900px) { .ad__lado--antes { justify-content: flex-start; } }

/* menos cara de IA: destaques em cor sólida em vez de texto degradê (o título do hero mantém o degradê da logo) */
.ti2__destaque, .metodo__marca, .metodo__marca span { background: none; -webkit-text-fill-color: currentColor; color: #22c7f5; }

/* Instagram do Sobre: menu de opções, busca e botões da barra */
.ig__topo-acoes { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ig__post header svg { cursor: pointer; }
.ig__eu { padding: 0; border: 0; background: none; cursor: pointer; }
.ig__menu-caixa { height: auto; padding-bottom: 8%; }
.ig__menu-itens { display: flex; flex-direction: column; }
.ig__menu-itens button { padding: .85em 1em; border: 0; border-top: 1px solid #363636; background: none; color: #f5f5f5; font: inherit; font-size: .8em; text-align: center; cursor: pointer; }
.ig__menu-itens button:hover { background: #303030; }
.ig__menu-itens .ig__menu-cancelar { color: #a8a8a8; }
.ig__busca { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #000; }
.ig__busca[hidden] { display: none; }
.ig__busca-topo { display: flex; align-items: center; gap: .5em; padding: 12% 4% .6em; }
.ig__busca-topo button { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ig__busca-topo svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; }
.ig__busca-topo input { flex: 1; min-width: 0; padding: .5em .8em; border: 0; border-radius: .6em; background: #262626; color: #fff; font: inherit; font-size: .8em; outline: none; }
.ig__busca-res { flex: 1; overflow-y: auto; }

/* Projetos: vagas para os próximos projetos (troque cada .case--vaga por um card real) */
.case--vaga { border-style: dashed !important; }
.case__vaga-img { display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, rgba(27, 79, 216, .06) 0 12px, transparent 12px 24px), #dbe8f7; }
.case__vaga-img span { padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #1b4fd8; background: #fff; border: 1px solid #c4dcf3; }
.case--vaga h3 { color: #4a5f7a; }
@media (min-width: 1024px) and (min-height: 560px) {
  .case__vaga-img { aspect-ratio: auto; height: calc(37vh / var(--z, 1)); }
}

/* Projetos: os 6 cards (2 linhas) cabem numa tela só no computador */
@media (min-width: 1024px) and (min-height: 560px) {
  #cases .cases { gap: 12px; }
  #cases .case__img img, #cases .case--featured .case__img img,
  #cases .case__video, #cases .case--featured .case__video,
  #cases .case__vaga-img { height: calc(23vh / var(--z, 1)) !important; aspect-ratio: auto !important; }
  #cases .case__body { padding: 12px 18px; }
  #cases .case h3 { font-size: 1rem; }
  #cases .cases__titulo { margin-bottom: clamp(12px, 2vh, 22px); }
}
@media (min-width: 1024px) and (min-height: 780px) {
  #cases .case__img img, #cases .case--featured .case__img img,
  #cases .case__video, #cases .case--featured .case__video,
  #cases .case__vaga-img { height: calc(26vh / var(--z, 1)) !important; }
}
/* linhas com altura fixa: o card que cresce no hover passa por cima, sem empurrar a linha de baixo */
@media (min-width: 1024px) and (min-height: 560px) {
  #cases .cases { --imgh: calc(23vh / var(--z, 1)); grid-auto-rows: calc(var(--imgh) + 46px); }
  #cases .case { align-self: start; }
}
@media (min-width: 1024px) and (min-height: 780px) {
  #cases .cases { --imgh: calc(26vh / var(--z, 1)); }
}
/* projetos com foto (sem vídeo): no hover o texto sobe por cima da imagem, sem aumentar o card */
@media (min-width: 1024px) and (min-height: 560px) {
  #cases .case--foto { position: relative; height: calc(var(--imgh) + 46px); overflow: hidden; }
  #cases .case--foto .case__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; justify-content: flex-start; }
}
/* logos novos: Venora (ícone redondo) e Premier RH (com "Conectando pessoas") um pouco maiores */
@media (min-width: 1024px) { #parceiros .partner img[src*="venora-t"] { height: 78% !important; max-width: 78%; } }
@media (min-width: 1024px) { #parceiros .partner img[src*="premier-rh-t"] { height: 62% !important; max-width: 92%; } }
/* 2ª linha de projetos: o card cresce para cima no hover (não sai da tela) */
@media (min-width: 1024px) and (min-height: 560px) {
  #cases .case:nth-child(n+4) { align-self: end; transform-origin: center bottom; }
}

/* FAQ: todas as perguntas visíveis, sem rolar dentro do chat */
.faq-chat__opcoes { max-height: none !important; overflow: visible !important; gap: 6px; padding: 12px 14px 14px; }
.faq-chat__opcoes button { padding: 6px 12px; font-size: .82rem; }
@media (max-width: 1023px) { .faq-chat { height: auto !important; min-height: 0 !important; } .faq-chat__msgs { min-height: 220px; max-height: 320px; } }
.faq-chat__opcoes button { max-width: 100%; white-space: normal; text-align: left; }

@media (min-width: 1024px) {
/* logos dos parceiros com o mesmo peso visual: altura ~ 1/raiz(proporção), todas com a mesma área */
#parceiros .partner img { max-height: none !important; max-width: 88% !important; width: auto !important; object-fit: contain; }
#parceiros .partner img[src*="360m2-coworking-t"] { height: 42% !important; }
#parceiros .partner img[src*="360m2-t"] { height: 42% !important; }
#parceiros .partner img[src*="360s2-consultoria-t"] { height: 37% !important; }
#parceiros .partner img[src*="dr-batidos-t"] { height: 36% !important; }
#parceiros .partner img[src*="formula1-t"] { height: 45% !important; }
#parceiros .partner img[src*="hub360-t"] { height: 32% !important; }
#parceiros .partner img[src*="lanup-t"] { height: 34% !important; }
#parceiros .partner img[src*="licitai-t"] { height: 45% !important; }
#parceiros .partner img[src*="lollapalooza-t"] { height: 33% !important; }
#parceiros .partner img[src*="open-drinks-t"] { height: 58% !important; }
#parceiros .partner img[src*="premier-rh-t"] { height: 35% !important; }
#parceiros .partner img[src*="rockinrio-t"] { height: 67% !important; }
#parceiros .partner img[src*="seven360-t"] { height: 47% !important; }
#parceiros .partner img[src*="thetown-t"] { height: 32% !important; }
#parceiros .partner img[src*="tomorrowland-t"] { height: 49% !important; }
#parceiros .partner img[src*="venora-t"] { height: 68% !important; }
#parceiros .partner img[src*="vivo-t"] { height: 38% !important; }
#parceiros .partner img[src*="embracon.svg"] { height: 50% !important; }
#parceiros .partner img[src*="tomorrowland-t"] { height: 58% !important; }
#parceiros .partner img[src*="premier-rh-t"] { height: 46% !important; max-width: 94% !important; }
#parceiros .partner img[src*="venora-t"] { height: 60% !important; }
}
/* FAQ: chat mais alto */
@media (min-width: 1024px) { .faq-chat { height: min(720px, calc(100vh / var(--z, 1) - 110px)) !important; min-height: 520px !important; } }
/* Projetos: ao passar o mouse (ou tocar), o vídeo aparece inteiro, sem corte */
#cases .case:hover .case__video, #cases .case.is-aberto .case__video { object-fit: contain !important; background: #02060f; }
/* janela de produtos: sem encaixe forçado (deixava a rolagem de lado travada) */
@media (hover: hover) and (pointer: fine) { .produtos-modal__conteudo .produtos__grade { scroll-snap-type: none !important; scroll-behavior: auto !important; } }
/* desempenho: animação pausada fora da tela (classe colocada pelo main.js) */
.anim-pausa, .anim-pausa::before, .anim-pausa::after { animation-play-state: paused !important; }

/* Seis sistemas rodando: os 6 cards cabem numa tela só no computador */
@media (min-width: 1024px) {
  #como-funciona > .projetos2 { padding-bottom: 14px; }
  .projetos2__topo h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
  .projetos2__topo .metodo__selo { margin-bottom: 6px; }
  .projetos2__grade { gap: 14px; margin-top: clamp(10px, 2vh, 20px); }
  .projetos2 .pcard__capa { aspect-ratio: auto; height: clamp(90px, calc((100vh / var(--z, 1) - 450px) / 2), 300px); }
  .projetos2 .pcard--limpo header { padding: 10px 18px 0; gap: 10px; }
  .projetos2 .pcard__num { width: 30px; height: 30px; font-size: .75rem; }
  .projetos2 .pcard h3 { font-size: 1.05rem; }
  .projetos2 .pcard--limpo .pcard__frase { margin: 4px 18px 8px; font-size: .84rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .projetos2 .rd-testar { margin: 0 18px 12px; padding: 7px 13px; font-size: .82rem; border-radius: 10px; }
  .projetos2 .rd-testar .icon { width: 15px; height: 15px; }
}

/* computador: botões de IA e WhatsApp sempre livres — o conteúdo deixa uma faixa vazia de 100px de cada lado
   e a faixa de produtos do topo termina antes deles; os botões não somem nem pulam mais */
@media (min-width: 1024px) {
  main .container, footer .container { max-width: min(1280px, calc(100vw / var(--z, 1) - 200px)) !important; }
  body.fab-some .ai-fab, body.fab-some .whatsapp-float { opacity: 1 !important; pointer-events: auto !important; }
}
@media (min-width: 1024px) and (hover: hover) { .ai-fab, .whatsapp-float { transition: box-shadow .3s ease, opacity .3s !important; } }

/* desempenho (sem mudança visual): o brilho interno dos botões só aparece no hover, então só anima no hover */
.btn--primary::after, .header__cta.btn--primary::after { animation-play-state: paused; }
.btn--primary:is(:hover, :focus-visible)::after, .header__cta.btn--primary:is(:hover, :focus-visible)::after { animation-play-state: running; }
/* aparelho lento (detectado pelo main.js): a borda brilhante gira com 30 atualizações por segundo em vez de 60 */
html.leve .btn--primary, html.leve .header__cta.btn--primary { animation-timing-function: steps(90) !important; }

/* =========================================================
   Revisão 29/10 (auditorias de interface, acessibilidade e telas) — sem mudar o desenho
   ========================================================= */
/* foco do teclado visível também nos fundos claros (cabeçalho depois de rolar, menu aberto, chat da IA) */
.header.is-scrolled :focus-visible, .header.is-open :focus-visible,
.ai-chat__body :focus-visible, .ai-chat__chips :focus-visible, .ai-chat__form :focus-visible, .ai-chat__foot :focus-visible { outline-color: var(--blue); }
/* título que recebe foco ao trocar de página: sem contorno (é só para o leitor de tela saber onde está) */
[tabindex="-1"]:focus { outline: none; }
/* alto contraste do Windows: os focos feitos com sombra continuam visíveis */
.contact__form input:focus, .contact__form textarea:focus, .ai-chat__form input:focus { outline: 2px solid transparent; }
/* cabeçalho fixo não cobre o que recebeu foco pelo Tab */
:where(a, button, input, textarea, select, [tabindex]) { scroll-margin-top: 84px; }
@media (max-width: 1023px) { :where(a, button, input, textarea, select, [tabindex]) { scroll-margin-bottom: 76px; } }
/* cases no computador: quem navega pelo teclado também vê o texto e as tags */
@media (hover: hover) and (pointer: fine) {
  .case:focus-within .case__body p { max-height: 140px; opacity: 1; margin-top: 8px; }
  .case:focus-within .case__body .tags { max-height: 60px; opacity: 1; margin-top: 12px; }
}
/* foco do botão da capa não é cortado pelo card; o selo "Ver fotos" aparece também no foco */
.pcard__capa:focus-visible { outline-offset: -3px; }
.pcard__capa:focus-visible span { opacity: 1; }
/* contraste: rodapé e links do chat, texto de exemplo do formulário, perguntas já feitas no FAQ */
.ai-chat__foot { color: #5b6577; }
.ai-msg a, .ai-chat__foot a { color: var(--blue); }
.contact__form input::placeholder { color: rgba(255, 255, 255, .55); }
.faq-chat__opcoes button.is-feita { opacity: .6; }
/* campos do celular do Instagram com foco visível */
.ig__com-form input:focus-visible, .ig__busca-topo input:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
/* faixa de produtos para ao passar o mouse (dá para ler) */
.faixa-produtos:hover .faixa-produtos__trilho { animation-play-state: paused; }
/* rolagem dentro de chat e janelas não "vaza" para a página */
.ai-chat__body, .produtos-modal__conteudo .produtos__grade { overscroll-behavior: contain; }
/* menos movimento: rolagens suaves viram instantâneas */
@media (prefers-reduced-motion: reduce) { html, .ai-chat__body, .produtos-modal__conteudo .produtos__grade, .faq-chat__msgs { scroll-behavior: auto !important; } }

/* celular: a barra fixa de baixo só aparece junto com os botões (antes ficava vazia cobrindo o fim do topo) */
@media (max-width: 1023px) {
  body.page-home::after { transition: opacity .3s; }
  body.page-home:not(.rolou)::after { opacity: 0; }
}
/* celular: "Voltar ao início" no canto esquerdo (o menu fica no direito e o logo no meio; antes encostava no menu) */
@media (max-width: 1023px) {
  .header__bar .pagina-voltar { position: absolute; left: 20px; top: 0; bottom: 0; height: 44px; margin: auto 0; }
  .header__bar .brand { min-width: 0; flex-shrink: 1; }
}
/* celular: legendas do mapa de tecnologia legíveis */
@media (max-width: 600px) {
  .ti2__no small { font-size: .62rem; }
  .ti2__centro span { font-size: .78rem; }
}
/* celular: Método — palavra longa ("Acompanhamento") cabe no card e o brilho do card ativo não é cortado */
@media (max-width: 899px) {
  .metodo__card b { font-size: .88rem; hyphens: auto; overflow-wrap: anywhere; }
  .metodo__cards { padding-top: 26px; padding-bottom: 28px; padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; }
}

/* ---------- telas: correções do teste em 18 resoluções (29/10) ---------- */
/* colunas com mínimo 0: conteúdo largo não empurra mais a página para o lado (320 e 1024 px) */
.how { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .how { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.painel__resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1024px) and (min-height: 560px) { #como-funciona > .container:first-child { grid-template-columns: minmax(0, 1fr); } }
/* Método (computador): os 7 cards encolhem para caber na largura (em 1024 px passavam da tela) */
@media (min-width: 900px) {
  .metodo__cards { max-width: 100%; }
  .metodo__card { flex-shrink: 1; min-width: 0; }
  .metodo__card b { overflow-wrap: anywhere; hyphens: auto; }
}
@media (min-width: 900px) and (max-width: 1199px) { .metodo__card b { font-size: .82rem; } }
.metodo__recebe small { font-size: .75rem; }
/* painel de exemplo entre 1024 e 1279 px: menu em abas em cima (como no celular), os 3 cartões aparecem inteiros */
@media (min-width: 1024px) and (max-width: 1279px) {
  .painel__corpo { grid-template-columns: minmax(0, 1fr); }
  .painel__menu { display: flex; overflow-x: auto; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); scrollbar-width: none; }
  .painel__menu button { flex-shrink: 0; }
  .painel__resumo strong { font-size: 15px; }
}
/* celular estreito: cartões do painel menores para os valores caberem */
@media (max-width: 400px) {
  .painel__main { padding: 12px 10px 14px; }
  .painel__resumo { gap: 6px; }
  .painel__resumo > div { padding: 8px 7px; min-width: 0; }
  .painel__resumo span { font-size: 10px; }
  .painel__resumo strong { font-size: 13px; white-space: nowrap; }
}
/* 320 px: os dois botões do topo não cabiam lado a lado ("Solicitar orçamento" saía cortado) */
@media (max-width: 359px) {
  .page-home .hero__actions { flex-direction: column; }
  .page-home .hero__actions .btn { flex: none; width: 100%; }
}
/* projetos entre 1024 e 1279 px: título em 2 linhas cabe no card (a 2ª fileira subia por cima da 1ª) */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 560px) {
  #cases .cases { grid-auto-rows: calc(var(--imgh) + 66px); }
  #cases .case__body { min-height: 66px; }
  #cases .case--foto { height: calc(var(--imgh) + 66px); }
}
/* rodapé entre 1024 e 1279 px: contatos quebram linha em vez de passar por baixo dos botões de IA e WhatsApp */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer__inner { gap: 28px; }
  .footer__nav { gap: 18px; }
  .footer__contact a { white-space: normal; }
}
/* Seis sistemas: frase do card em até 2 linhas (antes cortava com "…" em telas até 1366 px) */
@media (min-width: 1024px) {
  .projetos2 .pcard--limpo .pcard__frase { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .projetos2 .pcard__capa { height: clamp(90px, calc((100vh / var(--z, 1) - 500px) / 2), 300px); }
}
/* FAQ: o chat desconta o espaço real da seção (passava 2 a 4 px da tela) */
@media (min-width: 1024px) { .faq-chat { height: min(720px, calc(100vh / var(--z, 1) - 112px)) !important; } }
/* celular deitado: cabeçalho e barra de baixo mais baixos, chat de IA com mais espaço para as mensagens */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .header__bar, .header.is-scrolled .header__bar { height: 56px; }
  .header__bar .brand img { width: 34px; height: 34px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body::after { height: calc(56px + env(safe-area-inset-bottom)); }
  .ai-fab, .whatsapp-float { bottom: calc(8px + env(safe-area-inset-bottom)) !important; height: 40px !important; }
  .ai-chat { top: 8px; height: auto; bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .ai-chat__foot { display: none; }
}
/* celular: "Dúvidas?" no mesmo formato do botão do WhatsApp (ficava oval, sobra de quando era um ícone redondo) */
@media (max-width: 1023px) { .ai-fab { border-radius: 999px !important; } }