: el lienzo de partículas va fijo en z-index 0 y las secciones en z-index 1, así que un fondo opaco en la sección taparía el cerebro. Por eso la banda vive AQUÍ, en una capa fija que va por debajo del lienzo, y la sección se queda transparente. Su opacidad la escribe js/particles.js en --brain-a, atada al recorrido de la sección 4 (no al de las partículas): cuando la sección se va, vuelve el papel, y la sección 5 nunca se lee sobre un fondo a medio camino. */ #dim { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--brain-a, 0); background: radial-gradient( 72% 78% at 30% 50%, #0b0f14 0%, #101419 58%, #161d25 100% ); } @media (max-width: 900px) { #dim { background: radial-gradient( 92% 46% at 50% 30%, #0b0f14 0%, #101419 58%, #161d25 100% ); } } #field { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* el lienzo no participa de la lectura: es atmósfera */ contain: strict; } /* --- Las secciones dejan pasar el campo ----------------------------------- Transparentes las que tienen partículas encima —el papel lo pone —, y opacas las dos últimas bandas oscuras, donde ya no queda ninguna partícula viva y sí hace falta un fondo sólido. ------------------------------------------------------------------------ */ .hero, .strip, .brain, .plan, .faq, .get, .posts, .foot, .next { position: relative; z-index: 1; } .strip, .brain, .plan, .faq, .posts, .next { background: transparent; } /* El cierre: Crepúsculo, igual que la pieza de cierre del sistema visual. El latón se queda en un extremo lejano (130 %) para que el degradado nunca llegue a aclararse tanto como para comprometer el texto, que aquí va centrado y cruza toda la banda. */ .get { background: linear-gradient(135deg, #1e2a36 0%, #2f3e4e 52%, #7d6033 130%); } .foot { background: var(--p-bg-d); } /* El fondo que aparece tras el paisaje deja asomar unas pocas motas: es lo que convierte la sección 2 en «un par de partículas, casi invisibles». Sobre papel esas motas van en pizarra, no en claro (ver el canal `ink` de js/particles.js). */ .reveal__bg { background: radial-gradient( 90% 70% at 50% 42%, rgba(255, 255, 255, 0.82) 0%, rgba(246, 247, 248, 0.82) 64% ), rgba(246, 247, 248, 0.82); } /* --------------------------------------------------------------------------- Sección 4 · Alio AI ---------------------------------------------------------------------------- El cerebro lo dibuja el lienzo, no esta sección: aquí solo vive el texto, a la derecha, mientras las partículas se juntan a la izquierda. La sección es alta y su contenido se queda anclado el tiempo justo para leerlo antes de que el cerebro estalle. ------------------------------------------------------------------------ */ .brain { height: 220vh; } .brain__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; } .brain__wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } /* El texto se retira CON la banda, no después de ella. La sección mide 220vh y su escenario está anclado solo 100vh, así que su tercio final es un tramo vacío por el que este bloque —tinta clara— seguía subiendo mientras el fondo se volvía papel. Medido: entre que el titular de Premium entra y este texto acaba de salir hay ~550 px en los que los dos están en pantalla a la vez, uno en tinta clara y el otro en tinta oscura. NINGUNA opacidad del velo sirve a los dos, así que este se va primero. Se ata a `--brain-a` —la propia banda— en vez de a una marca nueva, porque son el mismo suceso. El ×2−0,6 lo adelanta: llega a cero cuando la banda todavía va por el 30 %, que es lo que deja el relevo limpio. Valor de reserva 1, para que sin script el texto siga estando. */ .brain__copy { width: min(500px, 46%); margin-left: auto; opacity: clamp(0, calc(var(--brain-a, 1) * 2 - 0.6), 1); } .brain__kicker { display: block; font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--kicker); } .brain__title { margin-top: var(--sp-12); font-size: var(--text-h2); font-weight: 600; line-height: 1.06; letter-spacing: var(--tracking-display); color: var(--fg); text-wrap: balance; } .brain__lead { margin-top: var(--sp-16); font-size: var(--text-lg); line-height: 1.5; color: var(--fg); text-wrap: pretty; } .brain__list { margin: var(--sp-24) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-16); } .brain__list li { position: relative; padding-left: 26px; font-size: var(--text-body); line-height: 1.45; color: var(--fg-soft); text-wrap: pretty; } .brain__list b { color: var(--fg); font-weight: 600; } /* La marca de cada línea es un triángulo: rima con las partículas */ .brain__list li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid var(--p-slate-d); } .brain__note { margin-top: var(--sp-24); padding-top: var(--sp-20); border-top: 1px solid var(--hairline); font-size: var(--text-sm); line-height: 1.5; color: var(--fg-soft); } /* --- Ventana baja --------------------------------------------------------- */ @media (max-height: 840px) and (min-width: 901px) { .brain__lead { margin-top: var(--sp-12); font-size: var(--text-body); } .brain__list { margin-top: var(--sp-16); gap: var(--sp-12); } .brain__list li { font-size: var(--text-sm); padding-left: 22px; } .brain__note { margin-top: var(--sp-16); padding-top: var(--sp-12); } } /* --- Apilado -------------------------------------------------------------- Sin sitio al lado, el cerebro sube y el texto ocupa la mitad de abajo, con un degradado que lo separa del campo de partículas. ------------------------------------------------------------------------ */ @media (max-width: 900px) { .brain { height: 240vh; } .brain__stage { align-items: flex-end; } .brain__wrap { padding: 0; } .brain__copy { width: 100%; margin: 0; padding: var(--sp-40) var(--gutter) clamp(28px, 6vh, 56px); background: linear-gradient( to bottom, rgba(16, 20, 25, 0) 0%, rgba(16, 20, 25, 0.92) 22%, rgba(16, 20, 25, 0.96) 100% ); } .brain__title { font-size: clamp(1.5rem, 1.1rem + 2.6vw, 2rem); } .brain__lead { margin-top: var(--sp-12); font-size: var(--text-body); } .brain__list { margin-top: var(--sp-16); gap: var(--sp-12); } .brain__list li { font-size: var(--text-sm); } /* Con las cinco líneas el texto ocupaba 744 de 844 px y no le dejaba sitio al cerebro. Las dos últimas se quedan fuera aquí: «lee tus meses» ya sale en la franja lateral y «nunca decide por ti» lo cubre el FAQ. */ .brain__list li:nth-child(n + 4) { display: none; } } /* Pantalla corta: no cabe ni la lista corta, manda el titular. El corte estaba en 620 px, VEINTE por debajo de la altura más común de un Android de gama baja. A 360×640 el bloque de texto crecía hasta 629 de 640 y el cerebro entraba 92 px en la parte ya opaca de su degradado: quedaba enterrado justo en la sección que existe para enseñarlo. Medido: con esta poda el texto baja a ~500 px y el cerebro despeja. */ @media (max-width: 900px) and (max-height: 700px) { .brain__list li:nth-child(n + 3), .brain__note { display: none; } .brain__lead { font-size: var(--text-sm); } } /* --- Sin movimiento ------------------------------------------------------- El recorrido se desarma: la sección deja de ser alta y de anclarse. El lienzo sigue pintando (un cuadro por scroll, sin deriva), así que el cerebro se ve igual, quieto. ------------------------------------------------------------------------ */ .no-motion .brain { height: auto; } .no-motion .brain__stage { position: relative; height: auto; min-height: 100vh; padding: var(--sp-72) 0; }