{"id":7,"date":"2026-08-10T14:14:09","date_gmt":"2026-08-10T14:14:09","guid":{"rendered":"https:\/\/oconsultoriointeligente.com.br\/?page_id=7"},"modified":"2026-08-10T15:09:26","modified_gmt":"2026-08-10T15:09:26","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/oconsultoriointeligente.com.br\/","title":{"rendered":"Elementor #7"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nConsult\u00f3rio Inteligente \u2014 IA para psic\u00f3logos que querem ser refer\u00eancia<\/title>\r\n<meta name=\"description\" content=\"O primeiro sistema de Intelig\u00eancias Artificiais por assinatura para psic\u00f3logos. Do nicho \u00e0 capta\u00e7\u00e3o de pacientes, com materiais prontos para aplicar.\">\r\n<meta name=\"theme-color\" content=\"#16121F\">\r\n\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta property=\"og:title\" content=\"Consult\u00f3rio Inteligente \u2014 IA para psic\u00f3logos\">\r\n<meta property=\"og:description\" content=\"Um sistema de IAs que guia cada etapa da constru\u00e7\u00e3o da sua marca e transforma suas respostas em materiais prontos para aplicar.\">\r\n<meta property=\"og:locale\" content=\"pt_BR\">\r\n\r\n<!-- O favicon fica por conta do WordPress (Apar\u00eancia > Personalizar > Identidade\r\n do site). Dentro do widget HTML do Elementor um <link rel=\"icon\"> aqui n\u00e3o\r\n tem efeito, ent\u00e3o n\u00e3o existe tag de \u00edcone nesta p\u00e1gina. -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\">\r\n<style>\r\n\/* =========================================================================\r\n Consult\u00f3rio Inteligente \u2014 landing page\r\n Sistema visual herdado da plataforma (mesmos tokens do app).\r\n ========================================================================= *\/\r\n\r\n:root{\r\n \/* marca *\/\r\n --violet: oklch(57.85% .2108 282.21);\r\n --violet-dark: oklch(48.13% .2135 279.33);\r\n --violet-light: oklch(72% .17 285);\r\n --violet-bg: oklch(95.07% .0242 293.59);\r\n --ink: oklch(19% .045 285);\r\n --ink-2: oklch(26% .065 288);\r\n --success: oklch(62.74% .194 149.21);\r\n\r\n \/* superf\u00edcies e texto \u2014 reescritos por ato *\/\r\n --bg: #ffffff;\r\n --surface: oklch(97.07% .0027 286.35);\r\n --text: oklch(17.9% .0061 285.77);\r\n --text-2: oklch(51.97% .0109 286.01);\r\n --text-3: oklch(72.41% .01 286.15);\r\n --border: oklch(92.94% .0067 286.27);\r\n --card: #ffffff;\r\n\r\n --radius: .875rem;\r\n --radius-lg: 1.5rem;\r\n --maxw: 72rem;\r\n --maxw-text: 44rem;\r\n\r\n --font-display: Fraunces, 'Times New Roman', Georgia, serif;\r\n --font-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;\r\n\r\n --ease: cubic-bezier(.22,.61,.36,1);\r\n\r\n \/* Vidro. O que faz uma superf\u00edcie parecer vidro e n\u00e3o um borr\u00e3o \u00e9 o\r\n comportamento da BORDA, n\u00e3o o desfoque: a luz entra por um canto, atravessa\r\n a espessura e sai reacesa no canto oposto. Por isso o aro n\u00e3o tem brilho\r\n uniforme \u2014 ele \u00e9 forte no topo-esquerdo, apaga nas laterais e reacende, mais\r\n fraco, embaixo \u00e0 direita. Os quatro tokens abaixo descrevem essa volta.\r\n A superf\u00edcie toma a cor do ato em que est\u00e1, ent\u00e3o a mesma receita serve na\r\n noite e no dia. *\/\r\n --glass: color-mix(in oklab, var(--bg) 62%, transparent);\r\n --glass-brd: color-mix(in oklab, var(--text) 14%, transparent);\r\n\r\n \/* No claro, branco sobre branco n\u00e3o desenha nada: quem faz o aro existir \u00e9 o\r\n lado da SOMBRA. Por isso o stop escuro pesa mais aqui do que no escuro,\r\n onde \u00e9 o brilho que carrega a leitura. *\/\r\n --glass-rim-lit: #ffffff; \/* onde a luz bate *\/\r\n --glass-rim-mid: color-mix(in oklab, var(--violet) 40%, transparent);\r\n --glass-rim-shade: color-mix(in oklab, var(--ink) 32%, transparent); \/* o lado na sombra *\/\r\n --glass-rim-bounce: rgba(255,255,255,.9); \/* a luz que atravessou *\/\r\n\r\n \/* a espessura do material, vista por dentro *\/\r\n --glass-wall: inset 0 1px 0 #ffffff,\r\n inset 0 -11px 17px -12px color-mix(in oklab, var(--ink) 30%, transparent),\r\n inset 0 15px 24px -18px #ffffff;\r\n --glass-spec: rgba(255,255,255,.92);\r\n --glass-shadow: 0 20px 45px -28px rgba(30,15,80,.5);\r\n}\r\n\r\n\/* ---- Ato I: noite. O circuito. ---- *\/\r\n[data-act=\"night\"]{\r\n --bg: oklch(12% .04 285);\r\n --surface: oklch(17% .05 285);\r\n --text: oklch(97.5% .008 286);\r\n --text-2: oklch(78% .02 286);\r\n --text-3: oklch(58% .02 286);\r\n --border: oklch(28% .04 286);\r\n --card: oklch(16% .045 285);\r\n \/* No escuro o vidro precisa de menos leite e de um aro mais vivo: sem fundo\r\n claro atr\u00e1s, a borda \u00e9 a \u00fanica coisa que denuncia que existe um s\u00f3lido ali. *\/\r\n --glass: color-mix(in oklab, var(--bg) 48%, transparent);\r\n --glass-brd: rgba(255,255,255,.16);\r\n\r\n --glass-rim-lit: rgba(255,255,255,.92);\r\n --glass-rim-mid: color-mix(in oklab, var(--violet-light) 40%, transparent);\r\n --glass-rim-shade: rgba(255,255,255,.05);\r\n --glass-rim-bounce: rgba(255,255,255,.42);\r\n\r\n --glass-wall: inset 0 1px 0 rgba(255,255,255,.28),\r\n inset 0 -10px 18px -12px rgba(0,0,0,.5),\r\n inset 0 14px 24px -18px rgba(255,255,255,.35);\r\n --glass-spec: rgba(255,255,255,.24);\r\n --glass-shadow: 0 24px 55px -30px rgba(0,0,0,.75);\r\n}\r\n\r\n\/* ---- Ato II: aurora. A transi\u00e7\u00e3o. ---- *\/\r\n[data-act=\"dawn\"]{\r\n --bg: oklch(93% .028 291);\r\n --surface: oklch(96% .018 291);\r\n --text: oklch(19% .045 285);\r\n --text-2: oklch(45% .03 287);\r\n --text-3: oklch(62% .02 287);\r\n --border: oklch(86% .022 289);\r\n --card: oklch(98.5% .008 291);\r\n \/* na aurora o fundo j\u00e1 \u00e9 lil\u00e1s: o aro sobe de tom para n\u00e3o sumir nele *\/\r\n --glass-rim-mid: color-mix(in oklab, var(--violet) 42%, transparent);\r\n --glass-rim-shade: color-mix(in oklab, var(--ink) 12%, transparent);\r\n}\r\n\r\n\/* ---- Ato III: dia. Onde mora o texto denso. ---- *\/\r\n[data-act=\"day\"]{\r\n --bg: #ffffff;\r\n --surface: oklch(97.07% .0027 286.35);\r\n --text: oklch(17.9% .0061 285.77);\r\n --text-2: oklch(51.97% .0109 286.01);\r\n --text-3: oklch(72.41% .01 286.15);\r\n --border: oklch(92.94% .0067 286.27);\r\n --card: #ffffff;\r\n}\r\n\r\n*, *::before, *::after{ box-sizing: border-box; }\r\n\r\nhtml{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\r\n\r\nbody{\r\n margin: 0;\r\n background: var(--bg);\r\n color: var(--text);\r\n font-family: var(--font-ui);\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n transition: background-color .7s var(--ease), color .7s var(--ease);\r\n}\r\n\r\nimg, svg, canvas{ display: block; max-width: 100%; }\r\na{ color: inherit; }\r\n\r\n::selection{ background: var(--violet); color: #fff; }\r\n\r\n:focus-visible{\r\n outline: 2px solid var(--violet);\r\n outline-offset: 3px;\r\n border-radius: 4px;\r\n}\r\n\r\n\/* ---------------------------------------------------------------- tipografia *\/\r\n\r\nh1, h2, h3{\r\n font-family: var(--font-display);\r\n font-weight: 600;\r\n line-height: 1.08;\r\n letter-spacing: -0.018em;\r\n margin: 0;\r\n text-wrap: balance;\r\n}\r\nh1{ font-size: clamp(2.4rem, 6.2vw, 4.6rem); }\r\nh2{ font-size: clamp(1.9rem, 3.9vw, 3rem); }\r\nh3{ font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.012em; }\r\n\r\n\/* o it\u00e1lico \u00e9 reservado para a palavra que carrega a emo\u00e7\u00e3o *\/\r\nem, .em{ font-style: italic; }\r\n\r\np{ margin: 0 0 1.1em; }\r\np:last-child{ margin-bottom: 0; }\r\n\r\n.lead{\r\n font-size: clamp(1.05rem, 1.5vw, 1.2rem);\r\n color: var(--text-2);\r\n max-width: var(--maxw-text);\r\n}\r\n\r\n\/* Nenhum par\u00e1grafo termina com uma palavra sozinha na \u00faltima linha. `pretty`\r\n resolve isso em qualquer largura \u2014 melhor que <br> fixo, que s\u00f3 acerta na\r\n largura em que foi medido e cria quebras erradas em todas as outras. *\/\r\np, li, dd, .answer, figcaption{ text-wrap: pretty; }\r\n\r\n.eyebrow{\r\n font-family: var(--font-mono);\r\n font-size: .72rem;\r\n text-transform: uppercase;\r\n letter-spacing: .16em;\r\n color: var(--text-3);\r\n margin: 0 0 1rem;\r\n}\r\n\r\n.badge{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: .5rem;\r\n font-family: var(--font-mono);\r\n font-size: .68rem;\r\n text-transform: uppercase;\r\n letter-spacing: .13em;\r\n padding: .5rem .9rem;\r\n border-radius: 999px;\r\n color: var(--text-2);\r\n background: color-mix(in oklab, var(--card) 70%, transparent);\r\n}\r\n\/* o selo do hero \u00e9 vidro de verdade: tem o circuito passando atr\u00e1s dele *\/\r\n.hero .badge{ color: var(--text); }\r\n\r\n\/* ---------------------------------------------------------------- estrutura *\/\r\n\r\n.wrap{\r\n width: 100%;\r\n max-width: var(--maxw);\r\n margin-inline: auto;\r\n padding-inline: clamp(1.25rem, 4vw, 2.5rem);\r\n}\r\n\r\nsection{ position: relative; }\r\n\r\n.band{ padding-block: clamp(4.5rem, 9vw, 8rem); }\r\n.band--tight{ padding-block: clamp(3rem, 6vw, 5rem); }\r\n\r\n.section-head{ max-width: var(--maxw-text); margin-bottom: clamp(2.5rem, 5vw, 4rem); }\r\n.section-head--center{ margin-inline: auto; text-align: center; }\r\n\r\n\/* O h2 tem margin 0 e o par\u00e1grafo seguinte n\u00e3o tinha margem de topo: os dois\r\n encostavam. O respiro cresce com o t\u00edtulo \u2014 num h2 de 3rem, 1rem de folga\r\n ainda parece colado.\r\n\r\n A regra \u00e9 geral de prop\u00f3sito, n\u00e3o presa a `.section-head`: nem todo t\u00edtulo\r\n da p\u00e1gina mora num \u2014 o bloco da Camila, por exemplo, \u00e9 um `div` solto \u2014 e\r\n escrever o par t\u00edtulo\/subt\u00edtulo j\u00e1 basta para merecer o espa\u00e7o. Como\r\n margens de irm\u00e3os adjacentes colapsam, se\u00e7\u00f5es que j\u00e1 declaram a pr\u00f3pria\r\n folga (o `.closer`) continuam coerentes em vez de somar as duas. *\/\r\nh2 + .lead,\r\nh2 + p,\r\n.hero h1 + .lead{ margin-top: clamp(1.15rem, 2.2vw, 1.75rem); }\r\n\r\n\/* entre dois par\u00e1grafos de apoio o espa\u00e7o \u00e9 menor: eles s\u00e3o o mesmo bloco *\/\r\n.section-head .lead + .lead{ margin-top: 0; }\r\n\r\n\/* ---------------------------------------------------------------- bot\u00f5es *\/\r\n\r\n.btn{\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: .6rem;\r\n font-family: var(--font-ui);\r\n font-size: .98rem;\r\n font-weight: 600;\r\n line-height: 1;\r\n padding: 1.05rem 1.9rem;\r\n border: 1px solid transparent;\r\n border-radius: 999px;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: transform .25s var(--ease), box-shadow .25s var(--ease),\r\n background-color .25s var(--ease), color .25s var(--ease);\r\n}\r\n.btn--primary{\r\n background: var(--violet);\r\n color: #fff;\r\n box-shadow: 0 1px 2px rgba(20,10,60,.18), 0 12px 30px -12px color-mix(in oklab, var(--violet) 65%, transparent);\r\n}\r\n.btn--primary:hover{\r\n background: var(--violet-dark);\r\n transform: translateY(-2px);\r\n box-shadow: 0 2px 4px rgba(20,10,60,.2), 0 20px 44px -14px color-mix(in oklab, var(--violet) 70%, transparent);\r\n}\r\n.btn--ghost{\r\n background: transparent;\r\n border-color: var(--border);\r\n color: var(--text);\r\n}\r\n.btn--ghost:hover{ border-color: var(--text-3); transform: translateY(-2px); }\r\n.btn--light{ background: #fff; color: var(--ink); }\r\n.btn--light:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }\r\n.btn--block{ width: 100%; }\r\n\/* Para o CTA que fecha uma dobra longa e precisa carregar sozinho o peso\r\n da se\u00e7\u00e3o inteira. *\/\r\n.btn--lg{ font-size: 1.08rem; padding: 1.25rem 2.6rem; }\r\n\r\n.btn .arrow{ transition: transform .25s var(--ease); }\r\n.btn:hover .arrow{ transform: translateX(4px); }\r\n\r\n.cta-note{\r\n font-size: .85rem;\r\n color: var(--text-3);\r\n margin-top: .9rem;\r\n}\r\n\r\n\/* ---------------------------------------------------------------- header *\/\r\n\r\n\/* A barra acompanha a rolagem, mas n\u00e3o fica colada na borda: \u00e9 uma p\u00edlula\r\n flutuante com folga em volta. Fica vis\u00edvel o tempo todo \u2014 a navega\u00e7\u00e3o e o\r\n CTA de assinar est\u00e3o sempre a um clique, em qualquer ponto da p\u00e1gina. *\/\r\n.site-header{\r\n position: fixed;\r\n inset: 1rem 0 auto 0;\r\n z-index: 50;\r\n transform: translateZ(0); \/* camada pr\u00f3pria: o vidro fixo n\u00e3o repinta a p\u00e1gina *\/\r\n}\r\n\/* A p\u00edlula \u00e9 a pe\u00e7a de vidro mais espessa do site: \u00e9 a \u00fanica que tem a p\u00e1gina\r\n inteira correndo atr\u00e1s dela. O material vem de .glass \u2014 aqui ficam s\u00f3 a\r\n forma e a medida. *\/\r\n.site-header .wrap{\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 1.5rem;\r\n width: min(var(--maxw), calc(100% - clamp(1rem, 4vw, 2.5rem) * 2));\r\n padding: .55rem .7rem .55rem 1.25rem;\r\n border-radius: 999px;\r\n}\r\n\r\n.logo{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: .65rem;\r\n text-decoration: none;\r\n color: var(--text);\r\n}\r\n.logo svg,\r\n.logo img{ width: 34px; height: 34px; flex: none; }\r\n.logo-word{\r\n font-family: var(--font-display);\r\n font-size: 1.06rem;\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n line-height: 1.05;\r\n white-space: nowrap;\r\n}\r\n.logo-word i{ font-style: italic; font-weight: 500; }\r\n\r\n.nav{ display: flex; align-items: center; gap: 1.9rem; }\r\n.nav a{\r\n font-size: .92rem;\r\n color: var(--text-2);\r\n text-decoration: none;\r\n transition: color .2s var(--ease);\r\n}\r\n.nav a:hover{ color: var(--text); }\r\n.header-cta{ padding: .72rem 1.3rem; font-size: .9rem; }\r\n\r\n@media (max-width: 900px){\r\n .nav{ display: none; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- hero *\/\r\n\r\n\/* O hero tem de caber numa tela sem rolagem. Por isso todo o bloco \u00e9 medido\r\n tamb\u00e9m em svh: num notebook de 720px de altura o t\u00edtulo encolhe junto com\r\n os espa\u00e7os, em vez de empurrar o CTA para fora da dobra. *\/\r\n.hero{\r\n position: relative;\r\n min-height: 100svh;\r\n display: grid;\r\n place-items: center;\r\n text-align: center;\r\n overflow: hidden;\r\n padding-block: clamp(4.5rem, 11svh, 7rem) clamp(3rem, 8svh, 4.5rem);\r\n}\r\n.hero .hero-ground,\r\n.hero .circuit{\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n}\r\n\r\n\/* o ch\u00e3o: violeta profundo com a luz concentrada onde o t\u00edtulo vai cair *\/\r\n.hero-ground{\r\n background:\r\n radial-gradient(90% 70% at 50% 38%, rgba(107,78,230,.30), transparent 66%),\r\n radial-gradient(60% 50% at 18% 78%, rgba(201,124,233,.14), transparent 70%),\r\n radial-gradient(55% 45% at 84% 22%, rgba(155,123,255,.16), transparent 70%),\r\n linear-gradient(165deg, #120C22 0%, #0D0919 52%, #08060F 100%);\r\n}\r\n\r\n\/* ---- o circuito ---- *\/\r\n\r\n\/* A m\u00e1scara apaga as trilhas atr\u00e1s do texto: o t\u00edtulo fica leg\u00edvel sem\r\n precisar de um v\u00e9u escuro por cima, como o prisma exigia. *\/\r\n.hero .circuit{\r\n z-index: 1;\r\n \/* a clareira acompanha a caixa do t\u00edtulo: alargou o texto, alarga a m\u00e1scara,\r\n sen\u00e3o as trilhas voltam a passar por tr\u00e1s das primeiras e \u00faltimas palavras *\/\r\n -webkit-mask-image: radial-gradient(68% 52% at 50% 46%, transparent 34%, #000 78%);\r\n mask-image: radial-gradient(68% 52% at 50% 46%, transparent 34%, #000 78%);\r\n}\r\n\r\n.circuit g{ fill: none; stroke-linecap: round; stroke-linejoin: round; }\r\n\r\n\/* as trilhas ficam permanentes, em brasa *\/\r\n.circuit .traces path{\r\n stroke: rgba(155,123,255,.26);\r\n stroke-width: 1.6;\r\n}\r\n\r\n\/* o pulso: um tra\u00e7o curto que percorre a trilha inteira *\/\r\n.circuit .pulses path{\r\n stroke: #C97DE9;\r\n stroke-width: 2.2;\r\n stroke-dasharray: 12 88;\r\n stroke-dashoffset: 100;\r\n filter: drop-shadow(0 0 5px rgba(201,125,233,.85));\r\n animation: pulse var(--t, 8s) linear var(--d, 0s) infinite;\r\n}\r\n@keyframes pulse{ to{ stroke-dashoffset: -12; } }\r\n\r\n.circuit .nodes circle{\r\n fill: #C97DE9;\r\n transform-box: fill-box;\r\n transform-origin: center;\r\n animation: nodeBreath 4.5s var(--ease) var(--d, 0s) infinite;\r\n}\r\n@keyframes nodeBreath{\r\n 0%, 100%{ opacity: .45; transform: scale(.72); }\r\n 50% { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n\/* fora da viewport nada anima \u2014 o hero n\u00e3o gasta bateria no rodap\u00e9 *\/\r\n.hero.is-idle .circuit *{ animation-play-state: paused; }\r\n\/* A caixa \u00e9 larga para o t\u00edtulo respirar. Quem segura a medida de leitura \u00e9 o\r\n pr\u00f3prio par\u00e1grafo, que tem max-width menor \u2014 ent\u00e3o alargar aqui abre o h1\r\n sem esticar o texto de apoio. *\/\r\n.hero-inner{ position: relative; z-index: 2; max-width: 70rem; }\r\n\r\n\/* o hero entra em sequ\u00eancia: selo, t\u00edtulo (palavra a palavra), texto, bot\u00e3o *\/\r\n@keyframes heroIn{\r\n from{ opacity: 0; transform: translateY(18px); filter: blur(7px); }\r\n to { opacity: 1; transform: none; filter: none; }\r\n}\r\n.hero-inner .badge,\r\n.hero-inner .lead,\r\n.hero-inner .btn,\r\n.hero-inner .cta-note{ animation: heroIn .9s var(--ease) both; }\r\n.hero-inner .badge { animation-delay: .05s; }\r\n.hero-inner .lead { animation-delay: .80s; }\r\n.hero-inner .btn { animation-delay: .95s; }\r\n.hero-inner .cta-note{ animation-delay: 1.05s; }\r\n.scroll-hint{ animation: heroIn 1s var(--ease) 1.3s both; }\r\n\/* o min() dentro do clamp faz a altura da janela mandar quando ela \u00e9 o\r\n recurso escasso \u2014 \u00e9 o que garante o hero inteiro numa tela s\u00f3 *\/\r\n.hero h1{\r\n font-size: clamp(1.9rem, min(4.6vw, 6.2svh), 3.9rem);\r\n line-height: 1.06;\r\n \/* `balance` (herdado de h1,h2,h3) iguala o comprimento das linhas \u2014 \u00f3timo\r\n para uma manchete de duas ou tr\u00eas, mas neste t\u00edtulo de cinco ele estreita\r\n todas ao mesmo tempo e empilha o bloco. `pretty` deixa cada linha usar a\r\n largura dispon\u00edvel e ainda evita que a \u00faltima fique com uma palavra s\u00f3. *\/\r\n text-wrap: pretty;\r\n margin-block: clamp(.7rem, 2svh, 1.2rem) clamp(.75rem, 2.2svh, 1.35rem);\r\n color: oklch(98% .01 286);\r\n}\r\n.hero .lead{\r\n margin-inline: auto;\r\n font-size: clamp(.92rem, min(1.25vw, 1.75svh), 1.08rem);\r\n line-height: 1.5;\r\n color: oklch(80% .02 287);\r\n max-width: 34rem;\r\n}\r\n.hero .btn{ margin-top: clamp(1rem, 2.8svh, 1.9rem); }\r\n.hero .cta-note{ margin-top: .9rem; color: oklch(65% .02 287); }\r\n\r\n\/* telas muito baixas (notebooks 13\", paisagem no celular): o selo e a\r\n assinatura do CTA saem antes de o t\u00edtulo ter de encolher demais *\/\r\n@media (max-height: 620px){\r\n .hero .badge{ font-size: .6rem; padding: .35rem .7rem; }\r\n .hero .cta-note, .scroll-hint{ display: none; }\r\n}\r\n\r\n.scroll-hint{\r\n position: absolute;\r\n bottom: clamp(1rem, 3svh, 2rem);\r\n left: 50%;\r\n translate: -50% 0;\r\n z-index: 2;\r\n font-family: var(--font-mono);\r\n font-size: .64rem;\r\n letter-spacing: .22em;\r\n text-transform: uppercase;\r\n color: oklch(60% .02 287);\r\n}\r\n.scroll-hint::before{\r\n content: '';\r\n display: block;\r\n width: 1px;\r\n height: 42px;\r\n margin: 0 auto .75rem;\r\n background: linear-gradient(to bottom, transparent, oklch(60% .02 287));\r\n animation: hint 2.4s var(--ease) infinite;\r\n transform-origin: top;\r\n}\r\n@keyframes hint{\r\n 0%, 100% { transform: scaleY(.35); opacity: .3; }\r\n 50% { transform: scaleY(1); opacity: 1; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- v\u00eddeo *\/\r\n\r\n.video-frame{\r\n position: relative;\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n background: var(--card);\r\n aspect-ratio: 16 \/ 9;\r\n box-shadow: 0 40px 90px -40px rgba(30,15,80,.5);\r\n}\r\n.video-frame img, .video-frame video, .video-frame iframe{\r\n width: 100%; height: 100%; object-fit: cover; border: 0;\r\n}\r\n.video-frame .placeholder{\r\n position: absolute;\r\n inset: 0;\r\n display: grid;\r\n place-content: center;\r\n gap: .75rem;\r\n text-align: center;\r\n color: var(--text-3);\r\n font-family: var(--font-mono);\r\n font-size: .74rem;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n background:\r\n repeating-linear-gradient(45deg, transparent, transparent 12px,\r\n color-mix(in oklab, var(--border) 45%, transparent) 12px,\r\n color-mix(in oklab, var(--border) 45%, transparent) 13px),\r\n var(--surface);\r\n}\r\n\r\n\/* ---------------------------------------------------------------- dor *\/\r\n\r\n\/* S\u00e3o 7 dores \u2014 n\u00famero \u00edmpar, ent\u00e3o a \u00faltima linha sempre sobra incompleta.\r\n A grade usa 12\/24 colunas e o resto \u00e9 empurrado para o centro, para que a\r\n falta de um card n\u00e3o pare\u00e7a um card faltando. *\/\r\n.pains{\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n margin-top: 1rem;\r\n}\r\n.pain{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: .9rem;\r\n padding: 1.35rem 1.4rem;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n background: var(--card);\r\n font-size: .97rem;\r\n color: var(--text-2);\r\n}\r\n\r\n\/* duas colunas \u2014 sobra 1: centraliza o s\u00e9timo *\/\r\n@media (min-width: 34rem) and (max-width: 51.999rem){\r\n .pains{ grid-template-columns: repeat(12, 1fr); }\r\n .pain{ grid-column: span 6; }\r\n .pain:nth-child(7){ grid-column: 4 \/ span 6; }\r\n}\r\n\/* tr\u00eas colunas \u2014 sobra 1: centraliza o s\u00e9timo *\/\r\n@media (min-width: 52rem) and (max-width: 63.999rem){\r\n .pains{ grid-template-columns: repeat(12, 1fr); }\r\n .pain{ grid-column: span 4; }\r\n .pain:nth-child(7){ grid-column: 5 \/ span 4; }\r\n}\r\n\/* quatro colunas \u2014 sobram 3: a linha de baixo come\u00e7a meia coluna adiante *\/\r\n@media (min-width: 64rem){\r\n .pains{ grid-template-columns: repeat(24, 1fr); }\r\n .pain{ grid-column: span 6; }\r\n .pain:nth-child(5){ grid-column: 4 \/ span 6; }\r\n}\r\n\r\n.pain-ico{\r\n flex: none;\r\n display: grid;\r\n place-items: center;\r\n width: 2.25rem;\r\n height: 2.25rem;\r\n margin-top: -.1rem;\r\n border-radius: .7rem;\r\n color: var(--violet);\r\n background: color-mix(in oklab, var(--violet) 11%, transparent);\r\n box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--violet) 16%, transparent);\r\n}\r\n.pain-ico svg{ display: block; }\r\n\r\n\/* ---------------------------------------------------------------- jornada *\/\r\n\r\n.track{\r\n display: flex;\r\n gap: .5rem;\r\n overflow-x: auto;\r\n padding-bottom: .5rem;\r\n margin-bottom: 2.5rem;\r\n scrollbar-width: none;\r\n}\r\n.track::-webkit-scrollbar{ display: none; }\r\n\r\n.track button{\r\n flex: 1 0 auto;\r\n min-width: 9rem;\r\n position: relative;\r\n padding: 1rem 1.1rem 1.15rem;\r\n border: 0;\r\n border-top: 2px solid var(--border);\r\n background: none;\r\n font-family: var(--font-ui);\r\n font-size: .95rem;\r\n font-weight: 600;\r\n color: var(--text-3);\r\n text-align: left;\r\n cursor: pointer;\r\n transition: color .3s var(--ease), border-color .3s var(--ease);\r\n}\r\n.track button .n{\r\n display: block;\r\n font-family: var(--font-mono);\r\n font-size: .66rem;\r\n letter-spacing: .14em;\r\n margin-bottom: .35rem;\r\n opacity: .7;\r\n}\r\n.track button:hover{ color: var(--text-2); }\r\n.track button[aria-selected=\"true\"]{\r\n color: var(--text);\r\n border-top-color: var(--violet);\r\n}\r\n\r\n.stage{\r\n display: grid;\r\n grid-template-columns: 1.05fr .95fr;\r\n gap: clamp(1.5rem, 4vw, 3.5rem);\r\n align-items: center;\r\n}\r\n.stage-panel{ display: none; }\r\n.stage-panel.is-active{ display: grid; animation: panelIn .5s var(--ease); }\r\n@keyframes panelIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }\r\n\r\n.stage-panel h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .9rem; }\r\n.stage-shot{\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n background: var(--card);\r\n box-shadow: 0 30px 70px -35px rgba(30,15,80,.42);\r\n}\r\n\r\n\/* --------------------------------------------------------------------------\r\n Mockups das quatro fases. Disparam em .is-active, ent\u00e3o reanimam\r\n sempre que a pessoa troca de fase na trilha.\r\n -------------------------------------------------------------------------- *\/\r\n\r\n.scene{\r\n padding: 1.6rem;\r\n min-height: 19rem;\r\n display: grid;\r\n align-content: center;\r\n gap: .7rem;\r\n background: var(--surface);\r\n}\r\n\r\n\/* ---- Fase 1: o diagn\u00f3stico em conversa ---- *\/\r\n.s-chat{ align-content: start; }\r\n.s-chat .meta{\r\n display: flex; justify-content: space-between; align-items: center;\r\n font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;\r\n text-transform: uppercase; color: var(--text-3);\r\n margin-bottom: .4rem;\r\n}\r\n.s-chat .bar{ height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: .9rem; }\r\n.s-chat .bar i{ display: block; height: 100%; width: 0; background: var(--violet); border-radius: 2px; }\r\n.is-active .s-chat .bar i{ animation: fill 2.6s var(--ease) .3s forwards; }\r\n@keyframes fill{ to{ width: 62%; } }\r\n\r\n.s-chat .msg{\r\n max-width: 86%;\r\n font-size: .82rem;\r\n line-height: 1.45;\r\n padding: .6rem .8rem;\r\n border-radius: .8rem;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n color: var(--text-2);\r\n opacity: 0;\r\n transform: translateY(8px);\r\n}\r\n.s-chat .msg.me{\r\n margin-left: auto;\r\n background: var(--violet);\r\n border-color: var(--violet);\r\n color: #fff;\r\n}\r\n.is-active .s-chat .msg{ animation: msgIn .5s var(--ease) forwards; }\r\n.s-chat .msg:nth-of-type(1){ animation-delay: .25s; }\r\n.s-chat .msg:nth-of-type(2){ animation-delay: .95s; }\r\n.s-chat .msg:nth-of-type(3){ animation-delay: 1.7s; }\r\n@keyframes msgIn{ to{ opacity: 1; transform: none; } }\r\n\r\n.s-chat .dots{\r\n display: inline-flex; gap: 4px; align-items: center;\r\n padding: .6rem .8rem; border-radius: .8rem;\r\n background: var(--card); border: 1px solid var(--border);\r\n width: max-content; opacity: 0;\r\n}\r\n.s-chat .dots b{ width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }\r\n.is-active .s-chat .dots{ animation: msgIn .4s var(--ease) 2.4s forwards; }\r\n.is-active .s-chat .dots b{ animation: blink 1.2s infinite; }\r\n.s-chat .dots b:nth-child(2){ animation-delay: .2s; }\r\n.s-chat .dots b:nth-child(3){ animation-delay: .4s; }\r\n@keyframes blink{ 0%,100%{ opacity: .3; } 50%{ opacity: 1; } }\r\n\r\n\/* ---- Fase 2: a ficha da marca ---- *\/\r\n.s-brand .row{\r\n display: flex; align-items: center; gap: .9rem;\r\n padding: .8rem .9rem;\r\n border: 1px solid var(--border);\r\n border-radius: .7rem;\r\n background: var(--card);\r\n opacity: 0; transform: translateY(10px);\r\n}\r\n.is-active .s-brand .row{ animation: msgIn .55s var(--ease) forwards; }\r\n.s-brand .row:nth-of-type(1){ animation-delay: .15s; }\r\n.s-brand .row:nth-of-type(2){ animation-delay: .32s; }\r\n.s-brand .row:nth-of-type(3){ animation-delay: .49s; }\r\n.s-brand .row:nth-of-type(4){ animation-delay: .66s; }\r\n.s-brand .k{\r\n font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;\r\n text-transform: uppercase; color: var(--text-3);\r\n width: 5.4rem; flex: none;\r\n}\r\n.s-brand .v{ font-size: .88rem; font-weight: 500; }\r\n.s-brand .dots5{ display: flex; gap: .3rem; }\r\n.s-brand .dots5 i{ width: 1.15rem; height: 1.15rem; border-radius: .3rem; }\r\n.s-brand .serif{ font-family: var(--font-display); font-size: 1.2rem; }\r\n\r\n\/* ---- Fase 3: o feed que ganha corpo ---- *\/\r\n.s-feed .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }\r\n.s-feed .grid i{\r\n aspect-ratio: 1;\r\n border-radius: .4rem;\r\n background: color-mix(in oklab, var(--text-3) 16%, transparent);\r\n opacity: 0; transform: scale(.7);\r\n}\r\n.is-active .s-feed .grid i{ animation: pop .45s var(--ease) forwards; }\r\n.s-feed .grid i:nth-child(1){ animation-delay: .10s; background: #2C3B38; }\r\n.s-feed .grid i:nth-child(2){ animation-delay: .18s; background: #EDE6DA; }\r\n.s-feed .grid i:nth-child(3){ animation-delay: .26s; background: #6B9C93; }\r\n.s-feed .grid i:nth-child(4){ animation-delay: .34s; background: #C97B63; }\r\n.s-feed .grid i:nth-child(5){ animation-delay: .42s; background: #2C3B38; }\r\n.s-feed .grid i:nth-child(6){ animation-delay: .50s; background: #EDE6DA; }\r\n.s-feed .grid i:nth-child(7){ animation-delay: .58s; background: #6B9C93; }\r\n.s-feed .grid i:nth-child(8){ animation-delay: .66s; background: #C97B63; }\r\n.s-feed .grid i:nth-child(9){ animation-delay: .74s; background: #2C3B38; }\r\n.s-feed .legend{\r\n display: flex; justify-content: space-between; align-items: baseline;\r\n font-size: .78rem; color: var(--text-3); margin-top: .3rem;\r\n}\r\n.s-feed .legend b{ font-family: var(--font-display); font-size: 1.4rem; color: var(--text); }\r\n\r\n\/* ---- Fase 4: o contato que vira sess\u00e3o ---- *\/\r\n.s-wa{ align-content: start; }\r\n.s-wa .msg{\r\n max-width: 82%;\r\n font-size: .82rem;\r\n padding: .55rem .75rem;\r\n border-radius: .8rem;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n color: var(--text-2);\r\n opacity: 0; transform: translateY(8px);\r\n}\r\n.s-wa .msg.me{\r\n margin-left: auto;\r\n background: color-mix(in oklab, var(--success) 16%, var(--card));\r\n border-color: color-mix(in oklab, var(--success) 30%, transparent);\r\n color: var(--text);\r\n}\r\n.is-active .s-wa .msg{ animation: msgIn .5s var(--ease) forwards; }\r\n.s-wa .msg:nth-of-type(1){ animation-delay: .2s; }\r\n.s-wa .msg:nth-of-type(2){ animation-delay: .85s; }\r\n.s-wa .msg:nth-of-type(3){ animation-delay: 1.5s; }\r\n.s-wa .booked{\r\n display: flex; align-items: center; gap: .55rem;\r\n margin-top: .5rem;\r\n padding: .7rem .85rem;\r\n border-radius: .7rem;\r\n border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);\r\n background: color-mix(in oklab, var(--success) 9%, transparent);\r\n font-size: .84rem; font-weight: 500;\r\n opacity: 0; transform: translateY(10px);\r\n}\r\n.s-wa .booked svg{ color: var(--success); flex: none; }\r\n.is-active .s-wa .booked{ animation: msgIn .55s var(--ease) 2.2s forwards; }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .scene .msg, .scene .row, .scene .booked, .scene .dots{ opacity: 1; transform: none; }\r\n .s-feed .grid i{ opacity: 1; transform: none; }\r\n .s-chat .bar i{ width: 62%; }\r\n}\r\n\r\n@media (max-width: 860px){\r\n .stage{ grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- IAs *\/\r\n\r\n.phase{ margin-bottom: 3rem; }\r\n.phase-head{\r\n display: flex;\r\n align-items: baseline;\r\n gap: .8rem;\r\n padding-bottom: .9rem;\r\n margin-bottom: 1.25rem;\r\n border-bottom: 1px solid var(--border);\r\n}\r\n.phase-head h3{ font-size: 1.3rem; }\r\n.phase-head .count{\r\n font-family: var(--font-mono);\r\n font-size: .7rem;\r\n letter-spacing: .12em;\r\n color: var(--text-3);\r\n}\r\n.phase-head p{ margin: 0 0 0 auto; font-size: .9rem; color: var(--text-3); }\r\n\r\n@media (max-width: 720px){\r\n .phase-head{ flex-wrap: wrap; align-items: center; }\r\n .phase-head p{ margin: .35rem 0 0; flex-basis: 100%; }\r\n}\r\n\r\n\/* Cada fase tem uma quantidade diferente de IAs (4, 4, 7 e 1), ent\u00e3o uma grade\r\n \u00fanica deixaria buracos no fim das fases 3 e 4. A grade \u00e9 de 12 colunas e cada\r\n fase distribui os seus cards de modo que nenhuma linha termine pela metade:\r\n as de 4 ficam 2 em cima e 2 embaixo, a de 7 centraliza o \u00faltimo, e a \u00fanica\r\n card da fase 4 fica centralizada em meia largura. *\/\r\n.ias{\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: .85rem;\r\n}\r\n\r\n@media (min-width: 40rem){\r\n .ias{ grid-template-columns: repeat(12, 1fr); }\r\n .ias > .ia{ grid-column: span 6; } \/* dois por linha *\/\r\n .ias--7 > .ia:nth-child(7){ grid-column: 4 \/ span 6; }\r\n .ias--1 > .ia{ grid-column: 4 \/ span 6; }\r\n}\r\n\r\n@media (min-width: 64rem){\r\n .ias--7 > .ia{ grid-column: span 4; } \/* sete cabem melhor em tr\u00eas *\/\r\n .ias--7 > .ia:nth-child(7){ grid-column: 5 \/ span 4; }\r\n}\r\n.ia{\r\n position: relative;\r\n padding: 1.3rem 1.35rem 1.4rem;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n background: var(--card);\r\n overflow: hidden;\r\n transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);\r\n}\r\n\/* cada card carrega a cor da sua fase, como um n\u00f3 do circuito do hero *\/\r\n.ia::before{\r\n content: '';\r\n position: absolute;\r\n inset: 0 auto 0 0;\r\n width: 3px;\r\n background: var(--ray, var(--violet));\r\n opacity: .8;\r\n transition: opacity .3s var(--ease);\r\n}\r\n.ia:hover{\r\n transform: translateY(-3px);\r\n border-color: color-mix(in oklab, var(--violet) 35%, var(--border));\r\n box-shadow: 0 22px 45px -28px rgba(30,15,80,.5);\r\n}\r\n.ia:hover::before{ opacity: 1; }\r\n.ia h4{\r\n font-family: var(--font-display);\r\n font-size: 1.02rem;\r\n font-weight: 600;\r\n letter-spacing: -.01em;\r\n margin: 0 0 .45rem;\r\n}\r\n.ia p{ font-size: .9rem; color: var(--text-2); margin: 0; }\r\n\r\n#ias .bonus{\r\n margin-top: 1.5rem;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 1.25rem;\r\n padding: 1.5rem 1.7rem;\r\n border-radius: var(--radius);\r\n \/* o b\u00f4nus \u00e9 vidro violeta: pertence \u00e0 se\u00e7\u00e3o das IAs, mas n\u00e3o \u00e9 uma delas *\/\r\n --glass-rim-mid: color-mix(in oklab, var(--violet) 55%, transparent);\r\n background-color: color-mix(in oklab, var(--violet) 7%, var(--card));\r\n}\r\n.bonus h4{ font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .3rem; }\r\n.bonus p{ margin: 0; font-size: .92rem; color: var(--text-2); }\r\n\r\n\/* ---------------------------------------------------------------- comparativo *\/\r\n\r\n.compare{\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: .96rem;\r\n}\r\n.compare caption{ position: absolute; left: -9999px; }\r\n.compare th, .compare td{\r\n padding: 1.05rem 1.2rem;\r\n text-align: left;\r\n border-bottom: 1px solid var(--border);\r\n vertical-align: top;\r\n}\r\n.compare thead th{\r\n font-family: var(--font-mono);\r\n font-size: .7rem;\r\n letter-spacing: .13em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n font-weight: 500;\r\n border-bottom-color: var(--text-3);\r\n}\r\n.compare .them{ color: var(--text-3); width: 44%; }\r\n.compare .us{\r\n color: var(--text);\r\n font-weight: 500;\r\n background: color-mix(in oklab, var(--violet) 4.5%, transparent);\r\n}\r\n.compare thead .us{ color: var(--violet); }\r\n.compare tbody tr:last-child td{ border-bottom: 0; }\r\n\r\n.compare-scroll{ overflow-x: auto; }\r\n\r\n\/* A marca no in\u00edcio de cada linha. N\u00e3o \u00e9 enfeite: ela diz de que lado a frase\r\n est\u00e1, e \u00e9 o que permite varrer a tabela sem ler as duas colunas inteiras.\r\n Desenhada com m\u00e1scara para tomar a cor do token, n\u00e3o um hex solto. *\/\r\n.compare tbody td{ position: relative; padding-left: 3rem; }\r\n.compare tbody td::before{\r\n content: '';\r\n position: absolute;\r\n left: 1.2rem;\r\n top: 1.3rem;\r\n width: .95rem;\r\n height: .95rem;\r\n -webkit-mask: var(--mk) center\/contain no-repeat;\r\n mask: var(--mk) center\/contain no-repeat;\r\n}\r\n.compare tbody .them::before{\r\n --mk: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 4.6l6.8 6.8M11.4 4.6l-6.8 6.8' stroke='%23000' stroke-width='1.9' stroke-linecap='round' fill='none'\/%3E%3C\/svg%3E\");\r\n background: var(--text-3);\r\n}\r\n.compare tbody .us::before{\r\n --mk: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'\/%3E%3C\/svg%3E\");\r\n background: var(--violet);\r\n}\r\n\r\n\/* ---- o duelo: a mesma tarefa nas duas ferramentas ---- *\/\r\n\r\n.duel{\r\n display: grid;\r\n grid-template-columns: 1fr auto 1fr;\r\n align-items: stretch;\r\n gap: 1.1rem;\r\n margin-bottom: 3rem;\r\n}\r\n.duel-side{\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-lg);\r\n background: var(--card);\r\n padding: 1.4rem;\r\n}\r\n.duel-side--us{\r\n border-color: color-mix(in oklab, var(--violet) 30%, var(--border));\r\n box-shadow: 0 24px 50px -34px color-mix(in oklab, var(--violet) 55%, transparent);\r\n}\r\n.duel-tag{\r\n font-family: var(--font-mono);\r\n font-size: .66rem;\r\n letter-spacing: .13em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n margin: 0 0 .9rem;\r\n}\r\n.duel-side--us .duel-tag{ color: var(--violet); }\r\n\r\n.duel-screen{\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 11.5rem;\r\n padding: 1.1rem;\r\n border-radius: var(--radius);\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n}\r\n.duel-foot{\r\n margin: 1rem 0 0;\r\n font-size: .86rem;\r\n line-height: 1.45;\r\n color: var(--text-2);\r\n}\r\n\r\n\/* o lado vazio *\/\r\n.duel-empty{\r\n flex: 1;\r\n display: grid;\r\n place-content: center;\r\n margin: 0;\r\n font-size: .84rem;\r\n color: var(--text-3);\r\n}\r\n.duel-field{\r\n display: flex;\r\n align-items: center;\r\n gap: .1rem;\r\n padding: .7rem .85rem;\r\n border-radius: .7rem;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n font-size: .82rem;\r\n color: var(--text-3);\r\n}\r\n.duel-caret{\r\n width: 1.5px;\r\n height: 1.05em;\r\n background: var(--text-3);\r\n margin-left: .12rem;\r\n}\r\n\r\n\/* o lado conduzido *\/\r\n.duel-meta{\r\n display: flex;\r\n justify-content: space-between;\r\n font-family: var(--font-mono);\r\n font-size: .62rem;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n margin-bottom: .45rem;\r\n}\r\n.duel-bar{\r\n height: 3px;\r\n border-radius: 2px;\r\n background: var(--border);\r\n overflow: hidden;\r\n margin-bottom: 1rem;\r\n}\r\n.duel-bar i{\r\n display: block;\r\n height: 100%;\r\n width: 41%;\r\n border-radius: 2px;\r\n background: var(--violet);\r\n}\r\n.duel-q{\r\n margin: 0 0 auto;\r\n font-size: .86rem;\r\n line-height: 1.45;\r\n padding: .65rem .8rem;\r\n border-radius: .8rem .8rem .8rem .2rem;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n color: var(--text);\r\n}\r\n.duel-out{\r\n margin-top: 1rem;\r\n padding: .7rem .85rem;\r\n border-radius: .7rem;\r\n background: color-mix(in oklab, var(--violet) 8%, var(--card));\r\n border: 1px solid color-mix(in oklab, var(--violet) 22%, var(--border));\r\n}\r\n.duel-out-k{\r\n display: block;\r\n font-family: var(--font-mono);\r\n font-size: .6rem;\r\n letter-spacing: .13em;\r\n text-transform: uppercase;\r\n color: var(--violet);\r\n margin-bottom: .2rem;\r\n}\r\n.duel-out-v{ font-size: .84rem; color: var(--text); font-weight: 500; }\r\n\r\n.duel-vs{\r\n align-self: center;\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 1.05rem;\r\n color: var(--text-3);\r\n}\r\n\r\n\/* O cursor pisca e a barra corre uma vez, quando o bloco entra em cena.\r\n Fora disso o duelo fica parado: ele \u00e9 um argumento, n\u00e3o um brinquedo. *\/\r\n@media (prefers-reduced-motion: no-preference){\r\n .duel-caret{ animation: duelCaret 1.15s steps(1) infinite; }\r\n @keyframes duelCaret{ 50%{ opacity: 0; } }\r\n\r\n .duel .duel-bar i{ width: 0; }\r\n .duel.is-in .duel-bar i{ animation: duelFill 1.5s var(--ease) .35s forwards; }\r\n @keyframes duelFill{ to{ width: 41%; } }\r\n}\r\n\r\n@media (max-width: 860px){\r\n .duel{ grid-template-columns: 1fr; gap: .8rem; }\r\n .duel-vs{ justify-self: center; }\r\n}\r\n\r\n@media (max-width: 680px){\r\n .compare, .compare tbody, .compare tr, .compare td{ display: block; width: auto; }\r\n .compare .them, .compare .us{ width: auto; }\r\n .compare-scroll{ overflow-x: visible; }\r\n .compare thead{ display: none; }\r\n .compare tr{\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n margin-bottom: .8rem;\r\n overflow: hidden;\r\n }\r\n .compare td{ border-bottom: 0; }\r\n \/* no empilhado o ::before volta a ser o r\u00f3tulo da coluna, ent\u00e3o a marca\r\n desenhada acima precisa ser desfeita por inteiro *\/\r\n .compare tbody td{ padding-left: 1.2rem; position: static; }\r\n \/* precisa casar a especificidade de `.compare tbody .them::before`, sen\u00e3o a\r\n cor de fundo da marca sobrevive e vira uma tarja atr\u00e1s do r\u00f3tulo *\/\r\n .compare tbody .them::before,\r\n .compare tbody .us::before{\r\n content: attr(data-label);\r\n position: static;\r\n width: auto;\r\n height: auto;\r\n background: none;\r\n -webkit-mask: none;\r\n mask: none;\r\n display: block;\r\n font-family: var(--font-mono);\r\n font-size: .64rem;\r\n letter-spacing: .13em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n margin-bottom: .35rem;\r\n }\r\n}\r\n\r\n\/* ==========================================================================\r\n BENTO \u2014 cada card traz um mockup esquem\u00e1tico da entrega, desenhado em CSS.\r\n Nada de imagem: s\u00e3o elementos reais, ent\u00e3o animam de gra\u00e7a e ficam n\u00edtidos.\r\n ========================================================================== *\/\r\n\r\n\/* Os cards de uma mesma linha se esticam para a mesma altura (o `stretch` \u00e9 o\r\n padr\u00e3o da grade) e \u00e9 o mockup que absorve a sobra \u2014 assim nenhum card termina\r\n antes do vizinho deixando um degrau de espa\u00e7o vazio embaixo. *\/\r\n.bento{\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1rem;\r\n}\r\n.cell{\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-lg);\r\n background: var(--card);\r\n padding: 1.5rem;\r\n overflow: hidden;\r\n transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);\r\n}\r\n.cell:hover{\r\n border-color: color-mix(in oklab, var(--violet) 32%, var(--border));\r\n box-shadow: 0 26px 55px -34px rgba(30,15,80,.45);\r\n transform: translateY(-2px);\r\n}\r\n.cell--tall{ grid-row: span 2; }\r\n.cell--wide{ grid-column: span 2; }\r\n\r\n.cell .cap{ margin-top: auto; padding-top: 1.4rem; }\r\n.cell h3{\r\n display: flex;\r\n align-items: center;\r\n gap: .6rem;\r\n font-size: 1.12rem;\r\n margin-bottom: .5rem;\r\n}\r\n.cell h3 .ico{\r\n flex: none;\r\n display: grid;\r\n place-content: center;\r\n width: 1.9rem;\r\n height: 1.9rem;\r\n border-radius: .6rem;\r\n background: color-mix(in oklab, var(--violet) 12%, transparent);\r\n color: var(--violet);\r\n}\r\n.cell p{ font-size: .93rem; color: var(--text-2); margin: 0; }\r\n\r\n.tag{\r\n display: inline-block;\r\n font-family: var(--font-mono);\r\n font-size: .6rem;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n padding: .28rem .55rem;\r\n border-radius: 999px;\r\n background: color-mix(in oklab, var(--violet) 14%, transparent);\r\n color: var(--violet);\r\n vertical-align: middle;\r\n}\r\n\r\n\/* superf\u00edcie comum dos mockups *\/\r\n.mock{\r\n position: relative;\r\n border-radius: var(--radius);\r\n background: var(--surface);\r\n border: 1px solid var(--border-soft, var(--border));\r\n padding: 1.1rem;\r\n min-height: 12rem;\r\n display: grid;\r\n overflow: hidden;\r\n flex: 1; \/* cresce com o card; o conte\u00fado fica ancorado onde est\u00e1 *\/\r\n}\r\n\r\n\/* ---- DNA: a conversa de um lado, a ficha que ela gera do outro ---- *\/\r\n.m-dna{\r\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\r\n align-items: center;\r\n gap: 1.1rem;\r\n min-height: 16rem;\r\n padding: 1.3rem;\r\n}\r\n\r\n.m-dna .chat{ display: grid; gap: .45rem; justify-items: start; }\r\n.m-dna .chat p{\r\n max-width: 92%;\r\n margin: 0;\r\n font-size: .78rem;\r\n line-height: 1.35;\r\n padding: .5rem .7rem;\r\n border-radius: .8rem;\r\n opacity: 0;\r\n transform: translateY(6px);\r\n}\r\n.m-dna .chat .q{\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n color: var(--text-2);\r\n border-bottom-left-radius: .25rem;\r\n}\r\n.m-dna .chat .a{\r\n justify-self: end;\r\n background: var(--violet);\r\n color: #fff;\r\n border-bottom-right-radius: .25rem;\r\n}\r\n\/* A sess\u00e3o inteira se repete a cada 13s: pergunta, resposta, ficha preenchida,\r\n e ent\u00e3o a conversa recome\u00e7a \u2014 como uma nova psic\u00f3loga entrando no diagn\u00f3stico. *\/\r\n.is-in .m-dna .chat p{ animation: bubbleIn 13s var(--ease) infinite; }\r\n.is-in .m-dna .chat p:nth-child(1){ animation-delay: .10s; }\r\n.is-in .m-dna .chat p:nth-child(2){ animation-delay: .70s; }\r\n.is-in .m-dna .chat p:nth-child(3){ animation-delay: 1.30s; }\r\n.is-in .m-dna .chat p:nth-child(4){ animation-delay: 1.90s; }\r\n\/* a volta \u00e9 curta de prop\u00f3sito: com 82% o lado esquerdo do card ficava quase\r\n tr\u00eas segundos vazio a cada ciclo, e vazio \u00e9 exatamente o que n\u00e3o pode *\/\r\n@keyframes bubbleIn{\r\n 0% { opacity: 0; transform: translateY(6px); }\r\n 3%, 92% { opacity: 1; transform: none; }\r\n 97%, 100%{ opacity: 0; transform: translateY(-4px); }\r\n}\r\n\r\n\/* a \u00faltima bolha fica \"digitando\", para a conversa n\u00e3o parecer encerrada *\/\r\n.m-dna .is-typing{ display: flex; gap: .22rem; align-items: center; padding: .6rem .7rem; }\r\n.m-dna .is-typing i{\r\n width: .3rem; height: .3rem;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,.85);\r\n}\r\n.is-in .m-dna .is-typing i{ animation: blink 1.3s var(--ease) infinite; }\r\n.is-in .m-dna .is-typing i:nth-child(2){ animation-delay: .18s; }\r\n.is-in .m-dna .is-typing i:nth-child(3){ animation-delay: .36s; }\r\n@keyframes blink{ 0%,100%{ opacity: .35; } 50%{ opacity: 1; } }\r\n\r\n.m-dna .arrow-flow{\r\n display: grid;\r\n justify-items: center;\r\n gap: .4rem;\r\n color: color-mix(in oklab, var(--violet) 70%, transparent);\r\n}\r\n.is-in .m-dna .arrow-flow svg{ animation: nudge 2.6s var(--ease) infinite; }\r\n@keyframes nudge{\r\n 0%,70%,100%{ transform: none; opacity: .75; }\r\n 82% { transform: translateX(5px); opacity: 1; }\r\n}\r\n.m-dna .qty{\r\n font-family: var(--font-mono);\r\n font-size: .6rem;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n color: var(--text-3);\r\n}\r\n\r\n.m-dna .sheet{ display: grid; gap: .5rem; margin: 0; }\r\n.m-dna .sheet > div{\r\n padding: .55rem .75rem;\r\n border-radius: .7rem;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n opacity: 0;\r\n transform: translateY(8px);\r\n}\r\n.m-dna .sheet dt{\r\n font-family: var(--font-mono);\r\n font-size: .56rem;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: var(--violet);\r\n margin-bottom: .12rem;\r\n}\r\n.m-dna .sheet dd{\r\n margin: 0;\r\n font-size: .8rem;\r\n font-weight: 500;\r\n line-height: 1.25;\r\n color: var(--text);\r\n}\r\n\/* a ficha s\u00f3 se preenche depois da conversa: primeiro pergunta, depois entrega *\/\r\n.is-in .m-dna .sheet > div{ animation: bubbleIn 13s var(--ease) infinite; }\r\n.is-in .m-dna .sheet > div:nth-child(1){ animation-delay: 2.6s; }\r\n.is-in .m-dna .sheet > div:nth-child(2){ animation-delay: 2.9s; }\r\n.is-in .m-dna .sheet > div:nth-child(3){ animation-delay: 3.2s; }\r\n.is-in .m-dna .sheet > div:nth-child(4){ animation-delay: 3.5s; }\r\n\r\n\/* estreito: a ficha desce para baixo da conversa e a seta aponta para baixo *\/\r\n@media (max-width: 760px){\r\n .m-dna{ grid-template-columns: 1fr; justify-items: stretch; }\r\n .m-dna .arrow-flow{ grid-auto-flow: column; align-items: center; gap: .6rem; }\r\n .m-dna .arrow-flow svg{ rotate: 90deg; }\r\n}\r\n\r\n\/* ---- Bio: o perfil montado ---- *\/\r\n\/* o card cresce para acompanhar o vizinho da linha, ent\u00e3o o perfil precisa ter\r\n o que mostrar at\u00e9 embaixo: bio, destaques e a grade de posts *\/\r\n.m-bio{ align-content: space-between; gap: .8rem; }\r\n.m-bio .hl{ display: flex; gap: .45rem; }\r\n.m-bio .hl span{\r\n flex: 1;\r\n font-size: .55rem;\r\n text-align: center;\r\n color: var(--text-3);\r\n padding-top: 2.1rem;\r\n position: relative;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.m-bio .hl span::before{\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 50%;\r\n translate: -50% 0;\r\n width: 1.9rem; height: 1.9rem;\r\n border-radius: 50%;\r\n background: color-mix(in oklab, var(--text-3) 16%, transparent);\r\n border: 1px solid var(--border);\r\n}\r\n.m-bio .posts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .18rem; }\r\n.m-bio .posts i{\r\n aspect-ratio: 1;\r\n border-radius: 2px;\r\n background: linear-gradient(140deg, #EDE6DA, #C9B8A8);\r\n opacity: 0;\r\n}\r\n.m-bio .posts i:nth-child(2){ background: linear-gradient(140deg, #DCE7E3, #6B9C93); }\r\n.m-bio .posts i:nth-child(3){ background: linear-gradient(140deg, #F3E2DA, #C97B63); }\r\n.m-bio .posts i:nth-child(4){ background: linear-gradient(140deg, #E6E3EF, #8A7FB5); }\r\n.m-bio .posts i:nth-child(5){ background: linear-gradient(140deg, #D8DCDB, #2C3B38); }\r\n.m-bio .posts i:nth-child(6){ background: linear-gradient(140deg, #F6EADA, #E0A76B); }\r\n.is-in .m-bio .posts i{ animation: pop .45s var(--ease) forwards; }\r\n.is-in .m-bio .posts i:nth-child(1){ animation-delay: .95s; }\r\n.is-in .m-bio .posts i:nth-child(2){ animation-delay: 1.03s; }\r\n.is-in .m-bio .posts i:nth-child(3){ animation-delay: 1.11s; }\r\n.is-in .m-bio .posts i:nth-child(4){ animation-delay: 1.19s; }\r\n.is-in .m-bio .posts i:nth-child(5){ animation-delay: 1.27s; }\r\n.is-in .m-bio .posts i:nth-child(6){ animation-delay: 1.35s; }\r\n.m-bio .top{ display: flex; align-items: center; gap: .7rem; }\r\n.m-bio .av{\r\n width: 2.6rem; height: 2.6rem; border-radius: 50%;\r\n background: linear-gradient(135deg, #6B9C93, #C97B63);\r\n flex: none;\r\n}\r\n.m-bio .handle{ font-weight: 600; font-size: .9rem; }\r\n.m-bio .sub{ font-size: .74rem; color: var(--text-3); }\r\n.m-bio .nums{ display: flex; gap: 1.2rem; font-size: .74rem; color: var(--text-3); }\r\n.m-bio .nums b{ color: var(--text); font-size: .84rem; }\r\n.m-bio .lines{ display: grid; gap: .42rem; }\r\n.m-bio .ln{\r\n position: relative;\r\n height: .52rem;\r\n border-radius: 3px;\r\n background: color-mix(in oklab, var(--text-3) 30%, transparent);\r\n width: 0;\r\n}\r\n\/* o cursor acompanha a \u00faltima linha enquanto ela cresce e continua piscando:\r\n a bio fica em estado de escrita, n\u00e3o de texto pronto *\/\r\n.m-bio .ln:nth-child(3)::after{\r\n content: '';\r\n position: absolute;\r\n right: -.28rem;\r\n top: 50%;\r\n translate: 0 -50%;\r\n width: 2px;\r\n height: .78rem;\r\n border-radius: 1px;\r\n background: var(--violet);\r\n opacity: 0;\r\n}\r\n.is-in .m-bio .ln:nth-child(3)::after{ animation: caret 1.15s steps(1) .75s infinite; }\r\n@keyframes caret{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }\r\n\/* a bio se escreve, fica em p\u00e9 um tempo, apaga e recome\u00e7a *\/\r\n.is-in .m-bio .ln{ animation: type 9s var(--ease) infinite; }\r\n.m-bio .ln:nth-child(1){ animation-delay: .2s; --w: 92%; }\r\n.m-bio .ln:nth-child(2){ animation-delay: .45s; --w: 78%; }\r\n.m-bio .ln:nth-child(3){ animation-delay: .7s; --w: 60%; background: color-mix(in oklab, var(--violet) 55%, transparent); }\r\n\/* a bio passa quase todo o ciclo escrita: apaga e reescreve num piscar, para\r\n n\u00e3o deixar o card vazio no meio do caminho *\/\r\n@keyframes type{\r\n 0% { width: 0; }\r\n 8%, 88% { width: var(--w); }\r\n 94%, 100%{ width: 0; }\r\n}\r\n\r\n\/* ---- Paleta ---- *\/\r\n.m-pal{ align-content: center; gap: 1rem; }\r\n.m-pal .sw{ display: flex; gap: .5rem; position: relative; overflow: hidden; border-radius: .55rem; }\r\n\/* uma luz passa pelas amostras de tempos em tempos, como cor pega no papel *\/\r\n.m-pal .sw::after{\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n translate: -130% 0;\r\n background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);\r\n}\r\n.is-in .m-pal .sw::after{ animation: sheen 6.5s var(--ease) 1.1s infinite; }\r\n@keyframes sheen{ 0%{ translate: -130% 0; } 26%,100%{ translate: 130% 0; } }\r\n.m-pal .sw i{\r\n flex: 1;\r\n height: 3.2rem;\r\n border-radius: .55rem;\r\n transform: scale(.4);\r\n opacity: 0;\r\n}\r\n\/* Tr\u00eas paletas completas se sucedem. A cor \u00e9 interpol\u00e1vel, ent\u00e3o a troca \u00e9\r\n suave; o giro em X na hora da virada faz a amostra parecer uma ficha\r\n virando de lado, e a cascata de .09s entre elas d\u00e1 o sentido de leitura. *\/\r\n.m-pal .sw i:nth-child(1){ background: #6B9C93; }\r\n.m-pal .sw i:nth-child(2){ background: #EDE6DA; }\r\n.m-pal .sw i:nth-child(3){ background: #2C3B38; }\r\n.m-pal .sw i:nth-child(4){ background: #FAF8F4; border: 1px solid var(--border); }\r\n.m-pal .sw i:nth-child(5){ background: #C97B63; }\r\n\r\n\/* duas anima\u00e7\u00f5es por amostra: uma cuida da forma, a outra da cor *\/\r\n.is-in .m-pal .sw i{\r\n animation-duration: 11s, 11s;\r\n animation-timing-function: var(--ease), var(--ease);\r\n animation-iteration-count: infinite, infinite;\r\n}\r\n.is-in .m-pal .sw i:nth-child(1){ animation-name: palTurn, pal1; animation-delay: .10s, .10s; }\r\n.is-in .m-pal .sw i:nth-child(2){ animation-name: palTurn, pal2; animation-delay: .19s, .19s; }\r\n.is-in .m-pal .sw i:nth-child(3){ animation-name: palTurn, pal3; animation-delay: .28s, .28s; }\r\n.is-in .m-pal .sw i:nth-child(4){ animation-name: palTurn, pal4; animation-delay: .37s, .37s; }\r\n.is-in .m-pal .sw i:nth-child(5){ animation-name: palTurn, pal5; animation-delay: .46s, .46s; }\r\n@keyframes palTurn{\r\n 0% { opacity: 0; transform: scale(.4); }\r\n 5% { opacity: 1; transform: none; }\r\n 27% { transform: none; }\r\n 31% { transform: scaleY(.34); }\r\n 35%, 60% { transform: none; }\r\n 64% { transform: scaleY(.34); }\r\n 68%, 93% { transform: none; }\r\n 97% { transform: scaleY(.34); }\r\n 100% { opacity: 1; transform: none; }\r\n}\r\n\/* verde-terroso \u2192 violeta-areia \u2192 azul sereno *\/\r\n@keyframes pal1{ 0%,29%{ background-color:#6B9C93 } 33%,62%{ background-color:#7C6BAA } 66%,95%{ background-color:#4F7FA6 } 100%{ background-color:#6B9C93 } }\r\n@keyframes pal2{ 0%,29%{ background-color:#EDE6DA } 33%,62%{ background-color:#EFEAF6 } 66%,95%{ background-color:#E6EEF2 } 100%{ background-color:#EDE6DA } }\r\n@keyframes pal3{ 0%,29%{ background-color:#2C3B38 } 33%,62%{ background-color:#2A2440 } 66%,95%{ background-color:#22323F } 100%{ background-color:#2C3B38 } }\r\n@keyframes pal4{ 0%,29%{ background-color:#FAF8F4 } 33%,62%{ background-color:#FBF9FF } 66%,95%{ background-color:#F7FAFC } 100%{ background-color:#FAF8F4 } }\r\n@keyframes pal5{ 0%,29%{ background-color:#C97B63 } 33%,62%{ background-color:#D9A6A0 } 66%,95%{ background-color:#E0A76B } 100%{ background-color:#C97B63 } }\r\n@keyframes pop{ to{ transform: none; opacity: 1; } }\r\n\r\n.m-pal .type{\r\n font-family: var(--font-display);\r\n font-size: 1.6rem;\r\n letter-spacing: -.02em;\r\n line-height: 1.15;\r\n}\r\n\/* os pares tipogr\u00e1ficos se revezam no mesmo compasso das cores *\/\r\n.m-pal .pairs{\r\n position: relative;\r\n display: block;\r\n margin-top: .35rem;\r\n height: 1.2em;\r\n font-family: var(--font-ui);\r\n font-size: .78rem;\r\n color: var(--text-3);\r\n}\r\n.m-pal .pairs b{\r\n position: absolute;\r\n inset: 0;\r\n font-weight: 400;\r\n white-space: nowrap;\r\n opacity: 0;\r\n}\r\n.is-in .m-pal .pairs b{ animation: pairFade 11s var(--ease) infinite; }\r\n.is-in .m-pal .pairs b:nth-child(2){ animation-delay: 3.67s; }\r\n.is-in .m-pal .pairs b:nth-child(3){ animation-delay: 7.34s; }\r\n@keyframes pairFade{\r\n 0% { opacity: 0; }\r\n 4%, 29% { opacity: 1; }\r\n 33%, 100%{ opacity: 0; }\r\n}\r\n\r\n\/* ---- Link da bio: o celular ---- *\/\r\n.m-link{ place-items: center; min-height: 15rem; }\r\n.m-link .phone{\r\n width: 10.6rem;\r\n border: 1px solid var(--border);\r\n border-radius: 1.1rem;\r\n background: var(--card);\r\n padding: .55rem;\r\n overflow: hidden;\r\n box-shadow: 0 18px 40px -24px rgba(30,15,80,.45);\r\n}\r\n\/* O celular troca de identidade junto com a paleta do card vizinho: o banner\r\n tem tr\u00eas camadas de gradiente e os bot\u00f5es seguem as mesmas tr\u00eas fam\u00edlias.\r\n Gradiente n\u00e3o interpola, ent\u00e3o a troca \u00e9 feita com camadas em cross-fade. *\/\r\n\/* Sem capa. A faixa de gradiente no topo era o elemento mais pesado do\r\n mockup e n\u00e3o dizia nada: virava um bloco de cor disputando aten\u00e7\u00e3o com os\r\n bot\u00f5es, que s\u00e3o o assunto da pe\u00e7a. A p\u00e1gina come\u00e7a pelo retrato, como\r\n come\u00e7am as p\u00e1ginas de link da bio que funcionam.\r\n\r\n A identidade continua trocando \u2014 quem carrega isso agora s\u00e3o os tr\u00eas\r\n bot\u00f5es, que j\u00e1 faziam cross-fade entre as mesmas fam\u00edlias de cor. Os\r\n keyframes layerB\/layerC seguem em uso pelo mockup do ensaio. *\/\r\n.m-link .pav{\r\n display: block;\r\n width: 2.9rem; height: 2.9rem; border-radius: 50%;\r\n background: linear-gradient(150deg, #CDB9A2 20%, #6F5C4A);\r\n box-shadow: 0 3px 10px -4px rgba(0,0,0,.4);\r\n margin: .95rem auto .55rem;\r\n}\r\n.m-link .nm{\r\n margin: 0;\r\n text-align: center;\r\n font-family: var(--font-display);\r\n font-size: .76rem;\r\n font-weight: 600;\r\n}\r\n.m-link .rl{\r\n margin: .1rem 0 .7rem;\r\n text-align: center;\r\n font-size: .52rem;\r\n letter-spacing: .02em;\r\n color: var(--text-3);\r\n}\r\n.m-link .btns{ display: grid; gap: .32rem; }\r\n.m-link .b{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: .3rem;\r\n min-height: 1.55rem;\r\n padding: .3rem .45rem;\r\n border-radius: .5rem;\r\n font-size: .55rem;\r\n font-weight: 500;\r\n line-height: 1.1;\r\n text-align: center;\r\n color: #fff;\r\n background: #6B9C93;\r\n opacity: 0;\r\n transform: translateY(6px);\r\n}\r\n.m-link .b svg{ width: .7rem; height: .7rem; flex: none; }\r\n.m-link .b:nth-child(2){ background: #C97B63; }\r\n.m-link .b:nth-child(3){ background: #2C3B38; }\r\n.m-link .dom{\r\n display: block;\r\n margin-top: .55rem;\r\n text-align: center;\r\n font-family: var(--font-mono);\r\n font-size: .48rem;\r\n letter-spacing: .06em;\r\n color: var(--text-3);\r\n}\r\n\/* os bot\u00f5es entram uma vez, depois trocam de cor com a marca e recebem um\r\n toque fantasma em cascata no fim de cada volta *\/\r\n\/* nth-child dentro de .btns: aqui os tr\u00eas bot\u00f5es s\u00e3o os \u00fanicos irm\u00e3os, ent\u00e3o\r\n o \u00edndice bate. (Antes era nth-of-type e o banner contava como div.) *\/\r\n.is-in .m-link .b{\r\n animation-duration: .5s, 10.5s, 10.5s;\r\n animation-timing-function: var(--ease), var(--ease), var(--ease);\r\n animation-iteration-count: 1, infinite, infinite;\r\n animation-fill-mode: forwards, none, none;\r\n}\r\n.is-in .m-link .b:nth-child(1){ animation-name: btnIn, btn1, tapIdle; animation-delay: .30s, .30s, 1.6s; }\r\n.is-in .m-link .b:nth-child(2){ animation-name: btnIn, btn2, tapIdle; animation-delay: .42s, .42s, 1.8s; }\r\n.is-in .m-link .b:nth-child(3){ animation-name: btnIn, btn3, tapIdle; animation-delay: .54s, .54s, 2.0s; }\r\n@keyframes btnIn{ to{ opacity: 1; transform: none; } }\r\n@keyframes btn1{ 0%,29%{ background-color:#6B9C93 } 34%,62%{ background-color:#7C6BAA } 67%,95%{ background-color:#4F7FA6 } 100%{ background-color:#6B9C93 } }\r\n@keyframes btn2{ 0%,29%{ background-color:#C97B63 } 34%,62%{ background-color:#D9A6A0 } 67%,95%{ background-color:#E0A76B } 100%{ background-color:#C97B63 } }\r\n@keyframes btn3{ 0%,29%{ background-color:#2C3B38 } 34%,62%{ background-color:#2A2440 } 67%,95%{ background-color:#22323F } 100%{ background-color:#2C3B38 } }\r\n@keyframes tapIdle{\r\n 0%,86%,100%{ transform: none; }\r\n 91% { transform: scale(1.035); }\r\n}\r\n\r\n\/* ---- Semana: o calend\u00e1rio editorial ---- *\/\r\n\/* distribui at\u00e9 embaixo: o card estica para acompanhar a linha *\/\r\n.m-week{ align-content: space-between; gap: .9rem; }\r\n.m-week .hd{ display: flex; align-items: center; justify-content: space-between; }\r\n.m-week .hd b{ font-size: .92rem; }\r\n.m-week .days{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }\r\n.m-week .d{\r\n aspect-ratio: 1;\r\n border-radius: .45rem;\r\n border: 1px solid var(--border);\r\n display: grid;\r\n place-content: center;\r\n font-size: .58rem;\r\n color: var(--text-3);\r\n}\r\n.m-week .d.on{\r\n background: var(--ink);\r\n border-color: var(--ink);\r\n color: #fff;\r\n opacity: 0;\r\n transform: scale(.6);\r\n}\r\n\/* a semana se agenda, fica de p\u00e9, se apaga e \u00e9 agendada de novo \u2014 \u00e9 assim\r\n que a rotina se parece por dentro, e n\u00e3o um calend\u00e1rio parado *\/\r\n.is-in .m-week .d.on{ animation: weekDay 10s var(--ease) infinite; }\r\n\/* os dias acesos s\u00e3o o 1\u00ba, 2\u00ba, 3\u00ba e 5\u00ba da semana \u2014 nth-child, n\u00e3o nth-of-type,\r\n sen\u00e3o o \u00faltimo cai num dia apagado e entra fora do compasso *\/\r\n.m-week .d.on:nth-child(1){ animation-delay: .20s; }\r\n.m-week .d.on:nth-child(2){ animation-delay: .55s; }\r\n.m-week .d.on:nth-child(3){ animation-delay: .90s; }\r\n.m-week .d.on:nth-child(5){ animation-delay: 1.25s; }\r\n@keyframes weekDay{\r\n 0% { opacity: 0; transform: scale(.6); }\r\n 5% { opacity: 1; transform: scale(1.12); }\r\n 8%, 68% { opacity: 1; transform: scale(1); }\r\n 75%, 100%{ opacity: 0; transform: scale(.6); }\r\n}\r\n.m-week .note{\r\n font-size: .76rem;\r\n color: var(--text-2);\r\n border: 1px solid var(--border);\r\n border-radius: .6rem;\r\n padding: .6rem .75rem;\r\n background: var(--card);\r\n}\r\n\r\n\/* ---- Slides: o carrossel escrito ---- *\/\r\n\/* ---- Slides: o carrossel rodando ao lado do pr\u00f3prio roteiro ---- *\/\r\n.m-slide{\r\n grid-template-columns: auto minmax(0, 1fr);\r\n align-items: center;\r\n gap: 1.4rem;\r\n min-height: 15rem;\r\n padding: 1.3rem;\r\n}\r\n\r\n\/* --- o palco: um slide de cada vez, em 4:5 como no Instagram --- *\/\r\n.m-slide .stage{\r\n position: relative;\r\n width: 12.6rem;\r\n aspect-ratio: 4 \/ 5;\r\n border-radius: .9rem;\r\n background: var(--ink);\r\n border: 1px solid var(--ink-2);\r\n overflow: hidden;\r\n box-shadow: 0 18px 38px -22px rgba(0,0,0,.65);\r\n}\r\n.m-slide .sld{\r\n position: absolute;\r\n inset: 0;\r\n padding: 1rem .95rem 1.6rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: .45rem;\r\n opacity: 0;\r\n transform: translateX(14px);\r\n}\r\n.m-slide .sld--cta{ background: var(--violet-dark); }\r\n.m-slide .ord{\r\n font-family: var(--font-mono);\r\n font-size: .58rem;\r\n letter-spacing: .16em;\r\n color: color-mix(in oklab, var(--violet-light) 85%, transparent);\r\n}\r\n.m-slide .sld--cta .ord{ color: rgba(255,255,255,.8); }\r\n.m-slide .hd{\r\n margin: 0;\r\n font-family: var(--font-display);\r\n font-size: .96rem;\r\n font-weight: 600;\r\n line-height: 1.2;\r\n letter-spacing: -.01em;\r\n color: #fff;\r\n text-wrap: balance;\r\n}\r\n.m-slide .bd{\r\n margin: 0;\r\n font-size: .68rem;\r\n line-height: 1.4;\r\n color: rgba(255,255,255,.62);\r\n}\r\n.m-slide .btn-ghost{\r\n align-self: start;\r\n margin-top: .1rem;\r\n font-size: .62rem;\r\n font-weight: 500;\r\n color: #fff;\r\n padding: .32rem .6rem;\r\n border-radius: 999px;\r\n border: 1px solid rgba(255,255,255,.45);\r\n}\r\n.m-slide .mark{\r\n margin-top: auto;\r\n font-size: .56rem;\r\n letter-spacing: .04em;\r\n color: rgba(255,255,255,.4);\r\n}\r\n\/* a barrinha de progresso do carrossel, no rodap\u00e9 do slide *\/\r\n.m-slide .dots{\r\n position: absolute;\r\n left: .95rem; right: .95rem; bottom: .7rem;\r\n display: grid;\r\n grid-auto-flow: column;\r\n gap: .22rem;\r\n}\r\n.m-slide .dots i{ height: 2px; border-radius: 1px; background: rgba(255,255,255,.22); }\r\n\r\n\/* --- o roteiro: as cinco fun\u00e7\u00f5es da narrativa --- *\/\r\n.m-slide .board{ display: grid; gap: .6rem; align-content: center; }\r\n.m-slide .board-hd{\r\n display: flex;\r\n align-items: center;\r\n gap: .5rem;\r\n margin: 0;\r\n font-size: .82rem;\r\n font-weight: 600;\r\n}\r\n.m-slide .chip{\r\n font-family: var(--font-mono);\r\n font-size: .56rem;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n padding: .2rem .45rem;\r\n border-radius: 999px;\r\n color: var(--violet);\r\n background: color-mix(in oklab, var(--violet) 12%, transparent);\r\n}\r\n.m-slide .steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }\r\n.m-slide .steps li{\r\n display: flex;\r\n align-items: center;\r\n gap: .55rem;\r\n padding: .35rem .55rem;\r\n border-radius: .5rem;\r\n border: 1px solid transparent;\r\n}\r\n.m-slide .rn{\r\n font-family: var(--font-mono);\r\n font-size: .58rem;\r\n color: var(--text-3);\r\n}\r\n.m-slide .rl{ font-size: .76rem; color: var(--text-2); }\r\n.m-slide .bar{\r\n position: relative;\r\n overflow: hidden;\r\n flex: 1;\r\n height: .28rem;\r\n border-radius: 2px;\r\n background: color-mix(in oklab, var(--text-3) 22%, transparent);\r\n}\r\n.m-slide .bar::after{\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 2px;\r\n background: var(--violet);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n}\r\n.m-slide .board-ft{\r\n margin: .15rem 0 0;\r\n font-size: .68rem;\r\n color: var(--text-3);\r\n}\r\n\r\n\/* --- o compasso: 12,5s, dois segundos e meio por slide --- *\/\r\n.is-in .m-slide .sld{ animation: slideCue 12.5s var(--ease) infinite; }\r\n.is-in .m-slide .sld:nth-child(2){ animation-delay: 2.5s; }\r\n.is-in .m-slide .sld:nth-child(3){ animation-delay: 5s; }\r\n.is-in .m-slide .sld:nth-child(4){ animation-delay: 7.5s; }\r\n.is-in .m-slide .sld:nth-child(5){ animation-delay: 10s; }\r\n@keyframes slideCue{\r\n 0% { opacity: 0; transform: translateX(14px); }\r\n 3%, 18% { opacity: 1; transform: none; }\r\n 21%, 100%{ opacity: 0; transform: translateX(-14px); }\r\n}\r\n\r\n\/* o ponto do slide em cena acende junto *\/\r\n.is-in .m-slide .dots i{ animation: dotOn 12.5s steps(1) infinite; }\r\n.is-in .m-slide .dots i:nth-child(2){ animation-delay: 2.5s; }\r\n.is-in .m-slide .dots i:nth-child(3){ animation-delay: 5s; }\r\n.is-in .m-slide .dots i:nth-child(4){ animation-delay: 7.5s; }\r\n.is-in .m-slide .dots i:nth-child(5){ animation-delay: 10s; }\r\n@keyframes dotOn{\r\n 0%, 19% { background: #fff; }\r\n 20%,100%{ background: rgba(255,255,255,.22); }\r\n}\r\n\r\n\/* a linha do roteiro se destaca no mesmo instante, e a barra se preenche\r\n como o tempo daquele slide correndo *\/\r\n.is-in .m-slide .steps li{ animation: stepOn 12.5s var(--ease) infinite; }\r\n.is-in .m-slide .steps li:nth-child(2){ animation-delay: 2.5s; }\r\n.is-in .m-slide .steps li:nth-child(3){ animation-delay: 5s; }\r\n.is-in .m-slide .steps li:nth-child(4){ animation-delay: 7.5s; }\r\n.is-in .m-slide .steps li:nth-child(5){ animation-delay: 10s; }\r\n@keyframes stepOn{\r\n 0% { background: transparent; border-color: transparent; }\r\n 3%, 18% {\r\n background: color-mix(in oklab, var(--violet) 8%, transparent);\r\n border-color: color-mix(in oklab, var(--violet) 28%, transparent);\r\n }\r\n 22%,100%{ background: transparent; border-color: transparent; }\r\n}\r\n\/* a barra de cada etapa se preenche durante o seu slide e fica preenchida:\r\n ao fim da volta o roteiro inteiro est\u00e1 cumprido, e recome\u00e7a *\/\r\n.is-in .m-slide .bar::after{ animation: barFill 12.5s var(--ease) infinite; }\r\n.is-in .m-slide .steps li:nth-child(2) .bar::after{ animation-delay: 2.5s; }\r\n.is-in .m-slide .steps li:nth-child(3) .bar::after{ animation-delay: 5s; }\r\n.is-in .m-slide .steps li:nth-child(4) .bar::after{ animation-delay: 7.5s; }\r\n.is-in .m-slide .steps li:nth-child(5) .bar::after{ animation-delay: 10s; }\r\n@keyframes barFill{\r\n 0% { transform: scaleX(0); opacity: 1; }\r\n 18% { transform: scaleX(1); opacity: 1; }\r\n 24%, 96% { transform: scaleX(1); opacity: .45; }\r\n 100% { transform: scaleX(1); opacity: 0; }\r\n}\r\n\r\n\/* estreito: o roteiro desce para baixo do palco *\/\r\n@media (max-width: 560px){\r\n .m-slide{ grid-template-columns: 1fr; justify-items: center; }\r\n .m-slide .board{ width: 100%; }\r\n}\r\n\r\n\/* ---- Ensaio: as refer\u00eancias de pose ---- *\/\r\n.m-shoot{ align-content: space-between; gap: .8rem; }\r\n.m-shoot .chips{ display: flex; gap: .35rem; flex-wrap: wrap; }\r\n.m-shoot .chips span{\r\n font-size: .66rem;\r\n padding: .3rem .6rem;\r\n border-radius: 999px;\r\n border: 1px solid var(--border);\r\n color: var(--text-3);\r\n}\r\n.m-shoot .chips .on{ background: var(--violet); border-color: var(--violet); color: #fff; }\r\n\/* a dire\u00e7\u00e3o visual em teste: o destaque passa de um clima para o outro *\/\r\n.is-in .m-shoot .chips span{ animation: chipCycle 7.5s var(--ease) infinite; }\r\n.is-in .m-shoot .chips span:nth-child(2){ animation-delay: 0s; }\r\n.is-in .m-shoot .chips span:nth-child(3){ animation-delay: 2.5s; }\r\n.is-in .m-shoot .chips span:nth-child(1){ animation-delay: 5s; }\r\n@keyframes chipCycle{\r\n 0%,30% { background: var(--violet); border-color: var(--violet); color: #fff; }\r\n 34%,100%{ background: transparent; border-color: var(--border); color: var(--text-3); }\r\n}\r\n.m-shoot .grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }\r\n\/* As refer\u00eancias acompanham o clima selecionado nos chips: ao trocar de\r\n \"Editorial\" para \"Clean\", as quatro fotos trocam de tratamento junto.\r\n Cada tile tem os tr\u00eas climas empilhados, em cross-fade. *\/\r\n.m-shoot .grid i{\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 3 \/ 4;\r\n border-radius: .5rem;\r\n opacity: 0;\r\n transform: scale(.85);\r\n background: linear-gradient(150deg, #EDE6DA, #C9B8A8);\r\n}\r\n.m-shoot .grid i::before,\r\n.m-shoot .grid i::after{ content: ''; position: absolute; inset: 0; opacity: 0; will-change: opacity; }\r\n\r\n.m-shoot .grid i:nth-child(2){ background: linear-gradient(150deg, #DCE7E3, #6B9C93); }\r\n.m-shoot .grid i:nth-child(3){ background: linear-gradient(150deg, #F3E2DA, #C97B63); }\r\n.m-shoot .grid i:nth-child(4){ background: linear-gradient(150deg, #D8DCDB, #2C3B38); }\r\n\r\n.m-shoot .grid i:nth-child(1)::before{ background: linear-gradient(150deg, #EFEAF6, #A895C9); }\r\n.m-shoot .grid i:nth-child(2)::before{ background: linear-gradient(150deg, #E4DEF2, #7C6BAA); }\r\n.m-shoot .grid i:nth-child(3)::before{ background: linear-gradient(150deg, #F6E8E6, #D9A6A0); }\r\n.m-shoot .grid i:nth-child(4)::before{ background: linear-gradient(150deg, #DAD6E4, #2A2440); }\r\n\r\n.m-shoot .grid i:nth-child(1)::after{ background: linear-gradient(150deg, #E6EEF2, #9DBAD0); }\r\n.m-shoot .grid i:nth-child(2)::after{ background: linear-gradient(150deg, #DCE9F1, #4F7FA6); }\r\n.m-shoot .grid i:nth-child(3)::after{ background: linear-gradient(150deg, #F6EADA, #E0A76B); }\r\n.m-shoot .grid i:nth-child(4)::after{ background: linear-gradient(150deg, #D3DBE0, #22323F); }\r\n\r\n.is-in .m-shoot .grid i{ animation: pop .5s var(--ease) forwards; }\r\n.m-shoot .grid i:nth-child(1){ animation-delay: .15s; }\r\n.m-shoot .grid i:nth-child(2){ animation-delay: .25s; }\r\n.m-shoot .grid i:nth-child(3){ animation-delay: .35s; }\r\n.m-shoot .grid i:nth-child(4){ animation-delay: .45s; }\r\n\r\n\/* mesmo compasso de 7,5s dos chips, com um respiro por tile *\/\r\n\/* O cross-fade de tr\u00eas camadas: a de baixo \u00e9 o pr\u00f3prio fundo do elemento, e\r\n estas duas se revezam por cima. Gradiente n\u00e3o interpola, ent\u00e3o trocar de\r\n identidade s\u00f3 \u00e9 poss\u00edvel assim. *\/\r\n@keyframes layerB{ 0%,29%{ opacity: 0 } 34%,62%{ opacity: 1 } 67%,100%{ opacity: 0 } }\r\n@keyframes layerC{ 0%,62%{ opacity: 0 } 67%,95%{ opacity: 1 } 100%{ opacity: 0 } }\r\n.is-in .m-shoot .grid i::before{ animation: layerB 7.5s var(--ease) infinite; }\r\n.is-in .m-shoot .grid i::after { animation: layerC 7.5s var(--ease) infinite; }\r\n.is-in .m-shoot .grid i:nth-child(2)::before,\r\n.is-in .m-shoot .grid i:nth-child(2)::after{ animation-delay: .08s; }\r\n.is-in .m-shoot .grid i:nth-child(3)::before,\r\n.is-in .m-shoot .grid i:nth-child(3)::after{ animation-delay: .16s; }\r\n.is-in .m-shoot .grid i:nth-child(4)::before,\r\n.is-in .m-shoot .grid i:nth-child(4)::after{ animation-delay: .24s; }\r\n\r\n@media (max-width: 900px){\r\n .bento{ grid-template-columns: repeat(2, 1fr); }\r\n .cell--tall{ grid-row: auto; }\r\n .cell--wide{ grid-column: span 2; }\r\n \/* s\u00e3o 7 cards: em duas colunas o \u00faltimo ficaria sozinho, ent\u00e3o ele ocupa a linha *\/\r\n .bento > .cell:last-child{ grid-column: span 2; }\r\n}\r\n@media (max-width: 620px){\r\n .bento{ grid-template-columns: 1fr; }\r\n .cell--wide,\r\n .bento > .cell:last-child{ grid-column: auto; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .m-bio .ln{ width: var(--w); }\r\n .m-pal .sw i, .m-link .b, .m-week .d.on,\r\n .m-dna .chat p, .m-dna .sheet > div{ opacity: 1; transform: none; }\r\n \/* os la\u00e7os ficam parados no estado de repouso, na primeira identidade *\/\r\n .m-pal .sw::after, .m-bio .ln:nth-child(3)::after{ display: none; }\r\n .m-pal .pairs b{ opacity: 0; }\r\n .m-pal .pairs b:first-child{ opacity: 1; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- carrossel *\/\r\n\r\n.marquee{\r\n position: relative;\r\n overflow: hidden;\r\n padding-block: 1rem;\r\n -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);\r\n mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);\r\n}\r\n.marquee-row{\r\n display: flex;\r\n gap: 1.1rem;\r\n width: max-content;\r\n animation: slide 64s linear infinite;\r\n}\r\n.marquee:hover .marquee-row{ animation-play-state: paused; }\r\n@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }\r\n\r\n.piece{\r\n flex: none;\r\n width: clamp(19rem, 30vw, 26rem);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n background: var(--card);\r\n box-shadow: 0 24px 50px -32px rgba(30,15,80,.4);\r\n}\r\n.piece img{ width: 100%; height: auto; }\r\n.piece figcaption{\r\n padding: .85rem 1.1rem 1rem;\r\n border-top: 1px solid var(--border);\r\n font-family: var(--font-mono);\r\n font-size: .68rem;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n}\r\n\r\n\/* ---------------------------------------------------------------- planos *\/\r\n\r\n\/* os cinco direitos da assinatura, antes dos cart\u00f5es *\/\r\n.perks{\r\n list-style: none;\r\n margin: 1.5rem auto 0;\r\n padding: 0;\r\n max-width: 46rem;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: .55rem;\r\n}\r\n.perks li{\r\n display: flex;\r\n align-items: center;\r\n gap: .5rem;\r\n font-size: .9rem;\r\n color: var(--text-2);\r\n padding: .5rem .95rem;\r\n border: 1px solid var(--border);\r\n border-radius: 999px;\r\n background: var(--card);\r\n}\r\n.perks li::before{\r\n content: '';\r\n flex: none;\r\n width: 5px;\r\n height: 5px;\r\n border-radius: 50%;\r\n background: var(--violet);\r\n}\r\n\r\n\/* Tr\u00eas cart\u00f5es lado a lado: a compara\u00e7\u00e3o acontece de relance, sem clique.\r\n O destaque do anual vem de escala e cor, n\u00e3o de um segundo layout. *\/\r\n\/* align-items padr\u00e3o (stretch) + o mesmo padding nos tr\u00eas: a altura \u00e9\r\n ditada pelo cart\u00e3o mais alto e os CTAs caem na mesma linha. *\/\r\n.plans{\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1rem;\r\n max-width: 66rem;\r\n margin-inline: auto;\r\n padding-top: .9rem; \/* espa\u00e7o para a fita, que monta sobre a borda *\/\r\n}\r\n\r\n.plan{\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 2rem 1.7rem 1.8rem;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-lg);\r\n background: var(--card);\r\n text-align: left;\r\n transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);\r\n}\r\n.plan:hover{\r\n border-color: color-mix(in oklab, var(--violet) 32%, var(--border));\r\n box-shadow: 0 26px 55px -34px rgba(30,15,80,.45);\r\n transform: translateY(-2px);\r\n}\r\n\r\n\/* O anual se destaca por cor e material, n\u00e3o por tamanho: mesma caixa dos\r\n outros, mas \u00e9 o \u00fanico plano feito de vidro. O aro herda violeta no lugar do\r\n cinza, ent\u00e3o a luz que corre pela borda sai tingida da marca. *\/\r\n\/* especificidade dupla de prop\u00f3sito: .glass--solid vem depois no arquivo e\r\n levaria o fundo tingido embora *\/\r\n.plans .plan--featured{\r\n border-color: transparent;\r\n --glass-rim-mid: color-mix(in oklab, var(--violet) 62%, transparent);\r\n --glass-rim-shade: color-mix(in oklab, var(--violet) 22%, transparent);\r\n --glass-shadow: 0 34px 74px -40px color-mix(in oklab, var(--violet) 60%, transparent);\r\n background-color: color-mix(in oklab, var(--violet) 9%, var(--card));\r\n}\r\n.plan--featured:hover{\r\n --glass-shadow: 0 40px 84px -38px color-mix(in oklab, var(--violet) 70%, transparent);\r\n \/* .plan:hover troca a sombra inteira; aqui a parede de vidro \u00e9 remontada *\/\r\n box-shadow: var(--glass-wall), var(--glass-shadow);\r\n}\r\n\r\n.ribbon{\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n translate: -50% -50%;\r\n white-space: nowrap;\r\n font-family: var(--font-mono);\r\n font-size: .62rem;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n padding: .38rem .8rem;\r\n border-radius: 999px;\r\n background: var(--violet);\r\n color: #fff;\r\n box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--violet) 80%, transparent);\r\n}\r\n\r\n.plan-name{\r\n font-family: var(--font-display);\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n letter-spacing: -.015em;\r\n margin: 0 0 .25rem;\r\n}\r\n.plan-sub{ font-size: .88rem; color: var(--text-3); margin: 0 0 1.5rem; }\r\n\r\n\/* o pre\u00e7o antigo s\u00f3 aparece depois que a contagem termina *\/\r\n.was{\r\n font-size: .86rem;\r\n color: var(--text-3);\r\n margin: 0 0 .2rem;\r\n min-height: 1.35em;\r\n opacity: 0;\r\n transform: translateY(4px);\r\n transition: opacity .5s var(--ease), transform .5s var(--ease);\r\n}\r\n.plan.is-cut .was{ opacity: 1; transform: none; }\r\n.was s{ text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in oklab, var(--violet) 70%, transparent); }\r\n\r\n.price{\r\n display: flex;\r\n align-items: baseline;\r\n gap: .28rem;\r\n font-family: var(--font-display);\r\n line-height: 1;\r\n margin-bottom: .45rem;\r\n}\r\n.price .cur{ font-size: 1.35rem; color: var(--text-2); }\r\n.price .val{\r\n font-size: clamp(3rem, 5.4vw, 4rem);\r\n font-weight: 600;\r\n letter-spacing: -.03em;\r\n font-variant-numeric: tabular-nums;\r\n}\r\n.plan--featured .price .val{ color: var(--violet); }\r\n.plan .per{ font-size: .86rem; color: var(--text-2); margin-bottom: 1.1rem; }\r\n\r\n.plan .save{\r\n align-self: flex-start;\r\n font-family: var(--font-mono);\r\n font-size: .66rem;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: var(--success);\r\n border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);\r\n background: color-mix(in oklab, var(--success) 8%, transparent);\r\n border-radius: 999px;\r\n padding: .38rem .8rem;\r\n margin: 0 0 1.6rem;\r\n opacity: 0;\r\n transform: translateY(6px) scale(.94);\r\n transition: opacity .45s var(--ease), transform .45s var(--ease);\r\n}\r\n.plan.is-cut .save{ opacity: 1; transform: none; }\r\n.plan .save[hidden]{ visibility: hidden; }\r\n\r\n.plan ul{\r\n list-style: none;\r\n margin: 0 0 1.7rem;\r\n padding: 0;\r\n display: grid;\r\n gap: .7rem;\r\n}\r\n.plan li{\r\n display: flex;\r\n gap: .65rem;\r\n align-items: flex-start;\r\n font-size: .92rem;\r\n color: var(--text-2);\r\n}\r\n.plan li svg{ flex: none; margin-top: .22rem; color: var(--violet); }\r\n.plan .btn{ margin-top: auto; }\r\n.plan .fine{ font-size: .8rem; color: var(--text-3); margin-top: .85rem; text-align: center; }\r\n\r\n@media (max-width: 940px){\r\n .plans{ grid-template-columns: 1fr; max-width: 26rem; gap: 1.6rem; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .was, .plan .save{ opacity: 1; transform: none; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- FAQ *\/\r\n\r\n.faq{ max-width: var(--maxw-text); margin-inline: auto; }\r\n.faq details{\r\n border-bottom: 1px solid var(--border);\r\n}\r\n.faq summary{\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 1.5rem;\r\n padding: 1.35rem 0;\r\n font-family: var(--font-display);\r\n font-size: 1.08rem;\r\n font-weight: 600;\r\n letter-spacing: -.01em;\r\n cursor: pointer;\r\n list-style: none;\r\n}\r\n.faq summary::-webkit-details-marker{ display: none; }\r\n.faq summary::after{\r\n content: '';\r\n flex: none;\r\n width: 11px;\r\n height: 11px;\r\n margin-top: .45rem;\r\n border-right: 1.5px solid var(--text-3);\r\n border-bottom: 1.5px solid var(--text-3);\r\n rotate: 45deg;\r\n transition: rotate .3s var(--ease), border-color .3s var(--ease);\r\n}\r\n.faq details[open] summary::after{ rotate: -135deg; border-color: var(--violet); }\r\n.faq .answer{ padding-bottom: 1.5rem; color: var(--text-2); max-width: 38rem; }\r\n\r\n\/* ---------------------------------------------------------------- Camila *\/\r\n\r\n.author{\r\n display: grid;\r\n grid-template-columns: 20rem 1fr;\r\n gap: clamp(2rem, 5vw, 4rem);\r\n align-items: center;\r\n}\r\n.author-photo{\r\n aspect-ratio: 4 \/ 5;\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n display: grid;\r\n place-content: center;\r\n text-align: center;\r\n color: var(--text-3);\r\n font-family: var(--font-mono);\r\n font-size: .7rem;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n}\r\n.author-photo img{ width: 100%; height: 100%; object-fit: cover; }\r\n\r\n@media (max-width: 800px){\r\n .author{ grid-template-columns: 1fr; }\r\n .author-photo{ max-width: 18rem; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------- CTA final *\/\r\n\r\n.closer{\r\n text-align: center;\r\n padding-block: clamp(4.5rem, 9vw, 8rem);\r\n background: var(--ink);\r\n color: oklch(97.5% .008 286);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.closer::before{\r\n content: '';\r\n position: absolute;\r\n inset: -40% 0 auto 0;\r\n height: 140%;\r\n background:\r\n radial-gradient(50% 40% at 50% 40%, color-mix(in oklab, var(--violet) 45%, transparent), transparent 70%);\r\n pointer-events: none;\r\n}\r\n.closer > *{ position: relative; }\r\n.closer h2{ margin-bottom: 1.2rem; }\r\n.closer p{ color: oklch(78% .02 287); max-width: 34rem; margin-inline: auto; }\r\n\r\n\/* ---------------------------------------------------------------- rodap\u00e9 *\/\r\n\r\n.site-footer{\r\n padding-block: 3rem;\r\n border-top: 1px solid var(--border);\r\n font-size: .88rem;\r\n color: var(--text-3);\r\n}\r\n.site-footer .wrap{\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 1.25rem;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.site-footer a{ text-decoration: none; }\r\n.site-footer a:hover{ color: var(--text-2); }\r\n\r\n\/* ---------------------------------------------------------------- revela\u00e7\u00e3o *\/\r\n\r\n\/* O elemento emerge de um desfoque, como se entrasse em foco.\r\n O atraso vem do JS via --d, ent\u00e3o funciona com qualquer quantidade. *\/\r\n.reveal{\r\n opacity: 0;\r\n transform: translateY(26px) scale(.985);\r\n filter: blur(9px);\r\n transition:\r\n opacity .85s var(--ease) var(--d, 0s),\r\n transform .85s var(--ease) var(--d, 0s),\r\n filter .85s var(--ease) var(--d, 0s);\r\n will-change: opacity, transform, filter;\r\n}\r\n.reveal.is-in{\r\n opacity: 1;\r\n transform: none;\r\n filter: none;\r\n}\r\n.reveal.is-in{ will-change: auto; }\r\n\r\n\/* T\u00edtulos entram palavra a palavra. *\/\r\n.split .w{\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(.5em) rotate(1.2deg);\r\n filter: blur(7px);\r\n transition:\r\n opacity .7s var(--ease) var(--d, 0s),\r\n transform .7s var(--ease) var(--d, 0s),\r\n filter .7s var(--ease) var(--d, 0s);\r\n}\r\n.split.is-in .w{ opacity: 1; transform: none; filter: none; }\r\n\r\n\/* Um leve deslocamento com o scroll d\u00e1 profundidade \u00e0s imagens. *\/\r\n.par{ will-change: transform; }\r\n\r\n\/* ---------------------------------------------------------------- fundo t\u00e9cnico *\/\r\n\r\n\/* o header fica de fora: ele tem posicionamento pr\u00f3prio (fixed, z-index 50)\r\n e esta regra o derrubava de volta para relative *\/\r\nmain, .site-footer{ position: relative; z-index: 1; }\r\n\r\n\/* marcas de registro nos limites das se\u00e7\u00f5es *\/\r\n.rule{\r\n position: relative;\r\n height: 1px;\r\n background: var(--border);\r\n max-width: var(--maxw);\r\n margin-inline: auto;\r\n}\r\n.rule::before,\r\n.rule::after{\r\n content: '';\r\n position: absolute;\r\n top: -5px;\r\n width: 1px;\r\n height: 11px;\r\n background: var(--text-3);\r\n opacity: .55;\r\n}\r\n.rule::before{ left: 0; }\r\n.rule::after{ right: 0; }\r\n\r\n\/* ---------------------------------------------------------------- n\u00fameros *\/\r\n\r\n.stats{\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));\r\n gap: 1px;\r\n background: var(--border);\r\n border-block: 1px solid var(--border);\r\n}\r\n.stat{\r\n background: var(--bg);\r\n padding: 2rem 1.5rem;\r\n text-align: center;\r\n}\r\n.stat .num{\r\n font-family: var(--font-display);\r\n font-size: clamp(2.4rem, 5vw, 3.4rem);\r\n font-weight: 600;\r\n letter-spacing: -.03em;\r\n line-height: 1;\r\n display: block;\r\n color: var(--text);\r\n}\r\n.stat .lab{\r\n display: block;\r\n margin-top: .6rem;\r\n font-family: var(--font-mono);\r\n font-size: .68rem;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n color: var(--text-3);\r\n}\r\n\r\n\/* ---------------------------------------------------------------- progresso *\/\r\n\r\n.progress{\r\n position: fixed;\r\n top: 0; left: 0;\r\n height: 2px;\r\n width: 100%;\r\n transform-origin: 0 50%;\r\n transform: scaleX(0);\r\n background: linear-gradient(90deg, var(--violet), #F2B8D8, #8FD8E8);\r\n z-index: 60;\r\n pointer-events: none;\r\n}\r\n\r\n\/* ---------------------------------------------------------------- brilho no cursor *\/\r\n\r\n.ia{ --mx: 50%; --my: 50%; }\r\n.ia::after{\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n pointer-events: none;\r\n background: radial-gradient(\r\n 16rem 16rem at var(--mx) var(--my),\r\n color-mix(in oklab, var(--ray, var(--violet)) 20%, transparent),\r\n transparent 65%\r\n );\r\n transition: opacity .35s var(--ease);\r\n}\r\n.ia:hover::after{ opacity: 1; }\r\n\r\n\/* =========================================================================\r\n O vidro\r\n Uma receita s\u00f3, em duas espessuras. Aparece em pe\u00e7as que flutuam sobre\r\n outra coisa \u2014 nunca em blocos de texto corrido, onde n\u00e3o haveria nada\r\n atr\u00e1s para o material distorcer.\r\n\r\n S\u00e3o tr\u00eas camadas, e cada uma responde por um fen\u00f4meno diferente:\r\n\r\n o elemento a massa transl\u00facida e a espessura vista por dentro\r\n ::before o aro \u2014 a luz dando a volta pela borda\r\n ::after o reflexo especular e o brilho da luz que atravessou\r\n\r\n O aro \u00e9 o que separa vidro de borr\u00e3o. Ele n\u00e3o \u00e9 uniforme: acende no\r\n topo-esquerdo, apaga nas laterais, e reacende mais fraco embaixo \u00e0 direita,\r\n onde a luz sai depois de atravessar a espessura. Um `mask` de dois ret\u00e2ngulos\r\n em `exclude` recorta o gradiente c\u00f4nico num anel de 1px \u2014 a borda inteira \u00e9\r\n pintada, mas s\u00f3 o contorno sobrevive.\r\n ========================================================================= *\/\r\n\r\n\/* `.faq details[open]` entra aqui em vez de levar a classe no HTML: o vidro s\u00f3\r\n existe enquanto a pergunta est\u00e1 aberta, e isso o CSS sabe sozinho. *\/\r\n.glass,\r\n.faq details[open]{\r\n position: relative;\r\n isolation: isolate;\r\n \/* o reflexo mora no pr\u00f3prio background, em camadas sobre a massa: um ponto\r\n concentrado no alto \u00e0 esquerda e o brilho fraco da luz que atravessou,\r\n saindo embaixo \u00e0 direita. Concentrado, n\u00e3o uma lavagem branca na pe\u00e7a\r\n inteira \u2014 \u00e9 isso que l\u00ea como superf\u00edcie polida em vez de neblina. *\/\r\n background:\r\n radial-gradient(38% 62% at 14% 6%, var(--glass-spec), transparent 68%),\r\n radial-gradient(56% 120% at 88% 108%,\r\n color-mix(in oklab, var(--glass-spec) 42%, transparent), transparent 62%),\r\n var(--glass);\r\n box-shadow: var(--glass-wall), var(--glass-shadow);\r\n}\r\n\r\n\/* o aro *\/\r\n.glass::before,\r\n.faq details[open]::before{\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n border-radius: inherit;\r\n padding: 1px; \/* a espessura do aro *\/\r\n pointer-events: none;\r\n background: conic-gradient(from var(--rim-from, 0deg) at 50% 50%,\r\n var(--glass-rim-mid) 0deg,\r\n var(--glass-rim-shade) 62deg,\r\n var(--glass-rim-mid) 118deg,\r\n var(--glass-rim-bounce) 148deg,\r\n var(--glass-rim-mid) 186deg,\r\n var(--glass-rim-shade) 242deg,\r\n var(--glass-rim-lit) 318deg,\r\n var(--glass-rim-mid) 360deg);\r\n -webkit-mask:\r\n linear-gradient(#000 0 0) content-box,\r\n linear-gradient(#000 0 0);\r\n mask:\r\n linear-gradient(#000 0 0) content-box,\r\n linear-gradient(#000 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n}\r\n\r\n\/* o reflexo: um ponto concentrado no alto \u00e0 esquerda, n\u00e3o uma lavagem branca\r\n sobre a pe\u00e7a inteira \u2014 \u00e9 o que d\u00e1 a leitura de superf\u00edcie polida *\/\r\n\/* --- o bisel: a espessura vista de dentro ---\r\n Perto da borda a luz atravessa o material em diagonal, ent\u00e3o a moldura\r\n interna clareia de um lado e escurece do outro. Isso \u00e9 o que d\u00e1 volume \u00e0\r\n pe\u00e7a \u2014 sem ele o vidro vira um adesivo transl\u00facido.\r\n\r\n A refra\u00e7\u00e3o literal seria um anel com `backdrop-filter` pr\u00f3prio sobre o do\r\n elemento, para o fundo entrar deformado pelas beiradas. Fica melhor e custa\r\n caro: dois backdrops aninhados num elemento `fixed` mandam o compositor\r\n filtrar a viewport inteira duas vezes por quadro, e a barra \u00e9 justamente a\r\n pe\u00e7a que fica em cena a p\u00e1gina toda. O bisel abaixo \u00e9 gradiente, custa uma\r\n pintura comum, e vale para todas as superf\u00edcies de vidro \u2014 n\u00e3o s\u00f3 para as\r\n duas que t\u00eam backdrop. *\/\r\n.glass::after,\r\n.faq details[open]::after{\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n border-radius: inherit;\r\n pointer-events: none;\r\n background:\r\n linear-gradient(150deg,\r\n color-mix(in oklab, var(--glass-spec) 85%, transparent) 0,\r\n transparent 10px),\r\n linear-gradient(330deg,\r\n color-mix(in oklab, var(--glass-spec) 45%, transparent) 0,\r\n transparent 12px);\r\n opacity: .9;\r\n}\r\n\r\n\/* As duas camadas v\u00e3o para tr\u00e1s do conte\u00fado em vez de o conte\u00fado ser\r\n empurrado para a frente. `isolation: isolate` no elemento prende o\r\n `z-index: -1` dentro dele: as camadas ficam acima do pr\u00f3prio fundo e abaixo\r\n de tudo que est\u00e1 no fluxo, sem que nenhum filho precise ser tocado.\r\n\r\n A alternativa \u2014 `.glass > * { position: relative; z-index: 2 }` \u2014 quebrava\r\n qualquer filho posicionado: a fita \"Mais escolhido\" do plano anual perdia o\r\n `position: absolute` e virava uma faixa esticada no topo do card. *\/\r\n\r\n\/* --- espessura cheia: leva backdrop-filter ---\r\n S\u00f3 onde h\u00e1 mesmo conte\u00fado passando atr\u00e1s. Um elemento desfocando o fundo\r\n obriga o compositor a repintar a \u00e1rea a cada quadro; quatro deles sobre\r\n conte\u00fado animado travam o renderizador \u2014 foi medido. Por isso o backdrop\r\n \u00e9 privil\u00e9gio de duas pe\u00e7as, e o resto do site usa a mesma linguagem de aro\r\n e reflexo ao custo de uma pintura comum.\r\n\r\n Nota: daqui para baixo as sobrescritas usam `background-color`, nunca o\r\n atalho `background` \u2014 o atalho zeraria os gradientes do reflexo definidos\r\n acima e a pe\u00e7a voltaria a ser um ret\u00e2ngulo fosco. *\/\r\n.glass--deep{\r\n -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.04);\r\n backdrop-filter: blur(18px) saturate(1.9) brightness(1.04);\r\n}\r\n@supports not (backdrop-filter: blur(1px)){\r\n .glass--deep{ background-color: color-mix(in oklab, var(--bg) 88%, transparent); }\r\n}\r\n\r\n\/* --- sobre superf\u00edcie opaca ---\r\n Sem fundo para desfocar, a massa precisa ser quase s\u00f3lida ou o texto perde\r\n contraste. O aro e o reflexo continuam id\u00eanticos: \u00e9 o mesmo material. *\/\r\n.glass--solid{\r\n background-color: color-mix(in oklab, var(--card) 92%, transparent);\r\n}\r\n\r\n\/* --- o vidro reage ao cursor ---\r\n A luz d\u00e1 uma volta pelo aro. Girar o ::before rotacionaria junto a m\u00e1scara\r\n que o recorta, e o anel deixaria de acompanhar a borda em qualquer pe\u00e7a que\r\n n\u00e3o seja quadrada. Quem gira \u00e9 o gradiente, pelo \u00e2ngulo registrado abaixo \u2014\r\n e registrado \u00e9 o ponto: sem `@property` o navegador trata `30deg` como\r\n palavra e a transi\u00e7\u00e3o vira um corte seco. *\/\r\n@property --rim-from{\r\n syntax: '<angle>';\r\n inherits: true;\r\n initial-value: 0deg;\r\n}\r\n.glass--live{\r\n --rim-from: 0deg;\r\n transition: --rim-from .9s var(--ease), box-shadow .4s var(--ease);\r\n}\r\n.glass--live:hover,\r\n.glass--live:focus-within{ --rim-from: 132deg; }\r\n\r\n\/* A faixa de n\u00fameros \u00e9 uma l\u00e2mina de vidro: larga, fina, atravessada pelas\r\n divis\u00f3rias. Sem backdrop-filter \u2014 \u00e9 \u00e1rea grande e o fundo atr\u00e1s \u00e9 liso, o\r\n desfoque s\u00f3 custaria GPU sem mostrar nada. *\/\r\n.stats{\r\n border-radius: var(--radius-lg);\r\n gap: 0;\r\n}\r\n.stats .stat{ background: transparent; padding-block: clamp(1.4rem, 3vw, 2rem); }\r\n.stats .stat + .stat{ border-left: 1px solid var(--border); }\r\n@media (max-width: 700px){\r\n .stats .stat + .stat{ border-left: 0; border-top: 1px solid var(--border); }\r\n}\r\n\/* O acorde\u00e3o aberto ganha superf\u00edcie; o fechado continua sendo s\u00f3 uma linha.\r\n Abrir uma pergunta materializa uma l\u00e2mina de vidro sobre a lista \u2014 \u00e9 a\r\n resposta que ganha corpo, n\u00e3o a lista que ganha caixas. *\/\r\n.faq details[open]{\r\n border-radius: var(--radius);\r\n border-color: transparent;\r\n background-color: color-mix(in oklab, var(--violet) 5%, var(--card));\r\n padding-inline: 1.15rem;\r\n margin-block: .4rem;\r\n}\r\n.faq details[open] summary{ padding-top: 1.15rem; }\r\n\r\n.sr-only{\r\n position: absolute;\r\n width: 1px; height: 1px;\r\n padding: 0; margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0 0 0 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\n\/* ---------------------------------------------------------------- movimento reduzido *\/\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n html{ scroll-behavior: auto; }\r\n *, *::before, *::after{\r\n animation-duration: .001ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: .001ms !important;\r\n }\r\n .reveal{ opacity: 1; transform: none; filter: none; }\r\n .split .w{ opacity: 1; transform: none; filter: none; }\r\n .par{ transform: none !important; }\r\n .marquee-row{ animation: none; }\r\n .scroll-hint::before{ animation: none; opacity: .6; }\r\n \/* o circuito fica aceso e parado: sem pulso correndo, sem n\u00f3s respirando *\/\r\n .circuit .pulses{ display: none; }\r\n .circuit .nodes circle{ animation: none; opacity: .9; transform: none; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body data-act=\"night\">\r\n\r\n<div class=\"progress\" aria-hidden=\"true\"><\/div>\r\n\r\n<!-- ============================================================ cabe\u00e7alho -->\r\n<header class=\"site-header\">\r\n <div class=\"wrap glass glass--deep glass--live\">\r\n <a class=\"logo\" href=\"#topo\" aria-label=\"Consult\u00f3rio Inteligente, in\u00edcio\">\r\n <img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/simbolo.webp\" alt=\"\" width=\"34\" height=\"34\" decoding=\"async\">\r\n <span class=\"logo-word\">Consult\u00f3rio <i>Inteligente<\/i><\/span>\r\n <\/a>\r\n\r\n <nav class=\"nav\" aria-label=\"Navega\u00e7\u00e3o principal\">\r\n <a href=\"#como-funciona\">Como funciona<\/a>\r\n <a href=\"#ias\">As IAs<\/a>\r\n <a href=\"#comparativo\">Comparativo<\/a>\r\n <a href=\"#planos\">Planos<\/a>\r\n <\/nav>\r\n\r\n <a class=\"btn btn--primary header-cta\" href=\"#planos\">Assinar<\/a>\r\n <\/div>\r\n<\/header>\r\n\r\n<main id=\"topo\">\r\n\r\n<!-- ==================================================== dobra 1 \u00b7 promessa -->\r\n<section class=\"hero\" id=\"hero\">\r\n <div class=\"hero-ground\" aria-hidden=\"true\"><\/div>\r\n\r\n <!-- O circuito: as trilhas ficam acesas em brasa e um pulso de luz corre\r\n por elas. A m\u00e1scara radial apaga tudo atr\u00e1s do t\u00edtulo. -->\r\n <svg class=\"circuit\" viewBox=\"0 0 1600 900\" preserveAspectRatio=\"xMidYMid slice\"\r\n aria-hidden=\"true\" focusable=\"false\">\r\n <g class=\"traces\">\r\n <path pathLength=\"100\" d=\"M0 120 H180 L260 200 H360\"\/>\r\n <path pathLength=\"100\" d=\"M0 300 H120 V420 H300\"\/>\r\n <path pathLength=\"100\" d=\"M0 560 H200 L280 480 H370\"\/>\r\n <path pathLength=\"100\" d=\"M0 770 H240 V660 H340\"\/>\r\n <path pathLength=\"100\" d=\"M60 900 V820 H220 L300 740\"\/>\r\n <path pathLength=\"100\" d=\"M1600 140 H1420 L1340 220 H1240\"\/>\r\n <path pathLength=\"100\" d=\"M1600 340 H1480 V460 H1300\"\/>\r\n <path pathLength=\"100\" d=\"M1600 600 H1400 L1320 520 H1230\"\/>\r\n <path pathLength=\"100\" d=\"M1600 800 H1360 V700 H1260\"\/>\r\n <path pathLength=\"100\" d=\"M1540 900 V800 H1380\"\/>\r\n <path pathLength=\"100\" d=\"M700 0 V90 H820\"\/>\r\n <path pathLength=\"100\" d=\"M900 900 V810 H780\"\/>\r\n <\/g>\r\n <g class=\"pulses\">\r\n <path pathLength=\"100\" style=\"--t:7.5s;--d:0s\" d=\"M0 120 H180 L260 200 H360\"\/>\r\n <path pathLength=\"100\" style=\"--t:9s;--d:-2.2s\" d=\"M0 300 H120 V420 H300\"\/>\r\n <path pathLength=\"100\" style=\"--t:8s;--d:-4.5s\" d=\"M0 560 H200 L280 480 H370\"\/>\r\n <path pathLength=\"100\" style=\"--t:10s;--d:-1.1s\" d=\"M0 770 H240 V660 H340\"\/>\r\n <path pathLength=\"100\" style=\"--t:8.5s;--d:-6s\" d=\"M60 900 V820 H220 L300 740\"\/>\r\n <path pathLength=\"100\" style=\"--t:9.5s;--d:-3.3s\" d=\"M1600 140 H1420 L1340 220 H1240\"\/>\r\n <path pathLength=\"100\" style=\"--t:7s;--d:-5.4s\" d=\"M1600 340 H1480 V460 H1300\"\/>\r\n <path pathLength=\"100\" style=\"--t:11s;--d:-.7s\" d=\"M1600 600 H1400 L1320 520 H1230\"\/>\r\n <path pathLength=\"100\" style=\"--t:8.2s;--d:-7.8s\" d=\"M1600 800 H1360 V700 H1260\"\/>\r\n <path pathLength=\"100\" style=\"--t:6.5s;--d:-2.9s\" d=\"M1540 900 V800 H1380\"\/>\r\n <path pathLength=\"100\" style=\"--t:9.8s;--d:-8.4s\" d=\"M700 0 V90 H820\"\/>\r\n <path pathLength=\"100\" style=\"--t:7.8s;--d:-4.1s\" d=\"M900 900 V810 H780\"\/>\r\n <\/g>\r\n <g class=\"nodes\">\r\n <circle cx=\"360\" cy=\"200\" r=\"5\" style=\"--d:0s\"\/>\r\n <circle cx=\"300\" cy=\"420\" r=\"5\" style=\"--d:-1.4s\"\/>\r\n <circle cx=\"370\" cy=\"480\" r=\"5\" style=\"--d:-2.8s\"\/>\r\n <circle cx=\"340\" cy=\"660\" r=\"5\" style=\"--d:-.6s\"\/>\r\n <circle cx=\"300\" cy=\"740\" r=\"5\" style=\"--d:-3.5s\"\/>\r\n <circle cx=\"1240\" cy=\"220\" r=\"5\" style=\"--d:-2.1s\"\/>\r\n <circle cx=\"1300\" cy=\"460\" r=\"5\" style=\"--d:-.9s\"\/>\r\n <circle cx=\"1230\" cy=\"520\" r=\"5\" style=\"--d:-3.1s\"\/>\r\n <circle cx=\"1260\" cy=\"700\" r=\"5\" style=\"--d:-1.7s\"\/>\r\n <circle cx=\"1380\" cy=\"800\" r=\"5\" style=\"--d:-2.5s\"\/>\r\n <circle cx=\"820\" cy=\"90\" r=\"5\" style=\"--d:-4.2s\"\/>\r\n <circle cx=\"780\" cy=\"810\" r=\"5\" style=\"--d:-3.8s\"\/>\r\n <\/g>\r\n <\/svg>\r\n\r\n <div class=\"hero-inner wrap\">\r\n <p class=\"badge glass glass--deep\">Primeiro sistema de Intelig\u00eancia Artificial por assinatura para psic\u00f3logos<\/p>\r\n\r\n <h1>A plataforma de IA para psic\u00f3logos que querem construir sua marca, se tornar <em>refer\u00eancia<\/em> e captar mais pacientes.<\/h1>\r\n\r\n <p class=\"lead\">\r\n Tenha acesso a um sistema de Intelig\u00eancias Artificiais que guia voc\u00ea em cada etapa\r\n da constru\u00e7\u00e3o da sua marca, do nicho \u00e0 produ\u00e7\u00e3o de conte\u00fado, e transforma suas\r\n respostas em estrat\u00e9gias e materiais prontos para aplicar.\r\n <\/p>\r\n\r\n <a class=\"btn btn--light\" href=\"#planos\">\r\n Acessar o meu sistema <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n <\/a>\r\n <p class=\"cta-note\">Comece a criar em poucos minutos.<\/p>\r\n <\/div>\r\n\r\n <p class=\"scroll-hint\" aria-hidden=\"true\">Role<\/p>\r\n<\/section>\r\n\r\n<!-- =============================================== dobra 2 \u00b7 veja na pr\u00e1tica -->\r\n<section class=\"band\" id=\"como-funciona\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head section-head--center reveal\">\r\n <p class=\"eyebrow\">Veja como funciona<\/p>\r\n <h2>Entenda como o Consult\u00f3rio Inteligente funciona <em>na pr\u00e1tica<\/em><\/h2>\r\n <p class=\"lead\" style=\"margin-inline:auto\">\r\n Voc\u00ea vai entender como a plataforma conduz cada etapa da constru\u00e7\u00e3o da sua marca\r\n e transforma as suas respostas em estrat\u00e9gias, conte\u00fados e materiais prontos para usar.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"video-frame reveal\">\r\n <video\r\n src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/tour.mp4\"\r\n poster=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/tour-poster.webp\"\r\n muted loop playsinline controls preload=\"none\"\r\n aria-label=\"Tour pela plataforma: as 16 IAs nas quatro fases, a identidade de marca gerada e a bio pronta.\">\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================== n\u00fameros, entre a 2 e a 3 -->\r\n<section class=\"band--tight\">\r\n <div class=\"wrap\">\r\n <div class=\"stats glass glass--solid\">\r\n <div class=\"stat reveal\"><span class=\"num\" data-to=\"16\">16<\/span><span class=\"lab\">IAs especialistas<\/span><\/div>\r\n <div class=\"stat reveal\"><span class=\"num\" data-to=\"4\">4<\/span><span class=\"lab\">fases da jornada<\/span><\/div>\r\n <div class=\"stat reveal\"><span class=\"num\" data-to=\"29\">29<\/span><span class=\"lab\">perguntas no diagn\u00f3stico<\/span><\/div>\r\n <div class=\"stat reveal\"><span class=\"num\" data-to=\"1\">1<\/span><span class=\"lab\">assinatura, tudo incluso<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ========================================================= dobra 3 \u00b7 dor -->\r\n<span data-act-start=\"dawn\" aria-hidden=\"true\"><\/span>\r\n<section class=\"band\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">O problema<\/p>\r\n <h2>Vender o pr\u00f3prio trabalho n\u00e3o deveria ser <em>t\u00e3o dif\u00edcil<\/em>.<\/h2>\r\n <p class=\"lead\">\r\n A maioria dos psic\u00f3logos sabe atender muito bem, mas trava quando precisa\r\n transformar esse conhecimento em uma comunica\u00e7\u00e3o que transmita confian\u00e7a\r\n para os pacientes. O Consult\u00f3rio Inteligente foi criado para quem:\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pains\">\r\n <!-- Um \u00edcone por dor: alvo, fa\u00edsca, conversa, rel\u00f3gio, etiqueta, cora\u00e7\u00e3o, curva. -->\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><circle cx=\"8\" cy=\"8\" r=\"5.9\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><circle cx=\"8\" cy=\"8\" r=\"2.2\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg><\/span>\r\n <span>Ainda n\u00e3o encontrou um nicho que fa\u00e7a sentido para sua trajet\u00f3ria.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2.2 9.3 6l3.8 1.3L9.3 8.6 8 12.4 6.7 8.6 2.9 7.3 6.7 6z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <span>Tem dificuldade para mostrar o diferencial do pr\u00f3prio trabalho.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M13.5 7.6c0 2.6-2.5 4.7-5.5 4.7-.6 0-1.2-.1-1.7-.2L3 13.5l1-2.5C3.1 10.1 2.5 8.9 2.5 7.6 2.5 5 5 2.9 8 2.9s5.5 2.1 5.5 4.7Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <span>N\u00e3o sabe como se posicionar nas redes sociais.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><circle cx=\"8\" cy=\"8\" r=\"5.9\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><path d=\"M8 4.5V8l2.5 1.6\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <span>Gasta horas tentando criar conte\u00fado.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M7.6 2.4H3.4a1 1 0 0 0-1 1v4.2c0 .3.1.5.3.7l5.4 5.4c.4.4 1 .4 1.4 0l4.2-4.2c.4-.4.4-1 0-1.4L8.3 2.7a1 1 0 0 0-.7-.3Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/><circle cx=\"5.5\" cy=\"5.5\" r=\"1\" fill=\"currentColor\"\/><\/svg><\/span>\r\n <span>Quer cobrar um valor justo com mais seguran\u00e7a.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 13.2S2.6 10 2.6 6.4A2.9 2.9 0 0 1 8 4.9a2.9 2.9 0 0 1 5.4 1.5c0 3.6-5.4 6.8-5.4 6.8Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <span>Deseja ser lembrado e escolhido pelos pacientes certos.<\/span>\r\n <\/div>\r\n <div class=\"pain reveal\">\r\n <span class=\"pain-ico\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M2.5 11.2 6 7.6l2.4 2.4 5.1-5.3M10.5 4.7h3.1v3.1\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <span>Quer captar mais pacientes com leveza.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"margin-top:3rem;text-align:center\" class=\"reveal\">\r\n <a class=\"btn btn--primary btn--lg\" href=\"#planos\">Quero tudo isso <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ===================================================== dobra 4 \u00b7 a jornada -->\r\n<section class=\"band\" style=\"background:var(--surface)\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">Sobre o Consult\u00f3rio Inteligente<\/p>\r\n <h2>Um sistema completo para desenvolver o seu posicionamento <em>do in\u00edcio ao fim<\/em>.<\/h2>\r\n <p class=\"lead\">\r\n Ao assinar, voc\u00ea come\u00e7a por um diagn\u00f3stico de <strong>29 perguntas em conversa<\/strong>\r\n e a pr\u00f3pria plataforma organiza a sua jornada. \u00c9 ele que destrava as IAs da primeira\r\n fase e treina todas as outras \u2014 por isso cada entrega sai com a sua cara, e n\u00e3o com\r\n cara de rob\u00f4.\r\n <\/p>\r\n <p class=\"lead\">\r\n O sistema conduz voc\u00ea pela sequ\u00eancia ideal de Intelig\u00eancias Artificiais para que\r\n voc\u00ea construa uma base s\u00f3lida antes de avan\u00e7ar para a etapa seguinte.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"track\" role=\"tablist\" aria-label=\"As quatro fases\">\r\n <button role=\"tab\" aria-selected=\"true\" id=\"tab-1\" aria-controls=\"fase-1\"><span class=\"n\">Fase 1<\/span>Diagn\u00f3stico<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" id=\"tab-2\" aria-controls=\"fase-2\"><span class=\"n\">Fase 2<\/span>Posicionamento<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" id=\"tab-3\" aria-controls=\"fase-3\"><span class=\"n\">Fase 3<\/span>Autoridade<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" id=\"tab-4\" aria-controls=\"fase-4\"><span class=\"n\">Fase 4<\/span>Capta\u00e7\u00e3o<\/button>\r\n <\/div>\r\n\r\n <div class=\"stage-panel is-active\" id=\"fase-1\" role=\"tabpanel\" aria-labelledby=\"tab-1\">\r\n <div class=\"stage\">\r\n <div>\r\n <h3>Primeiro, o sistema entende quem voc\u00ea \u00e9.<\/h3>\r\n <p>\r\n Voc\u00ea conta sua trajet\u00f3ria, seu jeito de atender e o momento do seu consult\u00f3rio.\r\n A partir da\u00ed a plataforma define o recorte estrat\u00e9gico: qual nicho \u00e9 mais rent\u00e1vel\r\n e coerente com a sua hist\u00f3ria, quem \u00e9 a paciente que voc\u00ea quer atrair, e quanto\r\n o seu trabalho deveria valer.\r\n <\/p>\r\n <p class=\"cta-note\">4 IAs nesta fase.<\/p>\r\n <\/div>\r\n <div class=\"stage-shot scene s-chat\" aria-hidden=\"true\">\r\n <div class=\"meta\"><span>Diagn\u00f3stico<\/span><span>12 de 29<\/span><\/div>\r\n <div class=\"bar\"><i><\/i><\/div>\r\n <p class=\"msg\">Conte sua trajet\u00f3ria: onde se formou e o que te levou \u00e0 abordagem que usa hoje.<\/p>\r\n <p class=\"msg me\">Me formei em 2018, TCC. Percebi que os casos de ansiedade eram onde eu via resultado mais consistente.<\/p>\r\n <p class=\"msg\">O que faz o seu jeito de atender ser diferente? D\u00ea um exemplo pr\u00e1tico de uma sess\u00e3o.<\/p>\r\n <span class=\"dots\"><b><\/b><b><\/b><b><\/b><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stage-panel\" id=\"fase-2\" role=\"tabpanel\" aria-labelledby=\"tab-2\">\r\n <div class=\"stage\">\r\n <div>\r\n <h3>Depois, sua marca ganha forma.<\/h3>\r\n <p>\r\n Cores, tipografia, tom de voz e arqu\u00e9tipo saem prontos e coerentes entre si.\r\n Na sequ\u00eancia, a bio do Instagram e uma p\u00e1gina de link da bio j\u00e1 nas suas cores,\r\n com HTML pronto para hospedar. Nada de escolher fonte no Canva por duas horas.\r\n <\/p>\r\n <p class=\"cta-note\">4 IAs nesta fase.<\/p>\r\n <\/div>\r\n <div class=\"stage-shot scene s-brand\" aria-hidden=\"true\">\r\n <div class=\"row\">\r\n <span class=\"k\">Cores<\/span>\r\n <span class=\"dots5\"><i style=\"background:#6B9C93\"><\/i><i style=\"background:#EDE6DA\"><\/i><i style=\"background:#2C3B38\"><\/i><i style=\"background:#FAF8F4;border:1px solid #e5e5e5\"><\/i><i style=\"background:#C97B63\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"row\">\r\n <span class=\"k\">Tipografia<\/span>\r\n <span class=\"serif\">Aa <span style=\"font-family:var(--font-ui);font-size:.8rem;color:var(--text-3)\">Lora \u00b7 Karla<\/span><\/span>\r\n <\/div>\r\n <div class=\"row\">\r\n <span class=\"k\">Tom de voz<\/span>\r\n <span class=\"v\">Pr\u00e1tica e estrat\u00e9gica<\/span>\r\n <\/div>\r\n <div class=\"row\">\r\n <span class=\"k\">Arqu\u00e9tipo<\/span>\r\n <span class=\"v\">S\u00e1bio<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stage-panel\" id=\"fase-3\" role=\"tabpanel\" aria-labelledby=\"tab-3\">\r\n <div class=\"stage\">\r\n <div>\r\n <h3>Ent\u00e3o, o conte\u00fado passa a ser consistente.<\/h3>\r\n <p>\r\n Um formato de conte\u00fado que s\u00f3 voc\u00ea faz, pilares e calend\u00e1rio editorial,\r\n roteiros de reels com gancho e CTA, carross\u00e9is escritos slide a slide,\r\n sequ\u00eancias de stories e adapta\u00e7\u00e3o para o TikTok. Voc\u00ea revisa e publica.\r\n <\/p>\r\n <p class=\"cta-note\">7 IAs nesta fase.<\/p>\r\n <\/div>\r\n <div class=\"stage-shot scene s-feed\" aria-hidden=\"true\">\r\n <div class=\"grid\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <div class=\"legend\"><span>Um formato s\u00f3 seu, repetido<\/span><b>9 pe\u00e7as<\/b><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stage-panel\" id=\"fase-4\" role=\"tabpanel\" aria-labelledby=\"tab-4\">\r\n <div class=\"stage\">\r\n <div>\r\n <h3>Por fim, audi\u00eancia vira agenda cheia.<\/h3>\r\n <p>\r\n Um plano de capta\u00e7\u00e3o para transformar quem te acompanha em paciente marcado,\r\n com previsibilidade \u2014 e n\u00e3o na esperan\u00e7a de que a indica\u00e7\u00e3o apare\u00e7a.\r\n <\/p>\r\n <p class=\"cta-note\">1 IA nesta fase.<\/p>\r\n <\/div>\r\n <div class=\"stage-shot scene s-wa\" aria-hidden=\"true\">\r\n <p class=\"msg\">Oi! Vi seu perfil e queria entender como funciona a terapia com voc\u00ea.<\/p>\r\n <p class=\"msg me\">Oi! Que bom que chegou at\u00e9 aqui. Me conta rapidinho o que te fez procurar agora?<\/p>\r\n <p class=\"msg\">Ando acordando de madrugada e n\u00e3o desligo do trabalho.<\/p>\r\n <div class=\"booked\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Primeira sess\u00e3o agendada \u00b7 quinta, 14h\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"lead reveal\" style=\"margin-top:2.5rem;margin-inline:auto;text-align:center\">\r\n Sempre que quiser criar novos conte\u00fados, ajustar o posicionamento ou atualizar\r\n qualquer material, \u00e9 s\u00f3 voltar \u00e0 plataforma.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"wrap\"><div class=\"rule\"><\/div><\/div>\r\n<!-- ======================================================== dobra 5 \u00b7 as IAs -->\r\n<section class=\"band\" id=\"ias\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">As Intelig\u00eancias<\/p>\r\n <h2>Conhe\u00e7a as <em>16 IAs<\/em> que fazem parte do Consult\u00f3rio Inteligente<\/h2>\r\n <p class=\"lead\">Cada uma pergunta o que precisa saber, entrega pronto, e indica o pr\u00f3ximo passo.<\/p>\r\n <\/div>\r\n\r\n <div class=\"phase reveal\">\r\n <div class=\"phase-head\">\r\n <h3>Fase 1 \u00b7 Diagn\u00f3stico<\/h3><span class=\"count\">4 IAs<\/span>\r\n <p>Entender sua trajet\u00f3ria e definir o recorte estrat\u00e9gico.<\/p>\r\n <\/div>\r\n <div class=\"ias\">\r\n <article class=\"ia\" style=\"--ray:#F2B8D8\"><h4>Gerador de nicho estrat\u00e9gico<\/h4><p>Define o nicho mais rent\u00e1vel e coerente com sua trajet\u00f3ria cl\u00ednica.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#F2B8D8\"><h4>Gerador de persona<\/h4><p>Desenha em detalhes a paciente ideal que voc\u00ea quer atrair.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#F2B8D8\"><h4>Especialista em script de comercial<\/h4><p>Cria scripts de conversa que transformam contato em sess\u00e3o agendada.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#F2B8D8\"><h4>Consultor de Precifica\u00e7\u00e3o<\/h4><p>Reposiciona o valor da sua consulta com argumento, n\u00e3o com achismo.<\/p><\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phase reveal\">\r\n <div class=\"phase-head\">\r\n <h3>Fase 2 \u00b7 Posicionamento<\/h3><span class=\"count\">4 IAs<\/span>\r\n <p>Marca, bio e identidade visual do seu consult\u00f3rio.<\/p>\r\n <\/div>\r\n <div class=\"ias\">\r\n <article class=\"ia\" style=\"--ray:#C9A6FF\"><h4>Arquiteto de Marca<\/h4><p>Estrutura os pilares, o tom de voz e a promessa da sua marca pessoal.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#C9A6FF\"><h4>Gerador de bio<\/h4><p>Escreve bios de Instagram claras, espec\u00edficas e com chamada para a\u00e7\u00e3o.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#C9A6FF\"><h4>Diretor de ensaio de fotos<\/h4><p>Monta o roteiro visual do seu ensaio: cen\u00e1rios, roupas e poses.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#C9A6FF\"><h4>Link da bio<\/h4><p>Organiza a p\u00e1gina de destino que converte visitante em paciente.<\/p><\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phase reveal\">\r\n <div class=\"phase-head\">\r\n <h3>Fase 3 \u00b7 Autoridade<\/h3><span class=\"count\">7 IAs<\/span>\r\n <p>Conte\u00fado consistente que constr\u00f3i reputa\u00e7\u00e3o.<\/p>\r\n <\/div>\r\n <div class=\"ias ias--7\">\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Criador de Formato \u00danico<\/h4><p>Cria o formato de conte\u00fado assinatura que s\u00f3 voc\u00ea faz.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Guia editorial<\/h4><p>Define pilares, temas e calend\u00e1rio de conte\u00fado.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Roteirista de reels<\/h4><p>Escreve roteiros de reels com gancho, desenvolvimento e CTA.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Copy de Carrossel<\/h4><p>Escreve o texto slide a slide dos seus carross\u00e9is.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Construtor de Comunidade<\/h4><p>Planeja sequ\u00eancias de stories que criam v\u00ednculo e engajamento.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Biblioteca de Carross\u00e9is<\/h4><p>Traduz a copy em dire\u00e7\u00e3o visual slide a slide.<\/p><\/article>\r\n <article class=\"ia\" style=\"--ray:#8FD8E8\"><h4>Criador de Conte\u00fado TikTok<\/h4><p>Adapta sua comunica\u00e7\u00e3o para a linguagem e o ritmo do TikTok.<\/p><\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phase reveal\">\r\n <div class=\"phase-head\">\r\n <h3>Fase 4 \u00b7 Capta\u00e7\u00e3o<\/h3><span class=\"count\">1 IA<\/span>\r\n <p>Transformar audi\u00eancia em pacientes na agenda.<\/p>\r\n <\/div>\r\n <div class=\"ias ias--1\">\r\n <article class=\"ia\" style=\"--ray:#F5C98A\"><h4>Estrategista de Crescimento<\/h4><p>Plano de capta\u00e7\u00e3o para encher a agenda com previsibilidade.<\/p><\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bonus glass glass--solid glass--live reveal\">\r\n <div>\r\n <h4>B\u00f4nus \u00b7 Modelos edit\u00e1veis no Canva<\/h4>\r\n <p>Escolha o modelo, aplique o texto criado pela IA e publique.<\/p>\r\n <\/div>\r\n <a class=\"btn btn--ghost\" href=\"#planos\" style=\"margin-left:auto\">Ver planos<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ================================================== dobra 6 \u00b7 comparativo -->\r\n<span data-act-start=\"day\" aria-hidden=\"true\"><\/span>\r\n<section class=\"band\" id=\"comparativo\" style=\"background:var(--surface)\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">IAs gen\u00e9ricas vs. Consult\u00f3rio Inteligente<\/p>\r\n <h2>Mais do que uma IA.<br>Um sistema pensado para a <em>realidade dos psic\u00f3logos<\/em>.<\/h2>\r\n <p class=\"lead\">\r\n Enquanto ferramentas gen\u00e9ricas entregam respostas, o Consult\u00f3rio Inteligente\r\n organiza toda a sua estrat\u00e9gia, conduz cada etapa e cria materiais personalizados.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- O duelo. A mesma tarefa nas duas ferramentas, lado a lado. \u00c0 esquerda a\r\n folha em branco: existe um campo de texto e mais nada, e \u00e9 preciso saber\r\n o que pedir. \u00c0 direita a pergunta j\u00e1 feita, o progresso da jornada e o\r\n que sai dela. O vazio da esquerda \u00e9 o argumento da se\u00e7\u00e3o \u2014 por isso ele\r\n n\u00e3o \u00e9 preenchido com enfeite nenhum. -->\r\n <div class=\"duel reveal\" aria-hidden=\"true\">\r\n <article class=\"duel-side duel-side--them\">\r\n <p class=\"duel-tag\">IA gen\u00e9rica<\/p>\r\n <div class=\"duel-screen\">\r\n <p class=\"duel-empty\">Nenhuma conversa ainda<\/p>\r\n <div class=\"duel-field\">\r\n <span class=\"duel-ph\">Pergunte alguma coisa<\/span>\r\n <span class=\"duel-caret\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"duel-foot\">Come\u00e7a da folha em branco: depende do que voc\u00ea souber pedir.<\/p>\r\n <\/article>\r\n\r\n <span class=\"duel-vs\">vs<\/span>\r\n\r\n <article class=\"duel-side duel-side--us\">\r\n <p class=\"duel-tag\">Consult\u00f3rio Inteligente<\/p>\r\n <div class=\"duel-screen\">\r\n <div class=\"duel-meta\"><span>Diagn\u00f3stico<\/span><span>12 de 29<\/span><\/div>\r\n <div class=\"duel-bar\"><i><\/i><\/div>\r\n <p class=\"duel-q\">O que faz o seu jeito de atender ser diferente?<\/p>\r\n <div class=\"duel-out\">\r\n <span class=\"duel-out-k\">Sai pronto<\/span>\r\n <span class=\"duel-out-v\">Nicho, persona, tom de voz e pre\u00e7o<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"duel-foot\">A pergunta certa j\u00e1 vem feita. A resposta vira material para aplicar.<\/p>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"compare-scroll reveal\">\r\n <table class=\"compare\">\r\n <caption>Compara\u00e7\u00e3o entre IAs gen\u00e9ricas e o Consult\u00f3rio Inteligente<\/caption>\r\n <thead>\r\n <tr>\r\n <th class=\"them\" scope=\"col\">No ChatGPT, Claude ou Gemini<\/th>\r\n <th class=\"us\" scope=\"col\">Com o Consult\u00f3rio Inteligente<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Voc\u00ea precisa descobrir sozinho o que pedir.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">Cada IA conduz voc\u00ea com perguntas simples e objetivas.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Entrega respostas isoladas, sem estrat\u00e9gia por tr\u00e1s.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">Todas as IAs fazem parte de um m\u00e9todo para construir sua marca.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Voc\u00ea precisa criar prompts para conseguir bons resultados.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">N\u00e3o \u00e9 preciso saber escrever prompts nem dominar IA.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Pode gerar respostas gen\u00e9ricas que n\u00e3o refletem sua atua\u00e7\u00e3o.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">As entregas s\u00e3o personalizadas para o seu nicho e posicionamento.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Voc\u00ea decide sozinho o pr\u00f3ximo passo.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">Cada IA indica a pr\u00f3xima etapa da constru\u00e7\u00e3o da sua marca.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">N\u00e3o conhece a realidade da psicologia.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">O sistema foi desenvolvido pensando na rotina dos psic\u00f3logos.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Serve para executar tarefas.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">Ajuda a definir estrat\u00e9gia, posicionamento, autoridade e crescimento.<\/td><\/tr>\r\n <tr><td class=\"them\" data-label=\"IA gen\u00e9rica\">Voc\u00ea recebe uma resposta.<\/td><td class=\"us\" data-label=\"Consult\u00f3rio Inteligente\">Voc\u00ea recebe materiais prontos para aplicar no seu consult\u00f3rio.<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div style=\"margin-top:2.5rem\" class=\"reveal\">\r\n <a class=\"btn btn--primary\" href=\"#planos\">Entrar no Consult\u00f3rio Inteligente <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"wrap\"><div class=\"rule\"><\/div><\/div>\r\n<!-- ================================================= dobra 7 \u00b7 o que ele cria -->\r\n<section class=\"band\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head section-head--center reveal\">\r\n <p class=\"eyebrow\">Veja o que ele cria<\/p>\r\n <h2>Veja o que as IAs do Consult\u00f3rio Inteligente criam em <em>poucos minutos<\/em>.<\/h2>\r\n <p class=\"lead\" style=\"margin-inline:auto\">\r\n Tudo pronto de acordo com o seu nicho, a sua marca e a sua estrat\u00e9gia de comunica\u00e7\u00e3o.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bento\">\r\n\r\n <article class=\"cell cell--wide reveal\">\r\n <!-- A conversa de um lado, a ficha que sai dela do outro. \u00c9 a leitura\r\n mais curta do que o diagn\u00f3stico faz \u2014 e ocupa a largura do card,\r\n que o orbital deixava vazia. -->\r\n <div class=\"mock m-dna\">\r\n <div class=\"chat\">\r\n <p class=\"q\">Quem procura voc\u00ea hoje, na pr\u00e1tica?<\/p>\r\n <p class=\"a\">Mulheres adultas, muita ansiedade e culpa por descansar.<\/p>\r\n <p class=\"q\">E o que elas dizem quando melhoram?<\/p>\r\n <p class=\"a is-typing\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/p>\r\n <\/div>\r\n\r\n <div class=\"arrow-flow\" aria-hidden=\"true\">\r\n <span class=\"qty\">29 perguntas<\/span>\r\n <svg width=\"34\" height=\"12\" viewBox=\"0 0 34 12\" fill=\"none\">\r\n <path d=\"M0 6h30M26 2l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <dl class=\"sheet\">\r\n <div><dt>Nicho<\/dt><dd>Ansiedade em mulheres de 25 a 40<\/dd><\/div>\r\n <div><dt>Persona<\/dt><dd>Marina, 32, aut\u00f4noma, exausta<\/dd><\/div>\r\n <div><dt>Tom de voz<\/dt><dd>Acolhedor, direto, sem jarg\u00e3o<\/dd><\/div>\r\n <div><dt>Pre\u00e7o<\/dt><dd>R$ 220 por sess\u00e3o<\/dd><\/div>\r\n <\/dl>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>O DNA da sua marca <span class=\"tag\">Ponto de partida<\/span><\/h3>\r\n <p>S\u00e3o 29 perguntas em conversa. A partir delas o sistema define seu nicho, sua paciente ideal, o seu tom de voz e o quanto o seu trabalho deveria valer \u2014 e treina todas as outras IAs com isso.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell reveal\">\r\n <div class=\"mock m-bio\">\r\n <div class=\"top\">\r\n <span class=\"av\"><\/span>\r\n <span>\r\n <span class=\"handle\">psi.marinaalves<\/span><br>\r\n <span class=\"sub\">Ansiedade e Limites<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"nums\"><span><b>128<\/b> posts<\/span><span><b>2.480<\/b> seguidores<\/span><\/div>\r\n <div class=\"lines\"><i class=\"ln\"><\/i><i class=\"ln\"><\/i><i class=\"ln\"><\/i><\/div>\r\n <div class=\"hl\"><span>Ansiedade<\/span><span>Limites<\/span><span>Terapia<\/span><span>FAQ<\/span><\/div>\r\n <div class=\"posts\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Sua bio, escrita<\/h3>\r\n <p>Nome, arroba, bio e destaques espec\u00edficos o bastante para a paciente certa se reconhecer em duas linhas.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell reveal\">\r\n <div class=\"mock m-week\">\r\n <div class=\"hd\"><b>Esta semana<\/b><span class=\"tag\">4 posts<\/span><\/div>\r\n <div class=\"days\">\r\n <span class=\"d on\">S<\/span><span class=\"d on\">T<\/span><span class=\"d on\">Q<\/span>\r\n <span class=\"d\">Q<\/span><span class=\"d on\">S<\/span><span class=\"d\">S<\/span><span class=\"d\">D<\/span>\r\n <\/div>\r\n <div class=\"note\">Pilares, temas e calend\u00e1rio definidos. Voc\u00ea s\u00f3 revisa e publica.<\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Um m\u00eas de conte\u00fado<\/h3>\r\n <p>O guia editorial monta a pauta e o roteirista escreve. Consist\u00eancia sem a folha em branco toda segunda.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell reveal\">\r\n <!-- A paleta se refaz em ciclo: tr\u00eas identidades completas, cada uma\r\n com o seu par tipogr\u00e1fico. \u00c9 o que a IA faz quando voc\u00ea pede outra. -->\r\n <div class=\"mock m-pal\">\r\n <div class=\"sw\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <div class=\"type\">\r\n Sua marca, do seu jeito\r\n <span class=\"pairs\">\r\n <b>Lora nos t\u00edtulos \u00b7 Karla nos textos<\/b>\r\n <b>Fraunces nos t\u00edtulos \u00b7 Inter nos textos<\/b>\r\n <b>Playfair nos t\u00edtulos \u00b7 Work Sans nos textos<\/b>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Identidade coerente<\/h3>\r\n <p>Paleta, tipografia, tom de voz e arqu\u00e9tipo saem juntos e conversando entre si \u2014 n\u00e3o cinco decis\u00f5es soltas.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell reveal\">\r\n <div class=\"mock m-link\">\r\n <div class=\"phone\">\r\n <span class=\"pav\"><\/span>\r\n <p class=\"nm\">Marina Alves<\/p>\r\n <p class=\"rl\">Psic\u00f3loga cl\u00ednica \u00b7 CRP 06\/12345<\/p>\r\n <div class=\"btns\">\r\n <span class=\"b\">\r\n <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2.6a5.4 5.4 0 0 0-4.6 8.2l-.7 2.5 2.6-.7A5.4 5.4 0 1 0 8 2.6Z\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linejoin=\"round\"\/><\/svg>\r\n Agendar no WhatsApp\r\n <\/span>\r\n <span class=\"b\">Como \u00e9 a primeira sess\u00e3o<\/span>\r\n <span class=\"b\">Instagram<\/span>\r\n <\/div>\r\n <span class=\"dom\">marinaalves.com.br<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Link da bio <span class=\"tag\">HTML pronto<\/span><\/h3>\r\n <p>Uma p\u00e1gina de destino nas suas cores, com bot\u00e3o de WhatsApp, e o arquivo pronto para subir na sua hospedagem.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell cell--wide reveal\">\r\n <!-- O slide em cena de um lado, o roteiro inteiro do outro. O carrossel\r\n avan\u00e7a sozinho e o roteiro acompanha, ent\u00e3o d\u00e1 para ver ao mesmo\r\n tempo o que sai pronto e a estrutura por tr\u00e1s. -->\r\n <div class=\"mock m-slide\">\r\n <div class=\"stage\">\r\n <article class=\"sld\">\r\n <span class=\"ord\">01<\/span>\r\n <p class=\"hd\">Voc\u00ea n\u00e3o est\u00e1 exagerando.<\/p>\r\n <span class=\"mark\">@psi.marinaalves<\/span>\r\n <\/article>\r\n <article class=\"sld\">\r\n <span class=\"ord\">02<\/span>\r\n <p class=\"hd\">Ansiedade n\u00e3o \u00e9 frescura.<\/p>\r\n <p class=\"bd\">\u00c9 o corpo em estado de alerta o tempo inteiro, mesmo quando n\u00e3o h\u00e1 perigo nenhum.<\/p>\r\n <span class=\"mark\">@psi.marinaalves<\/span>\r\n <\/article>\r\n <article class=\"sld\">\r\n <span class=\"ord\">03<\/span>\r\n <p class=\"hd\">O problema n\u00e3o \u00e9 sentir.<\/p>\r\n <p class=\"bd\">\u00c9 n\u00e3o saber o que fazer com o que se sente.<\/p>\r\n <span class=\"mark\">@psi.marinaalves<\/span>\r\n <\/article>\r\n <article class=\"sld\">\r\n <span class=\"ord\">04<\/span>\r\n <p class=\"hd\">Isso se aprende.<\/p>\r\n <p class=\"bd\">Na terapia a gente treina, semana ap\u00f3s semana, at\u00e9 virar repert\u00f3rio.<\/p>\r\n <span class=\"mark\">@psi.marinaalves<\/span>\r\n <\/article>\r\n <article class=\"sld sld--cta\">\r\n <span class=\"ord\">05<\/span>\r\n <p class=\"hd\">Se voc\u00ea leu at\u00e9 aqui, talvez seja a hora.<\/p>\r\n <span class=\"btn-ghost\">Chamar no direct<\/span>\r\n <span class=\"mark\">@psi.marinaalves<\/span>\r\n <\/article>\r\n\r\n <div class=\"dots\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <\/div>\r\n\r\n <div class=\"board\">\r\n <p class=\"board-hd\">\r\n <span>Roteiro do carrossel<\/span>\r\n <span class=\"chip\">5 slides<\/span>\r\n <\/p>\r\n <ol class=\"steps\">\r\n <li><span class=\"rn\">01<\/span><span class=\"rl\">Gancho<\/span><i class=\"bar\"><\/i><\/li>\r\n <li><span class=\"rn\">02<\/span><span class=\"rl\">Contexto<\/span><i class=\"bar\"><\/i><\/li>\r\n <li><span class=\"rn\">03<\/span><span class=\"rl\">Virada<\/span><i class=\"bar\"><\/i><\/li>\r\n <li><span class=\"rn\">04<\/span><span class=\"rl\">Prova<\/span><i class=\"bar\"><\/i><\/li>\r\n <li><span class=\"rn\">05<\/span><span class=\"rl\">Convite<\/span><i class=\"bar\"><\/i><\/li>\r\n <\/ol>\r\n <p class=\"board-ft\">Dire\u00e7\u00e3o visual e modelo no Canva para cada slide<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Carross\u00e9is slide a slide<\/h3>\r\n <p>O texto de cada slide, na ordem, com a dire\u00e7\u00e3o visual \u2014 e modelos edit\u00e1veis no Canva para aplicar em minutos.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"cell reveal\">\r\n <div class=\"mock m-shoot\">\r\n <div class=\"chips\"><span>Acolhedor<\/span><span class=\"on\">Editorial<\/span><span>Clean<\/span><\/div>\r\n <div class=\"grid\"><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <\/div>\r\n <div class=\"cap\">\r\n <h3>Roteiro do seu ensaio<\/h3>\r\n <p>Cen\u00e1rios, roupas e poses escolhidos para o seu posicionamento \u2014 com a refer\u00eancia visual de cada foto.<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"marquee reveal\">\r\n <div class=\"marquee-row\">\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/01-nicho-estrategico.webp\" alt=\"Nicho estrat\u00e9gico gerado, com p\u00fablico, dor e frase de posicionamento.\" loading=\"lazy\" decoding=\"async\"><figcaption>Nicho estrat\u00e9gico<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/05-persona.webp\" alt=\"Card de persona com nome, idade, fala em primeira pessoa e dores principais.\" loading=\"lazy\" decoding=\"async\"><figcaption>Persona ideal<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/02-arquiteto-marca-paletas.webp\" alt=\"Duas paletas de cores geradas, com amostras e c\u00f3digos hexadecimais.\" loading=\"lazy\" decoding=\"async\"><figcaption>Paleta da marca<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/04-marca-tipografia-tom.webp\" alt=\"Tipografia e tom de voz definidos, com exemplo de frase aplicada.\" loading=\"lazy\" decoding=\"async\"><figcaption>Tipografia e tom de voz<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/06-bio-instagram.webp\" alt=\"Pr\u00e9via de perfil do Instagram com bio e destaques.\" loading=\"lazy\" decoding=\"async\"><figcaption>Bio de Instagram<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/08-link-bio-modelos.webp\" alt=\"Dois modelos de p\u00e1gina de link da bio nas cores da marca.\" loading=\"lazy\" decoding=\"async\"><figcaption>Link da bio<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/10-ensaio-galeria.webp\" alt=\"Galeria de refer\u00eancias de poses para ensaio fotogr\u00e1fico, com filtros.\" loading=\"lazy\" decoding=\"async\"><figcaption>Roteiro de ensaio<\/figcaption><\/figure>\r\n <figure class=\"piece\"><img src=\"https:\/\/oconsultoriointeligente.com.br\/wp-content\/uploads\/2026\/08\/13-precificacao-estrategia.webp\" alt=\"Estrat\u00e9gia de pre\u00e7o com diagn\u00f3stico e justificativa de reajuste.\" loading=\"lazy\" decoding=\"async\"><figcaption>Estrat\u00e9gia de pre\u00e7o<\/figcaption><\/figure>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ====================================================== dobra 8 \u00b7 planos -->\r\n<section class=\"band\" id=\"planos\" style=\"background:var(--surface)\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head section-head--center reveal\">\r\n <p class=\"eyebrow\">Planos<\/p>\r\n <h2>Escolha o plano ideal e tenha <em>acesso imediato<\/em> \u00e0 plataforma.<\/h2>\r\n <p class=\"lead\" style=\"margin-inline:auto\">Enquanto a sua assinatura estiver ativa, voc\u00ea poder\u00e1:<\/p>\r\n\r\n <ul class=\"perks\">\r\n <li>Criar novos conte\u00fados sempre que precisar<\/li>\r\n <li>Atualizar materiais antigos<\/li>\r\n <li>Refazer qualquer estrat\u00e9gia<\/li>\r\n <li>Acompanhar a evolu\u00e7\u00e3o da sua marca<\/li>\r\n <li>Acessar novas Intelig\u00eancias Artificiais conforme forem lan\u00e7adas<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"plans\">\r\n\r\n <article class=\"plan reveal\">\r\n <p class=\"plan-name\">Mensal<\/p>\r\n <p class=\"plan-sub\">Para come\u00e7ar sem compromisso.<\/p>\r\n\r\n <p class=\"was\" aria-hidden=\"true\"> <\/p>\r\n <p class=\"price\">\r\n <span class=\"cur\">R$<\/span><span class=\"val\" data-from=\"87\" data-to=\"87\">87<\/span>\r\n <\/p>\r\n <p class=\"per\">por m\u00eas \u00b7 cobrado mensalmente<\/p>\r\n <p class=\"save\" hidden> <\/p>\r\n\r\n <ul>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Acesso \u00e0s 16 IAs<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Carross\u00e9is edit\u00e1veis no Canva<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Suporte do time<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Atualiza\u00e7\u00f5es e novas IAs inclu\u00eddas<\/span><\/li>\r\n <\/ul>\r\n\r\n <a class=\"btn btn--ghost btn--block\" href=\"#\">Assinar mensal<\/a>\r\n <p class=\"fine\">Cancele quando quiser.<\/p>\r\n <\/article>\r\n\r\n <article class=\"plan plan--featured glass glass--solid glass--live reveal\">\r\n <span class=\"ribbon\">Mais escolhido<\/span>\r\n <p class=\"plan-name\">Anual<\/p>\r\n <p class=\"plan-sub\">O menor pre\u00e7o por m\u00eas.<\/p>\r\n\r\n <p class=\"was\">de <s>R$ 87<\/s> por<\/p>\r\n <p class=\"price\">\r\n <span class=\"cur\">R$<\/span><span class=\"val\" data-from=\"87\" data-to=\"37\">87<\/span>\r\n <\/p>\r\n <p class=\"per\">por m\u00eas \u00b7 R$ 444 por ano<\/p>\r\n <p class=\"save\">economize R$ 600<\/p>\r\n\r\n <ul>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Acesso \u00e0s 16 IAs<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Carross\u00e9is edit\u00e1veis no Canva<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Suporte do time<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Atualiza\u00e7\u00f5es e novas IAs inclu\u00eddas<\/span><\/li>\r\n <\/ul>\r\n\r\n <a class=\"btn btn--primary btn--block\" href=\"#\">Quero assinar agora <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <p class=\"fine\">Acesso liberado na hora.<\/p>\r\n <\/article>\r\n\r\n <article class=\"plan reveal\">\r\n <p class=\"plan-name\">Semestral<\/p>\r\n <p class=\"plan-sub\">Tempo para a marca tomar forma.<\/p>\r\n\r\n <p class=\"was\">de <s>R$ 87<\/s> por<\/p>\r\n <p class=\"price\">\r\n <span class=\"cur\">R$<\/span><span class=\"val\" data-from=\"87\" data-to=\"57\">87<\/span>\r\n <\/p>\r\n <p class=\"per\">por m\u00eas \u00b7 R$ 342 a cada 6 meses<\/p>\r\n <p class=\"save\">economize R$ 180<\/p>\r\n\r\n <ul>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Acesso \u00e0s 16 IAs<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Carross\u00e9is edit\u00e1veis no Canva<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Suporte do time<\/span><\/li>\r\n <li><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span>Atualiza\u00e7\u00f5es e novas IAs inclu\u00eddas<\/span><\/li>\r\n <\/ul>\r\n\r\n <a class=\"btn btn--ghost btn--block\" href=\"#\">Assinar semestral<\/a>\r\n <p class=\"fine\">34% de desconto no m\u00eas.<\/p>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"wrap\"><div class=\"rule\"><\/div><\/div>\r\n<!-- ========================================================= dobra 9 \u00b7 FAQ -->\r\n<section class=\"band\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head section-head--center reveal\">\r\n <p class=\"eyebrow\">Perguntas frequentes<\/p>\r\n <h2>Ainda em <em>d\u00favida<\/em>?<\/h2>\r\n <\/div>\r\n\r\n <div class=\"faq reveal\">\r\n <details>\r\n <summary>Preciso saber usar Intelig\u00eancia Artificial?<\/summary>\r\n <div class=\"answer\">N\u00e3o. O sistema foi desenvolvido de forma simples para psic\u00f3logos, mesmo os que nunca usaram IA. Basta responder \u00e0s perguntas de cada etapa e o Consult\u00f3rio Inteligente faz o restante.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>O Consult\u00f3rio Inteligente \u00e9 um curso de marketing?<\/summary>\r\n <div class=\"answer\">N\u00e3o. Diferente de um curso tradicional, \u00e9 um sistema que conduz voc\u00ea por todas as etapas da constru\u00e7\u00e3o da sua marca e entrega materiais prontos para aplicar.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>Ele serve para qualquer \u00e1rea da psicologia?<\/summary>\r\n <div class=\"answer\">Sim. Durante o diagn\u00f3stico inicial, o sistema entende sua trajet\u00f3ria cl\u00ednica e ajuda a definir um nicho e uma estrat\u00e9gia alinhados ao seu perfil profissional.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>As IAs criam conte\u00fados personalizados?<\/summary>\r\n <div class=\"answer\">Sim. As entregas s\u00e3o constru\u00eddas com base nas informa\u00e7\u00f5es da sua marca, do seu nicho e do paciente que voc\u00ea deseja atrair. Por isso fazem sentido para a sua realidade.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>Eu preciso produzir conte\u00fado todos os dias?<\/summary>\r\n <div class=\"answer\">N\u00e3o. O objetivo \u00e9 tornar sua produ\u00e7\u00e3o mais estrat\u00e9gica, para que voc\u00ea tenha consist\u00eancia sem passar horas criando. O sistema cria e organiza em poucos minutos.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>Em quanto tempo consigo come\u00e7ar a usar?<\/summary>\r\n <div class=\"answer\">Imediatamente ap\u00f3s a libera\u00e7\u00e3o do acesso. O sistema guia voc\u00ea desde o diagn\u00f3stico inicial at\u00e9 a produ\u00e7\u00e3o dos primeiros materiais.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>As IAs podem ser usadas mais de uma vez?<\/summary>\r\n <div class=\"answer\">Sim. Durante a assinatura voc\u00ea pode acessar as ferramentas sempre que precisar, para criar novos materiais, revisar estrat\u00e9gias ou atualizar conte\u00fados j\u00e1 existentes.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>Posso editar ou refazer o que foi criado?<\/summary>\r\n <div class=\"answer\">Sim. Todas as entregas podem ser ajustadas. Voc\u00ea pode alterar informa\u00e7\u00f5es, gerar novas vers\u00f5es ou refazer um material sempre que quiser.<\/div>\r\n <\/details>\r\n <details>\r\n <summary>As atualiza\u00e7\u00f5es est\u00e3o inclu\u00eddas na assinatura?<\/summary>\r\n <div class=\"answer\">Sim. O Consult\u00f3rio Inteligente est\u00e1 em constante evolu\u00e7\u00e3o. Durante a assinatura voc\u00ea recebe as melhorias, atualiza\u00e7\u00f5es e novos recursos do seu plano, sem precisar adquirir uma nova vers\u00e3o.<\/div>\r\n <\/details>\r\n <\/div>\r\n\r\n <div style=\"text-align:center;margin-top:2.5rem\" class=\"reveal\">\r\n <a class=\"btn btn--primary\" href=\"#planos\">Assinar o Consult\u00f3rio Inteligente <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ====================================================== dobra 10 \u00b7 Camila -->\r\n<section class=\"band\" style=\"background:var(--surface)\">\r\n <div class=\"wrap\">\r\n <div class=\"author\">\r\n <div class=\"author-photo reveal\">\r\n <!-- Substituir por: <img decoding=\"async\" src=\"assets\/img\/camila.webp\" alt=\"Camila Kurdian\"> -->\r\n <span>Foto da Camila<br>a inserir<\/span>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <p class=\"eyebrow\">Quem criou<\/p>\r\n <h2>Criado por quem vive a realidade dos psic\u00f3logos <em>todos os dias<\/em>.<\/h2>\r\n <p class=\"lead\">\r\n O Consult\u00f3rio Inteligente foi desenvolvido por <strong>Camila Kurdian<\/strong>,\r\n psic\u00f3loga cl\u00ednica e fundadora da Rota, uma das maiores empresas de marketing\r\n especializada em psic\u00f3logos do Brasil.\r\n <\/p>\r\n <p>\r\n Depois de ajudar milhares de psic\u00f3logos a fortalecerem suas marcas e conquistarem\r\n agendas mais previs\u00edveis, Camila transformou a metodologia da Rota em um sistema de\r\n Intelig\u00eancias Artificiais que orienta cada etapa da constru\u00e7\u00e3o de uma marca forte.\r\n <\/p>\r\n <p>\r\n Cada ferramenta foi desenvolvida para tornar esse processo mais simples, organizado\r\n e acess\u00edvel \u2014 para que mais psic\u00f3logos consigam aplicar estrat\u00e9gias de posicionamento\r\n no dia a dia sem precisar come\u00e7ar do zero.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ==================================================== fechamento -->\r\n<section class=\"closer\">\r\n <div class=\"wrap\">\r\n <h2>Sua experi\u00eancia cl\u00ednica j\u00e1 \u00e9 boa.<br>Falta o mundo <em>saber disso<\/em>.<\/h2>\r\n <p>Comece pelo diagn\u00f3stico e veja sua marca tomar forma em poucos minutos.<\/p>\r\n <p style=\"margin-top:2.2rem\">\r\n <a class=\"btn btn--light\" href=\"#planos\">Acessar o meu sistema <span class=\"arrow\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/main>\r\n\r\n<footer class=\"site-footer\">\r\n <div class=\"wrap\">\r\n <span>\u00a9 <span id=\"ano\">2026<\/span> Consult\u00f3rio Inteligente \u00b7 uma cria\u00e7\u00e3o da Rota<\/span>\r\n <span><a href=\"privacidade.html\">Pol\u00edtica de privacidade<\/a> \u00b7 <a href=\"termos.html\">Termos de uso<\/a><\/span>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/*\r\n * app.js \u2014 comportamento da landing page.\r\n * Cada bloco abaixo cuida de uma coisa s\u00f3 e n\u00e3o conhece os outros.\r\n *\/\r\n(function () {\r\n 'use strict';\r\n\r\n var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n \/* --------------------------------------------------------------- throttle\r\n * Agenda uma fun\u00e7\u00e3o para o pr\u00f3ximo quadro, no m\u00e1ximo uma vez por quadro.\r\n *\r\n * A vers\u00e3o ing\u00eanua disso \u2014 uma flag `ticking` que s\u00f3 volta a false dentro do\r\n * requestAnimationFrame \u2014 trava de vez se o quadro n\u00e3o chegar: basta um\r\n * congelamento moment\u00e2neo do renderizador (aba em segundo plano, GC, uma\r\n * pintura cara) para a flag ficar presa em true e o scroll parar de ser\r\n * observado at\u00e9 a p\u00e1gina recarregar. Aqui h\u00e1 duas sa\u00eddas: o rAF e um\r\n * setTimeout de reserva. A primeira que chegar solta a trava, e a trava \u00e9\r\n * solta ANTES de rodar a fun\u00e7\u00e3o, para que uma exce\u00e7\u00e3o tamb\u00e9m n\u00e3o a prenda.\r\n *\/\r\n function onFrame(fn) {\r\n var pending = false;\r\n var timer = 0;\r\n\r\n function run() {\r\n if (!pending) return;\r\n pending = false;\r\n clearTimeout(timer);\r\n try { fn(); } catch (e) { \/* um erro num quadro n\u00e3o pode matar o scroll *\/ }\r\n }\r\n\r\n return function () {\r\n if (pending) return;\r\n pending = true;\r\n requestAnimationFrame(run);\r\n timer = setTimeout(run, 250);\r\n };\r\n }\r\n\r\n \/* ---------------------------------------------------------------- circuito *\/\r\n\r\n (function heroCircuit() {\r\n \/\/ O desenho \u00e9 SVG + CSS e n\u00e3o precisa de JS para existir. Isto aqui s\u00f3\r\n \/\/ corta a anima\u00e7\u00e3o quando o hero n\u00e3o est\u00e1 em cena, e desbota o circuito\r\n \/\/ conforme a pessoa rola \u2014 o hero sai sem disputar com a dobra seguinte.\r\n var hero = document.getElementById('hero');\r\n var svg = hero && hero.querySelector('.circuit');\r\n if (!svg || reduced) return;\r\n\r\n if ('IntersectionObserver' in window) {\r\n new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) { hero.classList.toggle('is-idle', !e.isIntersecting); });\r\n }, { threshold: 0.02 }).observe(hero);\r\n }\r\n\r\n document.addEventListener('visibilitychange', function () {\r\n hero.classList.toggle('is-idle', document.hidden);\r\n });\r\n\r\n window.addEventListener('scroll', onFrame(function () {\r\n var p = Math.min(1, window.scrollY \/ Math.max(1, hero.offsetHeight));\r\n svg.style.opacity = (1 - p * 0.9).toFixed(3);\r\n }), { passive: true });\r\n })();\r\n\r\n \/* ------------------------------------------------- os tr\u00eas atos do amanhecer *\/\r\n\r\n (function acts() {\r\n var body = document.body;\r\n var marks = [].slice.call(document.querySelectorAll('[data-act-start]'));\r\n if (!marks.length) return;\r\n\r\n function pick() {\r\n var line = window.scrollY + window.innerHeight * 0.45;\r\n var act = 'night';\r\n for (var i = 0; i < marks.length; i++) {\r\n if (marks[i].offsetTop <= line) act = marks[i].getAttribute('data-act-start');\r\n }\r\n if (body.dataset.act !== act) body.dataset.act = act;\r\n }\r\n\r\n window.addEventListener('scroll', onFrame(pick), { passive: true });\r\n window.addEventListener('resize', pick, { passive: true });\r\n pick();\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- v\u00eddeo *\/\r\n\r\n (function tour() {\r\n \/\/ O tour \u00e9 mudo, ent\u00e3o roda sozinho quando entra em cena \u2014 como um GIF,\r\n \/\/ mas sem o peso. Sai de cena, pausa: nada de baixar v\u00eddeo \u00e0 toa.\r\n var v = document.querySelector('.video-frame video');\r\n if (!v || !('IntersectionObserver' in window)) return;\r\n\r\n if (reduced) { v.setAttribute('preload', 'metadata'); return; }\r\n\r\n new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) {\r\n if (e.isIntersecting) {\r\n var p = v.play();\r\n if (p && p.catch) p.catch(function () {}); \/\/ autoplay bloqueado: fica o poster\r\n } else if (!v.paused) {\r\n v.pause();\r\n }\r\n });\r\n }, { threshold: 0.35 }).observe(v);\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- revela\u00e7\u00e3o *\/\r\n\r\n (function reveal() {\r\n \/\/ Cada grupo de irm\u00e3os entra em cascata: o atraso vem da posi\u00e7\u00e3o no grupo,\r\n \/\/ ent\u00e3o funciona igual com 3 cards ou com 7.\r\n var items = [].slice.call(document.querySelectorAll('.reveal'));\r\n if (!items.length) return;\r\n\r\n items.forEach(function (el) {\r\n var sibs = [].slice.call(el.parentNode.children).filter(function (n) {\r\n return n.classList && n.classList.contains('reveal');\r\n });\r\n var i = sibs.indexOf(el);\r\n el.style.setProperty('--d', (Math.min(i, 8) * 0.075) + 's');\r\n });\r\n\r\n if (reduced || !('IntersectionObserver' in window)) {\r\n items.forEach(function (i) { i.classList.add('is-in'); });\r\n return;\r\n }\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) {\r\n if (!e.isIntersecting) return;\r\n e.target.classList.add('is-in');\r\n io.unobserve(e.target);\r\n });\r\n }, { rootMargin: '0px 0px -12% 0px', threshold: 0.08 });\r\n items.forEach(function (i) { io.observe(i); });\r\n })();\r\n\r\n \/* --------------------------------------------- t\u00edtulos palavra a palavra *\/\r\n\r\n (function splitHeadings() {\r\n var heads = [].slice.call(document.querySelectorAll('h1, .band h2'));\r\n if (!heads.length || reduced || !('IntersectionObserver' in window)) return;\r\n\r\n heads.forEach(function (h) {\r\n \/\/ reconstr\u00f3i o t\u00edtulo envolvendo cada palavra, preservando <em> e <br>\r\n var out = '';\r\n var n = 0;\r\n [].slice.call(h.childNodes).forEach(function (node) {\r\n if (node.nodeType === 3) {\r\n node.textContent.split(\/(\\s+)\/).forEach(function (chunk) {\r\n if (!chunk.trim()) { out += chunk; return; }\r\n out += '<span class=\"w\" style=\"--d:' + (n++ * 0.045) + 's\">' + chunk + '<\/span>';\r\n });\r\n } else if (node.nodeName === 'BR') {\r\n out += '<br>';\r\n } else {\r\n var tag = node.nodeName.toLowerCase();\r\n var inner = '';\r\n node.textContent.split(\/(\\s+)\/).forEach(function (chunk) {\r\n if (!chunk.trim()) { inner += chunk; return; }\r\n inner += '<span class=\"w\" style=\"--d:' + (n++ * 0.045) + 's\">' + chunk + '<\/span>';\r\n });\r\n out += '<' + tag + '>' + inner + '<\/' + tag + '>';\r\n }\r\n });\r\n h.innerHTML = out;\r\n h.classList.add('split');\r\n });\r\n\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) {\r\n if (!e.isIntersecting) return;\r\n e.target.classList.add('is-in');\r\n io.unobserve(e.target);\r\n });\r\n }, { rootMargin: '0px 0px -10% 0px', threshold: 0.2 });\r\n\r\n \/\/ O que j\u00e1 est\u00e1 na tela no carregamento n\u00e3o espera o observer:\r\n \/\/ o t\u00edtulo do hero precisa entrar de imediato.\r\n requestAnimationFrame(function () {\r\n heads.forEach(function (h) {\r\n if (h.getBoundingClientRect().top < window.innerHeight * 0.9) {\r\n h.classList.add('is-in');\r\n } else {\r\n io.observe(h);\r\n }\r\n });\r\n });\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- n\u00fameros *\/\r\n\r\n (function counters() {\r\n var nums = [].slice.call(document.querySelectorAll('.stat .num'));\r\n if (!nums.length) return;\r\n\r\n if (reduced || !('IntersectionObserver' in window)) {\r\n nums.forEach(function (n) { n.textContent = n.dataset.to; });\r\n return;\r\n }\r\n\r\n function run(el) {\r\n var to = parseInt(el.dataset.to, 10);\r\n var dur = 1100;\r\n var t0 = performance.now();\r\n (function step(now) {\r\n \/\/ o carimbo que o rAF entrega \u00e9 o in\u00edcio do quadro, que pode ser\r\n \/\/ ANTERIOR a t0. Sem o piso em 0, o primeiro quadro tem progresso\r\n \/\/ negativo e a contagem come\u00e7a em -1 na tela.\r\n var p = Math.min(1, Math.max(0, (now - t0) \/ dur));\r\n var eased = 1 - Math.pow(1 - p, 3);\r\n el.textContent = Math.round(to * eased);\r\n if (p < 1) requestAnimationFrame(step);\r\n })(t0);\r\n }\r\n\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) {\r\n if (!e.isIntersecting) return;\r\n run(e.target);\r\n io.unobserve(e.target);\r\n });\r\n }, { threshold: 0.6 });\r\n nums.forEach(function (n) { n.textContent = '0'; io.observe(n); });\r\n })();\r\n\r\n \/* ---------------------------------------------------------- brilho no cursor *\/\r\n\r\n (function spotlight() {\r\n if (reduced || !window.matchMedia('(hover: hover)').matches) return;\r\n document.addEventListener('mousemove', function (e) {\r\n var card = e.target.closest && e.target.closest('.ia');\r\n if (!card) return;\r\n var r = card.getBoundingClientRect();\r\n card.style.setProperty('--mx', (e.clientX - r.left) + 'px');\r\n card.style.setProperty('--my', (e.clientY - r.top) + 'px');\r\n }, { passive: true });\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- parallax *\/\r\n\r\n (function parallax() {\r\n var items = [].slice.call(document.querySelectorAll('.par'));\r\n if (!items.length || reduced) return;\r\n\r\n function apply() {\r\n var vh = window.innerHeight;\r\n items.forEach(function (el) {\r\n var r = el.getBoundingClientRect();\r\n if (r.bottom < -200 || r.top > vh + 200) return;\r\n var mid = r.top + r.height \/ 2;\r\n var off = (mid - vh \/ 2) \/ vh; \/\/ -1 acima, +1 abaixo\r\n var amt = parseFloat(el.dataset.par || '18');\r\n el.style.transform = 'translate3d(0,' + (off * -amt).toFixed(2) + 'px,0)';\r\n });\r\n }\r\n window.addEventListener('scroll', onFrame(apply), { passive: true });\r\n window.addEventListener('resize', apply, { passive: true });\r\n apply();\r\n })();\r\n\r\n \/* ------------------------------------------------------ progresso de leitura *\/\r\n\r\n (function progress() {\r\n var bar = document.querySelector('.progress');\r\n if (!bar) return;\r\n function apply() {\r\n var h = document.documentElement.scrollHeight - window.innerHeight;\r\n bar.style.transform = 'scaleX(' + (h > 0 ? window.scrollY \/ h : 0) + ')';\r\n }\r\n window.addEventListener('scroll', onFrame(apply), { passive: true });\r\n apply();\r\n })();\r\n\r\n \/* ------------------------------------------------------- jornada (4 fases) *\/\r\n\r\n (function journey() {\r\n var tabs = [].slice.call(document.querySelectorAll('.track button'));\r\n var panels = [].slice.call(document.querySelectorAll('.stage-panel'));\r\n if (!tabs.length) return;\r\n\r\n function show(i) {\r\n tabs.forEach(function (t, k) { t.setAttribute('aria-selected', String(k === i)); });\r\n panels.forEach(function (p, k) { p.classList.toggle('is-active', k === i); });\r\n }\r\n\r\n tabs.forEach(function (t, i) {\r\n t.addEventListener('click', function () { show(i); });\r\n t.addEventListener('keydown', function (e) {\r\n var d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;\r\n if (!d) return;\r\n e.preventDefault();\r\n var n = (i + d + tabs.length) % tabs.length;\r\n tabs[n].focus();\r\n show(n);\r\n });\r\n });\r\n\r\n show(0);\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- planos *\/\r\n\r\n (function plans() {\r\n \/\/ O pre\u00e7o entra pelo valor cheio e cai at\u00e9 o do plano. O \"de R$ 87\" riscado\r\n \/\/ e o selo de economia s\u00f3 aparecem quando a contagem termina \u2014 o desconto\r\n \/\/ \u00e9 sentido acontecendo, n\u00e3o lido pronto.\r\n var cards = [].slice.call(document.querySelectorAll('.plan'));\r\n if (!cards.length) return;\r\n\r\n function settle(card) { card.classList.add('is-cut'); }\r\n\r\n function run(card) {\r\n var el = card.querySelector('.price .val');\r\n if (!el) return settle(card);\r\n\r\n var from = parseInt(el.dataset.from, 10);\r\n var to = parseInt(el.dataset.to, 10);\r\n if (isNaN(from) || isNaN(to) || from === to) {\r\n if (!isNaN(to)) el.textContent = to;\r\n return settle(card);\r\n }\r\n\r\n var dur = 1000;\r\n var t0 = performance.now();\r\n (function step(now) {\r\n var p = Math.min(1, Math.max(0, (now - t0) \/ dur)); \/* idem contadores *\/\r\n var eased = 1 - Math.pow(1 - p, 3);\r\n el.textContent = Math.round(from + (to - from) * eased);\r\n if (p < 1) requestAnimationFrame(step);\r\n else settle(card);\r\n })(t0);\r\n }\r\n\r\n if (reduced || !('IntersectionObserver' in window)) {\r\n cards.forEach(function (c) {\r\n var el = c.querySelector('.price .val');\r\n if (el) el.textContent = el.dataset.to;\r\n settle(c);\r\n });\r\n return;\r\n }\r\n\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (e) {\r\n if (!e.isIntersecting) return;\r\n io.unobserve(e.target);\r\n run(e.target);\r\n });\r\n }, { threshold: 0.4 });\r\n\r\n cards.forEach(function (c) { io.observe(c); });\r\n })();\r\n\r\n \/* ------------------------------------------------- carrossel infinito (dobra 7) *\/\r\n\r\n (function marquee() {\r\n var row = document.querySelector('.marquee-row');\r\n if (!row || reduced) return;\r\n \/\/ duplica o conte\u00fado para o loop de -50% fechar sem salto\r\n row.innerHTML += row.innerHTML;\r\n row.setAttribute('aria-hidden', 'false');\r\n })();\r\n\r\n \/* ---------------------------------------------------------------- ano *\/\r\n\r\n (function year() {\r\n var el = document.getElementById('ano');\r\n if (el) el.textContent = new Date().getFullYear();\r\n })();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Consult\u00f3rio Inteligente \u2014 IA para psic\u00f3logos que querem ser refer\u00eancia Consult\u00f3rio Inteligente Como funciona As IAs Comparativo Planos Assinar Primeiro sistema de Intelig\u00eancia Artificial por assinatura para psic\u00f3logos A plataforma de IA para psic\u00f3logos que querem construir sua marca, se tornar refer\u00eancia e captar mais pacientes. Tenha acesso a um sistema de Intelig\u00eancias Artificiais que […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":10,"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/oconsultoriointeligente.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}