/* ========================================================================== Avia Solutions — site.css Single stylesheet. No framework, no build step, no external requests. ========================================================================== */ /* ---------- fuente propia ---------- JetBrains Mono, auto-hospedada en fonts/. NO es una dependencia externa: el .woff2 se sirve desde este mismo nginx, no hay request a ningún CDN. Variable, subset latin, 31 KB. Licencia SIL OFL — el texto va en fonts/OFL.txt. La usa el eyebrow de rótulo (.eyebrow--lead) en el hero de las 13 páginas. El preload vive en partials/head.html: así ninguna página puede olvidarlo. */ @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('../fonts/jetbrains-mono-latin.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; } /* ---------- tokens ---------- */ :root{ --bg: #0d131b; --bg-2: #121a24; --panel: rgba(24,34,47,.74); /* translucido: deja ver el telon fijo */ --panel-2: #212d3c; /* componentes del fondo, para los velos con alfa (antes iban hardcodeados) */ --bg-rgb: 13,19,27; --panel-rgb: 24,34,47; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --txt: #dfe7f1; --txt-2: #b3c0d1; --muted: #8496ab; --green: #22c55e; --amber: #f59e0b; --cyan: #38bdf8; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --mono-display: "JetBrains Mono", var(--mono); --wrap: 1200px; --r: 14px; --r-sm: 9px; /* Alto de la barra. Es variable porque el menu desplegado se cuelga de ella (top:100%) y su max-height se calcula contra ella: si el alto cambia en un breakpoint, el menu se entera solo. Antes iban los dos numeros a mano y no coincidian — 78 px de barra contra un menu anclado a 70 px. */ --nav-h: 96px; /* Alto del logo. Vive aqui y no solo en los breakpoints del final para poder moverlo en una sola linea; el ancho lo calcula el navegador con la proporcion del archivo (6,94:1), asi que tocar solo el alto nunca lo deforma. Para probar valores en vivo: cualquier pagina con ?tune=1. */ --brand-h: 64px; /* Margen lateral. En movil se estrecha para no comerse el ancho util, y respeta el recorte de la pantalla (notch) en horizontal. */ --gut: 24px; --ease: cubic-bezier(.2,.7,.3,1); } /* ---------- reset-ish ---------- */ *,*::before,*::after{ box-sizing:border-box; } /* -webkit-text-size-adjust frena el "text auto-inflation" de Safari en iOS, que agranda por su cuenta el texto de los bloques anchos al girar el telefono a horizontal. La forma sin prefijo la entienden los navegadores actuales. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } /* El color base vive en : body queda transparente para que se vea el telon de fondo fijo (body::before). Ver "fondo fijo de pagina" mas abajo. */ html{ background:var(--bg); } body{ margin:0; background:transparent; color:var(--txt); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; /* el recuadro gris que iOS pinta al tocar un enlace; los estados :active propios de mas abajo dan mejor respuesta */ -webkit-tap-highlight-color:transparent; /* red de seguridad: una direccion de correo o un identificador largo parte de linea en vez de estirar su bloque y sacar barra horizontal a toda la pagina. El body NO lleva overflow-x:hidden — rompe el position:sticky de la barra. */ overflow-wrap:break-word; } /* es un contenedor inline: sin esto, las reglas que dimensionan `.row-media img` o `.pcard-img img` se aplican al pero el de en medio sigue siendo una caja inline y descuadra el marco. */ picture{ display:contents; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:650; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } /* ---------- layout ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; /* env() vale 0 salvo en pantallas con recorte: en un iPhone en horizontal el notch se come el margen izquierdo y el texto quedaba debajo. */ padding-left:max(var(--gut), env(safe-area-inset-left)); padding-right:max(var(--gut), env(safe-area-inset-right)); } /* ========================================================================== FONDO FIJO DE PAGINA La foto no se mueve con el scroll: queda clavada al viewport y el contenido pasa por encima. Cada pagina declara la suya en el , con ruta ABSOLUTA: La barra inicial es obligatoria: una url() dentro de una custom property se resuelve contra la hoja donde se USA (css/site.css), no contra la pagina, y con ruta relativa acabaria pidiendo /css/img/... y dando 404. Para que se vea, las secciones y tarjetas son translucidas (mas abajo), y el velo de ::after mantiene el texto legible sobre cualquier foto. ========================================================================== */ body::before{ content:""; position:fixed; inset:0; z-index:-3; background:var(--page-bg, none) center/cover no-repeat; filter:blur(0px); transform:scale(1.06); } /* Variantes por ancho de pantalla. Cada pagina declara las tres en su : Se resuelve con media queries y NO con image-set(): image-set elige por densidad de pixel, asi que en un iPhone (DPR 3) escogeria siempre la mayor — justo el archivo que queremos evitar en datos moviles. El fallback var(--page-bg) deja que una pagina declare solo la grande. */ @media (max-width:640px){ body::before{ background-image:var(--page-bg-sm, var(--page-bg, none)); /* el 6% de sobre-escala existia para que el desenfoque no dejara borde; sin desenfoque no aporta nada y obliga a rasterizar una capa fija mas grande que la pantalla en cada repintado del scroll. En iOS se nota. */ transform:none; } } @media (min-width:641px) and (max-width:1024px){ body::before{ background-image:var(--page-bg-md, var(--page-bg, none)); transform:none; } } body::after{ content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(var(--bg-rgb),.55), rgba(var(--bg-rgb),.80)); } /* Las secciones llevan su propio velo translucido: dejan ver el telon fijo pero garantizan suelo al texto. Sin el, el peor punto de las fotos con zonas claras (la captura de Volatus, las pantallas de cabina) bajaba el contraste a 1.2:1. */ .section{ padding:96px 0; background:rgba(var(--bg-rgb),.62); } .section--tight{ padding:64px 0; } .section--alt{ background:rgba(var(--bg-rgb),.76); border-block:1px solid var(--line); } /* ---------- type ---------- */ .eyebrow{ font-family:var(--mono); /* 15px en todo el sitio desde 2026-08-21. Antes eran 12 y solo eLila los subia a 15 con una regla propia; se unifico para que las 13 paginas compartan la misma tipografia. */ font-size:15px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin:0 0 18px; } .eyebrow--amber{ color:var(--amber); } .eyebrow--cyan{ color:var(--cyan); } /* Rótulo de sección al cuerpo del rótulo del hero (18px). Sólo el tamaño: familia, tracking y color se quedan como estén. Era una excepción atada a #modules/#compatibilities de eLila EFB; como clase sirve en cualquier página y no depende de que un id no cambie nunca. */ .eyebrow--lg{ font-size:18px; } /* eyebrow de rótulo: mismo color, JetBrains Mono, con más cuerpo y más tracking para que lea como rótulo de instrumento. Desde 2026-08-21 lo lleva el hero de las 13 páginas; antes sólo la home y eLila EFB. */ .eyebrow--lead{ font-family:var(--mono-display); font-size:18px; letter-spacing:.30em; margin-bottom:24px; } h1,.h1{ font-size:clamp(2.4rem, 6vw, 4.1rem); } h2,.h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); } h3,.h3{ font-size:1.22rem; } .lede{ font-size:clamp(1.05rem, 1.6vw, 1.24rem); color:var(--txt-2); line-height:1.7; max-width:64ch; } .muted{ color:var(--muted); } .measure{ max-width:70ch; } .center{ text-align:center; } .center .lede{ margin-inline:auto; } .lede.center{ margin-inline:auto; } .measure.center{ margin-inline:auto; } .section-head{ margin-bottom:52px; } .section-head h2{ margin-bottom:18px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:var(--r-sm); border:1px solid transparent; background:var(--green); color:#04140a; font-weight:650; font-size:.95rem; text-decoration:none; white-space:nowrap; transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); } /* Los :hover van tras (hover:hover) a proposito. En iOS un tap deja el estado de hover PEGADO hasta que se toca otra cosa: la tarjeta se quedaba levantada y el boton en verde claro despues de volver atras. El feedback tactil lo da :active, que si se suelta. Mismo criterio en .card--link, .pcard y .zoom. */ @media (hover:hover){ .btn:hover{ background:#2ee06b; transform:translateY(-1px); } } .btn:active{ transform:translateY(1px); } .btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--txt); } @media (hover:hover){ .btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); } } .btn--sm{ padding:9px 17px; font-size:.86rem; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .center .btn-row{ justify-content:center; } /* arrow link */ .arrow{ display:inline-flex; align-items:center; gap:7px; color:var(--green); font-weight:600; font-size:.94rem; text-decoration:none; } .arrow::after{ content:"→"; transition:transform .18s var(--ease); } .arrow:hover::after{ transform:translateX(4px); } /* ========================================================================== NAV ========================================================================== */ .nav{ position:sticky; top:0; z-index:60; background:rgba(var(--bg-rgb),.82); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); /* la barra queda por debajo del recorte de pantalla al girar el telefono */ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } .nav-in{ display:flex; align-items:center; gap:24px; height:var(--nav-h); } /* Logo nuevo desde 2026-08-27. Antes eran dos cosas —un monograma de 44x44 y el nombre escrito en HTML al lado—; ahora es UN bloque de 6,96:1 que ya trae dentro «AviaSolutions» y la bajada. Por eso se dimensiona por ALTO y el ancho sale solo: con width fijo el logo se aplastaria. */ .brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; min-width:0; } .brand img{ width:auto; height:var(--brand-h, 48px); max-width:100%; object-fit:contain; } /* .brand-txt ya no se usa en el nav: el nombre va dentro del logo. Las reglas se quedan por si vuelve a hacer falta un rotulo escrito al lado. */ .brand-txt{ display:flex; flex-direction:column; line-height:1; } .brand-txt b{ font-size:1.12rem; font-weight:700; letter-spacing:.01em; } .brand-txt span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:4px; } .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links a{ padding:8px 13px; border-radius:7px; font-size:.92rem; color:var(--txt-2); text-decoration:none; transition:color .16s, background .16s; } .nav-links a:hover{ color:var(--txt); background:rgba(255,255,255,.06); } .nav-links a.is-active{ color:var(--txt); } .nav-links a.is-active::after{ content:""; display:block; height:2px; margin-top:5px; background:var(--green); border-radius:2px; } .nav-links a.btn{ color:#04140a; } .nav-links a.btn:hover{ color:#04140a; } .nav-links a.btn::after{ display:none; } /* CTA del nav — verde, el mismo `--green` de los eyebrow y de `.btn`, y exactamente el alto del botón de sonido: 34 px, con box-sizing:border-box como él. Fue ámbar hasta el 2026-08-26. */ .nav-signin{ margin-left:14px; height:34px; padding:0 16px; font-size:.86rem; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,0); transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .22s var(--ease); } /* OJO con la especificidad: `.nav-links a:hover` (fondo casi transparente) le gana a un `.nav-signin:hover` suelto y deja el botón invisible — fondo transparente y texto oscuro sobre cabecera oscura. Por eso el hover se declara con el mismo prefijo `.nav-links a`. */ .nav-links a.nav-signin{ color:#04140a; } .nav-links a.nav-signin:hover, .nav-links a.nav-signin:focus-visible{ background:#2ee06b; color:#04140a; box-shadow:0 6px 18px -4px rgba(34,197,94,.55); } .nav-links a.nav-signin:active{ transform:translateY(0); } .nav-signin:focus-visible{ outline:2px solid var(--green); outline-offset:3px; } /* ---------- nav dropdowns ---------- */ .nav-item{ position:relative; display:flex; } .nav-trigger{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:0; border-radius:7px; background:transparent; color:var(--txt-2); font:inherit; font-size:.92rem; cursor:pointer; transition:color .16s, background .16s; } .nav-trigger::after{ content:""; width:6px; height:6px; margin-top:-3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .18s var(--ease); opacity:.7; } .nav-trigger:hover{ color:var(--txt); background:rgba(255,255,255,.06); } .nav-item.is-open .nav-trigger{ color:var(--txt); } .nav-item.is-open .nav-trigger::after{ transform:rotate(-135deg); margin-top:2px; } .nav-trigger.is-active{ color:var(--txt); } .menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:290px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px; box-shadow:0 22px 50px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; z-index:70; } .nav-item:hover .menu, .nav-item.is-open .menu, .nav-item:focus-within .menu{ opacity:1; visibility:visible; transform:translateY(0); } /* invisible bridge so the menu survives the gap on the way down */ .nav-item::after{ content:""; position:absolute; top:100%; left:0; right:0; height:12px; } .menu a{ display:block; padding:10px 13px; border-radius:6px; text-decoration:none; color:var(--txt); font-size:.93rem; line-height:1.35; } .menu a:hover{ background:rgba(255,255,255,.07); } .menu a small{ display:block; margin-top:3px; color:var(--muted); font-size:.79rem; font-weight:400; } .menu a::after{ display:none !important; } .menu a.is-active{ color:var(--green); } /* ========================================================================== PILL DE NAVEGACION + SUBMENU DINAMICO + BOTON DE SONIDO (2026-08-18) El fondo de hover de la barra ya no lo pinta cada item: lo dibuja un solo pill que se desliza entre ellos. Dentro del desplegable no hay pill — ahi el item que crece ES el indicador. ========================================================================== */ /* la barra ancla el pill */ .nav-in{ position:relative; } /* left:0/top:0 son obligatorios: sin ellos un absolute arranca desde su posicion estatica dentro del flex (despues de la marca) y el pill sale corrido justo por ese offset. */ .nav-pill{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; width:0; height:34px; border-radius:8px; background:linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,.06)); border:1px solid rgba(34,197,94,.34); box-shadow: 0 6px 20px -8px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.07); opacity:0; transition:transform .32s var(--ease), width .32s var(--ease), height .32s var(--ease), opacity .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); will-change:transform, width; } /* linea inferior encendida: el detalle que lo saca de "boton" y lo lleva a HUD */ .nav-pill::after{ content:""; position:absolute; left:9px; right:9px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--green), transparent); box-shadow:0 0 12px rgba(34,197,94,.85); opacity:.9; } .nav-pill.is-on{ opacity:1; } .nav-pill.is-open{ background:linear-gradient(180deg, rgba(34,197,94,.30), rgba(34,197,94,.10)); border-color:rgba(34,197,94,.55); box-shadow: 0 8px 26px -8px rgba(34,197,94,.75), inset 0 1px 0 rgba(255,255,255,.10); } /* el fondo de hover lo dibuja ahora el pill, no cada item */ .nav-links > a:hover{ background:transparent; } .nav-trigger:hover{ background:transparent; } /* los items van por encima del pill */ .nav-links > a, .nav-item{ position:relative; z-index:1; } /* --- submenu: el item bajo el cursor crece y se enciende; los demas no cambian de tamano, solo se acomodan --- */ .menu{ padding:10px; } .menu a{ position:relative; border:1px solid transparent; background:transparent; transition:padding .22s var(--ease), font-size .22s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .16s var(--ease); } .menu a small{ transition:font-size .22s var(--ease), color .16s var(--ease); } .menu a:hover, .menu a:focus-visible{ padding:15px 16px; font-size:1.02rem; background:linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,.06)); border-color:rgba(34,197,94,.34); box-shadow:0 6px 20px -10px rgba(34,197,94,.6), inset 0 1px 0 rgba(255,255,255,.06); outline:none; } .menu a:hover small, .menu a:focus-visible small{ font-size:.83rem; color:var(--txt-2); } .menu a::after{ display:block !important; content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--green), transparent); box-shadow:0 0 10px rgba(34,197,94,.75); opacity:0; transition:opacity .2s var(--ease); } .menu a:hover::after, .menu a:focus-visible::after{ opacity:.85; } /* --- grupo dentro del desplegable (2026-09-01) --------------------------- Las dos apps de iOS —Lucrum y Portum— salen de la lista plana de Products y cuelgan de un rotulo propio. Es encabezado + items sangrados, no un flyout de segundo nivel: el flyout necesita hover donde apoyarse, y en tactil no lo hay (ademas en movil el desplegable ya se renderiza estatico, ver breakpoint). El sangrado lo marca una linea vertical, no padding a secas, para que se lea como pertenencia y no como un item mas corrido. */ .menu-head{ margin:12px 4px 4px; padding:12px 9px 0; border-top:1px solid var(--line); font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .menu-sub{ margin-left:12px; padding-left:6px; border-left:1px solid var(--line); } /* --- boton de sonido: apaga y enciende el click del hover --- */ .nav-sound{ display:inline-grid; place-items:center; width:34px; height:34px; margin-left:6px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; position:relative; z-index:1; transition:color .18s var(--ease), border-color .18s var(--ease); } .nav-sound:hover{ color:var(--txt); border-color:var(--line-2); } .nav-sound[aria-pressed="true"]{ color:var(--green); border-color:rgba(34,197,94,.4); } .nav-sound svg{ width:16px; height:16px; display:block; } .nav-sound[aria-pressed="false"] .on{ display:none; } .nav-sound[aria-pressed="true"] .off{ display:none; } .nav-sound:focus-visible{ outline:2px solid var(--green); outline-offset:3px; } /* mobile toggle (CSS only) */ .nav-cb{ display:none; } /* 22 px de trazo + 11 de relleno a cada lado = 44 x 44, el minimo tactil de Apple. El margen negativo lo devuelve a ras del borde del contenedor. */ .nav-burger{ display:none; cursor:pointer; padding:11px; margin-right:-11px; width:44px; height:44px; box-sizing:content-box; align-content:center; } .nav-burger span{ display:block; width:22px; height:2px; background:var(--txt); border-radius:2px; transition:transform .2s var(--ease), opacity .2s; } .nav-burger span + span{ margin-top:5px; } /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative; isolation:isolate; overflow:hidden; } .hero-media{ display:none; } /* la pinta el telon fijo de body::before */ .hero-media img{ width:100%; height:100%; object-fit:cover; } /* eLila: el iPad esta en la franja alta de la foto — al recortar en horizontal el encuadre centrado se lo comia, asi que la imagen se corre hacia abajo. */ .hero--efb .hero-media img{ object-position:50% 10%; } /* El velo del hero terminaba en var(--bg) OPACO al pie, para fundir la foto con la pagina. Con el telon fijo eso taparia la foto justo donde empieza a verse, asi que el tramo final tambien es translucido. */ .hero::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(var(--bg-rgb),.30) 0%, rgba(var(--bg-rgb),.38) 45%, rgba(var(--bg-rgb),.42) 100%), linear-gradient(90deg, rgba(var(--bg-rgb),.52) 0%, rgba(var(--bg-rgb),.20) 55%, rgba(var(--bg-rgb),.34) 100%); } .hero-in{ padding:132px 0 116px; max-width:820px; } .hero h1{ margin-bottom:26px; font-size:clamp(2.2rem, 5vw, 3.5rem); } .hero .lede{ font-size:clamp(1.08rem,1.8vw,1.3rem); } .hero--page .hero-in{ padding:104px 0 88px; } .hero--page h1{ font-size:clamp(2.1rem, 4.6vw, 3.3rem); } .accent{ color:var(--green); } .accent-cyan{ color:var(--cyan); } /* ---------- flat hero (service pages, no photograph) ---------- */ .hero--flat{ background:transparent; border-bottom:1px solid var(--line); } .hero--flat::before{ background: radial-gradient(90% 130% at 12% 0%, rgba(34,197,94,.10), transparent 58%), radial-gradient(70% 120% at 92% 10%, rgba(56,189,248,.07), transparent 60%), linear-gradient(180deg, transparent, rgba(var(--bg-rgb),.413)), /* capa de oscurecido: estos heroes se diseñaron sobre color plano y no tenian velo. Con el telon fijo detras, el texto caia sobre la cabina a 2.9:1 — por debajo del minimo AA. */ linear-gradient(180deg, rgba(var(--bg-rgb),.46), rgba(var(--bg-rgb),.54)); } .hero--flat.hero--amber::before{ background: radial-gradient(90% 130% at 12% 0%, rgba(245,158,11,.11), transparent 58%), radial-gradient(70% 120% at 92% 10%, rgba(167,139,250,.07), transparent 60%), linear-gradient(180deg, transparent, rgba(var(--bg-rgb),.413)), linear-gradient(180deg, rgba(var(--bg-rgb),.46), rgba(var(--bg-rgb),.54)); } .hero--flat .hero-in{ padding:92px 0 80px; } /* ========================================================================== MODOS DE VIENTO (Volatus) — tres grabaciones lado a lado El marco reutiliza el lenguaje de .row-media: borde, radio y lupa. La altura se fija por proporcion para que las tres queden alineadas aunque una grabacion tenga otro encuadre. ========================================================================== */ .wind-grid{ margin-top:44px; } .wind-mode{ margin:0; } .wind-mode-media{ border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--panel); aspect-ratio:16/10; } .wind-mode-media video{ display:block; width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .65s var(--ease); will-change:transform; backface-visibility:hidden; } @media (hover:hover){ .wind-mode-media:hover video{ transform:scale(1.04); } } .wind-mode figcaption{ margin-top:14px; color:var(--txt-2); font-size:.92rem; line-height:1.6; } .wind-mode figcaption b{ display:block; color:var(--txt); font-weight:650; margin-bottom:3px; } /* filete técnico bajo el título de las páginas de servicio */ .rule{ height:1px; width:120px; margin:26px 0 0; background:linear-gradient(90deg, var(--green), transparent); } .rule--amber{ background:linear-gradient(90deg, var(--amber), transparent); } /* ---------- product group headings (home) ---------- */ .group-head{ display:flex; align-items:center; gap:16px; margin:0 0 22px; } .grid + .group-head{ margin-top:52px; } .group-head h3{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2); white-space:nowrap; } .group-head .group-line{ flex:1; height:1px; background:var(--line); } /* estado en la etiqueta de la tarjeta: en desarrollo / por salir */ .pcard-tag--soon{ border-color:rgba(245,158,11,.45); color:var(--amber); } /* ========================================================================== LIGHTBOX — clic en una captura para verla grande El markup lo crea js/site.js; sin JS las imagenes siguen siendo imagenes. ========================================================================== */ .row-media img, .row-media video{ cursor:zoom-in; } .lb{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(16px, 4vw, 48px); /* el recorte de pantalla se suma al padding, para que la X no quede bajo el notch cuando el telefono esta en horizontal */ padding-left:max(clamp(16px,4vw,48px), env(safe-area-inset-left)); padding-right:max(clamp(16px,4vw,48px), env(safe-area-inset-right)); background:rgba(var(--bg-rgb),.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .22s var(--ease); /* el scroll del visor no arrastra la pagina de detras */ overscroll-behavior:contain; } .lb[hidden]{ display:none; } .lb.is-open{ opacity:1; } .lb-fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:14px; } .lb-fig img, .lb-fig video{ display:block; margin:0 auto; /* dvh y no vh: en Safari de iOS, 100vh cuenta la altura CON la barra de direcciones retraida, asi que la imagen sobresalia por abajo y los botones quedaban fuera de pantalla. dvh mide el viewport que de verdad se ve. */ max-width:100%; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); width:auto; height:auto; border-radius:var(--r); border:1px solid var(--line-2); background:var(--panel); box-shadow:0 30px 90px rgba(0,0,0,.6); transform:scale(.97); transition:transform .22s var(--ease); } .lb.is-open .lb-fig img, .lb.is-open .lb-fig video{ transform:scale(1); } .lb-fig figcaption{ color:var(--txt-2); font-size:.92rem; text-align:center; max-width:80ch; margin-inline:auto; } .lb-btn{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer; background:rgba(var(--panel-rgb),.85); border:1px solid var(--line-2); color:var(--txt); font-size:22px; line-height:1; transition:background .18s var(--ease), border-color .18s var(--ease); } .lb-btn:hover{ background:var(--panel-2); border-color:var(--green); } .lb-btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; } .lb-close{ top:18px; right:18px; } .lb-prev{ left:18px; top:50%; transform:translateY(-50%); } .lb-next{ right:18px; top:50%; transform:translateY(-50%); } .lb-count{ position:absolute; top:24px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); } body.lb-open{ overflow:hidden; } @media (max-width:640px){ /* 44 px es el minimo tactil de Apple; a 40 la flecha se fallaba a menudo */ .lb-btn{ width:44px; height:44px; font-size:19px; } .lb-close{ top:12px; right:12px; } .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-fig img, .lb-fig video{ max-height:calc(100vh - 170px); max-height:calc(100dvh - 170px); } } @media (prefers-reduced-motion:reduce){ .lb, .lb-fig img{ transition:none; } .lb-fig img{ transform:none; } .pcard-zoom{ transition:none; transform:none; } } /* ---------- capability strip ---------- */ .strip{ border-block:1px solid var(--line); background:rgba(255,255,255,.02); padding:20px 0; } .strip-in{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 30px; justify-content:center; } .strip span{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } /* nombres que se escriben con minuscula inicial (eQRH, eLila): el strip va en mayusculas, asi que estos se excluyen para no leerse "EQRH". */ .strip span.as-written{ text-transform:none; } .strip span::before{ content:"◆ "; color:var(--green); opacity:.6; } /* ========================================================================== CARDS / GRIDS ========================================================================== */ .grid{ display:grid; gap:22px; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:30px; transition:border-color .2s var(--ease), transform .2s var(--ease), background .2s; } .card h3{ margin-bottom:12px; } .card p{ color:var(--txt-2); font-size:.97rem; } .card--link{ text-decoration:none; display:block; } @media (hover:hover){ .card--link:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--panel-2); } } .card--link:active{ border-color:var(--line-2); background:var(--panel-2); } .card-num{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--green); margin-bottom:16px; display:block; } /* product card with image */ .pcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease); } @media (hover:hover){ .pcard:hover{ border-color:var(--line-2); transform:translateY(-3px); } } .pcard:active{ border-color:var(--line-2); } .pcard-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); } .pcard-img img{ width:100%; height:100%; object-fit:cover; } .pcard-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--bg-rgb),.113), rgba(var(--panel-rgb),.675)); } .pcard-tag{ position:absolute; left:16px; top:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border-radius:5px; background:rgba(var(--bg-rgb),.75); border:1px solid var(--line-2); color:var(--txt-2); } .pcard-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; } .pcard-body h3{ font-size:1.3rem; margin-bottom:10px; } /* capturas de app en horizontal (modulos eLila): 4/3 casi sin recorte */ .pcard-img--shot{ aspect-ratio:4/3; background:var(--bg-2); } @media (min-width:1001px){ .pcard--solo{ grid-column:2; } } .pcard-body p{ color:var(--txt-2); font-size:.96rem; flex:1; } .pcard-body .arrow{ margin-top:20px; } /* lupa de la tarjeta: abre el lightbox sin disparar el enlace que la envuelve. Aparece al pasar el mouse por la tarjeta, y siempre en pantallas tactiles (donde no hay hover) y al recibir foco de teclado. */ .pcard-zoom{ position:absolute; right:14px; bottom:14px; z-index:2; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; cursor:zoom-in; background:rgba(var(--bg-rgb),.72); border:1px solid var(--line-2); color:var(--txt-2); opacity:0; transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .pcard-zoom svg{ width:17px; height:17px; display:block; } .pcard:hover .pcard-zoom, .pcard:focus-within .pcard-zoom, .pcard-zoom:focus-visible{ opacity:1; transform:none; } .pcard-zoom:hover{ background:var(--panel-2); border-color:var(--green); color:var(--txt); } .pcard-zoom:focus-visible{ outline:2px solid var(--green); outline-offset:3px; } @media (hover:none){ .pcard-zoom{ opacity:1; transform:none; } } /* ========================================================================== HOVER MAGNIFICATION Un contenedor con overflow:hidden + un dentro. Al hacer hover, la imagen escala dentro del marco recortado — el marco no se mueve. .pcard-img y .row-media lo traen puesto; para cualquier otro sitio, basta con poner class="zoom" en el contenedor (que ya recorte). Se desactiva solo con prefers-reduced-motion (regla global al final). ========================================================================== */ .zoom{ overflow:hidden; } .pcard-img img, .row-media img, .row-media video, .zoom img{ transition:transform .65s var(--ease), filter .65s var(--ease); will-change:transform; backface-visibility:hidden; /* evita el temblor de subpíxel al escalar */ } /* La ampliacion es un gesto de puntero. En tactil no hay a donde "entrar", y dejaba la captura ampliada y recortada despues de tocarla. */ @media (hover:hover){ .pcard:hover .pcard-img img, .row-media:hover img, .row-media:hover video, .zoom:hover img{ transform:scale(1.055); filter:brightness(1.05) saturate(1.04); } } /* ========================================================================== FEATURE ROWS (alternating image / text) ========================================================================== */ .row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .row + .row{ margin-top:104px; } .row--flip .row-media{ order:2; } .row-media{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--panel); } /* width/height van en el atributo de cada y