@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==================================================
   DIGITAL BUNKR — STYLE V2 REVISADO
   ================================================== */

:root {
    --bg: #0b0c0e;
    --bg-deep: #08090b;
    --bg-soft: #101215;
    --surface: #16181c;
    --surface-2: #1d2025;
    --surface-3: #20242a;
    --steel: #2a3037;
    --line: rgba(255, 255, 255, 0.105);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #f4f6f8;
    --muted: #b2b9c0;
    --muted-2: #8c949c;
    --blue: #33aaf2;
    --blue-light: #72cbff;
    --blue-deep: #136eaa;
    --green: #68f7aa;
    --danger: #ff6378;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --container: 1360px;
    --header-height: 92px;
    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 34px;
    --shadow-sm: 0 18px 45px rgba(0, 0, 0, 0.26);
    --shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --transition: .42s var(--ease);
}

/* ==================================================
   RESET E BASE
   ================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    color-scheme: dark;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(rgba(11, 12, 14, .72), rgba(11, 12, 14, .82)),
        url("assets/concreto.jpg") center / cover no-repeat;
    opacity: .42;
    transform: translateZ(0);
}

body::after {
    content: "";
    position: fixed;
    z-index: -2;
    top: -340px;
    right: -300px;
    width: 920px;
    height: 920px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(51, 170, 242, .2), transparent 70%);
    filter: blur(90px);
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
}

h1 {
    font-size: clamp(4rem, 8vw, 7.4rem);
}

h2 {
    font-size: clamp(2.7rem, 5.4vw, 5.1rem);
}

h3 {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
}

h4 {
    font-size: 1rem;
}

p {
    margin-bottom: 0;
    max-width: 65ch;
    color: var(--muted);
    font-size: 1.04rem;
}

::selection {
    background: rgba(51, 170, 242, .34);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #08090a;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #08090a;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

/* ==================================================
   LAYOUT GLOBAL
   ================================================== */

main {
    position: relative;
    overflow: clip;
}

.container {
    position: relative;
    width: min(92%, var(--container));
    margin-inline: auto;
}

.container::before,
.container::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: rgba(255, 255, 255, .025);
}

.container::before { left: 0; }
.container::after { right: 0; }

.section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(112px, 11vw, 190px) 0;
}

.section > .container {
    z-index: 2;
}

.section::after {
    content: "";
    position: absolute;
    top: 82px;
    left: 0;
    width: 140px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--blue), transparent);
    opacity: .45;
}

.section-noise,
.section-grid,
.hero-noise,
.hero-grid,
.hero-glow,
.hero-gradient,
.cta-noise,
.cta-grid,
.cta-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-noise,
.section-noise,
.cta-noise {
    opacity: .05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: noiseShift 9s steps(2, end) infinite;
}

.hero-grid,
.section-grid,
.cta-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 88px 88px;
}

.hero-grid,
.cta-grid {
    opacity: .1;
    -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 96%);
    mask-image: radial-gradient(circle at center, #000 30%, transparent 96%);
}

.section-grid {
    opacity: .052;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    animation: gridDrift 34s linear infinite;
}

.section-tag {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 38px;
    color: var(--muted-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.tag-line {
    width: 58px;
    height: 1px;
    background: var(--blue);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.section-header {
    display: grid;
    grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
    align-items: end;
    gap: clamp(36px, 6vw, 88px);
    margin-bottom: clamp(62px, 8vw, 104px);
}

.section-header h2 {
    max-width: 1000px;
}

/* ==================================================
   HEADER
   ================================================== */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.header-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-bottom: 1px solid transparent;
    background: rgba(7, 7, 7, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: inherit;
}

.site-header.scrolled .header-backdrop {
    border-color: var(--line);
    background: rgba(7, 7, 7, .78);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
}

.header-wrapper {
    display: flex;
    align-items: center;
    gap: 44px;
    min-height: var(--header-height);
    transition: min-height var(--transition);
}

.site-header.scrolled .header-wrapper {
    min-height: 74px;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.brand-logo {
    width: auto;
    height: 37px;
    object-fit: contain;
    transition: height var(--transition), opacity .3s ease;
}

.brand:hover .brand-logo {
    opacity: .88;
}

.site-header.scrolled .brand-logo {
    height: 32px;
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 38px);
}

.main-nav a {
    position: relative;
    display: inline-flex;
    padding: 10px 0;
    color: rgba(244, 246, 248, .76);
    font-size: .9rem;
    font-weight: 500;
    transition: color .3s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .38s var(--ease);
}

.main-nav a:hover,
.main-nav a.is-active {
    color: #fff;
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-actions {
    flex: none;
}

.menu-toggle {
    position: relative;
    display: none;
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 1px;
    background: #fff;
    transition: transform .35s var(--ease), opacity .25s ease;
}

.menu-toggle span { transform: translate(-50%, -50%); }
.menu-toggle::before { transform: translate(-50%, calc(-50% - 6px)); }
.menu-toggle::after { transform: translate(-50%, calc(-50% + 6px)); }
.menu-toggle.is-open span { opacity: 0; }
.menu-toggle.is-open::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle.is-open::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==================================================
   BOTÕES
   ================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 32px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition), color var(--transition);
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 82%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
    transition: left .78s var(--ease);
}

.btn:hover::before {
    left: 145%;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue-light), var(--blue));
    color: #031018;
    box-shadow: 0 14px 42px rgba(51, 170, 242, .22);
}

.btn-primary:hover {
    box-shadow: 0 20px 58px rgba(51, 170, 242, .34);
}

.btn-secondary,
.btn-outline {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.btn-secondary:hover,
.btn-outline:hover {
    border-color: rgba(51, 170, 242, .48);
    background: rgba(51, 170, 242, .06);
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform .32s ease;
}

.btn:hover svg {
    transform: translateX(4px);
}

/* ==================================================
   HERO
   ================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    padding: calc(var(--header-height) + 72px) 0 92px;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero-glow {
    background:
        radial-gradient(circle at 74% 28%, rgba(51, 170, 242, .34), transparent 46%),
        radial-gradient(ellipse at 20% 12%, rgba(255, 244, 224, .09), transparent 54%),
        radial-gradient(circle at 18% 82%, rgba(51, 170, 242, .12), transparent 52%);
    filter: blur(72px);
    animation: glowFloat 13s ease-in-out infinite;
}

.hero-gradient {
    background:
        linear-gradient(90deg, rgba(11, 12, 14, .2) 0%, transparent 54%),
        linear-gradient(180deg, transparent, rgba(11, 12, 14, .42));
}

.hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(360px, .76fr);
    align-items: center;
    gap: clamp(64px, 9vw, 150px);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content::before {
    content: "DIGITAL";
    position: absolute;
    z-index: -1;
    top: -104px;
    left: -12px;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(110px, 17vw, 250px);
    font-weight: 700;
    line-height: .8;
    opacity: .03;
    pointer-events: none;
    user-select: none;
}

.hero-system {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 34px;
    padding: 10px 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: rgba(244, 246, 248, .76);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.system-dot,
.status,
.online {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 16px rgba(104, 247, 170, .8);
    animation: pulse 2.3s ease-in-out infinite;
}

.hero-title {
    max-width: 920px;
}

.hero-title span {
    display: block;
    background: linear-gradient(90deg, var(--blue-light), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-description {
    max-width: 600px;
    margin-top: 34px;
    font-size: 1.1rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 48px;
}

/* Uma linha só, com quantas métricas houver. Em flex a quebra saía do
   comprimento da legenda e dava 2+1 em onze páginas; aqui a coluna manda. */
.hero-metrics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 26px clamp(22px, 2.4vw, 40px);
    margin-top: 72px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

/* Quatro métricas em coluna estreita ficam com 130px cada e a legenda vira
   uma torre. Aí, e só aí, viram 2x2 — três continuam cabendo numa linha, e é
   isso que evita o 2+1. Abaixo de 620px a regra do mobile empilha as duas. */
@media (max-width: 1099px) {
    .hero-metrics:has(article:nth-child(4)) {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero-metrics article {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-metrics strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
}

.hero-metrics span {
    color: var(--muted-2);
    font-size: .83rem;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
}

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% -8% -7% 12%;
    border: 1px solid rgba(51, 170, 242, .18);
    border-radius: var(--radius-lg);
    transform: rotate(2.5deg);
}

.hero-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(30, 34, 39, .96), rgba(11, 13, 15, .98));
    box-shadow: var(--shadow);
    animation: frameFloat 8s ease-in-out infinite;
}

.frame-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    color: rgba(244, 246, 248, .7);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.frame-content {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.frame-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.92) contrast(1.06) saturate(.86);
    transform: scale(1.03);
}

.frame-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 22%, rgba(51, 170, 242, .16), transparent 36%),
        linear-gradient(180deg, transparent 52%, rgba(6, 7, 9, .42));
}

.frame-blueprint {
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.frame-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.frame-footer div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 19px 18px;
    border-right: 1px solid var(--line);
    color: var(--muted-2);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.frame-footer div:last-child {
    border-right: 0;
}

.frame-footer strong {
    overflow: hidden;
    color: var(--text);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    color: var(--muted-2);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .23em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero-scroll::after {
    content: "";
    width: 1px;
    height: 50px;
    background: linear-gradient(var(--blue), transparent);
    animation: scrollLine 2.5s ease-in-out infinite;
}

/* ==================================================
   CARDS E INTERAÇÕES GLOBAIS
   ================================================== */

.manifesto-card,
.service-card,
.timeline-item,
.case-card,
.tech-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.manifesto-card::before,
.service-card::before,
.timeline-item::before,
.tech-card::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(51, 170, 242, .12), transparent 68%);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .35s ease;
}

.manifesto-card:hover,
.service-card:hover,
.timeline-item:hover,
.tech-card:hover {
    border-color: rgba(51, 170, 242, .24);
    box-shadow: var(--shadow-sm);
    transform: translateY(-8px);
}

.manifesto-card:hover::before,
.service-card:hover::before,
.timeline-item:hover::before,
.tech-card:hover::before {
    opacity: 1;
}

/* ==================================================
   MANIFESTO
   ================================================== */

.manifesto {
    background: linear-gradient(180deg, rgba(9, 10, 11, .98), rgba(6, 7, 8, .98));
}

.manifesto::before,
.services::before,
.process::before,
.cases::before,
.technology::before {
    position: absolute;
    top: 44px;
    right: 3%;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(92px, 13vw, 190px);
    font-weight: 700;
    line-height: .8;
    opacity: .028;
    pointer-events: none;
    user-select: none;
}

.manifesto::before { content: "SYSTEM"; }
.services::before { content: "SERVICES"; }
.process::before { content: "FLOW"; }
.cases::before { content: "CASES"; }
.technology::before { content: "TECH"; }

.manifesto-content {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    align-items: start;
    gap: clamp(60px, 9vw, 138px);
}

.manifesto-left {
    position: sticky;
    top: 120px;
}

.lead {
    max-width: 31ch;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.025em;
}

.manifesto-right {
    display: grid;
    gap: 24px;
}

.manifesto-card {
    padding: clamp(34px, 4vw, 54px);
}

.manifesto-card:nth-child(2) {
    margin-left: clamp(0px, 4vw, 56px);
}

.manifesto-card:nth-child(3) {
    margin-left: clamp(0px, 8vw, 112px);
}

.manifesto-card > * {
    position: relative;
    z-index: 1;
}

.manifesto-card > span {
    color: var(--blue);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
}

.manifesto-card h3 {
    margin-top: 18px;
}

.manifesto-card p {
    margin-top: 18px;
}

/* ==================================================
   SERVIÇOS
   ================================================== */

.services {
    background: linear-gradient(180deg, #070707, #090a0b);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.service-card {
    min-height: 330px;
    padding: clamp(32px, 4vw, 48px);
}

.service-card:nth-child(1) { grid-column: span 7; }
.service-card:nth-child(2) { grid-column: span 5; }
.service-card:nth-child(3) { grid-column: span 4; }
.service-card:nth-child(4) { grid-column: span 8; }
.service-card:nth-child(5) { grid-column: span 6; }
.service-card:nth-child(6) { grid-column: span 6; }

.service-card > * {
    position: relative;
    z-index: 1;
}

.service-number {
    display: block;
    margin-bottom: clamp(50px, 7vw, 84px);
    color: rgba(244, 246, 248, .15);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.service-card h3 {
    margin-bottom: 16px;
}

.service-card p {
    max-width: 46ch;
}

/* ==================================================
   PROCESSO
   ================================================== */

.process {
    background: linear-gradient(180deg, #090a0b, #070707);
}

.timeline {
    display: grid;
    gap: 18px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 38px;
    min-height: 170px;
    padding: 36px 44px;
}

.timeline-item > * {
    position: relative;
    z-index: 1;
}

.timeline-index {
    color: rgba(244, 246, 248, .15);
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
}

.timeline-content h3 {
    margin-bottom: 12px;
}

.timeline-content p {
    max-width: 58ch;
}

.timeline-item:hover {
    transform: translateX(10px);
}

/* ==================================================
   CASES
   ================================================== */

.cases {
    background: linear-gradient(180deg, #070707, #0a0b0c);
}

.cases-list {
    display: grid;
    gap: 34px;
}

.case-card {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(280px, .76fr) 190px;
    min-height: 520px;
    background: #141719;
}

.case-card:hover {
    border-color: rgba(51, 170, 242, .22);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
}

.case-card:nth-child(even) {
    grid-template-columns: 190px minmax(280px, .76fr) minmax(0, 1.42fr);
}

.case-card:nth-child(even) .case-media {
    grid-column: 3;
    grid-row: 1;
}

.case-card:nth-child(even) .case-content {
    grid-column: 2;
    grid-row: 1;
}

.case-card:nth-child(even) .case-metric {
    grid-column: 1;
    grid-row: 1;
}

.case-media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
}

.case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.84) contrast(1.06) saturate(.9);
    transform: scale(1.02);
    transition: transform 1.15s var(--ease-out), filter .75s ease;
}

.case-card:hover .case-media img {
    filter: brightness(.98) contrast(1.03) saturate(1);
    transform: scale(1.075);
}

.case-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(4, 5, 6, .58));
}

.case-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 18%, rgba(51, 170, 242, .18), transparent 32%),
        linear-gradient(90deg, rgba(51, 170, 242, .05), transparent 55%);
    mix-blend-mode: screen;
}

.case-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 5vw, 68px);
}

.case-category {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--blue);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.case-category::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.case-content h3 {
    font-size: clamp(2rem, 3vw, 3.2rem);
}

.case-content p {
    margin-top: 18px;
    max-width: 36ch;
}

.case-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    overflow: hidden;
    border-left: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(51, 170, 242, .2), rgba(51, 170, 242, .025));
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2.9rem, 4.6vw, 4.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.06em;
}

.case-metric-unit {
    color: rgba(244, 246, 248, .58);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}

.case-card:nth-child(even) .case-metric {
    border-right: 1px solid var(--line);
    border-left: 0;
}

.case-metric::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 16px;
}

/* O rótulo decorativo "MODULE" foi substituído pela unidade real da métrica
   (.case-metric-unit), que carrega informação em vez de enfeite. */

/* ==================================================
   TECNOLOGIA
   ================================================== */

.technology {
    background: linear-gradient(180deg, #0a0b0c, #070707);
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.tech-card {
    min-height: 290px;
    padding: clamp(32px, 4vw, 46px);
}

.tech-card:nth-child(1) { grid-column: span 5; }
.tech-card:nth-child(2) { grid-column: span 7; }
.tech-card:nth-child(3) { grid-column: span 7; }
.tech-card:nth-child(4) { grid-column: span 5; }

.tech-card > * {
    position: relative;
    z-index: 1;
}

.tech-card h3 {
    margin-bottom: 28px;
}

.tech-card ul {
    display: grid;
    gap: 12px;
}

.tech-card li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    color: var(--muted);
    transition: color .3s ease, padding-left .3s ease;
}

.tech-card li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: rgba(51, 170, 242, .5);
    transition: background-color .3s ease, box-shadow .3s ease;
}

.tech-card li:hover {
    padding-left: 6px;
    color: var(--text);
}

.tech-card li:hover::before {
    background: var(--blue);
    box-shadow: 0 0 14px rgba(51, 170, 242, .65);
}

/* ==================================================
   CTA
   ================================================== */

.cta {
    position: relative;
    overflow: hidden;
    background: #08090a;
}

.cta-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cta-glow {
    background: radial-gradient(circle at 50% 46%, rgba(51, 170, 242, .22), transparent 48%);
    filter: blur(68px);
    animation: glowFloat 12s ease-in-out infinite;
}

.cta-panel {
    position: relative;
    max-width: 1160px;
    margin-inline: auto;
    overflow: hidden;
    padding: clamp(64px, 9vw, 108px) clamp(28px, 7vw, 82px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .022));
    box-shadow: var(--shadow);
    text-align: center;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.cta-panel::before {
    content: "";
    position: absolute;
    top: -350px;
    left: 50%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(51, 170, 242, .3), transparent 70%);
    filter: blur(20px);
    transform: translateX(-50%);
}

.cta-panel::after {
    content: "";
    position: absolute;
    inset: 17px;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: calc(var(--radius-lg) - 9px);
    pointer-events: none;
}

.cta-panel > * {
    position: relative;
    z-index: 1;
}

.cta-panel h2 {
    max-width: 900px;
    margin: 24px auto 0;
}

.cta-panel p {
    margin: 26px auto 0;
    max-width: 60ch;
}

.cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 48px;
}

/* ==================================================
   FOOTER
   ================================================== */

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 104px 0 38px;
    border-top: 1px solid var(--line);
    background: var(--bg-deep);
}

.site-footer::before {
    content: "BUNKR";
    position: absolute;
    right: -24px;
    bottom: -50px;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(140px, 18vw, 290px);
    font-weight: 700;
    line-height: .8;
    opacity: .026;
    pointer-events: none;
}

.footer-top {
    display: grid;
    grid-template-columns: 2.3fr .95fr 1.25fr .8fr;
    gap: clamp(38px, 5vw, 70px);
}

.footer-brand {
    padding-right: clamp(0px, 4vw, 64px);
}

.footer-brand img {
    width: 225px;
    height: auto;
}

.footer-brand p {
    margin-top: 28px;
    max-width: 40ch;
}

.site-footer h4,
.footer-heading {
    margin-bottom: 22px;
    color: var(--text);
    letter-spacing: -.01em;
}

.site-footer ul {
    display: grid;
    gap: 12px;
}

.site-footer li,
.site-footer a {
    color: var(--muted-2);
}

.footer-role {
    display: block;
    margin-top: 3px;
    color: #565e65;
    font-size: .77rem;
    letter-spacing: .01em;
}

.site-footer a {
    transition: color .3s ease;
}

.site-footer a:hover {
    color: var(--blue-light);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 76px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: #626a70;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ==================================================
   CURSOR PERSONALIZADO
   ================================================== */

.custom-cursor,
.custom-cursor-label {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .custom-cursor {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        display: block;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(255, 255, 255, .65);
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        /* Só tamanho e cor animam. Posição nunca entra aqui: transição em
           transform/left/top é atraso somado ao ponteiro. */
        transition: width .25s ease, height .25s ease, border-color .25s ease, background-color .25s ease;
        will-change: transform;
    }

    /* Antes do primeiro movimento e com o mouse fora da janela. */
    .cursor-fora .custom-cursor,
    .cursor-fora .custom-cursor-label {
        visibility: hidden;
    }

    .custom-cursor.is-active {
        width: 52px;
        height: 52px;
        border-color: var(--blue);
        background: rgba(51, 170, 242, .1);
    }

    .custom-cursor-label {
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: block;
        color: #fff;
        font-size: .55rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: opacity .2s ease;
    }

    .custom-cursor-label.is-visible {
        opacity: 1;
    }

    /* A seta do sistema some, mas só depois de o JS confirmar que o cursor
       próprio está rodando — a classe entra lá, no mesmo if. Sem JS, com
       ponteiro grosso ou com menos movimento pedido, ela continua visível. */
    .cursor-proprio,
    .cursor-proprio a,
    .cursor-proprio button,
    .cursor-proprio label,
    .cursor-proprio summary,
    .cursor-proprio .case-card,
    .cursor-proprio .menu-toggle {
        cursor: none;
    }

    /* Onde o cursor do sistema é informação, e não enfeite: o ponto onde o
       texto vai entrar, e a alça de arrastar do textarea. O anel do site não
       sabe dizer isso. */
    .cursor-proprio input,
    .cursor-proprio textarea,
    .cursor-proprio select,
    .cursor-proprio [contenteditable],
    .cursor-proprio video {
        cursor: auto;
    }
}

/* ==================================================
   ANIMAÇÕES
   ================================================== */

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.82); }
}

@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    48% { transform: scaleY(1); transform-origin: top; }
    52% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes noiseShift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-1%, 1%, 0); }
    50% { transform: translate3d(1%, -1%, 0); }
    75% { transform: translate3d(.6%, 1%, 0); }
}

@keyframes glowFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-2%, 3%, 0) scale(1.05); }
}

@keyframes frameFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes gridDrift {
    from { background-position: 0 0; }
    to { background-position: 88px 88px; }
}

/* ==================================================
   RESPONSIVIDADE
   ================================================== */

@media (min-width: 1600px) {
    :root { --container: 1480px; }
}

@media (max-width: 1240px) {
    :root { --container: 1160px; }

    .hero-container {
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
        gap: 72px;
    }

    .case-card {
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr) 165px;
    }

    .case-card:nth-child(even) {
        grid-template-columns: 165px minmax(260px, .75fr) minmax(0, 1.25fr);
    }
}

@media (max-width: 1024px) {
    html { scroll-padding-top: 86px; }

    .header-actions { display: none; }

    .hero {
        min-height: auto;
        padding-top: 132px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 72px;
    }

    .hero-content {
        max-width: 860px;
    }

    .hero-visual {
        width: min(100%, 650px);
        margin-left: auto;
    }

    .section-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .manifesto-content {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .manifesto-left {
        position: static;
    }

    .lead {
        max-width: 45ch;
    }

    .services-grid,
    .technology-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card:nth-child(n),
    .tech-card:nth-child(n) {
        grid-column: auto;
    }

    .case-card,
    .case-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .case-card:nth-child(even) .case-media,
    .case-card:nth-child(even) .case-content,
    .case-card:nth-child(even) .case-metric {
        grid-column: auto;
        grid-row: auto;
    }

    .case-media {
        min-height: 440px;
    }

    .case-metric,
    .case-card:nth-child(even) .case-metric {
        min-height: 150px;
        border-top: 1px solid var(--line);
        border-right: 0;
        border-left: 0;
    }

    .footer-top {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-social {
        grid-column: 2;
    }
}

@media (max-width: 820px) {
    :root {
        --header-height: 76px;
        --radius: 19px;
        --radius-lg: 27px;
    }

    .container {
        width: min(90%, var(--container));
    }

    .site-header .header-backdrop {
        border-color: var(--line);
        background: rgba(7, 7, 7, .84);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .header-wrapper,
    .site-header.scrolled .header-wrapper {
        min-height: 76px;
    }

    .brand-logo,
    .site-header.scrolled .brand-logo {
        height: 31px;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .main-nav {
        position: fixed;
        top: 76px;
        right: 0;
        left: 0;
        margin: 0;
        padding: 18px 5% 30px;
        border-bottom: 1px solid var(--line);
        background: rgba(7, 7, 7, .97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px);
        transition: opacity .35s ease, visibility .35s ease, transform .35s var(--ease);
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav ul {
        display: block;
    }

    .main-nav a {
        display: flex;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        font-size: 1.05rem;
    }

    .main-nav li:last-child a {
        border-bottom: 0;
    }

    .main-nav a::after {
        display: none;
    }

    .hero {
        padding: 118px 0 76px;
    }

    .hero-content::before {
        top: -60px;
        font-size: 110px;
    }

    .hero-scroll {
        display: none;
    }

    .manifesto-card:nth-child(2),
    .manifesto-card:nth-child(3) {
        margin-left: 0;
    }

    .timeline-item {
        grid-template-columns: 82px 1fr;
        gap: 24px;
        padding: 32px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .footer-social {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 15px;
    }

    .section {
        padding: 92px 0;
    }

    .section::after {
        top: 51px;
        width: 78px;
    }

    h1 {
        font-size: clamp(2.85rem, 14vw, 4.4rem);
    }

    h2 {
        font-size: clamp(2.25rem, 11vw, 3.65rem);
    }

    p {
        font-size: 1rem;
    }

    .section-tag {
        margin-bottom: 26px;
        font-size: .65rem;
    }

    .tag-line {
        width: 36px;
    }

    .section-header {
        margin-bottom: 54px;
    }

    .hero-system {
        margin-bottom: 26px;
        padding: 9px 14px;
        font-size: .62rem;
    }

    .hero-title {
        line-height: .95;
    }

    .hero-description {
        margin-top: 25px;
        font-size: 1rem;
    }

    .hero-buttons,
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    /* grid-auto-flow: row desfaz o column da regra geral; sem ele as três
       métricas ficavam lado a lado a 390px e a última legenda saía da tela. */
    .hero-metrics {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 48px;
    }

    /* Quatro métricas também empilham aqui: a regra de 1099px deixava duas
       colunas de 168px a 390 e a legenda virava torre. Mesma especificidade
       daquela, declarada depois, então vence. */
    .hero-metrics:has(article:nth-child(4)) {
        grid-template-columns: 1fr;
    }

    /* O número tinha coluna fixa de 72px; "3.500+" e "899" são mais largos e
       o texto passava por cima da legenda. Agora a coluna cresce com o número. */
    .hero-metrics article {
        display: grid;
        grid-template-columns: minmax(72px, max-content) 1fr;
        column-gap: 16px;
        align-items: center;
    }

    .hero-frame {
        animation: none;
    }

    .frame-header {
        min-height: 52px;
        padding-inline: 17px;
        font-size: .61rem;
    }

    .frame-footer {
        grid-template-columns: 1fr;
    }

    .frame-footer div,
    .frame-footer div:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .frame-footer div:last-child {
        border-bottom: 0;
    }

    .services-grid,
    .technology-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 270px;
    }

    .service-number {
        margin-bottom: 42px;
        font-size: 2.4rem;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: 0;
        padding: 28px;
    }

    .timeline-item:hover {
        transform: translateY(-6px);
    }

    .timeline-index {
        font-size: 2.2rem;
    }

    .case-card {
        min-height: 0;
    }

    .case-media {
        min-height: 300px;
    }

    .case-content {
        padding: 30px;
    }

    .case-metric {
        min-height: 128px;
        font-size: 3rem;
    }

    .cta-panel {
        border-radius: 22px;
    }

    .cta-panel::after {
        inset: 10px;
        border-radius: 15px;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-social {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 54px;
    }

    .manifesto::before,
    .services::before,
    .process::before,
    .cases::before,
    .technology::before {
        top: 30px;
        right: -8px;
        font-size: 76px;
    }
}

@media (max-height: 620px) and (orientation: landscape) and (min-width: 700px) {
    .hero {
        min-height: auto;
        padding: 110px 0 70px;
    }

    .hero-container {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 44px;
    }

    .hero-metrics,
    .hero-scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .site-header,
    .hero-background,
    .hero-scroll,
    .custom-cursor,
    .custom-cursor-label,
    .cta-background {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    body::before,
    body::after {
        display: none;
    }

    .hero,
    .section {
        min-height: auto;
        padding: 35px 0;
    }

    p,
    li {
        color: #333 !important;
    }

    .manifesto-card,
    .service-card,
    .timeline-item,
    .case-card,
    .tech-card,
    .cta-panel {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* ==================================================
   PÁGINAS INTERNAS
   Componentes que a home não usava. Mesma linguagem
   visual: mesmas variáveis, mesmo espaçamento.
   ================================================== */

/* --- Acessibilidade: pular para o conteúdo --- */

.skip-link {
    position: absolute;
    z-index: 2000;
    top: -100px;
    left: 16px;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--blue);
    color: #041018;
    font-size: .9rem;
    font-weight: 700;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 0;
}

/* --- Hero de página interna (menor que o da home) --- */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-height) + 78px) 0 clamp(48px, 6vw, 82px);
    background: linear-gradient(180deg, rgba(10, 11, 13, .96), rgba(7, 7, 7, .98));
}

.page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -320px;
    right: -180px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(51, 170, 242, .12), transparent 70%);
    filter: blur(80px);
}

.page-hero h1 {
    max-width: 17ch;
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
}

.page-hero .lead,
.page-hero > .container > p {
    margin-top: 26px;
    max-width: 62ch;
    font-size: 1.1rem;
}

/* --- Trilha de navegação --- */

.breadcrumb {
    margin-bottom: 26px;
    color: var(--muted-2);
    font-size: .78rem;
    letter-spacing: .04em;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #40474e;
}

.breadcrumb a {
    color: var(--muted-2);
    transition: color .25s ease;
}

.breadcrumb a:hover {
    color: var(--blue-light);
}

.breadcrumb [aria-current="page"] {
    color: var(--text);
}

/* --- Texto corrido --- */

.prose > * + * {
    margin-top: 22px;
}

.prose h2 {
    margin-top: 56px;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.prose h3 {
    margin-top: 40px;
}

.prose ul,
.prose ol {
    display: grid;
    gap: 12px;
    padding-left: 22px;
    max-width: 70ch;
    color: var(--muted);
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li::marker {
    color: rgba(51, 170, 242, .6);
}

.prose strong {
    color: var(--text);
}

.prose a:not(.btn) {
    color: var(--blue-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(114, 203, 255, .4);
    transition: text-decoration-color .25s ease;
}

.prose a:not(.btn):hover {
    text-decoration-color: var(--blue-light);
}

/* Link dentro de texto corrido precisava parecer link. Na abertura, nas notas
   de seção, na linha do tempo e nas respostas do FAQ ele herdava a cor do
   parágrafo e não tinha sublinhado — o acesso às peças gráficas anteriores a
   2021, no topo de /trabalhos/ e em /sobre/, ficava invisível. Mesmo padrão
   discreto dos links de tabela: cor do texto e sublinhado azul. */
.hero-description a:not(.btn),
.section-intro a:not(.btn),
.section-note a:not(.btn):not(.case-link),
.timeline-content p a,
.faq-item p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(51, 170, 242, .5);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .25s ease, text-decoration-color .25s ease;
}

.hero-description a:not(.btn):hover,
.section-intro a:not(.btn):hover,
.section-note a:not(.btn):not(.case-link):hover,
.timeline-content p a:hover,
.faq-item p a:hover,
.hero-description a:not(.btn):focus-visible,
.section-intro a:not(.btn):focus-visible,
.section-note a:not(.btn):not(.case-link):focus-visible,
.timeline-content p a:focus-visible,
.faq-item p a:focus-visible {
    color: var(--blue-light);
    text-decoration-color: var(--blue-light);
}

/* --- Grades genéricas --- */

.grid-2,
.grid-3 {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Bloco de fato/estatística --- */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin: clamp(44px, 6vw, 72px) 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--line);
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(26px, 3vw, 38px);
    background: #111417;
}

.fact strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
}

.fact span {
    color: var(--muted-2);
    font-size: .84rem;
    line-height: 1.45;
}

/* --- Tabela de dados (clientes, coberturas) --- */

.table-wrap {
    margin: 40px 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.data-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: .93rem;
}

.data-table caption {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-align: left;
    text-transform: uppercase;
}

.data-table th,
.data-table td {
    padding: 15px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    color: var(--muted);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition: background-color .25s ease;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, .022);
}

.data-table .num {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    white-space: nowrap;
}

/* Rótulo de linha quebra: com nowrap, um nome comprido na primeira coluna
   empurrava a tabela para fora da caixa a 1024 (presença digital e showreel). */
.data-table tbody th {
    min-width: 10em;
    white-space: normal;
}

/* --- Etiquetas --- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Em 320px uma etiqueta comprida ("Fotografia comercial") passava 49px da
   borda do cartão: sem quebra de linha, o flex-wrap da lista não resolve. */
@media (max-width: 400px) {
    .tag {
        max-width: 100%;
        white-space: normal;
    }
}

.tag-blue {
    border-color: rgba(51, 170, 242, .4);
    background: rgba(51, 170, 242, .08);
    color: var(--blue-light);
}

.tag-warn {
    border-color: rgba(255, 189, 70, .34);
    background: rgba(255, 189, 70, .07);
    color: #ffcf7a;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

/* --- Ficha técnica de case --- */

.ficha {
    display: grid;
    /* 180px dava seis colunas de 185px e espremia o e-mail (27 caracteres)
       para fora da célula; 320px fecha em três colunas de ~400px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 26px;
    margin: clamp(40px, 5vw, 64px) 0;
    padding: clamp(28px, 3.6vw, 42px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}

.ficha div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ficha dt,
.ficha .rotulo {
    color: var(--muted-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.ficha dd,
.ficha .valor {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.45;
}

/* Placeholder visível — some quando o dado real entrar */
.placeholder {
    border-bottom: 1px dashed rgba(255, 189, 70, .5);
    color: #ffcf7a;
}

/* --- Lista de coberturas --- */

.cobertura-list {
    display: grid;
    gap: 16px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}

.cobertura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 24px clamp(22px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    transition: transform var(--transition), border-color var(--transition);
}

.cobertura:hover {
    border-color: rgba(51, 170, 242, .26);
    transform: translateX(8px);
}

.cobertura h3 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.cobertura .meta {
    color: var(--muted-2);
    font-size: .85rem;
}

.cobertura .volume {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Card de cliente --- */

.client-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .053), rgba(255, 255, 255, .022));
    transition: transform var(--transition), border-color var(--transition);
}

.client-card:hover {
    border-color: rgba(51, 170, 242, .24);
    transform: translateY(-6px);
}

/* --- Formulário --- */

.form {
    display: grid;
    gap: 22px;
    max-width: 720px;
    margin-top: 44px;
}

.field {
    display: grid;
    gap: 9px;
}

.field label {
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
}

.field .hint {
    color: var(--muted-2);
    font-size: .8rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 17px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .028);
    color: var(--text);
    font-size: .97rem;
    transition: border-color .25s ease, background-color .25s ease;
}

.field textarea {
    min-height: 148px;
    resize: vertical;
}

/* A lista aberta do <select> é desenhada pelo sistema, e vinha com fundo
   branco herdando a cor de texto quase branca do tema: ilegível. color-scheme
   avisa o navegador de que o controle é escuro; as duas linhas seguintes
   pintam as opções onde ele ignora o aviso. */
.field select {
    color-scheme: dark;
}

.field select option {
    background-color: #14171b;
    color: #f4f6f8;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(51, 170, 242, .55);
    background: rgba(51, 170, 242, .05);
    outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #5a6268;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/* --- Chamada final de página --- */

.cta-band {
    margin-top: clamp(72px, 9vw, 120px);
    padding: clamp(44px, 5.5vw, 70px) clamp(28px, 4vw, 56px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(51, 170, 242, .09), rgba(255, 255, 255, .012));
    text-align: center;
}

.cta-band h2 {
    max-width: 22ch;
    margin: 0 auto;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.cta-band p {
    margin: 22px auto 0;
    max-width: 56ch;
}

.cta-band .cta-actions {
    margin-top: 36px;
}

/* --- Aviso em bloco --- */

.aviso {
    display: grid;
    gap: 10px;
    margin: 34px 0;
    padding: 22px 26px;
    border: 1px solid rgba(255, 189, 70, .26);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: rgba(255, 189, 70, .045);
}

.aviso strong {
    color: #ffcf7a;
    font-size: .93rem;
}

.aviso p {
    margin: 0;
    font-size: .93rem;
}

/* --- Capítulos do showreel --- */

.chapters {
    display: grid;
    gap: 2px;
    margin: 44px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--line);
    list-style: none;
}

.chapter {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 17px clamp(20px, 2.6vw, 30px);
    background: #101316;
    transition: background-color .25s ease;
}

.chapter:hover {
    background: #101315;
}

.chapter time {
    color: var(--blue);
    font-family: var(--font-display);
    font-size: .93rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chapter .marca {
    color: var(--text);
    font-weight: 600;
}

.chapter .desc {
    display: block;
    margin-top: 4px;
    color: var(--muted-2);
    font-size: .87rem;
}

/* --- Responsivo --- */

@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .page-hero {
        padding-top: calc(var(--header-height) + 54px);
    }

    .grid-2,
    .grid-3 { grid-template-columns: 1fr; }

    .field-row { grid-template-columns: 1fr; }

    .cobertura {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cobertura:hover { transform: translateY(-6px); }
}

@media (max-width: 620px) {
    .chapter {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ficha { gap: 20px; }
}

/* --- Respiro entre blocos irmãos ---

   Estes blocos vinham com margin:0 porque sempre havia um .section-header
   (62px de margem inferior) logo acima. Quando as páginas passaram a empilhar
   dois deles, colaram: 0px entre um e outro em 19 das 22 páginas.

   A regra é de irmão, não de bloco — quem vem logo depois do .section-header
   continua com os 62px dele, sem somar. Blocos que já cuidam do próprio espaço
   (.facts, .ficha, .table-wrap, .form, .section-note) ficam fora da lista. */

.container > :not(.section-header) + .case-figure,
.container > :not(.section-header) + .grid-2,
.container > :not(.section-header) + .grid-3,
.container > :not(.section-header) + .services-grid,
.container > :not(.section-header) + .technology-grid,
.container > :not(.section-header) + .timeline,
.container > :not(.section-header) + .cases-list,
.container > :not(.section-header) + .cases-mini,
.container > :not(.section-header) + .service-stack,
.container > :not(.section-header) + .manifesto-content,
.container > :not(.section-header) + .cobertura-list,
.container > :not(.section-header) + .chapters,
.container > :not(.section-header) + .bastidores-tira,
.container > :not(.section-header) + .showreel-player,
.container > :not(.section-header) + .grades-perfil,
.container > :not(.section-header) + .telas-grid,
.container > :not(.section-header) + .bau-grid,
.container > :not(.section-header) + .client-card,
.container > :not(.section-header) + h3,
.container > :not(.section-header) + .lead,
.container > h3 + p {
    margin-top: 44px;
}

@media (max-width: 820px) {
    .container > :not(.section-header) + .case-figure,
    .container > :not(.section-header) + .grid-2,
    .container > :not(.section-header) + .grid-3,
    .container > :not(.section-header) + .services-grid,
    .container > :not(.section-header) + .technology-grid,
    .container > :not(.section-header) + .timeline,
    .container > :not(.section-header) + .cases-list,
    .container > :not(.section-header) + .cases-mini,
    .container > :not(.section-header) + .service-stack,
    .container > :not(.section-header) + .manifesto-content,
    .container > :not(.section-header) + .cobertura-list,
    .container > :not(.section-header) + .chapters,
    .container > :not(.section-header) + .bastidores-tira,
    .container > :not(.section-header) + .showreel-player,
    .container > :not(.section-header) + .grades-perfil,
    .container > :not(.section-header) + .telas-grid,
    .container > :not(.section-header) + .bau-grid,
.container > :not(.section-header) + .client-card,
    .container > :not(.section-header) + h3,
    .container > :not(.section-header) + .lead,
    .container > h3 + p {
        margin-top: 32px;
    }
}

/* --- Formulário: armadilha de robô e aviso de erro ---

   A armadilha sai do fluxo sem `display: none`: robô melhor escrito ignora o
   que está escondido assim. Fora da tela e sem foco por teclado, ela some para
   quem usa o site e continua visível para quem preenche tudo automaticamente.

   O aviso nasce escondido e só aparece quando o PHP devolve ?erro=1 — o JS
   marca o formulário. Sem JS, o visitante cai na página de orçamento com o
   formulário limpo, que é o comportamento antigo. */

.form-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-erro {
    display: none;
    margin: 0 0 22px;
    padding: 14px 17px;
    border: 1px solid rgba(255, 138, 128, .45);
    border-radius: var(--radius-sm);
    background: rgba(255, 138, 128, .09);
    color: #ffc9c2;
    font-size: .92rem;
}

.form-erro a {
    color: #fff;
    text-decoration: underline;
}

.form.tem-erro .form-erro {
    display: block;
}

/* ==================================================
   COMPONENTES DAS PÁGINAS INTERNAS
   Classes criadas pelas páginas geradas. Mesma
   linguagem visual do restante do site.
   ================================================== */

/* --- Hero reduzido para páginas internas --- */

.hero.hero-compact {
    min-height: auto;
    padding: calc(var(--header-height) + 76px) 0 clamp(58px, 7vw, 96px);
}

.hero-compact .hero-title {
    /* acompanha a escala da home (.hero-home .hero-title): o banner interno
       vinha em 4,8rem contra 3,15rem da home, e o título passava a altura do
       quadro do vídeo ao lado */
    max-width: 19ch;
    font-size: clamp(2rem, 3.7vw, 3.35rem);
    line-height: 1.05;
}

.hero-compact .hero-container {
    align-items: center;
    gap: clamp(48px, 6vw, 104px);
}

/* --- Cabeçalho de seção com intro --- */

.section-intro {
    max-width: 62ch;
    margin-top: 22px;
    font-size: 1.06rem;
}

.section-header.manifesto-header {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}

/* --- Nota discreta dentro de uma seção --- */

.section-note {
    max-width: 68ch;
    margin-top: 26px;
    padding-left: 18px;
    border-left: 2px solid rgba(51, 170, 242, .32);
    color: var(--muted-2);
    font-size: .93rem;
    line-height: 1.6;
}

/* --- Lista de blocos de serviço --- */

.service-stack {
    display: grid;
    gap: clamp(26px, 3.4vw, 44px);
}

.service-block {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
    gap: clamp(30px, 4vw, 58px);
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .02));
    transition: border-color var(--transition), transform var(--transition);
}

.service-block:hover {
    border-color: rgba(51, 170, 242, .22);
    transform: translateY(-5px);
}

.service-block-main .service-number {
    margin-bottom: 20px;
    font-size: 2.4rem;
}

.service-block-main h3 {
    margin-bottom: 18px;
}

.service-block-main > p {
    max-width: 58ch;
}

.service-block-main .btn {
    margin-top: 28px;
}

/* --- Escopo do serviço --- */

.service-scope {
    display: grid;
    gap: 11px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.service-scope li {
    position: relative;
    padding-left: 22px;
    max-width: 62ch;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.55;
}

.service-scope li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 7px;
    height: 1px;
    background: var(--blue);
}

/* --- Bloco de prova ao lado do serviço --- */

.service-proof {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(51, 170, 242, .045);
}

.service-proof-media {
    margin: -6px -6px 8px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 10;
}

.service-proof-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9) contrast(1.04) saturate(.94);
    transition: transform .9s var(--ease-out), filter .5s ease;
}

.service-block:hover .service-proof-media img {
    filter: brightness(.86) saturate(1);
    transform: scale(1.045);
}

.service-proof-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 3.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}

.service-proof p {
    color: var(--muted);
    font-size: .93rem;
}

.service-proof a {
    color: var(--blue-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(114, 203, 255, .38);
}

.service-proof a:hover {
    text-decoration-color: var(--blue-light);
}

/* --- Link para um case --- */

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--blue-light);
    font-size: .92rem;
    font-weight: 600;
    transition: gap .25s ease;
}

.case-link::after {
    content: "→";
    transition: transform .25s ease;
}

.case-link:hover {
    gap: 13px;
}

/* --- Tabela de prova --- */

.proof {
    margin-top: clamp(44px, 5vw, 68px);
}

.proof-table-wrap {
    margin-top: 34px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.proof-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: .94rem;
}

.proof-table caption {
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-align: left;
    text-transform: uppercase;
}

.proof-table th,
.proof-table td {
    padding: 15px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    text-align: left;
    vertical-align: top;
}

.proof-table th {
    color: var(--text);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.proof-table td {
    color: var(--muted);
}

.proof-table tbody tr:last-child td {
    border-bottom: 0;
}

.proof-table tbody tr {
    transition: background-color .25s ease;
}

.proof-table tbody tr:hover {
    background: rgba(255, 255, 255, .022);
}

.proof-table td:last-child,
.proof-table .num {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Só número não quebra. A última coluna já foi texto corrido ("por que
   importa") em dois cases, e com nowrap ela empurrava a tabela para fora da
   caixa a 1440 e a 1024. O rótulo de linha também quebra: em maiúsculas e
   espaçado, um nome comprido de recurso sozinho tomava metade da largura. */
.proof-table .num {
    white-space: nowrap;
}

/* Piso de largura para a última coluna: valor curto ("Galeria no ar",
   "Hotsite no ar") não parte em duas linhas a 1024, e texto corrido ainda
   quebra normalmente acima disso. */
.proof-table td:last-child {
    min-width: 10em;
}

.proof-table tbody th {
    min-width: 11em;
    white-space: normal;
}

/* --- Responsivo --- */

@media (max-width: 1024px) {
    .service-block {
        grid-template-columns: 1fr;
    }

    .service-proof {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
    }

    .service-proof-media {
        flex: 1 1 260px;
        margin: 0;
    }

    .service-proof-figure,
    .service-proof p {
        flex: 1 1 220px;
    }
}

@media (max-width: 620px) {
    .service-proof {
        flex-direction: column;
        align-items: stretch;
    }

    /* Em coluna, o flex-basis de 260px herdado da regra de 1024 virava altura
       e o aspect-ratio levava a foto a ~460px de largura, para fora do card. */
    .service-proof-media {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .service-proof-figure,
    .service-proof p {
        flex: none;
    }
}

/* --- O quadro do showreel na página que vende produção audiovisual ---
   Ali o vídeo é o produto, não a ilustração: o quadro ganha espaço e a coluna
   de texto cede um pouco. Abaixo de 1024 o hero já vira uma coluna só. */

.hero-reel-largo .hero-visual {
    max-width: 780px;
}

@media (min-width: 1025px) {
    .hero-reel-largo .hero-container {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    }
}

/* ==================================================
   PÁGINA 404 — "SETOR RESTRITO"
   Easter egg com a metáfora do bunker. É o único
   lugar do site onde o tom militar aparece.
   ================================================== */

.bunker {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-height) + 64px) 0 84px;
}

.bunker-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.bunker-noise,
.bunker-grid,
.bunker-scan,
.bunker-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bunker-noise {
    opacity: .04;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: noiseShift 9s steps(2, end) infinite;
}

.bunker-grid {
    opacity: .07;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 20%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 42%, #000 20%, transparent 78%);
}

/* Linha de varredura, como um radar passando */
.bunker-scan {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(51, 170, 242, .045) 46%,
        rgba(51, 170, 242, .11) 50%,
        rgba(51, 170, 242, .045) 54%,
        transparent 100%);
    background-size: 100% 260px;
    background-repeat: no-repeat;
    animation: scanSweep 5.4s linear infinite;
}

.bunker-glow {
    background: radial-gradient(circle at 50% 34%, rgba(255, 138, 76, .13), transparent 46%);
    filter: blur(72px);
}

.bunker-container {
    max-width: 860px;
    text-align: center;
}

/* --- Faixa de alerta --- */

.bunker-alert {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 138, 76, .34);
    border-radius: 999px;
    background: rgba(255, 138, 76, .08);
    color: #ffb684;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bunker-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #ff8a4c;
    box-shadow: 0 0 14px rgba(255, 138, 76, .85);
    animation: pulse 1.5s ease-in-out infinite;
}

.bunker-title {
    margin-bottom: 40px;
    font-size: clamp(2.5rem, 6.4vw, 5rem);
}

.bunker-title span {
    display: block;
    background: linear-gradient(90deg, var(--blue-light), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Terminal --- */

.terminal {
    margin: 0 auto;
    max-width: 660px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(6, 8, 10, .82);
    box-shadow: var(--shadow);
    text-align: left;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .022);
    color: var(--muted-2);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: .72rem;
    letter-spacing: .06em;
}

.terminal-dots {
    display: inline-flex;
    gap: 6px;
}

.terminal-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2b3138;
}

.terminal-dots i:first-child { background: #ff5f56; }
.terminal-dots i:nth-child(2) { background: #ffbd2e; }
.terminal-dots i:last-child  { background: #27c93f; }

.terminal-body {
    margin: 0;
    padding: 22px 20px 26px;
    min-height: 268px;
    color: #b9c2ca;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-body .ok    { color: var(--green); }
.terminal-body .warn  { color: #ffb684; }
.terminal-body .blue  { color: var(--blue-light); }
.terminal-body .dim   { color: #626a72; }

/* cursor piscando no fim da linha */
.terminal-body::after {
    content: "▌";
    color: var(--blue);
    animation: caret 1.05s steps(1, end) infinite;
}

.terminal.is-done .terminal-body::after {
    animation: caret 1.6s steps(1, end) infinite;
}

/* --- Saídas --- */

.bunker-lead {
    max-width: 58ch;
    margin: 40px auto 0;
    font-size: 1.06rem;
}

.bunker-exits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 38px;
}

.bunker-report {
    margin: 34px auto 0;
    max-width: 56ch;
    color: var(--muted-2);
    font-size: .92rem;
}

.bunker-report a {
    color: var(--blue-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(114, 203, 255, .4);
}

.bunker-report a:hover {
    text-decoration-color: var(--blue-light);
}

/* --- Animações --- */

@keyframes scanSweep {
    0%   { background-position: 0 -280px; }
    100% { background-position: 0 100vh; }
}

@keyframes caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* --- Responsivo --- */

@media (max-width: 620px) {
    .bunker {
        min-height: auto;
        padding: calc(var(--header-height) + 44px) 0 68px;
    }

    .terminal-body {
        min-height: 250px;
        padding: 18px 15px 22px;
        font-size: .77rem;
        line-height: 1.75;
    }

    .bunker-exits .btn {
        width: 100%;
    }
}

/* Quem pediu menos movimento recebe o log inteiro, sem animação */
@media (prefers-reduced-motion: reduce) {
    .bunker-scan,
    .bunker-noise {
        animation: none;
    }

    .terminal-body::after {
        animation: none;
    }
}

/* ==================================================
   COMPONENTES — segunda leva
   Classes criadas pelas páginas de trabalhos, eventos,
   clientes, showreel, contato e FAQ.
   ================================================== */

/* --- Card de trabalho na grade --- */

.work-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .02));
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.work-card:hover {
    border-color: rgba(51, 170, 242, .26);
    box-shadow: var(--shadow-sm);
    transform: translateY(-7px);
}

.work-card-media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #111417;
}

.work-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(.9) contrast(1.03) saturate(.95);
    transition: transform 1.1s var(--ease-out), filter .55s ease;
}

.work-card:hover .work-card-media img {
    filter: brightness(.9) saturate(1);
    transform: scale(1.05);
}

.work-card > :not(.work-card-media) {
    margin-left: clamp(22px, 2.6vw, 30px);
    margin-right: clamp(22px, 2.6vw, 30px);
}

.work-card > .case-category {
    margin-top: clamp(22px, 2.6vw, 30px);
    margin-bottom: 12px;
}

.work-card h3 {
    margin-bottom: 13px;
    font-size: 1.32rem;
}

.work-card p {
    font-size: .95rem;
}

.work-card .tag-list {
    margin-bottom: clamp(22px, 2.6vw, 30px);
}

.work-card > a:not(.tag):last-child {
    margin-bottom: clamp(22px, 2.6vw, 30px);
}

/* --- Bloco de informação dentro da lista de coberturas --- */

.cobertura-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cobertura-info h3 {
    margin-bottom: 0;
}

.cobertura-info .meta {
    margin: 0;
    color: var(--muted-2);
    font-size: .88rem;
}

.cobertura-info .tag-list {
    margin-top: 2px;
}

.cobertura .volume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* --- Cartão de canal de contato --- */

.contato-canal {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contato-canal h3 {
    margin: 0;
}

.contato-numero {
    display: inline-block;
    color: var(--blue-light);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    transition: color .25s ease;
}

.contato-numero:hover {
    color: #a5dcff;
}

.contato-meta {
    margin: -6px 0 0;
    color: var(--muted-2);
    font-size: .86rem;
}

.contato-canal .service-scope {
    margin-top: 6px;
}

/* --- Perguntas frequentes --- */

.faq-list {
    display: grid;
    gap: 2px;
    margin-top: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--line);
}

.faq-item {
    padding: clamp(26px, 3vw, 36px);
    background: #101316;
    transition: background-color .3s ease;
}

.faq-item:hover {
    background: #101315;
}

.faq-item h3 {
    margin-bottom: 14px;
    font-size: 1.16rem;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.faq-item p {
    max-width: 78ch;
    font-size: .96rem;
}

/* --- Título de setor (página de clientes) --- */

.setor-title {
    margin-top: clamp(56px, 7vw, 88px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.setor-title:first-of-type {
    margin-top: 0;
}

/* --- Figura com legenda dentro de um case --- */

.case-figure {
    margin: 0;
}

.case-figure img {
    display: block;
    width: 100%;
    /* sem height:auto o atributo height="933" do HTML vale como altura usada e a
       captura estica na vertical — some quando a coluna vizinha é mais alta que
       a imagem, que é o caso dentro de .grid-2 */
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #111417;
}

.case-figure figcaption {
    margin-top: 14px;
    color: var(--muted-2);
    font-size: .85rem;
    line-height: 1.6;
}

/* --- Player do showreel --- */

.showreel-player {
    position: relative;
    /* O arquivo tem 854px de largura. Solto no container ele era esticado
       para 1323px — 1,55x, e a compressão aparece. */
    max-width: 1000px;
    margin-top: 44px;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #0a0c0e;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
}

/* O arquivo é 854x480 e o quadro pode passar de 1000px: contain em vez de
   cover, para o vídeo não ser esticado além do que ele tem. */
.showreel-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #06080a;
}

/* --- Ações do formulário --- */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
}

.form-actions .btn {
    flex: 0 0 auto;
}

.form-actions p {
    flex: 1 1 240px;
    margin: 0;
    color: var(--muted-2);
    font-size: .86rem;
}

/* --- Responsivo --- */

@media (max-width: 820px) {
    .cobertura .volume {
        flex-direction: row;
        align-items: baseline;
        gap: 9px;
    }

    .showreel-play {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 620px) {
    .form-actions .btn {
        width: 100%;
    }
}

/* --- Grade das peças gráficas anteriores a 2021 --- */

.bau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.bau-peca {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #111417;
    aspect-ratio: 1;
    transition: border-color .3s ease, transform .3s ease;
}

.bau-peca:hover {
    border-color: rgba(51, 170, 242, .3);
    transform: translateY(-4px);
}

.bau-peca a {
    display: block;
    width: 100%;
    height: 100%;
}

.bau-peca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) brightness(1);
    transition: filter .35s ease, transform .6s var(--ease-out);
}

.bau-peca:hover img {
    filter: saturate(1) brightness(1);
    transform: scale(1.05);
}

@media (max-width: 620px) {
    .bau-grid {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        gap: 10px;
    }
}

/* ==================================================
   LINK DENTRO DE TABELA
   As tabelas do site têm links que ninguém via: o nome
   do cliente leva ao case, o @ leva ao perfil, e os dois
   saíam na cor do texto comum, sem sublinhado. Link que
   não parece link não é clicado.

   Sublinhado fino e afastado — o suficiente para ler
   como link sem transformar a tabela em mar de azul.
   ================================================== */

.data-table a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(51, 170, 242, .45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .25s ease, text-decoration-color .25s ease;
}

.data-table a:hover,
.data-table a:focus-visible {
    color: var(--blue-light);
    text-decoration-color: var(--blue-light);
}

/* O @ do perfil é o dado da célula, então pode assumir a cor de link */
.data-table td a[href*="instagram.com"] {
    color: rgba(178, 203, 224, .95);
}

@media (prefers-reduced-motion: reduce) {
    .data-table a {
        transition: none;
    }
}

/* ==================================================
   BOTÃO FLUTUANTE DE WHATSAPP

   z-index 900: abaixo do cabeçalho (1000) e do link de pular para o conteúdo
   (2000), acima de tudo o mais. O verde é o da marca do WhatsApp de propósito
   — é o que faz o botão ser reconhecido antes de ser lido.
   ================================================== */

.zap {
    position: fixed;
    z-index: 900;
    right: clamp(16px, 2.4vw, 28px);
    bottom: clamp(16px, 2.4vw, 28px);
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #25d366;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    color: #06210f;
    transition: gap .28s var(--ease-out), padding .28s var(--ease-out),
                transform .28s var(--ease-out), box-shadow .28s ease;
}

.zap svg {
    width: 26px;
    height: 26px;
    flex: none;
}

/* O rótulo nasce fechado e abre no hover: o ícone sozinho já é reconhecido,
   e a palavra existe para quem não reconhece. max-width em vez de display
   para a abertura poder ser animada. */
.zap-texto {
    max-width: 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .28s var(--ease-out), opacity .2s ease;
}

.zap:hover,
.zap:focus-visible {
    gap: 10px;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18) inset;
}

.zap:hover .zap-texto,
.zap:focus-visible .zap-texto {
    max-width: 120px;
    opacity: 1;
}

.zap:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Abaixo de 620px o rodapé fixo do teclado e a barra do navegador disputam o
   canto: o botão encolhe para só o ícone e sobe um pouco. */
@media (max-width: 620px) {
    .zap {
        height: 52px;
        padding: 0 13px;
    }

    .zap:hover .zap-texto,
    .zap:focus-visible .zap-texto {
        max-width: 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zap,
    .zap-texto {
        transition: none;
    }
}

@media print {
    .zap {
        display: none;
    }
}

/* ==================================================
   SISTEMA DE LUZ
   Um bunker tem iluminação — luz artificial dirigida
   que revela o que importa. Não é escuridão uniforme.
   ================================================== */

/* Luminárias de teto: faixas de luz que atravessam a página */
body::before {
    background:
        radial-gradient(ellipse 80% 42% at 50% -6%, rgba(51, 170, 242, .11), transparent 62%),
        radial-gradient(ellipse 55% 30% at 8% 22%, rgba(255, 246, 230, .045), transparent 66%),
        radial-gradient(ellipse 60% 34% at 96% 62%, rgba(51, 170, 242, .06), transparent 68%),
        linear-gradient(rgba(11, 12, 14, .72), rgba(11, 12, 14, .82)),
        url("assets/concreto.jpg") center / cover no-repeat;
}

/* Faixa de luz no topo de cada seção — a "calha" da luminária */
.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent,
        rgba(51, 170, 242, .34) 22%,
        rgba(180, 226, 255, .5) 50%,
        rgba(51, 170, 242, .34) 78%,
        transparent);
    opacity: .5;
}

/* O brilho que a calha derrama sobre a seção */
.section > .container::after {
    content: none;
}

.services,
.technology,
.cases,
.process,
.manifesto {
    position: relative;
}

.services::after,
.cases::after,
.technology::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60px;
    left: 50%;
    width: min(1100px, 86%);
    height: 320px;
    pointer-events: none;
    background: radial-gradient(ellipse at center top, rgba(51, 170, 242, .075), transparent 68%);
    filter: blur(40px);
    transform: translateX(-50%);
}

/* Luz de contorno nos cards: a borda superior capta a luminária */
.service-card,
.tech-card,
.manifesto-card,
.work-card,
.client-card,
.service-block,
.case-card {
    position: relative;
}

.service-card::after,
.tech-card::after,
.manifesto-card::after,
.work-card::after,
.service-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    opacity: .55;
    transition: opacity var(--transition);
}

.service-card:hover::after,
.tech-card:hover::after,
.manifesto-card:hover::after,
.work-card:hover::after,
.service-block:hover::after {
    opacity: 1;
}

/* Foco de luz atrás do frame do hero — o objeto iluminado da sala */
.hero-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -10%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 22%, rgba(51, 170, 242, .3), transparent 62%);
    filter: blur(56px);
}

/* Rodapé: luz rasante vinda de cima */
.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(51, 170, 242, .05), transparent);
}

@media (prefers-reduced-motion: reduce) {
    .section::before,
    .services::after,
    .cases::after,
    .technology::after {
        opacity: .35;
    }
}

/* ==================================================
   HERO — VÍDEO E ENTRADA DE CINEMA
   ================================================== */

/* O quadro do hero deixa de ser vertical: cinema é 16:9 */
.frame-content {
    aspect-ratio: 16 / 9;
}

.frame-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.94) contrast(1.04) saturate(.96);
}

/* Cortina: duas barras que se abrem na carga, como um projetor começando */
.frame-curtain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.frame-curtain::before,
.frame-curtain::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: #07080a;
    animation: abrirCortina 1.15s var(--ease-out) .25s both;
}

.frame-curtain::before {
    top: 0;
    transform-origin: top;
}

.frame-curtain::after {
    bottom: 0;
    transform-origin: bottom;
    animation-name: abrirCortinaBaixo;
}

@keyframes abrirCortina {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
}

@keyframes abrirCortinaBaixo {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
}

/* O hero visual pode ocupar mais espaço agora que é horizontal */
.hero-visual {
    max-width: 640px;
}

/* Quem pediu menos movimento: sem vídeo, sem cortina — só o quadro parado */
@media (prefers-reduced-motion: reduce) {
    .frame-video {
        display: none;
    }

    .frame-content {
        background: url("assets/cases/showreel-2026.jpg") center / cover no-repeat;
    }

    .frame-curtain::before,
    .frame-curtain::after {
        animation: none;
        transform: scaleY(0);
    }
}

/* ==================================================
   HERO DA HOME — texto em cima, showreel em faixa
   O vídeo saiu da coluna estreita: título e vídeo
   não disputam mais altura.
   ================================================== */

.hero-home {
    display: block;
    min-height: auto;
    padding: calc(var(--header-height) + 72px) 0 clamp(70px, 8vw, 110px);
}

.hero-topo {
    max-width: 980px;
}

.hero-home .hero-title {
    max-width: 16ch;
    font-size: clamp(2.05rem, 3.5vw, 3.15rem);
    line-height: 1.04;
}

.hero-home .hero-description {
    max-width: 58ch;
    margin-top: 22px;
    font-size: 1.03rem;
}

.hero-home .hero-description strong {
    color: var(--text);
}

/* Lista do que fazemos — resposta imediata a "o que vocês são?" */
.hero-frentes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.hero-frentes a {
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: rgba(244, 246, 248, .84);
    font-size: .87rem;
    font-weight: 500;
    transition: border-color .28s ease, background-color .28s ease, color .28s ease;
}

.hero-frentes a:hover {
    border-color: rgba(51, 170, 242, .5);
    background: rgba(51, 170, 242, .1);
    color: #fff;
}

.hero-home .hero-buttons {
    margin-top: 36px;
}

/* --- Faixa do showreel --- */

.hero-reel {
    margin: clamp(52px, 6vw, 78px) 0 0;
}

.hero-reel-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #06080a;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
}

.hero-reel-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.96) contrast(1.03) saturate(.97);
}

/* Vinheta: escurece só as bordas, para o vídeo assentar no fundo */
.hero-reel-vinheta {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 58%, rgba(6, 8, 10, .5) 100%),
        linear-gradient(180deg, rgba(6, 8, 10, .22), transparent 22%);
}

/* Cortina de cinema, abrindo na carga */
.hero-reel-curtain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-reel-curtain::before,
.hero-reel-curtain::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: #06080a;
    animation: abrirCortina 1.2s var(--ease-out) .2s both;
}

.hero-reel-curtain::before { top: 0; transform-origin: top; }
.hero-reel-curtain::after  { bottom: 0; transform-origin: bottom; }

.hero-reel-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: 18px;
    color: var(--muted-2);
    font-size: .88rem;
}

.hero-reel-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.hero-home .hero-metrics {
    margin-top: clamp(46px, 5vw, 66px);
}

@media (max-width: 820px) {
    .hero-home {
        padding-top: calc(var(--header-height) + 46px);
    }

    .hero-reel-legenda {
        gap: 8px 16px;
        font-size: .82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-reel-video { display: none; }

    .hero-reel-frame {
        background: url("assets/cases/showreel-2026.jpg") center / cover no-repeat;
    }

    .hero-reel-curtain::before,
    .hero-reel-curtain::after {
        animation: none;
        transform: scaleY(0);
    }
}

/* ==================================================
   SEÇÃO DA BUSCA — a tensão que justifica o serviço
   Simulação de SERP desenhada em HTML/CSS: nítida em
   qualquer tela e legível por buscador e leitor.
   ================================================== */

.busca .section-intro strong { color: var(--text); }

.serp {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr);
    gap: 22px;
    margin: clamp(44px, 5vw, 68px) 0 0;
    align-items: start;
}

/* --- janela do navegador --- */

.serp-janela {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #101317;
    box-shadow: var(--shadow);
}

.serp-topo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .025);
}

.serp-dots { display: inline-flex; gap: 6px; }
.serp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2b3138; }
.serp-dots i:first-child { background: #ff5f56; }
.serp-dots i:nth-child(2) { background: #ffbd2e; }
.serp-dots i:last-child { background: #27c93f; }

.serp-url {
    color: var(--muted-2);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .74rem;
}

/* --- campo de busca --- */

.serp-campo {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 20px clamp(18px, 2.4vw, 26px) 0;
    padding: 15px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
}

.serp-lupa { color: var(--muted-2); flex: none; }

.serp-termo {
    color: var(--text);
    font-size: 1.02rem;
}

.serp-cursor {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    background: var(--blue);
    animation: caret 1.05s steps(1, end) infinite;
}

/* --- resultados --- */

.serp-resultados {
    display: grid;
    gap: 2px;
    margin-top: 22px;
    background: var(--line);
    border-top: 1px solid var(--line);
}

.serp-item {
    padding: 20px clamp(18px, 2.4vw, 26px);
    background: #0d1013;
}

.serp-item h3 {
    margin-bottom: 5px;
    color: #8ab8ff;
    font-family: var(--font-body);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0;
}

.serp-link {
    margin-bottom: 7px;
    color: #6f8a6f;
    font-size: .8rem;
}

.serp-desc {
    max-width: 62ch;
    color: var(--muted);
    font-size: .9rem;
}

.serp-badge {
    display: inline-block;
    margin-bottom: 9px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(104, 247, 170, .12);
    color: var(--green);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.serp-item-topo {
    position: relative;
    background: #12161a;
}

.serp-item-topo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--green);
}

.serp-avaliacao {
    margin-top: 8px;
    color: #f0b429;
    font-size: .82rem;
}

/* o resultado de quem não aparece */
.serp-item-voce {
    opacity: .5;
    filter: saturate(.4);
}

.serp-item-voce h3 { color: var(--muted); }

.serp-posicao {
    margin-top: 7px;
    color: var(--danger);
    font-size: .82rem;
}

/* --- cartão do Maps --- */

.serp-maps {
    padding: clamp(20px, 2.6vw, 26px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #101317;
}

.serp-maps-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.serp-maps-lista {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.serp-maps-lista li {
    display: grid;
    gap: 4px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.serp-maps-lista li:last-child { border-bottom: 0; }

.serp-maps-lista strong {
    color: var(--text);
    font-size: .97rem;
}

.serp-maps-lista span {
    color: var(--muted-2);
    font-size: .82rem;
}

.serp-maps-ausente {
    opacity: .55;
}

.serp-maps-ausente strong { color: var(--muted); }

.serp-maps-ausente span { color: var(--danger); }

.busca-perguntas {
    margin-top: clamp(44px, 5vw, 66px);
}

@media (max-width: 1024px) {
    .serp { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .serp-campo {
        padding: 12px 15px;
        font-size: .92rem;
    }

    .serp-termo { font-size: .92rem; }
}

/* Resumo em destaque no topo da política de privacidade */
.resumo {
    display: grid;
    gap: 12px;
    margin: 34px 0 44px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(51, 170, 242, .26);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: rgba(51, 170, 242, .05);
}

.resumo p { margin: 0; }

.resumo strong { color: var(--text); }

/* --- Hero da home em duas colunas: texto à esquerda, showreel à direita --- */

.hero-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    align-items: center;
    gap: clamp(44px, 5vw, 84px);
}

.hero-home-grid .hero-topo {
    max-width: none;
    grid-column: 1;
}

.hero-home-grid .hero-reel {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

/* O showreel aparece inteiro: 16:9 e contain, sem cortar nada. */
.hero-home-grid .hero-reel-frame {
    aspect-ratio: 16 / 9;
}

.hero-home-grid .hero-reel-video {
    object-fit: contain;
    background: #06080a;
}

.hero-home-grid .hero-metrics {
    grid-column: 1 / -1;
}

.hero-home .hero-title {
    max-width: 15ch;
}

@media (max-width: 1024px) {
    .hero-home-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hero-home-grid .hero-topo,
    .hero-home-grid .hero-reel,
    .hero-home-grid .hero-metrics {
        grid-column: 1;
        grid-row: auto;
    }

    .hero-home-grid .hero-reel-frame {
        aspect-ratio: 16 / 9;
    }

    .hero-home .hero-title {
        max-width: 15ch;
    }
}

/* ==================================================
   ESCALA TIPOGRÁFICA E HIERARQUIA — revisão
   Problema: títulos e textos grandes demais faziam uma
   tela inteira caber quase nada, e o cabeçalho de seção
   espalhava eyebrow e título em cantos opostos.
   ================================================== */

/* --- Títulos: escala menor e mais próxima entre níveis --- */

h1 { font-size: clamp(2.3rem, 4.2vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.42rem); }
h4 { font-size: .95rem; }

h1, h2 { line-height: 1.03; }
h3 { line-height: 1.2; letter-spacing: -.025em; }

/* --- Corpo de texto --- */

body { font-size: 15.5px; }

p { font-size: 1rem; }

.lead {
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
    line-height: 1.55;
}

.section-intro {
    max-width: 66ch;
    margin-top: 16px;
    font-size: 1rem;
}

/* --- Cabeçalho de seção: eyebrow e título juntos --- */

.section-header {
    display: block;
    max-width: 860px;
    margin-bottom: clamp(38px, 4.6vw, 62px);
}

.section-header .eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
}

.section-header h2 { max-width: 22ch; }

.section-header.manifesto-header { max-width: 860px; }

/* A etiqueta "Module 0X" encosta no cabeçalho, em vez de flutuar sozinha */
.section-tag {
    margin-bottom: 18px;
    font-size: .68rem;
    letter-spacing: .2em;
}

.tag-line { width: 40px; }

/* --- Seções mais compactas --- */

.section { padding: clamp(76px, 7.5vw, 122px) 0; }

.section::after { top: 60px; width: 110px; }

/* --- Cards com texto proporcional --- */

.service-card {
    min-height: 0;
    padding: clamp(26px, 3vw, 38px);
}

.service-card p,
.tech-card li,
.manifesto-card p,
.timeline-content p,
.client-card p,
.work-card p,
.faq-item p {
    font-size: .95rem;
    line-height: 1.6;
}

.service-number {
    margin-bottom: clamp(26px, 3.4vw, 44px);
    font-size: 2.1rem;
}

.manifesto-card { padding: clamp(26px, 3vw, 40px); }

.timeline-item {
    min-height: 0;
    padding: 28px 34px;
}

.timeline-index { font-size: 2.4rem; }

.tech-card {
    min-height: 0;
    padding: clamp(26px, 3vw, 36px);
}

.hero-metrics strong { font-size: 1.6rem; }

.fact strong { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }

.case-content h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }

.case-metric { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }

.cta-panel h2,
.cta-band h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }

.page-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }

/* --- Marcas d'água tipográficas menores, para não brigar com o título --- */

.manifesto::before,
.services::before,
.process::before,
.cases::before,
.technology::before {
    font-size: clamp(64px, 8.5vw, 128px);
}

.hero-content::before { font-size: clamp(80px, 11vw, 170px); }

.site-footer::before { font-size: clamp(100px, 13vw, 210px); }

@media (max-width: 620px) {
    h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }

    .section { padding: 64px 0; }

    .section-header { margin-bottom: 32px; }

    .timeline-item { padding: 24px; }
}

/* ==================================================
   ENTRADAS CINEMATOGRÁFICAS
   Hero  → 02 · a luz do bunker acendendo
   Module 03 → 04 · varredura de radar
   ================================================== */

/* ---------- HERO · A LUZ ACENDENDO ---------- */

.entrada-luz {
    position: absolute;
    z-index: 40;
    inset: 0;
    pointer-events: none;
    background: rgba(4, 6, 8, 0);
}

.entrada-halo {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 70% at 32% 38%, rgba(255, 246, 228, .1), transparent 62%);
    opacity: 0;
}

[data-entrada="luz"].acender .entrada-luz { animation: salaAcende 2.35s steps(1, end) both; }
[data-entrada="luz"].acender .entrada-halo { animation: haloAcende 2.35s steps(1, end) both; }
[data-entrada="luz"].acender .hero-topo,
[data-entrada="luz"].acender .hero-reel,
[data-entrada="luz"].acender .hero-metrics { animation: conteudoAcende 2.35s steps(1, end) both; }

/* a lâmpada falha duas vezes antes de firmar */
@keyframes salaAcende {
    0%, 16%   { background: rgba(4, 6, 8, .58); }
    18%, 21%  { background: rgba(4, 6, 8, .14); }
    22%, 42%  { background: rgba(4, 6, 8, .5); }
    44%, 50%  { background: rgba(4, 6, 8, .08); }
    52%, 58%  { background: rgba(4, 6, 8, .36); }
    60%, 100% { background: rgba(4, 6, 8, 0); }
}

@keyframes haloAcende {
    0%, 16%   { opacity: .12; }
    18%, 21%  { opacity: .9; }
    22%, 42%  { opacity: .2; }
    44%, 50%  { opacity: .7; }
    52%, 58%  { opacity: .3; }
    60%, 100% { opacity: 1; }
}

@keyframes conteudoAcende {
    0%, 16%   { opacity: .34; }
    18%, 21%  { opacity: .95; }
    22%, 42%  { opacity: .4; }
    44%, 50%  { opacity: .86; }
    52%, 58%  { opacity: .55; }
    60%, 100% { opacity: 1; }
}

/* ---------- MODULE 03 · VARREDURA ---------- */

.entrada-varredura {
    position: absolute;
    z-index: 30;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, #9ed8ff, transparent);
    box-shadow: 0 0 30px 8px rgba(114, 203, 255, .5);
    opacity: 0;
}

[data-entrada="varredura"].varrer .entrada-varredura {
    animation: varrerSecao 1.9s cubic-bezier(.5, .02, .3, 1) both;
}

[data-entrada="varredura"].varrer .container {
    animation: revelarVarrido 1.9s cubic-bezier(.5, .02, .3, 1) both;
}

@keyframes varrerSecao {
    0%   { left: -1%; opacity: 0; }
    9%   { opacity: 1; }
    91%  { opacity: 1; }
    100% { left: 101%; opacity: 0; }
}

@keyframes revelarVarrido {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Antes de disparar, a seção fica invisível — mas só quando o JS confirma
   que vai animar. Sem JS, tudo aparece normalmente. */
.js-entradas [data-entrada="luz"]:not(.acender) .hero-topo,
.js-entradas [data-entrada="luz"]:not(.acender) .hero-reel,
.js-entradas [data-entrada="luz"]:not(.acender) .hero-metrics {
    opacity: .34;
}

.js-entradas [data-entrada="luz"]:not(.acender) .entrada-luz {
    background: rgba(4, 6, 8, .58);
}

.js-entradas [data-entrada="varredura"]:not(.varrer) .container {
    clip-path: inset(0 100% 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .entrada-luz,
    .entrada-halo,
    .entrada-varredura { display: none; }

    .js-entradas [data-entrada] .hero-topo,
    .js-entradas [data-entrada] .hero-reel,
    .js-entradas [data-entrada] .hero-metrics {
        opacity: 1;
    }

    .js-entradas [data-entrada="varredura"] .container {
        clip-path: none;
    }
}
/* --- Palavra-chave em gradiente, nos títulos de seção --- */

.destaque {
    background: linear-gradient(90deg, var(--blue-light), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Card de case clicável por inteiro ---

   O link do rodapé passa a cobrir o card. O texto continua selecionável e o
   foco por teclado continua caindo no link, que é o que o leitor de tela
   anuncia; só a área de clique cresce. */

.case-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* O ::after nasce dentro de .case-content, que é `position: relative` e vira
   o bloco de contenção: com `inset: 0` a camada cobria só a coluna de texto.
   O valor negativo estoura de propósito — quem recorta é o `overflow: hidden`
   do .case-card, e aí a camada alcança a imagem e a métrica, que são irmãs do
   conteúdo, não descendentes dele. */
.case-card .case-link::after {
    content: "";
    position: absolute;
    inset: -9999px;
    z-index: 3;
}

.case-card { position: relative; }

.case-card:focus-within {
    border-color: rgba(51, 170, 242, .5);
}

.case-cover:focus-visible {
    outline: none;
}

.case-card:focus-within::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 4;
    border: 2px solid var(--blue);
    border-radius: calc(var(--radius) + 3px);
    pointer-events: none;
}

/* --- Texto só para leitor de tela --- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================
   LUMINÁRIA DO HERO
   A fonte visível da luz que acende na entrada. Pende
   do topo, acende junto com a animação e derrama um
   feixe sobre o texto.
   ================================================== */

.luminaria {
    position: absolute;
    z-index: 3;
    top: 0;
    /* à direita do logotipo, para o cabo não cruzar a marca */
    left: clamp(210px, 20vw, 330px);
    width: clamp(64px, 7vw, 96px);
    pointer-events: none;
    color: rgba(160, 178, 194, .5);
}

.luminaria-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .55));
}

/* O bulbo é o que realmente "acende" */
.luminaria-bulbo {
    color: #2c3238;
    transform-origin: center;
}

/* O feixe: um cone de luz descendo da cúpula */
.luminaria-feixe {
    position: absolute;
    top: clamp(88px, 9.4vw, 128px);
    left: 50%;
    width: clamp(280px, 34vw, 520px);
    height: clamp(340px, 40vw, 620px);
    opacity: 0;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(255, 245, 226, .1),
        rgba(255, 245, 226, .04) 32%,
        transparent 68%);
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    filter: blur(34px);
}

/* --- Acende junto com a entrada da luz --- */

[data-entrada="luz"].acender .luminaria-bulbo {
    animation: bulboAcende 2.35s steps(1, end) both;
}

[data-entrada="luz"].acender .luminaria-feixe {
    animation: feixeAcende 2.35s steps(1, end) both;
}

[data-entrada="luz"].acender .luminaria {
    animation: corpoAcende 2.35s steps(1, end) both;
}

@keyframes bulboAcende {
    0%, 16%   { fill: #2c3238; filter: none; }
    18%, 21%  { fill: #fff3d6; filter: drop-shadow(0 0 16px rgba(255, 236, 194, .95)); }
    22%, 42%  { fill: #34393f; filter: none; }
    44%, 50%  { fill: #ffeecb; filter: drop-shadow(0 0 13px rgba(255, 236, 194, .8)); }
    52%, 58%  { fill: #3a4046; filter: none; }
    60%, 100% { fill: #fff6e2; filter: drop-shadow(0 0 20px rgba(255, 236, 194, .9)); }
}

@keyframes feixeAcende {
    0%, 16%   { opacity: 0; }
    18%, 21%  { opacity: .58; }
    22%, 42%  { opacity: .04; }
    44%, 50%  { opacity: .42; }
    52%, 58%  { opacity: .09; }
    60%, 100% { opacity: .62; }
}

@keyframes corpoAcende {
    0%, 16%   { color: rgba(160, 178, 194, .26); }
    18%, 21%  { color: rgba(214, 228, 240, .78); }
    22%, 42%  { color: rgba(160, 178, 194, .3); }
    44%, 50%  { color: rgba(206, 222, 236, .66); }
    52%, 58%  { color: rgba(160, 178, 194, .36); }
    60%, 100% { color: rgba(178, 196, 212, .58); }
}

/* Estado antes de acender: em penumbra, como o resto do hero */
.js-entradas [data-entrada="luz"]:not(.acender) .luminaria { color: rgba(160, 178, 194, .26); }
.js-entradas [data-entrada="luz"]:not(.acender) .luminaria-feixe { opacity: 0; }

/* --- Some quando não há espaço --- */

@media (max-width: 1024px) {
    .luminaria { left: clamp(150px, 22vw, 240px); }
}

@media (max-width: 820px) {
    .luminaria { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .luminaria-bulbo { fill: #fff6e2; }
    .luminaria-feixe { opacity: .62; }
    .luminaria { color: rgba(178, 196, 212, .58); }
}

/* ==================================================
   BOTÃO DE SOM DO SHOWREEL
   O vídeo entra sem som porque o autoplay exige isso.
   Este botão devolve o áudio a quem quiser.
   ================================================== */

.reel-som {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(8, 10, 12, .62);
    color: rgba(244, 246, 248, .9);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.reel-som:hover {
    border-color: rgba(51, 170, 242, .55);
    background: rgba(51, 170, 242, .16);
    color: #fff;
}

.reel-som svg { flex: none; }

/* alterna o ícone conforme o estado */
.reel-som .reel-som-on { display: none; }
.reel-som[aria-pressed="true"] .reel-som-off { display: none; }
.reel-som[aria-pressed="true"] .reel-som-on { display: block; }

.reel-som[aria-pressed="true"] {
    border-color: rgba(51, 170, 242, .5);
    background: rgba(51, 170, 242, .18);
}

@media (max-width: 620px) {
    .reel-som {
        right: 10px;
        bottom: 10px;
        padding: 8px 12px;
    }

    .reel-som-texto { display: none; }
}

/* ==================================================
   SUBMENU DE SERVIÇOS
   O menu "Serviços" abre a lista das cinco frentes.
   A ordem é a da hierarquia da casa: presença digital
   primeiro, e depois o que ela exige.

   Abre por hover, por foco de teclado e por clique no
   caret — hover sozinho deixa de fora quem navega por
   teclado e quem está no toque.
   ================================================== */

.tem-submenu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: rgba(244, 246, 248, .6);
    cursor: pointer;
    transition: color .3s ease, transform .3s var(--ease);
}

.tem-submenu:hover .submenu-toggle,
.tem-submenu:focus-within .submenu-toggle {
    color: #fff;
}

.tem-submenu:hover .submenu-toggle,
.tem-submenu.aberto .submenu-toggle,
.tem-submenu:focus-within .submenu-toggle {
    transform: rotate(180deg);
}

/* Ponte invisível entre o item e o painel: sem ela, o
   submenu fecha quando o mouse atravessa o vão. */
.tem-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
}

.main-nav .submenu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 13px);
    left: -20px;
    display: grid;
    gap: 1px;
    min-width: 268px;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(11, 12, 14, .96);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s ease, visibility .28s ease, transform .28s var(--ease);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.tem-submenu:hover .submenu,
.tem-submenu:focus-within .submenu,
.tem-submenu.aberto .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .submenu a {
    padding: 10px 14px;
    border-radius: 9px;
    color: rgba(244, 246, 248, .78);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
}

.main-nav .submenu a::after { display: none; }

.main-nav .submenu a:hover,
.main-nav .submenu a:focus-visible,
.main-nav .submenu a.is-active {
    background: rgba(51, 170, 242, .13);
    color: #fff;
}

/* "Ver todos" fecha a lista e volta para a página-mãe */
.main-nav .submenu-todos {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.main-nav .submenu-todos a {
    color: var(--muted-2);
    font-size: .8rem;
    letter-spacing: .02em;
}

/* --- No menu mobile o painel vira lista recolhida --- */

@media (max-width: 820px) {
    .tem-submenu {
        display: block;
        position: relative;
    }

    .tem-submenu::after { content: none; }

    .main-nav .tem-submenu > a {
        padding-right: 54px;
    }

    /* O caret encosta na linha do próprio item, sem tirá-lo do fluxo */
    .submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        height: 52px;
        padding: 0 14px;
        transform: none;
    }

    /* No toque, hover e foco não devem abrir sozinhos:
       aqui quem manda é o botão. */
    .tem-submenu:hover .submenu,
    .tem-submenu:focus-within .submenu {
        display: none;
    }

    .main-nav .submenu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0 0 6px;
        padding: 4px 0 8px 14px;
        border: 0;
        border-left: 1px solid var(--line-strong);
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .tem-submenu.aberto .submenu {
        display: grid;
    }

    .tem-submenu.aberto .submenu-toggle {
        transform: rotate(180deg);
    }

    .main-nav .submenu a {
        padding: 11px 0;
        border-bottom: 0;
        font-size: .96rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .submenu,
    .submenu-toggle {
        transition: none;
    }
}

/* ==================================================
   CASES DA HOME — dois pesos, não três iguais
   Um trabalho em destaque no cartão largo que já
   existia, e três em cartões menores embaixo. Quatro
   cases ocupam menos rolagem do que os três de antes.
   ================================================== */

/* O destaque encolheu: 520px era altura de seção, não de cartão. */
.cases-list .case-card,
.cases-list .case-media {
    min-height: clamp(360px, 32vw, 440px);
}

.cases-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.case-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #101316;
    transition: border-color var(--transition), transform var(--transition);
}

.case-mini:hover {
    border-color: rgba(51, 170, 242, .28);
    transform: translateY(-5px);
}

.case-mini-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.case-mini-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.84) contrast(1.06) saturate(.9);
    transition: transform 1.05s var(--ease-out), filter .7s ease;
}

.case-mini:hover .case-mini-media img {
    filter: brightness(.98) contrast(1.03) saturate(1);
    transform: scale(1.06);
}

.case-mini-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 44%, rgba(4, 5, 6, .62));
}

/* A métrica vira pastilha sobre a imagem: economiza a coluna de 190px que o
   cartão grande gasta com ela. */
.case-mini-metric {
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 13px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(8, 10, 12, .72);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.case-mini-metric .case-metric-unit {
    color: var(--muted-2);
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.case-mini-conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.case-mini-conteudo .case-category {
    font-size: .66rem;
}

.case-mini-conteudo h3 {
    font-size: 1.25rem;
}

.case-mini-conteudo p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.58;
}

.case-mini:focus-within {
    border-color: rgba(51, 170, 242, .5);
}

.cases .section-note {
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .cases-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cases-mini {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-mini,
    .case-mini-media img {
        transition: none;
    }

    .case-mini:hover {
        transform: none;
    }

    .case-mini:hover .case-mini-media img {
        transform: none;
    }
}

/* ==================================================
   MODULE 03 — ONDE VOCÊ APARECE
   Painel de instrumentos, não seis cartões soltos: o
   gap de 1px sobre o fundo cor de linha faz a retícula
   de fio de cabelo que amarra as seis placas em uma
   peça só.

   Sem as marcas do Google, de propósito. O argumento
   está no comentário do topo de _src/paginas/home.html
   e no INDICE da pesquisa. Resumo: três logos do Google
   enfileirados na home de uma agência são lidos como
   "parceiro oficial" — credencial que não existe.
   ================================================== */

.telas {
    position: relative;
    background: linear-gradient(180deg, #0a0b0c, #070707);
}

/* --- rótulo de faixa: a hierarquia dita pelo layout --- */

.tela-faixa {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(34px, 3.6vw, 46px) 0 16px;
    color: var(--blue);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tela-faixa-linha {
    width: 28px;
    height: 1px;
    background: var(--blue);
    opacity: .6;
}

/* --- o painel --- */

.telas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
}

.tela {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 2.4vw, 30px);
    background: #0d1013;
    transition: background-color .3s ease;
}

/* o entalhe que faz a placa ler como aparelho, não como cartão */
.tela::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 2px;
    background: rgba(51, 170, 242, .22);
    transform: translateX(-50%);
    transition: background-color .3s ease;
}

.tela-num {
    position: absolute;
    top: clamp(18px, 2vw, 24px);
    right: clamp(18px, 2vw, 24px);
    color: var(--muted-2);
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    opacity: .35;
}

.tela-glifo {
    width: 40px;
    height: 40px;
    color: rgba(244, 246, 248, .5);
    transition: color .3s ease;
}

/* Em cada glifo, exatamente UM elemento é azul. É isso que faz seis desenhos
   lerem como família em vez de seis ícones baixados de lugares diferentes. */
.tela-acento {
    color: rgba(51, 170, 242, .9);
}

/* A primeira faixa é a especialização da casa: os glifos dela já nascem azuis.
   Classe explícita, não :first-of-type — o primeiro <div> do container é a
   etiqueta "Module 03", então o seletor por tipo pegaria a faixa errada. */
.telas-grid-decisao .tela-glifo {
    color: rgba(51, 170, 242, .72);
}

.tela h3 {
    font-size: 1.05rem;
    line-height: 1.25;
}

.tela p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.58;
}

.tela:hover,
.tela:focus-within {
    background: #10151a;
}

.tela:hover .tela-glifo,
.tela:focus-within .tela-glifo {
    color: var(--blue);
}

.tela:hover::before,
.tela:focus-within::before {
    background: var(--blue);
}

.telas .section-note {
    margin-top: clamp(34px, 3.6vw, 48px);
}

@media (max-width: 1024px) {
    .telas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .telas-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tela,
    .tela::before,
    .tela-glifo {
        transition: none;
    }
}

/* ==================================================
   BASTIDORES — tira horizontal
   Os registros são stories, 9:16. Virar grade seria a
   quarta grade da home; uma tira que rola de lado
   quebra o ritmo e é a forma natural do vertical.

   Sai do .container de propósito: a tira encosta na
   borda da tela, e é isso que diz "tem mais aí do lado".
   ================================================== */

.bastidores {
    position: relative;
    background: linear-gradient(180deg, #090a0c, #0b0c0e);
}

.bastidores-tira {
    display: flex;
    gap: 16px;
    margin-top: clamp(30px, 3.4vw, 44px);
    padding: 4px clamp(20px, 5vw, 64px) 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    -webkit-overflow-scrolling: touch;
}

.bastidores-tira:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

.bastidores-tira::-webkit-scrollbar {
    height: 6px;
}

.bastidores-tira::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--line-strong);
}

.bastidor {
    position: relative;
    flex: 0 0 auto;
    width: clamp(178px, 17vw, 236px);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #0d1013;
    scroll-snap-align: start;
    transition: border-color var(--transition), transform var(--transition);
}

.bastidor:hover {
    border-color: rgba(51, 170, 242, .3);
    transform: translateY(-5px);
}

.bastidor img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    /* os stories vêm com compressão do Instagram; o escurecido de sempre
       assenta todos no mesmo tom e disfarça a diferença entre eles */
    filter: brightness(.82) contrast(1.05) saturate(.92);
    transition: filter .6s ease;
}

.bastidor:hover img {
    filter: brightness(1) contrast(1) saturate(1);
}

.bastidor figcaption {
    padding: 13px 14px 15px;
    border-top: 1px solid var(--line);
    color: var(--muted-2);
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .bastidor {
        width: 62vw;
    }

    .bastidores-tira {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bastidores-tira {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

    .bastidor,
    .bastidor img {
        transition: none;
    }

    .bastidor:hover {
        transform: none;
    }
}

/* ============================================================
   GRADES DE PERFIL
   ------------------------------------------------------------
   Nove posts recortados do perfil e remontados em quadrado.

   Por que remontar e não printar a tela: o print traria avatar,
   biografia, número de seguidores e botão de seguir — tudo ficha
   do cliente. A grade traz só as peças, que é o que a casa
   produziu. É a mesma regra do resto do site: o assunto é o
   trabalho, não quem contratou.
   ============================================================ */

.grades-perfil {
    display: grid;
    gap: clamp(18px, 2.4vw, 30px);
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    margin-top: clamp(30px, 3.4vw, 44px);
}

.grade-perfil {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-deep);
    transition: border-color var(--transition), transform var(--transition);
}

.grade-perfil:hover {
    border-color: rgba(51, 170, 242, .3);
    transform: translateY(-5px);
}

.grade-perfil img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* as miniaturas vêm com a compressão do Instagram; o escurecido de
       sempre assenta as três no mesmo tom e deixa a diferença de direção
       de arte aparecer sem a diferença de exposição atrapalhar */
    filter: brightness(.86) saturate(.95);
    transition: filter .6s ease;
}

.grade-perfil:hover img {
    filter: none;
}

.grade-perfil figcaption {
    flex: 1;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--line);
}

.grade-perfil figcaption strong {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.grade-perfil figcaption p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
}

.grade-perfil-onde {
    display: inline-block;
    margin-top: 12px;
    color: rgba(178, 203, 224, .95);
    font-size: .78rem;
    letter-spacing: .01em;
    text-decoration: underline;
    text-decoration-color: rgba(51, 170, 242, .45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .25s ease, text-decoration-color .25s ease;
}

.grade-perfil-onde:hover,
.grade-perfil-onde:focus-visible {
    color: var(--blue-light);
    text-decoration-color: var(--blue-light);
}

/* A grade só faz sentido quadrada. No 16/10 padrão do bloco de prova sobra
   uma faixa do meio, e o argumento — nove peças seguindo o mesmo eixo — some
   junto com a primeira e a última linha. */
.service-proof-media.is-grade {
    aspect-ratio: 1 / 1;
}

@media (prefers-reduced-motion: reduce) {
    .grade-perfil,
    .grade-perfil img,
    .grade-perfil-onde {
        transition: none;
    }

    .grade-perfil:hover {
        transform: none;
    }
}