/* Estilos compartilhados do site Maxtecno (index.html e desenvolvimento.html) */

:root {
    --bg-color: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --accent: #68a8f6;
    --accent-hover: #171913;
    --text-primary: #FFFFFF;
    --text-secondary: #9e9e9e;
    --border-color: #222222;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* Lenis Base CSS */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: url('cursor.svg') 0 0, auto;
}

/* Cursor personalizado para interações (Botões e Links) */
a, button, .btn-nav, .btn-shiny, .whatsapp-float, [role="button"] {
    cursor: url('cursor-pointer.svg') 0 0, pointer !important;
}

/* Esconde a barra nativa travada do Chrome que não aceita animação */
body::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* Scrollbar Customizada (Permite Fade-out suave 0.6s) */
.custom-scrollbar-track {
    position: fixed;
    top: 0;
    right: 0;
    width: 12px;
    height: 100vh;
    background: var(--bg-secondary);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
    pointer-events: none;
}

.custom-scrollbar-thumb {
    position: fixed;
    top: 0;
    right: 0;
    width: 12px;
    background-image: linear-gradient(0deg, #68a8f6, #7B24F8);
    border-radius: 20px;
    border: 3px solid var(--bg-secondary);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
    pointer-events: none;
}

body.is-scrolling .custom-scrollbar-track,
body.is-scrolling .custom-scrollbar-thumb {
    opacity: 1;
    visibility: visible;
}

/* Tipografia */
h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.overline {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.highlight {
    color: var(--accent);
}

/* Layout */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

section {
    padding: 8rem 0;
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 2.5rem;
    border-radius: 99px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--bg-color);
    box-shadow: 0 0 20px rgba(104, 168, 246, 0.15);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 0 40px rgba(104, 168, 246, 0.3);
    transform: translateY(-3px) scale(1.02);
}

.cta-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    align-items: flex-start;
}

.cta-group.center {
    align-items: center;
}

.cta-support {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-support::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
}

/* Componentes */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem 2rem;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    background-color: #1a1a1a;
}

.cards-stack {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    max-width: 800px;
    margin: 4rem auto 0;
    position: relative;
    padding-bottom: 20vh;
}

@property --angle {
    syntax: "<angle>"; 
    inherits: true;
    initial-value: 0turn; 
}

@keyframes spin {
    to { --angle: 1turn; }
} 

.card-stacked {
    position: sticky;
    top: calc(15vh + (var(--index) * 20px));
    box-shadow: 0 -30px 60px rgba(0,0,0,0.9);
    z-index: var(--index);
    height: auto;
    transform-origin: top center;
    --border-width: 2px;
    border: var(--border-width) solid transparent;
    isolation: isolate;
    border-radius: 20px;
}

.card-stacked::before {
    content: "";
    position: absolute; 
    inset: calc(var(--border-width) * -1);
    border: inherit; 
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), rgba(255,255,255,0.05) 80%, var(--accent) 88%, var(--accent) 92%, rgba(255,255,255,0.05) 100%);
    background-origin: border-box; 
    -webkit-mask:
        linear-gradient(black, black) content-box,
        linear-gradient(black, black);
    mask: linear-gradient(black, black),
          linear-gradient(black, black);  
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 4s linear infinite; 
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-stacked.active-border::before {
    opacity: 1;
}

.card-stacked:hover::before {
    animation-play-state: paused; 
}

.card-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(104, 168, 246, 0.1);
    border: 1px solid rgba(104, 168, 246, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: var(--accent);
}

.card-icon svg {
    width: 28px;
    height: 28px;
}

/* Família de ícones 3D Maxtecno: atlas único para carregamento rápido e visual consistente. */
.card-icon.icon-3d {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border: 0;
    border-radius: 20px;
    background-color: transparent;
    background-image: url('assets/icons/maxtecno-3d-atlas.png');
    background-repeat: no-repeat;
    background-size: 400% 400%;
    filter: drop-shadow(0 12px 18px rgba(24, 69, 180, .28));
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.card-icon.icon-3d svg { display: none; }
.card-icon.icon-3d:hover,
.card:hover .card-icon.icon-3d,
.dev-servico:hover .card-icon.icon-3d,
.dev-porque:hover .card-icon.icon-3d,
.mm-recurso:hover .card-icon.icon-3d {
    transform: translateY(-5px) rotate(-3deg) scale(1.06);
    filter: drop-shadow(0 18px 24px rgba(104, 168, 246, .38));
}

.icon-3d[data-icon="roi"]       { background-position: 0 0; }
.icon-3d[data-icon="strategy"]  { background-position: 33.333% 0; }
.icon-3d[data-icon="funnel"]    { background-position: 66.667% 0; }
.icon-3d[data-icon="briefcase"] { background-position: 100% 0; }
.icon-3d[data-icon="dashboard"] { background-position: 0 33.333%; }
.icon-3d[data-icon="ai"]        { background-position: 33.333% 33.333%; }
.icon-3d[data-icon="shield"]    { background-position: 66.667% 33.333%; }
.icon-3d[data-icon="website"]   { background-position: 100% 33.333%; }
.icon-3d[data-icon="shop"]      { background-position: 0 66.667%; }
.icon-3d[data-icon="server"]    { background-position: 33.333% 66.667%; }
.icon-3d[data-icon="phone"]     { background-position: 66.667% 66.667%; }
.icon-3d[data-icon="growth"]    { background-position: 100% 66.667%; }
.icon-3d[data-icon="speed"]     { background-position: 0 100%; }
.icon-3d[data-icon="ads"]       { background-position: 33.333% 100%; }
.icon-3d[data-icon="chat"]      { background-position: 66.667% 100%; }
.icon-3d[data-icon="target"]    { background-position: 100% 100%; }

.mm-recurso .card-icon.icon-3d {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 16px;
}

@media (max-width: 640px) {
    .card-icon.icon-3d {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }
}

/* Header: largo e transparente no topo; ao rolar vira uma barra flutuante arredondada */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 0;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

header.scrolled {
    padding: 0.9rem 0;
    background: transparent;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 18px;
    transition:
        max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

header.scrolled .header-content {
    width: calc(100% - 2rem);
    max-width: 1060px;
    padding: 0.45rem 0.5rem 0.45rem 1.1rem;
    background-color: rgba(10, 10, 14, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* A logo encolhe junto com a barra (o tamanho inicial está no atributo style do HTML) */
header .logo-link img {
    height: 56px !important;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

header.scrolled .logo-link img {
    height: 40px !important;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.05em;
}

.logo span {
    color: var(--accent);
}

nav {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
}

/* Links em formato de botão "fantasma": ganham fundo ao passar o mouse */
nav a:not(.btn-nav) {
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.3s, background-color 0.3s;
}

nav a:not(.btn-nav):hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
}

.btn-nav {
    position: relative;
    margin-left: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-radius: 200px;
    background: linear-gradient(
        to right,
        #68a8f6, #7B24F8, #68a8f6, #68a8f6, #7B24F8, #68a8f6
    );
    background-size: 250%;
    background-position: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 1s ease, padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--text-primary) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    z-index: 1;
}

header.scrolled .btn-nav {
    padding: 0.6rem 1.35rem;
}

.btn-nav::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 200px;
    background-color: rgba(9, 9, 9, 0.95);
    z-index: -1;
    transition: all 1s ease;
}

.btn-nav:hover {
    background-position: right;
    color: #68a8f6 !important;
}

.btn-nav:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* Seletor de idioma PT | EN (inserido pelo _build/construir.js em todas as páginas) */
.idioma {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 0.75rem;
    padding: 3px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.idioma a {
    padding: 0.32rem 0.6rem;
    border-radius: 99px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 0.3s, background-color 0.3s;
}

.idioma a:hover {
    color: #fff;
}

.idioma a[aria-current="true"] {
    color: #fff;
    background: linear-gradient(135deg, #68a8f6, #8b5cf6);
    box-shadow: 0 0 14px rgba(104, 168, 246, 0.35);
}

/* Botão do menu no celular (criado pelo base.js): três linhas que viram um X */
.menu-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.menu-toggle span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 27px; }

.menu-aberto .menu-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-aberto .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.menu-aberto .menu-toggle span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Menu em tela cheia do celular (criado pelo base.js) */
.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 6.5rem 1.25rem 2rem;
    background: rgba(5, 5, 8, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}

.menu-aberto .menu-mobile {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.menu-aberto .whatsapp-float {
    opacity: 0;
    pointer-events: none;
}

.menu-mobile-links {
    display: grid;
    gap: 0.25rem;
}

.menu-mobile-links a {
    padding: 0.95rem 1rem;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(8px);
    transition: background-color 0.3s, opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-mobile-links a:hover,
.menu-mobile-links a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.06);
}

.menu-aberto .menu-mobile-links a {
    opacity: 1;
    transform: none;
}

.menu-aberto .menu-mobile-links a:nth-child(2) { transition-delay: 0.04s; }
.menu-aberto .menu-mobile-links a:nth-child(3) { transition-delay: 0.08s; }
.menu-aberto .menu-mobile-links a:nth-child(4) { transition-delay: 0.12s; }
.menu-aberto .menu-mobile-links a:nth-child(5) { transition-delay: 0.16s; }
.menu-aberto .menu-mobile-links a:nth-child(6) { transition-delay: 0.2s; }

.menu-mobile .btn-nav {
    width: 100%;
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
}

@media (max-width: 900px) {
    nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    /* No celular o seletor fica colado ao botão de menu */
    .idioma {
        margin-left: auto;
        margin-right: 0.6rem;
    }

    header .logo-link img {
        height: 46px !important;
    }

    header.scrolled .logo-link img {
        height: 36px !important;
    }

    header.scrolled .header-content {
        width: calc(100% - 1.5rem);
        padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    }

    /* Com o menu aberto, a barra volta a ficar lisa por cima do menu */
    .menu-aberto header .header-content {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    header,
    .header-content,
    header .logo-link img,
    .menu-mobile,
    .menu-mobile-links a {
        transition: none;
    }
}

/* Hero: grade ao fundo, título central e um "horizonte" curvo brilhando embaixo */
.hero {
    position: relative;
    min-height: calc(100vh - 40px);
    padding: 10rem 1.5rem 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(to bottom, #000 0%, #000 30%, #0b1633 78%, #1b2350 100%);
    isolation: isolate;
}

/* Grade que some em direção às bordas */
.hero-grade {
    position: absolute;
    inset: 0 0 auto;
    height: 600px;
    z-index: -1;
    opacity: 0.8;
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 6rem 5rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
    mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

/* Horizonte: elipse preta com a borda acesa nas cores da Maxtecno */
.hero-horizonte {
    position: absolute;
    left: 50%;
    top: calc(100% - 150px);
    width: 140%;
    /* Centraliza com margem (e não com transform) para o globo não "entortar" ao ser esticado pelo script */
    margin-left: -70%;
    height: 750px;
    z-index: -1;
    border-radius: 100%;
    background: radial-gradient(closest-side, #000 82%, #3b5bdb 93%, #68a8f6 97%, #c4b5fd);
    box-shadow: 0 -30px 140px rgba(104, 168, 246, 0.35), 0 -10px 60px rgba(168, 85, 247, 0.25);
    opacity: 0;
    animation: hero-sobe 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Brilho extra do globo que aumenta conforme a rolagem (--brilho vem do script) */
.hero-horizonte::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 -40px 220px rgba(104, 168, 246, 0.55), 0 -8px 60px rgba(196, 181, 253, 0.45);
    opacity: var(--brilho, 0);
    pointer-events: none;
}

/* Luz que desliza devagar pela borda do globo, como um nascer do sol */
.hero-horizonte-luz {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%, transparent 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-mask-image: radial-gradient(closest-side, transparent 91%, #000 96.5%, transparent 99.5%);
    mask-image: radial-gradient(closest-side, transparent 91%, #000 96.5%, transparent 99.5%);
    mix-blend-mode: screen;
    animation: luz-varre 9s ease-in-out infinite alternate;
}

@keyframes luz-varre {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}

.hero-conteudo {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    will-change: transform, opacity;
}

/* Começo da seção seguinte: fundo preto que continua o globo e uma linha de luz no topo */
#problema {
    border-top-color: transparent;
    background: linear-gradient(to bottom, #000 0, var(--bg-secondary) 260px);
}

.transicao-linha {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #68a8f6 25%, #c4b5fd 50%, #a855f7 75%, transparent);
    box-shadow: 0 0 24px rgba(104, 168, 246, 0.8), 0 0 60px rgba(168, 85, 247, 0.45);
    transform: scaleX(var(--linha, 0));
    opacity: var(--linha, 0);
    pointer-events: none;
}

/* Etiqueta em pílula com setinha */
.hero-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 99px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(to top right, rgba(212, 212, 216, 0.05), rgba(156, 163, 175, 0.05), transparent);
    color: #9ca3af;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s;
}

.hero-etiqueta:hover {
    color: #fff;
    border-color: rgba(104, 168, 246, 0.35);
}

.hero-etiqueta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.hero-etiqueta:hover svg {
    transform: translateX(4px);
}

.hero h1 {
    padding: 1.5rem 0;
    margin: 0;
    font-size: clamp(3rem, 7.5vw, 6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    text-wrap: balance;
    background: linear-gradient(to bottom right, #fff 30%, rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero h1 .hero-destaque {
    background: linear-gradient(90deg, #68a8f6, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitulo {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: #9ca3af;
}

.hero .cta-group {
    margin-top: 0;
    align-items: center;
}

/* Espaço abaixo do botão até o horizonte */
.hero-respiro {
    height: 14rem;
}

/* Entrada em sequência: etiqueta, título, subtítulo e botão */
.hero-entra {
    opacity: 0;
    animation: hero-aparece 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-entra:nth-child(2) { animation-delay: 0.15s; }
.hero-entra:nth-child(3) { animation-delay: 0.3s; }
.hero-entra:nth-child(4) { animation-delay: 0.45s; }

@keyframes hero-aparece {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-sobe {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
    .hero-horizonte {
        top: calc(100% - 90px);
        width: 1100px;
        margin-left: -550px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .hero-horizonte {
        width: 700px;
        margin-left: -350px;
        height: 500px;
    }

    .hero-etiqueta {
        padding: 0.45rem 1rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .hero .cta-support {
        justify-content: center;
        text-align: center;
        font-size: 0.78rem;
    }

    .hero .cta-support::before {
        display: none;
    }

    .hero-respiro {
        height: 9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-entra,
    .hero-horizonte {
        animation: none;
        opacity: 1;
    }

    .hero-horizonte-luz {
        animation: none;
        opacity: 0;
    }
}

/* Problema */
.problem-section {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    position: relative;
}

.problem-statement {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.5;
    border-left: 4px solid var(--accent);
    padding-left: 2.5rem;
    margin: 4rem 0;
    max-width: 900px;
}

/* Testemunhos */
.testimonial-card {
    background-color: var(--bg-secondary);
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 2rem;
    right: 3rem;
    font-size: 6rem;
    color: rgba(104, 168, 246, 0.1);
    font-family: serif;
    line-height: 1;
}

.testimonial-text {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--border-color));
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent);
    font-size: 1.25rem;
}

.author-info h4 {
    font-size: 1.125rem;
    margin-bottom: 0.125rem;
    color: var(--text-primary);
}

.author-info p {
    font-size: 0.875rem;
    margin-bottom: 0;
    color: var(--text-secondary);
}

/* Carrossel de depoimentos */
.depo-carrossel {
    max-width: 880px;
    margin: 0 auto;
}

.depo-janela {
    overflow: hidden;
    border-radius: 28px;
    touch-action: pan-y;
}

.depo-trilho {
    display: flex;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.depo-trilho.arrastando {
    transition: none;
}

.depo-slide {
    flex: 0 0 100%;
    padding: 0 2px;
}

.depo-card {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 3.5rem 3rem;
    border-radius: 28px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(104, 168, 246, 0.12), transparent 70%),
        linear-gradient(180deg, #111, #0b0b0b);
    user-select: none;
    -webkit-user-select: none;
}

.depo-aspas {
    position: absolute;
    top: 1.25rem;
    right: 2.5rem;
    font-family: Georgia, serif;
    font-size: 9rem;
    line-height: 1;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.35;
}

.depo-destaque {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 99px;
    background: rgba(104, 168, 246, 0.12);
    border: 1px solid rgba(104, 168, 246, 0.3);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
}

.depo-texto {
    position: relative;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 2.5rem;
}

/* O conteúdo do slide que entra sobe de leve; o que sai fica apagado */
.depo-slide .depo-destaque,
.depo-slide .depo-texto,
.depo-slide .testimonial-author {
    opacity: 0.15;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.depo-slide.ativo .depo-destaque,
.depo-slide.ativo .depo-texto,
.depo-slide.ativo .testimonial-author {
    opacity: 1;
    transform: none;
}

.depo-slide.ativo .depo-texto { transition-delay: 0.1s; }
.depo-slide.ativo .testimonial-author { transition-delay: 0.2s; }

.depo-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.depo-controles[hidden] {
    display: none;
}

.depo-dots {
    display: flex;
    gap: 8px;
}

/* Bolinha ativa vira uma barrinha que enche até a troca automática */
.depo-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #333;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.4s ease;
}

.depo-dots button.ativo {
    width: 44px;
}

.depo-dots button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #68a8f6, #a855f7);
    transform: scaleX(var(--progresso, 0));
    transform-origin: left;
}

@media (max-width: 768px) {
    .depo-card {
        padding: 2.5rem 1.75rem 2rem;
    }

    .depo-aspas {
        font-size: 6rem;
        right: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .depo-trilho,
    .depo-slide .depo-destaque,
    .depo-slide .depo-texto,
    .depo-slide .testimonial-author {
        transition: none;
    }
}

/* CTA Final */
.cta-section {
    text-align: center;
    background: radial-gradient(circle at center, var(--bg-secondary) 0%, var(--bg-color) 100%);
    border-top: 1px solid var(--border-color);
}

.cta-section h2 {
    max-width: 800px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    line-height: 1.2;
}

/* Efeito de Rotação (Blur) CTA Final */
.text-blur-in {
    -webkit-animation: start-blur-in 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: start-blur-in 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes start-blur-in {
    0% {
        letter-spacing: -0.05em;
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
    }
    100% {
        letter-spacing: -0.04em;
        -webkit-filter: blur(0);
                filter: blur(0);
        opacity: 1;
    }
}
@keyframes start-blur-in {
    0% {
        letter-spacing: -0.05em;
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
    }
    100% {
        letter-spacing: -0.04em;
        -webkit-filter: blur(0);
                filter: blur(0);
        opacity: 1;
    }
}

/* Typeform Section */
.typeform-section {
    background-color: #111111;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    width: 100%;
}

.progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 10;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 0 4px 4px 0;
}

.tf-container {
    max-width: 800px;
    margin: 0 auto;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-step {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    width: 100%;
    text-align: center;
}

.tf-step.active-step {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.tf-step h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 3rem;
    color: var(--text-primary);
}

.tf-overline {
    display: inline-block;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.tf-input {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    transition: all 0.3s ease;
    outline: none;
    text-align: center;
}

.tf-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(104, 168, 246, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.tf-options-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.tf-option {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    color: #ccc;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-align: center;
}

.tf-option:hover, .tf-option:focus {
    border-color: var(--accent);
    background: rgba(104, 168, 246, 0.08);
    color: #fff;
    box-shadow: 0 0 25px rgba(104, 168, 246, 0.25);
    transform: scale(1.03);
    outline: none;
}

.tf-option.selected {
    border-color: var(--accent);
    background: rgba(104, 168, 246, 0.14);
    color: #fff;
}

.tf-option-desc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.tf-options-grid.cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 760px;
}

.tf-options-grid.cols-2 .tf-option {
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
}

.tf-step h2.has-sub {
    margin-bottom: 0.75rem;
}

.tf-sub {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
}

.tf-question {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.tf-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.tf-options-grid + .tf-actions,
.tf-outro {
    margin-top: 2rem;
}

.tf-outro .tf-input {
    margin-bottom: 0;
}

.btn-shiny[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.tf-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-link:hover {
    color: #fff;
}

.tf-voltar {
    display: block;
    margin: 2rem auto 0;
    text-decoration: none;
}

@media (max-width: 640px) {
    .tf-options-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    .tf-question {
        font-size: 1.5rem;
    }
}

/* Método (seção A Solução): linha em serpentina que se desenha com a rolagem */
.metodo {
    position: relative;
    max-width: 1100px;
    margin: 2rem auto 0;
    padding: 90px 0 140px;
}

.metodo-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.metodo-trilha {
    fill: none;
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 1.5;
}

.metodo-progresso {
    fill: none;
    stroke: url(#metodo-grad);
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(104, 168, 246, 0.55));
}

.metodo-ponta {
    fill: #fff;
    opacity: 0;
    filter: drop-shadow(0 0 6px #68a8f6) drop-shadow(0 0 14px #68a8f6);
    transition: opacity 0.3s;
}

.metodo-passo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 380px;
}

.metodo-conteudo {
    opacity: 0.25;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.metodo-passo.direita .metodo-conteudo {
    grid-column: 2;
    padding: 4rem 6.5rem 4rem 1rem;
}

.metodo-passo.esquerda .metodo-conteudo {
    grid-column: 1;
    padding: 4rem 1rem 4rem 6.5rem;
}

.metodo-passo.ativo .metodo-conteudo {
    opacity: 1;
    transform: none;
}

.metodo-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.metodo-num {
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    box-shadow: 0 0 0 rgba(104, 168, 246, 0);
    transition: box-shadow 0.8s ease;
}

.metodo-passo.ativo .metodo-num {
    box-shadow: 0 0 22px rgba(104, 168, 246, 0.45);
}

.metodo .card-icon {
    width: 48px;
    height: 48px;
    margin: 0;
}

.metodo .card-icon svg {
    width: 22px;
    height: 22px;
}

.metodo-conteudo h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.metodo-conteudo p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .metodo {
        padding: 40px 0 80px;
    }

    .metodo-passo {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .metodo-passo.direita .metodo-conteudo,
    .metodo-passo.esquerda .metodo-conteudo {
        grid-column: 1;
        padding: 2.5rem 0 2.5rem 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .metodo-conteudo {
        opacity: 1;
        transform: none;
    }
}

/* Comparativo: agência comum x Maxtecno */
.comparativo {
    --origem-x: 50%;
    --raio: 0px;
    --clarao: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.comparativo > .container {
    position: relative;
    z-index: 1;
}

/* Fundo colorido revelado por um círculo de borda suave que nasce na ponta da linha */
.comparativo-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(90% 60% at var(--origem-x) 0%, rgba(104, 168, 246, 0.28), transparent 70%),
        radial-gradient(70% 50% at 100% 100%, rgba(168, 85, 247, 0.22), transparent 70%),
        linear-gradient(180deg, #0d1531 0%, #120d2a 55%, #0a0814 100%);
    -webkit-mask-image: radial-gradient(circle at var(--origem-x) 0, #000 calc(var(--raio) - 120px), transparent var(--raio));
    mask-image: radial-gradient(circle at var(--origem-x) 0, #000 calc(var(--raio) - 120px), transparent var(--raio));
}

/* Clarão no ponto em que a linha encosta na seção */
.comparativo-clarao {
    position: absolute;
    top: 0;
    left: var(--origem-x);
    width: 900px;
    height: 900px;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 170, 255, 0.55) 0%, rgba(104, 168, 246, 0.18) 30%, transparent 65%);
    transform: translate(-50%, -50%) scale(calc(0.2 + var(--clarao) * 0.8));
    opacity: var(--clarao);
}

.comparativo-cabecalho {
    max-width: 760px;
    margin-bottom: 3.5rem;
}

.comparativo-cabecalho h2 {
    margin-bottom: 1rem;
}

.comparativo-cabecalho p {
    font-size: 1.125rem;
    margin: 0;
}

.comparativo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.comparativo-card {
    border-radius: 24px;
    padding: 2.75rem 2.5rem 2rem;
}

.comparativo-card.comum {
    background: rgba(5, 5, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.comparativo-card.comum h3 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #8a8a8a;
    margin: 0;
    height: 44px;
    display: flex;
    align-items: center;
}

.comparativo-card.maxtecno {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 0%, rgba(168, 85, 247, 0.35), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(104, 168, 246, 0.25), transparent 55%),
        linear-gradient(160deg, #0f1a33, #1a1030);
    border: 1px solid rgba(104, 168, 246, 0.35);
    box-shadow: 0 30px 80px rgba(104, 168, 246, 0.12);
}

/* Brilho que percorre a borda do card da Maxtecno */
.comparativo-card.maxtecno::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--angle), transparent 70%, #68a8f6 82%, #a855f7 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 6s linear infinite;
    pointer-events: none;
}

/* O arquivo da logo tem espaço vazio em volta: compensa com margem negativa */
.comparativo-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: -10px 0 -10px -12px;
}

.comparativo-card ul {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.comparativo-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 1.02rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.comparativo-card.comum li {
    color: #8a8a8a;
}

.comparativo-card.maxtecno li {
    color: #fff;
    font-weight: 500;
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Itens entram um por um quando o card aparece */
.comparativo-card.active li {
    opacity: 1;
    transform: none;
}

.comparativo-card.active li:nth-child(1) { transition-delay: 0.25s; }
.comparativo-card.active li:nth-child(2) { transition-delay: 0.35s; }
.comparativo-card.active li:nth-child(3) { transition-delay: 0.45s; }
.comparativo-card.active li:nth-child(4) { transition-delay: 0.55s; }
.comparativo-card.active li:nth-child(5) { transition-delay: 0.65s; }

/* Enquanto o fundo não abriu, o conteúdo da seção espera escondido */
.comparativo:not(.revelada) .reveal {
    opacity: 0;
    transform: translateY(40px);
}

.comparativo:not(.revelada) .comparativo-card.active li {
    opacity: 0;
    transform: translateX(-12px);
}

.comparativo-icone {
    flex: 0 0 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.comum .comparativo-icone {
    border: 1.5px solid #555;
    color: #777;
}

.maxtecno .comparativo-icone {
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    color: #fff;
    box-shadow: 0 0 12px rgba(104, 168, 246, 0.5);
}

.comparativo-cta {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

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

    .comparativo-card {
        padding: 2rem 1.5rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .comparativo-card li {
        opacity: 1;
        transform: none;
    }

    .comparativo-card.maxtecno::before {
        animation: none;
    }
}

/* Portfólio */
.portfolio-section {
    overflow: hidden;
}

/* Grade com todos os projetos */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    padding-top: 0.5rem;
}

@media (max-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.portfolio-card {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.portfolio-card img {
    -webkit-user-drag: none;
    pointer-events: none;
}

.portfolio-mockup {
    position: relative;
    padding: 0 0 2rem;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-browser {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #111;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
    transition: border-color 0.5s ease, box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #161616;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-browser-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
}

.portfolio-browser-bar span {
    flex: 1;
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: 6px;
    background: #0c0c0c;
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-phone {
    position: absolute;
    right: -0.5rem;
    bottom: 0;
    width: 24%;
    border-radius: 18px;
    border: 4px solid #1d1d1d;
    overflow: hidden;
    background: #111;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-phone img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 19;
    object-fit: cover;
    object-position: top;
}

/* Fica dentro do navegador (não cobre o celular), para o efeito não "piscar" nas bordas */
.portfolio-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.portfolio-hover span {
    padding: 0.8rem 1.6rem;
    border-radius: 200px;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    font-size: 0.95rem;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

/* Efeito de hover só em aparelhos com mouse (no celular o toque não "gruda") */
@media (hover: hover) {
    .portfolio-card:hover .portfolio-mockup {
        transform: translateY(-8px);
    }

    .portfolio-card:hover .portfolio-browser {
        border-color: var(--accent);
        box-shadow: 0 28px 60px rgba(104, 168, 246, 0.16);
    }

    .portfolio-card:hover .portfolio-browser img {
        transform: scale(1.03);
    }

    .portfolio-card:hover .portfolio-phone {
        transform: translateY(-6px);
    }

    .portfolio-card:hover .portfolio-hover,
    .portfolio-card:hover .portfolio-hover span {
        opacity: 1;
    }

    .portfolio-card:hover .portfolio-hover span {
        transform: translateY(0);
    }
}

.portfolio-card:focus-visible {
    outline: none;
}

.portfolio-card:focus-visible .portfolio-browser {
    border-color: var(--accent);
}

.portfolio-info {
    margin-top: 1rem;
}

.portfolio-info h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.portfolio-info p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Botão redondo de seta (usado no carrossel de depoimentos) */
.portfolio-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}

.portfolio-arrow:hover {
    border-color: var(--accent);
    background: rgba(104, 168, 246, 0.1);
}

/* Janela de visualização do site */
.site-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}

.site-modal.aberto {
    opacity: 1;
    visibility: visible;
}

body:has(.site-modal.aberto) .whatsapp-float {
    opacity: 0;
    pointer-events: none;
}

.site-modal-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto 1rem;
}

.site-modal-titulo {
    flex: 1;
    min-width: 0;
}

.site-modal-titulo strong {
    display: block;
    color: #fff;
    font-size: 1.1rem;
}

.site-modal-titulo span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.site-modal-modos {
    display: flex;
    padding: 4px;
    border-radius: 200px;
    background: #161616;
    border: 1px solid var(--border-color);
}

.site-modal-modos button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 200px;
    background: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.site-modal-modos button.ativo {
    background: var(--accent);
    color: #000;
}

.site-modal-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 1rem;
    border-radius: 200px;
    border: 1px solid var(--border-color);
    background: #161616;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.site-modal-acao:hover {
    border-color: var(--accent);
}

.site-modal-fechar {
    width: 40px;
    padding: 0;
    font-size: 1.25rem;
}

.site-modal-palco {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.site-modal-frame {
    position: relative;
    width: 100%;
    max-width: 1400px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #0c0c0c;
    transition: max-width 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.45s;
}

.site-modal.modo-celular .site-modal-frame {
    max-width: 400px;
    border: 8px solid #1d1d1d;
    border-radius: 36px;
}

.site-modal-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

.site-modal-carregando {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    color: var(--text-secondary);
    transition: opacity 0.4s;
}

.site-modal-carregando::before {
    content: "";
    width: 36px;
    height: 36px;
    margin-right: 12px;
    border-radius: 50%;
    border: 3px solid #222;
    border-top-color: var(--accent);
    animation: girar 0.8s linear infinite;
}

.site-modal-frame.carregado .site-modal-carregando {
    opacity: 0;
    pointer-events: none;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .portfolio-arrow {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .site-modal {
        padding: 0.75rem;
    }

    .site-modal-topo {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .site-modal-modos {
        display: none;
    }

    .site-modal.modo-celular .site-modal-frame {
        max-width: none;
        border-width: 1px;
        border-radius: 14px;
    }
}

/* Footer "cortina": a página (main) sobe com cantos arredondados e revela o rodapé parado atrás dela.
   O base.js mede o rodapé e reserva o espaço; se ele for mais alto que a tela, vira um rodapé normal. */
main {
    position: relative;
    z-index: 1;
    background: var(--bg-color);
}

body.rodape-cortina main {
    border-radius: 0 0 36px 36px;
    overflow: clip;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rodape {
    --revelar: 1;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: #070709;
    isolation: isolate;
}

body.rodape-cortina .rodape {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Aurora: manchas de luz azul e roxa que se movem devagar */
.rodape-aurora {
    position: absolute;
    inset: -20% -10% auto;
    height: 90%;
    z-index: -2;
    background:
        radial-gradient(40% 50% at 25% 40%, rgba(104, 168, 246, 0.22), transparent 70%),
        radial-gradient(35% 45% at 75% 35%, rgba(168, 85, 247, 0.2), transparent 70%),
        radial-gradient(30% 40% at 50% 70%, rgba(59, 91, 219, 0.16), transparent 70%);
    filter: blur(30px);
    animation: aurora 14s ease-in-out infinite alternate;
}

@keyframes aurora {
    0% { transform: translate3d(-4%, 0, 0) scale(1); }
    50% { transform: translate3d(3%, -4%, 0) scale(1.08); }
    100% { transform: translate3d(5%, 3%, 0) scale(0.96); }
}

/* Grade fina que some nas bordas */
.rodape-grade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}

/* Faixa inclinada com os serviços passando sem parar */
.rodape-faixa {
    position: relative;
    margin: 0 -5%;
    padding: 1.1rem 0;
    transform: rotate(-2deg);
    background: rgba(255, 255, 255, 0.03);
    border-block: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.rodape-faixa-trilho {
    display: flex;
    width: max-content;
    animation: faixa 40s linear infinite;
}

.rodape-faixa-trilho span {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rodape-faixa-trilho i {
    font-style: normal;
    color: #68a8f6;
}

@keyframes faixa {
    to { transform: translateX(-50%); }
}

/* Conteúdo central: sobe de leve conforme a cortina revela (--revelar vem do script) */
.rodape-centro {
    position: relative;
    padding: 5.5rem 1.5rem 3rem;
    text-align: center;
    transform: translateY(calc((1 - var(--revelar)) * 80px));
    opacity: calc(0.3 + var(--revelar) * 0.7);
}

.rodape-centro h2 {
    margin: 0 0 2rem;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(to bottom, #fff 30%, rgba(255, 255, 255, 0.45));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rodape-centro h2 span {
    background: linear-gradient(90deg, #68a8f6, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}

.rodape-botoes,
.rodape-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

.rodape-links {
    margin-top: 1.5rem;
    gap: 0.6rem;
}

/* Pílulas de vidro (as principais são "magnéticas": seguem o mouse pelo base.js) */
.pilula {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.6rem;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
    will-change: transform;
}

.pilula:hover {
    border-color: rgba(104, 168, 246, 0.5);
    background: rgba(104, 168, 246, 0.1);
    box-shadow: 0 0 30px rgba(104, 168, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pilula svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.pilula-destaque {
    border-color: rgba(104, 168, 246, 0.45);
    background: linear-gradient(135deg, rgba(104, 168, 246, 0.22), rgba(168, 85, 247, 0.22));
}

.pilula-pequena {
    padding: 0.6rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.pilula-pequena svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.pilula-conteudo {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    pointer-events: none;
}

.rodape-info {
    margin: 2.5rem auto 0;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.rodape-info strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

/* Palavra gigante com degradê que some para baixo */
.rodape-marca {
    position: absolute;
    left: 50%;
    bottom: -0.18em;
    z-index: -1;
    margin: 0;
    font-size: clamp(5rem, 19vw, 18rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    white-space: nowrap;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.015) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: translateX(-50%) translateY(calc((1 - var(--revelar)) * 25%));
    pointer-events: none;
    user-select: none;
}

/* Barra inferior */
.rodape-base {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3rem 1.75rem;
}

.rodape-copy {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rodape-assinatura {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rodape-assinatura img {
    height: 26px;
    width: auto;
    display: block;
}

.rodape-topo {
    justify-self: end;
    /* Afastado do canto para não ficar embaixo do botão flutuante do WhatsApp */
    margin-right: 76px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, background-color 0.3s;
}

.rodape-topo:hover {
    border-color: rgba(104, 168, 246, 0.6);
    background: rgba(104, 168, 246, 0.12);
}

.rodape-topo svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    body.rodape-cortina main {
        border-radius: 0 0 24px 24px;
    }

    .rodape-centro {
        padding: 4rem 1.25rem 2.5rem;
    }

    .pilula {
        padding: 0.9rem 1.3rem;
        font-size: 0.95rem;
    }

    .rodape-base {
        grid-template-columns: 1fr auto;
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .rodape-assinatura {
        display: none;
    }

    .rodape-topo {
        margin-right: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rodape-aurora,
    .rodape-faixa-trilho {
        animation: none;
    }

    .rodape {
        --revelar: 1 !important;
    }
}

/* Animações Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

/* Media Queries */

@media (max-width: 768px) {
    section {
        padding: 5rem 0;
    }

    .hero {
        padding-top: 8rem;
    }

    .cta-group {
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .problem-statement {
        padding-left: 1.5rem;
        margin: 2.5rem 0;
    }

    .testimonial-card {
        padding: 2rem;
    }
}

/* ---------- BOTÃO CINTILANTE ---------- */
:root {
    --shiny-cta-bg: #000000;
    --shiny-cta-bg-subtle: #0a1c36;
    --shiny-cta-fg: #ffffff;
    --shiny-cta-highlight: #68a8f6;
    --shiny-cta-highlight-subtle: #a8cdfb;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

.btn-shiny {
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    padding: 1.5rem 2.5rem;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--shiny-cta-highlight) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        ) border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
    transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 1.125rem;
}

@media only screen and (max-width: 600px) {
    .btn-shiny {
        padding: 1.25rem 1.5rem;
    }
}

.btn-shiny::before,
.btn-shiny::after,
.btn-shiny span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.btn-shiny::before {
    --size: calc(100% - var(--shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
        circle at var(--position) var(--position),
        white calc(var(--position) / 4),
        transparent 0
    ) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(
        from calc(var(--gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    -webkit-mask-image: conic-gradient(
        from calc(var(--gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    border-radius: inherit;
    opacity: 0.4;
}

.btn-shiny::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        -50deg,
        transparent,
        var(--shiny-cta-highlight),
        transparent
    );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
}

.btn-shiny span {
    z-index: 1;
    position: relative;
}

.btn-shiny span::before {
    size: calc(100% + 1rem); 
    width: 1200px;
    height: 100px;
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
    transition: opacity 1500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-shiny:hover,
.btn-shiny:focus-visible {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--shiny-cta-highlight-subtle);
}

.btn-shiny:hover span::before {
    opacity: 1;
}

@keyframes gradient-angle {
    to { --gradient-angle: 360deg; }
}

@keyframes shimmer {
    to { transform: rotate(360deg); }
}

@keyframes breathe {
    50% { transform: scale(1.2); }
}

.btn-shiny,
.btn-shiny::before,
.btn-shiny::after {
    animation: var(--animation) var(--duration),
                var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
}

.btn-shiny:hover,
.btn-shiny:hover::before,
.btn-shiny:hover::after {
    animation-play-state: running;
}

/* WhatsApp Flutuante */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0px 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99999;
    animation: pulse-wa 2s infinite;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float svg {
    width: 35px;
    height: 35px;
    fill: currentColor;
    pointer-events: none;
}

@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    .whatsapp-float svg {
        width: 32px;
        height: 32px;
    }
}


/* ==========================================================
   Desenvolvimento (chamada na home + página desenvolvimento.html)
   ========================================================== */

/* Chamada na home */
.dev-chamada {
    border-top: 1px solid var(--border-color);
    background: radial-gradient(60% 60% at 85% 50%, rgba(104, 168, 246, 0.08), transparent 70%);
}

.dev-chamada-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
}

.dev-chamada-grid > div:first-child p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.dev-chamada-nota {
    margin: 1.25rem 0 0 !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary);
}

.dev-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dev-mini {
    display: block;
    padding: 1.75rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    text-decoration: none;
    transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

.dev-mini:hover {
    border-color: var(--accent);
    background: #101010;
    transform: translateY(-6px);
}

.dev-mini .card-icon,
.dev-servico .card-icon,
.dev-porque .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
}

.dev-mini .card-icon svg,
.dev-servico .card-icon svg,
.dev-porque .card-icon svg {
    width: 22px;
    height: 22px;
}

.dev-mini h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.dev-mini p {
    margin: 0;
    font-size: 0.95rem;
}

/* Página de desenvolvimento: topo */
.dev-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 9rem 0 6rem;
    overflow: hidden;
    background:
        radial-gradient(50% 60% at 80% 40%, rgba(104, 168, 246, 0.16), transparent 70%),
        radial-gradient(40% 50% at 100% 100%, rgba(168, 85, 247, 0.14), transparent 70%);
}

.dev-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.dev-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.dev-hero p {
    font-size: 1.2rem;
    max-width: 560px;
    margin-bottom: 2.25rem;
}

.dev-hero-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.dev-link {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
}

.dev-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Pilha de telas de projetos flutuando no topo */
.dev-telas {
    position: relative;
    height: 480px;
}

.dev-tela {
    position: absolute;
    width: 78%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #111;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    animation: flutuar 7s ease-in-out infinite;
}

.dev-tela img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

.dev-tela:nth-child(1) { top: 0; left: 0; rotate: -4deg; animation-delay: -1s; }
.dev-tela:nth-child(2) { top: 22%; right: 0; rotate: 3deg; animation-delay: -3.5s; z-index: 2; }
.dev-tela:nth-child(3) { bottom: 0; left: 10%; rotate: -1deg; animation-delay: -5s; z-index: 3; border-color: rgba(104, 168, 246, 0.4); }

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

/* Serviços */
.dev-titulo {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.dev-titulo p {
    font-size: 1.125rem;
    margin: 0;
}

.dev-servicos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.dev-servico {
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(104, 168, 246, 0.07), transparent 70%),
        var(--bg-secondary);
    transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dev-servico:hover {
    border-color: rgba(104, 168, 246, 0.5);
    transform: translateY(-6px);
}

.dev-servico h3 {
    font-size: 1.5rem;
}

.dev-servico > p {
    font-size: 1.05rem;
}

.dev-servico ul {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.dev-servico li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.dev-servico li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
}

/* Por que a Maxtecno */
.dev-porque-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.dev-porque h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.dev-porque p {
    margin: 0;
    font-size: 0.95rem;
}

/* Processo */
.dev-processo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Linha que liga as etapas e se preenche quando a seção aparece */
.dev-processo::before,
.dev-processo::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    height: 2px;
    background: var(--border-color);
}

.dev-processo::after {
    background: linear-gradient(90deg, #68a8f6, #a855f7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.dev-processo.active::after {
    transform: scaleX(1);
}

.dev-etapa {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.dev-processo.active .dev-etapa { opacity: 1; transform: none; }
.dev-processo.active .dev-etapa:nth-child(1) { transition-delay: 0.2s; }
.dev-processo.active .dev-etapa:nth-child(2) { transition-delay: 0.6s; }
.dev-processo.active .dev-etapa:nth-child(3) { transition-delay: 1s; }
.dev-processo.active .dev-etapa:nth-child(4) { transition-delay: 1.4s; }

.dev-etapa-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    box-shadow: 0 0 0 6px var(--bg-color), 0 0 24px rgba(104, 168, 246, 0.45);
}

.dev-etapa h3 {
    font-size: 1.2rem;
}

.dev-etapa p {
    margin: 0;
    font-size: 0.95rem;
}

/* Chamada final */
.dev-cta-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 5rem 2rem;
    border-radius: 32px;
    border: 1px solid rgba(104, 168, 246, 0.35);
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(104, 168, 246, 0.25), transparent 70%),
        radial-gradient(50% 70% at 100% 100%, rgba(168, 85, 247, 0.25), transparent 70%),
        linear-gradient(160deg, #0f1a33, #1a1030);
}

.dev-cta-card p {
    font-size: 1.15rem;
    max-width: 560px;
    margin: 0 auto 2.25rem;
}

@media (max-width: 1000px) {
    .dev-porque-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .dev-chamada-grid,
    .dev-hero-grid,
    .dev-servicos-grid {
        grid-template-columns: 1fr;
    }

    .dev-chamada-grid {
        gap: 2.5rem;
    }

    .dev-telas {
        height: 320px;
        margin-top: 1rem;
    }

    .dev-processo {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* No celular a linha do processo fica na vertical */
    .dev-processo::before,
    .dev-processo::after {
        top: 22px;
        bottom: 22px;
        left: 22px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .dev-processo::after {
        transform: scaleY(0);
        transform-origin: top;
    }

    .dev-processo.active::after {
        transform: scaleY(1);
    }

    .dev-etapa {
        padding-left: 4.5rem;
    }

    .dev-etapa-num {
        position: absolute;
        left: 0;
        top: 0;
    }
}

@media (max-width: 600px) {
    .dev-mini-grid,
    .dev-porque-grid {
        grid-template-columns: 1fr;
    }

    .dev-hero {
        padding-top: 7rem;
    }

    .dev-servico {
        padding: 2rem 1.5rem;
    }

    .dev-cta-card {
        padding: 3.5rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dev-tela {
        animation: none;
    }

    .dev-etapa,
    .dev-processo::after {
        transition: none;
    }
}


/* ==========================================================
   MaxMetrics (plataforma própria) na home
   ========================================================== */
.mm {
    border-top: 1px solid var(--border-color);
}

.mm-topo {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

.mm-topo h2 {
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    margin: 0;
}

.mm-selo {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-chamada p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.mm-chamada strong {
    color: var(--text-primary);
}

/* Painel grande que reúne os recursos e o print */
.mm-painel {
    border-radius: 32px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, #0e0e0e, #090909);
    padding: 2.75rem 2.75rem 0;
    overflow: hidden;
}

.mm-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.75rem;
}

.mm-recurso {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mm-recurso .card-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
}

.mm-recurso .card-icon svg {
    width: 20px;
    height: 20px;
}

.mm-recurso h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.mm-recurso p {
    margin: 0;
    font-size: 0.95rem;
}

/* Palco colorido: o print fica cortado embaixo, como se saísse do painel */
.mm-palco {
    position: relative;
    height: clamp(300px, 48vw, 640px);
    padding: 4rem 6% 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    perspective: 1600px;
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(104, 168, 246, 0.55), transparent 60%),
        radial-gradient(70% 90% at 100% 20%, rgba(168, 85, 247, 0.55), transparent 60%),
        linear-gradient(135deg, #15306a, #2b1559);
}

.mm-tela {
    --inclinar: 22deg;
    --escala: 0.9;
    position: relative;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 80px rgba(0, 0, 0, 0.45), 0 40px 100px rgba(0, 0, 0, 0.6);
    transform-origin: 50% 0%;
    transform: rotateX(var(--inclinar)) scale(var(--escala));
    will-change: transform;
}

.mm-tela img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Marcadores que explicam partes do painel */
.mm-marca {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transform: translate(-6px, -6px);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.mm-palco.visivel .mm-marca {
    opacity: 1;
}

.mm-palco.visivel .mm-marca:nth-of-type(2) { transition-delay: 0.25s; }
.mm-palco.visivel .mm-marca:nth-of-type(3) { transition-delay: 0.5s; }

.mm-marca i {
    position: relative;
    flex: 0 0 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(104, 168, 246, 0.6), 0 0 14px rgba(104, 168, 246, 0.9);
}

.mm-marca i::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #68a8f6;
    animation: pulsar 2s ease-out infinite;
}

@keyframes pulsar {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(2.6); opacity: 0; }
}

.mm-marca b {
    padding: 0.28rem 0.65rem;
    border-radius: 99px;
    background: rgba(8, 10, 20, 0.88);
    border: 1px solid rgba(104, 168, 246, 0.45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Etiqueta à esquerda do ponto (para marcadores perto da borda direita) */
.mm-marca-esq {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 6px), -6px);
}

@media (max-width: 900px) {
    .mm-topo,
    .mm-recursos {
        grid-template-columns: 1fr;
    }

    .mm-topo {
        gap: 1.5rem;
    }

    .mm-painel {
        padding: 2rem 1.25rem 0;
        border-radius: 24px;
    }

    .mm-recursos {
        gap: 1.5rem;
    }

    .mm-palco {
        padding: 2rem 4% 0;
        height: clamp(220px, 62vw, 460px);
    }

    /* No celular o print fica pequeno: os marcadores atrapalhariam a leitura */
    .mm-marca {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-tela {
        transform: none;
    }

    .mm-marca i::after {
        animation: none;
    }
}


/* ==========================================================
   Blog (blog.html e blog/*.html)
   ========================================================== */
nav a[aria-current="page"] {
    color: var(--accent);
}

.blog-topo {
    padding: 10rem 0 3rem;
    text-align: center;
    background: radial-gradient(60% 70% at 50% 0%, rgba(104, 168, 246, 0.14), transparent 70%);
}

.blog-topo h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.blog-topo p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.15rem;
}

.blog-lista {
    padding-top: 2rem;
}

/* Capa: o "Imagem em breve" fica atrás e a imagem cobre quando existir */
.blog-capa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(104, 168, 246, 0.28), transparent 60%),
        radial-gradient(70% 90% at 100% 100%, rgba(168, 85, 247, 0.28), transparent 60%),
        #0d0f1a;
}

.blog-capa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-capa-vazia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 1rem;
}

.blog-categoria {
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    background: rgba(104, 168, 246, 0.12);
    border: 1px solid rgba(104, 168, 246, 0.3);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Matéria em destaque (a mais recente) */
.blog-destaque {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    text-decoration: none;
}

.blog-destaque,
.blog-card {
    color: var(--text-primary);
}

.blog-destaque h2 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    color: var(--text-primary);
    transition: color 0.3s;
}

.blog-destaque p {
    font-size: 1.1rem;
}

.blog-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
}

.blog-card {
    display: block;
    text-decoration: none;
}

.blog-card-texto {
    padding-top: 1.5rem;
}

.blog-card h3 {
    font-size: 1.35rem;
    line-height: 1.3;
    transition: color 0.3s;
}

.blog-card p {
    margin: 0;
}

.blog-destaque:hover .blog-capa img,
.blog-card:hover .blog-capa img {
    transform: scale(1.04);
}

.blog-destaque:hover h2,
.blog-card:hover h3 {
    color: var(--accent);
}

/* Página da matéria */
.artigo-topo {
    padding: 9rem 0 3rem;
    background: radial-gradient(60% 80% at 50% 0%, rgba(104, 168, 246, 0.12), transparent 70%);
}

.artigo-estreito {
    max-width: 780px;
}

.artigo-largo {
    max-width: 1040px;
}

.artigo-voltar {
    display: inline-block;
    margin-bottom: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s;
}

.artigo-voltar:hover {
    color: var(--accent);
}

.artigo-topo h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.3rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.artigo-resumo {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.artigo-autor {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.artigo-autor .author-avatar {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
}

.artigo-autor strong {
    display: block;
    color: var(--text-primary);
}

.artigo-autor span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.artigo-capa {
    border-radius: 24px;
    margin-bottom: 3.5rem;
}

/* Tipografia de leitura */
.artigo-conteudo {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #d4d4d4;
}

.artigo-conteudo p {
    font-size: inherit;
    color: inherit;
    margin-bottom: 1.4rem;
}

.artigo-conteudo h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin: 3rem 0 1rem;
    color: var(--text-primary);
}

.artigo-conteudo strong {
    color: var(--text-primary);
}

.artigo-conteudo ul {
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.artigo-conteudo li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.7rem;
}

.artigo-conteudo li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.75em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
}

.artigo-conteudo blockquote {
    margin: 2.5rem 0;
    padding: 1.75rem 2rem;
    border-radius: 18px;
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(104, 168, 246, 0.1), rgba(168, 85, 247, 0.06));
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
}

.artigo-cta {
    margin: 4rem 0 2rem;
    padding: 3rem 2.5rem;
    text-align: center;
    border-radius: 24px;
    border: 1px solid rgba(104, 168, 246, 0.35);
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(104, 168, 246, 0.22), transparent 70%),
        linear-gradient(160deg, #0f1a33, #1a1030);
}

.artigo-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.artigo-cta p {
    max-width: 520px;
    margin: 0 auto 2rem;
}

.artigo-relacionados {
    border-top: 1px solid var(--border-color);
    padding-top: 5rem;
}

.artigo-relacionados h2 {
    margin-bottom: 2.5rem;
}

/* Seção de artigos na home */
.home-blog {
    border-top: 1px solid var(--border-color);
}

.home-blog-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3rem;
}

.home-blog-topo p {
    margin: 0;
    font-size: 1.1rem;
    max-width: 560px;
}

.home-blog-topo .dev-link {
    flex: 0 0 auto;
}

.blog-grade-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-grade-3 .blog-card h3 {
    font-size: 1.2rem;
}

@media (max-width: 1000px) {
    .blog-grade-3 {
        grid-template-columns: 1fr 1fr;
    }

    .blog-grade-3 .blog-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 700px) {
    .home-blog-topo {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-grade-3 {
        grid-template-columns: 1fr;
    }

    .blog-grade-3 .blog-card:nth-child(3) {
        display: block;
    }
}

@media (max-width: 900px) {
    .blog-destaque {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 700px) {
    .blog-topo {
        padding-top: 8rem;
    }

    .blog-grade {
        grid-template-columns: 1fr;
    }

    .artigo-topo {
        padding-top: 7.5rem;
    }

    .artigo-conteudo {
        font-size: 1.05rem;
    }

    .artigo-conteudo blockquote {
        padding: 1.25rem 1.25rem;
        font-size: 1.15rem;
    }

    .artigo-cta {
        padding: 2.5rem 1.25rem;
    }
}

/* Ajustes finais de escala — prevalecem sobre os layouts específicos de seção. */
.dev-servico .card-icon.icon-3d,
.dev-porque .card-icon.icon-3d,
.dev-mini .card-icon.icon-3d {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
}

.mm-recurso .card-icon.icon-3d {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
}

.metodo .card-icon.icon-3d {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    margin: 0;
}


/* ==========================================================
   Cursor personalizado (criado pelo base.js, só em aparelhos com mouse)
   ========================================================== */
body.cursor-ativo,
body.cursor-ativo * {
    cursor: none !important;
}

/* Em campos de digitação volta o cursor de texto normal */
body.cursor-ativo input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.cursor-ativo textarea,
body.cursor-ativo [contenteditable="true"] {
    cursor: text !important;
}

.cursor-seta,
.cursor-brilho,
.cursor-etiqueta {
    position: fixed;
    top: 0;
    left: 0;
    /* Camada mais alta possível: o cursor fica por cima do WhatsApp, de avisos de cookies e de qualquer janela */
    z-index: 2147483647;
    pointer-events: none;
    will-change: transform;
}

.cursor-seta,
.cursor-brilho {
    opacity: 0;
    transition: opacity 0.25s ease;
}

body.cursor-visivel .cursor-seta,
body.cursor-visivel .cursor-brilho {
    opacity: 1;
}

.cursor-seta svg {
    display: block;
    width: 22px;
    height: 22px;
    overflow: visible;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(104, 168, 246, 0.45));
    transform-origin: 2px 3px;
    transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1), filter 0.3s ease;
}

body.cursor-clicavel .cursor-seta svg {
    transform: scale(1.12) rotate(-6deg);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(139, 92, 246, 0.7));
}

body.cursor-pressionado .cursor-seta svg {
    transform: scale(0.82) rotate(-6deg);
    transition-duration: 0.12s;
}

/* Brilho difuso que segue a ponta da seta */
.cursor-brilho {
    width: 0;
    height: 0;
}

.cursor-brilho::before {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 168, 246, 0.45), rgba(139, 92, 246, 0.18) 45%, transparent 70%);
    filter: blur(4px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

body.cursor-clicavel .cursor-brilho::before {
    transform: scale(1.8);
    opacity: 0.85;
}

/* Etiqueta: só aparece em cima de algo clicável, surgindo com um "pop" */
.cursor-etiqueta span {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, rgba(104, 168, 246, 0.92), rgba(139, 92, 246, 0.92));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(104, 168, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform-origin: 0 0;
    opacity: 0;
    transform: scale(0.4) translate(-6px, -6px);
    transition: opacity 0.18s ease, transform 0.2s ease;
}

body.cursor-visivel.cursor-clicavel .cursor-etiqueta span {
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.7, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .cursor-seta svg,
    .cursor-brilho::before,
    .cursor-etiqueta span {
        transition: opacity 0.15s ease;
    }
}


/* ==========================================================
   Aviso de cookies (ícone no canto inferior esquerdo + popup)
   ========================================================== */
.cookies { position: fixed; left: 25px; bottom: 25px; z-index: 99990; }

.cookies-icone {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #1d1d24, #0b0b0e 70%);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(104, 168, 246, 0.15), 0 0 24px -6px rgba(139, 92, 246, 0.55);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    animation: cookies-chegar 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, cookies-balanco 6s ease-in-out 2.5s infinite;
}
.cookies-icone svg { width: 34px; height: 34px; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cookies-icone:hover { transform: scale(1.08); box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(104, 168, 246, 0.35), 0 0 30px -4px rgba(139, 92, 246, 0.7); }
.cookies-icone:hover svg { transform: rotate(-18deg); }
.cookies-icone:focus-visible { outline: 2px solid #68a8f6; outline-offset: 3px; }
.cookies.aberta .cookies-icone { animation: none; transform: scale(0.92); }
.cookies.aberta .cookies-icone svg { transform: rotate(-35deg); }

/* Pontinho que chama atenção até a pessoa abrir */
.cookies-ponto {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #68a8f6, #a855f7);
    box-shadow: 0 0 0 2px #0b0b0e;
    transition: transform 0.3s ease;
}
.cookies-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: cookies-pulso 1.8s ease-out infinite; }
.cookies.visto .cookies-ponto { transform: scale(0); }

/* Popup: nasce do ícone */
.cookies-janela {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    width: min(392px, calc(100vw - 50px));
    padding: 22px 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background:
        radial-gradient(120% 70% at 0% 100%, rgba(104, 168, 246, 0.14), transparent 60%),
        radial-gradient(100% 60% at 100% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
        rgba(12, 12, 16, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(104, 168, 246, 0.08);
    color: #fff;
    text-align: left;
    transform-origin: 29px calc(100% + 43px);
    transform: scale(0.15) translateY(20px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.cookies.aberta .cookies-janela { transform: none; opacity: 1; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.25s ease; }
.cookies-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 26px; }
.cookies-mini { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(243, 195, 122, 0.1); }
.cookies-mini svg { width: 28px; height: 28px; }
.cookies.aberta .cookies-mini svg { animation: cookies-mordida 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both; }
.cookies-janela h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.cookies-janela p { margin: 0 0 14px; color: #b5b5bd; font-size: 0.9rem; line-height: 1.55; }

.cookies-fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #9e9e9e;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s;
}
.cookies-fechar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }
.cookies-fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.cookies-detalhes { margin: -4px 0 16px; font-size: 0.84rem; color: #b5b5bd; }
.cookies-detalhes summary { width: max-content; color: #68a8f6; font-weight: 600; cursor: pointer; list-style: none; }
.cookies-detalhes summary::-webkit-details-marker { display: none; }
.cookies-detalhes summary::after { content: " \2193"; display: inline-block; margin-left: 4px; transition: transform 0.25s; }
.cookies-detalhes[open] summary::after { transform: rotate(180deg); }
.cookies-detalhes ul { margin: 10px 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }
.cookies-detalhes li { padding: 9px 11px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); line-height: 1.45; }
.cookies-detalhes li strong { color: #fff; }
.cookies-detalhes p { margin: 0; font-size: 0.8rem; }
.cookies-detalhes[open] ul, .cookies-detalhes[open] p { animation: cookies-abrir 0.3s ease both; }

.cookies-acoes { display: flex; gap: 10px; }
.cookies-acoes button {
    flex: 1;
    padding: 12px 10px;
    border-radius: 99px;
    white-space: nowrap;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cookies-aceitar { border: 0; background: linear-gradient(135deg, #68a8f6, #8b5cf6); color: #fff; box-shadow: 0 10px 24px -10px rgba(104, 168, 246, 0.7); }
.cookies-aceitar:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cookies-essenciais { border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #e5e5ea; }
.cookies-essenciais:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); }
.cookies-acoes button:active { transform: scale(0.97); }

/* Escolheu: o popup volta para o ícone e o ícone some */
.cookies.saindo .cookies-janela { transform: scale(0.1) translateY(30px); opacity: 0; transition: transform 0.45s cubic-bezier(0.55, 0, 0.7, 0.2), opacity 0.35s ease; }
.cookies.saindo .cookies-icone { animation: cookies-sumir 0.55s cubic-bezier(0.55, 0, 0.7, 0.2) 0.3s both; }

@keyframes cookies-chegar { from { scale: 0; rotate: -120deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes cookies-balanco { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -14deg; } 94% { rotate: 10deg; } 97% { rotate: -5deg; } }
@keyframes cookies-pulso { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cookies-mordida { from { transform: scale(0.4) rotate(-60deg); } to { transform: none; } }
@keyframes cookies-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cookies-sumir { 0% { scale: 1; rotate: 0deg; opacity: 1; } 40% { scale: 1.15; rotate: 15deg; } 100% { scale: 0; rotate: -90deg; opacity: 0; } }

@media (max-width: 768px) {
    .cookies { left: 16px; bottom: 20px; }
    .cookies-icone { width: 52px; height: 52px; }
    .cookies-icone svg { width: 30px; height: 30px; }
    .cookies-janela { width: calc(100vw - 32px); bottom: calc(100% + 12px); padding: 20px 18px 18px; transform-origin: 26px calc(100% + 38px); }
}

@media (prefers-reduced-motion: reduce) {
    .cookies-icone, .cookies-ponto::after, .cookies.aberta .cookies-mini svg { animation: none; }
    .cookies-janela, .cookies.aberta .cookies-janela, .cookies.saindo .cookies-janela { transition: opacity 0.2s ease; transform: none; }
}