@breathe-ds/ui 0.1.0 → 0.2.0

package/components/marks/creeta.tsx

@@ -1,23 +1,23 @@
 import type { CSSProperties } from "react";
 
 /**
- * Marca do Creeta (Centro de Reequilíbrio Toracoabdominal), copiada de
- * public/brand/creeta-simbolo.svg e creeta-tipo.svg do site. Símbolo (três
- * ondas + ponto magenta) e wordmark "creeta" separados, para a Cortina e o
- * Lockup montarem os arranjos. Não editar à mão: o desenho é o do manual.
- * As cores do símbolo são as do logotipo, não os tokens do site.
+ * Creeta brand (Centro de Reequilíbrio Toracoabdominal), copied from the site's
+ * public/brand/creeta-simbolo.svg and creeta-tipo.svg. Symbol (three waves +
+ * magenta dot) and "creeta" wordmark kept separate, so the Curtain and the
+ * Lockup can assemble the arrangements. Do not edit by hand: the drawing is
+ * the one from the manual. The symbol colors are the logo's, not the site tokens.
  */
 export const CREETA_COLORS = {
-  ondaMedia: "#3B9BAF",
-  arco: "#266675",
-  ondaClara: "#63CACD",
-  ponto: "#A2158A",
+  midWave: "#3B9BAF",
+  arc: "#266675",
+  lightWave: "#63CACD",
+  dot: "#A2158A",
 } as const;
 
 type SymbolProps = {
-  /** Lado em px (caixa quadrada 86 × 86). */
+  /** Side in px (square box, 86 × 86). */
   size?: number;
-  /** Cor única para todas as partes (ex.: "#fff" sobre painel escuro). Padrão: as cores da marca. */
+  /** Single color for every part (e.g. "#fff" on a dark panel). Default: the brand colors. */
   color?: string;
   className?: string;
   title?: string;
@@ -27,31 +27,31 @@ export function CreetaSymbol({ size = 48, color, className, title = "Creeta" }:
   const c = (k: keyof typeof CREETA_COLORS) => color ?? CREETA_COLORS[k];
   return (
     <svg width={size} height={size} viewBox="0 0 86 86" fill="none" role="img" aria-label={title} className={className}>
-      <path d="M85.4746 46.2096C83.9959 65.2746 70.0266 80.8266 51.7546 84.696C51.6493 84.7214 51.544 84.7481 51.4507 84.761C48.7053 85.3293 45.8666 85.62 42.9613 85.6334H42.816C26.4706 84.973 13.4266 71.5053 13.4266 54.9892C13.4266 44.1626 19.0387 34.6309 27.5147 29.1908C30.7093 27.1309 34.3133 25.6397 38.196 24.9001C30.5106 26.8798 24.7547 33.6668 24.3453 41.8653C24.3187 42.1824 24.3186 42.4986 24.3186 42.8157C24.3186 43.1334 24.3187 43.449 24.3453 43.7668C24.8347 60.2574 38.3666 73.473 54.9893 73.473C61.1026 73.473 66.7919 71.6908 71.5719 68.6012C79.1506 63.7293 84.4319 55.6096 85.4746 46.2096Z" fill={c("ondaMedia")} />
-      <path d="M55.98 12.16V12.173C55.9667 18.8012 50.672 24.1746 44.084 24.32H43.8067C43.6747 24.32 43.5427 24.32 43.4107 24.3334H43.3587C43.1733 24.32 43.0014 24.32 42.8174 24.32C41.2854 24.32 39.7933 24.5038 38.38 24.861C38.3147 24.8746 38.2614 24.8881 38.196 24.9012C34.3147 25.6397 30.7094 27.132 27.5147 29.1918C19.0387 34.6309 13.428 44.1642 13.428 54.9892C13.428 71.5064 26.472 84.973 42.8174 85.6334C19.1707 85.6334 0 66.4626 0 42.8173C0 19.1705 19.1707 -3.8147e-05 42.8174 -3.8147e-05C43.028 -3.8147e-05 43.2387 -3.52981e-05 43.4507 0.013298C43.9 0.013298 44.3613 0.0266218 44.8107 0.0399551C51.056 0.554622 55.98 5.78262 55.98 12.16Z" fill={c("arco")} />
-      <path d="M73.4467 31.2278C70.6867 31.2278 68.152 32.1387 66.1187 33.684C63.188 35.9012 61.2867 39.4267 61.2867 43.3882V42.8335C61.2867 53.0387 53.0093 61.3174 42.8027 61.3174C32.9013 61.3174 24.8214 53.5534 24.332 43.784C24.8214 60.2747 38.3534 73.4908 54.976 73.4908C61.0894 73.4908 66.7787 71.708 71.5587 68.619C79.0947 63.7731 84.3547 55.7158 85.44 46.3824C85.4694 45.6944 85.6067 43.4491 85.6067 43.1892C85.5014 36.5611 80.1013 31.2278 73.4467 31.2278Z" fill={c("ondaClara")} />
-      <path d="M71.2799 26.5798C77.1253 26.5798 81.8626 21.8252 81.8626 15.9585C81.8626 10.0933 77.1253 5.33731 71.2799 5.33731C65.4346 5.33731 60.6973 10.0933 60.6973 15.9585C60.6973 21.8252 65.4346 26.5798 71.2799 26.5798Z" fill={c("ponto")} />
+      <path d="M85.4746 46.2096C83.9959 65.2746 70.0266 80.8266 51.7546 84.696C51.6493 84.7214 51.544 84.7481 51.4507 84.761C48.7053 85.3293 45.8666 85.62 42.9613 85.6334H42.816C26.4706 84.973 13.4266 71.5053 13.4266 54.9892C13.4266 44.1626 19.0387 34.6309 27.5147 29.1908C30.7093 27.1309 34.3133 25.6397 38.196 24.9001C30.5106 26.8798 24.7547 33.6668 24.3453 41.8653C24.3187 42.1824 24.3186 42.4986 24.3186 42.8157C24.3186 43.1334 24.3187 43.449 24.3453 43.7668C24.8347 60.2574 38.3666 73.473 54.9893 73.473C61.1026 73.473 66.7919 71.6908 71.5719 68.6012C79.1506 63.7293 84.4319 55.6096 85.4746 46.2096Z" fill={c("midWave")} />
+      <path d="M55.98 12.16V12.173C55.9667 18.8012 50.672 24.1746 44.084 24.32H43.8067C43.6747 24.32 43.5427 24.32 43.4107 24.3334H43.3587C43.1733 24.32 43.0014 24.32 42.8174 24.32C41.2854 24.32 39.7933 24.5038 38.38 24.861C38.3147 24.8746 38.2614 24.8881 38.196 24.9012C34.3147 25.6397 30.7094 27.132 27.5147 29.1918C19.0387 34.6309 13.428 44.1642 13.428 54.9892C13.428 71.5064 26.472 84.973 42.8174 85.6334C19.1707 85.6334 0 66.4626 0 42.8173C0 19.1705 19.1707 -3.8147e-05 42.8174 -3.8147e-05C43.028 -3.8147e-05 43.2387 -3.52981e-05 43.4507 0.013298C43.9 0.013298 44.3613 0.0266218 44.8107 0.0399551C51.056 0.554622 55.98 5.78262 55.98 12.16Z" fill={c("arc")} />
+      <path d="M73.4467 31.2278C70.6867 31.2278 68.152 32.1387 66.1187 33.684C63.188 35.9012 61.2867 39.4267 61.2867 43.3882V42.8335C61.2867 53.0387 53.0093 61.3174 42.8027 61.3174C32.9013 61.3174 24.8214 53.5534 24.332 43.784C24.8214 60.2747 38.3534 73.4908 54.976 73.4908C61.0894 73.4908 66.7787 71.708 71.5587 68.619C79.0947 63.7731 84.3547 55.7158 85.44 46.3824C85.4694 45.6944 85.6067 43.4491 85.6067 43.1892C85.5014 36.5611 80.1013 31.2278 73.4467 31.2278Z" fill={c("lightWave")} />
+      <path d="M71.2799 26.5798C77.1253 26.5798 81.8626 21.8252 81.8626 15.9585C81.8626 10.0933 77.1253 5.33731 71.2799 5.33731C65.4346 5.33731 60.6973 10.0933 60.6973 15.9585C60.6973 21.8252 65.4346 26.5798 71.2799 26.5798Z" fill={c("dot")} />
     </svg>
   );
 }
 
 type WordmarkProps = {
-  /** Altura. Padrão `var(--cg-wordmark, 1em)`: dentro do Lockup/Cortina a
-   *  variável vem da razão do manual (`wordmarkPerSymbol`); solto, 1em. */
+  /** Height. Default `var(--cg-wordmark, 1em)`: inside the Lockup/Curtain the
+   *  variable comes from the manual's ratio (`wordmarkPerSymbol`); standalone, 1em. */
   height?: string;
-  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  /** Default `currentColor`: inherits `ink` (or white on a panel). */
   color?: string;
   className?: string;
   style?: CSSProperties;
   title?: string;
 };
 
-/** Razão do manual: altura do wordmark ÷ altura do símbolo no logotipo
- *  horizontal (40.3 / 86 (nome a 1.4643× no logotipo horizontal)). Passe como `wordmarkRatio` ao Lockup/Cortina. */
-/** No creeta o símbolo fica à esquerda do nome (padrão da família). */
+/** Ratio from the manual: wordmark height ÷ symbol height in the horizontal
+ *  logo (40.3 / 86, with the name at 1.4643× in the horizontal logo). Pass it as `wordmarkRatio` to the Lockup/Curtain. */
+/** In creeta the symbol sits to the left of the name (the family default). */
 export const CREETA_LOCKUP = { wordmarkPerSymbol: 0.469, symbolSide: "left" } as const;
 
-/** Caixa justa ao desenho das letras: 116.66 × 27.53. */
+/** Box tight to the letterforms: 116.66 × 27.53. */
 export function CreetaWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "creeta" }: WordmarkProps) {
   return (
     <svg

package/components/marks/ttcab.tsx

@@ -1,15 +1,15 @@
 import type { CSSProperties } from "react";
 
 /**
- * Marca do TTCAB (Torcicolo Congênito e Assimetrias do Bebê), copiada dos
- * arquivos de public/brand do site. Símbolo (mãe + bebê, laranja) e
- * wordmark "TTCAB" separados, para a Cortina e o Lockup montarem os arranjos.
- * Não editar à mão: o desenho é o do manual da marca.
+ * TTCAB brand (Torcicolo Congênito e Assimetrias do Bebê), copied from the
+ * site's public/brand files. Symbol (mother + baby, orange) and "TTCAB"
+ * wordmark kept separate, so the Curtain and the Lockup can assemble the
+ * arrangements. Do not edit by hand: the drawing is the one from the brand manual.
  */
 type SymbolProps = {
-  /** Largura em px; a altura segue a proporção (136:126). */
+  /** Width in px; height follows the aspect ratio (136:126). */
   size?: number;
-  /** Cor única (ex.: "currentColor" ou "#fff" sobre painel escuro). Padrão: o laranja da marca. */
+  /** Single color (e.g. "currentColor" or "#fff" on a dark panel). Default: the brand orange. */
   color?: string;
   className?: string;
   title?: string;
@@ -28,22 +28,22 @@ export function TtcabSymbol({ size = 48, color = TTCAB_ORANGE, className, title
 }
 
 type WordmarkProps = {
-  /** Altura. Padrão `var(--cg-wordmark, 1em)`: dentro do Lockup/Cortina a
-   *  variável vem da razão do manual (`wordmarkPerSymbol`); solto, 1em. */
+  /** Height. Default `var(--cg-wordmark, 1em)`: inside the Lockup/Curtain the
+   *  variable comes from the manual's ratio (`wordmarkPerSymbol`); standalone, 1em. */
   height?: string;
-  /** Padrão `currentColor`: herda `ink` (ou branco sobre painel). */
+  /** Default `currentColor`: inherits `ink` (or white on a panel). */
   color?: string;
   className?: string;
   style?: CSSProperties;
   title?: string;
 };
 
-/** Razão do manual: altura do wordmark ÷ altura do símbolo no logotipo
- *  horizontal (43.67 / 78.39). Passe como `wordmarkRatio` ao Lockup/Cortina. */
-/** No TTCAB o símbolo fica à DIREITA do nome (logotipo horizontal do manual). */
+/** Ratio from the manual: wordmark height ÷ symbol height in the horizontal
+ *  logo (43.67 / 78.39). Pass it as `wordmarkRatio` to the Lockup/Curtain. */
+/** In TTCAB the symbol sits to the RIGHT of the name (the manual's horizontal logo). */
 export const TTCAB_LOCKUP = { wordmarkPerSymbol: 0.557, symbolSide: "right" } as const;
 
-/** Caixa justa ao desenho das letras: 149.75 × 43.67. */
+/** Box tight to the letterforms: 149.75 × 43.67. */
 export function TtcabWordmark({ height = "var(--cg-wordmark, 1em)", color = "currentColor", className, style, title = "TTCAB" }: WordmarkProps) {
   return (
     <svg

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.1.0",
-  "description": "Breathe DS \u2014 design system da fam\u00edlia Cuidado Global (creeta, ttcab, metodorta). Tokens tematiz\u00e1veis + componentes React.",
-  "license": "UNLICENSED",
+  "version": "0.2.0",
+  "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
+  "license": "MIT",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -11,7 +11,8 @@
     "theme.css",
     "tokens",
     "components",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     "./theme.css": "./theme.css",
@@ -28,11 +29,12 @@
     "./components/Header": "./components/Header.tsx",
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
-    "./components/Cortina": "./components/Cortina.tsx",
+    "./components/Curtain": "./components/Curtain.tsx",
     "./components/Lockup": "./components/Lockup.tsx",
     "./tokens/neutral.css": "./tokens/neutral.css",
     "./components/icons": "./components/icons.tsx",
     "./components/AnchorNav": "./components/AnchorNav.tsx",
+    "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
     "./components/marks/ttcab": "./components/marks/ttcab.tsx",
     "./components/marks/creeta": "./components/marks/creeta.tsx"
   },

package/theme.css

@@ -1,40 +1,40 @@
 /*
   @breathe-ds/ui — theme.css  (tokens-first, v0.1)
 
-  Contrato de tokens da família Cuidado Global (ecossistema RTA/Mariangela).
-  As CORES são PAPÉIS: o valor de cada uma vem de uma CSS var `--cg-*` que
-  CADA SITE define (ttcab petróleo/creme, creeta petróleo/névoa/magenta…).
-  Assim os sites herdam a MESMA estrutura e nomes, com a própria paleta.
+  Token contract of the Cuidado Global family (RTA/Mariangela ecosystem).
+  COLORS are ROLES: the value of each one comes from a `--cg-*` CSS var that
+  EACH SITE defines (ttcab petrol/cream, creeta petrol/mist/magenta…).
+  This way the sites inherit the SAME structure and names, with their own palette.
 
-  Uso no globals.css de um site (Tailwind v4):
+  Usage in a site's globals.css (Tailwind v4):
     @import "tailwindcss";
     @import "@breathe-ds/ui/theme.css";
-    @import "@breathe-ds/ui/tokens/ttcab.css";   (ou defina os --cg-* inline)
+    @import "@breathe-ds/ui/tokens/ttcab.css";   (or define the --cg-* inline)
 
-  Escalas fixas (tipografia-papel, raio, motion) são compartilhadas aqui.
-  Contrastes medidos de cada paleta: ver README.md e os arquivos tokens/*.
+  Fixed scales (typography roles, radius, motion) are shared here.
+  Measured contrasts of each palette: see README.md and the tokens/* files.
 */
 @theme {
-  /* ── Cores (papéis) — valor vem dos --cg-* do site ── */
-  --color-surface: var(--cg-surface);              /* fundo base */
-  --color-surface-panel: var(--cg-surface-panel);  /* painel escuro (footer/CTA) */
-  --color-ink: var(--cg-ink);                      /* texto principal / títulos */
-  --color-ink-soft: var(--cg-ink-soft);            /* texto secundário */
-  --color-ink-body: var(--cg-ink-body);            /* corpo de leitura */
-  --color-action: var(--cg-action);                /* CTA/destaque — nunca texto puro */
-  --color-action-text: var(--cg-action-text);      /* texto na cor de ação (AA) */
-  --color-on-action: var(--cg-on-action);          /* texto SOBRE a cor de ação (botão) */
-  --color-line: var(--cg-line);                    /* hairlines/bordas */
+  /* ── Colors (roles) — value comes from the site's --cg-* ── */
+  --color-surface: var(--cg-surface);              /* base background */
+  --color-surface-panel: var(--cg-surface-panel);  /* dark panel (footer/CTA) */
+  --color-ink: var(--cg-ink);                      /* primary text / headings */
+  --color-ink-soft: var(--cg-ink-soft);            /* secondary text */
+  --color-ink-body: var(--cg-ink-body);            /* body copy */
+  --color-action: var(--cg-action);                /* CTA/highlight — never plain text */
+  --color-action-text: var(--cg-action-text);      /* text in the action color (AA) */
+  --color-on-action: var(--cg-on-action);          /* text ON the action color (button) */
+  --color-line: var(--cg-line);                    /* hairlines/borders */
 
-  /* ── Tipografia (papéis; família real vem dos --cg-font-*) ── */
+  /* ── Typography (roles; actual family comes from --cg-font-*) ── */
   --font-heading: var(--cg-font-heading, system-ui, sans-serif);
   --font-body: var(--cg-font-body, Arial, system-ui, sans-serif);
 
-  /* ── Raio ── */
+  /* ── Radius ── */
   --radius-xl: 24px;
   --radius-2xl: 28px;
   --radius-pill: 9999px;
 
-  /* ── Motion — curva assinatura da família ── */
+  /* ── Motion — the family's signature curve ── */
   --ease-cg: cubic-bezier(0.2, 0.8, 0.2, 1);
 }

package/tokens/creeta.css

@@ -1,21 +1,20 @@
 /*
-  Paleta Creeta (clínica RTA em Floripa) — petróleo + névoa + magenta.
-  Valores do novo.creeta. Contrastes medidos (fórmula WCAG):
-   - surface #eef3f4 / ink #144753 ............ ~9,1:1 (AAA)
-   - surface #eef3f4 / ink-soft #52707a ....... ~4,7:1 (AA)
-   - action #ab2781 (magenta) é o CTA ("Agendar"); texto sobre ele = branco.
+  Creeta palette (RTA clinic in Floripa) — petrol + mist + magenta.
+  Values from novo.creeta. Measured contrasts (WCAG formula):
+   - surface #eef3f4 / ink #144753 ............ ~9.1:1 (AAA)
+   - surface #eef3f4 / ink-soft #52707a ....... ~4.7:1 (AA)
+   - action #ab2781 (magenta) is the CTA ("Agendar"); text on it = white.
 */
 :root {
-  --cg-surface: #eef3f4;        /* névoa */
-  --cg-surface-panel: #144753;  /* petróleo */
-  --cg-ink: #144753;            /* petróleo */
+  --cg-surface: #eef3f4;        /* mist */
+  --cg-surface-panel: #144753;  /* petrol */
+  --cg-ink: #144753;            /* petrol */
   --cg-ink-soft: #52707a;
   --cg-ink-body: #1e4f5b;
   --cg-action: #ab2781;         /* magenta (Agendar) */
-  --cg-action-text: #8f1f6c;    /* magenta mais escuro p/ texto */
-  --cg-on-action: #ffffff;      /* branco sobre magenta */
+  --cg-action-text: #8f1f6c;    /* darker magenta for text */
+  --cg-on-action: #ffffff;      /* white on magenta */
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree */
 }
-CSS

package/tokens/neutral.css

@@ -1,10 +1,10 @@
 /*
-  Paleta NEUTRA — o padrão do Breathe. O design system é neutro de propósito:
-  a cor vem de CADA aplicação (ttcab, creeta…). Use isto como base e sobrescreva
-  os --cg-* no :root do seu site. Monocromático (cinza/quase-preto) pra deixar
-  claro que é um placeholder "traga sua cor".
+  NEUTRAL palette — the Breathe default. The design system is neutral on
+  purpose: color comes from EACH application (ttcab, creeta…). Use this as the
+  base and override the --cg-* in your site's :root. Monochrome (gray/near-black)
+  to make it clear it is a "bring your own color" placeholder.
    - surface #ffffff / ink #18181b ............ ~17:1 (AAA)
-   - surface #ffffff / ink-soft #71717a ....... ~4,8:1 (AA)
+   - surface #ffffff / ink-soft #71717a ....... ~4.8:1 (AA)
 */
 :root {
   --cg-surface: #ffffff;
@@ -16,6 +16,6 @@
   --cg-action-text: #52525b;
   --cg-on-action: #ffffff;
   --cg-line: rgb(0 0 0 / 0.12);
-  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixo da família) */
-  --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree (fixo da família) */
+  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixed across the family) */
+  --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree (fixed across the family) */
 }

package/tokens/ttcab.css

@@ -1,11 +1,11 @@
 /*
-  Paleta TTCAB (petróleo + creme). Contrastes medidos:
-   - surface #fbf5e9 / ink #144753 ............ 9,41:1 (AAA)
-   - surface #fbf5e9 / ink-soft #54707a ....... 4,86:1 (AA)
-   - surface #fbf5e9 / ink-body #1e4f5b ....... 8,32:1 (AAA)
-   - surface #fbf5e9 / action-text #9a5d07 .... 4,90:1 (AA)
-   - surface-panel #144753 / surface (texto) .. 9,41:1 (AAA)
-   - action #f6a22a é DECORATIVO/CTA — nunca texto sobre creme.
+  TTCAB palette (petrol + cream). Measured contrasts:
+   - surface #fbf5e9 / ink #144753 ............ 9.41:1 (AAA)
+   - surface #fbf5e9 / ink-soft #54707a ....... 4.86:1 (AA)
+   - surface #fbf5e9 / ink-body #1e4f5b ....... 8.32:1 (AAA)
+   - surface #fbf5e9 / action-text #9a5d07 .... 4.90:1 (AA)
+   - surface-panel #144753 / surface (text) ... 9.41:1 (AAA)
+   - action #f6a22a is DECORATIVE/CTA — never text on cream.
 */
 :root {
   --cg-surface: #fbf5e9;
@@ -14,7 +14,7 @@
   --cg-ink-soft: #54707a;
   --cg-ink-body: #1e4f5b;
   --cg-action: #f6a22a;
-  --cg-on-action: #144753;   /* ink sobre orange */
+  --cg-on-action: #144753;   /* ink on orange */
   --cg-action-text: #9a5d07;
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */

package/components/Cortina.tsx

@@ -1,152 +0,0 @@
-"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; } }
-`;