/* sections/hero.css Único momento de animación orquestada de la página: al cargar, el copy sube en bloque y el LED verde del panel "enciende". El testigo rojo de EN VIVO es un estado permanente (como una luz de tally real), no parte de la secuencia de carga. */ /* Fondo fijo real de la página (no `background-attachment: fixed` sobre la sección — ese enfoque es poco confiable entre navegadores, Safari en particular casi no lo soporta sobre un elemento que no sea , y termina "desapareciendo" en vez de quedar fijo). En cambio: un elemento aparte, position:fixed, del tamaño del viewport, detrás de todo (z-index negativo). Solo se ve donde el contenido de encima es transparente — o sea, en la franja del hero. Todas las secciones que siguen necesitan su propio fondo opaco para taparlo a medida que se hace scroll (ver layout.css ".section", sections/trust.css y sections/footer.css). Se incluye una sola vez, solo en el inicio — ver templates/base.html y landingpage/index.html. */ .site-fixed-bg { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient( 115deg, rgba(13, 18, 32, 0.92) 0%, rgba(13, 18, 32, 0.78) 38%, rgba(13, 18, 32, 0.6) 68%, rgba(13, 18, 32, 0.45) 100% ), url("../../img/hero-bg.jpg"); background-size: cover; background-position: center 35%; background-repeat: no-repeat; } @media (max-width: 62rem) { /* En una pantalla angosta y alta el degradado diagonal se lee casi todo del mismo lado; pasa a vertical, oscuro arriba (detrás del titular) y más claro abajo. */ .site-fixed-bg { background-image: linear-gradient( 180deg, rgba(13, 18, 32, 0.93) 0%, rgba(13, 18, 32, 0.8) 35%, rgba(13, 18, 32, 0.62) 65%, rgba(13, 18, 32, 0.5) 100% ), url("../../img/hero-bg.jpg"); } } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; align-items: center; gap: var(--space-8); padding-block: var(--space-9) var(--space-10); } .hero__copy { max-width: 32rem; } .hero__eyebrow, .hero__title, .hero__lead, .hero__actions { opacity: 0; animation: fade-up var(--duration-slow) var(--ease-out) forwards; } .hero__eyebrow { animation-delay: 40ms; } .hero__title { animation-delay: 120ms; } .hero__lead { animation-delay: 220ms; } .hero__actions { animation-delay: 320ms; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); color: var(--text-secondary); margin-bottom: var(--space-5); } .hero__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 6px 1px rgba(36, 248, 88, 0.7); } .hero__title { font-size: var(--size-display-xl); margin-bottom: var(--space-5); } .hero__lead { font-size: var(--size-body-lg); color: var(--text-secondary); margin-bottom: var(--space-7); max-width: 30rem; } .hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* --- Panel SVG: consola de evento --- */ .hero__visual { min-width: 0; } .hero-panel { display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; overflow: visible; } .hero-panel__plate { fill: var(--brand-blue); stroke: var(--steel-500); stroke-width: 1; } .hero-panel__inset { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; } .hero-panel__screw { fill: var(--steel-400); } .hero-panel__label { fill: var(--text-on-panel); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; } .hero-panel__led-power { fill: var(--brand-green); opacity: 0; animation: power-on var(--duration-slow) var(--ease-out) forwards; animation-delay: 480ms; transform-origin: center; } @keyframes power-on { 0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(36, 248, 88, 0)); } 60% { opacity: 1; filter: drop-shadow(0 0 9px rgba(36, 248, 88, 0.95)); } 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(36, 248, 88, 0.75)); } } /* Testigo de EN VIVO: como una luz de tally real, pulsa de forma continua y discreta. No forma parte de la secuencia de carga. */ .hero-panel__live-dot { fill: var(--brand-red); filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.85)); animation: live-pulse 2.4s ease-in-out infinite; transform-origin: center; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .hero-panel__fader-track { fill: var(--ink-950); stroke: var(--steel-500); } .hero-panel__fader-fill { fill: var(--brand-green); opacity: 0.55; } .hero-panel__fader-cap { fill: var(--steel-300); stroke: var(--ink-900); } .hero-panel__fader-grip { fill: var(--ink-900); } .hero-panel__vu-bg { fill: var(--ink-950); } .hero-panel__vu-segment--green { fill: var(--brand-green); } .hero-panel__vu-segment--red { fill: var(--brand-red); } .hero-panel__vu-segment--off { fill: var(--steel-500); opacity: 0.35; } .hero-panel__nameplate { fill: var(--text-on-panel); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); } @media (max-width: 62rem) { /* display:block en vez de grid de una columna: para apilar dos bloques no hace falta grid, y block evita cualquier ambigüedad de sizing de fr/minmax en un solo track. Efecto secundario: se pierde el "visual primero" que daba `order:-1`; ahora el copy va primero en mobile, orden de lectura igual de razonable. */ .hero { display: block; text-align: left; } .hero__copy { max-width: none; margin-bottom: var(--space-7); } .hero-panel { max-width: 24rem; } } @media (prefers-reduced-motion: reduce) { .hero__eyebrow, .hero__title, .hero__lead, .hero__actions, .hero-panel__led-power { animation: none; opacity: 1; } .hero-panel__live-dot { animation: none; opacity: 1; } }