/*
 * PERIQUITO VIRTUAL — FOLHA DE ESTILOS
 *
 * GUIA DE LEITURA
 * - Base: variáveis, estilos globais e componentes compartilhados.
 * - Cabeçalho: identidade da marca e navegação.
 * - Hero: primeira dobra, foguete, fundo Hiperespaço e CTA âmbar.
 * - Soluções: apresentação dos serviços.
 * - Projetos: grade do portfólio e cards.
 * - A agência: história, ano de fundação e diferenciais.
 * - Processo: etapas de atendimento e desenvolvimento.
 * - Dúvidas: perguntas frequentes.
 * - Contato e rodapé: formulário, redes sociais e WhatsApp.
 * - Complementos: privacidade, cookies e acessibilidade.
 *
 * Os blocos @media indicam as adaptações para cada largura de tela.
 * As regras posteriores refinam a base (paleta atual e efeitos da hero).
 * A ordem original foi preservada para manter o resultado visual.
 * Indentação: 4 espaços; uma declaração por linha.
 */

/* BASE — variáveis, estilos globais e estrutura */

:root {
    --bg: #111610;
    --panel: #1b2119;
    --lime: #c3ee75;
    --green: #a1c56d;
    --white: #f5f5eb;
    --muted: #abb2a4;
    --line: #343d2d;
    --ink: #172012;
    --radius: 22px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font-family: Arial,Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

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

::selection {
    background: var(--lime);
    color: var(--ink);
}

/* ACESSIBILIDADE — foco, navegação e textos de apoio */

:focus-visible {
    outline: 3px solid #efb953;
    outline-offset: 6px;
}

/* BASE — variáveis, estilos globais e estrutura */

section {
    scroll-margin-top: 95px;
}

.wrap {
    width: min(1240px,calc(100% - 80px));
    margin: auto;
}

/* ACESSIBILIDADE — foco, navegação e textos de apoio */

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    background: var(--lime);
    color: var(--ink);
    padding: 15px;
    z-index: 100;
}

.skip:focus {
    top: 12px;
}

/* CABEÇALHO — marca e navegação */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(17,22,16,.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--line);
}

.nav {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand img {
    width: 47px;
    height: 45px;
    object-fit: contain;
}

.brand-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -1px;
}

.brand-name span {
    font-weight: 400;
    color: var(--lime);
}

.brand small {
    display: block;
    font-size: 9px;
    letter-spacing: 3.1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 5px;
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 13px;
}

.nav-links>a:not(.btn) {
    color: #d1d6c9;
}

.nav-links>a:hover {
    color: var(--lime);
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    min-height: 52px;
    padding: 15px 23px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--lime);
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    transition: transform .2s,background .2s;
}

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

.btn .arrow {
    font-size: 23px;
    line-height: 1;
}

.btn-outline {
    border-color: #56604c;
    background: transparent;
    color: var(--white);
}

.btn-outline:hover {
    background: #273020;
}

/* CABEÇALHO — marca e navegação */

.menu {
    display: none;
    background: none;
    color: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lime);
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    display: inline-block;
    box-shadow: 0 0 0 5px #c3ee7512;
}

/* HERO — primeira dobra, conteúdo e ilustração */

.hero {
    position: relative;
    overflow: hidden;
    padding: 66px 0 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 520px;
}

.hero h1 {
    font-size: clamp(54px,5.8vw,82px);
    line-height: 1.02;
    letter-spacing: -5px;
    margin: 27px 0 25px;
    font-weight: 800;
}

.hero h1 em {
    font-style: normal;
    color: var(--lime);
    display: inline-block;
    position: relative;
}

.hero h1 em:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 8px;
    border-top: 2px solid var(--lime);
    border-radius: 50%;
    transform: rotate(-3deg);
}

.lead {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 445px;
}

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

.hero-note {
    font-size: 11px;
    color: var(--muted);
    margin-top: 18px;
}

.hero-note span {
    color: var(--lime);
    margin-right: 5px;
}

.hero-art {
    height: 480px;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit {
    position: absolute;
    border: 1px solid #455436;
    border-radius: 50%;
    width: 430px;
    height: 430px;
    z-index: -1;
}

.orbit:after {
    content: "";
    position: absolute;
    inset: 38px;
    border: 1px dashed #455436;
    border-radius: 50%;
}

.orbit-two {
    width: 540px;
    height: 540px;
    opacity: .35;
}

.hero-art:before {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    background: #91b95020;
    filter: blur(70px);
    border-radius: 50%;
    z-index: -1;
}

.art-star {
    position: absolute;
    right: 5%;
    top: 3%;
    font-size: 76px;
    color: var(--lime);
    line-height: 1;
}

.browser-card {
    width: 420px;
    background: #f2f3e9;
    color: var(--ink);
    border: 5px solid #424d35;
    border-radius: 17px;
    transform: rotate(-7deg);
    box-shadow: 20px 32px 70px #0007;
    overflow: hidden;
}

.browser-top {
    height: 35px;
    border-bottom: 1px solid #d4d8c8;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
}

.browser-top i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a8ae9b;
}

.browser-top span {
    margin-left: auto;
    font-size: 8px;
    color: #66725b;
}

.mock-content {
    padding: 26px;
    position: relative;
    overflow: hidden;
    min-height: 277px;
}

.mock-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mock-content h2 {
    font-size: 43px;
    line-height: 1.04;
    letter-spacing: -2px;
    margin: 27px 0 20px;
    max-width: 245px;
    position: relative;
    z-index: 2;
}

.mock-content h2 span {
    color: #638b30;
}

.mock-button {
    display: inline-block;
    background: var(--ink);
    color: white;
    padding: 10px 13px;
    font-size: 8px;
    border-radius: 4px;
}

.mock-shape {
    position: absolute;
    width: 175px;
    height: 175px;
    background: var(--lime);
    border-radius: 50% 50% 5% 50%;
    right: -40px;
    top: 82px;
    transform: rotate(-20deg);
}

.mock-shape span {
    display: block;
    font-size: 100px;
    color: var(--ink);
    transform: rotate(20deg);
    text-align: center;
}

.mock-bottom {
    display: flex;
    gap: 8px;
    margin-top: 25px;
}

.mock-bottom i {
    height: 33px;
    width: 33%;
    background: #e0e5d5;
    border-radius: 4px;
}

.floating-tag {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #20281d;
    border: 1px solid #52643c;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 12px 30px #0004;
    font-size: 12px;
}

.floating-tag strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.floating-tag small {
    color: var(--muted);
}

.tag-top {
    top: 34px;
    left: 0;
    transform: rotate(-4deg);
}

.tag-bottom {
    bottom: 40px;
    right: 0;
    transform: rotate(10deg);
}

.tag-icon {
    background: var(--lime);
    color: var(--ink);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 19px;
}

.art-caption {
    position: absolute;
    bottom: 4px;
    left: 45px;
    font-size: 9px;
    color: #829076;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 46px;
    padding: 24px 0;
    color: var(--muted);
    font-size: 11px;
}

.hero-foot strong {
    color: var(--white);
    font-size: 14px;
}

.hero-foot .location {
    display: flex;
    gap: 30px;
}

/* FAIXA DE DESTAQUES — chamadas abaixo da hero */

.ticker {
    background: var(--lime);
    color: var(--ink);
    padding: 19px 0;
    overflow: hidden;
}

.ticker-inner {
    display: flex;
    justify-content: center;
    gap: 36px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.ticker b {
    font-size: 22px;
    line-height: 20px;
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.section {
    padding: 95px 0;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 38px;
}

/* DÚVIDAS — perguntas e respostas */

.section-heading h2,
.about h2,
.faq h2 {
    font-size: clamp(34px,4vw,52px);
    line-height: 1.1;
    letter-spacing: -2.3px;
    margin: 18px 0 0;
    font-weight: 700;
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.section-heading p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    max-width: 330px;
    margin: 0;
}

/* SOLUÇÕES — cards de serviços */

.services {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 18px;
}

.service {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    min-height: 365px;
    background: var(--panel);
}

.service.featured {
    background: var(--lime);
    color: var(--ink);
    border-color: var(--lime);
}

.service-icon {
    font-size: 27px;
    margin-bottom: 36px;
}

.service .number {
    position: absolute;
    right: 27px;
    top: 30px;
    font-size: 11px;
    opacity: .65;
}

.service h3 {
    font-size: 27px;
    letter-spacing: -1px;
    margin: 0 0 16px;
}

.service p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 30px;
}

.service.featured p {
    color: #3e502e;
}

.service a {
    font-size: 12px;
    font-weight: 700;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid #4e5c3b;
}

.service a span {
    font-size: 24px;
}

.service a:hover {
    text-decoration: underline;
}

/* PROJETOS — portfólio, cards e filtros */

/* PROJETOS — Fundo Pontos Magnéticos: camada decorativa independente.
© Upward Creative Academy Ltda. Todos os direitos reservados (Lei 9.610/98 e Lei 9.609/98).
  Licença de uso nº UPW-6209-7047-5DCE: pessoal e intransferível, vinculada à conta que copiou ou baixou este arquivo.
  Permitido: usar em projetos próprios e de clientes. Proibido: revender, redistribuir ou compartilhar.
  Remover este aviso ou o código não afasta a responsabilidade. Licença: https://app.upwardacademy.com.br/licenca
*/
/* upw:upw620970475dce */
.work-section > .wrap {
    position: relative;
    z-index: 1;
}

.work-section > .upw-bg-dots {
    --upw-base: #f0f3ea;
    --upw-dot: #b9c7a8;
    --upw-c1: #557d39;
    --upw-c2: #ec8c32;
    --upw-gap: 26px;
    --upw-veil: .75;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--upw-base);
    background-image:
        radial-gradient(55% 60% at 92% 4%, color-mix(in srgb, var(--upw-c1) 7%, transparent), transparent 70%),
        radial-gradient(50% 55% at 4% 98%, color-mix(in srgb, var(--upw-c2) 6%, transparent), transparent 70%);
}

/* Grade de reserva: mantém o acabamento quando o canvas não está disponível. */
.work-section .upw-bg-dots__grid {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, var(--upw-dot) 1.4px, transparent 2px)
        center / var(--upw-gap) var(--upw-gap);
}

.work-section .upw-bg-dots canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.work-section .upw-bg-dots--on .upw-bg-dots__grid {
    display: none;
}

/* Véu suave para equilibrar o movimento e a leitura do portfólio. */
.work-section > .upw-bg-dots::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--upw-veil);
    background: radial-gradient(ellipse 40% 34% at 50% 50%, var(--upw-base) 25%, transparent);
}

@media (max-width: 640px) {
    .work-section > .upw-bg-dots::after {
        background: radial-gradient(ellipse 75% 28% at 50% 50%, var(--upw-base) 30%, transparent);
    }
}



.work-section {
    position: relative;
    isolation: isolate;
    background: #eef0e7;
    color: var(--ink);
}

.work-section .eyebrow {
    color: #536f35;
}

.work-section .section-heading p {
    color: #66705e;
}

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.filter {
    border: 1px solid #c6cebc;
    background: transparent;
    color: #44513a;
    font-size: 12px;
    padding: 10px 18px;
    border-radius: 25px;
}

.filter[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: white;
}

.work-section .wrap {
    max-width: 1120px;
}

/* Linhas flexíveis mantêm os cards iguais e centralizam a última linha incompleta. */
.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
}

.project {
    position: relative;
    flex: 0 0 calc((100% - 56px) / 3);
    min-width: 0;
    padding: 10px;
    background: #fafbf6;
    border: 1px solid #dbe1d2;
    border-radius: 20px;
    transition: transform .25s,box-shadow .25s;
}

.project:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px #1720120d;
}

.project[hidden] {
    display: none;
}

.project-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: #e8ecdf;
    border-radius: 12px;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-link {
    position: absolute;
    right: 18px;
    bottom: 22px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #edf2e3;
    border: 1px solid #dbe4ce;
    border-radius: 50%;
    font-size: 21px;
}

.project-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    min-height: 78px;
    padding: 17px 52px 12px 8px;
}

.project-caption h3 {
    font-size: 16px;
    letter-spacing: -.4px;
    margin: 0;
}

.project-caption span {
    font-size: 11px;
    color: #5f6c54;
    line-height: 1.5;
}

.work-bottom {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.work-bottom .btn {
    background: transparent;
    border-color: #a7b59a;
    color: var(--ink);
}

.work-bottom .btn:hover {
    background: #dde5d1;
}

/* A AGÊNCIA — história e diferenciais */

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-art {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 40px;
    min-height: 365px;
    background: radial-gradient(ellipse at bottom right,#3b4e27 0,transparent 65%),var(--panel);
    position: relative;
    overflow: hidden;
}

.since {
    font-size: 108px;
    font-weight: 800;
    letter-spacing: -8px;
    color: var(--lime);
    line-height: 1.2;
}

.since-label {
    font-size: 13px;
    color: var(--muted);
}

.about-art .big-arrow {
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 155px;
    color: var(--lime);
    line-height: 1.3;
}

.about-art .mini {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 35px;
}

.about p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.9;
}

.values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.values span {
    border: 1px solid var(--line);
    padding: 9px 12px;
    border-radius: 25px;
    font-size: 11px;
}

/* PROCESSO — etapas do projeto */

.process-section {
    padding-top: 0;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
    margin-top: 40px;
}

.step {
    border-top: 1px solid #4a583b;
    padding-top: 22px;
}

.step .step-num {
    font-size: 12px;
    color: var(--lime);
}

.step h3 {
    font-size: 20px;
    letter-spacing: -.5px;
    margin: 23px 0 12px;
}

.step p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

/* DÚVIDAS — perguntas e respostas */

.faq {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    padding-top: 70px;
}

.faq-intro p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.faq-intro a {
    color: var(--lime);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.faq details {
    border-bottom: 1px solid var(--line);
    padding: 21px 0;
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    font-weight: 600;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary:after {
    content: "+";
    font-weight: 400;
    font-size: 24px;
    color: var(--lime);
}

.faq details[open] summary:after {
    content: "−";
}

.faq details p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 550px;
    margin-bottom: 0;
}

/* CONTATO — chamada final e formulário */

.contact-section {
    padding: 0 0 70px;
}

.contact-card {
    background: var(--lime);
    color: var(--ink);
    border-radius: 26px;
    padding: 55px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 65px;
    position: relative;
    overflow: hidden;
}

.contact-card .eyebrow {
    color: #45602b;
}

.contact-card h2 {
    font-size: clamp(39px,4.5vw,62px);
    line-height: 1.03;
    letter-spacing: -3px;
    margin: 22px 0;
}

.contact-card p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 360px;
    color: #40552e;
}

.contact-form {
    align-self: center;
}

.contact-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 9px;
}

.contact-form input,
.contact-form select {
    width: 100%;
    background: #d5f6a0;
    color: var(--ink);
    border: 1px solid #97bb60;
    border-radius: 8px;
    padding: 15px;
    min-height: 49px;
    margin-bottom: 19px;
}

.contact-form .btn {
    background: var(--ink);
    color: var(--white);
    width: 100%;
}

.contact-form .btn:hover {
    background: #2e4221;
}

.contact-form small {
    display: block;
    font-size: 10px;
    line-height: 1.6;
    margin-top: 12px;
    color: #40552e;
}

.contact-form small a {
    text-decoration: underline;
}

.contact-direct {
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    gap: 20px;
    margin-top: 15px;
    border-bottom: 1px solid #718f49;
    padding-bottom: 8px;
}

/* RODAPÉ — marca, canais de contato e créditos */

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 0 0 38px;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 25px;
    font-size: 12px;
    color: var(--muted);
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 23px 0 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #939e87;
    font-size: 10px;
}

.footer-bottom button {
    border: none;
    color: inherit;
    background: none;
    font-size: 10px;
    padding: 0;
}

/* CONTATO — botão flutuante do WhatsApp */

.floating-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 25;
    width: 54px;
    height: 54px;
    border: 1px solid #98bf5f;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: 0 5px 20px #0004;
    transition: transform .2s;
}

.floating-wa:hover {
    transform: translateY(-4px);
}

.floating-wa svg {
    width: 27px;
    height: 27px;
}

/* PRIVACIDADE — janela de informações */

dialog {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    color: var(--white);
    padding: 32px;
    max-width: 580px;
    width: calc(100% - 40px);
}

dialog::backdrop {
    background: #000b;
}

dialog p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
}

dialog h2 {
    margin-top: 0;
}

dialog .btn {
    margin-top: 15px;
}

/* ACESSIBILIDADE — foco, navegação e textos de apoio */

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

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(min-width:1500px) {
    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero {
        padding-top: 50px;
    }

    .hero-grid {
        min-height: 580px;
    }

    .hero h1 {
        font-size: 86px;
    }
}

@media(max-width:1050px) {
    /* BASE — variáveis, estilos globais e estrutura */

    .wrap {
        width: calc(100% - 48px);
    }

    /* CABEÇALHO — marca e navegação */

    .nav-links {
        gap: 18px;
    }

    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero h1 {
        font-size: 62px;
        letter-spacing: -3.5px;
    }

    .hero-grid {
        gap: 20px;
    }

    .browser-card {
        width: 340px;
    }

    .hero-art {
        height: 440px;
    }

    .orbit {
        width: 350px;
        height: 350px;
    }

    .orbit-two {
        width: 440px;
        height: 440px;
    }

    .tag-top {
        left: -10px;
    }

    .tag-bottom {
        right: -5px;
    }

    .floating-tag {
        padding: 12px;
    }

    .mock-content h2 {
        font-size: 36px;
    }

    /* SOLUÇÕES — cards de serviços */

    .service {
        padding: 25px;
    }

    .service h3 {
        font-size: 24px;
    }

    /* A AGÊNCIA — história e diferenciais */

    .about {
        gap: 40px;
    }

    /* CONTATO — chamada final e formulário */

    .contact-card {
        gap: 35px;
        padding: 40px;
    }

    /* DÚVIDAS — perguntas e respostas */

    .faq {
        gap: 40px;
    }
}

@media(max-width:780px) {
    /* CABEÇALHO — marca e navegação */

    .nav {
        height: 76px;
    }

    .menu {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: var(--bg);
        padding: 24px;
        border-bottom: 1px solid var(--line);
        align-items: stretch;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
    }

    .nav-links>a:not(.btn) {
        padding: 16px 0;
    }

    .nav-links .btn {
        margin-top: 10px;
    }

    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero {
        padding-top: 42px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: clamp(52px,9vw,76px);
        max-width: 650px;
    }

    .lead {
        max-width: 490px;
    }

    .hero-art {
        height: 430px;
        max-width: 500px;
        width: 100%;
        margin: 10px auto 0;
    }

    .browser-card {
        width: 365px;
    }

    .tag-top {
        left: 4px;
    }

    .tag-bottom {
        right: 4px;
    }

    .art-star {
        right: 5%;
    }

    .hero-foot {
        margin-top: 15px;
    }

    .hero-foot .location {
        gap: 13px;
    }

    /* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

    .section {
        padding: 65px 0;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        gap: 20px;
    }

    .section-heading p {
        max-width: 490px;
    }

    /* SOLUÇÕES — cards de serviços */

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

    .service {
        min-height: 260px;
    }

    .service-icon {
        margin-bottom: 25px;
    }

    .service h3 {
        font-size: 29px;
    }

    /* PROJETOS — portfólio, cards e filtros */

    /* Duas colunas; um eventual card final fica centralizado. */
    .project {
        flex-basis: calc((100% - 28px) / 2);
    }

    /* A AGÊNCIA — história e diferenciais */

    .about {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-art {
        min-height: 310px;
    }

    /* PROCESSO — etapas do projeto */

    .steps {
        grid-template-columns: 1fr 1fr;
    }

    .process-section {
        padding-top: 0;
    }

    /* DÚVIDAS — perguntas e respostas */

    .faq {
        grid-template-columns: 1fr;
        gap: 15px;
        padding-top: 50px;
    }

    /* CONTATO — chamada final e formulário */

    .contact-card {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-card h2 {
        max-width: 450px;
    }

    /* RODAPÉ — marca, canais de contato e créditos */

    .footer-top {
        align-items: start;
        flex-direction: column;
    }

    .footer-bottom {
        padding-right: 55px;
        line-height: 1.8;
    }

    /* FAIXA DE DESTAQUES — chamadas abaixo da hero */

    .ticker-inner {
        justify-content: flex-start;
        padding: 0 24px;
    }

    /* CONTATO — chamada final e formulário */

    .contact-section {
        padding-bottom: 50px;
    }
}

@media(max-width:460px) {
    /* CABEÇALHO — marca e navegação */

    .nav {
        gap: 12px;
    }

    .brand small {
        font-size: 7px;
        letter-spacing: 1.4px;
    }

    .menu {
        font-size: 12px;
        padding: 10px;
    }

    /* BASE — variáveis, estilos globais e estrutura */

    .wrap {
        width: calc(100% - 36px);
    }

    /* CABEÇALHO — marca e navegação */

    .brand-name {
        font-size: 20px;
    }

    .brand img {
        width: 40px;
        height: 40px;
    }

    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero h1 {
        font-size: 53px;
        letter-spacing: -3px;
    }

    .hero .eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .hero-art {
        height: 380px;
    }

    .browser-card {
        width: 285px;
    }

    .mock-content {
        padding: 19px;
        min-height: 246px;
    }

    .mock-content h2 {
        font-size: 33px;
    }

    .mock-shape {
        right: -80px;
    }

    .floating-tag {
        font-size: 10px;
        padding: 11px;
    }

    .floating-tag strong {
        font-size: 12px;
    }

    .tag-icon {
        width: 29px;
        height: 29px;
    }

    .tag-top {
        top: 18px;
    }

    .tag-bottom {
        bottom: 26px;
    }

    .orbit {
        width: 295px;
        height: 295px;
    }

    .orbit-two {
        width: 365px;
        height: 365px;
    }

    .art-caption {
        bottom: 0;
        left: 16px;
        font-size: 8px;
    }

    .art-star {
        font-size: 55px;
        right: 0;
    }

    .hero-foot {
        align-items: start;
        gap: 15px;
    }

    .hero-foot .location {
        flex-direction: column;
        gap: 7px;
        font-size: 10px;
    }

    .hero-foot strong {
        font-size: 12px;
    }

    .hero-foot>a {
        font-size: 10px;
    }

    .actions {
        gap: 10px;
    }

    .actions .btn {
        padding: 14px 16px;
        gap: 12px;
        font-size: 12px;
    }

    /* PROJETOS — portfólio, cards e filtros */

    /* Uma coluna nos celulares menores. */
    .project {
        flex-basis: 100%;
    }

    .project-image {
        aspect-ratio: 1;
    }

    .project-caption span {
        font-size: 11px;
    }

    /* DÚVIDAS — perguntas e respostas */

    .section-heading h2,
    .about h2,
    .faq h2 {
        font-size: 36px;
    }

    /* CONTATO — chamada final e formulário */

    .contact-card {
        padding: 30px 23px;
        border-radius: 18px;
    }

    .contact-card h2 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    /* PROCESSO — etapas do projeto */

    .steps {
        gap: 22px;
    }

    .step h3 {
        font-size: 18px;
    }

    /* RODAPÉ — marca, canais de contato e créditos */

    .footer-links {
        flex-wrap: wrap;
        gap: 18px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

    /* CONTATO — botão flutuante do WhatsApp */

    .floating-wa {
        right: 15px;
        bottom: 15px;
        width: 49px;
        height: 49px;
    }

    /* A AGÊNCIA — história e diferenciais */

    .since {
        font-size: 95px;
    }

    .about-art {
        padding: 30px;
    }
}

@media(prefers-reduced-motion:reduce) {
    /* BASE — variáveis, estilos globais e estrutura */

    html {
        scroll-behavior: auto;
    }

    *,
    *:before,
    *:after {
        transition: none!important;
        animation: none!important;
    }
}

/* Paleta da marca: bases claras, verde floresta e acentos laranja. */

/* BASE — variáveis, estilos globais e estrutura */

:root {
    --bg: #fbfcf7;
    --panel: #ffffff;
    --lime: #c3e68b;
    --green: #719b44;
    --white: #223b2a;
    --muted: #5c6e60;
    --line: #dce4d7;
    --ink: #213c29;
    --orange: #ec8c32;
}

body {
    background: var(--bg);
    color: var(--ink);
}

/* CABEÇALHO — marca e navegação */

.topbar {
    background: rgba(255,255,252,.96);
    border-bottom-color: #e2e8db;
}

.brand-name {
    color: #28432c;
}

.brand-name span {
    color: #719536;
}

.brand small {
    color: #64715b;
}

.nav-links>a:not(.btn) {
    color: #425644;
}

.nav-links>a:hover {
    color: #8c4b17;
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.btn {
    background: #f3a34e;
    color: #263c25;
    box-shadow: 0 3px 0 #945e1610;
}

.btn:hover {
    background: #ffb669;
}

.btn-outline {
    background: transparent;
    border-color: #c4d1ba;
    color: #2f5037;
    box-shadow: none;
}

.btn-outline:hover {
    background: #e6efdc;
}

/* CABEÇALHO — marca e navegação */

.menu {
    color: #304d34;
    border-color: #d6dfcf;
}

/* COMPONENTES COMPARTILHADOS — botões e títulos de seção */

.eyebrow {
    color: #526f35;
}

.dot {
    background: #d98b30;
    box-shadow: 0 0 0 5px #de962017;
}

/* HERO — primeira dobra, conteúdo e ilustração */

.hero {
    background: radial-gradient(ellipse at 92% 22%,#e2eccf 0,transparent 47%),linear-gradient(120deg,#f9fbf4,#eef4e5);
}

.hero h1 {
    color: #28482f;
}

.hero h1 em {
    color: #6d8f35;
}

.hero h1 em:after {
    border-color: #db8936;
}

.lead,
.hero-note {
    color: #5c6e55;
}

.hero-note span {
    color: #71903f;
}

.hero-foot {
    border-color: #d3dfc6;
    color: #64765b;
}

.hero-foot strong {
    color: #365132;
}

.orbit {
    border-color: #9eb68166;
}

.orbit:after {
    border-color: #98b57677;
}

.hero-art:before {
    background: #aacb663b;
    filter: blur(55px);
}

.art-star {
    color: #e7933c;
}

.art-caption {
    color: #718360;
}

.browser-card {
    background: #fffef7;
    border-color: #738b57;
    box-shadow: 16px 25px 50px #47662824;
}

.browser-top {
    border-color: #dce5d0;
}

.mock-content h2 {
    color: #2d482d;
}

.mock-content h2 span {
    color: #799735;
}

.mock-shape {
    background: #d7e9b9;
}

.mock-bottom i {
    background: #eaf0df;
}

.floating-tag {
    background: #fffef8;
    border-color: #dce4cc;
    box-shadow: 0 10px 25px #50603214;
    color: #2f4c32;
}

.floating-tag small {
    color: #687760;
}

.tag-icon {
    background: #fbe3c5;
    color: #915119;
}

/* FAIXA DE DESTAQUES — chamadas abaixo da hero */

.ticker {
    background: #355a3e;
    color: #f0f5e5;
}

.ticker b {
    color: #efab60;
}

/* SOLUÇÕES — cards de serviços */

.service {
    background: #fff;
    border-color: #dfe6d8;
    box-shadow: 0 6px 22px #41552e04;
}

.service.featured {
    background: #e7f0d7;
    border-color: #cfdeba;
    color: #2c492c;
}

.service-icon {
    color: #b76520;
}

.service.featured .service-icon {
    color: #4b6d30;
}

.service p {
    color: #65715e;
}

.service.featured p {
    color: #4e6540;
}

.service a {
    border-color: #d6e0c8;
    color: #385330;
}

.service.featured a {
    border-color: #bdcfa6;
}

/* SOLUÇÕES — holofote independente em cada article.service */

/* Cards com Holofote — adaptação para os serviços da Periquito Virtual.
 * © Upward Creative Academy Ltda. Todos os direitos reservados (Lei 9.610/98 e Lei 9.609/98).
 * Licença de uso nº UPW-6321-AAF7-B842: pessoal e intransferível, vinculada à conta que copiou ou baixou este arquivo.
 * Permitido: usar em projetos próprios e de clientes. Proibido: revender, redistribuir ou compartilhar.
 * Remover este aviso ou o código não afasta a responsabilidade. Licença: https://app.upwardacademy.com.br/licenca
 * © 2026 Upward Creative Academy. Todos os direitos reservados.
 * É proibido revender, redistribuir, compartilhar ou publicar este código (original ou modificado)
 * como template, kit, curso ou produto.
 */
/* upw:upw6321aaf7b842 */

.services > article.service {
    --upw-c1: #779e45;
    --upw-c2: #c98432;
    --upw-c3: #f3b76d;
    --upw-light: 300px;
    --upw-x: 50%;
    --upw-y: 50%;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Fundo e borda ficam apagados até o mouse entrar no próprio card. */
.services > article.service::before,
.services > article.service::after {
    opacity: 0;
    transition: opacity .2s ease;
}

/* Luz no fundo: uma transparência suave mantém o texto legível. */
.services > article.service::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        var(--upw-light) circle at var(--upw-x) var(--upw-y),
        color-mix(in srgb, var(--upw-c2) 12%, transparent),
        transparent 70%
    );
}

/* Anel de luz: ilumina somente a borda do próprio card. */
.services > article.service::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(
        calc(var(--upw-light) * .8) circle at var(--upw-x) var(--upw-y),
        var(--upw-c3),
        var(--upw-c2) 30%,
        var(--upw-c1) 55%,
        transparent 75%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Ícones em pequenas placas claras, seguindo o acabamento da referência. */
.services > article.service .service-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid #dce4cf;
    background: linear-gradient(135deg, #779e4512, #f3b76d1a);
    font-size: 25px;
    line-height: 1;
}

.services > article.service.featured .service-icon {
    background: #f8fbedb3;
    border-color: #cad9b5;
}

/* O foco por teclado mantém seu contorno acessível, sem acender o holofote. */
.services > article.service:focus-within {
    box-shadow: 0 10px 28px #41552e12;
}

.services > article.service a:focus-visible {
    outline-offset: 5px;
    border-radius: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .services > article.service.is-spotlit:hover::before,
    .services > article.service.is-spotlit:hover::after {
        opacity: 1;
    }

    .services > article.service:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px #41552e12;
    }
}

/* Movimento reduzido: remove a transição e o deslocamento do card. */
@media (prefers-reduced-motion: reduce) {
    .services > article.service::before,
    .services > article.service::after,
    .services > article.service {
        transition: none;
    }

    .services > article.service:hover {
        transform: none;
    }
}


/* PROJETOS — portfólio, cards e filtros */

.work-section {
    background: #f0f3ea;
}

.work-section .eyebrow {
    color: #7b542e;
}

/* A AGÊNCIA — história e diferenciais */

.about-art {
    background: radial-gradient(ellipse at bottom right,#527349 0,transparent 75%),#2c4a33;
    border-color: #3e5c3a;
    color: #f4f7ec;
}

.since {
    color: #d6e8a8;
}

.since-label {
    color: #dce5cf;
}

.about-art .big-arrow {
    color: #eea157;
}

/* DÚVIDAS — perguntas e respostas */

.about p,
.section-heading p,
.step p,
.faq-intro p,
.faq details p {
    color: #61715c;
}

/* A AGÊNCIA — história e diferenciais */

.values span {
    background: #f1f5e9;
    border-color: #dce5cd;
    color: #546a43;
}

/* PROCESSO — etapas do projeto */

.process-section {
    background: #edf3e4;
    padding-top: 65px;
}

.step {
    border-color: #bfceb0;
}

.step .step-num {
    color: #986020;
}

.step h3 {
    color: #345231;
}

/* DÚVIDAS — perguntas e respostas */

.faq {
    border-color: #d9e2cd;
}

.faq-intro a {
    color: #8c511e;
}

.faq details {
    border-color: #dce5d2;
}

.faq summary {
    color: #334e33;
}

.faq summary:after {
    color: #ae6828;
}

/* CONTATO — chamada final e formulário */

.contact-card {
    background: linear-gradient(115deg,#31513a,#446a40);
    color: #f4f8e9;
    box-shadow: 0 18px 40px #3b542517;
}

.contact-card .eyebrow {
    color: #eab575;
}

.contact-card p {
    color: #dce7d2;
}

.contact-card h2 {
    color: #f8faef;
}

.contact-direct {
    border-color: #97ac76;
    color: #edf3de;
}

.contact-form {
    background: #f9fbf2;
    padding: 30px;
    border: 1px solid #dce6ca;
    border-radius: 18px;
    color: #334a2d;
}

.contact-form input,
.contact-form select {
    background: white;
    color: #2d4529;
    border-color: #ccd7bd;
}

.contact-form input::placeholder {
    color: #7b866f;
}

.contact-form .btn {
    background: #f3a34e;
    color: #273c22;
}

.contact-form .btn:hover {
    background: #ffb665;
}

.contact-form small {
    color: #647357;
}

/* RODAPÉ — marca, canais de contato e créditos */

.footer-links {
    color: #5c6f50;
}

.footer-bottom {
    border-color: #dbe3d1;
    color: #64735b;
}

/* CONTATO — botão flutuante do WhatsApp */

.floating-wa {
    background: #c3e68b;
    color: #2b4c29;
    border-color: #a8c774;
    box-shadow: 0 5px 18px #3a572426;
}

/* PRIVACIDADE — janela de informações */

dialog {
    background: #fffef7;
    color: #2c462d;
    border-color: #d2dfc1;
}

dialog p {
    color: #5a6d51;
}

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:780px) {
    /* CABEÇALHO — marca e navegação */

    .nav-links {
        background: #fffef9;
    }

    /* PROCESSO — etapas do projeto */

    .process-section {
        padding-top: 55px;
    }
}

@media(max-width:460px) {
    /* CONTATO — chamada final e formulário */

    .contact-card {
        padding: 30px 20px;
    }

    .contact-form {
        padding: 23px 17px;
    }

    .contact-form .btn {
        padding: 14px 11px;
        gap: 12px;
    }
}

/* Ilustração original da marca, com entrada suave e sem movimento contínuo. */

/* HERO — primeira dobra, conteúdo e ilustração */

.rocket-scene {
    isolation: isolate;
}

.rocket-content {
    padding: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: visible;
    position: relative;
}

.hero-rocket {
    position: relative;
    width: 100%;
    max-width: 610px;
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 22px 16px #47662818);
    animation: rocket-arrival 4.5s ease-in-out both;
    transition: transform .6s ease;
    margin-top: -50px;
}

.rocket-content:hover .hero-rocket {
    transform: translate(5px,-8px) rotate(1deg);
}

.rocket-halo {
    position: absolute;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,#fce5b970,#deebc950 55%,transparent 72%);
}

.rocket-scene .floating-tag {
    z-index: 3;
}

.rocket-scene .tag-top {
    top: 12px;
    left: -8px;
}

.rocket-scene .tag-bottom {
    bottom: -48px;
    right: -5px;
}

.rocket-scene .art-star {
    top: 9%;
    right: 2%;
    font-size: 60px;
    z-index: 2;
}

.rocket-scene .art-caption {
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
}

.flight-spark {
    position: absolute;
    color: #c07d30;
    z-index: 2;
    pointer-events: none;
}

.spark-one {
    left: 7%;
    top: 35%;
    font-size: 30px;
}

.spark-two {
    right: 10%;
    bottom: 26%;
    font-size: 22px;
    color: #769742;
}

/* ANIMAÇÕES — quadros e transições */

@keyframes rocket-arrival {
    0% {
        opacity: 0;
        transform: translate(-16px,22px) rotate(-3deg);
    }
    25% {
        opacity: 1;
    }
    60% {
        transform: translate(4px,-7px) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) rotate(0);
    }
}

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:1050px) {
    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero-rocket {
        max-width: 420px;
    }

    .rocket-scene .tag-top {
        left: 0;
    }

    .rocket-scene .tag-bottom {
        right: 0;
    }
}

@media(max-width:780px) {
    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero-rocket {
        max-width: 440px;
    }

    .rocket-scene .tag-top {
        top: 5px;
    }

    .rocket-scene .tag-bottom {
        bottom: 20px;
    }
}

@media(max-width:460px) {
    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero-rocket {
        width: 100%;
        max-width: 340px;
    }

    .rocket-scene .art-star {
        font-size: 42px;
        right: 0;
        top: 19%;
    }

    .rocket-scene .tag-top {
        top: 9px;
        left: 0;
    }

    .rocket-scene .tag-bottom {
        bottom: 25px;
        right: 0;
    }

    .spark-one {
        left: 2%;
        top: 38%;
    }

    .spark-two {
        right: 4%;
        bottom: 31%;
    }
}

@media(prefers-reduced-motion:reduce) {
    /* HERO — primeira dobra, conteúdo e ilustração */

    .hero-rocket {
        animation: none;
        transition: none;
    }

    .rocket-content:hover .hero-rocket {
        transform: none;
    }
}

/* Aviso de preferência: não bloqueia a navegação nem o WhatsApp. */

/* COOKIES — faixa de aviso e posicionamento do WhatsApp */

.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #fffef8;
    border-top: 1px solid #d4dfc6;
    box-shadow: 0 -8px 32px #29432a12;
    padding: 18px 0;
    padding-bottom: max(18px,env(safe-area-inset-bottom));
    color: #304d31;
}

.cookie-notice[hidden] {
    display: none;
}

.cookie-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1120px,calc(100% - 48px));
    margin: auto;
}

.cookie-symbol {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fce7cd;
    color: #93521f;
    font-size: 24px;
}

.cookie-copy {
    flex: 1;
}

.cookie-copy strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.cookie-copy p {
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
    color: #5b6c53;
}

.cookie-copy a {
    color: #385a32;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.cookie-notice .btn {
    min-width: 104px;
    min-height: 44px;
    box-shadow: none;
    flex-shrink: 0;
}

.cookie-visible {
    padding-bottom: var(--cookie-height,130px);
}

.cookie-visible .floating-wa {
    bottom: calc(var(--cookie-height,130px) + 16px);
}

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:600px) {
    /* COOKIES — faixa de aviso e posicionamento do WhatsApp */

    .cookie-notice {
        padding-top: 15px;
        padding-bottom: max(15px,env(safe-area-inset-bottom));
    }

    .cookie-inner {
        width: calc(100% - 36px);
        gap: 12px;
        flex-wrap: wrap;
    }

    .cookie-symbol {
        display: none;
    }

    .cookie-copy {
        flex-basis: 100%;
    }

    .cookie-notice .btn {
        width: 100%;
        min-height: 42px;
        padding: 10px 18px;
    }

    .cookie-copy strong {
        font-size: 13px;
    }

    .cookie-copy p {
        font-size: 11px;
    }
}

/* Portfólio: quatro colunas em telas amplas, três em notebooks menores. */

@media(min-width:1100px) {
    /* PROJETOS — portfólio, cards e filtros */

    .work-section .wrap {
        max-width: 1240px;
    }

    .projects {
        gap: 26px 20px;
    }

    /* Quatro cards por linha; uma última linha incompleta fica centralizada. */
    .project {
        flex-basis: calc((100% - 60px) / 4);
        padding: 9px;
        border-radius: 18px;
    }

    .project-caption {
        padding-left: 6px;
        padding-right: 43px;
        min-height: 82px;
    }

    .project-caption h3 {
        font-size: 15px;
        line-height: 1.3;
    }

    .project-link {
        right: 15px;
        bottom: 24px;
        width: 32px;
        height: 32px;
        font-size: 19px;
    }
}

/* CONTATO — chamada final e formulário */

.contact-form .optional-label {
    font-weight: 400;
}

/* Fundo Hiperespaço — integração da hero.

© Upward Creative Academy Ltda. Todos os direitos reservados (Lei 9.610/98 e Lei 9.609/98).
Licença de uso nº UPW-8698-3A47-0279: pessoal e intransferível, vinculada à conta que copiou ou baixou este arquivo.
Permitido: usar em projetos próprios e de clientes. Proibido: revender, redistribuir ou compartilhar.
Remover este aviso ou o código não afasta a responsabilidade. Licença: https://app.upwardacademy.com.br/licenca
*/

/* upw:upw86983a470279 */

/* HERO — hiperespaço e contraste sobre fundo escuro */

.upw-bg-warp {
    --upw-base: #07130f;
    --upw-veil: .6;
    --upw-neb-1: rgba(125, 181, 91, .13);
    --upw-neb-2: rgba(107, 159, 80, .14);
    --upw-neb-3: rgba(236, 140, 50, .1);
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(55% 45% at 50% 50%, var(--upw-neb-2), #0000 70%), radial-gradient(60% 55% at 6% 0, var(--upw-neb-1), #0000 70%),
      radial-gradient(60% 55% at 96% 100%, var(--upw-neb-3), #0000 70%), var(--upw-base);
}

/* céu parado: aparece enquanto a animação não roda (ou sem WebGL) */

.upw-bg-warp__stars {
    position: absolute;
    inset: -40%;
    transform: rotate(-28deg);
    background: radial-gradient(1.6px 1.6px at 23% 31%, #fff 50%, #0000), radial-gradient(1.2px 1.2px at 71% 64%, #e1efcb 50%, #0000),
      radial-gradient(1px 1px at 41% 83%, #fff 50%, #0000), radial-gradient(1.4px 1.4px at 87% 19%, #f6e4c1 50%, #0000),
      radial-gradient(2px 2px at 58% 12%, #fff 50%, #0000), radial-gradient(1.2px 1.2px at 33% 47%, #f8d1ad 50%, #0000),
      radial-gradient(1px 1px at 12% 66%, #e8f5d5 50%, #0000), radial-gradient(1.4px 1.4px at 66% 38%, #fff 50%, #0000),
      radial-gradient(2.4px 2.4px at 81% 77%, #f7e8ce 50%, #0000);
    background-size: 397px 283px, 271px 331px, 523px 419px, 349px 461px, 457px 373px, 229px 257px, 167px 193px, 311px 239px, 613px 487px;
}

.upw-bg-warp[data-upw-live] .upw-bg-warp__stars {
    opacity: 0;
}

.upw-bg-warp__glow {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    will-change: transform, opacity;
}

.upw-bg-warp canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* véu escuro no centro: mantém o título legível (força em --upw-veil) */

.upw-bg-warp::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--upw-veil);
    background: radial-gradient(42% 32% at 50% 50%, var(--upw-base), #0000);
}

/* Contraste exclusivo da primeira dobra; o restante do site mantém a paleta clara. */

.hero.hero-hyperspace {
    isolation: isolate;
    background: #07130f;
    color: #f5f8ee;
}

.hero-hyperspace > .wrap {
    position: relative;
    z-index: 1;
}

.hero-hyperspace > .upw-bg-warp::after {
    opacity: 1;
    background: linear-gradient(90deg,rgba(7,19,15,.88) 0%,rgba(7,19,15,.74) 29%,rgba(7,19,15,.25) 59%,rgba(7,19,15,.06) 100%),radial-gradient(ellipse 45% 50% at 25% 43%,rgba(7,19,15,.38),transparent 85%);
}

.hero-hyperspace h1 {
    color: #f7faef;
    text-shadow: 0 3px 28px #0005;
}

.hero-hyperspace h1 em {
    color: #c9eaa0;
}

.hero-hyperspace h1 em:after {
    border-color: #f1a551;
}

.hero-hyperspace .eyebrow {
    color: #d7e7bd;
}

.hero-hyperspace .dot {
    background: #f3ac5b;
    box-shadow: 0 0 0 5px #f3ac5b17;
}

.hero-hyperspace .lead {
    color: #dde6d7;
    text-shadow: 0 1px 10px #07130f;
}

.hero-hyperspace .hero-note {
    color: #c3d0b9;
}

.hero-hyperspace .hero-note span {
    color: #c9eaa0;
}

.hero-hyperspace .btn:not(.btn-outline) {
    background: #f5aa56;
    color: #1c301e;
    box-shadow: 0 5px 24px #ed963b26;
}

.hero-hyperspace .btn:not(.btn-outline):hover {
    background: #ffbd73;
}

.hero-hyperspace .btn-outline {
    color: #f0f6e6;
    border-color: #a0b99099;
    background: #10271fd9;
}

.hero-hyperspace .btn-outline:hover {
    background: #294536;
}

.hero-hyperspace .hero-foot {
    color: #c1ceb8;
    border-color: #9ab27b40;
}

.hero-hyperspace .hero-foot strong,
.hero-hyperspace .hero-foot a {
    color: #edf5e2;
}

.hero-hyperspace .floating-tag {
    color: #f5f8ed;
    background: #142b22ed;
    border-color: #b2cb8d42;
    box-shadow: 0 12px 28px #0003;
    backdrop-filter: blur(12px);
}

.hero-hyperspace .floating-tag small {
    color: #cad6bd;
}

.hero-hyperspace .tag-icon {
    background: #f3ab59;
    color: #352b16;
}

.hero-hyperspace .art-caption {
    color: #d2dfc2;
}

.hero-hyperspace .art-star {
    color: #f3ae62;
}

.hero-hyperspace .flight-spark {
    color: #f2be80;
}

.hero-hyperspace .spark-two {
    color: #c7e39b;
}

.hero-hyperspace .orbit {
    border-color: #b9d48c26;
}

.hero-hyperspace .orbit:after {
    border-color: #b9d48c30;
}

.hero-hyperspace .orbit-two {
    opacity: .4;
}

.hero-hyperspace .hero-art:before {
    background: #7ab54a14;
}

.hero-hyperspace .rocket-halo {
    background: radial-gradient(circle,#a9d36518,#f3a34e06 55%,transparent 72%);
}

.hero-hyperspace .hero-rocket {
    filter: drop-shadow(0 18px 28px #0005);
}

.hero-hyperspace :focus-visible {
    outline-color: #ffc378;
}

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:780px) {
    /* HERO — hiperespaço e contraste sobre fundo escuro */

    .hero-hyperspace > .upw-bg-warp::after {
        background: linear-gradient(180deg,rgba(7,19,15,.86) 0%,rgba(7,19,15,.68) 38%,rgba(7,19,15,.12) 68%,rgba(7,19,15,.42) 100%);
    }
}

/* Botão principal — visual do Botão.html

© Upward Creative Academy Ltda. Todos os direitos reservados (Lei 9.610/98 e Lei 9.609/98).
Licença de uso nº UPW-B2C8-BF0D-F7BD: pessoal e intransferível, vinculada à conta que copiou ou baixou este arquivo.
Permitido: usar em projetos próprios e de clientes. Proibido: revender, redistribuir ou compartilhar.
Remover este aviso ou o código não afasta a responsabilidade. Licença: https://app.upwardacademy.com.br/licenca
*/

/* upw:upwb2c8bf0df7bd */

/* === VOLCANIC / AMBER V2 ANIMATIONS === */

/* ANIMAÇÕES — quadros e transições */

@keyframes pvCtaBorderTurn {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pvCtaBorderTurnWithTranslate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* HERO — botão principal com brilho âmbar */

.hero .actions .btn.hero-cta {
    isolation: isolate;
    overflow: hidden;
    border-radius: 12px;
    /* Slightly squarer than V1's pill shape */
    position: relative;
    width: fit-content;
    margin: auto;
    --animation-speed: 2.5s;
    box-shadow: 0 10px 40px -10px rgba(251, 146, 60, 0.4);
    /* subtle orange glow */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.hero .actions .btn.hero-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 50px -5px rgba(249, 115, 22, 0.6);
    /* Intense orange on hover */
}

.hero .actions .btn.hero-cta .pv-cta-mask-1,
.hero .actions .btn.hero-cta .pv-cta-mask-2 {
    opacity: 1;
}

.pv-cta-mask-1,
.pv-cta-border {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
}

.pv-cta-mask-1:before,
.pv-cta-border:before {
    content: "";
    float: left;
    padding-top: 100%;
}

.pv-cta-mask-1:after,
.pv-cta-border:after {
    clear: both;
    content: "";
    display: block;
}

.pv-cta-mask-1 {
    opacity: 0;
    pointer-events: none;
    transition: 1s ease opacity;
}

.pv-cta-mask-1 * {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* The Spinning Gradient Border - Amber/Gold colors */

.pv-cta-border,
.pv-cta-blur,
.pv-cta-svg {
    animation: pvCtaBorderTurn var(--animation-speed) infinite linear;
    background-image: conic-gradient(from 0 at 50% 50%, #f97316 0deg, rgba(249, 115, 22, 0) 60deg, rgba(249, 115, 22, 0) 300deg, #fcd34d 360deg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Inner svg mask - note the adapted paths for slightly less roundness */

.pv-cta-svg-mask {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E");
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
}

.pv-cta-blur {
    filter: blur(10px);
    opacity: .25;
}

.pv-cta-border {
    animation-name: pvCtaBorderTurnWithTranslate;
}

.pv-cta-mask-2 {
    border-radius: 12px;
    content: "";
    height: 100%;
    inset: 0;
    left: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    padding: 1.5px;
    /* slightly thicker border */
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: 1s ease opacity;
    width: 100%;
    z-index: 1;
}

.pv-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 2px 24px 2px 2px;
    background-color: #0F0D0D;
    background: linear-gradient(225deg, rgba(82, 82, 91, .2) 5%, #050505 43%, #000000 68%);
    border: 1px solid rgba(249, 115, 22, .2);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    flex-wrap: nowrap;
}

.pv-cta-text {
    position: relative;
    z-index: 2;
    text-align: center;
    background: linear-gradient(271.55deg, rgba(249, 115, 22, 0.5) 5.88%, rgba(249, 115, 22, 0) 50.22%, rgba(252, 211, 77, 0.4) 95.32%);
    border: 1px solid rgba(249, 115, 22, .4);
    border-radius: 10px;
    padding: 16px 28px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    box-shadow: -4px 10px 40px rgba(249, 115, 22, 0.2), inset -2px -2px 10px rgba(252, 211, 77, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

.pv-cta-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/hero-button-lava.webp") no-repeat center/cover;
    border-radius: 10px;
    transform: scale(1.1);
    opacity: .5;
    transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity .4s ease;
    z-index: -1;
    /* Recolor lava to orange/red tones */
    filter: hue-rotate(340deg) saturate(2) brightness(1.2);
}

.hero .actions .btn.hero-cta:hover .pv-cta-text::before {
    transform: scale(1);
    opacity: .9;
}

.hero .actions .btn.hero-cta:hover .pv-cta-text {
    background: linear-gradient(271.55deg, rgba(249, 115, 22, 0.7) 5.88%, rgba(249, 115, 22, 0) 50.22%, rgba(252, 211, 77, 0.8) 95.32%);
    border-color: rgba(252, 211, 77, 0.8);
    box-shadow: -4px 10px 60px rgba(249, 115, 22, 0.5), inset -2px -2px 10px rgba(252, 211, 77, 0.4);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.pv-cta-icon {
    display: inline-block;
    width: 20px;
    height: auto;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero .actions .btn.hero-cta:hover .pv-cta-icon {
    transform: translateX(4px);
    opacity: 1;
}

/* === responsive media queries for button from the first block === */

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:480px) {
    /* HERO — botão principal com brilho âmbar */

    .pv-cta-inner {
        gap: 12px;
        padding: 8px 16px 8px 8px;
    }

    .pv-cta-text {
        font-size: 14px;
        padding: 14px 20px;
    }

    .pv-cta-icon {
        width: 18px;
    }
}

/* Integração: área inteira clicável e CTA original, sem dependências de framework. */

/* HERO — botão principal com brilho âmbar */

.hero .actions .btn.hero-cta {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
    background: transparent;
    color: #fff;
    gap: 0;
    text-decoration: none;
}

.hero .actions .btn.hero-cta:hover,
.hero .actions .btn.hero-cta:focus-visible {
    background: transparent;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 50px -5px rgba(249,115,22,.6);
}

.hero-cta .pv-cta-inner {
    position: relative;
    min-width: 0;
    color: #fff;
}

.hero-cta .pv-cta-text {
    min-width: 0;
    font-size: 13px;
    letter-spacing: .055em;
    padding: 16px 20px;
    line-height: 1.35;
}

.hero-cta .pv-cta-icon {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    color: #fff;
}

.hero-cta .pv-cta-mask-1,
.hero-cta .pv-cta-mask-2 {
    pointer-events: none;
}

.hero-cta:focus-visible .pv-cta-text::before {
    transform: scale(1);
    opacity: .9;
}

.hero-cta:focus-visible .pv-cta-icon {
    transform: translateX(4px);
    opacity: 1;
}

/* RESPONSIVIDADE E PREFERÊNCIAS DE MOVIMENTO */

@media(max-width:480px) {
    /* HERO — botão principal com brilho âmbar */

    .hero .actions .btn.hero-cta {
        max-width: 100%;
    }

    .hero-cta .pv-cta-inner {
        gap: 10px;
        padding: 6px 12px 6px 6px;
    }

    .hero-cta .pv-cta-text {
        font-size: 12px;
        letter-spacing: .035em;
        padding: 14px 13px;
    }

    .hero-cta .pv-cta-icon {
        width: 18px;
    }
}

@media(prefers-reduced-motion:reduce) {
    /* HERO — botão principal com brilho âmbar */

    .hero-cta .pv-cta-border,
    .hero-cta .pv-cta-blur,
    .hero-cta .pv-cta-svg {
        animation: none;
    }

    .hero .actions .btn.hero-cta:hover,
    .hero .actions .btn.hero-cta:focus-visible {
        transform: none;
    }
}