/* ============================================================================
   restore.css — camada de reconstrução (NÃO faz parte do CSS capturado)
   ----------------------------------------------------------------------------
   A captura é um snapshot do DOM DEPOIS da hidratação do React, feito a 1200px+.
   Isso significa que:
     a) o stylesheet runtime do Framer (<style data-framer-css>) veio VAZIO —
        as regras `.hidden-*` de breakpoint se perderam;
     b) vários elementos foram serializados NO MEIO de uma animação de entrada,
        com `opacity:0` inline, e ficariam invisíveis para sempre sem o bundle
        React remoto (que não foi capturado).

   Este arquivo repõe só o que é DERIVÁVEL da própria captura. Cada bloco diz
   de onde a informação veio. Blocos marcados [INFERÊNCIA] são os únicos que
   não saem 1:1 dos arquivos capturados.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1. Regras de breakpoint  [derivado de <script id="__framer__breakpoints">]
   ----------------------------------------------------------------------------
   O mapa hash -> media query está literalmente na captura:
     c64k2x / 6bg034 -> (min-width:810px) and (max-width:1199.98px)
     13hz73a/ gpk122 -> (max-width:809.98px)

   Framer usa `.hidden-<hash>{display:none}` dentro da media query correspondente.
   PORÉM: o snapshot só contém a variante DESKTOP de cada seção — as variantes
   tablet/mobile foram removidas do DOM pelo React antes da captura. Aplicar as
   regras nos wrappers `.ssr-variant` deixaria a página em branco abaixo de
   1200px. Por isso elas são aplicadas apenas a elementos de conteúdo real
   (que não são wrapper de variante), preservando o "esconder por breakpoint"
   legítimo e mantendo a única variante existente visível em todas as larguras.
   -------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
	:not(.ssr-variant).hidden-c64k2x,
	:not(.ssr-variant).hidden-6bg034 { display: none !important; }
}
@media (max-width: 809.98px) {
	:not(.ssr-variant).hidden-13hz73a,
	:not(.ssr-variant).hidden-gpk122 { display: none !important; }
}


/* ----------------------------------------------------------------------------
   2. Revelação em scroll  [derivado dos estilos inline da captura]
   ----------------------------------------------------------------------------
   Elementos serializados a meio da animação de entrada. O estado inicial está
   inline; o estado final é o repouso natural (opacity:1, sem deslocamento).
   `!important` é necessário porque estilo inline vence classe.
   -------------------------------------------------------------------------- */

/* cartões flutuantes "UI 1/2/3" (Features 2)
   inline: opacity:0; transform: translate(-50%,-50%) translateY(10px) */
.framer-alknoj,
.framer-e8a65m,
.framer-fsf50p {
	transition: opacity .6s cubic-bezier(.44,0,.56,1), transform .6s cubic-bezier(.44,0,.56,1);
}
.framer-alknoj.is-revealed,
.framer-e8a65m.is-revealed,
.framer-fsf50p.is-revealed {
	opacity: 1 !important;
	transform: translate(-50%, -50%) translateY(0) !important;
}

/* itens das listas de features do Pricing
   inline: opacity:0; transform: translateY(20px) */
.framer-xxw6b8,
.framer-vm4d9q {
	transition: opacity .5s cubic-bezier(.44,0,.56,1), transform .5s cubic-bezier(.44,0,.56,1);
}
.framer-xxw6b8.is-revealed,
.framer-vm4d9q.is-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* NOTA: `.framer-1e45pns` (Arrow Left dos botões) também tem opacity:0 inline,
   mas é estado de HOVER capturado corretamente — não é revelado aqui. */


/* ----------------------------------------------------------------------------
   3. Acordeão do FAQ  [derivado das variantes no CSS capturado]
   ----------------------------------------------------------------------------
   O CSS capturado já traz os dois estados:
     fechado -> .framer-sugIO .framer-1quoho7          { height: 1px }
     aberto  -> .framer-sugIO.framer-v-12lcxez .framer-1quoho7 { height: min-content }
   O JS só troca `framer-v-id3j5n` por `framer-v-12lcxez`. Aqui adicionamos a
   transição e revertemos o `opacity:0` inline da resposta.
   -------------------------------------------------------------------------- */
.framer-sugIO.framer-id3j5n {
	transition: background-color .25s ease;
}
.framer-sugIO .framer-1quoho7 {
	overflow: hidden;
	transition: height .32s cubic-bezier(.44,0,.56,1), opacity .32s ease;
}
.framer-sugIO.framer-v-12lcxez .framer-1quoho7 {
	opacity: 1 !important;
}
/* ícone "+" -> "×" ao abrir. [INFERÊNCIA]: a variante aberta do ícone não foi
   capturada; a rotação de 45° é uma escolha, não um dado da captura. */
.framer-sugIO .framer-1nhqw45-container {
	transition: transform .32s cubic-bezier(.44,0,.56,1);
}
.framer-sugIO.framer-v-12lcxez .framer-1nhqw45-container {
	transform: rotate(45deg) !important;
}


/* ----------------------------------------------------------------------------
   4. Carrossel de Features  [usa o modo `native` do próprio componente]
   ----------------------------------------------------------------------------
   O componente é movido por GSAP, cujo código vive num bundle .mjs remoto que
   não foi capturado. Mas o CSS capturado já traz um motor alternativo completo:
   `[data-slider-engine="native"]` -> overflow-x:auto + scroll-snap.
   O site.js apenas troca o atributo. Só ajustamos o offset de centragem que o
   GSAP tinha aplicado inline e que não faz sentido no scroll nativo.
   -------------------------------------------------------------------------- */
[data-slider-engine="native"] [data-gsap-slider-list] {
	padding-left: 0 !important;
	scroll-padding-left: 0;
}
[data-slider-engine="native"] [data-gsap-slider-collection] {
	scroll-behavior: smooth;
}


/* ----------------------------------------------------------------------------
   5. Variante "Desktop Scrolled" do header   [RECUPERADA do bundle original]
   ----------------------------------------------------------------------------
   O mapa de variantes do nav no script_main.mjs é:
     Desktop         -> cttQjIVXX -> framer-v-1ixw8j0
     Desktop Scrolled-> V1KA_KBEh -> framer-v-1qjeh5a   <<<
     Tablet / Phone / *Open -> pwih2t / 896mg3 / 1fi5ilv / 1apq47a

   Ao rolar (gatilho = #scrolltrigger, 10px a 100px do topo — elemento presente
   na captura), o nav do desktop entra na variante "Desktop Scrolled", que faz
   DUAS coisas ao mesmo tempo:

   a) COMPACTA — estas regras já estão no CSS capturado e passam a valer
      sozinhas assim que a classe entra:
        .framer-v-1qjeh5a .framer-pfsqv0 { flex:none; width:min-content; padding:0 24px }
        .framer-v-1qjeh5a .framer-w39gfv { gap:24px; width:min-content }
        .framer-v-1qjeh5a .framer-fqbvk6,
        .framer-v-1qjeh5a .framer-1ehzwwr { flex:none; width:100px }
        .framer-v-1qjeh5a .framer-1vmnj69 { padding:20px 20px 20px 0 }
      (fora do scroll os blocos laterais são `flex:1 0 0`, o que espalha logo,
       links e botão pela largura toda)

   b) FICA TRANSLÚCIDO — estes valores vinham do React (props animadas) e por
      isso não sobreviveram à captura. São copiados verbatim do bundle:
        backdropFilter: blur(10px)
        backgroundColor: rgba(247, 247, 247, 0.6)
        borderRadius: 3px
      O `!important` é preciso porque a captura deixou
      `backdrop-filter:none; background-color:rgba(0,0,0,0); border-radius:0px`
      como estilo inline no elemento.

   A troca de classe é feita em js/framer-components.js (initNavMenu).
   Transição original: spring { bounce:.2, duration:.6 } — aproximada abaixo.
   -------------------------------------------------------------------------- */
.framer-LFe2t .framer-pfsqv0 {
	transition:
		background-color .45s cubic-bezier(.34, 1.16, .64, 1),
		backdrop-filter  .45s cubic-bezier(.34, 1.16, .64, 1),
		border-radius    .45s cubic-bezier(.34, 1.16, .64, 1),
		padding          .45s cubic-bezier(.34, 1.16, .64, 1),
		width            .45s cubic-bezier(.34, 1.16, .64, 1);
}
.framer-LFe2t .framer-w39gfv,
.framer-LFe2t .framer-fqbvk6,
.framer-LFe2t .framer-1ehzwwr,
.framer-LFe2t .framer-1vmnj69 {
	transition:
		width   .45s cubic-bezier(.34, 1.16, .64, 1),
		gap     .45s cubic-bezier(.34, 1.16, .64, 1),
		padding .45s cubic-bezier(.34, 1.16, .64, 1),
		flex    .45s cubic-bezier(.34, 1.16, .64, 1);
}

.framer-LFe2t.framer-v-1qjeh5a .framer-pfsqv0 {
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	background-color: rgba(247, 247, 247, .6) !important;
	border-radius: 3px !important;
}

/* O mapa de variantes do template só prevê "Scrolled" no desktop — no tablet e
   no phone o nav fica transparente a página inteira. No template original isso
   não incomodava (as seções eram todas claras), mas aqui metade das seções é
   escura (#181a1a) e tudo que vive no nav é quase preto: wordmark #232323,
   barras do hambúrguer #000, caixa do logo #181a1a. Medido nas seções escuras
   em 390px: contraste de 1,11:1 (o mínimo WCAG AA para texto é 4,5:1) — na
   prática o nome "myownchat" e o hambúrguer desaparecem.

   A mesma pílula translúcida do desktop resolve os três de uma vez. O gancho é
   a classe `is-scrolled`, que o initNavMenu já aplica ao body em TODOS os
   breakpoints (só a troca de variante do nav é que é exclusiva do desktop);
   por isso aqui não é preciso tocar no JS.

   Só as variantes FECHADAS: com o menu aberto o painel tem fundo próprio. */
body.is-scrolled .framer-LFe2t.framer-v-pwih2t .framer-pfsqv0,
body.is-scrolled .framer-LFe2t.framer-v-896mg3 .framer-pfsqv0 {
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	background-color: rgba(247, 247, 247, .6) !important;
	border-radius: 3px !important;
}


/* ----------------------------------------------------------------------------
   6. Cartões "flick" da seção About
   ----------------------------------------------------------------------------
   Os 3 cartões foram capturados ANTES da animação de entrada
   (`opacity:0; transform: translate(0%,15%) scale(.85)`) e o JS que os posiciona
   está num bundle remoto não capturado. Sem tratamento, a seção fica vazia.

   Decisão (confirmada pelo utilizador): manter EXATAMENTE o que foi capturado.
   O `transform` fica tal e qual o snapshot — `translate(0%,15%) scale(0.85)` —
   porque as posições de repouso dos cartões não existem em lado nenhum da
   captura e qualquer valor lateral seria invenção.

   A única coisa alterada é a opacidade: `opacity:0` era o instante inicial de
   um tween de entrada (estado transitório), não um estado de design — sem isso
   a secção fica visivelmente vazia.

   Resultado: os 3 cartões ficam sobrepostos na posição capturada; o z-index e o
   esmaecimento por status vêm do CSS capturado (`.flick-card-dim` 0/.4/.6/1).
   Clique, arrasto ou setas trazem cada cartão para a frente.
   -------------------------------------------------------------------------- */
.flick-rt [data-flick-status] {
	transition: opacity .5s ease;
}
.flick-rt.is-restored [data-flick-status] {
	opacity: 1 !important;
}


/* ----------------------------------------------------------------------------
   7. Componente "Nav Item Phone" (framer-CvCEx)
   ----------------------------------------------------------------------------
   Regras COPIADAS VERBATIM do bundle original (script_main.-sC9YWtk.mjs).
   Este é o único componente do menu cujo CSS não sobreviveu à captura — todos
   os outros (framer-sv4bX, framer-1i7zajn, framer-8a7eup, preset sm0w79 …) já
   estão em css/framer.css.
   -------------------------------------------------------------------------- */
.framer-CvCEx.framer-1g4i7xd,
.framer-CvCEx .framer-1g4i7xd { display: block; }

.framer-CvCEx.framer-1t85vol {
	align-content: center;
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	height: min-content;
	justify-content: flex-start;
	overflow: visible;
	padding: 0px;
	position: relative;
	text-decoration: none;
	width: min-content;
}

.framer-CvCEx .framer-1bpmdp4 {
	-webkit-user-select: none;
	user-select: none;
	flex: none;
	height: auto;
	position: relative;
	white-space: pre;
	width: auto;
}

/* --- estado "menu aberto" ---
   A variante aberta do nav tem `height:1000px` (altura de canvas do Framer).
   O container do nav é `position:sticky`, então essa altura EMPURRARIA a página
   em ~939px. No site original o menu é um overlay de ecrã inteiro (ver print de
   referência), por isso fixamos o container enquanto está aberto.
   O fundo branco é o token de fundo da página (--token-0f516fd4 = #fff), que é
   o que aparece no print. */
body.nav-open { overflow: hidden; }

body.nav-open .framer-1cgq3u0-container {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

body.nav-open nav.framer-LFe2t {
	height: 100% !important;
	background-color: var(--token-0f516fd4-65c7-4b64-880e-09084b80b9c7, #fff) !important;
}

/* Tamanho dos links do menu.
   O preset `sm0w79` traz 100px, que no telemóvel faz rótulos longos furarem a
   borda. Escalamos com a viewport para caberem sempre, mantendo a tipografia
   (Barlow Condensed 800 uppercase) e o teto de 100px em ecrãs largos. */
.framer-1i7zajn .framer-styles-preset-sm0w79 {
	--framer-font-size: clamp(32px, 12.5vw, 72px) !important;
}
.framer-1i7zajn .framer-CvCEx.framer-1t85vol { width: 100%; }
.framer-1i7zajn .framer-1bpmdp4 { max-width: 100%; }
body.nav-open .framer-LFe2t .framer-1i7zajn { overflow: hidden; }


/* ----------------------------------------------------------------------------
   8. Tamanho do H1 no telemóvel  [RECUPERADO do bundle original]
   ----------------------------------------------------------------------------
   O <h1> tem font-size:100px inline porque a captura congelou o valor calculado
   a 1200px+. O bundle traz o override do breakpoint "Phone" (vpXySyskY):
       font: { fontSize: 56px, letterSpacing: -2px, lineHeight: 1.05em,
               fontWeight: 800, textAlign: center }
   Não é estimativa — é o valor que o site publicado usa.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
	.framer-udsp0n-container h1 {
		font-size: 56px !important;
		letter-spacing: -2px !important;
		line-height: 1.05em !important;
	}
}


/* ----------------------------------------------------------------------------
   10. H1 do hero em duas linhas
   ----------------------------------------------------------------------------
   No template o texto fixo e a palavra rotativa ficam na MESMA linha (dois spans
   inline lado a lado). Aqui o texto fixo passa a `display:block`, o que empurra
   a caixa da palavra rotativa para a linha de baixo. A caixa continua
   `inline-block` e o <h1> continua `text-align:center`, então ela fica centrada.

   Não mexe na animação: a barra colorida, a medição de largura e o ciclo
   continuam exatamente os mesmos.
   -------------------------------------------------------------------------- */
.framer-udsp0n-container h1 > span[aria-hidden="true"] > span:first-child {
	display: block;
}


/* ----------------------------------------------------------------------------
   11. Transições do hover
   ----------------------------------------------------------------------------
   As regras `.hover` vêm do CSS capturado (a classe é posta por
   js/framer-components.js → initHover). Faltavam duas coisas:
   as transições e a opacidade das setas, que estavam inline no DOM
   (`.framer-1e45pns` opacity:0 / `.framer-15agju4` opacity:1).

   O efeito: ao passar o rato, a seta da direita sai e a da esquerda entra,
   e o padding do botão inverte — exatamente como no site original.
   Duração .2s cubic-bezier(.44,0,.56,1), o tween padrão dos componentes
   deste projeto (o valor exato deste botão não estava no bundle).
   -------------------------------------------------------------------------- */
/* Botões: o efeito original trocava as setas de lado. A pedido, foi substituído
   por um simples escurecimento da cor. Por isso os botões (framer-WX9QX) ficam
   FORA do initHover — não recebem a classe `.hover`, então as regras de troca
   de seta do CSS capturado não disparam. */
.framer-WX9QX {
	transition: filter .2s cubic-bezier(.44, 0, .56, 1);
}
.framer-WX9QX:hover {
	filter: brightness(.85);
}
.framer-WX9QX:active {
	filter: brightness(.78);
}

/* links do menu e do rodapé: realce discreto ao passar o rato */
.framer-wmUkO.hover,
.framer-CvCEx.hover { opacity: .65; }
.framer-wmUkO,
.framer-CvCEx { transition: opacity .2s cubic-bezier(.44, 0, .56, 1); }


/* ----------------------------------------------------------------------------
   12. Rodapé: raiz da física precisa receber eventos de ponteiro
   -------------------------------------------------------------------------- */
.framer-hasmfc-container { pointer-events: auto; }


/* ----------------------------------------------------------------------------
   9. Ajustes de robustez local
   -------------------------------------------------------------------------- */
/* o Framer define esta variável por JS; o fallback 100vh já existe no CSS
   capturado, mas fixamos aqui para não depender do bundle removido */
:root { --framer-viewport-height: 100vh; }

/* (o antigo fallback de "quebrar linha" do nav saiu: abaixo de 1200px agora
   entra o menu hambúrguer reconstruído em js/framer-components.js) */

@media (prefers-reduced-motion: reduce) {
	.framer-alknoj, .framer-e8a65m, .framer-fsf50p,
	.framer-xxw6b8, .framer-vm4d9q,
	.flick-rt [data-flick-status],
	.framer-sugIO .framer-1quoho7 { transition-duration: .01ms !important; }
}


/* ----------------------------------------------------------------------------
   13. Preços: "R$" pequeno + cards responsivos
   ----------------------------------------------------------------------------
   O valor (ex.: "R$39,90") é um único texto a 100px. O "R$" é embrulhado num
   <span class="price-cur"> (ver tools/content.js) para poder encolher só ele.
   -------------------------------------------------------------------------- */
.price-cur {
	font-size: .32em;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: .55em;
	margin-right: .04em;
}

/* Os títulos e textos dos cards de preço vinham com larguras FIXAS do template
   (ex.: 406px), maiores que o card no telemóvel. Capamos tudo à largura do card
   e deixamos o texto quebrar, para nada furar a borda arredondada. */
.framer-1s9wcrj [data-framer-component-type="RichTextContainer"],
.framer-1s9wcrj .framer-text {
	max-width: 100% !important;
}
.framer-1s9wcrj .framer-text { white-space: normal !important; }
.framer-39b3ru, .framer-1lr6du4 { overflow: hidden; }


/* ----------------------------------------------------------------------------
   14. Telemóvel: esconder o botão "Começar agora" fixo do nav
   ----------------------------------------------------------------------------
   No mobile o CTA do topo ficava colado ao logo. O menu hambúrguer já leva a
   ação "Começar agora" dentro dele, por isso escondemos só o botão do topo
   (framer-1dso4xk-container). O hambúrguer (framer-8a7eup-container), que é
   irmão dele dentro de .framer-1ehzwwr, continua visível.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
	.framer-LFe2t .framer-1dso4xk-container { display: none !important; }
}


/* ----------------------------------------------------------------------------
   15. Depoimentos: um só card, centrado
   ----------------------------------------------------------------------------
   Removidos 2 dos 3 cards (tools/content.js). O card que sobra deixa de esticar
   na grelha e fica com largura de leitura confortável, centrado.
   -------------------------------------------------------------------------- */
.framer-iq4sqm {
	justify-content: center !important;
	align-items: flex-start !important;
	height: auto !important;
}
.framer-iq4sqm .framer-1665ki7-container {
	flex: 0 1 520px !important;
	max-width: 100%;
	height: auto !important;
}

/* Altura do card pelo conteúdo (era fixa em 500px) e nome junto do texto.
   O bloco de texto do Framer é `flex:1 0 0; height:1px; overflow:clip`, feito
   para esticar dentro de um card de altura fixa e distribuir com space-between.
   Com o depoimento curto isso deixava o nome ~190px abaixo da frase. Aqui cada
   nível passa a dimensionar-se pelo conteúdo, com o nome logo abaixo da frase. */
#testimonials .framer-qFTQB { height: auto !important; }
#testimonials .framer-122ny7c {
	flex: 0 0 auto !important;
	height: auto !important;
}
#testimonials .framer-1ia7swr {
	flex: 0 0 auto !important;
	height: auto !important;
	overflow: visible !important;
	justify-content: flex-start !important;
	gap: 12px !important;
}


/* ----------------------------------------------------------------------------
   16. Logo da marca no nav
   ----------------------------------------------------------------------------
   O ícone ao lado de "myownchat" era uma máscara CSS decorativa (padrão de
   quadradinhos) do template. Trocado pelo logo real (assets/images/logo.png).
   Removemos a máscara e usamos o PNG como fundo; o logo já é um quadrado preto
   arredondado, por isso o border-radius o acompanha.
   -------------------------------------------------------------------------- */
.framer-155on7t .framer-1u1vnzg {
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-image: url(../assets/images/logo.png) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 5px;
}


/* ----------------------------------------------------------------------------
   17. Preços: "/mês" por baixo do valor
   ----------------------------------------------------------------------------
   Estava ao lado do valor (linha) e furava a borda no telemóvel. A linha
   (.framer-1gw9vw5) passa a coluna, colocando "/mês" por baixo.
   -------------------------------------------------------------------------- */
.framer-1gw9vw5 {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px !important;
}


/* ----------------------------------------------------------------------------
   18. Rodapé: título menor
   ----------------------------------------------------------------------------
   "AUTOMATIZE SEU INSTAGRAM. SEM PAGAR POR DM." estava a 80px. Reduzido e
   responsivo, para não dominar o rodapé nem furar a borda no telemóvel.
   -------------------------------------------------------------------------- */
.framer-1z0qzz2 .framer-text {
	--framer-font-size: clamp(24px, 5.2vw, 46px) !important;
	font-size: clamp(24px, 5.2vw, 46px) !important;
	line-height: 1.05em !important;
}


/* ----------------------------------------------------------------------------
   20. Depoimento: nome próprio + selo de verificado
   ----------------------------------------------------------------------------
   O nome usa o preset "eyebrow" (maiúsculas). Como agora é um nome próprio
   ("The wise man"), preservamos a caixa como foi escrita. O selo azul de
   verificado (injetado em initTestimonial) alinha ao lado do nome.
   -------------------------------------------------------------------------- */
#testimonials .framer-1665ki7-container .framer-1p4xer7 .framer-text,
#testimonials .framer-1665ki7-container .framer-1mxh3er .framer-text {
	text-transform: none !important;
}
.ig-verified {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: .14em;
	font-size: 1.1em;
	line-height: 1;
	position: relative;
	top: -0.04em;
}
.ig-verified svg { display: block; }


/* ----------------------------------------------------------------------------
   19. Telemóvel: nada de figuras da física a estourar (a escala é feita no JS)
   -------------------------------------------------------------------------- */