/* Primeira dobra 08, versão B (Claude, 08/10/2026), publicada na home de zorzaneli.com.br. Também usada pelas
   prévias locais proposta-primeira-dobra-08.php e 08b.php. O resto da home continua igual; aqui muda só a primeira
   dobra e o cabeçalho, no tema claro da referência de Bruno. */
html body[data-dobra="08"] {
  --d08-ink: #0b0f1a;
  --d08-text: #4a5262;
  --d08-muted: #6b7280;
  --d08-red: #e3101f;
  --d08-line: #e5e7eb;
  --d08-ok: #16a34a;
  --d08-topo: 77px;
  --d08-title: "Sora", system-ui, sans-serif;
  --d08-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Cabeçalho claro, logo de texto escuro. No topo da página ele fica transparente, sem linha, e a primeira dobra
   vira uma tela só; ao rolar (classe .scrolled da home), volta o branco translúcido com a linha fina */
html body[data-dobra="08"] header,
html body[data-dobra="08"] header.scrolled {
  background: rgba(255, 255, 255, .9) !important;
  border-bottom: 1px solid rgba(17, 24, 39, .07) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  animation: none !important;
  transition: background-color .3s ease, border-color .3s ease !important;
}
html body[data-dobra="08"]:not([data-d08-rolou]) header:not(.scrolled) {
  background: rgba(255, 255, 255, 0) !important;
  border-bottom-color: rgba(17, 24, 39, 0) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body[data-dobra="08"] header::before,
html body[data-dobra="08"] header::after { content: none !important; }
html body[data-dobra="08"] header .logo { background: none !important; padding: 0 !important; }
html body[data-dobra="08"] header .logo img { height: 42px !important; width: auto !important; }
html body[data-dobra="08"] header nav a:not(.cta-nav) { color: #1f2937 !important; }
html body[data-dobra="08"] header nav a:not(.cta-nav):hover,
html body[data-dobra="08"] header nav a.active:not(.cta-nav),
html body[data-dobra="08"] header nav a.is-active:not(.cta-nav),
html body[data-dobra="08"] header nav a[aria-current]:not(.cta-nav) { color: var(--d08-red) !important; }
/* "Falar com Especialista" é pouco usado (Bruno: o botão principal do site é o Suporte, onde os clientes baixam o
   suporte): contornado e discreto, sem disputar com o Suporte vermelho da primeira dobra; o ícone mantém o vermelho */
html body[data-dobra="08"] header .cta-nav {
  background: rgba(255, 255, 255, .72) !important; border: 1.5px solid rgba(17, 24, 39, .16) !important; color: #1f2937 !important;
  box-shadow: none !important;
}
html body[data-dobra="08"] header .cta-nav::before { background: var(--d08-red) !important; }
html body[data-dobra="08"] header .cta-nav:hover { background: #fff !important; border-color: var(--d08-red) !important; color: var(--d08-red) !important; }
html body[data-dobra="08"] header .menu-toggle .bar { background: var(--d08-ink) !important; }
/* Menu do celular fechado some de verdade: sem a sombra na borda direita da tela e fora da ordem do Tab
   (na home publicada o display:flex do .drawer anula o atributo hidden) */
html body[data-dobra="08"] .drawer[hidden] { display: none !important; }

/* Indicador lateral de seções: some enquanto a primeira dobra está na tela e volta no resto da página */
html body[data-dobra="08"] .scroll-dots { transition: opacity .25s ease, visibility .25s; }
html body[data-dobra="08"][data-d08-topo] .scroll-dots { opacity: 0 !important; visibility: hidden !important; }

/* Foco do teclado escuro (o da home é branco, feito para o fundo escuro) */
html body[data-dobra="08"] header .logo a:focus-visible,
html body[data-dobra="08"] header .menu-toggle:focus-visible,
html body[data-dobra="08"] header .cta-nav:focus-visible,
html body[data-dobra="08"] #home.hero a:focus-visible,
html body[data-dobra="08"] #home.hero button:focus-visible,
html body[data-dobra="08"] #home.hero .quick .btn:focus-visible,
html body[data-dobra="08"] #home.hero .quick .dl-toggle:focus-visible {
  outline: 3px solid var(--d08-ink) !important; outline-offset: 3px !important;
}
html body[data-dobra="08"] #home.hero .dl-menu .dl-link:focus-visible { outline: 2px solid var(--d08-red) !important; outline-offset: -2px !important; }
@media (min-width: 900.02px) {
  html body[data-dobra="08"] header nav a:not(.cta-nav):focus-visible { outline: 2px solid var(--d08-ink) !important; outline-offset: 4px !important; border-radius: 4px; }
}

/* Primeira dobra clara; a cena se posiciona pela dobra inteira.
   Largura da cena (--d08-w) e posição (--d08-l) servem para a imagem e para os cartões. */
html body[data-dobra="08"] #home.hero {
  /* Largura: até 83vw/1300px; entre ~1101 e 1170 px encolhe o necessário para o notebook da cena não encostar
     nos botões (texto até ~420 px depois da margem do contêiner, mais 30 px de folga).
     Posição: centrada como antes, mas deslocada para a esquerda o bastante para o cartão "Monitoramento ativo"
     caber ao lado do rack, depois da faixa vertical de LEDs (75,06% da imagem), com 295 px até a borda.
     Em janelas baixas (notebooks) o texto fica centrado na altura da dobra e a linha de garantias desce até a altura
     do notebook da cena: a largura também respeita a altura (--d08-altura), para a base do notebook (73,7% da imagem
     a partir do topo da placa) ficar acima das garantias.
     Na vertical o conteúdo pode passar da dobra (menu de download); na horizontal é cortado, para nunca criar rolagem lateral. */
  --d08-texto: 450px;
  --d08-altura: clamp(720px, 100vh, 820px);
  --d08-w: min(83vw, 1300px, calc((100vw - 295px - max(24px, (100vw - 1137px) / 2) - var(--d08-texto)) / .4082), calc((var(--d08-altura) / 2 + 124.5px) / .4408));
  --d08-l: min(calc(50vw + clamp(30px, 6vw - 50px, 90px) - var(--d08-w) * .36), calc(100vw - 295px - var(--d08-w) * .7506));
  --d08-folga: 280px;
  position: relative !important; z-index: 3 !important; display: flex !important; align-items: center !important;
  min-height: 0 !important; height: var(--d08-altura) !important;
  padding: var(--d08-topo) 0 0 !important; overflow: visible !important; overflow-x: clip !important; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%) !important;
  transform: none !important; animation: none !important;
}
html body[data-dobra="08"] #home.hero::before,
html body[data-dobra="08"] #home.hero::after { content: none !important; display: none !important; }
html body[data-dobra="08"] #home.hero .inner { position: static !important; display: block !important; z-index: auto !important; }
html body[data-dobra="08"] #home.hero .inner > div:first-child { position: static !important; max-width: 600px !important; }
html body[data-dobra="08"] #home.hero .inner > div:first-child::before,
html body[data-dobra="08"] #home.hero .inner > div:first-child::after { content: none !important; display: none !important; }
html body[data-dobra="08"] #home.hero .inner > div:first-child > * { position: relative !important; z-index: 4 !important; }
/* Os botões (e os menus que abrem deles) ficam acima da faixa de garantias */
html body[data-dobra="08"] #home.hero .inner > div:first-child > .quick.quick { z-index: 6 !important; }

html body[data-dobra="08"] #home.hero .mobile-hero-kicker {
  display: flex !important; align-items: center; gap: 12px; width: auto !important; max-width: none !important; margin: 0 0 22px !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--d08-red) !important; font: 700 13px/1.2 var(--d08-body) !important; letter-spacing: .2em !important; text-transform: uppercase !important;
}
html body[data-dobra="08"] #home.hero .mobile-hero-kicker span { display: none !important; }
/* mesmo traço vermelho que abre as outras seções da home ("Quem está por trás da sua TI") */
html body[data-dobra="08"] #home.hero .mobile-hero-kicker::before { content: ""; flex: 0 0 26px; width: 26px; height: 2px; background: var(--d08-red); }
html body[data-dobra="08"] #home.hero h1 {
  margin: 0 !important; max-width: 540px !important; color: var(--d08-ink) !important;
  font: 800 clamp(44px, 4vw, 58px)/1.02 var(--d08-title) !important; letter-spacing: -.036em !important;
  text-shadow: none !important; filter: none !important; text-wrap: balance;
}
html body[data-dobra="08"] #home.hero h1 .hl { color: var(--d08-red) !important; }
html body[data-dobra="08"] #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) {
  max-width: 470px !important; margin: 22px 0 0 !important; color: var(--d08-text) !important;
  font-size: 19px !important; line-height: 1.55 !important;
}

/* Botões: Suporte vermelho, Abrir Chamado contornado, Acessos como texto */
html body[data-dobra="08"] #home.hero .quick {
  margin-top: 32px !important; gap: 14px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body[data-dobra="08"] #home.hero .quick .btn-primary {
  background: var(--d08-red) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
  box-shadow: 0 16px 30px -16px rgba(227, 16, 31, .9) !important;
}
html body[data-dobra="08"] #home.hero .quick > a.btn.btn-gray {
  background: #fff !important; color: var(--d08-red) !important; border: 1.5px solid var(--d08-red) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
html body[data-dobra="08"] #home.hero .quick .dl-split-mobile-visible .dl-toggle {
  background: none !important; border: 0 !important; box-shadow: none !important; color: #374151 !important;
}

/* Menus Suporte e Acessos: brancos e opacos no tema claro (o vidro escuro deixava a faixa aparecer por trás) */
html body[data-dobra="08"] #home.hero .dl-menu {
  background: #ffffff !important; border: 1px solid #e5e7eb !important;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .06) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body[data-dobra="08"] #home.hero .dl-menu .dl-link,
html body[data-dobra="08"] #home.hero .dl-menu .dl-link-title { color: #1f2937 !important; }
html body[data-dobra="08"] #home.hero .dl-menu .dl-link:hover,
html body[data-dobra="08"] #home.hero .dl-menu .dl-link:focus-visible { background: #fdecec !important; color: #b90d1a !important; }
html body[data-dobra="08"] #home.hero .dl-menu .dl-link:hover .dl-link-title,
html body[data-dobra="08"] #home.hero .dl-menu .dl-link:focus-visible .dl-link-title { color: #b90d1a !important; }
html body[data-dobra="08"] #home.hero .dl-menu .dl-link-disabled,
html body[data-dobra="08"] #home.hero .dl-menu .dl-link-disabled .dl-link-title { color: #9ca3af !important; background: none !important; }
html body[data-dobra="08"] #home.hero .dl-menu .dl-link-badge { background: #f3f4f6 !important; color: #6b7280 !important; border-color: #e5e7eb !important; }
/* "Baixar o suporte" é o item mais usado do site (Bruno): destaque dentro do menu Suporte, com ícone de download,
   sem mudar a ordem nem o link */
html body[data-dobra="08"] #home.hero #dlMenu a.dl-link[href*="suporte"] { display: flex !important; align-items: center !important; gap: 10px !important; background: #fdecec !important; color: #b90d1a !important; font-weight: 700 !important; }
html body[data-dobra="08"] #home.hero #dlMenu a.dl-link[href*="suporte"]:hover,
html body[data-dobra="08"] #home.hero #dlMenu a.dl-link[href*="suporte"]:focus-visible { background: #fbd9d9 !important; }
html body[data-dobra="08"] #home.hero #dlMenu a.dl-link[href*="suporte"]::before { content: "" !important; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; }

html body[data-dobra="08"] #home.hero .garantias-08 {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 12px 0; width: max-content; max-width: min(720px, calc(100vw - 48px)); margin: 30px 0 0; padding: 0; list-style: none;
  color: #1f2937; font: 600 14.5px/1.3 var(--d08-body);
}
html body[data-dobra="08"] #home.hero .garantias-08 li { display: flex; align-items: center; gap: 10px; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--d08-line); }
html body[data-dobra="08"] #home.hero .garantias-08 li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
html body[data-dobra="08"] #home.hero .garantias-08 svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--d08-red); }

/* Cena: a placa tem a proporção da imagem; imagem, luzes e cartões usam as mesmas coordenadas.
   A cena é recortada na própria dobra; a dobra não recorta nada, para os menus poderem passar dela. */
html body[data-dobra="08"] .cena-08 { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; overflow: clip; }
/* quando a cena encolhe (janelas de 1101 a ~1250 px), ela desce para ficar centrada com o texto */
html body[data-dobra="08"] .placa-08 { position: absolute; width: var(--d08-w); aspect-ratio: 1536 / 1024; left: var(--d08-l); top: max(calc(var(--d08-topo) - var(--d08-w) * .041), calc((var(--d08-topo) + 100%) / 2 - var(--d08-w) / 3 - 40px)); }
html body[data-dobra="08"] .placa-08 > img,
html body[data-dobra="08"] .placa-08 > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
/* a imagem se desfaz à esquerda (o fundo de janela some antes do título; o notebook começa em 34%), à direita
   (telas largas), no topo (atrás do cabeçalho transparente fica só o branco; a janela nasce suave logo abaixo dele) e na base (janelas altas de 900 a
   ~1250 px, onde ela termina antes do piso): as duas faixas se cruzam (intersect) */
html body[data-dobra="08"] .placa-imagem img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 20%, #000 33%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 6.5%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 20%, #000 33%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 6.5%, #000 14%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
html body[data-dobra="08"] .placa-08 > svg { overflow: visible; }
html body[data-dobra="08"] .base-08 { mix-blend-mode: multiply; }
html body[data-dobra="08"] .aura-08 { fill: none; stroke: #ff2a3a; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: .1; filter: url(#d08-borrar); }
html body[data-dobra="08"] .ponto-halo-08 { fill: url(#d08-halo-vermelho); }
html body[data-dobra="08"] .ponto-08 { fill: #ff4652; }
html body[data-dobra="08"] .pulso-08 {
  fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 109; stroke-dashoffset: 6; opacity: 0;
  animation: d08-fluxo 9s linear infinite; animation-delay: var(--fase);
}
html body[data-dobra="08"] .pulso-08.halo { stroke: #ff2a3a; stroke-width: 14; stroke-opacity: .55; filter: url(#d08-borrar); }
html body[data-dobra="08"] .pulso-08.miolo { stroke: #ffffff; stroke-width: 3.2; }
/* Rack: gavetas piscando como atividade de disco, luz correndo pela faixa vertical, âmbar piscando devagar */
html body[data-dobra="08"] .led-08.atividade { opacity: 0; animation: d08-atividade var(--dur, 1.7s) steps(1, end) infinite; animation-delay: var(--fase); }
html body[data-dobra="08"] .led-08.varredura { opacity: 0; animation: d08-varre 2.6s linear infinite; animation-delay: var(--fase); }
html body[data-dobra="08"] .led-08.ambar { opacity: .15; animation: d08-ambar 3.4s steps(1, end) infinite; animation-delay: var(--fase); }
html body[data-dobra="08"] .led-08.canto { opacity: .15; animation: d08-led 6.5s ease-in-out infinite; animation-delay: var(--fase); }
@keyframes d08-fluxo {
  0% { stroke-dashoffset: 6; opacity: 0; }
  7% { opacity: .95; }
  74% { opacity: .95; }
  86%, 100% { stroke-dashoffset: -104; opacity: 0; }
}
@keyframes d08-led { 0%, 100% { opacity: .12; } 50% { opacity: .75; } }
@keyframes d08-atividade { 0% { opacity: .95; } 8% { opacity: 0; } 14% { opacity: .9; } 20% { opacity: 0; } 46% { opacity: .85; } 52% { opacity: 0; } 70% { opacity: .95; } 74%, 100% { opacity: 0; } }
@keyframes d08-varre { 0% { opacity: 0; } 4% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes d08-ambar { 0% { opacity: 1; } 30% { opacity: .15; } 55% { opacity: 1; } 62%, 100% { opacity: .15; } }

/* Piso: a base da imagem se desfaz no fundo da página */
html body[data-dobra="08"] .piso-08 { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(247, 247, 249, 0), #f7f7f9 85%); }

html body[data-dobra="08"] .cartoes-08 { z-index: 3; }
html body[data-dobra="08"] .cartao-08 {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .84); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 22px 44px -22px rgba(15, 23, 42, .38), 0 2px 8px rgba(15, 23, 42, .05);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  white-space: nowrap; font-family: var(--d08-body);
}
html body[data-dobra="08"] .cartao-08 i { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--d08-ok); color: #fff; box-shadow: 0 0 0 5px rgba(22, 163, 74, .12); }
html body[data-dobra="08"] .cartao-08 i svg { width: 17px; height: 17px; }
html body[data-dobra="08"] .cartao-08 b { display: block; font: 700 15.5px/1.2 var(--d08-body); color: var(--d08-ink); }
html body[data-dobra="08"] .cartao-08 small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--d08-muted); }
/* "Backup OK" nunca cobre o canto superior esquerdo do rack (LED do canto em 62,8% da largura): termina antes de 62% */
html body[data-dobra="08"] .cartao-08.backup { left: min(36.5%, calc(62% - 225px)); top: 16.5%; }
/* sinal de "ao vivo" no cartão do monitoramento: um anel verde que se expande e some a cada 2,4 s */
html body[data-dobra="08"] .cartao-08.monitor i { position: relative; }
html body[data-dobra="08"] .cartao-08.monitor i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html body[data-dobra="08"] .cartao-08.monitor i::after { animation: d08-farol 2.4s ease-out infinite; }
}
@keyframes d08-farol { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 75%, 100% { box-shadow: 0 0 0 11px rgba(22, 163, 74, 0); } }
/* Cartão do monitor: como na referência, ao lado do rack, 10 px depois da faixa vertical de LEDs (74,7% da imagem),
   sem cobrir as luzes; a posição da cena (--d08-l) garante o espaço. Nunca passa da borda direita da tela. */
html body[data-dobra="08"] .cartao-08.monitor { --mx: calc(75.06% + 10px); left: min(var(--mx), calc(100vw - var(--d08-l) - var(--d08-folga))); top: 36%; }

/* Botão de pausar: removido em 08/10/2026 a pedido de Bruno. Esta regra só esconde o botão nas cópias antigas da página
   que ainda estejam em cache (Cloudflare ou navegador) quando elas recebem este CSS; pode sair numa próxima publicação. */
html body[data-dobra="08"] .pausa-08 { display: none !important; }

/* Lâminas de luz vermelha: desligadas no refino visual (deixavam véu rosado atrás do título, dos botões e do
   canto do cabeçalho); a própria imagem já traz os vidros vermelhos ao fundo */
html body[data-dobra="08"] .laminas-08 { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; overflow: clip; }
html body[data-dobra="08"] .laminas-08 span { position: absolute; border-radius: 6px; mix-blend-mode: multiply; }
html body[data-dobra="08"] .laminas-08 .a { display: none; left: -12%; bottom: -28%; width: 62%; height: 70%; background: linear-gradient(115deg, rgba(255, 70, 85, 0) 30%, rgba(255, 70, 85, .14) 55%, rgba(255, 70, 85, 0) 80%); transform: skewX(-24deg); filter: blur(6px); }
html body[data-dobra="08"] .laminas-08 .b { display: none; left: 38%; top: -10%; width: 9%; height: 82%; background: linear-gradient(180deg, rgba(255, 60, 80, .16), rgba(255, 60, 80, 0)); transform: skewX(-18deg); filter: blur(3px); }
html body[data-dobra="08"] .laminas-08 .c { display: none; right: -4%; top: 0; width: 22%; height: 100%; background: linear-gradient(200deg, rgba(255, 92, 110, .12), rgba(255, 92, 110, 0) 60%); transform: skewX(-14deg); filter: blur(8px); }
html body[data-dobra="08"] #home.hero .vertical-08 {
  position: absolute !important; right: 26px; top: calc(var(--d08-topo) + 14px); z-index: 3; margin: 0 !important; max-width: none !important;
  color: #4f5868 !important; font: 600 12.5px/1.25 var(--d08-title) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8) !important;
}
html body[data-dobra="08"] #home.hero .vertical-08::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--d08-red); }

/* Destaque do título ("sem complicação") nunca quebra no meio */
html body[data-dobra="08"] #home.hero h1 .hl { white-space: nowrap; }

/* Entrada discreta e cartões flutuando */
@media (prefers-reduced-motion: no-preference) {
  html body[data-dobra="08"] .placa-imagem { animation: d08-entra 1s cubic-bezier(.2, .7, .2, 1) both; }
  html body[data-dobra="08"] .cartao-08.backup { animation: d08-aparece .7s .9s cubic-bezier(.2, .8, .2, 1) both, d08-boia 7s 1.6s ease-in-out infinite; }
  html body[data-dobra="08"] .cartao-08.monitor { animation: d08-aparece .7s 1.15s cubic-bezier(.2, .8, .2, 1) both, d08-boia 7s -2s ease-in-out infinite; }
}
@keyframes d08-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes d08-aparece { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes d08-boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Telas largas: a dobra cresce um pouco para a base da cena não ficar sob o piso */
@media (min-width: 1600px) {
  html body[data-dobra="08"] #home.hero { --d08-altura: clamp(720px, 100vh, 880px); }
}
@media (max-width: 1439.98px) {
  html body[data-dobra="08"] #home.hero .vertical-08 { display: none; }
}
/* Entre 1101 e ~1170 px a home publicada encosta logo e texto na borda (contêiner sem margem interna);
   aqui ganham 24 px de respiro, sem mudar a posição nas telas largas */
@media (min-width: 1100.02px) {
  html body[data-dobra="08"] header .container.topbar,
  html body[data-dobra="08"] #home.hero .inner { max-width: 1168px !important; padding-left: 24px !important; padding-right: 24px !important; }
}
/* Janelas de 901 a 1250 px: título no tamanho menor, para sobrar espaço para a cena */
@media (max-width: 1250px) and (min-width: 900.02px) {
  html body[data-dobra="08"] #home.hero { --d08-texto: 470px; }
  html body[data-dobra="08"] #home.hero h1 { font-size: 44px !important; max-width: 440px !important; }
  html body[data-dobra="08"] #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) { max-width: 420px !important; }
}
/* De 901 a 1100 px a cena grande continua (cortada à direita) e não há espaço ao lado do rack:
   o cartão "Monitoramento ativo" fica logo acima do rack, sobre a janela, sem cobrir as luzes */
@media (max-width: 1100px) and (min-width: 900.02px) {
  html body[data-dobra="08"] #home.hero { --d08-w: 92vw; --d08-l: 18vw; }
  html body[data-dobra="08"] .placa-08 { top: var(--d08-topo); }
  html body[data-dobra="08"] .cartao-08.backup { left: min(38%, calc(62% - 200px)); top: 15%; }
  html body[data-dobra="08"] .cartao-08.monitor { --mx: 60%; top: calc(2% + 6px); }
  /* cartões compactos: o do monitor cabe entre o cabeçalho e o topo do rack, mesmo flutuando */
  html body[data-dobra="08"] .cartao-08 { padding: 9px 14px 9px 9px; gap: 10px; border-radius: 14px; }
  html body[data-dobra="08"] .cartao-08 i { flex-basis: 26px; width: 26px; height: 26px; }
  html body[data-dobra="08"] .cartao-08 i svg { width: 14px; height: 14px; }
  html body[data-dobra="08"] .cartao-08 b { font-size: 14px; }
  html body[data-dobra="08"] .cartao-08 small { font-size: 11.5px; margin-top: 2px; }
}

/* Celular: texto, WhatsApp e acessos rápidos primeiro; depois a cena com os dois cartões sobre o piso e as garantias */
@media (max-width: 900px) {
  html body[data-dobra="08"] #home.hero { height: auto !important; display: block !important; overflow: visible !important; overflow-x: clip !important; padding: 100px 0 30px !important; background: #fff !important; }
  html body[data-dobra="08"] #home.hero .inner > div:first-child { max-width: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
  html body[data-dobra="08"] .laminas-08 .b,
  html body[data-dobra="08"] .laminas-08 .c,
  html body[data-dobra="08"] #home.hero .vertical-08,
  html body[data-dobra="08"] .piso-08 { display: none; }
  html body[data-dobra="08"] #home.hero .mobile-hero-kicker { font-size: 11.5px !important; margin-bottom: 14px !important; letter-spacing: .16em !important; white-space: normal !important; }
  html body[data-dobra="08"] #home.hero h1 { font-size: clamp(34px, 10.2vw, 44px) !important; line-height: 1.04 !important; max-width: none !important; }
  html body[data-dobra="08"] #home.hero .inner > div:first-child > p:not(.mobile-hero-kicker) { font-size: 16.5px !important; margin-top: 16px !important; max-width: none !important; }
  html body[data-dobra="08"] .cena-08 { position: relative; inset: auto; z-index: 1; height: 0; padding-top: 104%; margin: 22px calc(-1 * clamp(20px, 5vw, 36px)) 0; width: auto; }
  html body[data-dobra="08"] .placa-08 { width: 160%; left: -50%; top: -13%; }
  html body[data-dobra="08"] .placa-imagem img { -webkit-mask-image: none; mask-image: none; }
  html body[data-dobra="08"] .cartoes-08 { width: auto; aspect-ratio: auto; inset: auto 12px 16px 12px; display: flex; justify-content: center; gap: 8px; }
  html body[data-dobra="08"] .cartoes-08 .cartao-08 { position: relative; left: auto; top: auto; padding: 8px 12px 8px 8px; gap: 8px; border-radius: 12px; }
  html body[data-dobra="08"] .cartao-08 i { flex-basis: 24px; width: 24px; height: 24px; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
  html body[data-dobra="08"] .cartao-08 i svg { width: 13px; height: 13px; }
  html body[data-dobra="08"] .cartao-08 b { font-size: 12px; }
  html body[data-dobra="08"] .cartao-08 small { font-size: 10.5px; margin-top: 1px; }
  html body[data-dobra="08"] #home.hero .quick { margin-top: 18px !important; }
  html body[data-dobra="08"] #home.hero .quick .mobile-hero-cta { background: var(--d08-red) !important; color: #fff !important; }
  html body[data-dobra="08"] #home.hero .mobile-trust-note { color: var(--d08-muted) !important; }
  html body[data-dobra="08"] #home.hero .mobile-hero-secondary { color: #34445e !important; background: #fff !important; border-color: #dce1eb !important; }
  html body[data-dobra="08"] #home.hero .garantias-08 { gap: 10px 0; width: auto; max-width: none; margin: 22px 0 0; font-size: 13px; }
  html body[data-dobra="08"] #home.hero .garantias-08 li { padding-right: 12px; margin-right: 12px; }
  html body[data-dobra="08"] #home.hero .garantias-08 svg { width: 18px; height: 18px; flex-basis: 18px; }
}
/* Tablet: a cena não precisa do mesmo zoom do celular */
@media (min-width: 600px) and (max-width: 900px) {
  html body[data-dobra="08"] #home.hero .mobile-trust-note { width: min(370px, 100%) !important; align-self: flex-start !important; }
  html body[data-dobra="08"] .cena-08 { padding-top: 74%; }
  html body[data-dobra="08"] .placa-imagem { width: 118%; left: -17%; top: -9%; }
}
/* Celular e tablet estreito: as três garantias lado a lado, ícone em cima (em linha elas quebravam com divisórias soltas) */
@media (max-width: 700px) {
  html body[data-dobra="08"] #home.hero .garantias-08 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 20px; text-align: center; font-size: 12.5px; line-height: 1.25; }
  html body[data-dobra="08"] #home.hero .garantias-08 li { flex-direction: column; justify-content: flex-start; gap: 7px; min-width: 0; padding: 2px 6px; margin: 0; }
  html body[data-dobra="08"] #home.hero .garantias-08 svg { width: 20px; height: 20px; flex-basis: 20px; }
}
@media (max-width: 360px) {
  html body[data-dobra="08"] .cartoes-08 { gap: 6px; inset: auto 8px 16px 8px; }
  html body[data-dobra="08"] .cartao-08 small { display: none; }
  html body[data-dobra="08"] .cartoes-08 .cartao-08 b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-dobra="08"] .pulso-08 { display: none; }
  html body[data-dobra="08"] .led-08 { animation: none !important; opacity: .35 !important; }
  html body[data-dobra="08"] .cartao-08 { animation: none !important; }
  html body[data-dobra="08"] .scroll-dots { transition: none; }
}