/* ===========================================================================
   Laboratorio de OH WOW! (labs.ohwow.es). Va encima de dashboard.css (el kit del
   DNA, que no se toca) y solo añade lo que el kit no tiene: la portada, el
   buscador, la tarjeta de pieza y la pantalla de acceso. Sin colores nuevos:
   todo sale de los tokens del kit, resuelto en claro y en oscuro.
   =========================================================================== */

:root{
  /* Los grises tenues del kit se quedan por debajo del 4.5 que exige AA en texto
     pequeno sobre estas superficies. Aqui hay lectura seguida, asi que se oscurecen
     lo justo, sin tocar el kit. */
  --text-dim:#5c5c5c; --text-soft:#6e6658;

  /* Margen lateral de TODO el laboratorio: cabecera, cuerpo y pie salen de aquí, así
     que nunca se descuadran entre sí.

     Va con `clamp`, que toma tres valores: un mínimo, uno que se adapta y un máximo.
     El del medio no es un porcentaje del ancho, porque un 14 % dejaría 55 px de margen
     en un móvil y ahogaría la tarjeta. Es la mitad de lo que sobra a partir de 1.000 px:
     hasta ese ancho el margen se queda en 16 px, y de ahí para arriba crece hasta los
     200 px. Así el aire muerto de los lados se ataca en la raíz (el ancho del contenedor)
     y no a base de rellenos que luego no cuadran entre bloques. */
  --hub-pad:clamp(16px,(100vw - 1000px) / 4.6,200px);

  /* Dos valores de la paleta OH WOW! ESCRITOS A PROPÓSITO, no tomados de un token.
     Son los distintivos que van ENCIMA de la foto, y una foto no cambia de color al
     cambiar el tema. Los tokens --ink y --cream del kit se invierten en oscuro (la
     tinta pasa a crema), así que usarlos ahí daría letra clara sobre pastilla clara.
     Estos dos son la tinta y el papel del kit en su versión clara, y se quedan fijos
     en los dos temas. Ningún color inventado: son #1A1A1A y #F5EFE6 del kit. */
  --pill-ink:var(--text); --pill-paper:var(--bg);
}
html[data-theme="dark"]{ --text-dim:#b8b0a0; --text-soft:#9c9484; }

/* Contencion horizontal a nivel de pagina: un titulo con clamp(vw) o una tarjeta mal
   medida no debe poder ensanchar el documento entero. Si eso pasa, header y footer
   (que son 100% del body) quedan arrastrados fuera del viewport visible junto con el
   resto: un footer no puede depender del ancho de los widgets del body, tiene que
   comportarse como footer siempre. clip (no hidden) para no matar el position:sticky
   de .hub-tools y .hub-filtros (ver gotcha overflow-x:hidden + sticky). */
html{overflow-x:clip}
.hub-hero h1{overflow-wrap:anywhere;max-width:100%}

/* El salto al listado, para quien navega con teclado. Fuera de pantalla hasta que
   recibe el foco. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--surface);
  color:var(--text);padding:var(--sp-9) var(--sp-14);border-radius:var(--r-in);box-shadow:var(--sh-2);
  font-size:var(--fs-sm);font-weight:var(--w-fuerte)}
.skip-link:focus{left:16px;top:16px}

/* ---------- barra superior ---------- */
.hub-top{position:sticky;top:0;z-index:var(--capa-pegado);display:flex;align-items:center;gap:14px;
  padding:var(--sp-15) 50px;max-width:1600px;margin:auto;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--hair-soft)}
.hub-marca{display:flex;align-items:center;flex:none}
.hub-marca__svg{width:96px;height:auto;color:var(--ink);display:block}
.hub-top__sep{width:1px;height:22px;background:var(--rule);flex:none}
.hub-top__t{font-family:var(--display);font-weight:var(--w-fuerte);font-size:var(--fs-lg);letter-spacing:var(--ls-medio)}
.hub-top__acts{margin-left:auto;display:flex;gap:8px;align-items:center}

.b{display:inline-flex;align-items:center;gap:7px;padding:var(--sp-7) var(--sp-12);border-radius:var(--r-pill);
  border:var(--hair-soft);background:var(--surface);font-size:var(--fs-sm);font-weight:var(--w-medio);
  color:var(--text);cursor:pointer;font-family:inherit;text-decoration:none}
.b:hover{background:var(--surface-alt);border-color:var(--ink)}
.b svg{width:15px;height:15px;flex:none}
.b--acc{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:var(--w-fuerte)}
.b--acc:hover{background:var(--ink);color:var(--surface);filter:brightness(.93)}
#tema{padding:var(--sp-7) var(--sp-9)}
html[data-theme="dark"] #tema svg{transform:rotate(180deg)}

/* ---------- portada ---------- */
/* Sin tope de ancho de lectura: el tope lo pone --hub-pad, que ya reserva hasta 200 px
   por lado en pantalla grande. Un max-width de 1180 px encima dejaría casi 500 px de
   aire muerto en un monitor de 1920 y una columna de tarjetas más estrecha de la cuenta. */
.hub{max-width:1600px;margin-inline:auto;padding:50px}
.hub-hero{padding:var(--sp-16) 0 var(--sp-16)}
.hub-hero h1{font-family:var(--display);font-weight:var(--w-normal);letter-spacing:var(--ls-titulo);line-height:1.03;
  font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:var(--sp-11)}
.hub-hero h1 em{font-style:normal;background:var(--lime);color:var(--on-accent);border-radius:.2em;
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hub-hero__lead{font-size:clamp(1rem,1.4vw,1.14rem);line-height:var(--lh-lectura);color:var(--text-dim);max-width:66ch}

/* ---------- buscador y filtros, pegados al bajar ----------
   Los dos cuelgan de <main>, NO de la portada. Un elemento pegajoso solo se queda
   pegado mientras su contenedor sigue en pantalla: dentro de la portada, que es corta,
   se iban con ella en cuanto se bajaba un poco. Colgando de <main> acompañan todo el
   recorrido, que es para lo que están.
   Sin sangrado con margen negativo: la barra respeta la misma columna que las tarjetas. */
.hub-tools{position:sticky;top:var(--hub-top-h,62px);z-index:16;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;padding:var(--sp-9) 0;margin-bottom:var(--sp-7);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hub-q{flex:1 1 380px;min-width:200px;padding:var(--sp-11) var(--sp-14);border-radius:var(--r-pill);
  border:var(--hair-soft);background:var(--surface);font-size:var(--fs-body);color:var(--text);font-family:inherit}
.hub-q::placeholder{color:var(--text-soft)}
.hub-q:focus{outline:none;border-color:var(--ink)}
.hub-q:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hub-n{font-size:var(--fs-sm);color:var(--text-dim);font-weight:var(--w-fuerte);white-space:nowrap;flex:none}

/* ---------- ejemplos de pregunta ----------
   Están para enseñar, de un vistazo, que aquí se PREGUNTA. Un buscador vacío con un
   texto de ayuda genérico no le cuenta a nadie que puede escribir una frase entera. */
.hub-ejs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:var(--sp-3)}
.hub-ejs__t{font-size:var(--fs-sm);font-weight:var(--w-fuerte);color:var(--text-soft)}
.hub-ej{flex:0 0 auto;padding:var(--sp-6) var(--sp-11b);border-radius:var(--r-pill);border:var(--hair-soft);
  background:var(--surface);font-size:var(--fs-sm);font-weight:var(--w-medio);color:var(--text-dim);
  cursor:pointer;font-family:inherit}
.hub-ej:hover{background:var(--surface-alt);color:var(--text)}

/* ---------- respuesta directa ----------
   Cuando una pieza gana con claridad, se dice cuál es y por qué, en vez de dejar a
   quien pregunta que lo deduzca del orden de la rejilla. */
.hub-resp{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface-alt);
  border-radius:var(--r-lg);padding:var(--sp-12b) var(--sp-14);margin:var(--sp-9) 0 var(--sp-3)}
/* `display:flex` gana al atributo `hidden` del navegador, así que sin esta línea el
   cartel se queda como una barra vacía cuando no hay nada que responder. */
.hub-resp[hidden]{display:none}
.hub-resp__t{font-family:var(--display);font-size:var(--fs-body);font-weight:var(--w-fuerte);letter-spacing:var(--ls-medio);color:var(--text)}
.hub-resp__m{font-size:var(--fs-sm);color:var(--text-dim);margin-top:var(--sp-2)}
.hub-resp__ir{margin-left:auto;flex:none;display:inline-flex;align-items:center;
  padding:var(--sp-10) var(--sp-13);border-radius:var(--r-pill);background:var(--ink);color:var(--surface);
  font-size:var(--fs-sm);font-weight:var(--w-fuerte);text-decoration:none}
.hub-resp__ir:hover{filter:brightness(.93)}

/* ---------- filtros por categoría: una sola fila, se desplazan de lado ---------- */
/* Se pega DEBAJO del buscador, que también es pegajoso. El alto del buscador lo mide
   hub.js y lo deja en --hub-tools-h, porque cambia al pasar a móvil (el conteo baja de
   línea). Los 68 px son solo el valor de reserva hasta que mide. Nunca dos filas: si
   envuelve, las categorías de abajo quedan tapadas por la propia barra. */
.hub-filtros{position:sticky;top:calc(var(--hub-top-h,62px) + var(--hub-tools-h,68px));z-index:15;
  display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:var(--sp-9) 0;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--hair-soft)}
.hub-filtros::-webkit-scrollbar{display:none}
.chip-f{flex:0 0 auto;padding:var(--sp-6) var(--sp-12);border-radius:var(--r-pill);border:var(--hair-soft);background:var(--surface);
  font-size:var(--fs-sm);font-weight:var(--w-medio);color:var(--text-dim);cursor:pointer;font-family:inherit;white-space:nowrap}
.chip-f b{font-weight:var(--w-max);opacity:var(--op-casi);margin-left:var(--sp-2)}
.chip-f:hover{color:var(--text);background:var(--surface-alt)}
.chip-f.on{background:var(--lime);color:var(--on-accent);border-color:var(--lime);font-weight:var(--w-fuerte)}
.chip-f.on b{opacity:var(--op-alto)}

/* ---------- ordenar por fecha ---------- */
/* Va justo debajo de los filtros y se lee como familia suya: misma píldora, mismo lima
   para lo elegido. Lo que cambia es que NO se queda pegado arriba al bajar: dos barras
   pegajosas seguidas se comen media pantalla en un móvil. */
.hub-orden{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:var(--sp-9) 0 var(--sp-6)}
.hub-orden__t{font-size:var(--fs-sm);color:var(--text-dim);margin-right:var(--sp-4)}
.chip-o{flex:0 0 auto;padding:var(--sp-6) var(--sp-12);border-radius:var(--r-pill);
  border:var(--hair-soft);background:var(--surface);font-size:var(--fs-sm);
  font-weight:var(--w-medio);color:var(--text-dim);cursor:pointer;font-family:inherit;
  white-space:nowrap}
.chip-o:hover{color:var(--text);background:var(--surface-alt)}
.chip-o.on{background:var(--lime);color:var(--on-accent);border-color:var(--lime);
  font-weight:var(--w-fuerte)}
.chip-o:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ---------- grupos y rejilla ---------- */
.hub-grupo{margin-top:var(--sp-19)}
.hub-grupo[hidden]{display:none}
.hub-grupo__t{font-family:var(--display);font-size:var(--fs-xl);font-weight:var(--w-fuerte);letter-spacing:var(--ls-medio);
  margin-bottom:var(--sp-12);padding-bottom:var(--sp-9);border-bottom:var(--hair-soft)}
/* Cuatro columnas en un portátil normal (1.440 px de ancho) y cinco en un monitor
   grande. El mínimo de 294 px es lo que hace que a 1.440, con el margen lateral que
   reserva --hub-pad, entren cuatro y no tres holgadas. */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(294px,1fr));gap:16px}

/* ---------- tarjeta de pieza ----------
   Sin efecto al pasar por encima y sin banda de color: se distingue por superficie,
   hairline y sombra estática, que es la norma de la casa. */
.w{display:flex;flex-direction:column;background:var(--surface);border:var(--hair-soft);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.w[hidden]{display:none}

/* La imagen ocupa el ANCHO COMPLETO de la tarjeta, recortada a 16:9. Nunca en columna
   estrecha con franjas de fondo a los lados.

   OJO con `min-height:0`, que parece de adorno y NO lo es. La tarjeta es un contenedor
   flexible en columna, y ahí la altura mínima de cada hijo es, por defecto, la de su
   contenido: como la foto declara 900x506 en sus atributos, la caja crecía hasta esa
   altura y se comía la proporción. Con `min-height:0` la caja obedece y la foto se
   recorta dentro.

   El fondo gris del hueco es lo que sostiene la tarjeta mientras una pieza todavía no
   tiene su captura: el marco se pinta igual, con su fecha y su autor encima. */
.w__img{position:relative;aspect-ratio:16 / 9;width:100%;min-height:0;flex:0 0 auto;
  overflow:hidden;background:var(--surface-alt)}
.w__img img{width:100%;height:100%;object-fit:cover;display:block}

/* La fecha va DESTACADA sobre la imagen, abajo a la izquierda, no escondida en letra
   gris al pie. Pastilla de tinta al 88 %, que es fondo oscuro de verdad: la letra
   clara pasa contraste y nunca cae en blanco sobre claro. */
.w__fecha{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:var(--w-fuerte);letter-spacing:.01em;padding:var(--sp-7) var(--sp-11);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--pill-ink) 88%,transparent);color:var(--pill-paper);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}
.w__fecha svg{width:13px;height:13px;flex:none;opacity:var(--op-alto)}

/* Quien subió la pieza, en la esquina OPUESTA a la fecha: fecha abajo a la izquierda,
   autor abajo a la derecha, los dos a 12 px del borde y a la misma altura. Va en el
   lima de la casa, que se lee como autoría y no como una categoría más (y que no se
   invierte al cambiar de tema, así que sobre la foto siempre contrasta). */
.w__autor{position:absolute;right:12px;bottom:12px;font-size:var(--fs-xs);font-weight:var(--w-max);
  letter-spacing:.01em;padding:var(--sp-7) var(--sp-11);border-radius:var(--r-pill);
  background:var(--lime);color:var(--on-accent)}

/* Distintivo de acceso SOLO en las piezas que tienen su propia llave. Las demás piden
   la misma clave con la que ya se ha entrado aquí, así que marcarlas no informaría de
   nada: quien ve el distintivo sabe que su llave de esta puerta no le va a abrir esa. */
.w__acc{position:absolute;right:12px;top:12px;font-size:var(--fs-xs);font-weight:var(--w-max);
  text-transform:uppercase;letter-spacing:var(--ls-rotulo);padding:var(--sp-6) var(--sp-10);border-radius:var(--r-pill);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.w__acc--clave-propia{background:var(--pill-paper);color:var(--pill-ink)}
.w__acc--abierto{background:color-mix(in srgb,var(--pill-paper) 92%,transparent);color:var(--pill-ink)}

.w__cuerpo{display:flex;flex-direction:column;gap:7px;padding:var(--sp-12b) var(--sp-13b);flex:1 1 auto}
.w__t{font-family:var(--display);font-size:var(--fs-lg);font-weight:var(--w-fuerte);letter-spacing:var(--ls-medio);line-height:var(--lh-subtitulo)}
.w__d{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--text-dim)}
.w__q{font-size:var(--fs-sm);color:var(--text-soft);font-weight:var(--w-fuerte)}
/* Etiquetas con el texto a plena intensidad sobre un escalón neutro más claro que la
   tarjeta: se leen de un vistazo y siguen sin gritar más que el título. */
.w__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--sp-0)}
.w__tag{font-size:var(--fs-xs);font-weight:var(--w-fuerte);color:var(--text);background:var(--surface-alt);
  border-radius:var(--r-pill);padding:var(--sp-4) var(--sp-9)}
.w__foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:var(--sp-11)}
.w__foot .b{flex:1 1 auto;justify-content:center}
.w__det{font-size:var(--fs-xs);color:var(--text-dim);font-weight:var(--w-fuerte);flex:none}

.hub-vacio{margin-top:var(--sp-20);font-size:var(--fs-body);color:var(--text-dim);text-align:center}

/* ---------- pie ---------- */
.hub-pie{border-top:var(--hair-soft);padding:var(--sp-17) var(--hub-pad);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hub-pie__svg{width:104px;height:auto;color:var(--ink);display:block}
.hub-pie p{font-size:var(--fs-sm);color:var(--text-dim);max-width:60ch}

@media(max-width:860px){
  .hub-top__acts .b span{display:none}
}
@media(max-width:620px){
  /* El rótulo de la cabecera se cae, y con él su separador: una raya suelta al lado
     del logotipo no separa nada. */
  .hub-top__t,.hub-top__sep{display:none}
  .hub-grid{grid-template-columns:1fr}
  .hub-resp__ir{margin-left:0;width:100%;justify-content:center}
}

/* ---------- pantalla de acceso ---------- */
.body-acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6vh var(--sp-15)}
.acceso{width:100%;max-width:430px}
.acceso__logo{width:132px;height:auto;color:var(--ink);display:block;margin-bottom:var(--sp-18)}
.acceso__h1{font-family:var(--display);font-weight:var(--w-normal);font-size:clamp(2rem,4.6vw,2.7rem);
  letter-spacing:var(--ls-titulo);line-height:1.05;margin-bottom:var(--sp-11)}
.acceso__p{color:var(--text-dim);line-height:var(--lh-lectura);margin-bottom:var(--sp-17);font-size:var(--fs-body)}
.acceso__caja{background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--sp-16b)}
.campo{margin-bottom:var(--sp-13)}
.campo label{display:block;font-size:var(--fs-sm);font-weight:var(--w-max);text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-dim);margin-bottom:var(--sp-6)}
.campo input{width:100%;padding:var(--sp-11) var(--sp-12b);border-radius:var(--r-in);border:var(--hair-soft);
  background:var(--bg);font-size:var(--fs-body);color:var(--text);font-family:inherit}
.campo input:focus{outline:none;border-color:var(--ink)}
.acceso button{width:100%;padding:var(--sp-11b) var(--sp-14);border-radius:var(--r-pill);background:var(--ink);
  color:var(--surface);font-weight:var(--w-fuerte);font-size:var(--fs-body);border:1.5px solid var(--ink);
  margin-top:var(--sp-3);cursor:pointer;font-family:inherit}
.acceso button:hover{filter:brightness(.94)}
.acceso__err{background:var(--ink);color:var(--surface);border-radius:var(--r-card);
  padding:var(--sp-10) var(--sp-12);font-size:var(--fs-md);line-height:var(--lh-normal);margin-bottom:var(--sp-14)}
.acceso__pie{margin-top:var(--sp-15);font-size:var(--fs-sm);color:var(--text-dim);line-height:var(--lh-normal)}
.acceso__pie a{font-weight:var(--w-fuerte);text-decoration:underline}


/* --- La ventana de una marca (2026-09-12) ---
   Cuando varios trabajos son de la misma marca, persona o empresa, la pantalla principal
   enseña SOLO la tarjeta de la marca. Sus piezas salen aqui, encima, en una ventana.
   Primero se probo desplegandolas en la propia rejilla y el CEO lo tumbo: empujaba hacia
   abajo el resto del catalogo y ya no se sabia que era de quien.
   Se usa el elemento de dialogo del navegador, que trae hechos el fondo oscurecido, el
   cierre con la tecla de escape y la devolucion del foco al boton que la abrio. */
.hub-ventana{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible;color:var(--text)}
.hub-ventana::backdrop{background:rgba(16,16,16,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
.hub-ventana__caja{width:min(1180px,calc(100vw - 32px));max-height:88vh;margin:6vh auto;
  display:flex;flex-direction:column;background:var(--bg);border:var(--hair-soft);
  border-radius:var(--r-card);box-shadow:var(--sh-2);overflow:hidden}
/* La cabecera se queda arriba al bajar por las piezas: con muchas dentro, sin esto se
   pierde de vista de quien son las tarjetas que se estan mirando. */
.hub-ventana__top{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--sp-12);padding:var(--sp-14) var(--sp-15);
  background:var(--bg);border-bottom:var(--hair-soft)}
.hub-ventana__t{font-family:var(--display);font-size:var(--fs-xl);font-weight:var(--w-fuerte);
  letter-spacing:var(--ls-medio);margin:0}
.hub-ventana__n{font-size:var(--fs-sm);color:var(--text-dim);font-weight:var(--w-fuerte);
  margin:var(--sp-4) 0 0}
.hub-ventana__x{flex:none}
.hub-ventana__x svg{width:15px;height:15px}
/* Tres cosas que hay que decirle a esta rejilla y que la del catalogo no necesita, porque
   aquella crece con la pagina y esta vive dentro de una caja con tope de alto:
   - `min-height:0` para que pueda encogerse por debajo de su contenido y aparezca el
     desplazamiento. Sin esto, un elemento flexible se niega a bajar de lo que mide dentro.
   - `align-content:start` y filas de `max-content` para que cada fila mida LO QUE PIDE su
     tarjeta. Sin esto, las filas se reparten el alto disponible y las tarjetas salen
     aplastadas: se medio veia la portada y el titulo, la descripcion y el boton quedaban
     cortados fuera. Medido: 110 pixeles de alto cuando la tarjeta pide 570. */
.hub-ventana .hub-grid{padding:var(--sp-15);overflow-y:auto;min-height:0;
  align-content:start;grid-auto-rows:max-content}
/* Con la ventana abierta, la pagina de debajo no se mueve. Sin esto, la rueda del raton
   pasa de largo y desplaza el catalogo por detras del fondo oscurecido.
   La clase la pone y la quita el guion, y va en el elemento RAIZ: probado antes en el
   cuerpo y no servia de nada, porque quien se desplaza en esta pagina es la raiz. El aire
   de la derecha compensa el ancho de la barra de desplazamiento que desaparece, para que
   el catalogo no pegue un salto lateral al abrir la ventana. */
:root.hub-quieto{overflow:hidden}
@media (max-width:640px){
  .hub-ventana__caja{width:calc(100vw - 20px);max-height:92vh;margin:4vh auto}
  .hub-ventana__top{padding:var(--sp-12) var(--sp-13)}
  .hub-ventana .hub-grid{padding:var(--sp-13)}
}