, `nth-of-type` solo ve las celdas.
Tablero real: se sombrea cuando fila+columna son de la misma paridad —
en 2 columnas toca 1,4,5,8; en 4 columnas, 1,3,6,8. */
.tools-cell:nth-of-type(4n + 1),
.tools-cell:nth-of-type(4n + 4) { background: var(--surface-2); }
@media (min-width: 768px) {
.tools-cell:nth-of-type(4n + 4) { background: hsl(var(--background)); }
.tools-cell:nth-of-type(8n + 1),
.tools-cell:nth-of-type(8n + 3),
.tools-cell:nth-of-type(8n + 6),
.tools-cell:nth-of-type(8n + 8) { background: var(--surface-2); }
}
/* Última columna y última fila: ese lado ya lo dibuja el borde del bloque o la
regla de ancho de pantalla. */
.tools-cell:nth-of-type(2n) { border-right: 0; }
.tools-cell:nth-last-of-type(-n + 2) { border-bottom: 0; }
@media (min-width: 768px) {
.tools-cell { border-right: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.tools-cell:nth-of-type(4n) { border-right: 0; }
.tools-cell:nth-last-of-type(-n + 4) { border-bottom: 0; }
}
/* Color de MARCA de cada logo (hex oficiales de Simple Icons). Los glifos son
de un solo color, así que basta con teñir el `currentColor` de la celda.
En oscuro se les mezcla un 22% de blanco: hay marcas (Odoo, Wix) que sobre
fondo negro caían por debajo del contraste legible. */
.tools-cell--mercadopago { --tools-tint: #00B1EA; }
.tools-cell--googlecalendar { --tools-tint: #4285F4; }
.tools-cell--wix { --tools-tint: #0C6EFC; }
.tools-cell--claude { --tools-tint: #D97757; }
.tools-cell--n8n { --tools-tint: #EA4B71; }
.tools-cell--odoo { --tools-tint: #714B67; }
.tools-cell--zoho { --tools-tint: #E42527; }
html.dark .tools-cell { --tools-tint: color-mix(in srgb, var(--tools-tint-base, currentColor) 78%, #fff); }
html.dark .tools-cell--mercadopago { --tools-tint: color-mix(in srgb, #00B1EA 78%, #fff); }
html.dark .tools-cell--googlecalendar { --tools-tint: color-mix(in srgb, #4285F4 78%, #fff); }
html.dark .tools-cell--wix { --tools-tint: color-mix(in srgb, #0C6EFC 70%, #fff); }
html.dark .tools-cell--claude { --tools-tint: color-mix(in srgb, #D97757 85%, #fff); }
html.dark .tools-cell--n8n { --tools-tint: color-mix(in srgb, #EA4B71 85%, #fff); }
/* n8n conserva el fondo base en oscuro: su icono ya aporta el único acento de la celda. */
html.dark .tools-cell--n8n { background: hsl(var(--background)); }
html.dark .tools-cell--odoo { --tools-tint: color-mix(in srgb, #714B67 55%, #fff); }
html.dark .tools-cell--zoho { --tools-tint: color-mix(in srgb, #E42527 80%, #fff); }
.tools-logo {
width: auto;
height: 1.75rem;
color: var(--tools-tint, hsl(var(--foreground)));
fill: currentColor;
pointer-events: none;
user-select: none;
}
@media (min-width: 768px) { .tools-logo { height: 2rem; } }
/* Los que son PALABRA dentro del cuadro de 24×24 (Mercado Pago, Zoho, Odoo,
n8n) salen diminutos a la misma altura que los que son símbolo: se les da
más caja para que todos pesen parecido en la rejilla. */
.tools-logo--wide { height: 2.5rem; }
@media (min-width: 768px) { .tools-logo--wide { height: 3rem; } }
/* Lovable trae su propio degradado dentro del SVG (es su logo oficial), así
que no se le aplica tinte ni `fill: currentColor`. */
.tools-logo--lovable { fill: none; height: 2rem; }
@media (min-width: 768px) { .tools-logo--lovable { height: 2.25rem; } }
/* Cruces en las intersecciones interiores (solo en 4 columnas: en 2 caerían
sobre el borde del bloque). */
.tools-plus {
position: absolute;
z-index: 1;
display: none;
width: 1.5rem;
height: 1.5rem;
color: hsl(var(--foreground) / 0.35);
stroke-linecap: round;
pointer-events: none;
}
@media (min-width: 768px) {
.tools-plus { display: block; top: calc(50% - 0.75rem); }
.tools-plus--a { left: calc(25% - 0.75rem); }
.tools-plus--b { left: calc(50% - 0.75rem); }
.tools-plus--c { left: calc(75% - 0.75rem); }
}
/* Cada logo entra por su cuenta: el índice de hermano lo pone home.js, así que
la rejilla se llena de izquierda a derecha. */
.tools-grid { --reveal-step: 0.07s; }
/* Exi ESCONDIDO detrás de la primera tarjeta de #features. Vive dentro de la
rejilla y sube por encima del borde superior de la tarjeta; la tarjeta es
opaca y va por delante (z-index), así que solo asoma la coronilla con los
ojos. */
.statement-grid { position: relative; }
.statement-grid > .statement-feature { position: relative; z-index: 1; }
.features-peek {
position: absolute;
top: 0;
left: 1.5rem;
width: 8.5rem;
z-index: 0;
pointer-events: none;
/* Lleva `reveal` solo para que home.js le ponga `is-in` al llegar: el gesto
de entrada es el asomo del bot, no el del marco. */
--reveal-y: 0px;
--reveal-blur: 0px;
}
@media (min-width: 768px) { .features-peek { left: 3rem; width: 10rem; } }
@media (min-width: 1024px) { .features-peek { width: 13rem; } }
.features-peek__frame { position: relative; }
.features-peek__bot {
display: block;
width: 100%;
height: auto;
/* Escondido del todo: baja hasta quedar íntegro detrás de la tarjeta. */
transform: translateY(0%);
/* Invisible del todo los primeros 5 s tras llegar a la sección (así no se
ve ni un pedazo al entrar scrolleando); a los 5 s aparece de golpe aún
escondido y al segundo 6 empieza a asomar. */
opacity: 0;
transition: opacity 0s linear 5s, transform 1.15s var(--ease-reveal) 6s;
}
/* Asomado: saca la coronilla y los ojos por encima del borde de la tarjeta. */
.features-peek.is-in .features-peek__bot { opacity: 1; transform: translateY(-62%); }
/* El trozo que asoma se puede clickear (el marco sigue inerte): un clic lo
esconde dejando solo un pedacito de la cabeza y otro clic lo vuelve a asomar.
Tras el primer clic ya no hay espera: la demora de 6 s era solo la entrada. */
.features-peek__bot { pointer-events: auto; cursor: pointer; }
.features-peek.is-toggled .features-peek__bot { transition-delay: 0s; }
.features-peek.is-in.is-hiding .features-peek__bot { transform: translateY(-27%); }
@media (prefers-reduced-motion: reduce) {
.features-peek__bot { opacity: 1; transform: translateY(-62%); transition: none; }
.features-peek.is-in.is-hiding .features-peek__bot { transform: translateY(-27%); }
}
/* ==========================================================================
FEATURES — cabecera + 4 tarjetas con escenario estático
========================================================================== */
.statement-features__wrap { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .statement-features__wrap { gap: 3.5rem; } }
.statement-feature { display: flex; flex-direction: column; overflow: hidden; }
.statement-feature__body {
font-size: 1rem;
line-height: 1.625;
color: hsl(var(--secondary));
text-wrap: pretty;
}
.statement-figure { margin-top: auto; padding-top: 2rem; }
/* ---------- Escena de cada bloque ----------
Fondo: FOTO de paisaje desenfocada (filter: blur sobre la
![]()
, no
backdrop-filter) + velo plano del color de la tarjeta para que los
elementos encima se lean. Encima van elementos de REFERENCIA dibujados en
CSS (esqueletos, píldoras, chips), nunca capturas de la app.
Las fotos viven en public/landing-shots/paisaje-N.jpg (≈1200×800). */
.statement-scene {
position: relative;
width: 100%;
max-width: 540px;
height: 190px;
margin: 0 auto;
overflow: hidden;
border-radius: 0.875rem;
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.1);
font-size: 11px;
line-height: 1;
color: hsl(var(--foreground));
}
@media (min-width: 640px) { .statement-scene { height: 230px; } }
.statement-scene__bg {
position: absolute;
inset: -6%;
width: 112%;
height: 112%;
object-fit: cover;
/* El paisaje establece el contexto visual sin competir con el panel. El
desenfoque vive en la imagen —nunca en una capa de backdrop— para que la
interfaz permanezca limpia y legible. */
visibility: visible;
filter: blur(12px) saturate(.82) brightness(.56);
transform: scale(1.1);
}
.statement-scene__veil {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
html.dark .statement-scene__veil { background: color-mix(in srgb, var(--surface-2) 76%, transparent); }
/* Panel blanco/negro plano sobre la foto (misma piel que .mock) */
.statement-page,
.statement-versions,
.statement-inbox,
.statement-cal,
.statement-results,
.statement-rank,
.statement-card-pay,
.statement-flow {
position: absolute;
z-index: 2;
background: hsl(var(--background));
border-radius: 10px;
box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.1);
}
/* Línea esqueleto: ancho por --w */
.statement-page__hero b,
.statement-page__nav span,
.statement-page__cols span,
.statement-results span:not(.statement-results__url) {
display: block;
height: 4px;
border-radius: 9999px;
background: hsl(var(--foreground) / 0.12);
}
/* Píldora de estado (turquesa por defecto) */
.statement-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 6px;
border-radius: 9999px;
background: color-mix(in srgb, hsl(var(--accent)) 16%, hsl(var(--background)));
color: color-mix(in srgb, hsl(var(--accent)) 55%, hsl(var(--foreground)));
font-size: 10px;
font-weight: 500;
white-space: nowrap;
}
.statement-tag__dot { display: block; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--accent)); }
.statement-tag--ok {
background: color-mix(in srgb, hsl(var(--success)) 16%, hsl(var(--background)));
color: color-mix(in srgb, hsl(var(--success)) 45%, hsl(var(--foreground)));
}
.statement-tag--ok .statement-tag__dot { background: hsl(var(--success)); }
/* Burbuja de Exi: qué pidió el usuario / qué avisa Exi */
.statement-ask {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 78%;
padding: 7px 11px 7px 9px;
border-radius: 9999px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
.statement-ask .statement-mark { color: hsl(var(--accent)); }
/* Cursor "You" (flecha lucide + etiqueta) */
.statement-cursor {
position: absolute;
z-index: 4;
display: flex;
flex-direction: column;
align-items: flex-start;
color: hsl(var(--foreground));
}
.statement-cursor svg { display: block; }
.statement-cursor__tag {
margin: -3px 0 0 9px;
padding: 1px 5px;
border-radius: 9999px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 9px;
line-height: 12px;
white-space: nowrap;
}
/* Mini-avatar de Exi (símbolo local; ojos huecos = se ve el fondo) */
.statement-mark { display: block; flex: none; }
/* ---------- 1 · Página con sección seleccionada + versiones ---------- */
.statement-page { top: 22px; left: 6%; width: 58%; padding: 8px; }
.statement-page__nav { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.statement-page__nav i { display: block; width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--accent)); }
.statement-page__nav b { font-size: 8px; font-weight: 600; }
.statement-page__nav span { width: 16px; height: 3px; }
.statement-page__nav span:first-of-type { margin-left: auto; }
.statement-page__nav em { display: block; width: 26px; height: 9px; border-radius: 9999px; background: hsl(var(--primary)); }
.statement-page__hero { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 12px; border-radius: 6px; }
.statement-page__hero b { width: var(--w); height: 6px; background: hsl(var(--foreground) / 0.22); }
.statement-page__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.statement-page__hero em { display: block; width: 44%; height: 28px; border-radius: 4px; background: hsl(var(--accent) / 0.35); }
.statement-page__btn { display: block; width: 34px; height: 10px; border-radius: 9999px; background: hsl(var(--primary)); }
.statement-page__sel { box-shadow: 0 0 0 1.5px hsl(var(--accent)); }
.statement-page__sel .statement-tag { position: absolute; top: -10px; right: 8px; }
.statement-page__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.statement-page__cols span { height: 22px; border-radius: 4px; }
.statement-page__foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 6px; border-top: 1px solid hsl(var(--foreground) / 0.08); }
.statement-page__foot span { display: block; width: var(--w); height: 3px; border-radius: 9999px; background: hsl(var(--foreground) / 0.12); }
.statement-versions { top: 22px; right: 6%; width: 28%; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; font-size: 9.5px; }
.statement-versions strong { font-size: 10px; font-weight: 600; margin-bottom: 2px; }
.statement-versions span { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; color: hsl(var(--foreground) / 0.75); white-space: nowrap; }
.statement-versions span i { display: block; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--foreground) / 0.2); }
.statement-versions span.is-on { background: hsl(var(--accent) / 0.14); color: hsl(var(--foreground)); }
.statement-versions span.is-on i { background: hsl(var(--accent)); }
.statement-versions em { font-style: normal; color: hsl(var(--foreground) / 0.5); }
.statement-ask--ui {
left: 6%;
bottom: 14px;
max-width: 66%;
padding: 8px 11px;
border-radius: 13px 13px 13px 4px;
background: var(--surface-3);
box-shadow: 0 0 0 1px hsl(var(--foreground) / .1);
color: hsl(var(--foreground));
}
.statement-cursor--ui { top: 34%; left: 44%; }
/* ---------- 2 · Bandeja + agenda ---------- */
.statement-inbox { top: 22px; left: 5%; width: 50%; padding: 8px 8px 6px; }
.statement-inbox__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.statement-inbox__head strong { font-size: 10.5px; font-weight: 600; }
.statement-inbox ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.statement-inbox li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; padding: 4px 5px; border-radius: 6px; }
.statement-inbox li.is-new { background: hsl(var(--accent) / 0.12); }
.statement-inbox li i { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 9999px; background: var(--surface-3); font-style: normal; font-size: 8px; font-weight: 600; }
.statement-inbox li > span { display: flex; flex-direction: column; min-width: 0; }
.statement-inbox li b { font-size: 9.5px; font-weight: 600; }
.statement-inbox li small { font-size: 8.5px; color: hsl(var(--foreground) / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statement-inbox li time { font-size: 8px; color: hsl(var(--foreground) / 0.5); }
.statement-cal { top: 22px; right: 5%; width: 38%; padding: 9px 10px; }
.statement-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 10px; font-weight: 600; }
.statement-cal__head i { display: block; width: 22px; height: 4px; border-radius: 9999px; background: hsl(var(--foreground) / 0.12); }
.statement-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.statement-cal__grid i { position: relative; display: block; aspect-ratio: 1; border-radius: 9999px; background: hsl(var(--foreground) / 0.08); }
.statement-cal__grid i.is-dot::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 3px; height: 3px; border-radius: 9999px; background: hsl(var(--accent)); transform: translateX(-50%); }
.statement-cal__grid i.is-day { background: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 3px hsl(var(--accent)); }
.statement-cal__slot { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 8.5px; color: hsl(var(--foreground) / 0.75); white-space: nowrap; }
.statement-ask--forms { left: 50%; bottom: 14px; transform: translateX(-50%); }
/* ---------- 3 · Búsqueda + resultados + visitas ---------- */
.statement-search { position: absolute; z-index: 2; top: 22px; left: 5%; display: inline-flex; align-items: center; gap: 6px; width: 54%; height: 24px; padding: 0 10px; border-radius: 9999px; background: hsl(var(--background)); box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.12); color: hsl(var(--foreground) / 0.8); font-size: 10px; white-space: nowrap; }
.statement-results { top: 54px; left: 5%; width: 54%; margin: 0; padding: 5px 7px; list-style: none; }
.statement-results li { position: relative; display: grid; grid-template-columns: 14px 1fr; column-gap: 6px; row-gap: 3px; align-items: center; padding: 4px 4px; border-radius: 6px; }
.statement-results li b { grid-row: span 3; align-self: start; font-size: 9px; font-weight: 500; color: hsl(var(--foreground) / 0.45); }
.statement-results__url { display: block; width: auto; height: auto; background: none; font-size: 8px; color: hsl(var(--foreground) / 0.5); }
.statement-results li span:not(.statement-results__url) { width: var(--w); }
.statement-results li span:nth-of-type(2) { height: 5px; background: hsl(var(--foreground) / 0.25); }
.statement-results li.is-you { background: color-mix(in srgb, hsl(var(--accent)) 12%, hsl(var(--background))); }
.statement-results li.is-you b, .statement-results li.is-you .statement-results__url { color: hsl(var(--accent)); }
.statement-results li em { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 8.5px; font-weight: 500; color: color-mix(in srgb, hsl(var(--accent)) 55%, hsl(var(--foreground))); }
.statement-rank { top: 22px; right: 5%; display: flex; flex-direction: column; gap: 6px; width: 34%; padding: 8px 9px; }
.statement-rank__head { display: flex; justify-content: space-between; font-size: 9px; color: hsl(var(--foreground) / 0.6); }
.statement-rank__head b { color: hsl(var(--success)); font-weight: 600; }
.statement-rank__bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.statement-rank__bars i { display: block; flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: hsl(var(--foreground) / 0.14); }
.statement-rank__bars i:last-child { background: hsl(var(--accent)); }
.statement-rank__kw { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px 0 0; border-top: 1px solid hsl(var(--foreground) / 0.08); list-style: none; font-size: 8.5px; }
.statement-rank__kw li { display: flex; justify-content: space-between; color: hsl(var(--foreground) / 0.75); white-space: nowrap; }
.statement-rank__kw b { font-weight: 600; }
.statement-ask--seo { right: 5%; bottom: 14px; }
/* ---------- 4 · Tarjeta de pago + flujo + avisos ---------- */
.statement-card-pay { top: 22px; left: 5%; display: flex; flex-direction: column; gap: 7px; width: 38%; padding: 11px 12px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.statement-card-pay__top { display: flex; align-items: center; justify-content: space-between; }
.statement-card-pay__top em { font-style: normal; font-size: 9px; font-weight: 600; opacity: 0.8; }
.statement-card-pay__chip { display: block; width: 22px; height: 16px; border-radius: 4px; background: hsl(var(--warning)); }
.statement-card-pay__num { font-size: 11px; letter-spacing: 1px; }
.statement-card-pay__row { display: flex; justify-content: space-between; font-size: 9px; opacity: 0.85; }
.statement-card-pay__row b { font-weight: 600; opacity: 1; }
.statement-card-pay .statement-tag { align-self: flex-start; }
.statement-flow { top: 22px; right: 5%; display: flex; flex-direction: column; width: 50%; margin: 0; padding: 6px 10px; list-style: none; }
.statement-flow li { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 9.5px; white-space: nowrap; }
.statement-flow li i { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 9999px; background: hsl(var(--foreground) / 0.18); color: transparent; box-shadow: 0 0 0 2px hsl(var(--background)); }
.statement-flow li.is-done i { background: hsl(var(--success)); color: #fff; }
.statement-flow li + li::before { content: ""; position: absolute; top: -7px; left: 5.5px; width: 1px; height: 14px; background: hsl(var(--foreground) / 0.2); }
.statement-flow li span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.statement-flow li time { font-size: 8px; color: hsl(var(--foreground) / 0.5); }
.statement-toasts { position: absolute; z-index: 3; right: 5%; bottom: 14px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.statement-toast { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9999px; background: hsl(var(--background)); box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.1); font-size: 9px; white-space: nowrap; }
.statement-toast i { display: block; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--success)); }
.statement-ask--pay { left: 5%; bottom: 14px; }
@media (max-width: 400px) {
.statement-scene { font-size: 10px; }
.statement-ask { max-width: 88%; font-size: 10px; }
}
/* La actividad empieza al llegar a la sección: son señales del trabajo de Exi,
no movimiento continuo de decoración. */
/* Coreografía de cada bloque al entrar (`.is-in`): la foto respira muy
despacio, los paneles suben en cascada, luego la píldora de Exi. Después
cada escena repite UN gesto corto en bucle. Al pasar el ratón la foto se
aclara un poco y los paneles se levantan 2px: profundidad sin glow. */
.statement-scene__bg { transition: filter 600ms ease; }
.statement-page, .statement-versions, .statement-inbox, .statement-cal, .statement-search, .statement-results, .statement-rank, .statement-card-pay, .statement-flow, .statement-ask, .statement-toasts { transition: transform 500ms var(--ease-spring); }
@media (hover: hover) {
.statement-feature:hover .statement-scene__bg { filter: blur(9px) saturate(1); }
.statement-feature:hover :is(.statement-page, .statement-versions, .statement-inbox, .statement-cal, .statement-search, .statement-results, .statement-rank, .statement-card-pay, .statement-flow) { transform: translateY(-2px); }
.statement-feature:hover .statement-ask--forms { transform: translate(-50%, -2px); }
}
@media (prefers-reduced-motion: no-preference) {
.statement-feature.is-in .statement-scene__bg { animation: statement-drift 22s ease-in-out infinite alternate; }
/* Entrada en cascada: paneles → listas → Exi. */
.statement-feature.is-in :is(.statement-page, .statement-inbox, .statement-search, .statement-card-pay) { animation: statement-rise 700ms var(--ease-spring) both; }
.statement-feature.is-in :is(.statement-versions, .statement-cal, .statement-results, .statement-flow) { animation: statement-rise 700ms var(--ease-spring) 140ms both; }
.statement-feature.is-in .statement-rank { animation: statement-rise 700ms var(--ease-spring) 220ms both; }
.statement-feature.is-in .statement-ask { animation: statement-rise 600ms var(--ease-spring) 520ms both; }
.statement-feature.is-in .statement-ask--forms { animation-name: statement-rise-centered; }
.statement-feature.is-in :is(.statement-inbox li, .statement-results li, .statement-flow li, .statement-versions span) { animation: statement-rise 500ms var(--ease-spring) both; }
.statement-feature.is-in :is(.statement-inbox li, .statement-results li, .statement-flow li, .statement-versions span):nth-child(2) { animation-delay: 240ms; }
.statement-feature.is-in :is(.statement-inbox li, .statement-results li, .statement-flow li, .statement-versions span):nth-child(3) { animation-delay: 340ms; }
.statement-feature.is-in :is(.statement-inbox li, .statement-results li, .statement-flow li, .statement-versions span):nth-child(4) { animation-delay: 440ms; }
/* 1 · el cursor va a la portada, el título crece, la foto cambia, sube la versión */
.statement-feature.is-in .statement-cursor--ui { animation: statement-cursor-ui 5s var(--ease-spring) 800ms infinite; }
.statement-feature.is-in .statement-page__sel { animation: statement-select 5s var(--ease-spring) 800ms infinite; }
.statement-feature.is-in .statement-page__hero b:first-child { animation: statement-title 5s ease-in-out 800ms infinite; }
.statement-feature.is-in .statement-page__hero em { animation: statement-swap 5s ease-in-out 800ms infinite; }
.statement-feature.is-in .statement-versions span.is-on i { animation: statement-pulse 2.5s ease-in-out infinite; }
/* 2 · llega un mensaje nuevo, el día late */
.statement-feature.is-in .statement-inbox li.is-new { animation: statement-rise 500ms var(--ease-spring) both, statement-hl 4s ease-in-out 1s infinite; }
.statement-feature.is-in .statement-cal__grid i.is-day { animation: statement-pulse 3s ease-in-out infinite; }
/* 3 · barras crecen, el #1 pulsa, +38% late */
.statement-feature.is-in .statement-rank__bars i { transform-origin: bottom; animation: statement-bar 900ms var(--ease-spring) 400ms both; }
.statement-feature.is-in .statement-rank__bars i:nth-child(2) { animation-delay: 460ms; }
.statement-feature.is-in .statement-rank__bars i:nth-child(3) { animation-delay: 520ms; }
.statement-feature.is-in .statement-rank__bars i:nth-child(4) { animation-delay: 580ms; }
.statement-feature.is-in .statement-rank__bars i:nth-child(5) { animation-delay: 640ms; }
.statement-feature.is-in .statement-rank__bars i:nth-child(6) { animation-delay: 700ms; }
.statement-feature.is-in .statement-rank__bars i:nth-child(7) { animation-delay: 760ms; }
.statement-feature.is-in .statement-results li.is-you { animation: statement-rise 500ms var(--ease-spring) both, statement-hl 4s ease-in-out 900ms infinite; }
/* 4 · los pasos se completan en secuencia, los avisos entran uno tras otro */
.statement-feature.is-in .statement-flow li i { animation: statement-step 6s ease-in-out infinite; }
.statement-feature.is-in .statement-flow li:nth-child(2) i { animation-delay: 600ms; }
.statement-feature.is-in .statement-flow li:nth-child(3) i { animation-delay: 1200ms; }
.statement-feature.is-in .statement-flow li:nth-child(4) i { animation: none; }
.statement-feature.is-in .statement-toast { animation: statement-toast 6s var(--ease-spring) infinite; }
.statement-feature.is-in .statement-toast:nth-child(2) { animation-delay: 900ms; }
.statement-feature.is-in .statement-tag--ok .statement-tag__dot { animation: statement-pulse 2.2s ease-in-out 1500ms infinite; }
}
@keyframes statement-cursor-ui {
0%, 18%, 100% { transform: translate(0, 0); }
36%, 68% { transform: translate(-30px, -20px); }
}
@keyframes statement-select {
0%, 30% { box-shadow: 0 0 0 1.5px hsl(var(--accent) / 0.25); }
50%, 100% { box-shadow: 0 0 0 1.5px hsl(var(--accent)); }
}
@keyframes statement-pulse { 50% { transform: scale(1.25); } }
@keyframes statement-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, 1.5%); } }
@keyframes statement-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes statement-rise-centered { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes statement-swap { 0%, 40%, 100% { background: hsl(var(--accent) / 0.35); } 60%, 85% { background: hsl(var(--warning) / 0.45); } }
@keyframes statement-title { 0%, 40%, 100% { width: 58%; height: 6px; } 60%, 85% { width: 78%; height: 9px; } }
@keyframes statement-toast { 0%, 8% { opacity: 0; transform: translateY(10px); } 18%, 60% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes statement-hl { 0%, 100% { background: color-mix(in srgb, hsl(var(--accent)) 12%, hsl(var(--background))); } 50% { background: color-mix(in srgb, hsl(var(--accent)) 26%, hsl(var(--background))); } }
@keyframes statement-step { 0%, 10% { background: hsl(var(--foreground) / 0.18); } 25%, 100% { background: hsl(var(--success)); } }
@keyframes statement-bar { from { transform: scaleY(0.08); } }
@keyframes statement-message {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 03-use-cases-video.css */
/* ==========================================================================
Landing pública — sección 03: USE CASES (#use-cases) + VIDEO (#video)
Contrato: design-library/grokbot-reference/DESIGN-SYSTEM.md. Depende de
public/landing/base.css (.section .h2 .chip .btn .mock .reveal + tokens).
Solo selectores con prefijo `use-`. Mobile-first: 640px / 1024px.
========================================================================== */
/* --- Recorrido por scroll, con tres momentos como guía ------------------ */
.use-scroller { position: relative; }
.use-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.use-selector [aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--background)); }
.use-steps { display: none; }
/* --- Layout interno: texto del paso y ejemplo --------------------------- */
.use-wrap {
display: grid;
gap: 3rem;
grid-template-areas: "intro" "chat";
width: 100%;
max-width: var(--site-content-width);
margin-inline: auto;
padding-inline: 1rem;
}
.use-intro { grid-area: intro; }
.use-chat-col { grid-area: chat; }
.use-section [hidden] { display: none !important; }
@media (min-width: 640px) {
.use-wrap { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
.use-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "intro chat";
align-items: center;
column-gap: 4rem;
}
}
/* --- Intro: título + el texto del paso ---------------------------------- */
.use-intro {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
text-align: center;
}
@media (min-width: 1024px) {
.use-intro { align-items: flex-start; text-align: left; }
}
.use-panes { width: 100%; max-width: 30rem; display: grid; gap: 1.5rem; }
.use-pane {
font-size: 1rem;
line-height: 1.625;
color: hsl(var(--secondary));
text-wrap: pretty;
margin: 0;
}
.use-pane strong { font-weight: 500; color: hsl(var(--primary)); }
/* El
de cada paso ES el título de la sección (el h2 fijo se quedó en
sr-only), así que lleva el tamaño de .h2 del sistema. */
.use-pane strong { display: block; margin-bottom: 0.75rem; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 640px) { .use-pane strong { font-size: 2.25rem; line-height: 2.5rem; } }
.use-rail { display: none; }
.use-chat-col {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
/* Escenario plano con los tokens de la PÁGINA: una superficie más de la
landing, sigue el tema claro/oscuro como el resto. */
.use-stage {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 32rem;
min-height: 24rem;
margin: 0;
padding: 1rem;
border: 1px solid hsl(var(--border));
border-radius: 1.5rem;
background: hsl(var(--card));
color: hsl(var(--foreground));
font-size: 13px;
line-height: 1.4;
text-align: left;
}
.use-chat-col.is-changing .use-stage { animation: use-chat-change 520ms var(--ease-spring); }
.use-stage__head {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
height: 28px;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
}
.use-stage__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.use-stage__dots { display: flex; gap: 4px; }
.use-stage__dots i { display: block; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--foreground) / 0.14); }
.use-mark { display: block; flex: none; }
/* Una escena por paso: solo se pinta la que coincide con `data-use-scenario`.
Es puro CSS sobre el atributo que home.js ya movía, sin JS nuevo. */
.use-scene { display: none; flex: 1; flex-direction: column; gap: 14px; }
.use-chat-col[data-use-scenario="brief"] .use-scene[data-use-scene="brief"],
.use-chat-col[data-use-scenario="proposal"] .use-scene[data-use-scene="proposal"],
.use-chat-col[data-use-scenario="exi"] .use-scene[data-use-scene="exi"],
.use-chat-col[data-use-scenario="editor"] .use-scene[data-use-scene="editor"],
.use-chat-col[data-use-scenario="connect"] .use-scene[data-use-scene="connect"],
.use-chat-col[data-use-scenario="legal"] .use-scene[data-use-scene="legal"],
.use-chat-col[data-use-scenario="automations"] .use-scene[data-use-scene="automations"],
.use-chat-col[data-use-scenario="seo"] .use-scene[data-use-scene="seo"],
.use-chat-col[data-use-scenario="publish"] .use-scene[data-use-scene="publish"] {
display: flex;
}
/* Sin anclaje (móvil / sin JS) las 9 escenas van una debajo de otra. */
.use-scroller:not(.is-pinned) .use-scene { display: flex; }
.use-scroller:not(.is-pinned) .use-scene + .use-scene { padding-top: 14px; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 1024px) {
.use-scroller.is-pinned .use-sticky {
position: sticky;
top: var(--site-header-h);
display: flex;
align-items: center;
min-height: calc(100vh - var(--site-header-h));
min-height: calc(100dvh - var(--site-header-h));
}
.use-scroller.is-pinned .use-steps { display: block; margin-top: calc(-100vh + var(--site-header-h)); }
.use-scroller.is-pinned .use-step { height: 74vh; height: 74dvh; }
.use-scroller.is-pinned .use-pane { display: none; }
.use-scroller.is-pinned .use-pane.is-active { display: block; animation: use-rise 360ms var(--ease-spring); }
}
/* ---- Piezas comunes ---- */
.use-sk { display: block; width: var(--w, 60%); height: 4px; border-radius: 9999px; background: hsl(var(--foreground) / 0.12); }
.use-sk--title { height: 7px; background: hsl(var(--foreground) / 0.26); }
.use-field {
display: block;
height: 22px;
border-radius: 8px;
box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.14);
background: hsl(var(--background));
}
.use-field.is-text { display: flex; align-items: center; height: auto; min-height: 24px; padding: 4px 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-field.is-hl { box-shadow: inset 0 0 0 1.5px hsl(var(--accent)); }
.use-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 6px;
border-radius: 9999px;
background: color-mix(in srgb, hsl(var(--accent)) 16%, hsl(var(--background)));
color: color-mix(in srgb, hsl(var(--accent)) 55%, hsl(var(--foreground)));
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.use-tag i, .use-tag__dot { display: block; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--accent)); }
.use-tag--ok { background: color-mix(in srgb, hsl(var(--success)) 16%, hsl(var(--background))); color: color-mix(in srgb, hsl(var(--success)) 45%, hsl(var(--foreground))); }
.use-tag--ok i { background: hsl(var(--success)); }
.use-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 9999px; background: var(--surface-2); font-size: 10px; color: hsl(var(--foreground)); }
.use-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.use-btn--ghost { box-shadow: inset 0 0 0 1px hsl(var(--border)); color: hsl(var(--foreground)); }
.use-btn--go { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.use-btn--sm { height: 26px; padding: 0 10px; font-size: 11px; }
.use-btn--wide { align-self: stretch; margin-top: auto; }
.use-btn__check { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--success)); color: #fff; }
.use-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; background: hsl(var(--foreground)); }
.use-ok, .use-edit { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 9999px; }
.use-ok { background: color-mix(in srgb, hsl(var(--success)) 18%, hsl(var(--background))); color: hsl(var(--success)); }
.use-edit { background: color-mix(in srgb, hsl(var(--accent)) 18%, hsl(var(--background))); color: hsl(var(--accent)); }
.use-note { display: flex; align-items: center; gap: 8px; margin: auto 0 0; font-size: 12px; color: hsl(var(--secondary)); }
.use-note .use-mark { color: hsl(var(--accent)); }
/* Registro de actividad: hora + línea */
.use-log { display: flex; flex-direction: column; gap: 5px; margin: auto 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); list-style: none; font-size: 11px; }
.use-log li { display: flex; gap: 8px; align-items: baseline; color: hsl(var(--foreground) / 0.8); }
.use-log time { flex: none; font-variant-numeric: tabular-nums; color: hsl(var(--secondary)); }
.use-log li.is-live { color: hsl(var(--foreground)); }
.use-log li.is-live::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 9999px; background: hsl(var(--accent)); flex: none; align-self: center; }
/* Mini-página (se reutiliza en 1, 3 y 4) */
.use-mini__nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.use-mini__nav i { display: block; width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--accent)); }
.use-mini__nav span { display: block; width: 18px; height: 3px; border-radius: 9999px; background: hsl(var(--foreground) / 0.14); }
.use-mini__nav span:first-of-type { margin-left: auto; }
.use-mini__photo { display: block; height: 58px; border-radius: 8px; background: hsl(var(--accent) / 0.3); }
.use-mini__title { display: block; height: 9px; width: 70%; border-radius: 9999px; background: hsl(var(--foreground) / 0.26); }
.use-mini__cta { display: block; width: 44px; height: 12px; border-radius: 9999px; background: hsl(var(--primary)); }
.use-mini__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.use-mini__cards i { display: block; height: 24px; border-radius: 5px; background: hsl(var(--foreground) / 0.07); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.06); }
.use-swatches { display: flex; gap: 5px; }
.use-swatches i { display: block; width: 14px; height: 14px; border-radius: 9999px; background: hsl(var(--foreground) / 0.18); }
.use-swatches i.c2 { background: hsl(var(--warning) / 0.8); }
.use-swatches i.c3 { background: hsl(var(--color-breeze)); }
.use-swatches i.c4 { background: hsl(var(--foreground)); }
.use-swatches i.is-on { background: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 3px hsl(var(--accent)); }
/* ---- 1 · Prompt + divisor ---- */
.use-prompt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 16px; background: hsl(var(--background)); }
.use-prompt__bot { width: 26px; height: 26px; flex: none; }
.use-prompt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.use-prompt__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: hsl(var(--foreground)); }
.use-prompt__chips { display: flex; gap: 5px; }
.use-prompt__send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
@property --use-split { syntax: ""; inherits: true; initial-value: 46%; }
.use-split { position: relative; display: grid; grid-template-columns: var(--use-split, 46%) 1fr; flex: 1; min-height: 168px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background)); overflow: hidden; }
.use-split__form { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-right: 1px solid hsl(var(--border)); min-width: 0; overflow: hidden; }
.use-split__form small { margin-top: 3px; font-size: 9.5px; color: hsl(var(--foreground) / 0.6); white-space: nowrap; }
.use-radios { display: flex; gap: 4px; }
.use-radios i { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9999px; box-shadow: inset 0 0 0 1px hsl(var(--border)); font-style: normal; font-size: 10px; white-space: nowrap; }
.use-radios i.is-on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: none; }
.use-swatches--row i { width: 16px; height: 16px; }
.use-split__bar { position: absolute; top: 0; bottom: 0; left: var(--use-split, 46%); width: 0; display: flex; align-items: center; justify-content: center; }
.use-split__bar i { display: block; width: 14px; height: 30px; border-radius: 9999px; background: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--background)); }
.use-split__preview { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; }
/* ---- 2 · Propuesta ---- */
.use-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.use-doc__head strong { font-size: 13px; font-weight: 600; }
.use-doc { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.use-doc li { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.use-doc li b { font-size: 10px; font-weight: 500; color: hsl(var(--foreground) / 0.45); font-variant-numeric: tabular-nums; }
.use-doc__thumb { display: block; flex: none; width: 34px; height: 22px; border-radius: 4px; background: hsl(var(--foreground) / 0.08); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.06); }
.use-doc li:first-child .use-doc__thumb { background: hsl(var(--accent) / 0.3); }
.use-doc__txt { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; font-size: 12px; }
.use-doc__txt small { font-size: 10px; color: hsl(var(--secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-doc li.is-editing { box-shadow: inset 0 0 0 1.5px hsl(var(--accent)); }
.use-approve { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; }
.use-approve--tight { margin-top: 0; }
.use-approve__note { margin-right: auto; font-size: 11px; color: hsl(var(--secondary)); }
/* ---- 3 · Editar con Exi ---- */
.use-thread { display: flex; flex-direction: column; gap: 8px; }
.use-thread__cli { position: relative; align-self: flex-end; max-width: 84%; margin: 0; padding: 8px 10px 8px; border: 1px solid hsl(var(--border)); border-radius: 16px 16px 0 16px; background: var(--surface-2); font-size: 12.5px; line-height: 1.45; }
.use-thread__cli time { display: block; margin-top: 3px; text-align: right; font-size: 9px; color: hsl(var(--secondary)); }
.use-thread__exi { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.use-thread__exi .use-mark { color: hsl(var(--accent)); margin-top: 3px; }
.use-thread__status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 10.5px; color: hsl(var(--secondary)); }
.use-steps-dots { display: flex; gap: 3px; }
.use-steps-dots i { display: block; width: 14px; height: 4px; border-radius: 9999px; background: hsl(var(--foreground) / 0.14); }
.use-steps-dots i.is-on { background: hsl(var(--accent)); }
.use-mini { position: relative; flex: 1; padding: 10px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background)); }
.use-mini__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.use-mini__copy { display: flex; flex-direction: column; gap: 6px; }
.use-tag--float { position: absolute; right: 10px; top: 10px; }
/* ---- 4 · Editor Pro ---- */
.use-editor { display: grid; grid-template-columns: 74px 1fr 40%; flex: 1; min-height: 210px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background)); overflow: hidden; font-size: 10.5px; }
.use-editor__layers { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; border-right: 1px solid hsl(var(--border)); }
.use-editor__layers strong { font-size: 10px; margin-bottom: 4px; font-weight: 600; }
.use-editor__layers span { padding: 3px 6px; border-radius: 5px; color: hsl(var(--foreground) / 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-editor__layers span.is-sub { padding-left: 14px; }
.use-editor__layers span.is-on { background: hsl(var(--accent) / 0.16); color: hsl(var(--foreground)); }
.use-editor__canvas { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.use-editor__el { position: relative; display: block; height: 42px; border-radius: 6px; background: hsl(var(--accent) / 0.22); box-shadow: 0 0 0 1.5px hsl(var(--accent)); }
.use-editor__label { position: absolute; top: -9px; left: 0; padding: 1px 6px; border-radius: 4px; background: hsl(var(--accent)); color: #fff; font-size: 8.5px; font-weight: 500; white-space: nowrap; }
.use-editor__handle { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: hsl(var(--background)); box-shadow: 0 0 0 1.5px hsl(var(--accent)); }
.use-editor__handle--tl { top: -4px; left: -4px; } .use-editor__handle--tr { top: -4px; right: -4px; }
.use-editor__handle--bl { bottom: -4px; left: -4px; } .use-editor__handle--br { right: -4px; bottom: -4px; }
.use-editor__panel { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-left: 1px solid hsl(var(--border)); background: var(--surface-2); }
.use-editor__panel strong { margin-bottom: 4px; font-size: 11px; font-weight: 600; }
.use-editor__panel small { font-size: 9.5px; color: hsl(var(--foreground) / 0.6); }
.use-slider { position: relative; display: block; height: 4px; margin: 7px 30px 9px 0; border-radius: 9999px; background: hsl(var(--foreground) / 0.14); }
.use-slider__knob { position: absolute; top: 50%; left: var(--use-knob, 40%); width: 12px; height: 12px; border-radius: 9999px; background: hsl(var(--primary)); transform: translate(-50%, -50%); }
.use-slider__val { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.use-slider--b { --use-knob: 62%; }
.use-align { display: flex; gap: 4px; }
.use-align i { display: block; width: 20px; height: 16px; border-radius: 4px; background: hsl(var(--foreground) / 0.1); }
.use-align i.is-on { background: hsl(var(--primary)); }
.use-editor__save { display: flex; align-items: center; gap: 5px; margin-top: auto; font-size: 9.5px; color: hsl(var(--secondary)); }
.use-editor__save .use-tag__dot { background: hsl(var(--success)); }
/* ---- 5 · Conectar ---- */
.use-scene[data-use-scene="connect"], .use-scene[data-use-scene="automations"] { justify-content: space-between; }
.use-scene[data-use-scene="connect"] .use-log, .use-scene[data-use-scene="automations"] .use-log { margin-top: 0; }
.use-seg { display: inline-flex; align-self: center; padding: 2px; border-radius: 9999px; background: var(--surface-2); font-size: 12px; }
.use-seg > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px; color: hsl(var(--secondary)); }
.use-seg > span.is-on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 0 0 1px hsl(var(--border)); }
.use-seg .use-mark { color: hsl(var(--accent)); }
.use-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.use-tiles li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--border)); text-align: center; }
.use-tiles__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 9999px; background: var(--surface-2); color: hsl(var(--foreground)); }
.use-tiles li.is-on .use-tiles__ico { background: color-mix(in srgb, hsl(var(--success)) 16%, hsl(var(--background))); color: hsl(var(--success)); }
.use-tiles li > span { font-size: 12px; font-weight: 500; }
.use-tiles li small { font-size: 9.5px; color: hsl(var(--secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.use-tiles li em { margin-top: 4px; font-style: normal; font-size: 10px; color: hsl(var(--secondary)); }
.use-tiles li.is-on em { color: hsl(var(--success)); }
/* ---- 6 · Legales ---- */
/* `minmax(0, …)` y no `1fr` a secas: el mínimo de `1fr` es el contenido, así
que por debajo de ~330px las dos columnas dejaban de caber y empujaban el
ancho de la portada entera. */
.use-papers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; flex: 1; }
.use-paper { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.use-paper strong { font-size: 12px; font-weight: 600; }
.use-paper > small { font-size: 9.5px; color: hsl(var(--secondary)); margin: -3px 0 4px; }
.use-paper__foot { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; }
/* ---- 7 · Automatizaciones ---- */
.use-recipes { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.use-recipes li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.use-recipes__flow { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; font-size: 11.5px; }
.use-recipes__flow b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-recipes__flow i { position: relative; display: block; flex: none; width: 14px; height: 1px; background: hsl(var(--foreground) / 0.3); }
.use-recipes__flow i::after { content: ""; position: absolute; right: -1px; top: -2.5px; width: 5px; height: 5px; border-top: 1px solid hsl(var(--foreground) / 0.3); border-right: 1px solid hsl(var(--foreground) / 0.3); transform: rotate(45deg); }
.use-recipes li > small { flex: none; font-size: 9.5px; color: hsl(var(--secondary)); white-space: nowrap; }
.use-toggle { position: relative; display: block; flex: none; width: 30px; height: 18px; border-radius: 9999px; background: hsl(var(--foreground) / 0.18); }
.use-toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 9999px; background: hsl(var(--background)); }
.use-recipes li.is-on .use-toggle { background: hsl(var(--success)); }
.use-recipes li.is-on .use-toggle i { left: 14px; }
/* ---- 8 · SEO ---- */
.use-seo { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.use-score { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; }
.use-score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.use-score__track { fill: none; stroke: hsl(var(--foreground) / 0.1); stroke-width: 4; }
.use-score__arc { fill: none; stroke: hsl(var(--accent)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 15; }
.use-score b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.use-score small { font-size: 9px; color: hsl(var(--secondary)); margin-top: 2px; }
.use-kw { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 11px; }
.use-kw li { display: grid; grid-template-columns: 1fr 26px 34px; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid hsl(var(--border)); }
.use-kw li:last-child { border-bottom: 0; }
.use-kw__head { font-size: 9.5px; color: hsl(var(--secondary)); }
.use-kw__head span:last-child { grid-column: 2 / 4; }
.use-kw b { font-weight: 600; font-variant-numeric: tabular-nums; }
.use-kw em { font-style: normal; font-size: 9.5px; color: hsl(var(--secondary)); }
.use-kw em.is-up { color: hsl(var(--success)); }
.use-checks, .use-dns { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.use-checks li, .use-dns li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--border)); font-size: 11.5px; }
.use-checks li i, .use-dns li i { display: inline-flex; flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 9999px; box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.2); color: transparent; }
.use-checks li.is-done i, .use-dns li.is-done i { background: hsl(var(--success)); box-shadow: none; color: #fff; }
.use-checks li.is-doing, .use-dns li.is-doing { box-shadow: inset 0 0 0 1.5px hsl(var(--accent)); }
.use-checks li.is-doing i, .use-dns li.is-doing i { box-shadow: inset 0 0 0 1.5px hsl(var(--accent)); }
.use-checks li > span { flex: 1; min-width: 0; }
.use-checks li em { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
/* ---- 9 · Dominio + publicar ---- */
.use-domain { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 8px 0 12px; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--background)); font-size: 13px; }
.use-domain__www { color: hsl(var(--secondary)); }
.use-domain__name { flex: 1; font-weight: 500; }
.use-alts { display: flex; flex-direction: column; gap: 2px; margin: -6px 0 0; padding: 0 12px; list-style: none; font-size: 11px; }
.use-alts li { display: flex; justify-content: space-between; color: hsl(var(--foreground) / 0.75); }
.use-alts em { font-style: normal; color: hsl(var(--secondary)); }
.use-alts em.is-ok { color: hsl(var(--success)); }
@keyframes use-chat-change {
from { opacity: 0.4; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: none; }
}
/* ---- Vida de cada escena (solo con movimiento permitido). Al cambiar de
paso todo entra en cascada; después cada escena repite UN gesto corto. */
@media (prefers-reduced-motion: no-preference) {
.use-chat-col.is-changing .use-scene > * { animation: use-rise 560ms var(--ease-spring) both; }
.use-chat-col.is-changing .use-scene > :nth-child(2) { animation-delay: 90ms; }
.use-chat-col.is-changing .use-scene > :nth-child(3) { animation-delay: 180ms; }
.use-chat-col.is-changing .use-scene > :nth-child(4) { animation-delay: 270ms; }
.use-chat-col.is-changing .use-scene > :nth-child(5) { animation-delay: 360ms; }
.use-chat-col.is-changing :is(.use-doc, .use-recipes, .use-checks, .use-dns, .use-tiles) > li { animation: use-rise 480ms var(--ease-spring) both; }
.use-chat-col.is-changing :is(.use-doc, .use-recipes, .use-checks, .use-dns, .use-tiles) > li:nth-child(2) { animation-delay: 70ms; }
.use-chat-col.is-changing :is(.use-doc, .use-recipes, .use-checks, .use-dns, .use-tiles) > li:nth-child(3) { animation-delay: 140ms; }
.use-chat-col.is-changing :is(.use-doc, .use-recipes, .use-checks, .use-dns, .use-tiles) > li:nth-child(4) { animation-delay: 210ms; }
.use-chat-col.is-changing :is(.use-doc, .use-recipes, .use-checks, .use-dns, .use-tiles) > li:nth-child(5) { animation-delay: 280ms; }
/* 1 */
.use-caret { animation: use-caret 1s steps(1, end) infinite; }
.use-type { animation: use-type 9s ease-in-out infinite; }
.use-split { animation: use-split 7s ease-in-out infinite; }
.use-split__preview > * { animation: use-rise 600ms var(--ease-spring) both; }
.use-split__preview > :nth-child(3) { animation-delay: 120ms; } .use-split__preview > :nth-child(4) { animation-delay: 240ms; } .use-split__preview > :nth-child(5) { animation-delay: 360ms; } .use-split__preview > :nth-child(6) { animation-delay: 480ms; }
/* 2 */
.use-btn__check { animation: use-pop 2.8s var(--ease-spring) infinite; }
.use-doc li.is-editing { animation: use-ring 3s ease-in-out infinite; }
.use-doc li.is-editing .use-field { animation: use-typing-w 3s ease-in-out infinite; }
/* 3 */
.use-mini--ba .use-mini__photo { animation: use-swap 4.5s ease-in-out infinite; }
.use-mini--ba .use-mini__title { animation: use-grow 4.5s ease-in-out infinite; }
.use-steps-dots i:last-child { animation: use-dot-on 4.5s ease-in-out infinite; }
/* 4 */
.use-slider__knob { animation: use-knob 4s ease-in-out infinite; }
.use-slider--b .use-slider__knob { animation-delay: -2s; }
.use-editor__el { animation: use-el 4s ease-in-out infinite; }
.use-editor__save { animation: use-fade 4s ease-in-out infinite; }
/* 5 */
.use-tiles li.is-arming .use-tiles__ico { animation: use-breathe 1.6s ease-in-out infinite; }
.use-log li.is-live::after { animation: use-breathe 1.2s ease-in-out infinite; }
/* 6 */
.use-field.is-hl { animation: use-ring 3s ease-in-out infinite; }
/* 7 */
.use-toggle i { transition: left 240ms var(--ease-spring); }
.use-recipes li.is-arming .use-toggle { animation: use-arm 4s ease-in-out infinite; }
.use-recipes li.is-arming .use-toggle i { animation: use-arm-knob 4s ease-in-out infinite; }
/* 8 */
.use-score__arc { animation: use-score 1.4s var(--ease-spring) both; }
.use-kw em.is-up { animation: use-nudge 3s ease-in-out infinite; }
.use-checks li.is-doing, .use-dns li.is-doing { animation: use-ring 3s ease-in-out infinite; }
/* 9 */
.use-btn--wide .use-btn__check { animation: use-pop 3.5s var(--ease-spring) infinite; }
}
@keyframes use-caret { 50% { opacity: 0; } }
@keyframes use-type { 0% { clip-path: inset(0 100% 0 0); } 40%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes use-split { 0%, 20%, 100% { --use-split: 46%; } 50%, 70% { --use-split: 34%; } }
@keyframes use-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }
@keyframes use-ring { 50% { box-shadow: inset 0 0 0 1.5px hsl(var(--accent) / 0.25); } }
@keyframes use-typing-w { 0%, 100% { max-width: 100%; } 50% { max-width: 55%; } }
@keyframes use-swap { 0%, 35%, 100% { background: hsl(var(--accent) / 0.3); } 55%, 80% { background: hsl(var(--warning) / 0.45); } }
@keyframes use-grow { 0%, 35%, 100% { width: 70%; height: 9px; } 55%, 80% { width: 96%; height: 14px; } }
@keyframes use-dot-on { 0%, 45% { background: hsl(var(--foreground) / 0.14); } 60%, 100% { background: hsl(var(--accent)); } }
@keyframes use-knob { 0%, 100% { left: 40%; } 50% { left: 68%; } }
@keyframes use-el { 0%, 100% { height: 42px; } 50% { height: 54px; } }
@keyframes use-fade { 0%, 30% { opacity: 0.35; } 60%, 100% { opacity: 1; } }
@keyframes use-breathe { 50% { transform: scale(0.88); opacity: 0.6; } }
@keyframes use-arm { 0%, 40% { background: hsl(var(--foreground) / 0.18); } 60%, 100% { background: hsl(var(--success)); } }
@keyframes use-arm-knob { 0%, 40% { left: 2px; } 60%, 100% { left: 14px; } }
@keyframes use-score { from { stroke-dashoffset: 106.8; } }
@keyframes use-nudge { 50% { transform: translateY(-2px); } }
@keyframes use-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* --- VIDEO --------------------------------------------------------------- */
.use-video { padding-block: 7rem 6rem; }
@media (min-width: 640px) {
.use-video { padding-block: 10rem 9rem; }
}
.use-video__title {
margin-bottom: 2.5rem;
text-align: center;
}
/* ── Reel de la sección #video: pieza de lanzamiento de Exi (2026-09-06) ────
La tarjeta 16:9 NO lleva un