/* ───────────────────────────────────────────────────────────────────────────── Nav móvil de la HOME (Capa responsive). El home-packed.html no trae hamburguesa: .ci-navlinks se oculta a ≤920px sin reemplazo. Este override añade un burger + un drawer lateral que clona la nav existente (crawleable, ya en el DOM) + Accedi + idioma. Se carga DESPUÉS de home.css (gana a igualdad de especificidad). Tokens reales de la home: ink #0F172A · oro #C69A24 · rojo logo #FA1E00. Breakpoint 920px = mismo corte que .ci-navlinks{display:none}. ───────────────────────────────────────────────────────────────────────────── */ /* Burger fijo, montado en (ver mobile-nav.js). z-index 150: sobre el header (100), bajo el scrim (1990) para que el drawer abierto lo tape. */ #ci-burger { display: none; position: fixed; top: 17px; right: 18px; z-index: 150; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border: 1px solid #E5E7EB; border-radius: 11px; color: #0F172A; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,.07); transition: background .18s ease; } #ci-burger svg { width: 22px; height: 22px; display: block; } #ci-burger:hover { background: #fff; } @media (max-width: 920px) { #ci-burger { display: inline-flex; } /* Colapsar el cluster derecho del header (city/lang/fullscreen/Accedi): pasan al drawer. En el DOM siguen (los scripts de idioma los usan), solo ocultos. */ #ci-nav > div > :last-child { display: none !important; } } /* Scrim + drawer (siempre en el DOM, activados por .open). */ #ci-drawer-scrim { position: fixed; inset: 0; z-index: 99990; background: rgba(15,23,42,.42); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } #ci-drawer-scrim.open { opacity: 1; visibility: visible; } #ci-mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99991; width: min(87vw, 344px); background: #fff; transform: translateX(101%); transition: transform .34s cubic-bezier(.16,1,.3,1); box-shadow: -24px 0 64px rgba(15,23,42,.20); display: flex; flex-direction: column; padding: 16px 16px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: 'Inter', system-ui, sans-serif; } #ci-mobile-drawer.open { transform: translateX(0); } body.ci-nav-locked { overflow: hidden; } .ci-drawer-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px; } .ci-drawer-close { width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; color: #0F172A; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ci-drawer-close:hover { background: #FAFAFA; } .ci-drawer-close svg { width: 20px; height: 20px; } /* La nav clonada (.ci-navlinks) se aplana dentro del drawer. */ #ci-mobile-drawer .ci-navlinks { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } #ci-mobile-drawer .ci-menu { position: static; display: block; width: 100%; } #ci-mobile-drawer .ci-menu-btn { display: block; width: 100%; text-align: left; padding: 13px 10px; font-family: 'Space Grotesk','Inter',sans-serif; font-size: 16px; font-weight: 600; color: #0F172A; text-decoration: none; border-radius: 10px; background: transparent; border: none; cursor: pointer; } #ci-mobile-drawer .ci-menu-btn:hover { background: #FAFAFA; } /* Los dropdowns (.ci-dd) pasan a ACORDEÓN: cerrados de fábrica, uno abierto a la vez (mobile-nav.js pone .is-open). Antes se volcaban los cuatro a la vez — Home(16) + Soluzioni(3) + Servizi(7) + Risorse(3) = 29 destinos y un drawer de 1.771px, o sea más de dos pantallas de scroll para llegar a "Accedi". Cerrados son 6 títulos y el pie: cabe en una pantalla y se lee de un vistazo. */ #ci-mobile-drawer .ci-dd { position: static !important; display: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; background: transparent !important; min-width: 0 !important; padding: 0 0 6px 12px !important; margin: 0 !important; } #ci-mobile-drawer .ci-menu.is-open > .ci-dd { display: block !important; animation: ciDrawerDd .26s ease; } @keyframes ciDrawerDd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* El chevron del título indica el estado (viene del export dentro del ). */ #ci-mobile-drawer .ci-menu-btn svg { transition: transform .25s ease; } #ci-mobile-drawer .ci-menu.is-open > .ci-menu-btn svg { transform: rotate(180deg); } #ci-mobile-drawer .ci-menu.is-open > .ci-menu-btn { background: #FAFAFA; } #ci-mobile-drawer .ci-dd a { display: flex; align-items: baseline; gap: 8px; padding: 10px; border-radius: 8px; color: #334155; text-decoration: none; font-size: 14.5px; font-weight: 500; } #ci-mobile-drawer .ci-dd a:hover { background: #FAFAFA; color: #0F172A; } #ci-mobile-drawer .ci-dd a span { color: #C69A24; font-family: 'JetBrains Mono',monospace; font-size: 11px; font-weight: 600; flex: none; } /* Pie del drawer: Accedi (pill) + idiomas. */ .ci-drawer-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid #EEF0F2; display: flex; flex-direction: column; gap: 14px; } .ci-drawer-login { display: block; text-align: center; background: #0F172A; color: #fff; font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; font-size: 15px; padding: 14px; border-radius: 11px; text-decoration: none; box-shadow: 0 6px 18px rgba(15,23,42,.16); } .ci-drawer-login:active { background: #1A2434; } .ci-drawer-langs { display: flex; flex-wrap: wrap; gap: 6px; } .ci-drawer-langs button, .ci-drawer-langs a { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 600; color: #64748B; background: #fff; text-decoration: none; padding: 7px 12px; border: 1px solid #E5E7EB; border-radius: 8px; cursor: pointer; } .ci-drawer-langs .is-active { color: #0F172A; border-color: #C69A24; background: #FAFAF5; } @media (prefers-reduced-motion: reduce) { #ci-mobile-drawer, #ci-drawer-scrim { transition: none; } } /* ─── Hero responsive (≤920px): elimina el vacío vertical, mejora contraste ─── */ @media (max-width: 920px) { /* El export fuerza min-height:100vh + columnas estiradas a 836px con ~400px de contenido → hueco enorme. Altura por contenido. */ header#top { min-height: 0 !important; height: auto !important; } #top .ci-grid2 { height: auto !important; align-items: start !important; row-gap: 28px !important; } #top .ci-grid2 > div { height: auto !important; min-height: 0 !important; } /* Contraste: atenuar el patrón de puntos que pisa el subtítulo. */ .ci-dotgrid { opacity: .3 !important; } #top .ci-hero-visual { opacity: .5 !important; } /* H1: clamp intermedio (601–920 mantenía el tamaño desktop y desbordaba). */ #top h1 { font-size: clamp(34px, 6.6vw, 54px) !important; line-height: 1.05 !important; } /* Sección 10 (#ask "Chiedi ai tuoi agenti"): fuera los conectores punteados decorativos que en móvil cruzan hacia arriba y ensucian (no aportan nada). */ #ask .ci-ask-grid > svg { display: none !important; } /* Cerebro (iframe memoria.html) en móvil: el contenedor NO debe tener márgenes laterales (recortaban el grafo a la derecha) → sección a ancho completo + iframe full-width, y un pelín más bajo. Sin scale (dejaba huecos). El chat ya se oculta desde el propio memoria.html. */ /* Cerebro en móvil: el encuadre lo resuelve la CÁMARA 3D dentro de memoria.html (script ci-mobile-fill, perilla MOBILE_FILL). NO aplicar zoom/scale al iframe desde fuera: duplicaría la transformación y/o cortaría los textos internos. El módulo por defecto mide min(72vh,660px) ≈ una torre en el teléfono → compactarlo a 500px: proporción más cuadrada, el cerebro sangra menos por los lados y el HUD respira (el canvas re-encuadra solo vía layout()). */ iframe[src*="memoria"] { height: 500px !important; } /* ── Mazo de cartas "Come si mantiene viva" (#memoria .ci-3col, 9 tarjetas) ── En móvil el grid 3col se vuelve un MAZO apilado: cada carta colapsa a icono + título (contenido oculto) y se solapa con la anterior como hojas. Tap → se abre encima de las demás (acordeón de una sola; mobile-nav.js). */ #memoria .ci-3col { display: block !important; padding-top: 4px; } #memoria .ci-3col > div { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-top: -12px; cursor: pointer; box-shadow: 0 -8px 20px rgba(15,23,42,.05), 0 10px 26px rgba(15,23,42,.09); transition: box-shadow .25s ease; } #memoria .ci-3col > div:first-child { margin-top: 0; } /* icono compacto, en línea con el título */ #memoria .ci-3col > div > div:nth-child(1) { width: 34px !important; height: 34px !important; margin-bottom: 0 !important; flex: none; } #memoria .ci-3col > div > div:nth-child(1) svg { width: 17px; height: 17px; } /* título en la misma fila + chevron de affordance */ #memoria .ci-3col > div > div:nth-child(2) { margin-bottom: 0 !important; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; } #memoria .ci-3col > div > div:nth-child(2)::after { content: ""; width: 8px; height: 8px; flex: none; margin-left: 10px; border-right: 2px solid #94A3B8; border-bottom: 2px solid #94A3B8; transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; } /* contenido colapsado (solo el título queda a la vista). OJO: display, NO max-height+transition — el runtime de la página deja transiciones atascadas que pisan cualquier valor (hasta !important). display aplica instantáneo. */ #memoria .ci-3col > div > div:nth-child(3) { flex-basis: 100%; display: none; } /* Estado "carta abierta": lo genera mobile-nav.js como