/* GENERADO por web-legal/generar.py — no editar a mano. */
/* ── design/tokens/colors.css ── */
/* TOUT — color. Paleta de marca cerrada: 5 valores + derivados de opacidad.
   Regla dura: el rojo es ACENTO (CTA, tab activa, notificación), nunca superficie.
   Contraste: los pares AA están APLICADOS (ver MANIFEST.md § 7.1). El dorado
   tipográfico es DIRECCIONAL — -aa sobre claro, --color-text-gold sobre carbón. */
:root {
  /* --- base (los 5 valores de marca, no usar directo en componentes) --- */
  --tout-red:      #8B1E2D;
  --tout-ivory:    #F7F3EE;
  --tout-charcoal: #111111;
  --tout-gold:     #C7A86D;
  --tout-stone:    #D8D6D3;

  /* --- semánticos: color/brand --- */
  --color-brand-primary: var(--tout-red);
  --color-brand-gold:    var(--tout-gold);

  /* --- semánticos: color/surface --- */
  --color-surface-base:    var(--tout-ivory);
  --color-surface-raised:  #FFFFFF;
  --color-surface-sunken:  #ECE7DF;
  --color-surface-premium: var(--tout-charcoal);
  --color-surface-map:     #EAE7E2;
  --color-surface-disabled: var(--tout-stone);

  /* --- semánticos: color/text --- */
  --color-text-primary:       var(--tout-charcoal);
  --color-text-secondary:     #615C56;  /* AA sobre LOS CINCO fondos claros: base 5.99 · raised 6.62 ·
                                           sunken 5.38 · map 5.37 · border/default 4.56 — todos ✓ */
  --color-text-muted:         #9B958D;  /* 2.69:1 ✗ — SÓLO no-texto (puntos de typing, color inerte) */
  --color-text-muted-aa:      #615C56;  /* APLICADO 13 ago 2026 (opción C, INDICE §7.1a). Mismo valor que
                                           text/secondary: no agrega color a la paleta.
                                           Antes #6F6A63, que fallaba sobre sunken (4.36), map (4.35)
                                           y border/default (3.70) — 16 textos en 6 pantallas.
                                           Ya NO es direccional: pasa sobre cualquier fondo claro. */
  --color-text-gold:          var(--tout-gold); /* dorado tipográfico SOBRE CARBÓN: 8.30:1 ✓ */
  --color-text-gold-aa:       #7F6428;  /* APLICADO. 5.06:1 ✓ — dorado tipográfico SOBRE CLARO.
                                           ⚠ direccional: sobre carbón da 3.38:1, ahí va --color-text-gold */
  --color-text-inverse:       var(--tout-ivory);
  /* SE QUEDA CON ALFA, A PROPÓSITO — y esto es un candado, no una preferencia.
     Sirve a DOS fondos distintos: surface/premium (carbón sólido — Badge,
     BarraDeshacer, TarjetaOpcion) y overlay/scrim (carbón al 88 % SOBRE FOTO —
     el hint de Card). NO reintroducir la idea de aplanarlo a un hex fijo:
     serviría al primero y rompería el segundo, que cambia con la foto.
     Un token con alfa que sirve a dos fondos necesita DOS pares en el
     inventario de contraste, no un valor plano — y los dos están: #908D8B
     sobre carbón (5.73) y #959390 sobre el velo (5.50).
     ENMIENDA(2026-08-31, cierre de TD-034): la auditoría CD6 recomendó
     pre-hornearlo como token. Se midió antes de obedecer y la recomendación
     era incorrecta — el caso de Card lo desmiente. Lo que de verdad faltaba
     era el segundo par, que ya está. */
  --color-text-inverse-muted: rgba(247, 243, 238, 0.55);
  --color-text-disabled:      #9B958D;

  /* --- semánticos: color/border --- */
  --color-border-default:  var(--tout-stone);
  --color-border-hairline: rgba(17, 17, 17, 0.09);
  --color-border-gold:     rgba(199, 168, 109, 0.4);
  --color-border-strong:   var(--tout-charcoal);
  --color-border-inverse:        rgba(247, 243, 238, 0.25);  /* borde marfil sobre carbón */
  --color-border-inverse-strong: rgba(247, 243, 238, 0.35);  /* divisor punteado del CTATicket */

  /* --- semánticos: color/overlay --- */
  --color-overlay-scrim: rgba(17, 17, 17, 0.88);
  --color-overlay-modal: rgba(17, 17, 17, 0.55);
  --color-overlay-glass: rgba(17, 17, 17, 0.55);
  --color-overlay-light: rgba(247, 243, 238, 0.95);  /* marfil sobre foto: botón volver, corazón, pill de barajar */

  /* --- semánticos: color/state (derivados, no de marca) --- */
  --color-state-hover-lift-shadow: rgba(17, 17, 17, 0.12);
  --color-state-press-shadow:      rgba(17, 17, 17, 0.25);
}

/* ── design/tokens/shadows.css ── */
/* TOUT — elevación. Nombres por FUNCIÓN, no por tamaño: cada sombra del sistema
   tiene un solo trabajo. Antes eran 11 literales sueltos; son 10 tokens porque
   el sello HOY y la pill de barajar compartían intención con blur distinto
   (8px vs 10px) — se unificaron en --shadow-stamp.

   Dos suben en vez de bajar (offset Y negativo): la ficha del detalle que monta
   sobre el hero, y la franja del CTA, que además es marfil — no es elevación,
   es degradado de protección para que el contenido no choque con el botón. */
:root {
  --shadow-chassis:    0 2px 10px rgba(17, 17, 17, 0.06);   /* @kind shadow */
  --shadow-sticky:     0 6px 14px rgba(17, 17, 17, 0.07);   /* @kind shadow */
  --shadow-floating:   0 2px 8px  rgba(17, 17, 17, 0.18);   /* @kind shadow */
  --shadow-stamp:      0 3px 10px rgba(17, 17, 17, 0.25);   /* @kind shadow */
  --shadow-card-hover: 0 8px 18px var(--color-state-hover-lift-shadow);  /* @kind shadow */
  --shadow-card:       0 10px 26px rgba(17, 17, 17, 0.18);  /* @kind shadow */
  --shadow-cta-hover:  0 10px 24px var(--color-state-press-shadow);      /* @kind shadow */
  --shadow-modal:      0 20px 50px rgba(17, 17, 17, 0.35);  /* @kind shadow */
  --shadow-sheet:      0 -8px 20px rgba(17, 17, 17, 0.14);  /* @kind shadow */
  --shadow-proteccion: 0 -10px 18px rgba(247, 243, 238, 0.9); /* @kind shadow */
}

/* ── design/tokens/borders.css ── */
/* TOUT — grosor de borde. 1px domina (18 de 22 usos); los otros tres son
   deliberados: la píldora de ciudad y el círculo del onboarding piden 1.5, la
   cápsula seleccionada 2, y el subrayado de la tab activa del filtro 2.5. */
:root {
  --border-width-hairline: 1px;    /* @kind other */
  --border-width-medium:   1.5px;  /* @kind other */
  --border-width-thick:    2px;    /* @kind other */
  --border-width-accent:   2.5px;  /* @kind other */
}

/* ── design/tokens/typography.css ── */
/* TOUT — tipografía. Una sola familia (Manrope) en toda la app.
   El peso hace la jerarquía, no el cambio de familia. 800 es el peso dominante. */
:root {
  --font-family-base: "Manrope", system-ui, -apple-system, sans-serif;

  --font-weight-regular:  500;
  --font-weight-medium:   600;
  --font-weight-semibold: 700;
  --font-weight-bold:     800;

  --font-size-overline:        9.5px;
  --font-size-caption:         10px;
  --font-size-meta:            11px;
  --font-size-body-s:          12px;
  --font-size-label:           12.5px;
  --font-size-body:            13.5px;
  --font-size-card-title:      14px;
  --font-size-cta:             15px;   /* alto de tipo de los CTAs. Lo consumen
                                          CTAPrimario y el secundario de HojaPlan,
                                          que debe igualarse al CTA que acompaña. */
  --font-size-section:         17px;
  --font-size-deck-title:      18px;
  --font-size-onboarding-item: 24px;
  --font-size-title:           26px;
  --font-size-title-lg:        30px;

  /* --- web: la única superficie de escritorio del sistema (11 Formulario del
     aliado). La escala de arriba está calibrada a 390px; en web sube un paso
     porque la distancia de lectura es mayor. Cuatro valores, no una escala
     paralela: los títulos de sección reusan --font-size-section y --font-size-title
     como piso de su clamp(). --- */
  --font-size-web-field:  16px;  /* valor de campo. NO bajar: por debajo de 16px
                                    Safari en iOS hace zoom al enfocar el campo. */
  --font-size-web-body:   var(--font-size-cta);  /* cuerpo, etiqueta de tarjeta de
                                    opción y de casilla. ALIAS de --font-size-cta, no
                                    una copia de 15px: en web el control tiene que
                                    medir igual que el CTA que acompaña, y "se mueven
                                    juntos" sin alias es promesa sin candado — si cta
                                    cambia, un duplicado se queda atrás y el check de
                                    paridad no lo vería (compara nombres, no valores).
                                    Resuelve a 15px. */
  --font-size-web-pill:   14px;  /* píldora de selección múltiple: subcategoría,
                                    ciudad, día de la semana, Sí/No. */
  --font-size-web-ficha:  21px;  /* título del plan en la vista previa de la ficha. */

  --letter-spacing-logo:     0.34em;
  --letter-spacing-overline: 0.16em;
  --letter-spacing-badge:    0.18em;
  --letter-spacing-banner:   0.24em;
  --letter-spacing-title:    -0.015em;
  --letter-spacing-normal:   0;

  --line-height-title:       1.12;
  --line-height-card-title:  1.2;
  --line-height-body:        1.5;
  --line-height-description: 1.55;
}

/* ── design/tokens/spacing.css ── */
/* TOUT — espaciado. Escala corta y deliberada; el aire es parte de la marca. */
:root {
  --spacing-0: 0px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 10px;
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
  --spacing-9: 18px;
  --spacing-10: 22px;
  --spacing-11: 26px;
  --spacing-12: 32px;

  --spacing-screen-horizontal:   22px; /* margen lateral de pantalla */
  --spacing-screen-horizontal-lg: 26px; /* onboarding y detalle */
  --spacing-section-gap:          18px;
  --spacing-card-gap:             12px;
  --spacing-row-vertical:         12px;

  --size-screen-width:   390px;
  --size-screen-height:  844px;
  --size-touch-target:   44px;
  --size-tabbar-height:  70px;
  --size-safe-area-bottom: env(safe-area-inset-bottom, 22px); /* indicador de home iOS; 22px de respaldo fuera del dispositivo */
  --size-statusbar-height: 48px;

  /* --- los dos altos de la hoja del mapa. Estaban medidos en JS y llegaban a la
     plantilla por hole, así que el alto no pintaba hasta que cargaba la lógica.
     Nombrados acá, las dos ramas de la hoja son literales. --- */
  --size-sheet-peek: 428px;  /* la hoja asomada: deja ver el mapa arriba */
  --size-sheet-tall: 624px;  /* la hoja alta: lista completa, mapa como respaldo */
  --size-sheet-zona: 372px;  /* la hoja en modo zona: los lugares del racimo, un escalón, sin CTA de aliado */

  /* --- ancho de UNA acción del deslizamiento de una fila (Guardados trae dos:
     Maps y Quitar). El desplazamiento de la fila abierta es dos veces esto, así
     que la fila y el panel ya no pueden desalinearse. --- */
  --size-swipe-action: 64px;

  /* --- alto de control. Se usaban a mano en móvil y en web: CampoTexto ya
     traía 52 hardcodeado y el formulario del aliado lo repetía 19 veces. --- */
  --size-field-height: 52px;   /* campo de texto */
  --size-field-height-lg: 64px; /* campo o fila de dos líneas */
  --size-pill-height:  40px;   /* píldora de selección múltiple */
  --size-row-control:  60px;   /* fila de casilla */
  --size-control-lg:   48px;   /* tarjeta de opción tocable */
  --size-checkbox:     24px;   /* caja de casilla */

  /* --- web (11 Formulario del aliado). El sistema no permite media queries
     —estilos inline— así que el respiro de la única pantalla de escritorio es
     fluido con clamp(). Nombrados para que no se re-deriven a ojo. --- */
  --size-web-prose:        900px;                /* ancho máximo de columna de prosa */
  --size-web-ficha:        372px;                /* ancho de la ficha en la vista previa: espeja los 390px del teléfono menos el aire lateral */
  --size-web-max:          1440px;               /* ancho máximo del lienzo (1.13.1): el ancho al que se dibujó y firmó la pantalla; más allá, se centra */
  --spacing-web-gutter:    clamp(20px, 3vw, 36px);  /* margen lateral del lienzo */
  --spacing-web-section:   clamp(28px, 4vw, 52px);  /* separación entre columnas y respiro vertical del cuerpo */
  --spacing-web-field-gap: clamp(18px, 2vw, 24px);  /* separación entre secciones del formulario */
  --spacing-web-cierre-y:  clamp(36px, 6vw, 84px);  /* respiro vertical de la pantalla de enviado */
  --spacing-web-cierre-x:  clamp(20px, 4vw, 64px);  /* respiro lateral de la pantalla de enviado */
  --spacing-web-cta-x:     clamp(24px, 4vw, 44px);  /* ancho interno del CTA de envío */
}

/* ── design/tokens/radii.css ── */
/* TOUT — radios. Píldora para lo tocable, radios generosos para superficies. */
:root {
  --radius-none:    0px;
  --radius-badge:   6px;
  --radius-input:   10px;
  --radius-thumb:   12px;
  --radius-card-sm: 14px;
  --radius-card:    16px;
  --radius-card-lg: 20px;
  --radius-sheet:   24px;
  --radius-screen:  44px;
  --radius-pill:    999px;
}

/* ── design/tokens/motion.css ── */
/* TOUT — movimiento. Todo lo vivo del producto vive acá:
   loops de invitación (latido, sello) y respuestas al toque. */
:root {
  --duration-fast:   200ms;  /* @kind other */
  --duration-base:   250ms;  /* @kind other */
  --duration-deck:   280ms;  /* @kind other */
  --duration-enter:  350ms;  /* @kind other */
  --duration-message: 450ms; /* @kind other */
  --duration-expand: 450ms;  /* @kind other */
  --duration-burst:  550ms;  /* @kind other */
  --duration-heartbeat: 1700ms; /* @kind other */
  --duration-stamp:  2400ms; /* @kind other */

  --easing-standard:   cubic-bezier(0.33, 0, 0.2, 1);    /* @kind other */
  --easing-decelerate: cubic-bezier(0.3, 0, 0.2, 1);     /* @kind other */
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --easing-burst:      cubic-bezier(0.2, 0.7, 0.3, 1);   /* @kind other */
  --easing-default:    ease;                             /* @kind other */

  --lift-card:   -4px;
  --lift-cta:    -3px;
  --lift-subtle: -2px;
}

@keyframes tout-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  24% { transform: scale(1); }
  36% { transform: scale(1.1); }
  48% { transform: scale(1); }
}
@keyframes tout-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tout-message-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tout-typing-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes tout-stamp-wobble {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(-1deg) scale(1.06); }
}
@keyframes tout-deck-shake {
  0% { transform: translateY(-3px) rotate(-0.5deg); }
  55% { transform: translateY(1.5px) rotate(0.4deg); }
  100% { transform: none; }
}
@keyframes tout-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* --- Adiciones de la entrega v1 (11 pantallas, 6 ago 2026) --- */

/* Cursor de campo de texto. steps(1,end), NO una transición de opacidad:
   un cursor que se desvanece se lee como parpadeo de la pantalla. */
@keyframes tout-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* Spinner de CTAPrimario variante cargando. 700ms linear infinite. */
@keyframes tout-spin {
  to { transform: rotate(360deg); }
}
/* Entrada de BarraDeshacer: sube desde debajo del tab bar. */
@keyframes tout-barra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* Etiqueta que se anota en el quiz: entra desde la izquierda con escala. */
@keyframes tout-entra-tag {
  from { opacity: 0; transform: translateX(-8px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
/* Halo del punto del usuario en el mapa. Lo consume MapaLienzo.jsx.
   Declarado en INDICE §6: este keyframe "va a tokens/motion.css junto a los
   otros 7". El conteo del manifiesto de sync decía 4 y lo omitió — sin él
   MapaLienzo se entrega roto. Por eso el sistema queda en 12, no en 11. */
@keyframes tout-halo {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* ── design/tokens/reset.css ── */
/* TOUT — reset mínimo. Solo lo que no puede vivir en un componente. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-brand-primary); text-decoration: none; }
a:hover { color: #6D1723; }
button { font-family: inherit; }

/* Columna scrolleable de pantalla: scroll real sin barra visible (como en móvil). */
.tout-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tout-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── design/tokens/fonts.css (ruta reescrita) ── */
/* TOUT — familia tipográfica única: Manrope.
   Binario LOCAL, sin dependencia de red: assets/fonts/Manrope-VariableFont_wght.ttf.
   Un solo archivo variable cubre el eje de peso 200–800; el sistema usa 500/600/700/800.
   Licencia SIL OFL 1.1 — el texto vive junto al binario en assets/fonts/OFL.txt.
   La pila de respaldo está en --font-family-base (tokens/typography.css). */
@font-face {
  font-family: "Manrope";
  src: url("/fuentes/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("/fuentes/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── propio de las páginas legales ── */

:root { color-scheme: light; }
body { line-height: var(--line-height-body); }
/* 34rem ≈ 545px, que con el cuerpo de 15px da unos 72 caracteres por línea.
   La medida cómoda para leer corrido es 45–75; medido, 46rem daba 92 y la línea
   quedaba larga — el ojo se pierde al saltar de renglón, y esto es un documento
   de 8.400 palabras que alguien tiene que poder leer entero. NO ensanchar. */
.envoltura { max-width: 34rem; margin: 0 auto; padding: var(--spacing-12) var(--spacing-10) 96px; }
header.marca { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
  padding: var(--spacing-9) var(--spacing-10); border-bottom: var(--border-width-hairline) solid var(--color-border-hairline); }
header.marca a.logo { font-weight: var(--font-weight-bold); font-size: var(--font-size-section);
  letter-spacing: var(--letter-spacing-logo); color: var(--color-text-primary); }
header.marca nav { display: flex; gap: var(--spacing-9); font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-semibold); }
h1 { font-size: var(--font-size-title-lg); line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title); margin: 0 0 var(--spacing-4); }
.vigencia { font-size: var(--font-size-body-s); color: var(--color-text-muted-aa);
  margin: 0 0 var(--spacing-12); }
h2 { font-size: var(--font-size-section); margin: var(--spacing-12) 0 var(--spacing-6);
  padding-top: var(--spacing-8); border-top: var(--border-width-hairline) solid var(--color-border-hairline); }
h3 { font-size: var(--font-size-card-title); margin: var(--spacing-10) 0 var(--spacing-5); }
h4 { font-size: var(--font-size-label); margin: var(--spacing-9) 0 var(--spacing-4);
  color: var(--color-text-secondary); }
p, li { font-size: var(--font-size-web-body); color: var(--color-text-secondary);
  line-height: var(--line-height-description); }
p { margin: 0 0 var(--spacing-7); }
ul { margin: 0 0 var(--spacing-7); padding-left: var(--spacing-10); }
li { margin-bottom: var(--spacing-4); }
footer { border-top: var(--border-width-hairline) solid var(--color-border-hairline);
  padding: var(--spacing-10); text-align: center; font-size: var(--font-size-body-s);
  color: var(--color-text-muted-aa); }
footer a { margin: 0 var(--spacing-4); }

/* Las tablas de los anexos: en un teléfono se desplazan solas en vez de
   romper la columna. */
.tabla { overflow-x: auto; margin: 0 0 var(--spacing-9); }
@media (min-width: 900px) {
  /* La prosa se lee a 34rem, pero una tabla de tres columnas ahogada en ese
     ancho parte cada celda en cinco renglones. Se le deja desbordar hacia los
     dos lados, centrada, sin tocar el ancho del texto. */
  .tabla { width: 44rem; margin-left: -5rem; margin-right: -5rem; }
}
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); }
th, td { text-align: left; vertical-align: top; padding: var(--spacing-6) var(--spacing-7);
  border-bottom: var(--border-width-hairline) solid var(--color-border-hairline); }
table.con-encabezado thead th { font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  background: var(--color-surface-sunken); white-space: nowrap; }
table.campo-valor th[scope=row] { font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); width: 34%; }
td { color: var(--color-text-secondary); line-height: var(--line-height-description); }

/* El trámite de borrado: una tarjeta centrada, no una página de texto. */
.tramite { max-width: 30rem; margin: 0 auto; padding: 64px var(--spacing-10) 96px; }
.tramite h1 { font-size: var(--font-size-title); }
.tramite .bajada { font-size: var(--font-size-web-body); color: var(--color-text-secondary);
  line-height: var(--line-height-description); margin: 0 0 var(--spacing-11); }
label { display: block; font-size: var(--font-size-label); font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4); }
input[type=email] { width: 100%; height: var(--size-field-height-lg); padding: 0 var(--spacing-8);
  font-family: inherit; font-size: var(--font-size-web-field); color: var(--color-text-primary);
  background: var(--color-surface-raised); border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-input); }
input[type=email]:focus { outline: none; border-color: var(--color-text-primary);
  box-shadow: 0 0 0 3px var(--color-border-gold); }
button.cta { width: 100%; margin-top: var(--spacing-9); min-height: var(--size-field-height);
  font-size: var(--font-size-cta); font-weight: var(--font-weight-bold); color: var(--color-text-inverse);
  background: var(--color-brand-primary); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
button.cta:hover { background: #6D1723; }
.nota { font-size: var(--font-size-body-s); color: var(--color-text-muted-aa);
  line-height: var(--line-height-description); margin-top: var(--spacing-9); }
.sello { width: 56px; height: 56px; border-radius: var(--radius-pill); display: flex;
  align-items: center; justify-content: center; margin-bottom: var(--spacing-9);
  background: var(--color-surface-sunken); font-size: 26px; }
@media (max-width: 600px) {
  .envoltura, .tramite { padding-left: var(--spacing-9); padding-right: var(--spacing-9); }
  header.marca { padding: var(--spacing-8) var(--spacing-9); flex-direction: column; align-items: flex-start; gap: var(--spacing-6); }
}