/* ============================================================ WebCas by CleanByte — intro de /web-studio/ (v12) Esta hoja SOLO la carga /web-studio/. Hace dos cosas: 1) Apaga el fondo antiguo de la página (olas azules, aurora, píldoras de código flotantes y el velo de seda) y la deja en blanco puro. El tema "azul" se desactiva quitando el atributo data-cbx-wave del ; esto es la red de seguridad por si esa copia del HTML llega en caché. 2) Dibuja el corredor de imágenes del intro. Toda la geometría va en cqw (1% del ancho del contenedor del corredor), así que el efecto conserva sus proporciones a cualquier tamaño; la adaptación al móvil en vertical no es de tamaño sino de abanico, y vive en cbx-webcas-v12.js. El marcado lo inyecta cbx-webcas-v12.js DESPUÉS de la hidratación — regla de siempre: React reconcilia el por posición y borraría cualquier cosa que se escriba en el HTML. ============================================================ */ /* ---------- 1) fondo blanco ---------- */ html body { background-color: #ffffff; } /* capas decorativas del fondo anterior */ html .aurora, html .cbx-shapes, html .cbx-pageveil, html #cbx-waves { display: none !important; } /* ---------- alto del intro ---------- svh para que el alto no salte cuando la barra del navegador móvil se esconde; vh de respaldo para navegadores viejos. */ :root { --wc-h: clamp(480px, 76vh, 740px); --wc-axis: 52%; } @supports (height: 1svh) { :root { --wc-h: clamp(480px, 76svh, 740px); } } @media (max-width: 640px) { :root { --wc-h: clamp(420px, 74vh, 600px); } @supports (height: 1svh) { :root { --wc-h: clamp(420px, 74svh, 600px); } } } /* Reserva de espacio: el intro se inyecta tras hidratar, así que el hueco se aparta antes para que nada salte al aparecer (CLS = 0). La clase la pone el propio JS, de modo que sin JS no queda un bloque en blanco encima de la página. */ html.wc-reserve main::before { content: ""; display: block; height: var(--wc-h); } /* ---------- 2) el intro ---------- */ #cbx-webcas { position: relative; height: var(--wc-h); overflow: hidden; background: #ffffff; isolation: isolate; } /* el corredor vive en su propio contenedor de consulta: cqw = 1% de ESTE ancho, que aquí es el de la sección. Ensancharlo por encima de la pantalla en móvil parece que agranda el efecto y no: sube el cqw y encoge la ventana visible en la misma proporción, así que la tarjeta sale de cuadro igual de pequeña. Lo que agranda el corredor en vertical es cerrar el abanico, y eso vive en el juego "narrow" de cbx-webcas-v12.js. */ .wc-corridor { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; } .wc-stage { position: absolute; inset: 0; transform-style: preserve-3d; } .wc-card { position: absolute; overflow: hidden; backface-visibility: hidden; background: #f2f2f0; box-shadow: 0 1.4cqw 4cqw -1.6cqw rgba(11, 28, 44, 0.42); } .wc-card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } /* niebla blanca en la garganta del corredor: separa el logo de las tarjetas pequeñas del fondo. Va corta a propósito — la legibilidad del texto la resuelve su propio halo (más abajo), no un velo que tape medio corredor. */ .wc-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( 46% 40% at 50% var(--wc-axis), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.28) 64%, rgba(255, 255, 255, 0) 80% ); } /* arriba: deja limpia la cabecera fija. abajo: el corredor se disuelve en el blanco de la página en vez de cortarse */ .wc-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.9) 96%, #ffffff 100% ); } /* ---------- contenido ---------- */ .wc-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1.25rem 2rem; box-sizing: border-box; } /* Halo propio en vez de más velo: el blanco viaja pegado a la letra, así el texto se lee sobre cualquier foto y el corredor se sigue viendo alrededor. */ .wc-logo { width: min(520px, 62vw); height: auto; display: block; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.85)); opacity: 0; transform: translateY(10px); animation: wc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; } .wc-tag { margin: 1.5rem 0 0; font-family: var(--font-display), "Space Grotesk", system-ui, sans-serif; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #0b0b0c; text-shadow: 0 0 10px #fff, 0 0 24px #fff, 0 0 44px rgba(255,255,255,0.9); text-wrap: balance; opacity: 0; animation: wc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s forwards; } .wc-sub { margin: 0.85rem 0 0; max-width: 34rem; font-size: clamp(0.95rem, 1.2vw, 1.06rem); line-height: 1.55; color: #4b5563; text-shadow: 0 0 10px #fff, 0 0 22px #fff, 0 0 40px rgba(255,255,255,0.9); text-wrap: balance; opacity: 0; animation: wc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards; } .wc-cue { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; min-height: 44px; padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(11, 28, 44, 0.14); background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 0.875rem; font-weight: 600; color: #1f2937; text-decoration: none; opacity: 0; animation: wc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards; transition: border-color 0.2s, color 0.2s, background-color 0.2s; } .wc-cue:hover { border-color: rgba(11, 28, 44, 0.3); color: #0b0b0c; background: #ffffff; } .wc-cue svg { animation: wc-bob 2.4s ease-in-out infinite; } @keyframes wc-rise { to { opacity: 1; transform: translateY(0); } } @keyframes wc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ---------- el hero de siempre viene justo debajo ---------- Ya no necesita el pt-32/pt-40 que lo despejaba de la cabecera: ese trabajo lo hace ahora el intro. */ html.wc-on section#top { padding-top: 2.25rem; } @media (min-width: 640px) { html.wc-on section#top { padding-top: 3.5rem; } } /* ---------- pausa ---------- Fuera de pantalla y con "reducir movimiento" la animación se PAUSA, no se apaga: cada tarjeta ya entró con un delay negativo, así que congelada sigue siendo un corredor completo; desactivada se amontonarían todas sobre el eje. */ #cbx-webcas.wc-paused .wc-card { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .wc-card { animation-play-state: paused !important; } .wc-logo, .wc-tag, .wc-sub, .wc-cue { animation-duration: 0.01ms; opacity: 1; transform: none; } .wc-cue svg { animation: none; } } /* ---------- móvil ---------- */ @media (max-width: 640px) { .wc-inner { padding: 4.75rem 1.1rem 1.75rem; } .wc-logo { width: min(340px, 76vw); } .wc-tag { margin-top: 1.15rem; font-size: 1.22rem; } .wc-sub { margin-top: 0.7rem; font-size: 0.95rem; max-width: 22rem; } .wc-cue { margin-top: 1.15rem; } .wc-veil { background: radial-gradient( 58% 26% at 50% var(--wc-axis), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.7) 44%, rgba(255, 255, 255, 0) 82% ); } .wc-logo { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.92)); } }