/* ========================================================================== ENNAT PROTECTION, Ignition theme Dark premium SaaS aesthetic (OneSpark-inspired) on ENNAT brand DNA. ========================================================================== */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); /* ---- Tokens ---- */ :root{ --bg:#0A0A0C; --bg-2:#0E0D11; --surface:#141319; --surface-2:#1A1922; --surface-hi:#211F2B; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --text:#F4F2F7; --text-2:#B7B4C2; --text-3:#7E7A8C; --amber:#FFC107; --amber-2:#FFD54F; --orange:#F5B300; --coral:#E0A800; --red:#C8200F; --spark:linear-gradient(115deg,#FFE082 0%,#FFC825 48%,#E8A800 100%); --spark-soft:linear-gradient(115deg,rgba(255,201,37,.16),rgba(224,168,0,.12)); --r-pill:999px; --r-lg:26px; --r-md:18px; --r-sm:12px; --ff-display:'Geist',system-ui,sans-serif; --ff-body:'Geist',system-ui,sans-serif; --maxw:1200px; --nav-h:74px; --ease:cubic-bezier(.22,.61,.36,1); /* Velos: fondos translúcidos que se apoyan sobre la superficie de atrás (botón fantasma, chips, tabs, dots). Sobre oscuro aclaran; sobre claro tienen que oscurecer, por eso son token y no rgba(255,255,255,x) suelto. */ --veil-1:rgba(255,255,255,.03); --veil-2:rgba(255,255,255,.07); --veil-3:rgba(255,255,255,.12); --veil-4:rgba(255,255,255,.30); /* Scrims: capas del color de la página que van ENCIMA del contenido (nav con scroll, menú móvil, fondo de modal). */ --scrim-nav:rgba(10,10,12,.72); --scrim-full:rgba(10,10,12,.98); --scrim-modal:rgba(10,10,12,.68); --scrim-strong:rgba(10,10,12,.85); /* Superficie de las secciones que hoy son claras a propósito sobre el sitio oscuro (.products-light, .product-showcase) y el escenario donde se apoyan los renders de producto. --stage NO es blanco: es el gris EXACTO que traen horneado los renders de INTEL (Lab -> Fotos, variante "blanco"). Medido sobre el PNG publicado b3-3-blanco.png: rgb(240,240,241) en las cuatro esquinas. Con --stage:#fff el render quedaba como un cuadrado gris flotando dentro de una caja blanca y se veía el borde -- Martín lo reportó el 10 sep 2026. Si algún día cambia el fondo del visor, hay que volver a medir un render y actualizar esto. */ --surface-alt:#fff; --stage:#f0f0f1; --logo:url('/img/ennat-logo-white.svg'); /* Ámbar cuando hace de TEXTO. Sobre oscuro es el ámbar tal cual (12.14:1); el tema claro lo pisa por uno más oscuro, porque sobre blanco no se lee. */ --amber-ink:var(--amber); --red-ink:#FF6A57; } /* ---- Tema claro ---------------------------------------------------------- La paleta no es nueva: ya vivía en el sitio (css/roi.css y las secciones .products-light / .product-showcase), acá se normaliza y se audita. Dos correcciones de contraste respecto de lo que había suelto: el gris terciario pasa a #6B6B72 (#8A8A92 daba 3.43:1, no llega a AA en texto chico) y el ámbar como TEXTO pasa a #937004 (el ámbar puro sobre blanco da 1.63:1, ilegible). El ámbar sigue igual como relleno de botón, que ahí lleva texto oscuro. */ [data-theme="light"]{ --bg:#FFFFFF; --bg-2:#FAFAFB; --surface:#FFFFFF; --surface-2:#F3F3F5; --surface-hi:#ECECEF; --line:#E7E7EA; --line-strong:#D3D3D8; --text:#141319; --text-2:#55555C; --text-3:#6B6B72; /* El ámbar de marca no cambia: cambia dónde se puede usar como texto. */ --amber-ink:#856504; --red-ink:#C01F0E; --veil-1:rgba(10,10,12,.035); --veil-2:rgba(10,10,12,.06); --veil-3:rgba(10,10,12,.10); --veil-4:rgba(10,10,12,.24); --scrim-nav:rgba(255,255,255,.78); --scrim-full:rgba(255,255,255,.98); --scrim-modal:rgba(10,10,12,.42); --scrim-strong:rgba(255,255,255,.9); /* En claro estas secciones no pueden ser #fff o desaparecen contra la página: pasan al gris siguiente para conservar el ritmo entre secciones. El escenario de producto lleva el mismo gris de los renders en los dos temas (ver arriba): la web sirve siempre la variante "blanco", así que el fondo que tiene que calzar es el mismo en claro y en oscuro. */ --surface-alt:#FAFAFB; --stage:#f0f0f1; --logo:url('/img/ennat-logo-dark.svg'); } /* ---- Reset ---- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg)} body{ background:var(--bg);color:var(--text); font-family:var(--ff-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} a{-webkit-tap-highlight-color:transparent} /* no focus-ring flash on mouse/tap; keep it for keyboard users */ :focus:not(:focus-visible){outline:none} ul{list-style:none} /* ---- Bilingual visibility ---- */ [data-lang="en"] .lang-es{display:none!important} [data-lang="es"] .lang-en{display:none!important} /* ---- Layout ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} /* Ritmo vertical. Antes las secciones eran `0 0 72px`: SIN padding arriba, así que * el aire entre dos secciones dependía del margen del último hijo de la anterior * (medido: 61, 65, 68, 69, 70 y 72px en la misma página) y el hero llegaba a * PEGARSE a la primera sección (-3px). Peor: 72px entre secciones distintas contra * 56px entre el título y el contenido DENTRO de una sección -- casi lo mismo, así * que el ojo no distinguía un cambio de sección de un bloque más de la misma. * Ahora el aire lo pone cada sección por arriba y por abajo, así que es constante * pase lo que pase con los hijos: ~128px de separación entre secciones contra 56px * adentro (2.3x, jerarquía clara). `.section-sm` era IDÉNTICA a `.section` -- no * hacía nada; ahora sí es la variante compacta. -- 2 sep 2026 */ .section{padding:clamp(40px,5vw,64px) 0;position:relative} .section-sm{padding:clamp(28px,3.4vw,44px) 0} .section-head{max-width:760px;margin-bottom:56px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{font-size:clamp(34px,4.6vw,56px);margin:18px 0 18px} .section-head p{color:var(--text-2);font-size:17px} /* ---- Type ---- */ h1,h2,h3,h4{font-family:var(--ff-display);letter-spacing:-.02em;line-height:1.03;font-weight:600} .eyebrow{ font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--text-3);display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--spark)} .eyebrow.center{justify-content:center} .grad-text{background:var(--spark);-webkit-background-clip:text;background-clip:text;color:transparent} /* EN PAPEL, RELLENO SÓLIDO. El degradado recortado al texto no sobrevive a la impresión: Chromium lo emite como un /Shading pintado a través de una máscara suave (/SMask) armada con los glifos, y el visor Preview de macOS rellena la CAJA de esa máscara en vez del recorte — el titular de la portada del deck salía como dos bloques amarillos macizos tapando "absorbs impact". Poppler sí resuelve esa máscara, así que rasterizar el PDF con pdftoppm NO muestra el problema: hay que abrirlo en Preview (o mirar que la página traiga /SMask). Con relleno sólido queda texto normal, sin máscara ni shading, y lo dibuja igual cualquier lector. El color es el punto medio del propio --spark. */ @media print{ .grad-text{ background:none!important; -webkit-background-clip:border-box!important;background-clip:border-box!important; color:#FFC825!important;-webkit-text-fill-color:#FFC825!important; } } .lead{font-size:18px;color:var(--text-2)} .muted{color:var(--text-3)} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-body); font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:var(--r-pill); border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .28s var(--ease),background .2s,border-color .2s; white-space:nowrap; } .btn-spark{background:var(--spark);color:#150a00;box-shadow:0 10px 34px -8px rgba(255,193,7,.5)} .btn-spark:hover{transform:translateY(-2px);box-shadow:0 16px 46px -8px rgba(255,193,7,.62)} .btn-ghost{background:var(--veil-1);color:var(--text);border-color:var(--line-strong)} .btn-ghost:hover{background:var(--veil-2);border-color:var(--veil-4)} .btn-lg{padding:16px 30px;font-size:16.5px} .btn .arrow{transition:transform .2s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn-block{width:100%;justify-content:center} /* ---- Nav ---- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:var(--nav-h);display:flex;align-items:center;gap:30px} .nav.scrolled{background:var(--scrim-nav);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} /* Solo el logo en la barra: la bajada ("Evolving Industrial Safety") se sacó el 2 sep 2026 a pedido de Martin, junto con su regla `.brand .tag`. */ .brand{display:flex;align-items:center;flex-shrink:0;line-height:1} .brand img{height:26px;width:auto} .nav-links{display:flex;align-items:center;gap:26px;margin-left:14px} .nav-links a{font-size:15px;color:var(--text-2);font-weight:500;transition:color .18s;position:relative;white-space:nowrap} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-spacer{flex:1} .lang-toggle{display:inline-flex;flex-shrink:0;border:1px solid var(--line-strong);border-radius:var(--r-pill);overflow:hidden} /* Mas compacto que el resto de la barra a proposito: cambiar de idioma es una accion de una sola vez, no compite con la navegacion ni con el CTA -- Martin, 9 sep 2026. En el cajon mobile vuelve al tamano normal, donde si hay espacio. */ .lang-toggle button{background:none;border:none;color:var(--text-3);font-size:11px;font-weight:600;padding:5px 9px;letter-spacing:.04em;white-space:nowrap;transition:color .18s,background .18s} .lang-toggle button.active{background:var(--spark);color:#150a00} .mobile-menu .lang-toggle button{font-size:12.5px;padding:7px 13px} /* Acceso a la App de ENNAT. Pastilla con borde, como el selector de idioma, para que se lea como parte del mismo grupo de utilidades y no como un boton mas. */ /* Se veia demasiado apagado: con el borde gris y el icono en --text-3 desaparecia contra la barra oscura, al lado de un CTA ambar solido. Ahora lleva el ambar de la marca en el icono y en el borde, con un fondo apenas tenido -- visible de una, pero sin pelearle al boton de contacto, que sigue siendo el unico relleno solido. */ .app-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0; width:38px;height:38px;padding:0;border:1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-radius:var(--r-pill);background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--amber-ink);text-decoration:none;transition:background .18s,border-color .18s,transform .18s} .app-link:hover{background:color-mix(in srgb, var(--amber) 22%, transparent);border-color:var(--amber);transform:translateY(-1px)} .app-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* En el cajon mobile va con etiqueta: ahi el ancho sobra y un icono suelto no se entiende sin el title, que en tactil no aparece. */ .app-link-wide{width:auto;height:auto;padding:8px 15px;font-size:12.5px;font-weight:600} /* .mobile-menu a (21px, padding lateral 0, borde inferior gris) le gana en especificidad y la dejaba sin aire a los lados y mas ancha que su fila en 320px. */ .mobile-menu .app-link-wide{padding:10px 18px;font-size:15px; border-bottom-color:color-mix(in srgb, var(--amber) 55%, transparent)} .mobile-menu .app-link-wide:hover{border-bottom-color:var(--amber)} /* Selector de tema: pastilla con borde, mismo lenguaje que el resto de la barra. El icono anuncia a dónde se va, no dónde se está: en oscuro se ve el sol. */ .theme-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-3);transition:color .18s,border-color .18s,background .18s} .theme-toggle:hover{color:var(--text);border-color:var(--veil-4);background:var(--veil-1)} .theme-toggle .th-moon{display:none} [data-theme="light"] .theme-toggle .th-sun{display:none} [data-theme="light"] .theme-toggle .th-moon{display:block} .nav-cta{flex-shrink:0;padding:8px 20px;font-size:14px;line-height:1.15} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px} .burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.25s} /* mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:99;background:var(--scrim-full);backdrop-filter:blur(20px); display:none;flex-direction:column;justify-content:center;gap:8px;padding:40px;transform:translateY(-100%);transition:transform .4s var(--ease);} .mobile-menu.open{transform:translateY(0)} .mobile-menu a{font-family:var(--ff-display);font-size:21px;font-weight:600;padding:9px 0;border-bottom:1px solid var(--line)} /* Mismo problema que .app-link-wide: sin esto .mobile-menu a le quita el padding lateral al CTA y le pone un borde inferior gris, y el texto queda pegado a la izquierda. */ .mobile-menu .btn{margin-top:24px;padding:14px 26px;justify-content:center;border-bottom-color:transparent} /* ---- Region switcher ---- */ .region-toggle{display:inline-flex;flex-shrink:0;border:1px solid var(--line-strong);border-radius:var(--r-pill);overflow:hidden} .region-toggle button,.region-toggle a{background:none;border:none;color:var(--text-3);font-size:12px;font-weight:600;padding:7px 10px;letter-spacing:.04em;white-space:nowrap;transition:color .18s,background .18s;text-decoration:none;cursor:pointer;display:inline-block} .region-toggle button:hover,.region-toggle a:hover{color:var(--text-2)} .region-toggle button.active,.region-toggle a.active{background:var(--veil-3);color:var(--text)} .nav-inner .region-toggle.nav-region{margin-left:2px} .mobile-region{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)} .mobile-region .mm-label{font-family:var(--ff-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} /* Country selector (US/MX/CL) shows in every language — it is a market switch, not a language switch. */ .office.office-active{border-color:rgba(255,201,40,.5);box-shadow:inset 0 0 0 1px rgba(255,201,40,.22)} .office.office-active .country{color:var(--amber-ink)} .office .office-badge{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#150a00;background:var(--spark);padding:2px 7px;border-radius:var(--r-pill);vertical-align:middle} @media(max-width:820px){.region-toggle.nav-region{display:none}} /* ---- Hero ---- */ .hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 22px) 0 72px} .hero-media{position:relative;z-index:1;width:100%;height:75vh;min-height:320px;max-height:820px;overflow:hidden} .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,10,12,.18) 0%,transparent 14%,transparent 46%,rgba(10,10,12,.6) 66%,rgba(10,10,12,.9) 85%,var(--bg) 92%)} .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:1;transition:opacity .8s ease} .hero-photo.playing{opacity:1} .hero-veil{position:absolute;inset:0; background: radial-gradient(120% 90% at 80% 6%,rgba(255,193,7,.20),transparent 46%), radial-gradient(90% 80% at 4% 92%,rgba(255,213,79,.16),transparent 50%), linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.82) 60%,var(--bg) 100%);} .hero-mesh{position:absolute;inset:0;opacity:.5; background: radial-gradient(40% 50% at 15% 30%,rgba(255,201,37,.15),transparent 60%), radial-gradient(45% 55% at 85% 70%,rgba(255,213,79,.12),transparent 60%); animation:meshFloat 16s var(--ease) infinite alternate;} @keyframes meshFloat{to{transform:translate3d(3%,-3%,0) scale(1.1)}} .hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:-23vh auto 0;padding:30px 32px 0;width:100%} .hero h1{font-size:clamp(44px,6.6vw,88px);margin:24px 0 22px;max-width:15ch;font-weight:700} .hero p{font-size:18px;color:var(--text-2);max-width:56ch;margin-bottom:36px} .hero-h1{font-size:clamp(38px,5.4vw,72px);max-width:none;text-wrap:balance} .hero p b{color:var(--text);font-weight:700} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:54px} .hero-pills{display:flex;gap:12px;flex-wrap:wrap} .pill{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:var(--r-pill); background:var(--veil-1);border:1px solid var(--line);backdrop-filter:blur(6px);font-size:14px;color:var(--text-2);font-weight:500} .pill b{color:var(--text);font-family:var(--ff-display);font-weight:600} .pill .spark-dot{width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px 2px rgba(255,193,7,.6)} /* page hero (interior pages) */ .page-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 90px) 0 72px} .page-hero .hero-mesh{opacity:.7} .page-hero .wrap{position:relative;z-index:2} .page-hero h1{font-size:clamp(40px,5.6vw,72px);margin:20px 0 18px;max-width:18ch} .page-hero p{font-size:20px;color:var(--text-2);max-width:60ch} .crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--text-3);margin-bottom:6px} .crumbs a:hover{color:var(--text-2)} /* ---- Cards ---- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px} .card-hover{transition:transform .24s var(--ease),border-color .24s,box-shadow .24s} .card-hover:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 28px 64px -28px rgba(0,0,0,.85)} /* feature grid */ .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .feature .ic{width:52px;height:52px;border-radius:14px;background:var(--spark-soft);border:1px solid rgba(255,201,40,.22); display:flex;align-items:center;justify-content:center;margin-bottom:20px} .feature .ic img{width:26px;height:26px} /* Iconos en linea (SVG) para las tarjetas de proceso: mismo tamano que los img y trazo ambar, para no depender de assets nuevos ni de peticiones externas. */ .feature .ic svg{width:26px;height:26px;color:var(--amber-ink)} .feature h3{font-size:21px;margin-bottom:10px} .feature p{color:var(--text-2);font-size:15.5px} /* value strip */ .value-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .value-cell{background:var(--bg);padding:34px 28px} .value-cell .k{font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:12px} .value-cell p{font-size:15px;color:var(--text-2)} /* ---- Badges ---- */ .badges{display:flex;flex-wrap:wrap;gap:10px} .badge{font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:7px 14px;border-radius:var(--r-pill)} .badge-spark{background:var(--spark-soft);color:var(--amber-ink);border:1px solid rgba(255,201,40,.28)} .badge-solid{background:var(--spark);color:#150a00} .badge-ghost{background:var(--veil-1);color:var(--text-2);border:1px solid var(--line)} .badge-red{background:rgba(200,32,15,.16);color:var(--red-ink);border:1px solid rgba(200,32,15,.4)} /* ---- Stats ---- */ .stat-row{display:flex;gap:20px;flex-wrap:wrap} .stat-box{flex:1;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:30px} .stat-box .num{font-family:var(--ff-display);font-weight:700;font-size:clamp(44px,5vw,60px);line-height:1;letter-spacing:-.03em} /* Placeholder mientras Martin valida el conteo real de patentes (mismo criterio que el badge de patente por producto: no publicar un numero sin confirmar) - la palabra no entra al tamano pensado para 1-3 digitos, asi que se achica. */ .stat-box .num.num-pending{font-size:22px;letter-spacing:0} .stat-box .lbl{font-size:13px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-top:12px;font-weight:600} /* KPIs de clientes desde el Directorio de INTEL: pill de "última actualización" arriba a la derecha (home + clients) */ .kpi-block{position:relative;padding-top:34px} .kpi-updated{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text-3);background:var(--veil-1);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap} .kpi-updated[hidden]{display:none} .kpi-updated .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none} @media (max-width:640px){ .kpi-updated{position:static;margin:0 auto 16px;width:max-content} } /* ---- Product cards ---- */ .products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .24s var(--ease),border-color .24s,box-shadow .24s} .product-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 28px 64px -28px rgba(0,0,0,.85)} .product-media{position:relative;aspect-ratio:1/1;background:radial-gradient(90% 90% at 50% 30%,#24222c,#131218); display:flex;align-items:center;justify-content:center;overflow:hidden} .product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:26px;box-sizing:border-box;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));transform:scale(var(--mscale,1));transition:transform .4s var(--ease)} .product-card:hover .product-media img{transform:scale(calc(var(--mscale,1) * 1.06))} .product-media .corner-badge{position:absolute;z-index:3;top:14px;left:14px;background:var(--spark);color:#150a00;font-weight:600; font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill)} .product-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .product-body h3{font-size:20px;margin-bottom:14px} .product-mini{display:flex;gap:14px;margin-bottom:18px;font-size:12px;color:var(--text-3)} .product-mini b{display:block;font-family:var(--ff-display);font-size:15px;color:var(--text);font-weight:600} .product-body .btn{margin-top:auto} /* spec chips (detail) */ .spec-row{display:flex;gap:12px;flex-wrap:wrap} .spec{flex:1;min-width:120px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px} .spec .v{font-family:var(--ff-display);font-weight:600;font-size:22px} .spec .k{font-size:11px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-top:5px} /* ---- Split feature ---- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split.rev .split-media{order:2} .media-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--surface)} .media-frame img{width:100%;height:100%;object-fit:cover;display:block} .media-frame.tall{aspect-ratio:4/5} .media-frame.wide{aspect-ratio:4/3} /* ---- Marquee ---- */ .marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 38s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee img{height:50px;width:auto;opacity:.85;filter:grayscale(1) brightness(2.4);transition:opacity .2s} .marquee img:hover{opacity:1} @keyframes marquee{to{transform:translateX(-50%)}} /* ---- Testimonials ---- */ .quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;height:100%} .quote-card .mark{font-family:var(--ff-display);font-size:56px;line-height:.6;color:transparent;background:var(--spark);-webkit-background-clip:text;background-clip:text;margin-bottom:8px} .quote-card p{font-size:16.5px;color:var(--text);margin-bottom:22px;flex:1} .quote-card .who{font-weight:600} .quote-card .role{font-size:13.5px;color:var(--text-3)} /* Clients: client logo, top-left of each testimonial card */ .qc-clogo{height:36px;width:auto;max-width:150px;object-fit:contain;display:block;margin-bottom:18px;opacity:.85;filter:grayscale(1) brightness(2.4)} .quote-card .mark{display:none} .quote-card p::before{content:"\201C";color:var(--amber-ink);font-weight:700;font-size:1.15em;line-height:0;margin-right:1px} .quote-card p::after{content:"\201D";color:var(--amber-ink);font-weight:700;font-size:1.15em;line-height:0;margin-left:1px} .qc-org{color:var(--amber-ink);font-size:13px;font-weight:600;letter-spacing:.03em;margin-top:5px} /* ---- Industries tabs ---- */ .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px} .tab{padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--veil-1); color:var(--text-2);font-weight:600;font-size:14.5px;transition:.2s} .tab.active{background:var(--spark);color:#150a00;border-color:transparent} .tab-panel{display:none} .tab-panel.active{display:block;animation:fadeUp .5s var(--ease)} /* ---- Solutions category tabs ---- */ .fam-tabs .tabs{justify-content:center;margin-bottom:42px} .fam-tabs .tab-n{font-weight:700;font-size:12px;opacity:.55;margin-left:3px} .fam-tabs .tab.active .tab-n{opacity:.72} /* legible category tabs on the white solutions band */ .products-light .tab{background:#f3f3f5;color:#55555c;border-color:#e7e7ea} .products-light .tab:hover{background:#ececef;color:#141319} .products-light .tab.active{background:var(--spark);color:#150a00;border-color:transparent} .products-light .fam-tabs .tab-n{color:#8a8a92} /* ---- Solutions: todas las categorias expandidas (titulo + productos, sin card) ---- */ .sol-list{max-width:1120px;margin:0 auto} .sol-group{margin-bottom:54px} .sol-group:last-child{margin-bottom:0} .sol-group-title{font-family:var(--ff-display);font-weight:700;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.01em;color:#141319;margin-bottom:20px} .sol-cat-full .products{padding:0} /* tarjetas mas chicas dentro del acordeon: mas columnas + menos gap */ .sol-cat-full .products{grid-template-columns:repeat(5,1fr);gap:16px} .sol-cat-full .product-media{aspect-ratio:4/3;overflow:hidden} /* centrar el contenido de cada producto (offset --myoff medido por foto) + escalar, para que queden alineados aunque cada foto tenga distinto espacio en blanco */ .sol-cat-full .product-media img{padding:14px;transform:translateY(var(--myoff,0)) scale(var(--mscale,1))} .sol-cat-full .product-card:hover .product-media img{transform:translateY(var(--myoff,0)) scale(calc(var(--mscale,1) * 1.06))} /* orden de la card: TITULO -> IMAGEN -> BOTON, apilados, sin taparse. Titulo y foto centrados, boton a la derecha. */ .sol-cat-full .product-card{display:flex;flex-direction:column} /* El titulo comparte el gris de la foto (--stage), asi la tarjeta queda en dos bloques limpios -- nombre+producto arriba, boton abajo -- en vez de una franja blanca de titulo, uno gris de foto y otra blanca de boton -- Martin, 10 sep 2026. */ .sol-cat-full .product-card > h3{margin:0;padding:12px 14px 9px;font-size:14px;font-weight:700;line-height:1.16;letter-spacing:-.01em;color:#141319;text-align:center;background:var(--stage)} .sol-cat-full .pm-foot{padding:9px 14px 13px;display:flex;justify-content:flex-end;margin-top:auto} .sol-cat-full .pm-foot .pm-more{padding:6px 11px;font-size:11px;white-space:nowrap} @media (max-width:1080px){ .sol-cat-full .products{grid-template-columns:repeat(4,1fr)} } @media (max-width:860px){ .sol-cat-full .products{grid-template-columns:repeat(3,1fr)} } @media (max-width:600px){ .sol-cat-full .products{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .sol-group{margin-bottom:40px} } /* Product detail, white showcase band so the product reads clean and the lifestyle photo doesn't compete */ .product-showcase{background:var(--surface-alt)} .product-showcase .eyebrow{color:#6b6b72} .product-showcase h2{color:#141319} .product-showcase .section-head p{color:#55555c} .product-showcase .desc-body p{color:#55555c} .product-showcase .feat-list li{color:#3f3f46} .product-showcase .chip{background:#f3f3f5;color:#3f3f46;border-color:#e4e4e8} /* main gallery sits flush on the white band, no frame, no shadow under the product */ .product-showcase .carousel{background:#fff;border-color:transparent;box-shadow:none} .product-showcase .carousel-slide.render img{filter:none} /* variations on white: white cards, dark text, uniform smaller product images */ .product-showcase .variant-card{background:#fff;border-color:#e7e7ea;box-shadow:0 1px 2px rgba(0,0,0,.05)} .product-showcase .variant-card .vb{border-top:1px solid #f0f0f2} .product-showcase .variant-card h4{color:#141319} .product-showcase .variant-card .vsku{color:#b07a00} .product-showcase .variant-card .vm{aspect-ratio:auto;height:184px;background:#fff;padding:18px} .product-showcase .variant-card .vm img{max-height:140px;max-width:82%;width:auto;height:auto;object-fit:contain;filter:none} .product-showcase .variant-spec .vrow{border-color:#ececef} .product-showcase .variant-spec .vk{color:#8a8a92} .product-showcase .variant-spec .vv{color:#141319} /* spec-table layout on white */ .product-showcase .spec-table{background:#e7e7ea;border-color:#e7e7ea} .product-showcase .spec-table .cell{background:#fff} .product-showcase .spec-table .cell .k{color:#8a8a92} .product-showcase .spec-table .cell .v{color:#141319} /* var-table layout on white */ .product-showcase .var-table-wrap{border-color:#e7e7ea} .product-showcase .var-table th,.product-showcase .var-table td{border-color:#ececef} .product-showcase .var-table thead th{background:#f3f3f5;color:#55555c} .product-showcase .var-table td{color:#55555c} .product-showcase .var-table td.mono{color:#141319} .product-showcase .var-table tbody tr:hover{background:#f7f7f9} /* Specifications panel: soft tinted background */ .spec-card .var-table-wrap{background:#f6f5f1;border-color:#eae7df} /* ---- Drag-to-replace photos ---- */ .hero-veil,.hero-mesh{pointer-events:none} img.swap-hot,video.swap-hot{outline:3px dashed var(--amber);outline-offset:-3px;filter:brightness(.62) contrast(1.04);cursor:copy} .swap-done{animation:swapPulse .7s var(--ease)} @keyframes swapPulse{0%{box-shadow:0 0 0 3px var(--amber),0 0 0 9px rgba(255,201,7,.35)}100%{box-shadow:0 0 0 0 rgba(255,201,7,0)}} .swap-hint{position:fixed;left:50%;bottom:26px;z-index:9999;transform:translate(-50%,12px);background:var(--amber);color:#150a00;font-family:var(--ff-display);font-weight:700;font-size:13px;letter-spacing:.02em;padding:9px 17px;border-radius:var(--r-pill);box-shadow:0 10px 34px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s} .swap-hint.show{opacity:1;transform:translate(-50%,0)} /* ---- CTA band ---- */ .cta-band{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:80px 56px;border:1px solid var(--line);text-align:center} .cta-band .glow{position:absolute;inset:0;background:radial-gradient(80% 120% at 15% 15%,rgba(255,193,7,.26),transparent 55%),radial-gradient(70% 120% at 88% 90%,rgba(255,213,79,.20),transparent 55%)} .cta-band .cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto} .cta-band h2{font-size:clamp(32px,4.2vw,52px);margin-bottom:16px} .cta-band p{color:var(--text-2);font-size:19px;margin-bottom:30px} .cta-band .hero-cta{justify-content:center} /* ---- ROI teaser (§7 del brief): franja delgada justo bajo el hero, home A y B. A proposito NO es un .section completo (padding:0 0 72px): el brief pide "un vistazo rapido", no una seccion nueva que le compita en peso al hero. Es una franja horizontal con solo un borde superior para separarla, sin fondo propio. */ .roi-teaser{border-top:1px solid var(--line);padding:26px 0} /* La franja pegada al hero: el hero conserva sus 72px de padding inferior en cualquier otra pagina, pero cuando lo sigue este teaser (unico caso hoy: home A/B) baja ese padding para que el "vistazo rapido" quede realmente junto al hero en vez de flotar con ~99px de vacio (hallazgo del revisor de D.1). */ .hero-with-teaser{padding-bottom:28px} .roi-teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} /* Columna, no fila: en fila (align-items:baseline) el bloque de texto reclamaba casi todo el ancho del contenedor y el boton nunca cabia a su lado (hallazgo del revisor de D.1: quedaba huerfano en su propia linea en TODOS los anchos reales, no solo en mobile). Apilado, el ancho que reclama el texto es el de su linea mas larga, mucho menor, y el boton cabe a su lado en escritorio. */ .roi-teaser-copy{display:flex;flex-direction:column;gap:5px;min-width:0} .roi-teaser-q{font-family:var(--ff-display);font-weight:600;font-size:16.5px;color:var(--text);margin:0} .roi-teaser-sub{font-size:14px;color:var(--text-3);margin:0} .roi-teaser .btn{flex:none;white-space:nowrap} /* ---- Costos Ocultos (home), version ampliada ---- Sin grafico a proposito: no tenemos el peso relativo de cada rubro, asi que los cinco van como lista de componentes y los dos numeros como cifras sueltas. Los numeros usan el amarillo de marca -- no codifican ninguna serie, solo jerarquia. */ .roi-teaser-lg{padding:clamp(34px,4vw,52px) 0} .roi-hc-head{max-width:760px} .roi-hc-head .roi-teaser-q{font-size:clamp(20px,2.4vw,27px);margin:10px 0 8px;line-height:1.25} .roi-hc-head .roi-teaser-sub{font-size:15.5px;color:var(--text-2);line-height:1.6} /* ---- Costos Ocultos: tarjetas de retorno de inversion (home) ---- Dos productos, cada uno con foto, la curva de costo acumulado a 5 anios y dos cifras. El grafico es una linea por opcion, 2px, sobre una base recesiva: la DISTANCIA entre las dos curvas es el ahorro, que es lo que hay que leer. Los colores (#5B8DEF metal / #BE8A00 ENNAT) estan validados para daltonismo y contraste sobre fondo oscuro, y ademas van rotulados en la leyenda: la identidad nunca depende solo del color. */ .roi-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px} .roi-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:20px 22px} .roi-card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .roi-card-img{flex:none;width:72px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden} .roi-card-img img{max-width:86%;max-height:86%;width:auto;height:auto;object-fit:contain} .roi-card h3{font-size:17px;margin:0} .roi-card-qty{margin:3px 0 0;font-size:13px;color:var(--text-3)} /* Comparacion a 5 anios, mismo formato que la lamina 14 de la presentacion (css/deck.css .tco-*), que ya esta probado: las dos barras comparten escala, el metal es el 100%, asi que el LARGO es el dato. */ .roi-mult{margin:0 0 12px;font-size:14.5px;color:var(--text-2)} .roi-mult strong{color:var(--amber);font-family:var(--ff-display);font-size:17px} .roi-bars{display:grid;gap:8px} .roi-row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center} .roi-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600} .roi-track{position:relative;height:38px;border-radius:var(--r-sm);background:var(--veil-2); border:1px solid var(--line);overflow:hidden;display:block} .roi-fill{position:absolute;left:0;top:0;height:100%} .roi-fill.metal{background:linear-gradient(90deg,#8E8A98 0%,#6A6675 100%)} .roi-fill.ennat{background:var(--amber)} .roi-track b{position:absolute;right:12px;top:50%;transform:translateY(-50%); font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums} .roi-figs{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .roi-figs>div{display:flex;flex-direction:column;gap:2px} .roi-figs strong{font-family:var(--ff-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);color:var(--amber);letter-spacing:-.02em} .roi-figs span{font-size:13px;color:var(--text-2)} @media(max-width:760px){ .roi-cards{grid-template-columns:1fr} } .roi-hc-cta{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .roi-hc-note{font-size:13.5px;color:var(--text-3)} @media(max-width:700px){ .roi-hc-stats{grid-template-columns:1fr} .roi-hc-cta .btn{width:100%;text-align:center} } /* El texto en español es mas largo (~648px) que en ingles (~476px): medido en vivo, el texto ES + boton recien caben en una sola fila desde ~1032px de ancho de pagina. Por debajo de eso (tablets, laptops angostos) se apilan a proposito con el mismo tratamiento que mobile, en vez de quedar semi-rotos por un ajuste de fila casi-pero-no-justo. */ @media (max-width:1040px){ .roi-teaser-inner{flex-direction:column;align-items:flex-start;gap:14px} .roi-teaser .btn{align-self:stretch;text-align:center} } /* ---- Accordion ---- */ .acc-item{border-bottom:1px solid var(--line)} .acc-head{width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:var(--ff-display); font-size:20px;font-weight:600;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px} .acc-head .pm{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:.25s} .acc-head .pm::before,.acc-head .pm::after{content:"";position:absolute;background:var(--amber);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)} .acc-head .pm::before{width:11px;height:2px}.acc-head .pm::after{width:2px;height:11px;transition:.25s} .acc-item.open .pm{background:var(--spark)} .acc-item.open .pm::before,.acc-item.open .pm::after{background:#150a00} .acc-item.open .pm::after{transform:translate(-50%,-50%) scaleY(0)} .acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .acc-body-inner{padding:0 0 24px;color:var(--text-2);font-size:16px;max-width:70ch} /* ---- Forms ---- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--text-2)} .field input,.field select,.field textarea{ background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text); font-family:var(--ff-body);font-size:15.5px;padding:13px 15px;transition:border-color .18s,box-shadow .18s} .field textarea{resize:vertical;min-height:120px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(255,201,40,.5);box-shadow:0 0 0 3px rgba(255,201,40,.12)} .field .err{color:var(--red-ink);font-size:12.5px;display:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:rgba(200,32,15,.6)} .field.invalid .err{display:block} .checkbox{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--text-3);grid-column:1/-1;line-height:1.5} .checkbox input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--orange)} .checkbox .err{display:none;margin-top:6px;color:var(--red-ink);font-size:12.5px} .checkbox.invalid .err{display:block} .checkbox.invalid input{outline:2px solid rgba(200,32,15,.6);outline-offset:2px} .form-note{grid-column:1/-1;padding:16px 18px;border-radius:var(--r-sm);background:var(--spark-soft);border:1px solid rgba(255,201,40,.25);color:var(--amber-ink);font-size:14px;display:none} .form-note.show{display:block} /* ---- "Upload Your Facility Layout" modal (js/layout-upload.js, product pages) ---- */ .layout-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px} .layout-modal[hidden]{display:none} .layout-modal-bg{position:absolute;inset:0;background:var(--scrim-modal);backdrop-filter:blur(3px)} .layout-modal-box{position:relative;z-index:1;max-width:600px;width:100%;max-height:88vh;overflow-y:auto;padding:32px 34px 34px;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)} .layout-modal-x{position:absolute;top:16px;right:18px;background:none;border:0;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;padding:6px} .layout-modal-x:hover{color:var(--text)} .layout-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;transition:border-color .18s,background .18s} .layout-drop svg{color:var(--text-3)} .layout-drop span{font-size:14px} .layout-drop-note{font-size:12.5px;color:var(--text-3)} .layout-drop:hover,.layout-drop.drag{border-color:rgba(255,201,40,.5);background:rgba(255,201,40,.05)} .layout-filelist{display:flex;flex-direction:column;gap:8px;margin-top:10px} .layout-file{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px} .layout-file-name{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .layout-file-note{color:var(--text-3);font-size:12.5px;flex-shrink:0} .layout-file.bad .layout-file-note{color:var(--red-ink)} .layout-file.done .layout-file-note{color:var(--amber-ink)} .layout-file-x{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:14px;padding:2px 4px;flex-shrink:0} .layout-file-x:hover{color:var(--text)} /* ---- Contact info cards ---- */ .office{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px} .office .country{font-family:var(--ff-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:10px} .office .city{font-weight:600;margin-bottom:6px} .office a,.office p{display:block;color:var(--text-2);font-size:14.5px;margin-bottom:3px} .office a:hover{color:var(--text)} /* ---- Blog ---- */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .24s var(--ease),border-color .24s} .post-card:hover{transform:translateY(-5px);border-color:var(--line-strong)} .post-media{aspect-ratio:16/10;overflow:hidden} .post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .post-card:hover .post-media img{transform:scale(1.06)} .post-body{padding:24px;display:flex;flex-direction:column;flex:1} .post-cat{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:12px} .post-body h3{font-size:20px;margin-bottom:10px;line-height:1.2} .post-body p{font-size:14.5px;color:var(--text-2);margin-bottom:18px;flex:1} .post-meta{font-size:12.5px;color:var(--text-3);display:flex;gap:10px} /* article */ .article{max-width:760px;margin:0 auto} .article h2{font-size:32px;margin:44px 0 16px} .article h3{font-size:23px;margin:32px 0 12px} .article p{color:var(--text-2);font-size:18px;margin-bottom:20px} .article ul.bullets{margin:0 0 22px 0;display:flex;flex-direction:column;gap:12px} .article ul.bullets li{position:relative;padding-left:26px;color:var(--text-2);font-size:17px} .article ul.bullets li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;background:var(--spark)} .article .pull{border-left:3px solid transparent;border-image:var(--spark) 1;padding:6px 0 6px 24px;font-family:var(--ff-display);font-size:24px;color:var(--text);margin:32px 0} /* ---- Footer ---- */ .footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--bg-2)} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px} .foot-brand img{height:26px;margin-bottom:18px} .foot-brand p{color:var(--text-3);font-size:14.5px;max-width:34ch} .foot-col h3{font-family:var(--ff-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;font-weight:600} .foot-col a{display:block;color:var(--text-2);font-size:15px;margin-bottom:11px;transition:color .16s} .foot-col a:hover{color:var(--text)} .foot-bottom{display:flex;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);color:var(--text-3);font-size:13.5px;flex-wrap:wrap;gap:12px} .foot-legal{display:inline-flex;gap:18px} .foot-legal a{color:var(--text-3);transition:color .2s} .foot-legal a:hover{color:var(--amber-ink)} /* ---- Reveal animations ---- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} .reveal[data-d="5"]{transition-delay:.4s} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important} .hero-mesh,.marquee-track{animation:none!important} *{scroll-behavior:auto!important} } /* ---- Carousel (product galleries) ---- */ .carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:radial-gradient(90% 90% at 50% 30%,#24222c,#131218)} .carousel-track{display:flex;transition:transform .6s var(--ease)} /* Small dedicated 3D model box (iframe from the Intel viewer). Small: interactive (drag to rotate) with an Enlarge button top-left. Open: fullscreen modal. */ .product-showcase .split{align-items:start} /* Force the two ficha columns to exactly 50/50: grid items default to min-width:auto, so wide content (the thumbnail strip, models table) would otherwise stretch one column. */ .product-showcase .split-media,.product-showcase .split-body{min-width:0} .m3d-slot{position:relative;width:100%;aspect-ratio:16/9;margin-top:0;background:var(--stage);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s} .m3d-slot:hover{box-shadow:0 8px 26px rgba(0,0,0,.14)} .m3d-cap{position:absolute;left:9px;bottom:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(18,20,26,.60);color:#fff;font:600 11px/1 var(--font);letter-spacing:.01em;padding:6px 10px;border-radius:8px;pointer-events:none;backdrop-filter:blur(4px)} .m3d-cap-m{display:none} .m3d-frame{position:absolute;inset:0} .m3d-slot iframe{width:100%;height:100%;border:0;background:var(--stage);pointer-events:auto} .m3d-expand{position:absolute;top:9px;left:9px;z-index:3;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:9px;background:rgba(18,20,26,.62);color:#fff;cursor:pointer;transition:background .15s} .m3d-expand:hover{background:rgba(18,20,26,.88)} .m3d-badge{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:4px;background:var(--amber);color:#14141a;font:700 10.5px/1 var(--font);letter-spacing:.03em;padding:5px 8px;border-radius:7px;pointer-events:none} .m3d-close{display:none} /* Finish switcher under the viewer. The ficha sits on white, so this is a light segmented control, not the dark treatment used over the model itself. */ .m3d-finish{display:flex;align-items:center;gap:11px;margin-top:11px;flex-wrap:wrap} .m3d-finish[hidden]{display:none} .m3d-finish-lbl{font:700 10.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:#6b6b76} .m3d-finish-btns{display:inline-flex;gap:4px;padding:3px;border:1px solid #e2e2e7;border-radius:11px;background:#f6f6f8} .m3d-finish-btns button{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;background:transparent;color:#55555f;font:600 12.5px/1 var(--font);padding:7px 12px;cursor:pointer;transition:background .16s,color .16s,box-shadow .16s} .m3d-finish-btns button:hover{color:#141319} .m3d-finish-btns button.on{background:#fff;color:#141319;box-shadow:0 1px 4px rgba(0,0,0,.10)} .m3d-sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.16);flex:0 0 auto} html.m3d-lock{overflow:hidden} .m3d-slot.m3d-open{position:fixed;inset:0;z-index:9999;max-width:none;width:100vw;height:100dvh;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:rgba(10,12,16,.9);cursor:zoom-out;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)} .m3d-slot.m3d-open:hover{box-shadow:none;transform:none} .m3d-slot.m3d-open .m3d-frame{position:relative;inset:auto;width:min(88vw,720px);height:min(82vh,720px)} .m3d-slot.m3d-open iframe{pointer-events:auto;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.45)} .m3d-slot.m3d-open .m3d-badge,.m3d-slot.m3d-open .m3d-cap,.m3d-slot.m3d-open .m3d-expand{display:none} .m3d-slot.m3d-open .m3d-close{display:flex;align-items:center;justify-content:center;position:fixed;top:18px;right:20px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:17px;cursor:pointer;transition:background .15s} .m3d-slot.m3d-open .m3d-close:hover{background:var(--veil-4)} .carousel-slide{flex:0 0 100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .carousel-slide.render{padding:30px;background:var(--stage)} .carousel-slide.render img{max-height:100%;width:auto;filter:drop-shadow(0 20px 34px rgba(0,0,0,.55))} .carousel-slide.photo img{width:100%;height:100%;object-fit:cover} .carousel-badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--spark);color:#150a00;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill)} .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(10,10,12,.55);backdrop-filter:blur(8px);color:var(--text);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s} .carousel-nav:hover{background:var(--scrim-strong)} .carousel-nav.prev{left:14px}.carousel-nav.next{right:14px} .carousel-dots{position:absolute;bottom:14px;left:0;right:0;z-index:3;display:flex;gap:8px;justify-content:center} .carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--veil-4);padding:0;transition:background .2s,width .2s} .carousel-dots button.active{width:22px;border-radius:5px;background:var(--spark)} /* Secondary-photo thumbnails: one row below the main image, arrows scroll the overflow */ .cthumbs-wrap{display:flex;align-items:center;gap:7px;margin-top:11px} .carousel-thumbs{position:relative;display:flex;gap:9px;overflow-x:auto;flex:1 1 auto;min-width:0;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none} .carousel-thumbs::-webkit-scrollbar{display:none} .cthumb{flex:0 0 82px;width:82px;aspect-ratio:1/1;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;padding:0;cursor:pointer;opacity:.58;transition:opacity .18s,border-color .18s} .cthumb:hover{opacity:1} .cthumb.active{opacity:1;border-color:var(--amber)} .cthumb img{width:100%;height:100%;display:block} .cthumb.render img{object-fit:contain;padding:8px;box-sizing:border-box} .cthumb.photo img{object-fit:cover} .cthumbs-arrow{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid #dcdce1;background:#fff;color:#141319;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:background .18s,border-color .18s} .cthumbs-arrow:hover{background:#f4f4f6;border-color:var(--amber)} .cthumbs-arrow[hidden]{display:none} /* ---- Light products band (white, for white-background renders) ---- */ /* Estas tres secciones son claras SIEMPRE, también con el sitio en oscuro (los renders de producto vienen recortados sobre blanco). Por eso el ámbar de texto de adentro ya venía quedando en 1.63:1 sobre blanco, ilegible, desde antes del tema claro: acá se corrige para los dos temas de una vez. */ .products-light,.product-showcase,.pv-complete{--amber-ink:#856504;--text-3:#6B6B72;--red-ink:#C01F0E} .products-light{background:var(--surface-alt)} .products-light .eyebrow{color:#6b6b72} .products-light .section-head h2{color:#141319} .products-light .section-head p{color:#55555c} .products-light .product-card{background:#fff;border-color:#e7e7ea;box-shadow:0 1px 2px rgba(0,0,0,.05)} .products-light .product-card:hover{border-color:#d3d3d8;box-shadow:0 24px 50px -26px rgba(0,0,0,.32)} .products-light .product-media{background:var(--stage)} .products-light .product-media img{filter:none} .products-light .product-body h3{color:#141319} .products-light .product-mini{color:#8a8a92} .products-light .product-mini b{color:#141319} .products-light .btn-ghost{background:#f3f3f5;color:#141319;border-color:#e4e4e8} .products-light .btn-ghost:hover{background:#eaeaef;border-color:#d4d4da} .pcat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);font-weight:600;margin-bottom:8px} .products-light .pcat{color:#b07a00} .product-price{font-family:var(--ff-display);font-weight:600;font-size:18px} .product-groups .group-head{grid-column:1/-1;margin:40px 0 4px;display:flex;align-items:baseline;gap:14px} .product-groups .group-head:first-child{margin-top:0} .product-groups .group-head h3{font-size:24px} .product-groups .group-head span{color:var(--text-3);font-size:13px;letter-spacing:.06em;text-transform:uppercase} .products-light .product-groups .group-head h3{color:#141319} .desc-body p{margin-bottom:12px;color:var(--text-2);font-size:15.5px} .desc-body ul{list-style:disc;padding-left:20px;margin:0 0 14px} .desc-body li{color:var(--text-2);margin-bottom:6px;font-size:15px} .spec-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .spec-table .cell{background:var(--bg);padding:9px 14px} .spec-table .cell .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px} .spec-table .cell .v{font-family:var(--ff-display);font-weight:600;font-size:16px} /* ---- Family page: features, chips, variations, related ---- */ .feat-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px} .feat-list li{position:relative;padding-left:26px;color:var(--text-2);font-size:15px;line-height:1.5} .feat-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:3px;background:var(--spark)} .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em; padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-2)} .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--spark);flex:0 0 auto} .variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px} .variant-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .24s,transform .24s var(--ease)} .variant-card:hover{transform:translateY(-4px);border-color:var(--line-strong)} .variant-card .vm{aspect-ratio:4/3;background:var(--stage);display:flex;align-items:center;justify-content:center;padding:22px} .variant-card .vm img{max-height:100%;max-width:100%;width:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.24))} .variant-card .vb{padding:18px 20px 20px} .variant-card .vsku{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);font-weight:600;margin-bottom:6px} .variant-card h4{font-size:17px;margin-bottom:10px} .variant-spec .vrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px} .variant-spec .vk{color:var(--text-3)} .variant-spec .vv{font-family:var(--ff-display);font-weight:600;color:var(--text);text-align:right} .rel-media{aspect-ratio:16/10;background:var(--stage);display:flex;align-items:center;justify-content:center;padding:22px} .rel-media img{max-height:100%;max-width:78%;width:auto;filter:none} /* "Often paired with" cards are white so the white product renders sit cleanly */ .rel-card{background:#fff;border-color:#e6e6ea} .rel-card .pcat{color:#8a8a92} .rel-card h3{color:#141319} .rel-card:hover{border-color:#d3d3d9;box-shadow:0 22px 48px -26px rgba(0,0,0,.4)} .var-table-wrap{border:1px solid var(--line);border-radius:var(--r-md)} .var-table{width:100%;border-collapse:collapse;font-size:14px} .var-table th,.var-table td{text-align:left;padding:7px 14px;border-bottom:1px solid var(--line);line-height:1.35} .var-table th{white-space:nowrap} /* Valores largos (ej. "1/2" x 1/4" wedge anchor (zinc-plated), floor-mount") pasan a dos lineas en vez de forzar scroll horizontal a toda la tabla. Esta clase la comparte la tabla comparativa de Modelos (ennModelsTable, columnas variables por familia) - sin table-layout:fixed esa tabla sigue repartiendo el ancho segun el contenido de cada columna en vez de forzarlas todas parejas. */ .var-table td{overflow-wrap:break-word} .var-table thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);font-weight:600} .var-table tbody tr:last-child td{border-bottom:none} .var-table tbody tr:hover{background:var(--surface-2)} .var-table td{color:var(--text-2)} .var-table td.mono{font-family:var(--ff-display);font-weight:600;color:var(--text)} /* ---- Projects: filters, grid, pagination ---- */ .pj-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px} .pj-chip{background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-family:var(--ff-body);font-weight:600;font-size:14px;padding:9px 16px;border-radius:var(--r-pill);transition:color .18s,background .18s,border-color .18s} .pj-chip:hover{color:var(--text);border-color:var(--line-strong)} .pj-chip.active{background:var(--spark);color:#150a00;border-color:transparent} .pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pj-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .24s var(--ease),border-color .24s,box-shadow .24s} .pj-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 28px 64px -28px rgba(0,0,0,.85)} .pj-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)} .pj-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .pj-card:hover .pj-media img{transform:scale(1.05)} .pj-logo{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;background:#fff;border-radius:var(--r-pill);box-shadow:0 6px 16px rgba(0,0,0,.28)} .pj-logo img{max-height:16px;max-width:104px;width:auto;height:auto;object-fit:contain;display:block;filter:grayscale(1)} .pj-logo-text{font-family:var(--ff-display);font-weight:700;font-size:14px;color:#150a00} .pj-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1} .pj-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pj-sector{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink)} .pj-region{font-size:12.5px;color:var(--text-3)} .pj-card h3{font-size:20px} .pj-card p{font-size:14.5px;color:var(--text-2);line-height:1.5} .pj-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px} .pj-page-btn{min-width:40px;height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--line);color:var(--text-2);border-radius:var(--r-sm);font-family:var(--ff-display);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:color .16s,background .16s,border-color .16s} .pj-page-btn:hover:not(:disabled){color:var(--text);border-color:var(--line-strong)} .pj-page-btn.active{background:var(--spark);color:#150a00;border-color:transparent} .pj-page-btn:disabled{opacity:.4;cursor:default} @media(max-width:920px){.pj-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.pj-grid{grid-template-columns:1fr}} .pj-more{margin-top:14px;color:var(--amber-ink);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px} .pj-card:hover .pj-more .arrow{transform:translateX(4px)} .pj-more .arrow{transition:transform .2s var(--ease)} /* ---- Project detail page ---- */ .pd-hero{position:relative;padding:118px 0 72px;border-bottom:1px solid var(--line);overflow:hidden} .pd-back{display:inline-block;color:var(--text-3);font-size:14px;font-weight:500;margin-bottom:22px;transition:color .16s} .pd-back:hover{color:var(--text)} .pd-logo{height:40px;width:auto;max-width:200px;object-fit:contain;display:block;margin-bottom:6px;background:#fff;border-radius:9px;padding:10px 14px;filter:grayscale(1)} .pd-logo-text{font-family:var(--ff-display);font-weight:700;font-size:24px;color:var(--text-2)} .pd-head h1{font-size:clamp(38px,6.4vw,74px);line-height:1;margin:8px 0 16px} .pd-head .lead{max-width:60ch} .pd-body{max-width:70ch;margin-bottom:34px} .pd-body p{color:var(--text-2);font-size:17px;line-height:1.65} .pd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .pd-shot{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)} .pd-shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)} .pd-shot:hover img{transform:scale(1.045)} @media(max-width:820px){.pd-gallery{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.pd-gallery{grid-template-columns:1fr}} /* ---- Tecnología: simulación de impacto en vivo (iframe del visor 3D) ---- Pieza protagonista: grande y centrada, no dos chicas lado a lado. Tope de 1040px para que en pantallas anchas no quede una franja negra desmedida, y el pie de foto acotado a 760px porque una línea de texto de 1040px de ancho se lee mal. El fondo negro es del propio visor (?fondo=negro). */ /* LAS SIMULACIONES DE IMPACTO VAN EN VIDEO, NO EN UN VISOR 3D EMBEBIDO. Medido el 12 sep 2026: los dos iframes del visor pesaban 2.29 MB y 34 peticiones -- el 89% de toda la pagina -- y se bajaban al abrir aunque nadie llegara a esa seccion. El video muestra exactamente la misma animacion por una fraccion de eso. preload="none" + autoplay: el navegador no lo baja hasta que la seccion esta a la vista (la politica de autoplay de video silenciado se dispara al entrar en pantalla), asi que quien no baja hasta aca no paga nada. Ver scripts/cine-video.mjs. */ .tech-video{width:100%;aspect-ratio:16/9;display:block;border:0;background:#000;object-fit:cover} .tech-film{max-width:1040px;margin:0 auto} .tech-film .media-frame{box-shadow:0 24px 60px rgba(0,0,0,.28)} .tech-film figcaption{max-width:760px;margin:18px auto 0;text-align:center;font-size:16px;line-height:1.55} .tech-film figcaption strong{display:block;margin-bottom:4px;font-family:var(--ff-display);font-size:18px} .tech-film figcaption span{color:var(--text-2)} /* ---- Responsive ---- */ @media(max-width:1180px){ .nav-inner{gap:18px} .nav-links{gap:20px;margin-left:8px} .nav-links a{font-size:14.5px} } @media(max-width:1024px){ .products{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:820px){ .nav-links{display:none} .nav-cta{display:none} /* En mobile el header queda con marca + burger. Con todo adentro, .nav-inner llego a necesitar ~442px reales contra 375px disponibles: el excedente se recortaba en silencio (overflow-x:hidden en body) y solo ~5px del boton de 40px del burger quedaban alcanzables. El drawer trae su propio selector de idioma y su acceso a la App (ver chrome.js), asi que ocultarlos del header no le quita nada al visitante mobile. */ .nav-inner > .lang-toggle, .nav-inner > .app-link{display:none} .burger{display:flex} .mobile-menu{display:flex} .split{grid-template-columns:1fr;gap:32px} .split.rev .split-media{order:0} .m3d-slot:not(.m3d-open) iframe{pointer-events:none} .m3d-slot:not(.m3d-open){cursor:pointer} .m3d-cap-d{display:none} .m3d-cap-m{display:inline} .hero-media{height:44vh;min-height:250px} .hero-inner{margin-top:-16vh;padding-top:16px} .grid-3,.grid-2{grid-template-columns:1fr} .value-strip{grid-template-columns:1fr 1fr} .post-grid{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr 1fr} .cta-band{padding:56px 26px} } @media(max-width:520px){ .wrap{padding:0 20px} .hero-media{height:39vh;min-height:220px} .products{grid-template-columns:1fr} .grid-4,.value-strip{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr} .stat-box{min-width:100%} } /* ===== product-preview.html : ficha ALTERNATIVA (clase .pv) — MODO OSCURO ===== */ .pv{background:var(--bg)} /* FICHAS DE PRODUCTO: el encabezado va DENTRO de la columna, no en una banda propia. Antes el titulo y la bajada vivian en un .page-hero de 373px que solo repetia lo que ya dice la miga de pan, y empujaba el visor 3D -- lo que la persona vino a ver -- hasta los 437px en una ventana de 900: aparecia cortado y obligaba a bajar antes de ver el producto. Ahora el visor arranca apenas debajo de la barra y el titulo ocupa la fila de arriba de la columna derecha, pegado al texto que describe el producto. El fondo decorativo (.hero-mesh) se queda en esta seccion para no perder la atmosfera del encabezado -- Martin, 10 sep 2026. */ .pv-top{overflow:hidden;padding:calc(var(--nav-h) + 18px) 0 clamp(40px,5vw,64px)} .pv-top>.wrap{position:relative;z-index:2} .pv-top .hero-mesh{opacity:.7} /* Areas con nombre y SIN separacion entre filas: el titulo tiene que quedar pegado a su propio texto, mientras que la columna del visor (media) cruza las dos filas. La separacion horizontal de 56px es la misma de antes. */ .pv-head{grid-area:head;min-width:0} .pv-left{grid-area:media} .pv-right{grid-area:body} /* Mas chico que el h1 del hero (clamp(40px,5.6vw,72px)): esta columna mide la mitad del ancho, y ahi ese tamano parte el nombre en tres renglones. */ .pv-head h1{font-size:clamp(28px,3vw,42px);margin:10px 0 12px;line-height:1.08} .pv-head .eyebrow{display:flex} .pv-tagline{font-size:17px;color:var(--text-2);margin:0} /* Las filas de la grilla no llevan separacion (el titulo va pegado a su texto), asi que el aire entre la bajada y Descripcion se pone aca. En telefono lo da el gap. */ .pv-right{margin-top:22px} /* LAS FILAS: la del titulo se queda con SU alto, el sobrante va a la de abajo. La columna del visor (media) cruza las dos filas y casi siempre es mas alta que titulo+texto juntos; con las dos filas en `auto` ese excedente se repartia entre ambas, asi que la de arriba crecia y dejaba un hueco entre la bajada y Descripcion. Y como el excedente depende de cada producto, el hueco salia distinto en cada ficha: 184px en Signal Post, 145 en Bollard, 91 en Fence Barrier, 22 en Rack Protector -- Martin, 11 sep 2026. Con la segunda fila en `1fr` (pista flexible) el excedente se va entero ahi y el hueco queda en los 22px del margen de .pv-right, igual en las 22 fichas. `min-content` NO alcanza: sigue siendo una pista intrinseca y le toca parte del reparto. */ .pv .pv-grid{display:grid;grid-template-columns:1.14fr .86fr;grid-template-areas:"media head" "media body";grid-template-rows:auto 1fr;gap:0 56px;align-items:start} .pv-left,.pv-right{min-width:0} /* Model Explorer (brief §3.2): tarjetas con foto chica bajo el carrusel de fotos, para elegir el modelo exacto (PR80 | PR100 | PR120...) y ver su ficha resumida, en vez de solo una tabla o una seccion aparte de "Explore the Range". Solo en familias `cards` con mas de un modelo. */ .pv-model-picker{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} /* La tira de modelos comparte estructura y flechas con el carrusel de fotos de arriba (.pv-thumbs): fila con una flecha a cada lado y la pista al medio. */ .pv-model-row{display:flex;align-items:stretch;gap:8px} .pv-model-row .pv-th-arrow{display:none} .pv-model-row.pv-th-scrollable .pv-th-arrow{display:flex} /* Flex + overflow-x en vez de grid auto-fit/1fr (lo que habia antes): esa version estiraba cada card para llenar el ancho exacto de la fila SEA CUAL SEA la cantidad de modelos, asi que 2-3 modelos (Low Bumper, Bollard) salian gigantes y solo la familia con el maximo de hoy (Roller, 6) se veia bien -- exactamente el problema que reporto Martin con capturas de varias fichas, cada una con una altura distinta. Ahora la card tiene tamano FIJO (ver .pv-model-card) sin importar cuantas entren, y si algun dia una familia suma mas de las que caben en una fila, se scrollea en vez de encogerse o desbordar -- mismo patron que .pv-th-track de la galeria de fotos de arriba (scroll-snap + sin barra visible). */ .pv-model-cards{flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; /* El aro ámbar de la tarjeta elegida sobresale 1px de la caja, y overflow-x:auto obliga a overflow-y:auto, asi que se recortaba arriba y abajo -- se veia un borde partido (Martin, 10 sep 2026). El padding le da ese aire dentro del area que scrollea y el margin negativo devuelve las tarjetas al borde de la columna. */ padding:4px;margin:-4px} .pv-model-cards::-webkit-scrollbar{display:none} /* fondo SIEMPRE claro (--stage, el mismo blanco de las fotos de INTEL: fichas de Soluciones, carrusel, comparador de modelos) en vez de var(--surface) -- las fotos de INTEL vienen con fondo blanco de estudio, asi que sobre superficie oscura (tema dark) quedaba una tarjeta blanca chica flotando en un marco oscuro. Con fondo claro siempre, foto y tarjeta se funden sin importar el tema del sitio. Texto en colores fijos (no var(--text-2)/var(--amber-ink), pensados para fondo oscuro) por la misma razon -- mismo criterio que .product-showcase .variant-card mas abajo. */ .pv-model-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--stage);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:10px 8px 8px;cursor:pointer;transition:background .16s,border-color .16s;flex:0 0 auto;scroll-snap-align:start} .pv-model-card img{width:84px;height:84px;object-fit:contain} .pv-model-card-sku{font-weight:700;font-size:11px;letter-spacing:.02em;color:#5a5a63;white-space:nowrap} .pv-model-card:hover{border-color:var(--veil-4)} /* Seleccionado = BORDE ambar, nada mas. El relleno crema tenia el render sobre un fondo distinto al de las demas tarjetas, y el producto cambiaba de color al elegirlo -- Martin, 10 sep 2026. El fondo se queda en --stage, el mismo blanco recortado sobre el que vienen los renders. */ .pv-model-card.on{background:var(--stage);border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)} .pv-model-card.on .pv-model-card-sku{color:#7a5c00} .pv-model-card:focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* Subfamilias (ver comentario en modelSelectorHtml): antes ocupaba el ancho completo del grid para arrancar su propia fila; en la tira horizontal de ahora (rack-protector, con su subfamilia "Frontal" solo en MX, es la que hoy tiene mas de un grupo) va como una etiqueta angosta e in-line entre los dos grupos de cards, sin cortar el scroll. */ .pv-model-group{flex:0 0 auto;align-self:center;font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;padding-right:2px} /* Bajo el selector queda solo el NOMBRE del modelo elegido: sus medidas se fusionaron en la tabla de Especificaciones, que ahora se rearma con el modelo activo. */ .pv-model-info{margin-top:14px} .pv-model-name{font-weight:700;color:var(--text);font-size:14px} /* Patente/garantia bajan a la columna izquierda cuando hay selector de modelos. */ .pv-left .pv-facts{margin-top:18px} /* 1: escenario 3D / foto (fondo negro, seamless con el entorno env=black del visor) */ /* EL ESCENARIO SE ADAPTA AL FORMATO DE LA FOTO. 4/4.2 (casi cuadrado) es lo que necesita el visor 3D, pero las fotos de obra son otra cosa: medidas las 108 de INTEL, la mediana es 1.33 y el 62% son apaisadas, asi que en la mayoria sobraba mucho negro arriba y abajo -- Martin, 11 sep 2026. Ahora el alto sale del formato de la foto que se esta mostrando (ver ajustarEscenario en product-v2.js) y 4/4.2 queda como valor por defecto, que es el del 3D. La transicion es lo que evita que se sienta un salto: el alto GLIDEA al cambiar de foto en vez de brincar. Chromium interpola aspect-ratio (comprobado); un navegador que no lo haga simplemente cambia de golpe, que es como estaba antes. */ .pv-stage{position:relative;aspect-ratio:var(--pv-ar, 4/4.2);background:#000;border:1px solid var(--veil-3);border-radius:18px;overflow:hidden; /* Tope de alto para que una foto muy vertical no empuje toda la pagina fuera de pantalla. Al toparse con el tope el escenario SE ANGOSTA (medido: 616 -> 486 px en 1440x900), y con margin:0 auto quedaba centrado, o sea 65 px a la derecha del carrusel de abajo -- Martin, 12 sep 2026: "el borde izquierdo de la foto no esta alineado con el borde izquierdo del carrusel". Ahora el aire sobrante se va todo a la derecha y el borde izquierdo no se mueve nunca. */ max-height:72vh;margin:0 auto 0 0;transition:aspect-ratio .3s var(--ease)} @media (prefers-reduced-motion: reduce){ .pv-stage{transition:none} } .pv-stage .pv-3d,.pv-stage .pv-photo{position:absolute;inset:0;background:#000} /* El render del escenario va en variante NEGRA (ver poster3d en product-v2.js): con la transparente se veia el recuadro negro como un bloque aparte -- Martin, 11 sep 2026. Su encuadre lo fija .pv-3d-poster-img, mas abajo. */ .pv-stage .m3d-slot:not(.m3d-open){position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:#000} .pv-stage .m3d-frame iframe{width:100%;height:100%;border:0;display:block} /* overlay NEGRO mientras carga el 3D, para que no haya destello blanco */ .pv-3d-loading{position:absolute;inset:0;z-index:3;background:#000;display:flex;align-items:center;justify-content:center;color:#7c7c85;font-weight:600;font-size:13px;transition:opacity .45s} /* POSTER DEL ESCENARIO: el render que se ve mientras el visor 3D no se pidio. Ocupa el mismo hueco que el iframe, asi que al montarse no se mueve nada (cero CLS). La imagen es la variante 'sin-fondo' (PNG con alpha) sobre el negro del escenario. */ .pv-3d-poster{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#000} .pv-3d-poster-img{max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain} /* Mientras el visor carga, el poster se queda atras y atenuado: el hueco nunca parpadea en negro entre que se va la foto y aparece el modelo. */ .pv-3d-poster.cargando{opacity:.35} /* El render del poster ocupa casi todo el hueco: es el mismo encuadre que va a tener el modelo, asi que el paso poster -> visor no salta de tamano. */ /* El llamado a abrir el 3D, abajo al centro: el mismo lenguaje que el boton de Etiquetas del visor, para que se lea como parte del escenario y no como un banner. */ /* Vive a nivel de .pv-stage (no dentro del poster): tiene que verse tambien con una foto del carrusel en pantalla, que es cuando hace falta para volver al 3D. */ .pv-3d-go{position:absolute;left:50%;bottom:16px;z-index:4;transform:translateX(-50%); display:inline-flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer; border:1px solid var(--amber);border-radius:999px;background:var(--amber);color:#141319; font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:.02em; box-shadow:0 8px 22px -8px rgba(245,197,24,.7);transition:filter .16s,transform .16s} .pv-3d-go:hover{filter:brightness(1.06);transform:translateX(-50%) translateY(-1px)} .pv-3d-go svg{flex:none} @media (max-width:600px){ .pv-3d-go{bottom:12px;padding:8px 14px;font-size:12px} } /* MINIATURA DEL MODELO GIRANDO (.pv-3d-tt). Abajo a la derecha sobre la foto: el modelo se ve girando apenas entra la persona, y el visor -- 3.7 MB -- se carga recien al hacer clic. No es un video: es una TIRA de cuadros en un webp que se anima moviendo el background-position en pasos. Sin codec, sin