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

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: var(--z-header);

    background: rgba(13, 13, 13, 0.75);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.06);

    transition: all .35s ease;

}

.header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 90px;

}

.logo img{

    width: 180px;

    height: auto;

}

.navbar ul{

    display:flex;

    align-items:center;

    gap:40px;

}

.navbar a{

    color:var(--color-white);

    font-weight:var(--font-medium);

    transition:var(--transition-normal);

}

.navbar a:hover{

    color:var(--color-primary);

}

.navbar a.active {

    color: var(--color-primary);

}

/* ==========================================
   BOTÃO DE MENU MOBILE (HAMBÚRGUER)
========================================== */

.menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    width: 44px;

    height: 44px;

    border-radius: var(--radius-sm);

    z-index: var(--z-menu);

}

.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--color-white);

    border-radius: var(--radius-full);

    transition: var(--transition-normal);

}

.menu-toggle.is-active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}

.menu-toggle.is-active span:nth-child(2) {

    opacity: 0;

}

.menu-toggle.is-active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}

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


.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

}

.hero-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

.hero-text {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.hero-stats {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xl);

    margin-top: var(--space-sm);

    padding-top: var(--space-lg);

    border-top: 1px solid var(--color-border);

}

.hero-stat {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.hero-stat strong {

    font-size: var(--font-size-xl);

    font-weight: var(--font-extrabold);

    color: var(--color-white);

}

.hero-stat span {

    font-size: var(--font-size-sm);

    color: var(--color-text-muted);

}

/* ==========================================
   HERO — COMPOSIÇÃO VISUAL
========================================== */

.hero-visual {

    position: relative;

    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    --mouse-x: 50%;
    --mouse-y: 50%;

}

.hero-visual::after {

    content: "";

    position: absolute;

    inset: 24px;

    border-radius: var(--radius-xl);

    background: radial-gradient(
        260px circle at var(--mouse-x) var(--mouse-y),
        rgba(255,122,0,.16),
        transparent 65%
    );

    opacity: 0;

    transition: opacity var(--transition-normal);

    pointer-events: none;

}

.hero-visual:hover::after {

    opacity: 1;

}

.hero-glow {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at 30% 25%, rgba(255,122,0,.25), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(255,122,0,.12), transparent 50%);

    filter: blur(10px);

    border-radius: var(--radius-xl);

}

.hero-grid {

    position: absolute;

    inset: 24px;

    border-radius: var(--radius-xl);

    border: 1px solid var(--color-border);

    background-color: rgba(255,255,255,.015);

    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size: 32px 32px;

    -webkit-mask-image: radial-gradient(circle at center, black 55%, transparent 90%);

    mask-image: radial-gradient(circle at center, black 55%, transparent 90%);

}

.hero-core {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 150px;

    height: 150px;

    border-radius: var(--radius-xl);

    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));

    box-shadow: var(--shadow-lg), var(--shadow-primary);

    animation: float 5s ease-in-out infinite;

}

.hero-core-logo{

    width: 78px;

    height: auto;

    display: block;

}

.hero-orbit {

    position: absolute;

    inset: 0;

}

.hero-chip {

    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    background: rgba(23,23,23,.9);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-full);

    font-size: var(--font-size-sm);

    font-weight: var(--font-medium);

    color: var(--color-text);

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(6px);

    animation: float 6s ease-in-out infinite;
}

.hero-chip-1 {
    top: 8%;
    left: 4%;
    animation-delay: .2s;
}

.hero-chip-2 {
    bottom: 18%;
    left: -2%;
    animation-delay: 1.1s;
}

.hero-chip-3 {
    top: 12%;
    right: 0%;
    animation-delay: 1.8s;
}

.hero-chip-4 {
    bottom: 6%;
    right: 6%;
    animation-delay: 2.5s;
}


/* ==========================================
   PAGE HEADER (páginas internas)
========================================== */

.page-header {

    position: relative;

    overflow: hidden;

    text-align: center;

    padding-top: calc(90px + var(--space-3xl));

    background: var(--color-background);

}

.page-header .container {

    position: relative;

    z-index: 1;

}

.page-header .badge {

    margin-bottom: var(--space-md);

}

.page-header h1 {

    margin-bottom: var(--space-md);

}

.page-header .section-subtitle {

    margin: 0 auto;

}


/* ==========================================
   AVISO DE DISPONIBILIDADE
========================================== */

.service-notice {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 640px;

    margin: var(--space-xl) auto 0;

    padding: var(--space-md) var(--space-lg);

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    text-align: left;

}

.service-notice .icon {

    flex-shrink: 0;

    width: 18px;

    height: 18px;

    margin-top: 3px;

    color: var(--color-text-muted);

}

.service-notice p {

    margin: 0;

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);

    line-height: 1.7;

}


/* ==========================================
   SERVICES
========================================== */

.services {

    background: var(--color-surface);

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.service-card {

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.service-card h3 {

    margin-bottom: 16px;

}

.service-card p {

    margin: 0;

}

.service-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    margin-bottom: 20px;

    border-radius: var(--radius-md);

    background: rgba(255,122,0,.10);

    color: var(--color-primary);

}

.service-icon .icon {

    width: 26px;

    height: 26px;

}


/* ==========================================
   ASSISTÊNCIA TÉCNICA
========================================== */

.tech-support {

    position: relative;

    overflow: hidden;

    background: var(--color-background);

}

.tech-mesh {

    position: absolute;

    inset: 0;

    z-index: var(--z-background);

    background:
        radial-gradient(600px circle at 12% 0%, rgba(255,122,0,.10), transparent 55%),
        radial-gradient(500px circle at 88% 100%, rgba(255,122,0,.08), transparent 55%);

    background-size: 200% 200%;

    animation: meshDrift 18s ease-in-out infinite;

    pointer-events: none;

}

.tech-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 30px;

}

.tech-card {

    min-height: 200px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.tech-card h3 {

    margin-bottom: 12px;

}

.tech-card p {

    margin: 0;

}

.build-intro {

    max-width: 620px;

    margin: 0 0 24px;

}

.build-intro h3 {

    margin-bottom: 8px;

}

.build-intro p {

    margin: 0;

}

.build-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-bottom: 40px;

}

.build-card {

    min-height: 170px;

    padding: var(--space-lg);

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.build-card .service-icon {

    width: 46px;

    height: 46px;

    margin-bottom: 16px;

}

.build-card .service-icon .icon {

    width: 22px;

    height: 22px;

}

.build-card h4 {

    margin-bottom: 8px;

}

.build-card p {

    margin: 0;

    font-size: var(--font-size-sm);

}

.tech-highlights {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 10px;

}

.tech-highlight-card {

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.tech-highlight-card h3 {

    margin-bottom: 12px;

}

.tech-highlight-card p {

    margin: 0;

}

.tech-highlight-card-home {

    border-color: rgba(255,122,0,.28);

    background:
        linear-gradient(145deg, rgba(255,122,0,.09), rgba(255,255,255,.015)),
        var(--color-card);

}

.tech-highlight-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: var(--space-md);

    color: var(--color-primary);

    font-weight: var(--font-semibold);

    font-size: var(--font-size-sm);

}

.tech-highlight-link .icon {

    width: 1em;

    height: 1em;

    transition: transform var(--transition-fast);

}

.tech-highlight-link:hover .icon {

    transform: translateX(3px);

}


/* ==========================================
   ABOUT
========================================== */

.about {

    background: var(--color-background);

}

.about-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}

.about-text {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.about-highlights {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

}

.highlight-card {

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.highlight-card h3 {

    margin-bottom: 16px;

}


/* ==========================================
   FEATURES
========================================== */


.features {

    background: var(--color-surface);

}

.features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}

.feature-card {

    text-align: center;

    min-height: 260px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.feature-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    margin-bottom: 24px;

    border-radius: var(--radius-lg);

    background: rgba(255,122,0,.10);

    color: var(--color-primary);

}

.feature-icon .icon {

    width: 28px;

    height: 28px;

}

.feature-card h3 {

    margin-bottom: 16px;

}


/* ==========================================
   PROCESS
========================================== */


.process {

    background: var(--color-background);

}

.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}

.process-step {

    text-align: center;

    padding: 40px 30px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    transition: var(--transition-normal);

}

.process-step:hover {

    border-color: var(--color-primary);

    transform: translateY(-8px);

    box-shadow: var(--shadow-primary);

}

.step-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: var(--color-primary);

    color: var(--color-background);

    font-weight: var(--font-bold);

}

.process-step h3 {

    margin-bottom: 16px;

}


/* ==========================================
   FAQ
========================================== */

.faq {

    background: var(--color-background);

}

.faq-list {

    max-width: 780px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.faq-item {

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    padding: 6px var(--space-lg);

    transition: var(--transition-normal);

}

.faq-item:hover {

    border-color: rgba(255,122,0,.4);

}

.faq-item[open] {

    border-color: var(--color-primary);

}

.faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-md);

    padding: 18px 0;

    cursor: pointer;

    list-style: none;

    color: var(--color-white);

    font-weight: var(--font-semibold);

}

.faq-item summary::-webkit-details-marker {

    display: none;

}

.faq-icon {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: rgba(255,122,0,.12);

    color: var(--color-primary);

    font-size: 1.1rem;

    transition: var(--transition-normal);

}

.faq-item[open] .faq-icon {

    transform: rotate(45deg);

}

.faq-item p {

    padding-bottom: 20px;

    margin: 0;

}


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

.cta {

    background: var(--color-surface);

}

.cta-box {

    position: relative;

    overflow: hidden;

    text-align: center;

    padding: var(--space-3xl) var(--space-lg);

    border-radius: var(--radius-xl);

    border: 1px solid rgba(255,122,0,.25);

    background:
        radial-gradient(circle at 20% 20%, rgba(255,122,0,.16), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255,122,0,.10), transparent 50%),
        var(--color-card);

}

.cta-box h2 {

    margin-bottom: var(--space-sm);

}

.cta-box p {

    max-width: 560px;

    margin: 0 auto var(--space-lg);

}


/* ==========================================
   CTA — SERVIÇOS GRÁFICOS
========================================== */

.graphic-cta {

    background: var(--color-background);

}

.graphic-cta-box {

    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns: 1.3fr 1fr;

    align-items: center;

    gap: 40px;

    padding: var(--space-2xl);

    border-radius: var(--radius-xl);

    border: 1px solid var(--color-border);

    background:
        radial-gradient(500px circle at 90% 10%, rgba(255,122,0,.12), transparent 55%),
        var(--color-card);

}

.graphic-cta-content h2 {

    margin: var(--space-sm) 0 var(--space-sm);

    font-size: clamp(1.75rem, 3vw, 2.5rem);

}

.graphic-cta-content p {

    max-width: 480px;

    margin: 0 0 var(--space-lg);

}

.graphic-cta-content .btn-primary .icon {

    width: 1em;

    height: 1em;

    margin-left: 8px;

}

.graphic-cta-visual {

    position: relative;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.graphic-cta-core {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 96px;

    height: 96px;

    border-radius: var(--radius-lg);

    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));

    box-shadow: var(--shadow-md), var(--shadow-primary);

    color: var(--color-background);

    animation: float 5s ease-in-out infinite;

}

.graphic-cta-core .icon {

    width: 40px;

    height: 40px;

}

.graphic-chip {

    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    background: rgba(23,23,23,.9);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-full);

    font-size: var(--font-size-sm);

    font-weight: var(--font-medium);

    color: var(--color-text);

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(6px);

    animation: float 6s ease-in-out infinite;

}

.graphic-chip-1 {

    top: 6%;

    right: 2%;

    animation-delay: .4s;

}

.graphic-chip-2 {

    bottom: 8%;

    left: 0%;

    animation-delay: 1.6s;

}


/* ==========================================
   CONTACT
========================================== */


.contact {

    background: var(--color-surface);

}

.contact-content {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 50px;

    align-items: center;

}

.contact-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin: 40px 0;

}

/* Card base do item de contato: herda o componente
   .card (fundo, borda, spotlight e hover premium já
   usados em todo o site) e ajusta apenas o layout
   interno para o par ícone + texto. */
.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: var(--space-md);

    text-align: left;

}

.contact-item-link {

    color: inherit;

}

/* Itens informativos (Endereço e Horário) não são
   clicáveis: recebem a mesma "casca" visual do card,
   porém sem a interação de hover/spotlight, para que
   o usuário perceba a diferença de comportamento. */
.contact-item-static {

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    cursor: default;

}

.contact-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 46px;

    height: 46px;

    border-radius: var(--radius-md);

    background: rgba(255,122,0,.10);

    color: var(--color-primary);

}

.contact-icon .icon {

    width: 20px;

    height: 20px;

}

.contact-item-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}

.contact-item-text strong {

    color: var(--color-white);

    font-size: var(--font-size-sm);

    font-weight: var(--font-semibold);

    letter-spacing: .2px;

}

.contact-item-text span {

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);

    line-height: 1.5;

    word-break: break-word;

}

.hero-chip .icon {

    color: var(--color-primary);

}

.contact-card {

    padding: 40px;

    border-radius: var(--radius-xl);

    background: linear-gradient(
        145deg,
        rgba(255,122,0,.10),
        rgba(255,255,255,.02)
    );

    border: 1px solid rgba(255,122,0,.20);

}


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


.footer {

    padding: 80px 0 30px;

    background: #050505;

    border-top: 1px solid rgba(255,255,255,.08);

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 60px;

}

.footer-column h3 {

    margin-bottom: 20px;

}

.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-column li {

    margin-bottom: 12px;

}

.footer-column a {

    color: inherit;

    text-decoration: none;

}

.footer-column a:hover {

    color: var(--color-primary);

}

.footer-bottom {

    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,.08);

    text-align: center;

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

.whatsapp-float {

    position: fixed;

    right: 24px;
    bottom: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: var(--color-primary);

    color: var(--color-background);

    box-shadow: var(--shadow-lg), var(--shadow-primary);

    z-index: var(--z-header);

    animation: pulseGlow 2.8s ease infinite;

    --magnet-x: 0px;
    --magnet-y: 0px;

    transform: translate(var(--magnet-x), var(--magnet-y));

    transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);

}

.whatsapp-float svg {

    width: 28px;
    height: 28px;

}

.whatsapp-float:hover {

    background: var(--color-primary-light);

    transform: translate(var(--magnet-x), calc(var(--magnet-y) - 4px)) scale(1.05);

}

/* ==========================================
   HEADER - SCROLL
========================================== */

.header.scrolled {

    background: rgba(10, 10, 10, .88);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255,122,0,.12);

    box-shadow: 0 10px 30px rgba(0,0,0,.35);

    padding: 14px 0;

}

.footer-logo-image{

    width: 180px;

    height: auto;

    display: block;

}