/* RESONANCE Concept - CX Forum Monterrey 2026 Visual Identity: Tech, Clarity & Bright Customer Experience */ :root { /* Paleta Base Clara — fondo blanco, contrasta con rosa/púrpura de marca (antes era oscura: #12082A; ese mismo tono ahora se usa como color de texto/tinte — rgba(18, 8, 42, X) — en vez de como fondo). */ --bg-page: #ffffff; --bg-card: rgba(18, 8, 42, 0.04); --border-soft: rgba(18, 8, 42, 0.14); /* Colores de Marca (Rosa/Púrpura Monterrey) - alineado con index.html */ --brand: #E619B0; --brand-dark: #A14BFF; --brand-gradient: linear-gradient(135deg, #E619B0 0%, #A14BFF 100%); --neon-purple: #A14BFF; --neon-blue: #FF6EC7; --accent-soft: rgba(255, 110, 199, 0.12); /* Estado "en vivo" (rojo neón) */ --live: #ff1744; --live-soft: rgba(255, 23, 68, 0.12); --live-glow: rgba(255, 23, 68, 0.65); /* Textos — antes blanco sobre fondo oscuro; con fondo blanco el texto usa el mismo tono oscuro de marca (--dark-ink) en vez de negro puro. */ --text-main: #12082A; --text-muted: rgba(18, 8, 42, 0.62); /* Efectos */ --glass-border: rgba(255, 110, 199, 0.2); --transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } /* Habilita transición nativa entre páginas (Chrome/Edge; se ignora donde no hay soporte). El navegador usa el CSS de la página DESTINO, así que este bloque debe vivir igual aquí y en style.css (index.html/contacto.html). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: cxvt-out 0.45s cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: cxvt-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes cxvt-out { to { opacity: 0; transform: scale(0.98); filter: blur(2px); } } @keyframes cxvt-in { from { opacity: 0; transform: scale(1.015) translateY(14px); filter: blur(2px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* --- Barra de progreso de lectura (misma pieza que index.html/contacto.html) --- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--brand-gradient); z-index: 1001; box-shadow: 0 0 10px rgba(230, 25, 176, 0.55); pointer-events: none; } /* --- Base Global --- */ html { overflow-x: hidden; } html, body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg-page); background-image: radial-gradient(rgba(255, 110, 199, 0.1) 1px, transparent 1px); background-size: 22px 22px; color: var(--text-main); scroll-behavior: smooth; max-width: 100%; } body { position: relative; /* NOTA: overflow-x: hidden (el patrón usado en index.html/contacto.html) convierte a body en un contenedor de scroll independiente del /viewport, lo que rompe los elementos position:sticky de esta página (.agenda-chip-bar, .sponsor-bar): dejan de pegarse al viewport real y se desplazan como si fueran estáticos. overflow-x: clip recorta el desbordamiento horizontal (mismo resultado visual) sin crear ese contenedor de scroll adicional, así que el sticky se conserva. */ overflow-x: clip; } body::before, body::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; } body::before { width: 480px; height: 480px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(230, 25, 176, 0.35), transparent 70%); } body::after { width: 420px; height: 420px; top: -140px; right: -100px; background: radial-gradient(circle, rgba(161, 75, 255, 0.3), transparent 70%); } /*Separacion header*/ main { padding-top: 24px !important; } #patrocinadores, .section-sponsors { margin-bottom: 60px; } /* --- Animaciones --- */ @keyframes neon-radar { 0% { transform: scale(0.8); opacity: 1; border-width: 2px; } 100% { transform: scale(3); opacity: 0; border-width: 0px; } } @keyframes blink-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes agenda-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.55), 0 0 16px rgba(255, 23, 68, 0.55), 0 0 32px rgba(255, 23, 68, 0.35), 0 8px 20px rgba(11, 21, 54, 0.08); } 70% { box-shadow: 0 0 0 16px rgba(255, 23, 68, 0), 0 0 22px rgba(255, 23, 68, 0.7), 0 0 44px rgba(255, 23, 68, 0.45), 0 8px 20px rgba(11, 21, 54, 0.08); } 100% { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0), 0 0 16px rgba(255, 23, 68, 0.55), 0 0 32px rgba(255, 23, 68, 0.35), 0 8px 20px rgba(11, 21, 54, 0.08); } } /* --- Header --- */ /* Sin fondo/línea propios a propósito: header no es sticky/fixed (no hay nada debajo que tape), así que deja ver el fondo de (color + patrón de puntos + halos de esquina) sin cortes — header y el resto de la agenda se leen como una misma superficie continua. */ header { border-bottom: none; background: none; } .agenda-logo-chip { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 14px; background: linear-gradient(135deg, #0b1536 0%, #030610 100%); text-decoration: none; transition: var(--transition-smooth); } .agenda-logo-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 21, 54, 0.25); } .agenda-hero-title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .agenda-hero-title { display: inline-block; max-width: 18ch; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(1.65rem, 4vw, 3rem); background: linear-gradient(90deg, var(--text-main) 0%, var(--brand) 65%, #FF6EC7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; animation: agenda-title-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .agenda-hero-underline { display: block; margin: 18px auto 0; width: 84px; height: 4px; border-radius: 999px; background: var(--brand-gradient); animation: agenda-underline-in 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes agenda-title-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes agenda-underline-in { from { opacity: 0; width: 0; } to { opacity: 1; width: 84px; } } header span.rounded-full.bg-\[color\:var\(--brand\)\] { display: inline-block; width: 10px; height: 10px; background-color: var(--brand) !important; box-shadow: 0 0 8px rgba(230, 25, 176, 0.5); position: relative; } header span.rounded-full.bg-\[color\:var\(--brand\)\]::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--brand); opacity: 0; animation: neon-radar 2s infinite cubic-bezier(0, 0, 0.2, 1); } header p.rounded-full { background: rgba(18, 8, 42, 0.05) !important; border: 1px solid var(--border-soft) !important; color: var(--text-main) !important; box-shadow: 0 2px 8px rgba(11, 21, 54, 0.06); } /* --- Fecha del evento (reemplaza los tabs de día) --- */ .agenda-date-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(230, 25, 176, 0.3); color: var(--brand-dark); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } .agenda-date-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 6px rgba(230, 25, 176, 0.5); } /* --- Filas del programa (editorial, sin riel) --- */ .program-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid rgba(18, 8, 42, 0.09); transition: background 200ms ease; } .program-row:last-of-type { border-bottom: none; } .program-time-big { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; font-variant-numeric: tabular-nums; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } /* am/pm junto al numeral grande. background-clip:text del padre no se hereda (no es una propiedad heredable), así que sin un color propio este span heredaría solo el color:transparent — se vería invisible. Por eso lleva su color sólido explícito en vez del truco de gradiente. */ .program-time-meridiem { display: inline-block; margin-left: 3px; font-size: 0.42em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-dark); vertical-align: 0.3em; } .program-row--hero .program-time-meridiem { color: rgba(255, 255, 255, 0.7); } @media (hover: hover) and (pointer: fine) { .program-row:not(.program-row--hero):hover { background: rgba(18, 8, 42, 0.03); } /* Sin esto el hover de arriba (mayor especificidad) le quitaría el tinte púrpura al break y lo dejaría gris. */ .program-row.program-row--break:not(.program-row--hero):hover { background: rgba(161, 75, 255, 0.09); } } .program-row--hero { grid-template-columns: 140px 1fr; background: var(--brand-gradient); border: none; border-radius: 20px; padding: 28px; border-bottom: none; } .program-row--hero .program-time-big { background: none; -webkit-text-fill-color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85); } @media (max-width: 640px) { .program-row, .program-row--hero { grid-template-columns: 1fr; gap: 6px; } .program-row { padding: 20px 0; } .program-row--hero { padding: 22px 20px; } } .agenda-card { position: relative; background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; scroll-margin-top: 170px; } .agenda-card:hover { transform: none; box-shadow: none; } .agenda-card__top { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 14px; } .agenda-time { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 6px; background: var(--accent-soft); border: 1px solid rgba(255, 110, 199, 0.2); color: var(--brand-dark); font-family: 'Inter', monospace; font-size: 0.75rem; white-space: nowrap; } /* Se mantiene en el DOM (js/agenda.js lee su textContent para la chip-bar) pero visualmente oculto: el mockup aprobado solo muestra el numeral grande (.program-time-big), no la pastilla de hora duplicada. Resetea padding/border/margin heredados de .agenda-time: con box-sizing: border-box (reset global de Tailwind) esos 26px de padding + 2px de borde ganarían al width/height de 1px y el box renderizado terminaría siendo ~26x2px en vez de 1x1px (igual queda invisible por el clip-path, pero mejor no dejarlo a la ambigüedad). */ .program-row .agenda-time { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .agenda-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .agenda-tag--sponsor { color: var(--brand); border-color: rgba(255, 110, 199, 0.35); background: var(--accent-soft); } .agenda-kicker { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; } .agenda-title { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text-main); letter-spacing: 0.01em; transition: color 0.3s ease; } .agenda-card:hover .agenda-title { color: var(--brand); } .agenda-title--hero { font-size: 1.4rem; } .agenda-speaker { margin-top: 10px; font-size: 0.85rem; color: var(--text-muted); } .agenda-speaker span { color: var(--text-main); font-weight: 700; } /* --- Tarjeta Hero (Apertura / Cierre): el fondo/padding ahora los pone .program-row--hero (la fila completa); esta clase solo aporta el contenido (ícono, título, speaker) --- */ .agenda-card--hero { padding: 0; background: none; border: none; box-shadow: none; } .agenda-card--hero:hover { border: none; box-shadow: none; } .agenda-card--hero .agenda-title, .agenda-card--hero .agenda-speaker span { color: #ffffff; } .agenda-card--hero:hover .agenda-title { color: #ffffff; } .agenda-card--hero .agenda-speaker { color: rgba(255, 255, 255, 0.75); } .agenda-card--hero .agenda-time { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } .agenda-card--hero .agenda-tag { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } /* --- Ícono de tema (hexágono, "voltea al revelar") --- Mismo tratamiento en las 2 filas hero (apertura/cierre, ícono grande en su propio bloque) y en las 12 filas normales con categoría (ícono chico junto al tag, dentro de .agenda-card__top). El giro (rotateY) se dispara en js/agenda.js con el mismo ScrollTrigger que ya revela la fila — así el ícono "voltea" justo cuando la fila entra en pantalla, no antes (un CSS @keyframes con animation normal correría apenas carga la página, mucho antes de que la fila sea visible). */ .agenda-card__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ffffff; background: var(--brand-gradient); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); opacity: 0; /* estado inicial del giro — ver js/agenda.js */ } .agenda-card__top .agenda-card__icon { width: 30px; height: 30px; font-size: 0.8rem; } .agenda-card--hero .agenda-card__icon { width: 48px; height: 48px; font-size: 1.3rem; background: rgba(255, 255, 255, 0.2); margin-bottom: 16px; } @media (hover: hover) and (pointer: fine) { .agenda-card__icon:hover { animation: agenda-icon-hover-spin 0.6s cubic-bezier(0.23, 1, 0.32, 1); } } @keyframes agenda-icon-hover-spin { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } @media (prefers-reduced-motion: reduce) { .agenda-card__icon { opacity: 1; } .agenda-card__icon:hover { animation: none; } } /* --- Tarjeta Patrocinio (compacta) --- */ .agenda-card--sponsor { display: flex; flex-direction: column; justify-content: center; background: rgba(18, 8, 42, 0.025); border-style: dashed; border-width: 1px; border-color: rgba(255, 110, 199, 0.35); border-radius: 12px; padding: 14px 16px; } .agenda-card--sponsor .agenda-title { margin-top: 10px; font-size: 0.95rem; } /* --- Fila de Break / Networking (texto itálico muted, misma grilla que el resto del programa — ya no es una barra sólida separada) --- */ .agenda-break { position: relative; display: block; scroll-margin-top: 170px; } .agenda-break__left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Un break es tiempo libre, no una sesión: se distingue del resto del programa con caja punteada y fondo tenue (en vez del divisor sólido de las sesiones), hora apagada sin degradado e ícono en círculo punteado. Más compacta que una sesión (menos padding). */ .program-row--break { margin: 8px 0; padding: 14px 18px; border: 1px dashed rgba(161, 75, 255, 0.4); border-radius: 14px; background: rgba(161, 75, 255, 0.05); } .program-row--break .program-time-big { background: none; -webkit-text-fill-color: rgba(18, 8, 42, 0.42); color: rgba(18, 8, 42, 0.42); font-weight: 700; } .program-row--break .program-time-meridiem { -webkit-text-fill-color: rgba(18, 8, 42, 0.42); color: rgba(18, 8, 42, 0.42); } .agenda-break__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1.5px dashed rgba(161, 75, 255, 0.55); border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: var(--brand-dark); font-size: 0.85rem; } /* El bloque de texto ocupa el espacio sobrante y puede encogerse hasta ~150px antes de partirse: ícono y título quedan en la misma fila también en móvil sin que el título se parta palabra por palabra. */ .agenda-break__left > div:not(.agenda-break__icon) { flex: 1 1 150px; min-width: 0; } .agenda-break__title { font-size: 1rem; font-weight: 600; font-style: italic; color: var(--text-muted); letter-spacing: 0.01em; } .agenda-break__sub { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } /* --- Estado "EN VIVO" --- */ .agenda-card.is-live-active, .agenda-break.is-live-active { border: 2px solid var(--live) !important; border-radius: 16px; /* En reposo .agenda-card no tiene padding propio (lo da .program-row); al activarse "en vivo" aparece un borde que, sin este padding, queda pegado directo al texto. box-sizing: border-box para que el padding no ensanche la caja más allá de la columna del grid (el proyecto no tiene un reset global de box-sizing). */ padding: 16px 20px; box-sizing: border-box; animation: agenda-live-pulse 2.2s infinite; transform: scale(1.015); z-index: 20; } /* Antes esta regla también incluía ".agenda-break.is-live-active" (typo de copy/paste señalado en HANDOFF.md): un break "en vivo" heredaba el borde blanco pensado para el fondo degradado de las tarjetas hero, y con página blanca ese borde blanco queda invisible. Un break no tiene fondo propio, así que le basta el borde rojo simple de la regla de arriba. */ .agenda-card--hero.is-live-active { border: 2px solid #ffffff !important; border-radius: 16px; outline: 2px solid var(--live); outline-offset: 2px; box-shadow: 0 0 18px var(--live-glow), 0 0 36px rgba(255, 23, 68, 0.3); } .agenda-card.is-live-active::after, .agenda-break.is-live-active::after { content: '● EN ESTE MOMENTO'; position: absolute; top: -13px; right: 16px; background: var(--live); color: #ffffff; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.14em; padding: 4px 12px; border-radius: 20px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px var(--live), 0 0 22px var(--live-glow), 0 5px 15px rgba(11, 21, 54, 0.25); text-transform: uppercase; border: 2px solid #ffffff; animation: blink-text 1.6s infinite; z-index: 50; } /* Revelado al hacer scroll — GSAP/ScrollTrigger controla la animación (ver js/agenda.js). Este CSS solo evita el flash de contenido visible antes de que el script cargue. */ .agenda-reveal { /* Estado inicial (oculto) del wipe izquierda->derecha: insets superior/ inferior/izquierdo negativos a propósito para que, ya en el estado final, el glow pulsante de "en vivo" (.is-live-active, ver más abajo) no se recorte contra el borde de la fila mientras dura la animación. Una vez el wipe termina, js/agenda.js quita el clip-path por completo (clipPath: 'none') — así el glow/badge "en vivo" nunca queda recortado en NINGÚN borde, ni siquiera el derecho (que durante el wipe no puede llevar buffer porque es el eje que anima). Ver js/agenda.js para el tween. */ clip-path: inset(-60px 100% -60px -60px); } /* --- Footer (igual que index.html, sin el botón CTA) --- */ .site-footer { background-color: #12082A; color: #ffffff; padding: 60px 10% 20px; border-top: 2px solid rgba(255, 110, 199, 0.15); } .footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; flex-wrap: wrap; gap: 30px; } .footer-logos { display: flex; align-items: center; } .footer-logos-img { height: 90px; width: auto; max-width: 100%; display: block; } .footer-socials { display: flex; gap: 15px; } .social-link { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #ffffff; transition: all 0.3s ease; } .social-link:hover { background-color: #FF6EC7; color: #12082A; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 110, 199, 0.2); border-color: #FF6EC7; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: #8892b0; flex-wrap: wrap; gap: 15px; } .footer-bottom p { margin: 0; } .privacy-link { color: #8892b0; text-decoration: none; transition: color 0.3s ease; } .privacy-link:hover { color: #FF6EC7; text-decoration: underline; } @media (max-width: 992px) { .footer-top { flex-direction: column; text-align: center; gap: 40px; } .footer-logos { justify-content: center; } } @media (max-width: 576px) { .footer-bottom { flex-direction: column; text-align: center; } } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 6px; background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-dark); } /* --- Menú de horarios (barra de chips horizontal, sticky bajo la franja de patrocinadores) --- */ .agenda-chip-bar { position: sticky; top: 100px; z-index: 25; margin: 0 0 1.5rem; padding: 0.6rem 0; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-soft); } .agenda-chip-bar__track { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; cursor: grab; /* html/body heredan scroll-behavior:smooth; sin este reset, cada asignación de track.scrollLeft durante el arrastre (js/agenda.js) se animaría de a poquito en vez de seguir el cursor 1:1, y se sentiría con retraso/goma. El auto-centrado del chip activo sigue siendo smooth porque pasa behavior:'smooth' explícito en su propio scrollTo(), que gana sobre este valor heredado. */ scroll-behavior: auto; } /* Arrastrar con el mouse (ver js/agenda.js): sin esto el navegador selecciona el texto de los chips en vez de arrastrar el track. */ .agenda-chip-bar__track.is-dragging { cursor: grabbing; user-select: none; } .agenda-chip-bar__track::-webkit-scrollbar { display: none; } .agenda-chip { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-card); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: var(--transition-smooth); } .agenda-chip__label { font-weight: 600; opacity: 0.85; } .agenda-chip--break { font-style: italic; opacity: 0.75; } .agenda-chip:hover { border-color: var(--brand); color: var(--text-main); } .agenda-chip.is-active { background: var(--brand); border-color: var(--brand); color: #ffffff; } .agenda-chip.is-active .agenda-chip__label { opacity: 0.85; } /* --- Franja de patrocinadores: sticky, misma para desktop y móvil, logos reales sobre chip claro (varios logos traen texto oscuro que se pierde sobre fondo oscuro) --- */ .sponsor-bar { /* Mismo fondo sólido que el resto de la agenda (var(--bg-page)) — antes era un blanco translúcido con blur, línea inferior y sombra propia, lo que la separaba visualmente del resto de la página. Sigue siendo sticky (necesita fondo opaco: el contenido del programa pasa debajo), pero ya no se distingue como una franja aparte. */ position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 10px; padding: 14px 0; background: var(--bg-page); } .sponsor-bar__label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .sponsor-bar__row { overflow-x: auto; scrollbar-width: none; } .sponsor-bar__row::-webkit-scrollbar { display: none; } /* Los chips viven en .sponsor-bar__track. Sin JS (o con prefers-reduced-motion, o si todo cabe en pantalla) la fila solo se desplaza a mano, como antes. */ .sponsor-bar__track { display: flex; align-items: center; gap: 16px; width: max-content; } /* Carrusel automático (js/agenda.js agrega .is-marquee solo cuando los patrocinadores no caben en el ancho disponible): el track lleva sus chips duplicados y se desplaza exactamente un juego completo (--marquee-shift, calculado en JS) para que el reinicio del loop no se note. */ .sponsor-bar__row.is-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .sponsor-bar__row.is-marquee .sponsor-bar__track { animation: sponsor-marquee var(--marquee-duration, 30s) linear infinite; will-change: transform; } .sponsor-bar__row.is-marquee:hover .sponsor-bar__track, .sponsor-bar__row.is-marquee:focus-within .sponsor-bar__track { animation-play-state: paused; } @keyframes sponsor-marquee { to { transform: translateX(calc(-1 * var(--marquee-shift, 0px))); } } .sponsor-chip { /* El chip claro nació para que logos con texto oscuro no se perdieran contra la página oscura de antes. Con página blanca ese motivo ya no aplica, pero sin borde/sombra el chip (blanco) se fundiría con la página (también blanca) — el borde + sombra sutil lo mantienen como tarjeta reconocible. */ flex-shrink: 0; display: flex; align-items: center; background: #ffffff; border: 1px solid var(--border-soft); box-shadow: 0 1px 4px rgba(18, 8, 42, 0.06); border-radius: 10px; padding: 6px 14px; } .sponsor-chip img { height: 28px; width: auto; display: block; } /* Platino > Oro > Plata > Otros, mismo orden de nivel que la sección de patrocinadores de index.html (qualtrics+net2phone=platino, ipcom=oro, nuxiba=plata, concentrix=otros). */ .sponsor-chip--platino { background: #ffffff; padding: 9px 18px; } .sponsor-chip--platino img { height: 40px; } .sponsor-chip--oro img { height: 32px; } .sponsor-chip--plata img { height: 27px; } .sponsor-chip--otros img { height: 22px; opacity: 0.75; } .sponsor-divider { width: 1px; height: 28px; background: rgba(18, 8, 42, 0.15); flex-shrink: 0; } /* Divisor tras el último patrocinador: solo tiene sentido en el carrusel, donde marca el corte entre el final de un juego de logos y el inicio del siguiente. En la fila estática (todo cabe) quedaría colgando al final. */ .sponsor-divider--end { display: none; } .sponsor-bar__row.is-marquee .sponsor-divider--end { display: block; } /* --- Animación de entrada de patrocinadores --- .sponsor-bar es lo primero visible al cargar (no depende de scroll como .agenda-reveal), así que anima una sola vez al cargar la página, no al entrar en viewport. El estado base (sin @media) es el final — visible, sin transform — así que sin JS/GSAP, o con prefers-reduced-motion, el patrocinador nunca queda oculto por accidente; el @media SOLO añade el "antes" (oculto) y el keyframe cuando el movimiento sí está permitido. */ @media (prefers-reduced-motion: no-preference) { .sponsor-bar__label, .sponsor-bar__track > * { opacity: 0; animation: sponsor-in 0.55s cubic-bezier(0.23, 1, 0.32, 1) both; } .sponsor-bar__label { animation-delay: 0s; } .sponsor-bar__track > *:nth-child(1) { animation-delay: 0.08s; } .sponsor-bar__track > *:nth-child(2) { animation-delay: 0.14s; } .sponsor-bar__track > *:nth-child(3) { animation-delay: 0.20s; } .sponsor-bar__track > *:nth-child(4) { animation-delay: 0.26s; } .sponsor-bar__track > *:nth-child(5) { animation-delay: 0.32s; } .sponsor-bar__track > *:nth-child(n+6) { animation-delay: 0.38s; } /* Los duplicados del carrusel (js/agenda.js) se crean cuando la entrada ya terminó: sin este override arrancarían ocultos y con su propio fade. */ .sponsor-bar__track > [data-clone] { opacity: 1; animation: none; } } @keyframes sponsor-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* --- Efecto Resonance para Imagen de Patrocinadores --- */ .sponsor-resonance-card { display: block; position: relative; overflow: hidden; border: 1px solid var(--border-soft) !important; border-radius: 1rem; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); background: var(--bg-card); box-shadow: 0 4px 16px rgba(11, 21, 54, 0.06); } .sponsor-resonance-card:hover { box-shadow: 0 12px 26px rgba(230, 25, 176, 0.2); border-color: var(--brand) !important; transform: translateY(-5px); z-index: 10; } .sponsor-resonance-card img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); display: block; width: 100%; } .sponsor-resonance-card:hover img { transform: scale(1.1); filter: brightness(1.05); } /* --- Navbar (igual que index.html/contacto.html) --- */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color: rgba(18, 8, 42, 0.95); border-bottom: 1px solid #000000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .logos-container { flex: 1; display: flex; align-items: center; } .logo-link { display: inline-block; text-decoration: none; } .nav-main-logo { max-height: 62px; width: auto; display: block; transition: transform 0.3s ease; } .nav-main-logo:hover { transform: scale(1.02); } .nav-links { flex: 2; list-style: none; display: flex; justify-content: center; gap: 25px; align-items: center; margin: 0; padding: 0; } .nav-links a { color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 400; transition: color 0.3s ease; } .nav-links a:hover { color: #FF6EC7; } .nav-action { flex: 1; display: flex; justify-content: flex-end; } .btn-nav-ticket { background-color: transparent; color: #FF6EC7; border: 2px solid #FF6EC7; padding: 8px 24px; border-radius: 30px; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 1px; transition: all 0.3s ease; } .btn-nav-ticket:hover { background-color: #FF6EC7; color: #12082A; box-shadow: 0 5px 15px rgba(255, 110, 199, 0.4); transform: translateY(-2px); } .nav-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1001; } .nav-hamburger span { display: block; width: 100%; height: 2px; background-color: #ffffff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } @media (max-width: 768px) { .nav-hamburger { display: flex; } .nav-links { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(18, 8, 42, 0.98); flex-direction: column; justify-content: center; align-items: center; gap: 36px; z-index: 1000; } .nav-links.open { display: flex; } .nav-links a { font-size: 22px; font-weight: 600; } .nav-action { display: none; } } /* --- Accesibilidad: respeta prefers-reduced-motion --- */ @media (prefers-reduced-motion: reduce) { .agenda-card.is-live-active, .agenda-break.is-live-active, .agenda-card--hero.is-live-active { animation: none; } .agenda-card.is-live-active::after, .agenda-break.is-live-active::after { animation: none; } } /* --- Micro-interacciones: feedback al presionar --- */ .btn-nav-ticket:active, .agenda-logo-chip:active, .agenda-chip:active { transform: scale(0.96); transition: transform 0.1s ease; } .nav-hamburger:active span { background-color: #FF6EC7; } .agenda-card:active, .agenda-break:active { transform: scale(0.99); }