/* ========================================================================== Trato Directo · Súper malla · motion/td-motion.bundle.css Paquete generado por paginas/sync_motion.py desde el banco de animaciones de TD (runtime 1.0.1, sincronizado el 2026-09-28). No editar a mano: se rehace con el script (ver motion/LEEME.md). Tramos, en orden, cada uno literal y precedido de su origen y su sha256: _base/motion-tokens.css _base/td-motion.css (derivado: sin sus tres @import) dato-cifra-cuenta/anim.css filete-subrayado/anim.css Créditos en la cabecera de cada tramo; licencia MIT de 000h by Cojeev (cojeev-ui) en LICENCIA-cojeev.txt, junto a este archivo. ========================================================================== */ /* origen: _base/motion-tokens.css · sha256 5f9da0769bf6fea8890ad49b240f8d0483bb40e4bbefb2f462d01356da823f3f */ /* ============================================================ TRATO DIRECTO · MOVIMIENTO Tokens de animación para superficies en pantalla (web). Regla de marca: entradas ≤400ms, easing suave, SIN rebotes. El movimiento es editorial y sobrio — acompaña, no decora. Respeta SIEMPRE prefers-reduced-motion (alternativa estática). ------------------------------------------------------------ Estos valores son la fuente de verdad. El puente JS para Motion/Framer (web/lib/motion.ts) los ESPEJA por su nombre; si cambian aquí, se actualizan allá. Una cosa, un solo hogar. ============================================================ */ :root{ /* — Duraciones — (entradas tope 400ms; lo más lento es ambiente) */ --dur-1:160ms; /* micro-interacción · hover, focus */ --dur-2:240ms; /* entrada por defecto */ --dur-3:320ms; /* entrada de bloque mayor */ --dur-4:400ms; /* entrada máxima (tope de marca) */ --dur-ambient:600ms; /* transición de fondo entre actos (no es entrada) */ /* — Easings — (suaves, sin overshoot ni rebote) */ --ease-out:cubic-bezier(.22,.61,.36,1); /* salida suave, uso general */ --ease-out-soft:cubic-bezier(.16,1,.3,1); /* expo-out editorial (tipografía) */ --ease-in-out:cubic-bezier(.65,0,.35,1); /* simétrico, para estados */ --ease-standard:cubic-bezier(.4,0,.2,1); /* UI estándar */ /* — Desplazamientos de entrada — (discretos; la tipografía "asienta") */ --rise:16px; /* translateY de entrada por defecto */ --rise-lg:28px; /* entrada de titular / bloque hero */ --lift:-3px; /* elevación de tarjeta en hover */ /* — Ritmo de stagger — (revelado en secuencia) */ --stagger:60ms; /* paso entre hijos */ --stagger-slow:90ms; /* paso para listas cortas, más teatral */ /* — Transiciones compuestas listas para consumir — */ --t-hover:160ms var(--ease-out); --t-entrance:320ms var(--ease-out-soft); } /* Reduce el movimiento a cero cuando el usuario lo pide. Las superficies web añaden además su alternativa estática en JS. */ @media (prefers-reduced-motion: reduce){ :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; --dur-ambient:0ms; --rise:0px; --rise-lg:0px; --lift:0px; --stagger:0ms; --stagger-slow:0ms; } } /* origen: _base/td-motion.css · sha256 af09b81558b4bfc7282af9d873d89811c660060537d2e0116e1b8dd507569b59 */ /* Derivado de _base/td-motion.css v1.0.1 sin @import: los tokens de color y de fuente los da la malla en su :root, las fuentes llegan por Google Fonts y motion-tokens.css va antes en este mismo paquete. Generado por sync_motion.py el 2026-09-28. No editar. */ /* ============================================================ Trato Directo · banco de animaciones · _base/td-motion.css Runtime común (CSS) · v1.0.1 · pareja de td-motion.js Guardias de movimiento reducido y quietud, estado armado, variantes de entrada, keyframes y utilidades compartidas. Una cosa, un solo hogar: los valores viven en tokens.css (color, tipografía, forma) y motion-tokens.css (movimiento). Aquí no hay ningún hex, rgb(), cubic-bezier() ni duración literal: solo var(--token). El reposo es el estado final. Toda entrada se escribe como @keyframes con solo from{} y fill both. El estado oculto previo existe únicamente con el runtime armado (html[data-td-motion]) y bajo prefers-reduced-motion: no-preference en pantalla. Sin JS, con movimiento reducido, en impresión, en el póster (?estado=final) y con el reloj en su t final, todo está entero. ============================================================ */ /* — Propiedades que no se heredan (evita que una variante se filtre a un [data-td-reveal] anidado de otra variante) — */ @property --td-kf{syntax:"*";inherits:false} @property --td-dur{syntax:"*";inherits:false} @property --td-ease{syntax:"*";inherits:false} /* Márgenes de la máscara de barrido (ver §3): longitudes, 0 si nadie las fija. Con 0 los keyframes td-barrido-x/-y son el inset(0 100% 0 0) de siempre. */ @property --td-barrido-holgura{syntax:"";inherits:false;initial-value:0px} @property --td-barrido-lados{syntax:"";inherits:false;initial-value:0px} /* ------------------------------------------------------------ 1 · Contexto de color (por nombre de token, nunca un hex) Las animaciones pintan con --td-*: así la misma pieza funciona sobre papel y sobre tinta sin segunda hoja de estilos. ------------------------------------------------------------ */ :root{ --td-escala:1; /* escala de lienzo (ver .td-lienzo) */ --td-fondo:var(--papel); --td-texto:var(--tinta); --td-texto-2:var(--ink-soft); --td-texto-3:var(--muted); --td-linea:var(--hairline); --td-acento:var(--rojo-papel); /* el único gesto rojo sobre claro */ --td-sello:var(--rojo); /* filete base, sello, relleno de marca */ } .td-ink,[data-td-fondo="tinta"]{ --td-fondo:var(--tinta); --td-texto:var(--papel); --td-texto-2:color-mix(in srgb,var(--papel) 85%,transparent); --td-texto-3:color-mix(in srgb,var(--papel) 70%,transparent); --td-linea:color-mix(in srgb,var(--papel) 18%,transparent); --td-acento:var(--rojo-foto); /* sobre tinta o foto el rojo es --rojo-foto */ } /* Escala de lienzo: los px de --rise/--rise-lg/--lift están pensados para ~390 px de ancho de teléfono. Un lienzo de story o reel mide 1080 px CSS: ahí los desplazamientos se multiplican por 1080/390 para verse igual en el teléfono. Solo escala desplazamientos (duraciones, easings y stagger no cambian) y con movimiento reducido el producto sigue siendo 0. Aprobada por marca el 2026-09-28. */ .td-lienzo[data-td-lienzo]{--td-escala:calc(1080 / 390)} /* ------------------------------------------------------------ 2 · Guardias Capa 1 — motion-tokens.css pone duraciones, rise, lift y stagger en 0 bajo prefers-reduced-motion: reduce. Capa 2 — guard global (abajo). Es seguro porque toda entrada del banco va de fuera hacia el reposo con fill both. Capa 3 — quietud local: [data-motion="off"] (interruptor del usuario, lienzo en edición en Prisma, conmutador del espécimen) y html[data-td-motion="off"] (runtime en quietud). ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important; transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important; } } [data-motion="off"],html[data-td-motion="off"]{ --dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms;--dur-ambient:0ms; --rise:0px;--rise-lg:0px;--lift:0px;--stagger:0ms;--stagger-slow:0ms; --t-hover:0ms var(--ease-out);--t-entrance:0ms var(--ease-out-soft); } [data-motion="off"],[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after, html[data-td-motion="off"] *,html[data-td-motion="off"] *::before,html[data-td-motion="off"] *::after{ animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important; transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important; } /* Póster, PNG y render estático (?estado=final) e impresión: sin movimiento, contenido final. */ html[data-td-motion="final"] *,html[data-td-motion="final"] *::before,html[data-td-motion="final"] *::after{ animation:none!important;transition:none!important; } html[data-td-motion="final"] [data-td-reveal]{opacity:1;translate:none;scale:none;clip-path:none} @media print{ *,*::before,*::after{animation:none!important;transition:none!important} [data-td-reveal]{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important} [data-td-acto]{visibility:visible!important} } /* Primer pintado quieto: algo medido (filete de pestañas, escuadras) se posiciona la primera vez sin transición. */ .td-quieto,.td-quieto *{transition:none!important} /* Lo que el runtime rechaza (TDMotion.NUNCA) se ve entero y quieto. */ [data-td-rechazo]{animation:none!important} /* ------------------------------------------------------------ 3 · Estado armado y entrada pending → el bootstrap corrió; el runtime aún no toma el control. Expira solo a los 1200 ms. on → oculta solo lo que todavía no entró. grabacion → igual que on (sin eso, lo que entra en un beat tardío se vería completo desde el cuadro 0 y saltaría hacia atrás), más los actos todavía no revelados. El elemento entra al recibir data-td-in. ------------------------------------------------------------ */ @media screen and (prefers-reduced-motion:no-preference){ html[data-td-motion="pending"] [data-td-reveal]:not([data-motion="off"] *), html[data-td-motion="on"] [data-td-reveal]:not([data-td-in]):not([data-motion="off"] *), html[data-td-motion="grabacion"] [data-td-reveal]:not([data-td-in]){opacity:0} html[data-td-motion="grabacion"] [data-td-acto]:not([data-td-in]){visibility:hidden} html[data-td-motion="on"] [data-td-reveal][data-td-in], html[data-td-motion="grabacion"] [data-td-reveal][data-td-in]{ animation-name:var(--td-kf,td-subida); animation-duration:var(--td-dur,var(--dur-3)); animation-timing-function:var(--td-ease,var(--ease-out-soft)); animation-fill-mode:both; animation-iteration-count:1; animation-delay:calc(var(--i,0) * var(--td-paso,var(--stagger)) + var(--td-retraso,0ms)); } /* Reposo interpolable de barrido y barrido-y: un inset() que no recorta nada. Un keyframe con solo from{} termina en el reposo; clip-path entre una forma e none es discreto, y el recorte saltaría a none en el primer tramo de la curva: hacia un inset() interpola cuadro a cuadro, sin ancestro ni anim.css. Ese inset es negativo, nunca inset(0): la tinta que sale de la caja (el descendente de una cifra Fraunces con line-height menor que 1, un acento, el trazo de un SVG) se ve igual que con none, y el último cuadro coincide con el póster. A los lados del avance deja pasar todo (--td-barrido-lados: 100vmax); en el eje del avance, --td-barrido-holgura (.25em) antes y después de la caja. Solo con el runtime armado: sin JS, en quietud, en el póster y al imprimir el reposo sigue siendo none. Una pieza puede fijar otro reposo que no recorte con un selector más específico, o cambiar la holgura. */ html[data-td-motion="on"] [data-td-reveal="barrido"], html[data-td-motion="grabacion"] [data-td-reveal="barrido"]{clip-path:inset(calc(-1 * var(--td-barrido-lados)) calc(-1 * var(--td-barrido-holgura)))} html[data-td-motion="on"] [data-td-reveal="barrido-y"], html[data-td-motion="grabacion"] [data-td-reveal="barrido-y"]{clip-path:inset(calc(-1 * var(--td-barrido-holgura)) calc(-1 * var(--td-barrido-lados)))} } /* Variantes de entrada del runtime (data-td-reveal="…"). Se anima la propiedad individual translate/scale, no transform, para no pisar el transform propio del elemento. Una animación del banco que necesita otra entrada define su propio --td-kf/--td-dur/--td-ease en su anim.css, siempre con tokens. */ [data-td-reveal="subida"] {--td-kf:td-subida; --td-dur:var(--dur-3);--td-ease:var(--ease-out-soft)} [data-td-reveal="titular"] {--td-kf:td-subida-lg;--td-dur:var(--dur-4);--td-ease:var(--ease-out-soft)} [data-td-reveal="fundido"] {--td-kf:td-fundido; --td-dur:var(--dur-4);--td-ease:var(--ease-out)} [data-td-reveal="barrido"], [data-td-reveal="barrido-y"]{--td-dur:var(--dur-4);--td-ease:var(--ease-out-soft);--td-barrido-holgura:.25em;--td-barrido-lados:100vmax} [data-td-reveal="barrido"] {--td-kf:td-barrido-x} [data-td-reveal="barrido-y"]{--td-kf:td-barrido-y} [data-td-reveal="traza"] {--td-kf:td-traza-x; --td-dur:var(--dur-4);--td-ease:var(--ease-out-soft);transform-origin:left center} [data-td-reveal="traza-y"] {--td-kf:td-traza-y; --td-dur:var(--dur-4);--td-ease:var(--ease-out-soft);transform-origin:center top} [data-td-reveal="dash"] {--td-kf:td-dash; --td-dur:var(--dur-4);--td-ease:var(--ease-out-soft);stroke-dasharray:1} @keyframes td-subida{from{opacity:0;translate:0 calc(var(--rise) * var(--td-escala,1))}} @keyframes td-subida-lg{from{opacity:0;translate:0 calc(var(--rise-lg) * var(--td-escala,1))}} @keyframes td-fundido{from{opacity:0}} /* Barrido: solo avanza un borde. La máscara nace con ancho 0 en el borde de entrada (a −holgura de la caja) y llega a +holgura pasado el otro; a los lados deja pasar la tinta que sale de la caja (−lados). Con las dos variables en 0 (una pieza que usa el keyframe sin ser barrido, como la retícula) es inset(0 100% 0 0), igual que en la 1.0.0. */ @keyframes td-barrido-x{from{clip-path:inset(calc(-1 * var(--td-barrido-lados)) calc(100% + var(--td-barrido-holgura)) calc(-1 * var(--td-barrido-lados)) calc(-1 * var(--td-barrido-holgura)))}} @keyframes td-barrido-y{from{clip-path:inset(calc(-1 * var(--td-barrido-holgura)) calc(-1 * var(--td-barrido-lados)) calc(100% + var(--td-barrido-holgura)) calc(-1 * var(--td-barrido-lados)))}} @keyframes td-traza-x{from{scale:0 1}} @keyframes td-traza-y{from{scale:1 0}} /* con pathLength="1" en el trazo SVG */ @keyframes td-dash{from{stroke-dashoffset:1}} /* ------------------------------------------------------------ 4 · Utilidades ------------------------------------------------------------ */ /* Fundido cruzado, fantasma que reserva el ancho final, opciones apiladas. */ .td-stack{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr)} .td-stack>*{grid-area:1/1;min-width:0;min-height:0} /* Visualmente oculto y accesible: el texto completo una vez; las copias visuales van con aria-hidden="true". */ .td-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .td-tnum{font-variant-numeric:tabular-nums lining-nums} /* Máscaras rectas de línea y de rueda. */ .td-clip{overflow:clip} /* origen: dato-cifra-cuenta/anim.css · sha256 9f875f200dd450e84a0ee3ad6b2af98d2545384c885eb3aa22ac3fcd3e7a76ca */ /* ============================================================ Trato Directo · banco de animaciones · dato-cifra-cuenta Cifra que cuenta: al verse por primera vez, la cifra cuenta hasta el valor que el HTML ya traía (anim.js, sobre el reloj del documento). Este archivo define: 1 · las piezas que anim.js arma solo mientras cuenta (celda con fantasma del dígito final + glifo que cambia); 2 · la composición del espécimen (.td-dato-cifra-cuenta__*). El reposo es el estado final: sin JS, con movimiento reducido o en el póster, el texto del HTML queda intacto. Crédito: capa accesible + capa visual del tratamiento count de 000h by Cojeev (cojeev-ui, MIT · styles/animated-number.css), reescrito con tokens TD. El JS lleva la cabecera MIT completa. ============================================================ */ /* ------------------------------------------------------------ 1 · Piezas del conteo (fuera del espécimen también) Cada dígito vive en una celda cuyo ancho lo fija el fantasma del dígito FINAL (visibility hidden, en flujo: da el ancho y la línea base). El glifo que cambia va centrado encima, fuera de flujo: el ancho de la cifra es el final desde el primer cuadro aunque la fuente no traiga tnum. Sin kerning para que el texto restaurado al terminar ocupe exactamente lo mismo. ------------------------------------------------------------ */ [data-td-anim~="dato-cifra-cuenta"]{white-space:nowrap;font-kerning:none} .td-dato-cifra-cuenta__visual{white-space:pre} .td-dato-cifra-cuenta__celda{position:relative;display:inline-block} .td-dato-cifra-cuenta__fantasma{visibility:hidden} .td-dato-cifra-cuenta__glifo{position:absolute;top:0;left:50%;translate:-50% 0;white-space:pre} /* Mientras cuenta, el signo se escribe en la celda en blanco pegada al primer dígito visible, alineado a la derecha: toca al dígito como en la cifra final. */ .td-dato-cifra-cuenta__glifo[data-td-signo]{left:auto;right:0;translate:none} /* ------------------------------------------------------------ 2 · Composición del espécimen ------------------------------------------------------------ */ .td-dato-cifra-cuenta{position:absolute;inset:64px var(--td-margen) 104px;display:grid; grid-template-rows:auto auto 1fr auto;align-content:start} .td-dato-cifra-cuenta__kicker{margin:0 0 30px;font:500 12px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--td-texto-3)} /* KPI protagonista: .kpi .kn del canon (Fraunces 600, interlineado .85). */ .td-dato-cifra-cuenta__kpi{display:grid;gap:14px;justify-items:start} .td-dato-cifra-cuenta__kl{margin:0;font:500 11px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--td-texto-3)} .td-dato-cifra-cuenta__kn{margin:0;font-family:var(--serif);font-weight:600;font-size:176px;line-height:.85;letter-spacing:-.02em;color:var(--td-texto);font-variant-numeric:lining-nums} .td-dato-cifra-cuenta__kp{font-size:.28em;font-weight:500;letter-spacing:0;color:var(--td-texto-2);vertical-align:.18em;margin-right:.12em} /* El único gesto rojo de la pieza: la unidad (.ku del canon). */ .td-dato-cifra-cuenta__ku{font-size:.3em;letter-spacing:0;color:var(--td-acento);margin-left:.1em} /* Cifras secundarias: datos en Plex Mono (tabular por diseño). */ .td-dato-cifra-cuenta__fila{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--td-linea); display:grid;grid-template-columns:repeat(2,minmax(0,300px));column-gap:56px;align-self:start} .td-dato-cifra-cuenta__fila div{display:grid;gap:10px;align-content:start} .td-dato-cifra-cuenta__fila dt{font:500 11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--td-texto-3)} .td-dato-cifra-cuenta__fila dd{margin:0;font:500 44px/1 var(--mono);letter-spacing:-.01em;color:var(--td-texto)} .td-dato-cifra-cuenta__fila small{display:block;margin-top:8px;font:400 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--td-texto-3)} .td-dato-cifra-cuenta__fuente{margin:0;font:400 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--td-texto-3)} /* origen: filete-subrayado/anim.css · sha256 2a281d220c1b6d2ebaa6ed4486e9492a3471b5c8dfb78e6c1010faa921967eea */ /* ============================================================ Trato Directo · banco de animaciones · filete-subrayado Subrayado que se traza: énfasis de una palabra y enlace. ÉNFASIS (entrada al verse) calcula El trazo es un elemento propio (no ::after): así el runtime lo arma y lo traza (td-traza-x · scale desde el inicio · --dur-4 · --ease-out-soft · fill both) sin ocultar nunca la palabra, y el reloj lo muestrea cuadro a cuadro. Alto .08em a −.08em bajo la palabra. Es un subrayado de texto, no el filete base: --rojo-papel sobre papel y --rojo-foto sobre tinta (--td-acento, como .sub-red y .t-under de la skill). Una palabra por pieza. Tras un titular que entra, el trazo espera su entrada: --td-retraso: var(--dur-4) (800 ms en total). ENLACE (hover y foco) Ver la fuente @property --td-link (, 0) con transition --dur-1 · --ease-out: un fondo de 1 px en currentColor (2 px con --cta) crece desde el inicio (en RTL, desde la derecha). En reposo queda un hairline en el tono terciario, para que el enlace no dependa solo del color. Admite varias líneas (el fondo sigue a cada fragmento). aria-current lo deja trazado; sin href o con aria-disabled, apagado. Conserva focus-visible y forced-colors. Sin trazo «contour» ni lavados de radios orgánicos. Con movimiento reducido: el énfasis ya trazado (reposo) y el enlace sin transición (guardia global del runtime). Crédito: .draw-underline y DrawWord (web v2 de TD) y el enlace direccional de living-link.css de 000h by Cojeev (cojeev-ui, MIT), reimplementados con tokens TD; sin código copiado. ============================================================ */ /* — Énfasis — */ .td-filete-subrayado{position:relative;font-style:normal;white-space:nowrap} /* --td-acento: --rojo-papel sobre papel, --rojo-foto sobre tinta (skill: .sub-red, .t-under). */ .td-filete-subrayado__trazo{position:absolute;left:0;right:0;bottom:-.08em;height:.08em;background:var(--td-acento);pointer-events:none} .td-filete-subrayado__trazo:dir(rtl){transform-origin:right center} /* — Enlace — */ @property --td-link{syntax:"";inherits:false;initial-value:0} .td-filete-subrayado-enlace{ --td-link:0; --td-fse-grosor:1px; color:inherit;text-decoration:none;cursor:pointer; padding-bottom:.16em; background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--td-texto-3),var(--td-texto-3)); background-repeat:no-repeat; background-size:calc(100% * var(--td-link)) var(--td-fse-grosor),100% 1px; background-position:0 100%,0 100%; -webkit-box-decoration-break:slice;box-decoration-break:slice; transition:--td-link var(--dur-1) var(--ease-out); } .td-filete-subrayado-enlace:dir(rtl){background-position:100% 100%,0 100%} .td-filete-subrayado-enlace--cta{--td-fse-grosor:2px;font-weight:600} @media (hover:hover){ .td-filete-subrayado-enlace[href]:not([aria-disabled="true"]):hover{--td-link:1} } .td-filete-subrayado-enlace[href]:not([aria-disabled="true"]):focus-visible{--td-link:1;outline:2px solid currentColor;outline-offset:4px} .td-filete-subrayado-enlace[aria-current]:not([aria-current="false"]){--td-link:1} .td-filete-subrayado-enlace:not([href]),.td-filete-subrayado-enlace[aria-disabled="true"]{ --td-link:0;cursor:not-allowed;color:var(--td-texto-3); background-image:linear-gradient(var(--td-linea),var(--td-linea));background-size:100% 1px;background-position:0 100%; } @media (forced-colors:active){ .td-filete-subrayado-enlace{background-image:none;text-decoration:underline} .td-filete-subrayado__trazo{background:CanvasText} } /* ------------------------------------------------------------ Composición del espécimen ------------------------------------------------------------ */ .td-filete-subrayado-demo{position:absolute;inset:64px var(--td-margen) 96px;display:grid;align-content:center;justify-items:start} .td-filete-subrayado-demo__kicker{margin:0 0 24px;font:500 12px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--td-texto-3)} .td-filete-subrayado-demo__tesis{margin:0;max-width:19ch;font:500 68px/1.14 var(--serif);letter-spacing:-.02em;color:var(--td-texto)} .td-filete-subrayado-demo__tenue{color:var(--td-texto-3)} .td-filete-subrayado-demo__enlaces{margin-top:48px;padding-top:20px;border-top:1px solid var(--td-linea);width:100%} .td-filete-subrayado-demo__etiqueta{margin:0 0 14px;font:500 11px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--td-texto-3)} .td-filete-subrayado-demo__enlaces ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 40px; font:500 17px/1.4 var(--sans);color:var(--td-texto)}