/* =====================================================================
   TokenizaUY — sistema visual v2 · fintech clara y moderna

   La ÚNICA hoja compartida entre el sitio estático de la plataforma
   (apps/landing) y las páginas que arma el servidor (sitio de cada
   empresa, marketplace, cuenta). La sirve el servidor en todos los hosts
   en /assets/css/sistema.css, con una versión por contenido (?v=…) para
   que se cachee para siempre y se renueve sola con cada cambio.

   Portada a mano del sistema.css del diseñador: los nombres de clase son
   los suyos. Lo que se agregó (encabezado plegable sin JavaScript, barra
   de abajo del teléfono, pie legal, avisos, tablas, encabezado de la
   plataforma y los alias del CSS viejo) sigue sus mismas reglas.

   Cada empresa pisa SOLO los ganchos de marca de §1; los calcula el
   servidor (cssMarca en packages/api/src/sistema.js) para que el texto
   encima de su color siempre se lea. Nada de esta hoja depende de qué
   par de colores eligió la empresa.

   Índice
     1. Tokens y ganchos de marca
     2. Alias de las variables viejas (CSS que todavía no se migró)
     3. Base
     4. Tipografía y cifras
     5. Botones
     6. Chips, etiqueta de demo y píldora «En vivo»
     7. Campos: importe, segmentado, opción
     8. Avisos (recuadro ok / aviso / error / info / nota)
     9. Barra de avance
    10. Encabezado .top (empresa y plataforma) y menú plegable
    11. Bandas de arriba: demo y cuenta en revisión
    12. Barra de abajo del teléfono (tabbar)
    13. Pie legal
    14. Barra fija de acción
    15. Ficha: portada, hoja, cabeza, tarjeta en vivo
    16. Índice pegajoso, secciones y tarjetas
    17. Lo esencial, ¿cuánto cobrás?, reparto
    18. Gráficos (.gf-*) y barras horizontales
    19. Hitos, datos con ícono, acordeón, lista de datos
    20. Carrusel, fotos y documentos
    21. Tablas
    22. Invertir y escritorio en dos columnas
    23. Movimiento reducido
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens y ganchos de marca
   --------------------------------------------------------------------- */
:root {
  --blanco: #FFFFFF;
  --gris-50: #F5F7FA;
  --gris-100: #EDF1F5;
  --gris-200: #E2E7EE;
  --linea: #E2E7EE;
  --linea-fuerte: #C9D1DC;
  --borde-campo: #8792A2;          /* 3,3:1 sobre blanco: el borde de un campo se tiene que ver */
  --tinta: #0B1220;                /* títulos y cifras · 18,9:1 */
  --texto: #334155;                /* texto corrido · 10,4:1 */
  --sec: #586377;                  /* secundario · 6,1:1 blanco / 5,6:1 gris-50 */
  --decor: #94A0B2;                /* solo decoración, nunca texto */

  --accion-plataforma: #0F766E;    /* verde azulado · 5,5:1 con blanco */
  --ok: #157046;  --ok-50: #E3F4EA;
  --aviso: #8A5300; --aviso-50: #FDF2DC;
  --error: #B42318; --error-50: #FDECEA;
  --info: #1D5FA8; --info-50: #E7F0FA;
  --vivo: #16A34A;                 /* el punto «En vivo» (no es texto) */
  --foco: #2B6BB5;

  /* Las series de datos tienen color FIJO en todos los gráficos: la misma
     cosa se ve igual en la ficha, en el panel y en el marketplace. */
  --s-colocacion: #2B6BB5;
  --s-cobros: #1F8F67;
  --s-retencion: #C27716;
  --s-declarado: #A84A86;
  --s-otros: #8A94A3;

  /* Ganchos de marca. Los valores de acá son los de la plataforma; cada
     empresa los pisa con un :root propio que arma el servidor.
       --primario         el color de la empresa (encabezado, sellos)
       --sobre-primario   texto encima del primario (blanco o tinta)
       --primario-velo    el primario teñido: hover, botón del menú, cajas de la
                          portada. Con --sobre-primario encima sigue en 4,5:1
       --primario-velo-fuerte  el del enlace de la página actual (ídem)
       --primario-solido  el primario usable como trazo sobre blanco (≥3:1)
       --acento           el acento tal cual lo eligió la empresa
       --accion           el ÚNICO color de acción (botones)
       --accion-hover     la acción al pasar el mouse
       --sobre-accion     texto encima de la acción (≥4,5:1)
       --accion-texto     la acción usada como TEXTO sobre blanco (≥4,5:1)
       --accion-borde     borde de un botón cuya acción casi no se ve sobre blanco */
  --primario: #0B1220; --sobre-primario: #FFFFFF; --primario-solido: #0B1220;
  --primario-velo: #282E3B; --primario-velo-fuerte: #3C414D;
  --acento: #0F766E; --accion: #0F766E; --accion-hover: #0B5F59; --sobre-accion: #FFFFFF;
  --accion-texto: #0F766E; --accion-borde: transparent;
  --accion-suave: color-mix(in srgb, var(--accion) 10%, #FFFFFF);

  --f-titulo: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Solo para lo que es código de verdad: direcciones 0x…, huellas,
     referencias de transferencia. Las cifras NO van acá: van en la letra
     de texto con dígitos tabulares. */
  --f-codigo: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r: 12px; --r-card: 16px; --r-grande: 24px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(11, 18, 32, .05);
  --sombra-card: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px rgba(11, 18, 32, .07);
  --sombra-flota: 0 -6px 24px rgba(11, 18, 32, .10);
  --ancho: 1200px;                 /* el .contenedor */
  --ancho-main: 960px;             /* el <main> de las páginas que todavía no se migraron */

/* ---------------------------------------------------------------------
   2. Alias de las variables viejas
   El CSS de cada módulo (deuda, circuito, pozo) y las reglas de página
   que todavía no se migraron piden estas variables por su nombre viejo.
   Apuntándolas a los tokens nuevos heredan la paleta y la letra nuevas
   sin tocarlos. Quien migra una pantalla usa los nombres de §1.
   --------------------------------------------------------------------- */
  --hueso: var(--gris-50);
  --titulo: var(--tinta);
  --cuerpo: var(--texto);
  --tenue: var(--sec);
  --dorado: var(--aviso);
  --borde: var(--linea);
  --tarjeta: var(--blanco);
  --font-display: var(--f-titulo);
  --font-titulos: var(--f-titulo);
  --font-sans: var(--f-texto);
  /* La letra de máquina se fue del sistema: lo que pedía «mono» era una
     cifra, y una cifra va en la letra de texto con dígitos tabulares
     (las reglas viejas ya traen su font-variant-numeric). */
  --font-mono: var(--f-texto);
  --mono: var(--f-texto);
}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--blanco); color: var(--texto); font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
video, canvas { max-width: 100%; }
a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--primario-solido); }
a:hover { color: var(--texto); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .contenedor { padding: 0 32px; } }
code, .codigo { font-family: var(--f-codigo); font-size: .875em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   4. Tipografía y cifras
   Plus Jakarta Sans para títulos, Inter para todo lo demás. Las cifras
   grandes van en Inter 800 con dígitos tabulares: ocupan siempre el
   mismo ancho y no saltan cuando un contador sube.
   --------------------------------------------------------------------- */
h1, h2, h3, .titulo { font-family: var(--f-titulo); color: var(--tinta); margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.12; font-weight: 800; }
h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.2; font-weight: 700; }
h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.sec { color: var(--sec); }
.chico { font-size: .875rem; }
.mini { font-size: .8125rem; }
.cifra { font: 700 1.25rem/1.2 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.cifra-xl { font: 800 clamp(2.125rem, 1.8rem + 1.4vw, 2.75rem)/1.05 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }

/* ---------------------------------------------------------------------
   5. Botones — 52 px de alto, un solo color de acción por sitio
   --------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent; font: 600 1rem/1 var(--f-texto); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-primario { background: var(--accion); color: var(--sobre-accion); border-color: var(--accion-borde); box-shadow: 0 1px 2px rgba(11,18,32,.12); }
.btn-primario:hover { background: var(--accion-hover); color: var(--sobre-accion); }
.btn-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-secundario:hover { background: var(--gris-50); color: var(--tinta); }
.btn-suave { background: var(--gris-100); color: var(--tinta); }
.btn-suave:hover { background: var(--gris-200); color: var(--tinta); }
.btn-bloque { width: 100%; }
.btn-chico { min-height: 40px; padding: 0 14px; font-size: .9375rem; border-radius: 10px; }
.btn-redondo { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--tinta); box-shadow: var(--sombra-1); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
/* Un botón dentro de un texto largo no se parte en dos renglones; en el
   teléfono, uno de ancho completo puede envolver en vez de desbordar. */
.btn-bloque { white-space: normal; text-align: center; line-height: 1.2; }

/* ---------------------------------------------------------------------
   6. Chips, etiqueta de demo y píldora «En vivo»
   --------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--gris-100); color: var(--texto); font: 600 .8125rem/1.2 var(--f-texto); white-space: nowrap; }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip.publica, .chip.ok { background: var(--ok-50); color: var(--ok); }
.chip.privada, .chip.info { background: var(--info-50); color: var(--info); }
.chip.aviso { background: var(--aviso-50); color: var(--aviso); }
.chip.error { background: var(--error-50); color: var(--error); }
.chip.oscuro { background: var(--tinta); color: #fff; }
.etiqueta-demo { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--aviso-50); color: #6B4100; font: 700 .6875rem/1 var(--f-texto); letter-spacing: .05em; }
.en-vivo-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--ok-50); color: var(--ok); font: 700 .8125rem/1 var(--f-texto); }
.en-vivo-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: latido 1.8s infinite; }
/* Desconectado: el punto se apaga y deja de latir; el texto lo dice. */
.en-vivo-pill.apagada { background: var(--gris-100); color: var(--sec); }
.en-vivo-pill.apagada i { background: var(--decor); animation: none; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

/* ---------------------------------------------------------------------
   7. Campos
   --------------------------------------------------------------------- */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.campo label, .etiqueta { font: 600 .9375rem/1.3 var(--f-texto); color: var(--tinta); }
.campo .ayuda { font-size: .8125rem; color: var(--sec); margin: 0; }
.campo .error-campo { font-size: .8125rem; color: var(--error); font-weight: 600; margin: 0; }
/* Un campo de texto común, con el mismo borde y foco que el importe. */
.entrada { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--borde-campo); border-radius: var(--r); background: #fff; color: var(--tinta); font: 400 1rem var(--f-texto); }
.entrada:focus { outline: 0; border-color: var(--foco); box-shadow: 0 0 0 4px rgba(43,107,181,.18); }
textarea.entrada { min-height: 120px; padding: 12px 14px; line-height: 1.5; }
.importe { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 16px; border: 1.5px solid var(--borde-campo); border-radius: var(--r); background: #fff; }
.importe:focus-within { border-color: var(--foco); box-shadow: 0 0 0 4px rgba(43,107,181,.18); }
.importe span { font: 600 1.0625rem var(--f-texto); color: var(--sec); }
.importe input { flex: 1; min-width: 0; border: 0; outline: 0; font: 700 1.5rem var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; background: transparent; }
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--gris-100); border-radius: var(--r); }
.segmentado button, .segmentado a { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--texto); font: 600 .875rem/1.2 var(--f-texto); cursor: pointer; text-decoration: none; display: grid; place-items: center; text-align: center; padding: 4px 8px; }
.segmentado [aria-pressed="true"], .segmentado [aria-selected="true"], .segmentado [aria-current="true"], .segmentado [aria-current="page"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(11,18,32,.12); }
.segmentado small { display: block; font-weight: 500; color: var(--sec); font-size: .75rem; }
.opcion { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: var(--r); cursor: pointer; background: #fff; }
.opcion input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); }
.opcion b { display: block; color: var(--tinta); }
.opcion small { color: var(--sec); font-size: .8125rem; }
.opcion:has(input:checked) { border-color: var(--tinta); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (max-width: 759px) { .entrada, .importe input { font-size: max(16px, 1em); } }

/* ---------------------------------------------------------------------
   8. Avisos
   Un recuadro con un tono. Va con clase propia (.recuadro) y no como
   .aviso suelto: .aviso ya es un tono del chip.
     <div class="recuadro ok" role="status"><svg…/><div><b>Listo</b><p>…</p></div></div>
   --------------------------------------------------------------------- */
.recuadro { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r); background: var(--gris-50); color: var(--texto); font-size: .9375rem; line-height: 1.5; }
.recuadro:not(:has(> svg)) { grid-template-columns: minmax(0, 1fr); }
.recuadro > svg { width: 20px; height: 20px; margin-top: 1px; }
.recuadro b { color: inherit; }
/* Renglones legibles aunque el recuadro vaya a todo el ancho. */
.recuadro p { margin: 2px 0 0; max-width: 75ch; }
.recuadro p:first-child { margin-top: 0; }
.recuadro a { color: inherit; font-weight: 600; }
.recuadro.ok { background: var(--ok-50); color: #0F4F31; }
.recuadro.ok > svg { color: var(--ok); }
.recuadro.aviso { background: var(--aviso-50); color: #5E3A00; }
.recuadro.aviso > svg { color: var(--aviso); }
.recuadro.error { background: var(--error-50); color: #8A1A12; }
.recuadro.error > svg { color: var(--error); }
.recuadro.info { background: var(--info-50); color: #164A84; }
.recuadro.info > svg { color: var(--info); }
.recuadro.nota { background: var(--gris-50); color: var(--texto); border: 1px solid var(--linea); }
.recuadro.nota > svg { color: var(--sec); }

/* ---------------------------------------------------------------------
   9. Barra de avance
   <div class="barra"><i style="width:45%"></i><s style="left:75%"></s></div>
   --------------------------------------------------------------------- */
.barra { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--gris-100); }
.barra > i { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: var(--r-pill); background: var(--s-colocacion); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.barra > s { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tinta); }
.barra-rotulos { position: relative; height: 18px; font-size: .75rem; color: var(--sec); }
.barra-rotulos span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
/* Un rótulo pegado a un borde no se sale de la barra. */
.barra-rotulos span.ini { transform: none; }
.barra-rotulos span.fin { transform: translateX(-100%); }

/* ---------------------------------------------------------------------
   10. Encabezado .top
   El de la empresa es del color de su marca; el de la plataforma
   (.top.claro) es blanco con el logo de TokenizaUY.

   Los enlaces están SIEMPRE en el HTML y sin JavaScript se ven,
   envolviendo debajo de la marca. Recién cuando el script pone la clase
   «js» en <html>, debajo de 900 px se pliegan detrás del botón: un menú
   que no abre nada sin JavaScript dejaría la navegación inalcanzable.
   Con sesión, y en el de la plataforma, se pliegan hasta 1199 px (ver
   más abajo).

   Encima del primario nada lleva opacidad ni un gris fijo: el texto va
   en --sobre-primario pleno y los fondos de hover y de la página actual
   son los velos que calcula cssMarca, que no lo bajan de 4,5:1.
   --------------------------------------------------------------------- */
.top { position: relative; z-index: 40; background: var(--primario); color: var(--sobre-primario); border-bottom: 1px solid var(--primario-borde, transparent); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
/* La marca mide lo que mide su nombre y crece para empujar el menú a la
   derecha. Si el menú no entra al lado, el menú baja de renglón: el
   nombre de la empresa no se achica para hacerle lugar (con base 0 se
   achicaba hasta desaparecer). Solo si el nombre no entra ni solo —un
   teléfono angosto— se corta con «…». */
.top .marca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: inherit; text-decoration: none; }
.top .logo { height: 32px; width: auto; border-radius: 6px; flex: none; }
.top .inicial { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--sobre-primario); color: var(--primario); font: 800 1rem/1 var(--f-titulo); }
.top .nombre { font: 600 .9375rem/1.2 var(--f-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.top nav a, .top .linkbtn { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; color: inherit; text-decoration: none; font: 500 .9375rem/1.2 var(--f-texto); white-space: nowrap; }
.top nav a:hover, .top .linkbtn:hover { background: var(--primario-velo); color: inherit; }
/* La página actual: el velo fuerte y la letra más pesada (no depende solo
   del color). Un botón de acción del menú conserva su color. */
.top nav a[aria-current="page"]:not(.btn) { background: var(--primario-velo-fuerte); font-weight: 600; }
.top nav .ingresar { border: 1px solid currentColor; margin-left: 6px; }
.top .linkbtn { background: none; border: 0; cursor: pointer; }
.top .inline { display: inline; margin: 0; }
.top .quien { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; font-size: .8125rem; }
/* El anillo de foco cae afuera del elemento, sobre el primario: va del
   color del texto del encabezado, que es el que tiene contraste ahí. */
.top :focus-visible { outline-color: var(--sobre-primario); }
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; flex: none; border-radius: 10px; border: 0; background: var(--primario-velo); color: inherit; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .ico-cerrar, .menu-btn[aria-expanded="true"] .ico-menu { display: none; }
.menu-btn[aria-expanded="true"] .ico-cerrar { display: block; }
@media (max-width: 899px) {
  html.js .menu-btn { display: grid; }
  /* Plegado, el menú sale del renglón: la marca vuelve a base 0 para que
     el botón quede siempre a su lado, aunque el nombre sea largo. */
  html.js .top .marca { flex-basis: 0; }
  html.js .top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 10px 20px 16px; max-height: calc(100vh - 120px); overflow: auto; background: var(--primario); color: var(--sobre-primario); border-top: 1px solid rgba(127,127,127,.25); box-shadow: 0 14px 28px rgba(8,14,24,.22); }
  html.js .top nav.abierto { display: flex; }
  html.js .top nav a, html.js .top nav .linkbtn { min-height: 48px; width: 100%; justify-content: center; margin-left: 0; }
  html.js .top nav .inline { display: block; }
  html.js .top.claro nav a.btn-primario { margin: 6px 0 0; font-weight: 600; }
  /* El correo de la sesión no se esconde: se muda adentro del menú, que
     es donde hay lugar. Saber con qué cuenta estás mirando importa. */
  html.js .top nav .quien { display: block; max-width: none; text-align: center; padding: 4px 0; }
  .top .quien { max-width: 40vw; }
}
/* Entre 900 y 1199 px dos encabezados no entran en un renglón y se
   pliegan igual que en el teléfono: el de la empresa con sesión (trae
   .quien: el correo, «Mi panel», «Salir»), que le comía el nombre a la
   empresa hasta unos 1170 px, y el de la plataforma, que lleva siete
   destinos. Abren como un panel bajo el botón: a esta anchura, uno de
   borde a borde estira cada enlace un metro. Un navegador sin :has() no
   pliega el de la sesión, y su menú baja de renglón. */
@media (min-width: 900px) and (max-width: 1199px) {
  html.js .top:is(.claro, :has(.quien)) .menu-btn { display: grid; }
  html.js .top:is(.claro, :has(.quien)) .marca { flex-basis: 0; }
  html.js .top:is(.claro, :has(.quien)) nav { display: none; position: absolute; top: 100%; left: auto; right: 32px; width: 340px; z-index: 40; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 10px 16px 16px; max-height: calc(100vh - 120px); overflow: auto; background: var(--primario); color: var(--sobre-primario); border-top: 1px solid rgba(127,127,127,.25); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 14px 28px rgba(8,14,24,.22); }
  html.js .top:is(.claro, :has(.quien)) nav.abierto { display: flex; }
  html.js .top:is(.claro, :has(.quien)) nav a, html.js .top:is(.claro, :has(.quien)) nav .linkbtn { min-height: 48px; width: 100%; justify-content: center; margin-left: 0; }
  html.js .top:is(.claro, :has(.quien)) nav .inline { display: block; }
  html.js .top.claro nav a.btn-primario { margin: 6px 0 0; font-weight: 600; }
  html.js .top:has(.quien) nav .quien { display: block; max-width: none; text-align: center; padding: 4px 0; }
}
/* El de la plataforma: blanco, la marca de TokenizaUY y «Ver proyectos».
   Sobre blanco los velos son los grises del sistema. */
.top.claro { --primario: #FFFFFF; --sobre-primario: var(--tinta); --primario-velo: var(--gris-100); --primario-velo-fuerte: var(--gris-200); background: #fff; color: var(--tinta); border-bottom: 1px solid var(--linea); }
.top.claro .marca svg { width: 32px; height: 32px; flex: none; }
.top.claro .marca b { font: 800 1.0625rem/1 var(--f-titulo); letter-spacing: -.02em; color: var(--tinta); }
.top.claro .marca small { display: block; font: 500 .6875rem/1.2 var(--f-texto); color: var(--sec); letter-spacing: 0; margin-top: 2px; }
.top.claro nav a.btn-primario { color: var(--sobre-accion); margin-left: 8px; }
.top.claro nav a.btn-primario:hover { background: var(--accion-hover); }
.top.claro :focus-visible { outline-color: var(--foco); }

/* ---------------------------------------------------------------------
   11. Bandas de arriba
   Los textos de estas bandas son fijos (demostración, cuenta en
   revisión): no se acortan ni se esconden en el teléfono, envuelven.
   --------------------------------------------------------------------- */
.aviso-demo { background: var(--aviso-50); color: #5E3A00; text-align: center; padding: 5px 16px; font: 500 .75rem/1.4 var(--f-texto); text-wrap: balance; }
.aviso-pend { background: var(--info-50); color: #164A84; text-align: center; padding: 8px 16px; font: 500 .8125rem/1.45 var(--f-texto); text-wrap: balance; border-bottom: 1px solid #CFE0F3; }
.aviso-pend a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------------
   12. Barra de abajo del teléfono
   Cuatro destinos siempre a la vista, como en cualquier app. Solo en
   pantallas chicas y con JavaScript (el «Más» abre el menú de arriba).
   No va en las pantallas que llevan su propia acción abajo (body.con-barra).
   --------------------------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 759px) {
  html.js .tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--sombra-flota); }
  html.js .tabbar a, html.js .tabbar button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px 0; border: 0; border-radius: var(--r); background: none; color: var(--sec); font: 600 .6875rem/1.2 var(--f-texto); text-decoration: none; cursor: pointer; }
  html.js .tabbar svg { width: 24px; height: 24px; }
  html.js .tabbar [aria-current="page"] { color: var(--tinta); }
  html.js .tabbar [aria-current="page"] svg { color: var(--accion-texto); }
  html.js .tabbar [aria-current="page"] span { position: relative; }
  html.js .tabbar [aria-current="page"] span::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -4px; height: 3px; border-radius: 2px; background: var(--accion-texto); }
  /* El lugar se reserva solo si hay barra: la plataforma no la tiene y
     quedaba una franja blanca bajo el pie. */
  html.js body:has(.tabbar):not(.con-barra) { padding-bottom: 80px; }
  /* Lo que recibe el foco con Tab no queda debajo de la barra. */
  html.js:has(.tabbar) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  html.js body.con-barra .tabbar { display: none; }
}

/* ---------------------------------------------------------------------
   13. Pie legal
   El recuadro es texto de plataforma y no lo edita la empresa: va igual
   en todas las páginas, al final, con su tamaño legible.
   --------------------------------------------------------------------- */
.legal { margin: 40px 0 24px; padding: 16px; border-radius: var(--r-card); background: var(--gris-50); color: var(--texto); font-size: .8125rem; line-height: 1.5; }
.legal p { margin: 0 0 8px; } .legal small { display: block; color: var(--sec); font-size: .8125rem; }
.legal a { color: inherit; font-weight: 600; }
.pie { border-top: 1px solid var(--linea); margin-top: 40px; }
.pie .legal { margin: 24px 0; }
.pie-plataforma { background: var(--gris-50); border-top: 1px solid var(--linea); margin-top: 48px; padding: 28px 0 32px; font-size: .875rem; color: var(--sec); }
.pie-plataforma .pie-in { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.pie-plataforma nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie-plataforma a { color: var(--texto); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.pie-plataforma .legal { margin: 18px 0 0; background: #fff; border: 1px solid var(--linea); }
/* Las columnas del pie de la plataforma: las mismas en la landing y en
   las páginas del servidor (layoutPlataforma), así pasar de / a
   /marketplace no cambia el pie. */
.pie-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--linea); }
@media (min-width: 640px) { .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pie-cols { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; } }
.pie-cols h2 { margin-bottom: 8px; font: 700 .9375rem/1.3 var(--f-titulo); color: var(--tinta); letter-spacing: 0; }
.pie-cols p { margin: 0; line-height: 1.6; }
.pie-cols ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pie-cols li { min-height: 32px; display: flex; align-items: center; line-height: 1.4; }

/* ---------------------------------------------------------------------
   14. Barra fija de acción
   Siempre a mano en el teléfono, nunca tapa contenido (el body le deja
   lugar). Sirve con el marcado nuevo (.in adentro) y con el viejo (los
   hijos sueltos): por eso es flex. Desde 980 px la reemplaza la tarjeta
   lateral.
   --------------------------------------------------------------------- */
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); box-shadow: var(--sombra-flota); }
.barra-accion > .in { flex: 1; display: flex; align-items: center; gap: 14px; max-width: var(--ancho); margin: 0 auto; }
.ba-dato { flex: 1; min-width: 0; display: grid; }
.ba-dato b { font: 700 1.125rem/1.2 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-dato small, .ba-dato span { font-size: .8125rem; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-cta { min-width: 140px; }
.barra-accion.cerrada { justify-content: center; color: var(--sec); font-size: .875rem; text-align: center; }
body.con-barra { padding-bottom: 96px; }
/* Ni debajo de la barra de acción (alcanza para su alto con el dato en dos renglones). */
@media (max-width: 979px) { html:has(.barra-accion), html.js:has(.barra-accion) { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 980px) { .barra-accion { display: none; } body.con-barra { padding-bottom: 0; } }

/* ---------------------------------------------------------------------
   15. Ficha: portada, hoja, cabeza y tarjeta en vivo
   --------------------------------------------------------------------- */
.portada { position: relative; height: 300px; background: var(--gris-100); overflow: hidden; }
.portada > svg, .portada > img { width: 100%; height: 100%; object-fit: cover; }
.portada-ctrl { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.portada-ctrl .btn-redondo svg { width: 20px; height: 20px; }
.portada .fotos-pill { position: absolute; right: 14px; bottom: 38px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(11,18,32,.78); color: #fff; font: 600 .8125rem var(--f-texto); text-decoration: none; }
.portada .fotos-pill svg { width: 16px; height: 16px; }
/* La nota de ilustración no pisa el botón de fotos. */
.portada .nota-ilus { position: absolute; left: 14px; top: 66px; font-size: .6875rem; color: var(--texto); background: rgba(255,255,255,.88); padding: 3px 8px; border-radius: 6px; }
.hoja { position: relative; margin-top: -24px; background: #fff; border-radius: var(--r-grande) var(--r-grande) 0 0; padding-top: 22px; }
/* La hoja blanca va de borde a borde en el teléfono. */
@media (max-width: 979px) { .portada-wrap { padding: 0; } .hoja { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }
@media (min-width: 760px) and (max-width: 979px) { .hoja { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; } }
.cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cabeza .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cabeza .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9375rem; color: var(--sec); }
.cabeza .meta span { display: inline-flex; align-items: center; gap: 6px; }
.cabeza .meta svg { width: 16px; height: 16px; }

.vivo { margin-top: 20px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: #fff; box-shadow: var(--sombra-card); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vivo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vivo-cab span { font: 600 .9375rem var(--f-texto); color: var(--sec); }
.vivo-cab .en-vivo-pill { color: var(--ok); font-weight: 700; font-size: .8125rem; }
.vivo-cifra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vivo-cifra p { margin: 0; font-size: .9375rem; color: var(--texto); }
.vivo-cifra p b { color: var(--tinta); }
.vivo-frase { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--gris-50); font-size: .9375rem; color: var(--texto); }
.vivo-frase svg { width: 20px; height: 20px; flex: none; color: var(--s-colocacion); margin-top: 1px; }
.vivo-frase b { color: var(--tinta); }
.vivo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vivo-stats div { padding: 10px 12px; border-radius: var(--r); background: var(--gris-50); min-width: 0; }
.vivo-stats dt { font-size: .75rem; color: var(--sec); }
.vivo-stats dd { margin: 2px 0 0; font: 700 1rem/1.25 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.vivo-pie { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--sec); font-variant-numeric: tabular-nums; }
.mini-area { position: relative; height: 64px; }
.mini-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------------
   16. Índice pegajoso, secciones y tarjetas
   <nav class="indice" aria-label="En esta página"><div class="indice-pista">
     <a href="#esencial" aria-current="true">Lo esencial</a>…</div></nav>
   --------------------------------------------------------------------- */
.indice { position: sticky; top: 0; z-index: 20; margin: 24px -20px 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.indice-pista { display: flex; gap: 6px; padding: 10px 20px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent); }
.indice-pista::-webkit-scrollbar { display: none; }
.indice a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--texto); background: var(--gris-50); border: 1px solid var(--linea); text-decoration: none; font: 600 .875rem var(--f-texto); white-space: nowrap; }
.indice a i { font-style: normal; font-size: .75rem; color: var(--sec); }
.indice a[aria-current="true"], .indice a[aria-current="page"], .indice a[aria-current="location"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.indice a[aria-current="true"] i, .indice a[aria-current="page"] i, .indice a[aria-current="location"] i { color: rgba(255,255,255,.75); }
@media (min-width: 760px) { .indice { margin: 28px 0 0; border-radius: 0; } .indice-pista { padding: 10px 0; -webkit-mask-image: none; mask-image: none; } }

.seccion { padding: 36px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 64px; }
/* Con el índice pegajoso arriba, todo lo que se trae a la vista —un salto
   por ancla, el foco con Tab o Shift+Tab— se deja debajo de él. El margen
   propio de las secciones va a cero para no contarlo dos veces. */
html:has(.indice) { scroll-padding-top: 72px; }
html:has(.indice) :is(.seccion, .recorrido) { scroll-margin-top: 0; }
.seccion-cab { display: grid; gap: 4px; }
.seccion-cab p { margin: 0; max-width: 75ch; color: var(--sec); font-size: .9375rem; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-card); padding: 18px; }
.tarjeta.gris { background: var(--gris-50); border-color: transparent; }
.fuente { margin: 0; font-size: .8125rem; color: var(--sec); }

/* ---------------------------------------------------------------------
   17. Lo esencial, ¿cuánto cobrás?, reparto
   --------------------------------------------------------------------- */
.esencial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.esencial > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding: 14px; border-radius: var(--r-card); background: var(--gris-50); min-width: 0; }
.esencial .ico { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--tinta); box-shadow: var(--sombra-1); }
.esencial .ico svg { width: 20px; height: 20px; }
.esencial dt { font-size: .8125rem; color: var(--sec); }
.esencial dd { margin: 2px 0 0; font: 700 1.0625rem/1.25 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.esencial dt + dd { margin-top: -6px; }
.esencial dd small { display: block; font: 400 .8125rem/1.35 var(--f-texto); color: var(--sec); }
.esencial .ancha { grid-column: 1 / -1; }
@media (min-width: 900px) { .esencial { grid-template-columns: repeat(3, minmax(0, 1fr)); } .esencial .ancha { grid-column: span 3; } }

.linea-tiempo { display: grid; grid-template-columns: minmax(0, auto) minmax(28px, 1fr) minmax(0, auto); align-items: center; gap: 10px; }
.linea-tiempo .nodo { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--linea); min-width: 0; }
.linea-tiempo .nodo small { font-size: .75rem; color: var(--sec); }
.linea-tiempo .nodo b { font: 700 1rem/1.2 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-tiempo .nodo.fin { border-color: var(--s-cobros); background: #F0FAF5; }
.linea-tiempo .tramo { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 6px, transparent 6px 10px); }
.linea-tiempo .tramo span { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: .75rem; color: var(--sec); white-space: nowrap; }
.reparto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.reparto-barra { display: flex; height: 40px; border-radius: var(--r); overflow: hidden; gap: 3px; }
.reparto-barra i { display: flex; align-items: center; padding: 0 12px; color: #fff; font: 700 .8125rem var(--f-texto); white-space: nowrap; font-style: normal; }
.reparto-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; color: var(--texto); }
.reparto-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.reparto-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.resultado-grande { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   18. Gráficos fluidos: marcas estirables en SVG, rótulos en HTML
   El SVG se estira (preserveAspectRatio="none") y los textos quedan en
   HTML, así no se deforman ni se achican en el teléfono.
   --------------------------------------------------------------------- */
.gf { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gf-cab { display: grid; gap: 4px; }
.gf-lienzo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--alto, 200px) auto; column-gap: 8px; margin-top: 26px; }
.gf-plot { position: relative; border-bottom: 1px solid var(--linea-fuerte); }
.gf-ejey { position: relative; min-width: 2.4em; }
.gf-ejey span { position: absolute; left: 0; transform: translateY(50%); font-size: .75rem; color: var(--sec); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gf-grilla i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--gris-100); }
.gf-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gf-linea { fill: none; stroke: var(--serie, var(--s-colocacion)); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gf-area { fill: var(--serie, var(--s-colocacion)); opacity: .12; }
.gf-ref { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--decor); }
.gf-ref span { position: absolute; left: 0; bottom: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--linea); font: 600 .75rem var(--f-texto); color: var(--texto); white-space: nowrap; }
.gf-ref.meta { border-top-color: var(--tinta); }
.gf-ref.alerta { border-top-color: var(--error); }
.gf-ref.alerta span { color: var(--error); border-color: #F5C2BD; }
.gf-punto { position: absolute; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--serie, var(--s-colocacion)); box-shadow: 0 0 0 3px #fff; }
/* El último punto «late» con una onda que se expande: dice que la
   conexión está viva sin mover la línea. */
.gf-punto.latido::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--serie, var(--s-colocacion)); animation: onda 2s ease-out infinite; }
@keyframes onda { from { transform: scale(.7); opacity: .9; } to { transform: scale(2); opacity: 0; } }
.gf-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--tinta); color: #fff; font-size: .8125rem; white-space: nowrap; box-shadow: var(--sombra-card); font-variant-numeric: tabular-nums; }
.gf-tip b { font-size: .9375rem; }
.gf-tip small { color: #B8C2D3; }
.gf-tip.der { transform: translate(-100%, calc(-100% - 14px)); }
.gf-tip.izq { transform: translate(calc(-100% - 14px), 50%); }
.gf-guia { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--decor); }
.gf-ejex { position: relative; height: 24px; }
.gf-ejex span { position: absolute; top: 7px; transform: translateX(-50%); font-size: .75rem; color: var(--sec); white-space: nowrap; }
.gf-ejex .ini { transform: none; } .gf-ejex .fin { transform: translateX(-100%); }
.gf-ejex.cols { display: flex; gap: var(--hueco, 6px); padding: 0 2px; }
/* Cada rótulo mide lo que su barra (base 0, sin mínimo de contenido) y
   se centra aunque no entre: con muchas columnas en el teléfono, el año
   desbordaba la página y se corría de su barra. */
.gf-ejex.cols span { position: static; transform: none; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; padding-top: 7px; }
/* Los de los extremos, hacia adentro: centrados se salían del gráfico. */
.gf-ejex.cols span:first-child { justify-content: flex-start; } .gf-ejex.cols span:last-child { justify-content: flex-end; }
/* Barras en HTML (columnas) */
.gf-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: var(--hueco, 6px); padding: 0 2px; }
.gf-barras .col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.gf-barras .col i { display: block; width: 100%; max-width: var(--max-barra, 48px); margin: 0 auto; background: var(--c); }
.gf-barras .col i:first-child { border-radius: 6px 6px 0 0; }
.gf-barras .col .val { position: absolute; left: 50%; transform: translate(-50%, -6px); font: 700 .75rem/1.2 var(--f-texto); color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gf-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--texto); }
.gf-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.gf-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
/* Una parte plegada en «Otros»: sin color propio, en segundo plano. */
.gf-leyenda .gf-parte { color: var(--sec); }
.gf-datos summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font: 600 .875rem var(--f-texto); color: var(--tinta); list-style: none; }
.gf-datos summary::-webkit-details-marker { display: none; }
.gf-datos summary svg { width: 16px; height: 16px; transition: transform .15s; }
.gf-datos[open] summary svg { transform: rotate(90deg); }

/* Barras horizontales ordenadas */
.hbarras { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hbarras li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hbarras .fila { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; color: var(--tinta); }
.hbarras .fila span { font-weight: 600; }
.hbarras .fila b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbarras .fila small { color: var(--sec); font-weight: 500; margin-left: 6px; }
.hbarras .pista { height: 10px; border-radius: var(--r-pill); background: var(--gris-100); }
.hbarras .pista i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c, var(--s-colocacion)); }
.hbarras .pie { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--sec); }

/* ---------------------------------------------------------------------
   19. Hitos, datos con ícono, acordeón, lista de datos
   --------------------------------------------------------------------- */
.hitos { list-style: none; margin: 0; padding: 0; display: grid; }
.hitos li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 20px; }
.hitos li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--gris-200); }
.hitos li.hecho::before { background: var(--ok); }
.hitos li:last-child { padding-bottom: 0; } .hitos li:last-child::before { display: none; }
.hitos .m { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--gris-200); color: var(--sec); font: 700 .8125rem var(--f-texto); }
.hitos .m svg { width: 16px; height: 16px; }
.hitos .hecho .m { background: var(--ok); border-color: var(--ok); color: #fff; }
.hitos .curso .m { border-color: var(--s-colocacion); color: var(--s-colocacion); box-shadow: 0 0 0 4px var(--info-50); }
.hitos b { display: block; color: var(--tinta); }
.hitos p { margin: 2px 0 6px; font-size: .9375rem; }
.hitos .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8125rem; color: var(--sec); }

.datos-ico { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.datos-ico li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.datos-ico li:first-child { border-top: 0; padding-top: 0; }
.datos-ico .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--gris-100); display: grid; place-items: center; color: var(--tinta); }
.datos-ico .ico svg { width: 18px; height: 18px; }
.datos-ico small { display: block; font-size: .8125rem; color: var(--sec); }
.datos-ico span { color: var(--tinta); font-size: .9375rem; }

.acordeon { border: 1px solid var(--linea); border-radius: var(--r-card); background: #fff; }
.acordeon + .acordeon { margin-top: 10px; }
.acordeon summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; cursor: pointer; list-style: none; font: 700 1rem var(--f-titulo); color: var(--tinta); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary svg { width: 20px; height: 20px; flex: none; color: var(--sec); transition: transform .15s; }
.acordeon[open] summary svg { transform: rotate(180deg); }
.acordeon .cuerpo { padding: 0 18px 18px; }

.datos { margin: 0; display: grid; }
.datos > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linea); }
.datos > div:first-child { border-top: 0; padding-top: 0; }
.datos dt { font-size: .8125rem; color: var(--sec); }
.datos dd { margin: 0; font-size: .9375rem; color: var(--tinta); overflow-wrap: anywhere; }
@media (min-width: 640px) { .datos > div { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; } }

/* ---------------------------------------------------------------------
   20. Carrusel, fotos y documentos
   --------------------------------------------------------------------- */
.carrusel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: none; width: 78%; scroll-snap-align: start; }
@media (min-width: 760px) { .carrusel { margin: 0; padding: 0; } .carrusel > * { width: calc(50% - 5px); } }
.foto { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--gris-100); }
.foto svg, .foto img, .foto video { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; gap: 8px; align-items: end; }
.foto figcaption span { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); font-size: .8125rem; color: var(--tinta); }
.foto .play { position: absolute; inset: 0; display: grid; place-items: center; }
.foto .play span { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--tinta); box-shadow: var(--sombra-card); }

.docs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.docs li + li { border-top: 1px solid var(--linea); }
.doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 14px 16px; text-decoration: none; color: inherit; min-height: 68px; }
a.doc:hover { background: var(--gris-50); color: inherit; }
.doc .tipo { width: 40px; height: 40px; border-radius: 10px; background: var(--error-50); color: var(--error); display: grid; place-items: center; font: 800 .625rem var(--f-texto); letter-spacing: .03em; }
.doc .tipo.img { background: var(--info-50); color: var(--info); }
.doc .tipo.vid { background: var(--gris-100); color: var(--tinta); }
.doc b { display: block; color: var(--tinta); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.doc small { display: block; color: var(--sec); font-size: .8125rem; margin-top: 2px; }
.doc > svg { width: 20px; height: 20px; color: var(--sec); }

/* ---------------------------------------------------------------------
   21. Tablas
   Toda tabla de datos va envuelta: en pantallas angostas se desliza ella,
   no la página entera.
   <div class="tabla-envol"><table class="tabla">…</table></div>
   --------------------------------------------------------------------- */
.tabla-envol { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--r-card); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-envol .tabla { min-width: max-content; }
.tabla th { text-align: left; padding: 10px 14px; background: var(--gris-50); color: var(--sec); font: 600 .8125rem/1.3 var(--f-texto); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px 14px; border-top: 1px solid var(--linea); color: var(--texto); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabla tr:first-child td { border-top: 0; }
.tabla td b { color: var(--tinta); }
.tabla .num, .tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td small { display: block; font-size: .8125rem; color: var(--sec); margin-top: 2px; }

/* ---------------------------------------------------------------------
   22. Invertir y escritorio en dos columnas
   --------------------------------------------------------------------- */
.invertir-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: #fff; box-shadow: var(--sombra-card); }
.chips-importe { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-importe a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--linea-fuerte); color: var(--tinta); text-decoration: none; font: 600 .875rem var(--f-texto); font-variant-numeric: tabular-nums; }
.chips-importe a[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.col-principal { min-width: 0; }
.col-lateral { display: none; }
@media (min-width: 980px) {
  .portada { height: 440px; border-radius: var(--r-grande); margin-top: 20px; }
  .hoja { margin-top: 0; border-radius: 0; }
  .ficha-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
  .col-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; position: sticky; top: 20px; padding-top: 22px; }
  .solo-cel { display: none !important; }
}
@media (max-width: 979px) { .solo-pc { display: none !important; } }

/* ---------------------------------------------------------------------
   22 bis. Tarjeta de proyecto
   Una sola, en la landing, el marketplace y la home de cada empresa:
   portada a sangre 16:9 (la foto, o el color de la empresa con el ícono
   de su clase), chips, la empresa, el título, una frase, tres datos, la
   barra y las acciones. Cada lugar agrega lo suyo (el marketplace, la
   retribución y la inscripción), nunca otra versión de lo común.
   <article class="proy"><a class="proy-portada [vacia]" style="--c:…;--c-velo:…">…</a>
     <div class="proy-cuerpo"> .proy-chips · .proy-empresa · h3 > a · .proy-frase ·
       dl.proy-datos · .proy-nota · .proy-avance · [.proy-meta] · .proy-acciones </div></article>
   --------------------------------------------------------------------- */
.proy { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--blanco); transition: box-shadow .15s; }
.proy:hover { box-shadow: var(--sombra-card); }
.proy-portada { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gris-100); }
.proy-portada img { width: 100%; height: 100%; object-fit: cover; }
/* Sin --c (la landing sin color de la empresa) y sin marca (la
   plataforma), el gris: nunca un hueco transparente. */
.proy-portada.vacia { display: grid; place-items: center; background: var(--c, var(--primario, var(--gris-100))); }
.proy-portada .icono { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--c-velo, var(--primario-velo-fuerte, var(--blanco))); font-size: 2.75rem; line-height: 1; }
.proy-portada .icono svg { width: 40px; height: 40px; color: var(--tinta); }
/* El contenedor mide la tarjeta: las tres cifras ajustan su letra a ella. */
.proy-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 20px; container-type: inline-size; }
.proy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.proy-empresa { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; max-width: 100%; margin: 0; color: var(--sec); font: 600 .875rem/1.3 var(--f-texto); text-decoration: none; }
a.proy-empresa:hover { color: var(--tinta); text-decoration: underline; }
/* El logo con su proporción: alto fijo y ancho el que le toque, hasta un tope. */
.proy-empresa img { height: 28px; width: auto; max-width: 96px; object-fit: contain; border-radius: 6px; flex: none; }
.proy-empresa .ini { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--primario, var(--gris-100)); color: var(--sobre-primario, var(--tinta)); font: 800 .875rem/1 var(--f-titulo); }
.proy-empresa > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy h3 { font: 700 1.1875rem/1.3 var(--f-titulo); letter-spacing: -.015em; overflow-wrap: anywhere; }
.proy h3 a { color: var(--tinta); text-decoration: none; }
.proy h3 a:hover { text-decoration: underline; }
.proy-frase { margin: -4px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--texto); }
.proy-datos { margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; }
.proy-datos dt { font-size: .75rem; line-height: 1.3; color: var(--sec); }
/* Las tres cifras en un renglón aunque la tarjeta sea angosta (dos
   columnas en una tableta, un teléfono de 360 px): la letra se ajusta al
   ancho de la tarjeta, no al de la pantalla. Solo si ni así entran, la
   tercera baja de renglón. */
.proy-datos dd { margin: 2px 0 0; font: 700 clamp(.9375rem, calc((100cqi - 84px) / 12.6), 1.125rem)/1.2 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.proy-nota { margin: -4px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--sec); font-variant-numeric: tabular-nums; }
.proy-avance p { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .8125rem; color: var(--sec); font-variant-numeric: tabular-nums; }
.proy-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .8125rem; line-height: 1.45; color: var(--sec); }
.proy-meta li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.proy-meta svg { width: 16px; height: 16px; margin-top: 1px; }
.proy-meta .pozo-linea { color: var(--tinta); font-weight: 600; }
.proy-acciones { margin-top: auto; padding-top: 4px; display: grid; gap: 8px; }

/* ---------------------------------------------------------------------
   23. Movimiento reducido
   Todo lo que late, se desliza o crece se queda quieto: los números se
   actualizan igual, sin animar.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}