/* ============================================================ PRELOADER — tela de entrada com a logo sendo desenhada ============================================================ */ .intro { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; pointer-events: none; } .intro__bg { position: absolute; inset: 0; background-color: var(--bg-base); } .intro__logo { position: relative; width: clamp(8rem, 22vw, 14rem); height: auto; color: var(--accent-secondary); opacity: 0; /* revelada via JS quando o traço já está pronto */ will-change: transform, opacity; } .intro__logo path { stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ HEADER — estado transparente sobre o hero ============================================================ */ .site-header--transparent { background-color: transparent; border-color: transparent; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; } .hero__image-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__image { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; object-fit: cover; will-change: transform; } .hero__inner { position: relative; z-index: 1; text-align: center; max-width: clamp(560px, 72vw, 860px); } .hero__titles { position: relative; } .hero__title { font-size: var(--text-hero); color: var(--text-1); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 8px 40px rgba(0, 0, 0, 0.45); text-wrap: initial; } .hero__title--first { position: absolute; top: 0; left: 0; right: 0; /* Decorativo (só a troca da intro). Some por opacidade, mas a caixa fica sobre os botões — sem isto, ela engole o clique do CTA quando a intro não roda (entrada via Swup, sem o deslocamento y:-40 que a intro aplica). */ pointer-events: none; } .hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-block-start: var(--space-lg); } /* Botões sobre fundo espacial */ .hero .btn--primary { box-shadow: 0 0 18px rgba(216, 106, 2, 0.35); } .hero .btn--primary:hover { box-shadow: var(--glow-accent); } .hero .btn--ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(232, 224, 212, 0.06); border-color: rgba(232, 224, 212, 0.22); color: var(--text-2); } .hero .btn--ghost:hover { background-color: rgba(232, 224, 212, 0.11); border-color: rgba(232, 224, 212, 0.38); color: var(--text-1); } /* ============================================================ CÉU ESTRELADO — detalhe sutil nas seções de fundo base Só nas seções cujo fundo é --bg-base (as .work e o .process herdam do body; a .pricing-cta define explícito). Tudo via radial-gradient em dois pseudo-elementos: ::before com as estrelas miúdas, ::after com as poucas estrelas que brilham. Sem JS, sem nós no DOM, pintura estática + pulso só de opacity (composto na GPU). z-index negativo deixa o detalhe acima do fundo da seção e atrás do conteúdo. Escopo em [data-page="index"] pra não vazar nas outras páginas (o index.css persiste no durante a navegação Swup). ============================================================ */ [data-page="index"] .work, [data-page="index"] .process, [data-page="index"] .pricing-cta { position: relative; /* contexto de empilhamento próprio: o ::before/::after (z-index negativo) pinta acima do fundo da seção e abaixo do conteúdo — necessário pra aparecer também na .pricing-cta, que tem --bg-base opaco */ isolation: isolate; } /* Camada base — estrelas miúdas, respiro lento e uniforme */ [data-page="index"] .work::before, [data-page="index"] .process::before, [data-page="index"] .pricing-cta::before { content: ""; position: absolute; inset: 0; z-index: var(--z-stars); pointer-events: none; background-repeat: no-repeat; background-image: /* estrelas — pontos esparsos, brancos quentes e âmbar */ radial-gradient( 1.5px 1.5px at 20% 25%, rgba(232, 224, 212, 0.98), transparent 100% ), radial-gradient( 1px 1px at 75% 16%, rgba(232, 224, 212, 0.78), transparent 100% ), radial-gradient( 1.5px 1.5px at 60% 62%, rgba(255, 159, 40, 0.85), transparent 100% ), radial-gradient( 1px 1px at 34% 80%, rgba(232, 224, 212, 0.72), transparent 100% ), radial-gradient( 2px 2px at 88% 44%, rgba(232, 224, 212, 0.92), transparent 100% ), radial-gradient( 1px 1px at 50% 36%, rgba(232, 224, 212, 0.62), transparent 100% ), radial-gradient( 1px 1px at 15% 58%, rgba(255, 159, 40, 0.68), transparent 100% ), radial-gradient( 1.5px 1.5px at 80% 86%, rgba(232, 224, 212, 0.82), transparent 100% ), radial-gradient( 1px 1px at 45% 12%, rgba(232, 224, 212, 0.62), transparent 100% ), radial-gradient( 1px 1px at 28% 46%, rgba(232, 224, 212, 0.58), transparent 100% ), radial-gradient( 1px 1px at 8% 34%, rgba(232, 224, 212, 0.6), transparent 100% ), radial-gradient( 1.5px 1.5px at 66% 88%, rgba(232, 224, 212, 0.7), transparent 100% ), radial-gradient( 1px 1px at 92% 20%, rgba(255, 159, 40, 0.6), transparent 100% ), radial-gradient( 1px 1px at 40% 70%, rgba(232, 224, 212, 0.55), transparent 100% ), radial-gradient( 1px 1px at 70% 40%, rgba(232, 224, 212, 0.58), transparent 100% ), radial-gradient( 1px 1px at 24% 90%, rgba(255, 159, 40, 0.55), transparent 100% ); /* respiro lento — só opacity (composto na GPU), bem discreto */ animation: starfield-twinkle 9s var(--ease-in-out) infinite alternate; } /* Camada de cima — algumas estrelas maiores com brilho, pulsando fora de fase */ [data-page="index"] .work::after, [data-page="index"] .process::after, [data-page="index"] .pricing-cta::after { content: ""; position: absolute; inset: 0; z-index: var(--z-stars); pointer-events: none; background-repeat: no-repeat; background-image: radial-gradient( 4px 4px at 30% 38%, rgba(255, 241, 214, 0.95) 0%, rgba(255, 159, 40, 0.4) 38%, transparent 100% ), radial-gradient( 4px 4px at 70% 24%, rgba(232, 224, 212, 0.95) 0%, rgba(216, 106, 2, 0.35) 40%, transparent 100% ), radial-gradient( 3.5px 3.5px at 14% 72%, rgba(255, 241, 214, 0.9) 0%, rgba(255, 159, 40, 0.35) 40%, transparent 100% ), radial-gradient( 4px 4px at 86% 58%, rgba(232, 224, 212, 0.95) 0%, rgba(255, 159, 40, 0.35) 40%, transparent 100% ), radial-gradient( 3.5px 3.5px at 52% 84%, rgba(255, 241, 214, 0.9) 0%, rgba(216, 106, 2, 0.35) 40%, transparent 100% ); /* pulso mais forte e em ritmo diferente do respiro de baixo → "algumas brilhando" */ animation: starfield-shine 4.5s var(--ease-in-out) infinite alternate; } @keyframes starfield-twinkle { from { opacity: 0.82; } to { opacity: 1; } } @keyframes starfield-shine { from { opacity: 0.35; } to { opacity: 1; } } /* ============================================================ SEÇÕES DE TRABALHO — imagem + texto, lado a lado ============================================================ */ .work__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; } .work--reverse .work__media { order: 2; } .work__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; max-width: 88%; margin-inline: auto; background-color: var(--bg-2); box-shadow: 0 0 0 1px var(--border-subtle), 0 24px 64px rgba(0, 0, 0, 0.5); } .work__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .work__content { display: flex; flex-direction: column; } .work .link-arrow { align-self: flex-end; } /* .work__eyebrow herda o tratamento base do global.css */ /* Sites Institucionais — variante accent-deep */ .work--accent-deep .work__eyebrow { color: var(--accent-deep); } .work--accent-deep .link-arrow { color: var(--accent-deep); } .work--accent-deep .link-arrow:hover { color: var(--accent-deep-hover); } .work__title { font-size: var(--text-2xl); color: var(--text-1); } .work__description { color: var(--text-2); line-height: 1.75; } @media (max-width: 56rem) { .work__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .work__media { order: 2; } .work--reverse .work__media { order: 2; } } /* ============================================================ PORTFÓLIO — carrossel de tela cheia ============================================================ */ .portfolio { background-color: var(--bg-3); padding-block: 0 var(--space-3xl); } .portfolio__intro { padding-block: var(--space-2xl) var(--space-xl); text-align: center; } .portfolio__intro h2 { margin-block-start: var(--space-sm); } /* -- Carrossel -- */ .portfolio__carousel { position: relative; width: calc(100% - 2 * var(--space-md)); max-width: var(--content-width); margin-inline: auto; height: min(78dvh, 720px); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--border-subtle), 0 32px 80px rgba(0, 0, 0, 0.55); } .portfolio__track { position: relative; width: 100%; height: 100%; } /* -- Setas de navegação -- */ .portfolio__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); border: 1px solid rgba(232, 224, 212, 0.18); background-color: rgba(9, 8, 7, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-1); cursor: pointer; opacity: 0.45; transition: opacity var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out); } .portfolio__arrow:hover { opacity: 1; background-color: rgba(9, 8, 7, 0.7); border-color: var(--accent-secondary); } .portfolio__arrow svg { width: 1.4rem; height: 1.4rem; } .portfolio__arrow--prev { left: var(--space-md); } .portfolio__arrow--next { right: var(--space-md); } /* -- Slides -- */ .portfolio__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none; will-change: opacity, transform; } .portfolio__slide--active { opacity: 1; pointer-events: auto; } /* -- Imagem (esquerda, corte diagonal na direita) -- */ .portfolio__slide-media { position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - 6vw) 100%, 0 100%); } .portfolio__slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -- Conteúdo (direita) -- */ .portfolio__slide-content { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding-inline: calc(var(--space-2xl) + 2vw) var(--space-2xl); padding-block: var(--space-2xl); } .portfolio__slide-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-1); } .portfolio__slide-desc { color: var(--text-2); line-height: 1.75; max-width: 46ch; } .portfolio__slide-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-sm); } /* -- Pontos de navegação -- */ .portfolio__dots { position: absolute; bottom: var(--space-lg); right: var(--space-2xl); display: flex; align-items: center; gap: var(--space-xs); z-index: 10; } .portfolio__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); border: none; background-color: var(--border-strong); cursor: pointer; padding: 0; transition: width var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out); } .portfolio__dot--active { width: 1.75rem; background-color: var(--accent-primary); } @media (max-width: 56rem) { /* Card mais alto no celular pra imagem do site ganhar destaque — a faixa estreita de antes deixava só um filete do screenshot. */ .portfolio__carousel { height: min(88dvh, 660px); } /* A imagem ocupa o espaço que sobra (1fr) e o conteúdo fica com a altura natural dele (auto) — assim os botões do slide nunca são cortados pelo overflow do carrossel, qualquer que seja o texto. */ .portfolio__slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .portfolio__slide-media { /* Sem o corte diagonal no celular: retângulo limpo com o screenshot inteiro à mostra (cantos de cima arredondados pelo overflow do carrossel). */ clip-path: none; } /* Recorte ancorado no topo: a faixa estreita mostra o header/hero do site (parte reconhecível), não um pedaço do meio. */ .portfolio__slide-media img { object-position: top; } .portfolio__slide-content { /* padding inferior maior reserva a faixa dos pontos, abaixo dos botões */ padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + var(--space-md)); justify-content: flex-start; gap: var(--space-sm); } .portfolio__slide-title { font-size: var(--text-2xl); } /* Descrição em até 3 linhas (com reticências): encurta o conteúdo pra sobrar altura pra imagem. O texto completo segue no link 'Ver portfólio completo'. */ .portfolio__slide-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* CTAs empilhados em largura total: alvo de toque generoso e altura previsível, sem quebra de linha torta entre os dois botões. */ .portfolio__slide-actions { flex-direction: column; align-items: stretch; } /* No celular a navegação é por arraste horizontal (ver index.js), então as setas saem de cena. */ .portfolio__arrow { display: none; } /* Pontos centralizados no rodapé, na faixa reservada abaixo dos botões — saem de cima do conteúdo. */ .portfolio__dots { inset: auto 50% var(--space-md) auto; transform: translateX(50%); } } /* ============================================================ COMO FUNCIONA — constelação de etapas (estrelas + cards) ============================================================ */ .process__timeline { position: relative; margin-block-start: var(--space-2xl); } /* -- Constelação (desktop): estrelas de 4 pontas desalinhadas, ligadas por linhas inclinadas. O SVG escala junto com a largura. -- */ .process__constellation { display: block; width: 100%; height: auto; margin-block-end: var(--space-lg); overflow: visible; /* deixa o brilho das estrelas vazar do viewBox */ } .process__constellation-line { fill: none; stroke: var(--accent-secondary); stroke-width: 1.5; /* unidades de usuário: escala junto com o SVG (~1–1.6px) */ stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; } .process__constellation-star { fill: var(--accent-primary); filter: drop-shadow(0 0 4px rgba(255, 159, 40, 0.6)); } /* Trilha do mobile: escondida no desktop (a constelação acima cobre esse papel) */ .process__trail { display: none; } /* O brilho de algumas estrelas é feito no JS (index.js): não dá pra usar animação CSS de opacity aqui porque ela brigaria com o stagger de entrada — cada estrela precisa entrar junto com o seu card. */ /* -- Trilha de cards -- */ .process__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; padding: 0; } .process__step { display: flex; flex-direction: column; text-align: center; align-items: stretch; } /* marcador-estrela: só no mobile (no desktop a constelação faz esse papel) */ .process__marker { display: none; } /* -- Card -- */ .process__card { flex: 1; width: 100%; padding: var(--space-lg); background-color: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .process__step-title { font-size: var(--text-lg); color: var(--text-1); } .process__step-text { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--text-2); line-height: 1.7; } @media (max-width: 56rem) { /* Constelação some; vira uma timeline vertical com estrelas de marcador */ .process__constellation { display: none; } .process__steps { position: relative; z-index: 1; /* cards/estrelas acima da trilha */ grid-template-columns: 1fr; gap: var(--space-xl); } /* A estrela vive num "corredor" à esquerda do card; alternar o lado dela em cada etapa cria o zigue-zague da constelação (estrelas desalinhadas). A linha que liga uma à outra é o SVG .process__trail, desenhado no JS. */ .process__step { position: relative; display: block; padding-inline-start: 4.25rem; /* corredor da estrela; encolhe um tico o card */ text-align: left; } .process__marker { display: block; position: absolute; top: 50%; transform: translateY(-50%); /* estrela no centro vertical do card */ width: 2rem; height: 2rem; color: var(--accent-primary); filter: drop-shadow(0 0 4px rgba(255, 159, 40, 0.5)); z-index: 1; } .process__step:nth-child(odd) .process__marker { inset-inline-start: 0; } .process__step:nth-child(even) .process__marker { inset-inline-start: 2rem; } .process__marker svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* Trilha: linha da constelação ligando as estrelas, com a MESMA cor e opacidade do desktop. Cobre toda a área das etapas; os pontos são definidos no JS a partir do centro real de cada estrela. */ .process__trail { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .process__trail-line { fill: none; stroke: var(--accent-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; } } /* ============================================================ SOBRE MIM — retrato + apresentação ============================================================ */ .about { background-color: var(--bg-2); } .about__inner { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--space-3xl); align-items: center; } .about__media { position: relative; margin: 0; max-width: 88%; width: 100%; justify-self: center; } .about__media img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border-subtle), 0 24px 64px rgba(0, 0, 0, 0.5); } /* Moldura accent deslocada atrás do retrato */ .about__media::before { content: ""; position: absolute; inset: 0; z-index: 0; transform: translate(var(--space-md), var(--space-md)); border: 1px solid var(--accent-deep); border-radius: var(--radius-lg); } .about__text { color: var(--text-2); line-height: 1.75; } .about .section-header__eyebrow { color: var(--accent-deep); } .about .link-arrow { display: block; width: fit-content; margin-inline-start: auto; color: var(--accent-deep); } .about .link-arrow:hover { color: var(--accent-deep-hover); } @media (max-width: 56rem) { .about__inner { grid-template-columns: 1fr; gap: var(--space-2xl); } .about__media { margin-inline: auto; order: 2; } } /* ============================================================ PRICING CTA — três cards de serviço antes do FAQ ============================================================ */ .pricing-cta { background-color: var(--bg-base); } .pricing-cta__header { text-align: center; margin-block-end: var(--space-2xl); } /* o lede tem max-width, então precisa do auto pra centralizar o bloco */ .pricing-cta__header .section-header__lede { margin-inline: auto; } .pricing-cta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } /* -- Card base -- */ .pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); background-color: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: box-shadow var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out), transform var(--transition-base) var(--ease-out); } .pricing-card:hover { border-color: var(--accent-secondary); box-shadow: 0 0 48px rgba(216, 106, 2, 0.22); transform: scale(1.025); } .pricing-card:hover .pricing-card__btn { background-color: var(--accent-secondary); color: #fff; box-shadow: 0 0 28px rgba(216, 106, 2, 0.5); } /* -- Card destaque -- */ .pricing-card--featured { background-color: var(--bg-3); } .pricing-card__badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); padding: 0.25rem var(--space-md); border-radius: var(--radius-full); background-color: var(--accent-secondary); color: #fff; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } /* -- Card em breve -- */ .pricing-card--soon { opacity: 0.45; pointer-events: none; user-select: none; } .pricing-card__soon-label { position: absolute; top: var(--space-md); right: var(--space-md); padding: 0.2rem var(--space-sm); border-radius: var(--radius-full); border: 1px solid var(--border-default); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } /* -- Topo do card (tipo + preço) -- */ .pricing-card__top { display: flex; flex-direction: column; gap: var(--space-2xs); } .pricing-card__type { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--text-1); } .pricing-card__price { font-size: var(--text-sm); color: var(--text-2); } .pricing-card__price strong { font-size: var(--text-xl); font-weight: 700; color: var(--accent-primary); font-family: var(--font-heading); } /* -- Lista de itens inclusos -- */ .pricing-card__features { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; flex: 1; } .pricing-card__features li { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; } .pricing-card__features li::before { content: "✓"; flex-shrink: 0; color: var(--accent-secondary); font-weight: 700; } .pricing-card__btn { width: 100%; margin-block-start: auto; } /* -- Rodapé da seção (link de contato) -- */ .pricing-cta__contact { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-block-start: var(--space-2xl); padding: var(--space-xl) var(--space-2xl); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: linear-gradient( 135deg, rgba(216, 106, 2, 0.06) 0%, transparent 60% ); text-align: center; } .pricing-cta__contact-heading { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--text-1); } .pricing-cta__contact-sub { color: var(--text-2); font-size: var(--text-base); max-width: 42ch; } @media (max-width: 64rem) { .pricing-cta__grid { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } } /* ============================================================ CTA DE SERVIÇOS — chamada entre as frentes de trabalho e o portfólio ============================================================ */ .services-cta { background-color: var(--bg-2); border-block: 1px solid var(--border-subtle); } .services-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xl); } .services-cta__title { font-size: var(--text-2xl); color: var(--text-1); margin-block-start: var(--space-sm); } .services-cta__sub { color: var(--text-2); font-size: var(--text-lg); line-height: 1.65; margin-block-start: var(--space-md); max-width: 58ch; margin-inline: auto; } .services-cta__actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; } /* ============================================================ FAQ — acordeão de perguntas frequentes ============================================================ */ .faq { padding-block: clamp(var(--space-2xl), 10vw, var(--space-3xl)); background-color: var(--bg-2); } .faq .section-header { margin-block-end: var(--space-2xl); text-align: center; } .faq__list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .faq__item { border-bottom: 1px solid var(--border-subtle); } .faq__item:last-child { border-bottom: none; } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); background: none; border: none; text-align: left; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--text-1); cursor: pointer; transition: background-color var(--transition-base) var(--ease-out); } .faq__question:hover { background-color: var(--bg-2); } .faq__icon { flex-shrink: 0; position: relative; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); transition: border-color var(--transition-base) var(--ease-out); } /* traço horizontal sempre visível */ .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: var(--text-2); border-radius: 2px; transition: transform var(--transition-base) var(--ease-out), opacity var(--transition-base) var(--ease-out); } .faq__icon::before { width: 0.6rem; height: 1.5px; transform: translate(-50%, -50%); } /* traço vertical que some ao abrir */ .faq__icon::after { width: 1.5px; height: 0.6rem; transform: translate(-50%, -50%); } .faq__question[aria-expanded="true"] .faq__icon { border-color: var(--accent-secondary); } .faq__question[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; } /* Resposta — animação via max-height */ .faq__answer { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease-out); } .faq__answer[hidden] { display: block; /* mantém no DOM pra animação funcionar */ visibility: hidden; } .faq__answer:not([hidden]) { visibility: visible; } .faq__answer p { padding: 0 var(--space-xl) var(--space-lg); color: var(--text-2); line-height: 1.75; } @media (max-width: 40rem) { .faq__question { padding: var(--space-md) var(--space-lg); font-size: var(--text-base); } .faq__answer p { padding: 0 var(--space-lg) var(--space-md); } }