/* La capa `respaldo` va PRIMERO a proposito: todo lo que viva en ella pierde contra cualquier regla sin capa, sea cual sea su especificidad. Es para respaldos que solo deben entrar cuando NADIE mas define la propiedad. */ @layer respaldo; /* Inter, AUTOHOSPEDADA. El token --nav-fuente la pedia desde siempre pero no habia @font-face en ningun lado y la CSP es font-src 'self' data:, o sea Google Fonts esta bloqueado: el visitante solo la veia si la tenia instalada, y si no caia a Supreme. Era una loteria por visitante. Subconjunto LATIN unicamente (47 KB): el espanol -- a e i o u con acento, n con virgulilla, dieresis -- cabe entero ahi. El latin-ext son 83 KB mas que no se usan. font-display: swap para que el texto se lea desde el primer frame y la fuente no bloquee el render (esto vive en la barra de cabecera, arriba del pliegue). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* AHNSA theme override — se carga AL FINAL y re-tematiza el diseño heredado. Un solo punto de verdad: las variables --formlabs-* pasan a la paleta AHNSA. */ /* ═══ LA FUENTE ═══════════════════════════════════════════════════════════ Medido el 2026-08-11 con Chrome DevTools: 1,049 de las 1,055 paginas renderizaban ENTERAS en Times New Roman. Titulos, tablas, menu y pie. Por que: el export de Next.js pone las variables de fuente en clases sobre un div envoltorio (.__variable_08d5f3 -> --font-supreme) y la familia base en .GlobalStyle_root__BUcIn. Al armar las paginas generadas ese envoltorio se quedo fuera y solo sobrevivio en 6 archivos. Como el reset del tema pone `font-family: inherit` en practicamente todo, sin una familia en la raiz la herencia termina en el valor inicial del navegador, que es Times. Se define en :root para que no dependa de ninguna clase del envoltorio, y en html/body para vencer al `inherit` del reset. Las 6 paginas que si traen el envoltorio no cambian: declara lo mismo. */ :root { --font-supreme: "supreme", "supreme Fallback"; --font-midnight: "midnight", "midnight Fallback"; --font-formicons: "formicons", "formicons Fallback"; --ah-fuente: var(--font-supreme), "Helvetica Neue", Helvetica, Arial, sans-serif; } html, body { font-family: var(--ah-fuente); } /* Mismo selector (misma especificidad) que el theme formlabs: al cargar después, gana. */ :root:has(.global-styles--legacy), :root:has(.global-styles--v3) { /* Naranja Formlabs -> paleta AHNSA: azul #1878B9 + marino del logo #0A1E5E */ --formlabs-orange: #1878B9; --formlabs-orange-on-dark: #3B9BD9; /* más luminoso para fondos oscuros */ --formlabs-orange-on-light: #0F4C7A; /* más profundo para fondos claros */ --formlabs-orange-33: #1878B954; --orange100: #C9E2F3; /* borde de botón secundario */ --orange700: #0E4A73; --primary-accent-color: #1878B9; --primary-accent-color-on-dark: #3B9BD9; --primary-accent-color-on-light: #0F4C7A; --primary-accent-color-33: #1878B954; --secondary-button-border-color: #C9E2F3; } /* Logo del nav: el original venía aplastado (aspect fijo del layout formlabs) y el tema formlabs le aplicaba invert(1) — por eso "se veía otro logo". 2026-08-12: el `height: 40px !important` era justo lo que sacaba el logo del encabezado (56px de alto, logo de 40px anclado abajo: la "T" azul quedaba cortada contra el borde). Se quita el !important y el alto lo fija la regla del encabezado mas abajo, que sabe cuanto mide el nav. */ img[src*="logo-ahnsa"], img[src*="ahnsa-tools-logo"] { width: auto; max-width: none; object-fit: contain; filter: none !important; mix-blend-mode: normal !important; } /* La "placa blanca" ya no existe: `logo-ahnsa-t-*.webp` lleva el fondo en alfa (tools/logo_ahnsa_transparente.py). La placa se pintaba con #fff sobre un encabezado color crema rgb(254,253,249) y se veia como un recuadro: es el "otro color de blanco" que reporto Mario. */ footer img[src*="ahnsa-tools-logo-claro"] { height: 64px; } /* Chips de video: fuera el icono de play (los loops autoplay no se "reproducen" a mano) */ div:has(> video:not([src])) svg { display: none; } div:has(> video) + div.pointer-events-none svg { display: none; } /* Buscador en el héroe — lo primero que ves */ .ahnsa-hs { display: flex; gap: 10px; max-width: 640px; margin: 0 0 22px; } .ahnsa-hs input { flex: 1; min-width: 0; padding: 16px 18px; font-size: 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.96); color: #111; outline: none; } .ahnsa-hs input:focus { border-color: #3B9BD9; box-shadow: 0 0 0 3px rgba(59,155,217,.35); } .ahnsa-hs button { padding: 16px 26px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 0; border-radius: 10px; background: #1878B9; color: #fff; cursor: pointer; } .ahnsa-hs button:hover { background: #0F4C7A; } @media (max-width: 640px) { .ahnsa-hs { flex-direction: column; } } /* Lightbox: video del material seleccionado */ #ahnsaLb { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(6,10,18,.82); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 24px; } #ahnsaLb.on { display: flex; } #ahnsaLb .lb-card { position: relative; width: min(960px, 94vw); background: #0B1220; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); } #ahnsaLb video { display: block; width: 100%; height: auto; } #ahnsaLb .lb-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; line-height: 1; } #ahnsaLb .lb-cap { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; color: #C9D6E4; font-size: 14px; } #ahnsaLb .lb-cap b { color: #fff; text-transform: uppercase; letter-spacing: .06em; } /* El chip de material con foto invita al click */ a:has(img[data-video]) { cursor: pointer; } /* ===== Header vivo: desde 2026-08-22 la cabecera es propia (bloque CABECERA v2 al final). ===== */ html { scroll-behavior: smooth; } /* ===== Footer vivo: animaciones al hover (pedido Mario) ===== */ footer a { position: relative; transition: color .18s ease, transform .18s ease; } footer a:not([class*="Button"]):not([class*="btn"])::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: currentColor; opacity: .55; transition: right .25s ease; } footer a:not([class*="Button"]):not([class*="btn"]):hover::after { right: 0; } footer a:hover { color: #7FC4EC; } footer img[src*="logo"] { transition: transform .25s ease, filter .25s ease; } footer:hover img[src*="logo"] { transform: scale(1.03); } footer [class*="social"] a, footer a[aria-label*="Facebook"], footer a[aria-label*="Instagram"], footer a[aria-label*="LinkedIn"], footer a[aria-label*="YouTube"], footer a[aria-label*="X"] { transition: transform .2s ease, background .2s ease; } footer [class*="social"] a:hover { transform: translateY(-3px) scale(1.08); } footer input { transition: border-color .18s ease, box-shadow .18s ease; } footer input:focus { border-color: #1878B9; box-shadow: 0 0 0 3px rgba(24,120,185,.25); outline: none; } /* columnas del footer entran suave al llegar */ @media (prefers-reduced-motion: no-preference) { footer { animation: ah-fade-up .5s ease both; } @keyframes ah-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* ===== Nosotros ===== */ .ahnsa-nosotros { background: #0A1E5E; background-image: radial-gradient(900px 380px at 88% 10%, rgba(24,120,185,.35), transparent 60%); padding: 64px 0 72px; color: #E8EEF4; } .ahnsa-nosotros .ns-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .ahnsa-nosotros .ns-kick { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7FC4EC; } .ahnsa-nosotros h2 { font-size: clamp(26px, 3.4vw, 40px); color: #fff; margin: 10px 0 12px; line-height: 1.12; } .ahnsa-nosotros .ns-lead { font-size: 17.5px; line-height: 1.6; max-width: 70ch; color: #C9D6E4; } .ahnsa-nosotros .ns-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0; } .ahnsa-nosotros .ns-stats > div { background: rgba(255,255,255,.06); border: 1px solid rgba(127,196,236,.28); border-radius: 14px; padding: 16px 22px; display: flex; flex-direction: column; gap: 2px; min-width: 130px; transition: transform .18s ease, border-color .18s ease; } .ahnsa-nosotros .ns-stats > div:hover { transform: translateY(-3px); border-color: #7FC4EC; } .ahnsa-nosotros .ns-stats b { font-size: 28px; color: #fff; } .ahnsa-nosotros .ns-stats span { font-size: 13px; color: #9FB4C8; text-transform: uppercase; letter-spacing: .06em; } .ahnsa-nosotros .ns-of { color: #9FB4C8; font-size: 14.5px; max-width: 80ch; line-height: 1.55; } .ahnsa-nosotros .ns-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .ahnsa-nosotros .ns-btn { display: inline-block; padding: 14px 24px; border-radius: 10px; background: #1878B9; color: #fff; font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease; } .ahnsa-nosotros .ns-btn:hover { transform: translateY(-2px); background: #3B9BD9; } .ahnsa-nosotros .ns-btn.ns-sec { background: transparent; border: 2px solid rgba(127,196,236,.5); } .ahnsa-nosotros .ns-btn.ns-sec:hover { border-color: #7FC4EC; background: rgba(24,120,185,.18); } /* Grid de marcas — OCULTO por default; aparece al picarle "Marcas" (sin quitar el marquee) */ .ahnsa-marcas-grid { background: #FEFDF9; padding: 56px 0 64px; display: none; } .ahnsa-marcas-grid.on { display: block; animation: mg-in .35s ease; } @keyframes mg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* OJO: estas reglas estaban SOLO bajo .ahnsa-marcas-grid, pero el mismo marcado se usa en marcas.html dentro de .ahnsa-marcas-todas. Resultado medido el 2026-08-11: en /marcas el bloque "Ficha por marca" y la rejilla de las 59 marcas salian pegados al borde izquierdo, sin padding ni ancho maximo, porque .mg-wrap ahi no lo tocaba ninguna regla. */ .ahnsa-marcas-grid .mg-wrap, .ahnsa-marcas-todas .mg-wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; } .ahnsa-marcas-grid .mg-kick, .ahnsa-marcas-todas .mg-kick { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #166BA6; } /* era #1878B9: 4.49:1, no llegaba a AA */ .ahnsa-marcas-grid h2, .ahnsa-marcas-todas h2 { font-size: clamp(26px, 3.4vw, 38px); color: #0A1E5E; margin: 10px 0 6px; line-height: 1.15; } .ahnsa-marcas-grid .mg-sub, .ahnsa-marcas-todas .mg-sub { color: #5b6b7a; margin: 0 0 28px; font-size: 16px; max-width: 78ch; } .ahnsa-marcas-grid .mg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .mg-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #E3E9EF; border-radius: 14px; padding: 18px; text-decoration: none; transition: all .16s; } .mg-card:hover { border-color: #1878B9; box-shadow: 0 14px 36px rgba(10,30,94,.12); transform: translateY(-2px); } .mg-card .mg-logo { display: flex; align-items: center; height: 54px; } .mg-card .mg-logo img { max-height: 44px; max-width: 160px; width: auto; height: auto !important; object-fit: contain; filter: grayscale(1); transition: filter .16s; } .mg-card:hover .mg-logo img { filter: none; } .mg-card b { color: #0A1E5E; font-size: 17px; } .mg-card p { color: #5b6b7a; font-size: 13.5px; line-height: 1.45; margin: 0; flex: 1; } .mg-card .mg-ver { color: #1878B9; font-weight: 700; font-size: 13.5px; } /* ═══ Héroe del inicio ═══ La imagen (1774x887, 2:1) tiene las herramientas a la DERECHA y el espacio oscuro a la izquierda para el texto. En escritorio la caja lleva el aspect real por estilo en linea, asi que se ve entera. En movil el panel de texto fuerza 760px de alto y una imagen 2:1 dentro de una caja casi cuadrada solo mostraria la franja central: se empuja el encuadre hacia las herramientas para que se vean, y se sube el degradado para que el texto siga legible. */ @media (max-width: 1023px) { .ah-heroBox > img { object-position: 76% center !important; } .ah-heroBox > div { background: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.34) 100%) !important; } } /* ═══ Las 50 líneas principales — marquee en movimiento, en orden de venta ═══ Mario: "me gustaba cómo lo teníamos antes, donde se movían — la línea moviéndose. Hagamos eso, y con el orden que tenemos, muestra ese orden." El orden es el de venta real (Sumitomo primero), pero NUNCA se muestra la cifra — sólo el orden. La pista se duplica una vez (misma secuencia dos veces seguidas) para el loop infinito: translateX(-50%) cae justo donde empieza la copia, así el punto de reinicio es invisible. Pausa al hover, máscara de degradado en los bordes, quieta bajo prefers-reduced-motion. */ .mk50 { background: #FEFDF9; padding: 30px 0 26px; overflow: hidden; } .mk50-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .mk50-cap { text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin: 0 0 20px; font-weight: 700; } .mk50-mask { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .mk50-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: mk50-mq 58s linear infinite; /* La pista mide ~14,235 px. Sin `will-change` el compositor arma y desarma la capa cada vez que la animacion arranca o se pausa (hover), y cada rearmado es un repintado de esa capa enorme. Con la capa fija medimos, en 8 s con el marquee en pantalla: 60 -> 19 cuadros perdidos. `backface-visibility` la mantiene en GPU en los drivers que si no la degradan a pintura por CPU. */ will-change: transform; backface-visibility: hidden; } .mk50-mask:hover .mk50-track { animation-play-state: paused; } .mk50-t { display: flex; align-items: center; justify-content: center; height: 34px; flex: none; text-decoration: none; } .mk50-t img { max-height: 34px; max-width: 200px; width: auto; height: auto; object-fit: contain; transition: opacity .18s; } .mk50-t:hover img { opacity: .75; } /* marcas sin logo en disco: wordmark tipográfico, mismo peso visual */ .mk50-txt { font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; color: #3D4A6B; letter-spacing: .01em; transition: color .18s; } .mk50-t:hover .mk50-txt { color: #0A1E5E; } .mk50-pie { text-align: center; margin: 20px 0 0; } .mk50-pie a { color: #1878B9; font-weight: 700; text-decoration: none; font-size: 14px; } .mk50-pie a:hover { text-decoration: underline; } /* translate3d y no translateX: el valor 3D obliga a capa propia y a que el desplazamiento se resuelva con precision sub-pixel. El -50% se queda como respaldo sin JS; js/ahnsa-ui.js lo reescribe en pixeles al cargar (un % depende del ancho de la caja, asi que Blink lo re-resuelve en el hilo principal y vuelve a commitear la capa; en pixeles no). */ @keyframes mk50-mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (prefers-reduced-motion: reduce) { .mk50-track { animation: none; } } @media (max-width: 640px) { .mk50-track { gap: 26px; } .mk50-t { height: 26px; } .mk50-t img { max-height: 26px; max-width: 140px; } .mk50-txt { font-size: 12px; } } /* ═══ /marcas — rejilla de las 50 líneas con especialidad ═══ Misma familia visual que .mk50 (mismos tokens de color y el mismo object-fit:contain para que un logo ancho y uno alto pesen igual), pero la tarjeta es más grande porque además del logo lleva el nombre, el ranking y una línea corta de especialidad, y enlaza a la ficha real de la marca. Nunca lleva cifra de venta ni conteo — sólo el orden importa. */ .brc-sec { background: #FEFDF9; padding: 8px 0 44px; } .brc-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .brc-head { text-align: center; max-width: 68ch; margin: 0 auto 26px; } .brc-kick { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #1878B9; font-weight: 800; } .brc-head h2 { margin: 8px 0 10px; } .brc-sub { color: #4A5666; margin: 0; } .brc-grid { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .brc-card { display: flex; flex-direction: column; border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; padding: 16px 16px 18px; text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s; } .brc-card:hover { border-color: #1878B9; box-shadow: 0 3px 14px rgba(10,30,94,.10); } .brc-rank { font-size: 11px; font-weight: 800; color: #9AA3AD; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .brc-logo { height: 56px; display: flex; align-items: center; justify-content: center; margin: 6px 0 12px; } .brc-logo img { max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain; } .brc-word { font-size: 20px; font-weight: 800; color: #0A1E5E; text-align: center; line-height: 1.15; } .brc-name { font-weight: 800; font-size: 15px; color: #0A1E5E; margin: 0 0 4px; } .brc-esp { font-size: 12.5px; color: #5b6b7a; line-height: 1.45; margin: 0; } @media (max-width: 640px) { .brc-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .brc-card { padding: 12px; } .brc-logo { height: 46px; margin: 4px 0 10px; } .brc-logo img { max-height: 36px; } .brc-word { font-size: 16px; } .brc-name { font-size: 13.5px; } .brc-esp { font-size: 11.5px; } } /* Héroe: textura sutil azul-marino en la tarjeta negra en lo que llega la imagen */ .bg-dark1 { background-image: radial-gradient(1200px 400px at 85% 20%, rgba(24,120,185,.18), transparent 60%); } /* ===== Fondo del footer (generado a medida, tono AHNSA) ===== */ footer { position: relative; isolation: isolate; } footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #06101C url("/images/ahnsa/footer-bg.webp") center/cover no-repeat; } footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,16,28,.72), rgba(6,16,28,.90)); } footer .Media_image__Mo0mg, footer [class*="Footer_background"] img { display: none !important; } /* ===== Legibilidad del texto del heroe sobre la foto ===== Los grises heredados del template (text-dark10/11) se pierden justo donde la imagen tiene la zona clara. Reportado por Guille y por Mario. Se sube el color y se le pone una sombra suave: la foto no se toca. */ .bg-dark1 .text-dark10, .bg-dark1 .text-dark11 { color: #EAF2F8 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); } /* ===== Contraste de botones outline sobre fondo oscuro (Guille, punto 5) ===== .text-accent-on-light es #0F4C7A y sobre .bg-dark1 (#111110) da 2.10:1 — reprueba AA feo, y el borde usa el mismo color asi que el boton casi no tiene silueta. #3B9BD9 (el token del sitio para fondo oscuro) da 6.19:1. OJO: NO se puede hacer override global — esa misma clase se usa sobre fondo CLARO en nosotros.html y contacto.html, donde #0F4C7A si es el color correcto. */ .bg-dark1 .text-accent-on-light, .ahnsa-nosotros .text-accent-on-light { color: #3B9BD9 !important; } .bg-dark1 .border-accent-on-light, .ahnsa-nosotros .border-accent-on-light { border-color: #3B9BD9 !important; } .bg-dark1 .hover\:bg-accent-on-light-10:hover { background-color: rgba(59,155,217,.16) !important; } /* El outline del heroe traia borde #494846 = 1.5:1, practicamente invisible */ .bg-dark1 a.\!border-dark7 { border-color: #3B9BD9 !important; color: #3B9BD9 !important; } /* ===================================================================== Carrito: badge con el numero + animacion al agregar ===================================================================== */ .ah-cart { position: relative; overflow: visible; } .ah-cart-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #1878B9; color: #fff; font: 700 11px/18px ui-sans-serif, system-ui, sans-serif; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px #FEFDF9; transform: scale(0); transition: transform .18s cubic-bezier(.34,1.56,.64,1); pointer-events: none; font-variant-numeric: tabular-nums; } .ah-cart-n.on { transform: scale(1); } .ah-cart-n[hidden] { display: none; } @keyframes ah-pop { 0% { transform: scale(1); } 45% { transform: scale(1.55); } 100% { transform: scale(1); } } .ah-cart-n.pop { animation: ah-pop .42s cubic-bezier(.34,1.56,.64,1); } @keyframes ah-sacude { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-9deg); } 55% { transform: translateY(0) rotate(7deg); } 80% { transform: translateY(-1px) rotate(-3deg); } } .ah-cart.sacude { animation: ah-sacude .5s ease; } .ah-fly { position: fixed; z-index: 9999; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7FC4F0, #1878B9 70%); box-shadow: 0 6px 18px rgba(24,120,185,.55); pointer-events: none; } /* ===================================================================== Carrusel de casos: puntos de navegacion ===================================================================== */ .ah-cr-nav { display: flex; gap: 8px; justify-content: center; padding: 18px 0 2px; } .ah-cr-nav button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,248,240,.30); cursor: pointer; transition: width .28s cubic-bezier(.4,0,.2,1), background .28s ease; } .ah-cr-nav button:hover { background: rgba(255,248,240,.55); } .ah-cr-nav button.on { width: 26px; background: #1878B9; } .ah-cr-nav button:focus-visible { outline: 2px solid #7FC4F0; outline-offset: 3px; } /* Scroll suave y sin barra en el carrusel */ [data-ah-carrusel] { scroll-behavior: smooth; scrollbar-width: none; } [data-ah-carrusel]::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { [data-ah-carrusel] { scroll-behavior: auto; } .ah-cart-n.pop, .ah-cart.sacude { animation: none; } } /* ===================================================================== Barra de USP (arriba del pliegue) + CTA fijo en movil Cinco claims con icono (tools/cromo/usp.html). En movil NO se recorta: la barra se desliza en horizontal, sin barra de scroll; los margenes auto del primero y del ultimo la centran cuando si cabe. ===================================================================== */ .ah-usp { display: flex; gap: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #0A1E5E; color: #E6EEF6; font: 500 12.5px/1.2 var(--nav-fuente, ui-sans-serif, system-ui, sans-serif); padding: 8px 12px; text-align: center; } .ah-usp::-webkit-scrollbar { display: none; } .ah-usp span { display: inline-flex; align-items: center; gap: 7px; padding: 3px 14px; white-space: nowrap; flex: none; } .ah-usp span:first-child { margin-left: auto; } .ah-usp span:last-child { margin-right: auto; } .ah-usp span + span { border-left: 1px solid rgba(255,255,255,.18); } .ah-usp b { color: #fff; font-weight: 700; } .ah-usp svg { flex: none; width: 15px; height: 15px; color: #7FC4F0; } @media (max-width: 760px) { .ah-usp { padding: 7px 8px; } .ah-usp span { padding: 2px 10px; gap: 6px; } } .ah-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: none; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: rgba(10,14,22,.94); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.12); } .ah-sticky a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 10px; text-decoration: none; font: 700 14px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; } .ah-sticky .ah-sticky-buscar { background: #1878B9; color: #fff; } .ah-sticky .ah-sticky-wa { background: #25D366; color: #072B15; } @media (max-width: 860px) { .ah-sticky { display: flex; } body { padding-bottom: 68px; } } @media print { .ah-sticky, .ah-usp { display: none; } } /* ── Tarjetas clicables sin anidar anclas ───────────────────────────────────── La tarjeta es un
; el enlace del titulo se estira sobre toda su area. Un dentro de otro rompe el parser y desarma el grid. */ .mg-card { position: relative; } .mg-card b a.mg-name { color: inherit; text-decoration: none; } .mg-card b a.mg-name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } .mg-card b a.mg-name:focus-visible { outline: 2px solid #1878B9; outline-offset: 3px; } .fam-card { position: relative; } .fam-card h3 a.fam-tlink { color: inherit; text-decoration: none; } .fam-card h3 a.fam-tlink::after { content: ""; position: absolute; inset: 0; } .fam-card h3 a.fam-tlink:focus-visible { outline: 2px solid #1878B9; outline-offset: 3px; } /* ── Indice de marcas y rejilla de todas las fichas ──────────────────────── */ .ahnsa-marcas-todas { background: #F7F9FC; padding: 56px 0; } .mt-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .mt-item a { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #E3E9EF; border-radius: 10px; padding: 12px 14px; text-decoration: none; transition: all .16s; } .mt-item a:hover { border-color: #1878B9; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,30,94,.10); } .mt-item b { color: #0A1E5E; font-size: 15px; } .mt-item .mt-n { color: #1878B9; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .mt-item .mt-t { color: #5C6874; font-size: 12px; } .ix-abc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; } .ix-abc a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border: 1px solid #E3E9EF; border-radius: 8px; color: #0A1E5E; font-weight: 800; text-decoration: none; } .ix-abc a:hover { border-color: #1878B9; color: #1878B9; } .ix-bloque { margin: 0 0 26px; scroll-margin-top: 90px; } .ix-bloque h2 { color: #1878B9; font-size: 22px; margin: 0 0 10px; border-bottom: 1px solid #E3E9EF; padding-bottom: 6px; } .ix-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ix-lista li { font-size: 14px; color: #5b6b7a; } .ix-lista a { color: #0A1E5E; text-decoration: none; } .ix-lista a:hover { color: #1878B9; text-decoration: underline; } .ix-n { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #5C6874; } .ix-b { font-size: 11px; font-weight: 700; color: #1878B9; text-transform: uppercase; letter-spacing: .04em; } /* ── Paginas de intencion de producto ──────────────────────────────────────── La "respuesta corta" es el bloque que Google levanta como fragmento destacado y el que ChatGPT y Perplexity citan textual. Tiene que estar arriba, visible y ser autocontenido. */ .fam-hero--liso { background: linear-gradient(135deg, #0A1E5E 0%, #06123a 100%); padding: 40px 0 44px; } .fam-hero--liso .fam-hero-copy { max-width: 860px; } .fam-hero--liso h1 { color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 10px 0 12px; } .fam-hero--liso .fam-hero-sub { color: #c8d6ea; font-size: 17px; max-width: 640px; } .fam-hero--liso .fam-crumbs, .fam-hero--liso .fam-crumbs a { color: #8fa8cc; font-size: 13px; } .fam-hero--liso .fam-crumbs a:hover { color: #fff; } .resp-corta { padding: 28px 0 4px; } .rc-caja { background: #F2F7FD; border-left: 4px solid #1878B9; border-radius: 0 12px 12px 0; padding: 18px 22px; max-width: 900px; } .rc-kick { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1878B9; margin-bottom: 6px; } .rc-txt { margin: 0; color: #16233a; font-size: 17px; line-height: 1.6; } .rc-txt b { color: #0A1E5E; } .mk-tabla.spec { max-width: 760px; } .mk-tabla.spec th[scope="row"] { text-align: left; width: 42%; color: #5b6b7a; font-weight: 600; vertical-align: top; } .mk-tabla.spec td { color: #16233a; } .mk-tabla code, .fam-code { background: #EEF3F9; border-radius: 5px; padding: 1px 6px; font-size: 13px; color: #0A1E5E; font-variant-numeric: tabular-nums; } .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla-scroll .mk-tabla { min-width: 640px; } .mk-tabla tbody tr:nth-child(even) { background: #FAFCFE; } .mk-num, .ix-n { font-variant-numeric: tabular-nums; } /* Las 2 primeras respuestas van ABIERTAS a proposito: una respuesta dentro de un
cerrado no se cita ni se levanta como fragmento. */ .faq-abierta { background: #fff; border: 1px solid #E3E9EF; border-radius: 12px; padding: 16px 20px; margin: 0 0 12px; max-width: 900px; } .faq-abierta h3 { color: #0A1E5E; font-size: 17px; margin: 0 0 6px; } .faq-abierta p { color: #5b6b7a; font-size: 15px; line-height: 1.6; margin: 0; } .autor { padding: 28px 0 48px; } .au-caja { background: #F7F9FC; border: 1px solid #E3E9EF; border-radius: 12px; padding: 18px 22px; max-width: 900px; } .au-t { margin: 0 0 6px; color: #0A1E5E; font-size: 15px; } .au-d { margin: 0 0 8px; color: #5b6b7a; font-size: 14px; line-height: 1.6; } .au-f { margin: 0; color: #5C6874; font-size: 13px; } /* El boton secundario heredaba color oscuro sobre el heroe oscuro. */ .fam-hero--liso .fam-btn { border: 1px solid rgba(255,255,255,.45); color: #fff; background: transparent; } .fam-hero--liso .fam-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; } .fam-hero--liso .fam-btn-primary { background: #1878B9; border-color: #1878B9; color: #fff; } .fam-hero--liso .fam-btn-primary:hover { background: #1265a0; border-color: #1265a0; } .pie-hubs { background: #0A1E5E; color: #8fa8cc; padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; font-size: 13.5px; } .pie-hubs span { font-weight: 700; color: #c8d6ea; } .pie-hubs a { color: #8fa8cc; text-decoration: none; } .pie-hubs a:hover { color: #fff; text-decoration: underline; } .hub-enlaces .ix-lista { margin-top: 6px; } /* ── Glosario y calculadoras ─────────────────────────────────────────────── */ .gl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .gl-item { background: #fff; border: 1px solid #E3E9EF; border-radius: 12px; padding: 16px 18px; scroll-margin-top: 90px; } .gl-item h3 { color: #0A1E5E; font-size: 16px; margin: 0 0 6px; } .gl-item p { color: #5b6b7a; font-size: 14px; line-height: 1.6; margin: 0; } .gl-mas { margin-top: 8px !important; } .gl-mas a { color: #1878B9; font-weight: 700; font-size: 13px; text-decoration: none; } .calc { background: #fff; border: 1px solid #E3E9EF; border-radius: 14px; padding: 20px; max-width: 900px; } .calc-fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .calc label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 700; color: #0A1E5E; } .calc label span { font-weight: 500; color: #5C6874; font-size: 12px; } .calc input, .calc select { border: 1px solid #D8E0E8; border-radius: 8px; padding: 9px 11px; font-size: 15px; color: #16233a; font-variant-numeric: tabular-nums; background: #fff; } .calc input:focus, .calc select:focus { outline: 2px solid #1878B9; outline-offset: 1px; border-color: #1878B9; } .calc-out { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; padding-top: 16px; border-top: 1px solid #E3E9EF; } .calc-out > div { display: flex; flex-direction: column; } .co-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5C6874; } .calc-out b { font-size: 26px; color: #1878B9; font-variant-numeric: tabular-nums; line-height: 1.2; } .co-u { font-size: 12px; color: #5C6874; } .calc-nota { margin: 14px 0 0; font-size: 13px; color: #5C6874; line-height: 1.55; } .iso-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .iso-c { background: #fff; border: 1px solid #E3E9EF; border-left: 5px solid var(--c); border-radius: 12px; padding: 14px 16px; } .iso-l { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: var(--c); color: #fff; font-weight: 800; font-size: 16px; } .iso-c b { display: block; margin: 8px 0 4px; color: #0A1E5E; font-size: 16px; } .iso-c p { margin: 0; color: #5b6b7a; font-size: 13.5px; line-height: 1.55; } /* display:flex en .calc label ganaba sobre el [hidden] por defecto del navegador, asi que el campo de TPI seguia visible en modo metrico. */ .calc label[hidden] { display: none; } /* ── Articulos del blog ──────────────────────────────────────────────────── */ .art { max-width: 780px; } .art h2 { color: #0A1E5E; font-size: clamp(21px, 2.4vw, 27px); margin: 34px 0 12px; line-height: 1.25; } .art p { color: #33445c; font-size: 16.5px; line-height: 1.72; margin: 0 0 14px; } .art ul.fam-apps, .art ol.fam-apps { margin: 0 0 16px; padding-left: 22px; } .art ul.fam-apps li, .art ol.fam-apps li { color: #33445c; font-size: 16px; line-height: 1.65; margin-bottom: 8px; } .art .mk-tabla { margin: 18px 0 24px; } .art code { background: #EEF3F9; border-radius: 5px; padding: 1px 6px; font-size: 14px; color: #0A1E5E; } .art b { color: #16233a; } /* ── Menu movil ──────────────────────────────────────────────────────────── */ .ahm { position: fixed; inset: 0; z-index: 2000; display: none; } .ahm.on { display: block; } .ahm-fondo { position: absolute; inset: 0; background: rgba(6,18,58,.55); } .ahm-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 340px); background: #fff; box-shadow: -16px 0 48px rgba(10,30,94,.22); padding: 18px 20px 28px; display: flex; flex-direction: column; overflow-y: auto; animation: ahm-in .18s ease; } @keyframes ahm-in { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } } .ahm-x { align-self: flex-end; background: none; border: 0; font-size: 30px; line-height: 1; color: #0A1E5E; cursor: pointer; padding: 4px 8px; } .ahm-nav { display: flex; flex-direction: column; margin: 6px 0 18px; } .ahm-nav a { padding: 13px 4px; border-bottom: 1px solid #EEF3F9; color: #0A1E5E; text-decoration: none; font-size: 16px; font-weight: 600; } .ahm-nav a:hover, .ahm-nav a:focus-visible { color: #1878B9; } .ahm-grupo { margin: 4px 0 0; padding: 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B7684; } .ahm-nav-sec a { font-size: 15px; font-weight: 500; padding: 11px 4px; } .ahm-cta { display: block; text-align: center; background: #1878B9; color: #fff; border-radius: 10px; padding: 13px; font-weight: 700; text-decoration: none; } .ahm-wa { display: block; text-align: center; margin-top: 10px; background: #25D366; color: #072B15; border-radius: 10px; padding: 13px; font-weight: 700; text-decoration: none; } .ahm-tel { display: block; text-align: center; margin-top: 10px; color: #5b6b7a; text-decoration: none; font-size: 15px; font-variant-numeric: tabular-nums; } @media (min-width: 1280px) { .ahm { display: none !important; } } /* ═══ CARRUSEL DE VIDEO DE MARCA (inicio) ══════════════════════════════════ Ver js/ahnsa-marcas-video.js. Sustituye las seis fotos fijas de industrias. Va sobre bg-dark1, asi que el logo del fabricante -- que viene en JPEG con fondo blanco -- se monta en una placa blanca en vez de recortarse mal. */ .mkv { position: relative; } .mkv:focus-visible { outline: 2px solid var(--formlabs-orange-on-dark); outline-offset: 6px; border-radius: .75rem; } .mkv-ventana { overflow: hidden; border-radius: .75rem; } .mkv-pista { display: flex; transition: transform .55s cubic-bezier(.4,.05,.2,1); will-change: transform; } .mkv-slide { flex: 0 0 100%; min-width: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: stretch; } .mkv-marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .625rem; background: #05070d; } .mkv-v { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fachada de YouTube dentro del carrusel: para las marcas cuyo material oficial NO está alojado localmente (Sumitomo, NTK). Se ve igual que un slide de video: póster a sangre + botón de play; al primer clic el handler lite-yt del home lo sustituye por el iframe real. */ .mkv-yt { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #05070d; cursor: pointer; display: block; } .mkv-yt img { width: 100%; height: 100%; object-fit: cover; display: block; } .mkv-yt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(10,30,94,.82) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat; transition: background-color .18s, transform .18s; } .mkv-yt:hover::after { background-color: #1878B9; transform: translate(-50%, -50%) scale(1.06); } .mkv-yt:focus-visible { outline: 3px solid #7FC4EC; outline-offset: 2px; } .mkv-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mkv-info { display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; } .mkv-logo { display: inline-flex; background: #fff; border-radius: .5rem; padding: .5rem .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .mkv-logo img { display: block; height: auto; width: auto; max-height: 2.25rem; max-width: 9rem; } .mkv-fam { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--formlabs-orange-on-dark); } .mkv-desc { margin: 0; font-size: 1rem; line-height: 1.55; color: #D6DEE5; max-width: 46ch; } .mkv-cta { margin-top: .25rem; font-size: .875rem; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: .125rem; } .mkv-cta:hover { border-bottom-color: #fff; } .mkv-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.125rem; } .mkv-puntos { display: flex; gap: .5rem; flex: 1; flex-wrap: wrap; } .mkv-punto { all: unset; cursor: pointer; width: 1.75rem; height: .25rem; border-radius: 999px; background: rgba(255,255,255,.26); transition: background .2s ease, width .2s ease; } .mkv-punto:hover { background: rgba(255,255,255,.5); } .mkv-punto.on { background: var(--formlabs-orange-on-dark); width: 2.75rem; } .mkv-punto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .mkv-flecha { all: unset; cursor: pointer; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 1rem; transition: background .18s ease, border-color .18s ease; } .mkv-flecha:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); } .mkv-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (min-width: 1024px) { .mkv-slide { grid-template-columns: minmax(0, 1.9fr) minmax(17rem, 1fr); gap: 2rem; align-items: center; } .mkv-desc { font-size: 1.0625rem; } } /* Sin autoplay ni deslizamiento animado si el usuario pidio menos movimiento. */ @media (prefers-reduced-motion: reduce) { .mkv-pista { transition: none; } } /* ═══ OPERACIONES QUE RESOLVEMOS (inicio) ══════════════════════════════════ Ver js/ahnsa-operaciones.js y tools/patch_operaciones.py. Sustituye el bloque de "materiales" cuyos 11 videos eran intros de logo y renders de fabricante. El video corre al pasar el cursor, como en Formlabs. */ .op-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } .op-card { position: relative; display: flex; flex-direction: column; gap: .75rem; background: #14161c; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; overflow: hidden; padding-bottom: .875rem; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .op-card:hover, .op-card.on, .op-card:focus-within { border-color: var(--formlabs-orange-on-dark); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.45); } .op-marco { position: relative; aspect-ratio: 16 / 9; background: #05070d; overflow: hidden; } .op-marco::after { /* el poster se aclara al reproducir */ content: ""; position: absolute; inset: 0; background: rgba(5,7,13,.28); transition: opacity .2s ease; pointer-events: none; } .op-card.on .op-marco::after { opacity: 0; } .op-v { width: 100%; height: 100%; object-fit: cover; display: block; } .op-play { position: absolute; left: .625rem; bottom: .625rem; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: rgba(10,20,40,.7); border: 1px solid rgba(255,255,255,.35); transition: opacity .2s ease; } .op-play::before { content: ""; position: absolute; left: .625rem; top: .4375rem; border-left: .5rem solid #fff; border-top: .34rem solid transparent; border-bottom: .34rem solid transparent; } .op-card.on .op-play { opacity: 0; } .op-txt { padding: 0 1rem; display: flex; flex-direction: column; gap: .1875rem; } .op-op { margin: 0; font-size: 1.0625rem; font-weight: 700; color: #fff; } .op-det { margin: 0; font-size: .8125rem; color: #9fb0c0; line-height: 1.45; } .op-marca { margin: .1875rem 0 0; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--formlabs-orange-on-dark); } .op-liga { position: absolute; inset: 0; z-index: 2; } .op-liga:focus-visible { outline: 2px solid var(--formlabs-orange-on-dark); outline-offset: -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; } /* Los materiales se quedan: son busqueda real ("herramienta para inconel"). */ .op-mats { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); } .op-mats-t { margin: 0 0 .875rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fa1ae; } .op-mats-lista { display: flex; flex-wrap: wrap; gap: .5rem; } .op-mat { display: inline-flex; align-items: baseline; gap: .4375rem; text-decoration: none; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .4375rem .875rem; transition: border-color .16s ease, background .16s ease; } .op-mat b { color: #E4ECF4; font-size: .875rem; font-weight: 600; } .op-mat span { color: #7f8fa0; font-size: .6875rem; font-variant-numeric: tabular-nums; } .op-mat:hover { border-color: var(--formlabs-orange-on-dark); background: rgba(59,155,217,.1); } .op-mats-n { margin: 1rem 0 0; font-size: .8125rem; color: #8fa1ae; line-height: 1.55; } .op-mats-n a { color: var(--formlabs-orange-on-dark); text-decoration: none; } .op-mats-n a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .op-card, .op-marco::after, .op-play { transition: none; } } /* ═══ LOGOS DE MARCA SIN PLACA ═════════════════════════════════════════════ Los 32 logos venian en JPEG con fondo BLANCO SOLIDO. Sobre las secciones oscuras se veian como un recuadro pegado encima, y por eso se montaban en una "placa" blanca para disimularlo -- que es taparlo, no tratarlo. tools/logos_transparentes.py saca dos versiones con el fondo en alfa: `-t.png` a color (para fondo claro) y `-w.png` en blanco (para fondo oscuro). Limite real: el original mide 180x72, asi que crecen, pero no sin limite. */ /* heroe de la ficha de marca */ .fam-hero .mk-logo { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; height: auto !important; width: auto !important; max-height: 3.25rem; max-width: 13rem; filter: drop-shadow(0 2px 12px rgba(0,0,0,.55)); } /* carrusel de operaciones y de marcas: fuera la placa blanca */ .mkv-logo { background: none !important; box-shadow: none !important; padding: 0 !important; } .mkv-logo img { max-height: 2.75rem !important; max-width: 11rem !important; } /* rejilla de /marcas: a color sobre fondo claro, y mas grandes */ .mg-card .mg-logo { height: 4rem; } .mg-card .mg-logo img { max-height: 3.25rem; max-width: 11rem; filter: none; /* antes iban en escala de grises */ opacity: .9; transition: opacity .16s ease, transform .16s ease; } .mg-card:hover .mg-logo img { opacity: 1; transform: scale(1.03); } /* marquee del inicio: a color, mas grandes, y sin el gris que los apagaba */ .ahnsa-marquee .mq-track img { height: 2.625rem; filter: none; opacity: .82; } .ahnsa-marquee .mq-track img:hover { opacity: 1; } /* Logo del carrusel: mas grande y centrado. Iba a 110 px pegado a la izquierda en un espacio mucho mayor -- se veia chico y descuadrado. Techo honesto: el archivo mide 180x72. A 4.5rem (72px) de alto se dibuja a escala 1:1 y queda nitido; pasando de ahi se interpola y se ve borroso. Para ir mas grande hacen falta los SVG del kit de marca de cada fabricante. Ver docs/PENDIENTES_SITIO_2026-08-11.md seccion 1.5. */ .mkv-info { align-items: center; text-align: center; } .mkv-logo img { max-height: 4.5rem !important; max-width: 11.25rem !important; } .mkv-desc { margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { .mkv-info { align-items: flex-start; text-align: left; } .mkv-desc { margin-left: 0; margin-right: 0; } } /* El pie declaraba width sin height: el navegador no reservaba el alto y la pagina saltaba al cargar. Se fija la razon real (768x396 = 1.939:1). */ .Footer_logo__WBJ2f img { aspect-ratio: 768 / 396; height: auto; } /* ── Pagina 404 ───────────────────────────────────────────────────────────── El campo de busqueda es la salida principal: la causa mas comun de caer aqui es un codigo mal tecleado o un enlace viejo del catalogo. */ .ah404-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .ah404-in { flex: 1 1 22rem; min-width: 0; max-width: 30rem; padding: .75rem 1rem; font: inherit; font-size: 1rem; color: #0b1220; background: #fff; border: 1px solid #c3ccd6; border-radius: .5rem; } .ah404-in:focus-visible { outline: 2px solid #0762c8; outline-offset: 1px; border-color: #0762c8; } /* ═══════════════════════════════════════════════════════════════════════════ Ninguna liga debe caer al azul por defecto del navegador ─────────────────────────────────────────────────────────────────────────── Medido el 2026-08-12 en /productos/insertos: 44 ligas por pagina salian con color rgb(0,0,238) — el azul de un SIN ESTILAR — y las visitadas en morado. Se veian como una pagina sin CSS en medio de una pagina con diseno. Reparto: .ahm-item 15 (menu mega, en las 1,197 paginas) a sin clase 15 (ligas de contenido dentro de
  • ) .fam-brand 8 .fam-chip 6 (arreglado en ahnsa-productos.css) #0F4C7A es el azul "sobre claro" de la paleta: 7.1:1 sobre blanco, pasa AA. ═════════════════════════════════════════════════════════════════════════ */ main a:not([class]), .fam-wrap a:not([class]), .fam-section a:not([class]), .fam-sub a:not([class]) { color: #0F4C7A; text-underline-offset: 2px; } main a:not([class]):hover, .fam-wrap a:not([class]):hover, .fam-section a:not([class]):hover, .fam-sub a:not([class]):hover { color: #1878B9; } .ahm-item { color: #0A1E5E; text-decoration: none; } .ahm-item:hover { color: #1878B9; } a.fam-brand { color: #0A1E5E; text-decoration: none; } a.fam-brand:hover { color: #1878B9; } /* ═══════════════════════════════════════════════════════════════════════════ Contraste AA (WCAG 1.4.3) — medido con axe-core el 2026-08-12 ─────────────────────────────────────────────────────────────────────────── 102 nodos en 9 de 10 rutas no llegaban a 4.5:1. Los cuatro pares: #868178 sobre #f3f0e9 3.40 texto apagado en secciones crema (x18) #868178 sobre #fefdf9 3.80 migas de pan sobre el encabezado (x18) #0f4c7a sobre #0a1e5e 1.72 ligas de contenido sobre el marino (x7) #1878b9 sobre #f2f7fd 4.41 etiqueta "Respuesta corta" (x3) `.text-light10` se usa en fondo CLARO y en fondo OSCURO, asi que no se puede cambiar de un solo color: oscurecerlo arregla el crema y rompe el marino. Se separa por contexto. ═════════════════════════════════════════════════════════════════════════ */ .text-light10 { color: #706C64; } /* 4.59 sobre #f3f0e9 */ [class*="bg-dark"] .text-light10, .mkv .text-light10, footer .text-light10 { color: #C9D2DC; } /* 10.1 sobre #0a1e5e */ .rc-kick { color: #166BA6; } /* 5.29 sobre #f2f7fd */ /* La regla de ligas de contenido usa #0F4C7A, que es correcto sobre blanco (8.35) y pesimo sobre el marino (1.72). Sobre fondo oscuro se aclara. */ [class*="bg-dark"] main a:not([class]), [class*="bg-dark"] a:not([class]), .fam-breadcrumb a:not([class]), nav[aria-label="Ruta de navegacion"] a:not([class]), nav[aria-label="Ruta de navegación"] a:not([class]) { color: #7FC4EC; } /* ═══════════════════════════════════════════════════════════════════════════ Carrusel de marcas: tarjeta CLARA para que el logo vaya a COLOR REAL ─────────────────────────────────────────────────────────────────────────── Mario, 2026-08-12: "use authentic colors and high quality". El panel era oscuro, y sobre oscuro un logo a color no se lee: se comprobo cuadro por cuadro con los seis. Ingersoll (marino), Allied Machine (negro) y la palabra "KYOCERA" (negra) desaparecian contra el #0b1220. Por eso estaban en blanco monocromo, y eso es justo lo que no quiere. La respuesta correcta no es devolver la placa blanca recortada: es que la TARJETA sea clara. Asi el logo va con su color de marca, sin ningun recuadro detras, que es lo que se pidio las dos veces. Es ademas el mismo patron que ya usa la rejilla de /marcas ("a color sobre fondo claro"). ═════════════════════════════════════════════════════════════════════════ */ .mkv-info { background: #FFFFFF; border-radius: .75rem; padding: 1.5rem 1.75rem; justify-content: center; } .mkv-logo { background: none; box-shadow: none; padding: 0; } .mkv-fam { color: #166BA6; } /* 5.29:1 sobre blanco */ .mkv-desc { color: #16233A; } /* 13.6:1 */ .mkv-cta { color: #0A1E5E; /* 14.0:1 */ border-bottom-color: rgba(10,30,94,.35); } .mkv-cta:hover { color: #166BA6; border-bottom-color: #166BA6; } @media (min-width: 1024px) { .mkv-slide { grid-template-columns: 1.55fr 1fr; } } @media (max-width: 1023px) { .mkv-info { padding: 1.25rem 1.25rem 1.5rem; } } /* Los logos de alta (tools/logos_baja.js) ya no son todos 180x72: van de 640x30 a 640x846. El alto manda y el ancho se limita para que un logo muy apaisado no empuje la tarjeta. */ .mkv-logo img { max-height: 3.75rem !important; max-width: 13.75rem !important; width: auto !important; height: auto !important; object-fit: contain; } /* Campo trampa del formulario del pie (js/ahnsa-form.js). Fuera de pantalla en vez de display:none: muchos bots omiten lo que esta oculto con display, pero rellenan lo que existe en el DOM. Para el usuario es invisible igual. */ .ah-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .Footer_locale { opacity: .85; } /* ── Enlace de "saltar al contenido" ──────────────────────────────────────── Existe (WCAG 2.4.1) pero iba sin estilar: al tabular aparecia con el azul por defecto del navegador sobre lo que hubiera detras, a veces ilegible. Oculto hasta que recibe foco, y entonces visible de verdad. */ .A11yStatement_sr-only__mXl77 a { position: absolute; left: -9999px; top: 0; color: #0A1E5E; background: #fff; text-decoration: underline; } .A11yStatement_sr-only__mXl77 a:focus, .A11yStatement_sr-only__mXl77 a:focus-visible { left: 12px; top: 12px; z-index: 10000; padding: .625rem 1rem; border-radius: .5rem; box-shadow: 0 8px 24px rgba(10,30,94,.28); outline: 3px solid #1878B9; outline-offset: 2px; } /* ── Correcciones de contraste, 2a pasada (axe-core, 2026-08-12) ──────────── Las dos reglas anteriores eran demasiado amplias y crearon sus propios fallos. Medido, no supuesto: 1. `[class*="bg-dark"] .text-light10` pintaba gris CLARO el texto de las tarjetas del carrusel de familias. Esas tarjetas viven dentro de la seccion oscura pero tienen fondo PROPIO claro (#f3f0e9): quedaba #c9d2dc sobre #f3f0e9 = 1.34:1, ilegible. El ancestro oscuro no dice nada del fondo real del elemento. 2. `.pie-hubs` es una barra MARINA (#0a1e5e) y sus ligas no llevan clase, asi que cayeron en la regla de ligas de contenido (#0f4c7a) = 1.71:1. No es un