hijos, y la plantilla los captura con `.section__header .title div:nth-child(1) { capitalize !important }`. Por eso "Todo lo que hacemos por tu negocio" salía con cada palabra en mayúscula aunque el h2 ya estuviera corregido. Hay que igualar el !important para poder ganarle. */ .section__header .title div, .section__header .title div:nth-child(1), .section__content .title div, .section__content .title div:nth-child(1) { text-transform: none !important; } /* ---------- Logos de clientes ---------- Los archivos ya vienen procesados como siluetas blancas de altura uniforme (ver assets/images/clientes). Deliberadamente NO se les aplica un filtro CSS de blanqueo: sobre un logo con fondo blanco produce un rectángulo sólido, que es justo lo que pasaba antes con el de Man Precision. */ .sponsor__slider-item { display: flex !important; align-items: center; justify-content: center; height: 64px; padding: 0 20px; } /* La plantilla deja todos los logos al 25% y solo ilumina el que queda centrado (`.sponsor .slick-center img`). Con logos reales eso hace que parezcan rotos: se ve uno y los demás casi desaparecen. Hay que igualar su especificidad (0,2,1) para poder sobrescribirlo. */ .sponsor .sponsor__slider-item img, .sponsor .slick-center img { max-height: 40px; max-width: 170px; width: auto; height: auto; object-fit: contain; opacity: .88; transition: opacity .22s ease; } .sponsor .sponsor__slider-item:hover img { opacity: 1; } /* El encabezado de la banda venía en versalitas y con el color de acento del kit, que sobre el fondo oscuro de esta sección se lee mal. */ .sponsor .section__header .sub-title { text-transform: none; letter-spacing: .01em; color: rgba(255, 255, 255, .92); } .sponsor .section__header .sub-title i { color: var(--ax-azul-claro); } /* ---------- Fondo de la banda ---------- Iba en negro y cortaba de golpe el azul del hero. Se mide el borde inferior del hero (#0739EF, el azul de marca) y la banda lo continúa: visualmente queda como el pie del bloque de portada, no como una sección aparte. La sección también reservaba el espaciado completo de la plantilla (130px), que con una sola fila de logos dejaba un vacío enorme. */ .sponsor.section { background-color: var(--ax-azul); padding-top: 20px; padding-bottom: 76px; } /* La plantilla dibuja una línea gris arriba de la sección; sobre el azul desentona. */ .sponsor.liner::before { display: none; } .sponsor .section__header { margin-bottom: 38px; } /* Sobre el azul, la píldora del encabezado necesita su propio borde. */ .sponsor .section__header .sub-title { border-color: rgba(255, 255, 255, .3); } /* ---------- Tarjetas de servicios ---------- */ /* La plantilla capitaliza cada palabra de la lista, lo que en español produce "Tiendas En Línea" y "Power BI Básico E Intermedio". */ .service-t .service-t__slider-single ul li { text-transform: none; margin-bottom: 14px; } /* El degradado del hover lleva el naranja del kit escrito a mano (#ff7425), así que no se hereda al cambiar --primary-color. */ .service-t .service-t-single-wrapper::before { background-image: linear-gradient(to bottom, var(--ax-azul), transparent); } /* Las tarjetas tienen listas de distinta longitud y quedaban desalineadas. Slick da a cada diapositiva la altura de su contenido, así que hay que estirarlas desde el contenedor. */ .service-t .slick-track { display: flex !important; align-items: stretch; } .service-t .slick-slide { height: auto !important; } .service-t .slick-slide > div, .service-t .service-t-single-wrapper, .service-t .service-t__slider-single { height: 100%; } .service-t .service-t__slider-single { display: flex; flex-direction: column; } /* Con la tarjeta estirada, el enlace se ancla abajo y todos quedan alineados. */ .service-t .service-t__slider-single .cta { margin-top: auto; } /* Sin sangría en la lista, la segunda línea de un punto largo ("Atención automatizada en WhatsApp") se salía por debajo de la viñeta. */ .service-t .service-t__slider-single ul { margin-bottom: 32px; padding-left: 20px; } .service-t .service-t__slider-single ul li { list-style-position: outside; padding-left: 2px; } /* ---------- Casos de éxito ---------- Tarjeta propia en vez de la del portafolio de la plantilla: aquella depende de Isotope y de un texto que aparece al pasar el ratón, que en móvil no existe. Esta muestra siempre el cliente y el tipo de proyecto. */ .casos-ax { background-color: var(--ax-azul); } /* Sobre el azul, el eyebrow y el título de la plantilla van en el color de acento, que aquí es el mismo azul: quedaban invisibles. */ .casos-ax .section__header .sub-title { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .32); } .casos-ax .section__header .sub-title i, .casos-ax .section__header .title, .casos-ax .section__header .title div { color: #fff; } .caso-ax { margin-bottom: 34px; } .caso-ax__imagen { display: block; overflow: hidden; border-radius: 14px; background-color: rgba(255, 255, 255, .08); aspect-ratio: 1200 / 630; } .caso-ax__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .caso-ax:hover .caso-ax__imagen img { transform: scale(1.04); } .caso-ax__pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 20px; } .caso-ax__pie h4 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; } .caso-ax__pie h4 a { color: #fff; } .caso-ax__pie p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .72); } .caso-ax__flecha { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background-color .22s ease, color .22s ease, border-color .22s ease; } .caso-ax:hover .caso-ax__flecha { background-color: #fff; border-color: #fff; color: var(--ax-azul); } /* Sobre el azul, el botón sólido va en blanco. */ .casos-ax .btn--primary { background-color: #fff; border-color: #fff; color: var(--ax-azul); } /* ---------- Cursor personalizado ---------- La plantilla lo pinta con --primary-color y `mix-blend-mode: difference`. Sobre el azul de marca, esa mezcla lo devuelve casi negro. Se quita la mezcla y se pone en blanco, con un halo oscuro para que siga viéndose sobre las secciones claras. */ .cursor-inner { background-color: #fff; mix-blend-mode: normal; box-shadow: 0 0 0 1px rgba(0, 0, 0, .28); } .cursor-outer { border-color: rgba(255, 255, 255, .9); mix-blend-mode: normal; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .18); } .cursor-inner.cursor-hover { background-color: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .9); box-shadow: none; } /* ---------- Hover de los botones ---------- Al pasar el ratón, la plantilla rellena el botón con el color de acento y pone el texto en negro. Sobre el azul de marca eso da 2.85:1, por debajo del mínimo legible. El texto va en blanco: 7.17:1. */ .btn:hover, .btn:focus-visible, .btn--primary:hover, .btn--primary:focus-visible, .btn--secondary:hover, .btn--secondary:focus-visible, .btn--tertiary:hover, .btn--tertiary:focus-visible { color: #fff; border-color: var(--ax-azul); } .btn:hover i, .btn--tertiary:hover i { color: #fff; } /* Excepción: los botones blancos sobre fondo azul. Ahí el texto blanco sería invisible, así que conservan el azul y solo se atenúan. .btn--header-cta entra en esta misma lista: la regla genérica de arriba (.btn--secondary:hover) tiene su misma especificidad y aparece antes en el archivo, así que sin este empate a su favor el texto se volvía blanco sobre el fondo blanco del botón al pasar el ratón. */ .casos-ax .btn--primary:hover, .casos-ax .btn--primary:focus-visible, .gracias-ax .btn--primary:hover, .gracias-ax .btn--primary:focus-visible, .btn--header-cta:hover, .btn--header-cta:focus-visible { background-color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); color: var(--ax-azul); } /* El relleno deslizante de la plantilla queda oculto tras el fondo blanco de estos botones, así que se desactiva para que no genere destellos. */ .casos-ax .btn--primary::before, .gracias-ax .btn--primary::before, .btn--header-cta::before, .banner-two .banner-two__content .cta .btn--tertiary::before { display: none; } /* ---------- Bloque de contacto a dos columnas ---------- Compartido por todas las páginas. A la izquierda el mensaje y las vías directas; a la derecha el formulario. Poner el formulario a la vista, en vez de un botón que lleva a otra página, quita un paso del camino. */ /* El fondo sale de la propia plantilla, no de la imagen de portada: usarla en todas partes se volvía repetitivo. cta-bg.png es un PNG transparente con ondas suaves, así que toma el azul de marca que lleva detrás. */ .contacto-bloque { position: relative; overflow: hidden; z-index: 1; background-color: var(--ax-azul); background-image: url("../images/cta-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; padding-top: 96px; padding-bottom: 96px; } /* ---------- Cifras en la columna del mensaje ---------- Llenan el hueco que quedaba bajo las vías de contacto y, de paso, refuerzan la decisión justo donde el visitante va a escribir. */ .contacto-bloque__cifras { display: flex; flex-wrap: wrap; gap: 46px; margin-top: 42px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .2); } .contacto-bloque__cifras strong { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; color: #fff; } .contacto-bloque__cifras span { display: block; margin-bottom: 4px; font-size: 14.5px; color: rgba(255, 255, 255, .7); } .contacto-bloque--claro .contacto-bloque__cifras { border-top-color: #DEDEDE; } .contacto-bloque--claro .contacto-bloque__cifras strong { color: var(--ax-azul); } .contacto-bloque--claro .contacto-bloque__cifras span { color: #6B6B6B; } .contacto-bloque .title, .contacto-bloque .sub-title { color: #fff; text-transform: none; } .contacto-bloque .sub-title { border-color: rgba(255, 255, 255, .3); } .contacto-bloque .title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.14; text-wrap: balance; margin-bottom: 20px; } .contacto-bloque__parrafo { color: rgba(255, 255, 255, .84); max-width: 42ch; margin-bottom: 38px; line-height: 1.7; } .contacto-bloque__directo { margin: 0 0 16px; font-size: 14px; letter-spacing: .02em; color: rgba(255, 255, 255, .6); } .contacto-bloque__vias { list-style: none; margin: 0; padding: 0; } .contacto-bloque__vias li + li { margin-top: 12px; } .contacto-bloque__vias a { display: flex; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; color: #fff; transition: background-color .2s ease, border-color .2s ease; } .contacto-bloque__vias a:hover { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .42); color: #fff; } .contacto-bloque__vias strong { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-bottom: 2px; } .contacto-bloque__vias span:not(.contacto-bloque__icono) { font-size: 16px; } .contacto-bloque__icono { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background-color: rgba(255, 255, 255, .13); font-size: 17px; } .contacto-bloque__icono--wa { background-color: rgba(37, 211, 102, .2); color: #55e08c; } /* La caja del formulario es clara sobre el azul: hay que voltear las variables de la plantilla o el texto de sus span y label saldría blanco. */ .contacto-bloque__caja { --theme-color: var(--ax-negro); --white: var(--ax-negro); background-color: #fff; border-radius: 18px; padding: 38px 36px 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, .16); } .contacto-bloque__caja .contacto-ax__form label { color: #555; } .contacto-bloque__caja .contacto-ax__form input, .contacto-bloque__caja .contacto-ax__form textarea { background-color: #FAFAFA; margin-bottom: 18px; } .contacto-bloque__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; } .contacto-bloque__caja .btn--primary { background-color: var(--ax-azul); border-color: var(--ax-azul); color: #fff; } .contacto-bloque__caja .btn--primary::before { display: none; } .contacto-bloque__caja .btn--primary:hover { background-color: #1B2FC4; border-color: #1B2FC4; color: #fff; } .contacto-bloque__caja .contacto-ax__aviso, .contacto-bloque__caja .contacto-ax__legal { color: #5A5A5A; } /* Variante sobre fondo hueso, para cuando la sección anterior era azul. La textura de ondas es blanca sobre azul: encima del hueso ensucia el fondo y lo vuelve gris, así que aquí se retira. */ .contacto-bloque--claro { background-image: none; background-color: var(--ax-hueso); color: var(--ax-negro); } .contacto-bloque--claro .title { color: var(--ax-negro); } .contacto-bloque--claro .sub-title { color: var(--ax-azul); border-color: #D8D8D8; } .contacto-bloque--claro .contacto-bloque__parrafo { color: #4A4A4A; } .contacto-bloque--claro .contacto-bloque__directo { color: #6B6B6B; } .contacto-bloque--claro .contacto-bloque__vias a { background-color: #fff; border-color: #E2E2E2; color: var(--ax-negro); } .contacto-bloque--claro .contacto-bloque__vias a:hover { border-color: var(--ax-azul); background-color: #fff; } .contacto-bloque--claro .contacto-bloque__vias strong { color: #8A8A8A; } .contacto-bloque--claro .contacto-bloque__icono { background-color: rgba(36, 60, 235, .1); color: var(--ax-azul); } .contacto-bloque--claro .contacto-bloque__icono--wa { background-color: rgba(37, 211, 102, .14); color: #128C4A; } .contacto-bloque--claro .contacto-bloque__caja { border: 1px solid #E6E6E6; box-shadow: 0 16px 40px rgba(0, 0, 0, .06); } @media (max-width: 991px) { .contacto-bloque__mensaje { margin-bottom: 40px; } .contacto-bloque__caja { padding: 30px 24px 26px; } } /* ---------- Formulario de contacto ---------- */ .contacto-ax__intro { max-width: 52ch; margin: 0 auto; opacity: .8; } .contacto-ax__form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; opacity: .78; } .contacto-ax__form input, .contacto-ax__form textarea { width: 100%; padding: 15px 18px; margin-bottom: 22px; background-color: #fff; border: 1px solid #DCDCDC; border-radius: 10px; color: var(--ax-negro); font-family: inherit; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; } .contacto-ax__form textarea { resize: vertical; min-height: 130px; } .contacto-ax__form input:focus, .contacto-ax__form textarea:focus { outline: none; border-color: var(--ax-azul); box-shadow: 0 0 0 3px rgba(36, 60, 235, .16); } /* Campo señuelo contra robots: se saca de la vista sin usar display:none, porque algunos robots ignoran los campos ocultos de esa forma. */ .senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contacto-ax__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; } .contacto-ax__aviso { margin: 0; font-size: 14px; opacity: .68; } .contacto-ax__legal { margin: 26px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .58; max-width: 62ch; } .contacto-ax__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .contacto-ax__legal a:hover { color: var(--ax-azul); } .contacto-ax__error { margin-bottom: 24px; padding: 14px 18px; border-radius: 10px; border-left: 4px solid #D6342C; background-color: #FCECEB; color: #8A1F19; font-size: 15px; } /* ============================================================ Páginas internas ============================================================ */ /* ---------- Encabezado de página ---------- Reutiliza el fondo de la portada para que las páginas internas no se sientan sosas al lado de la home. */ /* Textura de la propia plantilla sobre el azul de marca. cmn-banner-bg.png es la que trae para encabezados de página: un fondo casi negro con rayaduras finas. Como es opaco, no puede ir de fondo directo — taparía el azul—, así que va en una capa con mezcla `soft-light`, que solo deja pasar el relieve. Distinta de la del bloque de contacto, para que las secciones no se sientan repetidas. */ .encabezado-ax { background-color: var(--ax-azul); padding: 190px 0 110px; position: relative; overflow: hidden; z-index: 1; } .encabezado-ax::before { content: ""; position: absolute; inset: 0; background-image: url("../images/banner/cmn-banner-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; /* La textura es casi negra: con soft-light al 85% bajaba el azul de #243CEB a #0C18DC, y contra cualquier sección contigua se veía un escalón que parecía un error. Al 28% aporta relieve sin oscurecer. */ mix-blend-mode: soft-light; opacity: .28; z-index: -1; } /* Un halo que da profundidad sin necesidad de imagen. */ .encabezado-ax::after { content: ""; position: absolute; top: -30%; right: -12%; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 45%, transparent 70%); z-index: -1; pointer-events: none; } /* Los decorativos de la plantilla son oscuros, pensados para fondo negro. Sobre el azul se ven como manchas, así que se pasan a blanco. (Las reglas de .encabezado-ax .star y .dot se retiraron: esos dos decorativos salieron del hero interno al entrar la retícula.) */ .diferencia-ax .star-two, .incluido-ax .star-two { filter: brightness(0) invert(1); } .migajas-ax { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; font-size: 14px; color: rgba(255, 255, 255, .68); } .migajas-ax li + li::before { content: "/"; margin-right: 10px; opacity: .5; } .migajas-ax a { color: rgba(255, 255, 255, .82); } .migajas-ax a:hover { color: #fff; } .encabezado-ax .title, .encabezado-ax .title span { color: #fff; text-transform: none; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 24px; } .encabezado-ax .title span { opacity: .68; } .encabezado-ax__intro { max-width: 56ch; margin-bottom: 34px; color: rgba(255, 255, 255, .88); font-size: 18px; line-height: 1.65; } .encabezado-ax .btn--primary { background-color: #fff; border-color: #fff; color: var(--ax-azul); } .encabezado-ax .btn--primary::before { display: none; } .encabezado-ax .btn--primary:hover { background-color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); color: var(--ax-azul); } @media (max-width: 991px) { .encabezado-ax { padding: 140px 0 70px; } } /* ---------- Tarjetas de entregables ---------- */ .entregable-ax { position: relative; height: 100%; padding: 34px 30px 32px; margin-bottom: 24px; background-color: #fff; border: 1px solid #E6E6E6; border-radius: 16px; overflow: hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } /* Franja de acento que crece al pasar el ratón */ .entregable-ax::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: var(--ax-azul); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .entregable-ax:hover { border-color: #D2D8FB; transform: translateY(-4px); box-shadow: 0 14px 34px rgba(36, 60, 235, .1); } .entregable-ax:hover::before { transform: scaleX(1); } /* Número grande de fondo, como marca de agua */ .entregable-ax__fantasma { position: absolute; top: 6px; right: 14px; font-size: 78px; font-weight: 800; line-height: 1; color: rgba(36, 60, 235, .07); pointer-events: none; } .entregable-ax__icono { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 14px; background-color: rgba(36, 60, 235, .09); color: var(--ax-azul); font-size: 21px; transition: background-color .25s ease, color .25s ease; } .entregable-ax:hover .entregable-ax__icono { background-color: var(--ax-azul); color: #fff; } .entregable-ax h3 { margin-bottom: 12px; font-size: 20px; line-height: 1.3; } .entregable-ax p { margin: 0; font-size: 15px; line-height: 1.65; color: #4A4A4A; } /* ---------- La diferencia ---------- */ .diferencia-ax { background-color: var(--ax-azul); color: #fff; } .diferencia-ax .title, .diferencia-ax .title span, .diferencia-ax .sub-title { color: #fff; text-transform: none; } .diferencia-ax .sub-title { border-color: rgba(255, 255, 255, .3); } .diferencia-ax .title span { opacity: .68; } .diferencia-ax p { color: rgba(255, 255, 255, .86); max-width: 52ch; } .diferencia-ax { position: relative; overflow: hidden; } .diferencia-ax .star-two { position: absolute; bottom: 8%; left: 5%; width: 46px; opacity: .35; animation: spin 18s linear infinite reverse; } .diferencia-ax__intro { margin: 0 auto 54px; max-width: 60ch; } /* ---------- Comparación lado a lado ---------- Enfrentar las dos columnas explica el argumento mejor que una lista suelta: se ve de un golpe qué se gana. */ .comparacion-ax__lado { height: 100%; padding: 36px 34px 30px; border-radius: 18px; } .comparacion-ax__lado--mal { background-color: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .12); } /* Tarjeta clara dentro de una sección azul. La plantilla pinta span, li, p y label con var(--theme-color), que aquí vale blanco: sin voltear la variable, el texto quedaba blanco sobre blanco. Ponerle color solo al

no basta, porque la regla del gana a la herencia. */ .comparacion-ax__lado--bien { --theme-color: #2B2B2B; --white: var(--ax-negro); background-color: #fff; border: 1px solid #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); } .comparacion-ax__etiqueta { display: inline-block; margin-bottom: 12px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .comparacion-ax__lado--bien .comparacion-ax__etiqueta { color: var(--ax-azul); opacity: 1; font-weight: 600; } .comparacion-ax__lado h3 { margin-bottom: 26px; font-size: 25px; } .comparacion-ax__lado--mal h3 { color: rgba(255, 255, 255, .85); } .comparacion-ax__lado--bien h3 { color: var(--ax-negro); } .comparacion-ax__lado ul { list-style: none; margin: 0; padding: 0; } .comparacion-ax__lado li { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; font-size: 16px; line-height: 1.5; } .comparacion-ax__lado li + li { border-top: 1px solid rgba(128, 128, 128, .18); } .comparacion-ax__lado--mal li { color: rgba(255, 255, 255, .62); } .comparacion-ax__lado--bien li { color: #2B2B2B; } .comparacion-ax__lado i { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; font-size: 11px; } .comparacion-ax__lado--mal i { background-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); } .comparacion-ax__lado--bien i { background-color: var(--ax-azul); color: #fff; } @media (max-width: 991px) { .comparacion-ax__lado { margin-bottom: 22px; } } /* ---------- Piezas que ya usa el cliente ---------- */ .piezas-ax { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 38px 0 26px; } .piezas-ax__pieza { display: inline-flex; align-items: center; gap: 11px; padding: 14px 22px; background-color: #fff; border: 1px solid #E2E2E2; border-radius: 99px; font-size: 15.5px; font-weight: 500; color: var(--ax-negro); } .piezas-ax__pieza i { color: var(--ax-azul); font-size: 17px; } .piezas-ax__nota { font-size: 15px !important; opacity: .68; max-width: 52ch; margin: 0 auto !important; } /* ---------- Integración ---------- */ .integracion-ax p { max-width: 62ch; margin: 0 auto; font-size: 17.5px; line-height: 1.7; color: #3A3A3A; } /* ---------- Caso a detalle ---------- */ .caso-detalle-ax { background-color: var(--ax-azul); color: #fff; } .caso-detalle-ax .title, .caso-detalle-ax .sub-title { color: #fff; text-transform: none; } .caso-detalle-ax .sub-title { border-color: rgba(255, 255, 255, .3); } .caso-detalle-ax p { color: rgba(255, 255, 255, .86); line-height: 1.7; } .caso-detalle-ax__cliente { font-weight: 600; color: #fff !important; margin-bottom: 18px; } .caso-detalle-ax__imagen { display: block; overflow: hidden; border-radius: 14px; } .caso-detalle-ax__imagen img { width: 100%; height: auto; transition: transform .5s ease; } .caso-detalle-ax__imagen:hover img { transform: scale(1.04); } /* ---------- Detalle de servicio (service-details de la plantilla) ---------- Póster grande arriba, un bloque de texto y otro con imagen al costado. Es lo que le da cuerpo a la página frente a una sucesión de tarjetas. */ /* Ilustraciones propias en lugar de fotografía de banco. Se limitan en ancho para que acompañen al texto sin dominar la sección. */ .ilustracion-ax { margin: 0; text-align: center; } .ilustracion-ax img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; } /* Las composiciones propias del WordPress vienen con su fondo ya puesto y necesitan más ancho que un dibujo suelto. */ .ilustracion-ax--ancha img { max-width: 100%; border-radius: 14px; } @media (max-width: 991px) { .ilustracion-ax { margin-top: 32px; } .ilustracion-ax img { max-width: 400px; } .ilustracion-ax--ancha img { max-width: 100%; } } /* ---------- Banda de imagen a todo lo ancho ---------- Las composiciones de la marca traen el fondo en #243CEB o #F6F6F6 exactos, así que puestas a sangre se funden con la sección contigua y no se ve dónde empieza y acaba la imagen. */ .banda-ax { display: block; line-height: 0; background-color: var(--ax-azul); } .banda-ax img { width: 100%; height: auto; display: block; } .service-details .details-group { margin-bottom: 46px; } .service-details .details-group h2 { margin-bottom: 20px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; text-transform: none; text-wrap: balance; } .service-details .details-group p { margin-bottom: 16px; font-size: 16.5px; line-height: 1.8; color: #444; max-width: 72ch; } .service-details .details-group p:last-child { margin-bottom: 0; } /* ---------- Acordeón de servicios (ux-process de la plantilla) ---------- Se usa en Análisis de Datos en lugar de las tarjetas, para que cada página tenga su propia presentación. La plantilla lo trae con cuadros de color naranja, verde limón, gris y cian: se pasan a la escala del azul de marca. */ .ux-process .service-f-single { border-top-color: #DEDEDE; padding-right: 90px; } .ux-process .service-f-single:nth-last-of-type(1) { border-bottom-color: #DEDEDE; } .ux-process .intro-btn h4 { font-size: 21px; padding-left: 34px; } .ux-process .intro-btn h4::before { width: 13px; height: 13px; border-radius: 3px; } .ux-process .service-f-single:nth-of-type(1) .intro-btn h4::before { background-color: var(--ax-azul); } .ux-process .service-f-single:nth-of-type(2) .intro-btn h4::before { background-color: #4D68F0; } .ux-process .service-f-single:nth-of-type(3) .intro-btn h4::before { background-color: #7488F4; } .ux-process .service-f-single:nth-of-type(4) .intro-btn h4::before { background-color: #9BAAF8; } .ux-process .service-f-single:nth-of-type(5) .intro-btn h4::before { background-color: #C2CBFB; } .ux-process .service-f-single:nth-of-type(6) .intro-btn h4::before { background-color: #DDE3FD; } .ux-process .service-f-single .p-single p { color: #4A4A4A; max-width: 62ch; line-height: 1.7; } /* El signo del acordeón venía en blanco, pensado para fondo oscuro. */ .ux-process .service-f-single .toggle-service-f::before { color: var(--ax-negro); } .ux-process .service-f-single-active .toggle-service-f::before { color: var(--ax-azul); } /* ---------- Lo que va incluido ---------- */ .incluido-ax { position: relative; overflow: hidden; background-color: var(--ax-azul); color: #fff; } .incluido-ax .title, .incluido-ax .title span, .incluido-ax .sub-title { color: #fff; text-transform: none; } .incluido-ax .title span { opacity: .68; } .incluido-ax .sub-title { border-color: rgba(255, 255, 255, .3); } .incluido-ax__intro { max-width: 58ch; margin: 0 auto 52px; color: rgba(255, 255, 255, .86); } .incluido-ax .star-two { position: absolute; top: 12%; right: 6%; width: 44px; opacity: .32; animation: spin 20s linear infinite; } .incluido-ax__punto { display: flex; align-items: flex-start; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .18); height: 100%; } .incluido-ax__icono { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background-color: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; } .incluido-ax__punto h4 { margin: 0 0 6px; color: #fff; font-size: 18px; } .incluido-ax__punto p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .74); } /* ---------- Programas de capacitación ---------- */ .programas-ax { position: relative; overflow: hidden; background-color: var(--ax-azul); color: #fff; } .programas-ax .title, .programas-ax .sub-title { color: #fff; text-transform: none; } .programas-ax .sub-title { border-color: rgba(255, 255, 255, .3); } .programas-ax .star-two { position: absolute; top: 14%; left: 5%; width: 42px; opacity: .3; filter: brightness(0) invert(1); animation: spin 20s linear infinite; } .programa-ax { height: 100%; padding: 38px 34px 34px; margin-bottom: 24px; border-radius: 18px; background-color: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .14); } /* El nivel avanzado va en tarjeta clara: separa los dos programas de un vistazo y sugiere progresión sin necesidad de explicarlo. */ .programa-ax--destacado { --theme-color: var(--ax-negro); --white: var(--ax-negro); background-color: #fff; border-color: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); } .programa-ax__etiqueta { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88); } .programa-ax--destacado .programa-ax__etiqueta { background-color: rgba(36, 60, 235, .1); color: var(--ax-azul); } .programa-ax h3 { margin-bottom: 12px; font-size: 26px; color: #fff; } .programa-ax--destacado h3 { color: var(--ax-negro); } .programa-ax > p { margin-bottom: 26px; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .74); max-width: 44ch; } .programa-ax--destacado > p { color: #4A4A4A; } .programa-ax ul { list-style: none; margin: 0; padding: 0; } .programa-ax li { display: flex; align-items: flex-start; gap: 13px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 16px; color: rgba(255, 255, 255, .9); } .programa-ax--destacado li { border-top-color: #E8E8E8; color: #2B2B2B; } .programa-ax li i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; font-size: 10px; background-color: rgba(255, 255, 255, .16); color: #fff; } .programa-ax--destacado li i { background-color: var(--ax-azul); color: #fff; } /* ---------- Cifras ---------- */ .cifras-ax__intro { max-width: 46ch; margin: 0 auto; opacity: .76; } .cifra-ax { text-align: center; padding: 40px 24px; border-radius: 18px; background-color: #fff; border: 1px solid #E6E6E6; margin-bottom: 24px; transition: border-color .22s ease, transform .22s ease; } .cifra-ax:hover { border-color: var(--ax-azul); transform: translateY(-3px); } .cifra-ax strong { display: block; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--ax-azul); letter-spacing: -.02em; } .cifra-ax span { display: block; margin-top: 12px; font-size: 15.5px; color: #5A5A5A; } /* ---------- Páginas legales ---------- Texto largo pensado para leerse, no para lucir: columna estrecha, interlínea amplia y numeración que ayuda a citar una sección concreta. */ .encabezado-ax--corto { padding: 170px 0 80px; } .legal-ax__bloque { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #E4E4E4; } .legal-ax__bloque:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .legal-ax__bloque h2 { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; text-transform: none; } .legal-ax__bloque h2 span { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ax-azul); letter-spacing: .04em; } .legal-ax__bloque p { margin-bottom: 16px; font-size: 16.5px; line-height: 1.8; color: #3F3F3F; } .legal-ax__bloque p:last-child { margin-bottom: 0; } .legal-ax__bloque ul { margin: 0 0 18px; padding-left: 22px; } .legal-ax__bloque li { margin-bottom: 11px; font-size: 16.5px; line-height: 1.75; color: #3F3F3F; list-style: disc; } /* ---------- Casos a detalle ---------- */ .destacado-ax { padding: 54px 0; border-top: 1px solid #E2E2E2; } .destacado-ax:first-of-type { border-top: none; padding-top: 0; } .destacado-ax--invertido .row { flex-direction: row-reverse; } .destacado-ax__imagen { display: block; overflow: hidden; border-radius: 16px; border: 1px solid #E4E4E4; aspect-ratio: 1200 / 630; } .destacado-ax__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .destacado-ax__imagen:hover img { transform: scale(1.04); } .destacado-ax__etiqueta { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 99px; background-color: rgba(36, 60, 235, .09); color: var(--ax-azul); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; } .destacado-ax h3 { margin-bottom: 4px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; } .destacado-ax__persona { margin-bottom: 26px; font-size: 15px; color: #6B6B6B; } .destacado-ax__bloque { margin-bottom: 22px; } .destacado-ax__bloque h4 { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ax-azul); } .destacado-ax__bloque p { margin: 0; font-size: 16px; line-height: 1.75; color: #444; max-width: 56ch; } .destacado-ax__enlace { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 600; color: var(--ax-azul); } .destacado-ax__enlace:hover { color: #1B2FC4; gap: 14px; transition: gap .2s ease; } @media (max-width: 991px) { .destacado-ax__etiqueta { margin-top: 30px; } .destacado-ax--invertido .row { flex-direction: row; } } /* ---------- Filtros de la rejilla ---------- Botones propios, sin las clases de la plantilla: así no heredan sus reglas de color ni su reparto a todo lo ancho, y no hay que pelear por especificidad con cada una. */ .rejilla-ax__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 46px; } .rejilla-ax__filtros button { padding: 11px 22px; border: 1px solid #DCDCDC; border-radius: 99px; background-color: transparent; color: #4A4A4A; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .rejilla-ax__filtros button:hover { border-color: var(--ax-azul); color: var(--ax-azul); } .rejilla-ax__filtros button.activo { background-color: var(--ax-azul); border-color: var(--ax-azul); color: #fff; } /* Las celdas ocultas se retiran del flujo para que la rejilla se recomponga sin huecos. La transición hace que el cambio no se sienta brusco. */ .rejilla-ax__celda { transition: opacity .25s ease; } .rejilla-ax__celda.esta-oculta { display: none; } .rejilla-ax { background-color: var(--ax-hueso); --theme-color: var(--ax-negro); --white: var(--ax-negro); } /* ---------- Rejilla de proyectos ---------- */ .proyectos-ax__intro { max-width: 52ch; margin: 0 auto; opacity: .78; } .proyecto-ax { margin-bottom: 34px; } .proyecto-ax__imagen { display: block; overflow: hidden; border-radius: 14px; border: 1px solid #E4E4E4; aspect-ratio: 1200 / 630; } .proyecto-ax__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .proyecto-ax:hover .proyecto-ax__imagen img { transform: scale(1.04); } .proyecto-ax__pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 18px; } .proyecto-ax__pie h4 { margin: 0 0 3px; font-size: 19px; } .proyecto-ax__pie p { margin: 0; font-size: 14.5px; color: #5A5A5A; } .proyecto-ax__enlace { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #D6D6D6; color: var(--ax-negro); transition: background-color .22s ease, color .22s ease, border-color .22s ease; } .proyecto-ax:hover .proyecto-ax__enlace { background-color: var(--ax-azul); border-color: var(--ax-azul); color: #fff; } /* ---------- Preguntas frecuentes ---------- */ .faq-ax__item { border-bottom: 1px solid #E0E0E0; padding: 22px 0; } .faq-ax__item summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.4; padding-right: 40px; position: relative; } .faq-ax__item summary::-webkit-details-marker { display: none; } .faq-ax__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--ax-azul); line-height: 1; } .faq-ax__item[open] summary::after { content: "−"; } .faq-ax__item p { margin: 14px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.7; color: #4A4A4A; } /* Variante sobre azul, para alternar el ritmo de fondos entre páginas. */ .faq-ax--azul { background-color: var(--ax-azul); color: #fff; } .faq-ax--azul .title, .faq-ax--azul .sub-title { color: #fff; text-transform: none; } .faq-ax--azul .sub-title { border-color: rgba(255, 255, 255, .3); } .faq-ax--azul .faq-ax__item { border-bottom-color: rgba(255, 255, 255, .2); } .faq-ax--azul .faq-ax__item summary { color: #fff; } .faq-ax--azul .faq-ax__item summary::after { color: #fff; } .faq-ax--azul .faq-ax__item p { color: rgba(255, 255, 255, .8); } /* ---------- Cierre de página ---------- */ .cierre-ax { background-color: var(--ax-azul); color: #fff; } .cierre-ax .title { color: #fff; text-transform: none; text-wrap: balance; } .cierre-ax p { color: rgba(255, 255, 255, .86); max-width: 46ch; margin: 0 auto; } .cierre-ax .btn--primary { background-color: #fff; border-color: #fff; color: var(--ax-azul); } .cierre-ax .btn--primary::before { display: none; } .cierre-ax .btn--primary:hover { background-color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); color: var(--ax-azul); } /* Variante clara del cierre, cuando la sección anterior ya era azul. */ .cierre-ax--claro { --theme-color: var(--ax-negro); --white: var(--ax-negro); background-color: var(--ax-hueso); color: var(--ax-negro); } .cierre-ax--claro .title { color: var(--ax-negro); } .cierre-ax--claro p { color: #4A4A4A; } .cierre-ax--claro .btn--primary { background-color: var(--ax-azul); border-color: var(--ax-azul); color: #fff; } .cierre-ax--claro .btn--primary:hover { background-color: #1B2FC4; border-color: #1B2FC4; color: #fff; } /* ---------- Pantalla de carga ---------- La plantilla la trae con tres morados escritos a mano (#9370db, #ba55d3 y #f0f) que no tienen relación con la marca. Pasa al azul de Analytica X con los anillos en blanco. */ #preloader { background-color: var(--ax-azul); } #loader { width: 88px; height: 88px; margin: -44px 0 0 -44px; border-top-color: #fff; } #loader::before { border-top-color: rgba(255, 255, 255, .62); } #loader::after { border-top-color: rgba(255, 255, 255, .34); } /* ---------- Pie de página ---------- */ .pie-ax { background-color: var(--ax-azul); color: #fff; padding: 78px 0 34px; } .pie-ax__logo { display: inline-block; margin-bottom: 20px; } .pie-ax__descripcion { max-width: 40ch; margin: 0 0 26px; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.7; } .pie-ax__redes { display: flex; gap: 12px; } .pie-ax__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 15px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .pie-ax__redes a:hover { background-color: #fff; border-color: #fff; color: var(--ax-azul); } .pie-ax__titulo { margin-bottom: 20px; color: #fff; font-size: 17px; } .pie-ax__lista { list-style: none; margin: 0; padding: 0; } .pie-ax__lista li + li { margin-top: 11px; } .pie-ax__lista a { color: rgba(255, 255, 255, .8); font-size: 15px; transition: color .2s ease; } .pie-ax__lista a:hover { color: #fff; } .pie-ax__contacto i { width: 22px; margin-right: 8px; } .pie-ax__cierre { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; } .pie-ax__cierre p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .62); } @media (max-width: 991px) { .pie-ax { padding-top: 56px; } .pie-ax__titulo { margin-top: 26px; } } /* ---------- Botón flotante de WhatsApp ---------- */ .wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background-color: #25D366; color: #fff; font-size: 28px; box-shadow: 0 6px 20px rgba(37, 211, 102, .42); transition: transform .18s ease, box-shadow .18s ease; } .wa-flotante:hover { color: #fff; transform: scale(1.08); box-shadow: 0 8px 26px rgba(37, 211, 102, .55); } @media (max-width: 575px) { .wa-flotante { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 25px; } } /* El aviso de reCAPTCHA se oculta porque su texto legal se muestra en el formulario, tal como permiten los términos de Google. */ .grecaptcha-badge { visibility: hidden; } /* ---------- Página de gracias ---------- */ .gracias-ax { background-color: var(--ax-azul); min-height: 72vh; display: flex; align-items: center; } .gracias-ax h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 18px; } .gracias-ax p { color: rgba(255, 255, 255, .86); max-width: 48ch; margin: 0 auto; } .gracias-ax__marca { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 30px; border-radius: 50%; background-color: #fff; color: var(--ax-azul); font-size: 32px; } .gracias-ax .btn--primary { background-color: #fff; border-color: #fff; color: var(--ax-azul); } /* ---------- Cifras aún sin definir ---------- Marcador visible mientras Daniel confirma los números reales. */ .dato-pendiente { opacity: .45; } /* ============================================================ Fondo del encabezado de las páginas internas Las siete páginas internas comparten .encabezado-ax. El fondo se elige en fondoEncabezado() (inc/contenido.php) y el marcado lo pone inc/encabezado-fondo.php, así que cambiar de variante es editar una sola línea. Las tres están hechas solo con CSS, sin una imagen: evita que se vean de banco de imágenes y que el mismo fondo se repita en todo el sitio, y no suma peso de descarga. ============================================================ */ /* Las propuestas traen su propio fondo, así que se apaga la textura y el halo que hoy usa .encabezado-ax. */ .hero-aurora::before, .hero-aurora::after, .hero-reticula::before, .hero-reticula::after, .hero-senal::before, .hero-senal::after { content: none; } .hero-aurora, .hero-reticula, .hero-senal { position: relative; isolation: isolate; overflow: hidden; } /* Capa donde vive cada fondo. Va detrás del contenido. */ .hero-aurora > .fondo-ax, .hero-reticula > .fondo-ax, .hero-senal > .fondo-ax { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* ---------- Opción A · Aurora de marca ---------- Tres manchas de luz en los azules de la marca que se desplazan muy lento y en sentidos distintos. Da profundidad y hace que el fondo nunca se vea igual dos segundos seguidos. */ .hero-aurora { background: #1B2FD0; } .hero-aurora .aurora-mancha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .85; will-change: transform; } .hero-aurora .aurora-mancha:nth-child(1) { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -28%; left: -10%; background: radial-gradient(circle, #4B6BFF 0%, rgba(75,107,255,0) 68%); animation: aurora-a 26s ease-in-out infinite alternate; } .hero-aurora .aurora-mancha:nth-child(2) { width: 55vw; height: 55vw; max-width: 780px; max-height: 780px; top: -18%; right: -12%; background: radial-gradient(circle, #7C93FF 0%, rgba(124,147,255,0) 66%); animation: aurora-b 32s ease-in-out infinite alternate; } .hero-aurora .aurora-mancha:nth-child(3) { width: 48vw; height: 48vw; max-width: 680px; max-height: 680px; bottom: -34%; left: 32%; background: radial-gradient(circle, #2440E8 0%, rgba(36,64,232,0) 70%); animation: aurora-c 29s ease-in-out infinite alternate; } @keyframes aurora-a { to { transform: translate3d(14%, 12%, 0) scale(1.15); } } @keyframes aurora-b { to { transform: translate3d(-16%, 16%, 0) scale(1.1); } } @keyframes aurora-c { to { transform: translate3d(10%, -14%, 0) scale(1.18); } } /* Un velo sutil para que el texto blanco no compita con las luces. */ .hero-aurora .aurora-velo { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12, 24, 140, .58) 0%, rgba(12, 24, 140, .18) 52%, rgba(12, 24, 140, 0) 78%); } /* ---------- Opción B · Retícula de datos ---------- Una cuadrícula que se va al horizonte, con nodos que laten encima. Es la que más se parece a lo que hace Analytica X. */ .hero-reticula { background: radial-gradient(120% 90% at 78% 8%, #3049F0 0%, #1E31CE 42%, #16249F 100%); } .hero-reticula .malla { position: absolute; inset: -10% -10% 0 -10%; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 62px 62px; /* La cuadrícula se inclina y se desvanece hacia arriba: parece un plano que se aleja, no un mantel. */ transform: perspective(760px) rotateX(58deg) scale(1.5); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 42%, transparent 78%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 42%, transparent 78%); animation: malla-avanza 9s linear infinite; will-change: transform; } @keyframes malla-avanza { from { background-position: 0 0; } to { background-position: 0 62px; } } .hero-reticula .nodo { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 0 18px 4px rgba(160,180,255,.7); animation: nodo-late 4.2s ease-in-out infinite; } .hero-reticula .nodo:nth-child(2) { top: 24%; left: 68%; animation-delay: 0s; } .hero-reticula .nodo:nth-child(3) { top: 40%; left: 82%; animation-delay: .9s; } .hero-reticula .nodo:nth-child(4) { top: 16%; left: 88%; animation-delay: 1.8s; } .hero-reticula .nodo:nth-child(5) { top: 58%; left: 74%; animation-delay: 2.6s; } .hero-reticula .nodo:nth-child(6) { top: 33%; left: 57%; animation-delay: 3.4s; } @keyframes nodo-late { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } /* Halo cálido arriba a la derecha, para que no quede plano. */ .hero-reticula .brillo { position: absolute; top: -32%; right: -10%; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 44%, transparent 70%); } /* ---------- Opción C · Ondas de señal ---------- Líneas tipo serie de tiempo que se desplazan despacio. Es la más sobria de las tres y la que menos compite con el titular. */ .hero-senal { background: linear-gradient(118deg, #16249F 0%, #243CEB 48%, #3552F5 100%); } .hero-senal .onda { position: absolute; left: -50%; /* Bajan y se corren a la derecha para no cruzar el titular: al pasar por encima del texto las líneas lo leían como tachado. */ top: 34%; width: 200%; height: 76%; background-repeat: repeat-x; background-position: 0 center; opacity: .5; will-change: transform; /* Se desvanecen sobre la columna de texto (el tercio izquierdo). */ -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 46%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 22%, #000 46%, #000 100%); } /* Cada onda es un SVG en línea: no hay petición de red. El trazo lleva su propio degradado para que la línea nazca y muera desvanecida, en vez de cortarse de golpe en los bordes. */ .hero-senal .onda:nth-child(1) { background-image: url("data:image/svg+xml;utf8,"); animation: onda-corre 22s linear infinite; opacity: .95; } .hero-senal .onda:nth-child(2) { background-image: url("data:image/svg+xml;utf8,"); animation: onda-corre 34s linear infinite reverse; opacity: .8; } .hero-senal .onda:nth-child(3) { background-image: url("data:image/svg+xml;utf8,"); animation: onda-corre 28s linear infinite; opacity: .65; } @keyframes onda-corre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } } .hero-senal .brillo { position: absolute; top: -26%; right: -8%; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 46%, transparent 70%); } /* ---------- Rendimiento en móvil ---------- Un blur de 70px sobre tres capas grandes es caro de repintar en teléfonos modestos. En pantallas chicas se reduce el desenfoque y se detiene el movimiento: el fondo se ve igual, pero ya no se repinta en cada cuadro. */ @media (max-width: 767px) { .hero-aurora .aurora-mancha { filter: blur(46px); animation: none; } .hero-reticula .malla { animation: none; } /* En móvil el texto ocupa todo el ancho y los nodos bajos quedaban encima del párrafo: un punto suelto a media frase se lee como un defecto de dibujado, no como decoración. Se dejan solo los de arriba, que caen sobre la franja libre junto al menú. */ .hero-reticula .nodo:nth-child(5), .hero-reticula .nodo:nth-child(6) { display: none; } } /* ---------- Accesibilidad ---------- Quien pidió menos animación en su sistema ve el mismo fondo, pero quieto. */ @media (prefers-reduced-motion: reduce) { .hero-aurora .aurora-mancha, .hero-reticula .malla, .hero-reticula .nodo, .hero-senal .onda { animation: none !important; } }