/*
  Quicial — comportamiento responsive.

  ⚠️ Sigue sin haber artboards de movil ni de tablet: los entregados son solo
  de 1440 px. Lo que hay aqui son las decisiones tomadas con el cliente sobre
  capturas reales del sitio, no una maqueta. Se monta con piezas que ya estan
  en el design system —filete var(--hair), rojo de acento, marron de texto,
  .btn del DS— sin estrenar lenguaje visual. Cuando lleguen los artboards hay
  que contrastarlo con ellos.
*/

/* ---------- Cabecera ----------
   Los seis rotulos del nav de escritorio necesitan unos 1280 px. Por debajo la
   fila se queda en logo + boton de contacto + hamburguesa, y el nav —con la
   busqueda dentro, porque la lupa desaparece de la fila— baja en un panel
   desplegable. Antes el nav se desplazaba en horizontal dentro de su fila, sin
   ninguna pista de que se podia desplazar: a 375 px no se veia ni un solo
   enlace entero. */
@media (max-width: 1279px) {
  .qcaret{display:none}

  /* ---------- Menu desplegable ----------
     El mega-menu de escritorio no se tira: se reordena. Cada apartado con
     hijos gana un boton que lo abre, y dentro de Productos cada categoria
     tiene el suyo. Asi se llega a las 22 lineas de producto desde el movil
     —antes no habia manera— sin soltar una lista de treinta y tantos
     enlaces de golpe.

     El boton va aparte del enlace a proposito: el rotulo sigue llevando a
     su pagina y el boton solo despliega. */
  .qtoggle{display:flex;align-items:center;justify-content:center;flex:none;width:56px;align-self:stretch;
    background:none;border:0;color:#523F34;cursor:pointer}
  .qtoggle-ic{display:flex;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  .qtoggle-ic svg{width:16px;height:16px;display:block}
  .qtoggle[aria-expanded="true"] .qtoggle-ic{transform:rotate(180deg)}

  /* El mega deja de ser una capa flotante y pasa a ser una fila mas del
     panel. El hover de escritorio no cuenta: en tactil se queda pegado. */
  .qmega,.qitem:hover .qmega{position:static;width:100%;flex:0 0 100%;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;background:var(--beige-08);pointer-events:auto;
    max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
  /* El filete solo cuando esta abierto: plegado, una caja de alto cero
     sigue pintando su borde y se veia doble linea con la del propio item. */
  .qitem.is-open > .qmega{max-height:1400px;border-top:1px solid var(--hair)}
  .qmega-inner{grid-template-columns:minmax(0,1fr)}
  .qcol{border-right:0;padding:0}
  .qcol + .qcol{border-top:1px solid var(--hair)}
  /* La foto destacada del mega no viaja al movil: ocupa media pantalla y no
     lleva a ningun sitio. */
  .qfeat{display:none}

  /* Nivel dos: la categoria y su boton en una fila, y sus lineas debajo. */
  /* .qcol viene en columna del escritorio: en fila, o el 100% de base se
     interpreta sobre el alto y el titular y sus lineas acaban uno al lado
     del otro. */
  .qcol{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}
  .qcol .qgroup,.qcol .qgroup--enlace{flex:1 1 auto;min-height:52px;margin:0;padding:0 var(--sec-x);align-items:center;
    min-width:0;font-size:12px;letter-spacing:.1em;overflow-wrap:anywhere}
  .qcol-links{flex:0 0 100%;width:100%;min-width:0;padding:0;max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
  .qcol.is-open .qcol-links{max-height:900px}
  .qsublink{padding:11px var(--sec-x);min-height:44px;border-top:1px solid var(--hair);min-width:0}
  .qsublink-stack{min-width:0}
  /* El «ver todo» sobra: el propio rotulo de la categoria ya lleva a su
     pagina, y plegado se quedaba colgando debajo de cada una. */
  .qmega .qall{display:none}

  /* ---------- Marcas dentro del menu ----------
     Cinco piezas en 2x3, y de cada una solo el logotipo y su enlace: el
     reclamo y la descripcion son de la capa de escritorio, donde hay una
     columna ancha por marca. Apilados aqui convertian el desplegable en un
     articulo. */
  .qmega-inner:has(.qmarca-logo){grid-template-columns:repeat(2,minmax(0,1fr))}
  .qmega-inner:has(.qmarca-logo) .qcol,
  .qmega-inner:has(.qmarca-logo) .qcol + .qcol{flex-direction:column;align-items:flex-start;justify-content:space-between;
    gap:12px;padding:16px var(--sec-x);border-top:0;min-height:96px}
  .qmega-inner:has(.qmarca-logo) .qcol:nth-child(even){border-left:1px solid var(--hair)}
  .qmega-inner:has(.qmarca-logo) .qcol:nth-child(n+3){border-top:1px solid var(--hair)}
  /* Son cinco en dos columnas, asi que la ultima fila va coja. Se cierra la
     caja: filete a la derecha de la pieza que se queda sola y por debajo de
     la que le queda encima. */
  .qmega-inner:has(.qmarca-logo) .qcol:last-child:nth-child(odd){border-right:1px solid var(--hair)}
  .qmega-inner:has(.qmarca-logo) .qcol:nth-last-child(2):nth-child(even){border-bottom:1px solid var(--hair)}
  .qmarca-claim,.qmarca-desc{display:none}
  .qmarca-logo{height:auto;margin-bottom:0}
  /* Todos al mismo factor sobre la altura que cada marca trae de Ajustes,
     que es la que el diseno ya equilibro para el mega de escritorio.
     Recortarlos a un maximo comun no vale: con proporciones tan dispares
     —Kentmaster es diez veces mas ancho que alto, Quicial dos y medio— el
     que manda es el ancho y los pesos salen descompensados. */
  .qmarca-logo img{height:calc(var(--logo-alto, 32px) * .65)!important;width:auto!important;max-width:100%;object-fit:contain;object-position:left center}
  .qmega-inner:has(.qmarca-logo) .qall,
  .qmega-inner:has(.qmarca-logo) .qall-div{display:inline-flex;width:auto;margin:0;padding:0;border-top:0}

  /* Sectores y marcas: una pieza por fila, sin la rejilla de escritorio. */
  /* Los sectores son cuatro rotulos cortos con su icono: en 2x2 se ven de
     un vistazo, apilados se comian media pantalla del panel. */
  .qmega-inner:has(> .qseccol){grid-template-columns:repeat(2,minmax(0,1fr))}
  .qseccol{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;min-height:60px;
    padding:12px var(--sec-x);border-right:0}
  .qseccol:nth-child(even){border-left:1px solid var(--hair)}
  .qseccol:nth-child(n+3){border-top:1px solid var(--hair)}
  .qseccol .ic{height:30px}
  /* Un escalon por encima de las lineas de producto del desplegable, que van
     a 15: son cuatro rotulos sueltos y a 14 se quedaban pequenos. */
  .qseccol .nm{font-size:16px}
  .qsearch{display:none}
  /* Antes el burger quedaba a la derecha porque .qcta y .qsearch, aun
     visibles, rellenaban el hueco entre el logo y el. Al esconderlos no
     queda nada que lo empuje, asi que el margen lo hace el solo; y sin el
     filete que llevaba para separarse de esas dos cajas, que ya no estan. */
  .qburger{display:flex;margin-left:auto;border-left:0}

  /* Filete arriba, con la misma medida y color que el de abajo: la fila se
     lee como una banda cerrada. */
  .top{border-top:1px solid var(--hair)}
  /* El contacto de la fila superior (version escritorio) se esconde: en
     movil vive dentro del menu, como una fila mas entre "Sobre" y el
     buscador (ver .qitem--cta-movil mas abajo). */
  .qcta{display:none}
  .qitem--cta-movil{display:flex}
  /* El selector de idioma de escritorio (junto a la lupa) tambien se
     esconde: en movil vive como ultima fila del menu (.qitem--idiomas-movil). */
  .qlangs{display:none}
  .qitem--idiomas-movil{display:flex}
  .qlangs-movil{padding:0 var(--sec-x);min-height:56px}
  /* El fondo de la fila es blanco de punta a punta: las cajas se distinguen
     por el filete, no por el relleno. El beix se queda para el estado
     abierto, que si necesita verse. */
  .qburger{background:#fff}
  /* En pantalla tactil el :hover se queda pegado despues de tocar y la caja
     se quedaba beix. Aqui no hay raton que valga. */
  .qburger:hover,.qburger:focus{background:#fff}
  .top.menu-open .qburger{background:#fff}

  .qmenu{position:absolute;top:100%;left:0;right:0;display:block;background:#fff;border-top:1px solid var(--hair);box-shadow:0 40px 70px -34px rgba(33,29,26,.4);max-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:max-height .38s cubic-bezier(.2,.7,.2,1),opacity .24s ease,visibility .38s}
  .top.menu-open .qmenu{max-height:calc(100dvh - 75px);overflow-y:auto;visibility:visible;opacity:1}

  /* El coixi lateral va en el enlace, no en el nav: asi el filete de cada
     item llega a los dos bordes del panel en lugar de quedarse dentro del
     margen del texto. */
  .qnav{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .qitem{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--hair)}
  /* Area tactil real: los rotulos median 17 px de alto, muy por debajo de los
     44 px que necesita un dedo. */
  .qlink{display:flex;align-items:center;flex:1;min-width:0;min-height:56px;font-size:14px;padding:0 var(--sec-x)}

  /* La busqueda va dentro del menu, siempre abierta: sin lupa en la fila no
     hay nada que la despliegue. */
  .qsearchpanel{display:none}
  /* Sin filete propio: el ultimo enlace del nav ya cierra con el suyo y se
     veian dos lineas pegadas. */
  .qsearchpanel--menu{display:block;max-height:none;opacity:1;overflow:visible}
  .qsearchpanel--menu .qsearchinner{padding:18px var(--sec-x)}
  .top.search-open .qsearchpanel--menu{max-height:none}
}

@media (max-width: 1100px) {
  /* Ritmo vertical un 25% mas corto que en escritorio: con las columnas ya
     plegadas, los 96 px del artboard dejaban la pagina muy larga en movil. */
  :root{--sec-y:54px;--sec-x:28px}

  /* ---------- Escala tipografica de movil ----------
     Els titulars ja van per --fs-h1..h4. Tota la resta havia anat creixent
     retall a retall i al movil hi convivien onze mides per sota de 18 px
     (9, 10.5, 11, 12, 12.5, 13, 13.5, 14, 15, 15.5 i 16), amb diferencies
     de mig pixel que no es llegeixen com a jerarquia: es llegeixen com un
     desajust. Aqui es redueixen a cinc esglaons amb una feina cadascun.
     Nomes al movil: a escriptori mana l'artboard. */
  :root{
    --fs-micro:11px;   /* segell i clau de dada, versaletes molt curtes */
    --fs-label:12px;   /* antetitol, boto, barra de categoria, pestanya */
    --fs-meta:13px;    /* legal, credit i notes: no son text de lectura */
    --fs-body-s:14px;  /* descripcions de fitxa i enllacos del peu */
    --fs-body:16px;    /* parrafs de lectura */
  }


  /* Hero: primero el titular, despues el texto y al final los botones; el
     carrusel de logos se queda debajo. Los dos envoltorios de la rejilla
     dejan de pintar caja para poder ordenar sus hijos entre si. */
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-grid > div{display:contents}
  .hero-title{order:1}
  .hero-lead{order:2}
  .hero-actions{order:3;margin-top:8px}
  .herologos{order:4}

  /* Velos. En escritorio el de la pagina interior es un degradado horizontal
     —opaco donde va el texto, transparente donde se ve la foto—, y el de la
     home casi no tapa por arriba porque alli el titular va abajo del todo.
     En movil el texto ocupa todo el ancho y sube: sin un velo parejo queda
     sobre la parte clara de la foto y no hay quien lo lea. */
  .hero-veil{background:linear-gradient(180deg,rgba(22,19,16,.62) 0%,rgba(22,19,16,.58) 45%,rgba(22,19,16,.82) 100%)}

  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-sectores{grid-template-columns:repeat(2,1fr)}
  .grid-sectores .secitem img{max-width:100%}
  .propio{grid-template-columns:minmax(0,1fr);gap:40px}
  /* A sangre y a ras del final de la seccion: encajada dentro del padding
     quedaba una foto pequena con marco de aire por los tres lados. */
  /* align-self:start no es cosmetic. .propio es una graella amb
     align-items:stretch, i un element de graella estirat que a mes porta
     aspect-ratio el resolen diferent els motors: Blink fa manar la ratio,
     WebKit fa manar l'estirament i la caixa agafa l'alcada de la fila, que
     aqui la fixa un contingut absolut —o sigui, zero. Traient l'estirament
     mana la ratio als dos. El @supports cobreix un Safari sense
     aspect-ratio: la caixa va a sang, aixi que el seu ample es el de la
     finestra i un quadrat fa just aixo d'alt. */
  .propio-visual{margin:0 calc(-1 * var(--sec-x)) calc(-1 * var(--sec-y));min-height:0;aspect-ratio:1/1;align-self:start}
  @supports not (aspect-ratio: 1 / 1) {
    .propio-visual{height:var(--vw, 100vw)}
  }
  .ctablock{grid-template-columns:minmax(0,1fr)}
  /* Primero el bloque de texto y la foto debajo, como el resto de bloques
     partidos: abrir con la foto dejaba el titular fuera de la pantalla. */
  .ctablock-img{order:2;border-right:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:0;min-height:52vw}
  .ctablock-body{order:1}
  /* El mismo coixi que el contenedor de seccion: con 32 no entraban los dos
     botones en una fila. */
  .ctablock-body{padding:var(--sec-x)}
  .ctablock-actions{flex-wrap:nowrap;gap:10px}
  .ctablock-actions .btn{flex:1 1 auto;min-width:0;padding:10px 12px;font-size:var(--fs-label);letter-spacing:.03em;white-space:normal;text-align:center;line-height:1.25}
  /* El bloque ya trae su propio aire dentro de la caja: sumarle encima el
     ritmo vertical de seccion dejaba dos franjas oscuras muy altas arriba y
     abajo. El vertical se iguala al lateral, que sigue a --sec-x y por tanto
     tambien baja a 20 px en movil. */
  .ctasection .secwrap{padding-top:var(--sec-x);padding-bottom:var(--sec-x)}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .foot-col,.foot-col--first,.foot-col--last{padding:36px}
  .foot-col--first{padding-left:0}
  .krow{font-size:7vw}
  .cita-texto{font-size:6vw}

  /* Garantias: se quedan en dos columnas tambien en movil. Son dos frases
     cortas; apiladas dejaban dos bloques sueltos muy separados. */
  .garantias{grid-template-columns:1fr 1fr;margin-bottom:calc(-1 * var(--sec-y))}
  .garantia{padding:32px 20px 32px 0}
  .garantia + .garantia{border-left:1px solid var(--hair);border-top:0;padding:32px 0 32px 20px}
  .garantia-texto{font-size:16px}

  /* El titular vive dentro de la rejilla de tarjetas: en cuanto baja a dos
     columnas se quedaba ocupando una celda y las tarjetas arrancaban a su
     lado. Ocupa la fila entera y la rejilla empieza debajo. Va aqui, en el
     mismo punto en que la rejilla pasa a dos columnas, no mas abajo. */
  .benrow .asistencia-head,.benrow .sec-head{grid-column:1 / -1;margin-bottom:8px}

  /* Indice de sectores: una cruz limpia y nada mas. Cada celda traia su
     filete a la izquierda y arriba, y en 2x2 salian trozos sueltos. La
     vertical la pinta la columna de la derecha y la horizontal la fila de
     abajo, asi que solo queda una de cada. */
  /* Las dos rayas las pinta el contenedor, no las celdas. Colgadas de las
     celdas la vertical se cortaba donde acababa cada una —las dos filas no
     miden lo mismo— y la horizontal se quedaba dentro del margen de la
     seccion. Aqui la vertical va de arriba abajo del bloque y la
     horizontal a sangre. Las filas se igualan para que el corte caiga
     justo en la costura. */
  .secindex:not(.secindex--marcas){position:relative;grid-auto-rows:1fr}
  .secindex:not(.secindex--marcas) .sec-idx,
  .secindex:not(.secindex--marcas) .sec-idx:first-child,
  .secindex:not(.secindex--marcas) .sec-idx:last-child{margin:0;padding:24px 20px;border:0}
  .secindex:not(.secindex--marcas)::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
  /* La graella ja va a sang: al mobil ocupa de 0 a l'ample de la finestra.
     Amb «left:-20 i ample de finestra» la ratlla comencava vint pixels
     fora per l'esquerra i es quedava vint curta per la dreta. Ancorada als
     dos costats arriba d'una punta a l'altra sigui quin sigui l'ample. */
  .secindex:not(.secindex--marcas)::after{content:"";position:absolute;top:50%;left:0;right:0;width:auto;height:1px;background:var(--hair)}

  /* Plegado, el indice vuelve a una sola fila: la rejilla de 2x2 metida en
     64 px de alto se salia de la barra y se montaba encima del texto de la
     pagina. Cuatro rotulos cortos caben; el icono sobra a este tamano. */
  .secindex-bar.is-fija .secindex{height:48px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .secindex-bar.is-fija .sec-idx,
  .secindex-bar.is-fija .sec-idx:first-child,
  .secindex-bar.is-fija .sec-idx:last-child,
  .secindex-bar.is-fija .sec-idx:nth-child(even),
  .secindex-bar.is-fija .sec-idx:nth-child(n+3){flex-direction:row;align-items:center;justify-content:center;gap:0;margin:0;padding:0 4px;border:0}
  /* Plegado no hay nada que dividir: una fila de cuatro rotulos se lee
     sola, y las rayas solo la ensuciaban. */
  .secindex-bar.is-fija .secindex::before,
  .secindex-bar.is-fija .secindex::after{display:none}
  .secindex-bar.is-fija .sec-idx img,
  .secindex-bar.is-fija .sec-idx:hover img{display:none!important}
  .secindex-bar.is-fija .secname{font-size:13.5px;letter-spacing:-.01em}

  /* Los botones de cada sector, a todo el ancho de la columna. Son dos
     rotulos largos —«Ver maquinaria para bovino»— y uno al lado del otro no
     caben; apilados y a media medida quedaban descolgados. */
  .split-acciones{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
  .split-acciones .btn{width:100%}
  /* Salvo en las marcas, que son un unico «Ver marca» y a todo el ancho
     queda desproporcionado. El bloque se reconoce por el logo: el de sector
     lleva icono, el de marca lleva logotipo. */
  .split-texto:has(.split-logo) .split-acciones{align-items:flex-start}
  .split-texto:has(.split-logo) .split-acciones .btn{width:auto}

  /* Indice de marcas: cinco piezas en 3x2 en lugar de 2x3. A dos columnas
     ocupaba casi una pantalla entera para lo que es, un indice. Los logos se
     encogen con la celda; el alto de cada uno sigue saliendo de Ajustes. */
  /* La tira de marques al mobil va de noms, no de logotips, i sempre en una
     sola fila de cinc. Amb logotips calien tres columnes i dues files —massa
     alcada per a un index— i, pitjor, la barra fixa amaga el logotip: amb
     cinc marques en una graella de quatre la cinquena queia a una segona
     fila que els 48 px de barra retallaven, i com que a dins no hi quedava
     res visible la barra sortia en blanc. Amb nom es llegeix igual, cap i
     tot, i ocupa la meitat. */
  /* Justificat de veritat, no cinc columnes iguals: amb columnes de 57 px
     «KENTMASTER» en fa 66 i la celda, que retalla, se'l menjava pels dos
     costats. Amb els ample naturals i space-between els cinc noms sumen
     290 dels 335 disponibles a 375 px i hi caben sencers. */
  .secindex.secindex--marcas{display:flex;flex-wrap:wrap;grid-template-columns:none;height:auto;
    justify-content:space-between;align-items:center;gap:0 4px}
  .secindex.secindex--marcas .sec-idx,
  .secindex.secindex--marcas .sec-idx:first-child,
  .secindex.secindex--marcas .sec-idx:last-child,
  .secindex.secindex--marcas .sec-idx:nth-child(even),
  .secindex.secindex--marcas .sec-idx:nth-child(n+3){flex:0 0 auto;margin:0;padding:14px 0;border:0;
    min-height:0;min-width:0;flex-direction:column;justify-content:center;align-items:center;gap:0}
  .secindex.secindex--marcas .sec-idx img,
  .secindex.secindex--marcas .sec-idx:hover img{display:none!important}
  .secindex.secindex--marcas .sec-idx:has(img) .secindex-txt{display:flex}
  .secindex--marcas .secindex-txt{align-items:center}
  .secindex--marcas .secname{font-size:10px;font-weight:700;letter-spacing:.02em;
    text-transform:uppercase;text-align:center;line-height:1.25;white-space:nowrap}
  /* Fixa nomes canvia el coixi: la tira ja es tan curta com pot ser. */
  .secindex-bar--marcas.is-fija .secindex.secindex--marcas{height:auto}
  .secindex-bar--marcas.is-fija .sec-idx{padding:11px 0}
  /* La regla que plega la descripcio dels sectors quan la barra es fixa,
     «.secindex-bar.is-fija .sec-idx span span:last-child», tambe enganxa
     aqui: el nom de la marca es l'ultim span dins d'un span. Te (0,4,2)
     —el :last-child compta—, aixi que cal arribar-hi amb cinc classes. */
  .secindex-bar--marcas.is-fija .secindex--marcas .secindex-txt .secname{max-height:none;font-size:10px}

  /* Cabecera de cada marca: el logo baja un 30% y se acerca al parrafo. A
     tamano de escritorio se comia la primera pantalla del bloque. */
  .split-logo{margin-bottom:14px;min-height:0}
  .split-logo img{height:calc(var(--logo-alto, 44px) * .49)!important}
  /* El mateix a la capcalera de la pagina de marca: l'alt surt de la fitxa
     de la marca i esta pensat per a 1440. Al mobil el logotip de Quicial
     arribava a 64 px d'alt i es menjava el hero. */
  .marcahero-logo img{height:calc(var(--logo-alto, 44px) * .49)!important;max-width:100%}

  /* El pie de cada sector tiene el alto tope en 60 px, que a 1440 son las tres
     lineas que ocupa el texto mas largo. En dos columnas el mismo texto pide
     cuatro y se cortaba a media palabra. El tope solo esta para que el
     plegado de la barra fija tenga a donde ir: aqui manda el contenido. */
  .secindex .sec-idx span span:last-child{max-height:none}
  .secindex-bar.is-fija .sec-idx span span:last-child{max-height:0}
}

/* Bloques simples de texto + foto: dos columnas mientras haya ancho para una
   medida de lectura decente en cada una. */
@media (max-width: 900px) {
  /* Sobre Quicial y postventa: primero el texto, la foto al final. Plegados a
     una columna, abrir con una foto a sangre dejaba el titular fuera de la
     primera pantalla. */
  .empresa{grid-template-columns:minmax(0,1fr);gap:32px}
  .empresa-visual{order:2;min-height:0;aspect-ratio:16/9}

  .svc{grid-template-columns:minmax(0,1fr);gap:32px}
  /* 4:3, que es la proporcion del artboard: en 16/9 la maquina salia
     aplastada y el recorte se comia los extremos. */
  .svc-visual{order:2;aspect-ratio:4/3}
  .svc-col{order:1}
  .svc-col .svc-list{margin-top:32px}
}

@media (max-width: 720px) {
  :root{--sec-x:20px}
  .catbadge,
  .dato-k{font-size:var(--fs-micro)}

  .eyebrow,
  .btn,
  .catbar-t,
  .tabsnav button,
  .garantia-ante,
  .foothead,
  .trustitem{font-size:var(--fs-label)}

  .crumb,
  .foot-bottom,
  .parte-nota,
  .parte-form .wpcf7-not-valid-tip{font-size:var(--fs-meta)}

  .bendesc,
  .bennum,
  .catdesc,
  .footlink,
  .foot-desc,
  .secindex-d,
  .fld-consent,
  .parte-form .fld-cell--consent{font-size:var(--fs-body-s)}

  .sub,
  .hero-lead,
  .ctablock-p,
  .pcta-p,
  .dato-v,
  .intro-texto,
  .pagehero-p,
  .propio-texto,
  .garantia-texto,
  .svc-body p,
  .dato-fila,
  .legal-aviso p,
  .legal-dato dd,
  .xlink,
  .review-texto,
  .review-autor,
  .pmname,
  .stars{font-size:var(--fs-body)}

  /* --fs-item baixa fins a 18,07 px a 390: mig pixel per sobre dels 18 de
     --fs-h3, que es el que fan servir els titols de fitxa del costat. Es
     una diferencia que no es veu com a jerarquia, nomes com a desajust. */
  .secname{font-size:18px}

  .qbrand img{height:44px;margin-left:-14px}
  .qcta{padding:0 18px;font-size:12px}
  .qsearchinner{padding:16px var(--sec-x);gap:12px}
  .qsearchinner input{font-size:18px;min-width:0}

  .hero-inner{padding:40px var(--sec-x) 24px}

  /* Los dos botones de cualquier hero, en una sola fila. Con el cuerpo y el
     coixi de escritorio sumaban 393 px en 335 disponibles y el segundo caia
     debajo. Se les deja partir el rotulo dentro de su propia caja: asi la
     fila aguanta por larga que sea la etiqueta, que sale de Ajustes y puede
     cambiar. El alto minimo de 44 lo sigue poniendo .btn. */
  /* Los botones crecen para llenar la fila: con flex:1 1 auto se reparten
     el hueco que sobra en proporcion a su rotulo, que queda mejor que
     partirla en dos mitades iguales cuando una etiqueta es mucho mas larga
     que la otra. */
  .hero-actions,.pagehero-acciones{flex-wrap:nowrap;gap:10px}
  .hero-actions .btn,.pagehero-acciones .btn{flex:1 1 auto;min-width:0;padding:10px 12px;font-size:var(--fs-label);letter-spacing:.03em;white-space:normal;text-align:center;line-height:1.25}
  /* Alturas de movil. El hero de la home lleva video y se le deja mas sitio;
     las cabeceras de pagina interior solo sostienen un titular y un parrafo,
     y media pantalla era demasiado para lo que dicen. */
  .hero{min-height:70vh}
  .pagehero{min-height:30vh}
  /* El minimo por si solo no la encoge: lo que la hacia alta era el ritmo
     vertical de seccion sumado al titular y al parrafo. */
  .pagehero .secwrap{padding-top:32px;padding-bottom:32px}
  .pagehero--foto::after{background:linear-gradient(180deg,rgba(33,29,26,.76) 0%,rgba(33,29,26,.88) 100%)}
  /* Misma distancia entre antetitulo, titular, parrafo y botones: cada uno
     traia el suyo —18, 20 y 34— y el bloque se leia descompensado. */
  .pagehero-caja .eyebrow{margin-bottom:14px}
  /* A lo ancho de la columna: el text-wrap:pretty del diseno esta pensado
     para una medida de 620 y en 350 se dedicaba a igualar lineas, dejando
     el parrafo corto y con el borde derecho a media asta. */
  .pagehero-p{margin-top:14px;max-width:none;text-wrap:wrap}
  .pagehero-acciones{margin-top:14px}
  .hero-grid{gap:14px}
  .hero-actions{margin-top:0}
  .sec-head{margin-bottom:28px}

  /* ---------- Categorias y sectores, en carrusel ----------
     Una pieza por pantalla, se pasa con el dedo y se sigue con los puntos.
     El desplazamiento es nativo con scroll-snap: asi hay inercia del sistema
     y, si el JS no llega a correr, la cinta se sigue pudiendo arrastrar.
     Solo se pierden los puntos, que es lo accesorio.

     La reixa sale a sangre para que la pieza siguiente se intuya por el
     borde, y cada pieza recupera el margen con el scroll-padding. */
  [data-carrusel]{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--sec-x));padding:0 var(--sec-x);scroll-padding-left:var(--sec-x);
    scrollbar-width:none;-ms-overflow-style:none}
  [data-carrusel]::-webkit-scrollbar{width:0;height:0}
  [data-carrusel] > *{scroll-snap-align:start}
  .cpuntos{display:flex}

  /* Las mismas tarjetas, en el listado de lineas de producto, no son un
     carrusel: van apiladas en una columna. Alli la foto es el producto
     recortado sobre blanco, no una imagen de ambiente, y en cuadrado deja
     mucho aire muerto a los lados: en movil pasa a 16:9. */
  .grid-4:not([data-carrusel]){grid-template-columns:minmax(0,1fr);gap:16px}
  .grid-4:not([data-carrusel]) .catcard .catimg{aspect-ratio:16/9}
  /* El rotulo de la tarjeta usa la misma medida que el antetitulo de
     seccion: 12 px y .18 de letra. Con la tarjeta a 287 px en el carrusel
     hay sitio de sobra, y asi las dos piezas cantan igual. */
  .catbar-t{letter-spacing:.18em;padding:10px 12px;line-height:1.3;align-items:center}
  /* El quadre de la fletxa es 1:1, igual que a escriptori. Abans es
     reservava alcada per a dues linies de rotol i la fletxa s'estirava per
     acompanyar-la: la barra quedava molt mes alta que la del disseny i la
     fletxa deixava de ser quadrada. Ara el rotol va en una linia; si algun
     arriba a partir-se, la barra creix i la fletxa es queda centrada i
     quadrada. */
  .catbar{min-height:48px}
  .catbar-arw{align-self:center;font-size:14px}
  .cattitle{padding:16px 14px}
  .catdesc{max-width:100%}
  /* La chapa cae dentro de la foto, debajo de la barra del rotulo —50 px
     con el rotulo en una linia— y con el mismo margen lateral que el texto
     de la tarjeta. Antes se montaba encima de la barra. */
  .catbadge{top:64px;left:14px;padding:5px 8px}

  /* Regla general de rejillas de tarjetas: dos columnas, nunca una. Vale para
     las vias de contacto, los beneficios, el alcance del servicio, el indice
     de sectores y los productos relacionados. Y ninguna palabra larga —un
     correo, una referencia— puede romper su caja. */
  /* minmax(0,1fr) i no 1fr: «1fr» es «minmax(auto,1fr)» i la columna no
     baixa mai del min-content del seu contingut. A 375 les dues columnes
     d'aquesta rejilla en demanaven 184 cadascuna sobre 335 disponibles i
     la pagina es desplacava 8 px en horitzontal. Amb minim zero mana la
     rejilla. */
  .benrow,.benrow--2,.benrow--3,.benrow--4,
  .recgrid,.secindex{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* Salvo el bloque de vias de contacto, que se reconoce porque mete su
     propio titular dentro de la rejilla. Lleva telefono, descripcion y un
     correo largo: a dos columnas se queda muy estrecho. Va por el titular y
     no por .benrow--4, que es la misma clase que usan los pasos del metodo
     de Sobre Quicial, y esos si van de dos en dos. */
  .benrow:has(> .asistencia-head){grid-template-columns:minmax(0,1fr);gap:12px}
  /* Els icones de sector: a 150 px d'alt omplien tota l'amplada util de la
     columna (135 px dels 167 que hi ha) i la graella 2x2 es menjava una
     pantalla sencera. A 104 px les quatre fitxes entren d'un cop d'ull i el
     rotol recupera pes dins la fitxa. */
  .grid-sectores .secitem{gap:12px;padding:16px 12px}
  .grid-sectores .secitem img{height:104px}
  /* Els titols i el text corrent parteixen paraula nomes quan de veritat no
     hi cap: mana el salt de linia. «anywhere» es queda per a les cadenes que
     no tenen on trencar —un correu, una referencia—, que son les que si
     desbordarien la caixa. */
  .bendesc,.bentitle,.recbar-t{overflow-wrap:break-word}

  /* Targeta de producte: a dues columnes la caixa fa 173 px i amb el coixi
     de 18 de l'artboard la foto es quedava en 137, amb mes marc que producte.
     A 5 px la foto mana, i en 4:3 —en comptes de 3:2— guanya alcada sense
     estirar-se, perque la imatge va continguda. */
  .recimg{aspect-ratio:4/3;padding:5px}
  .recimg img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
  .recbar{gap:12px;padding:12px}
  .recbar-cta{font-size:10px;letter-spacing:.1em;padding:6px 10px}
  .dato-v,.footlink{overflow-wrap:anywhere}

  .marcas-logos{justify-content:center;gap:32px}
  /* El pie, en una sola columna: a 2x2 las cuatro cajas quedaban de anchos
     muy distintos y el correo partia. */
  .foot-cols{grid-template-columns:minmax(0,1fr)}
  .foot-col,.foot-col--first,.foot-col--last{position:relative;padding:18px 0;border-left:0;border-top:0}
  /* El pie, mas compacto: el rotulo mas cerca de su lista y el parrafo a
     todo el ancho —los 280 px de medida son los de la columna de
     escritorio, aqui sobran—. */
  .foothead{margin-bottom:8px}
  .foot-desc{max-width:none}
  .foot-social{margin-top:4px}
  /* El filete que separa las filas va a sangre, no dentro del margen del
     pie. Se dibuja una sola vez por fila —en la celda de la izquierda— o
     saldrian dos lineas pisandose. */
  .foot-col::before{content:"";position:absolute;top:0;left:calc(-1 * var(--sec-x));width:var(--vw, 100vw);height:1px;background:rgba(255,255,255,.1)}
  .foot-col:first-child::before{display:none}
  .foot-bottom{justify-content:flex-start}
  /* Apilat, el credit va alineat a l'esquerra com la resta. */
  .foot-credit{margin-left:0}
  .krow{font-size:9vw}
  .cita-texto{font-size:var(--fs-h1)}
  .trustrow{grid-template-columns:repeat(2,auto)}

  /* ---------- Areas tactiles ----------
     Los enlaces sueltos —pie, migas, telefonos de la ficha de datos— median
     entre 17 y 30 px de alto. 44 es el minimo con el que un dedo acierta sin
     pelearse. Se gana con alto minimo, no con margen, para que el filete y la
     alineacion de cada lista sigan donde estaban.

     Los enlaces que van dentro de un parrafo se quedan como estan: darles
     alto propio romperia la linea de texto, y la propia norma los exceptua. */
  /* 36 en lugar de 44: a 44 las tres filas de cada columna del pie quedaban
     muy desperdigadas. Sigue por encima del minimo de 24 que pide la norma
     para un objetivo tactil, y es el unico sitio donde se baja de 44. */
  .footlink{min-height:36px;display:flex;align-items:center;padding:0}
  .foot-legal{gap:8px 24px}
  .foot-legal a,.foot-credit a{min-height:44px;display:inline-flex;align-items:center}
  .crumb{align-items:center}
  .crumb a,.crumb .cur{min-height:44px;display:inline-flex;align-items:center}
  .dato-lista a,.dato-fila a,.dato-v a,.legal-dato dd a{min-height:44px;display:inline-flex;align-items:center}
  .legal-indice a{min-height:44px;display:flex;align-items:center}
  /* Los botones se quedaban entre 40 y 42: los 13 px de coixi con un rotulo
     de 12 no llegan. Faltaban dos o cuatro pixeles, pero el minimo es el
     minimo. */
  .btn{min-height:44px}
  /* Arees tactils que es quedaven curtes. Els 44 px surten del minim
     d'Apple i de la revisio d'accessibilitat de PageSpeed, que marca
     «touch targets do not have sufficient size». .qbtnfill anava a 40 i
     les pestanyes de la fitxa a 42; les icones socials del peu tenien 20
     px d'ample, que es el del dibuix, sense cap coixi al voltant. */
  .qbtnfill{min-height:44px}
  .tabsnav button{min-height:44px}

  /* Les pestanyes de la fitxa, totes en una fila que llisca. Amb tres
     pestanyes partien en dues files i la segona quedava penjant, amb el
     filet inferior pel mig. A sang perque es vegi que hi ha mes a la
     dreta, i el filet passa del ::after —que a dins d'una caixa que
     llisca se n'aniria amb el contingut— a la vora de la propia caixa,
     que no es mou. */
  .tabsnav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--sec-x));padding:0 var(--sec-x);
    border-bottom:1px solid var(--hair);
    scrollbar-width:none;-ms-overflow-style:none}
  .tabsnav::-webkit-scrollbar{display:none}
  .tabsnav::after{display:none}
  .tabsnav button{flex:none;white-space:nowrap}

  /* Graella de ventatges de la fitxa. El titol anava a 21 px: el clamp
     de .benrow .bentitle es calcula amb el nombre de columnes de
     escriptori i al mobil sempre es queda al maxim, per sobre de tota
     l'escala. Amb dues columnes de 160 px, 16. Els coixins de 26/24 i el
     buit de 40 entre titol i descripcio son de la caixa d'escriptori,
     que fa el doble. */
  .benrow .bentitle{font-size:var(--fs-body)}
  .benrow .bencard{padding:14px 12px;gap:14px}
  .bennum{margin-bottom:8px}
  /* Entre la descripcio i la graella hi havia 74 px: 54 del coixi inferior
     del contenidor de seccio i 20 del marge de la graella. Es tanca el
     coixi del panell i la graella arrenca enganxada al text. */
  .pdesc-full > .secwrap{padding-bottom:24px}
  .benwrap{margin-top:0;padding-bottom:28px}

  /* «1fr» no baixa del min-content: amb un nom llarg i una referencia
     llarga a la mateixa fila, la taula de models s'enduia el coixi de
     seccio. Amb minim zero el nom es parteix i la fila es queda dins. */
  .pmrow{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .pmname{overflow-wrap:break-word}

  /* El «Ver mas» de la targeta es un reclam dins d'un enllac que ja ocupa
     tota la targeta: no li cal l'area de 44. */
  .recbar-cta{min-height:0;padding:5px 10px}

  /* El marc del video anava a un alt fix de 40vh: 338 px en una pantalla
     de 844, i el video, que es 16:9 de l'ample, en fa 219. La diferencia
     eren dues franges negres. Amb la ratio al contenidor, el marc i el
     video son la mateixa cosa. */
  .pvideo{height:auto;aspect-ratio:16/9}

  /* El mateix criteri que a .ctasection: el bloc ja porta el seu aire a
     dins, i sumar-li a sobre el ritme vertical de seccio deixava dues
     franges fosques molt altes. El vertical s'iguala al lateral. */
  .pcta-wrap{padding-top:var(--sec-x);padding-bottom:var(--sec-x)}
  /* I el bloc de dins, igual que .ctablock: mateix coixi i mateixos
     botons, que son la mateixa peca amb un altre nom. */
  .pcta-body{padding:var(--sec-x)}
  .pcta-acciones{flex-wrap:nowrap;gap:10px}
  .pcta-acciones .qbtnfill,
  .pcta-acciones .btn{flex:1 1 auto;min-width:0;padding:10px 12px;font-size:var(--fs-label);
    letter-spacing:.03em;white-space:normal;text-align:center;line-height:1.25}
  .socico{min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-left:-12px}
  .foot-social{margin-left:0}
  /* El selector de fitxer del parte d'incidencia es l'unic camp que es
     quedava per sota de 16: a iOS, tocar-lo fa zoom a la pagina. */
  .wpcf7-file,
  input[type="file"]{font-size:16px;min-height:44px}
  /* La casella de consentiment feia 13x13, la mida nativa. L'etiqueta del
     costat ja hi porta, pero la casella tambe s'ha de poder tocar. */
  .fld-consent{width:20px;height:20px;flex:none}
  /* El salto al contenido solo se ve con el teclado, pero es un control como
     cualquier otro. */
  .skiplink:focus{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Logos de marcas en bucle ----------
   En escritorio los cinco logos caben en una fila repartida. Por debajo de
   900 px se partian en tres filas descompensadas, asi que pasan a la misma
   cinta en bucle que ya usa el hero (.herologos): mismo componente, misma
   animacion, sin estrenar nada. */
@media (max-width: 900px) {
  .marcas-logos{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;margin:40px 0;animation:logoscroll 26s linear infinite}
  /* Dos por vista: cada logo ocupa media pantalla util. El alto fijo con
     object-fit:contain los iguala sin deformar ninguno; el alto que traen en
     linea desde Ajustes es el de escritorio y aqui no sirve. */
  /* Solo se fija la ranura, no el alto: el alto de cada logo sale de Ajustes
     y es el que el diseno ya habia equilibrado opticamente —IBEX es un
     rotulo ancho y macizo, y a la misma altura que los demas se comia la
     fila—. Con object-fit:contain cada uno se centra en su ranura sin
     deformarse y conserva su tamano relativo. */
  /* Todos al mismo factor sobre la medida que trae cada uno de Ajustes, que
     es la que el diseno ya habia equilibrado. Con una ranura fija y
     object-fit el ancho mandaba y se invertia el equilibrio: Kentmaster, que
     es un rotulo muy ancho, se quedaba diminuto al lado de IBEX. */
  /* Alcada optica i ample lliure. La caixa d'ample fix d'escriptori, al
     mobil, feia que en cada logotip manes un limit diferent —l'ample en
     els rotols llargs, l'alcada en els compactes— i els cinc sortien amb
     pesos molt diferents: Kentmaster diminut al costat d'un IBEX enorme.
     --logo-optic es la mateixa mesura que equilibra la tira de la pagina
     de marques. */
  .marcas-logos img{flex:none;height:calc(var(--logo-optic, 24px) * 1.3) !important;width:auto !important;object-fit:contain;margin:0 20px}
  .marcas-cinta{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}

@media (prefers-reduced-motion: reduce) {
  .marcas-logos{animation:none}
}

/* ---------- Listado de productos con filtros ----------
   Por debajo de 1280 px la columna pasa a panel a pantalla completa con el
   mismo marcado (diseno 1a, movil). Sobre los resultados queda una barra fija
   con «Filtros (n)» y el numero de productos, y debajo los filtros activos en
   una fila que se desliza, como las pestanas de la ficha. Sin JavaScript no
   hay panel: la columna va encima de los resultados, abierta, con «Aplicar». */
@media (max-width: 1279px) {
  .lst{display:block}
  html:not(.lst-js) .lst-col{position:static;max-height:none;overflow:visible;margin-bottom:32px}

  /* Poco aire entre la cabecera de la pagina y la barra; la barra ya separa. */
  .lst-sec > .secwrap{padding-top:24px}

  /* La barra se pega dentro de los resultados: su caja deja de envolverla. */
  .lst-cab{display:contents}
  .lst-barra{position:sticky;position:-webkit-sticky;top:76px;z-index:30;height:auto;align-items:center;justify-content:space-between;
    margin:0 calc(-1 * var(--sec-x));padding:8px var(--sec-x);background:var(--beige-08);border-bottom:0}
  /* El fondo va a sangre, para tapar lo que pasa por debajo al pegarse; el
     filete respeta los margenes laterales, como la rejilla. */
  .lst-barra::after{content:"";position:absolute;left:var(--sec-x);right:var(--sec-x);bottom:0;height:1px;background:var(--hair)}
  /* Aire entre la barra (o los chips) y la rejilla. Los margenes se funden:
     con chips quedan los 24 px de debajo de los chips. */
  .lst-grid{margin-top:24px}
  .lst-vacio{margin:24px 0}
  /* button.btn del sistema quita el filete: el outline lo recupera. */
  .lst-js .lst-abrir{display:inline-flex;min-height:44px;border:1px solid #523F34}
  .lst-n{text-align:right}

  .lst-activos--barra{display:flex;flex-wrap:nowrap;align-items:center;gap:12px 20px;margin:12px calc(-1 * var(--sec-x)) 24px;
    padding:0 var(--sec-x);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .lst-activos--barra::-webkit-scrollbar{display:none}
  .lst-activos--barra .lst-chips{flex-wrap:nowrap}
  .lst-activos--barra .lst-chips li,
  .lst-limpiar{flex:none}
  .lst-chip{padding:8px 10px;white-space:nowrap}
  .lst-limpiar{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}

  /* Panel: por encima de la cabecera, con su cabecera y su pie fijos. */
  .lst-js .lst-col{position:fixed;inset:0;z-index:60;max-height:none;display:none;background:#FAF8F7;overflow:hidden}
  .lst-js .lst-col.is-open{display:flex}
  .lst-js .lst-panel-cab{flex:none;height:auto;align-items:center;margin:0 var(--sec-x);padding:22px 0 16px}
  .lst-js .lst-limpiar-n{display:none}
  .lst-js .lst-cerrar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
    font:inherit;font-size:14px;font-weight:500;color:#211D1A}
  .lst-cerrar svg{width:18px;height:18px;display:block}
  .lst-js .lst-form{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--sec-x) 24px}

  /* En el panel los grupos no se pliegan: el titulo es solo titulo. */
  .lst-js .lst-grupo > .lst-cuerpo{display:block}
  .lst-gbtn{padding:20px 0 8px;pointer-events:none;cursor:default}
  .lst-gn{display:none}
  .lst-grupo + .lst-grupo{margin-top:16px}
  .lst-grupo + .lst-grupo .lst-gbtn{padding-top:28px}

  /* Filas a tamano tactil. */
  .lst-box{width:20px;height:20px}
  .lst-box svg{width:14px;height:14px}
  .lst-input:indeterminate + .lst-box::after{width:9px}
  .lst-catfila{gap:0}
  .lst-catfila .lst-op{min-height:52px;padding:0}
  .lst-catfila .lst-op-n{font-size:16px}
  .lst-toggle{width:44px;height:44px}
  .lst-toggle .lst-caret{margin-right:-4.5px}
  .lst-toggle .lst-caret svg{width:18px;height:18px}
  .lst-lineas{margin:0 0 10px 9px}
  .lst-lineas .lst-op{min-height:44px;padding:0}
  .lst-lineas .lst-op-n{font-size:15px}
  .lst-lineas .lst-op-c{font-size:13px}
  .lst-lineas .lst-box{width:17px;height:17px}
  .lst-lineas .lst-box svg{width:12px;height:12px}
  .lst-cuerpo > .lst-ops > li > .lst-op{min-height:52px;padding:0}
  .lst-cuerpo > .lst-ops .lst-op-n{font-size:16px}

  /* Pie: «Limpiar» y «Ver N productos», en caja normal. */
  .lst-js .lst-panel-pie{display:grid;grid-template-columns:auto 1fr;gap:10px;flex:none;padding:14px var(--sec-x) 22px;
    border-top:1px solid var(--hair);background:#FAF8F7}
  .lst-panel-pie .btn{min-height:48px;font-size:15px;letter-spacing:0;text-transform:none;border-radius:0}
  .lst-panel-pie .btn-outline{padding:0 18px;border:1px solid #523F34;font-weight:500;color:#211D1A}
  .lst-panel-pie .btn-primary{font-weight:600}
  .lst-bloqueo,.lst-bloqueo body{overflow:hidden}
}

@media (max-width: 1100px) {
  .lst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}