ahí) se resalta en
verde oscuro como "conclusión".
- El párrafo de misión (segundo , hijo directo de .stk-6a29cf0-inner-blocks,
el único
suelto — el otro texto va envuelto en un
) se convierte
en un callout con acento verde a la izquierda: se lee como una pieza
aparte ("nuestra misión"), no como continuación del primer párrafo.
========================================================================== */
.stk-eb3bf86 .stk-block-text__text {
line-height: 1.75 !important;
}
.stk-eb3bf86 .stk-block-text__text br {
content: "";
display: block;
margin-bottom: 0.9em;
}
.stk-eb3bf86 .stk-block-text__text strong {
color: #00a862 !important;
}
.stk-6a29cf0-inner-blocks > p {
margin-top: 28px !important;
padding: 20px 24px !important;
background: rgba(0, 212, 126, 0.06) !important;
border-left: 3px solid #00d47e !important;
border-radius: 4px 12px 12px 4px !important;
line-height: 1.7 !important;
}
.stk-6a29cf0-inner-blocks > p br {
content: "";
display: block;
margin-bottom: 0.75em;
}
.stk-6a29cf0-inner-blocks > p strong {
color: #232643 !important;
}
/* ==========================================================================
21) Jerarquía tipográfica — TODAS las rutas [Cora]
--------------------------------------------------------------------------
Destino: append a wp-content/themes/blocksy-child/style.css (subir versión
en el header del archivo para romper caché LiteSpeed tras el deploy).
ALCANCE DE ESTE AGENTE: font-size, font-weight, line-height, letter-
spacing, text-align, max-width de texto y márgenes verticales entre
títulos/párrafos. NO toca hover/sombras/transiciones/box-shadow (Aria/
Bruno, §18/§19), NI las 5 cards de metodología del home (Dante, §20:
.stk-fc9c699 / .stk-c449828 / .stk-f0a9bcb / .stk-67080b5 / .stk-a0e5155
y su tipografía interna), NI navbar/footer/hero, NI la sección "Un poco
más acerca de AetherAI" (.stk-eb3bf86, .stk-225d63e, .stk-6a29cf0 — en
reorganización por el orquestador en paralelo).
ESCALA TIPOGRÁFICA DOCUMENTADA (mobile 375px → desktop, con clamp):
H1 "intro" de sección (.stk-cf02387, se repite en / /about /pricing
/blog): clamp(1.75rem, 1.35rem + 2vw, 3.125rem) → 28px → 50px
peso 800 · line-height 1.2 · letter-spacing -0.01em
H4 "eyebrow/subtítulo" bajo el H1 (.stk-c73ce97, idéntico en las 4
rutas): clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) → 17px → 20px
peso 700 · line-height 1.35
Body / párrafo de introducción (.stk-2383209, idéntico en las 4
rutas; .stk-cca2a86 en /pricing): clamp(1rem, 0.95rem + 0.25vw,
1.0625rem) → 16px → 17px · line-height 1.65 · medida ≤62ch
H3 dentro de card de precios (.stk-6d4e87b): se conserva 30px
(ya legible) — solo se ajusta line-height/ritmo.
Body en cards sueltas (mobile, "obstáculos"): mínimo 16px con
line-height 1.6 (evita el preset "small" 13px del tema en 375px).
VERIFICADO contra el HTML/CSS servido el 2026-07-03. Stackable imprime su
CSS de bloque nada más abrir el (antes que este archivo, que carga
por wp_head), así que cada override usa 3 selectores de clase encadenados
+ !important — mismo patrón ya probado en §14 (que hoy vence con éxito el
text-shadow de estos mismos bloques).
========================================================================== */
/* --------------------------------------------------------------------------
21a) Patrón "intro de sección" — se repite IDÉNTICO en Home, /about,
/pricing y /blog (mismo patrón Stackable reutilizado, mismos IDs de
bloque: cf02387 / c73ce97 / 2383209). Una sola regla arregla las 4 rutas.
Problema real detectado en el HTML servido:
- H1 (.stk-cf02387): 50px fijos en TODOS los tamaños de pantalla (sin
reducir en móvil) → en 375px provoca un título de 2-3 líneas muy
apretado contra el borde de la card.
- H4 (.stk-c73ce97): 20px fijos, peso 700 — funciona como "eyebrow" bajo
el H1 pero sin separación clara antes del párrafo (margin-bottom:13px).
- Párrafo (.stk-2383209): font-size:13px !important en TODOS los tamaños
(móvil Y desktop) — por debajo del mínimo legible, y sin max-width: la
línea ocupa el ancho completo de la card (~1100px en desktop, muy por
encima de los 60-75 caracteres recomendados).
-------------------------------------------------------------------------- */
.stk-block-heading.stk-cf02387 .stk-block-heading__text {
font-size: clamp(1.75rem, 1.35rem + 2vw, 3.125rem) !important; /* 28px → 50px */
line-height: 1.2 !important;
letter-spacing: -0.01em;
}
.stk-block-heading.stk-cf02387 {
margin-bottom: 0.875rem !important; /* 14px — mantiene el título pegado a su eyebrow */
}
.stk-block-heading.stk-c73ce97 .stk-block-heading__text {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) !important; /* 17px → 20px */
line-height: 1.35 !important;
}
.stk-block-heading.stk-c73ce97 {
margin-bottom: 1.5rem !important; /* 24px — separa el bloque de titular del cuerpo de texto */
}
.stk-block-text.stk-2383209 .stk-block-text__text {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem) !important; /* 16px → 17px, nunca <16px */
line-height: 1.65 !important;
max-width: 62ch; /* medida legible: la card mide ~1100px, sin esto la línea corre libre */
margin-left: 0 !important;
margin-right: auto !important;
}
/* §33 (más abajo) agrega text-align:left en desktop a este mismo párrafo —
antes (sesión Cora) el párrafo se centraba a propósito como bloque
(margin:auto ambos lados) porque toda la intro era centrada; ahora que la
intro se ancla a la izquierda, margin-left pasa a 0 para no flotar al
centro de la columna. En mobile ya era left-aligned de fábrica
(has-text-align-left-mobile de Stackable), sin cambios ahí. */
/* --------------------------------------------------------------------------
21b) /pricing — card "Queremos que pagues solo por lo que..."
Mismo problema de párrafo a 13px que 21a, en un bloque distinto
(.stk-cca2a86, dentro de la card stk-c11e9a3 que Bruno ya trabajó SOLO en
sombra/icono/CTA — la tipografía seguía sin tocar). El H3 (.stk-6d4e87b,
30px) ya es legible: solo se afina el ritmo vertical.
-------------------------------------------------------------------------- */
.stk-block-heading.stk-6d4e87b .stk-block-heading__text {
line-height: 1.3 !important;
}
.stk-block-heading.stk-6d4e87b {
margin-bottom: 0.75rem !important;
}
.stk-block-text.stk-cca2a86 .stk-block-text__text {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem) !important; /* 16px → 17px */
line-height: 1.6 !important;
}
/* --------------------------------------------------------------------------
21c) Home — cards "¿Qué obstáculos enfrenta tu negocio hoy?"
Los párrafos (.stk-6d176d9 / .stk-1d5cae5 / .stk-b1b646f — NO son las
cards de metodología de Dante, son la sección aparte de 3 obstáculos)
caen al preset "small" (13px !important) SOLO dentro del media query
de Stackable a 689px. En desktop no tienen override explícito y se ven
bien; en 375px quedan por debajo del mínimo legible mobile-first.
-------------------------------------------------------------------------- */
@media screen and (max-width: 689px) {
.stk-block-text.stk-6d176d9 .stk-block-text__text,
.stk-block-text.stk-1d5cae5 .stk-block-text__text,
.stk-block-text.stk-b1b646f .stk-block-text__text {
font-size: 1rem !important; /* 16px, mínimo mobile-first */
line-height: 1.6 !important;
}
}
/* --------------------------------------------------------------------------
21d) /about (Servicios) — 3 cards de servicio: alineación en zigzag
--------------------------------------------------------------------------
Estructura verificada: 3 bloques imagen+texto alternados. Cards 1 y 3
(.stk-25e1d91 / .stk-44b6054, encabezados) usan alineación izquierda
(por defecto o "has-text-align-left" explícito). La card 2
("Automatización de Procesos Empresariales.") quedó con
has-text-align-right en el heading (.stk-dd60508), el párrafo
(.stk-1e9186f) Y el grupo de botón (.stk-0dbe147) — probablemente un
resto del editor al mover la imagen al lado contrario. Resultado: el
texto salta de izquierda → derecha → izquierda entre las 3 cards, rompe
el ritmo de lectura vertical. Se unifica a izquierda en las 3.
-------------------------------------------------------------------------- */
.stk-dd60508 .stk-block-heading__text {
text-align: left !important;
}
.stk-1e9186f .stk-block-text__text {
text-align: left !important;
}
.stk-0dbe147 .stk-button-group,
.stk-0dbe147 .stk-row {
justify-content: flex-start !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
21e) Movimiento reducido — no aplica (esta sección no anima nada, solo
tamaños/alineación/ritmo). Sección vacía a propósito, documentada por
consistencia con el resto del archivo.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
21f) Gap señalado por Cora (fuera de su alcance): los párrafos de las 5
cards de metodología (Dante, §20) también caen al preset "small" 13px en
el media query mobile de Stackable — mismo bug que 21c, selectores
distintos. Se corrige aquí para no invadir la tipografía interna que Dante
ya diseñó en desktop (número, ícono, peso del heading).
-------------------------------------------------------------------------- */
@media screen and (max-width: 689px) {
.stk-block-text.stk-d560ff0 .stk-block-text__text,
.stk-block-text.stk-f8ab3aa .stk-block-text__text,
.stk-block-text.stk-84872b5 .stk-block-text__text,
.stk-block-text.stk-368f5ea .stk-block-text__text,
.stk-block-text.stk-2f348aa .stk-block-text__text {
font-size: 1rem !important;
line-height: 1.6 !important;
}
}
/* ==========================================================================
22) Centrar el título de página (Blocksy "Page Title") en TODAS las rutas
internas (Servicios, Precios, Contacto, Casos de Éxito) — Home no usa este
elemento (tiene su propio hero de Stackable, verificado: 0 apariciones de
.page-title en el HTML de la home), así que no hay riesgo de afectarlo.
========================================================================== */
.hero-section .entry-header {
text-align: center !important;
display: flex;
justify-content: center;
}
.page-title {
text-align: center !important;
width: 100%;
}
/* ==========================================================================
26) Home · "Un poco más acerca de AetherAI" — fondo degradado + globo 3D
----------------------------------------------------------------------------
Historial: se probaron campo de puntos, aurora y retícula animada (todos
descartados) → se dejó fondo blanco plano. Pedido actual del usuario: globo
3D estilo Magic UI (@magicui/globe, ver aai-globe-bg.js) en una esquina +
"degradado llamativo" en el resto. Las ondas top/bottom (separadores de
forma de Stackable heredados de la plantilla) se mantienen ocultas.
v2: el usuario notó que el degradado anterior (radios de 620/880px) se
veía como "un recuadro" alrededor del globo — el radio era chico y su
borde caía dentro de la sección, visible como límite duro. Se hizo
FULL-BLEED con radios enormes para que el borde cayera fuera de la vista.
v3: el globo se centró verticalmente y se pegó al borde derecho, pero
quedaba mayormente TAPADO por los tiles opacos del bento en la franja
media (la columna derecha del grid ocupa esa zona en casi toda la altura
de la sección) — solo asomaba en los márgenes de arriba/abajo. El usuario
confirmó que el globo debe seguir DETRÁS del contenido (z-index bajo), y
pidió agrandarlo igual de forma significativa para que ocupe esa zona
(el margen visible en las franjas libres crece con un círculo más grande,
aunque la franja central siga tapada por los tiles — eso es aceptado).
v4: degradado simplificado a UNO limpio ("más limpio" pidió el usuario):
un solo linear-gradient IZQUIERDA→DERECHA (blanco limpio donde está el
texto → verde hacia el globo a la derecha) + un único radial de apoyo
anclado al globo para dar algo de brillo concentrado ahí. Se quitaron las
3 capas radiales anteriores (quedaba con transiciones redundantes).
========================================================================== */
.stk-d51f943.stk-block-background {
background-image:
radial-gradient(1150px circle at 100% 50%, rgba(0, 212, 126, 0.34) 0%, rgba(0, 212, 126, 0.14) 42%, transparent 75%),
linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #eafcf3 62%, #cff2e1 85%, #b9ecd6 100%) !important;
background-color: #ffffff !important;
position: relative;
/* Red de seguridad: el globo ahora sangra bastante fuera del borde derecho
(a propósito) — esto evitaría cualquier scroll horizontal de página si
el tema no lo clipeara ya globalmente. */
overflow-x: hidden;
}
.stk-d51f943.stk-block-background::before {
background-color: transparent !important;
background-image: none !important;
}
/* Separadores de forma (ondas top/bottom) de Stackable: el usuario pidió
restaurarlos (se habían ocultado en una iteración anterior de esta misma
sección). Sin regla propia → vuelven a su comportamiento nativo. */
/* --- Globo 3D (esquina superior derecha) ------------------------------------
⚠️ Gotcha Stackable ya conocido: hijos directos de un bloque con overlay
reciben position:relative;z-index:3 forzado → el wrapper necesita
position:absolute !important (2 clases) + z-index explícito, o queda como
ítem en flujo (mismo patrón que el carrusel §30). z-index bajo (1): debajo
del bento (z-index:3 nativo de Stackable).
⚠️ Bug real corregido: aunque el wrapper tenía pointer-events:none, el
CANVAS (hijo) no lo declaraba explícito — pointer-events SÍ es heredado en
CSS, pero cualquier regla que matchee el canvas con un valor explícito
(aunque sea de baja especificidad) gana sobre el heredado. Esto dejaba el
canvas clickeable/arrastrable con el mouse, lo que además chocaba con nuestra
auto-rotación (state.phi fijado cada frame) y se veía como un giro errático
sin control. Fix: pointer-events:none !important también en el propio canvas
(cobe no tiene drag propio — no hay ningún addEventListener de puntero en su
código fuente — así que bloquear el canvas es 100% seguro). */
/* Pegado del todo al borde derecho, mostrando "un poco más de la mitad"
(pedido explícito): right es MENOS negativo que -(width/2), así el centro
del círculo queda ligeramente adentro del borde de la sección → se ve algo
más del 50% del globo, no exactamente la mitad. Centrado verticalmente con
top:50%+translateY(-50%) para que quede centrado sin importar la altura
real de la sección (varía con el contenido).
Tamaño AGRANDADO significativamente (1400px, antes 960px) a pedido del
usuario: aunque la franja central del círculo queda detrás de los tiles
opacos del bento (columna derecha del grid — se acepta, el globo debe
seguir detrás del contenido), un círculo más grande hace que la porción
visible en las franjas libres (arriba/abajo del grid + el borde real de
la sección) sea notablemente más alta/prominente. */
.stk-d51f943 .aai-globe-wrap {
position: absolute !important;
top: 50%;
right: -650px;
width: 1400px;
height: 1400px;
transform: translateY(-50%) !important;
z-index: 1 !important;
pointer-events: none !important;
overflow: hidden;
}
.aai-globe-canvas {
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none !important;
transition: opacity 1.1s ease;
}
/* Solo desktop (≥900px): ahí el layout centrado (bento max-width 1140px dentro
de una sección alignfull) deja margen lateral libre real; en viewports más
angostos el globo taparía el titular o el bento (ver aai-globe-bg.js, mismo
breakpoint 900px para no inicializar el WebGL de más). */
@media (max-width: 1400px) {
.stk-d51f943 .aai-globe-wrap { width: 900px; height: 900px; right: -400px; }
}
@media (max-width: 899px) {
.stk-d51f943 .aai-globe-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.aai-globe-canvas { transition: none; }
}
/* ==========================================================================
27) CTAs — efecto "Attract" (partículas navy que se magnetizan al centro)
----------------------------------------------------------------------------
Reemplaza el shimmer anterior. Adaptado de KokonutUI "Attract Button" (MIT),
que es React+framer-motion → recreado en JS/CSS vanilla (ver cta-attract.js).
Partículas navy de marca (#232643) repartidas por la cara del botón; al
hover/touch se magnetizan al centro con curva tipo resorte. Navy porque el
verde sería invisible sobre el botón verde. Sin animación en reposo (solo
transición CSS al hover) → ligero para 3G.
Capas: las partículas van en z-index:-1 (el botón crea stacking context con
isolation:isolate) → pintan SOBRE el fondo verde pero DEBAJO del texto. Se
desactiva el overlay :after de hover de Stackable (que taparía las
partículas) y se reemplaza el feedback de hover por un verde más oscuro +
glow de marca.
========================================================================== */
/* --- CTAs de texto de Stackable ------------------------------------------- */
.stk-block-button a.stk-button {
border-radius: 14px !important;
position: relative;
isolation: isolate;
background-image: none !important;
background-color: #00d084 !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.stk-block-button a.stk-button:hover {
background-color: #00b871 !important;
box-shadow: 0 10px 26px rgba(0, 208, 132, 0.5) !important;
}
/* El overlay :after de hover de Stackable taparía las partículas → apagarlo
(especificidad 0,3,2 > inline 0,3,1, gana sin depender del orden de carga). */
.stk-block-button a.stk-button:hover::after {
opacity: 0 !important;
}
/* --- Submit del formulario de contacto ------------------------------------ */
#wpforms-5 .wpforms-submit-container button.wpforms-submit {
background-image: none !important;
position: relative;
isolation: isolate;
}
/* --- Partículas (compartidas) --------------------------------------------- */
.aai-attract-btn {
position: relative;
}
.aai-particle {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #232643;
pointer-events: none;
opacity: 0;
z-index: -1;
transform: translate(var(--px, 0), var(--py, 0));
transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.4s ease;
}
.aai-attract-btn:hover .aai-particle,
.aai-attract-btn.is-attracting .aai-particle {
transform: translate(0, 0);
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
.aai-particle {
transition: none;
}
}
/* ==========================================================================
28) Home · "¿Qué obstáculos enfrenta tu negocio hoy?" — efecto en cards
----------------------------------------------------------------------------
Adaptado de KokonutUI "Spotlight/Feature cards" (MIT). Tilt 3D magnético
(JS, ver obstaculos-cards.js), aurora/glow verde de marca tipo spotlight que
sigue el cursor, línea de acento inferior que crece, y focus-dim de las
hermanas. Se suma al hover existente (§18: lift −6px + glow + zoom ícono).
Capas: la card ya es blanca con overflow:hidden + radius 16px. Se le da
position:relative + isolation:isolate; la capa de aurora va en z-index:-1
(sobre el blanco, debajo del contenido) y la línea inferior en z-index:2.
========================================================================== */
.stk-e9f8ae1 .stk-container.aai-tilt {
position: relative;
isolation: isolate;
transform-style: preserve-3d;
}
/* Durante el tilt: la transición de transform es rápida para seguir el cursor;
al salir (sin .is-tilting) vuelve con los 0.5s suaves de §18. */
.stk-e9f8ae1 .stk-container.aai-tilt.is-tilting {
transition: transform 0.1s linear, box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Aurora / glow verde que sigue el cursor (spotlight). */
.aai-card-fx {
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 25%),
rgba(0, 212, 126, 0.22),
transparent 60%
);
}
.stk-e9f8ae1 .stk-container:hover .aai-card-fx {
opacity: 1;
}
/* Línea de acento inferior que crece de 0 → 100% al hover.
Se anima `transform:scaleX` (no `width`) para no disparar layout — cumple la
guía "animate only transform/opacity" (auditoría web-design-guidelines). */
.aai-card-line {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
z-index: 2;
border-radius: 0 3px 3px 0;
pointer-events: none;
background: linear-gradient(to right, #00d47e, rgba(0, 212, 126, 0));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stk-e9f8ae1 .stk-container:hover .aai-card-line {
transform: scaleX(1);
}
/* Focus-dim: al enfocar una card, las hermanas se atenúan y encogen. */
.stk-e9f8ae1.aai-has-focus .stk-block-column:not(.aai-focus) .stk-container {
opacity: 0.5;
transform: scale(0.97);
transition: opacity 0.3s ease, transform 0.3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
.aai-card-fx,
.aai-card-line {
transition: none;
}
.stk-e9f8ae1.aai-has-focus .stk-block-column:not(.aai-focus) .stk-container {
transform: none;
}
}
/* ==========================================================================
29) Loader de navegación entre rutas
----------------------------------------------------------------------------
Overlay de marca que cubre la espera al navegar a otra ruta. Arranca oculto;
route-loader.js lo muestra solo si la navegación tarda >180ms. Spinner verde
de marca + wordmark "AetherAI" (Poppins) + "Cargando…" (Inter).
========================================================================== */
#aai-route-loader {
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
background: #ffffff;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#aai-route-loader.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease;
}
#aai-route-loader .aai-rl-spinner {
width: 52px;
height: 52px;
border-radius: 50%;
border: 3px solid rgba(35, 38, 67, 0.12);
border-top-color: #00d47e;
animation: aai-rl-spin 0.8s linear infinite;
}
#aai-route-loader .aai-rl-word {
font-family: "Poppins", "Inter", system-ui, sans-serif;
font-weight: 600;
font-size: 1.2rem;
letter-spacing: 0.01em;
color: #232643;
line-height: 1;
}
#aai-route-loader .aai-rl-word b {
color: #00d47e;
font-weight: 600;
}
#aai-route-loader .aai-rl-sub {
font-family: "Inter", system-ui, sans-serif;
font-size: 0.78rem;
color: #8a90a2;
letter-spacing: 0.06em;
margin-top: -8px;
}
@keyframes aai-rl-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
#aai-route-loader .aai-rl-spinner {
animation-duration: 1.6s;
}
}
/* ==========================================================================
30) Home · "¿Tienes alguna pregunta?" — carrusel de imágenes marquee
----------------------------------------------------------------------------
Reemplaza la foto de fondo del bloque .stk-6c65edf por dos filas de imágenes
(Pexels, locales en /uploads/aai-carousel) que se desplazan en direcciones
opuestas (ver qa-carousel.js). Un velo navy de marca las atenúa para que el
titular y el CTA sigan legibles.
⚠️ Stackable fuerza `position:relative; z-index:3` en los hijos directos de
un bloque con `stk--has-background-overlay`. Por eso el carrusel y el velo
necesitan `position:absolute !important` (con 2 clases de especificidad) y su
z-index explícito; así el carrusel queda de fondo (z0), el velo encima (z1) y
el contenido de Stackable sigue en z3.
========================================================================== */
.stk-6c65edf.stk-block-background {
background-image: none !important;
background-color: #16211c !important;
min-height: 340px;
}
/* --- Carrusel (fondo full-bleed) ------------------------------------------ */
.stk-6c65edf .aai-qa-carousel {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 0 !important;
overflow: hidden;
border-radius: inherit;
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px 0;
}
.aai-qa-row {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.aai-qa-track {
display: flex;
gap: 14px;
height: 100%;
width: max-content;
will-change: transform;
}
.aai-qa-row-a .aai-qa-track {
animation: aai-qa-left 40s linear infinite;
}
.aai-qa-row-b .aai-qa-track {
animation: aai-qa-right 48s linear infinite;
}
.aai-qa-carousel.aai-qa-paused .aai-qa-track {
animation-play-state: paused;
}
.aai-qa-img {
flex: 0 0 auto;
height: 100%;
width: auto;
aspect-ratio: 540 / 350;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
@keyframes aai-qa-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes aai-qa-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* --- Velo de marca (legibilidad) + oscurecido en bordes (efecto infinito) -- */
.stk-6c65edf .aai-qa-veil {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1 !important;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(90deg,
rgba(22, 33, 28, 0.92) 0%,
rgba(22, 33, 28, 0.5) 22%,
rgba(22, 33, 28, 0.46) 78%,
rgba(22, 33, 28, 0.92) 100%),
linear-gradient(0deg, rgba(0, 212, 126, 0.16), rgba(22, 33, 28, 0.12));
}
/* --- Titular: card más opaca y esmerilada para máxima legibilidad --------- */
.stk-df5dd24.stk-block-background {
background-color: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.stk-df5dd24.stk-block-background::before {
background-color: rgba(255, 255, 255, 0.92) !important;
}
/* --- Móvil: sección algo más compacta ------------------------------------- */
@media screen and (max-width: 767px) {
.stk-6c65edf.stk-block-background {
min-height: 300px;
}
}
/* --- Fix tablet (690–1199px): titular y botón "Contáctanos ahora" se
superponían ------------------------------------------------------------
La fila `.stk-6c65edf-column` reparte titular (flex-basis 70%) + botón
lado a lado. El botón vive en una columna de solo ~159px en ese rango —
más angosta que su propio ancho (~187px) — así que desborda hacia la
izquierda y queda encima del texto (overlap medido con Playwright: 49px
a 690px, 19px a 800px, recién 0px desde ~900px). Se apilan en 1 columna
en el mismo tramo que ya usan las demás secciones de esta página.
2026-07-06: techo subido de 1023 a 1199 — el rango lado-a-lado que
arrancaba en 1024px volvía a quedar apretado: a 1024px el botón
"Contáctanos ahora" se partía en 2 líneas y quedaba pegado al titular
(gap medido de solo 24px, columnas con column-gap:0). Verificado que a
partir de 1200px el lado-a-lado ya tiene espacio holgado (gap 67px+) —
se apila hasta justo antes de ese punto. Sin cambios en ≥1200px ni en
<690px (regla movil aparte). */
@media (min-width: 690px) and (max-width: 1199px) {
.stk-6c65edf-column {
flex-direction: column !important;
align-items: flex-start !important;
}
.stk-6c65edf-column .stk-fc8f9a4 {
margin-top: 20px;
}
}
/* --- Movimiento reducido: carrusel estático (sigue mostrando las imágenes) - */
@media (prefers-reduced-motion: reduce) {
.aai-qa-track {
animation: none !important;
}
}
/* ==========================================================================
31) Home · "Un poco más acerca de AetherAI" — REDISEÑO Bento Grid
----------------------------------------------------------------------------
Dirección de ui-ux-pro-max: estilo "Bento Box Grid" (modular, Apple-style,
cards de tamaños variados, esquinas 22px, sombras suaves, hover lift) +
patrón "Trust & Authority" (stats/proof, acento solo en 1 tile) + motion
scroll-reveal con stagger. Fondo limpio (§26). Lectura ligera por bloques.
El bento lo arma about-bento.js moviendo el contenido real a los tiles.
========================================================================== */
/* Eyebrow sobre el titular */
.aai-about-eyebrow {
display: flex; align-items: center; justify-content: center; gap: 9px;
font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 12px;
letter-spacing: 0.22em; text-transform: uppercase; color: #00a862; margin: 0 0 12px;
}
.aai-about-eyebrow .aai-ey-dot {
width: 7px; height: 7px; border-radius: 50%; background: #00d47e;
box-shadow: 0 0 0 4px rgba(0, 212, 126, 0.16);
}
.stk-54b4a8d .stk-block-heading__text, .stk-54b4a8d { letter-spacing: -0.02em !important; }
/* Eyebrow + titular corridos a la izquierda (solo desktop, donde vive el
globo): el usuario reportó que el navy del globo chocaba visualmente con
el titular al agrandarlo. No es un recorte — es texto navy sobre fondo
navy, ilegible donde se solapan (confirmado con captura de cerca).
⚠️ Ojo #1: .stk-024cfe0-inner-blocks (el padre compartido de ambos)
TAMBIÉN envuelve todo el bento entero (about-bento.js inserta el grid
como hermano ahí mismo) — moverlo a él corría TODA la sección, no solo
el título. Se apunta cada elemento por separado en su lugar.
⚠️ Ojo #2: -48px no alcanzaba — con el globo en 1400px (right:-650px), el
borde visible izquierdo del círculo cae ~816px desde el borde derecho de
viewports anchos, mucho más adentro de lo que -48px lograba despejar.
Calculado para que el texto quede claro del círculo en cada nivel de
tamaño del globo (ver §26: 1400px ≥1400px viewport, 900px en el tramo
900–1400px). */
@media (min-width: 1401px) {
.aai-about-eyebrow, .stk-54b4a8d { transform: translateX(-220px); }
}
@media (min-width: 900px) and (max-width: 1400px) {
.aai-about-eyebrow, .stk-54b4a8d { transform: translateX(-160px); }
}
/* --- Grid bento ----------------------------------------------------------- */
.aai-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
gap: 16px;
max-width: 1140px;
margin: 6px auto 0;
grid-template-areas:
"story story stat1 stat2"
"story story image image"
"quote quote quote stat3"
"svc svc svc svc";
}
/* --- Tile base ------------------------------------------------------------ */
.aai-bt {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(35, 38, 67, 0.06);
border-radius: 22px;
padding: 26px 28px;
box-shadow: 0 12px 30px -20px rgba(35, 38, 67, 0.22);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease;
}
/* Hover lift: sombra en VERDE de marca (antes navy plano que leía gris) +
una capa navy tenue como base de profundidad realista, y borde verde sutil.
⚠️ La regla de reveal `.aai-bento.in .aai-bt` (0,3,0) es más específica que un
`.aai-bt:hover` (0,2,0) y fijaba transform:translateY(0) → el lift NO ocurría.
Se sube la especificidad del hover a `.aai-bento.in .aai-bt:hover` (0,4,0)
para que el translateY(-4px) gane; se deja `.aai-bt:hover` como fallback. */
.aai-bento.in .aai-bt:hover,
.aai-bt:hover {
transform: translateY(-4px);
border-color: rgba(0, 212, 126, 0.38);
box-shadow:
0 22px 42px -22px rgba(0, 212, 126, 0.55),
0 8px 20px -16px rgba(35, 38, 67, 0.22);
}
/* Reveal con stagger */
.aai-bento .aai-bt { opacity: 0; transform: translateY(18px); }
.aai-bento.in .aai-bt {
opacity: 1; transform: translateY(0);
transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.aai-bento.in .aai-bt:nth-child(1) { transition-delay: 0.02s; }
.aai-bento.in .aai-bt:nth-child(2) { transition-delay: 0.08s; }
.aai-bento.in .aai-bt:nth-child(3) { transition-delay: 0.14s; }
.aai-bento.in .aai-bt:nth-child(4) { transition-delay: 0.20s; }
.aai-bento.in .aai-bt:nth-child(5) { transition-delay: 0.26s; }
.aai-bento.in .aai-bt:nth-child(6) { transition-delay: 0.32s; }
.aai-bento.in .aai-bt:nth-child(7) { transition-delay: 0.38s; }
/* --- Story (2x2) ---------------------------------------------------------- */
.aai-bt-story { grid-area: story; display: flex; flex-direction: column; padding: 30px 32px; }
.aai-bt-kicker {
font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: #00a862; margin-bottom: 14px;
}
.aai-bt-story .stk-eb3bf86 .stk-block-text__text,
.aai-bt-story .stk-block-text__text {
font-size: 15px !important; line-height: 1.66 !important; color: #2b2f47 !important;
}
/* Misión: acento fino en vez de caja */
.aai-bt-story .aai-story-body > p {
background: transparent !important; border: 0 !important;
border-left: 3px solid #00d47e !important; border-radius: 0 !important;
box-shadow: none !important; padding: 2px 0 2px 15px !important;
margin: 18px 0 0 !important; font-size: 14px !important;
}
.aai-bt-story .aai-colombia {
margin-top: auto !important; padding-top: 18px !important;
font-size: 13px !important; color: #5a5f78 !important; text-align: left !important;
}
/* --- Stat tiles ----------------------------------------------------------- */
.aai-bt-stat { display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.aai-bt-stat .num {
font-family: "Poppins", "Inter", sans-serif; font-weight: 700;
font-size: clamp(2.4rem, 3.4vw, 3.1rem); line-height: 1; letter-spacing: -0.02em;
color: #232643; font-variant-numeric: tabular-nums;
}
.aai-bt-stat .num b { font-weight: 700; color: #00a862; }
.aai-bt-stat .lbl {
margin-top: 12px; font-family: "Inter", system-ui, sans-serif; font-size: 13px;
line-height: 1.45; color: #4a4f68; max-width: 24ch;
}
.aai-bt-stat::after {
content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
background: linear-gradient(180deg, #00d47e, rgba(0, 212, 126, 0.12));
}
/* --- Image tile ----------------------------------------------------------- */
.aai-bt-image { grid-area: image; padding: 0; margin: 0; min-height: 180px; }
.aai-bt-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aai-bt-image::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(35, 38, 67, 0.55) 100%);
}
.aai-bt-image .aai-img-tag {
position: absolute; left: 16px; bottom: 14px; z-index: 1;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px; border-radius: 999px;
background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
font-family: "Inter", system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff;
}
.aai-bt-image .aai-img-tag::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: #00d47e;
}
/* --- Quote tile (acento navy) --------------------------------------------- */
.aai-bt-quote { grid-area: quote; background: #232643; border-color: transparent; }
.aai-bt-quote::before {
content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px;
border-radius: 50%; background: radial-gradient(circle, rgba(0, 212, 126, 0.22), transparent 70%);
}
/* La card interna del blockquote se vuelve transparente → el navy del tile se
ve y TODO el texto va blanco (evita blanco-sobre-blanco en las negritas). */
.aai-bt-quote .stk-block-blockquote,
.aai-bt-quote .stk-3f4f31b-container,
.aai-bt-quote .stk-block-text__text {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.aai-bt-quote .stk-3f4f31b-container { padding: 4px 2px !important; }
/* 3 clases para vencer el