/* ============================================================ SUMIVAL · Capa global (common.css) Registrada como `sumival-common` en theme.yml — priority 100. Se carga DESPUÉS de theme.css de Hummingbird (priority 50). Contiene: tokens, reset, utilidades, botones, header, mega menú, footer, drawer, carrito, buscador, toast y capa B2B. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ---------- Tokens ---------- */ :root{ /* Marca */ --navy-900:#082C63; --navy-800:#093F95; /* azul corporativo */ --blue-600:#1A5FBE; /* acento UI */ --band-end:#0B4AA6; /* final del degradado de bandas azules */ --accent:#F26A21; /* acento CTA */ --accent-600:#B2470E; /* texto naranja AA sobre blanco y accent-soft */ --accent-soft:#FBEADE; --accent-line:#F3CFB6; /* borde de aviso */ /* Estado */ --ok:#1A7A43; /* disponible / éxito — AA sobre blanco y ok-soft */ --ok-soft:#E7F6EC; --error:#C6303E; /* error de formulario/validación — distinto del naranja de aviso */ --error-soft:#FBEAEC; /* Radio de tarjeta y de control: ver escala de radios más abajo */ /* Tintes azul claro (cabeceras, iconos) */ --tint:#E9F0FB; --tint-2:#F3F7FC; /* Neutros */ --ink:#18212D; --ink-2:#1E2733; /* superficie oscura de acción flotante (chat Sumi) */ --slate-700:#33414F; --slate-600:#4A5568; --slate-500:#56627A; /* texto auxiliar — AA sobre blanco y tintes */ --slate-400:#5F6B7E; /* etiquetas/metadatos — AA sobre blanco y tintes */ --line:#E3E8EF; --line-2:#EDF1F6; --bg:#F2F5F9; --bg-2:#E7EEF6; --white:#FFFFFF; /* Sistema */ --maxw:1400px; --measure:78ch; /* ancho máximo de lectura para texto largo */ --pad:clamp(20px,4vw,48px); /* Radios: escala única del diseño (custom.css de Claude Design), mismos nombres y mismos valores que allí para que un token signifique lo mismo en el diseño y en el código. */ --r-sm:8px; /* badges, miniaturas, iconos pequeños */ --r:14px; /* tarjetas y paneles */ --r-lg:10px; /* botones, inputs y controles (stepper, icon-btn) */ --r-xl:20px; /* bloques grandes y flotantes: hero, buscador, chat */ --r-pill:999px; /* píldoras y contadores */ --r-check:5px; /* casillas de verificación (18px) */ --r-card:var(--r); --r-control:8px; /* Texto y trazos sobre fondos oscuros (navy) — 4 niveles, nada más */ --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.78); /* texto secundario */ --on-dark-3:rgba(255,255,255,.62); /* texto auxiliar / iconos */ --on-dark-line:rgba(255,255,255,.14);/* bordes y separadores */ --on-dark-fill:rgba(255,255,255,.08);/* rellenos sutiles */ --on-dark-fill-2:rgba(255,255,255,.16); /* Marca de fondo (glass) sobre imagen */ --glass:rgba(255,255,255,.92); /* Escala tipográfica — 7 pasos de texto + 3 de título. Nada fuera de aquí. */ --fs-micro:10.5px; /* etiquetas en mayúsculas, sellos */ --fs-xs:11.5px; /* referencias, metadatos, badges */ --fs-sm:12.5px; /* captions, chips, ayudas de formulario */ --fs-ui:14px; /* controles, menús, botones, tablas */ --fs-body:15px; /* texto corrido */ --fs-nav:16px; /* menú principal (≥1280px) */ --fs-lead:17px; /* entradillas, títulos de tarjeta grandes */ --fs-title:20px; /* títulos de componente / panel */ --fs-stat:clamp(24px,2.6vw,30px); /* cifras destacadas (KPIs, totales, contadores grandes) */ --fs-h1:clamp(28px,3.2vw,38px); /* título de página / hero */ --fs-h2:clamp(22px,2.4vw,30px); /* título de sección */ --fs-h3:clamp(17px,1.6vw,20px); /* subtítulo / grupo */ --fw-display:800; --fw-title:700; /* Escala de espaciado (base 4/8) — única fuente de distancias */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;--sp-9:64px; /* Relaciones de ritmo vertical (misma relación = misma distancia en todo el sitio) */ --sp-section:clamp(32px,3.6vw,48px); /* entre bloques / padding vertical de sección */ --sp-section-sm:clamp(24px,2.6vw,32px);/* sección compacta */ --sp-head:var(--sp-6); /* cabecera de sección → contenido */ --sp-stack:var(--sp-3); /* título → texto / entre párrafos */ --sp-card:var(--sp-5); /* padding interno de tarjeta */ /* Retícula */ --cols:12; --gutter:var(--sp-6); /* separación entre columnas y tarjetas */ --sheet-pad:clamp(20px,2.6vw,36px); /* padding lateral de la hoja blanca sobre banda */ /* Altura única de control (botón, stepper, input) */ --h-control:46px; --h-control-sm:38px; /* Sombras: 3 niveles + lateral para paneles deslizantes */ --shadow-card:0 1px 2px rgba(16,32,56,.05),0 8px 24px rgba(16,32,56,.07); /* tarjetas en reposo */ --shadow-card-hover:0 2px 4px rgba(16,32,56,.06),0 18px 40px rgba(16,32,56,.11); --shadow-sm:0 2px 8px rgba(16,32,56,.08); --shadow-md:0 6px 20px rgba(16,32,56,.10); --shadow-lg:0 16px 44px rgba(16,32,56,.16); --shadow-side:-8px 0 40px rgba(16,32,56,.14); --shadow-band:0 18px 40px -22px rgba(9,63,149,.35); /* hoja blanca sobre banda azul */ --shadow-band-bar:0 8px 20px -10px rgba(9,40,94,.45); /* barra fija sobre contenido */ --shadow:var(--shadow-sm); --shadow-xl:var(--shadow-lg); --shadow-rgb:16,32,56; /* base para sombras de superficie (usar rgba(var(--shadow-rgb),alpha)) */ --scrim:rgba(12,22,34,.5); /* fondo oscuro de overlays/scrims (carrito, buscador, quick-view) */ --scrim-rgb:12,22,34; --focus-ring:0 0 0 3px rgba(26,95,190,.16); /* halo de foco (box-shadow completo) */ --focus-ring-error:0 0 0 3px rgba(198,48,62,.14); /* halo de foco en campo con error */ --ease:cubic-bezier(.4,.1,.2,1); --mono:"Inter",system-ui,sans-serif; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} /* clip (no hidden): recorta el desbordamiento horizontal igual pero sin crear contenedor de scroll, que rompería position:sticky (p.ej. el índice legal). */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;} body{overflow-x:clip;} body{ margin:0; font-family:"Inter",system-ui,sans-serif; color:var(--ink); background:var(--bg); font-size:var(--fs-body); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:"Manrope",sans-serif;color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;} p{margin:0;text-wrap:pretty;} ul{margin:0;padding:0;list-style:none;} /* ---------- Utilidades ---------- */ .eyebrow{ font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--slate-500);display:inline-flex;align-items:center;gap:8px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--blue-600);} .eyebrow.muted{color:var(--slate-500);} .eyebrow.muted::before{background:var(--slate-400);} .section{padding-block:clamp(56px,8vw,104px);} .section-head{max-width:900px;margin-bottom:clamp(32px,4vw,52px);} .section-head h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;margin:14px 0 0;} .section-head p{margin-top:16px;font-size:var(--fs-lead);color:var(--slate-600);} .lede{font-size:var(--fs-h3);color:var(--slate-600);line-height:1.55;} /* ---------- Botones ---------- Sistema de 3 niveles, un solo radio (--r-control) y un solo alto por tamaño. 1. Principal .btn-accent / .btn-primary → azul relleno 2. Secundario .btn-ghost / .btn-outline → blanco, borde fino, se tiñe de azul al pasar 3. Sobre azul .btn-light (relleno blanco) / .btn-outline-light (borde blanco) WhatsApp es un secundario con icono de marca. */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);letter-spacing:.005em;line-height:1; padding:0 20px;min-height:var(--h-control);border-radius:var(--r-control);border:1px solid transparent; transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease),transform .08s var(--ease); white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent; } .btn svg{width:17px;height:17px;flex:none;transition:transform .2s var(--ease);} .btn:active{transform:translateY(1px);} .btn:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;} /* Flecha final: se desplaza al pasar (identidad: "avanzar") */ .btn:hover svg:last-child:not(:first-child){transform:translateX(3px);} /* 1 · Principal */ .btn-accent,.btn-primary{background:var(--blue-600);color:#fff;} .btn-accent:hover,.btn-primary:hover{background:var(--navy-800);} /* 2 · Secundario */ .btn-ghost,.btn-outline{background:#fff;color:var(--ink);border-color:var(--line);} .btn-ghost:hover,.btn-outline:hover{border-color:var(--navy-800);color:var(--navy-800);background:var(--tint-2);} .btn-whatsapp{background:#fff;color:var(--ink);border-color:var(--line);} .btn-whatsapp svg{color:#25D366;} .btn-whatsapp:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-soft);} /* 3 · Sobre fondo azul */ .btn-light{background:#fff;color:var(--navy-800);} .btn-light:hover{background:var(--tint);} .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);} .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1);} /* Tamaños */ .btn-sm{padding:0 14px;min-height:var(--h-control-sm);font-size:var(--fs-sm);gap:7px;} .btn-sm svg{width:15px;height:15px;} .btn-block{width:100%;} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow var(--hdr-t) var(--hdr-ease),background-color var(--hdr-t) var(--hdr-ease);} .site-header.is-stuck{box-shadow:var(--shadow-md);} .topbar{overflow:hidden;transition:height .25s var(--ease),opacity .2s var(--ease);} .site-header.is-stuck .topbar{height:0;opacity:0;border-bottom:none;} .site-header.is-stuck .topbar .container{height:0;} .topbar{background:#fff;color:var(--slate-500);font-size:var(--fs-sm);border-bottom:1px solid var(--line-2);} .topbar .container{display:flex;align-items:center;justify-content:space-between;height:34px;} .topbar a{color:var(--slate-500);transition:color .15s;padding-block:3px;display:inline-block;} .topbar a:hover{color:var(--blue-600);} .topbar .tb-left{display:flex;gap:24px;align-items:center;} .topbar .tb-left span{display:inline-flex;align-items:center;gap:7px;} .topbar .tb-right{display:flex;gap:18px;align-items:center;} .topbar svg{width:14px;height:14px;opacity:1;color:var(--slate-400);} /* Switch IVA en topbar */ .vat-switch{display:inline-flex;align-items:center;gap:8px;} .vat-switch .vs-label{color:var(--slate-500);} .vat-switch .vs-btns{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;background:#fff;} .vat-switch button,.vat-switch a{display:inline-block;border:none;background:transparent;font-family:"Manrope",sans-serif;font-weight:600;font-size:12px;line-height:1.2;padding:4px 11px;color:var(--slate-500);cursor:pointer;transition:.12s;} .vat-switch button:hover,.vat-switch a:hover{color:var(--ink);} .vat-switch button.is-active,.vat-switch a.is-active{background:var(--slate-500);color:#fff;} /* Precio en tarjeta */ .pc__price{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:8px 14px 11px;flex-wrap:nowrap;} .pc__price .amt{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-lead);color:var(--ink);white-space:nowrap;} .pc__price .amt--ask{text-transform:uppercase;font-size:13px;letter-spacing:.4px;color:var(--slate-600);} .pc__price .vatlbl{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);white-space:nowrap;} /* Multiplo de venta del fabricante (minimal_quantity): "x10" junto al precio */ /* Precio principal de producto */ .prod-price{display:inline-flex;align-items:baseline;gap:8px;} .prod-price .amt{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-title);color:var(--ink);} .prod-price .vatlbl{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);} .navbar{display:flex;align-items:center;gap:28px;height:74px;} /* COLISION DE CLASE: Hummingbird ya usa .brand para las tarjetas de fabricante (catalog/_partials/miniatures/brand.tpl ->
  • ), con `border:1px solid; border-radius; padding:1rem` en su theme.css. El diseño usa el mismo nombre para la marca de la cabecera, así que chocan en las dos direcciones: su regla dibujaba un recuadro alrededor del logo y lo encogía (147px en vez de 185px), y las nuestras romperían sus tarjetas en /marcas. Se acotan las nuestras al header y se neutraliza su caja solo ahí. */ .navbar .brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;flex:none;width:185px;padding:0;border:0;} .navbar .brand:hover{border-color:transparent;} .brand-logo{display:block;height:42px;width:auto;} .navbar .brand>.brand-logo{width:185px;height:auto;} .f-brand{display:flex;flex-direction:column;align-items:flex-start;} .f-brand .brand-logo{width:185px;height:auto;margin-bottom:7px;filter:none;} .drawer-head .brand-logo{height:34px;width:auto;} .mainnav{display:flex;align-items:center;gap:4px;margin-left:8px;} .mainnav>li>a,.mainnav>li>button{ display:inline-flex;align-items:center;gap:7px;font-family:"Manrope",sans-serif;font-weight:600; font-size:15px;color:var(--slate-700);padding:10px 14px;border-radius:var(--r-control);background:none;border:none; transition:color .15s,background .15s; } .mainnav>li>a:hover,.mainnav>li>button:hover{color:var(--ink);background:var(--bg);} .mainnav .chev{width:15px;height:15px;transition:transform .2s var(--ease);} .has-mega.open .chev{transform:rotate(180deg);} .nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0;} .hdr-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:0 14px;height:42px;width:220px;cursor:text;transition:border-color .14s var(--ease);min-width:150px;flex:0 1 248px;} .hdr-search:hover{border-color:var(--ink);} .hdr-search:focus-within{border-color:var(--blue-600);} .hdr-search__ic{width:18px;height:18px;color:var(--slate-500);flex:none;} .hdr-search input{border:none;background:none;outline:none;font-family:"Inter",sans-serif;font-size:var(--fs-ui);color:var(--ink);width:100%;cursor:text;} .hdr-search input::placeholder{color:var(--slate-400);} .nav-actions .icon-btn--search-m{display:none;} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;color:var(--slate-600);transition:.15s;} .icon-btn:hover{color:var(--ink);border-color:var(--ink);} .icon-btn svg{width:19px;height:19px;} .btn-products{position:relative;} .btn-products .dot{width:6px;height:6px;border-radius:var(--r-pill);background:#fff;opacity:.85;} /* Acciones de cabecera: catálogo con mega + login + carrito */ .na-products{position:static;display:flex;align-items:center;} .na-products .chev{width:15px;height:15px;margin-left:2px;transition:transform .2s var(--ease);} .na-products.open .chev{transform:rotate(180deg);} .cart-btn{position:relative;} /* Contadores de carrito y presupuesto: la regla del diseño (.cart-count, .budget-count). Los dos iguales —misma letra y 20px de alto— para que con dos dígitos no queden uno junto al otro con distinto ancho. */ .cart-count,.quote-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-family:"Manrope",sans-serif;font-weight:700;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box;pointer-events:none;transition:transform .15s var(--ease),opacity .15s var(--ease);} .cart-count:empty,.cart-count[data-zero],.quote-count:empty,.quote-count[data-zero]{opacity:0;transform:scale(.6);} .quote-count{background:var(--navy-800);} /* Botón de presupuesto (a la derecha del carrito): badge en azul para distinguirlo. */ .quote-btn{position:relative;} /* Hamburguesa */ .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-control);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:5px;} .burger span{width:20px;height:2px;background:var(--navy-800);border-radius:var(--r-control);transition:.25s var(--ease);} .burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.active span:nth-child(2){opacity:0;} .burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---------- Mega menú ---------- */ .mega{ position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line); border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--ease);z-index:55; } .mega.open{opacity:1;visibility:visible;transform:translateY(0);} .mega-inner{display:grid;grid-template-columns:1fr 1fr 1fr 300px;gap:40px;padding-block:36px;} .mega-col h4{font-size:var(--fs-sm);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400);margin-bottom:14px;font-weight:500;} .mega-col ul li{margin-bottom:2px;} .mega-col ul a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);color:var(--slate-700);font-size:var(--fs-ui);font-weight:500;transition:.14s;} .mega-col ul a:hover{background:var(--bg);color:var(--ink);} .mega-col ul a .mi{width:34px;height:34px;border-radius:var(--r-lg);background:var(--bg-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--navy-800);} .mega-col ul a .mi svg{width:18px;height:18px;} .mega-col ul a span small{display:block;font-size:var(--fs-sm);color:var(--slate-400);font-weight:400;} .mega-feature{background:var(--navy-900);border-radius:var(--r);padding:26px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;} .mega-feature::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--on-dark-fill) 1px,transparent 1px),linear-gradient(90deg,var(--on-dark-fill) 1px,transparent 1px);background-size:22px 22px;} .mega-feature h5{position:relative;font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-title);color:#fff;margin:0 0 8px;} .mega-feature p{position:relative;font-size:var(--fs-ui);color:var(--on-dark-2);margin-bottom:18px;} .mega-feature .btn{position:relative;align-self:flex-start;} /* ---------- Placeholder de imagen técnica ---------- */ .ph{ position:relative;overflow:hidden;background: repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 11px,#fff 11px,#fff 22px); border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center; } .ph[data-dark]{ background:repeating-linear-gradient(135deg,var(--navy-900),var(--navy-900) 11px,var(--navy-900) 11px,var(--navy-900) 22px); border-color:var(--on-dark-line); } .ph .ph-tag{ font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--slate-500); background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:6px 11px;text-align:center; } .ph[data-dark] .ph-tag{background:var(--scrim);color:var(--on-dark-2);border-color:var(--on-dark-line);} /* ---------- Tarjeta familia / chip ---------- */ .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600);background:var(--bg);border:1px solid var(--line);padding:5px 10px;border-radius:var(--r-pill);} .chip.b2b{color:var(--navy-800);background:var(--tint);border-color:var(--line);} .chip.tech{color:var(--accent-600);background:var(--accent-soft);border-color:var(--accent-soft);} /* ---------- Footer ---------- */ .site-footer{background:radial-gradient(620px 300px at 100% 0%,rgba(255,255,255,.12),transparent 70%),radial-gradient(520px 280px at 0% 100%,rgba(255,255,255,.07),transparent 70%),linear-gradient(135deg,var(--navy-800) 0%,var(--blue-600) 100%);color:rgba(255,255,255,.86);padding-block:clamp(40px,5vw,56px) 0;} /* El diseño fijaba 4 columnas (marca + 3), pero el nº de bloques lo decide el BO: displayFooter devuelve tantos como se configuren en ps_linklist, más cuenta y contacto. Con auto-fit la marca mantiene su peso y el resto se reparte, salgan 3 o 5, en vez de descolgarse a una fila nueva. */ /* Ojo: con repeat(auto-fit,…) el resto de pistas deben ser DEFINIDAS. Un `1.6fr` delante invalida la declaración entera y la rejilla cae a una sola columna, de ahí el minmax en px para la marca. */ .footer-grid{display:grid;grid-template-columns:minmax(240px,320px) repeat(auto-fit,minmax(140px,1fr));gap:40px;align-items:start;} .site-footer h5,.site-footer .f-col-title{font-family:"Manrope",sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.02em;margin-bottom:18px;text-transform:uppercase;font-size:12.5px;letter-spacing:.1em;} /* Sin filter:invert: el pie carga su propia variante blanca (logo-sumival-blanco.svg). */ .site-footer .f-brand img{width:185px;height:auto;opacity:.96;margin-bottom:7px;} .site-footer .f-brand p{font-size:var(--fs-ui);max-width:300px;line-height:1.65;} .site-footer ul a{font-size:var(--fs-ui);color:var(--on-dark-3);padding:6px 0;display:inline-block;transition:.14s;} .site-footer ul a:hover{color:#fff;} .site-footer .f-contact li{display:flex;gap:11px;font-size:var(--fs-ui);margin-bottom:12px;align-items:flex-start;} .site-footer .f-contact a{color:var(--on-dark-3);text-decoration:none;padding:0;transition:.14s;} .site-footer .f-contact a:hover{color:#fff;} .site-footer .f-contact svg{width:17px;height:17px;flex:none;color:#fff;margin-top:2px;} .footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(28px,3.5vw,40px);padding-block:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.86);} .footer-bottom .fb-links{display:flex;gap:22px;flex-wrap:wrap;} .footer-bottom a:hover{color:#fff;} /* Anula .copyright del theme.css de Hummingbird (color gris y, a partir de 768px, font-size:1rem + padding-block-start:2rem): el color y el tamaño los fija .footer-bottom. Se escopa a .footer-bottom para ganar en especificidad. */ .footer-bottom .copyright,.footer-bottom .copyright a{color:inherit;} @media (min-width:768px){.footer-bottom .copyright{font-size:inherit;padding-block-start:0;}} /* ---------- Mobile drawer ---------- */ .scrim{position:fixed;inset:0;background:rgba(var(--scrim-rgb),.2);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:70;} .scrim.open{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;left:0;height:100%;width:min(360px,86vw);background:#fff;z-index:80;transform:translateX(-100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;overflow-y:auto;} .drawer.open{transform:translateX(0);} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);} .drawer-head img{height:30px;} .drawer-close{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:flex;align-items:center;justify-content:center;} .drawer nav{padding:12px;} .drawer nav>ul>li>a,.drawer .acc-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 12px;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-lead);color:var(--ink);border:none;background:none;border-bottom:1px solid var(--line-2);} .drawer .acc-panel{display:none;padding:4px 12px 10px;} .drawer .acc-panel.open{display:block;} .drawer .acc-panel a{display:block;padding:10px 12px;color:var(--slate-600);font-size:var(--fs-ui);border-radius:var(--r);} .drawer .acc-panel a:hover{background:var(--bg);} .drawer-cta{padding:18px 20px;margin-top:auto;border-top:1px solid var(--line);} /* ---------- Responsive ---------- */ @media (max-width:1080px){ .mega-inner{grid-template-columns:1fr 1fr;gap:28px;} .mega-feature{grid-column:1/-1;flex-direction:row;align-items:center;gap:24px;} .footer-grid{grid-template-columns:1fr 1fr;gap:34px;} } @media (max-width:900px){ .mainnav,.nav-actions .btn-products span,.topbar .tb-left{display:none;} .burger{display:flex;margin-right:6px;} .nav-actions{gap:8px;} } @media (max-width:640px){ .topbar{display:none;} .footer-grid{grid-template-columns:1fr;} .mega-inner{grid-template-columns:1fr;} } /* ===================== SIDEBAR CARRITO ===================== */ .cartx-scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:1095;} body.cart-open .blockcart .cartx-scrim,.quotex-scrim.open,.qqx-scrim.open{opacity:1;visibility:visible;} .cartx{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;z-index:1096;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--ease);box-shadow:var(--shadow-side);} body.cart-open .blockcart .cartx,.quotex.open{transform:translateX(0);} .cartx__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);} .cartx__head h3,.cartx__head .cartx__title{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-lead);color:var(--ink);display:flex;align-items:center;gap:10px;} .cartx__count{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);background:var(--blue-600);color:#fff;min-width:22px;height:22px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 6px;} .cartx__close{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--slate-600);cursor:pointer;transition:.14s;} .cartx__close:hover{border-color:var(--ink);color:var(--ink);} .cartx__body{flex:1;min-height:0;overflow-y:auto;padding:8px 22px;} /* El cuerpo del presupuesto va envuelto en [data-quote-content]; sin esto ese wrapper rompe la columna flex y el pie (Solicitar presupuesto) queda fuera de pantalla. */ .quotex [data-quote-content]{display:contents;} .cartx__item{display:grid;grid-template-columns:64px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);} .cartx__thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;} .cartx__thumb img{width:100%;height:100%;object-fit:contain;padding:6px;} .cartx__name{font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);line-height:1.3;color:var(--ink);} .cartx__ref{font-family:var(--mono);font-size:var(--fs-xs);color:var(--slate-400);margin-top:3px;} .cartx__qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;margin-top:10px;} .cartx__qty button{width:28px;height:28px;border:none;background:#fff;color:var(--slate-600);font-size:var(--fs-body);cursor:pointer;transition:.12s;} .cartx__qty button:hover{background:var(--bg);color:var(--ink);} .cartx__qty .cqn{min-width:30px;text-align:center;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--ink);border-inline:1px solid var(--line);height:28px;line-height:28px;} .cartx__line{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;} .cartx__amt{display:flex;flex-direction:column;align-items:flex-end;} .cartx__amt .amt{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-body);color:var(--ink);} /* «Desde» delante de un importe mínimo (padre unificado en la cesta de presupuesto) y «Consultar precio». */ .amt__from{font-family:"Inter",sans-serif;font-size:var(--fs-xs);font-weight:600;color:var(--slate-500);} .cartx__amt .amt--ask{font-size:var(--fs-sm);font-weight:600;color:var(--slate-600);} .cartx__amt .vatlbl{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);} .cartx__rm{border:none;background:none;color:var(--slate-400);cursor:pointer;padding:4px;transition:.12s;} .cartx__rm:hover{color:var(--error);} .cartx__foot{border-top:1px solid var(--line);padding:18px 22px 22px;background:var(--bg);display:flex;flex-direction:column;gap:10px;} .cartx__sub{display:flex;align-items:baseline;justify-content:space-between;} /* Pedido mínimo: condición comercial B2B en aviso neutro (sin barra de progreso) */ .cartx__min{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-control);background:#fff;} .cartx__min-ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--slate-500);} .cartx__min-t{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--slate-600);} .cartx__min-t b{display:block;margin-bottom:2px;color:var(--ink);font-weight:700;} .cartx__sub>span:first-child{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-body);color:var(--ink);} .cartx__subamt{display:flex;align-items:baseline;gap:8px;} .cartx__subamt .amt{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-title);color:var(--ink);} .cartx__subamt .vatlbl{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);} .cartx__note{font-size:var(--fs-xs);color:var(--slate-500);line-height:1.4;margin:2px 0 4px;} /* Estado vacío del carrito / presupuesto */ .sidepanel-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:44px 24px 34px;} .sidepanel-empty__ic{width:64px;height:64px;border-radius:var(--r-pill);background:var(--tint);color:var(--navy-800);display:grid;place-items:center;line-height:0;margin-bottom:14px;} .sidepanel-empty__ic svg{width:28px;height:28px;display:block;} .sidepanel-empty b{font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-lead);color:var(--ink);letter-spacing:-.01em;} .sidepanel-empty p{font-size:var(--fs-ui);color:var(--slate-600);line-height:1.55;margin:7px 0 18px;max-width:30ch;} .sidepanel-empty .btn{width:100%;justify-content:center;} /* ===================== POPUP PRESUPUESTO RÁPIDO (sumival_quotes) ===================== */ .qqx{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(520px,94vw);max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r);box-shadow:0 24px 70px rgba(16,32,56,.28);z-index:1096;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s var(--ease);} .qqx.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);} .qqx__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);} .qqx__title{font-family:"Manrope",sans-serif;font-weight:800;font-size:18px;color:var(--ink);} .qqx__form{padding:20px 24px 24px;} .qqx__sub{font-size:13.5px;color:var(--slate-600);line-height:1.55;margin-bottom:14px;} .qqx__basket{display:flex;align-items:center;gap:8px;font-family:"Manrope",sans-serif;font-weight:600;font-size:12.5px;color:var(--navy-800);background:var(--tint);border-radius:var(--r);padding:9px 12px;margin-bottom:14px;} .qqx__basket svg{flex:none;color:var(--accent);} .qqx__req{color:var(--accent);} .qqx .fgroup{margin-bottom:11px;} .qqx .fgroup label{display:block;font-family:"Manrope",sans-serif;font-weight:700;font-size:12px;color:var(--ink);margin-bottom:5px;letter-spacing:.01em;} .qqx .fgroup input[type="text"],.qqx .fgroup input[type="email"],.qqx .fgroup input[type="tel"],.qqx .fgroup textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;font-size:13.5px;color:var(--ink);font-family:"Inter",sans-serif;outline:none;background:#fff;transition:border .14s;} .qqx .fgroup input:focus,.qqx .fgroup textarea:focus{border-color:var(--blue-600);box-shadow:var(--focus-ring);} .qqx .fgroup.has-error input,.qqx .fgroup.has-error textarea{border-color:#c6303e;} .qqx .fgroup textarea{resize:vertical;min-height:70px;} .qqx__row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;} .qqx .fgroup--chk{margin-top:14px;margin-bottom:14px;} .qqx .fgroup label.chk-wrap{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-weight:400;font-size:12.5px;color:var(--slate-600);line-height:1.5;margin-bottom:0;} .qqx .chk-wrap input[type="checkbox"]{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--blue-600);cursor:pointer;} .qqx__error{font-size:12.5px;color:#c6303e;margin-bottom:10px;} .qqx__note{font-size:11.5px;color:var(--slate-500);text-align:center;margin-top:10px;} .qqx__success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 28px 30px;} .qqx__success>svg{color:#1e8e5a;margin-bottom:6px;} .qqx__success-title{font-family:"Manrope",sans-serif;font-weight:800;font-size:18px;color:var(--ink);} .qqx__success p{font-size:13.5px;color:var(--slate-600);line-height:1.6;max-width:38ch;} .qqx__ref{font-family:var(--mono);font-size:12.5px;color:var(--slate-500);} .qqx__ref b{color:var(--ink);} .qqx__success .btn{margin-top:12px;} @media (max-width:560px){.qqx__row2{grid-template-columns:1fr;}} /* ===================== BUSCADOR AVANZADO (overlay) ===================== */ .search-overlay{position:fixed;inset:0;z-index:1100;visibility:hidden;opacity:0;transition:opacity .25s var(--ease),visibility .25s var(--ease);} .search-overlay.open{visibility:visible;opacity:1;} .search-overlay__scrim{position:absolute;inset:0;background:var(--scrim);} .search-overlay__panel{position:absolute;top:0;left:0;right:0;background:#fff;box-shadow:var(--shadow-lg);transform:translateY(-100%);transition:transform .32s var(--ease);} .search-overlay.open .search-overlay__panel{transform:translateY(0);} .search-adv{padding-block:26px 32px;} .search-adv__head{display:flex;align-items:center;gap:16px;} .search-adv__bar{display:flex;flex:1;border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:#fff;} .search-adv__bar svg.mag{width:20px;height:20px;color:var(--slate-400);align-self:center;margin-left:16px;} .search-adv__bar input{flex:1;border:none;outline:none;padding:15px 14px;font-size:var(--fs-lead);font-family:"Inter",sans-serif;color:var(--ink);min-width:0;background:none;} .search-adv__bar button{background:var(--ink);color:#fff;border:none;padding:0 26px;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);display:flex;align-items:center;gap:9px;cursor:pointer;transition:.14s;} .search-adv__bar button:hover{background:var(--slate-700);} .search-adv__close{width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--slate-600);cursor:pointer;flex:none;transition:.14s;} .search-adv__close:hover{border-color:var(--ink);color:var(--ink);} .search-adv__close svg{width:20px;height:20px;} .search-adv__quick{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap;} .search-adv__quick .saq-lbl{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-500);} .search-adv__chips{display:flex;flex-wrap:wrap;gap:8px;} .search-adv__chips a{font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--slate-700);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;transition:.12s;} .search-adv__chips a:hover{border-color:var(--blue-600);color:var(--blue-600);background:#fff;} @media (max-width:900px){.search-adv__bar button span{display:none;}.search-adv__bar button{padding:0 16px;}} /* Buscador avanzado v2 (sumival_search): tarjetas .sres + facetas familia/marca a la derecha, recientes sobre las sugerencias. */ .search-adv__quick[hidden]{display:none;} .search-overlay__panel{max-height:100vh;overflow-y:auto;overscroll-behavior:contain;} .search-adv__quick--recent:not([hidden]) + .search-adv__quick{margin-top:var(--sp-3);padding-top:0;border-top:0;} .search-adv__chips button{display:inline-flex;align-items:center;gap:6px;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--slate-700);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-control);padding:8px 13px;cursor:pointer;transition:.12s;} .search-adv__chips button:hover{border-color:var(--navy-800);color:var(--navy-800);background:#fff;} .search-adv__chips button svg{width:13px;height:13px;color:var(--slate-400);} .search-adv__clear{margin-left:auto;border:0;background:none;padding:4px;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--slate-500);cursor:pointer;} .search-adv__clear:hover{color:var(--ink);text-decoration:underline;} .sres{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--sp-7);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);} .sres[hidden]{display:none;} .sres__main{min-width:0;} .sres__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-3);} .sres__count{margin:0;font-size:var(--fs-ui);font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate-600);} .sres__count b{font-family:"Manrope",sans-serif;font-weight:800;color:var(--ink);} .sres__all{display:inline-flex;align-items:center;gap:6px;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);white-space:nowrap;} .sres__all svg{width:15px;height:15px;transition:transform .15s var(--ease);} .sres__all:hover svg{transform:translateX(3px);} .sres__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);} .sres__item{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;color:var(--ink);overflow:hidden;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);} .sres__item:hover,.sres__item:focus-visible{border-color:var(--navy-800);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(9,63,149,.08);} .sres__th{position:relative;display:grid;place-items:center;width:auto;height:auto;aspect-ratio:4/3;border-radius:0;background:var(--bg);border-bottom:1px solid var(--line);} .sres__th img{width:66%;height:66%;object-fit:contain;mix-blend-mode:multiply;} .sres__brand{position:absolute;top:8px;left:8px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-micro);letter-spacing:.02em;color:var(--slate-600);} /* Logo de marca: caja blanca 74×32 con borde y logo a sangre, como la miniatura en cuadrícula */ .sres__brand--logo{width:74px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden;display:block;} .sres__brand--logo img{display:block;width:100%;height:100%;object-fit:contain;} .sres__b{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;min-width:0;} .sres__nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;min-height:2.7em;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);line-height:1.35;} .sres__item mark{background:var(--tint);color:var(--navy-800);border-radius:2px;padding:0 1px;} .sres__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--slate-500);} .sres__ref{font-variant-numeric:tabular-nums;} .sres__av{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;} .sres__av .d{width:6px;height:6px;border-radius:50%;background:var(--ok,#1F8A4C);} .sres__av--c .d{background:var(--accent);} .sres__pr{margin-top:auto;padding-top:4px;font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-ui);color:var(--ink);} .sres__pr small{font-family:"Inter",sans-serif;font-weight:400;font-size:var(--fs-micro);color:var(--slate-500);} .sres__more{margin-top:var(--sp-4);width:100%;} .sres__more[hidden]{display:none;} .sres__nofil{grid-column:1/-1;margin:0;padding:var(--sp-5);border:1px dashed var(--line);border-radius:var(--r-card);text-align:center;color:var(--slate-600);font-size:var(--fs-ui);} .sres__nofil button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--blue-600);cursor:pointer;} /* Facetas */ .sres__side{display:flex;flex-direction:column;gap:var(--sp-5);padding-left:var(--sp-6);border-left:1px solid var(--line);} .sres__facet[hidden]{display:none;} .sres__flbl{margin:0 0 var(--sp-2);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);} .sres__fl{display:flex;flex-direction:column;gap:2px;} .sres__fbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-control);background:none;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--ink);text-align:left;cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease);} .sres__fbtn:hover{background:var(--bg);} .sres__fv{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sres__fc{flex:none;min-width:22px;text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--slate-500);} .sres__fbtn.is-active{background:var(--tint);color:var(--navy-800);} .sres__fbtn.is-active .sres__fc{color:var(--navy-800);} @media (max-width:1080px){.sres__list{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:900px){ .sres{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);} .sres__side{order:-1;flex-direction:row;gap:6px;padding:0;border:0;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);} .sres__side::-webkit-scrollbar{display:none;} .sres__facet,.sres__fl{display:contents;} .sres__flbl{display:none;} .sres__fbtn{flex:none;width:auto;border:1px solid var(--line);background:#fff;} .sres__fbtn.is-active{border-color:var(--navy-800);} } @media (max-width:560px){ .sres__head{flex-wrap:wrap;} .sres__list{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);} .sres__item{flex-direction:row;} .sres__th{flex:none;width:76px;aspect-ratio:1;border-bottom:0;border-right:1px solid var(--line);} .sres__brand{display:none;} .sres__nm{min-height:0;} .sres__b{padding:10px 12px;} } /* El aviso de "añadido al carrito" es el panel lateral .cartx; se oculta el modal nativo del blockcart para no duplicar. */ #blockcart-modal{display:none!important;} /* ===================== TOAST / aviso flotante ===================== */ .toast-box{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 40px);} .toast{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue-600);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:13px 16px;min-width:280px;transform:translateY(14px);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease);} .toast.show{transform:translateY(0);opacity:1;} .toast--budget{border-left-color:var(--ok);} .toast__ic{width:34px;height:34px;border-radius:var(--r-lg);background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;flex:none;} .toast__ic svg{width:18px;height:18px;} .toast__msg{font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);color:var(--ink);flex:1;line-height:1.3;} .toast__act{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);white-space:nowrap;border:1px solid var(--line);border-radius:var(--r-control);padding:6px 11px;transition:.12s;} .toast__act:hover{border-color:var(--blue-600);background:var(--bg);} @media (max-width:560px){.toast-box{right:12px;left:12px;bottom:12px;}.toast{min-width:0;}} /* ============================================================ SUMIVAL · Capa funcional B2B (v3) — "portal de catálogo" Se carga DESPUÉS de custom.css. Activar con Títulos: Manrope (pesos sobrios) · Texto: Inter Técnico/refs: IBM Plex Mono · Sin degradados ni sombras SaaS ============================================================ */ :root{ /* Filetes unificados con la capa base (custom.css) */ --hair:var(--line); --hair-2:var(--line-2); } body{background:var(--bg);color:var(--ink);} ::selection{background:var(--accent);color:#fff;} h1,h2,h3,h4{color:var(--ink);letter-spacing:-.01em;} /* Cierre del criterio de radios, calcado de industrial.css del diseno. Van aqui, al final, porque pisan a proposito lo que declare cada pagina. */ .filters,.pc,.gallery__main,.prod-buy,.quickdata,.spec-table,.doc-item{border-radius:var(--r);} .gallery__thumbs .th,.prod-pdf,.relchip{border-radius:var(--r-lg);} .btn,.qty{border-radius:var(--r-lg);} /* Etiquetas mono reutilizables */ .lbl{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--slate-500);} .lbl b{color:var(--navy-800);font-weight:500;} .kbd{font-family:var(--mono);font-size:var(--fs-sm);color:var(--slate-500);} /* Encabezado de sección compacto */ .shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-head);} .shead h2{font-family:"Manrope",sans-serif;font-weight:700;font-size:clamp(18px,1.8vw,22px);} .shead .more{font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--blue-600);display:inline-flex;align-items:center;gap:7px;padding-block:3px;} .shead .more:hover{color:var(--accent);} .shead .more svg{width:15px;height:15px;} /* ============================================================ HEADER (sobrio) ============================================================ */ .navbar{height:72px;} .site-header{backdrop-filter:none;background:#fff;} .mainnav>li>a,.mainnav>li>button{font-weight:600;font-size:var(--fs-ui);} .mega{border-top:1px solid var(--line);z-index:70;box-shadow:var(--shadow-lg);} .icon-btn{border-radius:var(--r-lg);} .cart-btn{position:relative;} .na-products{position:static;display:flex;align-items:center;} .na-products .chev{width:15px;height:15px;margin-left:2px;transition:transform .2s var(--ease);} .na-products.open .chev{transform:rotate(180deg);} /* ---------- Mega menú de Catálogo (6 secciones) ---------- */ .mega-inner.mega-cat{grid-template-columns:repeat(3,1fr);gap:22px 44px;padding-block:26px 30px;} .mega-cat__head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:14px;} .mega-cat__head .lbl b{color:var(--navy-800);} .mega-cat__head a{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);} .mega-cat__head a:hover{text-decoration:underline;} .mega-cat .mega-col h4{font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);color:var(--ink);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--hair-2);} .mega-cat .mega-col ul a{display:block;padding:6px 0;font-family:"Inter",sans-serif;font-weight:400;font-size:var(--fs-ui);color:var(--slate-700);transition:.12s var(--ease);} .mega-cat .mega-col ul a:hover{color:var(--accent);padding-left:7px;background:none;} @media (max-width:1080px){.mega-inner.mega-cat{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.mega-inner.mega-cat{grid-template-columns:1fr;}} /* Submenú de catálogo en 2 niveles */ .mega2{display:grid;grid-template-columns:300px 1fr;min-height:336px;} .mega2__cats{border-right:1px solid var(--hair);padding:14px;display:flex;flex-direction:column;gap:2px;background:var(--bg);} .mega2__cat{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;text-decoration:none;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);color:var(--ink);background:none;border:none;border-radius:var(--r);padding:11px 12px;cursor:pointer;transition:.12s var(--ease);} .mega2__cat:hover{background:rgba(255,255,255,.7);color:var(--ink);} .mega2__cat.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow-card);} .mega2__cat svg{width:15px;height:15px;opacity:.45;flex:none;} .mega2__cat.is-active svg{opacity:1;color:var(--ink);} .mega2__all{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);padding:13px 12px;border-top:1px solid var(--hair);} .mega2__all svg{width:15px;height:15px;} .mega2__panels{padding:24px 28px;} .mega2__panel{display:none;} .mega2__panel.is-active{display:block;animation:fade .2s var(--ease);} .mega2__panel h4,.mega2__panel .mega2__panel-title{font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;color:var(--navy-800);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--hair);} /* Cabecera del panel: miniatura de la familia + título + ver todo */ .mega2__head{display:flex;align-items:center;gap:14px;margin-bottom:8px;padding-bottom:14px;border-bottom:1px solid var(--line-2);} .mega2__thumb{width:44px;height:44px;flex:none;display:grid;place-items:center;line-height:0;background:none;} .mega2__thumb img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;} .mega2__panel .mega2__head .mega2__panel-title{font-weight:700;font-size:var(--fs-h3);color:var(--ink);margin:0;padding:0;border:0;flex:1;min-width:0;} .mega2__panel .mega2__head .mega2__panel-title a{color:inherit;} .mega2__seeall{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);} .mega2__seeall svg{width:14px;height:14px;transition:transform .15s var(--ease);} .mega2__seeall:hover svg{transform:translateX(3px);} .mega2__panel ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding-left:58px;} .mega2__panel li a{display:block;padding:8px 0;font-size:var(--fs-ui);color:var(--slate-700);transition:color .12s var(--ease);} .mega2__panel li a:hover{color:var(--navy-800);text-decoration:underline;text-underline-offset:3px;} @media (max-width:1100px){.mega2__panel ul{grid-template-columns:repeat(2,minmax(0,1fr));}} /* "Ver todo": al final de la lista de subcategorías, alineado con ella y separado por una línea */ .mega2__panel ul + .mega2__seeall,.mega2__panel .mega2__head + .mega2__seeall{margin:14px 0 0 58px;padding-top:14px;border-top:1px solid var(--line);width:calc(100% - 58px);font-size:var(--fs-ui);} @media (max-width:900px){.mega2{grid-template-columns:1fr;}.mega2__cats{border-right:none;border-bottom:1px solid var(--hair);}.mega2__panel ul{grid-template-columns:1fr 1fr;padding-left:0;}.mega2__panel ul + .mega2__seeall,.mega2__panel .mega2__head + .mega2__seeall{margin-left:0;width:100%;}} /* ---------- Desplegable de Sectores ---------- */ .has-mini{position:relative;} .minimega{left:0;right:auto;width:322px;} .minimega__inner{padding:10px;} .minimega__inner a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);color:var(--ink);transition:.12s var(--ease);} .minimega__inner a:hover{background:var(--bg);color:var(--navy-800);} .minimega__inner a .mi{width:34px;height:34px;border-radius:var(--r);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--navy-800);flex:none;transition:.12s var(--ease);} .minimega__inner a:hover .mi{background:var(--navy-800);color:#fff;} .minimega__inner a .mi svg{width:18px;height:18px;} /* Desplegable de marcas */ .brandsmega{left:0;right:auto;width:560px;} .brandsmega__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px;} .brandsmega__inner a{display:flex;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;color:var(--slate-700);background:#fff;transition:.12s var(--ease);} .brandsmega__inner a:hover{border-color:var(--blue-600);color:var(--navy-800);background:var(--bg);} .brandsmega__all{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line);background:var(--bg);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);} .brandsmega__all svg{width:16px;height:16px;} .brandsmega__all:hover{color:var(--navy-800);} /* ============================================================ TIRA DE UTILIDAD (info comercial real, estática) ============================================================ */ .ustrip{background:var(--bg);color:var(--slate-600);border-bottom:1px solid var(--line);} .ustrip .container{display:flex;flex-wrap:wrap;gap:7px 26px;padding:9px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;} .ustrip span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;} .ustrip span::before{content:"";width:5px;height:5px;background:var(--accent);flex:none;} .ustrip .right{margin-left:auto;} .ustrip a{color:var(--blue-600);font-weight:600;} /* ============================================================ TARJETA DE PRODUCTO (.pc) Componente GLOBAL: la miniatura sale en home (productos destacados), categoria, busqueda y marca. Vivia en pages/category.css, que solo carga en listados, asi que en la home salia sin estilo. La vista lista (.products[data-layout=list] .pc*) si es de listado y se queda en pages/category.css. ============================================================ */ /* Grid de productos (GLOBAL: la miniatura aparece en home, categoría, búsqueda y marca; el nº de columnas se ajusta por contexto: destacados 4, relacionados 4). */ .products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;} .products[data-layout=list]{grid-template-columns:1fr;gap:16px;} @media (max-width:900px){.products{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.products{grid-template-columns:1fr;}} /* Tarjeta de catálogo (ficha técnica compacta) */ .pc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .12s var(--ease);} .pc:hover{border-color:var(--ink);} .pc__main{display:flex;flex-direction:column;flex:1;} .pc__strip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;color:var(--slate-500);} .pc__ref{color:var(--slate-600);white-space:nowrap;} .pc__avail{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;white-space:nowrap;} .pc__avail .d{width:7px;height:7px;border-radius:var(--r-pill);background:var(--ok);flex:none;} .pc__avail.consult{color:var(--accent-600);} .pc__avail.consult .d{background:var(--accent);} .pc__avail.out{color:#c6303e;} .pc__avail.out .d{background:#c6303e;} .pc__img{position:relative;aspect-ratio:1/1;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line);} .pc__img .ph{position:absolute;inset:0;border:none;border-radius:0;} .pc__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:8px;} .pc__brand{position:absolute;top:10px;left:10px;} .pc__brand--logo{position:absolute;top:10px;left:10px;width:74px;height:32px;aspect-ratio:30/13;overflow:hidden;background:#fff;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;z-index:2;} .pc__brand--logo img{position:static;inset:auto;width:100%;height:100%;display:block;padding:0;background:none;object-fit:contain;} .pc__fav{position:absolute;top:9px;right:9px;width:30px;height:30px;border:1px solid var(--line);background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--slate-400);transition:.12s;} .pc__fav:hover{color:var(--blue-600);border-color:var(--blue-600);} .pc__fav svg{width:15px;height:15px;} .pc__body{padding:12px 12px 0;display:flex;flex-direction:column;flex:1;} .pc__name{font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-body);color:var(--ink);line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pc__name a{color:inherit;text-decoration:none;transition:color .14s var(--ease);} .pc__name a:hover{color:var(--blue-600);} .pc__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding-bottom:9px;border-bottom:1px solid var(--hair-2);} .pc__meta .pc__ref{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;color:var(--slate-500);} .pc__meta .pc__avail{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;color:var(--ok);} .pc__meta .pc__avail .d{width:7px;height:7px;border-radius:var(--r-pill);background:var(--ok);flex:none;} .pc__meta .pc__avail.consult{color:var(--accent-600);} .pc__meta .pc__avail.consult .d{background:var(--accent);} .pc__meta .pc__avail.out{color:#c6303e;} .pc__meta .pc__avail.out .d{background:#c6303e;} .pc__rows{margin-top:11px;} /* Chips de variaciones (medidas) */ /* flex 0 1 auto: no estira (el +N queda pegado a los chips) pero sí encoge cuando no caben, recortando la lista y dejando el +N siempre visible. */ .pc__rows .r{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--hair-2);font-family:var(--mono);font-size:var(--fs-xs);} .pc__rows .r:last-child{border-bottom:none;} .pc__rows .r span{color:var(--slate-400);text-transform:uppercase;letter-spacing:.03em;} .pc__rows .r b{color:var(--ink);font-weight:500;} .pc__foot{margin-top:auto;display:flex;border-top:1px solid var(--line);} .pc__foot>a,.pc__foot>button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;font-family:"Manrope",sans-serif;font-weight:600;font-size:13px;transition:.12s;background:#fff;border:none;cursor:pointer;} .pc__foot .see{background:#fff;color:var(--ink);} .pc:hover .pc__foot .see{background:var(--blue-600);color:#fff;} .pc__foot .see:hover{background:var(--blue-600);color:#fff;} .pc__foot .ask{color:#fff;background:var(--navy-800);border-left:none;flex:1;} .pc__foot .ask:hover{background:var(--blue-600);color:#fff;} .pc__foot .ask svg{width:17px;height:17px;} .pc__foot .ask::after{content:"Añadir a presupuesto";font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);} .pc__foot .fav{color:var(--ink);border-left:1px solid var(--line);flex:0 0 46px;} .pc__foot .fav:hover{background:var(--blue-600);color:#fff;} .pc__foot .fav svg{width:17px;height:17px;} .pc__foot .fav.is-active{color:var(--blue-600);} /* Acciones de la tarjeta (stepper + presupuesto + compra). GLOBAL: la miniatura aparece en home, categoría, búsqueda y marca; antes vivían en category.css y en la home (sin ese CSS) el pie se rompía. La vista lista sigue en category.css. */ .pc__foot .qa{position:relative;flex:0 0 var(--h-control-sm);width:var(--h-control-sm);height:var(--h-control-sm);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);justify-content:center;align-items:center;display:inline-flex;} .pc__foot .qa svg{width:17px;height:17px;} .pc__foot .qa span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-xs);letter-spacing:.01em;white-space:nowrap;padding:6px 10px;border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity .15s var(--ease),transform .15s var(--ease);z-index:5;} .pc__foot .qa span::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);} .pc__foot .qa:hover span{opacity:1;transform:translateX(-50%) translateY(0);} .pc__foot .qa--budget{background:#fff;color:var(--ink);} .pc__foot .qa--budget:hover{border-color:var(--ink);background:var(--bg);} .pc__foot .qa--buy{background:#fff;border-color:var(--line);color:var(--ink);} .pc__foot .qa--buy:hover{border-color:var(--ink);background:var(--bg);} .pc__qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:38px;} .pc__qty button{width:30px;height:100%;border:none;background:#fff;color:var(--slate-600);font-size:var(--fs-lead);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:.12s;} .pc__qty button:hover{background:var(--bg);color:var(--ink);} .pc__qty input{width:34px;height:100%;border:none;border-inline:1px solid var(--line);text-align:center;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--ink);background:#fff;outline:none;padding:0;} .products:not([data-layout=list]) .pc__foot{padding:12px 12px 26px;gap:8px;align-items:stretch;border-top:1px solid var(--line);} .products:not([data-layout=list]) .pc__qty{display:flex;flex:none;margin:0;height:var(--h-control-sm);} .products:not([data-layout=list]) .pc__foot .qa{height:var(--h-control-sm);flex:1;width:auto;} .pc__media{display:flex;flex-direction:column;} /* Estado de stock: el diseño solo contemplaba disponible (verde) y .consult (naranja). El core expone $product.availability = available | last_remaining_items | unavailable, asi que se mapean sus valores reales: sin esto un "Fuera de stock" se pintaba en verde. */ .pc__meta .pc__avail--last_remaining_items, .pc__meta .pc__avail--unavailable{color:var(--accent-600);} .pc__meta .pc__avail--last_remaining_items .d, .pc__meta .pc__avail--unavailable .d{background:var(--accent);} /* Flags del core (product-flags.tpl). Bootstrap los pinta como .badge azul y caian sobre .pc__brand, que tambien va arriba-izquierda: se llevan a la derecha y se les da el aspecto de chip del diseño. Gana por especificidad, sin !important. */ .pc__img .product-flags{position:absolute;top:10px;right:10px;left:auto;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin:0;padding:0;list-style:none;} .pc .pc__img .product-flags .badge{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 9px;} /* theme.css del padre usa @layer (vendors, bs-base, bs-components…) y fuerza el azul de estos badges con !important dentro de bs-base. Para declaraciones !important el orden de capas se INVIERTE: gana la capa anterior, y lo no acapado pierde frente a cualquier !important de capa. De ahi que ni mas especificidad ni !important propio bastasen: hay que declarar en una capa anterior. `vendors` es la primera del padre. */ @layer vendors{ .pc .pc__img .product-flags .badge{background-color:rgba(255,255,255,.94)!important;color:var(--slate-600)!important;} .pc .pc__img .product-flags .badge.out_of_stock, .pc .pc__img .product-flags .badge.discount, .pc .pc__img .product-flags .badge.on-sale{background-color:var(--accent-soft)!important;color:var(--accent-600)!important;border-color:#F7D9C6;} .pc .pc__img .product-flags .badge.new{background-color:var(--tint)!important;color:var(--blue-600)!important;border-color:#D4E3F7;} } /* ---------- Menú móvil (drawer): reutiliza la salida de displayNav ---------- El mismo marcado del mega de escritorio se re-presenta como acordeón vertical. El JS del mega (común) alterna .open al pulsar; aquí .mega pasa a estático. */ .mainnav--drawer{display:flex;flex-direction:column;gap:0;margin:0;width:100%;} .mainnav--drawer > li{width:100%;border-bottom:1px solid var(--line-2);} .mainnav--drawer > li > a, .mainnav--drawer .has-mega > button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 12px;font-family:"Manrope",sans-serif;font-weight:600;font-size:16px;color:var(--ink);background:none;border:none;text-align:left;} .mainnav--drawer .has-mega > button .chev{transition:transform .2s var(--ease);} .mainnav--drawer .has-mega.open > button .chev{transform:rotate(180deg);} /* El panel del mega, estático y plegado salvo .open */ .mainnav--drawer .mega{position:static;opacity:1;visibility:hidden;height:0;overflow:hidden;transform:none;box-shadow:none;border:none;background:none;transition:none;width:auto;} .mainnav--drawer .mega.open{visibility:visible;height:auto;padding:0 0 10px;} /* Catálogo (mega2): una columna, sin la barra de pestañas; familias como enlaces */ .mainnav--drawer .mega2{display:block;min-height:0;padding:0;} .mainnav--drawer .mega2 .container,.mainnav--drawer .mega .container{padding:0;} .mainnav--drawer .mega2__cats{display:none;} .mainnav--drawer .mega2__panels{padding:0;} .mainnav--drawer .mega2__head{margin:0;padding:0;border:0;} .mainnav--drawer .mega2__thumb,.mainnav--drawer .mega2__panel .mega2__seeall{display:none;} .mainnav--drawer .mega2__panel{display:block;border-bottom:1px solid var(--line-2);padding:6px 0;} .mainnav--drawer .mega2__panel:last-child{border-bottom:none;} .mainnav--drawer .mega2__panel h4,.mainnav--drawer .mega2__panel .mega2__panel-title{margin:0;padding:8px 12px;border:none;} .mainnav--drawer .mega2__panel h4 a,.mainnav--drawer .mega2__panel .mega2__panel-title a{color:var(--ink);} .mainnav--drawer .mega2__panel ul{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 12px 6px;} .mainnav--drawer .mega2__panel ul a{padding:6px 0;font-size:13.5px;color:var(--slate-600);} /* Sectores / Empresa (minimega) y Marcas (brandsmega): a lo ancho del drawer */ .mainnav--drawer .minimega,.mainnav--drawer .brandsmega{width:auto;} .mainnav--drawer .minimega__inner{padding:2px 12px 10px;} .mainnav--drawer .brandsmega__inner{grid-template-columns:1fr 1fr;padding:2px 12px 10px;} .mainnav--drawer .brandsmega__all{padding:12px;} /* Anti-desborde en móvil: la tarjeta nunca excede su celda de grid, y el listado de destacados de ps_featuredproducts se ciñe al ancho. */ .pc{min-width:0;max-width:100%;} .module-products__list{width:100%;max-width:100%;overflow:hidden;} /* ---------- Contenedor unificado (toda la web) ---------- .container de Bootstrap (anchos escalonados 540/720/960/1140/1320) se hace igual que .container del diseño, en TODOS los anchos: fluido hasta --maxw con --pad. Asi toda la web (breadcrumb, destacados, listados, checkout...) comparte contenedor. */ .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } /* Contenedor anidado (el core ya envuelve el contenido en .container y algunas secciones traen su propio .container): el interior no vuelve a limitar ni a padear, para que el contenido alinee con cabecera y miga. */ .container .container{max-width:none;padding-inline:0;margin-inline:0;} /* Home: las secciones son full-width y traen su propio ritmo vertical; se quita el padding del center-column y el gap del contenedor de home para que no sobre margen. */ .page-index .center-column{padding:0;} .page-content--home{gap:0;} /* ---------- Breadcrumb (global) ---------- */ .breadcrumb{background:var(--tint);border-bottom:none;margin:0;padding:0;display:block;overflow:visible;} .breadcrumb .container{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--slate-500);padding-block:14px 3px;} .breadcrumb a,.breadcrumb [aria-current]{white-space:nowrap;} .breadcrumb a{color:var(--slate-500);transition:.15s;padding-block:3px;display:inline-block;} .breadcrumb a:hover{color:var(--ink);} .breadcrumb .sep{color:var(--slate-400);} .breadcrumb [aria-current]{color:var(--ink);font-weight:500;} /* ===================== Sidebar de filtros (amazzingfilter) — GLOBAL ===================== Los filtros aparecen en categoría, marcas y resultados de búsqueda; su estilo va aquí (global), no en category.css, que no carga en la página de marca. Se estila el marcado propio de amazzingfilter (.af_*) para que sea igual que el diseño (.filters/.fopt), sin tocar el módulo. El ancho de columna se aplica allí donde haya filtros con :has(). */ /* Medida del diseño (.cat-layout): sidebar 240px + gap 32px. Se neutraliza el gutter de Bootstrap para que la caja mida 240px exactos y el hueco sea 32px. */ .columns-container:has(#amazzing_filter) > .row{margin-inline:0;} #left-column:has(#amazzing_filter){flex:0 0 240px;max-width:240px;padding:0;margin-right:32px;} #left-column:has(#amazzing_filter) + #center-column{flex:1 1 0;max-width:none;padding:0;} /* Contenedor con borde como el diseño (.filters). */ #amazzing_filter{font-family:"Inter",sans-serif;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;} /* Barra superior del diseño (.filters__brand): el title_block del módulo hace de cabecera, con su icono. El botón "Ocultar" es del modo compacto (móvil). */ /* El módulo lo declara con id+clase (#amazzing_filter.block), asi que la regla del tema la supera (body) o pierde el tamaño de letra: su front.css carga despues que el del tema. */ body #amazzing_filter.block .title_block,#amazzing_filter .title_block{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;line-height:1.3;margin:0;text-transform:none;letter-spacing:0;} #amazzing_filter .title_block::before{content:"";width:15px;height:15px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627A' stroke-width='2'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") no-repeat center/contain;} #amazzing_filter .title_block .compact-toggle{margin-left:auto;font-family:"Manrope",sans-serif;font-weight:600;font-size:12.5px;color:var(--slate-500);background:none;border:none;padding:0;} /* Bloque de filtro: padding e interlínea, divisor entre grupos (no en el último). */ #amazzing_filter .af_filter{border-bottom:1px solid var(--line);padding:14px;margin:0;} #amazzing_filter .af_filter:last-of-type{border-bottom:none;} /* Cabecera del bloque + chevron */ #amazzing_filter .af_subtitle{display:flex;align-items:center;justify-content:space-between;font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;margin:0;padding:0;background:none;border:none;text-transform:none;letter-spacing:0;} /* Se oculta la flecha propia de amazzingfilter (::before) y se pone la del diseño. */ #amazzing_filter .af_subtitle::before{content:none !important;display:none !important;} #amazzing_filter .af_subtitle::after{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B97A8' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;background-size:16px;transition:transform .2s var(--ease);} #amazzing_filter .af_filter.af_closed .af_subtitle::after{transform:rotate(-90deg);} /* Lista de opciones */ #amazzing_filter .af_filter_content{margin-top:11px;} #amazzing_filter .af_filter_content ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;} #amazzing_filter .af_filter_content li{margin:0;padding:0;background:none;} /* Opción */ #amazzing_filter .af-checkbox-label{display:flex;align-items:flex-start;gap:10px;padding:6px 6px;border-radius:var(--r-control);cursor:pointer;font-size:var(--fs-sm);font-weight:400;line-height:1.3;color:var(--slate-700);margin:0;} #amazzing_filter .af-checkbox-label:hover{background:var(--bg);} /* Casillas: el sistema único del diseño (18px, --r-check, navy con check SVG), el mismo que body input[type=checkbox]; aquí con el id para ganar al front.css del módulo. */ #amazzing_filter .af-checkbox-label input:is(.checkbox,.radio,[type=checkbox],[type=radio]){-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:1px 0 0;flex:none;position:static;border:1.5px solid var(--slate-400);border-radius:var(--r-check);background:#fff center/12px 12px no-repeat;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);} #amazzing_filter .af-checkbox-label input:is(.radio,[type=radio]){border-radius:50%;} #amazzing_filter .af-checkbox-label input::after{content:none;} #amazzing_filter .af-checkbox-label input:hover{border-color:var(--navy-800);} #amazzing_filter .af-checkbox-label input:checked{background-color:var(--navy-800);border-color:var(--navy-800);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");} #amazzing_filter .af-checkbox-label input:is(.radio,[type=radio]):checked{background-image:none;box-shadow:inset 0 0 0 4px #fff;} #amazzing_filter .af-checkbox-label input:focus-visible{outline:none;box-shadow:var(--focus-ring);} /* Nombre + contador */ #amazzing_filter .af-checkbox-label .name{flex:1;min-width:0;} #amazzing_filter .af-checkbox-label .count{margin-left:auto;margin-top:1px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--slate-400);font-weight:400;} /* Buscador rapido del grupo: el modulo lo pinta plano; aqui toma el estilo de input del diseno (.range-row input). */ #amazzing_filter .af-quick-search{margin-bottom:6px;} #amazzing_filter .qsInput{width:100%;border:1px solid var(--line);border-radius:var(--r-control);padding:8px 10px;font-family:var(--mono);font-size:12.5px;color:var(--slate-700);background:#fff;} #amazzing_filter .qsInput:focus{outline:none;border-color:var(--blue-600);} /* "más…/menos": el diseno lo pinta como un enlace azul al pie de la lista. */ /* El módulo lo posiciona en absoluto junto a la última opción y lo pinta gris: aquí va debajo de la lista, como el "+ Ver todas" del diseño. */ body #amazzing_filter .toggle-cut-off{position:static;display:inline-block;margin-top:2px;padding:5px 0;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--blue-600);cursor:pointer;} body #amazzing_filter .toggle-cut-off span{color:inherit;font:inherit;} body #amazzing_filter .toggle-cut-off .more::before{content:"+ ";} #amazzing_filter .toggle-cut-off:hover{color:var(--accent-600);} /* Opcion marcada: el diseno la destaca (.fopt:has(input:checked)). */ #amazzing_filter .af-checkbox-label:has(input:checked){color:var(--ink);font-weight:600;} /* Sin paréntesis en ningún contador (amazzingfilter los añade con ::before/::after). */ #amazzing_filter .count::before,#amazzing_filter .count::after,#amazzing_filter .af-total-count::before,#amazzing_filter .af-total-count::after{content:none !important;} /* Filtros activos sobre el listado: el modulo los pinta en .selectedFilters con un chip por filtro (.cf); el diseno los llama .active-filters / .af-chip. Van prefijadas con `body` y con .af porque el front.css del modulo carga despues que el del tema y ademas declara estas piezas con tres clases (.selectedFilters.inline .cf): a igual especificidad ganaria el. */ body .selectedFilters.af{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;float:none;} body .selectedFilters.af .selected-filters-label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);} body .selectedFilters.af .cf{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 6px 4px 12px;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--ink);transition:border-color .13s var(--ease);} body .selectedFilters.af .cf .u-times{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-3px -3px -3px 0;border-radius:50%;background:none;color:var(--slate-500);cursor:pointer;font-size:0;transition:.13s;} body .selectedFilters.af .cf .u-times::before{content:"";width:11px;height:11px;background:currentColor;-webkit-mask:var(--ic-times) center/contain no-repeat;mask:var(--ic-times) center/contain no-repeat;} body .selectedFilters.af .cf:hover{border-color:var(--slate-400);} body .selectedFilters.af .cf .u-times:hover{background:none;color:var(--ink);} /* "Borrar filtros" del modulo = .active-filters__clear del diseno. */ /* El modulo lo emite antes que los chips; en el diseno va al final de la fila. */ body .selectedFilters.af .clearAll{float:none;order:99;margin:0;padding:0;background:none;border:none;border-radius:0;} /* El modulo mete el texto en un .txt diminuto y en mayusculas. */ body .selectedFilters.af .clearAll .txt{font-size:12.5px;text-transform:none;letter-spacing:0;} body .selectedFilters.af .clearAll .all{font-family:"Manrope",sans-serif;font-weight:600;font-size:12.5px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--accent-600);background:none;border:none;padding:5px 4px;display:inline-flex;align-items:center;gap:6px;} body .selectedFilters.af .clearAll .all:hover{text-decoration:underline;} body .selectedFilters.af .clearAll .icon-eraser{display:none;} :root{--ic-times:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");} /* ============================================================ Carrusel de productos (destacados home / relacionados ficha) Portado de industrial.css del diseño (.pcarousel). ============================================================ */ .pcarousel{position:relative;} .pcarousel__track{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*var(--gutter))/4);grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--gutter);padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;} .pcarousel__track::-webkit-scrollbar{display:none;} .pcarousel__track>.pc{scroll-snap-align:start;} .pcarousel__nav{position:absolute;top:calc(50% - 20px);transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);transition:.14s;} .pcarousel__nav:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800);} .pcarousel__nav svg{width:20px;height:20px;} .pcarousel__nav--prev{left:-14px;} .pcarousel__nav--next{right:-14px;} .pcarousel__nav[disabled]{opacity:0;pointer-events:none;} @media (max-width:1080px){.pcarousel__track{grid-auto-columns:calc((100% - var(--gutter))/2);}} @media (max-width:560px){.pcarousel__track{grid-auto-columns:82%;}.pcarousel__nav{display:none;}} /* Las flechas del carrusel sobresalen (-14px); el wrapper de los módulos recorta con overflow:hidden, así que se permite que se vean cuando hay carrusel. */ .module-products__list:has(.pcarousel){overflow:visible;} /* ============================================================ SISTEMA «MODERNO SUAVE» (diseño 1d5fd9a1, industrial.css) Portado tal cual con `body` en lugar de `.ind` para conservar la especificidad sobre las hojas de página. Sin la cabecera compacta azul (chead/cpage-hero), que va aparte. ============================================================ */ body{background:var(--bg);} body .catcards,body .featured,body .sectiles,body .makers,body .trustband,body .experts,body .portal,body .csec,body .csec--alt,body .related{background:transparent;border:none;} /* Tarjetas y paneles */ body .ccard,body .pc,body .pcard,body .brandcard,body .trust__item,body .filters,body .prod-buy,body .quickdata,body .doc-item,body .spec-table,body .ac-card,body .ac-nav,body .co-block,body .co-summary,body .od-card,body .cstat,body .cvalue,body .cmember,body .ok-panel,body .prod-help{background:#fff;border-color:var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-card);} body .ccard,body .pc,body .brandcard{overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease);} body .ccard:hover,body .pc:hover,body .brandcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--line-2);} body .quickdata{background:var(--line-2);} /* Hero y buscador como bloques flotantes */ /* Mismo ancho para hero, buscador y contacto: el área de contenido de .wrap */ body .hslider,body .portal .container,body .experts .container{width:calc(min(var(--maxw),100%) - 2*var(--pad));max-width:none;margin-inline:auto;} body .hslider{margin-top:16px;border-radius:var(--r-xl);overflow:hidden;border-bottom:none;} body .portal .container{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-card);margin-top:24px;padding:clamp(28px,4vw,48px);} body .portal__bar{border:1px solid var(--line);box-shadow:none;max-width:680px;} body .portal__bar button{margin:5px;padding:0 24px;background:var(--navy-800);} body .portal__bar button:hover{background:var(--blue-600);} /* Chips y etiquetas en píldora */ /* ===== Criterio único de forma ===== 1. CONTROL (--r-control, 8px): todo lo que se pulsa y es rectangular — botones, campos y buscadores, subcategorías, filtros activos, variantes, enlaces-chip, sugerencias. 2. PÍLDORA (--r-pill): solo etiquetas que informan y no se pulsan — estado de stock, chips B2B/técnico, insignias sobre imagen, años de la historia. 3. CÍRCULO: botones flotantes o redondos de solo icono (chat, redes), contadores e interruptores. Excepción: medidas DN de miniatura (.pc__var) = 4px. */ body .chip,body .prod-info .status,body .csplit__badge,body .vtl__card .yr,body .cprojcard__tag{border-radius:var(--r-pill);} body :is(.af-chip,.af-clear,.selectedFilters.af .cf,.subcats a,.subcats-sticky a,.pvar__opts button,.subcats .chead__cta .btn,.subcats-sticky .chead__cta .btn, .relchip,.ccard__sub a,.portal__quick a,.search-adv__chips a,.techchat__chips button,.portal__bar,.portal__bar button,.hslider__nav){border-radius:var(--r-control);} body .ccard__sub a{background:var(--tint-2);border-color:transparent;} body .ccard__sub a:hover{background:var(--tint);color:var(--navy-800);} /* Controles */ body .btn,body .icon-btn,body .hdr-search,body .qty,body .pc__qty{border-radius:var(--r-control);} body input[type=text],body input[type=email],body input[type=tel],body input[type=search],body select,body textarea,body .fgroup input,body .fgroup select,body .fgroup textarea{border-radius:var(--r-control);} /* Marcas como tarjetas independientes */ body .makers__grid{gap:12px;border:none;background:none;} body .makers__cell{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease);} body .makers__cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);background:#fff;} /* Sectores, iconos, bloque de contacto */ body .stile{border-radius:var(--r-xl);overflow:hidden;} body .trust__item .ic{border-radius:var(--r-lg);} body .experts .container{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:clamp(28px,4vw,48px);margin-block:12px var(--sp-section);} body .experts__r a{border-radius:var(--r-lg);} /* ============================================================ ICONOGRAFÍA — trazo, tamaño y centrado únicos ============================================================ */ /* Trazo: 2px en interfaz, 1.75px en iconos de tile (≥24px). Remates siempre redondeados. */ body svg[stroke="currentColor"]{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} body :is(.ph-th--ic,.trust__item .ic,.ok-panel__ic,.od-info__ic,.ac-stat__ic,.pd-notice__ic,.cvalue .ic,.cinfo__item .ic,.sidepanel-empty__ic,.mi,.cookiebar__title,.ac-banner__ic) svg[stroke="currentColor"]{stroke-width:1.75;} /* Confirmaciones (check de paso completado, éxito): trazo más firme */ body :is(.co-step.done,.ok-badge) svg[stroke="currentColor"]{stroke-width:2.75;} /* Centrado: toda caja de icono centra su SVG en ambos ejes */ body :is(.icon-btn,.ph-th--ic,.trust__item .ic,.ok-panel__ic,.od-info__ic,.ac-stat__ic,.pd-notice__ic,.cvalue .ic,.cinfo__item .ic,.sidepanel-empty__ic,.mi,.tech-fab__ic,.techchat__av,.ac-banner__ic,.ac-nav__avatar,.ac-qa__ic,.co-step__n,.co-block__num,.ok-badge,.gallery__zoom,.vt-close,.cartx__rm,.cmember__social a,.f-social a){display:grid;place-items:center;line-height:0;} body :is(.icon-btn,.ph-th--ic,.trust__item .ic,.ok-panel__ic,.od-info__ic,.ac-stat__ic,.pd-notice__ic,.cvalue .ic,.cinfo__item .ic,.sidepanel-empty__ic,.mi,.tech-fab__ic,.techchat__av,.ac-banner__ic,.ac-qa__ic,.co-step__n,.ok-badge,.gallery__zoom,.cartx__rm,.cmember__social a,.f-social a)>svg{display:block;flex:none;margin:0;} body .co-step__n,body .co-block__num{line-height:1;} /* ============================================================ CASILLAS Y RADIOS — un solo diseño en todo el sitio ============================================================ */ body input[type=checkbox],body input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:1px 0 0;flex:none;border:1.5px solid var(--slate-400);border-radius:var(--r-check);background:#fff center/12px 12px no-repeat;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);display:inline-block;vertical-align:middle;accent-color:auto;} body input[type=radio]{border-radius:50%;} body input[type=checkbox]::after,body input[type=radio]::after{content:none;} body input[type=checkbox]:hover,body input[type=radio]:hover{border-color:var(--navy-800);} body input[type=checkbox]:checked{background-color:var(--navy-800);border-color:var(--navy-800);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");} body input[type=radio]:checked{background-color:var(--navy-800);border-color:var(--navy-800);box-shadow:inset 0 0 0 4px #fff;} body input[type=checkbox]:focus-visible,body input[type=radio]:focus-visible{outline:none;box-shadow:var(--focus-ring);} body input[type=radio]:checked:focus-visible{box-shadow:inset 0 0 0 4px #fff,var(--focus-ring);} body input[type=checkbox]:disabled,body input[type=radio]:disabled{opacity:.45;cursor:not-allowed;} /* Descripción de producto: misma tarjeta que la ficha técnica */ body .prod-desc{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:clamp(20px,2.6vw,32px);} body .prod-desc p,body .prod-desc .bullets{max-width:78ch;} body .prod-desc>p:first-child{margin-top:0;} body .prod-desc h4{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2);} body .prod-desc .bullets{margin-bottom:0;} /* ===== Ficha de producto · coherencia de encuadre ===== */ /* Migas sin banda: la ficha no tiene cabecera de página, así que no deja una franja suelta */ body.page-product .wrapper > .breadcrumb{background:transparent;} /* Imagen principal con fondo blanco, como miniaturas y tarjetas */ body .gallery__main{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-card);} body .gallery__thumbs .th{background:#fff;border-color:var(--line-2);} /* Variante activa: azul corporativo, igual que subcategorías y filtros */ body .pvar__opts button.is-active{background:var(--bg);border-color:var(--ink);color:var(--ink);} /* Resumen de referencia y precio: tarjeta del sistema */ /* Acciones secundarias con el mismo estilo (borde, fondo blanco) */ /* Descripción: ritmo entre párrafos y checks en azul (el naranja es solo para avisos) */ body .prod-desc p+p{margin-top:12px;} body .prod-desc .bullets svg{color:var(--navy-800);} body .prod-desc ul.bullets li:not(:has(svg))::before{background:var(--navy-800);} body .tabpanel>:first-child{margin-top:0;} body .relchip__brand{font-family:"Manrope",sans-serif;font-weight:800;color:var(--blue-600);} /* ============================================================ CABECERA DE PÁGINA COMPACTA + BANDA AZUL (diseño 1d5fd9a1) Migas + [miniatura · título / descripción · acción] + subcategorías en una banda navy; el listado sube sobre ella como hoja blanca. Selectores adaptados al DOM del tema: entre migas y cabecera va #main-content y entre subcategorías y listado #notifications, así que `+` pasa a `.wrapper:has()` / `~`. --bc-h/--ch-h/--band-h los fija common.js para que el difuminado sea continuo. ============================================================ */ body .wrapper > .breadcrumb .container{padding-block:24px 0;} body .chead .container,body .cpage-hero:not(.cpage-hero--marcas) .container{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:nowrap;padding-block:10px 18px;} /* Una sola banda: migas → cabecera → subcategorías. Tinte sólido y degradado solo en la última pieza. */ body .wrapper > .breadcrumb,body .chead,body .cpage-hero:not(.cpage-hero--marcas){background:var(--tint);} body .chead:not(:has(+ .subcats)),body .cpage-hero:not(.cpage-hero--marcas),body .subcats{background:linear-gradient(180deg,var(--tint),var(--tint-2));} body .subcats{border-bottom:none;} .ph-th{width:76px;height:76px;flex:none;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-card);display:grid;place-items:center;overflow:hidden;} .ph-th img{width:100%;height:100%;object-fit:contain;padding:8px;} .ph-th--logo img{padding:8px;} .ph-th--ic{color:var(--navy-800);} .ph-th--ic svg{width:26px;height:26px;} .ph-th--icon{color:var(--navy-800);} .ph-th--icon svg{width:68px;height:68px;display:block;} .ph-txt{min-width:0;flex:1;} body .chead h1,body .cpage-hero:not(.cpage-hero--marcas) h1{font-size:var(--fs-h2);margin:0;max-width:none;line-height:1.15;} body .chead p,body .cpage-hero:not(.cpage-hero--marcas) p{font-size:var(--fs-ui);color:var(--slate-600);margin:4px 0 0;max-width:72ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} body .chead .chead__cta{margin-left:auto;flex:none;} body .subcats .container{padding-block:0 16px;} @media (max-width:760px){ body .chead .container,body .cpage-hero:not(.cpage-hero--marcas) .container{flex-wrap:wrap;align-items:flex-start;gap:12px;} .ph-th{width:58px;height:58px;} .ph-txt{flex:1 1 calc(100% - 74px);} body .chead p,body .cpage-hero:not(.cpage-hero--marcas) p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} body .chead .chead__cta{margin-left:0;flex:1 1 100%;} body .chead .chead__cta .btn{width:100%;} } /* ===================== Cabecera de página de contenido ===================== Banda azul con retícula técnica + el contenido sube sobre ella como una hoja blanca */ body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb{background:var(--navy-800);border:none;} body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb a{color:rgba(255,255,255,.86);} body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb a:hover{color:#fff;} body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb .sep{color:rgba(255,255,255,.55);} body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb span{color:rgba(255,255,255,.86);} body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb [aria-current],body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb span:last-child{color:#fff;} body .cpage-hero:not(.cpage-hero--marcas){position:relative;border:none; background: linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%);} body .cpage-hero:not(.cpage-hero--marcas)::after{content:"";position:absolute;inset:0;background:radial-gradient(45% 120% at 85% 0%,rgba(77,148,232,.38),transparent 70%),radial-gradient(40% 100% at 10% 100%,rgba(26,95,190,.45),transparent 70%);pointer-events:none;} body .cpage-hero:not(.cpage-hero--marcas) .container{position:relative;z-index:1;padding-top:6px;padding-bottom:clamp(76px,8vw,104px);} body .cpage-hero:not(.cpage-hero--marcas) h1{color:#fff;} body .cpage-hero:not(.cpage-hero--marcas) p{color:rgba(255,255,255,.9);white-space:normal;overflow:visible;text-overflow:clip;max-width:68ch;} /* La primera sección sube sobre la banda */ body .cpage-hero:not(.cpage-hero--marcas) + .csec{padding-top:0;} body .cpage-hero:not(.cpage-hero--marcas) + .csec > .container{width:auto;position:relative;z-index:2;margin-top:clamp(-64px,-6vw,-48px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-band);padding-block:clamp(22px,2.6vw,32px);padding-inline:var(--sheet-pad);max-width:none;margin-inline:max(10px,calc((100% - var(--maxw)) / 2 + var(--pad)));} body .cpage-hero:not(.cpage-hero--marcas) + .cat-layout,body .cpage-hero:not(.cpage-hero--marcas) + .container{position:relative;z-index:2;} @media (max-width:760px){body .cpage-hero:not(.cpage-hero--marcas) + .csec > .container{margin-inline:10px;border-radius:var(--r-lg);}} body .cpage-hero:not(.cpage-hero--marcas) h1{margin-top:8px;} /* ===================== Cabecera de categoría: misma banda azul que las páginas de contenido ===================== */ body .wrapper:has(.chead) > .breadcrumb{background:var(--navy-800);border:none;} body .wrapper:has(.chead) > .breadcrumb a,body .wrapper:has(.chead) > .breadcrumb span{color:rgba(255,255,255,.86);} body .wrapper:has(.chead) > .breadcrumb a:hover{color:#fff;} body .wrapper:has(.chead) > .breadcrumb .sep{color:rgba(255,255,255,.55);} body .wrapper:has(.chead) > .breadcrumb [aria-current]{color:#fff;} body .chead,body .chead + .subcats{position:relative;border:none; background: radial-gradient(circle,rgba(255,255,255,.16) 1.1px,transparent 1.6px) 0 0/22px 22px, var(--navy-800);} body .chead + .subcats{background: linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%);} body .chead::after{content:"";position:absolute;inset:0;background:radial-gradient(45% 120% at 85% 0%,rgba(77,148,232,.38),transparent 70%),radial-gradient(40% 100% at 10% 100%,rgba(26,95,190,.45),transparent 70%);pointer-events:none;} body .chead .container{position:relative;z-index:1;padding-top:8px;} body .chead h1{color:#fff;} body .chead p,body .chead .chead__intro{color:rgba(255,255,255,.9);white-space:normal;overflow:visible;text-overflow:clip;} body .chead .ph-th{background:#fff;border-color:transparent;} body .chead .btn-accent{background:#fff;color:var(--navy-800);border-color:#fff;} body .chead .btn-accent:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-800);} /* subcategorías sobre azul */ body .chead + .subcats .container{padding-block:2px clamp(64px,6vw,84px);} body .chead + .subcats a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;} body .chead + .subcats a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff;} body .chead + .subcats a.is-active{background:#fff;border-color:#fff;color:var(--navy-800);} /* el listado sube sobre la banda como hoja blanca */ body .chead:not(.schead) ~ .columns-container{width:auto;position:relative;z-index:2;margin-top:clamp(-60px,-5.5vw,-44px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-band);max-width:none;padding-inline:var(--sheet-pad);margin-inline:max(10px,calc((100% - var(--maxw)) / 2 + var(--pad)));} body .chead:not(.schead) ~ .columns-container > .row{padding-top:14px;} @media (max-width:760px){body .chead:not(.schead) ~ .columns-container{margin-inline:10px;border-radius:var(--r-lg);}} /* Anillos concéntricos (sección de tubería / brida) que se desvanecen hacia abajo */ body .chead::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-radial-gradient(circle at 94% 0%,transparent 0 46px,rgba(255,255,255,.13) 46px 47.5px); -webkit-mask-image:radial-gradient(70% 160% at 94% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 160% at 94% 0%,#000 30%,transparent 80%);} body .cpage-hero:not(.cpage-hero--marcas)::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-radial-gradient(circle at 94% 0%,transparent 0 46px,rgba(255,255,255,.13) 46px 47.5px); -webkit-mask-image:radial-gradient(70% 160% at 94% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 160% at 94% 0%,#000 30%,transparent 80%);} body .wrapper:has(.chead) > .breadcrumb{background:radial-gradient(circle,rgba(255,255,255,.16) 1.1px,transparent 1.6px) 0 0/22px 22px,var(--navy-800);} /* Fondo de cabecera: solo difuminado (sin patrones) */ body .wrapper:has(.chead) > .breadcrumb{background:var(--navy-800);} body .chead{background:var(--navy-800);} body .chead + .subcats{background:linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%);} body .chead::before,body .cpage-hero:not(.cpage-hero--marcas)::before{content:none;} body .chead::after{background:radial-gradient(45% 120% at 85% 0%,rgba(77,148,232,.38),transparent 70%),radial-gradient(40% 100% at 10% 100%,rgba(26,95,190,.45),transparent 70%);} body .cpage-hero:not(.cpage-hero--marcas){background:linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%);} body .cpage-hero:not(.cpage-hero--marcas)::after{background:radial-gradient(45% 120% at 85% 0%,rgba(77,148,232,.38),transparent 70%),radial-gradient(40% 100% at 10% 100%,rgba(26,95,190,.45),transparent 70%);} /* difuminado continuo en toda la banda (sin corte entre cabecera y subcategorías) */ body .chead::after{content:none;} body .wrapper:has(.chead) > .breadcrumb,body .chead,body .chead + .subcats{ --bandbg:radial-gradient(40% 70% at 86% 18%,rgba(77,148,232,.42),transparent 70%),radial-gradient(38% 70% at 8% 92%,rgba(26,95,190,.55),transparent 70%),linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%); background:var(--bandbg);background-size:100% var(--band-h,300px);background-repeat:no-repeat;background-color:var(--band-end);} body .wrapper:has(.chead) > .breadcrumb{background-position:0 0;} body .chead{background-position:0 calc(-1 * var(--bc-h,46px));} body .chead + .subcats{background-position:0 calc(-1 * (var(--bc-h,46px) + var(--ch-h,140px)));} /* Contacto y acceso no tienen una .csec hermana que suba sobre la banda */ body .cpage-hero:not(.cpage-hero--marcas):not(:has(+ .csec)) .container{padding-bottom:var(--sp-section-sm);} /* Sin subcategorías (marcas, hojas sin hermanas) la banda acaba en la propia cabecera: el diseño solo contempla el caso con subcategorías. */ body .chead:not(:has(+ .subcats)){background:var(--bandbg);background-size:100% var(--band-h,300px);background-repeat:no-repeat;background-color:var(--band-end);background-position:0 calc(-1 * var(--bc-h,46px));} body .chead:not(.schead):not(:has(+ .subcats)):has(~ .columns-container) .container{padding-bottom:clamp(64px,6vw,84px);} /* Cabeceras con h1/p sueltos (contacto, acceso, legales): se apilan. */ body .cpage-hero:not(.cpage-hero--marcas) .container:has(> h1){flex-direction:column;align-items:flex-start;gap:0;} /* El borde migas/cabecera cae en subpíxel y deja ver un hilo del fondo. */ body .wrapper:has(.cpage-hero:not(.cpage-hero--marcas)) > .breadcrumb{position:relative;z-index:1;box-shadow:0 1px 0 var(--navy-800);} body .cpage-hero:not(.cpage-hero--marcas) .btn-accent{background:#fff;color:var(--navy-800);border-color:#fff;} body .cpage-hero:not(.cpage-hero--marcas) .btn-accent:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-800);} /* Móvil: la descripción (uno o varios

    ) se recorta como bloque; el clamp del diseño por

    lo anula su propio overflow:visible. */ @media (max-width:760px){ body .chead .chead__intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} body .chead .chead__intro p{display:inline;} } @media (max-width:760px){body .cpage-hero:not(.cpage-hero--marcas) p{display:block;-webkit-line-clamp:unset;}} /* Cabecera del sitio en anchos medios y móvil (diseño 1d5fd9a1): marca más estrecha para que los iconos no bajen a una segunda línea. */ @media (max-width:1180px){ .navbar{gap:16px;} .mainnav>li>a,.mainnav>li>button{padding:10px 10px;font-size:var(--fs-ui);} .navbar .brand,.navbar .brand>.brand-logo{width:150px;} } /* ============================================================ BANNER DE COOKIES (cookiesplus) — .cookiebar del diseño 1d5fd9a1 Sobrescribe la piel antigua de modules/cookiesplus (fuera de git): tarjeta abajo a la izquierda, icono en caja tintada, finalidades en filas sobre --bg, interruptor navy y «Aceptar todas» a ancho completo encima de Rechazar / Configurar. ============================================================ */ #cookiesplus-modal.cookiesplus-top,#cookiesplus-modal.cookiesplus-center,#cookiesplus-modal.cookiesplus-bottom,#cookiesplus-modal.cookiesplus-bottom-left,#cookiesplus-modal.cookiesplus-bottom-right,#cookiesplus-modal{left:24px!important;right:auto!important;bottom:24px!important;transform:none!important;width:min(440px,calc(100% - 48px))!important;max-width:none!important;padding:24px!important;border:1px solid var(--line-2)!important;border-radius:var(--r-xl)!important;box-shadow:var(--shadow-card-hover)!important;color:var(--ink)!important;} #cookiesplus-content .cookiesplus-info:first-of-type .cookiesplus-text{position:relative;} #cookiesplus-content .cookiesplus-info:first-of-type .cookiesplus-text::after{content:"";position:absolute;left:0;top:0;width:40px;height:40px;border-radius:var(--r-lg);background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23093F95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 8.5h.01M15.5 9.5h.01M12 13h.01M9.5 15.5h.01M15 15h.01'/%3E%3C/svg%3E") center/20px 20px no-repeat;} #cookiesplus-content .cookiesplus-info:first-of-type .cookiesplus-text::before{background:none;padding-left:52px;margin-bottom:14px;font:800 var(--fs-lead)/40px "Manrope",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);} #cookiesplus-modal .cookiesplus-text{font-size:var(--fs-sm);color:var(--slate-600);line-height:1.6;} #cookiesplus-modal .cookiesplus-text a,#cookiesplus-modal .cookiesplus-policy{color:var(--blue-600);} #cookiesplus-modal .cookieplus-finality-container{padding:12px 14px;margin-top:8px;border:none;background:var(--bg);border-radius:var(--r);} #cookiesplus-modal .cookiesplus-finality-header{gap:16px;} #cookiesplus-modal .cookiesplus-finality-title strong{font:700 var(--fs-sm)/1.3 "Manrope",sans-serif;color:var(--ink);} #cookiesplus-modal .cookiesplus-finality-content{font-size:var(--fs-xs);color:var(--slate-500);line-height:1.45;} #cookiesplus-modal .cookiesplus-finality-switch-container span.technical{color:var(--slate-500);} #cookiesplus-modal .cookiesplus-finality-switch{width:40px;height:24px;background:var(--line);transition:background .16s var(--ease);} #cookiesplus-modal .cookiesplus-finality-switch:before{top:3px;left:3px;box-shadow:var(--shadow-sm);transition:left .16s var(--ease);} #cookiesplus-modal .cookiesplus-finality-checkbox[value="off"]:checked ~ .cookiesplus-finality-switch{background:var(--line);} #cookiesplus-modal .cookiesplus-finality-checkbox[value="off"]:checked ~ .cookiesplus-finality-switch:before{left:3px;} #cookiesplus-modal .cookiesplus-finality-checkbox[value="on"]:checked ~ .cookiesplus-finality-switch{background:var(--navy-800);} #cookiesplus-modal .cookiesplus-finality-checkbox[value="on"]:checked ~ .cookiesplus-finality-switch:before{left:19px;} #cookiesplus-modal .cookiesplus-finality-checkbox:focus-visible ~ .cookiesplus-finality-switch{box-shadow:var(--focus-ring);} #cookiesplus-modal .cookiesplus-actions{margin-top:16px;} #cookiesplus-modal .first-layer > .row:first-child,#cookiesplus-modal .second-layer > .row:first-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;} #cookiesplus-modal .cookiesplus-btn{min-height:var(--h-control-sm);font:600 var(--fs-ui)/1 "Manrope",system-ui,sans-serif!important;border-radius:var(--r-control)!important;} #cookiesplus-modal .cookiesplus-btn{order:0;} #cookiesplus-modal button.cookiesplus-accept{grid-column:1/-1;grid-row:1;} #cookiesplus-modal button.cookiesplus-reject{grid-column:1;grid-row:2;} #cookiesplus-modal button.cookiesplus-more-information{grid-column:2;grid-row:2;} #cookiesplus-modal button.cookiesplus-save.cookiesplus-accept-selected{grid-column:1/-1;grid-row:2;} #cookiesplus-modal button.cookiesplus-reject:hover{background:var(--bg)!important;border-color:var(--ink)!important;} #cookiesplus-modal button.cookiesplus-accept{background:var(--blue-600)!important;border-color:var(--blue-600)!important;} #cookiesplus-modal button.cookiesplus-accept:hover{background:var(--navy-800)!important;border-color:var(--navy-800)!important;} #cookiesplus-modal button.cookiesplus-reject,#cookiesplus-modal button.cookiesplus-more-information,#cookiesplus-modal button.cookiesplus-save.cookiesplus-accept-selected{border:1.5px solid var(--line)!important;color:var(--ink)!important;} #cookiesplus-modal #cookiesplus-back{font-size:var(--fs-sm);color:var(--slate-500);} @media (max-width:560px){#cookiesplus-modal.cookiesplus-top,#cookiesplus-modal.cookiesplus-center,#cookiesplus-modal.cookiesplus-bottom,#cookiesplus-modal.cookiesplus-bottom-left,#cookiesplus-modal.cookiesplus-bottom-right,#cookiesplus-modal{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;padding:20px!important;}} /* ============================================================ Diseño 1d5fd9a1 · revisión 2 ============================================================ */ /* Texto largo: nunca más ancho que la medida de lectura aunque el contenedor crezca */ .csec__head p,.cpage-hero p,.chead p,.prod-tabs p,.tabpanel p,.news-body p,.seo-block p,.csplit__txt p,.cms-content p{max-width:var(--measure);} /* Header móvil: logo compacto e iconos sin encoger */ @media (max-width:560px){ .site-header .navbar{gap:8px;min-height:64px;padding-block:8px;} .site-header .brand,.site-header .brand>.brand-logo{width:112px;} .site-header .nav-actions{gap:4px;margin-left:auto;} .site-header .nav-actions .icon-btn,.site-header .burger{flex:none;width:38px;height:38px;} .site-header .nav-actions .icon-btn svg{width:18px;height:18px;} } @media (max-width:1024px){:root{--fs-micro:11px;}} @media (max-width:360px){.site-header .brand,.site-header .brand>.brand-logo{width:92px;}.site-header .nav-actions .icon-btn,.site-header .burger{width:36px;height:36px;}} @media (max-width:640px){.cart-count,.budget-count{right:-4px;top:-5px;}} /* Header al hacer scroll: la barra superior se pliega, la navegación se encoge, el logo se compacta, el menú se desvanece y el buscador ocupa su hueco. Una sola curva y duración (--hdr-t) para que todas las piezas se muevan a la vez. */ .site-header{--hdr-t:.38s;--hdr-ease:cubic-bezier(.22,.8,.24,1); transition:box-shadow var(--hdr-t) var(--hdr-ease),background-color var(--hdr-t) var(--hdr-ease);} .site-header .topbar .container{transition:height var(--hdr-t) var(--hdr-ease);} .site-header .topbar{transition:opacity calc(var(--hdr-t)*.6) var(--hdr-ease);} .site-header .navbar{transition:min-height var(--hdr-t) var(--hdr-ease),padding var(--hdr-t) var(--hdr-ease);} .site-header .brand>.brand-logo{transition:width var(--hdr-t) var(--hdr-ease);} .site-header.is-stuck .navbar{min-height:60px;padding-block:6px;} .site-header.is-stuck .brand>.brand-logo{width:150px;} @media (min-width:901px){ .site-header .mainnav{max-width:800px;overflow:visible; transition:opacity calc(var(--hdr-t)*.55) var(--hdr-ease),transform var(--hdr-t) var(--hdr-ease),max-width var(--hdr-t) var(--hdr-ease),margin var(--hdr-t) var(--hdr-ease);} .site-header.is-stuck .mainnav{max-width:0;opacity:0;transform:translateY(-8px);pointer-events:none;overflow:hidden;margin:0;} .site-header .nav-actions{transition:margin var(--hdr-t) var(--hdr-ease);} .site-header.is-stuck .nav-actions{flex:1;margin-left:28px;} .site-header .hdr-search{transition:flex-basis var(--hdr-t) var(--hdr-ease),max-width var(--hdr-t) var(--hdr-ease),border-color .16s var(--ease),box-shadow .16s var(--ease);} /* Entre 901 y 1080px el buscador va oculto por falta de sitio; al compactarse sí cabe. */ .site-header.is-stuck .hdr-search{display:flex;flex:1 1 100%;width:auto;max-width:none;background:var(--bg);height:var(--h-control);min-height:var(--h-control);} .site-header.is-stuck .hdr-search:focus-within{background:#fff;box-shadow:0 0 0 3px rgba(26,95,190,.12);} .site-header.is-stuck .nav-actions .icon-btn--search-m{display:none;} } @media (prefers-reduced-motion:reduce){.site-header,.site-header *{transition-duration:.01ms!important;}} /* Iconos de cabecera: tamaño fijo, nunca se encogen al expandirse el buscador */ .nav-actions > :not(.hdr-search){flex:0 0 auto;} /* Cifras alineadas en tarjetas y precios */ body .pc__price .amt,body .pc__ref,body .cartx .amt,body .trust b{font-variant-numeric:tabular-nums;} /* Variante de la home (Home B): ref y medidas en Inter. En los listados (Categoria.html) van en monoespaciada, como el resto de datos técnicos. */ body.page-index .pc__ref{font-family:"Inter",sans-serif;font-weight:600;letter-spacing:.02em;color:var(--slate-600);} /* Footer · banda azul corporativa a todo el ancho */ body .site-footer{padding:clamp(40px,4.5vw,60px) 0 0;margin-top:clamp(32px,4vw,48px);color:rgba(255,255,255,.86);border-radius:0;background:radial-gradient(620px 300px at 100% 0%,rgba(255,255,255,.12),transparent 70%),radial-gradient(520px 280px at 0% 100%,rgba(255,255,255,.07),transparent 70%),linear-gradient(135deg,var(--navy-800) 0%,var(--blue-600) 100%);} body .site-footer>.container{position:relative;} body .footer-grid{gap:clamp(28px,4vw,56px);} body .site-footer h5{color:#fff;font-size:var(--fs-xs);letter-spacing:.12em;margin-bottom:14px;opacity:.95;} body .site-footer .f-brand p{color:rgba(255,255,255,.86);margin-top:16px;} body .site-footer ul a,body .site-footer .f-contact a{color:rgba(255,255,255,.86);} body .site-footer ul a:hover,body .site-footer .f-contact a:hover{color:#fff;} body .site-footer .f-contact li{gap:11px;align-items:center;} body .site-footer .f-contact svg{box-sizing:content-box;width:15px;height:15px;padding:7px;margin:0;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;} body .footer-bottom{margin-top:clamp(28px,3.5vw,40px);padding-block:18px 20px;border-top:1px solid rgba(255,255,255,.16);font-family:"Inter",sans-serif;letter-spacing:0;color:rgba(255,255,255,.86);align-items:center;} body .footer-bottom a{color:rgba(255,255,255,.86);} body .footer-bottom a:hover{color:#fff;} body .f-social a{border-radius:var(--r-pill);border-color:rgba(255,255,255,.28);color:#fff;} body .f-social a:hover{background:#fff;color:var(--navy-800);border-color:#fff;} /* Cookies: overlay del módulo (cookiesplus lo muestra con display:block en línea) con el scrim del diseño; bloquea el scroll y oculta el chat hasta decidir. */ html #cookiesplus-overlay[style*="display: block"]{display:block!important;background:var(--scrim)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} html:has(#cookiesplus-overlay[style*="display: block"]),html:has(#cookiesplus-overlay[style*="display: block"]) body{overflow:hidden;} html:has(#cookiesplus-overlay[style*="display: block"]) .tech-fab{visibility:hidden;} /* Categoría: acción en la fila de subcategorías y barra de subcategorías fija al hacer scroll */ body .chead .btn-accent:hover,body .subcats .chead__cta .btn-accent:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-800);} body .subcats .container{align-items:center;} body .subcats .chead__cta{margin-left:auto;flex:none;} body .chead + .subcats .chead__cta .btn{background:#fff;border-color:#fff;color:var(--navy-800);min-height:var(--h-control-sm);padding:0 14px;font-size:var(--fs-sm);gap:7px;} body .chead + .subcats .chead__cta .btn svg{width:15px;height:15px;} @media (max-width:760px){body .subcats .chead__cta{margin-left:0;flex:1 1 100%;margin-top:6px;}body .subcats .chead__cta .btn{width:100%;}} /* subcategorías sobre azul */ body .chead + .subcats .container{padding-block:2px clamp(64px,6vw,84px);} body .chead + .subcats a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;} body .chead + .subcats a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff;} body .chead + .subcats a.is-active{background:#fff;border-color:#fff;color:var(--navy-800);} /* Barra de subcategorías fija (aparece bajo el header al pasar la banda) · mismo azul y estilos que la banda */ .subcats-sticky{position:fixed;left:0;right:0;top:0;z-index:55;background:radial-gradient(40% 160% at 86% 0%,rgba(77,148,232,.38),transparent 70%),linear-gradient(180deg,var(--navy-800) 0%,var(--band-end) 100%);background-color:var(--band-end);box-shadow:var(--shadow-band-bar);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;} .subcats-sticky.is-shown{opacity:1;transform:none;visibility:visible;pointer-events:auto;} body .subcats-sticky .subcats-sticky__wrap{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:10px;} .subcats-sticky__wrap::-webkit-scrollbar{display:none;} body .subcats-sticky a{flex:none;white-space:nowrap;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-sm);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);padding:6px 13px;border-radius:var(--r-control);transition:.14s;} body .subcats-sticky a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff;} body .subcats-sticky a.is-active{background:#fff;border-color:#fff;color:var(--navy-800);} body .subcats-sticky .chead__cta{margin-left:auto;flex:none;padding-left:12px;} body .subcats-sticky .chead__cta .btn{background:#fff;border-color:#fff;color:var(--navy-800);min-height:var(--h-control-sm);padding:0 14px;font-size:var(--fs-sm);gap:7px;} body .subcats-sticky .chead__cta .btn:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-800);} body .subcats-sticky .chead__cta .btn svg{width:15px;height:15px;} @media (max-width:760px){body .subcats-sticky .chead__cta{display:none;}} /* Ficha de producto (revisión 2) */ /* Variante activa: neutra (gris + borde tinta) para que el único azul fuerte de la zona sea el CTA */ body .pvar__opts button.is-active{background:var(--bg);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font-weight:700;} body .pvar__opts button:not(.is-active):hover{border-color:var(--slate-500);} /* Pie de la tarjeta de precio: ventaja de alta profesional (sin caja propia, sin azul extra) */ /* Alertas de la zona de compra: una sola familia (info / aviso), mismo radio, icono y ritmo */ .pvar__alerts{display:grid;gap:8px;margin:0 0 12px;} .pvar__alerts[hidden]{display:none;} .palert{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--tint-2);font-size:var(--fs-sm);line-height:1.4;color:var(--slate-700);animation:palertIn .22s var(--ease);} .palert p{margin:0;flex:1;min-width:0;} .palert b{color:var(--ink);font-weight:700;} .palert__ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;line-height:0;flex:none;background:#fff;color:var(--navy-800);border:1px solid var(--line);} .palert__ic svg{width:15px;height:15px;display:block;} .palert__act{flex:none;background:none;border:0;padding:4px 0;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--blue-600);cursor:pointer;white-space:nowrap;} .palert__act:hover{text-decoration:underline;text-underline-offset:3px;} .palert--warn{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);} .palert--warn .palert__ic{color:var(--accent-600);border-color:var(--accent-line);} @keyframes palertIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}} @media (max-width:420px){.palert{flex-wrap:wrap;}.palert__act{margin-left:38px;}} /* La fila cantidad + «Añadir al carrito» lleva .prod-buy, pero en el diseño no es una tarjeta */ body .pvar__buy.prod-buy{background:none;box-shadow:none;border-color:transparent;} /* Hummingbird da 32px de margen inferior a su contenedor de compra (solo productos simples) */ .pvar__buy .product__add-to-cart-container{margin-bottom:0;} /* Cabecera compacta del contenido CMS (texto + acción): fila como .chead, el texto ocupa el hueco y la acción va a la derecha. */ body .cpage-hero--compact .container{align-items:center;flex-wrap:nowrap;} body .cpage-hero--compact .container>div{flex:1;min-width:0;} body .cpage-hero--compact .container>.btn{margin-left:auto;flex:none;} body .cpage-hero--compact h1{font-weight:var(--fw-display);} @media (max-width:760px){body .cpage-hero--compact .container{flex-wrap:wrap;}body .cpage-hero--compact .container>.btn{margin-left:0;width:100%;justify-content:center;}} /* El brillo radial de la cabecera nace en su borde superior y marcaba una línea con la miga (azul liso): se funde en los primeros 40px. */ body .cpage-hero:not(.cpage-hero--marcas)::after{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px);} /* Cabeceras de contenido (contacto, acceso, legales): como en categoría, la banda deja hueco y el contenido de la página sube sobre ella como hoja blanca (diseño: .cpage-hero + .csec). En el tema el contenido va en .columns-container. */ body .wrapper > .cpage-hero:not(.cpage-hero--marcas):has(~ .columns-container, + .cms-page) .container{padding-bottom:clamp(64px,6vw,84px);} body .wrapper:not(:has(> .cms-page)) > .cpage-hero:not(.cpage-hero--marcas) ~ .columns-container,body .wrapper > .cpage-hero:not(.cpage-hero--marcas) + .cms-page{width:auto;position:relative;z-index:2;margin-top:clamp(-60px,-5.5vw,-44px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-band);max-width:none;padding-inline:var(--sheet-pad);margin-inline:max(10px,calc((100% - var(--maxw)) / 2 + var(--pad)));} @media (max-width:760px){body .wrapper:not(:has(> .cms-page)) > .cpage-hero:not(.cpage-hero--marcas) ~ .columns-container,body .wrapper > .cpage-hero:not(.cpage-hero--marcas) + .cms-page{margin-inline:10px;border-radius:var(--r-lg);}} /* Contenido editorial (diseño): negritas con menos peso para una lectura más suave */ .csec p strong,.csec p b,.csec li strong{color:var(--slate-700);font-weight:600;} /* Medidas DN en miniatura: celdas técnicas de 4px sobre gris suave (no píldoras) */ /* Carrusel: el track recorta en overflow, así que la tarjeta no se eleva ni proyecta sombra (se vería cortada). Hover = borde más oscuro. Margen vertical para el foco. */ body .pcarousel__track{padding-block:4px;margin-block:-4px;} body .pcarousel__track>.pc{box-shadow:none;} body .pcarousel__track>.pc:hover{transform:none;box-shadow:none;border-color:var(--slate-400);} /* Filtros integrados (≥901px): sin caja, sobre la misma hoja; una línea vertical fina los separa del listado y los grupos se separan por espacio, no por bordes. */ @media (min-width:901px){ #left-column:has(#amazzing_filter){margin-right:28px;} body #amazzing_filter{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:0 22px 0 0;overflow:visible;} body #amazzing_filter.block .title_block{background:transparent;border-bottom:0;padding:0 0 14px;} body #amazzing_filter .af_filter{padding:0;border-bottom:0;} body #amazzing_filter .af_filter + .af_filter{margin-top:var(--sp-5);} body #amazzing_filter .af_subtitle{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);} body #amazzing_filter .af_filter_content{margin-top:8px;} body #amazzing_filter .af-checkbox-label{padding:5px 0;} body #amazzing_filter .af-checkbox-label:hover{background:none;color:var(--ink);} } /* Lupa solo-icono: únicamente cuando se oculta el buscador (≤640px, y entre 901 y 1179px sin scroll, ver abajo). La regla de centrado de iconos la mostraba siempre. */ body .nav-actions .icon-btn--search-m{display:none;} @media (max-width:640px){body .hdr-search{display:none;}body .nav-actions .icon-btn--search-m{display:grid;}} @media (min-width:901px){body .site-header.is-stuck .nav-actions .icon-btn--search-m{display:none;}} /* Miniatura/icono de cabecera (categoría, marca, sector): 92px, 68px en móvil */ body .chead .ph-th{width:92px;height:92px;} @media (max-width:760px){body .chead .ph-th{width:68px;height:68px;}body .chead .ph-th--icon svg{width:50px;height:50px;}body .chead .ph-txt{flex:1 1 calc(100% - 84px);}} /* Menú Sectores: los mismos iconos rellenos que la cabecera de cada sector */ .minimega .mi .sec-ic--menu{width:24px;height:24px;display:block;} /* Submenús: la fila se pulsa → --r-control; el icono es "icono pequeño" → --r-sm. El panel de marcas recorta su pie gris para seguir la esquina del desplegable. */ body :is(.minimega__inner a,.mega-col ul a,.brandsmega__inner a){border-radius:var(--r-control);} body :is(.minimega__inner a,.mega-col ul a) .mi{border-radius:var(--r-sm);} body .brandsmega{overflow:hidden;} /* Subcategorías: mismo alto que el control pequeño (38px), como el CTA de su fila. En móvil, una sola fila deslizable y el CTA debajo a todo el ancho. */ .subcats__list{display:contents;} body :is(.subcats a,.subcats-sticky a){display:inline-flex;align-items:center;height:var(--h-control-sm);padding:0 14px;line-height:1;box-sizing:border-box;white-space:nowrap;flex:none;} @media (max-width:760px){ body .subcats .container{flex-wrap:wrap;} body .subcats .subcats__list{display:flex;gap:6px;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none; margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);} body .subcats .subcats__list::-webkit-scrollbar{display:none;} body .subcats .subcats__list a{scroll-snap-align:start;} body .subcats .chead__cta{flex:1 1 100%;margin:10px 0 0;} body .subcats .chead__cta .btn{width:100%;} } /* "Solicitar presupuesto" naranja SOLO en categoría; en marca y catálogo sigue blanco */ body.page-category :is(.chead,.chead + .subcats,.subcats-sticky) .chead__cta .btn{background:var(--accent);border-color:var(--accent);color:#fff;} body.page-category :is(.chead,.chead + .subcats,.subcats-sticky) .chead__cta .btn:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff;} /* Botón «Filtros» de amazzingfilter en modo estático = .cat-mobilebar del diseño: secundario a todo el ancho sobre el listado. Solo por debajo del umbral compacto del módulo (767px), que es cuando el panel de filtros pasa a lateral deslizante. */ body .btn.compact-toggle.external{display:none;} @media (max-width:767px){ body .btn.compact-toggle.external{display:flex;width:100%;margin:0 0 16px;gap:9px;letter-spacing:0;font-size:var(--fs-ui);text-transform:none;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;} body .btn.compact-toggle.external:hover{border-color:var(--navy-800);color:var(--navy-800);background:var(--tint-2);} body .btn.compact-toggle.external .compact-toggle-icon{display:none;} body .btn.compact-toggle.external::before{content:"";width:18px;height:18px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;} } /* ===================== Revisión 6 del diseño ===================== */ /* ===================== Menú: tamaño de texto y radios ===================== Texto: el menú principal sube de 14px a --fs-nav (16px); es la navegación de primer nivel y debe leerse por encima del cuerpo (15px) y de las opciones de submenú (14px). Radios (criterio único): · Panel ancho de Catálogo (.mega): banda pegada al header, de borde a borde → sin radio. · Paneles flotantes (Sectores, Empresa, Marcas): superficie → --r-card (14px), con borde y recorte. · Todo lo que se pulsa dentro (ítem de nivel 1, familia de la columna izquierda, opción de submenú, marca) → --r-control (8px). Queda por debajo del radio del panel (14 > 8), así la jerarquía se lee: el contenedor es más suave que lo que contiene. · Caja de icono de opción → --r-sm (8px). Subcategorías del panel de Catálogo: texto, sin caja → sin radio. */ body .mainnav>li>a,body .mainnav>li>button{font-size:var(--fs-nav);} body .mega2__cat{border-radius:var(--r-control);} body :is(.minimega,.brandsmega){border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;} /* Navbar sin desbordes: el buscador es lo único elástico; los ítems tienen alto fijo. 16px de menú solo cuando cabe (≥1280px); por debajo vuelve a 14px con menos aire. */ @media (min-width:901px){ body .navbar{min-width:0;} body .nav-actions{flex:1 1 auto;min-width:0;justify-content:flex-end;} body .nav-actions .hdr-search{flex:1 1 auto;width:auto;min-width:120px;max-width:248px;} body .mainnav>li>a,body .mainnav>li>button{height:42px;box-sizing:border-box;line-height:1;} } @media (min-width:901px) and (max-width:1279px){ body .mainnav>li>a,body .mainnav>li>button{font-size:var(--fs-ui);padding:0 10px;} body .mainnav{gap:2px;margin-left:4px;} } /* Buscador en cabecera: la barra completa necesita ~1180px con el menú visible. Entre 901 y 1179px (menú visible, sin hueco) el buscador pasa a lupa solo-icono, que abre el mismo buscador avanzado. Separación mínima garantizada entre menú y acciones. */ @media (min-width:901px){body .nav-actions{margin-left:var(--sp-6,24px);}} @media (min-width:901px) and (max-width:1179px){ body .site-header:not(.is-stuck) .nav-actions .hdr-search{display:none;} body .site-header:not(.is-stuck) .nav-actions .icon-btn--search-m{display:grid;} } /* Submenús: "puente" invisible entre el ítem del menú y el panel para que el cursor no lo cierre al bajar. Es descendiente del

  • , así que cruzar el hueco no dispara mouseleave. */ /* Puente solo bajo el propio botón (mismo ancho), 12px: cubre el hueco de 8px sin tapar otros controles del header */ body .mainnav>li.has-mega>button{position:relative;} body .mainnav>li.has-mega>button::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;} /* Al hacer scroll el buscador vuelve a expandirse (la regla elástica de 120–248px solo aplica con el menú visible) */ @media (min-width:901px){ body .site-header.is-stuck .nav-actions .hdr-search{flex:1 1 100%;max-width:none;min-width:0;display:flex;} body .site-header.is-stuck .nav-actions .icon-btn--search-m{display:none;} } /* ===================== Subcategorías: carril deslizable con flechas hasta el CTA ===================== */ body .chead + .subcats .container{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;} body .subcats__rail{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;} body .subcats__rail .subcats__list{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);} body .subcats__rail .subcats__list::-webkit-scrollbar{display:none;} body .subcats__rail .subcats__list a{flex:none;white-space:nowrap;} body .subcats__rail.has-prev{--fade-l:28px;} body .subcats__rail.has-next{--fade-r:28px;} body .subcats__nav{flex:none;display:grid;place-items:center;width:var(--h-control-sm);height:var(--h-control-sm);border-radius:var(--r-control);border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease);} body .subcats__nav:hover{background:#fff;border-color:#fff;color:var(--navy-800);} body .subcats__nav svg{width:16px;height:16px;display:block;} body .subcats__nav[disabled]{opacity:.35;pointer-events:none;} body .subcats__rail:not(.has-prev):not(.has-next) .subcats__nav{display:none;} body .chead + .subcats .chead__cta{flex:none;margin-left:4px;} @media (max-width:760px){ body .chead + .subcats .container{flex-wrap:wrap;} body .subcats__rail{flex:1 1 100%;} body .subcats__nav{display:none;} body .chead + .subcats .chead__cta{flex:1 1 100%;margin:10px 0 0;} } /* ===================== Móvil: subcategorías con flechas dentro del contenedor + filtros desde la izquierda ===================== */ @media (max-width:760px){ body .chead + .subcats .container{overflow:hidden;} body .subcats__rail{flex:1 1 100%;min-width:0;max-width:100%;gap:6px;} body .subcats__rail .subcats__list{margin-inline:0;padding-inline:0;} body .subcats__rail.is-scrollable .subcats__nav{display:grid;width:34px;height:34px;} body .subcats__rail:not(.is-scrollable) .subcats__nav{display:none;} } /* Cabecera de categoría · móvil: la descripción fluye completa en su propia fila, sin recortes ni desbordes (el clamp a 2 líneas perdía su overflow:hidden por la regla de color y el texto invadía las subcategorías) */ @media (max-width:760px){ body .chead .container{flex-wrap:wrap;align-items:center;row-gap:12px;} body .chead .ph-txt{flex:1 1 calc(100% - 84px);min-width:0;} body .chead .ph-txt p,body .chead .chead__intro{display:block;-webkit-line-clamp:unset;white-space:normal;overflow:visible;margin-top:6px;line-height:1.5;} body .chead .chead__intro p{display:block;margin:0;} body .chead + .subcats .container{padding-top:4px;} } /* ===================== Menú móvil (drawer) ===================== */ body .drawer{left:0;right:auto;transform:translateX(-100%);width:min(380px,90vw);z-index:96;box-shadow:12px 0 40px rgba(16,32,56,.22);border-radius:0 var(--r-card) var(--r-card) 0;background:#fff;} body .drawer.open{transform:translateX(0);} body .scrim{z-index:95;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} body .drawer-head{padding:16px 18px;border-bottom:none;} body .drawer-head .brand-logo{height:38px;width:auto;} body .drawer-close{width:40px;height:40px;border-radius:var(--r-control);border:1px solid var(--line);background:#fff;color:var(--ink);} body .drawer-close:hover{border-color:var(--ink);} /* Buscador */ body .dn-search{display:flex;align-items:center;gap:10px;margin:0 18px 6px;height:var(--h-control);padding:0 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg);color:var(--slate-500);font:inherit;font-size:var(--fs-ui);text-align:left;cursor:text;} body .dn-search svg{width:18px;height:18px;flex:none;} /* Navegación */ body .drawer nav.dn{padding:14px 18px 8px;} body .dn__lbl{margin:6px 0 10px;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);} body .dn__fams{display:grid;grid-template-columns:1fr 1fr;gap:8px;} body .dn__fam{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-control);background:#fff;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);line-height:1.25;color:var(--ink);transition:border-color .15s var(--ease),background .15s var(--ease);} body .dn__fam:hover,body .dn__fam:active{border-color:var(--navy-800);background:var(--tint-2);} body .dn__fam-th{display:grid;place-items:center;width:100%;aspect-ratio:16/10;border-radius:var(--r-sm);background:var(--bg);overflow:hidden;} body .dn__fam-th img{width:72%;height:72%;object-fit:contain;mix-blend-mode:multiply;} body .dn__all{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:12px 2px;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);color:var(--blue-600);} body .dn__all .dn__go{width:16px;height:16px;} body .dn__list{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);} body .dn__list>li{border-bottom:1px solid var(--line);} body .drawer .dn__row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;border:none;background:none;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-body);color:var(--ink);text-align:left;cursor:pointer;} body .dn__ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--r-sm);background:var(--tint);color:var(--navy-800);} body .dn__ic svg{width:19px;height:19px;display:block;} body .dn__ic .sec-ic{width:22px;height:22px;} body .dn__t{flex:1;} body .dn__go,body .dn__chev{width:16px;height:16px;flex:none;color:var(--slate-400);transition:transform .2s var(--ease);} body .acc-trigger[aria-expanded="true"] .dn__chev,body .acc-trigger.open .dn__chev{transform:rotate(180deg);} body .drawer .dn__sub{padding:0 0 12px 48px;display:none;grid-template-columns:1fr 1fr;gap:6px;} body .drawer .dn__sub.open{display:grid;} body .drawer .dn__sub a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-control);background:var(--bg);font-size:var(--fs-sm);font-weight:600;color:var(--ink);} body .dn__sub-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--navy-800);} body .dn__sub-ic .sec-ic{width:20px;height:20px;} /* Accesos rápidos */ body .dn__quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;} body .dn__quick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:var(--r-control);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-xs);color:var(--ink);} body .dn__quick a svg{width:20px;height:20px;color:var(--navy-800);} body .dn__quick a:hover{border-color:var(--navy-800);} /* Pie */ body .drawer-cta{padding:16px 18px 18px;border-top:1px solid var(--line);background:var(--bg);} body .dn__contact{display:flex;gap:8px;margin-top:10px;} body .dn__contact a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:var(--h-control-sm);border:1px solid var(--line);border-radius:var(--r-control);background:#fff;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--ink);} body .dn__contact a svg{width:16px;height:16px;color:var(--navy-800);} /* Chat de Sumi: nunca por encima de paneles laterales, menús, buscador ni filtros */ body:is(.cart-open,.show-filter,:has(.drawer.open,.quotex.open,.qqx.open,.search-overlay.open)) :is(.tech-fab,.techchat){opacity:0;visibility:hidden;pointer-events:none;} /* Drawer · familias: la ilustración ES la miniatura (sin marco interior ni plato gris doble) */ body .dn__fam-th{background:none;border-radius:var(--r-sm);overflow:hidden;} body .dn__fam-th img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;display:block;} /* ===================== Drawer · alineado con el sistema ===================== Panel = superficie (--r-card) · todo lo pulsable = --r-control · cajas de icono = --r-sm (34px, como .mi del submenú) Espaciado de la escala --sp-* · cierre = mismo control que carrito/presupuesto · contacto = .btn-ghost/.btn-whatsapp .btn-sm */ body .drawer-head{padding:var(--sp-4) var(--sp-5);} body .drawer-close{width:36px;height:36px;border-radius:var(--r-control);color:var(--slate-600);} body .drawer-close:hover{border-color:var(--ink);color:var(--ink);} body .dn-search{margin:0 var(--sp-5) var(--sp-2);background:#fff;} body .dn-search:hover{border-color:var(--slate-400);} body .drawer nav.dn{padding:var(--sp-3) var(--sp-5) var(--sp-2);} body .dn__lbl{margin:var(--sp-2) 0 var(--sp-3);} body .dn__fams{gap:var(--sp-2);} body .dn__fam{padding:var(--sp-2);gap:var(--sp-2);font-weight:600;font-size:var(--fs-sm);} body .dn__fam-th{border-radius:var(--r-sm);} /* "Ver todo →" = patrón de enlace de acción del sistema */ body .dn__all{margin-top:var(--sp-2);padding:var(--sp-3) 0;font-size:var(--fs-ui);} body .dn__all .dn__go{color:currentColor;} body .dn__all:hover .dn__go{transform:translateX(3px);} /* Filas: igual que las opciones del submenú de escritorio */ body .dn__list{margin-top:var(--sp-3);} body .drawer .dn__row{gap:var(--sp-3);padding:var(--sp-3) 0;font-weight:600;font-size:var(--fs-body);} body .dn__ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg);color:var(--navy-800);transition:background .12s var(--ease),color .12s var(--ease);} body .dn__ic svg{width:18px;height:18px;} body .dn__ic .sec-ic{width:22px;height:22px;} body .dn__row:hover .dn__ic{background:var(--navy-800);color:#fff;} body .dn__row:hover .dn__go{transform:translateX(3px);color:var(--navy-800);} /* Subopciones de Sectores: filas con caja de icono, hover de fondo como el submenú */ body .drawer .dn__sub{padding:0 0 var(--sp-3) 46px;gap:var(--sp-1) var(--sp-2);} body .drawer .dn__sub a{gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-control);background:none;font-size:var(--fs-ui);font-weight:600;} body .drawer .dn__sub a:hover{background:var(--bg);color:var(--navy-800);} body .dn__sub-ic{width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg);} body .dn__sub-ic .sec-ic{width:18px;height:18px;} /* Accesos rápidos */ body .dn__quick{gap:var(--sp-2);margin-top:var(--sp-5);} body .dn__quick a{gap:var(--sp-2);padding:var(--sp-3) var(--sp-1);font-weight:600;font-size:var(--fs-xs);transition:border-color .15s var(--ease),background .15s var(--ease);} body .dn__quick a:hover{background:var(--tint-2);} /* Pie: un solo principal + secundarios del sistema */ body .drawer-cta{padding:var(--sp-4) var(--sp-5) var(--sp-5);} body .dn__contact{gap:var(--sp-2);margin-top:var(--sp-2);} body .dn__contact .btn{flex:1 1 0;min-width:0;} body .dn__contact .btn svg{width:15px;height:15px;} /* Chat de Sumi: botón flotante en --ink-2 (#1E2733), hover un punto más claro */ body .tech-fab{background:var(--ink-2);} body .tech-fab:hover{background:var(--slate-700);} /* Drawer: los bloques no se encogen; el panel se desplaza y el buscador conserva sus 46px */ body .drawer > *{flex-shrink:0;} body .dn-search{min-height:var(--h-control);} /* Subopciones de Sectores: columnas al ancho de su contenido (a mitades iguales, "Contraincendios" desbordaba el panel a 390px). */ body .drawer .dn__sub{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:var(--sp-4);padding-left:0;} body .drawer .dn__sub a{line-height:1.25;padding:var(--sp-2) 6px;gap:var(--sp-2);} body .dn__sub-ic{flex:none;} /* ===================== Revisión 7: banda clara en categoría, marcas, marca y sectores ===================== Tinte azul suave con texto oscuro (el diseño la activa con body.band-light en esas páginas; aquí se usan las clases que PrestaShop ya pone en ). El resto de cabeceras, azul. */ body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) :is(.wrapper:has(.chead) > .breadcrumb,.chead,.chead + .subcats){--band-end:var(--tint-2);--bandbg:linear-gradient(180deg,var(--tint) 0%,var(--tint-2) 100%);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .wrapper:has(.chead) > .breadcrumb{background:var(--bandbg);background-size:100% var(--band-h,300px);background-repeat:no-repeat;background-color:var(--band-end);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .wrapper:has(.chead) > .breadcrumb :is(a,span){color:var(--slate-600);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .wrapper:has(.chead) > .breadcrumb a:hover{color:var(--navy-800);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .wrapper:has(.chead) > .breadcrumb .sep{color:var(--slate-400);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .wrapper:has(.chead) > .breadcrumb [aria-current]{color:var(--ink);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .chead h1{color:var(--ink);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .chead :is(p,.chead__intro){color:var(--slate-600);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .chead .ph-th{border:1px solid var(--line);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) :is(.chead + .subcats,.subcats-sticky) a{background:#fff;border-color:var(--line);color:var(--ink);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) :is(.chead + .subcats,.subcats-sticky) a:hover{background:#fff;border-color:var(--navy-800);color:var(--navy-800);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) :is(.chead + .subcats,.subcats-sticky) a.is-active{background:var(--navy-800);border-color:var(--navy-800);color:#fff;} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .subcats__nav{background:#fff;border-color:var(--line);color:var(--ink);} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .subcats__nav:hover{border-color:var(--navy-800);color:var(--navy-800);background:#fff;} body:is(.page-category,.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .subcats-sticky{background:var(--tint);border-bottom:1px solid var(--line);} /* CTA sobre banda clara (fuera de categoría, que sigue en naranja): principal azul */ body:is(.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .chead .chead__cta .btn{background:var(--blue-600);border-color:var(--blue-600);color:#fff;} body:is(.page-manufacturer,.page-sumival-sectors,.page-sumival-sector) .chead .chead__cta .btn:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff;} /* Overlay al desplegar el menú de escritorio: oscurece y difumina la página bajo el header, como el scrim de los paneles laterales. El elemento lo crea common.js. */ .nav-overlay{position:fixed;left:0;right:0;bottom:0;top:var(--hdr-h,75px);z-index:58;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility .22s var(--ease);} @media (min-width:901px){body:has(.site-header .mainnav .has-mega.open) .nav-overlay{opacity:1;visibility:visible;}} /* Venta por caja: pestaña «Caja de X ud.» bajo el selector de cantidad, del mismo ancho y fuera del flujo (no desalinea el pie). Neutra: es una condición de compra, no una acción. */ .pc__qtywrap{position:relative;display:flex;flex:none;} .pc__qtytab{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;justify-content:center;height:20px;padding:0 4px;background:var(--bg);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-control) var(--r-control);color:var(--slate-600);font-family:"Manrope",sans-serif;font-size:var(--fs-micro);font-weight:600;line-height:1;white-space:nowrap;pointer-events:none;} .pc__qtytab[hidden]{display:none;} .pc__qtywrap--box .pc__qty{border-bottom-left-radius:0;border-bottom-right-radius:0;} .products[data-layout=list] .pc__qtywrap .pc__qty{margin-right:0;} .products[data-layout=list] .pc__qtywrap{margin-right:4px;} /* Tooltips de las acciones de la miniatura: la tarjeta deja de recortar (los cortaba); el redondeo lo recorta la zona de imagen. La tarjeta en hover/foco queda sobre sus vecinas. */ body .pc{overflow:visible;position:relative;} body .pc:hover,body .pc:focus-within{z-index:4;} body .pc__media{overflow:hidden;border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;} body .products[data-layout=list] .pc__media{border-radius:calc(var(--r-card) - 1px) 0 0 calc(var(--r-card) - 1px);} body .pcarousel__track{padding-top:44px;margin-top:-44px;} .pc__foot .qa span{z-index:30;} /* ===================== Estado vacío de listado (categoría / marca) ===================== */ .lempty[hidden]{display:none;} .lempty{display:grid;gap:var(--sp-6);padding:var(--sp-2) 0 var(--sp-4);} .lempty__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);border:1px dashed var(--line);border-radius:var(--r-card);background:var(--tint-2);} .lempty__ic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy-800);margin-bottom:var(--sp-4);} .lempty__ic svg{width:40px;height:40px;display:block;} .lempty__t{margin:0;font-family:"Manrope",sans-serif;font-weight:800;font-size:var(--fs-title);line-height:1.25;color:var(--ink);max-width:28ch;text-wrap:balance;} .lempty__p{margin:var(--sp-2) 0 0;max-width:56ch;font-size:var(--fs-body);line-height:1.6;color:var(--slate-600);text-wrap:pretty;} .lempty__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);} .lempty__lbl{margin:0 0 var(--sp-3);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);} .lempty__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);} .lempty__fam{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);border:1px solid var(--line);border-radius:var(--r-control);background:#fff;font-family:"Manrope",sans-serif;font-weight:600;font-size:var(--fs-ui);line-height:1.25;color:var(--ink);transition:border-color .15s var(--ease),background .15s var(--ease);} .lempty__fam:hover{border-color:var(--navy-800);background:var(--tint-2);} .lempty__th{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--r-sm);background:var(--bg);overflow:hidden;} .lempty__th img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;} .lempty__fam>span:nth-child(2){flex:1;min-width:0;} .lempty__go{width:16px;height:16px;flex:none;color:var(--slate-400);transition:transform .15s var(--ease),color .15s var(--ease);} .lempty__fam:hover .lempty__go{transform:translateX(3px);color:var(--navy-800);} .lempty__all{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);color:var(--blue-600);} .lempty__all svg{width:16px;height:16px;transition:transform .15s var(--ease);} .lempty__all:hover svg{transform:translateX(3px);} @media (max-width:1080px){.lempty__grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.lempty__grid{grid-template-columns:1fr;}.lempty__acts .btn{flex:1 1 100%;}} /* Sin productos no hay nada que filtrar: fuera la columna de filtros y el listado ocupa todo el ancho */ .columns-container:has(.lempty) #left-column{display:none;} .columns-container:has(.lempty) #center-column{flex:1 1 100%;max-width:100%;} /* ===================== Buscador avanzado: sin resultados (sumival_search) ===================== */ body .snone[hidden]{display:none;} body .snone{display:flex;gap:var(--sp-5);align-items:flex-start;margin-top:var(--sp-5);padding:var(--sp-6);border:1px dashed var(--line);border-radius:var(--r-card);background:var(--tint-2);} body .snone__ic{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy-800);} body .snone__ic svg{width:26px;height:26px;display:block;} body .snone__body{flex:1;min-width:0;} body .snone__t{margin:4px 0 var(--sp-3);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-title);line-height:1.3;color:var(--ink);overflow-wrap:anywhere;} body .snone__t span{color:var(--navy-800);} body .snone__tips{margin:0;padding:0;list-style:none;display:grid;gap:6px;} body .snone__tips li{position:relative;padding-left:18px;font-size:var(--fs-ui);line-height:1.5;color:var(--slate-600);} body .snone__tips li::before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--slate-400);} body .snone__tips b{display:inline-block;padding:0 6px;border-radius:4px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:var(--fs-sm);color:var(--ink);} body .snone__help{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);} body .snone__help p{margin:0 0 var(--sp-3);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);color:var(--ink);} body .snone__acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);} @media (max-width:640px){ body .snone{flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);} body .snone__ic{width:48px;height:48px;} body .snone__acts .btn{flex:1 1 100%;justify-content:center;} } /* ===================== Responsive: auditoría (revisión 12 del diseño) ===================== Pistas de grid "auto" crecían hasta el min-content del contenido y desbordaban. */ .prod-grid>*,.products>*{min-width:0;} .products[data-layout=list]{grid-template-columns:minmax(0,1fr);} .products[data-layout=list] .pc,.products[data-layout=list] .pc__main,.products[data-layout=list] .pc__body{min-width:0;} @media (max-width:980px){.prod-grid{grid-template-columns:minmax(0,1fr);}} @media (max-width:480px){.pvar__buy{flex-wrap:wrap;}.pvar__buy .btn{flex:1 1 100%;}} .ac-card:has(.ac-table){overflow-x:auto;} /* Header ≤400px: sin lupa (el buscador está en el menú móvil) e iconos compactos para que quepa el carrito */ @media (max-width:400px){ body .navbar{gap:8px;} body .nav-actions{gap:4px;margin-left:auto;} body .nav-actions .icon-btn{width:40px;height:40px;flex:0 0 40px;} body .navbar .brand .brand-logo{max-width:112px;height:auto;} body .site-header .nav-actions .icon-btn--search-m{display:none;} } /* Pestañas de la ficha y miniaturas de galería: deslizables en horizontal */ body .tabbar{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;} body .tabbar::-webkit-scrollbar{display:none;} body .tabbar>*{flex:none;} @media (max-width:560px){ body .gallery .product__thumbnails-list{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;} body .gallery .product__thumbnails-list::-webkit-scrollbar{display:none;} body .gallery .product__thumbnail{flex:0 0 64px;width:64px;height:64px;} } /* Menú móvil: miniatura de familia contenida en su caja 16:10 */ body .dn__fam-th{position:relative;} body .drawer .dn__fam-th img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;padding:10%;box-sizing:border-box;} /* Cabecera de escritorio sin compactar: logo | menú en el centro real | acciones. Con .is-stuck vuelve al flex (menú oculto, buscador a todo el hueco). */ @media (min-width:901px){ body .site-header:not(.is-stuck) .navbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--sp-6);} body .site-header:not(.is-stuck) .navbar>.brand{justify-self:start;min-width:0;} body .site-header:not(.is-stuck) .mainnav{justify-self:center;margin:0 var(--sp-4);} body .site-header:not(.is-stuck) .mainnav>li>a,body .site-header:not(.is-stuck) .mainnav>li>button{padding-inline:12px;} body .site-header:not(.is-stuck) .nav-actions{justify-self:stretch;justify-content:flex-end;min-width:0;margin-left:0;gap:6px;overflow:visible;} body .site-header:not(.is-stuck) .nav-actions .hdr-search{flex:1 1 auto;width:auto;min-width:140px;max-width:none;overflow:hidden;} } /* Por debajo de ~1264px de viewport el buscador no cabe junto al menú: lupa */ @media (min-width:901px) and (max-width:1263.98px){ body .site-header:not(.is-stuck) .nav-actions .hdr-search{display:none;} body .site-header:not(.is-stuck) .nav-actions .icon-btn--search-m{display:grid;} } /* Menú centrado ópticamente (revisión 13): mismo hueco logo→menú que menú→buscador. Sustituye a la rejilla 1fr/auto/1fr; el buscador de ancho fijo estabiliza el reparto. */ @media (min-width:901px){ body .site-header:not(.is-stuck) .navbar{display:flex;column-gap:0;} body .site-header:not(.is-stuck) .mainnav{margin-inline:auto;} body .site-header:not(.is-stuck) .nav-actions{flex:none;justify-self:auto;margin-left:0;} body .site-header:not(.is-stuck) .nav-actions .hdr-search{flex:0 0 240px;width:240px;min-width:0;max-width:none;} } /* Desplegables: al cerrar uno para abrir otro, el saliente desaparece sin fundido (no se ven dos a la vez) */ .mainnav .has-mega:not(.open) > .mega{transition:none;} /* Iconos de la franja de confianza, Quiénes somos y Contacto con el aspecto de los de Sectores del menú (.mi): caja gris, azul corporativo, icono grande y trazo firme. WhatsApp conserva su verde (.is-wa). */ body :is(.trust__item .ic,.cvalue .ic,.cinfo__item .ic){width:42px;height:42px;border-radius:var(--r-sm);background:var(--bg);color:var(--navy-800);} body :is(.trust__item .ic,.cvalue .ic,.cinfo__item .ic) svg{width:28px;height:28px;} body :is(.trust__item .ic,.cvalue .ic,.cinfo__item .ic) svg[stroke="currentColor"]{stroke-width:2.2;} /* Página no encontrada — 404 «sutil» del diseño (CHANGELOG §41/§43): icono pequeño, título, buscador como el de cabecera y una sola acción. Aquí y no en pages/: la pintan también la ficha y la categoría inexistentes. */ .e404{padding-block:calc(var(--sp-section) * 1.5);} .e404__wrap{max-width:520px;margin:0 auto;text-align:center;} .e404__ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);background:var(--bg);color:var(--slate-500);} .e404__ic svg{width:24px;height:24px;} .e404 h1{margin:var(--sp-4) 0 0;font-size:var(--fs-h2);color:var(--ink);} .e404__txt{margin:var(--sp-3) auto 0;max-width:42ch;font-size:var(--fs-body);line-height:1.6;color:var(--slate-600);} .e404__search{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-control);margin:var(--sp-6) auto 0;padding:0 14px;max-width:420px;border:1px solid var(--line);border-radius:var(--r-control);background:#fff;text-align:left;} .e404__search:focus-within{border-color:var(--blue-600);} .e404__search svg{width:18px;height:18px;flex:none;color:var(--slate-500);} .e404__search input{flex:1;min-width:0;border:none;outline:none;background:none;font:inherit;font-size:var(--fs-ui);color:var(--ink);} .e404__actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-5);} .e404__link{display:inline-flex;align-items:center;gap:var(--sp-1);font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-ui);color:var(--blue-600);} .e404__link svg{width:15px;height:15px;transition:transform .15s var(--ease);} .e404__link:hover svg{transform:translateX(3px);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* Migas sin cabecera debajo (404, carrito, checkout, búsqueda): sin banda, sobre el fondo de la página (CHANGELOG §42). En el diseño es «.breadcrumb:not(:has(+ .chead))»; aquí la cabecera no es hermana de las migas, va dentro de .wrapper. */ body .wrapper:not(:has(.chead, .cpage-hero, .od-hero)) > .breadcrumb{background:transparent;border:none;} /* Copiar referencia (diseño r27): icono 13px a la derecha de cada referencia; neutro, azul en hover, verde al copiar. */ .ref-copy{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:none;border-radius:var(--r-check);background:none;color:var(--slate-400);cursor:pointer;vertical-align:middle;line-height:0;transition:color .15s var(--ease),background .15s var(--ease);} .ref-copy svg{width:13px;height:13px;display:block;} .ref-copy:hover{color:var(--navy-800);background:var(--bg);} .ref-copy:focus-visible{outline:2px solid var(--blue-600);outline-offset:1px;} .ref-copy.is-copied{color:var(--ok);background:var(--ok-soft);} .ref-wrap{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-width:0;vertical-align:middle;} .ref-wrap--block{display:flex;width:max-content;max-width:100%;} .ref-wrap>:first-child{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;}