/* IOMAS · Home temporal (HTML propio). Header y footer traen su propio CSS (#iomas-hdr / #iomas-ftr). */
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/redhatdisplay.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--azul:#0075B9;--azul-osc:#073763;--tinta:#2A2A2A;--gris:#999;--borde:#ccc;--wf-blue:#0075B9;--wf-blue-dark:#073763;--wf-ink:#2A2A2A;--wf-gray:#999;--wf-border:#ccc;--fs-h2:clamp(1.625rem,2.6vw,2rem);--fs-h3:1.375rem;--fw-regular:400;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--icon-stroke:1.6;--font:'Red Hat Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);color:var(--tinta);background:#fff;letter-spacing:.02em;line-height:1.5;-webkit-font-smoothing:auto;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.h-wrap{max-width:1400px;margin:0 auto;padding:0 48px;width:100%}

.h-btn{display:inline-block;margin-top:34px;background:var(--azul);color:#fff!important;text-decoration:none;font-size:.875rem;font-weight:700;text-transform:uppercase;padding:17px 32px;border-radius:999px;transition:background-color .2s}
.h-btn:hover{background:var(--azul-osc)}
.h-btn:focus-visible,

/* BANNERS (1 = fijo · 2 o más = carrusel; los define assets/data/banners.json) */
.h-solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h-banner{position:relative;overflow:hidden;background:#0075B9;aspect-ratio:1920/380}
.h-banner-track{display:flex;height:100%;transition:transform .6s ease}
.h-banner-slide{flex:0 0 100%;min-width:0;height:100%;overflow:hidden}
.h-banner-slide a{display:block;height:100%}
.h-banner-slide img{display:block;width:100%;height:100%;object-fit:cover}
.h-banner-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--borde);border-radius:50%;color:#555;font:700 18px/1 inherit;cursor:pointer;padding:0 0 2px}
.h-banner-flecha:hover{border-color:var(--azul);color:var(--azul)}
.h-banner-flecha.ant{left:14px}
.h-banner-flecha.sig{right:14px}
.h-banner-puntos{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;display:flex;gap:2px;padding:2px 6px;background:rgba(7,55,99,.35);border-radius:999px}
.h-banner-punto{width:20px;height:20px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.h-banner-punto::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.7);transition:width .2s,background-color .2s}
.h-banner-punto.activo::before{width:18px;background:#fff}
.h-banner-flecha:focus-visible,.h-banner-punto:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--azul-osc)}
@media (max-width:900px){.h-banner{aspect-ratio:750/380}.h-banner-flecha{width:32px;height:32px}.h-banner-flecha.ant{left:8px}.h-banner-flecha.sig{right:8px}}

/* MARCAS */
.h-marcas{padding:40px 48px 40px}
.h-step{position:relative;width:100%;margin:0 auto;height:100px;overflow:hidden;background:#fff;border-radius:16px}
.h-step::before,.h-step::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.h-step::before{left:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%)}
.h-step::after{right:0;background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%)}
.h-step-arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;padding:0 14px;transform:translateY(-50%);z-index:10;pointer-events:none}
.h-arrow{width:32px;height:32px;background:#fff;border:1px solid var(--gris);border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 18px/1 var(--font);color:#555;cursor:pointer;pointer-events:auto;padding:0}
.h-arrow:hover{border-color:var(--azul);color:var(--azul)}
.h-step-track{display:flex;align-items:center;height:100%;transition:transform .7s cubic-bezier(.65,0,.35,1);will-change:transform}
.h-step-item{flex:0 0 200px;width:200px;display:flex;align-items:center;justify-content:center}
.h-step-logo{height:calc(var(--lh,44px)*var(--f,1));width:auto;max-width:calc((100% - 12px)/1.15);object-fit:contain;filter:grayscale(100%) opacity(.4);transform:scale(.85);transition:filter .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.h-step-item.activo .h-step-logo,.h-step-logo:hover{filter:grayscale(0) opacity(1);transform:scale(1.15)}
/* Logos «como antes» (sin reencuadre): mismo tamaño que tenían, con su escala si la hay */
.h-step-orig{height:calc(var(--lh,44px)*var(--f,1));max-width:calc(130px*var(--f,1))}

/* SEGMENTOS + AYUDA (tomados del wireframe aprobado) */
.h-pad{padding:40px 48px}
.h-seg-in{max-width:1400px;margin:0 auto}
a.wf-btn-outline{display:block;text-decoration:none;color:#fff!important}
a.wf-btn-outline:focus-visible,.wf-ayuda-item:focus-visible,.wf-volver-arriba:focus-visible{outline:3px solid var(--wf-blue);outline-offset:3px}
.wf-segmento-card.wf-segmento-activo a.wf-btn-outline{color:var(--wf-blue)!important}
a.wf-ayuda-item,a.wf-volver-arriba{text-decoration:none;color:#333}
a.wf-volver-arriba{color:var(--wf-ink)}
a.wf-ayuda-item:hover,a.wf-volver-arriba:hover{color:var(--wf-blue)}
.wf-topbar-icon, .wf-topbar-social,
  .wf-nav-icono-buscar svg, .wf-buscador svg,
  .wf-carrito-icono svg, .wf-burger svg,
  .wf-footer-social svg, .wf-contacto-info-social svg,
  .wf-ayuda-item svg,
  .wf-mapa-icono svg, .wf-mapa-lista a svg {
    stroke-width: var(--icon-stroke);
  }
.wf-topbar-icon *, .wf-topbar-social *,
  .wf-nav-icono-buscar svg *, .wf-buscador svg *,
  .wf-carrito-icono svg *, .wf-burger svg *,
  .wf-footer-social svg *, .wf-contacto-info-social svg *,
  .wf-ayuda-item svg *,
  .wf-mapa-icono svg *, .wf-mapa-lista a svg * {
    vector-effect: non-scaling-stroke;
  }
.wf-btn-outline {
    background: var(--wf-blue);
    border: 1.5px solid var(--wf-blue);
    border-radius: 100px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    padding: 9px 0;
    text-align: center;
    width: 100%;
    margin-top: auto;
    cursor: pointer;
    outline: none;
    transition: transform 0.1s ease, background-color 0.4s ease, color 0.4s ease;
  }
.wf-btn-outline:hover { background: var(--wf-blue-dark); border-color: var(--wf-blue-dark); }
.wf-btn-outline:active { transform: scale(0.94); }
.wf-segmentos-titulo {
    font-family: var(--font);
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    color: var(--wf-ink);
    text-align: center;
    margin-bottom: 32px;
  }
.wf-segmentos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
@media (max-width: 1100px){.wf-segmentos-grid { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 700px){.wf-segmentos-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 480px){.wf-segmentos-grid { grid-template-columns: 1fr; }}
.wf-segmento-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--wf-border);
    border-radius: var(--radius-lg, 16px);
    padding: 48px 28px;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    cursor: pointer;
  }
.wf-segmento-card.wf-segmento-activo {
    background: var(--wf-blue);
    border-color: var(--wf-blue);
    color: #fff;
  }
.wf-segmento-icono {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #F4F5F7;
    color: var(--wf-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background-color 0.4s ease;
  }
.wf-segmento-card.wf-segmento-activo .wf-segmento-icono {
    background: #fff;
  }
.wf-segmento-icono svg {
    width: 44px;
    height: 44px;
  }
.wf-segmento-nombre {
    font-family: var(--font);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-h3);
    color: var(--wf-ink);
    margin-bottom: 8px;
    transition: color 0.4s ease;
  }
.wf-segmento-card.wf-segmento-activo .wf-segmento-nombre {
    color: #fff;
  }
.wf-segmento-descripcion {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.4s ease;
  }
.wf-segmento-card.wf-segmento-activo .wf-segmento-descripcion {
    color: #fff;
  }
.wf-segmento-card .wf-btn-outline {
    margin-top: auto;
    transition: transform 0.1s ease, background-color 0.4s ease, color 0.4s ease;
  }
.wf-segmento-card.wf-segmento-activo .wf-btn-outline {
    background: #fff;
    color: var(--wf-blue);
  }
.wf-seccion-ayuda {
    background: #F4F5F7;
    text-align: center;
    padding-top: 56px;
    padding-bottom: 56px;
  }
.wf-ayuda-titulo {
    font-family: var(--font);
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    color: var(--wf-ink);
    margin-bottom: 6px;
  }
.wf-ayuda-subtitulo {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: #444;
    margin-bottom: 36px;
  }
.wf-ayuda-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
  }
.wf-ayuda-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: var(--fw-regular);
    color: #333;
    cursor: pointer;
  }
.wf-ayuda-item:hover {
    color: var(--wf-blue);
  }
.wf-ayuda-item svg {
    width: 22px;
    height: 22px;
    stroke: var(--wf-ink);
    flex-shrink: 0;
  }
.wf-ayuda-item svg.wf-icono-catalogo-industrial {
    width: 25px;
    height: 25px;
  }
.wf-ayuda-item svg.wf-icono-caja {
    width: 26px;
    height: 26px;
  }
.wf-volver-arriba {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--wf-ink);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
  }
.wf-volver-arriba .wf-arrow-circulo {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--wf-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.wf-volver-arriba .wf-arrow-circulo svg {
    width: 15px;
    height: 15px;
    stroke: var(--wf-ink);
  }
.wf-volver-arriba span {
    text-decoration: underline;
  }
.wf-volver-arriba:hover,
  .wf-volver-arriba:hover .wf-arrow-circulo {
    color: var(--wf-blue);
    border-color: var(--wf-blue);
  }
@media (max-width: 720px){.wf-ayuda-items { gap: 24px; }}
.wf-barra-busqueda.wf-barra-oculta,
  .wf-barra-busqueda.wf-barra-oculta-escritorio {
    display: none;
  }
@media (max-width: 900px){.wf-barra-busqueda.wf-barra-oculta-escritorio { display: flex; }}
.wf-oculto {
    display: none !important;
  }
.wf-barra-busqueda {
    background: #F4F5F7;
    padding: 14px 48px;
    display: flex;
    justify-content: center;
  }
.wf-buscador-grupo {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
.wf-buscador-sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--wf-border);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 20;
  }
.wf-buscador-sugerencia {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--wf-ink);
  }
.wf-buscador-sugerencia:hover {
    background: #F4F5F7;
  }
.wf-buscador-sugerencia:not(:last-child) {
    border-bottom: 1px solid var(--wf-border);
  }
.wf-buscador-sugerencia img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--wf-border);
    flex-shrink: 0;
  }
.wf-buscador {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    padding: 9px 14px;
  }
.wf-btn-buscar {
    display: none;
    background: var(--wf-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
    cursor: pointer;
  }
.wf-btn-buscar.visible {
    display: block;
  }
.wf-buscador svg {
    width: 18px;
    height: 18px;
    color: var(--wf-gray);
    flex-shrink: 0;
    cursor: pointer;
  }
.wf-buscador svg:hover {
    color: var(--wf-blue);
  }
.wf-buscador input {
    border: none;
    outline: none;
    background: none;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--wf-ink);
    width: 100%;
  }
.wf-buscador input::placeholder {
    color: var(--wf-gray);
  }
.h-br{display:none}
@media (max-width:900px){
  .h-br{display:inline}
  .wf-seccion-ayuda .wf-ayuda-items{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;justify-items:start;align-items:center;gap:20px 40px}
}
/* Celulares angostos (≤420 px): cada columna mide lo que ocupa su contenido y se reparten de borde a borde dentro de los márgenes de las fichas (16 px); si no caben, el texto pasa a 2 líneas alineado a la izquierda */
@media (max-width:420px){
  .wf-seccion-ayuda .wf-ayuda-items{grid-template-columns:repeat(2,minmax(0,max-content));justify-content:space-between;column-gap:8px;width:100%;box-sizing:border-box;padding:0 16px}
  .wf-seccion-ayuda .wf-ayuda-item{text-align:left}
}
.wf-buscador svg *,.wf-ayuda-item svg *{vector-effect:none}
.wf-buscador input[type=search]{-webkit-appearance:none;appearance:none}
.wf-buscador-mensaje{padding:12px 14px;font-size:.875rem;color:#555;line-height:1.4}
.wf-buscador-sugerencia{text-decoration:none}
@media (max-width:600px){.wf-barra-busqueda{padding:12px 16px}.h-pad{padding:32px 16px}}

/* SEGMENTOS en tablet y móvil: fichas horizontales, la ficha entera es el enlace y el botón pasa a flecha */
@media (max-width:900px){
  #h-segmentos.wf-segmentos-grid{grid-template-columns:minmax(0,1fr);max-width:680px;margin:0 auto;gap:16px}
  #h-segmentos .wf-segmento-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:16px 40px 16px 16px;border-radius:22px;overflow:hidden}
  #h-segmentos .wf-segmento-icono{grid-row:1 / span 2;width:56px;height:56px;margin:0}
  #h-segmentos .wf-segmento-icono svg{width:28px;height:28px}
  #h-segmentos .wf-segmento-nombre{grid-column:2;align-self:end;margin:0 0 4px;font-size:var(--fs-h3)}
  #h-segmentos .wf-segmento-descripcion{grid-column:2;align-self:start;margin:0;font-size:1rem}
  #h-segmentos .wf-segmento-card a.wf-btn-outline{position:absolute;inset:0;width:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;color:transparent!important;font-size:0;line-height:0;display:block}
  #h-segmentos .wf-segmento-card a.wf-btn-outline::before{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;background:#F4F5F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat;transition:background-color .4s ease}
  #h-segmentos .wf-segmento-card.wf-segmento-activo a.wf-btn-outline::before{background-color:var(--wf-blue-dark);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
  #h-segmentos .wf-segmento-card a.wf-btn-outline:focus-visible{outline-offset:-4px}
}

.wf-whatsapp-flotante {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 56px;
    height: 56px;
    background: #0075B9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    z-index: 60;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
.wf-whatsapp-flotante:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  }
.wf-whatsapp-flotante svg {
    width: 26px;
    height: 26px;
    color: #fff;
  }
@media (max-width: 600px){.wf-whatsapp-flotante {
      right: 16px;
      bottom: 16px;
      width: 48px;
      height: 48px;
    }.wf-whatsapp-flotante svg {
      width: 22px;
      height: 22px;
    }}

@media (max-width:1100px){
  .h-wrap{padding:0 32px}
}
@media (max-width:900px){
}
@media (max-width:600px){
  .h-wrap{padding:0 20px}
  .h-step{height:80px}
  .h-step-item{flex-basis:140px;width:140px}
  .h-step-logo{--lh:34px}
  .h-step-orig{max-width:calc(96px*var(--f,1))}
  }
@media (max-width:360px){.h-wrap{padding:0 16px}}

/* Enlace «Saltar al contenido»: oculto hasta que recibe foco con el teclado */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#2A2A2A;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.saltar:focus{left:0}

/* Carrusel de marcas en pantallas angostas (caben menos de 3 logos): sin flechas, 2 logos por vista y degradado a los lados.
   Umbrales (la sección deja 48 px a cada lado): logo de 140 px (≤600) → caben 3 desde 516 px de pantalla; logo de 200 px (601–1100) → caben 3 desde 696 px. */
@media (max-width:515px),(min-width:601px) and (max-width:695px){
  .h-step-arrows{display:none}
  .h-step-item{flex-basis:50%;width:50%}
  .h-step::before,.h-step::after{width:56px}
}

/* Carrusel de marcas centrado entre el banner y «Nuestros Segmentos»: el logo queda a la misma distancia del banner que del título.
   Se mide desde el logo (centrado en su franja): arriba = padding-top; abajo = padding-bottom + padding-top de la sección siguiente + holgura del título.
   Los 48 px laterales se conservan: de ellos depende cuándo caben 3 logos. */
.h-marcas{padding-top:41px;padding-bottom:0}
.h-marcas + .h-seg{padding-top:28px}
@media (max-width:900px){.h-marcas{padding-top:27px;padding-bottom:0}.h-marcas + .h-seg{padding-top:17px}}

/* «¿Podemos ayudarte en algo?»: los 4 íconos al mismo tamaño (24 px = 1 unidad de la cuadrícula) para que el trazo de 1.6 se vea igual en todos (antes 22/22/25/26 px → 1.47 a 1.73 px) */
.wf-ayuda-item svg,.wf-ayuda-item svg.wf-icono-catalogo-industrial,.wf-ayuda-item svg.wf-icono-caja{width:24px;height:24px}

/* Firma del footer: «por Kromativo™» no se parte; si no cabe, baja completa a la 2.ª línea */
.if-firma{white-space:nowrap}

/* REGLA (aprobada por Richard, 2026-10-19): estos tres íconos van siempre con trazo −12 % (1.6 → 1.408) para igualar ópticamente el grosor con los demás, en cualquier página y tamaño. Industria no se toca. */
#h-segmentos .wf-segmento-icono svg.ic-fino,.wf-ayuda-item svg.wf-icono-catalogo-industrial,.wf-ayuda-item svg.wf-icono-caja{stroke-width:1.408}

/* Botón flotante de WhatsApp anclado SOLO con CSS: .wa-ancla es el último hijo de <main> (termina donde empieza el footer), mide 0 de alto y es
   «sticky» al borde inferior de la pantalla; el botón (posición absoluta dentro) queda a 28/16 px del borde de pantalla mientras hay contenido
   debajo y, al llegar al footer, se detiene encima de él sin saltos ni scripts (antes un script en cada scroll lo pasaba de fixed a absolute y en
   iPhone el aviso llegaba tarde: seguía de largo y luego «se teletransportaba»). */
.wa-ancla{position:sticky;bottom:0;height:0;z-index:60;pointer-events:none}
.wa-ancla .wf-whatsapp-flotante{position:absolute;pointer-events:auto}

/* Buscador: resultados del brochure («Catálogo · página N») — título azul + fragmento con la palabra buscada resaltada; van DESPUÉS de los productos */
.wf-sug-cat{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;text-align:left}
.wf-sug-cat strong{color:#0075B9;font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.wf-sug-cat span{display:block;width:100%;color:#2A2A2A;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-sug-cat mark{background:#E3F0F9;color:#073763;font-weight:700;padding:0 2px;border-radius:3px}
