/* Montserrat Rigall i Corominas - Custom Portfolio Styling */ /* Fuentes: cargadas vía en el (sin @import bloqueante) */ /* TRANSICION ENTRE PAGINAS ------------------------------------------------------------------ Fundido cruzado al pasar de la portada a una ficha de formato y al volver, en vez del corte seco. Lo hace el navegador: cero JavaScript y sin interceptar clics, asi que no anade ni un milisegundo de espera. El bloque DEBE existir en las dos partes: aqui (portada) y en commercial-pages.css (las 12 fichas). Una transicion entre documentos solo ocurre si LOS DOS se apuntan; con uno solo no pasa nada. Hay una guarda en tools/validate-site.js que lo comprueba. Se activa dentro de "no-preference" a proposito, en vez de desactivarlo luego bajo "reduce": asi, con el movimiento reducido, sencillamente no hay adhesion a la transicion y el navegador hace lo de siempre. No depende de que una regla posterior gane la cascada. Donde no este soportado (hoy Firefox) no pasa nada: corte seco, igual que antes. Es una mejora progresiva, no un requisito. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* 320 ms con la curva que ya usa el resto de la web, en vez de los 250 ms planos por defecto. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* MORPHING: la tarjeta de formato viaja hasta la cabecera de su ficha. ------------------------------------------------------------------ Cada tarjeta comparte nombre con el bloque de titulo de su landing (view-transition-name inline en buildServicePage, build-i18n.js) y con su fila de la lista "Compara formats" de las otras fichas. El navegador, al ver el mismo nombre en las dos paginas, anima posicion y tamano de una a la otra; el resto de la pagina se funde como hasta ahora. REGLA DE ORO: un nombre NO puede aparecer dos veces en la misma pagina; si pasa, el navegador cancela la transicion entera y sin avisar. Aqui cada nombre sale una sola vez (su tarjeta). En las fichas, el propio formato va en la cabecera y su fila de la lista queda excluida via :not(.is-current) en commercial-pages.css. */ .service-contract-card[data-service-format="keynote"] { view-transition-name: format-keynote; } .service-contract-card[data-service-format="divulgativa"] { view-transition-name: format-divulgativa; } .service-contract-card[data-service-format="taller"] { view-transition-name: format-taller; } .service-contract-card[data-service-format="moderacio"] { view-transition-name: format-moderacio; } /* El viaje de los grupos con nombre, a la misma duracion y curva que el fundido de fondo, para que todo respire igual. */ ::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } :root { --bg-primary: #0a0f1d; --bg-secondary: #121829; --bg-tertiary: #1a233d; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #8695ad; /* PALETA DE TEXTO TRANSLUCIDO (fase 4) ------------------------------------------------------------------ Cuatro grises claros convivian con 42 opacidades distintas entre los dos archivos: el mismo rgb(226,232,240) aparecia al 0,82 / 0,84 / 0,86 / 0,88 / 0,90 / 0,92 / 0,94 y 0,95. Diferencias del 2% sobre texto casi blanco: invisibles, pero habia que mantenerlas. Se agrupa SOLO la banda alta de cada familia, donde el salto maximo es de 0,10 de opacidad. Las opacidades bajas (0,25 a 0,78) se dejan como estan: ahi la diferencia si se ve y suele ser intencionada. */ --text-bright: rgba(248, 250, 252, 0.94); --text-body: rgba(226, 232, 240, 0.86); --text-soft: rgba(203, 213, 225, 0.82); --text-white: rgba(255, 255, 255, 0.85); /* LOS TRES CIANES (fase 4) ------------------------------------------------------------------ La web usa tres cianes, y no al azar: cada uno ocupa una zona. --accent-cyan el cuerpo del sitio: botones, tarjetas, portafolio, linea de tiempo, foco del formulario. --accent-cyan-hero la cabecera y el hero: menu, logo, titular, foto. --accent-cyan-chat el asistente: burbuja, ventana, mensajes, envio. Estaban escritos a pelo en unas 590 declaraciones, asi que el reparto existia pero no se veia por ninguna parte y cualquiera lo habria roto sin querer. Ahora esta declarado. Cambiar el cian de una zona es tocar una linea. Cada uno lleva su gemelo -rgb con los canales sueltos, porque rgba() necesita los numeros y no admite un hexadecimal dentro. */ --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-violet-glow: rgba(139, 92, 246, 0.3); --accent-pink: #d946ef; --accent-gradient: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%); --accent-gradient-hover: linear-gradient(135deg, var(--accent-cyan) 30%, var(--accent-pink) 100%); /* SUPERFICIES DE CRISTAL (fase 4) ------------------------------------------------------------------ El velo blanco que separa una tarjeta del fondo estaba escrito con 21 opacidades distintas en 99 declaraciones: 0,015 / 0,02 / 0,025 / 0,03 / 0,032 / 0,035 / 0,04 / 0,042... Entre 0,03 y 0,032 hay medio punto de 255 en el color final: no lo distingue nadie. Seis peldanos, del velo mas tenue al mas marcado. El salto maximo al agrupar es de 0,015 de opacidad, unos 4 puntos de 255. */ --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); --surface-5: rgba(255, 255, 255, 0.12); --surface-6: rgba(255, 255, 255, 0.2); /* TINTES DE ACENTO (fase 4) ------------------------------------------------------------------ El cian de marca usado como fondo tenue tenia 15 opacidades en 32 declaraciones. Cuatro peldanos, con un salto maximo de 0,05. Solo se agrupan fondos: en bordes y resplandores la opacidad hace otro trabajo y se deja como esta. */ --accent-tint-1: rgba(var(--accent-cyan-rgb), 0.05); --accent-tint-2: rgba(var(--accent-cyan-rgb), 0.08); --accent-tint-3: rgba(var(--accent-cyan-rgb), 0.14); --accent-tint-4: rgba(var(--accent-cyan-rgb), 0.3); /* FONDOS OSCUROS (fase 4) ------------------------------------------------------------------ El azul oscuro que separa un panel del fondo estaba escrito a mano con 30 valores distintos en 85 declaraciones, casi todos el mismo color movido dos o tres puntos: 7,12,24 y 8,12,24 y 6,12,26... Cuatro peldanos de profundidad, del mas hundido al mas elevado. El salto maximo al agrupar es de 5 puntos de 255 en un solo canal. Se guardan como TRIPLETE, no como color cerrado, porque estos fondos se usan con 25 opacidades distintas y ahi la opacidad si hace trabajo: es la que decide cuanto se transparenta el panel. Asi se agrupa el color sin tocar ni una opacidad. Mismo criterio que --accent-cyan-rgb. OJO: commercial-pages.css NO ve estas variables (se carga sola, tiene su propio :root). Sus fondos siguen escritos a mano a proposito. */ --depth-1-rgb: 4, 7, 15; --depth-2-rgb: 7, 12, 24; --depth-3-rgb: 9, 17, 34; --depth-4-rgb: 15, 23, 42; --border-glass: 1px solid rgba(255, 255, 255, 0.08); --bg-glass: rgba(18, 24, 41, 0.75); --bg-glass-heavy: rgba(10, 15, 29, 0.95); --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; /* ESCALA TIPOGRAFICA (fase 4) ------------------------------------------------------------------ La web tenia 92 tamanos de letra distintos escritos a mano en 537 declaraciones: 0,62 y 0,64 y 0,65 y 0,66rem conviviendo para lo mismo, diferencias de medio pixel que nadie ve pero que hay que mantener. Estos son los peldanos a los que se van llevando. No se han elegido en abstracto: cada uno es el valor que menos movimiento total provoca en su tramo, contando cada valor por las veces que se usa. Se recalculan con los datos de uso justo antes de aplicarlos, nunca antes: por eso --fs-500, --fs-600, --fs-700, --fs-800, --fs-900 y --fs-1000 acabaron valiendo algo distinto de lo que se anoto al principio. Se aplican por tramos, comprobando cada uno con tools/visual-baseline.js. APLICADO: --fs-100 a --fs-1000 (todo lo que estaba por debajo de 1,6rem). PENDIENTE: del --fs-1100 para arriba, que son .hero-title y .section-title en sus distintos puntos de ruptura. Ahi la escalada por tamano de pantalla es deliberada, no un descuido, y agruparla la aplanaria. Los valores de esos peldanos siguen siendo provisionales. APARTE: los 32 clamp() no se tocan. Son responsivos por diseno. */ --fs-100: 0.62rem; /* 9,9 px */ --fs-200: 0.68rem; /* 10,9 px */ --fs-300: 0.72rem; /* 11,5 px */ --fs-400: 0.78rem; /* 12,5 px */ --fs-500: 0.84rem; /* 13,4 px */ --fs-600: 0.92rem; /* 14,7 px */ --fs-700: 1rem; /* 16 px */ --fs-800: 1.1rem; /* 17,6 px */ --fs-900: 1.25rem; /* 20 px */ --fs-1000: 1.5rem; /* 24 px */ --fs-1100: 2rem; /* 32 px (provisional) */ --fs-1200: 2.4rem; /* 38,4 px (provisional) */ --fs-1300: 3rem; /* 48 px (provisional) */ --fs-1400: 3.8rem; /* 60,8 px (provisional) */ --fs-1500: 4.8rem; /* 76,8 px (provisional) */ --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s ease; --glow-shadow: 0 0 30px rgba(var(--accent-cyan-rgb), 0.15); } /* ========================================================================== Interaction & Responsive Impact Pass ========================================================================== */ :root { --accent-amber: #f59e0b; --accent-green: #22c55e; --surface-elevated: rgba(7, 12, 24, 0.72); } /* Los navegadores aplican su propia fuente a los controles de formulario (Arial 13,33px en Chrome), que no se hereda del documento. Sin este reset, 86 de los 119 controles del sitio -incluido el boton de enviar el formulario de contacto- se renderizaban en Arial en lugar de Inter. */ button, input, select, textarea, optgroup { font: inherit; } .hero { width: 100%; max-width: none; padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px)); padding-right: max(24px, calc((100vw - 1200px) / 2 + 24px)); isolation: isolate; overflow: clip; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, rgba(10, 15, 29, 0.94) 0%, rgba(10, 15, 29, 0.72) 46%, rgba(10, 15, 29, 0.92) 100%), url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") center right / min(58vw, 760px) auto no-repeat; opacity: 0.62; } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.035) 39px 40px), linear-gradient(180deg, transparent 0%, rgba(10, 15, 29, 0.96) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 82%); pointer-events: none; } .hero-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; } .proof-pill { min-height: 92px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: linear-gradient(180deg, var(--surface-4), rgba(255, 255, 255, 0.025)); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } .proof-kicker { color: var(--accent-amber); font-size: var(--fs-300); font-weight: 800; letter-spacing: 0.12em; } .proof-pill strong { color: var(--text-primary); font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1; } .proof-pill span:last-child { color: var(--text-secondary); font-size: var(--fs-500); font-weight: 600; } .hero-img-container { transform-style: preserve-3d; } .portrait-data-card { position: absolute; right: -28px; bottom: 22px; width: min(230px, 72%); padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(var(--depth-2-rgb), 0.82); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35), 0 0 18px rgba(var(--accent-cyan-rgb), 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: left; z-index: 12; } .portrait-data-card::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 14px var(--accent-green); position: absolute; top: 15px; right: 14px; animation: pulse 1.6s infinite; } .portrait-data-label { color: var(--accent-cyan); display: block; font-size: var(--fs-200); font-weight: 800; letter-spacing: 0.12em; margin-bottom: 5px; } .portrait-data-card strong { display: block; color: var(--text-primary); font-size: var(--fs-600); line-height: 1.25; } .portfolio-live-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 720px; margin: -14px auto 28px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.08), rgba(245, 158, 11, 0.05)); color: var(--text-secondary); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #portfolioCount { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-family: var(--font-heading); font-weight: 800; white-space: nowrap; } #portfolioCount::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 12px rgba(34, 197, 94, 0.65); } .portfolio-grid { align-items: stretch; } .portfolio-card { transform-origin: center; will-change: transform; --portfolio-accent: var(--accent-cyan); --portfolio-glow: rgba(var(--accent-cyan-rgb), 0.18); } .portfolio-card[data-category="report"] { --portfolio-accent: var(--accent-pink); --portfolio-glow: rgba(236, 72, 153, 0.16); } .portfolio-card[data-category="pilot"] { --portfolio-accent: var(--accent-amber); --portfolio-glow: rgba(245, 158, 11, 0.16); } /* .portfolio-card:first-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); } .portfolio-card:first-child .portfolio-media { height: 100%; min-height: 360px; } .portfolio-card:first-child .portfolio-info { justify-content: center; padding: 32px; } .portfolio-card:first-child .portfolio-title { font-size: clamp(1.45rem, 2vw, 2rem); } */ .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; } .portfolio-media:focus .play-badge, .portfolio-card:focus-within .play-badge, .touch-device .portfolio-card .play-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); } .portfolio-media:focus .mojo-viewfinder, .portfolio-card:focus-within .mojo-viewfinder, .touch-device .portfolio-card .mojo-viewfinder { opacity: 1; } .touch-device .portfolio-card .portfolio-media img { opacity: 0.78; } .card-tilt-active { transform: perspective(950px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px); } .contact-card { transform-origin: center; } @media (max-width: 1100px) { /* .portfolio-card:first-child { grid-column: auto; grid-template-columns: 1fr; } .portfolio-card:first-child .portfolio-media { height: 260px; min-height: 260px; } */ } @media (max-width: 992px) { .hero { max-width: none; min-height: auto; padding-top: 34px; padding-bottom: 70px; } .hero::before { background: linear-gradient(180deg, rgba(10, 15, 29, 0.82), rgba(10, 15, 29, 0.97)), url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") center top / cover no-repeat; opacity: 0.36; } .hero::after { mask-image: none; opacity: 0.55; } .hero-content { width: 100%; } .hero-proof-strip { max-width: 680px; margin: 0 auto; } .portrait-data-card { right: 8px; bottom: 10px; width: calc(100% - 16px); } .nav-links.mobile-open { overflow-y: auto; } } @media (max-width: 680px) { section { padding-top: 50px; padding-bottom: 50px; padding-left: 18px; padding-right: 18px; } .hero { margin-top: 64px; padding-top: 15px; padding-bottom: 30px; padding-left: 18px; padding-right: 18px; text-align: left; } .hero-title { margin-bottom: 12px; } .hero-tagline, .hero-cta { justify-content: flex-start; } .hero-subtitle { font-size: var(--fs-800); margin-bottom: 16px; } .hero-desc { margin-left: 0; margin-right: 0; font-size: var(--fs-700); margin-bottom: 20px; } .hero-cta { flex-direction: column; gap: 12px; margin-bottom: 24px; } .hero-cta .btn { width: 100%; } .hero-proof-strip { grid-template-columns: 1fr; gap: 10px; } .proof-pill { padding: 10px 16px; min-height: auto; } .hero-media { width: 100%; } .hero-img-container { width: min(65vw, 240px); height: min(65vw, 240px); } .portfolio-live-summary { align-items: flex-start; flex-direction: column; margin-top: -10px; width: 100%; border-radius: 16px; gap: 8px; } .portfolio-media { height: auto; min-height: auto; aspect-ratio: 16 / 9; } .portfolio-info { padding: 20px; } .portfolio-meta { align-items: flex-start; flex-direction: column; gap: 4px; } .timeline-content p { text-align: left; } .about-bio p { text-align: left; font-size: var(--fs-600); line-height: 1.55; margin-bottom: 16px; } } @media (max-width: 420px) { .section-title { font-size: 1.75rem; } .hero-title { font-size: 2.25rem; } .portfolio-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } } @media (hover: none) { .portfolio-card:hover, .achievement-card:hover, .contact-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } #neuralCanvas { display: none; } } /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Custom Global Cursor Style - Prevent text-selection I-beam cursor on general texts */ html, body, p, span, h1, h2, h3, h4, h5, h6, li, label, strong, em, div, section, article, header, footer, time, figcaption, blockquote { cursor: default; } /* Enable pointer cursor on interactive elements and ensure their children inherit it */ 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; } a *, button *, [role="button"] *, .pointer-child, .pointer-child * { cursor: pointer; } /* Ensure grab/grabbing cursors are inherited by all child elements of draggable containers */ .timeline-viewport *, .progress-bar-wrapper *, .chatbot-options *, .chatbot-cards-slider * { cursor: inherit !important; } /* Enable I-beam text selector cursor only on user inputs where typing is needed */ input[type="text"], input[type="email"], input[type="search"], textarea, [contenteditable="true"] { cursor: text; } /* ÚNICO freno de los anclajes de todo el sitio. Es la altura de la cabecera fija (66,8 px hasta 1150, 72,8 px a partir de 1151) más 17 px de aire. Antes había TRES frenos: éste, `section[id] { scroll-margin-top }` y el del formulario, los dos en enhancements.css. El navegador NO elige uno: los SUMA (104 + 80 = 184 en escritorio, 78 + 80 = 158 en móvil), así que la sección aterrizaba 111 px por debajo de la cabecera en escritorio y 91 en móvil, y en ese hueco se veía la cola de la sección anterior. Los tres se escribieron creyendo cada uno que el trabajo lo hacía otro. Si algún día cambia el alto de la cabecera, este es el número que hay que mover, y sólo éste. No devolver ningún `scroll-margin-top`. */ html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (min-width: 1151px) { html { scroll-padding-top: 90px; } } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--surface-6); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } /* Cyber Grid Background */ .cyber-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(rgba(var(--accent-cyan-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.03) 1px, transparent 1px); background-size: 50px 50px; background-position: center; pointer-events: none; } .cyber-bg::before { content: ''; position: absolute; top: 10%; left: 20%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%); filter: blur(50px); pointer-events: none; } .cyber-bg::after { content: ''; position: absolute; bottom: 10%; right: 10%; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(var(--accent-cyan-rgb), 0.08) 0%, transparent 70%); filter: blur(50px); pointer-events: none; } /* Header & Sticky Nav */ 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); } /* Mobile Menu Burger */ .burger { display: none; cursor: pointer; background: none; border: none; color: var(--text-primary); font-size: var(--fs-1000); } /* Section styling */ section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; position: relative; } /* Separador cibernético de secciones */ .section-divider { height: 1px; width: calc(100% - 48px); max-width: 1200px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--accent-cyan) 30%, var(--accent-violet) 70%, transparent); opacity: 0.25; position: relative; z-index: 10; } .section-divider::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan); border: 1px solid var(--bg-primary); } .section-tag { font-size: var(--fs-500); text-transform: uppercase; letter-spacing: 0.15em; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; margin-bottom: 12px; display: inline-block; } .section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 50px; position: relative; } /* Acento de los titulos: color plano con resplandor, no degradado recortado. El detalle y el porque, en el bloque PREMIUM 10 de enhancements.css. */ .section-title span { color: var(--accent-cyan-hero); text-shadow: 0 0 12px rgba(var(--accent-cyan-hero-rgb), 0.5), 0 0 28px rgba(var(--accent-cyan-hero-rgb), 0.22); } /* Hero Section */ .hero { min-height: calc(100vh - 80px); margin-top: 80px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 50px; padding-bottom: 80px; } .hero-content { flex: 1.2; } .hero-tagline { font-size: var(--fs-800); color: var(--accent-cyan); font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; min-height: 26px; /* Prevents height collapse and layout jumps during typewriter animation */ } .hero-tagline::before { content: ''; width: 15px; height: 2px; background: var(--accent-cyan); } .hero-title { font-size: clamp(2.2rem, 4.2vw, 3.8rem); font-weight: 800; line-height: 1.15; margin-bottom: 24px; } /* El acento del hero es COLOR PLANO (ver PREMIUM 10 en enhancements.css). Aqui habia un degradado recortado con background-clip:text. El recorte solo existe dentro de la caja del elemento, asi que se comia el final de la ultima letra de "verificacio". Y el degradado terminaba en lila, que no es el azul unico que se eligio para todos los titulos. */ .hero-title span.glow-text { position: relative; } .hero-subtitle { font-size: var(--fs-1000); font-weight: 400; color: var(--text-secondary); margin-bottom: 30px; font-family: var(--font-heading); } .hero-desc { color: var(--text-secondary); font-size: var(--fs-800); max-width: 550px; margin-bottom: 40px; } .hero-cta { display: flex; gap: 20px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); } .btn-primary { background: var(--accent-gradient); /* Texto oscuro sobre el degradado claro. Con texto blanco el contraste caia a 1,40:1 en el extremo cian (WCAG 2.2 AA exige 4,5:1). Con este valor el peor extremo del degradado queda en 4,61:1. Misma solucion que ya se aplicaba solo a .hero-cta .btn-primary en enhancements.css:9307. */ color: #070c18; box-shadow: 0 4px 20px rgba(var(--accent-cyan-rgb), 0.2); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(var(--accent-cyan-rgb), 0.4); } .btn-secondary { border: 1px solid rgba(255, 255, 255, 0.15); background: var(--surface-2); color: var(--text-primary); backdrop-filter: blur(10px); } .btn-secondary:hover { border-color: var(--accent-cyan); background: var(--accent-tint-1); transform: translateY(-3px); } .hero-media { flex: 0.8; display: flex; justify-content: center; position: relative; } .hero-img-container { width: 380px; height: 380px; border-radius: 24px; position: relative; padding: 3px; background: var(--accent-gradient); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); animation: float-slow 6s ease-in-out infinite; overflow: visible; } /* Cybernetic animated gradient glow behind the photo */ .hero-img-container::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet), var(--accent-pink)); border-radius: 28px; z-index: -1; filter: blur(15px); opacity: 0.65; animation: rotate-gradient 12s linear infinite; transition: var(--transition-smooth); } .hero-img-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; display: block; transition: var(--transition-smooth); } .hero-img-container:hover img { transform: scale(1.03); } .hero-img-container:hover::before { filter: blur(20px); opacity: 0.85; } @keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes rotate-gradient { 0% { filter: blur(15px) hue-rotate(0deg); } 100% { filter: blur(15px) hue-rotate(360deg); } } /* About Section */ .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } .about-media { position: relative; } .about-photo-wrapper { background: var(--bg-secondary); border: var(--border-glass); border-radius: 20px; padding: 16px; box-shadow: var(--glow-shadow); position: relative; overflow: hidden; } .about-photo-wrapper img { width: 100%; height: auto; border-radius: 12px; display: block; } .about-tag { position: absolute; bottom: 30px; left: 30px; background: rgba(var(--depth-2-rgb), 0.85); border: var(--border-glass); padding: 10px 20px; border-radius: 30px; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-600); } .about-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.6; } } .about-bio p { color: var(--text-secondary); font-size: var(--fs-800); margin-bottom: 24px; text-align: left; } .about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .highlight-item { background: var(--bg-glass); border: var(--border-glass); padding: 18px; border-radius: 12px; transition: var(--transition-smooth); } .highlight-item:hover { transform: translateY(-3px); border-color: var(--accent-cyan); background: var(--accent-tint-1); } .highlight-icon { font-size: var(--fs-1000); margin-bottom: 10px; } .highlight-item h4 { font-size: var(--fs-800); font-weight: 700; margin-bottom: 6px; } .highlight-item p { font-size: var(--fs-600); color: var(--text-muted); margin-bottom: 0; } /* Logos Slider Section */ /* Authority & Logos Section */ .authority-logos-section { padding: 80px 24px; border-top: var(--border-glass); border-bottom: var(--border-glass); background: rgba(var(--depth-3-rgb), 0.48); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 2; } .authority-logos-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; } .authority-logos-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 30%, var(--accent-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .authority-logos-subtitle { font-size: var(--fs-800); color: var(--text-muted); max-width: 800px; line-height: 1.6; } .authority-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; margin-top: 20px; } .authority-logo-card { background: var(--surface-2); border: var(--border-glass); border-radius: 16px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); height: 100%; } .authority-logo-card:hover { background: var(--surface-4); border-color: var(--accent-cyan-glow); transform: translateY(-6px); box-shadow: 0 10px 40px rgba(var(--accent-cyan-rgb), 0.15); } .card-logo-wrapper { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; width: 100%; } .card-logo-wrapper img { max-height: 100%; max-width: 150px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } .card-logo-wrapper.text-logo { background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(var(--accent-cyan-rgb), 0.2); border-radius: 8px; padding: 8px 16px; width: fit-content; } .text-logo-brand { font-family: var(--font-mono, monospace); font-size: var(--fs-1000); font-weight: 800; letter-spacing: 0.1em; color: var(--accent-cyan); text-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.5); } .authority-logo-card .card-name { font-size: var(--fs-800); font-weight: 700; color: #fff; margin-bottom: 12px; transition: color 0.3s; } .authority-logo-card:hover .card-name { color: var(--accent-cyan); } .authority-logo-card .card-desc { font-size: var(--fs-600); color: var(--text-muted); line-height: 1.5; text-align: center; } .authority-logos-disclaimer { font-size: var(--fs-500); color: var(--text-muted); font-style: italic; margin-top: 16px; border-left: 2px solid var(--accent-cyan); padding-left: 10px; } @media (max-width: 1024px) { .authority-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .authority-cards-grid { grid-template-columns: 1fr; gap: 16px; } .authority-logos-title { font-size: 1.7rem; } } /* Portfolio Section */ .portfolio-filters { display: flex; gap: 12px; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 34px; padding: 6px; flex-wrap: wrap; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: var(--surface-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .filter-btn { background: var(--bg-glass); border: var(--border-glass); color: var(--text-secondary); padding: 9px 16px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; min-height: 38px; position: relative; overflow: hidden; } .filter-btn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.45; transition: var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--accent-gradient); color: var(--text-primary); border-color: transparent; box-shadow: 0 4px 15px rgba(var(--accent-cyan-rgb), 0.25); } .filter-btn:hover::before, .filter-btn.active::before { opacity: 1; box-shadow: 0 0 12px currentColor; } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .portfolio-card { background: var(--bg-glass); border: var(--border-glass); border-radius: 12px; overflow: hidden; transition: var(--transition-smooth); position: relative; display: flex; flex-direction: column; backdrop-filter: blur(10px); } .portfolio-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--portfolio-accent), transparent); opacity: 0.35; transition: var(--transition-smooth); z-index: 4; pointer-events: none; } .portfolio-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--portfolio-glow), transparent 85%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 3; } .portfolio-card:hover::before, .portfolio-card:focus-within::before, .portfolio-card.is-previewing::before { opacity: 1; } .portfolio-card:hover::after { opacity: 1; } .portfolio-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--portfolio-accent) 54%, transparent); box-shadow: 0 8px 30px var(--portfolio-glow), inset 0 0 10px rgba(255, 255, 255, 0.03); } .portfolio-media { width: 100%; height: auto; aspect-ratio: 16 / 9; position: relative; background: #000; overflow: hidden; cursor: pointer; } .portfolio-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%, transparent 68%, rgba(0, 0, 0, 0.32)), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px); mix-blend-mode: screen; opacity: 0; transition: var(--transition-smooth); pointer-events: none; z-index: 1; } .portfolio-card:hover .portfolio-media::before, .portfolio-card:focus-within .portfolio-media::before, .portfolio-card.is-previewing .portfolio-media::before { opacity: 0.34; } .portfolio-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .portfolio-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .portfolio-card:hover .portfolio-media video, .portfolio-card.is-previewing .portfolio-media video { opacity: 1; } .portfolio-card:hover .portfolio-media img, .portfolio-card.is-previewing .portfolio-media img { opacity: 0.25; } .play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--depth-2-rgb), 0.65); border: 1px solid rgba(var(--accent-cyan-rgb), 0.6); border-color: color-mix(in srgb, var(--portfolio-accent) 70%, transparent); color: var(--portfolio-accent); display: flex; align-items: center; justify-content: center; font-size: var(--fs-700); opacity: 0; transition: var(--transition-smooth); z-index: 2; box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.2); backdrop-filter: blur(4px); } @keyframes play-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.35); } 70% { box-shadow: 0 0 0 8px rgba(var(--accent-cyan-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0); } } .portfolio-card:hover .play-badge, .portfolio-card.is-previewing .play-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: play-pulse 2s infinite; background: color-mix(in srgb, var(--portfolio-accent) 24%, rgba(var(--depth-2-rgb), 0.72)); color: #fff; border-color: #fff; } .portfolio-tag-overlay { position: absolute; top: 12px; left: 12px; background: rgba(var(--depth-2-rgb), 0.7); border: var(--border-glass); padding: 3px 10px; border-radius: 15px; font-size: var(--fs-300); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-cyan); backdrop-filter: blur(5px); z-index: 10; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); white-space: nowrap; } .portfolio-tag-overlay::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--portfolio-accent); box-shadow: 0 0 10px var(--portfolio-accent); } .portfolio-card.is-previewing .portfolio-tag-overlay, .portfolio-card:hover .portfolio-tag-overlay, .portfolio-card:focus-within .portfolio-tag-overlay { color: var(--text-primary); border-color: color-mix(in srgb, var(--portfolio-accent) 48%, rgba(255, 255, 255, 0.15)); background: rgba(var(--depth-2-rgb), 0.84); } .portfolio-info { padding: 16px 18px 20px; display: flex; flex-direction: column; flex-grow: 1; } .portfolio-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-400); color: var(--text-muted); margin-bottom: 8px; font-weight: 500; } .portfolio-meta span { min-width: 0; } .portfolio-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portfolio-meta span:last-child { flex-shrink: 0; color: color-mix(in srgb, var(--portfolio-accent) 72%, var(--text-muted)); } .portfolio-title { font-size: var(--fs-800); font-weight: 700; margin-bottom: 8px; line-height: 1.35; color: var(--text-primary); transition: var(--transition-fast); } .portfolio-title:hover { color: var(--portfolio-accent); } .portfolio-desc { color: var(--text-secondary); font-size: var(--fs-500); line-height: 1.45; margin-bottom: 16px; flex-grow: 1; } .portfolio-link { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-500); color: var(--accent-cyan); align-self: flex-start; } .portfolio-link:hover { gap: 10px; color: var(--accent-violet); } /* Mojo Toolkit Section */ /* Mojo Toolkit Section - Redesigned with interactive Tabs & Progress Bars */ /* Active tab style colors */ /* Tab content layout */ @keyframes tabFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Una sola columna: la columna izquierda contenia las barras de "Nivell d'especialitzacio" con porcentajes autoasignados y se ha retirado. */ /* Left: progress bars card */ .skills-progress-block { background: var(--bg-glass); border: var(--border-glass); border-radius: 20px; padding: 35px 30px; display: flex; flex-direction: column; justify-content: center; } /* Right: Tools showcase cards */ /* Cuatro columnas en escritorio: al retirar la columna de barras, estas tarjetas disponen del ancho completo. Por debajo de 992px vuelven a dos. */ @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 420px) { } @media (max-width: 576px) { } /* Timeline Section (Experience & Education) - Horizontal Slider */ .timeline-slider-wrapper { /* La anchura de la ficha se declara UNA vez y la usan dos reglas: la propia ficha y el hueco de los extremos de la pista. Tienen que ir a la par: si no, la primera y la ultima ficha no llegan al centro, y el ano que marca la aguja del dial dejaria de ser el de la ficha centrada. */ --tl-card-w: 380px; position: relative; width: 100%; margin-top: 40px; padding: 20px 0; } /* EL DIAL ------------------------------------------------------------------ Aqui vivia la barra de progreso con los puntos numerados encima de cada ficha. La sustituye la escala de anos: la marca que queda bajo la aguja ES la ficha centrada, asi que el punto sobre cada tarjeta sobraba y decia lo mismo dos veces. El aspecto del dial esta en enhancements.css. Base: solo la caja y la aguja, para que sin la capa de mejora la franja siga midiendo lo mismo y las flechas no se descoloquen. */ .timeline-dial { position: relative; height: 66px; margin: 0 8%; /* clip y no hidden: con hidden la franja es una caja desplazable y el navegador la movia solo para ensenar una marca que quedaba fuera, con lo que el ano dejaba de coincidir con la aguja. Con clip no hay desplazamiento posible. Igual que el overflow-x del body, por el mismo motivo. */ overflow: clip; z-index: 1; } .timeline-dial-track { position: absolute; top: 0; left: 50%; display: flex; height: 100%; will-change: transform; } .timeline-dial-needle { position: absolute; top: 2px; left: 50%; width: 1px; height: 42px; background: var(--accent-cyan); transform: translateX(-50%); pointer-events: none; z-index: 3; } /* Viewport and Track */ .timeline-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 16px 0 20px 0; scroll-behavior: smooth; scrollbar-width: none; /* Hide standard scrollbar on Firefox */ -ms-overflow-style: none; /* IE and Edge */ z-index: 2; position: relative; cursor: grab; scroll-snap-type: x mandatory; } .timeline-viewport:active { cursor: grabbing; } .timeline-viewport.grabbing { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .timeline-viewport.grabbing * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .timeline-viewport::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome, Safari and Opera */ } .timeline-track { display: flex; gap: 40px; /* Medio viewport menos media ficha: con este hueco CUALQUIER ficha puede quedar centrada, tambien la primera y la ultima. */ padding-inline: max(8%, calc(50% - var(--tl-card-w) / 2)); width: max-content; } /* Milestone Cards */ .timeline-card { width: var(--tl-card-w); flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); scroll-snap-align: center; } .timeline-card-content { width: 100%; background: var(--bg-glass); border: var(--border-glass); padding: 24px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(8px); transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; } .timeline-card.active .timeline-card-content { border-color: var(--accent-cyan-glow); background: rgba(var(--depth-4-rgb), 0.85); box-shadow: 0 10px 30px rgba(var(--accent-cyan-rgb), 0.08); transform: translateY(-8px); } .timeline-card:hover .timeline-card-content { border-color: rgba(var(--accent-cyan-rgb), 0.3); transform: translateY(-4px); } .timeline-date { font-size: var(--fs-500); font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .timeline-card-content h3 { font-size: var(--fs-800); font-weight: 700; margin-bottom: 4px; color: var(--text-primary); } .timeline-institution { font-size: var(--fs-500); color: var(--accent-violet); margin-bottom: 12px; font-weight: 600; } .timeline-card-content p { color: var(--text-secondary); font-size: var(--fs-600); line-height: 1.45; margin-bottom: 0; text-align: left; } /* Nav buttons style */ .timeline-nav-btn { position: absolute; top: 53px; /* centro de la franja del dial */ transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(var(--depth-4-rgb), 0.6); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; backdrop-filter: blur(8px); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .timeline-nav-btn.prev { left: 10px; } .timeline-nav-btn.next { right: 10px; } .timeline-nav-btn:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #000; box-shadow: 0 0 15px var(--accent-cyan); } .timeline-nav-btn:disabled { opacity: 0.2; cursor: not-allowed; background: rgba(var(--depth-4-rgb), 0.3); color: var(--text-muted); border-color: rgba(255, 255, 255, 0.02); box-shadow: none; } .nav-arrow { font-size: var(--fs-900); font-weight: bold; line-height: 1; } /* Media assets inside timeline card */ .timeline-media-assets { margin-top: 14px; width: 100%; overflow: hidden; border-radius: 8px; } .timeline-press-clipping { width: 100%; height: auto; max-height: 120px; object-fit: cover; cursor: pointer; transition: transform 0.3s ease; } .timeline-press-clipping:hover { transform: scale(1.05); } /* Social Impact / Events */ .impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .impact-card { background: var(--bg-secondary); border: var(--border-glass); border-radius: 20px; overflow: hidden; transition: var(--transition-smooth); } .impact-card:hover { transform: translateY(-6px); border-color: var(--accent-cyan); box-shadow: var(--glow-shadow); } .impact-media { width: 100%; height: 220px; overflow: hidden; } .impact-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .impact-card:hover .impact-media img { transform: scale(1.04); } .impact-info { padding: 30px; } .impact-info h3 { font-size: var(--fs-1000); font-weight: 800; margin-bottom: 12px; } .impact-info p { color: var(--text-secondary); font-size: var(--fs-700); margin-bottom: 0; text-align: left; } /* Contact Section & Form */ .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; } .contact-info-panel { display: flex; flex-direction: column; justify-content: space-between; } .contact-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; } .contact-card { background: var(--bg-glass); border: var(--border-glass); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 20px; transition: var(--transition-smooth); } .contact-card:hover { transform: translateX(6px); border-color: var(--accent-cyan); background: var(--accent-tint-1); } .contact-icon { width: 50px; height: 50px; border-radius: 10px; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-1000); color: var(--accent-cyan); border: var(--border-glass); } .contact-card:hover .contact-icon { background: var(--accent-cyan); color: var(--text-primary); box-shadow: 0 0 15px var(--accent-cyan-glow); } .contact-card-info h3 { font-size: var(--fs-500); color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } .contact-card-info p { font-size: var(--fs-800); font-weight: 600; } .contact-form { background: var(--bg-secondary); border: var(--border-glass); padding: 40px; border-radius: 20px; box-shadow: var(--glow-shadow); } .form-group { margin-bottom: 24px; } .form-group label { display: block; font-size: var(--fs-600); font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); } .form-control { width: 100%; background: var(--bg-primary); border: 1px solid rgba(255, 255, 255, 0.1); padding: 14px 18px; border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: var(--fs-600); transition: var(--transition-fast); } .form-control:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.2); background: var(--bg-tertiary); } textarea.form-control { resize: vertical; min-height: 120px; } /* Footer styling */ footer { border-top: var(--border-glass); background: var(--bg-secondary); padding: 60px 24px 30px; } .footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-socials { display: flex; gap: 16px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-primary); border: var(--border-glass); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: var(--fs-800); transition: var(--transition-smooth); } .social-icon:hover { background: var(--accent-gradient); color: var(--text-primary); transform: translateY(-3px); box-shadow: var(--glow-shadow); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-500); color: var(--text-muted); flex-wrap: wrap; gap: 16px; } /* El subrayado distingue el enlace del texto del pie sin depender solo del color. El relleno vertical lleva el objetivo táctil a los 24 px mínimos en móvil. */ .footer-privacy-link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; padding: 3px 4px; } .footer-privacy-link:hover, .footer-privacy-link:focus-visible { color: var(--accent-cyan); } /* Video Lightbox Player Modal */ .lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(var(--depth-1-rgb), 0.95); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(8px); } .lightbox.active { opacity: 1; pointer-events: auto; } .lightbox-content { position: relative; width: 90%; max-width: 1000px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(var(--accent-cyan-rgb), 0.15); border: var(--border-glass); transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .lightbox.active .lightbox-content { transform: scale(1); } .lightbox-content video { width: 100%; height: 100%; display: block; } .lightbox-close { position: absolute; top: -50px; right: 0; background: none; border: none; color: var(--text-primary); font-size: 2rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition-fast); } .lightbox-close:hover { color: var(--accent-cyan); } .lightbox-close span { font-size: var(--fs-600); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Lightbox Details Overlay Styling */ .lightbox-details { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(var(--depth-2-rgb), 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 18px 24px; z-index: 10; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; } .details-header { display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: var(--fs-300); } .details-category { color: var(--accent-cyan); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; } .details-meta { color: var(--text-muted); } .details-title { font-size: var(--fs-900); font-weight: 800; color: var(--text-primary); margin: 0; } .details-desc { font-size: var(--fs-500); color: #cbd5e1; margin: 0; line-height: 1.4; } @media (max-width: 768px) { .lightbox-details { padding: 12px 18px; } .details-title { font-size: var(--fs-600); } .details-desc { display: none; } } /* Toast Notifications */ .toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 1100; pointer-events: none; } .toast { background: var(--bg-secondary); border: 1px solid var(--accent-cyan); border-left: 4px solid var(--accent-cyan); color: var(--text-primary); padding: 16px 24px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); pointer-events: auto; display: flex; align-items: center; gap: 12px; transform: translateY(100px); opacity: 0; transition: var(--transition-smooth); } .toast.show { transform: translateY(0); opacity: 1; } /* Scroll reveal helper classes */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Responsive Breakpoints */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-photo-wrapper { max-width: 450px; margin: 0 auto; } .toolkit-grid { grid-template-columns: repeat(2, 1fr); } } /* Intermediate screen scale to prevent header wrapping */ @media (min-width: 1151px) and (max-width: 1280px) { /* Breakpoint ampliado hasta 1280px para evitar que el menú colapse cerca del logo */ .nav-container { padding: 16px 20px; } .logo { font-size: var(--fs-800); gap: 4px; } .logo span { font-size: var(--fs-300); } .nav-links { gap: 14px; } .nav-links a { font-size: var(--fs-500); } .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 */ } .nav-links { display: none; /* Handled dynamically by JS */ } .burger { display: block; } /* Mobile menu overlay */ .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; } .hero { margin-top: 64px; } } @media (max-width: 992px) { .hero { flex-direction: column-reverse; text-align: center; padding-top: 20px; justify-content: center; } .hero-desc { margin: 0 auto 40px; } .hero-cta { justify-content: center; } .hero-img-container { width: 280px; height: 280px; } .section-title { font-size: 2rem; } .portfolio-grid { grid-template-columns: 1fr; } .toolkit-grid { grid-template-columns: 1fr; } .timeline-slider-wrapper { --tl-card-w: 290px; } .timeline-nav-btn { display: none; /* Hide nav arrows on touch devices to favor swipe */ } .timeline-track { gap: 20px; } .timeline-dial { margin: 0 5%; } .impact-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .lightbox-close { top: -40px; } } /* Language Switcher Styling */ .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); } /* Translate animation classes */ .lang-transition { transition: opacity 0.2s ease, transform 0.2s ease; } .fade-out-text { opacity: 0 !important; transform: translateY(3px); } @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); } } /* Neural Connection Background Canvas */ #neuralCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; /* Place below content layers but above backgrounds */ pointer-events: none; } /* Hero Media Wrapper (stacks portrait and console mockup) */ .hero-media-wrapper { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 440px; } /* Futuristic Console Terminal Mockup */ .hero-console { width: 100%; background: rgba(var(--depth-2-rgb), 0.8); border: var(--border-glass); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-cyan-rgb), 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; } .console-header { background: var(--surface-2); padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .console-dots { display: flex; gap: 6px; } .console-dots .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .console-dots .dot.red { background: #ef4444; } .console-dots .dot.yellow { background: #eab308; } .console-dots .dot.green { background: var(--accent-green); } .console-title { font-family: 'Courier New', Courier, monospace; font-size: var(--fs-400); color: var(--text-muted); font-weight: 600; } .console-body { padding: 16px 20px; font-family: 'Courier New', Courier, monospace; font-size: var(--fs-500); min-height: 155px; max-height: 180px; overflow-y: auto; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; } .console-line { color: var(--text-secondary); } .console-line.text-cyan { color: var(--accent-cyan); text-shadow: 0 0 5px rgba(var(--accent-cyan-rgb), 0.5); } .console-line.text-violet { color: var(--accent-violet); text-shadow: 0 0 5px rgba(139, 92, 246, 0.5); } .console-line.text-green { color: var(--accent-green); text-shadow: 0 0 5px rgba(34, 197, 94, 0.5); } .console-line.text-yellow { color: #eab308; } /* Scramble effect dynamic styling */ .scramble-text { transition: text-shadow 0.3s ease; } .scramble-text.scrambling { color: var(--accent-cyan); text-shadow: 0 0 10px var(--accent-cyan-glow); letter-spacing: -0.04em; /* Compress letters slightly during scramble to prevent wrapping jumps */ } @keyframes spin { 100% { transform: rotate(360deg); } } /* Responsive adjustments for new elements */ @media (max-width: 1024px) { .svg-map-wrapper { grid-template-columns: 1fr; gap: 20px; } .skill-tooltip-card { min-height: 120px; } } @media (max-width: 992px) { .hero-media-wrapper { max-width: 100%; } .hero-console { display: none; } } /* Mojo Viewfinder Overlay */ .mojo-viewfinder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .portfolio-card:hover .mojo-viewfinder { opacity: 1; } /* Viewfinder Brackets */ .vf-corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid rgba(var(--accent-cyan-rgb), 0.55); pointer-events: none; } .vf-top-left { top: 12px; left: 12px; border-right: none; border-bottom: none; } .vf-top-right { top: 12px; right: 12px; border-left: none; border-bottom: none; } .vf-bottom-left { bottom: 12px; left: 12px; border-right: none; border-top: none; } .vf-bottom-right { bottom: 12px; right: 12px; border-left: none; border-top: none; } /* Viewfinder info elements */ .vf-top-info { display: flex; justify-content: space-between; align-items: center; width: 100%; font-family: 'Courier New', Courier, monospace; font-size: var(--fs-400); color: var(--text-primary); text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); font-weight: 700; margin-top: 4px; } .vf-rec-indicator { display: flex; align-items: center; gap: 6px; background: rgba(var(--depth-2-rgb), 0.6); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.4); } .vf-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; animation: recPulse 1s ease-in-out infinite; box-shadow: 0 0 8px #ef4444; } @keyframes recPulse { 0%, 100% { opacity: 0.2; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .vf-resolution { display: flex; align-items: center; background: rgba(var(--depth-2-rgb), 0.6); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); } /* Equalizer audio spectrogram */ .vf-audio-spectrogram { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 24px; margin-bottom: 4px; background: rgba(var(--depth-2-rgb), 0.4); padding: 4px 10px; border-radius: 6px; width: max-content; margin-left: auto; margin-right: auto; border: 1px solid rgba(255, 255, 255, 0.05); } .vf-bar { width: 3px; height: 4px; border-radius: 1px; } /* Solo animar las barras cuando el video se esté previsualizando */ .portfolio-card.is-previewing .vf-bar { animation: audioBar 1.2s ease-in-out infinite alternate; } .vf-bar:nth-child(odd) { background: var(--accent-green); box-shadow: 0 0 5px rgba(34, 197, 94, 0.6); } .vf-bar:nth-child(even) { background: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.6); } /* Add random variations to each equalizer bar */ .vf-bar:nth-child(1) { height: 6px; animation-duration: 0.6s; } .vf-bar:nth-child(2) { height: 14px; animation-duration: 0.9s; animation-delay: -0.2s; } .vf-bar:nth-child(3) { height: 10px; animation-duration: 0.75s; animation-delay: -0.5s; } .vf-bar:nth-child(4) { height: 18px; animation-duration: 1.1s; animation-delay: -0.1s; } .vf-bar:nth-child(5) { height: 12px; animation-duration: 0.8s; animation-delay: -0.3s; } .vf-bar:nth-child(6) { height: 8px; animation-duration: 0.7s; animation-delay: -0.6s; } .vf-bar:nth-child(7) { height: 16px; animation-duration: 1.0s; animation-delay: -0.4s; } .vf-bar:nth-child(8) { height: 5px; animation-duration: 0.5s; animation-delay: -0.7s; } @keyframes audioBar { 0% { height: 2px; } 100% { height: 20px; } } /* ========================================================================== AI Fake News Verifier Widget Styling ========================================================================== */ /* Status indicator dot on preset cards */ .preset-status-dot { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-4); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; flex-shrink: 0; position: relative; display: grid; place-items: center; } .preset-status-dot::after { color: var(--text-primary); font-family: var(--font-heading); font-size: var(--fs-400); font-weight: 800; letter-spacing: 0.04em; } @keyframes pulse-dot { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 1; } } /* Guided case preview */ .lock-glyph { width: 10px; height: 8px; border: 1.5px solid var(--accent-amber); border-radius: 2px; position: relative; flex: 0 0 auto; } .lock-glyph::before { content: ''; width: 6px; height: 6px; border: 1.5px solid var(--accent-amber); border-bottom: 0; border-radius: 6px 6px 0 0; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); } .verifier-highlight-overlay { position: relative; width: 100%; height: auto; font-family: var(--font-body); font-size: var(--fs-600); line-height: 1.5; padding: 12px; margin: 0; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; } .verifier-highlight-overlay { z-index: 1; color: transparent !important; background: transparent; overflow-y: auto; scrollbar-width: none; /* Ocultar barra en firefox */ } .verifier-highlight-overlay::-webkit-scrollbar { display: none; /* Ocultar barra en chrome/safari */ } /* Color codes for dinamic highlighting */ .verifier-highlight-overlay mark { border-radius: 3px; color: transparent !important; margin: 0; padding: 0 1px; } .verifier-highlight-overlay mark.hl-clickbait { background: rgba(255, 0, 85, 0.3) !important; border-bottom: 2px solid #ff0055; box-shadow: 0 0 10px rgba(255, 0, 85, 0.2); } .verifier-highlight-overlay mark.hl-caps { background: var(--accent-violet-glow) !important; border-bottom: 2px solid var(--accent-violet); box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); } .verifier-highlight-overlay mark.hl-excl { background: rgba(245, 158, 11, 0.3) !important; border-bottom: 2px solid var(--accent-amber); box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); } /* Metrics Breakdown Styles */ .verifier-metrics-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; margin-bottom: 20px; width: 100%; } .metric-progress-item { display: flex; flex-direction: column; gap: 6px; } .metric-info { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: var(--fs-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } .metric-val { color: var(--text-primary); font-family: monospace; } .metric-bar-bg { width: 100%; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.02); } .metric-bar-fill { height: 100%; width: 0%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .metric-bar-fill.fill-red { background: #ff0055; box-shadow: 0 0 8px rgba(255, 0, 85, 0.4); } .metric-bar-fill.fill-violet { background: var(--accent-violet); box-shadow: 0 0 8px rgba(139, 92, 246, 0.4); } .metric-bar-fill.fill-cyan { background: var(--accent-cyan); box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.4); } .metric-bar-fill.fill-amber { background: var(--accent-amber); box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); } /* Scanning effect overlay */ @keyframes verifierTextScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* Verifier Output Panel */ @media (min-width: 993px) { } /* Active results content */ /* Scanning visualization bar */ @keyframes verifierScan { 0% { left: 0%; } 50% { left: 100%; } 100% { left: 0%; } } /* Score chart & details list */ .score-container { display: flex; justify-content: center; padding-top: 2px; } .radial-progress-bar { position: relative; width: 100px; height: 100px; } .radial-progress-bar svg { width: 100%; height: 100%; transform: rotate(-90deg); } .radial-progress-bar circle { fill: none; stroke-width: 8px; } .radial-progress-bar .circle-bg { stroke: rgba(255, 255, 255, 0.05); } .radial-progress-bar .circle-progress { stroke: var(--accent-cyan); stroke-linecap: round; stroke-dasharray: 251.2; /* 2 * PI * r (r=40) */ stroke-dashoffset: 251.2; /* hidden by default */ transition: stroke-dashoffset 1.5s cubic-bezier(0.1, 0.8, 0.2, 1); } .radial-progress-bar .circle-progress.green-progress { stroke: var(--accent-green); } .radial-progress-bar .circle-progress.yellow-progress { stroke: #eab308; } .radial-progress-bar .circle-progress.red-progress { stroke: #ef4444; } .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; } @keyframes verifierFadeInUp { to { opacity: 1; transform: translateY(0); } } /* Final Verdict Banner */ /* Responsive queries for verifier */ @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 576px) { } /* ========================================================================== Premium Interactive Animation Upgrades ========================================================================== */ /* 1. Neon Scroll Progress Bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(to right, var(--accent-cyan), var(--accent-violet)); box-shadow: 0 0 8px var(--accent-cyan-glow); z-index: 10001; /* High enough to overlay navigation */ transition: width 0.1s ease; } /* 2. Portrait Laser Facial Scan Hover Effect */ .facial-scan-line { position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: 2px; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan); z-index: 10; opacity: 0; pointer-events: none; border-radius: 2px; } .hero-img-container:hover .facial-scan-line { animation: portraitScan 3s linear infinite; opacity: 1; } .facial-scan-grid { position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 21px; background: radial-gradient(circle, transparent 40%, rgba(var(--accent-cyan-rgb), 0.06) 70%); border: 1px dashed rgba(var(--accent-cyan-rgb), 0.15); z-index: 9; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .hero-img-container:hover .facial-scan-grid { opacity: 1; animation: gridPulse 2s infinite ease-in-out; } @keyframes portraitScan { 0% { top: 3px; } 50% { top: calc(100% - 5px); } 100% { top: 3px; } } @keyframes gridPulse { 0%, 100% { border-color: rgba(var(--accent-cyan-rgb), 0.15); box-shadow: inset 0 0 10px rgba(var(--accent-cyan-rgb), 0.02); } 50% { border-color: rgba(var(--accent-cyan-rgb), 0.35); box-shadow: inset 0 0 25px rgba(var(--accent-cyan-rgb), 0.12); } } /* 3. About Stats Dashboard Counters */ .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; /* Spans both columns of the bio grid */ gap: 24px; margin-top: 50px; background: var(--bg-glass); border: var(--border-glass); border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); width: 100%; contain: layout; /* Isolate layout shifts from parent and surrounding sections */ } .stat-item { position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; top: 20%; right: -12px; height: 60%; width: 1px; background: var(--surface-4); } .stat-num { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; letter-spacing: -0.02em; text-shadow: 0 0 20px rgba(var(--accent-cyan-rgb), 0.1); font-variant-numeric: tabular-nums; /* Monospace digit width prevents text shifts */ display: block; min-height: 3.5rem; /* Reserve vertical layout space to avoid shifting height */ line-height: 1.25; } .stat-label { font-size: var(--fs-500); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 992px) { .about-stats { grid-template-columns: repeat(2, 1fr); gap: 35px; padding: 30px 20px; } .stat-item:nth-child(2)::after { display: none; } .stat-item::after { height: 50%; } } @media (max-width: 480px) { .about-stats { grid-template-columns: 1fr; gap: 25px; } .stat-item::after { display: none; } } @keyframes verifierVerdictReveal { to { opacity: 1; transform: scale(1); } } /* --- Added Canva Integration Styles --- */ .hero-console-row { display: flex; align-items: center; gap: 20px; width: 100%; margin-top: 15px; } .hero-cyborg-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--accent-cyan); overflow: hidden; background: rgba(var(--depth-2-rgb), 0.6); box-shadow: 0 0 10px var(--accent-cyan-glow); flex-shrink: 0; position: relative; animation: avatarPulse 4s infinite alternate; transition: var(--transition-smooth); } .hero-cyborg-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); } .avatar-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 15px rgba(var(--accent-cyan-rgb), 0.4); pointer-events: none; } @keyframes avatarPulse { 0% { border-color: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan-glow); } 100% { border-color: var(--accent-violet); box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); } } @media (max-width: 992px) { .hero-console-row { display: none; } } .academic-publication { border-color: var(--accent-violet) !important; } .academic-publication::before { background: var(--accent-violet) !important; } .timeline-media-assets { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; } .timeline-book-cover, .timeline-event-photo, .timeline-press-clipping { height: 120px; width: auto; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: var(--transition-smooth); } .timeline-book-cover:hover, .timeline-event-photo:hover, .timeline-press-clipping:hover { transform: scale(1.05); border-color: var(--accent-violet); box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); } .impact-extra-photo { position: absolute; bottom: 12px; right: 12px; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: var(--transition-smooth); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .impact-extra-photo:hover { transform: scale(1.1); border-color: var(--accent-pink); box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); } .impact-extra-photo img { width: 100%; height: 100%; object-fit: cover; } #lightboxImage { display: none; max-width: 90%; max-height: 80vh; border-radius: 8px; box-shadow: 0 0 30px rgba(var(--accent-cyan-rgb), 0.3); border: 1px solid rgba(255, 255, 255, 0.15); } /* Image lightbox content adaptation styles */ .lightbox-content.image-mode { aspect-ratio: auto; max-width: 90vw; max-height: 90vh; width: auto; height: auto; background: transparent; box-shadow: none; border: none; } .lightbox-content.image-mode img { display: block; max-width: 90vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(var(--accent-cyan-rgb), 0.15); } .zoom-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--depth-2-rgb), 0.8); border: 1px solid var(--accent-pink); color: var(--accent-pink); display: flex; align-items: center; justify-content: center; font-size: var(--fs-900); opacity: 0; transition: var(--transition-smooth); z-index: 2; box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); } .portfolio-card:hover .zoom-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ===== NEW SECTIONS: Reconeixements, Show More, CTA ===== */ /* ---------- Reconeixements Section ---------- */ .reconeixements { text-align: center; } .reconeixements .section-tag, .reconeixements .section-title { text-align: center; } /* Esta seccion estaba repartida en dos columnas con volumenes muy dispares y no funcionaba en ninguno de los dos lados: - La izquierda eran dos tarjetas de 205px de alto estiradas a 1.062 para igualar a la derecha: mas de 600px de hueco vacio. - La derecha metia una rejilla de cuatro logotipos, que necesita 743px, en una columna de 574. Se desbordaba por 120px. Estrechar o ensanchar una columna solo movia el problema de sitio, porque el reparto en si era el error. Se deshace: cada bloque ocupa el ancho completo y reparte lo suyo por dentro, donde si hay sitio de sobra. */ .reconeixements-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 50px; justify-items: stretch; } /* Los dos reconocimientos, uno al lado del otro en vez de apilados. */ .achievement-cards-row { display: grid; /* Las tarjetas llevan max-width: 500px, pero las celdas median 564px: cada tarjeta quedaba descolgada al borde izquierdo de su celda y el par entero parecia arrimado a la izquierda con un vacio a la derecha. Limitando la celda al ancho real de la tarjeta y centrando el conjunto, el par queda equilibrado bajo el titulo. */ grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: center; gap: 24px; align-items: stretch; } .achievement-card { display: flex; align-items: flex-start; gap: 24px; background: var(--bg-glass); border: var(--border-glass); border-radius: 16px; padding: 24px; max-width: 500px; width: 100%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--transition-smooth); text-align: left; position: relative; overflow: hidden; } .achievement-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-gradient); opacity: 0; transition: var(--transition-smooth); } .achievement-card:hover { transform: translateY(-6px); border-color: var(--accent-cyan); box-shadow: 0 8px 32px rgba(var(--accent-cyan-rgb), 0.15), 0 0 20px rgba(139, 92, 246, 0.08); } .achievement-card:hover::before { opacity: 1; } /* Warm accent for Gold Award achievement card */ .achievement-card.award-gold { border-color: rgba(245, 158, 11, 0.25); } .achievement-card.award-gold::before { background: linear-gradient(90deg, var(--accent-amber), var(--accent-pink)); } .achievement-card.award-gold:hover { border-color: var(--accent-amber); box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15), 0 0 20px rgba(236, 72, 153, 0.08); background: rgba(245, 158, 11, 0.04); } .achievement-card.award-gold .achievement-tag { color: var(--accent-amber) !important; } .achievement-card.award-gold:hover h3 { background: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-pink) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .achievement-card img { max-height: 200px; width: 160px; border-radius: 12px; object-fit: cover; cursor: pointer; flex-shrink: 0; transition: var(--transition-smooth); } .achievement-card img:hover { transform: scale(1.04); box-shadow: 0 4px 20px rgba(var(--accent-cyan-rgb), 0.25); } .achievement-card-content { display: flex; flex-direction: column; gap: 10px; } .achievement-card h3 { font-family: var(--font-heading); font-size: var(--fs-900); font-weight: 700; color: var(--text-primary); transition: var(--transition-fast); } .achievement-card:hover h3 { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .achievement-card p { color: var(--text-secondary); font-size: var(--fs-600); line-height: 1.6; margin: 0; } .achievement-card .achievement-tag { display: inline-block; font-size: var(--fs-500); font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } /* ---------- Portfolio Show More ---------- */ .portfolio-show-more-wrapper { text-align: center; margin-top: 40px; position: relative; } .portfolio-show-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); border: 1px solid rgba(255, 255, 255, 0.15); background: var(--surface-2); color: var(--text-primary); backdrop-filter: blur(10px); font-family: var(--font-body); font-size: var(--fs-700); } .portfolio-show-more:hover { border-color: var(--accent-cyan); background: var(--accent-tint-1); transform: translateY(-3px); } .portfolio-show-more i, .portfolio-show-more .icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .portfolio-show-more.expanded i, .portfolio-show-more.expanded .icon { transform: rotate(180deg); } .portfolio-hidden { display: none; } .portfolio-hidden.portfolio-visible { display: flex; flex-direction: column; animation: portfolioFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes portfolioFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .portfolio-fade-overlay { position: relative; width: 100%; height: 80px; margin-top: -80px; margin-bottom: 0; background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 100%); pointer-events: none; z-index: 1; transition: opacity 0.4s ease; } .portfolio-fade-overlay.hidden { opacity: 0; } /* ---------- CTA Banner ---------- */ .cta-banner { width: 100%; padding: 60px 30px; text-align: center; background: var(--bg-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--border-glass); border-radius: 20px; position: relative; overflow: hidden; margin: 60px auto; max-width: 1200px; } .cta-banner::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 21px; padding: 1px; background: var(--accent-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ctaBorderGlow 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes ctaBorderGlow { 0% { opacity: 0.4; filter: hue-rotate(0deg); } 100% { opacity: 0.9; filter: hue-rotate(40deg); } } .cta-banner h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--text-primary); margin: 0; position: relative; z-index: 1; } .cta-banner p { color: var(--text-secondary); font-size: var(--fs-800); margin: 15px 0 30px; max-width: 600px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .cta-banner .btn { position: relative; z-index: 1; } /* ---------- Responsive: Achievement Cards & CTA ---------- */ @media (max-width: 768px) { .reconeixements-grid { grid-template-columns: 1fr; gap: 24px; } .achievement-card { flex-direction: column; align-items: center; text-align: center; max-width: 100%; } .achievement-card img { width: 100%; max-height: 220px; } .achievement-card-content { align-items: center; } .cta-banner { padding: 40px 20px; margin: 40px 16px; border-radius: 16px; } .cta-banner h3 { font-size: var(--fs-1000); } .cta-banner p { font-size: var(--fs-600); margin: 12px 0 24px; } } /* Final cascade guards for the interactive pass */ .portfolio-card.card-tilt-active, .achievement-card.card-tilt-active, .contact-card.card-tilt-active { transform: perspective(950px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px); } .portfolio-media:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 4px; } @media (max-width: 680px) { /* .portfolio-card:first-child { grid-template-columns: 1fr; } */ } @media (max-width: 768px) { .cta-banner { width: calc(100% - 32px); margin-left: auto; margin-right: auto; } } /* ---------- Mobile Interaction Refinements: Radio + Verifier ---------- */ @media (max-width: 768px) { .radio-section { padding-top: 58px; padding-bottom: 58px; } .radio-container { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; } .radio-player-console { order: -1; position: sticky; top: 74px; z-index: 12; padding: 14px; border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48), 0 0 22px rgba(var(--accent-cyan-rgb), 0.1); } .radio-console-body { gap: 12px; } .vu-meters-container { display: none; } .console-now-playing { padding: 12px; gap: 7px; } .now-playing-header, .now-playing-meta { gap: 10px; } .now-playing-title { font-size: var(--fs-600); line-height: 1.3; } .now-playing-program { font-size: var(--fs-100); } .now-playing-theme { max-width: 44%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .radio-play-btn { min-height: 46px; padding: 12px 14px; border-radius: 9px; } .radio-playlist-wrapper { height: auto; overflow: visible; border-radius: 14px; } .playlist-header { padding: 14px 16px 10px; } .playlist-title { font-size: var(--fs-700); } .radio-playlist { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px 16px; scroll-padding: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .radio-playlist::-webkit-scrollbar { height: 4px; width: auto; } .playlist-track { align-items: flex-start; flex: 0 0 min(72vw, 260px); min-height: 96px; padding: 14px; scroll-snap-align: start; transform: none; } .playlist-track:hover { transform: none; } .track-number { min-width: 28px; } .track-title { font-size: var(--fs-600); line-height: 1.25; } .track-wave-icon { opacity: 1; } .radial-progress-bar { height: 82px; width: 82px; } } @media (max-width: 420px) { .radio-player-console { top: 68px; } .playlist-track { flex-basis: 72vw; } .radial-progress-bar { height: 76px; width: 76px; } } @media (max-width: 480px) { .verifier-metrics-breakdown { grid-template-columns: 1fr; } .score-container { justify-content: center; } } /* ---------- Cyberpunk Radio Section ---------- */ .radio-section { position: relative; width: 100%; overflow: hidden; isolation: isolate; } .radio-section::before { content: ''; position: absolute; inset: 70px 0 auto; height: 420px; background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 54px 54px; opacity: 0.28; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); pointer-events: none; z-index: -1; } .radio-signal-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin: -10px auto 30px; } .radio-signal-pill { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(var(--accent-cyan-rgb), 0.035)); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .radio-signal-pill span { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 800; color: var(--accent-amber); background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.28); } .radio-signal-pill strong { min-width: 0; color: var(--text-primary); font-size: var(--fs-500); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-container { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr); gap: 28px; align-items: stretch; margin-top: 0; } /* Playlist Wrapper */ .radio-playlist-wrapper { flex: 1; background: linear-gradient(180deg, rgba(10, 15, 29, 0.78), rgba(10, 15, 29, 0.48)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; height: 520px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26); position: relative; } .radio-playlist-wrapper::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08), transparent 22%, transparent 78%, rgba(236, 72, 153, 0.06)), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px); opacity: 0.35; pointer-events: none; } .playlist-header { padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(var(--depth-2-rgb), 0.62); display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 1; } .playlist-header-main { min-width: 0; } .playlist-title { display: block; font-size: var(--fs-800); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .playlist-subtitle { font-size: var(--fs-500); color: var(--text-muted); } .playlist-live-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(34, 197, 94, 0.32); background: rgba(34, 197, 94, 0.08); color: var(--accent-green); font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 800; letter-spacing: 0.08em; } .playlist-live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 12px rgba(34, 197, 94, 0.75); } .radio-playlist { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; } /* Custom Scrollbar for Playlist */ .radio-playlist::-webkit-scrollbar { width: 6px; } .radio-playlist::-webkit-scrollbar-track { background: transparent; } .radio-playlist::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; } .radio-playlist::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan-glow); } /* Track Row Button */ .playlist-track { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 62px; padding: 12px 14px; background: var(--surface-1); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 12px; color: var(--text-secondary); cursor: pointer; text-align: left; transition: var(--transition-fast); position: relative; overflow: hidden; } .playlist-track::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-cyan); opacity: 0; transition: var(--transition-fast); } .playlist-track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.11), transparent 42%); opacity: 0; transition: var(--transition-fast); pointer-events: none; } .playlist-track:hover { background: var(--surface-3); border-color: rgba(var(--accent-cyan-rgb), 0.2); color: var(--text-primary); transform: translateX(4px); } .playlist-track.active { background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.14), rgba(255, 255, 255, 0.035)); border-color: rgba(var(--accent-cyan-rgb), 0.4); color: var(--text-primary); box-shadow: 0 12px 28px rgba(var(--accent-cyan-rgb), 0.1); } .playlist-track:hover::after, .playlist-track.active::after { opacity: 1; } .playlist-track.active::before { opacity: 1; } .track-number { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-600); font-weight: 700; color: var(--accent-cyan); background: var(--accent-tint-1); border: 1px solid rgba(var(--accent-cyan-rgb), 0.14); opacity: 0.8; position: relative; z-index: 1; } .playlist-track.active .track-number { opacity: 1; color: var(--text-primary); background: var(--accent-gradient); box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.25); } .track-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; z-index: 1; } .track-title { font-size: var(--fs-600); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .track-date { font-size: var(--fs-400); color: var(--text-muted); } /* Wave Icon in track list */ .track-wave-icon { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 18px; opacity: 0; transition: opacity 0.3s ease; position: relative; z-index: 1; } .playlist-track.active .track-wave-icon { opacity: 1; } .track-wave-icon span { display: block; width: 2px; background: var(--accent-cyan); border-radius: 1px; } .playlist-track.active .track-wave-icon span { animation: miniWave 1.2s ease-in-out infinite alternate; } .playlist-track.active .track-wave-icon span:nth-child(1) { height: 100%; animation-delay: -0.4s; } .playlist-track.active .track-wave-icon span:nth-child(2) { height: 60%; animation-delay: -0.2s; } .playlist-track.active .track-wave-icon span:nth-child(3) { height: 80%; animation-delay: 0s; } @keyframes miniWave { 0% { height: 20%; } 100% { height: 100%; } } /* Radio Player Console */ .radio-player-console { flex: 1; background: linear-gradient(145deg, rgba(13, 18, 33, 0.96), rgba(8, 12, 22, 0.72)), radial-gradient(circle at 18% 0%, rgba(var(--accent-cyan-rgb), 0.16), transparent 36%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 18px 20px 20px; display: flex; flex-direction: column; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; } .radio-player-console::before { content: ''; position: absolute; inset: -1px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.28), transparent 46%, rgba(236, 72, 153, 0.18)); z-index: -1; pointer-events: none; } .radio-player-console::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 44%, transparent 56%); opacity: 0; transform: translateX(-120%); pointer-events: none; } .radio-player-console.playing::after { animation: radioSignalSweep 3.4s ease-in-out infinite; } @keyframes radioSignalSweep { 0% { opacity: 0; transform: translateX(-120%); } 30% { opacity: 0.35; } 62% { opacity: 0; transform: translateX(120%); } 100% { opacity: 0; transform: translateX(120%); } } .radio-console-body { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: space-between; position: relative; z-index: 1; } .radio-console-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 2px; font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .radio-console-topline strong { color: var(--accent-amber); font-size: var(--fs-300); text-shadow: 0 0 10px rgba(245, 158, 11, 0.24); } /* Radio VU Meters Control Styles */ .vu-meters-container { display: flex; gap: 16px; background: linear-gradient(180deg, rgba(7, 10, 19, 0.7), rgba(5, 7, 12, 0.46)); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px 16px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4); } .vu-meter { flex: 1; display: flex; flex-direction: column; position: relative; background: rgba(var(--depth-1-rgb), 0.8); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 0; height: 90px; overflow: hidden; } .vu-arc { width: 100%; height: 100%; } .vu-needle { position: absolute; bottom: 8px; left: 50%; width: 1px; height: 55px; background: #ff0055; box-shadow: 0 0 6px #ff0055, 0 0 10px #ff0055; transform-origin: bottom center; transform: translateX(-50%) rotate(-45deg); z-index: 2; pointer-events: none; } .vu-needle::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #ff0055; } .vu-label { font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 800; color: rgba(var(--accent-cyan-rgb), 0.45); position: absolute; bottom: 4px; left: 8px; } /* Compact Now Playing Card */ .console-now-playing { background: linear-gradient(180deg, rgba(7, 10, 19, 0.82), rgba(7, 10, 19, 0.62)), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 6px); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(0, 0, 0, 0.22); } .now-playing-header { display: flex; justify-content: space-between; align-items: center; } .now-playing-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 700; color: var(--accent-cyan); letter-spacing: 0.08em; } .now-playing-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); animation: blink 1.5s step-start infinite; } @keyframes blink { 50% { opacity: 0; } } .now-playing-freq { font-family: var(--font-mono); font-size: var(--fs-500); font-weight: 700; color: var(--accent-amber); text-shadow: 0 0 8px rgba(245, 158, 11, 0.3); letter-spacing: 0.05em; } .now-playing-title { font-size: var(--fs-800); font-weight: 700; color: var(--text-primary); line-height: 1.35; text-shadow: 0 0 6px rgba(255, 255, 255, 0.08); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .radio-spectrum { height: 18px; position: relative; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(var(--accent-cyan-rgb), 0.24), transparent), rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.055); } .radio-spectrum::before { content: ''; position: absolute; inset: 50% 10px auto; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent); opacity: 0.58; } .radio-spectrum::after { content: ''; position: absolute; top: 50%; left: -32%; width: 32%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-amber), transparent); opacity: 0; filter: blur(0.5px); } .radio-spectrum span { display: none; } .radio-player-console.playing .radio-spectrum::after { animation: radioSignalLine 2.4s ease-in-out infinite; } @keyframes radioSignalLine { 0% { left: -32%; opacity: 0; } 18%, 72% { opacity: 0.9; } 100% { left: 100%; opacity: 0; } } .now-playing-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(255, 255, 255, 0.06); padding-top: 6px; } .now-playing-program { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--text-muted); font-weight: 600; letter-spacing: 0.1em; } .now-playing-theme { font-size: var(--fs-300); color: var(--accent-cyan); font-weight: 600; text-shadow: 0 0 5px rgba(var(--accent-cyan-rgb), 0.15); } /* CTA Play Button Row */ .radio-controls-row { display: flex; gap: 12px; width: 100%; } .radio-preview-btn { border: 1px solid rgba(var(--accent-cyan-rgb), 0.42) !important; color: var(--accent-cyan) !important; background: var(--accent-tint-2) !important; cursor: pointer; } .radio-preview-btn:hover { background: var(--accent-tint-3) !important; box-shadow: 0 4px 15px rgba(var(--accent-cyan-rgb), 0.2); transform: translateY(-2px); } .radio-preview-btn.active { color: var(--text-primary) !important; background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.22), rgba(34, 197, 94, 0.12)) !important; border-color: rgba(34, 197, 94, 0.42) !important; box-shadow: 0 8px 22px rgba(var(--accent-cyan-rgb), 0.2); } .radio-preview-btn, .radio-play-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; padding: 14px; border-radius: 10px; text-decoration: none; font-size: var(--fs-600); transition: var(--transition-smooth); } .radio-play-btn { background: var(--accent-gradient); box-shadow: 0 4px 20px rgba(var(--accent-cyan-rgb), 0.3); border: none; color: var(--text-primary); position: relative; overflow: hidden; } .radio-play-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: translateX(-120%); transition: transform 0.7s ease; pointer-events: none; } .radio-play-btn span, .radio-preview-btn span { position: relative; z-index: 1; } .radio-play-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(var(--accent-cyan-rgb), 0.5); } .radio-play-btn:hover::after { transform: translateX(120%); } .play-icon { font-size: var(--fs-600); } /* Responsiveness for Radio Section */ @media (max-width: 992px) { .radio-signal-strip { grid-template-columns: 1fr; max-width: 520px; margin-bottom: 24px; } .radio-container { grid-template-columns: 1fr; gap: 24px; } .radio-playlist-wrapper { height: 350px; } .radio-player-console { padding: 16px; } .vu-meter { height: 70px; } .vu-needle { height: 44px; } .now-playing-title { font-size: var(--fs-700); } } @media (max-width: 768px) { .radio-signal-strip { gap: 10px; margin-top: -4px; } .radio-signal-pill { min-height: 48px; padding: 10px 12px; } .radio-container { gap: 14px; margin-top: 24px; } .radio-player-console { order: -1; position: sticky; top: 74px; z-index: 12; padding: 14px; border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48), 0 0 22px rgba(var(--accent-cyan-rgb), 0.1); } .radio-console-body { gap: 12px; } .vu-meters-container { display: none; } .console-now-playing { padding: 12px; gap: 7px; } .now-playing-title { font-size: var(--fs-600); line-height: 1.3; } .now-playing-program { font-size: var(--fs-100); } .now-playing-theme { max-width: 44%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .radio-play-btn { min-height: 46px; padding: 12px 14px; border-radius: 9px; } .radio-controls-row { flex-direction: column; gap: 9px; } .radio-playlist-wrapper { height: auto; overflow: visible; border-radius: 14px; } .playlist-header { padding: 14px 16px 10px; align-items: flex-start; } .playlist-title { font-size: var(--fs-700); } .radio-playlist { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px 16px; scroll-padding: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .radio-playlist::-webkit-scrollbar { height: 4px; width: auto; } .playlist-track { align-items: flex-start; flex: 0 0 min(72vw, 260px); min-height: 96px; padding: 14px; scroll-snap-align: start; transform: none; } .playlist-track:hover { transform: none; } .track-number { min-width: 28px; } .track-title { font-size: var(--fs-600); line-height: 1.25; } .track-wave-icon { opacity: 1; } } @media (max-width: 420px) { .radio-signal-pill strong { white-space: normal; } .radio-player-console { top: 68px; } .playlist-track { flex-basis: 78vw; } } /* ========================================================================== Services Section Styles (NEW) ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 20px 0; } @media (max-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .service-card { padding: 24px 20px !important; } } @media (max-width: 500px) { .services-grid { grid-template-columns: 1fr; } } .service-card { position: relative; background: rgba(var(--depth-2-rgb), 0.45); border: 1px solid rgba(var(--accent-cyan-rgb), 0.08); border-radius: 16px; padding: 35px 30px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-sizing: border-box; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); opacity: 0.5; transition: opacity 0.3s; } .service-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-cyan-rgb), 0.35); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--accent-cyan-rgb), 0.1); } .service-card:hover::before { opacity: 1; } .service-icon { font-size: 1.8rem; margin-bottom: 20px; background: var(--accent-tint-2); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(var(--accent-cyan-rgb), 0.15); box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.05); transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); background: var(--accent-tint-3); border-color: rgba(var(--accent-cyan-rgb), 0.4); } .service-card h3 { font-size: var(--fs-900); color: var(--text-primary); margin: 0 0 12px 0; font-weight: 800; letter-spacing: -0.02em; } .service-card p { font-size: var(--fs-600); color: var(--text-secondary); line-height: 1.6; margin: 0 0 24px 0; } .service-link { font-size: var(--fs-600); font-weight: 700; color: var(--accent-cyan); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s, gap 0.2s; } .service-link:hover { color: var(--text-primary); gap: 10px; } /* Radio Progress Bar & Time Tracker */ .radio-progress-container { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; margin-bottom: 6px; } .progress-bar-wrapper { width: 100%; height: 10px; background: var(--surface-3); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 999px; overflow: visible; position: relative; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.42); cursor: pointer; touch-action: none; user-select: none; } .progress-bar-wrapper:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 5px; } .progress-bar-wrapper.is-seeking { cursor: grabbing; } .radio-progress-bar { height: 100%; width: 0%; background: var(--accent-gradient); border-radius: inherit; box-shadow: 0 0 14px rgba(var(--accent-cyan-rgb), 0.42); transition: width 0.1s linear; position: relative; } .radio-progress-bar::after { content: ''; position: absolute; top: 50%; right: 0; width: 14px; height: 14px; border-radius: 50%; transform: translate(50%, -50%); background: var(--text-primary); border: 2px solid var(--accent-cyan); box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.55); opacity: 0; transition: opacity 0.2s ease; } .radio-player-console.playing .radio-progress-bar::after { opacity: 1; } .progress-bar-wrapper:hover .radio-progress-bar::after, .progress-bar-wrapper:focus-visible .radio-progress-bar::after, .progress-bar-wrapper.is-seeking .radio-progress-bar::after { opacity: 1; transform: translate(50%, -50%) scale(1.08); } .radio-time-tracker { display: flex; justify-content: space-between; font-family: monospace; font-size: var(--fs-400); color: var(--text-secondary); } #radioTimeCurrent { color: var(--accent-cyan); font-weight: 600; } #radioTimeDuration { color: var(--text-muted); } /* Final mobile repair for the RNE radio deck */ @media (max-width: 768px) { .radio-section { overflow: visible; padding-left: 16px; padding-right: 16px; } .radio-signal-strip { grid-template-columns: 1fr; max-width: 100%; margin: -2px 0 18px; } .radio-signal-pill { min-height: 42px; padding: 9px 12px; border-radius: 12px; } .radio-signal-pill span { width: 24px; height: 24px; font-size: var(--fs-100); } .radio-signal-pill strong { font-size: var(--fs-500); } .radio-container { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; gap: 16px; margin-top: 0; overflow: visible; } .radio-player-console { order: 2; position: relative; top: auto; z-index: 1; width: 100%; max-width: 100%; min-width: 0; padding: 12px; border-radius: 14px; box-sizing: border-box; overflow: hidden; /* Sin `scroll-margin-top`: se sumaba al `scroll-padding-top` de `html` y dejaba la consola 101 px por debajo de la cabecera al elegir episodio en móvil. Es el cuarto caso del mismo defecto. */ } .radio-console-body { gap: 10px; min-width: 0; } .radio-console-topline, .now-playing-header, .now-playing-meta, .radio-time-tracker { min-width: 0; } .console-now-playing { padding: 11px 12px; gap: 7px; min-width: 0; } .now-playing-title { font-size: var(--fs-600); line-height: 1.28; -webkit-line-clamp: 2; } .now-playing-meta { gap: 10px; } .now-playing-program, .now-playing-theme { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .now-playing-theme { max-width: 46%; text-align: right; } .radio-spectrum { height: 12px; } .radio-progress-container { gap: 7px; margin: 2px 0; } .progress-bar-wrapper { height: 12px; } .radio-controls-row { display: grid; grid-template-columns: 1fr; gap: 8px; } .radio-preview-btn, .radio-play-btn { width: 100%; min-height: 42px; padding: 10px 12px; font-size: var(--fs-500); border-radius: 10px; box-sizing: border-box; } .radio-playlist-wrapper { order: 1; width: 100%; max-width: 100%; min-width: 0; height: auto; overflow: hidden; border-radius: 14px; } .playlist-header { padding: 12px 14px 8px; gap: 10px; } .playlist-live-badge { padding: 6px 9px; font-size: var(--fs-100); } .radio-playlist { display: flex; flex-direction: row; width: 100%; max-width: 100%; min-width: 0; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 14px 15px; scroll-padding-left: 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; } .radio-playlist::-webkit-scrollbar { height: 5px; } .playlist-track { flex: 0 0 clamp(220px, 78vw, 300px); width: auto; min-width: 0; min-height: 92px; padding: 13px; scroll-snap-align: start; transform: none; } .playlist-track:hover { transform: none; } .track-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } } @media (max-width: 420px) { .radio-section { padding-left: 12px; padding-right: 12px; } .radio-player-console { padding: 10px; } .playlist-track { flex-basis: 82vw; } .playlist-live-badge { display: none; } } /* ========================================================================== Focused UX Pass: mobile hero and navigation ========================================================================== */ body.nav-open { overflow: hidden; } body.lightbox-open { overflow: hidden; } .radio-discovery-controls { display: grid; gap: 10px; padding: 0 18px 14px; } .radio-search-input { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: rgba(var(--depth-1-rgb), 0.48); color: var(--text-primary); font: inherit; outline: none; transition: var(--transition-fast); } .radio-search-input::placeholder { color: var(--text-muted); } .radio-search-input:focus { border-color: rgba(var(--accent-cyan-rgb), 0.52); box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.11); } .radio-topic-filters { display: flex; flex-wrap: wrap; gap: 8px; } .radio-topic-btn { min-height: 34px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: var(--fs-300); font-weight: 800; cursor: pointer; transition: var(--transition-fast); } .radio-topic-btn:hover, .radio-topic-btn:focus-visible, .radio-topic-btn.active { color: var(--text-primary); border-color: rgba(var(--accent-cyan-rgb), 0.42); background: var(--accent-tint-3); outline: none; } .playlist-track[hidden] { display: none !important; } .radio-empty-state { display: none; margin: 0 18px 18px; padding: 16px; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 12px; color: var(--text-secondary); text-align: center; background: var(--surface-1); } .radio-empty-state.visible { display: block; } .timeline-slider-wrapper { margin-top: 18px; } .timeline-track { gap: 34px; } .timeline-card { cursor: pointer; opacity: 0.62; transform: scale(0.96); outline: none; } .timeline-card.active { opacity: 1; transform: translateY(-8px) scale(1.02); } .timeline-card:focus-visible .timeline-card-content { outline: 2px solid var(--accent-amber); outline-offset: 5px; } .timeline-card-content { min-height: 230px; border-radius: 12px; overflow: hidden; } .timeline-card-content::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet)); opacity: 0.18; transition: var(--transition-fast); } .timeline-card.active .timeline-card-content::before, .timeline-card:hover .timeline-card-content::before { opacity: 1; } .timeline-card.active .timeline-card-content { border-color: rgba(var(--accent-cyan-rgb), 0.5); background: linear-gradient(145deg, rgba(18, 24, 41, 0.92), rgba(8, 13, 27, 0.78)), radial-gradient(circle at 24% 0%, rgba(var(--accent-cyan-rgb), 0.16), transparent 42%); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32), 0 0 30px rgba(var(--accent-cyan-rgb), 0.13); } .timeline-card:not(.active):hover { opacity: 0.9; transform: translateY(-4px) scale(0.98); } .timeline-card-content h3 { font-size: var(--fs-900); } .timeline-card-content p { font-size: var(--fs-600); } .contact-intent-group { gap: 10px; } .contact-intent-label { color: var(--text-secondary); font-size: var(--fs-600); font-weight: 700; } .contact-intent-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .contact-intent-btn { min-height: 42px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 9px; background: var(--surface-2); color: var(--text-secondary); font-weight: 800; cursor: pointer; transition: var(--transition-fast); } .contact-intent-btn:hover, .contact-intent-btn:focus-visible, .contact-intent-btn.active { color: var(--text-primary); border-color: rgba(var(--accent-cyan-rgb), 0.44); background: var(--accent-tint-3); outline: none; } @media (max-width: 768px) { .radio-discovery-controls { padding: 0 14px 12px; } .radio-topic-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .radio-topic-filters::-webkit-scrollbar { display: none; } .radio-topic-btn { flex: 0 0 auto; } .timeline-track { gap: 20px; } .timeline-slider-wrapper { --tl-card-w: min(82vw, 320px); } .timeline-card { opacity: 0.72; } .timeline-card.active { transform: translateY(-4px) scale(1); } .timeline-card-content { min-height: 240px; padding: 22px; } .contact-intent-options { grid-template-columns: 1fr; } } .lightbox-nav { position: absolute; top: 50%; z-index: 18; width: 46px; height: 58px; display: none; align-items: center; justify-content: center; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(var(--depth-2-rgb), 0.74); color: var(--text-primary); font-size: 2.2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--transition-fast); } .lightbox-nav:hover, .lightbox-nav:focus-visible { border-color: rgba(var(--accent-cyan-rgb), 0.55); background: var(--accent-tint-3); outline: none; } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-counter { position: absolute; top: 14px; left: 14px; z-index: 18; display: none; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; background: rgba(var(--depth-2-rgb), 0.72); color: var(--text-primary); font-family: monospace; font-size: var(--fs-400); font-weight: 800; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lightbox-action { width: fit-content; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border-radius: 8px; background: var(--accent-tint-3); border: 1px solid rgba(var(--accent-cyan-rgb), 0.36); color: var(--text-primary); font-size: var(--fs-500); font-weight: 800; } .lightbox-action:hover, .lightbox-action:focus-visible { background: rgba(var(--accent-cyan-rgb), 0.22); outline: none; } @media (min-width: 769px) { .lightbox.portfolio-mode .lightbox-content:not(.image-mode) { --lb-panel: clamp(320px, 30vw, 400px); --lb-width: min(94vw, 1200px); width: var(--lb-width); max-width: 1200px; /* Bound the whole modal to the video's natural height and to the viewport, so the close button and the pinned CTA are always on screen. */ height: min(88vh, calc((var(--lb-width) - var(--lb-panel)) * 0.5625)); min-height: 320px; aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--lb-panel); align-items: stretch; overflow: hidden; background: rgba(var(--depth-1-rgb), 0.96); } .lightbox.portfolio-mode .lightbox-content:not(.image-mode) video { grid-column: 1; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; align-self: stretch; object-fit: contain; background: #000; } .lightbox.portfolio-mode .lightbox-content:not(.image-mode) .lightbox-details { position: relative; inset: auto; grid-column: 2; width: auto; height: 100%; min-height: 0; /* Case info scrolls inside its own column instead of overflowing the screen. */ overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 52px 18px 0; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(18, 24, 41, 0.96), rgba(10, 15, 29, 0.92)), radial-gradient(circle at 0% 0%, rgba(var(--accent-cyan-rgb), 0.14), transparent 42%); justify-content: flex-start; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-cyan-hero-rgb), 0.45) transparent; } .lightbox.portfolio-mode .lightbox-content:not(.image-mode) .lightbox-details::-webkit-scrollbar { width: 8px; } .lightbox.portfolio-mode .lightbox-content:not(.image-mode) .lightbox-details::-webkit-scrollbar-thumb { background: rgba(var(--accent-cyan-hero-rgb), 0.4); border-radius: 999px; } .lightbox.portfolio-mode .details-header, .lightbox.portfolio-mode .details-title, .lightbox.portfolio-mode .details-desc, .lightbox.portfolio-mode .portfolio-case-study { flex: 0 0 auto; } .lightbox.portfolio-mode .details-header { flex-direction: column; align-items: flex-start; gap: 6px; } .lightbox.portfolio-mode .details-title { font-size: var(--fs-900); line-height: 1.18; } .lightbox.portfolio-mode .details-desc { display: block; font-size: var(--fs-600); line-height: 1.55; } /* Keep the conversion CTA pinned to the bottom of the panel; the case study scrolls behind it and fades under the action bar. Scoped to the video split layout so image-only portfolio items keep their bottom-overlay CTA. */ .lightbox.portfolio-mode .lightbox-content:not(.image-mode) .lightbox-action { position: sticky; bottom: 10px; z-index: 2; margin-top: auto; margin-bottom: 4px; width: 100%; min-height: 46px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(var(--accent-cyan-hero-rgb), 0.5); background: linear-gradient(180deg, rgba(18, 118, 148, 0.96), rgba(11, 86, 112, 0.97)); color: #f2fdff; box-shadow: 0 -22px 20px -6px rgba(9, 13, 24, 0.9), 0 10px 22px rgba(var(--accent-cyan-rgb), 0.22); } .lightbox.portfolio-mode .lightbox-content:not(.image-mode) .lightbox-next { right: calc(var(--lb-panel, 360px) + 16px); } } .lightbox-close { top: 14px; right: 14px; z-index: 22; min-height: 38px; padding: 7px 10px 7px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(var(--depth-2-rgb), 0.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: var(--fs-900); } .lightbox-close span { font-size: var(--fs-300); } @media (max-width: 768px) { .lightbox-content { width: 94%; } .lightbox-content:not(.image-mode) { aspect-ratio: auto; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; } .lightbox-content:not(.image-mode) video { height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; } .lightbox-content:not(.image-mode) .lightbox-details { position: relative; bottom: auto; left: auto; flex: 0 0 auto; } .lightbox-nav { width: 40px; height: 48px; font-size: 1.9rem; top: min(28vw, 132px); } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-counter { top: 10px; left: 10px; } .lightbox-action { min-height: 32px; font-size: var(--fs-400); } .details-header { gap: 10px; } .details-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lightbox-close { top: 10px; right: 10px; min-height: 34px; padding: 6px 8px 6px 10px; } .lightbox-close span { display: none; } } @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); } .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); } .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); } .nav-links.mobile-open li { width: 100%; } .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); } .nav-links.mobile-open a::after { display: none; } .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)); } .nav-links.mobile-open .contact-btn { justify-content: center; margin-top: 4px; border: none; border-radius: 10px; padding: 13px 16px !important; } /* El contenido del menu (925px) supera la altura del viewport (812px en un movil estandar), de modo que "Contacte" quedaba 41px por debajo del borde y el ultimo elemento visible era el selector de idioma, que se lee como final del menu. Se ancla al pie para que el CTA principal este siempre accesible sin necesidad de descubrir que el panel continua. */ .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); } .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); } .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); } } @media (max-width: 768px) { .hero { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: auto; margin-top: 58px; padding-top: 26px; padding-bottom: 46px; text-align: left; gap: 28px; } .hero-content { order: 1; width: 100%; } .hero-media { order: 2; width: 100%; justify-content: flex-start; } .hero::before { background: linear-gradient(180deg, rgba(10, 15, 29, 0.88), rgba(10, 15, 29, 0.98)), url("assets/media/6d287232c31ee78cd58e3334742aeb78.png") center top / cover no-repeat; opacity: 0.22; } .hero-tagline, .hero-cta { justify-content: flex-start; } .hero-title { max-width: 12ch; margin-bottom: 14px; font-size: clamp(2.35rem, 11vw, 3.1rem); line-height: 1.08; } .hero-subtitle { max-width: 30rem; margin-bottom: 14px; font-size: var(--fs-800); line-height: 1.45; } .hero-desc { max-width: 34rem; margin: 0 0 22px; font-size: var(--fs-600); line-height: 1.58; } .hero-proof-strip { width: 100%; margin-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-pill { min-height: 82px; padding: 11px; } .proof-pill strong { font-size: var(--fs-1000); } .proof-pill span:last-child { font-size: var(--fs-300); line-height: 1.2; } .hero-media-wrapper { align-items: flex-start; max-width: 100%; } .hero-img-container { width: min(74vw, 270px); height: min(74vw, 270px); border-radius: 18px; animation: none; } .hero-img-container img { border-radius: 15px; } .portrait-data-card { right: 8px; bottom: 8px; width: calc(100% - 16px); padding: 10px 12px; } .portrait-data-card strong { font-size: var(--fs-500); } } @media (max-width: 420px) { .hero { padding-left: 18px; padding-right: 18px; gap: 24px; } .hero-title { max-width: 11ch; font-size: 2.24rem; } .hero-proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .proof-pill { min-height: auto; padding: 9px 8px; } .proof-pill strong { font-size: var(--fs-900); } .proof-pill span:last-child { font-size: var(--fs-200); } .proof-kicker { font-size: var(--fs-100); } } /* ========================================================================== 20. VERIFIER DASHBOARD & CYBERPUNK CHATBOT STYLES (NEW) ========================================================================== */ /* --- MODERN & CLEAN AI CHATBOT --- */ .cyber-chatbot-widget { position: fixed; bottom: 25px; right: 25px; z-index: 1200; /* Mayor que el lightbox y el resto de elementos */ } .chatbot-trigger { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #020610, #0a101e); border: 2px solid rgba(255, 255, 255, 0.08); cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; color: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.1); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease; padding: 0; } .chatbot-trigger:hover { transform: scale(1.06); border-color: rgba(var(--accent-cyan-chat-rgb), 0.4); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-cyan-chat-rgb), 0.25); } .chatbot-trigger:active { transform: scale(0.95); } .chatbot-trigger-glow { position: absolute; inset: -3px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff); z-index: -1; filter: blur(6px); opacity: 0.3; transition: opacity 0.3s ease; } .chatbot-trigger:hover .chatbot-trigger-glow { opacity: 0.6; } .chatbot-trigger-avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; /* Evita colapsos de flexbox en móviles */ } .chatbot-trigger-img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; transform: scale(1.35) translateY(6%); transform-origin: center; transition: transform 0.3s ease; } .chatbot-trigger:hover .chatbot-trigger-img { transform: scale(1.42) translateY(6%); } .chatbot-trigger-badge { position: absolute; bottom: -2px; right: -2px; background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff); border: 2px solid #020610; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(var(--accent-cyan-chat-rgb), 0.3); color: #fff; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .chatbot-trigger.expanded .chatbot-trigger-badge { transform: scale(0); } .chatbot-pulse-ring { position: absolute; inset: -6px; border: 1.5px solid rgba(var(--accent-cyan-chat-rgb), 0.4); border-radius: 50%; opacity: 0; pointer-events: none; animation: pulseRing 3s infinite; } @keyframes pulseRing { 0% { transform: scale(0.95); opacity: 0; } 50% { opacity: 0.3; } 100% { transform: scale(1.3); opacity: 0; } } .chatbot-window { position: absolute; bottom: 80px; right: 0; width: 360px; height: 480px; background: rgba(var(--depth-3-rgb), 0.82); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.02); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); overflow: hidden; transform: translateY(15px) scale(0.96); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out; z-index: 1000; } .chatbot-window.visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .chatbot-header { background: rgba(var(--depth-2-rgb), 0.9); padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: center; } .chatbot-header-actions { display: flex; align-items: center; gap: 12px; } .chatbot-reset-btn { background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, transform 0.2s ease; } .chatbot-reset-btn:hover { color: #ff007f; transform: scale(1.1); } .chatbot-header-info { display: flex; align-items: center; gap: 10px; } .chatbot-avatar-status { position: relative; width: 38px; height: 38px; display: block; /* Evita colapsos de flexbox en móviles */ } .chatbot-header-img-wrapper { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.1); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } .chatbot-header-img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; transform: scale(1.35) translateY(6%); transform-origin: center; } .status-dot { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background-color: #00ff7f; border: 2px solid #0c1221; } .status-dot.pulsing { box-shadow: 0 0 6px #00ff7f; animation: pulseGreen 2s infinite; } .chatbot-header-text { display: flex; flex-direction: column; } .chatbot-title { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-600); font-weight: 600; color: #fff; } .chatbot-subtitle { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-200); color: rgba(255, 255, 255, 0.45); } .chatbot-close-btn { background: none; border: none; color: rgba(255, 255, 255, 0.45); cursor: pointer; padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, background-color 0.2s ease; } .chatbot-close-btn:hover { color: #ff007f; background-color: var(--surface-3); } .chatbot-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; /* Margen para dar espacio al tiempo flotante */ background: linear-gradient(180deg, rgba(8, 12, 24, 0.15) 0%, transparent 100%); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; font-family: var(--font-sans, system-ui, sans-serif); } /* Custom scrollbar */ .chatbot-messages::-webkit-scrollbar { width: 4px; } .chatbot-messages::-webkit-scrollbar-track { background: transparent; } .chatbot-messages::-webkit-scrollbar-thumb { background: var(--surface-5); border-radius: 4px; } .chatbot-messages::-webkit-scrollbar-thumb:hover { background: var(--surface-6); } .message { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-500); line-height: 1.45; position: relative; animation: messageFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; word-wrap: break-word; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); } .msg-time { position: absolute; bottom: -15px; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-200); color: rgba(255, 255, 255, 0.25); white-space: nowrap; } .system-msg { background: rgba(var(--depth-3-rgb), 0.75); border: 1px solid rgba(255, 255, 255, 0.05); border-left: 3px solid #ff007f; color: #e2e8f0; align-self: flex-start; border-bottom-left-radius: 3px; margin-bottom: 5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.01); animation: botMessageSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .system-msg .msg-time { left: 6px; } .user-msg { background: rgba(0, 210, 255, 0.07); border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.15); border-right: 3px solid var(--accent-cyan-chat); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; margin-bottom: 5px; box-shadow: 0 4px 15px rgba(var(--accent-cyan-chat-rgb), 0.04), inset 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.01); animation: userMessageSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .user-msg .msg-time { right: 6px; } .msg-text { margin: 0; } /* Indicador de escritura del bot */ .bot-typing-indicator { align-self: flex-start; background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.05); padding: 10px 14px; border-radius: 14px; border-bottom-left-radius: 3px; display: flex; align-items: center; gap: 4px; } .typing-dot { width: 5px; height: 5px; background-color: var(--accent-cyan-chat); border-radius: 50%; opacity: 0.4; animation: typingDotActive 1.4s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDotActive { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-3px); opacity: 1; } } .chatbot-options { padding: 8px 16px 10px; display: flex; flex-direction: row; gap: 8px; background: rgba(var(--depth-2-rgb), 0.45); border-top: 1px solid rgba(255, 255, 255, 0.04); /* Los cinco accesos ocupaban 457px en un contenedor de 347px, asi que "Portafoli" y "Contacte" quedaban cortados sin ningun indicio de que la fila se pudiera desplazar. Dos filas caben enteras y no dependen de que el visitante descubra el desplazamiento horizontal. */ overflow-x: hidden; flex-wrap: wrap; row-gap: 6px; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, border-top-color 0.3s ease; max-height: 120px; cursor: grab; user-select: none; -webkit-user-select: none; } .chatbot-options.grabbing { cursor: grabbing; } .chatbot-options::-webkit-scrollbar { display: none; /* Chrome/Safari/Webkit */ } .chatbot-options.hidden { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; opacity: 0; pointer-events: none; overflow: hidden; } .chat-option-btn { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 6px 12px; color: var(--text-white); font-size: var(--fs-300); text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--font-sans, system-ui, sans-serif); white-space: nowrap; flex-shrink: 0; } .chat-option-btn:hover { background: rgba(var(--accent-cyan-chat-rgb), 0.08); border-color: rgba(var(--accent-cyan-chat-rgb), 0.4); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--accent-cyan-chat-rgb), 0.15); } @keyframes messageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes botMessageSlideIn { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } } @keyframes userMessageSlideIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } } .chatbot-input-form { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(var(--depth-2-rgb), 0.85); display: flex; gap: 10px; align-items: center; } .chatbot-input { flex: 1; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 8px 14px; color: #fff; font-size: var(--fs-500); font-family: var(--font-sans, system-ui, sans-serif); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .chatbot-input:focus { outline: none; border-color: rgba(var(--accent-cyan-chat-rgb), 0.4); box-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.1); } .chatbot-send-btn { background: linear-gradient(135deg, var(--accent-cyan-chat), #9d00ff); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 0; } .chatbot-send-btn:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.3); } .chatbot-send-btn:active { transform: scale(0.95); } /* Botones interactivos dentro del chat */ .msg-btn-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; animation: messageFadeIn 0.3s ease forwards 0.4s; opacity: 0; } .msg-action-btn { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 4px 8px; color: var(--text-white); font-size: var(--fs-200); font-family: var(--font-sans, system-ui, sans-serif); cursor: pointer; transition: all 0.2s ease; } .msg-action-btn:hover { background: rgba(var(--accent-cyan-chat-rgb), 0.05); border-color: rgba(var(--accent-cyan-chat-rgb), 0.3); color: var(--accent-cyan-chat); transform: translateY(-1px); } .msg-action-btn.secondary { background: var(--surface-1); border: 1px solid rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.65); } .msg-action-btn.secondary:hover { background: var(--surface-3); border-color: rgba(255, 255, 255, 0.15); color: #fff; } /* Feedback Widget (Útil / No útil) */ .chatbot-feedback { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.04); animation: messageFadeIn 0.3s ease forwards 0.6s; opacity: 0; } .feedback-label { font-size: var(--fs-200); color: rgba(255, 255, 255, 0.35); } .feedback-btn { background: none; border: none; cursor: pointer; font-size: var(--fs-400); padding: 2px 4px; border-radius: 4px; transition: background-color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; } .feedback-btn:hover { background-color: var(--surface-3); transform: scale(1.15); } .feedback-btn.active { background-color: rgba(var(--accent-cyan-chat-rgb), 0.1); transform: scale(1.1); pointer-events: none; } /* Bocadillo Proactivo del Chatbot */ .chatbot-proactive-bubble { position: absolute; bottom: 80px; right: 0; width: 220px; background: rgba(var(--depth-3-rgb), 0.92); border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.25); border-radius: 12px; border-bottom-right-radius: 2px; padding: 12px 28px 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.92); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.2s ease; z-index: 999; cursor: pointer; } .chatbot-proactive-bubble:hover { background: rgba(16, 26, 48, 0.95); border-color: rgba(var(--accent-cyan-chat-rgb), 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-cyan-chat-rgb), 0.25); } .chatbot-proactive-bubble.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .proactive-text { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-300); line-height: 1.4; color: var(--text-white); display: block; } .proactive-close { position: absolute; top: 4px; right: 8px; background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: var(--fs-600); cursor: pointer; padding: 2px; line-height: 1; transition: color 0.2s ease; } .proactive-close:hover { color: #ff007f; } /* Efecto de brillo de neón proactivo para el disparador */ .chatbot-trigger.proactive-glow { box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0.6); animation: proactiveRingPulse 1.6s infinite; } @keyframes proactiveRingPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0.5); } 70% { box-shadow: 0 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-cyan-chat-rgb), 0); } } /* Responsividad */ @media (max-width: 768px) { .dashboard-charts-grid { grid-template-columns: 1fr; gap: 20px; } .verifier-dashboard { padding: 20px; margin-top: 35px; } } @media (max-width: 767px) { .cyber-chatbot-widget { bottom: 0; right: 0; pointer-events: none; } .cyber-chatbot-widget:has(.chatbot-window.visible) { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(var(--depth-1-rgb), 0.65); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 1250; pointer-events: auto; transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, height 0.3s ease; } /* Half-Sheet móvil: Quita blur, hace fondo transparente y limita altura para interactuar con la web superior */ .cyber-chatbot-widget:has(.chatbot-window.visible.half-sheet) { top: auto; bottom: 0; height: 45vh; height: 45dvh; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; } .cyber-chatbot-widget:has(.chatbot-window.visible.half-sheet) .chatbot-window { pointer-events: auto; } .chatbot-window { position: absolute; width: 100vw; height: 85vh; height: 85dvh; bottom: 0; right: 0; border-radius: 20px 20px 0 0; border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.15); border-bottom: none; z-index: 1300; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--accent-cyan-chat-rgb), 0.15); transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out; } .chatbot-window.half-sheet { height: 45vh !important; height: 45dvh !important; box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.15); } .chatbot-proactive-bubble { position: fixed; bottom: 80px; right: 15px; width: calc(100vw - 30px); max-width: 220px; pointer-events: auto; } .chatbot-trigger { position: fixed; bottom: 15px; right: 15px; width: 52px; height: 52px; pointer-events: auto; } .chatbot-trigger.expanded { display: none; } .chatbot-header-actions { gap: 16px !important; } .chatbot-close-btn, .chatbot-reset-btn, .chatbot-audio-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; } } /* --- CYBERPUNK CHATBOT ENHANCEMENTS (NEW) --- */ /* Audio Button Style */ .chatbot-audio-btn { background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, transform 0.2s ease; } .chatbot-audio-btn:hover { color: var(--accent-cyan-chat); transform: scale(1.15); } .chatbot-audio-btn svg { display: block; } /* Autocomplete Overlay Panel */ .chatbot-autocomplete-suggestions { position: absolute; bottom: 58px; left: 16px; right: 16px; background: rgba(var(--depth-2-rgb), 0.96); border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.25); border-radius: 10px; max-height: 140px; overflow-y: auto; z-index: 1010; display: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.15); backdrop-filter: blur(12px); padding: 4px 0; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-cyan-chat-rgb), 0.3) transparent; } .chatbot-autocomplete-suggestions.visible { display: block; } .chatbot-autocomplete-suggestions::-webkit-scrollbar { width: 4px; } .chatbot-autocomplete-suggestions::-webkit-scrollbar-track { background: transparent; } .chatbot-autocomplete-suggestions::-webkit-scrollbar-thumb { background: rgba(var(--accent-cyan-chat-rgb), 0.3); border-radius: 4px; } .autocomplete-item { padding: 8px 14px; font-size: var(--fs-300); color: var(--text-white); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.03); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background: rgba(var(--accent-cyan-chat-rgb), 0.08); color: var(--accent-cyan-chat); padding-left: 18px; } /* Glitch Avatar Animation */ .glitch-anim { animation: glitchFlicker 0.4s infinite alternate; border-color: rgba(var(--accent-cyan-chat-rgb), 0.6) !important; box-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.4) !important; } @keyframes glitchFlicker { 0% { opacity: 0.95; filter: hue-rotate(0deg) saturate(1); transform: skewX(0deg); } 20% { opacity: 0.85; filter: hue-rotate(8deg) saturate(1.2) contrast(1.1); transform: skewX(-2deg) scale(0.98); } 40% { opacity: 1; filter: hue-rotate(-8deg) saturate(1.5); transform: skewX(2deg); } 60% { opacity: 0.9; filter: hue-rotate(15deg) saturate(1); transform: skewX(-1deg); } 80% { opacity: 0.95; filter: hue-rotate(-5deg) saturate(1.1); transform: skewX(1deg); } 100% { opacity: 1; filter: hue-rotate(0deg) saturate(1); transform: skewX(0deg); } } /* Neon border flash for sections */ .section-neon-flash { position: relative; animation: neonBorderFlash 2s ease-in-out; border-radius: 12px; } @keyframes neonBorderFlash { 0%, 100% { box-shadow: none; outline: 2px solid transparent; } 20%, 60% { box-shadow: 0 0 25px rgba(var(--accent-cyan-chat-rgb), 0.85), inset 0 0 15px rgba(var(--accent-cyan-chat-rgb), 0.4); outline: 2px solid rgba(var(--accent-cyan-chat-rgb), 1); } 40%, 80% { box-shadow: 0 0 10px rgba(var(--accent-cyan-chat-rgb), 0.3), inset 0 0 5px rgba(var(--accent-cyan-chat-rgb), 0.1); outline: 2px solid rgba(var(--accent-cyan-chat-rgb), 0.4); } } /* Glitch Disintegration Animation on Reset */ .disintegrate-glitch { animation: disintegrateGlitchKeyframes 0.75s ease-in forwards !important; pointer-events: none; } @keyframes disintegrateGlitchKeyframes { 0% { transform: translate(0, 0) skewX(0deg); filter: blur(0px) brightness(1) hue-rotate(0deg); opacity: 1; } 20% { transform: translate(-5px, 2px) skewX(15deg); filter: blur(2px) brightness(1.5) hue-rotate(45deg) contrast(1.5); clip-path: inset(10% 0 30% 0); } 40% { transform: translate(8px, -4px) skewX(-20deg); filter: blur(4px) brightness(2) hue-rotate(90deg) contrast(2); clip-path: inset(40% 0 10% 0); } 60% { transform: translate(-10px, 3px) skewX(30deg); filter: blur(6px) brightness(1.8) hue-rotate(180deg) contrast(1.2); clip-path: inset(5% 0 75% 0); } 80% { transform: translate(6px, -2px) skewX(-10deg); filter: blur(8px) brightness(1.2) hue-rotate(270deg); opacity: 0.4; } 100% { transform: translate(0, 15px) skewX(0deg); filter: blur(15px) brightness(0) hue-rotate(360deg); opacity: 0; } } /* Chatbot Cards Slider (Rich Cards Recommendation) */ .chatbot-cards-slider { display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 12px 4px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; margin-top: 8px; width: 100%; } .chatbot-cards-slider::-webkit-scrollbar { display: none; } .chatbot-cards-slider.grabbing { cursor: grabbing; } .chatbot-card-item { width: 150px; flex-shrink: 0; background: rgba(var(--depth-3-rgb), 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .chatbot-card-item:hover { transform: translateY(-2px); border-color: rgba(var(--accent-cyan-chat-rgb), 0.4); box-shadow: 0 6px 16px rgba(var(--accent-cyan-chat-rgb), 0.15); } .chatbot-card-media { position: relative; width: 100%; height: 85px; overflow: hidden; background: #000; cursor: pointer; } .chatbot-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .chatbot-card-item:hover .chatbot-card-media img { transform: scale(1.06); } .chatbot-card-play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: var(--fs-900); opacity: 0.8; transition: opacity 0.2s ease, transform 0.2s ease; } .chatbot-card-item:hover .chatbot-card-play-badge { opacity: 1; transform: scale(1.15); color: var(--accent-cyan-chat); text-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.6); } .chatbot-card-info { padding: 8px 10px; display: flex; flex-direction: column; flex-grow: 1; } .chatbot-card-title { font-size: var(--fs-300); font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.25; height: 34px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } .chatbot-card-actions { display: flex; flex-direction: column; gap: 4px; margin-top: auto; } .chatbot-card-btn { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 5px; padding: 4px 6px; font-size: var(--fs-100); color: var(--text-white); cursor: pointer; transition: all 0.2s ease; font-family: var(--font-sans, system-ui, sans-serif); text-align: center; } .chatbot-card-btn:hover { background: rgba(var(--accent-cyan-chat-rgb), 0.06); border-color: rgba(var(--accent-cyan-chat-rgb), 0.3); color: var(--accent-cyan-chat); } .chatbot-card-btn.primary { background: linear-gradient(135deg, var(--accent-cyan-chat), #0072ff); border: none; color: #fff; font-weight: 600; } .chatbot-card-btn.primary:hover { box-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.4); filter: brightness(1.1); } /* Typing Progress Bar (IA Computando Respuesta) */ .chatbot-typing-progressbar { width: calc(100% - 32px); height: 6px; background: var(--surface-3); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; margin: 10px 16px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .chatbot-typing-progressbar-inner { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-cyan-chat), #ff007f); box-shadow: 0 0 8px rgba(var(--accent-cyan-chat-rgb), 0.6); animation: progressComputation 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes progressComputation { 0% { width: 0%; } 100% { width: 100%; } } /* Translucidez Inteligente en Escritorio para el Chatbot */ @media (min-width: 768px) { .cyber-chatbot-widget { transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .cyber-chatbot-widget.translucent { opacity: 0.25; } .cyber-chatbot-widget.translucent:hover { opacity: 1; } } /* Imágenes embebidas en burbujas del chatbot */ .msg-inline-image { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(var(--accent-cyan-chat-rgb), 0.2); margin: 8px 0 6px; cursor: pointer; transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); } .msg-inline-image:hover { filter: brightness(1.15); border-color: rgba(var(--accent-cyan-chat-rgb), 0.5); box-shadow: 0 3px 15px rgba(var(--accent-cyan-chat-rgb), 0.2); } /* Partículas de envío cyberpunk */ .send-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: sendParticleExplode 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes sendParticleExplode { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); } } /* Mobile contact overflow hotfix */ @media (max-width: 480px) { .contact, .contact-grid, .contact-info-panel, .contact-cards, .contact-card, .contact-card-info, .contact-card-info p, .contact-form, .contact-form form, .contact-form .form-group, .contact-form .form-control, .contact-form textarea, .contact-form .btn { box-sizing: border-box; min-width: 0; max-width: 100%; } .contact-grid { grid-template-columns: minmax(0, 1fr); width: 100%; } .contact-info-panel, .contact-cards, .contact-card, .contact-form, .contact-form form { width: 100%; } .contact-card { flex-wrap: wrap; } .contact-card-info { flex: 1 1 min(100%, 14rem); } .contact-card-info a { overflow-wrap: anywhere; word-break: normal; } .contact-form .form-control, .contact-form textarea, .contact-form .btn { display: block; width: 100%; } } /* Accessibility focus improvements */ .honeypot-field { display: none !important; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="slider"]:focus-visible { outline: 2px solid var(--accent-amber) !important; outline-offset: 4px; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); } /* ========================================================================== Cierres de sección -------------------------------------------------------------------------- Seis secciones -portfolio, radio, verifier, toolkit, gear y faq- sumaban 1.601 lineas (el 51% de la portada) sin ninguna via de contacto: ni ancla, ni mailto, ni WhatsApp. Son ademas las secciones que mas convencen, de modo que el punto de maxima conviccion coincidia con el de menor accionabilidad. Deliberadamente discretos: una linea de texto y un enlace, no un bloque con boton. El objetivo es ofrecer una salida a quien ya esta convencido, no presionar a quien esta leyendo. ========================================================================== */ .section-closer { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; text-align: center; } .section-closer p { margin: 0; color: var(--text-secondary); font-size: var(--fs-600); } .section-closer-link { color: var(--accent-amber); font-weight: 600; font-size: var(--fs-600); text-decoration: none; border-bottom: 1px solid rgba(245, 158, 11, 0.42); padding-bottom: 1px; transition: var(--transition-fast); } .section-closer-link:hover, .section-closer-link:focus-visible { color: #fbbf24; border-bottom-color: currentColor; } @media (max-width: 640px) { .section-closer { flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; } }