/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO CRESVANTA ADVISORY · v2 · VIGENTE desde 2026-09-06
   ───────────────────────────────────────────────────────────────────────
   Entregable 0.2 de la auditoría 360 de Advisory.
   Raíz: DOCUMENTO 14 · Set Normativo de CRESVANTA Advisory v001,
         VIGENTE 2026-09-06 · criterio de aceptación en su §19.2.
   Producido: 2026-09-06 · Cerebro Maestro + cresvanta-design-doctrine.
   APROBADO POR EL FOUNDER · 2026-09-06 21:30. Registrado el mismo día.

   ESTE ARCHIVO ES LA FUENTE EJECUTABLE DEL SISTEMA. Toda pieza lo importa;
   no se reinterpreta. El v1 (aprobado 2026-09-01) queda superado y vive en
   99_SUPERADOS/SISTEMA-DE-DISENO-CRESVANTA_v1_superado_2026-09-06.css.
   El NOMBRE DEL ARCHIVO NO CAMBIA a propósito: la versión vive dentro, y
   así ninguna referencia escrita en la norma se rompe al versionar.

   ADVERTENCIA DE ALCANCE DE LA APROBACIÓN.
   La aprobación pone en vigor el sistema. NO lo da por terminado.
   Terminado (Doc 14 §19.2) = web, campus y facilitador rederivados de aquí
   sin un solo valor propio. Hoy: 0 de 3. Y VERIFICADO el 2026-09-06:
   NINGUNA pieza en producción importa este archivo — el campus corre sobre
   un app.css propio de 228 líneas y 120 tokens. Hasta que eso se corrija,
   este sistema gobierna sobre el papel y no sobre la pantalla.

   QUÉ CONSERVA DEL v1 — íntegro, sin reinterpretar ni un valor:
     tokens de color · ley del volumen · la burbuja · el anillo y su
     gramática · régimen de fondos · Bodoni Moda + Jost · movimiento · aire.
     El v1 es norma aprobada. El v2 lo EXTIENDE; no lo corrige.

   QUÉ AÑADE — lo que faltaba y hacía que cada pieza saliera distinta:
     escala tipográfica · retícula y espaciado · dos densidades ·
     los 5 estados · los 9 componentes base · iconografía · movimiento
     con duraciones nombradas · accesibilidad con cifras · reglas de no-uso.

   DEFINICIÓN DE TERMINADO (Doc 14 §19.2): este archivo NO está terminado
   cuando existe. Está terminado cuando la web, el campus y la herramienta
   del facilitador se han rederivado de él y ninguna de las tres contiene
   un valor que no venga de aquí. Hoy: 0 de 3.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   0 · TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ── 0.1 · COLOR · heredado del v1, sin un solo cambio ──────────────── */
  --marfil:#F3EFE6;        /* fondo principal */
  --blanco:#FBF8F2;        /* fondo elevado · superficies flotantes */
  --carbon:#2A2620;        /* tinta base */
  --carbonInt:#151210;     /* alto contraste */
  --terracota:#B4512F;     /* EL ACENTO. itálicas de marca, superficie, activo */
  --terracotaInt:#8E2E10;  /* acento sobre fondo claro, texto pequeño */

  /* Los 7 gajos del anillo · orden del cónico desde arriba, horario.
     Son IDENTIFICADORES DE DOMINIO (Doc 14 §18), no colores de texto. */
  --taupe:#A9876B;   /* 01 · Marca */
  --dorado:#C9A868;  /* 02 · Portafolio */
  /* 03 · Ventas = terracota */
  --burdeos:#7A2E28; /* 04 · Servicio */
  --piedra:#B7AEA0;  /* 05 · Equipos */
  --oliva:#7B7B5F;   /* 06 · Categorías */
  --rosado:#D9906F;  /* 07 · Canales */

  --line:#DCD3C1;    /* línea DECORATIVA · separadores, reglas de página */
  --gris:#6E6559;    /* texto secundario */
  --ease:cubic-bezier(.22,.61,.28,1);

  /* ── 0.2 · COLOR · NUEVO en v2 · cada uno con su razón ──────────────── */

  /* --lineFuerte existe porque --line NO es usable como borde de control:
     mide 1.30 sobre marfil, y WCAG 1.4.11 exige 3.0 para un elemento de
     interfaz. Este mide 3.24 sobre marfil y 3.51 sobre blanco. VERIFICADO. */
  --lineFuerte:#8F8370;

  /* Estados del acento. El botón primario usa terracotaInt y no terracota:
     blanco sobre terracota mide 4.76 (AA justo) y sobre terracotaInt 7.77
     (AAA). Con un CTA no se raspa el umbral. VERIFICADO. */
  --terracotaHover:#7A2508;
  --terracotaPress:#651E05;

  /* Superficies de aviso. Tintes del marfil, nunca fondos nuevos:
     el régimen de fondos del v1 sigue intacto — solo marfil y blanco
     son fondos de SECCIÓN. Estos son fondos de COMPONENTE. */
  --superficieAviso:#F7EFE9;   /* tinte terracota sobre marfil */
  --superficieCalma:#F1F0E8;   /* tinte oliva sobre marfil */

  /* ── 0.3 · ESCALA TIPOGRÁFICA · 7 pasos · razón 1,28 ────────────────── */
  /* Razón declarada: 1,28. Base 16 px. Se eligió 1,28 y no 1,25 ni 1,333
     porque Bodoni Moda es una Didone de contraste alto: con razón corta
     los pasos display se confunden entre sí, y con razón larga el salto
     del cuerpo al primer título rompe la lectura.
     Cada paso es fluido: clamp(mínimo a 360 px, virtual, máximo a 1440 px). */
  --t1:clamp(11.5px, .30vw + 10.4px, 12.5px);   /* kicker · nota al pie   */
  --t2:clamp(14px,   .40vw + 12.6px, 16px);     /* CUERPO · base          */
  --t3:clamp(17px,   .55vw + 15.0px, 20.5px);   /* entradilla · lead      */
  --t4:clamp(20px,   .90vw + 16.8px, 26px);     /* título de bloque       */
  --t5:clamp(24px,   1.5vw + 18.6px, 33.5px);   /* título de sección      */
  --t6:clamp(29px,   2.4vw + 20.4px, 43px);     /* título de página       */
  --t7:clamp(35px,   4.0vw + 20.6px, 55px);     /* titular · hero         */

  /* ── 0.4 · ESPACIADO · base 8 pt ────────────────────────────────────── */
  /* Todo múltiplo de 8. --e0 es el único medio paso, y existe solo para
     separar un icono de su etiqueta. Cualquier otro uso es una excepción
     y se declara en el código, no se asume. */
  --e0:4px;  --e1:8px;   --e2:16px;  --e3:24px;  --e4:32px;
  --e5:48px; --e6:64px;  --e7:96px;  --e8:128px;

  /* Baseline. Todo interlineado de texto corrido es múltiplo de esto. */
  --baseline:8px;

  /* ── 0.5 · RETÍCULA ─────────────────────────────────────────────────── */
  --grid-cols:12;
  --grid-gutter:var(--e3);                        /* 24 px */
  --grid-margen:clamp(24px, 7vw, 110px);          /* 7% del ancho · v1 §8 */
  --grid-max:1280px;
  --medida:34ch;                                  /* columna de texto · v1 */

  /* ── 0.6 · RADIOS ───────────────────────────────────────────────────── */
  --r1:4px; --r2:8px; --r3:16px; --r-pill:999px; --r-circulo:50%;

  /* ── 0.7 · SOMBRAS · SIEMPRE CÁLIDAS rgba(42,38,32,·) ───────────────── */
  /* Ley del volumen (v1 §1): se quita luz en los bordes, nunca se añade
     blanco en el centro. Ninguna sombra gris, ninguna negra, ningún glow. */
  --sombra-1:0 2px 6px -3px rgba(42,38,32,.14);
  --sombra-2:0 8px 18px -10px rgba(42,38,32,.20), 0 2px 5px -3px rgba(42,38,32,.10);
  --sombra-3:0 20px 34px -20px rgba(42,38,32,.26), 0 5px 12px -8px rgba(42,38,32,.12);
  --sombra-interior:inset 0 -7px 16px -10px rgba(42,38,32,.11);

  /* ── 0.8 · MOVIMIENTO · duraciones nombradas ────────────────────────── */
  --dur-instante:120ms;   /* cambio de estado: hover, foco               */
  --dur-rapida:180ms;     /* press, apertura de menú                     */
  --dur-media:420ms;      /* entrada de componente, cambio de panel      */
  --dur-lenta:900ms;      /* entrada escalonada de sección · v1          */
  --dur-titular:1050ms;   /* el titular sube línea por línea · v1        */
  --dur-gajo:620ms;       /* desprendimiento del gajo · v1               */

  /* ── 0.9 · DENSIDAD · cómoda por defecto ────────────────────────────── */
  --alto-control:48px;
  --pad-control-x:var(--e3);
  --pad-tarjeta:var(--e4);
  --pad-celda:var(--e2) var(--e3);
  --ritmo:var(--e3);
}

/* Densidad compacta. Se activa con data-densidad="compacta" en un ancestro.
   NO cambia tipografía ni color: solo aire. Una interfaz densa que además
   achica la letra deja de ser densa y pasa a ser ilegible. */
[data-densidad="compacta"]{
  --alto-control:40px;
  --pad-control-x:var(--e2);
  --pad-tarjeta:var(--e3);
  --pad-celda:var(--e1) var(--e2);
  --ritmo:var(--e2);
}


/* ═══════════════════════════════════════════════════════════════════════
   1 · BASE Y RETÍCULA
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--marfil);            /* CRESVANTA vive en marfil · v1 §5 */
  color:var(--carbon);
  font-family:"Jost",system-ui,sans-serif;
  font-weight:300;
  font-size:var(--t2);
  line-height:1.72;                    /* v1 · múltiplo visual del baseline */
  -webkit-font-smoothing:antialiased;
}

/* Superficie elevada. El ÚNICO segundo fondo permitido. */
.cv-superficie{background:var(--blanco)}

/* Aire de sección · v1 §8: laterales 7% del ancho, superior 15% del alto. */
.cv-inner{padding:clamp(96px,15vh,170px) var(--grid-margen) clamp(56px,10vh,110px)}

.cv-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  gap:var(--grid-gutter);
  max-width:var(--grid-max);
  margin-inline:auto;
}

/* Tres cortes responsive. Se declaran aquí y NO se inventan otros. */
/* móvil     < 640px  →  4 columnas  */
/* tablet   ≥ 640px   →  8 columnas  */
/* escritorio ≥ 1024px → 12 columnas */
@media (max-width:639.98px){ :root{--grid-cols:4; --grid-gutter:var(--e2)} }
@media (min-width:640px) and (max-width:1023.98px){ :root{--grid-cols:8} }
@media (min-width:1024px){ :root{--grid-cols:12} }

.cv-ritmo > * + *{margin-top:var(--ritmo)}


/* ═══════════════════════════════════════════════════════════════════════
   2 · TIPOGRAFÍA
   Display: Old Standard TT · peso 400 · interlineado 1,1 · tracking −,008em
   Texto:   Jost · pesos 200/300/400 · interlineado 1,72 · medida 34ch

   CAMBIO 2026-09-16 · APROBADO POR EL FOUNDER, en vivo, sobre specimen
   comparativo de 20 candidatos lineales. Bodoni Moda (v1/v2 original)
   quedó descartada tras dos rondas de prueba: Fraunces se rechazó por
   "redonda, se ve barata"; la ronda de slabs (10 opciones) tampoco pasó;
   Old Standard TT fue la aprobada en la ronda de 20. Root de la decisión:
   comparación visual directa, no documento — ver bitácora A112.
   ANULADO: Forum. La web publicada aún lo usa: es defecto, no excepción.
   ═══════════════════════════════════════════════════════════════════════ */

.cv-display{font-family:"Old Standard TT",Didot,Georgia,serif;font-weight:400;
  line-height:1.1;letter-spacing:-.008em;margin:0;color:var(--carbon)}

.cv-texto{font-family:"Jost",system-ui,sans-serif;font-weight:300;
  font-size:var(--t2);line-height:1.72;color:var(--gris);max-width:var(--medida)}

.cv-kicker{font-size:var(--t1);letter-spacing:.44em;text-transform:uppercase;
  color:var(--terracotaInt);font-weight:400;display:block}

/* Los siete pasos, aplicados. El display usa t4 a t7; el texto, t1 a t3. */
.cv-t7{font-size:var(--t7)} .cv-t6{font-size:var(--t6)} .cv-t5{font-size:var(--t5)}
.cv-t4{font-size:var(--t4)} .cv-t3{font-size:var(--t3)} .cv-t2{font-size:var(--t2)}
.cv-t1{font-size:var(--t1)}

/* La itálica de marca. Terracota, y SOLO en display —a partir de t4—,
   porque a tamaño de cuerpo terracota sobre marfil mide 4,40 y falla AA. */
.cv-display em, .cv-marca{font-style:italic;color:var(--terracota)}
.cv-texto em{font-style:italic;color:var(--terracotaInt)}   /* cuerpo: 7,18 */

.cv-lead{font-size:var(--t3);line-height:1.6;color:var(--carbon);max-width:44ch}
.cv-nota{font-size:var(--t1);line-height:1.6;color:var(--gris)}


/* ═══════════════════════════════════════════════════════════════════════
   3 · LOS CINCO ESTADOS · reposo · hover · foco · activo · deshabilitado
   Todo elemento interactivo los tiene los cinco. Faltar uno es defecto.
   ═══════════════════════════════════════════════════════════════════════ */

/* FOCO · uno solo para todo el sistema. Nunca se elimina el outline sin
   sustituirlo: quitarlo deja sin navegación a quien usa teclado. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--terracotaInt);   /* 7,18 sobre marfil · VERIFICADO */
  outline-offset:2px;
  border-radius:var(--r1);
}

/* DESHABILITADO · uno solo para todo el sistema. */
:where(button,input,select,textarea)[disabled],
[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* Se apaga el foco del ratón, se conserva el del teclado. */
:where(a,button):focus:not(:focus-visible){outline:none}


/* ═══════════════════════════════════════════════════════════════════════
   4 · COMPONENTE · BOTÓN · tres variantes
   ═══════════════════════════════════════════════════════════════════════ */

.cv-btn{
  font-family:"Jost",system-ui,sans-serif;font-weight:400;font-size:var(--t2);
  letter-spacing:.02em;
  min-height:var(--alto-control);
  padding:0 var(--pad-control-x);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e1);
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background-color var(--dur-instante) var(--ease),
             border-color var(--dur-instante) var(--ease),
             color var(--dur-instante) var(--ease),
             box-shadow var(--dur-rapida) var(--ease),
             transform var(--dur-rapida) var(--ease);
}

/* PRIMARIO · terracotaInt y no terracota: blanco sobre terracotaInt mide
   7,77 (AAA) frente a 4,76 (AA raspado). Un CTA no raspa el umbral. */
.cv-btn--primario{background:var(--terracotaInt);color:var(--blanco);box-shadow:var(--sombra-2)}
.cv-btn--primario:hover{background:var(--terracotaHover)}
.cv-btn--primario:active{background:var(--terracotaPress);box-shadow:var(--sombra-1);transform:translateY(1px)}

/* SECUNDARIO · borde en lineFuerte, nunca en --line: --line mide 1,30
   sobre marfil y un borde de control necesita 3,0. */
.cv-btn--secundario{background:transparent;color:var(--carbon);border-color:var(--lineFuerte)}
.cv-btn--secundario:hover{background:var(--blanco);border-color:var(--carbon)}
.cv-btn--secundario:active{background:var(--superficieCalma);transform:translateY(1px)}

/* TERCIARIO · texto. Sin caja, con área de toque completa igualmente. */
.cv-btn--terciario{background:transparent;color:var(--terracotaInt);padding-inline:var(--e1)}
.cv-btn--terciario:hover{color:var(--terracotaHover);text-decoration:underline;text-underline-offset:.25em}
.cv-btn--terciario:active{color:var(--terracotaPress)}

/* La burbuja como botón · primitiva de identidad del v1, ahora con estados. */
.cv-btn--burbuja{
  background:radial-gradient(circle at 50% 44%,
    var(--blanco) 0%, var(--blanco) 56%, #F6F0E4 78%, #EDE4D3 92%, #E6DCC9 100%);
  color:var(--carbon);
  box-shadow:0 16px 26px -18px rgba(42,38,32,.24),
             0 4px 9px -6px rgba(42,38,32,.10),
             inset 0 -5px 12px -8px rgba(42,38,32,.10);
}
.cv-btn--burbuja:hover{box-shadow:var(--sombra-3), var(--sombra-interior)}
.cv-btn--burbuja:active{transform:translateY(1px);box-shadow:var(--sombra-1), var(--sombra-interior)}


/* ═══════════════════════════════════════════════════════════════════════
   5 · COMPONENTE · TARJETA
   ═══════════════════════════════════════════════════════════════════════ */

.cv-tarjeta{
  background:var(--blanco);
  border:1px solid var(--line);
  border-radius:var(--r3);
  padding:var(--pad-tarjeta);
  box-shadow:var(--sombra-1);
  transition:box-shadow var(--dur-media) var(--ease),
             border-color var(--dur-instante) var(--ease),
             transform var(--dur-media) var(--ease);
}
/* Solo la tarjeta que ES un enlace o botón reacciona. Una tarjeta estática
   que se levanta al pasar el cursor miente sobre lo que se puede hacer. */
a.cv-tarjeta:hover, button.cv-tarjeta:hover, .cv-tarjeta--accionable:hover{
  box-shadow:var(--sombra-2);border-color:var(--lineFuerte);transform:translateY(-2px)}
a.cv-tarjeta:active, button.cv-tarjeta:active, .cv-tarjeta--accionable:active{
  transform:translateY(0);box-shadow:var(--sombra-1)}

/* Tarjeta de dominio · el color del gajo entra como FILETE, nunca como fondo
   ni como texto: ninguno de los siete pasa contraste de texto (Doc 14 §18). */
.cv-tarjeta--dominio{border-left:3px solid var(--dominio,var(--terracota))}
.cv-dominio--marca     {--dominio:var(--taupe)}
.cv-dominio--portafolio{--dominio:var(--dorado)}
.cv-dominio--ventas    {--dominio:var(--terracota)}
.cv-dominio--servicio  {--dominio:var(--burdeos)}
.cv-dominio--equipos   {--dominio:var(--piedra)}
.cv-dominio--categorias{--dominio:var(--oliva)}
.cv-dominio--canales   {--dominio:var(--rosado)}


/* ═══════════════════════════════════════════════════════════════════════
   6 · COMPONENTE · TABLA
   ═══════════════════════════════════════════════════════════════════════ */

.cv-tabla{width:100%;border-collapse:collapse;font-size:var(--t2);text-align:left}
.cv-tabla caption{
  font-size:var(--t1);letter-spacing:.44em;text-transform:uppercase;
  color:var(--terracotaInt);text-align:left;padding-bottom:var(--e2)}
.cv-tabla th{
  font-weight:400;color:var(--carbon);
  padding:var(--pad-celda);
  border-bottom:1px solid var(--lineFuerte);
  white-space:nowrap}
.cv-tabla td{
  padding:var(--pad-celda);
  border-bottom:1px solid var(--line);
  color:var(--gris);vertical-align:baseline}
.cv-tabla tbody tr:hover td{background:var(--blanco)}
.cv-tabla td.cv-num, .cv-tabla th.cv-num{text-align:right;font-variant-numeric:tabular-nums}
/* Una tabla ancha desborda dentro de su contenedor. La página nunca
   se desplaza en horizontal. */
.cv-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}


/* ═══════════════════════════════════════════════════════════════════════
   7 · COMPONENTE · FORMULARIO
   ═══════════════════════════════════════════════════════════════════════ */

.cv-campo{display:flex;flex-direction:column;gap:var(--e1);margin-bottom:var(--e3)}
.cv-label{font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--carbon)}
.cv-ayuda{font-size:var(--t1);color:var(--gris)}

.cv-input, .cv-select, .cv-textarea{
  font-family:"Jost",system-ui,sans-serif;font-weight:300;font-size:var(--t2);
  color:var(--carbon);
  background:var(--blanco);
  border:1px solid var(--lineFuerte);      /* 3,24 sobre marfil · VERIFICADO */
  border-radius:var(--r2);
  min-height:var(--alto-control);
  padding:var(--e1) var(--e2);
  transition:border-color var(--dur-instante) var(--ease),
             box-shadow var(--dur-instante) var(--ease);
}
.cv-textarea{min-height:calc(var(--alto-control) * 2.5);line-height:1.6;resize:vertical}
.cv-input::placeholder, .cv-textarea::placeholder{color:var(--gris);opacity:1}
.cv-input:hover, .cv-select:hover, .cv-textarea:hover{border-color:var(--carbon)}

/* Error. El color NUNCA va solo: lleva texto. Quien no distingue rojo
   necesita leer qué pasó, no verlo. */
.cv-campo[data-estado="error"] .cv-input,
.cv-campo[data-estado="error"] .cv-select,
.cv-campo[data-estado="error"] .cv-textarea{border-color:var(--burdeos);border-width:2px}
.cv-error-campo{font-size:var(--t1);color:var(--burdeos);display:flex;gap:var(--e0);align-items:baseline}
.cv-error-campo::before{content:"↑";font-size:.9em}


/* ═══════════════════════════════════════════════════════════════════════
   8 · COMPONENTE · NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════ */

.cv-nav{display:flex;align-items:center;gap:var(--e4);
  padding:var(--e3) var(--grid-margen);
  background:var(--marfil);
  border-bottom:1px solid var(--line)}
.cv-nav a{
  font-size:var(--t2);color:var(--carbon);text-decoration:none;
  padding-block:var(--e1);position:relative;
  transition:color var(--dur-instante) var(--ease)}
.cv-nav a:hover{color:var(--terracotaInt)}
/* El estado activo NO se marca solo con color: lleva filete.
   Color solo sería información perdida para quien no lo distingue. */
.cv-nav a[aria-current]{color:var(--terracotaInt)}
.cv-nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--terracotaInt)}


/* ═══════════════════════════════════════════════════════════════════════
   9 · COMPONENTES DE ESTADO · vacío · error · carga
   Los tres que faltaban, y por los que cada pieza los improvisaba distinto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ESTADO VACÍO · nunca dice solo «sin datos». Dice qué es esto,
   por qué está vacío y qué hacer. Regla 1 de creación de valor: quien
   lo ve debe entender algo que antes no entendía. */
.cv-vacio{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--e2);padding:var(--e6) var(--e4);
  background:var(--blanco);border:1px dashed var(--lineFuerte);border-radius:var(--r3)}
.cv-vacio__titulo{font-family:"Old Standard TT",Didot,Georgia,serif;font-size:var(--t4);
  font-weight:400;line-height:1.2;margin:0;color:var(--carbon)}
.cv-vacio__texto{font-size:var(--t2);color:var(--gris);max-width:44ch;margin:0}

/* ERROR · de bloque. Superficie de componente, no fondo de sección. */
.cv-error{
  display:flex;gap:var(--e2);align-items:flex-start;
  padding:var(--e3);border-radius:var(--r2);
  background:var(--superficieAviso);
  border-left:3px solid var(--burdeos)}       /* 8,14 sobre marfil */
.cv-error__titulo{font-size:var(--t2);font-weight:400;color:var(--burdeos);margin:0 0 var(--e0)}
.cv-error__texto{font-size:var(--t2);color:var(--carbon);margin:0}

/* CARGA · sin giro infinito, sin rebote. El sistema no se sacude.
   Latido de opacidad, y siempre acompañado de texto que diga qué carga. */
.cv-carga{display:flex;align-items:center;gap:var(--e2);color:var(--gris);font-size:var(--t2)}
.cv-carga__punto{
  width:var(--e1);height:var(--e1);border-radius:var(--r-circulo);
  background:var(--terracotaInt);animation:cv-latido 1.4s var(--ease) infinite}
.cv-carga__punto:nth-child(2){animation-delay:.18s}
.cv-carga__punto:nth-child(3){animation-delay:.36s}
@keyframes cv-latido{0%,100%{opacity:.25}50%{opacity:1}}

/* Esqueleto de carga · quita luz hacia el canto, como manda la ley
   del volumen. Nunca un barrido blanco brillante: eso es glow. */
.cv-esqueleto{
  background:linear-gradient(90deg,#EAE4D6 0%,#F1ECE0 50%,#EAE4D6 100%);
  background-size:200% 100%;border-radius:var(--r1);
  animation:cv-esqueleto 1.6s var(--ease) infinite}
@keyframes cv-esqueleto{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ═══════════════════════════════════════════════════════════════════════
   10 · ICONOGRAFÍA
   Familia: trazo lineal, esquinas y terminales RECTAS, sin relleno.
   Grosor: 1,5 px a tamaño 24. Escala proporcional — el trazo no engorda.
   Tamaños: solo tres. Cualquier otro es una excepción y se declara.
   Regla de uso: el icono ACOMPAÑA a una etiqueta, no la sustituye.
   Un icono solo, sin texto, exige aria-label obligatorio.
   ═══════════════════════════════════════════════════════════════════════ */

.cv-icono{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:square;stroke-linejoin:miter;
  vertical-align:-.15em}
.cv-icono--sm{width:16px;height:16px;stroke-width:1.75}
.cv-icono--lg{width:32px;height:32px;stroke-width:1.25}


/* ═══════════════════════════════════════════════════════════════════════
   11 · MOVIMIENTO · heredado del v1, con duraciones ahora nombradas
   El titular SUBE línea por línea. Lo demás entra escalonado.
   Nunca aparecer de golpe. Nunca rebotes, confeti ni sacudidas.
   ═══════════════════════════════════════════════════════════════════════ */

.rev{display:block;overflow:hidden}
.rev>span{display:block;transform:translateY(105%);
  transition:transform var(--dur-titular) var(--ease)}
.on .rev>span{transform:translateY(0)}
.up{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-lenta) var(--ease),transform var(--dur-lenta) var(--ease)}
.on .up{opacity:1;transform:none}
.on .d1{transition-delay:.10s} .on .d2{transition-delay:.20s} .on .d3{transition-delay:.30s}
.on .d4{transition-delay:.42s} .on .d5{transition-delay:.54s} .on .d6{transition-delay:.66s}


/* ═══════════════════════════════════════════════════════════════════════
   12 · LA BURBUJA · v1 §2 · primitiva de identidad · íntegra
   ═══════════════════════════════════════════════════════════════════════ */

.cv-burbuja{
  background:radial-gradient(circle at 50% 44%,
    var(--blanco) 0%, var(--blanco) 56%, #F6F0E4 78%, #EDE4D3 92%, #E6DCC9 100%);
  box-shadow:0 20px 34px -20px rgba(42,38,32,.26),
             0 5px 12px -8px rgba(42,38,32,.12),
             inset 0 -7px 16px -10px rgba(42,38,32,.11);
  border-radius:var(--r-circulo);display:flex;align-items:center;justify-content:center;flex:none}
.cv-burbuja--pastilla{border-radius:var(--r-pill);
  box-shadow:0 16px 26px -18px rgba(42,38,32,.24),
             0 4px 9px -6px rgba(42,38,32,.10),
             inset 0 -5px 12px -8px rgba(42,38,32,.10)}
.cv-burbuja--sm{width:clamp(42px,3.5vw,54px);aspect-ratio:1}
.cv-burbuja--md{width:clamp(92px,7.6vw,124px);aspect-ratio:1}
/* El canto termina apenas por debajo del marfil del fondo: si cierra
   más oscuro, dibuja un contorno duro y la pieza se ve pegada encima. */


/* ═══════════════════════════════════════════════════════════════════════
   13 · EL ANILLO · v1 §3 y §4 · íntegro
   SIETE PIEZAS INDEPENDIENTES, no un cónico continuo: cada gajo debe
   poder desprenderse por su bisectriz.
   Geometría (viewBox 760): centro 380,380 · R ext 356 · R int 303 ·
   paso 51,43° · separación 1,4°. Encima: aro inset 7,4% y domo inset 19%.

   GRAMÁTICA — el anillo nunca se mueve por estética:
     GIRA ................. el negocio en movimiento, sin diagnosticar
     SE DETIENE ........... hubo diagnóstico, ya sabemos dónde mirar
     UN GAJO SE DESPRENDE . ese es el freno; el diagnóstico lo separa
     LOS DEMÁS SE APAGAN .. foco, no decoración
     RECORRE SOLO ......... presenta las siete sin que nadie pregunte
   Recorrido: 2,8 s por gajo, SOLO mientras la sección está en pantalla.
   Se detiene con el cursor. Se fija con clic.
   ═══════════════════════════════════════════════════════════════════════ */

.cv-anillo{position:relative;width:100%;max-width:520px;aspect-ratio:1}
.cv-anillo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 26px 38px rgba(42,38,32,.30))}
.cv-gajo{cursor:pointer;outline:none;transform-origin:380px 380px;
  transition:transform var(--dur-gajo) var(--ease), filter .5s var(--ease), opacity .5s var(--ease)}
.cv-anillo.enfocado .cv-gajo{opacity:.34;filter:saturate(.55)}
.cv-gajo.activo{opacity:1;filter:saturate(1.04) drop-shadow(0 14px 20px rgba(42,38,32,.34));
  transform:translate(var(--dx),var(--dy))}   /* --dx/--dy = 20px sobre la bisectriz */
/* El gajo es interactivo: necesita foco de teclado propio. */
.cv-gajo:focus-visible{outline:2px solid var(--terracotaInt);outline-offset:4px}
.cv-aro{position:absolute;inset:7.4%;border-radius:var(--r-circulo);pointer-events:none;
  background:linear-gradient(155deg,#fffdf8,#e7dcc4);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.7), inset 0 -2px 6px rgba(42,38,32,.10)}
.cv-domo{position:absolute;inset:19%;border-radius:var(--r-circulo);pointer-events:none;
  background:radial-gradient(circle at 50% 46%, var(--blanco) 0%, var(--blanco) 52%,
    #F2EBDD 76%, #E6DCC7 92%, #DCD0B8 100%);
  box-shadow:0 26px 40px -18px rgba(42,38,32,.40), 0 8px 14px -8px rgba(42,38,32,.18),
             inset 0 -12px 22px -8px rgba(42,38,32,.16);
  display:flex;align-items:center;justify-content:center}
.cv-domo img{width:56%;opacity:.94}   /* el logo SIEMPRE es el archivo real */


/* ═══════════════════════════════════════════════════════════════════════
   14 · FOTOGRAFÍA · v1 §8
   Contenida — disco, placa o panel. NUNCA a sangre completa: invade
   y le quita aire a la marca.
   ═══════════════════════════════════════════════════════════════════════ */

.cv-foto{display:block;max-width:100%;height:auto;border-radius:var(--r3);
  box-shadow:var(--sombra-3)}
.cv-foto--disco{border-radius:var(--r-circulo);aspect-ratio:1;object-fit:cover}
.cv-foto--placa{border-radius:var(--r2);border:1px solid var(--line)}


/* ═══════════════════════════════════════════════════════════════════════
   15 · ACCESIBILIDAD · cifras medidas, no afirmadas
   Todas calculadas sobre los tokens reales el 2026-09-06. VERIFICADO.

   TEXTO NORMAL · umbral AA 4,5
     carbon      sobre marfil ....... 13,10  AAA
     carbonInt   sobre marfil ....... 16,25  AAA
     gris        sobre marfil .........4,99  AA
     terracotaInt sobre marfil ........7,18  AAA
     burdeos     sobre marfil .........8,14  AAA
     blanco sobre terracotaInt ........7,77  AAA   ← botón primario
     terracota   sobre marfil .........4,40  FALLA ← ver regla de no-uso 3
     blanco sobre terracota ...........4,76  AA justo · no se usa en CTA

   ELEMENTOS DE INTERFAZ · umbral 3,0 (WCAG 1.4.11)
     lineFuerte  sobre marfil .........3,24  OK   ← bordes de control
     lineFuerte  sobre blanco .........3,51  OK
     line        sobre marfil .........1,30  FALLA ← decorativo únicamente

   COLORES DE DOMINIO · ninguno pasa como texto. Es correcto: son
   identificadores, y por eso entran como filete, nunca como tinta.
     taupe 2,88 · dorado 1,97 · piedra 1,91 · rosado 2,24 · oliva 3,78
   ═══════════════════════════════════════════════════════════════════════ */

/* Salto al contenido. Existe en toda pieza con navegación. */
.cv-saltar{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blanco);color:var(--carbon);padding:var(--e2) var(--e3);
  border-radius:0 0 var(--r2) 0}
.cv-saltar:focus{left:0}

/* Solo para lector de pantalla. */
.cv-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Área de toque mínima 44×44 en cualquier control, aunque se vea menor. */
.cv-toque{position:relative}
.cv-toque::after{content:"";position:absolute;inset:50% 50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

@media (prefers-reduced-motion:reduce){
  .rev>span{transform:none!important}
  .up{opacity:1!important;transform:none!important}
  .cv-gajo{transition:none!important}
  .cv-carga__punto,.cv-esqueleto{animation:none!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   16 · REGLAS DE NO-USO
   Cada una con el caso que la motivó. Una prohibición sin su caso se
   olvida; con su caso, se entiende y se sostiene.
   ═══════════════════════════════════════════════════════════════════════ */
/*
   1 · NINGÚN FONDO DE SECCIÓN QUE NO SEA MARFIL O BLANCO.
       Caso: carbón #151210 y warm #EDE3D2 se probaron el 2026-09-01 y se
       rechazaron uno por uno — el carbón ensucia el rosado y el dorado;
       el warm se lee amarillo quemado contra el marfil.
       El carbón es tinta y sombra. No es fondo.

   2 · NINGÚN GLOW, NINGÚN REFLEJO ESPECULAR, NINGÚN FILO BLANCO INTERIOR.
       Caso: todos producen «sombra blanca» y fueron rechazados uno por uno.
       El volumen se construye quitando luz en los bordes.

   3 · TERRACOTA NUNCA COMO TEXTO DE CUERPO SOBRE MARFIL.
       Caso: mide 4,40 y el umbral AA es 4,5. Falla por seis centésimas,
       y falla igual. En cuerpo se usa terracotaInt (7,18). Terracota
       queda para display a partir de t4, superficies y estado activo.

   4 · --line NUNCA COMO BORDE DE UN CONTROL.
       Caso: mide 1,30 sobre marfil contra un umbral de 3,0. Un campo de
       formulario con ese borde es invisible para baja visión. Para eso
       existe --lineFuerte. --line es separador decorativo y nada más.

   5 · NINGÚN COLOR DE DOMINIO COMO COLOR DE TEXTO.
       Caso: dorado 1,97 · piedra 1,91 · rosado 2,24 · taupe 2,88.
       Son identificadores de los siete dominios (Doc 14 §18), no tinta.
       Entran como filete, punto o gajo.

   6 · EL COLOR NUNCA LLEVA LA INFORMACIÓN SOLO.
       Caso: error, estado activo de navegación y dominio llevan además
       texto, filete o icono. Quien no distingue el color debe recibir
       lo mismo.

   7 · NINGUNA TARJETA ESTÁTICA REACCIONA AL CURSOR.
       Caso: una tarjeta que se levanta al pasar por encima promete una
       acción que no existe. Solo reaccionan a.cv-tarjeta, button.cv-tarjeta
       y .cv-tarjeta--accionable.

   8 · NINGÚN OUTLINE DE FOCO SE ELIMINA SIN SUSTITUIRLO.
       Caso: quitarlo deja sin navegación a quien usa teclado, y no se ve
       en las pruebas porque quien prueba usa ratón.

   9 · NINGÚN TAMAÑO DE TEXTO FUERA DE LOS SIETE PASOS.
       Caso: es exactamente así como se llegó a las 142 líneas del v1 —
       cada pieza eligiendo su tamaño. Un tamaño nuevo se añade a la
       escala o no se usa.

  10 · NINGÚN ESPACIADO FUERA DE LA BASE 8.
       Caso: el mismo. --e0 (4 px) es el único medio paso y solo separa
       un icono de su etiqueta.

  11 · NINGUNA FOTOGRAFÍA A SANGRE COMPLETA.
       Caso: invade y le quita aire a la marca. Va contenida en disco,
       placa o panel.

  12 · FORUM NO SE USA. NUNCA.
       Caso: anulada el 2026-09-01 por el Sistema de Diseño v1. La web
       publicada aún la usa: es un defecto declarado, no una excepción
       que autorice repetirla.

  13 · NINGUNA PIEZA SIN RAÍZ DECLARADA.
       Caso: Doc 14 §20. Una pieza entregada sin declarar de qué deriva
       es incidente aunque haya gustado — improvisar algo que gusta crea
       la ilusión de que hay sistema, y la pieza siguiente no podrá
       parecerse sin que nadie sepa por qué.
   ═══════════════════════════════════════════════════════════════════════ */