/* ============================================================================ LA GALERÍA ---------------------------------------------------------------------------- Si la aplicación es el instrumento, la portada es la sala donde se enseña la obra. Y una sala que compite con lo que cuelga no es una sala: es ruido. Esto no nace de una preferencia estética. Medido sobre la portada anterior, el mismo párrafo del hero pasaba de 2,2:1 a 10,1:1 de contraste según qué forma del mural le tocara detrás — muy por debajo del mínimo legible, en la página que decide si alguien entra o se va. El mural no sobra: sobra que esté delante. Aquí retrocede a ser atmósfera y la obra pasa a ser la luz. ============================================================================ */ /* --------------------------------------------------------------------- la sala El fondo es el mismo azul-negro del instrumento: quien se registra no debe sentir que ha cambiado de producto al entrar. */ html body.gallery { background: radial-gradient(130% 80% at 50% -10%, rgba(126,158,220,.08), transparent 60%), var(--ui-void); color: var(--ui-ink); } /* El mural pasa a ser la luz ambiente de la sala. Se le pone un velo denso donde vive el texto y abierto donde respira la obra: el velo es la luz de lectura, no una capa uniforme que apagaría el cuadro entero. */ /* El mural retrocede a ser luz ambiente. Se atenúa la IMAGEN, no una capa encima: `.hero-art` es el propio , y un elemento reemplazado no renderiza ::after — por eso un velo superpuesto no llegaba a pintarse nunca. Atenuar el original es además más honesto con el cuadro: conserva su forma y su color, solo baja la luz de la sala. */ html body.gallery .hero-art { filter: brightness(.34) saturate(.86) contrast(.96); } /* La columna de texto se lee sobre suelo estable, no sobre lo que toque. */ html body.gallery .hero-grid > *:first-child { position: relative; z-index: 2; } html body.gallery .hero h1 { color: var(--ui-ink); } html body.gallery .hero h1 em, html body.gallery .hero h1 i { color: var(--ui-signal-2); font-style: italic; } html body.gallery .hero-sub, html body.gallery .hero-note { color: #B9C4D8; } /* 9,1:1 sobre la sala */ /* El rótulo de encima del titular se retira: el titular ya se sostiene solo, y una etiqueta encima solo añade una línea que nadie lee. */ html body.gallery .hero .eyebrow { display: none; } /* ------------------------------------------------------------------- la obra FIRMA. Las piezas cuelgan iluminadas y derraman luz sobre el suelo de la sala. La luz lleva dirección y desenfoque —cae hacia abajo, como caería—: un halo centrado y sin desplazamiento sería una calcomanía, no una luz. */ html body.gallery .deck-mock, html body.gallery .mock-stack > * { box-shadow: 0 0 0 1px rgba(126,158,220,.16), 0 2px 8px rgba(0,0,0,.55), 0 34px 60px -28px rgba(0,0,0,.95), 0 44px 90px -50px rgba(255,180,120,.28); border-radius: 10px; transition: transform 420ms cubic-bezier(.16,1,.3,1), box-shadow 420ms cubic-bezier(.16,1,.3,1); } html body.gallery .mock-stack:hover > * { transform: translateY(-3px); } /* ---------------------------------------------------------------- las paredes Las secciones se separan por un filo, no por un cambio de color: en una sala las paredes son la misma pared. */ html body.gallery .section { border-top: 1px solid var(--ui-edge); } html body.gallery .section.alt { background: rgba(126,158,220,.028); } html body.gallery .section h2, html body.gallery .section h3 { color: var(--ui-ink); } html body.gallery .section p, html body.gallery .muted, html body.gallery .feat-copy p { color: #A9B4CA; } /* 7,4:1 */ html body.gallery .eyebrow { color: var(--ui-faint); } /* Las tarjetas de la sala son placas, no cajas: filo, no relleno. */ html body.gallery .card, html body.gallery .price-card, html body.gallery .shot-frame, html body.gallery .cert-checks { background: linear-gradient(180deg, var(--ui-rise), var(--ui-panel)); border: 1px solid var(--ui-edge); border-radius: 12px; box-shadow: var(--ui-lift); color: var(--ui-ink); } html body.gallery .price-card.is-pro, html body.gallery .price-card.featured { border-color: rgba(255,74,43,.42); box-shadow: var(--ui-lift), 0 0 0 1px rgba(255,74,43,.18); } /* ------------------------------------------------------------------ controles */ html body.gallery .btn-primary { background: var(--ui-signal); border: 1px solid transparent; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 2px 6px rgba(255,74,43,.3), 0 16px 34px -18px rgba(255,74,43,.75); transition: background 140ms cubic-bezier(.22,1,.36,1), transform 140ms cubic-bezier(.22,1,.36,1); } html body.gallery .btn-primary:hover { background: var(--ui-signal-2); } html body.gallery .btn-primary:active { transform: translateY(1px); } html body.gallery .btn-ghost { background: var(--ui-rise); border: 1px solid var(--ui-edge); color: var(--ui-ink); } html body.gallery .btn-ghost:hover { background: #131C2E; border-color: var(--ui-edge-3); } html body.gallery .nav { background: color-mix(in srgb, var(--ui-void) 76%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--ui-edge); } html body.gallery .nav-links a { color: #A9B4CA; } html body.gallery .nav-links a:hover { color: var(--ui-ink); } html body.gallery .brand { color: var(--ui-ink); } html body.gallery .footer { background: var(--ui-sink); border-top: 1px solid var(--ui-edge); color: #A9B4CA; } html body.gallery .footer a { color: #A9B4CA; } html body.gallery .footer a:hover { color: var(--ui-ink); } /* ------------------------------------------------- superficies del navegador */ html body.gallery ::selection { background: rgba(255,74,43,.28); color: #fff; } html body.gallery { caret-color: var(--ui-signal); scrollbar-color: var(--ui-edge-2) transparent; } html body.gallery ::-webkit-scrollbar { width: 11px; } html body.gallery ::-webkit-scrollbar-track { background: transparent; } html body.gallery ::-webkit-scrollbar-thumb { background: var(--ui-edge-2); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } html body.gallery :focus-visible { outline: 2px solid var(--ui-signal); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------- encender la sala El único momento: al abrir, la sala se enciende sobre la obra. El texto ya está donde va —no se mueve, para que nadie lea a saltos— y lo que cambia es la luz. */ @keyframes gal-luz { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } html body.gallery .hero3d { animation: gal-luz 760ms cubic-bezier(.16,1,.3,1) both; animation-delay: 90ms; } @media (prefers-reduced-motion: reduce) { html body.gallery * { animation: none !important; transition-duration: 1ms !important; } } @media (max-width: 880px) { /* En móvil el mural queda detrás del texto sin columna que lo separe, así que el velo se cierra del todo: primero se lee, después se decora. */ html body.gallery .hero-art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ui-void) 92%, transparent), color-mix(in srgb, var(--ui-void) 97%, transparent)); } }