/* =====================================================================
   estilos/pantalla-completa.css                              03/10/2026
   LA WEB A PANTALLA COMPLETA, con el aire de ECAMISETAS 2026 y sin quitar
   nada de la 2003 (el usuario, 03/10). El marco, solo en pantallas de mas
   de 1.120 px (por debajo, tableta y movil, sigue como estaba); las fotos de
   las tarjetas, en todas.
   VUELTA ATRAS: quitar su <link> de metas.asp (las copias de antes, en
   modificados\NO SUBIR - VUELTA ATRAS\pantalla-completa-20261003).
   ===================================================================== */
@media (min-width: 1121px) {
    :root {
        --pc-max: 1760px;
        --pc-lado: max(24px, calc((100vw - var(--pc-max)) / 2));
    }
    body { background: #eef2f6 !important; }

    /* ---- El marco: de 1.100 px a casi toda la pantalla ---- */
    .tablacontenido {
        width: 100% !important;
        max-width: var(--pc-max) !important;
        margin: 0 auto !important;
    }
    .menuizquierda { width: 232px !important; padding: 0 10px 0 16px !important; box-sizing: border-box !important; }
    .contenidoprincipal { width: calc(100% - 232px) !important; padding-left: 18px !important; padding-right: 32px !important; }

    /* ---- La cabecera, de lado a lado (el contenido, alineado con la pagina) ---- */
    #header-final { max-width: none !important; width: 100% !important; }
    #header-final .top-strip,
    #header-final .mid-zone,
    #header-final .nav-clean { padding-left: var(--pc-lado) !important; padding-right: var(--pc-lado) !important; }
    #header-final .search-container { max-width: 680px !important; }

    /* ---- El pie ---- */
    .footer-wrapper,
    .footer-trust,
    .footer-bottom-zone { max-width: var(--pc-max) !important; }

    /* ---- Las rejillas de articulos: 06/10/2026 (k501), columnas que reparten justas las 24 de cada pagina (el
       usuario: "las filas han de ser completas a no ser que sea final de catalogo"; antes, tantas como
       cupieran, y con 7 la ultima fila salia coja): 4; desde 1.300 px, 6; desde 1.800, 8 (abajo) ---- */
    .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

    /* ---- Portada: el carrusel mas grande (sus fotos miden 1.688 px) y los
       textos centrados bajo las rejillas ---- */
    body .contenidoprincipal .slider-container { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; }
    body .contenidoprincipal .seo-block { margin-left: auto !important; margin-right: auto !important; }

    /* ---- Ficha del articulo: la foto mas grande ---- */
    .det-col-left { flex: 0 0 340px !important; width: 340px !important; }
    .det-product-image { width: 340px !important; min-width: 340px !important; }
    .det-product-image img { width: 340px !important; }

    /* ---- Las subfamilias de una familia: grandes (4 por fila; 6 en pantallas
       grandes) y, si la ultima fila no se llena, centrada ---- */
    .sf-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 22px !important; }
    .sf-grid > * { flex: 0 0 auto !important; width: calc((100% - 66px) / 4) !important; }

    /* ---- El catalogo de la izquierda, como panel desde el menu de arriba
       ("Todas las categorias", k237): la pagina gana todo el ancho. En el movil
       (hasta 1.120 px), como estaba ---- */
    .menuizquierda { display: none !important; }
    .contenidoprincipal { width: 100% !important; float: none !important; padding-left: 28px !important; padding-right: 28px !important; }
    #header-final .nav-li-mega { display: flex !important; align-items: center !important; margin-right: 10px !important; }
    #header-final .nav-mega-btn { display: inline-flex !important; align-items: center !important; gap: 9px !important; background: #002147 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important; font: 700 12px Inter, 'Segoe UI', Arial, sans-serif !important; letter-spacing: .5px !important; text-transform: uppercase !important; cursor: pointer !important; white-space: nowrap !important; box-shadow: 0 4px 12px rgba(0,33,71,.18) !important; }
    #header-final .nav-mega-btn:hover, body.mega-on #header-final .nav-mega-btn { background: #005a9c !important; }
    .nav-mega-ico { display: inline-flex !important; flex-direction: column !important; gap: 3px !important; }
    .nav-mega-ico span { display: block !important; width: 14px !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; }
    body.mega-on .menuizquierda { display: block !important; position: fixed !important; left: 0 !important; right: 0 !important; width: auto !important; max-height: 74vh !important; overflow-y: auto !important; z-index: 1200 !important; background: #fff !important; box-shadow: 0 28px 56px rgba(15,23,42,.24) !important; border-top: 1px solid #e2e8f0 !important; padding: 22px var(--pc-lado) 26px !important; margin: 0 !important; float: none !important; }
    body.mega-on .menuizquierda .catalog-toggle { display: none !important; }
    body.mega-on .menuizquierda .sidebar-wrapper { width: auto !important; padding: 0 !important; }
    body.mega-on .menuizquierda .sidebar-content { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px 240px !important; column-gap: 40px !important; row-gap: 8px !important; align-items: start !important; }
    /* (k470) por su tipo, no por su orden: al quitar "usuarios en linea" (k465) se descolocaba todo */
    body.mega-on .menuizquierda .sidebar-content > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    body.mega-on .menuizquierda .sidebar-content > ul:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 3; columns: 5 180px !important; column-gap: 28px !important; }
    body.mega-on .menuizquierda .sidebar-content > div:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    body.mega-on .menuizquierda .sidebar-content > ul:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    body.mega-on .menuizquierda .sidebar-content > div:nth-of-type(3) { grid-column: 3; grid-row: 1; }
    body.mega-on .menuizquierda .sidebar-content > ul:nth-of-type(3) { grid-column: 3; grid-row: 2; }
    body.mega-on .menuizquierda .sidebar-content > .opinion-highlight { grid-column: 2 / span 2; grid-row: 3; justify-self: start; }
    body.mega-on .menuizquierda .sidebar-content > .side-header { margin-top: 25px !important; }   /* (k470b) los tres titulos a la misma altura, como antes */
    body.mega-on .menuizquierda .cat-vertical li { break-inside: avoid !important; }
}
@media (min-width: 1121px) {
    /* la foto acompanya al bajar por la ficha (k236) */
    .det-col-left { position: sticky !important; top: 12px !important; align-self: flex-start !important; }
    /* marca y familia en una sola linea */
    .det-brand-line, .det-subcat-line { display: inline-block !important; margin-right: 14px !important; }
}
@media (min-width: 1500px) {
    .sf-grid > * { width: calc((100% - 110px) / 6) !important; }
    .det-col-left { flex: 0 0 420px !important; width: 420px !important; }
    .det-product-image { width: 420px !important; min-width: 420px !important; }
    .det-product-image img { width: 420px !important; }
}
/* (detras de la de 1.500: si no, le ganaba) */
@media (min-width: 1700px) {
    .det-col-left { flex: 0 0 520px !important; width: 520px !important; }
    .det-product-image { width: 520px !important; min-width: 520px !important; }
    .det-product-image img { width: 520px !important; }
}
/* ---- Las fotos de las tarjetas de articulos (TODAS las pantallas) ----
   Las de modelo llegan muy altas (el recorte quita el blanco: 585 x 1.200) y
   con "contain" quedaban estrechas, con mucho blanco a los lados (lo dijo el
   usuario, 03/10: "que no aparezcan demasiado cortadas ... que no queden
   demasiados espacios en blanco"). Como en ECAMISETAS 2026: el marco 4:5
   lleno; las de modelo (img-vertical, de img-adapt.asp) cubriendo desde arriba
   (la prenda entera; se recortan las piernas) y las de objeto (cuadradas o
   apaisadas) enteras, con un poco de aire. ".result-img" iba detras en la
   hoja y le ganaba a ".img-vertical": por eso las dos clases. */
.result-img-box { height: auto !important; aspect-ratio: 4 / 5; }
.result-img-box .result-img { width: 100% !important; height: 100% !important; max-height: none !important; }
.result-img.img-vertical { object-fit: cover !important; object-position: center 8% !important; }
.result-img.img-horizontal { object-fit: contain !important; padding: 6% !important; box-sizing: border-box !important; }
/* ---- La ficha del articulo (k236, TODAS las pantallas): los colores arriba,
   debajo del titulo, compactos; los botones de presupuesto de su tamano (antes
   uno de 520 px cada uno) y menos huecos (lo pidio el usuario, 03/10) ---- */
.det-col-right .ec26-colors-section { padding: 12px 14px 10px !important; margin: 2px 0 14px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; }
.det-col-right .ec26-colors-section .ec26-section-title { font-size: 13px !important; margin: 0 0 10px !important; padding-bottom: 6px !important; }
.det-col-right .ec26-color-grid { gap: 6px !important; }
.det-col-right .ec26-color-swatch { width: 64px !important; }
.ec26-pres-btns { justify-content: flex-start !important; gap: 10px !important; margin: 10px 0 10px !important; padding-left: 10px !important; }
.ec26-pres-btns button { flex: 0 1 250px !important; padding: 10px 16px !important; font-size: 12.5px !important; border-radius: 10px !important; letter-spacing: .3px !important; }
@media (max-width: 768px) {
    .ec26-pres-btns button { flex: 1 1 100% !important; }
}
/* las tallas de nino, en la misma fila que las de adulto si caben */
@media (min-width: 1121px) {
    .det-tallas-todas > div.det-tallas-nino { flex: 0 0 auto !important; }
}
/* las MUY altas (boligrafos, botellas, paraguas), enteras (k234) */
.result-img.img-vertical.img-muy-alta { object-fit: contain !important; padding: 5% 0 !important; box-sizing: border-box !important; }

@media (min-width: 1800px) {
    /* presupuesto.asp (e94): a partir de 1.800 px el resumen iba FUERA del
       marco, en el margen de la derecha. A pantalla completa ya no hay margen:
       va en su columna, como entre 1.100 y 1.800 px, y fijo al bajar */
    .pv-l2 { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; gap: 22px !important; align-items: start !important; position: static !important; }
    .pv-l2-side { position: sticky !important; top: 12px !important; left: auto !important; bottom: auto !important; width: auto !important; }
    .pv-l2-side > .pv-res { position: static !important; }
}

/* =====================================================================
   PORTADA (contenidohome.asp + home2026.css; k238, 03/10/2026). El usuario:
   "Cuida tambien mucho la home ... todo ha de tener un diseno moderno,
   estilizado y profesional". Nada se quita: el mismo HTML, otro aspecto.
   ===================================================================== */
.hero-title-box { margin: 4px 0 18px !important; }
.super-title { font-family: Inter, 'Segoe UI', system-ui, Arial, sans-serif !important; color: #002147 !important; letter-spacing: -.4px !important; }
.super-subtitle { color: #475569 !important; }
.contenidoprincipal .slider-container { border-radius: 16px !important; box-shadow: 0 18px 40px rgba(15,23,42,.16) !important; }

/* los cuatro "por que nosotros": tarjetas con su icono en un circulo */
.benefits-bar { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 14px !important; margin: 22px 0 6px !important; }
.benefit-item { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 12px 16px !important; justify-content: flex-start !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; }
.benefit-item + .benefit-item { border-left: 1px solid #e2e8f0 !important; padding-left: 16px !important; }
.benefit-icon { width: 42px !important; height: 42px !important; padding: 9px !important; box-sizing: border-box !important; border-radius: 50% !important; background: #eff6ff !important; stroke: #005a9c !important; }
.benefit-icon [fill="#1e293b"] { fill: #005a9c !important; }
.benefit-text { font-size: 13.5px !important; font-weight: 700 !important; color: #0f172a !important; white-space: normal !important; }

/* los titulos de cada bloque: sin la banda gris; una raya de color */
.contenidoprincipal .section-header { background: none !important; border-left: 0 !important; border-radius: 0 !important; padding: 0 0 0 16px !important; margin: 44px 0 18px !important; position: relative !important; }
.contenidoprincipal .section-header::before { content: '' !important; position: absolute !important; left: 0 !important; top: 1px !important; bottom: 1px !important; width: 5px !important; border-radius: 4px !important; background: linear-gradient(180deg, #0b74c4, #002147) !important; }
.contenidoprincipal .section-header h2,
.contenidoprincipal .section-header h3 { font-family: Inter, 'Segoe UI', system-ui, Arial, sans-serif !important; font-size: 18px !important; letter-spacing: .2px !important; color: #0f172a !important; line-height: 1.35 !important; }

/* las tarjetas (categorias y articulos), como en ECAMISETAS 2026 */
.contenidoprincipal .pro-grid { gap: 18px !important; margin-bottom: 8px !important; }
.contenidoprincipal .pro-card-link { height: 100% !important; }
.contenidoprincipal .pro-card { height: 100% !important; border: 1px solid #e6ebf1 !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
.contenidoprincipal .pro-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(15,23,42,.12) !important; border-color: #cddcec !important; }
.contenidoprincipal .pro-img-box { height: auto !important; aspect-ratio: 4 / 5; background: #fff !important; }
.contenidoprincipal .pro-img.img-vertical { object-fit: cover !important; object-position: center 8% !important; }
.contenidoprincipal .pro-img.img-horizontal { object-fit: contain !important; padding: 6% !important; box-sizing: border-box !important; }
.contenidoprincipal .pro-img.img-vertical.img-muy-alta { object-fit: contain !important; padding: 5% 0 !important; box-sizing: border-box !important; }
.contenidoprincipal .pro-info { padding: 12px 12px 14px !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.contenidoprincipal .pro-title { font-size: 13.5px !important; line-height: 1.35 !important; min-height: 2.7em !important; margin-bottom: 8px !important; }
.contenidoprincipal .pro-price { margin-top: auto !important; font-size: 17px !important; }
/* las de categoria: la foto apaisada en pantallas grandes y el nombre debajo,
   mas grande */
.contenidoprincipal .pro-img-cover { border-radius: 0 !important; transition: transform .5s ease !important; }
.contenidoprincipal .pro-card:hover .pro-img-cover { transform: scale(1.05) !important; }
.contenidoprincipal .pro-grid:has(.pro-img-cover) .pro-info { justify-content: center !important; padding: 14px 12px 16px !important; }
.contenidoprincipal .pro-grid:has(.pro-img-cover) .pro-title { min-height: 0 !important; margin-bottom: 2px !important; font-size: 15px !important; }
.contenidoprincipal .pro-grid:has(.pro-img-cover) .pro-details { margin: 2px 0 0 !important; }
@media (min-width: 1121px) {
    .contenidoprincipal .pro-grid:has(.pro-img-cover) .pro-img-box { aspect-ratio: 16 / 10; }
    .contenidoprincipal .pro-grid:has(.pro-img) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* en pantallas grandes, las rejillas de 8 articulos en una sola fila; las de
   4, tarjetas apaisadas (la foto a la izquierda): ni enormes ni huecos */
@media (min-width: 1600px) {
    .contenidoprincipal .pro-grid:has(.pro-img):has(> :nth-child(5)) { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 16px !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-card { flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-img-box { flex: 0 0 44% !important; width: 44% !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-info { text-align: left !important; justify-content: center !important; padding: 14px 16px !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-colors { justify-content: flex-start !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-title { min-height: 0 !important; font-size: 14.5px !important; }
    .contenidoprincipal .pro-grid:has(.pro-img):not(:has(> :nth-child(5))) .pro-price { margin-top: 6px !important; }
}
.logos-grid { background: #fff !important; border: 1px solid #e6ebf1 !important; border-radius: 14px !important; }

/* =====================================================================
   FICHA: "Productos relacionados" y "Ofertas" (detalles.asp, relacionados.asp,
   modulo-ofertas.asp; k238). Las mismas tarjetas que la portada; 8 en una
   fila en pantallas grandes, 4 por fila en las medianas.
   ===================================================================== */
.ec26-tabs-bar { gap: 26px !important; border-bottom: 2px solid #e2e8f0 !important; }
.ec26-tab { background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; margin: 0 0 -2px !important; padding: 10px 2px !important; font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: .3px !important; color: #64748b !important; text-transform: uppercase !important; }
.ec26-tab:hover { background: none !important; color: #002147 !important; }
.ec26-tab.active { background: none !important; color: #002147 !important; border-bottom-color: #0b74c4 !important; }
.ec26-tab-panel { padding-top: 18px !important; }
.ec26-card-grid { gap: 16px !important; }
@media (min-width: 1121px) { .ec26-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1600px) { .ec26-card-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } }
.ec26-card { border: 1px solid #e6ebf1 !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; }
.ec26-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(15,23,42,.12) !important; border-color: #cddcec !important; }
.ec26-card-img { height: auto !important; aspect-ratio: 4 / 5; border-radius: 0 !important; }
.ec26-card-img img.img-vertical { object-fit: cover !important; object-position: center 8% !important; }
.ec26-card-img img.img-horizontal { object-fit: contain !important; padding: 6% !important; box-sizing: border-box !important; }
.ec26-card-img img.img-vertical.img-muy-alta { object-fit: contain !important; padding: 5% 0 !important; box-sizing: border-box !important; }
.ec26-card-info { padding: 10px 12px 14px !important; }
.ec26-card-name { font-size: 13.5px !important; min-height: 2.6em !important; }
.ec26-card-price { font-size: 17px !important; }

/* portada en el movil (k238): los cuatro "por que nosotros" de dos en dos;
   titulos y nombres de categoria un poco mas pequenos (no se cortan) */
@media (max-width: 768px) {
    .benefits-bar { gap: 10px !important; margin: 18px 0 4px !important; }
    .benefit-item { flex: 1 1 calc(50% - 5px) !important; padding: 10px !important; gap: 8px !important; }
    .benefit-item + .benefit-item { padding-left: 10px !important; }
    .benefit-icon { width: 34px !important; height: 34px !important; padding: 7px !important; }
    .benefit-text { font-size: 12px !important; line-height: 1.25 !important; }
    .contenidoprincipal .section-header { margin: 30px 0 14px !important; padding-left: 13px !important; }
    .contenidoprincipal .section-header h2,
    .contenidoprincipal .section-header h3 { font-size: 15px !important; }
    .contenidoprincipal .pro-grid:has(.pro-img-cover) .pro-title { font-size: 13px !important; }
    .contenidoprincipal .pro-grid { gap: 10px !important; }
}

/* k240: las casi cuadradas CON FONDO (gris, de estudio; img-adapt.asp les pone
   "img-foto") llenan el marco; las de fondo blanco siguen enteras */
.result-img.img-horizontal.img-foto,
.contenidoprincipal .pro-img.img-horizontal.img-foto,
.ec26-card-img img.img-horizontal.img-foto { object-fit: cover !important; padding: 0 !important; object-position: center 20% !important; }

/* k257: los textos SEO del final del catalogo y de la familia, en una columna
   comoda de leer (antes, lineas de 1.385 px con letra de 13 px) */
.cat-seo-section, .sf-seo { max-width: 1060px !important; margin-left: auto !important; margin-right: auto !important; }
.cat-seo-section, .cat-seo-section p, .sf-seo, .sf-seo p { font-size: 14.5px !important; line-height: 1.75 !important; color: #334155 !important; }
.cat-seo-section h2, .sf-seo h2 { font-size: 20px !important; line-height: 1.3 !important; color: #0f172a !important; margin: 30px 0 10px !important; padding-left: 0 !important; }
.cat-seo-section h3, .sf-seo h3 { font-size: 16px !important; color: #0f172a !important; margin: 20px 0 6px !important; }
.cat-seo-section strong, .sf-seo strong { color: #0f172a !important; }

/* k258: la ficha en el MOVIL (hasta 768 px). De las 21.826 fotos grandes, 6.311
   miden el doble de alto que de ancho (la 6502: 600 x 1.200): a 290 px de ancho
   ocupaban 580 px de alto y el nombre, los colores y los botones bajaban mucho.
   La foto, como mucho media pantalla de alto, ENTERA y centrada (al pulsarla se
   sigue viendo en grande); los colores, cinco por fila */
@media (max-width: 768px) {
    .det-product-image { display: flex !important; justify-content: center !important; align-items: center !important; }
    .det-product-image img { width: auto !important; max-width: 100% !important; max-height: max(52vh, 260px) !important; object-fit: contain !important; }
    .det-col-right .ec26-color-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; }
    .det-col-right .ec26-color-swatch { width: auto !important; min-width: 0 !important; }
    .det-col-right .ec26-color-swatch .ec26-color-img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 0 4px !important; }
}
/* k258: "Ficha tecnica" es un enlace y le ganaba ".contenidoprincipal a" (letra
   de 13 px y negrita): como "Ver video" y "Ver 360", sus vecinos */
.contenidoprincipal a.det-btn-video { font-size: 11px !important; font-weight: 600 !important; }

/* ---- 04/10/2026 (k366): la ficha, como la pidio el usuario: "No es necesario
   que pongas la foto del modelo tan grande, si quieres puedes agrandar un poco
   mas las imagenes de los colores y distribuye mejor las fichas", y "los
   colores del articulo despues de Precios unitarios en EUR sin IVA (21%)".
   La foto, entera y con un alto maximo, en una columna mas estrecha; los
   colores, detras de los precios (se cambia el orden de la columna; el HTML
   es el mismo y no salta nada al cargar), con las muestras mas grandes. ---- */
.det-col-right > article { display: flex !important; flex-direction: column !important; }
.det-col-right > article > .ec26-colors-section { order: 2 !important; margin: 16px 0 6px !important; }
@media (min-width: 1121px) {
    .det-col-left { flex: 0 0 300px !important; width: 300px !important; }
    .det-product-image { width: 300px !important; min-width: 300px !important; }
    .det-product-image img { width: auto !important; max-width: 100% !important; max-height: 540px !important; margin: 0 auto !important; object-fit: contain !important; }
}
@media (min-width: 1500px) {
    .det-col-left { flex: 0 0 340px !important; width: 340px !important; }
    .det-product-image { width: 340px !important; min-width: 340px !important; }
    .det-product-image img { max-height: 580px !important; }
}
@media (min-width: 1700px) {
    .det-col-left { flex: 0 0 380px !important; width: 380px !important; }
    .det-product-image { width: 380px !important; min-width: 380px !important; }
    .det-product-image img { max-height: 620px !important; }
}
@media (min-width: 769px) {
    .det-col-right .ec26-color-grid { gap: 8px !important; }
    .det-col-right .ec26-color-swatch { width: 84px !important; }
    .det-col-right .ec26-color-swatch .ec26-color-img { width: 76px !important; height: 76px !important; }
}

/* ---- 04/10/2026 (k367): la portada, como la pidio el usuario ("banners de
   izquierda a derecha de la pagina que se adapten", "texto seo de izquierda a
   derecha de la pagina", "las fotos que no salgan cortadas"). Solo la portada
   (index.asp: home26). El carrusel y los textos SEO, de lado a lado; las fotos
   de las tarjetas, enteras (el hueco, del color de su fondo: contenidohome.asp);
   las de categoria en caja cuadrada. ---- */
body .contenidoprincipal.home26 .slider-container { max-width: none !important; width: 100% !important; }
body .contenidoprincipal.home26 .seo-block { max-width: none !important; }
body .contenidoprincipal.home26 .pro-grid .pro-img-box img { object-fit: contain !important; object-position: center !important; padding: 0 !important; box-sizing: border-box !important; }
body .contenidoprincipal.home26 .pro-grid .pro-img-box img.img-horizontal:not(.img-foto) { padding: 5% !important; }
body .contenidoprincipal.home26 .pro-grid:has(.pro-img-cover) .pro-img-box { aspect-ratio: 1 / 1 !important; }
/* "usuarios en linea" en la franja de arriba de la cabecera */
#header-final .strip-online { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-left: 16px !important; padding-left: 16px !important; border-left: 1px solid rgba(255,255,255,.22) !important; color: #e5e7eb !important; font-weight: 600 !important; white-space: nowrap !important; }
#header-final .strip-online-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.25) !important; flex-shrink: 0 !important; }
@media (max-width: 1120px) { #header-final .strip-online { margin-left: 10px !important; padding-left: 10px !important; } }
/* 04/10/2026 (k368): el numero, en blanco (heredaba el gris del menu) */
#header-final .strip-online .online-count { color: #ffffff !important; font-weight: 800 !important; }
/* 04/10/2026 (k378): las muestras de la ficha en el movil y la tableta, las que
   quepan con un minimo de 54 px: 5 por fila en el movil, como antes; a 768 px iban de 5 en 5 y median 124 px */
@media (max-width: 768px) {
    .det-col-right .ec26-color-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important; }
}
/* 04/10/2026 (k411): los dos banners de la portada (las fotos con gente), ENTEROS.
   Lo pidio el usuario: "has cortado en el alto los dos banners donde se veia
   gente, alarga el alto". Tenian un tope de 300 px (home2026.css) y, de lado a
   lado, se veia solo la parte de arriba de la foto: ahora, con su alto natural.
   (Los grupos del catalogo, fuera: "Todas las categorias" vuelve a ser como antes.) */
body .contenidoprincipal.home26 .banner-wrap { max-height: none !important; }
/* 04/10/2026 (k412): la cabecera en la tableta (769-1120 px). El telefono se partia
   ("968 421 / 618") y "HORARIOS Y WHATSAPP" tambien: el telefono, en dos lineas
   (ATENCION CLIENTE / numero) y sin "(5 lineas)". Y el menu de arriba en una
   sola linea (dejaba "SECTORES" solo debajo): de 769 a 919 px, letra de 12 px. */
@media (min-width: 769px) and (max-width: 1120px) {
    #header-final .phone-inline { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; line-height: 1.15 !important; }
    #header-final .phone-inline .ph-label, #header-final .phone-inline .ph-num { white-space: nowrap !important; }
    #header-final .phone-inline .ph-sub { display: none !important; }
    #header-final .wa-trigger-clean { white-space: nowrap !important; }
}
@media (min-width: 769px) and (max-width: 919px) {
    #header-final .nav-ul > li > .nav-a { font-size: 12px !important; padding-left: 6px !important; padding-right: 6px !important; }
}
/* 04/10/2026 (k412): los textos SEO de la portada. En el movil iban justificados
   (huecos enormes entre palabras, tambien en sus titulos): a la izquierda. La letra,
   de 13 a 14 px en el ordenador (de lado a lado se leia mal) y 14,5 en el movil. */
body .contenidoprincipal.home26 .seo-block { font-size: 14px !important; line-height: 1.7 !important; }
@media (max-width: 768px) {
    body .contenidoprincipal.home26 .seo-block, body .contenidoprincipal.home26 .seo-block * { text-align: left !important; }
    body .contenidoprincipal.home26 .seo-block { font-size: 14.5px !important; line-height: 1.65 !important; }
}
/* 04/10/2026 (k413): la ficha, como la pidio el usuario por la noche. "Que la foto
   de portada o modelo se adapte completamente al marco": el marco se ajusta a la
   foto (era fijo y una foto alta, como la de la 6502, dejaba franjas blancas a los
   lados), con el alto maximo de siempre. "Reduce un poco de tamano las fotos de los
   colores": de 76 a 64 px (en el movil, cinco por fila, como antes). */
@media (min-width: 1121px) {
    .det-product-image { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 768px) {
    .det-product-image { display: block !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .det-product-image img { margin: 0 auto !important; }
}
@media (min-width: 769px) {
    .det-col-right .ec26-color-swatch { width: 72px !important; }
    .det-col-right .ec26-color-swatch .ec26-color-img { width: 64px !important; height: 64px !important; }
}
/* 04/10/2026 (k413): el boton de subir, ENCIMA del icono de WhatsApp (con la web a lo
   ancho se ponia en el borde derecho del contenido, debajo del icono y de "Te
   ayudamos?"). El icono mide 60 px a 24 px del borde: el boton, centrado sobre el. */
@media (min-width: 769px) {
    #scrollTopBtn { left: auto !important; right: 34px !important; bottom: 98px !important; }
}
/* 04/10/2026 (k414): la portada a 6 columnas en el ordenador (lo pidio el usuario:
   "si hay 4 columnas en algunas secciones dejalas en 5 o 6 que nos interesen"). Las
   secciones traen 4 u 8 elementos (los pone el panel): el hueco de la ultima fila
   lo llena una tarjeta de "Pedir presupuesto" (contenidohome.asp, HomeCta), del
   ancho que falte. En la tableta y el movil, como antes y sin esa tarjeta. */
.contenidoprincipal.home26 .h26-cta { display: none !important; }
@media (min-width: 1121px) {
    body .tablacontenido .contenidoprincipal.home26 .pro-grid:has(.pro-card) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; }
    body .tablacontenido .contenidoprincipal.home26 .pro-grid .pro-card { flex-direction: column !important; }
    body .tablacontenido .contenidoprincipal.home26 .pro-grid .pro-img-box { flex: 0 0 auto !important; width: auto !important; }
    body .tablacontenido .contenidoprincipal.home26 .pro-grid .pro-info { text-align: center !important; }
    body .tablacontenido .contenidoprincipal.home26 .pro-grid .pro-colors { justify-content: center !important; }
    .contenidoprincipal.home26 .h26-cta { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 8px !important; padding: 24px 26px !important; border-radius: 14px !important; background: linear-gradient(135deg, #002147 0%, #0b5ea8 100%) !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; transition: transform .2s ease, box-shadow .2s ease !important; min-height: 170px !important; box-sizing: border-box !important; }
    .contenidoprincipal.home26 .h26-cta:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(15,23,42,.18) !important; }
    .contenidoprincipal.home26 .h26-s1 { grid-column: span 1 !important; padding: 18px 16px !important; }
    .contenidoprincipal.home26 .h26-s2 { grid-column: span 2 !important; }
    .contenidoprincipal.home26 .h26-s3 { grid-column: span 3 !important; }
    .contenidoprincipal.home26 .h26-s4 { grid-column: span 4 !important; }
    .contenidoprincipal.home26 .h26-s5 { grid-column: span 5 !important; }
    .contenidoprincipal.home26 .h26-cta-tit { font: 800 21px/1.2 Inter, 'Segoe UI', Arial, sans-serif !important; color: #fff !important; letter-spacing: .1px !important; }
    .contenidoprincipal.home26 .h26-s1 .h26-cta-tit { font-size: 16px !important; }
    .contenidoprincipal.home26 .h26-cta-txt { font-size: 14px !important; line-height: 1.5 !important; color: rgba(255,255,255,.88) !important; max-width: 520px !important; }
    .contenidoprincipal.home26 .h26-cta-btn { margin-top: 6px !important; display: inline-flex !important; align-items: center !important; background: #f59e0b !important; color: #111827 !important; font-weight: 800 !important; font-size: 13.5px !important; padding: 10px 16px !important; border-radius: 10px !important; box-shadow: 0 6px 14px rgba(0,0,0,.18) !important; }
    .contenidoprincipal.home26 .h26-cta:hover .h26-cta-btn { background: #fbbf24 !important; }
}
/* 04/10/2026 (k416): las paginas, al ancho de la pantalla en el ordenador (lo pidio el
   usuario: "las paginas que contiene [IMPRESION] no se adaptan los contenidos a la
   pagina aparecen muchos espacios en blanco", "textos adaptados al ancho de la pagina,
   imagenes que no aparezcan cortadas"). Las tarifas y Estampacion iban en 900 px; las
   de condiciones, privacidad, aviso legal, cookies y como comprar, en 760; los textos
   SEO de familias y subfamilias, en 1.060 (k257): todo el ancho y letra de 14 px. La
   foto de cabecera de las tarifas (de lado a lado con 220 px de alto: una franja),
   entera a la derecha y el texto a su lado; los recuadros con tablas, debajo de ella. */
@media (min-width: 1121px) {
    .tb-page, .ep-page, .pv-page, .vt-page, .lg-page, .ck-page { max-width: none !important; }
    .cat-seo-section, .sf-seo { max-width: none !important; }
    .tb-page p, .tb-page .tb-intro, .ep-page p, .ep-page .ep-intro,
    .pv-page p, .pv-page li, .vt-page p, .vt-page li, .lg-page p, .lg-page li, .ck-page p, .ck-page li { font-size: 14px !important; line-height: 1.75 !important; }
    .tb-page > .tb-banner-img { float: right !important; width: 36% !important; max-width: 600px !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; margin: 0 0 18px 28px !important; }
    .tb-page > .tb-box-precios, .tb-page > .tb-box-recargos, .tb-page > table, .tb-page > div:has(> table), .tb-page > .tb-gallery, .tb-page > .ec-faq { clear: both !important; }
    .tb-page::after { content: "" !important; display: block !important; clear: both !important; }
}
/* 04/10/2026 (k417): repaso de diseno pagina a pagina (sigue a k416). Estampacion: las
   10 tecnicas, 5 por fila (iban de 2 en 2, con la foto recortada hasta un 75 %).
   Etiquetas: cada foto a la izquierda y su texto al lado. Tarifas: el titulo de una
   tabla baja con ella (no se queda al lado de la foto de cabecera). DTF y sublimacion
   por metros: la foto de ejemplo, a la izquierda y casi entera (era una franja de
   200 px). Sectores: 3 por fila (cada grupo trae 3; habia una columna vacia). */
@media (min-width: 1121px) {
    .ep-page .ep-cards { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
    .ep-page .ep-card .ep-img { height: auto !important; aspect-ratio: 4 / 3 !important; }
    .tb-page > a.modal-img { float: left !important; width: 40% !important; max-width: 480px !important; margin: 4px 26px 16px 0 !important; }
    .tb-page > a.modal-img img { max-width: 100% !important; }
    .tb-page > .tb-banner { clear: left !important; }
    .tb-page > .tb-banner:has(+ .tb-box-precios), .tb-page > .tb-banner:has(+ .tb-box-recargos), .tb-page > .tb-banner:has(+ table), .tb-page > .tb-banner:has(+ div > table) { clear: both !important; }
    .contenidoprincipal .esp2-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 769px) {
    .dtf-opt.has-img { display: grid !important; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr) !important; align-items: stretch !important; }
    .dtf-opt.has-img .opt-img { height: auto !important; min-height: 230px !important; }
    .dtf-opt.has-img .opt-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
}
/* 04/10/2026 (k418): sigue el repaso de diseno. Sectores (landing.asp): la foto de
   cabecera, vertical, iba de fondo de una franja ancha y se veia un 12-20 % (sin
   caras): ahora el texto a la izquierda y la foto a la derecha, fundida por su borde.
   Nuestra tienda: las fotos de las instalaciones, en 4:3 (eran franjas de 120 px).
   Como comprar: los 4 pasos en una fila. */
@media (min-width: 1121px) {
    .contenidoprincipal .land-hero { min-height: 360px !important; }
    .contenidoprincipal .land-hero-img { left: auto !important; right: 0 !important; width: 48% !important; object-position: center 30% !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); }
    .contenidoprincipal .land-hero::after { background: linear-gradient(90deg, rgba(0,33,71,.55) 0%, rgba(0,33,71,.25) 45%, rgba(0,0,0,0) 55%) !important; }
    .tc-photos img { height: auto !important; aspect-ratio: 4 / 3 !important; }
    .cc-how { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* 04/10/2026 (k428): la tarjeta "Pedir presupuesto" ancha (3 columnas o mas) era un
   bloque azul casi vacio: a la derecha, una lista de ventajas; el titulo, mas grande. */
.contenidoprincipal.home26 .h26-cta-lista { display: none !important; }
@media (min-width: 1121px) {
    .contenidoprincipal.home26 .h26-s3, .contenidoprincipal.home26 .h26-s4, .contenidoprincipal.home26 .h26-s5 { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; align-content: center !important; column-gap: 48px !important; row-gap: 10px !important; padding: 32px 40px !important; }
    .contenidoprincipal.home26 .h26-s3 > :not(.h26-cta-lista), .contenidoprincipal.home26 .h26-s4 > :not(.h26-cta-lista), .contenidoprincipal.home26 .h26-s5 > :not(.h26-cta-lista) { grid-column: 1 !important; justify-self: start !important; }
    .contenidoprincipal.home26 .h26-s3 .h26-cta-tit, .contenidoprincipal.home26 .h26-s4 .h26-cta-tit, .contenidoprincipal.home26 .h26-s5 .h26-cta-tit { font-size: 30px !important; }
    .contenidoprincipal.home26 .h26-s3 .h26-cta-txt, .contenidoprincipal.home26 .h26-s4 .h26-cta-txt, .contenidoprincipal.home26 .h26-s5 .h26-cta-txt { font-size: 15.5px !important; }
    .contenidoprincipal.home26 .h26-s3 .h26-cta-lista, .contenidoprincipal.home26 .h26-s4 .h26-cta-lista, .contenidoprincipal.home26 .h26-s5 .h26-cta-lista { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 14px !important; grid-column: 2 !important; grid-row: 1 / span 3 !important; padding-left: 40px !important; border-left: 1px solid rgba(255,255,255,.22) !important; font: 600 16px/1.35 Inter, 'Segoe UI', Arial, sans-serif !important; color: #fff !important; }
    .contenidoprincipal.home26 .h26-cta-lista > span { display: block !important; }
}
/* 04/10/2026 (k429): relacionados y ofertas de la ficha, a 6 columnas en el ordenador
   (como la portada; iban a 4 y a 8 desde 1.600 px). Traen hasta 12: en la tableta y
   el movil se ven 8, como antes. */
@media (min-width: 1121px) {
    .ec26-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 1120px) {
    .ec26-card-grid > :nth-child(n+9) { display: none !important; }
}
/* 04/10/2026 (k434): "Productos recomendados" de las paginas de sector, a 6 columnas en
   el ordenador (iban a 4, tarjetas de 310 px), como la portada. */
@media (min-width: 1121px) {
    .contenidoprincipal .land-prod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; }
}
/* 04/10/2026 (k437): la portada en la tableta estrecha (769-1023 px), a 4 columnas (iba a 3:
   las secciones de 4 dejaban 1 suelta y las de 8 acababan en 2). */
@media (min-width: 769px) and (max-width: 1120px) {
    body .tablacontenido .contenidoprincipal.home26 .pro-grid:has(.pro-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
}
/* ---- 04/10/2026 (k440): las tarjetas de los articulos con el marco de ECAMISETAS 2026
   (lo pidio el usuario: "ponles marco a los articulos al estilo de web2026 ... en todas
   las paginas"): borde gris claro, esquinas de 12 px, fondo blanco y, al pasar el raton,
   sube 2 px con sombra; la caja de la foto 3:4 sobre gris muy claro. Las fotos, ENTERAS
   ("no recortes las imagenes"): img-adapt.asp las coloca lo mas grandes posible sin
   cortar el articulo y pinta el hueco del color de su fondo. Catalogos, buscador,
   marcas, ofertas, regalos, portada, sectores y relacionados. ---- */
.result-card,
.contenidoprincipal .pro-card:has(.pro-img),
.ec26-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
.result-card:hover,
.contenidoprincipal .pro-card:has(.pro-img):hover,
.ec26-card:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(15,23,42,.10) !important; border-color: #cbd5e1 !important; }
.result-img-box,
.contenidoprincipal .pro-img-box:has(> .pro-img),
.ec26-card-img { height: auto !important; aspect-ratio: 3 / 4 !important; background: #f8fafc !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; position: relative !important; overflow: hidden !important; }
.result-img-box > img.result-img,
.contenidoprincipal .pro-img-box > img.pro-img,
.ec26-card-img > img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; }
/* la imagen de recambio (sin foto), con aire */
.result-img-box > img.result-img[src^="data:"],
.contenidoprincipal .pro-img-box > img.pro-img[src^="data:"],
.ec26-card-img > img[src^="data:"] { padding: 22% !important; }
/* ---- 04/10/2026 (k441): la barra de FILTROS de los catalogos, el buscador y las marcas
   (includes/_filtros26.asp), como la de ECAMISETAS 2026: desplegables con los circulos de
   color, las tallas, el corte, la marca (con buscador), el precio; "Ordenar" a la derecha y
   los filtros puestos en etiquetas con su aspa. En el movil, el desplegable sale abajo. ---- */
.f26 { margin: 4px 0 18px; }
.f26-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f26-dd { position: relative; }
.f26-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: #334155; white-space: nowrap; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.f26-dd > summary::-webkit-details-marker { display: none; }
.f26-dd > summary::marker { content: ""; }
.f26-dd > summary:hover { border-color: #38bdf8; }
.f26-dd[open] > summary, .f26-dd.is-on > summary { background: #0284c7; border-color: #0284c7; color: #fff; }
.f26-chev { width: 11px; height: 11px; flex-shrink: 0; transition: transform .2s; }
.f26-dd[open] .f26-chev { transform: rotate(180deg); }
.f26-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fff; color: #0284c7; font-size: 11px; font-weight: 800; }
.f26-txt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.f26-minis { display: inline-flex; }
.f26-mini { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.18); margin-left: -3px; }
.f26-minis .f26-mini:first-child { margin-left: 0; }
.f26-pop { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; width: max-content; min-width: 230px; max-width: min(360px, calc(100vw - 32px)); background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 18px 40px rgba(15,23,42,.16); padding: 14px; box-sizing: border-box; }
.f26-pop-tit { margin: 0 0 10px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8 !important; line-height: 1.3 !important; }
.f26-pop-tit span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.f26-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; min-width: 260px; }
.f26-col, .f26-lin { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; color: #334155 !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; line-height: 1.2; }
.f26-col:hover, .f26-lin:hover { background: #f1f5f9; }
.f26-col i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1px solid #cbd5e1; box-shadow: inset 0 0 0 2px #fff; }
.f26-col.is-sel, .f26-lin.is-sel { background: #e0f2fe; color: #0c4a6e !important; font-weight: 700; }
.f26-col.is-sel i { outline: 2px solid #0284c7; outline-offset: 1px; }
.f26-col small, .f26-lin small, .f26-chip small { margin-left: auto; padding-left: 6px; color: #94a3b8; font-size: 11.5px; font-weight: 600; }
.f26-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f26-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569 !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.f26-chip:hover { border-color: #38bdf8; }
.f26-chip.is-sel { background: #0284c7; border-color: #0284c7; color: #fff !important; }
.f26-chip.is-sel small { color: #e0f2fe; }
.f26-mas { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.f26-lista { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-width: 240px; }
.f26-buscar { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; font-size: 13px; }
.f26-precio-form { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 13px; color: #64748b; }
.f26-precio-form input { width: 74px; padding: 7px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; font-size: 13px; box-sizing: border-box; }
.f26-precio-form button { margin-left: auto; padding: 8px 12px; border: 0; border-radius: 8px; background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.f26-precio-form button:hover { background: #0284c7; }
.f26-orden { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0 !important; }
.f26-orden span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.f26-orden select { padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; }
.f26-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.f26-act { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 10px; border-radius: 999px; background: #e0f2fe; color: #0c4a6e !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.f26-act b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #0c4a6e; font-size: 14px; line-height: 1; }
.f26-act:hover b { background: #dc2626; color: #fff; }
.f26-limpiar { margin-left: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b !important; text-decoration: none !important; }
.f26-limpiar:hover { color: #dc2626 !important; }
/* las muestras del color elegido, en la tarjeta: primero y marcadas */
.color-dot.f26-dot-sel { border-color: #0284c7 !important; box-shadow: 0 0 0 2px rgba(2,132,199,.35) !important; }
/* la foto del color elegido, si es de las pequenas: en un recuadro abajo a la derecha */
.f26-inset { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 30%; max-width: 86px; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; box-shadow: 0 6px 14px rgba(15,23,42,.16); }
.f26-inset img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; position: static !important; }
@media (max-width: 768px) {
    .f26-bar { gap: 6px; }
    .f26-dd > summary { padding: 7px 10px; font-size: 13px; }
    .f26-orden { margin-left: 0; width: 100%; }
    .f26-orden select { flex: 1; }
    .f26-pop { position: fixed; left: 10px !important; right: 10px !important; top: auto; bottom: 10px; width: auto; max-width: none; max-height: 72vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(15,23,42,.25); }
    .f26-cols { min-width: 0; }
}
/* 04/10/2026 (k441k): en el movil, el desplegable de los filtros por encima de "Te ayudamos?" y de WhatsApp */
@media (max-width: 768px) {
    .f26-dd[open] .f26-pop { z-index: 2147483000 !important; }
}
/* ---- 05/10/2026 (k462): la FRANJA PRINCIPAL de la portada, como ECAMISETAS 2026 (fondo azul
   oscuro degradado; etiqueta, H1, texto, buscador y "Pedir presupuesto") y los banners A LA
   DERECHA (centrados quedaban muy grandes, dijo el usuario). contenidohome.asp.
   (k463) Un RECTANGULO de borde a borde de la pagina, pegado al menu y sin esquinas
   redondeadas; lo de dentro, alineado con el resto de la pagina.
   (k467) El banner, PEGADO a los bordes de la franja (arriba, abajo y a la derecha; en la
   tableta y el movil, a los lados y abajo) y entero; el degradado, volteado (lo mas oscuro a la
   izquierda); y bajo "Pedir presupuesto", el texto de la portada (la seccion "texto" que va
   tras los banners; admin-home.asp > Ajustes). Si el texto sale mas alto que el banner, el
   banner queda centrado sobre el azul de la franja. ---- */
/* .tablacontenido recorta (overflow hidden) y en pantallas anchas mide 1760 px: en la portada
   deja salir la franja. La franja mide 100vw; con barra de desplazamiento clasica sobresale lo
   que mide la barra y lo recorta el html (sin barra horizontal). */
body .tablacontenido:has(> .contenidoprincipal.home26 > .h26-franja) { display: flow-root !important; overflow: visible !important; }
html:has(.contenidoprincipal.home26 > .h26-franja) { overflow-x: hidden; }
body .contenidoprincipal.home26 .h26-franja { --h26-ban: min(62vw, 1040px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) var(--h26-ban); column-gap: 36px; align-items: center; margin: -10px calc(50% - 50vw) 22px; padding: 0 0 0 calc(50vw - 50%); border-radius: 0; box-shadow: none; color: #fff; background: #0f172a linear-gradient(225deg, #0369a1 0%, #0f172a 58%, #0f172a 100%) 0 0 / calc(100% - var(--h26-ban)) 100% no-repeat; }
body .contenidoprincipal.home26 .h26-franja::before { content: ""; position: absolute; left: calc(100% - var(--h26-ban) - 340px); top: -170px; width: 384px; height: 384px; border-radius: 50%; filter: blur(64px); pointer-events: none; background: rgba(14,165,233,.20); }
body .contenidoprincipal.home26 .h26-franja > * { position: relative; z-index: 1; min-width: 0; }
body .contenidoprincipal.home26 .h26-franja-solo { grid-template-columns: minmax(0, 1fr); padding: 0 calc(50vw - 50%); background-size: 100% 100%; }
body .contenidoprincipal.home26 .h26-franja-solo::before { left: auto; right: -80px; }
body .contenidoprincipal.home26 .h26-franja-txt { padding: 20px 0; }
body .contenidoprincipal.home26 .h26-franja-solo .h26-franja-txt { padding: 34px 0; }
body .contenidoprincipal.home26 .h26-franja-eti { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
body .contenidoprincipal.home26 .h26-franja-eti svg { width: 14px; height: 14px; color: #7dd3fc; flex-shrink: 0; }
body .contenidoprincipal.home26 .h26-franja-h1 { margin: 0 !important; padding: 0 !important; font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif !important; font-size: clamp(22px, 2vw, 38px) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: #fff !important; text-transform: none !important; text-align: left !important; }
body .contenidoprincipal.home26 .h26-franja-p { margin: 10px 0 0 !important; max-width: 560px; font-size: 14.5px !important; line-height: 1.5 !important; color: #cbd5e1 !important; text-align: left !important; }
body .contenidoprincipal.home26 .h26-franja-bus { display: flex; max-width: 470px; margin: 16px 0 0; }
body .contenidoprincipal.home26 .h26-franja-bus input { flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 10px 0 0 10px; padding: 13px 16px; background: #fff; color: #1e293b; font-size: 14px; font-weight: 500; outline: none; box-shadow: none; }
body .contenidoprincipal.home26 .h26-franja-bus button { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 0; border-radius: 0 10px 10px 0; padding: 0 20px; background: #0284c7; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
body .contenidoprincipal.home26 .h26-franja-bus button:hover { background: #0ea5e9; }
body .contenidoprincipal.home26 .h26-franja-bus button svg { width: 16px; height: 16px; }
body .contenidoprincipal.home26 .h26-franja-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 0; font-size: 12.5px; }
body .contenidoprincipal.home26 .h26-franja-pie a { color: #fff !important; font-weight: 800; text-decoration: none !important; }
body .contenidoprincipal.home26 .h26-franja-pie a:hover { color: #7dd3fc !important; }
body .contenidoprincipal.home26 .h26-franja-pie span { color: #94a3b8; }
body .contenidoprincipal.home26 .h26-franja-pie b { color: #fff; font-weight: 800; }
/* (k467) el texto de la portada, bajo "Pedir presupuesto" */
body .contenidoprincipal.home26 .h26-franja-seo { margin: 14px 0 0; padding: 12px 0 0; max-width: 680px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.55; color: #cbd5e1; }
body .contenidoprincipal.home26 .h26-franja-seo p { margin: 0 0 7px !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; text-align: left !important; }
body .contenidoprincipal.home26 .h26-franja-seo p:last-child { margin-bottom: 0 !important; }
body .contenidoprincipal.home26 .h26-franja-seo strong, body .contenidoprincipal.home26 .h26-franja-seo b { color: #fff !important; font-weight: 700; }
body .contenidoprincipal.home26 .h26-franja-seo a { color: #7dd3fc !important; }
/* donde no cabria junto al banner, sin el subtitulo (el texto de la portada ya dice lo mismo) */
@media (min-width: 1121px) and (max-width: 1439px) {
    body .contenidoprincipal.home26 .h26-franja-txt:has(.h26-franja-seo) .h26-franja-p { display: none !important; }
}
@media (min-width: 1121px) and (max-width: 1365px) {
    body .contenidoprincipal.home26 .h26-franja-txt { padding: 16px 0; }
    body .contenidoprincipal.home26 .h26-franja-seo { font-size: 12px; margin-top: 12px; padding-top: 10px; }
}
/* (k467b) de 1121 a 1279 px, sin la etiqueta y un poco mas justo, para que quepa junto al banner */
@media (min-width: 1121px) and (max-width: 1279px) {
    body .contenidoprincipal.home26 .h26-franja-txt:has(.h26-franja-seo) .h26-franja-eti { display: none !important; }
    body .contenidoprincipal.home26 .h26-franja-txt { padding: 12px 0; }
    body .contenidoprincipal.home26 .h26-franja-seo { font-size: 11.5px; line-height: 1.5; }
}
/* los banners, PEGADOS a los bordes de la franja y enteros (el carrusel de siempre; si alguno no
   tuviera la proporcion 1688x932, se ve entero sobre el azul de la franja, sin recortarlo) */
body .contenidoprincipal.home26 .h26-franja-ban { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
body .contenidoprincipal.home26 .h26-franja-ban .slider-container { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #0f172a; }
body .contenidoprincipal.home26 .h26-franja-ban .slide img { object-fit: contain; }
/* las flechas, un poco hacia dentro (con barra de desplazamiento, el borde queda debajo de ella) */
body .contenidoprincipal.home26 .h26-franja-ban .nav-btn { border-radius: 6px !important; }
body .contenidoprincipal.home26 .h26-franja-ban .next-btn { right: 8px !important; }
body .contenidoprincipal.home26 .h26-franja-ban > div[style*="max-width:1200px"] { max-width: none !important; margin: 0 !important; border-radius: 0 !important; }
body .contenidoprincipal.home26 .h26-franja-ban video { height: auto !important; aspect-ratio: 16 / 9; }
@media (max-width: 1120px) {
    body .contenidoprincipal.home26 .h26-franja { grid-template-columns: minmax(0, 1fr); padding: 0 calc(50vw - 50%); background-size: 100% 100%; }
    body .contenidoprincipal.home26 .h26-franja::before { left: auto; right: -80px; }
    body .contenidoprincipal.home26 .h26-franja-txt { padding: 26px 0 22px; }
    body .contenidoprincipal.home26 .h26-franja-h1 { font-size: 28px !important; }
    body .contenidoprincipal.home26 .h26-franja-seo { max-width: none; font-size: 13.5px; }
    body .contenidoprincipal.home26 .h26-franja-ban { margin: 0 calc(50% - 50vw); }
    body .contenidoprincipal.home26 .h26-franja-ban .prev-btn { left: 8px !important; }
}
@media (max-width: 768px) {
    body .contenidoprincipal.home26 .h26-franja-txt { padding: 22px 0 20px; }
    body .contenidoprincipal.home26 .h26-franja-eti { font-size: 10.5px; margin-bottom: 14px; letter-spacing: .05em; padding: 6px 11px; }   /* (k462b) en una linea */
    body .contenidoprincipal.home26 .h26-franja-h1 { font-size: 26px !important; }
    body .contenidoprincipal.home26 .h26-franja-p { font-size: 14.5px !important; margin-top: 10px !important; }
    body .contenidoprincipal.home26 .h26-franja-bus { margin-top: 18px; }
    body .contenidoprincipal.home26 .h26-franja-bus input { padding: 13px 14px; }
    body .contenidoprincipal.home26 .h26-franja-bus button { padding: 0 16px; }
    body .contenidoprincipal.home26 .h26-franja-bus button span { display: none; }
    body .contenidoprincipal.home26 .h26-franja-seo { font-size: 13.5px; }
}
/* ---- 05/10/2026 (k464): el MENU de arriba se ajusta al ancho. Con un enlace mas (Regalos,
   de MENU_NAVEGACION_2026) a 1280 px no cabia y se cortaba por los dos lados. Entre 1121 y
   1500 px la letra baja de 15 a 12,5 px y el espacio de cada enlace de 12 a 5,5 px; si aun
   asi no cabe, se pega a la izquierda ("Todas las categorias" siempre a la vista). ---- */
@media (min-width: 1121px) {
    #header-final .nav-ul { justify-content: safe center !important; }
    #header-final .nav-ul > li > .nav-a { font-size: clamp(12.5px, calc(12.5px + (100vw - 1121px) * .0066), 15px) !important; padding-left: clamp(5.5px, calc(5.5px + (100vw - 1121px) * .01715), 12px) !important; padding-right: clamp(5.5px, calc(5.5px + (100vw - 1121px) * .01715), 12px) !important; }
    #header-final .nav-ul .nav-mega-btn { padding-left: clamp(11px, calc(11px + (100vw - 1121px) * .0132), 16px) !important; padding-right: clamp(11px, calc(11px + (100vw - 1121px) * .0132), 16px) !important; }
    #header-final .nav-ul .nav-li-mega { margin-right: clamp(4px, calc(4px + (100vw - 1121px) * .0158), 10px) !important; }
}
/* ---- 05/10/2026 (k466): la CABECERA MAS BAJA, como la de ECAMISETAS 2026 (lo pidio el
   usuario: el alto de la cabecera y el logo de 2026). El logo de 2026 (horizontal; el de
   antes, apilado, media 113 px de alto) y, en el ordenador y la tableta, la zona del logo en
   UNA fila: logo, buscador, telefono, WhatsApp y Presupuesto (la frase de debajo del logo,
   fuera). A 1280 px, de 215 a unos 144 px. En la tableta, WhatsApp solo con su icono. ---- */
#header-final .logo-box img { width: 196px !important; height: auto !important; max-width: none !important; }
@media (min-width: 769px) {
    #header-final .top-strip { height: 30px !important; }
    #header-final .mid-zone { flex-wrap: nowrap !important; align-items: center !important; padding-top: 12px !important; padding-bottom: 12px !important; gap: 22px !important; }
    #header-final .logo-box { flex: 0 0 auto !important; }
    #header-final .header-tagline { display: none !important; }
    #header-final .search-container { flex: 1 1 auto !important; min-width: 0 !important; }
    #header-final .actions-stack { flex: 0 0 auto !important; flex-direction: row !important; align-items: center !important; gap: 18px !important; }
    #header-final .phone-inline { display: grid !important; grid-template-columns: auto auto !important; align-items: baseline !important; column-gap: 5px !important; row-gap: 0 !important; line-height: 1.12 !important; margin: 0 !important; }
    #header-final .phone-inline .ph-label { grid-column: 1 !important; grid-row: 1 !important; white-space: nowrap !important; }
    #header-final .phone-inline .ph-sub { grid-column: 2 !important; grid-row: 1 !important; white-space: nowrap !important; }
    #header-final .phone-inline .ph-num { grid-column: 1 / span 2 !important; grid-row: 2 !important; white-space: nowrap !important; font-size: 17px !important; }
    #header-final .wa-trigger-clean { white-space: nowrap !important; }
}
@media (min-width: 1121px) and (max-width: 1366px) {
    #header-final .wa-trigger-clean .wa-t1 { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1120px) {
    #header-final .logo-box img { width: 160px !important; }
    #header-final .mid-zone { gap: 14px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
    #header-final .actions-stack { gap: 12px !important; }
    #header-final .wa-trigger-clean { width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center !important; border-radius: 50% !important; }
    #header-final .wa-trigger-clean .wa-icon-unified { width: 18px !important; height: 18px !important; margin: 0 !important; }
    /* el texto, solo para los lectores de pantalla */
    #header-final .wa-trigger-clean .wa-t1, #header-final .wa-trigger-clean .wa-t2, #header-final .wa-trigger-clean .arrow-trigger { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; }
    #header-final .btn-quote { padding: 8px 16px !important; }
}
@media (min-width: 769px) and (max-width: 919px) {
    #header-final .phone-inline { display: none !important; }
}
@media (max-width: 768px) {
    #header-final .logo-box img { width: 150px !important; }
}
/* ---- 05/10/2026 (k468): la BARRA DE VENTAJAS de la portada, como ECAMISETAS 2026 (lo pidio el
   usuario, con sus cinco textos): tira blanca de lado a lado bajo la franja; icono azul, titulo
   y una o dos lineas, separadas por rayas finas. includes/_ventajas_home.asp; los textos, en
   admin-home.asp (seccion "Beneficios"). ---- */
.h26-ven { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); background: #fff; border-bottom: 1px solid #e2e8f0; }
body .contenidoprincipal.home26 .h26-ven { margin: 0 calc(50% - 50vw) 26px; padding: 0 calc(50vw - 50%); }
body .contenidoprincipal.home26 .h26-franja + .h26-ven { margin-top: -22px; }
.h26-ven-i { display: flex; align-items: center; gap: 14px; padding: 20px 18px; min-width: 0; }
.h26-ven-i + .h26-ven-i { border-left: 1px solid #eef2f6; }
body .contenidoprincipal.home26 .h26-ven-i:first-child { padding-left: 0; }
body .contenidoprincipal.home26 .h26-ven-i:last-child { padding-right: 0; }
.h26-ven-ico { flex: 0 0 auto; display: inline-flex; color: #0284c7; }
.h26-ven-ico svg { width: 30px; height: 30px; }
.h26-ven-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h26-ven-t b { font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; color: #1e293b; }
.h26-ven-t span { font-size: 12px; line-height: 1.35; color: #64748b; }
@media (max-width: 1120px) {
    .h26-ven { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h26-ven-i { padding: 16px 12px !important; gap: 10px; }
    .h26-ven-i + .h26-ven-i { border-left: 0; }
    .h26-ven-ico svg { width: 26px; height: 26px; }
    .h26-ven-t b { font-size: 14px; }
}
@media (max-width: 768px) {
    .h26-ven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h26-ven-i { padding: 13px 6px !important; }
    .h26-ven-t b { font-size: 13.5px; }
    .h26-ven-t span { font-size: 11.5px; }
}
/* ---- 05/10/2026 (k469): las secciones de categorias de la portada (lo pidio el usuario):
   - las fotos, LLENANDO el marco (lo cubren, ajustadas por arriba para que se vean las cabezas);
     las muy altas o anchas y las de un articulo sobre blanco, enteras (.h26-entera, contenidohome.asp);
   - la tarjeta "Pedir presupuesto", con una FOTO de fondo que la cubre, su titulo, un texto breve y
     el boton con su enlace (admin-home.asp > Ajustes: "Titulo|Texto|Foto|Boton|Enlace"). ---- */
body .contenidoprincipal.home26 .pro-grid .pro-img-box img.pro-img-cover { object-fit: cover !important; object-position: 50% 5% !important; padding: 0 !important; }
body .contenidoprincipal.home26 .pro-grid .pro-img-box img.pro-img-cover.h26-entera { object-fit: contain !important; object-position: center !important; }
@media (min-width: 1121px) {
    .contenidoprincipal.home26 .h26-cta.h26-cta-foto { position: relative !important; isolation: isolate !important; overflow: hidden !important; justify-content: flex-end !important; padding: 26px 28px !important; background: #0b1f3a !important; }
    .contenidoprincipal.home26 .h26-cta-foto .h26-cta-img { position: absolute !important; inset: 0 !important; z-index: -2 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover !important; transition: transform .6s ease !important; }
    .contenidoprincipal.home26 .h26-cta-foto::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: linear-gradient(0deg, rgba(2,12,30,.94) 0%, rgba(2,12,30,.74) 42%, rgba(2,12,30,.20) 100%) !important; }
    .contenidoprincipal.home26 .h26-cta-foto:hover .h26-cta-img { transform: scale(1.05) !important; }
    .contenidoprincipal.home26 .h26-cta-foto .h26-cta-tit, .contenidoprincipal.home26 .h26-cta-foto .h26-cta-txt { text-shadow: 0 1px 12px rgba(0,0,0,.40) !important; }
    .contenidoprincipal.home26 .h26-cta-foto .h26-cta-lista { display: none !important; }
    /* la ancha (3 columnas o mas): el velo de izquierda a derecha y lo escrito, a la izquierda */
    .contenidoprincipal.home26 .h26-cta-foto.h26-s3, .contenidoprincipal.home26 .h26-cta-foto.h26-s4, .contenidoprincipal.home26 .h26-cta-foto.h26-s5 { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 32px 40px !important; }
    .contenidoprincipal.home26 .h26-cta-foto.h26-s3::before, .contenidoprincipal.home26 .h26-cta-foto.h26-s4::before, .contenidoprincipal.home26 .h26-cta-foto.h26-s5::before { background: linear-gradient(90deg, rgba(2,12,30,.94) 0%, rgba(2,12,30,.78) 38%, rgba(2,12,30,.12) 80%) !important; }
    .contenidoprincipal.home26 .h26-cta-foto.h26-s3 .h26-cta-txt, .contenidoprincipal.home26 .h26-cta-foto.h26-s4 .h26-cta-txt, .contenidoprincipal.home26 .h26-cta-foto.h26-s5 .h26-cta-txt { max-width: 440px !important; }
}
/* ---- 05/10/2026 (k470): la franja negra de arriba, un poco mas grande (lo pidio el usuario: "un
   poquito mas grande pero muy poquito") y, antes de "Empresa", las opiniones de Google
   (cfg2026_google_reviews, el mismo numero que el bloque de opiniones de la portada). ---- */
#header-final .top-strip { font-size: 12px !important; }
#header-final .strip-left { font-size: 12px !important; }
#header-final .strip-right { display: flex !important; align-items: center !important; }
#header-final .strip-right a { font-size: 11px !important; }
@media (min-width: 769px) { #header-final .top-strip { height: 33px !important; } }
#header-final .strip-right a.strip-opi { display: inline-flex !important; align-items: center !important; gap: 6px !important; text-transform: none !important; color: #e5e7eb !important; font-weight: 600 !important; }
#header-final .strip-right a.strip-opi:hover { color: #ffffff !important; }
#header-final .strip-opi .strip-estrellas { color: #facc15 !important; font-size: 12px !important; letter-spacing: 1px !important; }
#header-final .strip-sep { margin-left: 14px !important; color: rgba(255,255,255,.35) !important; }
@media (max-width: 768px) {
    #header-final .strip-left { font-size: 10.5px !important; }
    #header-final .strip-right a { font-size: 10px !important; }
    #header-final .strip-opi .strip-opi-txt { display: none !important; }
    #header-final .strip-sep { margin-left: 4px !important; }
}
/* ---- 05/10/2026 (k471b): las fotos de los articulos, sin cortes (img-adapt.asp). Cuando la
   foto no llena el marco y su borde tiene dibujo (una pared, el suelo), el hueco es la propia
   foto, ampliada y difuminada, detras de la foto entera (que se funde con ella). ---- */
.ec-difumina { position: relative !important; overflow: hidden !important; }
/* (k476) la capa difuminada es un elemento propio (.ec-difu, el primero de la caja), no el ::before */
.ec-difu { position: absolute !important; inset: -10% !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; filter: blur(18px) saturate(1.05) !important; pointer-events: none !important; }
/* ---- 05/10/2026 (k472): (1) las tarjetas con foto, SIN VELO (lo pidio el usuario: "no quiero que
   las imagenes de fondo tengan opacidad"): la foto tal cual y lo escrito en un recuadro oscuro, abajo
   a la izquierda (en la ancha, a la izquierda y centrado de alto). (2) La franja: sin "Pedir
   presupuesto gratis", los productos que hay al final y un poco mas de aire entre lo que queda
   (menos de 1121 a 1365 px, para que siga cabiendo junto al banner). ---- */
@media (min-width: 1121px) {
    .contenidoprincipal.home26 .h26-cta-foto::before { display: none !important; }
    .contenidoprincipal.home26 .h26-cta.h26-cta-foto { padding: 14px !important; justify-content: flex-end !important; align-items: flex-start !important; }
    .contenidoprincipal.home26 .h26-cta-foto .h26-cta-caja { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; max-width: 100% !important; padding: 16px 18px !important; border-radius: 12px !important; background: rgba(2,12,30,.82) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; box-shadow: 0 10px 24px rgba(0,0,0,.28) !important; }
    .contenidoprincipal.home26 .h26-cta-foto .h26-cta-tit, .contenidoprincipal.home26 .h26-cta-foto .h26-cta-txt { text-shadow: none !important; }
    .contenidoprincipal.home26 .h26-cta-foto.h26-s3, .contenidoprincipal.home26 .h26-cta-foto.h26-s4, .contenidoprincipal.home26 .h26-cta-foto.h26-s5 { padding: 24px 28px !important; justify-content: center !important; }
    .contenidoprincipal.home26 .h26-cta-foto.h26-s3 .h26-cta-caja, .contenidoprincipal.home26 .h26-cta-foto.h26-s4 .h26-cta-caja, .contenidoprincipal.home26 .h26-cta-foto.h26-s5 .h26-cta-caja { max-width: 470px !important; padding: 22px 26px !important; }
}
body .contenidoprincipal.home26 .h26-franja-eti { margin-bottom: 16px; }
body .contenidoprincipal.home26 .h26-franja-p { margin-top: 14px !important; }
body .contenidoprincipal.home26 .h26-franja-bus { margin-top: 22px; }
body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 22px; padding-top: 16px; }
body .contenidoprincipal.home26 .h26-franja-pie { margin-top: 18px; }
@media (min-width: 1121px) and (max-width: 1365px) {
    body .contenidoprincipal.home26 .h26-franja-bus { margin-top: 18px; }
    body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 16px; padding-top: 12px; }
    body .contenidoprincipal.home26 .h26-franja-pie { margin-top: 14px; }
}
@media (min-width: 1121px) and (max-width: 1279px) {
    body .contenidoprincipal.home26 .h26-franja-bus { margin-top: 14px; }
    body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 12px; padding-top: 10px; }
    body .contenidoprincipal.home26 .h26-franja-pie { margin-top: 10px; }
}
/* ---- 05/10/2026 (k473): "Tecnicas de impresion y personalizacion" de la portada, todas: en dos
   grupos (nuestro taller / merchandising con el marcaje del proveedor), 7 por fila en el ordenador. ---- */
.contenidoprincipal .ec-tech-grupo { margin: 20px 0 10px !important; font: 800 15px/1.3 Inter, 'Segoe UI', Arial, sans-serif !important; color: #002147 !important; text-align: left !important; }
.contenidoprincipal .ec-tech-grupo span { font-weight: 600 !important; font-size: 13px !important; color: #64748b !important; }
@media (min-width: 1121px) { .contenidoprincipal .ec-tech-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }
/* ---- 05/10/2026 (k475): dos secciones nuevas en la portada (lo pidio el usuario): tres fotos con su
   titulo y una etiqueta de precio en la esquina, y "Trabajos realizados" (2 filas de 6, la foto se
   amplia). Y el titulo de "Tecnicas de impresion y personalizacion", mas grande, como el de Trabajos. ---- */
.h26-promo { margin: 6px 0 32px; }
.h26-promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.h26-promo-c { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 18px; background: linear-gradient(135deg, #0b1f3a, #005a9c); box-shadow: 0 14px 30px rgba(15,23,42,.16); text-decoration: none !important; }
.h26-promo-c img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .6s ease; }
a.h26-promo-c:hover img { transform: scale(1.05); }
.h26-promo-tit { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 150px); padding: 10px 14px; border-radius: 12px; background: rgba(2,12,30,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff !important; font: 800 19px/1.2 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: -.01em; }
.h26-promo-precio { position: absolute; right: 14px; top: 14px; width: 108px; height: 108px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff !important; background: radial-gradient(circle at 30% 25%, #fcd34d 0%, #f59e0b 45%, #ea580c 100%); border: 3px solid #fff; box-shadow: 0 10px 24px rgba(234,88,12,.45); transform: rotate(-10deg); font-family: Inter, 'Segoe UI', Arial, sans-serif; line-height: 1.05; }
.h26-promo-precio small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.h26-promo-precio b { display: block; margin-top: 2px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.h26-promo-ver { position: absolute; left: 16px; bottom: 16px; padding: 11px 16px; border-radius: 10px; background: #fff; color: #002147 !important; font: 800 13px/1 Inter, 'Segoe UI', Arial, sans-serif; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: background .2s; }
a.h26-promo-c:hover .h26-promo-ver { background: #f59e0b; color: #111827 !important; }
@media (max-width: 1120px) {
    .h26-promo-grid { gap: 12px; }
    .h26-promo-tit { left: 12px; top: 12px; max-width: calc(100% - 104px); padding: 8px 10px; font-size: 15px; }
    .h26-promo-precio { right: 10px; top: 10px; width: 82px; height: 82px; }
    .h26-promo-precio b { font-size: 18px; }
    .h26-promo-precio small { font-size: 9.5px; }
    .h26-promo-ver { left: 12px; bottom: 12px; padding: 9px 12px; font-size: 12px; }
}
@media (max-width: 640px) {
    .h26-promo-grid { grid-template-columns: minmax(0, 1fr); }
    .h26-promo-c { aspect-ratio: 4 / 3; }
    .h26-promo-c img { object-position: 50% 20%; }
}
/* trabajos realizados */
.h26-trab { margin: 44px 0 8px; }
.h26-trab-head, .contenidoprincipal .ec-tech-head { text-align: center !important; margin: 0 0 22px !important; }
.h26-trab-head h2, .contenidoprincipal .ec-tech-head h2 { margin: 0 0 6px !important; font: 900 32px/1.15 Inter, 'Segoe UI', Arial, sans-serif !important; color: #0f172a !important; letter-spacing: -.02em !important; text-transform: none !important; }
.h26-trab-head p, .contenidoprincipal .ec-tech-head p { margin: 0 !important; font-size: 15px !important; color: #64748b !important; }
.h26-trab-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.h26-trab-i { margin: 0; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 14px rgba(15,23,42,.05); }
.h26-trab-foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; overflow: hidden; background: #f1f5f9; cursor: zoom-in; }
.h26-trab-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.h26-trab-foto::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; opacity: 0; transition: opacity .2s; background: rgba(2,12,30,.68) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.h26-trab-foto:hover img { transform: scale(1.06); }
.h26-trab-foto:hover::after, .h26-trab-foto:focus-visible::after { opacity: 1; }
.h26-trab-i figcaption { padding: 10px 12px 12px; }
.h26-trab-i figcaption b { display: block; font: 800 13.5px/1.25 Inter, 'Segoe UI', Arial, sans-serif; color: #0f172a; }
.h26-trab-i figcaption span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #64748b; }
@media (max-width: 1120px) {
    .h26-trab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .h26-trab-head h2, .contenidoprincipal .ec-tech-head h2 { font-size: 26px !important; }
}
@media (max-width: 640px) {
    .h26-trab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .h26-trab-head h2, .contenidoprincipal .ec-tech-head h2 { font-size: 22px !important; }
    .h26-trab-head p, .contenidoprincipal .ec-tech-head p { font-size: 13.5px !important; }
}
/* el visor: la foto ampliada */
.h26-lb { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 24px 70px; background: rgba(2,8,23,.9); }
.h26-lb[hidden] { display: none !important; }
.h26-lb figure { margin: 0; max-width: min(1100px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.h26-lb img { display: block; max-width: 100%; max-height: calc(100vh - 150px); border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.h26-lb figcaption { color: #fff; text-align: center; }
.h26-lb figcaption b { display: block; font: 800 17px/1.3 Inter, 'Segoe UI', Arial, sans-serif; }
.h26-lb figcaption span { display: block; margin-top: 2px; font-size: 14px; color: #cbd5e1; }
.h26-lb button { position: absolute; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); font-size: 28px; line-height: 46px; text-align: center; }
.h26-lb button:hover { background: rgba(255,255,255,.26); }
.h26-lb-x { top: 16px; right: 16px; }
.h26-lb-ant { left: 14px; top: 50%; transform: translateY(-50%); }
.h26-lb-sig { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
    .h26-lb { padding: 60px 12px 80px; }
    .h26-lb-ant, .h26-lb-sig { top: auto; bottom: 16px; transform: none; }
    .h26-lb-ant { left: calc(50% - 60px); }
    .h26-lb-sig { right: calc(50% - 60px); }
}
/* ---- 05/10/2026 (k476): (1) "Tecnicas de impresion": un color pastel en cada tecnica (lo pidio el
   usuario: "queda esa seccion muy minimalista"), en una sola rejilla. (2) Los dos textos SEO con foto
   de abajo de la portada, en dos columnas: foto | texto y, el siguiente, texto | foto. (3) Las tres
   fotos con precio, por img-adapt.asp (la foto entera, sin recortar el alto). ---- */
.contenidoprincipal .ec-tech-card { border-color: transparent !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+1) { background: #eff6ff !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+2) { background: #f0fdf4 !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+3) { background: #fefce8 !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+4) { background: #fdf2f8 !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+5) { background: #f5f3ff !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+6) { background: #ecfeff !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+7) { background: #fff7ed !important; }
.contenidoprincipal .ec-tech-grid > .ec-tech-card:nth-child(8n+8) { background: #f0fdfa !important; }
.contenidoprincipal .ec-tech-card .ec-tech-ico { background: rgba(255,255,255,.8) !important; }
.contenidoprincipal .ec-tech-card:hover { border-color: rgba(0,90,156,.22) !important; }
.contenidoprincipal .ec-tech-card:hover .ec-tech-ico { background: #005a9c !important; }
body .contenidoprincipal.home26 .h26-seo2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
body .contenidoprincipal.home26 .h26-seo2-inv .h26-seo2-foto { order: 2; }
body .contenidoprincipal.home26 .h26-seo2-foto { position: sticky; top: 20px; }
body .contenidoprincipal.home26 .h26-seo2-foto .banner-wrap { margin: 0 !important; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(15,23,42,.14); }
body .contenidoprincipal.home26 .h26-seo2-foto img { display: block; width: 100% !important; height: auto !important; max-height: none !important; }
body .contenidoprincipal.home26 .h26-seo2-txt > :first-child { margin-top: 0 !important; }
@media (max-width: 900px) {
    body .contenidoprincipal.home26 .h26-seo2-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    body .contenidoprincipal.home26 .h26-seo2-foto { position: static; }
    body .contenidoprincipal.home26 .h26-seo2-inv .h26-seo2-foto { order: 0; }
}
.h26-promo-c img { z-index: auto !important; }
/* ---- 05/10/2026 (k477): las tres fotos con precio, con el TITULO ENCIMA de la foto (sobre ella tapaba
   la cara del modelo); la foto, entera (img-adapt.asp), con la etiqueta de precio y "Ver modelos". ---- */
.h26-promo-c { display: flex !important; flex-direction: column !important; gap: 12px !important; aspect-ratio: auto !important; overflow: visible !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; isolation: auto !important; }
.h26-promo-c .h26-promo-tit { position: static !important; max-width: none !important; padding: 0 2px !important; border-radius: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #0f172a !important; font: 900 24px/1.15 Inter, 'Segoe UI', Arial, sans-serif !important; letter-spacing: -.02em !important; }
a.h26-promo-c:hover .h26-promo-tit { color: #005a9c !important; }
.h26-promo-foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #e2e8f0; box-shadow: 0 14px 30px rgba(15,23,42,.16); }
.h26-promo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .6s ease; }
@media (max-width: 1120px) { .h26-promo-c .h26-promo-tit { font-size: 18px !important; } }
@media (max-width: 640px) { .h26-promo-foto { aspect-ratio: 4 / 3; } .h26-promo-c .h26-promo-tit { font-size: 19px !important; } }
/* ---- 05/10/2026 (k479): las tres fotos con precio, ahora un BANNER de lado a lado de la pagina partido en
   tres columnas, rectangular (sin cantos romos), como el ejemplo del usuario: la foto llena la columna; abajo
   a la izquierda, el titulo en blanco, el "desde" discreto y un boton blanco redondeado (HomePromo3). ---- */
body .tablacontenido:has(> .contenidoprincipal.home26 > .h26-bn3) { display: flow-root !important; overflow: visible !important; }
html:has(.contenidoprincipal.home26 > .h26-bn3) { overflow-x: hidden; }
.contenidoprincipal.home26 > .h26-bn3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 34px calc(50% - 50vw) 44px; padding: 0; background: #fff; }
.contenidoprincipal.home26 > .h26-bn3.h26-bn3-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contenidoprincipal.home26 > .h26-bn3.h26-bn3-n1 { grid-template-columns: minmax(0, 1fr); }
.h26-bn3-c { position: relative; display: block; height: clamp(440px, 40vw, 700px); overflow: hidden; isolation: isolate; background: #1e293b; color: #fff !important; text-decoration: none !important; border-radius: 0 !important; }
.h26-bn3-c .h26-bn3-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.h26-bn3-c::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(2,6,23,.68) 0%, rgba(2,6,23,.36) 28%, rgba(2,6,23,0) 56%); }
.h26-bn3-txt { position: absolute; z-index: 2; left: clamp(22px, 3.4vw, 56px); right: 22px; bottom: clamp(26px, 3.4vw, 54px); display: flex; flex-direction: column; align-items: flex-start; }
.h26-bn3-tit { color: #fff; font: 700 clamp(26px, 2.5vw, 42px)/1.06 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.h26-bn3-precio { margin-top: 8px; color: rgba(255,255,255,.86); font: 500 15px/1.3 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.h26-bn3-precio b { color: #fff; font-weight: 700; }
.h26-bn3-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; margin-top: 20px; padding: 14px 30px; border-radius: 999px; background: #fff; color: #0f172a; font: 600 13px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: background-color .2s, color .2s; }
a.h26-bn3-c:hover .h26-bn3-img { transform: scale(1.04); }
a.h26-bn3-c:hover .h26-bn3-btn { background: #0f172a; color: #fff; }
a.h26-bn3-c:focus-visible { outline: 3px solid #38bdf8; outline-offset: -3px; }
@media (max-width: 1120px) {
    .h26-bn3-c { height: clamp(360px, 52vw, 520px); }
    .h26-bn3-btn { min-width: 0; padding: 12px 22px; font-size: 12px; }
}
@media (max-width: 760px) {
    .contenidoprincipal.home26 > .h26-bn3, .contenidoprincipal.home26 > .h26-bn3.h26-bn3-n2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 24px calc(50% - 50vw) 30px; }
    .contenidoprincipal.home26 > .h26-bn3.h26-bn3-n1 { grid-auto-columns: 100%; }
    .h26-bn3::-webkit-scrollbar { display: none; }
    .h26-bn3-c { height: 440px; scroll-snap-align: start; }
    .h26-bn3-tit { font-size: 28px; }
}
/* ---- 05/10/2026 (k480): los textos SEO de la portada maquetados (HomeTextoSeo, contenidohome.asp): la foto
   entera a un lado y el titulo y la entrada al otro, los apartados en tarjetas y, sin foto, en dos columnas.
   Y SIN subrayado en ningun enlace (el usuario: "no me gusta"): esta regla gana a las de antes. ---- */
html body a:not(#ec-k480), html body a:not(#ec-k480):hover, html body a:not(#ec-k480):focus { text-decoration: none !important; }
.contenidoprincipal .h26-ed { margin: 60px 0 10px; color: #334155; font: 400 15.5px/1.75 Inter, 'Segoe UI', Arial, sans-serif; text-align: left; }
.h26-ed-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.h26-ed-inv .h26-ed-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.h26-ed-inv .h26-ed-foto { order: 2; }
.h26-ed-sinfoto .h26-ed-top { display: block; }
.h26-ed-foto { position: relative; margin: 0; overflow: hidden; background: #e2e8f0; box-shadow: 0 26px 50px -26px rgba(15,23,42,.5); }
.h26-ed-foto img { display: block; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
.h26-ed .h26-ed-intro > p, .h26-ed .h26-ed-card p { margin: 0 0 14px !important; text-align: left !important; font-size: inherit !important; line-height: inherit !important; }
.h26-ed:not(.h26-ed-sinfoto) .h26-ed-intro > p:first-of-type { font-size: 17.5px !important; line-height: 1.7 !important; color: #1e293b; }
.h26-ed .h26-ed-intro > h2, .h26-ed .h26-ed-intro > h3 { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #0f172a !important; font: 800 clamp(24px, 2.2vw, 32px)/1.18 Inter, 'Segoe UI', Arial, sans-serif !important; letter-spacing: -.02em !important; text-transform: none !important; text-align: left !important; }
.h26-ed-sinfoto .h26-ed-intro { columns: 2; column-gap: 56px; }
.h26-ed-sinfoto .h26-ed-intro > h2, .h26-ed-sinfoto .h26-ed-intro > h3 { column-span: all; margin-bottom: 24px !important; }
.h26-ed-sinfoto .h26-ed-intro > p { break-inside: avoid; }
.h26-ed-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 36px; }
.h26-ed-card { position: relative; padding: 28px 30px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; }
.h26-ed-num { display: block; margin-bottom: 10px; color: #005a9c; font: 800 13px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .14em; }
.h26-ed .h26-ed-card h2, .h26-ed .h26-ed-card h3 { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #0f172a !important; font: 800 19px/1.3 Inter, 'Segoe UI', Arial, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; text-align: left !important; }
.h26-ed-card h2::before, .h26-ed-card h3::before, .h26-ed-intro > h2::before, .h26-ed-intro > h3::before { content: none !important; display: none !important; }
.h26-ed a { color: #005a9c !important; font-weight: 600 !important; border-radius: 4px; transition: color .15s, background-color .15s, box-shadow .15s; }
.h26-ed a:hover { color: #003a66 !important; background-color: rgba(0,90,156,.08); box-shadow: 0 0 0 3px rgba(0,90,156,.08); }
.h26-ed strong, .h26-ed b { color: #0f172a !important; font-weight: 600 !important; }
@media (max-width: 900px) {
    .h26-ed-top, .h26-ed-inv .h26-ed-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .h26-ed-inv .h26-ed-foto { order: 0; }
    .h26-ed-sinfoto .h26-ed-intro { columns: 1; }
    .contenidoprincipal .h26-ed { margin-top: 44px; font-size: 15px; }
    .h26-ed:not(.h26-ed-sinfoto) .h26-ed-intro > p:first-of-type { font-size: 16.5px !important; }
}
/* ---- 05/10/2026 (k481): el mismo alto de marco (3:4) en las categorias de la portada y las subfamilias,
   como los articulos: la mediana de las 12.185 fotos de articulos activos es 0,80 (ancho entre alto).
   Las fotos llenan el marco (img-adapt.asp): sin franjas difuminadas ni de color a los lados. ---- */
body .contenidoprincipal.home26 .pro-grid:has(.pro-img-cover) .pro-img-box { aspect-ratio: 3 / 4 !important; height: auto !important; }
body .sf-card-img-box { aspect-ratio: 3 / 4 !important; height: auto !important; }
/* 11/10/2026 (k837): la foto de la subfamilia SIEMPRE entera (ya viene en 3:4, 600x800): sin recortar ni ampliar al pasar el raton */
body .sf-card-img { object-fit: contain !important; object-position: center center !important; }
body .sf-card:hover .sf-card-img { transform: none !important; }
body .ec-difumina > .ec-difu { display: none !important; }
/* ---- 05/10/2026 (k480b): los parrafos que siguen a la entrada de un texto SEO con foto, debajo a dos columnas ---- */
.h26-ed-mas { columns: 2; column-gap: 56px; margin-top: 34px; }
.h26-ed .h26-ed-mas > p { margin: 0 0 14px !important; text-align: left !important; font-size: inherit !important; line-height: inherit !important; break-inside: avoid; }
@media (max-width: 900px) { .h26-ed-mas { columns: 1; margin-top: 22px; } }
/* ---- 05/10/2026 (k480c): en las dos columnas de los textos SEO, un parrafo sigue en la de al lado ---- */
.h26-ed .h26-ed-mas > p, .h26-ed-sinfoto .h26-ed-intro > p { break-inside: auto !important; orphans: 3; widows: 3; }
/* ---- 05/10/2026 (k484): el banner de tres fotos DENTRO del marco de la pagina (de su borde izquierdo al
   derecho, como las secciones) y de 350 px de alto, tambien en el movil (alli se pasan de lado). ---- */
.contenidoprincipal.home26 > .h26-bn3 { margin: 30px 0 38px !important; gap: 4px; }
.contenidoprincipal.home26 > .h26-bn3 .h26-bn3-c { height: 350px !important; }
.h26-bn3-txt { left: clamp(18px, 2.4vw, 34px); right: 16px; bottom: clamp(18px, 2.2vw, 30px); }
.h26-bn3-tit { font-size: clamp(22px, 2vw, 32px); }
.h26-bn3-btn { margin-top: 14px; min-width: 150px; padding: 12px 24px; }
@media (max-width: 1120px) {
    .h26-bn3-tit { font-size: 22px; }
    .h26-bn3-btn { min-width: 0; padding: 11px 18px; }
}
@media (max-width: 760px) {
    .contenidoprincipal.home26 > .h26-bn3, .contenidoprincipal.home26 > .h26-bn3.h26-bn3-n2 { margin: 22px 0 28px !important; grid-auto-columns: 86%; }
    .contenidoprincipal.home26 > .h26-bn3 .h26-bn3-c { height: 350px !important; }
    .h26-bn3-tit { font-size: 25px; }
}
/* ---- 05/10/2026 (k485): en la franja, el TRIPLE de espacio entre el buscador y la linea de debajo
   (antes 22, 16 y 12 px segun el ancho; ahora 66, 48 y 36). ---- */
body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 66px; }
@media (min-width: 1121px) and (max-width: 1365px) {
    body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 48px; }
}
@media (min-width: 1121px) and (max-width: 1279px) {
    body .contenidoprincipal.home26 .h26-franja-seo { margin-top: 36px; }
}
/* ---- 05/10/2026 (k486): en "Tecnicas de impresion y personalizacion", el titulo de cada tecnica un poco
   mas grande (16 px, antes 14; en el movil 14,5, antes 13). Los largos, en dos lineas parejas. ---- */
.contenidoprincipal .ec-tech-card .ec-tech-title { font-size: 16px !important; line-height: 1.2 !important; text-wrap: balance; }
@media (max-width: 600px) {
    .contenidoprincipal .ec-tech-card .ec-tech-title { font-size: 14.5px !important; }
}
/* ---- 05/10/2026 (k489): el banner de tres fotos en el movil (hasta 760 px), una debajo de otra, a todo el
   ancho del marco y sin deslizar de lado (antes, un carrusel con la siguiente asomando cortada). ---- */
@media (max-width: 760px) {
    .contenidoprincipal.home26 > .h26-bn3, .contenidoprincipal.home26 > .h26-bn3.h26-bn3-n2, .contenidoprincipal.home26 > .h26-bn3.h26-bn3-n1 { grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; overflow: visible !important; scroll-snap-type: none !important; gap: 6px !important; }
    .contenidoprincipal.home26 > .h26-bn3 .h26-bn3-c { height: 250px !important; scroll-snap-align: none; }
    .h26-bn3-txt { left: 18px; right: 18px; bottom: 18px; }
    .h26-bn3-tit { font-size: 24px; }
    .h26-bn3-precio { margin-top: 5px; font-size: 14px; }
    .h26-bn3-btn { margin-top: 12px; padding: 10px 18px; font-size: 11.5px; }
}
/* ---- 05/10/2026 (k488): VER TODO en las paginas de familia, debajo de las subfamilias (k488b: con mas peso que ".contenidoprincipal a"; todos sus
   articulos en un listado, familia/{CF}/{slug}/todo). ---- */
.sf-ver-todo { display: flex; justify-content: center; margin: 6px 0 34px; }
body .contenidoprincipal a.sf-ver-todo-btn { display: inline-flex; align-items: center; gap: 14px; min-width: 300px; justify-content: center; padding: 15px 30px; border-radius: 10px; background: #002147; color: #fff !important; text-decoration: none !important; box-shadow: 0 8px 22px rgba(0,33,71,.22); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
body .contenidoprincipal a.sf-ver-todo-btn:hover { color: #fff !important; background: #005a9c; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,90,156,.28); }
body .contenidoprincipal a.sf-ver-todo-btn:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.sf-vt-t { font: 800 15px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .12em; }
.sf-vt-n { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font: 600 12.5px/1 Inter, 'Segoe UI', Arial, sans-serif; color: #dbeafe; }
body .contenidoprincipal a.sf-ver-todo-btn svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s ease; }
body .contenidoprincipal a.sf-ver-todo-btn:hover svg { transform: translateX(3px); }
@media (max-width: 600px) {
    .sf-ver-todo { margin: 2px 0 26px; }
    body .contenidoprincipal a.sf-ver-todo-btn { width: 100%; min-width: 0; padding: 14px 18px; }
}
/* ---- 05/10/2026 (k490): el fondo de la franja, de admin-home.asp (Ajustes > Franja): degradado o color
   solido (variables --h26-fr-* en la propia franja, contenidohome.asp) y el destello, si o no. Con un fondo
   claro (h26-fr-clara), el texto en oscuro. ---- */
body .contenidoprincipal.home26 .h26-franja.h26-fr-conf { background-color: var(--h26-fr-base, #0f172a); background-image: var(--h26-fr-img, none); }
body .contenidoprincipal.home26 .h26-franja.h26-fr-conf::before { background: var(--h26-fr-luz, rgba(14,165,233,.20)); }
body .contenidoprincipal.home26 .h26-franja.h26-fr-sinbrillo::before { display: none; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara { color: #0f172a; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-h1 { color: #0f172a !important; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-p { color: #334155 !important; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-eti { background: rgba(15,23,42,.07); color: #0f172a; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-eti svg { color: #0369a1; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-bus input { box-shadow: 0 0 0 1px rgba(15,23,42,.18); }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-seo { color: #334155; border-top-color: rgba(15,23,42,.15); }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-seo strong, body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-seo b { color: #0f172a !important; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-seo a { color: #0369a1 !important; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-pie span { color: #475569; }
body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-pie b, body .contenidoprincipal.home26 .h26-franja.h26-fr-clara .h26-franja-pie a { color: #0f172a !important; }

/* 06/10/2026 (k499): la etiqueta OUTLET en las tarjetas de articulo (como la de la ficha) */
.result-badges .badge-outlet { display: inline-block !important; align-self: flex-start !important; background: #dc2626 !important; color: #fff !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.3 !important; padding: 3px 8px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: .4px !important; font-family: 'Inter','Segoe UI',sans-serif !important; box-shadow: 0 1px 2px rgba(127,29,29,.25) !important; }

/* (k501) las rejillas de articulos en pantallas anchas: 6 y 8 columnas (24 = 4 x 6 = 3 x 8) */
@media (min-width: 1300px) { .results-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (min-width: 1800px) { .results-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } }

/* 06/10/2026 (k502): los filtros elegidos, en la misma fila que los desplegables (el usuario: "Que todo salga
   en una fila y que no haya salto en los filtros seleccionados"): ocupan el hueco hasta "Ordenar" y, si no
   caben, se desplazan de lado; la barra no crece. En el movil, debajo, como antes */
.f26-bar .f26-activos { margin-top: 0; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 2px 0; }
.f26-bar .f26-act, .f26-bar .f26-limpiar { flex: none; white-space: nowrap; }
@media (max-width: 768px) {
    .f26-bar .f26-activos { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; padding: 0; }
}

/* 06/10/2026 (k510): en la pagina de una marca con una categoria o un filtro, el boton para ver todos sus articulos */
.marca-topbar a.marca-ver-todos { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px; background: #002147; color: #fff !important; font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none !important; white-space: nowrap; }
.marca-topbar a.marca-ver-todos:hover { background: #005a9c; color: #fff !important; }

/* 06/10/2026 (k519): el buscador dentro de la pagina de una marca (marcas-online.asp) */
.marca-topbar { flex-wrap: wrap; }
.marca-topbar .marca-topbar-brand { min-width: 210px !important; }
.marca-topbar .marca-topbar-filter { flex-shrink: 1 !important; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.marca-topbar form.marca-buscar { position: relative; display: flex; align-items: center; margin: 0; }
.marca-topbar form.marca-buscar input[type=search] { height: 34px; width: 220px; padding: 0 66px 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font: 500 12.5px 'Inter','Segoe UI',sans-serif; outline: none; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.marca-topbar form.marca-buscar input[type=search]::-webkit-search-cancel-button { display: none; }
.marca-topbar form.marca-buscar input[type=search]:focus { border-color: #005a9c; box-shadow: 0 0 0 3px rgba(0,90,156,.12); }
.marca-topbar form.marca-buscar button { position: absolute; right: 3px; top: 3px; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: #002147; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.marca-topbar form.marca-buscar button:hover { background: #005a9c; }
.marca-topbar form.marca-buscar a.marca-buscar-x { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); padding: 2px 5px; color: #94a3b8 !important; font-size: 18px; line-height: 1; text-decoration: none !important; }
.marca-topbar form.marca-buscar a.marca-buscar-x:hover { color: #dc2626 !important; }
@media (max-width: 768px) {
    .marca-topbar form.marca-buscar { flex: 1 1 100%; }
    .marca-topbar form.marca-buscar input[type=search] { width: 100%; height: 38px; font-size: 16px; }
    .marca-topbar form.marca-buscar button { height: 32px; }
    .marca-topbar .marca-topbar-filter .filter-select { flex: 1 1 40%; min-width: 0 !important; }
    .marca-topbar .marca-topbar-filter a.marca-ver-todos { flex: 1 1 100%; justify-content: center; }
}

/* 08/10/2026 (k604): los distintivos de los articulos (includes/_distintivos.asp): en la tarjeta, junto al OUTLET; en la
   ficha, en la linea de la referencia; y los destacados de la barra de filtros (OUTLET | RECOMENDADOS | SUPER VENTAS | BASICOS) */
.badge-dist { display: inline-block !important; align-self: flex-start !important; color: #fff !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.3 !important; padding: 3px 8px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: .4px !important; font-family: 'Inter','Segoe UI',sans-serif !important; box-shadow: 0 1px 2px rgba(15,23,42,.25) !important; }
.badge-dist-rec { background: #15803d !important; }
.badge-dist-top { background: #ea580c !important; }
.badge-dist-bas { background: #475569 !important; }
/* 16/10/2026 (k1067): IMPRESION INCLUIDA (el precio ya lleva la personalizacion), como los distintivos; el mismo color que en la ficha */
.badge-incl { display: inline-block !important; align-self: flex-start !important; background: #0f766e !important; color: #fff !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.3 !important; padding: 3px 8px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: .4px !important; font-family: 'Inter','Segoe UI',sans-serif !important; box-shadow: 0 1px 2px rgba(15,23,42,.25) !important; cursor: help; }
.pro-img-box > .badge-incl { position: absolute !important; bottom: 8px; left: 8px; z-index: 2; }
.badge-dist-top::before { content: "\2605\00a0"; }
.pro-img-box > .badge-dist { position: absolute !important; top: 8px; left: 8px; z-index: 2; }
.dist-chip { color: #fff; padding: 1px 6px; border-radius: 3px; font-weight: bold; font-size: 9px; letter-spacing: .3px; cursor: help; text-transform: uppercase; }
.dist-chip-rec { background: #15803d; }
.dist-chip-top { background: #ea580c; }
.dist-chip-bas { background: #475569; }
.f26-dest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f26 a.f26-dest-c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a !important; font: 700 12px/1.2 'Inter','Segoe UI',sans-serif; text-transform: uppercase; letter-spacing: .3px; text-decoration: none !important; white-space: nowrap; }
.f26 a.f26-dest-c b { padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; }
.f26 a.f26-dest-c:hover { border-color: #94a3b8; }
.f26 a.f26-dest-out { border-color: #fecaca; color: #b91c1c !important; }
.f26 a.f26-dest-rec { border-color: #bbf7d0; color: #15803d !important; }
.f26 a.f26-dest-top { border-color: #fed7aa; color: #c2410c !important; }
.f26 a.f26-dest-bas { border-color: #cbd5e1; color: #475569 !important; }
.f26 a.f26-dest-c.on { color: #fff !important; }
.f26 a.f26-dest-out.on { background: #dc2626; border-color: #dc2626; }
.f26 a.f26-dest-top.on { background: #ea580c; border-color: #ea580c; }
.f26 a.f26-dest-rec.on { background: #15803d; border-color: #15803d; }
.f26 a.f26-dest-bas.on { background: #475569; border-color: #475569; }
.f26 a.f26-dest-inc { border-color: #99f6e4; color: #0f766e !important; }   /* (k1069) */
.f26 a.f26-dest-inc.on { background: #0f766e; border-color: #0f766e; }
.f26 a.f26-dest-c.on b { background: rgba(255,255,255,.25); color: #fff; }
.dist-aviso { margin: 2px 0 14px; padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; }
.dist-aviso-rec { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.dist-aviso-top { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
@media (max-width: 768px) { .f26-dest { flex: 1 1 100%; } .f26 a.f26-dest-c { padding: 5px 9px; font-size: 11px; } }

/* 10/10/2026 (k781): el menu CATALOGO por grupos en el ordenador: columnas en las que un grupo no se parte (antes
   Ropa Deportiva empezaba al pie de una y seguia en la otra); el titulo "Catalogo" sobra con las franjas */
@media (min-width: 1121px) {
    body.mega-on .menuizquierda .sidebar-content.sc-grupos { display: block !important; }
    body.mega-on .menuizquierda .sc-grupos > .side-header:first-child { display: none !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-bloques { display: block !important; columns: 5 210px !important; column-gap: 30px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-grupo { display: block !important; break-inside: avoid !important; margin: 0 0 18px !important; }   /* (k781b) en bloque: asi Chrome reparte bien */
    body.mega-on .menuizquierda .sc-grupos .cat-grupo .cat-vertical { columns: auto !important; display: block !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-grupo-otro .side-header { margin: 2px 0 6px !important; }
    body.mega-on .menuizquierda .sc-grupos > .opinion-highlight { display: inline-block !important; margin-top: 4px !important; }
}

/* 10/10/2026 (k784): las tarjetas de subfamilias (familia/N/...) y de familias (grupo/N/...) a 8 columnas (el usuario:
   "8 columnas por x filas"); de 1.121 a 1.279 px, 6. Detras de las de 4 y 6 (k471) para ganarles */
@media (min-width: 1121px) {
    body .sf-grid { gap: 16px !important; }
    body .sf-grid > * { width: calc((100% - 80px) / 6) !important; }
    body .contenidoprincipal .sf-card h3.sf-card-name, body .sf-card h3.sf-card-name { font-size: 13px !important; padding: 9px 8px 2px !important; }
    body .sf-card-count { font-size: 10.5px !important; padding: 0 8px 10px !important; }
}
@media (min-width: 1280px) {
    body .sf-grid > * { width: calc((100% - 112px) / 8) !important; }
}

/* 10/10/2026 (k789): las OFERTAS del catalogo, en su marco con su titulo (el usuario: "envolverlas en un marco con los
   cantos redondeados y poner un titulo que indique Ofertas Destacadas") y del tamanyo de los articulos: sus columnas,
   las de .results-grid (4, 6 y 8) */
.cat-ofertas { border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; padding: 18px 18px 20px; margin: 28px 0 30px; }
.contenidoprincipal .cat-ofertas h2.cat-ofertas-tit, .cat-ofertas-tit { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; padding: 0 !important;
    font: 800 19px/1.2 Inter, 'Segoe UI', Arial, sans-serif !important; color: #002147 !important; letter-spacing: -.2px; text-align: left !important; border: 0 !important; background: none !important; }
.cat-ofertas-tit::before { content: ""; flex: 0 0 auto; width: 5px; height: 20px; border-radius: 3px; background: #d32f2f; }
.cat-ofertas .ec26-card-grid { margin: 0 !important; }
@media (min-width: 1121px) { body .cat-ofertas .ec26-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1300px) { body .cat-ofertas .ec26-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (min-width: 1800px) { body .cat-ofertas .ec26-card-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .cat-ofertas { padding: 12px 10px 14px; border-radius: 12px; } .cat-ofertas-tit { font-size: 16px !important; } }
/* 10/10/2026 (k789): los badges de la tarjeta no tapan al modelo (el usuario): la marca y el outlet/oferta arriba, en una
   fila; el distintivo (Recomendado, Super ventas, Basico) abajo. El ::after parte la fila antes del distintivo */
body .result-img-box .result-badges { top: 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: space-between !important;
    align-items: flex-start !important; gap: 4px !important; pointer-events: none !important; }
body .result-img-box .result-badges > * { flex: 0 0 auto !important; margin: 0 !important; }
body .result-img-box .result-badges::after { content: "" !important; order: 9 !important; flex: 0 0 100% !important; height: 0 !important; }
body .result-img-box .result-badges > .badge-dist { order: 10 !important; align-self: flex-end !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .18) !important; }

/* 10/10/2026 (k790): los destacados de la barra de filtros (OUTLET | RECOMENDADOS | SUPER VENTAS | BASICOS), como el
   badge de la tarjeta (el usuario: "mas pequenos al igual que como aparecen en las cards"): macizos, 9,5 px y esquinas
   de 4 px; el elegido, con su aro y una X para quitarlo */
.f26 a.f26-dest-c { gap: 5px !important; padding: 3px 8px !important; border-radius: 4px !important; border: 0 !important;
    font: 800 9.5px/1.3 'Inter','Segoe UI',sans-serif !important; letter-spacing: .4px !important; color: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.25) !important; transition: filter .15s, box-shadow .15s; }
.f26 a.f26-dest-out { background: #dc2626 !important; }
.f26 a.f26-dest-top { background: #ea580c !important; }
.f26 a.f26-dest-rec { background: #15803d !important; }
.f26 a.f26-dest-bas { background: #475569 !important; }
.f26 a.f26-dest-inc { background: #0f766e !important; }   /* (k1069) impresion incluida, el de la tarjeta */
.f26 a.f26-dest-top::before { content: "\2605"; }
.f26 a.f26-dest-c b { padding: 0 !important; border-radius: 0 !important; background: none !important; color: rgba(255,255,255,.82) !important;
    font-size: 9.5px !important; font-weight: 600 !important; }
.f26 a.f26-dest-c:hover { filter: brightness(1.1); }
.f26 a.f26-dest-c.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0f172a !important; }
.f26 a.f26-dest-c.on b { background: none !important; color: #fff !important; }
.f26 a.f26-dest-c.on::after { content: "\2715"; font-weight: 700; opacity: .9; }
@media (max-width: 768px) { .f26 a.f26-dest-c { padding: 4px 9px !important; font-size: 10px !important; } .f26 a.f26-dest-c b { font-size: 10px !important; } }

/* 10/10/2026 (k791): Ordenar y, a su derecha, los destacados (el usuario), juntos a la derecha de la barra; en el movil,
   uno debajo de otro */
.f26-bar > .f26-dcha { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.f26-dcha .f26-orden { margin-left: 0 !important; }
.f26-dcha .f26-dest { flex: 0 1 auto !important; }
/* (k791b) los elegidos con su ancho ("Quitar filtros" entero): si no cabe la fila, Ordenar y los destacados bajan */
@media (min-width: 769px) { .f26-bar .f26-activos { flex: 0 1 auto !important; max-width: 100%; } .f26-bar > .f26-dcha { flex: 0 0 auto; } }
@media (max-width: 768px) {
    .f26-bar > .f26-dcha { margin-left: 0; width: 100%; justify-content: flex-start; gap: 8px; }
    .f26-dcha .f26-orden { width: 100%; }
    .f26-dcha .f26-dest { flex: 1 1 100% !important; }
}

/* 12/10/2026 (k935): el menu CATALOGO mas bajo (el usuario: "es demasiado alto"): de 918 px a la mitad. Lineas de 24 px
   (sin la raya de cada una; fondo al pasar), menos aire entre grupos y 6 columnas en pantallas anchas */
@media (min-width: 1121px) {
    body.mega-on .menuizquierda .sc-grupos .cat-bloques { columns: 6 150px !important; column-gap: 18px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-grupo { margin: 0 0 12px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-grupo-tit { margin: 0 0 3px !important; padding: 0 2px 4px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link { padding: 3px 8px !important; font-size: 13.5px !important; line-height: 18px !important; border-bottom: 0 !important; border-radius: 6px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link:hover, body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link:focus-visible { background: #eef4fb !important; color: #002147 !important; }
}
@media (min-width: 1400px) {
    body.mega-on .menuizquierda .sc-grupos .cat-bloques { columns: 6 190px !important; column-gap: 24px !important; }
}
@media (min-width: 1121px) and (max-width: 1399px) {
    body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link { font-size: 12.5px !important; padding: 3px 6px !important; }
    body.mega-on .menuizquierda .sc-grupos .cat-grupo-tit { font-size: 10.5px !important; letter-spacing: .05em !important; }
}

/* 12/10/2026 (k942): LA 2.a FILA DEL MENU (los grupos de la base, sin desplegables): una banda azul marino debajo de la de
   siempre; en el movil y la tableta, en una linea que se desliza con el dedo. Y el desplegable de SECTORES */
#header-final .nav-grupos { background: #002147; }
#header-final .ng-ul { list-style: none; margin: 0 auto; padding: 0 12px; display: flex; justify-content: safe center; align-items: stretch; max-width: 1600px; }
#header-final .ng-ul > li { margin: 0; padding: 0; }
/* 13/10/2026 (k980): la segunda fila centrada en el mismo eje que la primera (el usuario: "Segunda fila de menu ... centrado
   con el menu de la primera fila en vertical"): su "margin: 0 auto" lo pisaba otra hoja (margin 0) y, en pantallas de mas de
   1600 px, la fila se quedaba a la izquierda (a 1920 px, su centro 152 px a la izquierda del de la primera) */
#header-final .nav-grupos .ng-ul { margin-left: auto !important; margin-right: auto !important; }
#header-final .ng-a { display: block; padding: 11px clamp(10px, calc(10px + (100vw - 1121px) * .012), 18px); font: 700 13px/1.2 Inter, 'Segoe UI', Arial, sans-serif; color: rgba(255,255,255,.9) !important; text-transform: uppercase; letter-spacing: .04em; text-decoration: none !important; white-space: nowrap; border-bottom: 3px solid transparent; }
#header-final .ng-a:hover, #header-final .ng-a:focus-visible { color: #fff !important; background: rgba(255,255,255,.1); }
#header-final .ng-a.ng-on { color: #fff !important; border-bottom-color: #4fb3ff; background: rgba(255,255,255,.08); }
/* 13/10/2026 (k972): los grupos en negrita de verdad (estilos2026.css: "#header-final a {font-weight:inherit !important}"), salvo NOVEDADES */
#header-final .ng-a { font-weight: 700 !important; font-size: 13px !important; }
#header-final .ng-a.ng-nov { font-weight: 400 !important; }
/* (k972) y los desplegables de la primera fila, tambien con las esquinas rectas */
#header-final .dropdown-box { border-radius: 0 !important; }
@media (max-width: 1120px) {
    #header-final .ng-ul { justify-content: safe center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 6px; }   /* (k972) centrada si cabe (antes, a la izquierda) */
    #header-final .ng-ul::-webkit-scrollbar { display: none; }
    #header-final .ng-a { padding: 10px 12px; font-size: 12px; }
}
#header-final .dropdown-sectores { min-width: 320px; padding: 6px 0; }
#header-final .dropdown-sectores .drop-link { white-space: normal; line-height: 1.35; }
/* (k1323) el icono de cada sector, delante de su nombre */
#header-final .dropdown-sectores .drop-link { display: flex; align-items: center; gap: 9px; }
#header-final .dropdown-sectores .ds-ico { width: 18px; height: 18px; flex: 0 0 18px; color: #005a9c; margin-right: 0 !important; }
#header-final .dropdown-sectores .drop-link:hover .ds-ico { color: inherit; }
#header-final .dropdown-sectores .drop-sect-todos { font-weight: 700; color: #005a9c; border-top: 1px solid #e2e8f0; margin-top: 4px; }
@media (min-width: 1121px) {
    /* (k1403) el usuario: "El submenu de SECTORES genera scroll horizontal ... muestralo hacia la izquierda": con LA TIENDA
       detras ya no es el ultimo del menu y se abria hacia la derecha (600 px), fuera de la pantalla: siempre hacia la izquierda */
    #header-final .nav-ul > li > .dropdown-sectores { left: auto; right: 0; }
}

/* 12/10/2026 (k943): las tarjetas de subfamilia, del mismo alto en cada fila: el nombre ocupa el alto que sobra (centrado) y
   "x articulos" va siempre abajo, alineado con el de al lado (el usuario: "las cards todas con la misma altura ... el titulo
   y x articulos alineados a la horizontal") */
body .sf-card { display: flex !important; flex-direction: column !important; }
body .sf-card .sf-card-img-box { flex: none !important; }
body .contenidoprincipal .sf-card h3.sf-card-name, body .sf-card h3.sf-card-name { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body .sf-card .sf-card-count { flex: none !important; }

/* 12/10/2026 (k947): NOVEDADES, al final de la 2.a fila, en ambar */
#header-final .ng-li-nov { margin-left: 6px; }
#header-final .ng-a.ng-nov { color: #fbbf24 !important; }
#header-final .ng-a.ng-nov:before { content: "\2605"; margin-right: 6px; font-size: 11px; }
#header-final .ng-a.ng-nov:hover { color: #fde68a !important; }

/* 12/10/2026 (k948): los desplegables de la 2.a fila (solo en el ordenador): sus subfamilias; en Ropa Personalizada, cada
   familia con las suyas, en columnas a todo el ancho. Y Sectores en dos columnas */
#header-final .nav-grupos { position: relative; }
#header-final .ng-drop { display: none; }
@media (min-width: 1121px) {
    #header-final .ng-li { position: relative; }
    #header-final .ng-li.ng-con-mega { position: static; }
    #header-final .ng-con > .ng-a:after { content: "\25BE"; margin-left: 6px; font-size: 10px; opacity: .7; }
    #header-final .ng-con:hover > .ng-a { color: #fff !important; background: rgba(255,255,255,.12); }
    #header-final .ng-con:hover > .ng-drop { display: block; }
    #header-final .ng-drop { position: absolute; top: 100%; left: 0; z-index: 1100; background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #005a9c; border-radius: 0; box-shadow: 0 18px 36px rgba(15,23,42,.18); padding: 14px 18px 10px; text-align: left; }
    #header-final .ng-drop.ng-lista { min-width: 300px; }
    #header-final .ng-drop.ng-lista .ng-drop-in { columns: 2 150px; column-gap: 24px; }
    #header-final .ng-drop.ng-lista .ng-fam-t { display: none; }
    #header-final .ng-drop.ng-mega { left: 50%; transform: translateX(-50%); width: min(1500px, calc(100vw - 40px)); padding: 18px 24px 12px; }
    #header-final .ng-drop.ng-mega .ng-drop-in { columns: 6 170px; column-gap: 26px; }
    #header-final .ng-fam { break-inside: avoid; margin: 0 0 12px; }
    #header-final .ng-fam-t { display: block; font: 800 13.5px/1.3 Inter, 'Segoe UI', Arial, sans-serif; color: #002147 !important; text-decoration: none !important; padding: 3px 6px 5px; border-bottom: 2px solid #d5e3f1; margin: 0 0 4px; }
    #header-final .ng-fam-t:hover { color: #005a9c !important; }
    /* 12/10/2026 (k955): en negrita de verdad (estilos2026.css: "#header-final a {font-weight:inherit !important}"; Inter, hasta 700) */
    #header-final .ng-drop .ng-fam-t { font-weight: 700 !important; font-size: 14.5px !important; }
    /* (k955) los destacados (admin-home.asp > Ajustes > Destacados del menu), con su estrella */
    /* (k972) las de estrella, sin negrita (como las demas) */
    /* 13/10/2026 (k957): a la izquierda, en el margen, sin mover el texto (todos alineados) */
    #header-final .ng-drop .ng-sub, #header-final .ng-drop .ng-fam-t { position: relative; }
    #header-final .ng-drop .ng-est { position: absolute; left: -9px; top: 50%; transform: translateY(-52%); color: #f59e0b; font-size: 11px; line-height: 1; margin: 0; }
    #header-final .ng-drop .ng-fam-t .ng-est { font-size: 11.5px; }
    #header-final .ng-sub { display: block; font: 500 13px/1.35 Inter, 'Segoe UI', Arial, sans-serif; color: #334155 !important; text-decoration: none !important; padding: 4px 6px; border-radius: 6px; break-inside: avoid; }
    #header-final .ng-sub:hover { background: #eef4fb; color: #002147 !important; }
    #header-final .ng-sub.ng-tras { font-weight: 700 !important; }
    #header-final .ng-sub.ng-fp { border-top: 1px solid #cbd5e1; border-radius: 0 0 6px 6px; margin-top: 6px; padding-top: 8px; }   /* (k1610) el full print, al final y con su raya */   /* (k1218) Camisetas Tecnicas en Ropa Personalizada, en negrita (estilos2026.css hereda con !important) */
    /* 25/10/2026 (k1225): EL DESPLEGABLE LARGO (mas de 16 subfamilias: Ropa Laboral), en dos columnas (en una no cabia en la
       pantalla), y cada subfamilia paraguas (Hosteleria y Cocina, Ropa Sanitaria, Pantalones de Trabajo) en negrita con
       las suyas debajo, sangradas */
    #header-final .ng-drop.ng-lista.ng-larga { width: 560px; }
    #header-final .ng-drop.ng-lista.ng-larga .ng-drop-in { columns: 2; column-gap: 20px; }
    #header-final .ng-drop.ng-lista.ng-larga .ng-fam { break-inside: auto; margin: 0 0 6px; }
    #header-final .ng-par { break-inside: avoid; margin: 1px 0 5px; }
    #header-final .ng-sub.ng-par-t { font-weight: 700 !important; color: #002147 !important; }
    #header-final .ng-sub.ng-hija { padding-left: 21px; font-size: 12.5px; }
    #header-final .ng-sub.ng-hija:before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; border-top: 1px solid #94a3b8; }
    #header-final .ng-todo { display: block; border-top: 1px solid #e2e8f0; margin-top: 6px; padding: 9px 6px 2px; font: 700 13px Inter, 'Segoe UI', Arial, sans-serif; color: #005a9c !important; text-decoration: none !important; }
    #header-final .dropdown-sectores { columns: 2 250px; column-gap: 0; width: 600px; }
    #header-final .dropdown-sectores .drop-link { break-inside: avoid; }
    #header-final .dropdown-sectores .drop-sect-todos { column-span: all; }
}

/* 13/10/2026 (k982): EL MENU DEL MOVIL Y LA TABLETA (hasta 1.120 px: en la tableta la 1.a fila ya no cabia y sus
   desplegables son de raton). El usuario: "El menu para movil ten en cuenta que ya seria lo que
   tenemos en MENU (las dos filas de opciones)". Un boton MENU debajo del buscador abre un panel lateral con las dos filas
   (cabecera.asp lo hace con sus enlaces): la 1.a con sus desplegables (Impresion, Marcas, Sectores) y la 2.a con los grupos,
   sus familias y subfamilias. Fuera, en el movil, las dos filas sueltas y el CATALOGO de la izquierda (menu.asp). Sin
   JavaScript (sin "mm-listo"), todo como antes */
#header-final .mm-barra { display: none; }
#mm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; }
#mm[hidden] { display: none !important; }
#mm .mm-velo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15,23,42,.55); opacity: 0; transition: opacity .2s ease; }
#mm .mm-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff; box-shadow: 0 0 40px rgba(15,23,42,.3); transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column; font-family: Inter, 'Segoe UI', system-ui, Arial, sans-serif; }
#mm.mm-on .mm-velo { opacity: 1; }
#mm.mm-on .mm-panel { transform: none; }
#mm .mm-cab { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px 18px; background: #002147; }
#mm .mm-cab b { font: 800 14px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
#mm .mm-x { width: 40px; height: 40px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; }
#mm .mm-cuerpo { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
#mm .mm-sec { padding: 16px 18px 7px; font: 800 11px/1.2 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
#mm ul.mm-ul { list-style: none; margin: 0; padding: 0; }
#mm .mm-li { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #eef2f6; }
#mm .mm-fila { display: flex; align-items: stretch; }
#mm a.mm-a { flex: 1 1 auto; min-width: 0; display: block; padding: 13px 18px; font: 600 15px/1.3 Inter, 'Segoe UI', Arial, sans-serif; color: #0f172a !important; text-decoration: none !important; }
#mm a.mm-a.mm-esp, #mm a.mm-a.mm-g { font-weight: 700; }
#mm a.mm-a.mm-g { text-transform: uppercase; font-size: 13.5px; letter-spacing: .04em; color: #002147 !important; }
#mm a.mm-a.mm-act { box-shadow: inset 4px 0 0 #4fb3ff; background: #f0f7ff; }
#mm a.mm-a.mm-nov { color: #b45309 !important; }
#mm a.mm-a.mm-nov:before { content: "\2605"; margin-right: 7px; font-size: 12px; }
#mm .mm-abre { flex: 0 0 54px; position: relative; border: 0; border-left: 1px solid #eef2f6; background: transparent; cursor: pointer; padding: 0; }
#mm .mm-abre span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 2px solid #475569; border-bottom: 2px solid #475569; transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s ease; }
#mm .mm-abre[aria-expanded="true"] { background: #f1f5f9; }
#mm .mm-abre[aria-expanded="true"] span { transform: translate(-50%, -25%) rotate(-135deg); }
#mm .mm-sub { background: #f8fafc; border-top: 1px solid #eef2f6; padding: 4px 0 12px; }
#mm .mm-sub[hidden] { display: none !important; }
#mm .mm-tit { display: block; padding: 12px 18px 4px 28px; font: 800 10.5px/1.2 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
#mm a.mm-ft { display: block; padding: 12px 18px 5px 28px; font: 700 14px/1.3 Inter, 'Segoe UI', Arial, sans-serif; color: #002147 !important; text-decoration: none !important; }
#mm a.mm-l { display: block; padding: 8px 18px 8px 28px; font: 500 14px/1.35 Inter, 'Segoe UI', Arial, sans-serif; color: #334155 !important; text-decoration: none !important; }
#mm a.mm-l.mm-l2 { padding-left: 40px; font-size: 13.5px; }
#mm a.mm-l.mm-tras { font-weight: 700; }
#mm a.mm-l.mm-fp { border-top: 1px solid #cbd5e1; margin-top: 6px; padding-top: 10px; }   /* (k1610) */   /* (k1218) y en el menu del movil */
#mm a.mm-l.mm-par { font-weight: 700; }   /* (k1225) la subfamilia paraguas y las suyas, sangradas */
#mm a.mm-l.mm-hija { padding-left: 44px; font-size: 13.5px; }
#mm a.mm-l.mm-prem { color: #78350f !important; font-weight: 600; }
#mm a.mm-l.mm-prem:before { content: "\2605"; color: #d97706; font-size: 11px; margin-right: 6px; }
#mm a.mm-todo { display: block; margin: 8px 18px 0 28px; padding: 10px 0 2px; border-top: 1px solid #e2e8f0; font: 700 13.5px/1.3 Inter, 'Segoe UI', Arial, sans-serif; color: #005a9c !important; text-decoration: none !important; }
#mm a:active { background: #eef4fb; }
html.mm-bloq, html.mm-bloq body { overflow: hidden !important; }
@media (max-width: 1120px) {
    #header-final .mm-barra { display: block; padding: 4px 12px 10px; background: #fff; }
    #header-final .mm-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 10px; background: #002147; color: #fff; font: 800 14px/1 Inter, 'Segoe UI', Arial, sans-serif; letter-spacing: .1em; cursor: pointer; }
    #header-final .mm-ham { display: inline-flex; flex-direction: column; gap: 4px; }
    #header-final .mm-ham i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }
    html.mm-listo #header-final .nav-clean, html.mm-listo #header-final .nav-grupos { display: none !important; }
    html.mm-listo .menuizquierda { display: none !important; }
}

/* 17/10/2026 (k1079): LAS ETIQUETAS DE LAS TARJETAS, EN SU FRANJA (el usuario: "hay veces que aparecen desalineadas y a
   veces tapan las fotos del articulo"). Arriba, en una sola fila, todas del mismo alto y a la misma altura en todas las
   tarjetas, y la foto debajo: ninguna encima. Las que no caben las quita js/ec-tarjetas.js, de la ultima a la primera (la
   marca antes que la impresion incluida, el distintivo o el outlet), nunca a medias. En la portada, igual en las filas que
   llevan alguna (asi todas las fotos de una fila miden lo mismo) */
/* (k1089) sin sitio reservado encima de la foto: las fotos, como antes de hoy (el usuario: "antes de hoy salia todo bien") */
body .result-img-box > .result-badges,
body .contenidoprincipal .pro-img-box > .result-badges {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    height: 28px !important; padding: 5px 8px !important; box-sizing: border-box !important; background: transparent !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important;
    align-content: normal !important; justify-content: flex-start !important; gap: 4px !important; overflow: hidden !important;
    z-index: 3 !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; }
body .result-img-box > .result-badges::after { content: none !important; display: none !important; }
body .result-img-box > .result-badges > *,
body .contenidoprincipal .pro-img-box > .result-badges > * {
    position: static !important; flex: 0 0 auto !important; order: 0 !important; align-self: center !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; height: 18px !important; padding: 0 7px !important;
    box-sizing: border-box !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important;
    letter-spacing: .3px !important; border-radius: 4px !important; white-space: nowrap !important; box-shadow: none !important; }
body .result-card:hover .result-badges,
body .pro-card:hover .result-badges { opacity: 1 !important; }

/* 25/10/2026 (k1225): en el CATALOGO de la izquierda (menu.asp), cada subfamilia paraguas (Hosteleria y Cocina, Ropa
   Sanitaria, Pantalones de Trabajo) en negrita con las suyas debajo, sangradas */
.menuizquierda .cat-vertical ul.cat-hijas { list-style: none; margin: 0 0 3px; padding: 0 0 0 12px; }
.menuizquierda .cat-vertical ul.cat-hijas > li { list-style: none; margin: 0; }
.menuizquierda .cat-vertical li a.cat-link.cat-par, body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link.cat-par { font-weight: 700 !important; }
.menuizquierda .cat-vertical li a.cat-link.cat-hija, body.mega-on .menuizquierda .sc-grupos .cat-vertical li a.cat-link.cat-hija { font-size: 12.5px !important; }
/* (k1441e, 02/11/2026) en el movil, los campos a 16 px: con menos, el iPhone amplia la pagina al pulsarlos (el buscador
   de la cabecera, Mi cuenta, Mi presupuesto...). Los de numero (las rejillas de tallas), como estaban. */
@media (max-width: 768px) {
  /* :not(#k1441e) no existe: solo sube el peso de la regla por encima de las de clase con !important (.mdl-sel...) */
  input[type="text"]:not(#k1441e), input[type="email"]:not(#k1441e), input[type="tel"]:not(#k1441e), input[type="password"]:not(#k1441e), input[type="search"]:not(#k1441e),
  input[type="url"]:not(#k1441e), input:not([type]):not(#k1441e), select:not(#k1441e), textarea:not(#k1441e) { font-size: 16px !important; }
}