/* =====================================================================
   DIGITAL STUDIOS — Website Visual Identity V2 (direção da capa aprovada)
   ---------------------------------------------------------------------
   Navy profundo · gradientes teal · profundidade cinematográfica ·
   objetos realistas · composição premium.

   Camada de tema: carregada DEPOIS de tokens/base/components/pages.
   Não altera estrutura nem funcionalidades. Remover o <link> repõe a V1.

   Âmbito:
   - html[data-identity="v2"]          → marca global (cabeçalho, rodapé, botões)
   - body[data-surface="dark"]         → homepage, landing pages, catálogo, Finder
   - body[data-surface="light"]        → My Learning (área de aprendizagem mantém-se clara)

   Luz ambiente ≠ Signature Glow:
   - Luz ambiente: gradientes teal de cena, sem halo à volta de componentes.
   - Signature Glow (.sig-glow): continua exclusivo de destaques importantes
     e estados efetivamente concluídos.
   ===================================================================== */

:root[data-identity="v2"] {
  /* Paleta calibrada sobre o logótipo e a capa oficiais */
  --brand-base: #001331;      /* navy mais profundo da capa (fundo do logótipo) */
  --brand-haze: #004763;      /* névoa azul-petróleo da capa */
  --brand-light: #05FAF5;     /* núcleo teal mais intenso da impressão digital */
  --abyss: #000F2A;
  --navy-deep: #041237;
  --grad-teal: linear-gradient(118deg, #13D0D3 0%, #10B4CF 40%, #1A86CC 100%);
  --grad-teal-soft: linear-gradient(118deg, rgba(19, 208, 211, 0.20) 0%, rgba(26, 134, 204, 0.08) 100%);
  --grad-surface: linear-gradient(180deg, #102661 0%, #0A1B4C 100%);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --metal: linear-gradient(135deg, #A9B4CB 0%, #4A5674 22%, #D7DEEB 48%, #2C3550 74%, #8F9BB5 100%);
}

/* ---------- Superfícies escuras: redefinição de tokens ---------- */
[data-identity="v2"] body[data-surface="dark"] {
  color-scheme: dark;
  --page: #011635;
  --surface: #0B1C4E;
  --mist: #0D2258;
  --mist-2: #152C6C;
  --line: rgba(166, 192, 255, 0.16);
  --ink: #EEF3FF;
  --ink-2: #B6C4E6;
  --ink-3: #93A3CC;
  --fg-strong: #EEF3FF;
  --fill-strong: #183C93;
  --on-fill: #FFFFFF;
  --control: #13D0D3;
  --teal-ink: #36DCDF;
  --ok: #45D998;
  --warn: #F2C46D;
  --info: #9DB2FF;
  --depth-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 14px 30px -16px rgba(0, 0, 0, 0.75);
  --depth-2: 0 1px 0 rgba(0, 0, 0, 0.3), 0 30px 50px -26px rgba(0, 0, 0, 0.85), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
  --depth-3: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 18px 30px -16px rgba(0, 0, 0, 0.7);
  background: var(--page);
}

/* Cena cinematográfica fixa: luz-chave teal, contraluz azul, vinheta e grão */
[data-identity="v2"] body[data-surface="dark"] { position: relative; }
/* Absoluta (não fixa): a luz acompanha a página inteira, sem cortes ao fazer scroll ou em capturas */
[data-identity="v2"] body[data-surface="dark"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 38% at 80% 4%, rgba(0, 71, 99, 0.85) 0%, transparent 72%),
    radial-gradient(45% 30% at 18% 30%, rgba(0, 63, 98, 0.35) 0%, transparent 70%),
    radial-gradient(60% 40% at 92% 70%, rgba(0, 63, 98, 0.30) 0%, transparent 70%),
    radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(0, 8, 26, 0.7) 100%),
    linear-gradient(180deg, #001A3E 0%, #001331 40%, #011635 70%, #000F2A 100%);
}
[data-identity="v2"] body[data-surface="dark"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Faixas: continuidade da cena em vez de blocos planos ---------- */
[data-identity="v2"] body[data-surface="dark"] .band,
[data-identity="v2"] body[data-surface="dark"] .band--navy,
[data-identity="v2"] body[data-surface="dark"] .band--deep { background: transparent; }
[data-identity="v2"] body[data-surface="dark"] .band--mist {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  border-block: 1px solid rgba(166, 192, 255, 0.07);
}
[data-identity="v2"] body[data-surface="dark"] .b2b-teaser,
[data-identity="v2"] body[data-surface="dark"] .sol-hero,
[data-identity="v2"] body[data-surface="dark"] .pd-hero,
[data-identity="v2"] body[data-surface="dark"] .cat-hero {
  background: radial-gradient(70% 120% at 85% 0%, rgba(19, 208, 211, 0.12), transparent 60%);
}
[data-identity="v2"] body[data-surface="dark"] .cat-hero { border-bottom-color: var(--line); }
[data-identity="v2"] .hero__grid-bg, [data-identity="v2"] .finder__grid-bg { opacity: 0.55; }

/* ---------- Marca global ---------- */
[data-identity="v2"] .ribbon { background: var(--abyss); }
[data-identity="v2"] .hdr {
  background: rgba(0, 19, 49, 0.82); backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 0; box-shadow: 0 1px 0 rgba(166, 192, 255, 0.10);
}
[data-identity="v2"] .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(19, 208, 211, 0.45), transparent); }
[data-identity="v2"] .hdr__link.is-active, [data-identity="v2"] .hdr__learn.is-active { box-shadow: inset 0 -2px 0 #13D0D3; }
[data-identity="v2"] .ftr { background: linear-gradient(180deg, transparent, var(--abyss) 30%); border-top: 1px solid rgba(166, 192, 255, 0.08); }
[data-identity="v2"] body[data-surface="light"] .ftr { background: var(--abyss); }

/* Botão principal com gradiente teal (texto navy, contraste AA) */
[data-identity="v2"] .btn--teal {
  background: var(--grad-teal); color: #04123A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #0B6F9E, 0 16px 26px -16px rgba(0, 0, 0, 0.8);
}
[data-identity="v2"] .btn--teal:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 0 #0B6F9E, 0 18px 30px -16px rgba(0, 0, 0, 0.85); }
[data-identity="v2"] .btn--ghost-light, [data-identity="v2"] body[data-surface="dark"] .btn--line {
  background: rgba(255, 255, 255, 0.04); border-color: rgba(166, 192, 255, 0.30); color: #EEF3FF; backdrop-filter: blur(6px);
}
[data-identity="v2"] body[data-surface="dark"] .btn--navy { background: #183C93; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 #0A1D52; }

/* Texto com gradiente: apenas em frases-chave dos títulos */
[data-identity="v2"] .grad-text {
  color: #13D0D3; background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-identity="v2"] h1 { letter-spacing: -0.04em; }

/* ---------- Superfícies de componentes (vidro escuro, luz de aresta) ---------- */
[data-identity="v2"] body[data-surface="dark"] :is(.need, .sol-card, .prod-card, .gnode--p, .pp, .tab:not(.is-on), .process__i, .rq, .empty, .seg, .chip:not(.is-on), .layer:not(.layer--nucleo), .apill, .path, .buy, .track, .bundle__i, .pp__item, .review) {
  background: var(--grad-surface);
  box-shadow: var(--edge-light), var(--depth-1);
}
[data-identity="v2"] body[data-surface="dark"] :is(.need, .sol-card, .prod-card, .pp__item, .bundle__i, .gnode--p):hover {
  border-color: rgba(19, 208, 211, 0.45);
  box-shadow: var(--edge-light), var(--depth-2);
}
[data-identity="v2"] body[data-surface="dark"] .prod-card::before { background: #0E2257; }
[data-identity="v2"] body[data-surface="dark"] :is(.tab.is-on, .chip.is-on, .seg__b.is-on) {
  background: linear-gradient(180deg, #1D45A3, #15357F); box-shadow: inset 0 0 0 1px rgba(19, 208, 211, 0.45), var(--depth-1);
}
[data-identity="v2"] body[data-surface="dark"] .tab.is-on .tab__n { color: #36DCDF; }
[data-identity="v2"] body[data-surface="dark"] .layer--nucleo { background: linear-gradient(180deg, #1D45A3, #15357F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 0 #071440, var(--depth-2); }
[data-identity="v2"] body[data-surface="dark"] .gnode--s { background: linear-gradient(180deg, #1D45A3, #15357F); box-shadow: var(--edge-light); }
[data-identity="v2"] body[data-surface="dark"] .fmt { background: #071747; box-shadow: inset 0 0 0 1px rgba(166, 192, 255, 0.18); }
[data-identity="v2"] body[data-surface="dark"] .pp__g, [data-identity="v2"] body[data-surface="dark"] .route__g { background: linear-gradient(145deg, #1D45A3, #0B1F57); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
[data-identity="v2"] body[data-surface="dark"] .select {
  background-image: linear-gradient(45deg, transparent 50%, #B6C4E6 50%), linear-gradient(135deg, #B6C4E6 50%, transparent 50%);
}
[data-identity="v2"] body[data-surface="dark"] .select option, [data-identity="v2"] body[data-surface="dark"] .select optgroup { background: #0B1C4E; color: #EEF3FF; }
[data-identity="v2"] body[data-surface="dark"] .search input { background: rgba(11, 28, 78, 0.85); backdrop-filter: blur(8px); }
[data-identity="v2"] body[data-surface="dark"] .ba__col--after { background: var(--grad-teal-soft), #0C2463; box-shadow: inset 0 0 0 1px rgba(19, 208, 211, 0.30); }
[data-identity="v2"] body[data-surface="dark"] .outcome { background: radial-gradient(80% 140% at 0% 0%, rgba(19, 208, 211, 0.14), transparent 60%), #0C2463; }
[data-identity="v2"] body[data-surface="dark"] .fres { background: radial-gradient(90% 120% at 100% 0%, rgba(19, 208, 211, 0.12), transparent 60%), #0C2463; }
[data-identity="v2"] body[data-surface="dark"] .confirm { background: #0C2463; }
[data-identity="v2"] body[data-surface="dark"] .modal__scrim { background: rgba(1, 6, 24, 0.72); }
[data-identity="v2"] body[data-surface="dark"] .modal__box { background: linear-gradient(180deg, #112866, #0A1B4C); box-shadow: var(--edge-light), var(--depth-3); border: 1px solid var(--line); }
[data-identity="v2"] body[data-surface="dark"] .tech pre { background: #020A22; }
[data-identity="v2"] body[data-surface="dark"] .notice { background: rgba(255, 255, 255, 0.04); }
[data-identity="v2"] body[data-surface="dark"] .grid-3--dark .sol-card { background: var(--grad-surface); }

/* ---------- Homepage: hero cinematográfico com objeto realista ---------- */
[data-identity="v2"] .hero { padding-block: var(--s-8) calc(var(--s-8) + 16px); }
[data-identity="v2"] .hero::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 71, 99, 0.75), transparent 72%);
}
[data-identity="v2"] .hero h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); max-width: 12ch; }
[data-identity="v2"] .hero__facts { border-top-color: rgba(166, 192, 255, 0.14); }
[data-identity="v2"] .hero__facts dt { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Tablet realista: aresta metálica, vidro preto, ecrã com reflexo e luz de chão */
.device { position: relative; perspective: 2000px; padding-bottom: 44px; }
.device__frame { position: relative; padding: 2px; border-radius: 30px; background: var(--metal, #8F9BB5);
  transform: rotateY(-15deg) rotateX(6deg) rotateZ(0.6deg); transform-origin: 40% 50%;
  box-shadow: 0 70px 90px -50px rgba(0, 0, 0, 0.95), 0 30px 40px -30px rgba(0, 0, 0, 0.85), -30px 40px 80px -40px rgba(0, 0, 0, 0.6); }
.device__bezel { position: relative; padding: 14px; border-radius: 28px; background: linear-gradient(150deg, #10141F, #04060B 55%, #0C111C); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.device__bezel::before { content: ""; position: absolute; top: 50%; left: 6px; width: 4px; height: 4px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #3A4A6A, #0A0E16); }
.device__display { position: relative; overflow: hidden; border-radius: 16px; padding: 14px 16px 18px;
  background: radial-gradient(110% 80% at 90% 0%, rgba(19, 208, 211, 0.22), transparent 55%), linear-gradient(165deg, #0D2A78 0%, #071A52 50%, #04103A 100%); }
.device__display::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 27%, transparent 100%); }
.device__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 11px; color: rgba(214, 226, 255, 0.7); }
.device__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(214, 226, 255, 0.28); }
.device__url { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); letter-spacing: 0.02em; }
.device::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 60px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent), radial-gradient(closest-side, rgba(19, 208, 211, 0.16), transparent 80%);
  background-size: 80% 50%, 100% 100%; background-position: 50% 30%, 50% 50%; background-repeat: no-repeat; filter: blur(2px); }
.device .stack { perspective: none; gap: 10px; }
.device .plane { transform: translateX(calc(var(--i) * 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 14px 22px -14px rgba(0, 0, 0, 0.8); padding: 14px 18px; }
.device .plane--need { background: rgba(4, 16, 54, 0.78); }
.device .plane--sol { background: rgba(29, 69, 163, 0.55); border-color: rgba(19, 208, 211, 0.35); }
.device .plane--prod { background: rgba(254, 254, 254, 0.96); }
.device .plane::after { bottom: -11px; height: 11px; }
@media (max-width: 980px) { .device__frame { transform: rotateY(-8deg) rotateX(4deg); } }
@media (max-width: 640px) { .device__frame { transform: none; } .device__bezel { padding: 8px; } .device .plane { transform: none; } }

/* Objetos de vidro realistas (três formas de resolver) */
.obj { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; color: #13D0D3; flex: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(19, 208, 211, 0.10) 100%), #0D2563;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -14px 22px rgba(2, 10, 34, 0.55), 0 22px 30px -14px rgba(0, 0, 0, 0.8);
  transform: rotate(-4deg); }
.obj::before { content: ""; position: absolute; inset: 6px 30% auto 10%; height: 30%; border-radius: 16px 16px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent); pointer-events: none; }
.obj::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -16px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.obj .glyph { width: 36px; height: 36px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.path__head { display: flex; align-items: center; gap: var(--s-4); }
[data-identity="v2"] body[data-surface="dark"] .path { border-color: rgba(166, 192, 255, 0.14); }

/* ---------- Ficha de produto: objeto em vidro e alumínio ---------- */
[data-identity="v2"] .pobj { padding-bottom: 30px; }
[data-identity="v2"] .pobj__face {
  background: radial-gradient(90% 60% at 80% 0%, rgba(19, 208, 211, 0.22), transparent 60%), linear-gradient(160deg, #1D47A8 0%, #0C2464 45%, #051238 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 60px 80px -40px rgba(0, 0, 0, 0.95), 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}
[data-identity="v2"] .pobj__face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 31%); }
[data-identity="v2"] .pobj__layer--2 { background: var(--metal); opacity: 0.9; }
[data-identity="v2"] .pobj__layer--3 { background: #020A22; opacity: 0.9; }
[data-identity="v2"] .pobj__glyph { background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(19, 208, 211, 0.10)); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
[data-identity="v2"] .pobj::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent), radial-gradient(closest-side, rgba(19, 208, 211, 0.14), transparent);
  background-size: 76% 50%, 100% 100%; background-position: 50% 40%, 50% 50%; background-repeat: no-repeat; }
[data-identity="v2"] .pobj__title { font-size: 1.75rem; }
[data-identity="v2"] body[data-surface="dark"] .pd-outcome { background: var(--grad-teal-soft), #0C2463; box-shadow: inset 0 0 0 1px rgba(19, 208, 211, 0.22); }
[data-identity="v2"] body[data-surface="dark"] .incl li::before { background-color: #183C93; }

/* ---------- Landing de solução e empresas: placas de vidro ---------- */
[data-identity="v2"] .metric.slab--dark, [data-identity="v2"] .track.slab--dark {
  background: linear-gradient(160deg, rgba(37, 82, 190, 0.55), rgba(10, 30, 86, 0.75)); backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--slab) var(--slab) 0 -1px #071440, var(--depth-3);
}
[data-identity="v2"] .metric__to { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-identity="v2"] .biz-hero { background: radial-gradient(60% 90% at 90% 20%, rgba(19, 208, 211, 0.13), transparent 65%); }

/* ---------- Catálogo ---------- */
[data-identity="v2"] body[data-surface="dark"] .cat__filters { scrollbar-color: #183C93 transparent; }
[data-identity="v2"] body[data-surface="dark"] .check__n, [data-identity="v2"] body[data-surface="dark"] .gnode__n { background: rgba(255, 255, 255, 0.07); }
[data-identity="v2"] body[data-surface="dark"] .mini-glyph { background: #0A1D55; color: #36DCDF; border-color: rgba(166, 192, 255, 0.18); }

/* ---------- Acessibilidade e desempenho ---------- */
@media (prefers-reduced-transparency: reduce) {
  [data-identity="v2"] .hdr, [data-identity="v2"] .search input, [data-identity="v2"] .btn--ghost-light, [data-identity="v2"] .metric, [data-identity="v2"] .track { backdrop-filter: none; }
}
@media (forced-colors: active) {
  [data-identity="v2"] .grad-text, [data-identity="v2"] .metric__to, [data-identity="v2"] .hero__facts dt { -webkit-text-fill-color: currentColor; background: none; }
}

/* Placa de produtos (superfície clara dentro do ecrã): manter tokens claros */
[data-identity="v2"] .plane--prod { --mist: #EEF3FA; --line: #D5DEED; color: #081E55; }
[data-identity="v2"] .plane--prod .pchip { color: #081E55; }
[data-identity="v2"] .plane--prod .pchip .glyph { color: #081E55; }
[data-identity="v2"] .plane--prod .plane__k { color: #067F82; }

/* Correções transversais (pesquisa, cabeçalho em ecrãs pequenos) */
.search svg { z-index: 1; pointer-events: none; }
.hdr__link { white-space: nowrap; }
@media (max-width: 560px) {
  .hdr .hdr__cta { display: none; }
  .ribbon__in { font-size: 11px; gap: 2px; }
}

/* ---------- Logótipo oficial (recursos em assets/brand, imagens intactas) ---------- */
.logo--official { gap: 12px; }
.logo--official .logo__fp { height: 48px; width: auto; }
.logo--official .logo__wm { height: 40px; width: auto; }
.logo--stacked img { display: block; height: 168px; width: auto; margin-left: -18px; }
[data-identity="v2"] .ftr__mission { margin-top: var(--s-2); }
@media (max-width: 560px) { .logo--official .logo__fp { height: 36px; } .logo--official .logo__wm { height: 30px; } }
/* Nota: as imagens trazem o brilho original e foram separadas sobre o navy da capa;
   o cabeçalho e o rodapé usam esse navy (--brand-base) para reproduzir o original. */
[data-identity="v2"] .ftr { background: linear-gradient(180deg, transparent, var(--brand-base) 26%); }
[data-identity="v2"] body[data-surface="light"] .ftr { background: var(--brand-base); }

/* ---------- Linha de luz da capa (recurso gráfico; uma vez, na base do hero) ---------- */
.hero__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; pointer-events: none; opacity: 0.9; }
@media (max-width: 640px) { .hero__wave { height: 60px; } }