` del marcado. Una franja que cruza la retícula y descansa: 5,4s de cruce y 3,6s de pausa en un ciclo de 9s. `linear` porque es movimiento constante, no una llegada. Arranca a los 2,2s, cuando ya terminó la coreografía de entrada — encima de ella sería un octavo gesto compitiendo con el titular. El recorrido va de -100% a 360% de su propio ancho: con una franja del 28% del encuadre, 360% es justo el punto en que sale entera por la derecha. El `overflow: clip` de la sección recorta lo que sobra sin crear scroll. 28% y no 10%: con el fotograma congelado a mitad de cruce, a 10% la captura era idéntica a la de sin barrido — azul sobre azul no se ve. El blanco al 8% tampoco se distinguía. A 28% es un velo que se nota quieto, así que en movimiento se lee sin tener que buscarlo. SE REPITE SIN FIN, y la luz de `::before` también, por decisión tomada el 2026-09-10 sabiendo lo que cuesta: WCAG 2.2.2 pide poder pausar un movimiento automático de más de 5s que convive con el contenido, y aquí sólo lo apaga `prefers-reduced-motion`. Si hay que cumplirla, la salida barata es acotar las repeticiones: 3 pasadas aquí y 2 ciclos en la luz, que con `alternate` terminan justo en el reposo. El selector va anclado a `.puerta` porque este bloque es `is:global` y `.barrido` es un nombre que cualquier otra página podría querer. */ .puerta > .barrido { position: absolute; inset-block: 0; left: 0; width: 28%; pointer-events: none; background: linear-gradient( 90deg, transparent, color-mix(in oklab, var(--color-campana-fria) 28%, transparent) 50%, transparent ); transform: translateX(-100%); animation: escanear 9s linear 2.2s infinite; } @keyframes escanear { from { transform: translateX(-100%); } 60%, to { transform: translateX(360%); } } /* ── EL MARCO Y SUS CUATRO CRUCES ───────────────────────────────────────── */ .marco { position: absolute; top: 50%; left: 50%; /* Crece con el reloj dentro: a 34rem las cruces caían sobre las cifras. */ width: min(86vw, 68rem); height: min(74svh, 40rem); z-index: 1; color: color-mix(in oklab, var(--color-superficie) 42%, transparent); pointer-events: none; transform: translate(-50%, -50%); } .marca-registro { position: absolute; width: 3.5rem; height: 3.5rem; color: currentColor; } /* Las esquinas se trazan primero. `scale` nace desde el vértice que les corresponde para que parezca que el marco se calibra, no que aparece una caja decorativa. */ .esquina { position: absolute; width: 0.7rem; height: 0.7rem; opacity: 0; animation: trazar-esquina 520ms var(--ease-out) var(--retardo) both; } .esquina-noroeste { top: 0; left: 0; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform-origin: top left; } .esquina-noreste { top: 0; right: 0; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform-origin: top right; } .esquina-suroeste { bottom: 0; left: 0; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; transform-origin: bottom left; } .esquina-sureste { right: 0; bottom: 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform-origin: bottom right; } @keyframes trazar-esquina { from { opacity: 0; transform: scale(0.2); } to { opacity: 0.8; transform: scale(1); } } .cruz { position: absolute; inset: 50% auto auto 50%; width: 1.125rem; height: 1.125rem; opacity: 0; transform: translate(-50%, -50%) scale(0.65); animation: registrar-cruz 420ms var(--ease-out) calc(var(--retardo) + 320ms) both; } .cruz::before, .cruz::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); } .cruz::before { width: 100%; height: 1px; } .cruz::after { width: 1px; height: 100%; } @keyframes registrar-cruz { from { opacity: 0; transform: translate(-50%, -50%) scale(0.65); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Tres columnas discontinuas bastan para citar el rastro digital de la referencia. Son parte de la marca y se quedan quietas al terminar; no hay lluvia ni partículas en movimiento continuo. */ .rastro-registro { position: absolute; top: 50%; left: 50%; width: 1px; height: 4.5rem; color: currentColor; background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 6px); box-shadow: -0.75rem 0.5rem 0 currentColor, 0.85rem -0.35rem 0 currentColor; opacity: 0; transform: translate(-50%, -50%) scaleY(0.45); animation: revelar-rastro 620ms var(--ease-out) calc(var(--retardo) + 470ms) both; } @keyframes revelar-rastro { to { opacity: 0.1; transform: translate(-50%, -50%) scaleY(1); } } .marca-noroeste { top: 0; left: 0; transform: translate(-50%, -50%); } .marca-noreste { top: 0; right: 0; transform: translate(50%, -50%); } .marca-suroeste { bottom: 0; left: 0; transform: translate(-50%, 50%); } .marca-sureste { right: 0; bottom: 0; transform: translate(50%, 50%); } /* ── EL CONTENIDO ───────────────────────────────────────────────────────── */ .contenido-puerta { max-width: 68rem; } .sello-puerta img { width: 3.5rem; height: 3.5rem; } .ceja-puerta { max-width: 62rem; margin-block-start: clamp(1.5rem, 4svh, 2.75rem); font-family: var(--font-sans); font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); font-weight: 300; line-height: 1.65; letter-spacing: 0.27em; text-transform: uppercase; color: color-mix(in oklab, var(--color-superficie) 78%, transparent); } .titulo-puerta { margin-block: clamp(1.25rem, 3.5svh, 2.5rem) clamp(1.5rem, 4svh, 2.5rem); font-family: var(--font-display); font-size: clamp(1rem, 0.72rem + 1.1vw, 1.85rem); font-weight: 600; line-height: 1.45; letter-spacing: clamp(0.12em, 0.42vw, 0.3em); text-transform: uppercase; color: var(--color-superficie); } .titulo-puerta span { display: block; white-space: nowrap; } /* El reloj respira menos que en el teaser: allí cierra la página, aquí es el paso entre el titular y la única acción, y separarlo más rompe la lectura en dos mitades. */ .cuenta-puerta { margin-block-end: clamp(1.5rem, 4svh, 2.75rem); } [data-slot='boton'].puerta-cta { min-height: 44px; border-radius: 0; padding-inline: 1.75rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; } /* El salto empieza donde la línea más larga conserva su corte editorial: antes de 64rem, agrandar el tracking rompería el `nowrap` central. */ @media (width >= 64rem) { .sello-puerta img { width: 6.25rem; height: 6.25rem; } .ceja-puerta { margin-block-start: clamp(2rem, 4svh, 3.25rem); font-size: 0.875rem; letter-spacing: 0.3em; } .titulo-puerta { margin-block: clamp(1.75rem, 3.5svh, 3rem) clamp(1.75rem, 4svh, 3rem); font-size: clamp(2.4rem, 1.4rem + 1.7vw, 3.05rem); line-height: 1.35; letter-spacing: clamp(0.16em, 0.35vw, 0.22em); } [data-slot='boton'].puerta-cta { min-height: 48px; padding-inline: 2.25rem; font-size: 0.8125rem; letter-spacing: 0.31em; } } @media (width < 30rem) { .puerta { padding-inline: 1rem; } .marco { width: calc(100vw - 2rem); height: min(80svh, 40rem); } .ceja-puerta { max-width: 34ch; letter-spacing: 0.16em; } .titulo-puerta { font-size: 0.925rem; letter-spacing: 0.1em; } } @media (height < 38rem) { .sello-puerta img { width: 2.75rem; height: 2.75rem; } .ceja-puerta { margin-block-start: 1rem; } .titulo-puerta { margin-block: 0.9rem 1rem; line-height: 1.3; } .cuenta-puerta { margin-block-end: 1rem; } } /* REDUCED MOTION: se conserva lo que informa y se quita lo que se mueve. El reloj sigue contando: unas cifras que cambian son información, no motion. */ @media (prefers-reduced-motion: reduce) { .puerta .entra, .puerta .entra-titular-hero { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } .puerta .esquina { animation: none !important; opacity: 0.8 !important; transform: scale(1) !important; } .puerta .cruz { animation: none !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } .puerta .rastro-registro { animation: none !important; opacity: 0.1 !important; transform: translate(-50%, -50%) scaleY(1) !important; } /* El campo vuelve a ser la diagramación quieta: la luz en su reposo y sin barrido. Ninguno de los dos informa de nada, así que no hay nada que conservar — a diferencia del reloj. */ .puerta::before { animation: none !important; opacity: 1 !important; transform: none !important; } .puerta .barrido { display: none; } }