@breathe-ds/ui 0.0.0-stage → 0.1.0

package/components/BottomNav.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+
+/** Ícone no padrão lucide (o componente, não o nó): a barra decide o tamanho. */
+export type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+/** Uma página do site, em ordem de importância. As primeiras ficam na barra;
+ *  as que não couberem vão para o "Mais". */
+export type BottomPage = {
+  href: string;
+  label: ReactNode;
+  Icon: IconType;
+  /** A página atual é esta? (o app decide: rota/idioma são dele) */
+  active?: boolean;
+};
+
+/** Saída extra do painel "Mais" (ex.: cursos em outro site): endereço escrito
+ *  embaixo e seta para fora, como no novo.creeta. */
+export type BottomExtra = {
+  href: string;
+  label: ReactNode;
+  Icon: IconType;
+  /** Linha menor sob o rótulo (ex.: o domínio). Com `external` e sem isto, mostra o domínio do href. */
+  description?: ReactNode;
+  external?: boolean;
+  active?: boolean;
+};
+
+type Labels = {
+  /** aria-label da barra */
+  nav: string;
+  /** rótulo da aba "Mais" */
+  more: string;
+  /** aria-label do painel */
+  morePages: string;
+  /** sr-only depois de "Mais": "mais páginas" */
+  morePagesSr: string;
+  /** sr-only quando a página atual está no "Mais" */
+  currentHere: string;
+  /** sr-only em link externo */
+  newTab: string;
+};
+
+const PT: Labels = {
+  nav: "Navegação principal",
+  more: "Mais",
+  morePages: "Mais páginas",
+  morePagesSr: "mais páginas",
+  currentHere: "(a página atual está aqui)",
+  newTab: "(abre em outra aba)",
+};
+
+type Props = {
+  pages: BottomPage[];
+  extras?: BottomExtra[];
+  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  /** A partir de que largura o header assume e a barra some. creeta: `md`; ttcab: `lg`. */
+  hideFrom?: "md" | "lg";
+  /** Textos (padrão pt-BR); o app passa os do idioma. */
+  labels?: Partial<Labels>;
+  /** Embutida num contêiner `relative` (demo, moldura de celular): barra, véu e
+   *  painel ficam `absolute` dentro dele e aparecem em qualquer largura. */
+  embedded?: boolean;
+};
+
+/** Largura mínima de uma aba, em px: abaixo disso o rótulo não cabe. */
+export const TAB_MIN_WIDTH = 64;
+
+/** Quantas páginas aparecem direto na barra, para uma largura útil. A última
+ *  aba é sempre o "Mais" (é nele que ficam as páginas que não couberam e as
+ *  saídas extras), então cabe uma página a menos que o número de abas. */
+export function howManyFit(width: number, total: number): number {
+  const tabs = Math.floor(width / TAB_MIN_WIDTH);
+  return Math.max(2, Math.min(total, tabs - 1));
+}
+
+const MenuIcon: IconType = ({ size = 20, strokeWidth = 1.75 }) => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+);
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" className="h-[18px] w-[18px] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+// Aba: coluna ícone+rótulo. Ativa ganha FORMA (pílula clara), não só cor —
+// legível pra quem não distingue cor. Encolhe no toque, como botão de app.
+// O nome de transição faz o destaque deslizar entre as abas na troca de página.
+const tab = (active: boolean) =>
+  [
+    "flex h-14 w-full flex-col items-center justify-center gap-1 rounded-[20px] px-1 text-[10.5px] font-medium leading-none tracking-tight",
+    "transition duration-150 active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface",
+    active ? "bg-surface text-ink [view-transition-name:aba-ativa]" : "text-surface/85 hover:bg-white/10",
+  ].join(" ");
+
+const row = (active?: boolean) =>
+  `flex min-h-14 items-center gap-3 rounded-[18px] px-3 font-medium transition-colors duration-150 active:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
+    active ? "bg-surface text-ink" : "text-ink"
+  }`;
+const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink";
+
+/**
+ * Navegação principal no celular: barra flutuante ao alcance do polegar, como
+ * em app. É o código da BarraNavegacao do novo.creeta (e do BottomNav do
+ * ttcab), neutro por tokens: `ink` na barra, `surface` na aba ativa.
+ *
+ * - Dinâmica: mostra quantas páginas couberem na largura (ResizeObserver,
+ *   64px por aba). A última aba é sempre o "Mais", com o resto e as saídas
+ *   extras. Num celular comum são quatro páginas e o "Mais".
+ * - Véu atrás da barra: o conteúdo some aos poucos antes de chegar nela.
+ * - O painel "Mais" é um popover nativo: fecha com Esc e com toque fora,
+ *   devolve o foco ao botão e abre mesmo sem JavaScript. Embutido (demo),
+ *   vira um painel absoluto dentro da moldura, com a mesma entrada.
+ * - Some a partir de `hideFrom` (md no creeta, lg no ttcab), onde o header assume.
+ */
+export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg", labels, embedded = false }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...PT, ...labels };
+  const list = useRef<HTMLUListElement>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const wrap = useRef<HTMLDivElement>(null);
+  const panelId = useId();
+  // antes de medir: o caso do celular comum (5 abas = 4 páginas + Mais)
+  const [visible, setVisible] = useState(() => howManyFit(5 * TAB_MIN_WIDTH, pages.length));
+  const [open, setOpen] = useState(false); // só no modo embutido
+
+  useEffect(() => {
+    const ul = list.current;
+    if (!ul || typeof ResizeObserver !== "function") return;
+    const measure = () => {
+      const cs = getComputedStyle(ul);
+      const useful = ul.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
+      if (useful > 0) setVisible(howManyFit(useful, pages.length));
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(ul);
+    return () => ro.disconnect();
+  }, [pages.length]);
+
+  const close = () => {
+    if (embedded) return setOpen(false);
+    const el = panel.current as (HTMLDivElement & { hidePopover?: () => void }) | null;
+    try {
+      if (el?.matches(":popover-open")) el.hidePopover?.();
+    } catch {
+      /* navegador sem popover: não há o que fechar */
+    }
+  };
+
+  // Trocou de página: o painel fecha.
+  const activeHref = pages.find((p) => p.active)?.href;
+  useEffect(close, [activeHref]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Embutido: fecha com Esc e com toque fora (o popover nativo faz isso sozinho).
+  useEffect(() => {
+    if (!embedded || !open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    const onDown = (e: PointerEvent) => {
+      if (wrap.current && !wrap.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const id = window.setTimeout(() => document.addEventListener("pointerdown", onDown), 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [embedded, open]);
+
+  const onBar = pages.slice(0, visible);
+  const inMore = pages.slice(visible);
+  const moreActive = inMore.some((p) => p.active) || extras.some((x) => x.active);
+  const pos = embedded ? "absolute" : "fixed";
+  const hide = embedded ? "" : ` ${hideFrom}:hidden`;
+
+  const panelInner = (
+    <nav aria-label={t.morePages}>
+      {/* Um item por linha: em duas colunas o painel ficava confuso. */}
+      {inMore.length > 0 && (
+        <ul className="grid list-none gap-1">
+          {inMore.map(({ href, label, Icon, active }, i) => (
+            <li key={`${i}-${href}`}>
+              <L href={href} aria-current={active ? "page" : undefined} onClick={close} className={row(active)}>
+                <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
+                {label}
+              </L>
+            </li>
+          ))}
+        </ul>
+      )}
+      {extras.length > 0 && (
+        <ul className={`grid list-none gap-1${inMore.length > 0 ? " mt-1 border-t border-ink/10 pt-1" : ""}`}>
+          {extras.map(({ href, label, Icon, description, external, active }, i) => {
+            const Tag: ElementType = external ? "a" : L;
+            const desc = description ?? (external ? href.replace(/^https?:\/\//, "").replace(/\/$/, "") : null);
+            return (
+              <li key={`${i}-${href}`}>
+                <Tag
+                  href={href}
+                  {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                  aria-current={active ? "page" : undefined}
+                  onClick={close}
+                  className={`${row(active)} py-2`}
+                >
+                  <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
+                  <span className="flex-1">
+                    {label}
+                    {desc && <span className="block text-xs font-normal text-ink/80">{desc}</span>}
+                    {external && <span className="sr-only"> {t.newTab}</span>}
+                  </span>
+                  {external && <span className="text-ink"><ArrowUpRight /></span>}
+                </Tag>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </nav>
+  );
+
+  return (
+    <div ref={wrap} className={embedded ? "contents" : undefined}>
+      <style>{CSS}</style>
+      {/* Véu atrás da barra: o conteúdo que rola some aos poucos antes de
+          chegar nela, em vez de aparecer cortado pelas bordas. */}
+      <div
+        aria-hidden="true"
+        className={`pointer-events-none ${pos} inset-x-0 bottom-0 z-40 h-28 bg-gradient-to-t from-surface from-35% via-surface/85 via-65% to-transparent [view-transition-name:veu]${hide}`}
+      />
+      <nav
+        aria-label={t.nav}
+        className={`${pos} inset-x-3 bottom-3 z-50 pb-[env(safe-area-inset-bottom)] [view-transition-name:barra]${hide}`}
+      >
+        <ul
+          ref={list}
+          className="flex list-none items-stretch justify-between gap-0.5 rounded-[26px] bg-ink/95 p-1.5 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.5)] backdrop-blur-md"
+        >
+          {onBar.map(({ href, label, Icon, active }, i) => (
+            <li key={`${i}-${href}`} className="min-w-0 flex-1">
+              <L href={href} aria-current={active ? "page" : undefined} className={tab(!!active)}>
+                <Icon aria-hidden="true" size={20} strokeWidth={1.75} />
+                <span className="w-full truncate text-center">{label}</span>
+              </L>
+            </li>
+          ))}
+          <li className="min-w-0 flex-1">
+            {/* popovertarget em minúsculas: o React 18 não conhece o atributo e o repassa como está. */}
+            <button
+              type="button"
+              {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { popovertarget: panelId })}
+              className={tab(embedded ? open || moreActive : moreActive)}
+            >
+              <MenuIcon />
+              <span className="w-full truncate text-center">{t.more}</span>
+              <span className="sr-only"> {t.morePagesSr}{moreActive ? ` ${t.currentHere}` : ""}</span>
+            </button>
+          </li>
+        </ul>
+      </nav>
+
+      {embedded ? (
+        open && (
+          <div id={panelId} className="cg-mais-painel cg-mais-painel--embutido">
+            {panelInner}
+          </div>
+        )
+      ) : (
+        <div ref={panel} id={panelId} {...{ popover: "auto" }} className={`cg-mais-painel cg-mais-painel--${hideFrom}`}>
+          {panelInner}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* Painel "Mais": logo acima da barra; entra crescendo a partir do canto do
+   botão "Mais", em 0,18s (igual ao .mais-painel do novo.creeta). */
+const CSS = `
+.cg-mais-painel{
+  position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
+  width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
+  background:#fff; color:var(--color-ink);
+  box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
+  opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
+  transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), overlay 180ms allow-discrete, display 180ms allow-discrete;
+}
+.cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:1; transform:none; }
+@starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:0; transform:translateY(8px) scale(.97); } }
+.cg-mais-painel::backdrop{ background:transparent; }
+.cg-mais-painel--embutido{ position:absolute; z-index:50; }
+@media (prefers-reduced-motion:reduce){
+  .cg-mais-painel{ transform:none; transition:opacity 120ms ease; }
+  @starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ transform:none; } }
+}
+/* A partir do breakpoint a barra não existe: o painel também não. */
+@media (min-width:768px){ .cg-mais-painel--md{ display:none !important; } }
+@media (min-width:1024px){ .cg-mais-painel--lg{ display:none !important; } }
+`;

package/components/BreatheMark.tsx

@@ -0,0 +1,67 @@
+type Props = {
+  /** Lado em px (quadrado). É o tamanho do glifo visível: a caixa do SVG é
+   *  justa ao anel + ponto, sem ar interno (o espaço entre símbolo e nome
+   *  fica a cargo do layout). */
+  size?: number;
+  /** Segundos de um ciclo respiratório completo (inspira+expira). */
+  duration?: number;
+  /** Anima? (ainda respeita prefers-reduced-motion). */
+  animated?: boolean;
+  className?: string;
+  title?: string;
+};
+
+/**
+ * Símbolo vivo do Breathe — um anel aberto (gesto fluido, contínuo) com um
+ * ponto no respiro, abstração do logotipo do creeta (forma redonda + ponto).
+ * NEUTRO: usa currentColor, herda a cor do contexto (a paleta vem de cada app).
+ * "Respira" num pulso suave de escala; respeita prefers-reduced-motion.
+ */
+export function BreatheMark({
+  size = 96,
+  duration = 6,
+  animated = true,
+  className,
+  title = "Breathe",
+}: Props) {
+  return (
+    <span className={className} style={{ display: "inline-flex", lineHeight: 0 }}>
+      <style>{`
+        @keyframes breathe-mark-inhale {
+          0%, 100% { transform: scale(0.93); }
+          50%      { transform: scale(1.05); }
+        }
+        .breathe-mark__g {
+          transform-box: fill-box;
+          transform-origin: center;
+          animation: breathe-mark-inhale var(--breathe-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
+        }
+        .breathe-mark--static .breathe-mark__g { animation: none; }
+        @media (prefers-reduced-motion: reduce) { .breathe-mark__g { animation: none; } }
+      `}</style>
+      <svg
+        width={size}
+        height={size}
+        viewBox="10.5 10 43 43"
+        overflow="visible"
+        role="img"
+        aria-label={title}
+        className={animated ? "" : "breathe-mark--static"}
+        style={{ ["--breathe-dur" as string]: `${duration}s` }}
+      >
+        <g className="breathe-mark__g">
+          {/* anel aberto — gesto contínuo com um respiro no topo */}
+          <path
+            d="M 42 17.5 A 17 17 0 1 1 22 17.5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8.5"
+            strokeLinecap="round"
+          />
+          {/* ponto do respiro */}
+          <circle cx="32" cy="14.5" r="4.4" fill="currentColor" />
+        </g>
+      </svg>
+    </span>
+  );
+}

package/components/Button.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
+
+type Variant = "solid" | "accent" | "outline" | "ghost" | "link";
+type Size = "sm" | "md" | "lg";
+
+const pillBase =
+  "inline-flex items-center justify-center gap-2 rounded-pill font-body font-semibold whitespace-nowrap transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-50";
+
+/* Variante `link`: ação de texto sublinhada (não é pílula) — o irmão leve do
+   botão, mesma tipografia (font-body semibold). Herda a cor do contexto
+   (currentColor), então funciona no claro e sobre fundo escuro. O sublinhado
+   fica a 50% e fecha no hover; uma seta (ícone passado nos filhos) dá um passo
+   pra cima-e-direita. Ignora `size` (é inline, sem pílula). */
+const linkBase =
+  "group inline-flex items-center gap-1.5 font-body font-semibold underline decoration-[1.5px] decoration-current/50 underline-offset-4 transition-[text-decoration-color,text-underline-offset] duration-200 hover:decoration-current hover:underline-offset-[5px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink rounded-[2px] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&>svg]:transition-transform [&>svg]:duration-200 hover:[&>svg]:-translate-y-0.5 hover:[&>svg]:translate-x-0.5 motion-reduce:[&>svg]:transform-none";
+
+const variants: Record<Exclude<Variant, "link">, string> = {
+  // petróleo sólido, texto creme (ex.: "Falar com a equipe")
+  solid: "bg-ink text-surface hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.28)]",
+  // cor de ação (laranja/magenta) + texto on-action (do token, varia por site)
+  accent: "bg-action text-on-action hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.22)]",
+  outline: "border border-line text-ink hover:bg-ink/[0.05]",
+  ghost: "text-ink hover:bg-ink/[0.06]",
+};
+
+const sizes: Record<Size, string> = {
+  sm: "min-h-9 px-4 text-sm",
+  md: "min-h-11 px-5 text-[0.95rem]",
+  lg: "min-h-[52px] px-7 text-base",
+};
+
+type CommonProps = {
+  variant?: Variant;
+  size?: Size;
+  children: ReactNode;
+  className?: string;
+};
+
+type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined };
+type LinkProps = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+/**
+ * Button da família Cuidado Global. Polimórfico: com `href` vira `<a>`
+ * (injete seu Link via wrapper se precisar de roteador), senão `<button>`.
+ * Variantes: solid (petróleo), accent (cor de ação), outline, ghost e
+ * `link` (ação de texto sublinhada — ex.: "Ver todos", "Ação secundária",
+ * "Ver no Google Maps"; herda a cor, serve no claro e no escuro).
+ */
+export function Button(props: ButtonProps | LinkProps) {
+  const { variant = "solid", size = "md", className = "", children, ...rest } = props;
+  const cls =
+    variant === "link"
+      ? `${linkBase} ${className}`
+      : `${pillBase} ${variants[variant]} ${sizes[size]} ${className}`;
+  if ("href" in props && props.href !== undefined) {
+    const { href, ...a } = rest as AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+    return (
+      <a href={href} className={cls} {...a}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button className={cls} {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}>
+      {children}
+    </button>
+  );
+}

package/components/Card.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  /** Vira link se href for passado. */
+  href?: string;
+  /** Eleva no hover (para cards clicáveis). */
+  interactive?: boolean;
+  className?: string;
+};
+
+/**
+ * Card base da família — estilo decidido no DS: **borda discreta + sombra
+ * discreta**, raio 2xl (28px), fundo surface. Com `href` vira link; com
+ * `interactive` eleva no hover. Nada de borda forte ou sombra pesada.
+ */
+export function Card({ children, href, interactive, className = "" }: Props) {
+  const cls = `block rounded-2xl border border-line bg-surface p-[clamp(20px,3vw,32px)] shadow-[0_2px_12px_rgba(20,71,83,0.06)] ${
+    interactive || href
+      ? "transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_14px_34px_rgba(20,71,83,0.12)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:hover:translate-y-0"
+      : ""
+  } ${className}`;
+  if (href) {
+    return (
+      <a href={href} className={cls}>
+        {children}
+      </a>
+    );
+  }
+  return <div className={cls}>{children}</div>;
+}

package/components/Container.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  /** Largura máxima. "content" (padrão) p/ leitura; "wide" p/ heros/rodapé. */
+  width?: "content" | "wide";
+  className?: string;
+};
+
+/**
+ * Container da família Cuidado Global — largura máxima + gutter lateral
+ * consistente (16px no celular). "content" para texto/seções, "wide" para
+ * blocos full-bleed (heros, rodapé).
+ */
+export function Container({ children, width = "content", className = "" }: Props) {
+  const max = width === "wide" ? "max-w-[1600px]" : "max-w-[1120px]";
+  return (
+    <div className={`mx-auto w-full ${max} px-4 md:px-6 ${className}`}>
+      {children}
+    </div>
+  );
+}

package/components/Cortina.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { BreatheMark } from "./BreatheMark";
+
+type Props = {
+  /** Nome da marca (ex.: "creeta", "TTCAB", "Breathe"). */
+  name: ReactNode;
+  /** Linha abaixo do nome (ex.: "Centro de Reequilíbrio Toracoabdominal"). */
+  tagline?: ReactNode;
+  /** Símbolo à esquerda do nome. Padrão: o BreatheMark (anel + ponto). Cada
+   *  site injeta o seu logotipo aqui. */
+  logo?: ReactNode;
+  /** Quando `name` é um wordmark svg: altura dele como fração da altura do
+   *  símbolo, do manual da marca (ex.: `CREETA_LOCKUP.wordmarkPerSymbol`). */
+  wordmarkRatio?: number;
+  /** Lado do símbolo. Padrão `left`; o TTCAB é `right` (`TTCAB_LOCKUP.symbolSide`). */
+  symbolSide?: "left" | "right";
+  /** Chave do sessionStorage (quando há o script de cabeça). */
+  storageKey?: string;
+  /** Chamado quando a cortina termina de subir. */
+  onDone?: () => void;
+  className?: string;
+};
+
+/**
+ * Cortina de entrada da família Cuidado Global — tela cheia, na cor do site
+ * (tokens surface/ink), com o logotipo + nome se formando no centro e a
+ * tagline embaixo; depois ela sobe e mostra a página. Espelha a `Cortina` do
+ * creeta, mas neutra: a paleta e o logotipo vêm de cada app.
+ *
+ * - É toda em CSS (estilo embutido): sem JavaScript ela sobe do mesmo jeito,
+ *   então nunca fica presa na frente do site.
+ * - Não recebe clique nem foco e não existe para leitor de tela (aria-hidden).
+ * - Com movimento reduzido (ou impressão) não aparece.
+ * - Para aparecer só na 1ª visita da sessão, ponha `cortinaHeadScript()` no
+ *   <head> (antes da pintura): em visita repetida o <html> já nasce com
+ *   data-cg-cortina="vista" e a cortina não é desenhada — sem piscar.
+ *
+ * Ao terminar de subir, o <html> ganha data-cg-cortina-fim (para o topo das
+ * páginas "pousar" só depois dela, nunca numa troca de tela) e chama onDone.
+ */
+export function Cortina({ name, tagline, logo, wordmarkRatio, symbolSide = "left", storageKey, onDone, className }: Props) {
+  const el = useRef<HTMLDivElement>(null);
+  const [gone, setGone] = useState(false);
+
+  useEffect(() => {
+    const node = el.current;
+    if (!node) return;
+    const aoTerminar = (e: AnimationEvent) => {
+      if (e.animationName !== "cg-cortina-sobe") return;
+      document.documentElement.setAttribute("data-cg-cortina-fim", "");
+      try {
+        if (storageKey) sessionStorage.setItem(storageKey, "1");
+      } catch {
+        /* sessionStorage bloqueado: a cortina só aparece de novo, nada quebra */
+      }
+      onDone?.();
+      setGone(true);
+    };
+    node.addEventListener("animationend", aoTerminar);
+    return () => node.removeEventListener("animationend", aoTerminar);
+  }, [onDone, storageKey]);
+
+  if (gone) return null;
+
+  return (
+    <div ref={el} className={`cg-cortina${className ? ` ${className}` : ""}`} aria-hidden="true">
+      <style>{CORTINA_CSS}</style>
+      {/* Símbolo à esquerda: ele abraça o bloco nome+tagline. À direita (TTCAB):
+          ele encosta no nome, na mesma linha, e a tagline fica embaixo — senão
+          o símbolo iria parar depois da tagline, longe do wordmark. */}
+      {(() => {
+        const mark = <span className="cg-cortina__mark">{logo ?? <BreatheMark size={60} duration={5} />}</span>;
+        const nameEl = (
+          <span
+            className="cg-cortina__name"
+            style={wordmarkRatio ? ({ "--cg-wordmark": `calc(var(--cg-cortina-mark) * ${wordmarkRatio})` } as CSSProperties) : undefined}
+          >
+            {name}
+          </span>
+        );
+        const tag = tagline ? <span className="cg-cortina__tag">{tagline}</span> : null;
+        return symbolSide === "right" ? (
+          <div className="cg-cortina__lockup cg-cortina__lockup--right">
+            <span className="cg-cortina__row">{nameEl}{mark}</span>
+            {tag}
+          </div>
+        ) : (
+          <div className="cg-cortina__lockup">
+            {mark}
+            <span className="cg-cortina__text">{nameEl}{tag}</span>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}
+
+/**
+ * Script para o <head> (antes da pintura): marca a cortina como vista nesta
+ * sessão, para não repetir ao navegar nem ao recarregar. Sem ele, a cortina
+ * aparece a cada carregamento.
+ *   // Next (app/layout):
+ *   <script dangerouslySetInnerHTML={{ __html: cortinaHeadScript("cg-cortina") }} />
+ */
+export function cortinaHeadScript(storageKey = "cg-cortina") {
+  const k = JSON.stringify(storageKey);
+  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-cortina','vista')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
+}
+
+const CORTINA_CSS = `
+.cg-cortina{
+  --cg-cortina-mark: clamp(40px,7.4vw,60px); /* altura do símbolo */
+  position:fixed; inset:0 0 -40px; padding-bottom:40px;
+  z-index:120; display:grid; place-items:center;
+  border-radius:0 0 32px 32px;
+  background:var(--color-surface,#fff); color:var(--color-ink,#14323a);
+  box-shadow:0 24px 60px -20px rgba(0,0,0,.28);
+  pointer-events:none;
+  animation:cg-cortina-sobe 700ms cubic-bezier(.77,0,.175,1) 2200ms both;
+}
+/* gap ≈ 1/3 do corpo do nome: o anel é curvo, então o vão óptico lê um pouco maior que o geométrico */
+.cg-cortina__lockup{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); padding:0 24px; }
+.cg-cortina__lockup--right{ flex-direction:column; align-items:flex-start; }
+.cg-cortina__row{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); }
+.cg-cortina__lockup--right .cg-cortina__name{ animation-name:cg-cortina-nome-dir; }
+.cg-cortina__mark{ display:inline-flex; color:var(--color-ink,#14323a);
+  animation:cg-cortina-mark 700ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) both; }
+/* símbolo ~1.25× o corpo do nome (a caixa do SVG é justa ao glifo), fluido.
+   Por altura: um símbolo injetado não-quadrado (TTCAB) mantém a proporção. */
+.cg-cortina__mark svg{ height:var(--cg-cortina-mark); width:auto; }
+.cg-cortina__text{ display:flex; flex-direction:column; min-width:0; }
+.cg-cortina__name{
+  font-family:var(--font-heading,system-ui,sans-serif);
+  font-weight:700; font-size:clamp(2rem,6vw,3rem); line-height:1; letter-spacing:-.02em;
+  animation:cg-cortina-nome 600ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) 480ms both;
+}
+.cg-cortina__tag{
+  margin-top:.55rem; font-family:var(--font-body,system-ui,sans-serif);
+  font-size:clamp(.8rem,2.4vw,1rem); line-height:1.3; color:var(--color-ink-soft,#54707a);
+  animation:cg-cortina-tag 500ms ease 820ms both;
+}
+@keyframes cg-cortina-sobe{ to{ transform:translateY(-100%); visibility:hidden; } }
+@keyframes cg-cortina-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
+@keyframes cg-cortina-nome{ from{ opacity:0; transform:translateX(-8px); } }
+@keyframes cg-cortina-nome-dir{ from{ opacity:0; transform:translateX(8px); } }
+@keyframes cg-cortina-tag{ from{ opacity:0; transform:translateY(4px); } }
+html[data-cg-cortina="vista"] .cg-cortina{ display:none; }
+@media (prefers-reduced-motion:reduce){ .cg-cortina{ display:none; } }
+@media print{ .cg-cortina{ display:none; } }
+`;