/* assets/ecosistema.css · Estilos propios de la página del ecosistema LONGROUP
 *
 * Portado literal desde la maqueta aprobada del laboratorio
 * (labs.landofnomadsgroup.com/marketing/web/ecosistema/), con sus comentarios
 * originales: explican decisiones ya medidas (contraste, reparto de la rejilla,
 * especificidad frente a `filter-tabs`) que no conviene volver a deducir.
 *
 * Alcance: SOLO las clases nuevas de esta página (`marcas-grid`, `marca-card`,
 * `marca-sello`, `eco-mini`, `panel-eco`, `marca-cab`, `eco-entrada`,
 * `eco-cuatro`, `eco-chips`, `eco-extras`). No redefine ninguna clase del
 * sistema: lo que toca de `filter-tabs` va anclado a `.marcas-grid`, que pesa
 * más, así que no cambia el aspecto de las pestañas de ninguna otra página.
 *
 * Las 18 variables que usa (`--brand`, `--panel`, `--s-4`, `--sh-1`…) ya existen
 * en tokens.css y components.css. La única propia, `--eco-mini-top`, se define
 * aquí mismo.
 *
 * Se encola en TODAS las páginas, igual que `aire-secciones.css`: cada regla
 * lleva su selector propio y fuera de esta página no pinta nada.
 *
 * Añadido el 2026-09-07 para la tarea ClickUp 86cb9bm97. NO toca ninguna hoja
 * existente; la vuelta atrás es borrar este archivo y su bloque en enqueue.php.
 */

/* ---- Las cinco divisiones, con su logotipo ----
   Los logotipos de submarca del cliente son BLANCOS (asi vienen del brandbook), asi que
   sobre el papel claro de la web serian invisibles: cada uno va dentro de una caja del
   color de marca, que es donde el blanco funciona. Se usa el mismo color en las cinco a
   proposito, porque el mensaje de la pagina es que son un grupo y no cinco marcas sueltas.
   Los logotipos NO se recolorean ni se redibujan: se colocan tal cual llegan. */
/* Cinco tarjetas que se reparten solas y con la ULTIMA FILA CENTRADA a cualquier ancho.
   Dos intentos fallidos antes de dar con esto, los dos medidos:
     1. Rejilla de seis carriles forzando la cuarta a la columna 2. A 1024 px repartia
        2-1-1-1 y ademas DESORDENABA las tarjetas (Investment antes que Academy).
     2. Rejilla de columnas acotadas y centradas. Reparte y ordena bien, pero la ultima
        fila se pega a la izquierda: con dos columnas quedaba 2-2-1 y la quinta suelta.
   La que funciona es dejar el FLEX que ya trae `filter-tabs` y solo centrarlo: en flex,
   cada fila se centra sola, incluida la ultima, sin saber cuantas caben. */
/* EL `display:flex` VA ESCRITO AQUI, no heredado. En la maqueta bastaba con dejar el que
   trae `filter-tabs`, pero dentro del port hay una regla del sistema que lo pisa:

     .lon-native :has(> .card-listing-v2) { display:grid; grid-template-columns:repeat(2,…) }

   Vive en elementor-native.css, existe para las tarjetas de PROYECTO (desviacion pedida
   por el CEO el 2026-08-07) y agarra su contenedor por lo que lleva DENTRO, porque alli no
   tiene clase propia. Las tarjetas de esta pagina llevan `card-listing-v2` en la maqueta,
   asi que en cuanto la seccion entra en un `.lon-native` esa regla las caza tambien: pesa
   una clase mas que `.filter-tabs` a secas, gana, y convierte la rejilla en grid.

   Medido a 1440 con el port ya montado: en grid las seis quedaban 4+2 con la SEGUNDA FILA
   PEGADA A LA IZQUIERDA, porque en grid `justify-content:center` centra las pistas y no
   los elementos sueltos de la ultima fila. Es exactamente el fallo 2 de la lista de
   arriba, reaparecido por otra via.

   Se declara con `.lon-native .marcas-grid.filter-tabs`: TRES clases, una mas que el
   `.lon-native :has(…)` del sistema, que suma dos. Con dos y dos habia empate, y en empate
   gana la que se imprime despues; esta hoja va antes que `elementor-native.css`, asi que
   perdia y la rejilla seguia en grid (medido: primer intento fallido). Corrige SOLO esta
   rejilla: la regla de las tarjetas de proyecto se queda intacta.

   `grid-template-columns:none` se anula ademas del display para que no quede colgando si
   algun dia el contenedor volviera a grid por otra via. */
.lon-native .marcas-grid.filter-tabs{display:flex;flex-wrap:wrap;grid-template-columns:none}
.marcas-grid{gap:var(--s-4);justify-content:center;align-items:stretch}
.marcas-grid > *{flex:0 1 340px;max-width:340px}
@media (max-width:640px){ .marcas-grid > *{flex:1 1 100%;max-width:none} }

/* La tarjeta ES la pestaña: un boton, no un enlace. Se le quita todo lo que el navegador
   le pone por ser boton (borde, fondo gris, tipografia propia) para que se vea como una
   tarjeta del sistema. `filter-tabs` viene en fila; aqui manda la rejilla. */
/* OJO CON LA ESPECIFICIDAD. `filter-tabs button` del sistema pinta una PILDORA beige
   (radio 999px y fondo `--panel`), que es lo correcto para una pestaña de texto y un
   desastre para una tarjeta con foto: salian ovalos beige. Por eso todas estas reglas
   van ancladas a `.marcas-grid.filter-tabs`, que pesa mas que la del sistema y la
   corrige sin tocarla para nadie mas. */
/* Se deja el `display:flex` que trae `filter-tabs`: es justo lo que hace falta para que
   la ultima fila se centre sola. */
/* El RADIO hay que devolverlo a mano: `filter-tabs button` lo pone en 999px y la foto
   salia con forma de capsula. Y la tarjeta se hace mas alta que la de un proyecto
   (16/8.5 daba 213 px, en los que no cabe una foto y su panel sin apelotonarse). */
.marcas-grid.filter-tabs .marca-card{
  background:transparent;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;
  width:100%;letter-spacing:normal;color:inherit;box-shadow:var(--sh-1);
  border-radius:var(--r-xl);aspect-ratio:16/12;
  transition:box-shadow .18s ease,transform .18s ease}
.marcas-grid.filter-tabs .marca-card:hover{
  background:transparent;box-shadow:var(--sh-3);transform:translateY(-3px)}
.marcas-grid.filter-tabs .marca-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* El sello del logotipo va SOBRE la foto, donde el sistema pone su etiqueta. */
.marcas-grid.filter-tabs .marca-sello{position:absolute;top:14px;left:14px;z-index:1;
  aspect-ratio:auto;padding:10px 14px;min-width:0;width:auto}
.marcas-grid.filter-tabs .marca-sello img{max-width:96px;max-height:26px}
/* La elegida NO se pinta de color de marca (eso haria el `filter-tabs` normal y aqui
   taparia el logotipo): se marca con un contorno y algo mas de sombra.

   El contorno usa `--brand`, que SI gira con el tema, al reves que el sello: aqui no hay
   logotipo blanco encima que proteger, asi que puede girar y le conviene. Medido con el
   tema ya asentado: 5,59 en claro (rojo sobre tarjeta blanca) y 6,69 en oscuro (coral
   sobre tarjeta casi negra), con 3 de minimo para un indicador.

   Al medir esto: hay que ESPERAR a que el cambio de tema termine. Una lectura tomada
   justo despues de pulsar devuelve el color anterior y hace pensar que algo falla. */
.marcas-grid.filter-tabs .marca-card.is-active,
.marcas-grid.filter-tabs .marca-card.is-active:hover{
  background:transparent;color:inherit;
  box-shadow:var(--sh-3),inset 0 0 0 3px var(--brand);transform:none}
/* El panel de cristal es una fila: nombre y descripcion a la izquierda, boton a la
   derecha. Sin esto el texto largo lo hace envolver y el boton cae debajo. */
.marcas-grid.filter-tabs .glass-panel{flex-wrap:nowrap;align-items:flex-end}
.marcas-grid.filter-tabs .glass-panel .info{min-width:0}
.marcas-grid.filter-tabs .glass-panel .right{flex:0 0 auto}
.marcas-grid.filter-tabs .marca-card__n{display:block;font:600 18px/1.2 var(--font-display);letter-spacing:normal}
.marcas-grid.filter-tabs .marca-card__d{display:block;font:400 13px/1.5 var(--font-body);
  color:var(--text-muted);margin-top:4px;letter-spacing:normal}
/* El panel que se ensena. `display` lo mueve el programa de pestanas de la casa; aqui
   solo se le da su entrada, y se deja la opacidad fijada para que no herede la animacion
   de scroll de la web, que dejaria el panel invisible al volver a ensenarlo. */
.panel-eco{opacity:1 !important;transform:none !important;animation:eco-entra .28s ease both}
@keyframes eco-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .panel-eco{animation:none} }
/* Altura FIJA del sello. Los cinco logotipos tienen proporciones distintas (el de Land of
   Nomads es mucho mas apaisado que el de Academy), asi que dejandolos crecer a su aire
   cada tarjeta quedaba de una altura y la fila se veia desigual. Con la caja fijada, el
   logotipo se centra dentro y las cinco miden lo mismo.

   EL FONDO ES EL ROJO FIJO DE LA MARCA, NO `--brand`. Medido: `--brand` en tema oscuro
   vale coral claro (#ED7F55) y el logotipo blanco encima cae a 2,7 de contraste, por
   debajo del 3 que pide un grafismo. Sobre el rojo de marca (#B83E25), que no cambia con
   el tema, da 5,59 en claro Y en oscuro. Ademas es lo correcto de marca: el logotipo del
   cliente va sobre su rojo corporativo, no sobre una variante de la interfaz. Es la misma
   regla de siempre: si el dibujo es de color fijo, su fondo tambien tiene que serlo. */
.marca-sello{background:var(--lon-red);border-radius:var(--r-md);
  display:grid;place-items:center;padding:22px 20px;aspect-ratio:16/7}
.marca-sello img{width:100%;max-width:172px;max-height:100%;height:auto;display:block;
  object-fit:contain}
/* ---- Cabecera de cada division ----
   El logotipo manda, y al lado va el titular con su lema. */
.marca-cab{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-5)}
.marca-cab .marca-sello{flex:0 0 236px;padding:20px 18px;aspect-ratio:16/6.4}
.marca-cab h2{margin:0}
.marca-cab .mini-note{margin-top:6px}

/* ---- La entrada de cada division: texto grande a un lado, FOTOGRAFIA al otro ----
   Es lo que quita el aspecto de documento. La imagen usa `media-organic`, el recorte
   asimetrico del sistema, no un rectangulo cualquiera. */
.eco-entrada{display:grid;gap:var(--s-5);grid-template-columns:1.15fr .85fr;align-items:center}
@media (max-width:900px){ .eco-entrada{grid-template-columns:1fr} }

/* Los chips de la lista: mismo componente que las caracteristicas de una villa. */
.eco-media,.photo-mosaic .cell{position:relative}
/* Las cuatro celdas del mosaico, iguales. Sin esto cada una toma la altura de su
   imagen y la fila queda con los cantos desiguales. */
.photo-mosaic .cell{aspect-ratio:4/3}
/* La pieza alta ocupa dos filas y su altura la marca la rejilla, no una
   proporcion. Sin esta excepcion, el 4/3 de arriba la aplana a la altura
   de una sola fila y deja un hueco blanco debajo. */
.photo-mosaic .cell--tall{aspect-ratio:auto}
.photo-mosaic .cell img{width:100%;height:100%;object-fit:cover}
.eco-media .render-note,.photo-mosaic .render-note{position:absolute;top:14px;right:14px}
.eco-chips{margin-top:var(--s-3)}
.eco-chips .spec-chip{font-size:13px;padding:10px 15px}

/* ---- Bloques de cada division ----
   Sin numerar: no son pasos de un proceso, son cuatro terrenos en paralelo, y numerarlos
   hacia leer un orden que no existe.

   NADA DE BANDA LATERAL DE COLOR. Se puso una (`inset 3px 0 0 0 var(--brand)`) y el CEO
   la tumbo: la banda de color al canto de una tarjeta esta VETADA en cualquier pieza de
   la casa desde el 2026-05-10, y ademas NO es un recurso de este sistema, era invento
   propio. Las tarjetas se quedan con la sombra que ya trae el componente, que es como se
   ven en el resto de la web. Hay puerta que lo comprueba antes de publicar:
   `python .claude/scripts/gate-borde-lateral.py <carpeta>`. */
.eco-cuatro{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){ .eco-cuatro{grid-template-columns:1fr} }

/* Los bloques largos del final, a dos columnas: con uno solo por fila se quedaban en la
   mitad izquierda de la pantalla y la derecha vacia. */
.eco-extras{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  margin-top:var(--s-6)}
/* La cita cierra la division: centrada y con sitio, no arrinconada a la izquierda. */
.cita-eco{margin:var(--s-6) auto 0;max-width:34ch;text-align:center}
/* Las cinco tarjetas de division: tres arriba y dos centradas abajo. Con la relacion de
   la tarjeta de foto (16/8.5) cinco en fila saldrian del ancho. */
.marcas-grid{gap:var(--s-4)}

/* ------------------------------------------------------------------ LAS CIFRAS
   La banda oscura de cifras se veía a medias: tres de los cuatro números salían en
   blanco. No es un problema de color. La animación de entrada de la casa esconde las
   cuatro casillas al cargar y las descubre cuando el scroll llega hasta ellas, pero
   esa cuenta se hace UNA vez, al principio. Esta página cambia de alto cada vez que
   se elige otra marca (los paneles se muestran y se ocultan), así que la cuenta se
   descuadra y quedan casillas que no se descubren nunca.

   Aquí pesa más que las cifras se lean que la animación de entrada, así que en esta
   página la banda entra ya visible. La causa de fondo se ataca también desde el
   guion, pidiendo que se vuelva a medir en cada cambio de marca. */
.stats-premium > *{visibility:visible !important;opacity:1 !important;transform:none !important}

/* ------------------------------------------------ LA FILA PEQUEÑA DE LAS SEIS MARCAS
   Al elegir una marca la página baja hasta su panel, y entonces las tarjetas grandes
   quedan arriba, fuera de la pantalla. Sin esto no hay forma de pasar a otra marca sin
   volver a subir. La fila se pega DEBAJO de la cabecera, que ya es pegajosa (arranca a
   14px y mide distinto en movil y en escritorio), asi que su altura la mide el guion y
   la deja escrita en `--eco-mini-top`: aqui solo hay un valor de respaldo.

   Cuidado con dos trampas conocidas de la casa al tocar esto: un antepasado con
   `overflow` distinto de visible mata el pegado (esta pagina no lo tiene, comprobado),
   y el desenfoque va en el hijo, nunca en el elemento pegado. */
.eco-mini{position:sticky;top:var(--eco-mini-top,96px);z-index:60;
  margin-bottom:var(--s-5);opacity:0;pointer-events:none;
  transition:opacity .2s ease}
.eco-mini.is-on{opacity:1;pointer-events:auto}
.eco-mini__in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:7px;border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-2)}
.eco-mini__in::-webkit-scrollbar{display:none}
/* LA LETRA PIDE EL COLOR QUE GIRA CON EL TEMA, NO EL NEGRO FIJO. En esta web `--ink`
   es un negro que NO cambia (#141414), asi que en tema oscuro la letra salia casi
   negra sobre un fondo casi negro: contraste medido 1,12, ilegible. El que gira es
   `--text`. Es la trampa 239 del catalogo de la casa, donde el cliente y el sistema
   llaman igual a cosas distintas. */
.eco-mini button{flex:0 0 auto;border:0;cursor:pointer;
  padding:9px 15px;border-radius:999px;background:transparent;color:var(--text);
  font:600 13px/1 var(--font-body);white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.eco-mini button:hover{background:var(--surface)}
.eco-mini button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* La elegida va sobre el rojo FIJO de la marca, no sobre el que gira con el tema:
   asi la letra blanca mantiene el contraste en claro y en oscuro. */
.eco-mini button.is-active,
.eco-mini button.is-active:hover{background:var(--lon-red);color:#fff}
@media (max-width:640px){
  .eco-mini button{padding:8px 12px;font-size:12.5px}
}

/* ---- LOS TITULARES DE LOS PANELES PIDEN SU CUERPO POR ESCRITO ----

   En la maqueta estatica no hacia falta ni una linea: un `<h2>` y un `<h3>` ya salen a su
   tamano porque lo hereda del tema. Al pasar por Elementor eso se pierde. El motivo esta
   escrito en `elementor-native.css`: el widget de titular mete el texto en un `<h2>` que
   solo lleva `elementor-heading-title`, y esa hoja le pone `font: inherit` para que herede
   del envoltorio; el envoltorio, en estos paneles, no lleva ninguna clase de tipografia,
   asi que hereda el cuerpo del texto normal.

   Medido con el port ya montado, a 1440 px:
     · nombre de la marca (`.marca-cab h2`)   16 px, y en la maqueta 24 px
     · titular de la lista (`.section-head h3`) 16 px, y en la maqueta 18,72 px
   Los dos salian del tamano del parrafo, asi que la jerarquia del panel desaparecia: el
   nombre de la division se leia igual que su descripcion.

   Los apartados (`.step-cell h3`) SI salian bien a 19 px, porque de esos se encarga
   `elementor-native.css`, y por eso no se tocan aqui.

   Se declara sobre el envoltorio y tambien sobre la etiqueta de dentro: la primera forma
   sirve al port y la segunda al montaje estatico de `site/`, igual que hace
   `elementor-native.css` con `display-hero`. */
.lon-native .panel-eco .marca-cab h2,
.lon-native .panel-eco .marca-cab h2 .elementor-heading-title{
  font:600 24px/1.25 var(--font-display);letter-spacing:-0.01em}
.lon-native .panel-eco .section-head h3,
.lon-native .panel-eco .section-head h3 .elementor-heading-title{
  font:600 18.72px/1.3 var(--font-display);letter-spacing:-0.005em}

/* ---- LOS CINCO PANELES QUE NACEN OCULTOS ----

   La pagina ensena UNA division a la vez: la elegida en el selector. Al cargar
   se ve la primera y las otras cinco estan escondidas, igual que en la maqueta.

   En la maqueta esto lo hace un `style="display:none"` en cada panel. Ese estilo
   en linea no sobrevive al pasar por Elementor, asi que aqui se marca con clase.
   Se probo sin esto y el fallo era claro: las seis divisiones aparecian una tras
   otra, y el selector no parecia servir para nada hasta pulsar. La pagina se
   leia como un folleto de seis marcas seguidas en vez de «seis marcas, un
   grupo».

   `display:none` y no `visibility` ni altura cero: el panel no debe ocupar
   espacio ni ser leido por un lector de pantalla mientras esta cerrado.

   NO lleva `!important` a proposito. El script del tema ensena el panel
   escribiendole `style="display:…"`, y el estilo en linea pesa mas que
   cualquier clase, asi que en cuanto alguien pulsa una pestana esta regla deja
   de aplicar sola. Con `!important` el panel no se abriria nunca. */
.lon-native .panel-eco.eco-panel-oculto{display:none}

/* ---- LA FILA PEQUENA, CUANDO SUS PESTANAS NO SON `button` ----

   Las reglas de arriba apuntan a `.eco-mini button` y siguen valiendo para la
   maqueta estatica de `site/`, donde las pestanas SI son botones. En el port no
   pueden serlo: el widget de boton de Elementor imprime un enlace `<a href>`, y
   estas pestanas no llevan a ninguna pagina, cambian el panel que se ve. Se
   emiten como contenedores con la clase `.eco-mini-tab`.

   Se repite la forma en vez de aflojar el selector de arriba: asi la maqueta
   estatica se queda exactamente como esta y este bloque solo alcanza a lo nuevo.
   Los valores son los MISMOS, copiados, incluida la razon por la que la letra
   pide `--text` y no `--ink` (en tema oscuro `--ink` daba contraste 1,12,
   ilegible) y por la que la elegida usa el rojo FIJO de marca (para que el
   blanco aguante en claro y en oscuro).

   `cursor:pointer` y el foco visible van aqui tambien: un `div` no los trae de
   serie, y sin ellos la pestana no se comporta como algo que se pueda pulsar. */
.lon-native.eco-mini .eco-mini-tab{
  flex:0 0 auto;border:0;cursor:pointer;
  padding:9px 15px;border-radius:999px;background:transparent;color:var(--text);
  font:600 13px/1 var(--font-body);white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.lon-native.eco-mini .eco-mini-tab:hover{background:var(--surface)}
.lon-native.eco-mini .eco-mini-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lon-native.eco-mini .eco-mini-tab.is-active,
.lon-native.eco-mini .eco-mini-tab.is-active:hover{background:var(--lon-red);color:#fff}
/* El texto va dentro de un widget de texto, que trae sus propios margenes y su
   gris del kit: se le quitan para que herede el color y la caja de la pestana. */
.lon-native.eco-mini .eco-mini-tab .elementor-widget-container,
.lon-native.eco-mini .eco-mini-tab p{margin:0;color:inherit;font:inherit}
@media (max-width:640px){
  .lon-native.eco-mini .eco-mini-tab{padding:8px 12px;font-size:12.5px}
}

/* ---- LA PILDORA SE AJUSTA A SU NOMBRE, NO AL ANCHO DE LA BARRA ----

   Un contenedor de Elementor se imprime en bloque, y un bloque ocupa TODO el
   ancho que tiene disponible. La pestana es la que pinta el fondo, asi que la
   pildora salia de borde a borde de la barra con el nombre pegado a la
   izquierda, en vez de ser una pildora del tamano de su nombre.

   `inline-flex` la hace ajustarse a lo que lleva dentro, que es como esta en la
   maqueta. Va acompaniado de `width:auto` porque Elementor escribe un ancho
   propio para sus contenedores, y sin anularlo el `inline-flex` no basta.

   Se declara con `.lon-native.eco-mini`, tres clases, para pesar mas que la
   regla que Elementor genera para cada contenedor por su identificador. */
.lon-native.eco-mini .eco-mini-tab{
  display:inline-flex;align-items:center;width:auto;max-width:none}
/* Y la capa que Elementor mete entre la pestana y el texto tampoco debe
   estirarse: si lo hace, la pildora se ajusta a ELLA y volvemos al mismo sitio. */
.lon-native.eco-mini .eco-mini-tab > *{width:auto;flex:0 0 auto}

/* ---- LA ETIQUETA «RENDER» TIENE QUE LEERSE ----

   FALLO DE ACCESIBILIDAD, medido: la letra salia en rgb(28,20,16) sobre un fondo
   rgba(28,20,16,.55), o sea el mismo color sobre si mismo. Contraste 1,00 cuando
   la norma internacional de accesibilidad (WCAG 2.1) exige 4,5 para texto de
   este tamano. Era ilegible.

   La causa: `components.css` pide `color: var(--cream)` (crema claro sobre
   fondo oscuro, que es lo correcto), pero la etiqueta aqui no es un `<span>`
   suelto sino un widget de texto de Elementor, y la regla
   `.lon-native .elementor-widget-text-editor{color:inherit}` hace que el texto
   herede del contenedor de arriba en vez de tomar el crema.

   Se devuelve el crema con peso suficiente, y se aplica tambien a la capa
   interior del widget, que es donde vive el texto que se lee.

   La variante «Foto real» NO se toca: ya medía 11,39 de contraste (letra blanca
   sobre granate) y pasa de sobra. */
.lon-native .render-note,
.lon-native .render-note .elementor-widget-container,
.lon-native .render-note p,
.lon-native .render-note span{color:var(--cream)}
.lon-native .render-note--real,
.lon-native .render-note--real .elementor-widget-container,
.lon-native .render-note--real p,
.lon-native .render-note--real span{color:#FFFFFF}

/* ---- LAS PESTANAS VAN CENTRADAS EN SU BARRA ----

   Pedido el 2026-09-07. En la maqueta van pegadas a la izquierda (medido: 7 px
   de hueco a un lado y 372 al otro a 1440), y con seis pestanas cortas dentro de
   una barra ancha eso deja un vacio grande a la derecha que descuadra.

   LA TRAMPA, y por eso NO basta con `center` a secas: por debajo de unos 900 px
   las seis NO caben (piden 860 px y la barra da menos), asi que la barra se
   desliza a lo ancho. En una caja que se desliza, `justify-content:center`
   CORTA el principio: el navegador centra el contenido desbordado y la primera
   pestana queda fuera por la izquierda, sin forma de alcanzarla arrastrando.

   Se probo primero con `margin-inline:auto` en la primera y la ultima. Centra
   igual de bien cuando sobra sitio, pero NO evita el corte: medido, a 768 px la
   primera empezaba 58 px fuera de la caja, y a 390 px, 214 px fuera.

   La respuesta buena es la palabra `safe`, hecha justo para esto: centra
   mientras quepa, y en cuanto el contenido desborda deja de centrar y lo alinea
   al principio, que es lo que mantiene la primera pestana alcanzable. Donde el
   navegador no la entienda, ignora la declaracion entera y se queda el
   comportamiento de antes (pegado a la izquierda), que es un buen sitio al que
   caer.

   Medido despues: a 1440 los huecos quedan iguales a los dos lados (201 y 201);
   a 390 la primera empieza dentro de la caja y se llega a la ultima
   arrastrando. */
.lon-native.eco-mini .eco-mini__in{justify-content:safe center}
.lon-native.eco-mini .eco-mini-tab{margin:0}