/* ========================================================================== CABECERA Y MENU COMPARTIDOS — GENERADO, NO EDITAR A MANO -------------------------------------------------------------------------- Lo produce tools/extract-header-css.js a partir de style.css y enhancements.css. Contiene SOLO las reglas que forman la cabecera y el menu de la portada, mas las variables que necesitan. Ninguna regla toca el cuerpo de la pagina, asi que no puede alterar el diseno de las fichas de formato, que es lo que si pasaba al cargar style.css y enhancements.css enteras (la pagina crecia 261px). Si se cambia la cabecera de la portada, hay que regenerarlo: node tools/extract-header-css.js ========================================================================== */ /* ---- Variables que necesita el componente ---- */ :root { --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #8695ad; --accent-cyan: #06b6d4; --accent-cyan-rgb: 6, 182, 212; --accent-cyan-hero: #5ee7ff; --accent-cyan-hero-rgb: 94, 231, 255; --accent-cyan-chat: #00f0ff; --accent-cyan-chat-rgb: 0, 240, 255; --accent-cyan-glow: rgba(var(--accent-cyan-rgb), 0.3); --accent-violet: #8b5cf6; --accent-gradient: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%); --surface-1: rgba(255, 255, 255, 0.02); --surface-2: rgba(255, 255, 255, 0.03); --surface-3: rgba(255, 255, 255, 0.05); --surface-4: rgba(255, 255, 255, 0.07); --accent-tint-2: rgba(var(--accent-cyan-rgb), 0.08); --depth-2-rgb: 7, 12, 24; --depth-3-rgb: 9, 17, 34; --border-glass: 1px solid rgba(255, 255, 255, 0.08); --bg-glass-heavy: rgba(10, 15, 29, 0.95); --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --fs-100: 0.62rem; --fs-300: 0.72rem; --fs-400: 0.78rem; --fs-500: 0.84rem; --fs-600: 0.92rem; --fs-700: 1rem; --fs-800: 1.1rem; --fs-900: 1.25rem; --fs-1000: 1.5rem; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s ease; } :root { --accent-amber: #f59e0b; } :root { --enhance-accent: var(--accent-cyan-hero); --enhance-accent-2: #8f7cff; --enhance-gradient-accent: linear-gradient(135deg, var(--enhance-accent) 0%, var(--enhance-accent-2) 100%); --enhance-transition: 220ms ease; --enhance-glass-blur: 14px; } /* ---- Fotogramas de las animaciones del menu ---- */ @keyframes slideInDrawer { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes mobileMenuFadeIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } } /* ---- Cabecera y menu, copiados de la portada ---- */ .portfolio-media:focus-visible, .filter-btn:focus-visible, .btn:focus-visible, .lang-btn:focus-visible, .burger:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 4px; } @media (max-width: 992px) { .nav-links.mobile-open { overflow-y: auto; } } html, body, p, span, h1, h2, h3, h4, h5, h6, li, label, strong, em, div, section, article, header, footer, time, figcaption, blockquote { cursor: default; } a, button, select, input[type="submit"], input[type="button"], [role="button"], .social-icon, .gear-hotspot, .timeline-nav-btn, .filter-btn, .lang-btn, .social-icon svg { cursor: pointer; } header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(var(--depth-2-rgb), 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border-glass); transition: var(--transition-smooth); } header.scrolled { background: var(--bg-glass-heavy); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .nav-container { max-width: 1360px; /* Incrementado para dar más espacio horizontal en PC */ margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-900); background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; } .logo span { font-size: var(--fs-500); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); } .nav-links { display: flex; gap: 24px; /* Reducido de 32px a 24px para que el menú respire más */ list-style: none; align-items: center; } .nav-links a { font-size: var(--fs-600); /* Reducido de 0.95rem a 0.9rem para estilizar */ font-weight: 500; color: var(--text-secondary); position: relative; padding: 4px 0; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-gradient); transition: var(--transition-fast); } .nav-links a:hover { color: var(--text-primary); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--text-primary); } .contact-btn { background: var(--accent-gradient); color: var(--text-primary) !important; padding: 8px 18px !important; border-radius: 30px; font-weight: 600; } .contact-btn::after { display: none !important; } .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px var(--accent-cyan-glow); } .burger { display: none; cursor: pointer; background: none; border: none; color: var(--text-primary); font-size: var(--fs-1000); } @media (min-width: 1151px) and (max-width: 1280px) { .nav-container { padding: 16px 20px; } } @media (min-width: 1151px) and (max-width: 1280px) { .logo { font-size: var(--fs-800); gap: 4px; } } @media (min-width: 1151px) and (max-width: 1280px) { .logo span { font-size: var(--fs-300); } } @media (min-width: 1151px) and (max-width: 1280px) { .nav-links { gap: 14px; } } @media (min-width: 1151px) and (max-width: 1280px) { .nav-links a { font-size: var(--fs-500); } } @media (min-width: 1151px) and (max-width: 1280px) { .contact-btn { padding: 6px 12px !important; font-size: var(--fs-500); } } @media (max-width: 1150px) { .nav-container { padding: 12px 20px; /* Reducido para móvil, dando altura total de 64px */ } } @media (max-width: 1150px) { .nav-links { display: none; /* Handled dynamically by JS */ } } @media (max-width: 1150px) { .burger { display: block; } } @media (max-width: 1150px) { .nav-links.mobile-open { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; width: 100%; height: calc(100vh - 64px); background: var(--bg-glass-heavy); padding: 40px 24px; gap: 30px; border-top: var(--border-glass); z-index: 99; align-items: flex-start; } } .lang-switcher { display: flex; align-items: center; gap: 6px; font-size: var(--fs-500); font-weight: 600; color: var(--text-muted); border-left: 1px solid rgba(255, 255, 255, 0.15); padding-left: 20px; margin-left: -10px; /* Slight adjustment for list spacing */ } .lang-btn { background: none; border: none; color: var(--text-muted); /* Tamano explicito: sin el, estos botones heredaban 10,88px (ilegible) y, tras el reset de fuente de los controles, habrian saltado a 16px, que no cabe en su caja de 26px. 13px es legible y encaja. */ font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 4px; transition: var(--transition-fast); font-family: inherit; } .lang-btn:hover { color: var(--text-primary); } .lang-btn.active { color: var(--accent-cyan); text-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.4); } @media (max-width: 1150px) { .lang-switcher { border-left: none; padding-left: 0; margin-left: 0; margin-top: 10px; margin-bottom: 10px; gap: 12px; font-size: var(--fs-700); } } body.nav-open { overflow: hidden; } @media (max-width: 1150px) { .burger { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: var(--surface-2); transition: var(--transition-fast); } } @media (max-width: 1150px) { .burger:hover, .burger[aria-expanded="true"] { color: var(--text-primary); border-color: rgba(var(--accent-cyan-rgb), 0.42); background: var(--accent-tint-2); box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.12); } } @media (max-width: 1150px) { .nav-links.mobile-open { top: 66px; height: calc(100vh - 66px); padding: 18px; gap: 8px; align-items: stretch; background: linear-gradient(180deg, rgba(10, 15, 29, 0.98), rgba(7, 12, 24, 0.96)), radial-gradient(circle at 20% 0%, rgba(var(--accent-cyan-rgb), 0.14), transparent 34%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); } } @media (max-width: 1150px) { .nav-links.mobile-open li { width: 100%; } } @media (max-width: 1150px) { .nav-links.mobile-open a { width: 100%; min-height: 46px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; background: var(--surface-2); color: var(--text-primary); font-size: var(--fs-600); } } @media (max-width: 1150px) { .nav-links.mobile-open a::after { display: none; } } @media (max-width: 1150px) { .nav-links.mobile-open a.active { border-color: rgba(var(--accent-cyan-rgb), 0.42); background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.14), rgba(139, 92, 246, 0.1)); } } @media (max-width: 1150px) { .nav-links.mobile-open .contact-btn { justify-content: center; margin-top: 4px; border: none; border-radius: 10px; padding: 13px 16px !important; } } @media (max-width: 1150px) { .nav-links.mobile-open > li:last-child { position: sticky; bottom: 0; z-index: 2; margin-top: 6px; padding-top: 10px; padding-bottom: 6px; background: linear-gradient(180deg, rgba(8, 12, 27, 0.86), rgba(5, 8, 18, 0.99) 42%); box-shadow: 0 -12px 24px rgba(5, 8, 18, 0.5); } } @media (max-width: 1150px) { .nav-links.mobile-open .lang-switcher { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 48px; margin: 4px 0; padding: 2px 12px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; background: var(--surface-1); } } @media (max-width: 1150px) { .nav-links.mobile-open .lang-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; font-size: var(--fs-800); } } #mainHeader { background: linear-gradient(180deg, rgba(10, 15, 29, 0.86), rgba(10, 15, 29, 0.62)); border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--enhance-glass-blur)) saturate(140%); } #mainHeader.scrolled { background: linear-gradient(180deg, rgba(7, 12, 24, 0.96), rgba(7, 12, 24, 0.9)); border-bottom-color: rgba(var(--accent-cyan-hero-rgb), 0.16); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26); } #mainHeader .nav-container { width: 100%; max-width: 100%; min-height: 72px; padding: 14px 24px; gap: clamp(14px, 2vw, 28px); } #mainHeader .logo { position: relative; min-width: max-content; letter-spacing: 0; /* El rabo de la "g" de Rigall salia cortado. El motivo no es que algo lo recorte: es que el logo pinta un degradado con background-clip: text, y ese degradado solo existe dentro de la caja del elemento. Con line-height: 1 la caja media 17,4px y los glifos 22,4, asi que lo que sobresalia se quedaba sin color y parecia cortado. Con 1.2 seguian sobrando 0,8px; el relleno vertical termina de darle sitio. */ line-height: 1.2; padding: 2px 0; text-decoration: none; transition: transform var(--enhance-transition), filter var(--enhance-transition); } #mainHeader .nav-container > nav.simple-nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; } @media (max-width: 1150px) { #mainHeader .nav-container > nav.simple-nav { display: none; } } .lang-switch { position: relative; flex-shrink: 0; } #mainHeader li.lang-switcher { padding: 0; border-left: none; margin-left: 0; } @media (min-width: 1151px) { #mainHeader .nav-links > li.lang-switcher { order: 1; } } .lang-switch > summary { display: flex; align-items: center; gap: 5px; /* Un peldano por debajo de los enlaces del menu (--fs-400 contra --fs-600) y con menos relleno: el idioma es un control secundario y no debe competir. Antes iba a --fs-500 con 5px 11px y, sumado a la pildora del
  • , pesaba mas que un enlace del menu. */ padding: 3px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; color: var(--text-secondary); font-size: var(--fs-400); /* Explicito porque este componente vive en paginas con bodys distintos: la portada da line-height 1.6 y las fichas el normal del navegador, y el boton salia 5px mas bajo alli. */ line-height: 1.6; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color var(--enhance-transition), color var(--enhance-transition), background var(--enhance-transition); list-style: none; } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::marker { content: ''; } .lang-switch > summary svg { width: 12px; height: 12px; /* flex-basis incluido, no solo width: hay una regla global de iconos ":where(i[data-lucide], svg.lucide)" con flex: 0 0 20px, y en una fila flex el flex-basis manda sobre width. Solo con width los iconos seguian ocupando 20px aunque la regla del ancho ganara la cascada. */ flex: 0 0 12px; } .lang-switch-chevron svg { width: 10px; height: 10px; flex: 0 0 10px; } .lang-switch > summary:hover, .lang-switch > summary:focus-visible, .lang-switch[open] > summary { color: var(--text-primary); border-color: rgba(var(--accent-cyan-hero-rgb), 0.5); background: rgba(var(--accent-cyan-hero-rgb), 0.08); } .lang-code { display: none; } .lang-switch-chevron { display: inline-flex; transition: transform var(--enhance-transition); } .lang-switch[open] .lang-switch-chevron { transform: rotate(180deg); } .lang-switch-panel { position: absolute; top: calc(100% + 8px); /* Anclado a la derecha: el selector es el ultimo de la barra y hacia la izquierda se saldria de la pantalla. */ right: 0; z-index: 1200; min-width: 160px; padding: 6px; display: grid; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(var(--depth-2-rgb), 0.98); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); } .lang-switch-panel .lang-btn { width: 100%; padding: 9px 12px !important; border-radius: 8px; text-align: left; font-size: var(--fs-500) !important; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; } .lang-switch-panel .lang-btn:not(.active):hover, .lang-switch-panel .lang-btn:not(.active):focus-visible { color: var(--text-primary); background: rgba(var(--accent-cyan-rgb), 0.14); box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.4); } .lang-switch-panel .lang-btn.active, .lang-switch-panel a[aria-current="page"] { cursor: default; } .lang-switch-panel .lang-btn.active, .lang-switch-panel a[aria-current="page"] { color: #04111d; background: var(--accent-cyan); font-weight: 700; } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open > li.lang-switcher { display: flex !important; justify-content: center; align-items: center; width: 100% !important; margin: 16px 0 4px !important; padding: 0 !important; border: none !important; background: none !important; counter-increment: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open > li.lang-switcher::before { content: none !important; display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switch { position: static; width: auto; flex: 0 0 auto; /* Los margenes automaticos centran la pildora dentro del
  • . */ margin-inline: auto; /* Y esto es lo que hacia falta para que centraran: un
    CERRADO no cuenta su contenido al calcular su tamano, asi que la caja media 0 de ancho y el pastillero se salia por la derecha —quedaba justo a partir del centro del menu en vez de centrado sobre el—. */ content-visibility: visible !important; display: flex; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switch > summary { display: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switch-panel { /* El
    esta cerrado y el navegador oculta su contenido con content-visibility, aunque le forcemos un display. Sin esto los tres codigos ocupaban su sitio pero no se pintaban: la caja medía 140x49 y dentro no se leia nada. */ content-visibility: visible !important; position: static; transform: none; display: inline-flex; gap: 4px; min-width: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 50px; background: var(--surface-1); box-shadow: none; backdrop-filter: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switcher .lang-name { display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switcher .lang-code { display: inline !important; } } .lang-switch-panel a { padding: 9px 12px; border-radius: 8px; color: var(--text-secondary); font-size: var(--fs-500); text-decoration: none; white-space: nowrap; } .lang-switch-panel a:not([aria-current="page"]):hover, .lang-switch-panel a:not([aria-current="page"]):focus-visible { color: var(--text-primary); background: rgba(var(--accent-cyan-rgb), 0.14); box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.4); } #mainHeader .logo::after { content: ''; position: absolute; left: 0; right: 12%; bottom: -8px; height: 1px; background: var(--enhance-gradient-accent); opacity: 0; transform: scaleX(0.6); transform-origin: left; transition: opacity var(--enhance-transition), transform var(--enhance-transition); } #mainHeader .logo:hover, #mainHeader .logo:focus-visible { filter: drop-shadow(0 0 14px rgba(var(--accent-cyan-hero-rgb), 0.28)); transform: translateY(-1px); } #mainHeader .logo:hover::after, #mainHeader .logo:focus-visible::after { opacity: 1; transform: scaleX(1); } #mainHeader .nav-links { flex: 1 1 auto; justify-content: flex-end; gap: clamp(10px, 1.65vw, 22px); min-width: 0; } #mainHeader .nav-links a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 2px; color: rgba(226, 232, 240, 0.72); line-height: 1; text-decoration: none; transition: color var(--enhance-transition), transform var(--enhance-transition), background-color var(--enhance-transition), border-color var(--enhance-transition), box-shadow var(--enhance-transition); } #mainHeader .nav-links a::after { bottom: 4px; height: 2px; border-radius: 999px; background: var(--enhance-gradient-accent); } #mainHeader .nav-links a:hover, #mainHeader .nav-links a:focus-visible, #mainHeader .nav-links a.active { color: var(--text-primary); } #mainHeader .nav-links a:hover, #mainHeader .nav-links a:focus-visible { transform: translateY(-1px); } #mainHeader .has-dropdown { position: relative; } #mainHeader .has-dropdown > a::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; vertical-align: middle; transition: transform 0.25s ease; } #mainHeader .has-dropdown:hover > a::after, #mainHeader .has-dropdown:focus-within > a::after { transform: rotate(180deg); } #mainHeader .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 190px; padding: 8px 0; margin: 0; list-style: none; background: rgba(var(--depth-3-rgb), 0.92); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.12); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 20px rgba(var(--accent-cyan-hero-rgb), 0.06); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 1100; } #mainHeader .dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; } #mainHeader .has-dropdown:hover > .dropdown-menu, #mainHeader .has-dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } #mainHeader .dropdown-menu li { margin: 0; padding: 0; } #mainHeader .dropdown-menu a { display: flex !important; align-items: center; gap: 8px; padding: 9px 18px !important; min-height: auto !important; color: rgba(226, 232, 240, 0.75) !important; font-size: var(--fs-500) !important; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; transition: all 0.2s ease; border-left: 2px solid transparent; } #mainHeader .dropdown-menu a::after { display: none !important; } #mainHeader .dropdown-menu a:hover, #mainHeader .dropdown-menu a:focus-visible { color: var(--accent-cyan, var(--accent-cyan-chat)) !important; background: rgba(var(--accent-cyan-hero-rgb), 0.06); border-left-color: var(--accent-cyan, var(--accent-cyan-chat)); padding-left: 22px !important; transform: none; } #mainHeader .contact-btn { min-height: 42px; padding: 10px 18px !important; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.95), rgba(143, 124, 255, 0.96)); color: #fff !important; box-shadow: 0 14px 34px rgba(var(--accent-cyan-hero-rgb), 0.18); } #mainHeader .contact-btn:hover, #mainHeader .contact-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 0 28px rgba(var(--accent-cyan-rgb), 0.5), 0 8px 30px rgba(var(--accent-cyan-rgb), 0.32); } #mainHeader .lang-switcher { min-width: max-content; padding: 4px 2px; border-radius: 999px; } #mainHeader .lang-btn { border-radius: 999px; transition: color var(--enhance-transition), background-color var(--enhance-transition), box-shadow var(--enhance-transition); } #mainHeader .lang-btn.active { color: var(--enhance-accent); text-shadow: 0 0 16px rgba(var(--accent-cyan-hero-rgb), 0.26); } #mainHeader .burger { position: relative; flex: 0 0 auto; min-width: 44px; min-height: 44px; border-color: rgba(255, 255, 255, 0.12); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: none; align-items: center; justify-content: center; } #mainHeader .burger svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, color 0.3s ease; pointer-events: none; } #mainHeader .burger .close-icon { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-90deg) !important; } #mainHeader .burger .burger-icon { opacity: 1; } #mainHeader .burger:hover, #mainHeader .burger:focus-visible { border-color: rgba(var(--accent-cyan-hero-rgb), 0.42); background: rgba(var(--accent-cyan-hero-rgb), 0.1); box-shadow: 0 0 0 4px rgba(var(--accent-cyan-hero-rgb), 0.1); } #mainHeader .burger[aria-expanded="true"] { border-radius: 50% !important; border-color: rgba(var(--accent-cyan-chat-rgb), 0.35) !important; background: rgba(var(--accent-cyan-chat-rgb), 0.08) !important; box-shadow: 0 0 16px rgba(var(--accent-cyan-chat-rgb), 0.15) !important; } #mainHeader .burger[aria-expanded="true"] .burger-icon { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(90deg) !important; } #mainHeader .burger[aria-expanded="true"] .close-icon { opacity: 1; transform: translate(-50%, -50%) scale(0.72) rotate(0deg) !important; color: var(--accent-cyan, var(--accent-cyan-chat)) !important; } @media (min-width: 1151px) { #mainHeader .nav-container { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(16px, 2vw, 30px); width: 100% !important; max-width: 100% !important; padding-left: clamp(24px, 4vw, 64px) !important; padding-right: clamp(24px, 4vw, 64px) !important; } } @media (min-width: 1151px) { #mainHeader .nav-links { width: 100%; justify-content: flex-end; gap: clamp(8px, 1.05vw, 16px); } } @media (min-width: 1151px) { #mainHeader .nav-links a { font-size: clamp(0.875rem, 1.02vw, 0.9375rem); } } @media (min-width: 1151px) { #mainHeader .contact-btn { padding-inline: 14px !important; } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .nav-container { column-gap: 18px; } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .logo { font-size: clamp(1rem, 1.5vw, 1.12rem); } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .nav-links { width: 100%; justify-content: flex-end; gap: clamp(7px, 0.8vw, 11px); } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .nav-links a { font-size: clamp(0.8125rem, 1.02vw, 0.875rem); } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .contact-btn { padding-inline: 11px !important; } } @media (min-width: 1151px) and (max-width: 1320px) { #mainHeader .lang-switcher { padding-inline: 0; } } @media (max-width: 1150px) { #mainHeader { max-width: 100%; width: 100%; } } @media (max-width: 1150px) { #mainHeader .nav-container { min-height: 66px; padding: 10px 16px; max-width: 100%; width: 100%; display: flex; justify-content: space-between; align-items: center; } } @media (max-width: 1150px) { #mainHeader .logo { position: relative; z-index: 1001 !important; } } @media (max-width: 1150px) { #mainHeader .burger { position: relative; z-index: 1001 !important; display: flex !important; } } @media (max-width: 1150px) { #mainHeader .logo { font-size: clamp(1.05rem, 4.6vw, 1.22rem); max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open { position: fixed; z-index: 1000 !important; /* El panel EMPIEZA DEBAJO de la cabecera, no en 0. Antes arrancaba arriba del todo con 100px de relleno para "dejar sitio" al logo, pero el relleno es parte de la zona de desplazamiento: al hacer scroll, los enlaces se veian a traves de el, pasando por encima y por debajo del nombre. Y no se puede tapar con la cabecera porque este panel es HIJO suyo: el fondo de un elemento nunca pinta por encima de sus hijos, por mucho z-index que se le ponga (ese fue el primer intento, fallido). Empezando en 67px —el alto real de la cabecera en movil— el recorte del overflow corta el contenido justo en el borde del logo, que es lo que se pedia. */ top: 67px !important; right: 0; left: auto !important; width: 290px; /* Los !important no son adorno: el bloque generico "#mainHeader .nav-links" de mas abajo (menu elastico) fija top: 0 y height: 100vh con !important, y sin igualar armas esta regla perdia aunque sea mas especifica. Fue el segundo intento fallido de este arreglo. */ height: calc(100vh - 67px) !important; max-height: calc(100vh - 67px) !important; overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 5px !important; border: none; border-radius: 0; border-left: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.16) !important; background: linear-gradient(180deg, rgba(8, 12, 27, 0.98) 0%, rgba(5, 8, 18, 0.99) 100%) !important; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); counter-reset: menu-counter; /* Entrada del panel deslizable */ animation: slideInDrawer 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li { width: 100%; display: flex; justify-content: stretch; opacity: 0; animation: mobileMenuFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(1) { animation-delay: 0.04s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(2) { animation-delay: 0.08s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(3) { animation-delay: 0.12s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(4) { animation-delay: 0.16s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(5) { animation-delay: 0.20s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(6) { animation-delay: 0.24s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(7) { animation-delay: 0.28s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(8) { animation-delay: 0.32s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(9) { animation-delay: 0.36s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open a { width: 100%; min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 10px 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; color: rgba(226, 232, 240, 0.8) !important; font-size: var(--fs-500) !important; font-weight: 500 !important; letter-spacing: 0.04em; text-transform: uppercase; text-align: left !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; border-left: 3px solid transparent !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li { counter-increment: menu-counter; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open a::before { content: counter(menu-counter, decimal-leading-zero); font-family: var(--font-mono, monospace); font-size: var(--fs-300); font-weight: 700; color: rgba(var(--accent-cyan-chat-rgb), 0.45); margin-right: 12px; transition: color 0.3s ease; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open a::after { display: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open a:not(.contact-btn):hover, #mainHeader .nav-links.mobile-open a:not(.contact-btn):focus-visible, #mainHeader .nav-links.mobile-open a:not(.contact-btn).active { background: rgba(var(--accent-cyan-chat-rgb), 0.04) !important; color: var(--accent-cyan, var(--accent-cyan-chat)) !important; padding-left: 18px !important; border-left: 3px solid var(--accent-cyan, var(--accent-cyan-chat)) !important; border-radius: 0 8px 8px 0 !important; text-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.3); } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open a:not(.contact-btn):hover::before, #mainHeader .nav-links.mobile-open a:not(.contact-btn).active::before { color: var(--accent-cyan, var(--accent-cyan-chat)) !important; text-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.5); } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .contact-btn { width: 100% !important; min-height: 42px !important; margin-top: 12px; padding: 10px 16px !important; border: 0 !important; border-radius: 8px !important; background: var(--enhance-gradient-accent) !important; box-shadow: 0 8px 20px rgba(var(--accent-cyan-hero-rgb), 0.18) !important; color: #fff !important; font-size: var(--fs-500) !important; font-weight: 600 !important; letter-spacing: 0.05em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease !important; counter-increment: none; border-left: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .contact-btn::before { display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .contact-btn:hover, #mainHeader .nav-links.mobile-open .contact-btn:focus-visible { transform: translateY(-2px); /* SOLO resplandor exterior. Se quito el halo de 3px pegado al borde que habia aqui: al ir tan ceñido se leia como si cambiara el color del propio boton. El degradado del fondo no se toca en ningun estado. */ box-shadow: 0 0 28px rgba(var(--accent-cyan-rgb), 0.5), 0 8px 30px rgba(var(--accent-cyan-rgb), 0.32) !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .contact-btn { justify-content: center !important; text-align: center !important; } } @media (max-width: 1150px) { body.menu-open #mainHeader { background: #080c1b; backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switcher { display: inline-flex; justify-content: center; align-items: center; min-height: auto; margin: 16px 0 4px !important; padding: 4px !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 50px !important; background: var(--surface-1) !important; gap: 4px; width: auto !important; margin-inline: auto !important; counter-increment: none; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-switcher span { display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-btn { min-width: 44px !important; min-height: 44px !important; padding: 6px 12px !important; font-size: var(--fs-400) !important; border-radius: 50px !important; background: transparent !important; border: none !important; color: #b9c4d2 !important; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .lang-btn.active { background: var(--surface-4) !important; color: var(--accent-cyan, var(--accent-cyan-chat)) !important; font-weight: 600 !important; } } @media (max-width: 1150px) { body.nav-open .cyber-chatbot-widget { opacity: 0; visibility: hidden; pointer-events: none !important; transform: translateY(10px); } } @media (max-width: 1150px) { body.nav-open .cyber-chatbot-widget *, body.nav-open .chatbot-proactive-bubble, body.nav-open .chatbot-trigger, body.nav-open .chatbot-window { pointer-events: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .has-dropdown { flex-wrap: wrap; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .has-dropdown > a::after { display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .dropdown-menu { position: static !important; display: flex !important; flex-direction: column; width: 100%; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 0 4px 0 !important; margin: 0 !important; min-width: auto; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .dropdown-menu li { width: 100%; display: flex; opacity: 0; animation: mobileMenuFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.1s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .dropdown-menu a { width: 100%; padding: 7px 14px 7px 36px !important; font-size: var(--fs-400) !important; color: rgba(226, 232, 240, 0.55) !important; border-left: 2px solid rgba(var(--accent-cyan-hero-rgb), 0.12) !important; border-radius: 0 !important; margin-left: 14px; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .dropdown-menu a::before { content: '›' !important; font-family: inherit !important; font-size: var(--fs-600) !important; font-weight: 400; color: rgba(var(--accent-cyan-hero-rgb), 0.35); margin-right: 8px; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open .dropdown-menu a:hover, #mainHeader .nav-links.mobile-open .dropdown-menu a:focus-visible { color: var(--accent-cyan, var(--accent-cyan-chat)) !important; border-left-color: var(--accent-cyan, var(--accent-cyan-chat)) !important; background: rgba(var(--accent-cyan-chat-rgb), 0.04) !important; padding-left: 40px !important; } } @media (max-width: 420px) { #mainHeader .nav-container { padding-inline: 12px; } } @media (max-width: 420px) { #mainHeader .nav-links.mobile-open { /* Antes 95px, que era el hueco para la cabecera; ya no hace falta porque el panel entero empieza debajo de ella (ver el bloque principal). */ padding: 18px 10px 0 !important; gap: 6px !important; } } @media (max-width: 420px) { #mainHeader .nav-links.mobile-open a { min-height: 44px !important; padding: 8px 10px !important; font-size: var(--fs-300) !important; } } @media (max-width: 420px) { #mainHeader .nav-links.mobile-open a::before { font-size: var(--fs-100) !important; margin-bottom: 2px !important; } } .nav-links { position: relative; } .nav-links::before { content: ''; position: absolute; left: 0; top: 50%; width: var(--nav-indicator-width, 0px); height: 38px; box-sizing: border-box; background: var(--surface-3); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); border-radius: 999px; z-index: 0; transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; pointer-events: none; opacity: 0; transform: translate3d(var(--nav-indicator-x, 0px), -50%, 0); } .nav-links.indicator-visible::before { opacity: 1; } .nav-links a { position: relative; z-index: 1; } .nav-links a::after { display: none !important; } @media (min-width: 1151px) { #mainHeader .has-dropdown > a::after { display: inline-block !important; } } @media (min-width: 1151px) { #mainHeader .nav-links > li > a.active:not(.contact-btn) { color: #d9fbff; text-shadow: 0 0 13px rgba(var(--accent-cyan-hero-rgb), 0.24); } } @media (min-width: 1151px) { #mainHeader .lang-switcher { position: relative; display: inline-flex; align-items: center; gap: 2px; min-width: max-content; min-height: 38px; margin-left: clamp(7px, 0.75vw, 13px); padding: 0; border: none; border-radius: 999px; background: none; box-shadow: none; } } @media (min-width: 1151px) { #mainHeader .lang-switcher::before { content: ''; position: absolute; top: 50%; left: clamp(-14px, -0.8vw, -9px); width: 1px; height: 24px; border-radius: 999px; background: linear-gradient( 180deg, transparent, rgba(var(--accent-cyan-hero-rgb), 0.32), rgba(143, 124, 255, 0.22), transparent ); transform: translateY(-50%); } } @media (min-width: 1151px) { #mainHeader .lang-switcher .lang-divider { display: none; } } @media (min-width: 1151px) { #mainHeader .lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: rgba(226, 232, 240, 0.56); font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.055em; text-shadow: none; transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } } @media (min-width: 1151px) { #mainHeader .lang-btn:hover, #mainHeader .lang-btn:focus-visible { color: #f8fdff; border-color: rgba(var(--accent-cyan-hero-rgb), 0.22); background: rgba(var(--accent-cyan-hero-rgb), 0.08); transform: translateY(-1px); } } @media (min-width: 1151px) { #mainHeader .lang-btn:focus-visible { outline: 2px solid rgba(var(--accent-cyan-hero-rgb), 0.72); outline-offset: 2px; } } @media (min-width: 1151px) { #mainHeader .lang-btn.active { color: #eaffff; border-color: rgba(var(--accent-cyan-hero-rgb), 0.34); background: linear-gradient(135deg, rgba(var(--accent-cyan-hero-rgb), 0.2), rgba(143, 124, 255, 0.14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 0 16px rgba(var(--accent-cyan-hero-rgb), 0.12); text-shadow: 0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.32); } } @media (max-width: 1150px) { #mainHeader .nav-links { display: flex !important; flex-direction: column; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100vh !important; max-height: 100vh !important; padding: 100px 24px 40px !important; justify-content: center !important; align-items: center !important; gap: 12px !important; border: none !important; border-radius: 0 !important; background: radial-gradient(circle at 10% 20%, rgba(var(--accent-cyan-hero-rgb), 0.18), transparent 45%), radial-gradient(circle at 90% 80%, rgba(143, 124, 255, 0.16), transparent 45%), linear-gradient(180deg, rgba(7, 12, 24, 0.99), rgba(10, 15, 29, 0.98)) !important; backdrop-filter: blur(28px) saturate(160%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; box-shadow: none !important; overflow-y: auto; overscroll-behavior: contain; z-index: 1000 !important; /* Prioridad de apilamiento superior garantizada */ opacity: 0; visibility: hidden; pointer-events: none; clip-path: circle(0px at 92% 33px); /* Transición elástica de salida rápida al cerrar. Retrasamos visibility: hidden al final */ transition: clip-path 0.45s cubic-bezier(0.3, 0.07, 0.19, 0.97), opacity 0.35s ease-in, visibility 0s linear 0.45s !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; clip-path: circle(150% at 92% 33px) !important; transform: none !important; /* Transición elástica de entrada suave al abrir. Hacemos visibility: visible al instante */ transition: clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s !important; } } @media (max-width: 1150px) { #mainHeader .nav-links::before { display: none !important; } } @media (max-width: 1150px) { #mainHeader .nav-links li { opacity: 0; transform: perspective(500px) rotateX(15deg) translateY(24px) scale(0.9); transition: transform 0.3s cubic-bezier(0.3, 0.07, 0.19, 0.97), opacity 0.25s ease-in; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li { opacity: 1; transform: perspective(500px) rotateX(0deg) translateY(0) scale(1); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(1) { transition-delay: 0.04s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(2) { transition-delay: 0.08s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(3) { transition-delay: 0.12s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(4) { transition-delay: 0.16s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(5) { transition-delay: 0.20s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(6) { transition-delay: 0.24s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(7) { transition-delay: 0.28s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(8) { transition-delay: 0.32s; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open li:nth-of-type(9) { transition-delay: 0.36s; } } .filter-btn, .contact-form .btn, .nav-links .contact-btn { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s !important; } @media (max-width: 1150px) { .nav-links { max-height: 100vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding-top: 100px !important; padding-bottom: 50px !important; } } @media (max-width: 768px) { body.mobile-cta-visible .chatbot-proactive-bubble, body.nav-open .mobile-cta-bar, body.lightbox-open .mobile-cta-bar, body.chatbot-open .mobile-cta-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(calc(100% + 24px)) !important; } } #mainHeader .nav-container > nav { display: contents; } #mainHeader .nav-links.mobile-open > li:last-child { display: flex; justify-content: center; } #mainHeader .nav-links.mobile-open > li:last-child .contact-btn { width: auto !important; min-width: 220px; max-width: 300px; padding: 13px 34px !important; } #mainHeader .nav-links.mobile-open { padding-bottom: 0; } #mainHeader .nav-links.mobile-open > li:last-child { /* margin-top: auto lo empuja al final cuando el contenido cabe en el panel (tablet en vertical); position: sticky lo mantiene a la vista cuando el contenido desborda y hay que desplazar (movil). Los dos casos hacen falta: con solo uno de ellos el boton queda a media altura o se pierde al final. */ margin-top: auto; padding-top: 12px; padding-bottom: 26px; background: linear-gradient(180deg, rgba(8, 12, 27, 0.72) 0%, rgb(6, 9, 20) 26%, rgb(5, 8, 18) 100%); box-shadow: 0 -14px 26px rgba(5, 8, 18, 0.62); } #mainHeader .mobile-lang-switch { display: none; } @media (max-width: 1150px) { body.nav-open #mainHeader .logo { max-width: calc(100% - 126px); } } @media (max-width: 1150px) { body.nav-open #mainHeader .mobile-lang-switch { position: relative; z-index: 1003; display: block; flex: 0 0 auto; margin-left: auto; margin-right: 8px; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch > summary { min-height: 42px; padding: 6px 10px; border-color: rgba(var(--accent-cyan-hero-rgb), 0.26); background: rgba(var(--accent-cyan-hero-rgb), 0.07); color: var(--text-primary); line-height: 1; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch > summary:hover, #mainHeader .mobile-lang-switch > summary:focus-visible, #mainHeader .mobile-lang-switch[open] > summary { border-color: rgba(var(--accent-cyan-hero-rgb), 0.52); background: rgba(var(--accent-cyan-hero-rgb), 0.12); box-shadow: 0 0 18px rgba(var(--accent-cyan-hero-rgb), 0.12); } } @media (max-width: 1150px) { #mainHeader .mobile-lang-current { min-width: 21px; color: #eaffff; font-size: var(--fs-400); font-weight: 700; letter-spacing: 0.06em; text-align: center; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch .lang-switch-panel { top: calc(100% + 8px); right: 0; min-width: 188px; padding: 7px; gap: 3px; border-color: rgba(var(--accent-cyan-hero-rgb), 0.2); background: rgba(var(--depth-2-rgb), 0.99); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52); } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch .lang-btn { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 9px !important; color: #b9c4d2 !important; font-size: var(--fs-400) !important; line-height: 1.2; text-align: left; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch .lang-name, #mainHeader .mobile-lang-switch .lang-code { display: inline !important; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch .lang-code { color: var(--accent-cyan, var(--accent-cyan-chat)); font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.08em; } } @media (max-width: 1150px) { #mainHeader .mobile-lang-switch .lang-btn.active, #mainHeader .mobile-lang-switch .lang-btn[aria-current="page"] { border-color: rgba(var(--accent-cyan-hero-rgb), 0.22) !important; background: rgba(var(--accent-cyan-hero-rgb), 0.1) !important; color: #f7fdff !important; } } @media (max-width: 1150px) { #mainHeader .nav-links.mobile-open > li.lang-switcher { display: none !important; } } /* ---- Anadido por el generador: no existe en la portada ---- */ /* El formato en el que ya estamos. Es un SIN href, asi que hereda de sus hermanos del desplegable la sangria, las mayusculas y la flecha, y ademas no se puede pulsar ni entra en el orden del tabulador. Aqui solo se marca que es la pagina actual. Lleva !important porque la regla que pinta los hijos del desplegable tambien lo lleva: "#mainHeader .nav-links.mobile-open .dropdown-menu a { color: ... !important }". Sin igualar armas, subir la especificidad no sirve de nada, y el formato actual salia del mismo gris que sus hermanos. */ #mainHeader .dropdown-menu a.is-current-page, #mainHeader .nav-links.mobile-open .dropdown-menu a.is-current-page { color: var(--accent-cyan-hero) !important; border-left-color: var(--accent-cyan-hero) !important; font-weight: 700; cursor: default; } /* Base heredada. La cabecera se apoya en el body de la portada (tipografia y color de texto) y las fichas tienen el suyo, con otra familia y otro blanco. Va con :where() para que la regla valga CERO de especificidad: la heredan los hijos que no digan otra cosa, pero cualquier regla del componente —el degradado del logotipo, por ejemplo— sigue ganando. Con "#mainHeader { }" a secas (1-0-0) se cargaba la fuente Outfit del logotipo. */ :where(#mainHeader) { font-family: var(--font-body); color: var(--text-primary); } /* La portada trae resets globales que no son del componente pero que este necesita: "button, input... { font: inherit }" —sin el, Chrome pinta el boton en Arial 13,33px con su relleno propio— y el margen cero de las listas, sin el cual el