/* Landthor -- estilos de la portada. Estaba duplicado byte a byte
   dentro de index.html y en/index.html, con lo que cada arreglo habia
   que hacerlo dos veces. Depende de tokens.css y components.css. */

*{box-sizing:border-box;}
    html,body{margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    a{color:var(--accent);text-decoration:none;}
    a:hover{color:var(--accent-2);}
    ::selection{background:var(--accent-soft);}
    .lt-logo-marquee:hover .lt-logo-track,.lt-logo-marquee:focus-within .lt-logo-track{animation-play-state:paused;}
    /* El runtime trunca los data: URI dentro de atributos style inline
       (se quedaba en "data:image/svg+xml" y la textura no se pintaba,
       dejando un ERR_INVALID_URL en consola). Aqui si sobrevive. */
    .lt-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.5;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTQwJyBoZWlnaHQ9JzE0MCcgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjU1Jy8+PC9zdmc+");}
    .lt-footer-logo{display:block;width:auto;height:34px;}
    .lt-direction-section{position:relative;z-index:2;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
    .lt-direction-grid{max-width:1240px;margin:0 auto;padding:84px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:clamp(56px,8vw,112px);align-items:center;}
    .lt-direction-visual{position:relative;margin:0;min-height:460px;overflow:hidden;background:var(--ink);}
    .lt-direction-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% center;display:block;filter:saturate(0.78) contrast(1.04);}
    .lt-direction-visual::after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(to bottom,transparent,rgba(41,56,70,0.8));pointer-events:none;}
    .lt-direction-caption{position:absolute;z-index:1;left:24px;right:24px;bottom:22px;margin:0;color:var(--paper);font-family:var(--font-mono);font-size:var(--fs-3xs);letter-spacing:0.12em;text-transform:uppercase;}
    .lt-rail-section{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:88px 32px 76px;overflow:hidden;}
    .lt-rail-viewport{overflow:hidden;padding-bottom:4px;max-width:100%;}
    .lt-rail-track{width:100%;min-width:0;}
    .lt-rail-chart{position:relative;height:230px;overflow:hidden;}
    .lt-rail-area{position:absolute;inset:0;z-index:0;clip-path:polygon(0 100%,0 96%,8% 95%,16% 92%,24% 88%,32% 83%,40% 77%,48% 69%,56% 60%,64% 49%,72% 38%,80% 27%,88% 17%,96% 8%,100% 4%,100% 100%);background:linear-gradient(to top,rgba(246,138,42,0.16),rgba(246,138,42,0.035));transform-origin:left bottom;animation:lt-area-grow 1.8s 0.25s cubic-bezier(.22,.7,.3,1) both;pointer-events:none;}
    .lt-rail-bars{position:relative;z-index:2;}
    @media (max-width:900px){
      .lt-direction-grid{grid-template-columns:1fr;padding:64px 24px;gap:42px;}
      .lt-direction-visual{width:100%;min-height:390px;}
      .lt-stack-shell{grid-template-columns:1fr;gap:16px;padding:20px 24px;}
      .lt-logo-group{gap:38px;padding-right:38px;}
      .lt-logo-item{width:82px;flex-basis:82px;}
      .lt-rail-section{padding:72px 22px 64px;}
      .lt-rail-chart{height:190px;}}

    /* --- HERO -------------------------------------------------------------
       La figura ocupa la mitad derecha completa, de borde a borde, igual que
       hacia el video que sustituye. En la primera version iba dentro de la
       reticula con align-items:end: los pies alineaban, pero dejaba 477px
       vacios encima, casi la mitad de la altura del hero, y la figura se leia
       como un cuadro arrinconado en vez de como el visual de la portada.
       Ahora es un panel absoluto de altura completa con su propia superficie
       y su filete, y el texto va en el contenedor de medida normal. */
    .lt-hero{position:relative;z-index:2;display:grid;grid-template-rows:1fr auto;min-height:min(calc(100svh - 74px),880px);background:var(--paper);}
    .lt-hero-main{position:relative;display:flex;align-items:center;min-height:0;}
    .lt-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vh,88px) var(--gutter);}
    .lt-hero-copy{width:min(52%,620px);}
    .lt-hero-eyebrow{margin:0 0 26px;letter-spacing:0.18em;}
    .lt-hero-title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h1);line-height:1.03;letter-spacing:-0.02em;margin:0 0 28px;text-wrap:balance;}
    .lt-hero-em{color:var(--accent-ink);font-style:italic;font-weight:500;position:relative;display:inline-block;}
    .lt-hero-em::after{content:"";position:absolute;left:0;right:0;bottom:0.08em;height:0.09em;background:var(--accent);opacity:0.3;transform-origin:left;animation:lt-wipe 1.1s 0.7s var(--ease) both;}
    .lt-hero-lead{font-size:var(--fs-xl);color:var(--warm);max-width:46ch;margin:0 0 32px;text-wrap:pretty;}
    .lt-hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
    .lt-hero-contact{font-size:var(--fs-sm);color:var(--warm);margin:0;}

    /* Panel derecho. Sin marco ni radius: los filetes los dibuja el gap de 1px
       sobre --line, el mismo recurso que el caso de exito. Ni una cifra, asi
       que no hay dato de cliente inventado que declarar. */
    /* El ancho del panel NO se topa: es la mitad derecha de la pantalla y debe
       seguir siendolo a cualquier resolucion. Con min(46%,700px) el tope ganaba
       a partir de 1522px y el panel se quedaba en el 36% a 1920 y en el 27% a
       2560, con lo que reaparecia el hueco que este cambio venia a cerrar.
       Lo que se topa es el contenido, que a 1178px de ancho tendria la columna
       de etiquetas en 420px y las filas ilegibles. */
    .lt-hero-figure{position:absolute;inset:0 0 0 auto;width:46%;margin:0;
      display:flex;flex-direction:column;justify-content:center;
      background:var(--paper-2);border-left:1px solid var(--line);
      padding:clamp(48px,7vh,80px) var(--gutter) clamp(48px,7vh,80px) clamp(28px,3vw,56px);}

@media (max-width:1180px){
      .lt-hero-copy{width:min(56%,560px);}
      .lt-hero-figure{width:42%;}}
    /* Colapsa a 900px, el mismo punto en el que la cabecera pasa a hamburguesa
       y en el que colapsan .lt-grid-a y .lt-grid-b. */
    @media (max-width:900px){
      .lt-hero{min-height:0;}
      .lt-hero-main{display:block;}
      .lt-hero-inner{padding:52px var(--gutter) 40px;}
      .lt-hero-copy{width:100%;}
      .lt-hero-lead{max-width:none;}
      /* relative, no static: el SVG y el foco van con inset:0 y si la figura no
         esta posicionada toman como referencia .lt-hero-main, con lo que se
         extienden sobre el titular y el subtitulo. El velo naranja sobre el
         texto baja --warm por debajo de AA. */
      .lt-hero-figure{position:relative;width:auto;border-left:0;border-top:1px solid var(--line);
        padding:44px var(--gutter);}}
    @media (max-width:560px){
      .lt-hero-buttons{flex-direction:column;align-items:stretch;}}

    /* --- Fondo animado del panel del hero -----------------------------------
       Sustituye al MP4 de 2,1 MB. Es una malla de nodos y aristas dibujada en
       SVG: pesa unos 6 KB, es nitida a cualquier resolucion y es de Landthor,
       no de un banco de imagenes. Vive detras del contenido, con una mascara
       que la apaga en el centro para que el texto no compita con ella.
       El contraste del texto no cambia: el trazo mas fuerte de la malla esta a
       0.28 de opacidad sobre --paper-2 y el contenido va por encima. */
    .lt-hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
      -webkit-mask-image:radial-gradient(ellipse 62% 46% at 50% 50%,transparent 12%,#000 78%);
      mask-image:radial-gradient(ellipse 62% 46% at 50% 50%,transparent 12%,#000 78%);}
    .lt-hero-art-links line{stroke:var(--warm);stroke-width:1;opacity:0.3;
      stroke-dasharray:3 7;animation:lt-dash 9s linear infinite;animation-delay:var(--d);}
    .lt-hero-art-nodes circle{fill:var(--warm);opacity:0.45;
      animation:lt-pulse 6.5s ease-in-out infinite;animation-delay:var(--d);}
    .lt-hero-art-nodes circle.is-accent{fill:var(--accent);opacity:0.75;r:4;}
    /* Calor en las esquinas, nunca detras del texto. Medido: un velo naranja
       sobre --paper-2 baja --warm a 4.32:1 ya al 10% de alfa, por debajo del
       4.5 de AA. Por eso los dos focos van a las esquinas superior derecha e
       inferior izquierda, que quedan libres porque el contenido va centrado. */
    .lt-hero-figure::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:
        radial-gradient(38% 26% at 88% 10%, rgba(246,138,42,0.26), transparent 68%),
        radial-gradient(34% 22% at 12% 92%, rgba(246,138,42,0.18), transparent 70%);}

    /* --- VENTAJAS ---------------------------------------------------------
       Lista editorial, no rejilla de tarjetas: seis celdas iguales con adorno
       es justo el patron que hay que evitar. Se reutiliza el lenguaje del caso
       de exito: numeracion en serif, filete de 1px por fila y nada de marcos.
       La cabecera queda fija mientras la lista pasa: el argumento permanece a
       la vista mientras se leen las pruebas. */
    #ventajas{position:relative;z-index:2;background:var(--paper);border-top:1px solid var(--line);}
    .lt-adv{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,9vh,108px) var(--gutter);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,72px);}
    .lt-adv-head{grid-column:1 / 5;position:sticky;top:114px;align-self:start;}
    .lt-adv-title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-0.015em;margin:0 0 18px;text-wrap:balance;}
    .lt-adv-intro{font-size:var(--fs-base);color:var(--warm);margin:0;text-wrap:pretty;}
    .lt-adv-list{grid-column:5 / 13;margin:0;padding:0;list-style:none;border-top:1px solid var(--line);}
    .lt-adv-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:clamp(16px,2vw,28px);padding:26px 0;border-bottom:1px solid var(--line);}
    .lt-adv-n{font-family:var(--font-serif);font-size:var(--fs-lg);line-height:1.35;color:var(--warm);font-variant-numeric:tabular-nums;transition:color var(--dur-fast) ease;}
    .lt-adv-item h3{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:600;line-height:1.22;margin:0 0 8px;}
    .lt-adv-item p{margin:0;font-size:var(--fs-base);color:var(--warm);text-wrap:pretty;}
    .lt-adv-item:hover .lt-adv-n{color:var(--accent-ink);}
    @media (max-width:900px){
      .lt-adv{grid-template-columns:1fr;gap:40px;padding:64px var(--gutter);}
      .lt-adv-head{grid-column:1 / -1;position:static;}
      .lt-adv-list{grid-column:1 / -1;}}
    @media (max-width:560px){
      .lt-adv-item{grid-template-columns:36px minmax(0,1fr);gap:14px;}}

    /* --- Fase 6: acabado ---------------------------------------------------
       Grano. Estaba en z-index 1 con las diez secciones encima en z-index 2 y
       fondo opaco, asi que no se veia en ninguna parte. Sube por encima del
       contenido y por debajo de la cabecera, y pasa a mix-blend-mode:overlay:
       el ruido es gris medio, asi que en overlay aclara donde es claro y
       oscurece donde es oscuro. Funciona igual sobre papel que sobre tinta,
       cosa que multiply no hacia. */
    .lt-grain{z-index:15;opacity:0.55;mix-blend-mode:overlay;}
    @media (prefers-reduced-motion:reduce){.lt-grain{opacity:0.4;}}

    /* Momento de respiro: medida estrecha y mas aire vertical, para que el
       enunciado del problema respire como una portada y no como otra banda. */
    .lt-direction-grid{max-width:var(--maxw-narrow);padding:clamp(96px,13vh,140px) var(--gutter);}

    /* El caso es el momento a sangre de la pagina: sin medida y con el maximo
       aire vertical. Es el unico bloque que rompe la reticula. */
    /* Doble clase a proposito: .lt-grid-b se declara mas abajo en el fichero
       y con especificidad identica ganaria por orden. */
    .lt-grid-b.lt-grid-b--wide{max-width:none;}

    /* Micro-interaccion de la lista de ventajas: la fila se desplaza un pelo y
       su filete se tine. Nada de sombras ni de escalados. */
    .lt-adv-item{transition:background var(--dur-fast) ease;}
    .lt-adv-item > div{transition:transform var(--dur-fast) var(--ease);}
    .lt-adv-item:hover > div{transform:translateX(4px);}
    .lt-adv-item:hover{border-bottom-color:var(--accent);}

    /* --- Fase 1: reglas que sustituyen a lo que resolvia el runtime --- */
    .lt-page{background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.5;overflow-x:clip;position:relative;}
    /* Rejillas: antes eran gridA y gridB, calculadas en JS segun window.innerWidth. */
    .lt-grid-a{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(300px,1.15fr);gap:64px;align-items:start;max-width:1240px;margin:0 auto;}
    .lt-grid-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,0.8fr);gap:72px;align-items:start;max-width:1240px;margin:0 auto;}
    @media (max-width:900px){
      .lt-grid-a,.lt-grid-b{grid-template-columns:1fr;gap:40px;}}
    .site-header .nav-links a.is-active{color:var(--hdr-accent);border-bottom-color:var(--hdr-accent);}

/* --- Rail: las etiquetas se apilan en movil --------------------------------
   A 375px las cinco estaciones caian en columnas de unos 66px con una
   descripcion entera dentro. No desbordaba, porque .lt-rail-viewport recorta,
   pero era ilegible. Por debajo de 720px la grafica de barras se mantiene --
   funciona como forma a cualquier ancho -- y las etiquetas pasan a lista, con
   el mismo filete de 1px que usa el resto del sitio. */
.lt-rail-labels{display:flex;gap:2px;align-items:flex-start;}
.lt-rail-station{flex:1 1 0;min-width:0;padding-right:16px;}
.lt-rail-tick{height:22px;border-left:1px solid var(--on-ink-line);}
.lt-rail-body{padding-top:18px;}
@media (max-width:720px){
  .lt-rail-labels{display:block;margin-top:26px;}
  .lt-rail-station{padding-right:0;border-top:1px solid var(--on-ink-line);}
  .lt-rail-tick{display:none;}
  .lt-rail-body{display:grid;grid-template-columns:minmax(88px,0.4fr) minmax(0,1fr);
    gap:4px 18px;align-items:baseline;padding:15px 0;}}

/* --- Panel del hero: cuadro de mando de ejemplo --------------------------
       Sustituye a la pila de cinco piezas (constelacion + grafica + pregunta +
       tres filas + banda "Capa de datos"). El argumento se cuenta con imagen y
       no con parrafos: tres tarjetas apagadas que dan tres cifras distintas
       para el mismo mes, y debajo una sola tarjeta solida con la cifra unica.
       Las tres filas de texto sobraban porque ese mismo argumento lo desarrolla
       la seccion "Que hacemos", con su diagrama de sistemas convergiendo.

       Claro y oscuro conviven dentro de la propia composicion, igual que ya
       hacian .lt-hero-row (papel) y .lt-hero-out (tinta): las tres tarjetas
       usan la familia --ink / --warm / --line sobre papel y la tarjeta grande
       usa la familia --on-ink* sobre --ink. Ni un hexadecimal suelto.

       Todas las cifras son inventadas. La etiqueta "Datos de ejemplo" va en el
       mismo cuerpo y el mismo contraste que el titulo del cuadro, no en letra
       pequena, y es lo primero que se lee a la derecha. */
    .lt-dash{position:relative;z-index:1;width:100%;max-width:620px;margin-inline:auto;}

    .lt-dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;margin-bottom:14px;}
    .lt-dash-title,.lt-dash-tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);}
    /* margin-left:auto y no solo space-between: entre 900 y 1030px el titulo y
       la etiqueta no caben en la misma linea y flex-wrap la mandaria al margen
       izquierdo de la segunda. Asi baja pegada a la derecha y la cabecera del
       cuadro se lee igual en las dos situaciones. */
    .lt-dash-tag{margin-left:auto;border:1px solid var(--ink);padding:3px 8px;white-space:nowrap;}

    /* Las tres tarjetas: mismo mes, tres cifras. El filete de 1px lo dibuja el
       hueco de la rejilla sobre --line, el mismo recurso que usaba
       .lt-hero-rows y que usa el caso de exito. Van sobre --paper, medio tono
       por debajo del blanco, para que la tarjeta oscura de abajo mande. */
    .lt-dash-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
    .lt-dash-c{background:var(--paper);min-width:0;display:flex;flex-direction:column;gap:7px;
      padding:clamp(11px,1.1vw,16px) clamp(9px,1vw,14px);}
    .lt-dash-k{font-family:var(--font-mono);font-size:var(--fs-3xs);letter-spacing:0.11em;text-transform:uppercase;color:var(--warm);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    /* --warm da 5.00:1 sobre --paper: apagado, pero pasa AA. Las tres cifras no
       pueden ser ilegibles, solo secundarias. */
    .lt-dash-v{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.1;color:var(--warm);
      font-variant-numeric:tabular-nums;white-space:nowrap;}

    /* La union: las tres bajan y se convierten en una. preserveAspectRatio
       "none" deja que la caja se estire con el panel, y non-scaling-stroke
       mantiene el trazo en 1px real a cualquier ancho. */
    .lt-dash-join{display:block;width:100%;height:clamp(34px,4.5vh,46px);}
    .lt-dash-j{fill:none;stroke:var(--warm);stroke-width:1;opacity:0.72;vector-effect:non-scaling-stroke;
      stroke-dasharray:3 5;animation:lt-dash 3.2s linear infinite;}
    .lt-dash-j:nth-of-type(2){animation-duration:2.6s;}
    .lt-dash-j:nth-of-type(3){animation-duration:3.8s;}
    /* El unico tramo continuo y de marca de toda la union: el que ya es una. */
    .lt-dash-jo{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;}

    /* La tarjeta grande. Superficie oscura y filete naranja: es el unico
       elemento del panel que usa color de marca como superficie. */
    .lt-dash-hero{background:var(--ink);border-top:2px solid var(--accent);
      padding:clamp(16px,2vw,24px) clamp(14px,1.8vw,22px) clamp(14px,1.8vw,20px);}
    .lt-dash-hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:8px;}
    .lt-dash-k--on{color:var(--accent-on-ink);}
    .lt-dash-delta{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--accent-on-ink);
      border:1px solid var(--on-ink-line);padding:2px 7px;font-variant-numeric:tabular-nums;white-space:nowrap;}
    .lt-dash-big{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h2-sm);line-height:1.05;
      letter-spacing:-0.02em;color:var(--on-ink);font-variant-numeric:tabular-nums;margin:0 0 clamp(14px,2vh,20px);}

    .lt-dash-bars{display:flex;align-items:flex-end;gap:clamp(3px,0.7vw,6px);height:clamp(48px,7vh,80px);}
    .lt-dash-bars span{flex:1 1 0;min-width:0;height:var(--h);background:var(--on-ink-mute);opacity:0.32;
      border-radius:2px 2px 0 0;transform-origin:bottom;}
    .lt-dash-bars span:last-child{background:var(--accent);opacity:1;}
    .lt-dash-axis{display:flex;justify-content:space-between;margin-top:9px;padding-top:8px;
      border-top:1px solid var(--on-ink-line);font-family:var(--font-mono);font-size:var(--fs-3xs);
      letter-spacing:0.11em;text-transform:uppercase;color:var(--on-ink-mute);}

    /* En reposo las barras estan a su altura final. La entrada solo existe bajo
       .is-in, la clase que pone assets/reveal.js, que exige JS, observador
       disparado y movimiento no reducido. El criterio viene de una grafica que
       quedo invisible en produccion por tener el estado base sin dibujar: si el
       reloj de animacion no corre, el cuadro se ve igual de completo. */
    .lt-motion .lt-hero-figure.is-in .lt-dash-bars span{
      animation:lt-grow 0.8s var(--ease) backwards;animation-delay:var(--d);}

    /* La constelacion pasa a ir POR ENCIMA, translucida. Ya no necesita el
       agujero central de antes -- ahora hay contenido en todo el panel -- sino
       lo contrario: apagarse sobre la tarjeta oscura, que es donde vive la
       unica cifra que importa. No lleva mix-blend-mode a proposito: el trazo es
       --warm, un gris calido que se lee tanto sobre --paper como sobre --ink, y
       cualquier modo de fusion se comportaria al reves en una de las dos
       superficies (multiply desaparece sobre tinta, screen sobre papel). */
    .lt-hero-figure .lt-hero-art{z-index:3;opacity:0.62;
      -webkit-mask-image:radial-gradient(ellipse 86% 40% at 50% 76%,transparent 6%,rgba(0,0,0,0.42) 46%,#000 84%);
      mask-image:radial-gradient(ellipse 86% 40% at 50% 76%,transparent 6%,rgba(0,0,0,0.42) 46%,#000 84%);}

    /* A partir de 1400px el panel pasa de 500 a mas de 600px utiles y las tres
       cifras pueden crecer sin tocarse. Por debajo se quedan en --fs-sm, que es
       lo que cabe en la banda mala: 900-1180px, donde el panel es el 42% de la
       pantalla pero el viewport ya es ancho. */
    @media (min-width:1400px){
      .lt-dash-k{font-size:var(--fs-2xs);}
      .lt-dash-v{font-size:var(--fs-base);}}
    @media (max-width:900px){
      /* El panel pasa a ancho completo debajo del texto: la mascara se abre
         para cubrir toda la caja y baja un punto para no competir con el
         titular, que aqui queda justo encima. */
      .lt-hero-figure .lt-hero-art{opacity:0.5;
        -webkit-mask-image:radial-gradient(ellipse 100% 44% at 50% 74%,transparent 8%,rgba(0,0,0,0.4) 48%,#000 88%);
        mask-image:radial-gradient(ellipse 100% 44% at 50% 74%,transparent 8%,rgba(0,0,0,0.4) 48%,#000 88%);}}
    @media (max-width:560px){
      /* A 375px quedan 311px utiles: 103px por tarjeta. Con el padding minimo
         de 9px, "171.480 €" a 13px de mono ocupa 70 de los 85 disponibles. Las
         tres siguen en fila porque tres contra una es justamente el argumento:
         apilarlas lo destruiria. */
      .lt-dash-head{gap:6px 10px;}
      .lt-dash-c{gap:5px;}
      .lt-dash-hero-top{margin-bottom:6px;}}

    /* Si algun dia tokens.css gana paleta por esquema de color -- hoy solo la
       tiene assets/caso.css --, este componente la hereda entero salvo estas
       dos opacidades, que sobre fondo oscuro se quedan cortas. Va comentado
       porque activarlo hoy pondria un panel oscuro junto a un hero claro:
       la home no tiene modo oscuro y esto no se arregla en un componente.
 */