teal. Aquí extendemos el teal a esa zona. SEGURO para el resto del sitio: este CSS solo se encola en /cruzandolab/ y, además, todas las reglas se acotan con la clase body.cruzandolab-body (que solo añade esta página). El header y el footer del tema conservan su propio fondo, porque NO se tocan sus selectores. ------------------------------------------------------------------------- */ body.cruzandolab-body { background-color: #04A4BC; /* = --cl-teal (literal: body no desciende de #cruzandolab) */ } /* Envoltorios del tema -> transparentes para que se vea el teal del body. Se neutraliza también la sombra del layout "boxed" de Astra. */ body.cruzandolab-body #page, body.cruzandolab-body #content, body.cruzandolab-body .site-content, body.cruzandolab-body .ast-container, body.cruzandolab-body #primary, body.cruzandolab-body .content-area, body.cruzandolab-body .ast-separate-container, body.cruzandolab-body .ast-separate-container .ast-article-single { background: transparent; box-shadow: none; } /* Contenedor central reutilizable. */ #cruzandolab .cruzandolab-shell { width: 100%; max-width: var(--cl-shell-max); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); } /* Margen de desplazamiento para que los anclajes (#capacidades, #contacto) no queden ocultos bajo un header fijo del tema. */ #cruzandolab section[id] { scroll-margin-top: 100px; } /* Títulos de sección. Por defecto BLANCOS (van sobre teal, texto grande). Dentro de paneles claros se sobrescriben a texto oscuro. */ #cruzandolab .cruzandolab-section__title { font-family: var(--cl-font-heading); color: var(--cl-on-teal); font-weight: 700; font-size: clamp(1.7rem, 2.5vw + 1rem, 2.5rem); line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 0.75rem; } #cruzandolab .cruzandolab-section__head { max-width: 48rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; } /* Intro de sección sobre teal: blanco, tamaño grande + peso 600 para que califique como "texto grande" y cumpla contraste (~3:1). */ #cruzandolab .cruzandolab-section__intro { margin: 0; color: var(--cl-on-teal); font-weight: 600; font-size: clamp(1.15rem, 1.2vw + 0.85rem, 1.3rem); } /* ------------------------------------------------------------------------- Botones encapsulados. ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--cl-font-accent); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; line-height: 1; text-decoration: none; padding: 0.9rem 1.6rem; border-radius: var(--cl-radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* Primario: pastilla blanca con texto oscuro (alto contraste sobre teal). */ #cruzandolab .cruzandolab-button--primary { background-color: var(--cl-surface); color: var(--cl-ink); box-shadow: var(--cl-shadow-sm); } #cruzandolab .cruzandolab-button--primary:hover, #cruzandolab .cruzandolab-button--primary:focus-visible { background-color: var(--cl-ink); color: var(--cl-on-teal); transform: translateY(-2px); } /* Fantasma: borde y texto blancos (van sobre teal profundo -> accesible). */ #cruzandolab .cruzandolab-button--ghost { background-color: transparent; color: var(--cl-on-teal); border-color: var(--cl-border-teal); } #cruzandolab .cruzandolab-button--ghost:hover, #cruzandolab .cruzandolab-button--ghost:focus-visible { background-color: rgba(255, 255, 255, 0.14); border-color: var(--cl-on-teal); transform: translateY(-2px); } /* Foco visible accesible (amarillo de marca, alta visibilidad sobre teal). */ #cruzandolab a:focus-visible, #cruzandolab .cruzandolab-button:focus-visible { outline: 3px solid var(--cl-accent-warm); outline-offset: 3px; } /* ------------------------------------------------------------------------- 1. HERO (teal profundo -> texto blanco accesible) ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-hero { padding-block: clamp(3rem, 7vw, 5.5rem); color: var(--cl-on-teal); /* El brillo superior-derecho usa el #04A4BC de marca; el cuerpo del hero descansa sobre teal profundo para que el blanco sea legible. */ background: radial-gradient(130% 130% at 90% 0%, var(--cl-teal) 0%, var(--cl-teal-deep) 52%); } #cruzandolab .cruzandolab-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } #cruzandolab .cruzandolab-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 1.25rem; font-family: var(--cl-font-accent); font-size: 0.95rem; } #cruzandolab .cruzandolab-brand { font-family: var(--cl-font-heading); font-weight: 700; font-size: 1.2rem; color: var(--cl-on-teal); letter-spacing: -0.01em; } #cruzandolab .cruzandolab-brand__sep { color: var(--cl-accent-warm); font-weight: 700; } #cruzandolab .cruzandolab-brand__partners { color: var(--cl-on-teal-soft); } #cruzandolab .cruzandolab-hero__title { font-family: var(--cl-font-heading); color: var(--cl-on-teal); font-weight: 700; font-size: clamp(2.1rem, 3.5vw + 1rem, 3.35rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.1rem; } #cruzandolab .cruzandolab-hero__lead { margin: 0 0 1.75rem; font-size: 1.13rem; max-width: 34rem; color: var(--cl-on-teal-soft); } #cruzandolab .cruzandolab-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } #cruzandolab .cruzandolab-hero__media { display: flex; justify-content: center; } #cruzandolab .cruzandolab-hero__img { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(var(--cl-shadow)); } /* ------------------------------------------------------------------------- 2. INTRO — De la evaluación a la acción (panel editorial BLANCO) ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-intro { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--cl-surface); border-radius: calc(var(--cl-radius) + 4px); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--cl-shadow); } /* Dentro del panel claro, el título va en texto oscuro. */ #cruzandolab .cruzandolab-intro .cruzandolab-section__title { color: var(--cl-ink); } #cruzandolab .cruzandolab-intro__quote { font-family: var(--cl-font-heading); font-size: clamp(1.25rem, 1.5vw + 1rem, 1.7rem); line-height: 1.3; color: var(--cl-teal-deep); margin: 0; border-left: 4px solid var(--cl-accent); padding-left: 1.1rem; } #cruzandolab .cruzandolab-intro__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } #cruzandolab .cruzandolab-intro__point { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.05rem; color: var(--cl-ink); } #cruzandolab .cruzandolab-intro__dot { flex: none; width: 12px; height: 12px; margin-top: 0.45rem; border-radius: 50%; background: linear-gradient(135deg, var(--cl-teal), var(--cl-accent)); } /* ------------------------------------------------------------------------- 3. CAPACIDADES — tarjetas blancas sobre teal ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-capabilities { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-grid { display: grid; gap: var(--cl-gap); } #cruzandolab .cruzandolab-grid--cards { grid-template-columns: repeat(3, 1fr); } #cruzandolab .cruzandolab-card { background: var(--cl-surface); border-radius: var(--cl-radius); padding: 1.7rem 1.55rem; box-shadow: var(--cl-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } #cruzandolab .cruzandolab-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); } #cruzandolab .cruzandolab-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--cl-radius-sm); background: var(--cl-surface-tile); margin-bottom: 1rem; } #cruzandolab .cruzandolab-card__icon img { width: 36px; height: 36px; } #cruzandolab .cruzandolab-card__title { font-family: var(--cl-font-heading); color: var(--cl-ink); font-weight: 600; font-size: 1.2rem; margin: 0 0 0.5rem; } #cruzandolab .cruzandolab-card__text { margin: 0; font-size: 0.98rem; color: var(--cl-ink-soft); } /* ------------------------------------------------------------------------- 4. FLUJO — pasos en tarjetas blancas ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-flow { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-gap); position: relative; } /* Línea de recorrido sutil (blanca) que conecta los pasos en escritorio. */ #cruzandolab .cruzandolab-steps::before { content: ""; position: absolute; top: 30px; left: 12%; right: 12%; height: 2px; background: rgba(255, 255, 255, 0.55); z-index: 0; } #cruzandolab .cruzandolab-step { position: relative; z-index: 1; text-align: center; background: var(--cl-surface); border-radius: var(--cl-radius); padding: 1.75rem 1.25rem 1.5rem; box-shadow: var(--cl-shadow-sm); } #cruzandolab .cruzandolab-step__num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cl-teal-deep); color: var(--cl-on-teal); font-family: var(--cl-font-heading); font-weight: 700; font-size: 1.4rem; margin-bottom: 1rem; box-shadow: var(--cl-shadow-sm); } #cruzandolab .cruzandolab-step__title { font-family: var(--cl-font-heading); color: var(--cl-ink); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.4rem; } #cruzandolab .cruzandolab-step__text { margin: 0; font-size: 0.95rem; color: var(--cl-ink-soft); } /* ------------------------------------------------------------------------- 5. PERFILES — paneles blancos ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-profiles { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-grid--profiles { grid-template-columns: repeat(3, 1fr); } #cruzandolab .cruzandolab-panel { background: var(--cl-surface); border-top: 4px solid var(--cl-accent); border-radius: var(--cl-radius); padding: 1.85rem 1.65rem; box-shadow: var(--cl-shadow-sm); } #cruzandolab .cruzandolab-panel__title { font-family: var(--cl-font-heading); color: var(--cl-ink); font-weight: 600; font-size: 1.25rem; margin: 0 0 1rem; } #cruzandolab .cruzandolab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } #cruzandolab .cruzandolab-list li { position: relative; padding-left: 1.4rem; font-size: 0.98rem; color: var(--cl-ink-soft); } #cruzandolab .cruzandolab-list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 8px; height: 8px; border-radius: 2px; background: var(--cl-teal); } /* ------------------------------------------------------------------------- 6. IA RESPONSABLE — bloque sobrio (teal más profundo), distinto ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-trust { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-trust__inner { max-width: 60rem; background: var(--cl-teal-darker); color: var(--cl-on-teal); border-radius: calc(var(--cl-radius) + 6px); padding: clamp(2rem, 5vw, 3.5rem); box-shadow: var(--cl-shadow); border: 1px solid rgba(255, 255, 255, 0.08); } #cruzandolab .cruzandolab-trust__title { color: var(--cl-on-teal); } #cruzandolab .cruzandolab-trust__lead { font-size: 1.1rem; color: var(--cl-on-teal-soft); margin: 0 0 1.5rem; max-width: 44rem; } #cruzandolab .cruzandolab-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.75rem; } #cruzandolab .cruzandolab-trust__list li { position: relative; padding-left: 1.9rem; color: var(--cl-on-teal); } #cruzandolab .cruzandolab-trust__list li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 18px; height: 18px; border-radius: 50%; background: var(--cl-accent-warm); /* Check dibujado con mask para no depender de fuentes/iconos. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 72% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 72% no-repeat; } /* ------------------------------------------------------------------------- 7. CTA FINAL + CONTACTO (teal profundo -> texto blanco accesible) ------------------------------------------------------------------------- */ #cruzandolab .cruzandolab-cta { padding-block: var(--cl-section-y); } #cruzandolab .cruzandolab-cta__inner { max-width: 52rem; text-align: center; margin-inline: auto; color: var(--cl-on-teal); background: radial-gradient(130% 130% at 10% 0%, var(--cl-teal) 0%, var(--cl-teal-deep) 55%); border-radius: calc(var(--cl-radius) + 6px); padding: clamp(2.25rem, 5vw, 3.75rem); box-shadow: var(--cl-shadow); } #cruzandolab .cruzandolab-cta__title { font-family: var(--cl-font-heading); color: var(--cl-on-teal); font-weight: 700; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.3rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 1.75rem; } #cruzandolab .cruzandolab-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-bottom: 1.5rem; } #cruzandolab .cruzandolab-cta__contact { margin: 0; color: var(--cl-on-teal-soft); } #cruzandolab .cruzandolab-cta__contact a { color: var(--cl-on-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------------- Animaciones suaves (reveal al hacer scroll), solo CSS + clase de JS. ------------------------------------------------------------------------- */ #cruzandolab .cl-reveal { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--cl-delay, 0ms); } /* La ilustración del hero entra desde la derecha. */ #cruzandolab .cruzandolab-hero__media.cl-reveal { transform: translateX(30px) scale(0.98); } #cruzandolab .cl-reveal.cl-is-visible { opacity: 1; transform: none; } /* Progressive enhancement: sin JS no ocultamos el contenido. */ #cruzandolab.no-js .cl-reveal { opacity: 1; transform: none; } /* ========================================================================= EFECTOS Y ANIMACIONES (estética tecnología / IA). Todo encapsulado bajo #cruzandolab y desactivable con prefers-reduced-motion (ver bloque al final del archivo). ========================================================================= */ /* Registro de la propiedad del ángulo para poder animar el borde cónico. */ @property --cl-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* ---- Hero: capas decorativas ---- */ #cruzandolab .cruzandolab-hero { position: relative; overflow: hidden; isolation: isolate; } #cruzandolab .cruzandolab-hero__grid { position: relative; z-index: 1; } /* Red neuronal (canvas dibujado por JS). */ #cruzandolab .cruzandolab-hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.55; } /* Auroras de color desenfocadas que derivan lentamente. */ #cruzandolab .cruzandolab-hero__shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #cruzandolab .cruzandolab-hero__shapes::before, #cruzandolab .cruzandolab-hero__shapes::after { content: ""; position: absolute; width: 42vw; max-width: 460px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); will-change: transform; } #cruzandolab .cruzandolab-hero__shapes::before { top: -10%; right: -6%; background: radial-gradient(circle, #06c2dd, transparent 70%); opacity: 0.42; animation: cl-drift1 16s ease-in-out infinite; } #cruzandolab .cruzandolab-hero__shapes::after { bottom: -16%; left: -8%; background: radial-gradient(circle, #FF508C, transparent 70%); opacity: 0.28; animation: cl-drift2 20s ease-in-out infinite; } @keyframes cl-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 24px) scale(1.12); } } @keyframes cl-drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -20px) scale(1.1); } } /* ---- Marca «CruzandoLab» con degradado animado ---- */ #cruzandolab .cruzandolab-brand { color: #ffffff; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { #cruzandolab .cruzandolab-brand { background: linear-gradient(100deg, #ffffff 0%, #7fe6f3 28%, #ff8fb8 55%, #ffffff 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: cl-shimmer 7s linear infinite; } } @keyframes cl-shimmer { to { background-position: 220% 0; } } /* ---- Flotación de la ilustración del hero ---- */ #cruzandolab .cl-float { animation: cl-float 6s ease-in-out infinite; will-change: transform; } @keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---- Indicador de scroll ---- */ #cruzandolab .cruzandolab-scrollcue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 20px; z-index: 2; display: block; } #cruzandolab .cruzandolab-scrollcue__dot { position: absolute; left: 50%; top: 8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #ffffff; animation: cl-scrollcue 1.8s ease-in-out infinite; } @keyframes cl-scrollcue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } } /* ---- Botones: brillo deslizante + glow ---- */ #cruzandolab .cruzandolab-button { position: relative; overflow: hidden; } #cruzandolab .cruzandolab-button::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); pointer-events: none; } #cruzandolab .cruzandolab-button:hover::after, #cruzandolab .cruzandolab-button:focus-visible::after { animation: cl-shine 0.8s ease; } @keyframes cl-shine { to { left: 150%; } } #cruzandolab .cruzandolab-button--ghost:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 30px rgba(4, 164, 188, 0.35); } /* ---- Subrayado animado en títulos de sección (sobre teal) ---- */ #cruzandolab .cruzandolab-section__head .cruzandolab-section__title { position: relative; display: inline-block; } #cruzandolab .cruzandolab-section__head .cruzandolab-section__title::after { content: ""; display: block; height: 4px; width: 64px; margin: 0.65rem auto 0; border-radius: 2px; background: linear-gradient(90deg, #04A4BC, #FF508C, #F4D801); background-size: 200% 100%; animation: cl-flow 4s linear infinite; } @keyframes cl-flow { to { background-position: 200% 0; } } /* ---- Tarjetas: tilt 3D + foco de luz que sigue al cursor ---- */ #cruzandolab .cruzandolab-card { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; } #cruzandolab .cruzandolab-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(4, 164, 188, 0.20), transparent 60%); } #cruzandolab .cruzandolab-card:hover::before { opacity: 1; } /* Transición rápida mientras el cursor inclina la tarjeta. */ #cruzandolab .cruzandolab-card.cl-tilt { transition: transform 0.15s ease, box-shadow 0.3s ease; } #cruzandolab .cruzandolab-card__icon { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s ease; } #cruzandolab .cruzandolab-card:hover .cruzandolab-card__icon { transform: translateY(-3px) rotate(-4deg) scale(1.08); background: linear-gradient(135deg, #e6f6f9, #cdeef3); } /* ---- Flujo: línea con "corriente de datos" + anillos de radar ---- */ #cruzandolab .cruzandolab-steps::before { background: linear-gradient(90deg, transparent, #ffffff, #F4D801, #FF508C, #ffffff, transparent); background-size: 220% 100%; opacity: 0.85; animation: cl-flow 4.5s linear infinite; } #cruzandolab .cruzandolab-step__num { position: relative; } #cruzandolab .cruzandolab-step__num::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: cl-radar 2.6s ease-out infinite; } #cruzandolab .cruzandolab-step:nth-child(2) .cruzandolab-step__num::after { animation-delay: 0.5s; } #cruzandolab .cruzandolab-step:nth-child(3) .cruzandolab-step__num::after { animation-delay: 1s; } #cruzandolab .cruzandolab-step:nth-child(4) .cruzandolab-step__num::after { animation-delay: 1.5s; } @keyframes cl-radar { 0% { transform: scale(0.8); opacity: 0.85; } 100% { transform: scale(1.7); opacity: 0; } } /* ---- IA responsable: borde con degradado giratorio + rejilla técnica ---- */ #cruzandolab .cruzandolab-trust__inner { position: relative; overflow: hidden; } #cruzandolab .cruzandolab-trust__inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 0; background: conic-gradient(from var(--cl-angle), #04A4BC, #FF508C, #F4D801, #04A4BC); /* Recorta el relleno dejando solo un anillo (borde) animado. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cl-spin 7s linear infinite; } @keyframes cl-spin { to { --cl-angle: 360deg; } } #cruzandolab .cruzandolab-trust__inner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask: radial-gradient(120% 120% at 80% 0%, #000, transparent 70%); mask: radial-gradient(120% 120% at 80% 0%, #000, transparent 70%); } /* El contenido del bloque va por encima de las capas decorativas. */ #cruzandolab .cruzandolab-trust__inner > * { position: relative; z-index: 1; } #cruzandolab .cruzandolab-trust__list li::before { box-shadow: 0 0 10px rgba(244, 216, 1, 0.6); } /* ---- Paneles de perfil: realce al pasar el cursor ---- */ #cruzandolab .cruzandolab-panel { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease; } #cruzandolab .cruzandolab-panel:hover { transform: translateY(-5px); box-shadow: var(--cl-shadow); border-top-color: var(--cl-accent-warm); } /* ------------------------------------------------------------------------- Responsive: tablet ------------------------------------------------------------------------- */ @media (max-width: 900px) { #cruzandolab .cruzandolab-hero__grid, #cruzandolab .cruzandolab-intro__grid { grid-template-columns: 1fr; } #cruzandolab .cruzandolab-hero__media { order: -1; } #cruzandolab .cruzandolab-grid--cards { grid-template-columns: repeat(2, 1fr); } #cruzandolab .cruzandolab-grid--profiles { grid-template-columns: 1fr; } #cruzandolab .cruzandolab-steps { grid-template-columns: repeat(2, 1fr); } #cruzandolab .cruzandolab-steps::before { display: none; } #cruzandolab .cruzandolab-trust__list { grid-template-columns: 1fr; } /* El indicador de scroll se oculta cuando el hero se apila. */ #cruzandolab .cruzandolab-scrollcue { display: none; } } /* ------------------------------------------------------------------------- Responsive: móvil ------------------------------------------------------------------------- */ @media (max-width: 560px) { #cruzandolab .cruzandolab-grid--cards { grid-template-columns: 1fr; } #cruzandolab .cruzandolab-steps { grid-template-columns: 1fr; } #cruzandolab .cruzandolab-hero__actions, #cruzandolab .cruzandolab-cta__actions { flex-direction: column; } #cruzandolab .cruzandolab-button { width: 100%; } } /* ------------------------------------------------------------------------- Respeto a prefers-reduced-motion: desactiva animaciones y transiciones. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #cruzandolab .cl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Desactiva TODAS las animaciones decorativas. */ #cruzandolab .cruzandolab-brand, #cruzandolab .cl-float, #cruzandolab .cruzandolab-hero__shapes::before, #cruzandolab .cruzandolab-hero__shapes::after, #cruzandolab .cruzandolab-scrollcue__dot, #cruzandolab .cruzandolab-button::after, #cruzandolab .cruzandolab-section__head .cruzandolab-section__title::after, #cruzandolab .cruzandolab-steps::before, #cruzandolab .cruzandolab-step__num::after, #cruzandolab .cruzandolab-trust__inner::before { animation: none !important; } /* La marca con degradado vuelve a texto blanco sólido. */ #cruzandolab .cruzandolab-brand { background: none !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; } /* Sin movimiento en interacciones (incluye el tilt aplicado por JS). */ #cruzandolab .cruzandolab-button, #cruzandolab .cruzandolab-card, #cruzandolab .cruzandolab-panel { transition: none !important; transform: none !important; } #cruzandolab .cruzandolab-button:hover, #cruzandolab .cruzandolab-card:hover, #cruzandolab .cruzandolab-panel:hover { transform: none !important; } /* Oculta el indicador de scroll (su sentido es invitar al movimiento). */ #cruzandolab .cruzandolab-scrollcue { display: none; } }