/* ========================================================================= propuesta-hibrida-v3.css — Propuesta Híbrida v3 (ENC-NUE-4, Naiara) ------------------------------------------------------------------------- Carga DESPUÉS de: disrupcion + impacto + hibrida. Parte de la HÍBRIDA ORIGINAL (no de la v2) y aplica EXCLUSIVAMENTE los 6 puntos del encargo ENC-NUE-4, sin las mejoras de otros encargos (net/glow, iconos por viñeta, separador de módulos, modo oscuro, cierre omnidria). El pie global ya cumple los puntos 1 y 6 del encargo, así que aquí NO se oculta. Alcance limitado a .v-hibrida3 para no afectar a otras propuestas. Índice: A · Menú lateral (raíl) en línea recta vertical (punto 3) B · Datos de contacto en el apartado del formulario (punto 2) C · Bloques "Soluciones Enterprise" / "Ayuda y soporte" como tarjetas (punto 4) D · Enlaces con flecha de las 4 columnas inferiores (punto 5) ========================================================================= */ /* ----- A · RAÍL LATERAL PROFESIONAL (puntos en línea recta vertical) ----- */ /* El raíl base coloca etiqueta + punto en flex; como las etiquetas tienen anchos distintos, los puntos no caían en una misma vertical. Aquí el raíl es una COLUMNA ESTRECHA de solo puntos y la etiqueta se posiciona ABSOLUTA a su izquierda (fuera del flujo). Así todos los puntos comparten la misma X y la barra vertical pasa por su centro, imitando una scrollbar. */ .v-hibrida3 .i-rail { width: 12px; /* columna fija = ancho EXACTO del punto */ flex-direction: column; align-items: center; /* todos los puntos centrados en la columna */ gap: 26px; padding: 6px 0; right: 30px; } .v-hibrida3 .i-rail-linea { right: auto; left: 50%; transform: translateX(-50%); top: 4px; bottom: 4px; width: 2px; background: rgba(13,27,46,.14); } .v-hibrida3 .i-rail-parada { display: flex; width: 12px; min-width: 12px; gap: 0; justify-content: center; align-items: center; position: relative; } .v-hibrida3 .i-rail-punto { flex: 0 0 12px; width: 12px; height: 12px; margin: 0; background: #fff; border: 2px solid rgba(13,27,46,.35); box-shadow: 0 1px 3px rgba(7,13,26,.18); } .v-hibrida3 .i-rail-parada.is-activa .i-rail-punto { background: var(--i-cobalto, #1750E0); border-color: var(--i-cobalto, #1750E0); transform: none; } .v-hibrida3 .i-rail-progreso { background: var(--i-cobalto, #1750E0); } .v-hibrida3 .i-rail-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); text-align: right; } .v-hibrida3 .i-rail-parada:hover .i-rail-label, .v-hibrida3 .i-rail-parada.is-activa .i-rail-label { transform: translateY(-50%) translateX(0); } /* ----- B · DATOS DE CONTACTO EN EL APARTADO DEL FORMULARIO --------------- */ /* Bloque de contacto en el lateral izquierdo, bajo el texto existente, con iconos vectoriales pequeños en pastilla. Teléfono (tel:), WhatsApp (API oficial) y ubicación (búsqueda de Google Maps). */ .v-hibrida3 .h2-contacto { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; } .v-hibrida3 .h2-contacto__it { display: flex; align-items: flex-start; gap: 13px; } .v-hibrida3 .h2-contacto__ic { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--i-cobalto, #1750E0); background: rgba(23,80,224,.10); border: 1px solid rgba(23,80,224,.16); } .v-hibrida3 .h2-contacto__ic svg { width: 19px; height: 19px; } .v-hibrida3 .h2-contacto__ic--wa { color: #25d366; background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.22); } .v-hibrida3 .h2-contacto__lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5A6B85; margin-bottom: 1px; } .v-hibrida3 .h2-contacto__it a { color: #0D1B2E; text-decoration: none; font-weight: 500; line-height: 1.35; } .v-hibrida3 .h2-contacto__it a:hover { color: var(--i-cobalto, #1750E0); text-decoration: underline; } /* ----- C · BLOQUES ENTERPRISE / SOPORTE REDISEÑADOS (tarjetas) ---------- */ /* Fondo limpio, bordes suavemente redondeados, tonos de la web y un ligero efecto de elevación al pasar el ratón. Botón "Más información" con flecha que se desplaza en hover. */ .v-hibrida3 .h2-cards { padding-block: clamp(28px, 4vw, 56px); background-color: #F6F8FB; background-image: var(--trama); background-size: var(--trama-paso) var(--trama-paso); } .v-hibrida3 .h2-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } @media (max-width: 720px) { .v-hibrida3 .h2-cards__grid { grid-template-columns: 1fr; } } .v-hibrida3 .h2-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid rgba(13,27,46,.10); border-radius: 18px; text-decoration: none; box-shadow: 0 1px 2px rgba(7,13,26,.04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .v-hibrida3 .h2-card:hover { transform: translateY(-4px); border-color: rgba(23,80,224,.30); box-shadow: 0 22px 48px -26px rgba(20,32,56,.45); } .v-hibrida3 .h2-card__ic { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--i-cobalto, #1750E0), var(--d-cyan, #009ad9)); box-shadow: 0 10px 24px -12px rgba(23,80,224,.6); } .v-hibrida3 .h2-card__ic svg { width: 26px; height: 26px; } .v-hibrida3 .h2-card__body h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: #0D1B2E; } .v-hibrida3 .h2-card__body p { margin: 0; color: #5A6B85; line-height: 1.5; } .v-hibrida3 .h2-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--i-cobalto, #1750E0); } .v-hibrida3 .h2-card__link svg { width: 18px; height: 18px; transition: transform .2s ease; } .v-hibrida3 .h2-card:hover .h2-card__link svg { transform: translateX(4px); } /* ----- D · ENLACES CON FLECHA DE LAS 4 COLUMNAS INFERIORES --------------- */ /* Azul corporativo principal, peso medio (600) y, al pasar el ratón, la flecha se desplaza 5px a la derecha. */ .v-hibrida3 .i-enlace-flecha { color: var(--c-primary, #142038); font-weight: 600; } .v-hibrida3 .i-enlace-flecha:hover { color: var(--d-cyan, #009ad9); } .v-hibrida3 .i-enlace-flecha svg { transition: transform .2s ease; } .v-hibrida3 .i-enlace-flecha:hover svg { transform: translateX(5px); } /* ========================================================================= ENC-NUE-5 · Mejoras 7-10 (Naiara, 2026-07-23) ========================================================================= */ /* ----- E · MEJORA 7 · Mockups de la sección de Módulos: "Floating Card" --- Barra superior limpia y minimalista (sin los 3 puntos de colores estilo Mac), bordes redondeados en TODO el bloque (barra + captura) y sombra paralela amplia. Se conserva el título de la ventana y el sticky del visor. Alcance: visor fijo del paseo, mockup móvil del módulo y lightbox — NO el hero (esa es la captura principal, distinta de la sección de módulos). */ .v-hibrida3 .i-visor, .v-hibrida3 .i-modulo-shot-movil, .v-hibrida3 .i-frame--lightbox { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* Barra superior sólida y limpia: fuera los 3 puntitos de colores. */ .v-hibrida3 .i-visor .i-frame-bar i, .v-hibrida3 .i-modulo-shot-movil .i-frame-bar i, .v-hibrida3 .i-frame--lightbox .i-frame-bar i { display: none; } /* Sin los puntos, el título ya no necesita el margen de separación. */ .v-hibrida3 .i-visor .i-frame-bar b, .v-hibrida3 .i-modulo-shot-movil .i-frame-bar b, .v-hibrida3 .i-frame--lightbox .i-frame-bar b { margin-left: 0; } /* Barra sólida (sin degradado) para un acabado minimalista. */ .v-hibrida3 .i-visor .i-frame-bar, .v-hibrida3 .i-modulo-shot-movil .i-frame-bar, .v-hibrida3 .i-frame--lightbox .i-frame-bar { background: #16283F; } /* El sticky del visor ya lo aporta .i-paseo-visor (position:sticky; top:0); aquí solo lo reforzamos para dejar aire bajo el header fijo. */ .v-hibrida3 .i-paseo-visor { top: 24px; height: calc(100vh - 24px); } /* ----- F · MEJORA 8 · Métricas del hero como 5 tarjetas independientes ----- Se "rompe" el bloque único (barra gris continua con líneas verticales) en 5 tarjetas separadas: rejilla con gap generoso para que el fondo se vea entre ellas, cada tarjeta con fondo azul/gris oscuro sólido, borde fino sutil, radius 12px, padding amplio y alineación a la izquierda. */ .v-hibrida3 .d-metrics { gap: 24px; background: none; /* sin fondo de "línea" que unía las tarjetas */ border: 0; border-radius: 0; overflow: visible; } .v-hibrida3 .d-metric { background: #16283F; /* azul/gris oscuro sólido */ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 26px clamp(20px, 1.8vw, 30px); text-align: left; align-items: flex-start; } .v-hibrida3 .d-metric__n { font-weight: 700; color: #fff; } .v-hibrida3 .d-metric__l { color: var(--d-on-dark-soft, #b7c0cf); font-weight: 400; } /* ----- G · MEJORA 10 · Icono "?" en cada pregunta del FAQ ----------------- Cuadrado con esquinas suavemente redondeadas a la izquierda del título. Inactivo: fondo claro gris/azulado + "?" azul corporativo. Activo (abierto): fondo azul corporativo sólido + "?" blanco. Flexbox en la cabecera para que icono, texto y flecha queden centrados verticalmente (ya lo era; aquí se ajusta el reparto con el nuevo icono). */ .v-hibrida3 .i-faq-pregunta { gap: 14px; } .v-hibrida3 .v3-faq-txt { flex: 1 1 auto; } .v-hibrida3 .v3-faq-q { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; font-family: var(--i-display, inherit); font-size: 18px; font-weight: 700; line-height: 1; background: rgba(23, 80, 224, 0.10); color: var(--i-cobalto, #1750E0); transition: background-color .25s ease, color .25s ease; } .v-hibrida3 .i-faq-item.is-open .v3-faq-q { background: var(--i-cobalto, #1750E0); color: #fff; } /* ========================================================================= ENC-NUE-6 · Mejoras 11-12 (Naiara, 2026-07-23) ========================================================================= */ /* ----- H · MEJORA 11 · Formulario de contacto como tarjeta a 2 columnas --- El CONTENEDOR PRINCIPAL (las dos columnas: contacto + formulario) pasa a ser una sola tarjeta amplia con fondo limpio, radius 12px y la misma sombra elegante del resto de la web. Inputs minimalistas, focus azul con glow y botón de envío destacado con hover de elevación. */ .v-hibrida3 .i-formulario { background-color: #F6F8FB; background-image: var(--trama); background-size: var(--trama-paso) var(--trama-paso); } .v-hibrida3 .i-form-grid { background: #fff; border: 1px solid rgba(13,27,46,.08); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); padding: clamp(28px, 4vw, 56px); align-items: stretch; } /* La columna del formulario ya no es una card propia (lo es el contenedor). */ .v-hibrida3 .i-form-contacto { background: none; border: 0; box-shadow: none; padding: 0; } /* Campos: borde gris muy sutil, esquinas 8px y padding interior generoso. */ .v-hibrida3 .i-campo input, .v-hibrida3 .i-campo textarea { border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 16px; background: #fff; } /* Focus: borde azul corporativo + resplandor exterior suave. */ .v-hibrida3 .i-campo input:focus, .v-hibrida3 .i-campo textarea:focus { border-color: var(--i-cobalto, #1750E0); box-shadow: 0 0 0 4px rgba(23,80,224,.14); } /* Espaciado holgado entre campos para que el formulario respire. */ .v-hibrida3 .i-form-contacto { gap: 20px; } /* Botón de envío (CTA): azul corporativo sólido, blanco 600, hover elevación. */ .v-hibrida3 .i-form-contacto .btn.i-btn { background: var(--i-cobalto, #1750E0); border-color: var(--i-cobalto, #1750E0); color: #fff; font-weight: 600; border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(23,80,224,.55); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .v-hibrida3 .i-form-contacto .btn.i-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(23,80,224,.6); } /* ----- I · PIE DE PÁGINA ------------------------------------------------- ENC-NUE-28: el pie de la v3 es ya el pie GLOBAL del sitio. Su marcado vive en `includes/footer.php` y sus estilos en `layout.css`. Aquí no queda nada (y por supuesto ya NO se oculta el footer global). */ /* ========================================================================= ENC-NUE-8 · Mejoras del despacho (Naiara, 2026-07-24) ========================================================================= */ /* ----- J · Copy del formulario: párrafo descriptivo en gris oscuro --------- El titular ya va en negrita por el

del bloque; el párrafo lead se pone en gris oscuro para mantener la jerarquía de lectura. */ .v-hibrida3 .i-form-intro h2 { font-weight: 700; } .v-hibrida3 .i-form-lead { color: #3A4658; /* gris oscuro */ line-height: 1.6; } /* ----- K · Franja CTA antes del FAQ: banda compacta + microcopy ------------ Se reduce el relleno vertical del contenedor oscuro para que sea una banda de transición compacta y se añade un microcopy sutil bajo el botón. */ .v-hibrida3 .i-cta-probar { padding-block: clamp(34px, 4.5vw, 56px); } .v-hibrida3 .i-cta-probar h2 { margin-bottom: 22px; } .v-hibrida3 .v3-cta-microcopy { margin: 14px 0 0; font-size: .85rem; color: rgba(255, 255, 255, 0.6); /* blanco semitransparente, sutil */ } /* ========================================================================= ENC-NUE-9 · Mejoras 5-8 (Naiara, 2026-07-24) ========================================================================= */ /* ----- L · MEJORA 5 · Título de la lista de integraciones (Conexiones) ----- El nuevo título "Algunas de nuestras integraciones especializadas:" separa el texto general de la lista de puntos; se le da un poco de aire arriba. */ .v-hibrida3 .i-conexiones-lista-tit { margin-top: 22px; } .v-hibrida3 .i-conexiones-lista-tit strong { font-weight: 700; color: #0D1B2E; } /* ----- M · MEJORA 6 (revisada, ENC-NUE-14) · Fondo ANIMADO sutil en Módulos -- El fondo del punto 6 (ENC-NUE-9) era estático y resultaba imperceptible. Naiara pide una animación DECORATIVA, que no destaque pero amenice la vista. Se separa en dos capas por detrás de todo el contenido (z-index negativo, sin capturar el ratón): · ::before — patrón de puntos (dot matrix) del azul corporativo con una DERIVA diagonal muy lenta (42 s). El desplazamiento es múltiplo exacto del mosaico (22 px) para que el bucle sea continuo, sin saltos. · ::after — dos destellos radiales de marca que "respiran" (leve vaivén de opacidad, posición y escala, 16 s). Muy tenue: el texto y las capturas siguen 100 % legibles. Se respeta `prefers-reduced-motion`: sin movimiento, queda el fondo fijo. */ .v-hibrida3 .i-modulos { position: relative; isolation: isolate; } .v-hibrida3 .i-modulos::before { content: ""; position: absolute; inset: 0; z-index: -1; /* por detrás de todo el contenido */ pointer-events: none; /* ENC-NUE-34 · Esta es justo la sección que Naiara señaló ("Ciclo de ventas"): fuera el patrón repetido —primero puntos, luego la rejilla de ENC-NUE-24— y en su lugar la textura global de halos difusos (var(--trama) de base.css). Al no ser ya un mosaico sino un mesh escalado a la caja (--trama-paso: 100%), la DERIVA diagonal se retira: desplazar la posición dejaría el borde sin pintar. El movimiento sutil de la sección lo sigue aportando el ::after, que "respira". */ background-image: var(--trama); background-size: var(--trama-paso) var(--trama-paso); background-position: 0 0; } .v-hibrida3 .i-modulos::after { content: ""; position: absolute; inset: 0; z-index: -1; /* sobre los puntos, bajo el contenido */ pointer-events: none; background-image: radial-gradient(42% 42% at 12% 20%, rgba(23, 80, 224, 0.07), transparent 60%), radial-gradient(46% 46% at 90% 82%, rgba(0, 154, 217, 0.07), transparent 62%); will-change: opacity, transform; animation: i3-mod-glow 16s ease-in-out infinite alternate; } /* (ENC-NUE-34) el keyframe i3-mod-drift se retira con la deriva del mosaico. */ @keyframes i3-mod-glow { 0% { opacity: .5; transform: translate3d(-1.5%, -1%, 0) scale(1); } 100% { opacity: 1; transform: translate3d(1.5%, 1%, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .v-hibrida3 .i-modulos::before, .v-hibrida3 .i-modulos::after { animation: none; } } /* ----- N · MEJORA 7 · Iconos sutiles en las listas de módulos -------------- El "tick" verde clásico se recolorea a un tono NEUTRO discreto (azul corporativo muy tenue con trazo fino) para que acompañe la lectura sin destacar más que el texto ni que las capturas de la derecha. Alcance: SOLO las listas de módulos (.i-lista-check), NO la lista de socios de Conexiones ni otros usos de .i-ic. */ .v-hibrida3 .i-lista-check .i-ic { color: #8A97AC; } /* gris azulado suave */ .v-hibrida3 .i-lista-check .i-ic svg { stroke-width: 2; } /* trazo fino, no grueso */ /* ----- O · MEJORA 8 · Optimización del Hero -------------------------------- */ /* 8a · Menú superior: el primer enlace "Cuantic ® ERP CRM MRP" se muestra como "Software" SOLO en esta propuesta (sin tocar el header global ni el resto del sitio). Se oculta el texto real (font-size:0, que también anula el ) y se pinta "Software" con un ::before a tamaño normal. */ .v-hibrida3 .main-nav > ul > li:first-child > a { font-size: 0; line-height: 0; } .v-hibrida3 .main-nav > ul > li:first-child > a::before { content: "Software"; font-size: 1rem; line-height: normal; } /* 8b · Botón secundario "¿Te llamamos?": hover que rellena el fondo con azul semitransparente para invitar al clic (el ghost base solo aclaraba levemente). */ .v-hibrida3 .d-hero__cta .d-btn--ghost { transition: background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease; } .v-hibrida3 .d-hero__cta .d-btn--ghost:hover { background: rgba(23, 80, 224, 0.85); border-color: rgba(23, 80, 224, 0.95); color: #fff; } /* 8c · Mockup del Hero como "Floating Card": fuera los 3 puntos de colores estilo Mac de la barra, bordes redondeados y sombra paralela elegante para que destaque sobre el fondo oscuro de la cuadrícula. (La sección de Módulos ya recibió este tratamiento en el bloque E.) */ .v-hibrida3 .d-shot--hero .d-shot__bar i { display: none; } .v-hibrida3 .d-shot--hero .d-shot__bar { background: #16283F; /* barra sólida y limpia, sin degradado */ } .v-hibrida3 .d-shot--hero { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* ----- P · ENC-NUE-10 · Efecto de brillo en los bloques de métricas del Hero Las 5 tarjetas (+8.000, +25, +15, VeriFactu, Multisectorial) estaban planas (fondo #16283F sólido + borde fino). Se integran con la estética moderna y brillante del hero (mismo lenguaje cian de marca que los glows y el mockup): - fondo con leve degradado + luz superior interior (inset highlight) para dar profundidad de "capa de cristal", sin cambiar el layout ni los textos; - halo cian difuso detrás de cada tarjeta (::before con blur), tenue en reposo y reforzado al pasar el ratón, en la paleta de los d-hero__glow; - elevación suave + sombra con tinte cian en hover; - el número (.d-metric__n) recibe un sutil resplandor cian. Todo con los tokens de disrupción (#009ad9 / #45c2f0), manteniendo la estética. Alcance: SOLO .v-hibrida3 .d-metric. */ .v-hibrida3 .d-metric { position: relative; /* ancla del halo ::before */ isolation: isolate; /* el halo queda contenido a la tarjeta */ background: linear-gradient(160deg, #1b3252 0%, #16283F 55%, #132339 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), /* luz superior (borde vidrio) */ 0 10px 26px -14px rgba(0, 0, 0, 0.55); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow: visible; } /* Halo cian difuso detrás de la tarjeta (lenguaje de los glows del hero). */ .v-hibrida3 .d-metric::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: radial-gradient(120% 140% at 50% 0%, rgba(0, 154, 217, 0.28), transparent 62%); opacity: .35; filter: blur(14px); transition: opacity .3s ease; pointer-events: none; } .v-hibrida3 .d-metric:hover { transform: translateY(-4px); border-color: rgba(69, 194, 240, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(0, 154, 217, 0.45); /* sombra/glow cian al elevar */ } .v-hibrida3 .d-metric:hover::before { opacity: .85; } /* El número "brilla": leve resplandor cian, sin perder legibilidad. */ .v-hibrida3 .d-metric__n { text-shadow: 0 0 18px rgba(0, 154, 217, 0.35); } /* ========================================================================= ENC-NUE-15 · Mejoras 25-28 (Naiara, 2026-07-27) Q · Correo en la tarjeta de contacto (punto 28) R · Hub flotante de contacto: WhatsApp + Teléfono (punto 27) S · Interruptor de modo claro / oscuro (punto 26) El punto 25 (pie: fuera el banner institucional + texto de contexto sobre el botón del ecosistema) se aplica arriba, dentro del bloque I. ========================================================================= */ /* ----- Q · PUNTO 28 · Enlaces de la tarjeta de contacto ------------------- */ /* El nuevo ítem CORREO reutiliza el patrón ya existente (.h2-contacto__it): pastilla azul clara con icono de sobre, subtítulo en mayúsculas gris/azulado y dirección en la tipografía principal oscura. Aquí solo se añade la transición de color para que el paso a azul corporativo en hover sea suave (se aplica a los cuatro canales, por coherencia). */ .v-hibrida3 .h2-contacto__it a { transition: color .22s ease; } /* ----- R/S · CONTACT HUB flotante + INTERRUPTOR CLARO/OSCURO ------------- ENC-NUE-26: estos dos componentes dejan de ser exclusivos de la propuesta y viven ahora en `layout.css` (globales), para poder reutilizarlos en la página de precios y en cualquier página futura. Aquí no queda nada. */ /* --- Transición suave de fondos y textos al alternar de modo -------------- */ @media (prefers-reduced-motion: no-preference) { .v-hibrida3, .v-hibrida3 .i-sec, .v-hibrida3 .i-modulos, .v-hibrida3 .i-formulario, .v-hibrida3 .i-form-grid, .v-hibrida3 .i-faq-item, .v-hibrida3 .h2-cards, .v-hibrida3 .h2-card, .v-hibrida3 .i-campo input, .v-hibrida3 .i-campo textarea, .v-hibrida3 .i-sec-titulo, .v-hibrida3 .i-modulo h3, .v-hibrida3 .i-ayuda-col h5, .v-hibrida3 .i-ayuda-col p, .v-hibrida3 .i-lista-check li, .v-hibrida3 .i-conexiones-texto p { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } } /* --- MODO OSCURO: reescribe las superficies CLARAS del paseo -------------- La zona Disrupción (hero, statement, franja CTA) y el header global ya son oscuros de serie y no necesitan cambios. Aquí se vuelcan a tonos marinos las secciones claras: módulos, conexiones, FAQ, formulario, tarjetas y columnas de ayuda. */ .v3-dark .v-hibrida3 { --i-blanco: #13253F; /* superficie "blanca" -> azul marino */ --i-papel: #0F1D33; /* superficie "papel" -> marino profundo */ --i-texto: rgba(255,255,255,.84); --i-texto-suave: rgba(255,255,255,.60); --i-borde: rgba(255,255,255,.12); background: #0b1426; } .v3-dark .v-hibrida3 .i-sec { background: #0b1426; } .v3-dark .v-hibrida3 .i-sec--soft { background: #0f1d33; } .v3-dark .v-hibrida3 .i-modulos { background: #0b1426; } /* Titulares y textos */ .v3-dark .v-hibrida3 .i-sec-titulo, .v3-dark .v-hibrida3 .i-modulo h3, .v3-dark .v-hibrida3 .i-form-intro h2, .v3-dark .v-hibrida3 .i-ayuda-col h5, .v3-dark .v-hibrida3 .h2-card__body h3, .v3-dark .v-hibrida3 .i-faq-pregunta { color: #fff; } .v3-dark .v-hibrida3 .i-lista-check li, .v3-dark .v-hibrida3 .i-conexiones-texto p, .v3-dark .v-hibrida3 .i-modulos-guia, .v3-dark .v-hibrida3 .i-ayuda-col p, .v3-dark .v-hibrida3 .i-socios li, .v3-dark .v-hibrida3 .i-faq-respuesta p { color: rgba(255,255,255,.84); } .v3-dark .v-hibrida3 .i-form-lead { color: rgba(255,255,255,.72); } .v3-dark .v-hibrida3 .i-conexiones-lista-tit strong { color: #fff; } .v3-dark .v-hibrida3 .i-modulo-num { color: rgba(255,255,255,.45); } /* El "eyebrow" (SOLUCIONES) en cobalto pierde contraste sobre el marino: se aclara al cian de marca para que siga leyéndose. */ .v3-dark .v-hibrida3 .i-eyebrow { color: var(--d-cyan-300, #45c2f0); } /* Fondo animado de Módulos: en oscuro la trama ya cambia de tinta sola (--trama-tinta pasa a blanco en .v3-dark, ver base.css), así que no hace falta redefinir aquí el patrón. Se deja la regla vacía a propósito retirada tras ENC-NUE-24. */ .v3-dark .v-hibrida3 .i-modulos::after { background-image: radial-gradient(42% 42% at 12% 20%, rgba(69,194,240,0.10), transparent 60%), radial-gradient(46% 46% at 90% 82%, rgba(23,80,224,0.12), transparent 62%); } /* FAQ */ .v3-dark .v-hibrida3 .i-faq-item { background: #13253F; border-color: rgba(255,255,255,.12); } .v3-dark .v-hibrida3 .v3-faq-q { background: rgba(69,194,240,.14); color: var(--d-cyan-300, #45c2f0); } .v3-dark .v-hibrida3 .i-faq-item.is-open .v3-faq-q { background: var(--d-cyan, #009ad9); color: #fff; } /* Formulario (tarjeta a 2 columnas) */ .v3-dark .v-hibrida3 .i-formulario { background: #0f1d33; } .v3-dark .v-hibrida3 .i-form-grid { background: #13253F; border-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .v3-dark .v-hibrida3 .i-campo input, .v3-dark .v-hibrida3 .i-campo textarea { background: #0b1426; color: #fff; border-color: rgba(255,255,255,.16); } .v3-dark .v-hibrida3 .i-campo input::placeholder, .v3-dark .v-hibrida3 .i-campo textarea::placeholder { color: rgba(255,255,255,.45); } .v3-dark .v-hibrida3 .i-campo-check span { color: rgba(255,255,255,.75); } /* Tarjeta de contacto (teléfono / WhatsApp / correo / ubicación) */ .v3-dark .v-hibrida3 .h2-contacto__lbl { color: rgba(255,255,255,.60); } .v3-dark .v-hibrida3 .h2-contacto__it a { color: rgba(255,255,255,.88); } .v3-dark .v-hibrida3 .h2-contacto__it a:hover { color: var(--d-cyan-300, #45c2f0); } .v3-dark .v-hibrida3 .h2-contacto__ic { background: rgba(69,194,240,.14); border-color: rgba(69,194,240,.22); color: var(--d-cyan-300, #45c2f0); } .v3-dark .v-hibrida3 .h2-contacto__ic--wa { color: #25d366; background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.24); } /* Tarjetas "Soluciones Enterprise" / "Ayuda y soporte" */ .v3-dark .v-hibrida3 .h2-cards { background: #0b1426; } .v3-dark .v-hibrida3 .h2-card { background: #13253F; border-color: rgba(255,255,255,.12); } .v3-dark .v-hibrida3 .h2-card__body p { color: rgba(255,255,255,.70); } .v3-dark .v-hibrida3 .h2-card__link { color: var(--d-cyan-300, #45c2f0); } .v3-dark .v-hibrida3 .h2-card:hover { border-color: rgba(69,194,240,.35); } /* Enlaces con flecha de las 4 columnas inferiores */ .v3-dark .v-hibrida3 .i-enlace-flecha { color: var(--d-cyan-300, #45c2f0); } .v3-dark .v-hibrida3 .i-enlace-flecha:hover { color: #fff; } /* Raíl lateral del paseo */ .v3-dark .v-hibrida3 .i-rail-linea { background: rgba(255,255,255,.18); } .v3-dark .v-hibrida3 .i-rail-punto { background: #13253F; border-color: rgba(255,255,255,.40); } .v3-dark .v-hibrida3 .i-rail-label { background: rgba(19,37,63,.92); color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.14); } /* ===================================================================== T · VÍDEO CORPORATIVO DEL HERO (ENC-NUE-16) --------------------------------------------------------------------- La captura estática del hero se sustituye por el vídeo corporativo. Mantiene el tratamiento "Floating Card" del bloque 8c (radio 14px + sombra paralela) pero SIN la barra superior de ventana: ya no es la captura de una aplicación, sino una pieza audiovisual. ===================================================================== */ .v-hibrida3 .d-shot--video-hero { background: #0b1426; } .v-hibrida3 .d-shot--video-hero .d-shot__bar { display: none; } .v-hibrida3 .d-shot--video-hero .d-shot__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; /* evita el salto de layout mientras carga */ object-fit: cover; background: #0b1426; /* mismo azul del vídeo: sin bordes negros */ } /* Fallback para navegadores sin