` no sirve para esto —el navegador no
renderiza lo cerrado y no hay alto que animar—, así que `site.js` lo
reconstruye como botón + región. Sin JS queda el `
` de arriba,
que abre y cierra igual. */
.faq__q { margin: 0; font: inherit; }
.faq__b {
width: 100%; display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
background: none; border: 0; text-align: left; cursor: pointer;
padding: 20px 20px 20px 22px;
font: inherit; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.015em; line-height: 1.4;
color: var(--ink);
transition: color var(--dur) var(--ease);
}
.faq__b:hover { color: var(--firma-fuerte); }
.faq__ico {
flex: none; display: inline-flex; margin-top: 1px; color: var(--firma);
transition: transform 240ms cubic-bezier(0.33, 0.9, 0.4, 1);
}
.faq__ico svg { width: 18px; height: 18px; }
.faq__it[data-abierto='true'] .faq__ico { transform: rotate(180deg); }
.faq__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms cubic-bezier(0.33, 0.9, 0.4, 1); }
/* `visibility` con retardo: mientras se cierra el texto sigue visible, y
recién al terminar sale del orden de tabulación y del lector de pantalla. */
.faq__cuerpo > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear 260ms; }
.faq__it[data-abierto='true'] .faq__cuerpo { grid-template-rows: 1fr; }
.faq__it[data-abierto='true'] .faq__cuerpo > div { visibility: visible; transition-delay: 0s; }
.faq__cuerpo p { padding: 0 22px 20px; color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; }
.faq__cuerpo p + p { padding-top: 10px; }
/* ── CTA de cierre (una sola pieza, en todas las páginas) ────────── */
.cierre {
position: relative; overflow: hidden;
background: var(--tinta); color: var(--tinta-fg);
border-radius: 22px;
padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px);
text-align: center;
}
/* Rayado de libro mayor, apenas visible: el mismo gesto del resto del sitio. */
.cierre::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0 33px,
color-mix(in oklab, var(--tinta-fg) 6%, transparent) 33px 34px
);
}
.cierre > * { position: relative; }
.cierre .h2 { color: var(--tinta-fg); }
.cierre p { color: color-mix(in oklab, var(--tinta-fg) 78%, transparent); }
.cierre__acciones {
display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch;
margin-top: 32px;
}
/* Verde de WhatsApp: no es decoración de marca, es el color con el que la
audiencia reconoce el canal. Va con el logo y el texto en blanco, que es
como Meta entrega el botón «Chat on WhatsApp» en su manual de marca: el
par verde+blanco es la mitad de lo que hace reconocible al botón.
Blanco sobre este verde da 1.98:1, por debajo del mínimo de la norma. Es
una decisión de marca tomada a sabiendas, y por eso no se deja sola:
quien pidió alto contraste —en el panel o en su sistema operativo—
recibe el verde oscuro oficial (#075e54, 7.67:1 con blanco) en lugar de
este. Ver el bloque de WhatsApp en a11y.css. */
.btn--wa { background: #25d366; color: #fff; font-weight: 700; }
.btn--wa:hover { background: #1fb857; }
.btn--wa svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Campo + botón como una sola pieza (patrón DoorLoop). */
.cierre__form {
display: flex; align-items: stretch;
background: var(--card); border-radius: 10px; padding: 5px;
gap: 5px; min-width: min(420px, 100%);
}
.cierre__form input {
flex: 1 1 auto; min-width: 0;
font: inherit; font-size: 0.94rem; color: var(--ink);
background: transparent; border: 0; padding: 0.6rem 0.9rem;
}
.cierre__form input::placeholder { color: var(--ink-3); }
.cierre__form input:focus { outline: none; }
.cierre__form:focus-within { box-shadow: 0 0 0 3px var(--firma-soft); }
.cierre__form .btn { white-space: nowrap; }
.cierre__aviso { margin-top: 16px; font-size: 0.8rem; min-height: 1.2em; }
/* ── formularios ─────────────────────────────────────────────────── */
.campo { display: grid; gap: 6px; }
.campo label { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.campo input, .campo select, .campo textarea {
font: inherit; font-size: 0.95rem; color: var(--ink);
background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px;
padding: 0.72rem 0.85rem;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none; border-color: var(--firma); box-shadow: 0 0 0 3px var(--firma-soft);
}
.campo .ayuda { font-size: 0.78rem; color: var(--ink-2); }
/* ── footer ──────────────────────────────────────────────────────── */
.ftr { background: var(--tinta); color: color-mix(in oklab, var(--tinta-fg) 72%, transparent); }
.ftr a { color: inherit; text-decoration: none; font-size: 0.88rem; }
.ftr a:hover { color: var(--ventana); }
/* La misma línea que la barra de arriba, acá en el pie. Va como fondo y no
como `border-bottom` porque un destino del pie puede partirse en dos
renglones: el degradado sigue el texto, el borde dibujaría una sola raya
al pie de la caja. */
.ftr__col a, .ftr__pass a, .ftr__legal a {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
padding-bottom: 2px;
transition: background-size 180ms cubic-bezier(0.33, 0.9, 0.4, 1), color var(--dur) var(--ease);
}
.ftr__col a:hover, .ftr__col a:focus-visible,
.ftr__pass a:hover, .ftr__pass a:focus-visible,
.ftr__legal a:hover, .ftr__legal a:focus-visible { background-size: 100% 1px; }
/* Aire de DoorLoop: las columnas se separan de verdad (56px) y cada destino
respira 14px del siguiente. Antes entraban seis columnas apretadas y el
pie se leía como una tabla. */
.ftr__grid { display: grid; gap: 40px 56px; padding-block: 60px 30px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.ftr__col > * + * { margin-top: 14px; }
.ftr__h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: color-mix(in oklab, var(--tinta-fg) 62%, transparent); }
/* El título de columna se despega un poco más de su lista que los destinos
entre sí: es lo que hace que se lea como grupo y no como un ítem más. */
.ftr__h + p { margin-top: 20px; }
.ftr__pass { border-top: 1px solid color-mix(in oklab, var(--tinta-fg) 14%, transparent); padding-block: 22px 26px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-start; justify-content: space-between; }
/* Cabecera del pie: la marca a la izquierda, las redes a la derecha
(anatomía DoorLoop). */
.ftr__top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-top: 48px; }
/* Franja legal: la última línea de la página, con lo que buscan los
buscadores y los curiosos —sitemap, información para IA, términos—. */
.ftr__legal {
border-top: 1px solid color-mix(in oklab, var(--tinta-fg) 14%, transparent);
padding-block: 18px 34px;
display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
}
.ftr__legal a { font-size: 0.82rem; }
/* El copyright va primero y no al final: la esquina inferior derecha la
ocupa el botón flotante de WhatsApp, que lo taparía. */
/* 48 % daba 4.43:1 sobre la tinta del pie: a siete centésimas del mínimo,
pero por debajo. 56 % lo cruza y no cambia el peso visual del renglón. */
.ftr__legal .tiny { order: -1; color: color-mix(in oklab, var(--tinta-fg) 56%, transparent); }
/* La marca del pie no es el mismo objeto que la marca de la cabecera. Arriba
es un botón de navegación y compite con el menú; abajo es la firma del
sitio y no compite con nada, así que puede tener el tamaño de una firma.
`line-height: 1` para que el bloque no se coma el aire del renglón de
redes que tiene al lado. */
.ftr .logo { color: var(--tinta-fg); font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1; letter-spacing: 0; }
/* ── barra del wireframe (no es parte del sitio) ─────────────────── */
.wf {
background: var(--tinta); color: var(--tinta-fg);
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
padding: 7px 24px; text-align: center;
}
.wf b { color: var(--ventana); font-weight: 500; }
/* ── LA APERTURA — el fondo de la primera sección ────────────────── */
/* Canon DoorLoop: la sección de apertura de cada página interior se separa
del resto por el fondo. Acá ese fondo es color plano y nada más: sin
dibujo, sin degradé, sin bloque oscuro. Lo que distingue una familia de
páginas de la otra es el tono, no el ruido — la página tiene que poder
leerse en silencio (decisión 2026-08-06).
Arena → producto y empresa: qué hace CONSO.
Bruma → perfiles: quién lo usa. El mismo silencio, un grado más frío. */
.hero { position: relative; overflow: hidden; }
.hero--arena { background: var(--arena); }
.hero--bruma { background: var(--bruma); }
/* Sobre cualquiera de los dos fondos la barra empieza del mismo color que la
apertura y recién se vuelve papel apenas bajás: así el bloque de color
arranca arriba de todo, sin costura contra la barra y sin sacarla del
flujo. Antes esto valía solo para las páginas oscuras; con fondo plano la
costura se ve igual en las claras.
La condición se escribe en negativo —`:not([data-tope='false'])`— a
propósito: el color correcto tiene que valer desde el primer pintado, y el
atributo lo pone site.js recién cuando termina de armar la página. Con la
condición en positivo la barra arrancaba en papel y saltaba al tono de la
apertura un segundo después. */
.hdr { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
body:has(.hero) .hdr:not([data-tope='false']) { backdrop-filter: none; border-bottom-color: transparent; }
body:has(.hero--arena) .hdr:not([data-tope='false']) { background: var(--arena); }
body:has(.hero--bruma) .hdr:not([data-tope='false']) { background: var(--bruma); }
/* ── ¿POR QUÉ CONSO? (segunda sección de producto y de perfil) ───── */
/* Canon DoorLoop: apenas pasado el hero, tres tarjetas iguales que responden
«por qué esta empresa» antes de entrar en el detalle de la página.
El único ícono dorado es el de la firma — los otros dos van en tinta. */
.porque .card { padding: 26px 24px; }
.porque .card .ico { width: 44px; height: 44px; border-radius: 12px; }
.porque .card .ico svg { width: 22px; height: 22px; }
.porque .card .h4 { margin-top: 18px; }
.porque .card .small { margin-top: 8px; }
/* ── EL MOSAICO ──────────────────────────────────────────────────── */
/* Cómo muestra DoorLoop las capacidades de una página de producto: una
grilla de dos columnas donde cada celda es captura arriba, título y
párrafo debajo. Reemplaza a los splits que alternaban lado: con cuatro
pasos, esa alternancia obligaba a bajar cuatro pantallas para ver lo que
acá entra en dos, y el ojo tenía que cruzar la página en cada paso. */
.mosaico { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 860px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mosaico > * { min-width: 0; }
.mosaico__it .ph { width: 100%; }
.mosaico__it .vista { width: 100%; }
/* La escala del texto que acompaña a una captura, medida sobre la de
DoorLoop: el título en 32px, el párrafo en 18px con renglón de 29px y el
enlace en 17px. Veníamos en 21,6 / 16 / 14 — al lado de un lienzo de 554px
el título se leía como epígrafe, no como el nombre de lo que se muestra.
Vale para las dos formas que tiene ese texto en el sitio, porque hacen el
mismo trabajo y se ven una después de la otra: la celda del mosaico —el
paso de una página de producto, la ficha de una de perfil— y `.relato`, la
mitad de un split que cuenta un capítulo del mes o un paso de la migración.
Dos escalas para el mismo trabajo se notan al pasar de una sección a la
otra, y era lo que pasaba. */
.mosaico__it .eyebrow, .relato .eyebrow { margin-top: 22px; }
.mosaico__it .h3, .relato .h3 { margin-top: 8px; font-size: clamp(1.5rem, 2.3vw, 2rem); }
.mosaico__it .vista + .h3 { margin-top: 26px; }
/* En el split el rótulo abre la columna: nada arriba de lo que separarse. */
.relato > .eyebrow:first-child, .relato > .h3:first-child { margin-top: 0; }
.mosaico__it .body, .relato .body {
margin-top: 12px;
color: var(--ink-2); max-width: 50ch;
font-size: 1.125rem; line-height: 1.6;
}
/* La lista de checks de la celda (canon DoorLoop: tres renglones con el
marcador redondo entre el párrafo y el enlace). Sube de 0.93rem a 1rem por
lo mismo que subieron el título y el párrafo: al lado de un lienzo de
554px, la escala de tarjeta chica se lee como letra al pie. */
.mosaico__it .lista, .relato .lista { margin-top: 18px; }
.mosaico__it .lista li, .relato .lista li { font-size: 1rem; }
.mosaico__it .lista + .relato__pie, .relato .lista + .relato__pie { margin-top: 20px; }
.mosaico__it .link, .relato .link { margin-top: 18px; font-size: 1.0625rem; }
/* El apunte en mono («→ revisás solo lo que no matcheó») sube en la misma
proporción que el párrafo; si no, queda de letra chica al pie. */
.relato .small { font-size: 1rem; margin-top: 14px; }
.relato__pie { margin-top: 22px; }
/* La ficha: el mismo mosaico contando un área en vez de un paso, con el
enlace a la página que la cuenta entera —la pieza que en DoorLoop cierra
cada celda («Learn more about reporting →») y es lo que convierte la
grilla en el índice del producto.
El orden es el de ellos y no es indistinto: primero el lienzo, después el
nombre. Antes cada celda era una .card —marco blanco, borde y sombra— con
el título arriba y la captura adentro: el ojo leía un rectángulo dentro de
otro en vez de una pantalla, y el nombre llegaba antes de que hubiera algo
que nombrar. Sin marco, el lienzo pastel es la única superficie.
Dos columnas siempre, incluso cuando la sección tiene tres fichas y queda
una huérfana en la última fila. La alternativa —tres columnas para esa
página— es peor de lo que parece: el recorte de interfaz tiene tipografía
en px y posiciones en %, así que al angostar la celda el panel no achica,
se corta, y la pieza agrandada se le monta encima. Una fila corta se lee;
una captura pisada, no.
La escala del texto es la del mosaico —está arriba, es la misma celda—;
acá abajo no queda nada propio de la ficha salvo su nombre. */
/* ── RECURSOS — el riel de notas del blog ────────────────────────── */
/* «Resources & learning materials» de DoorLoop. Hasta 2026-08-08 acá había
una pieza propia (`.recurso`): una tarjeta con una tapa de tinta dibujada
con dos elipses y el título encima. Se sacó entera —CSS y marcado— porque
dibujaba la nota de una manera en la portada y de otra en /blog: dos tapas
distintas para el mismo artículo. Ahora la portada muestra la MISMA
tarjeta `.card.nota` con el MISMO banner ilustrado de `assets/banners`, y
lo único propio de esta sección es el ancho de columna del riel.
El riel es el del canon DoorLoop —el mismo componente que el riel de
perfiles, con sus flechas y su scroll-snap—; lo que cambia es que la
tarjeta de nota es más ancha que la de perfil, así que se detiene en tres
columnas y no sigue hasta cuatro. */
.riel--notas > * { scroll-snap-align: start; }
@media (min-width: 1180px) { .riel--notas { grid-auto-columns: calc((100% - 32px) / 3); } }
/* `overflow-x: auto` obliga al eje vertical a recortar también, y el gesto de
la tarjeta se levanta 3px con una sombra de 30. Sin este aire —puesto como
padding y devuelto como margen negativo, para no correr las flechas— el
levantar de la tarjeta sale cortado por el borde del riel. */
.riel--notas { padding: 8px 0 24px; margin: -8px 0 -18px; }
/* ── LOS PASOS — una secuencia con su pantalla ───────────────────── */
/* La misma anatomía del mosaico —lienzo arriba, texto debajo, sin marco—
pero en tres columnas y a escala de tarjeta: son pasos de un trámite, no
áreas del producto. El número va delante porque acá el orden es
contenido: no se aprueba antes de extraer.
El único paso con el rótulo en dorado es el tercero, que es el que firmás.
El lienzo declara --vista-alto propio: a esta escala el 62,5 % de producto
deja un colchón de aire debajo del panel. */
.pasos { display: grid; gap: clamp(24px, 3vw, 34px); }
@media (min-width: 800px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos > * { min-width: 0; }
/* A tres columnas el lienzo mide menos de 460px, así que el panel baja al
flujo (ver la consulta de contenedor de `.vista`) y cada uno mediría el
alto de sus propias filas: tres lienzos desparejos y los tres «Paso N» a
distinta altura. El piso común y el centrado los vuelven a alinear sin
estirar ningún panel. */
.paso .vista {
width: 100%; --vista-alto: 74%; border-radius: 16px;
display: grid; align-content: center;
}
/* El piso vale sólo cuando los tres están uno al lado del otro. En una
columna no hay nada con qué emparejarse y un piso fijo sería una franja
de color vacía arriba y abajo de un panel de dos renglones. */
@media (min-width: 800px) { .paso .vista { min-height: 208px; } }
.paso__n { margin-top: 20px; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.paso__n--firma { color: var(--firma-fuerte); }
.paso .h4 { margin-top: 7px; font-size: 1.12rem; }
.paso .small { margin-top: 9px; }
/* ── LA VISTA — la interfaz de verdad, recortada ─────────────────── */
/* La celda del mosaico deja de ser un placeholder: muestra un recorte de la
pantalla real de CONSO, re-dibujado en HTML sobre la paleta del sitio —
nítido en cualquier densidad, igual que las tarjetas de la foto del hero.
La anatomía es la de DoorLoop: un lienzo de color plano (arena, el tono de
producto), un panel de interfaz apoyado con sombra que el borde recorta, y
un elemento agrandado que flota encima con el mismo aro de vidrio de
.foto__card. El dorado sigue la ley: sólo aparece si el recorte muestra el
momento de aprobar. Todo es ilustración —aria-hidden, nada recibe foco—
y los datos son los del edificio que la página viene siguiendo. */
.vista {
position: relative; margin: 0;
border-radius: 22px;
/* El lienzo no es un rectángulo de color plano: lleva la misma luz
diagonal que DoorLoop le pone al suyo —más claro arriba a la izquierda,
donde entra la luz, y un punto más denso abajo a la derecha—. Es medio
grado de diferencia y no se ve como un degradado; se ve como que el
panel está apoyado sobre algo y no pegado sobre un color.
Va con `--vista-lienzo` para que los cuatro pastel sólo tengan que
cambiar una variable en vez de repetir el degradado. */
--vista-lienzo: var(--arena);
background:
linear-gradient(150deg,
color-mix(in oklab, var(--card) 62%, transparent),
color-mix(in oklab, var(--card) 14%, transparent) 40%,
transparent 64%),
radial-gradient(124% 100% at 90% 112%,
color-mix(in oklab, var(--ink) 8%, transparent),
transparent 64%),
var(--vista-lienzo);
overflow: hidden;
/* El lienzo se pregunta a sí mismo cuánto mide. Lo que rompe el recorte no
es el ancho de la ventana sino el de la celda: a 900px el mosaico todavía
va a dos columnas y ya no entra, mientras que a 700px en una sola columna
entra de sobra. Una media query miraría el número equivocado. */
container-type: inline-size;
}
/* La proporción, como espaciador en flujo en vez de `aspect-ratio`. No es
capricho: `aspect-ratio` fija el alto y el panel que no entra se sale por
abajo; un espaciador es un PISO que el contenido puede levantar. Mientras
el panel flota no hay nada más en flujo y el lienzo mide exactamente la
proporción, igual que antes; cuando el panel baja al flujo (lienzo angosto,
ver abajo) el espaciador se apaga y manda el contenido.
Cada página que quiera otra proporción declara `--vista-alto` (alto/ancho
en %) en el style del figure; sin él, el 16/10 de producto. */
.vista::before { content: ''; display: block; padding-top: var(--vista-alto, 62.5%); }
/* Es una captura: el texto no re-fluye, se recorta — como en una pantalla.
Va acá arriba y no al final del bloque porque la consulta de contenedor
que lo levanta en pantallas angostas tiene su misma especificidad: si
esta regla quedara después, ganaría por orden y la consulta no haría
nada. */
.vista * { white-space: nowrap; }
.vista__ui {
position: absolute;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 12px;
/* Dos sombras y no una: una corta y cerrada que dibuja el canto del panel
contra el lienzo, y una larga y muy abierta que lo despega. Con sólo la
larga —que es lo que hacía `--shadow-raised`— el panel parecía impreso
sobre el color en vez de apoyado encima, y en DoorLoop justamente lo que
hace que la captura se lea como una pantalla es ese doble apoyo. */
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.06),
0 26px 60px -18px rgb(0 0 0 / 0.24);
overflow: hidden;
font-size: 12px; line-height: 1.45; color: var(--ink);
}
.vista__cab {
display: flex; align-items: center; gap: 8px;
padding: 11px 14px;
border-bottom: 1px solid var(--rule);
}
.vista__cab b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.vista__meta { font-size: 10.5px; color: var(--ink-2); }
.vista__acciones { margin-left: auto; display: flex; gap: 6px; }
/* fila de lista (gastos, envíos) */
.vista__fila {
display: flex; align-items: center; gap: 9px;
padding: 8px 14px;
}
.vista__fila + .vista__fila { border-top: 1px solid var(--rule); }
.vista__fila--marca { background: var(--paper-2); }
.vista__txt { flex: 1; min-width: 0; }
.vista__txt > b, .vista__txt > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.vista__txt > b { font-size: 11.5px; font-weight: 600; }
.vista__txt > span { font-size: 10px; color: var(--ink-2); margin-top: 1px; }
.vista__txt .vista__pic { vertical-align: -2px; margin-right: 4px; }
.vista__monto { font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* íconos chicos dentro de la captura */
.vista__pic { flex: none; display: inline-flex; color: var(--ink-3); }
.vista__pic svg { width: 13px; height: 13px; }
.vista__pic--mini svg { width: 11px; height: 11px; }
/* pendiente = lo que CONSO preparó y todavía no pasó: el tono borrador */
.vista__pic--pend { color: var(--borrador); }
.vista__chip {
flex: none; display: inline-flex; align-items: center;
border: 1px solid var(--rule-strong); border-radius: 999px;
padding: 1px 7px;
font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em;
color: var(--ink-2); background: var(--paper-2);
}
.vista__chip--borrador { color: var(--borrador); border-color: color-mix(in oklab, var(--borrador) 45%, transparent); background: transparent; }
/* filtros tipo pastilla (envíos) */
.vista__pills { display: flex; gap: 6px; padding: 10px 14px 10px; border-bottom: 1px solid var(--rule); }
.vista__pill {
display: inline-flex; align-items: center;
border: 1px solid var(--rule-strong); border-radius: 7px;
padding: 3px 10px;
font-size: 10px; font-weight: 600; color: var(--ink-2); background: var(--card);
}
.vista__pill--activa { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* botones de la captura */
.vista__btn {
display: inline-flex; align-items: center; gap: 5px;
border: 1px solid var(--rule-strong); border-radius: 7px;
padding: 4px 10px;
font-size: 10.5px; font-weight: 600; color: var(--ink); background: var(--card);
}
.vista__btn svg { width: 11px; height: 11px; }
.vista__btn--ico { padding: 4px 6px; color: var(--ink-2); }
/* el total protagonista (revisión) */
.vista__cifra-g { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.vista__cifra-rotulo { font-size: 10px; color: var(--ink-2); margin-top: 4px; }
/* tarjeta de métrica (Saldo cierre, 1er Vencimiento, Enviadas) */
.vista__tarj { border: 1px solid var(--rule); border-radius: 9px; padding: 8px 10px; min-width: 0; overflow: hidden; }
.vista__tarj i { display: block; font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vista__tarj b { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.vista__tarj span { display: block; font-size: 9px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* tabla (distribución): cabecera + filas sobre la misma grilla de columnas.
Las columnas las declara cada captura en `--cols` sobre .vista__tabla. */
.vista__th, .vista__tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; padding: 7px 14px; }
.vista__th { font-size: 9.5px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.vista__tr { font-size: 11px; }
.vista__tr + .vista__tr { border-top: 1px solid var(--rule); }
.vista__tr b { font-weight: 600; font-size: 11px; }
.vista__tr .apagado { color: var(--ink-2); }
.vista__num { text-align: right; font-variant-numeric: tabular-nums; }
/* el elemento agrandado que flota encima — mismo aro de vidrio que la foto */
.vista__zoom {
position: absolute;
display: flex; align-items: center; gap: 10px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 13px;
padding: 12px 16px;
box-shadow:
var(--edge-light),
0 0 0 7px var(--halo-aro),
0 0 30px 8px var(--halo-luz),
var(--shadow-raised);
}
.vista__zoom .vista__pic svg { width: 16px; height: 16px; }
.vista__zoom b { display: block; font-size: 12.5px; font-weight: 700; }
.vista__zoom span { display: block; font-size: 10.5px; color: var(--ink-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
/* Variante firma: el zoom ES el botón de aprobar, agrandado. Único dorado. */
.vista__zoom--firma {
gap: 6px;
background: var(--firma); border-color: var(--firma);
padding: 10px 16px;
font-size: 12.5px; font-weight: 700; color: var(--firma-fg);
}
.vista__zoom--firma svg { width: 14px; height: 14px; }
/* ── piezas de composición ──
Cada página de producto arma sus vistas con estas piezas para que ninguna
composición se repita: formulario, pestañas, chat, zona de carga, lista de
verificación, niveles, línea de tiempo, calendario, bitácora, ventana. */
/* campo de formulario (solo dibujo: rótulo + caja) */
.vista__campo { min-width: 0; }
.vista__campo > i { display: block; font-style: normal; font-size: 9px; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; }
.vista__campo > b { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); border-radius: 7px; padding: 5px 9px; font-size: 11px; font-weight: 500; background: var(--card); overflow: hidden; }
.vista__campo > b.vacio { color: var(--ink-3); font-weight: 400; }
/* pestañas de sección (el archivo) */
.vista__tabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--rule); overflow: hidden; }
.vista__tab { padding: 6px 9px 7px; font-size: 10.5px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; }
.vista__tab--activa { color: var(--ink); border-bottom-color: var(--ink); }
/* burbuja de chat (versión clara, para el comprobante por WhatsApp) */
.vista__globo { max-width: 84%; border: 1px solid var(--rule); border-radius: 11px; border-bottom-left-radius: 4px; padding: 8px 11px; font-size: 11px; background: var(--paper-2); }
.vista__globo small { display: block; font-size: 8.5px; color: var(--ink-3); margin-top: 4px; text-align: right; }
.vista__adjunto { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 9px; font-size: 10.5px; font-weight: 600; }
/* zona de carga (extracto, factura) */
.vista__zona { border: 1.5px dashed var(--rule-strong); border-radius: 10px; padding: 14px; text-align: center; font-size: 10.5px; color: var(--ink-2); }
/* miniatura de documento */
.vista__docmini { display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-3); min-width: 0; }
/* casilla de verificación */
.vista__check { flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--rule-strong); background: var(--card); display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: transparent; }
.vista__check--si { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* control segmentado (los niveles de permiso) */
.vista__seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 7px; overflow: hidden; }
.vista__seg span { padding: 3px 7px; font-size: 8.5px; font-weight: 600; color: var(--ink-2); border-left: 1px solid var(--rule); }
.vista__seg span:first-child { border-left: 0; }
.vista__seg .sel { background: var(--ink); color: var(--paper); }
/* línea de tiempo (asamblea: antes → durante → después) */
.vista__hito { position: relative; padding: 0 14px 11px 32px; font-size: 11px; }
.vista__hito::before { content: ''; position: absolute; left: 14px; top: 3px; width: 7px; height: 7px; border-radius: 999px; border: 2px solid var(--ink-2); background: var(--card); }
.vista__hito::after { content: ''; position: absolute; left: 19px; top: 15px; bottom: -1px; width: 1px; background: var(--rule-strong); }
.vista__hito:last-child::after { display: none; }
.vista__hito > b { font-size: 11px; font-weight: 600; }
.vista__hito > span { display: block; font-size: 9.5px; color: var(--ink-2); margin-top: 1px; }
/* calendario compacto (pagos a proveedores, reservas) */
.vista__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vista__cal > i { font-style: normal; text-align: center; font-size: 8px; font-weight: 600; color: var(--ink-3); }
.vista__dia { min-height: 30px; border: 1px solid var(--rule); border-radius: 6px; padding: 1px 3px; font-size: 8.5px; color: var(--ink-2); background: var(--card); overflow: hidden; }
.vista__dia--fuera { opacity: 0.4; }
.vista__evento { display: block; margin-top: 1px; border-radius: 3px; padding: 0 3px; font-size: 7.5px; font-weight: 700; background: var(--paper-2); border: 1px solid var(--rule-strong); color: var(--ink-2); overflow: hidden; }
/* fila de bitácora (historial: quién / qué / cuándo, en mono) */
.vista__log { padding: 7px 14px; font-family: var(--mono); font-size: 9.5px; line-height: 1.5; color: var(--ink-2); overflow: hidden; }
.vista__log + .vista__log { border-top: 1px solid var(--rule); }
.vista__log b { color: var(--ink); font-weight: 600; }
/* barra de ventana (el portal del proveedor es «otra» aplicación) */
.vista__barra { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.vista__barra i { width: 8px; height: 8px; border-radius: 999px; background: var(--rule-strong); }
.vista__barra span { margin-left: 6px; font-size: 9.5px; color: var(--ink-2); }
/* pie de diálogo y fila de total */
.vista__piecito { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--rule); background: var(--paper-2); }
.vista__totalfila { display: flex; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--rule-strong); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ── DE UN LADO AL OTRO ──────────────────────────────────────────────
Un recorte quieto muestra estados, no operaciones: una foto y unos campos
puestos uno al lado del otro no dicen que uno se convirtió en el otro. Lo
que lo dice es la flecha, con el rótulo de quién hizo la conversión. Es la
pieza que le falta a un lienzo para que se entienda de un vistazo, sin leer
el título de la tarjeta. */
.vista__flecha { display: grid; place-items: center; gap: 3px; min-width: 0; color: var(--ink-3); }
.vista__flecha svg { width: 15px; height: 15px; }
/* El rótulo es la única cosa del recorte que SÍ se parte en dos renglones:
son tres palabras en una columna de 56px, y `.vista *` las dejaría en una
sola línea que se monta sobre lo que la flecha señala. */
.vista__flecha i {
width: 100%; font-style: normal; text-align: center; color: var(--ink-2); white-space: normal;
font-size: 7px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.25; text-transform: uppercase;
}
/* La marca de lo que leyó la IA, pegada al dato. Sigue la ley del violeta
—el color de lo que la IA dice o hace— en el registro que pide un texto
chico sobre papel. No usa el dorado: el dorado es la firma, y esto es
justamente lo que TODAVÍA no pasó por ella. */
.vista__ia {
flex: none; font-style: normal; padding: 1px 4px; border-radius: 4px;
font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em;
color: var(--ia-texto); border: 1px solid color-mix(in oklab, var(--ia-texto) 40%, transparent);
}
/* Cuánto se resolvió solo. La barra hace visible de un vistazo lo que una
columna de «✓ match» obliga a contar fila por fila. */
.vista__progreso { height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.vista__progreso > i { display: block; height: 100%; border-radius: 999px; background: var(--ink-2); }
/* La foto del comprobante. Lo que llega por WhatsApp no es un ícono de
archivo: es una foto torcida de un papel con renglones, y eso es lo que
tiene que verse para que «se carga con una foto» se entienda sin leerlo. */
.vista__papel {
position: relative; display: grid; align-content: start; gap: 3px;
padding: 7px 6px 14px;
background: var(--card); border: 1px solid var(--rule-strong); border-radius: 5px;
box-shadow: 0 2px 7px rgb(44 26 16 / 0.18);
transform: rotate(-2.5deg);
}
.vista__papel > i { display: block; height: 2px; border-radius: 999px; background: var(--rule); }
.vista__papel > i.fuerte { height: 3px; width: 72%; background: var(--ink-3); }
.vista__papel > i.corta { width: 54%; }
.vista__papel > b {
position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
font-size: 6.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3);
}
/* La pila: la hoja de adelante con dos asomando atrás. Dice «uno por unidad»
sin tener que escribirlo. El contenido va en el ; las dos hojas de
atrás son pseudo-elementos y no ocupan lugar. */
.vista__pila { position: relative; min-width: 0; }
.vista__pila::before, .vista__pila::after {
content: ''; position: absolute; inset: 0; border-radius: 6px;
background: var(--card); border: 1px solid var(--rule-strong);
}
.vista__pila::before { transform: translate(7px, -7px); }
.vista__pila::after { transform: translate(3.5px, -3.5px); }
/* z-index y no sólo `position: relative`: el ::after se genera DESPUÉS del
y, con los dos posicionados y sin capa declarada, pinta encima —la
hoja de atrás tapaba el contenido de la de adelante. */
.vista__pila > span {
position: relative; z-index: 1;
display: grid; place-content: center; gap: 2px; text-align: center;
height: 100%; padding: 9px 6px; border-radius: 6px;
background: var(--card); border: 1px solid var(--ink-3);
}
.vista__pila b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.vista__pila i { display: block; font-style: normal; font-size: 8.5px; font-weight: 600; color: var(--ink-2); }
/* botón dorado chico dentro del panel (cuando el zoom no es el botón) */
.vista__btn--firma { background: var(--firma); border-color: var(--firma); color: var(--firma-fg); }
/* la flecha del cursor apoyada sobre lo agrandado (canon DoorLoop).
Vive DENTRO del zoom, colgada de su esquina inferior derecha: así queda
pegada a lo que «señala» en cualquier ancho de pantalla. */
.vista__cursor {
position: absolute; right: -10px; bottom: -10px;
width: 19px; height: 19px;
color: var(--ink);
filter: drop-shadow(0 2px 3px rgb(44 26 16 / 0.35));
}
.vista__cursor svg { width: 100%; height: 100%; }
/* ── EL LIENZO ANGOSTO ───────────────────────────────────────────────
El recorte tiene la tipografía en px y las posiciones en %: al angostar la
celda el panel no achica, se pasa de largo y el borde lo corta a la mitad
de una fila —hasta 144px de panel comido, medido en amenities a 390px—, con
la pieza agrandada encima tapando lo poco que quedaba.
Debajo de 460px el panel baja al flujo: el lienzo deja de ser un recorte y
pasa a ser un marco con aire, y la pieza agrandada se apoya debajo en vez
de flotar sobre el panel. Se sigue leyendo lo mismo y ya no se corta nada.
El aire va como margen de los hijos y no como padding del lienzo: el
contenedor se consulta por su caja de contenido, así que darle padding acá
adentro cambiaría justo la medida que dispara la regla. */
@container (max-width: 460px) {
/* El espaciador de proporción se apaga acá y no en `.vista`, porque un
contenedor no puede consultarse a sí mismo: dentro de `@container`, el
selector `.vista` buscaría un contenedor ANCESTRO y no matchea nunca.
Su pseudo-elemento sí: para `::before`, el contenedor más cercano es el
propio lienzo. */
.vista::before { padding-top: 0; }
/* `!important` sólo donde hay estilo en línea que únicamente tiene sentido
flotando: los `left/right/top` los ignora solo un elemento en flujo, pero
el `width:230px` y el `translateX(-50%)` de los paneles centrados —los del
portal del vecino— seguirían aplicando y lo dejarían angosto y corrido
media pantalla hacia afuera. */
.vista__ui {
position: static; inset: auto;
width: auto !important; transform: none !important;
margin: clamp(10px, 4cqi, 16px);
}
.vista__ui + .vista__ui { margin-top: 0; }
/* `relative` y no `static`: la flecha del cursor vive adentro y se cuelga de
esta esquina. Con el zoom sin posicionar, la flecha se iría a colgar del
lienzo y el borde se la comería. Por eso los `left/bottom` en línea —que
en relative SÍ desplazan— hay que apagarlos con `inset`. */
.vista__zoom {
position: relative; inset: auto !important;
margin: 0 clamp(10px, 4cqi, 16px) clamp(10px, 4cqi, 16px);
box-shadow: var(--edge-light), var(--shadow-raised);
}
/* Las solapas de la captura son una fila que no envuelve dentro de un
panel con `overflow:hidden`: en un teléfono, «Expensas 486» quedaba
partida al medio y «Comprobantes 18» y «Recibidos 6» directamente
afuera del panel —tres rótulos que el recorte se comía—. Envolver es
preferible a dejarlas cortadas: la captura crece un renglón y se
entiende entera. */
.vista__tabs { flex-wrap: wrap; padding-inline: 10px; }
.vista__tab { padding-inline: 7px; }
/* El renglón corrido vuelve a cortar línea. `\.vista * { white-space:
nowrap }` dice la verdad en escritorio —una captura no re-fluye, se
recorta— pero en un teléfono el panel pasa de 554 a 313px y ese recorte
se come la mitad del sentido: el historial mostraba «Registrar / editar
pa», el globo del proveedor «¿Cómo vienen mis facturas de ju», y la
hora del mensaje quedaba directamente afuera del panel. Un renglón
partido en dos se lee; medio renglón, no.
Las tablas siguen sin cortar: ahí el nowrap no es estética, es lo que
mantiene una celda en su columna. Lo mismo los textos que ya resuelven
su sobrante con puntos suspensivos —cortarlos en dos renglones les
rompería el alto de fila. */
.vista__ui, .vista__ui *, .vista__zoom, .vista__zoom * { white-space: normal; }
.vista__th, .vista__th *,
.vista__tr, .vista__tr *,
.vista__txt > b, .vista__txt > span,
.vista__campo > b { white-space: nowrap; }
/* Las tablas de cinco columnas se quedan cortas por muy poco: sus anchos
fijos suman 232px y con el aire de escritorio —10px entre columnas y 14
de margen— piden 300 de los 313 que hay, así que la columna elástica
del medio se queda sin nada y los importes de la derecha se salen. Los
24px que se recuperan acá alcanzan para las cinco. */
.vista__th, .vista__tr { gap: 6px; padding-inline: 10px; }
}
/* Los lienzos pastel (canon DoorLoop: cada tarjeta de la sección cambia de
tono). La regla es la de arena/bruma: el mismo nivel de luz y casi nada de
croma — un grado de color, no un color. Así el panel de interfaz se lee
igual sobre cualquiera, y la sección respira sin volverse un arcoíris.
Sin modificador queda arena; en una página los cuatro pasos alternan. */
.vista--cielo { --vista-lienzo: #e4e9ee; }
.vista--rosa { --vista-lienzo: #f0e0d8; }
.vista--salvia { --vista-lienzo: #e6ebdf; }
.vista--lila { --vista-lienzo: #eae3ec; }
/* ── EXPLORÁ MÁS ─────────────────────────────────────────────────── */
/* El «Explore more features» de DoorLoop: fichas bajas de ícono + nombre,
sin descripción. Es un índice para seguir navegando, no un resumen —
la descripción la lee cada uno cuando entra. */
.mas { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .mas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .mas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mas__it {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px; border-radius: 12px;
background: var(--card); border: 1px solid var(--rule);
text-decoration: none; color: var(--ink);
transition: border-color var(--dur) var(--ease);
}
.mas__it:hover { border-color: var(--firma); }
.mas__it:hover .ico { background: var(--firma-soft); color: var(--firma); border-color: color-mix(in oklab, var(--firma) 32%, transparent); }
.mas__it span:last-child { font-weight: 600; font-size: 0.96rem; letter-spacing: -0.015em; }
/* ── LA MIGA DE PAN ──────────────────────────────────────────────── */
/* Arriba del H1, en la tipografía del sitio y separada por barras, igual que
DoorLoop. Reemplaza al rótulo en versalitas «PRODUCTO / LIQUIDACIÓN…», que
se leía como una etiqueta de sistema y no como un camino navegable. */
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 0.9rem; color: var(--ink-2); }
.miga a { text-decoration: none; color: var(--ink-2); }
.miga a:hover { color: var(--firma-fuerte); text-decoration: underline; text-underline-offset: 3px; }
.miga span[aria-current] { color: var(--ink); font-weight: 500; }
.miga i { font-style: normal; color: var(--rule-strong); }
/* ── LA PRUEBA ───────────────────────────────────────────────────── */
/* El lugar donde DoorLoop pone «4.8 de 5, 700+ reseñas en Capterra»: bajo los
botones del hero, una afirmación fuerte y su respaldo. La nuestra no
inventa números que no tenemos — dice lo único que ningún competidor
extranjero puede decir. El texto vive en una constante de site.js, así que
el día que haya una cifra real se cambia en un solo lugar. */
.prueba {
display: flex; align-items: flex-start; gap: 14px;
margin-top: 28px; padding-top: 22px;
border-top: 1px solid var(--rule-strong);
max-width: 58ch;
}
.prueba .ico { background: var(--firma-soft); color: var(--firma); border-color: color-mix(in oklab, var(--firma) 26%, transparent); }
.prueba__t { display: block; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); }
.prueba__d { display: block; font-size: 0.85rem; line-height: 1.55; color: var(--ink-2); margin-top: 5px; }
/* ── LOS CÍRCULOS ────────────────────────────────────────────────── */
/* La pila de círculos superpuestos que acompaña a los botones de demo, en el
hero y en el cierre. Un detalle sobre QUÉ dibuja: no son clientes ni caras.
El lugar donde el resto del rubro pone fotos de gente y un «+99» es
justamente el que esta pieza NO ocupa: no tenemos una cifra pública que sea
cierta (misma razón que la nota de LA PRUEBA), y una cara ajena sacada de
internet se cae al primer administrador que la reconoce. Lo que muestra son
los ROLES que conviven adentro del producto —administrador, encargado,
vecinos, proveedores—, que es una afirmación verificable entrando.
Es `inline-flex` a propósito: así hereda el `text-align` del contenedor y
queda a la izquierda en la portada, centrada en un `.head` o en el cierre,
sin una sola regla por página.
Los colores salen de variables locales para que el bloque oscuro las pise
sin duplicar la pieza. El dorado --firma no aparece acá: sigue significando
una sola cosa (la firma), y estos círculos no se firman. */
.circulos {
--circulo-fondo: var(--paper-2);
--circulo-borde: var(--card);
--circulo-tinta: var(--ink-2);
--circulo-texto: var(--ink-2);
display: inline-flex; align-items: center; gap: 14px;
margin-top: 22px; text-align: left;
}
.circulos__pila { display: inline-flex; align-items: center; flex-shrink: 0; }
/* 40 y no 34: con ícono adentro bastaban 34, pero una cara a ese diámetro es
una mancha. A 40 el retrato se lee como persona sin que la fila del hero
crezca de renglón. */
.circulos__u {
position: relative;
display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 50%;
overflow: hidden;
background: var(--circulo-fondo);
border: 2px solid var(--circulo-borde);
color: var(--circulo-tinta);
}
.circulos__u + .circulos__u { margin-left: -12px; }
/* El recorte ya viene cuadrado del archivo; `object-fit` es el cinturón para
que un retrato mal recortado se deforme en vez de estirarse. */
.circulos__u picture { display: block; width: 100%; height: 100%; }
.circulos__u img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El último no es un rol: es «y los demás». Va en tinta llena para que se lea
como cierre de la pila y no como un quinto ícono que no se entiende. */
.circulos__u--mas {
background: var(--circulo-tinta); color: var(--circulo-fondo);
font-size: 0.82rem; font-weight: 700; line-height: 1;
}
.circulos__txt { font-size: 0.85rem; line-height: 1.5; color: var(--circulo-texto); max-width: 42ch; }
/* Sobre el bloque oscuro del cierre las mismas variables, del otro lado. */
.cierre .circulos {
--circulo-fondo: color-mix(in oklab, var(--tinta-fg) 16%, var(--tinta));
--circulo-borde: var(--tinta);
--circulo-tinta: var(--tinta-fg);
--circulo-texto: color-mix(in oklab, var(--tinta-fg) 78%, transparent);
}
.cierre .circulos__u--mas { color: var(--tinta); background: var(--tinta-fg); }
/* En pantallas angostas la pila y el texto se apilan; centrada la pieza sigue
el eje de su contenedor porque `text-align` la manda igual que en ancho. */
@media (max-width: 520px) {
.circulos { flex-direction: column; align-items: flex-start; gap: 10px; }
.cierre .circulos { align-items: center; text-align: center; }
}
/* ── REDES ───────────────────────────────────────────────────────── */
/* Fila de botones redondos. Misma pieza en el pie y en la página de
contacto. Cada botón lleva el color de su marca —el fondo oficial y el
logo en blanco—: sobre la tinta del pie, cinco marcas reconocibles de un
vistazo dicen más que cinco aros del mismo gris. */
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes a {
display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 999px;
border: 1px solid transparent; color: #fff;
text-decoration: none;
transition: transform 160ms cubic-bezier(0.33, 0.9, 0.4, 1), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.redes a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(18 11 6 / 0.28); }
.redes svg { width: 24px; height: 24px; }
.redes__it--whatsapp { background: #25d366; }
.redes__it--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.redes__it--facebook { background: #1877f2; }
.redes__it--x { background: #14171a; }
.redes__it--linkedin { background: #0a66c2; }
/* Sobre la tinta del pie, X desaparecería negro sobre negro: un aro fino
lo separa del fondo sin cambiarle la marca. */
.ftr .redes__it--x { border-color: color-mix(in oklab, var(--tinta-fg) 32%, transparent); }
/* Tarjeta de canal: la usa /contacto/ en lugar de las oficinas de DoorLoop
—no tenemos sucursales, tenemos canales—. */
.canal { display: block; text-align: center; text-decoration: none; }
.canal .ico { width: 52px; height: 52px; border-radius: 14px; margin-inline: auto; }
.canal .ico svg { width: 26px; height: 26px; }
.canal .h4 { margin-top: 16px; }
.canal__dato { display: block; font-size: 0.9rem; color: var(--ink-2); margin-top: 6px; word-break: break-word; }
.canal__ir { display: block; font-size: 0.85rem; font-weight: 600; color: var(--firma-fuerte); margin-top: 12px; }
a.canal:hover .ico { background: var(--firma-soft); color: var(--firma); border-color: color-mix(in oklab, var(--firma) 32%, transparent); }
/* ── BUSCADOR ────────────────────────────────────────────────────── */
/* La lupa del header abre el mapa del sitio filtrable. Con 27 destinos en el
menú, buscar es más rápido que recorrer cuatro paneles. */
.busca { position: fixed; inset: 0; z-index: 120; display: grid; align-items: start; justify-items: center; }
.busca[hidden] { display: none; }
.busca__velo { position: absolute; inset: 0; background: rgb(24 14 7 / 0.44); backdrop-filter: blur(3px); }
.busca__caja {
position: relative;
width: min(660px, calc(100% - 32px));
margin-top: min(14vh, 110px);
background: var(--card);
border: 1px solid var(--rule-strong);
border-radius: 16px;
box-shadow: var(--shadow-raised);
overflow: hidden;
}
.busca__campo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.busca__campo > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ink-3); }
.busca__campo input {
flex: 1 1 auto; min-width: 0;
font: inherit; font-size: 1rem; color: var(--ink);
background: transparent; border: 0; padding: 4px 0;
}
.busca__campo input::placeholder { color: var(--ink-3); }
.busca__campo input:focus { outline: none; }
.busca__campo input::-webkit-search-cancel-button { display: none; }
.busca__esc {
flex: 0 0 auto; font-size: 0.72rem; font-weight: 600;
color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule);
border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
.busca__esc:hover { color: var(--ink); border-color: var(--rule-strong); }
.busca__res { max-height: min(56vh, 460px); overflow-y: auto; padding: 8px; }
.busca__grupo { font-size: 0.76rem; font-weight: 700; color: var(--ink-3); padding: 12px 12px 6px; }
.busca__it {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px; border-radius: 10px;
text-decoration: none; color: var(--ink);
}
.busca__it:hover, .busca__it[data-sel='true'] { background: var(--paper-2); }
.busca__it[data-sel='true'] { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.busca__it b { font-weight: 600; font-size: 0.94rem; }
.busca__it .busca__ruta { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); margin-top: 2px; }
/* El punto genérico de «todavía no construida» queda suelto a la derecha
cuando el enlace es una fila con ícono. Acá se dice con todas las letras,
pegado a la ruta, que es donde el revisor lo va a buscar. */
.busca__it[data-soon]::after { display: none; }
.busca__it[data-soon] .busca__ruta::after { content: ' · sin construir'; color: var(--borrador); }
.busca__vacio { padding: 26px 14px 30px; text-align: center; font-size: 0.9rem; color: var(--ink-2); }
/* ── BOTÓN FLOTANTE DE WHATSAPP ──────────────────────────────────── */
/* Igual que en producción: abajo a la derecha, siempre visible. Verde de
WhatsApp — el segundo y último uso del color de un canal ajeno, porque
se reconoce sin leer. */
.wafab {
position: fixed; right: 20px; bottom: 20px; z-index: 50;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 56px; height: 56px; border-radius: 999px;
background: #25d366; color: #fff;
text-decoration: none;
box-shadow: 0 6px 24px rgb(0 0 0 / 0.28);
}
.wafab:hover { background: #1fb857; box-shadow: 0 10px 30px rgb(0 0 0 / 0.32); }
.wafab:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }
.wafab svg { width: 28px; height: 28px; flex: 0 0 auto; }
.wafab span { display: none; font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 640px) {
.wafab { width: auto; height: auto; padding: 13px 20px 13px 16px; }
.wafab svg { width: 20px; height: 20px; }
.wafab span { display: inline; }
}
/* El latido. Mismo gesto que el botón de la liquidación del hero —un aro que
sale del borde y se apaga— y por eso va en un `::after` y no en el propio
botón: la sombra que lo despega del fondo es del botón y no se puede
animar sin perderla.
El ritmo es lo que decide si esto acompaña o molesta. El ciclo dura 4,2s y
está escrito con paradas explícitas y curva `linear` a propósito: con una
curva `ease` el aro nace y muere en el primer medio segundo y lo que se ve
es un destello cada cuatro segundos, no una respiración. Acá el aro tarda
medio segundo en aparecer, un segundo y medio en abrirse y apagarse, y los
dos segundos que quedan no pasa nada. El botón vive fijo en la esquina de
las 46 páginas: un pulso rápido ahí se vuelve insoportable a los diez
segundos.
Al pasar el mouse el aro se detiene: ya hay contacto, el llamado sobra.
El verde va literal y no en `color-mix` como el latido de la liquidación:
ahí el color es un token del tema (--firma), acá es el verde de WhatsApp,
que ya está escrito a mano tres líneas más arriba y no cambia con el tema. */
.wafab::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
animation: wafab-latido 4.2s linear infinite;
}
.wafab:hover::after, .wafab:focus-visible::after { animation-play-state: paused; }
@keyframes wafab-latido {
0% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); }
12% { box-shadow: 0 0 0 3px rgb(37 211 102 / 0.34); }
50%, 100% { box-shadow: 0 0 0 16px rgb(37 211 102 / 0); }
}
/* ── QUÉ INCLUYE ─────────────────────────────────────────────────── */
/* La grilla «Everything you need. Nothing you don't.» de DoorLoop, con su
anatomía exacta: tarjeta clara de esquinas 12, filete de un pixel, ícono
de 48 en su propio cuadrado redondeado y sombra apenas perceptible.
Reemplaza a los dos ristres de viñetas con los que se listaba el detalle
—dos columnas de texto corrido que nadie termina de leer.
Cuatro columnas en escritorio, dos en tablet, una en teléfono: con ocho
ítems queda un rectángulo cerrado de 4×2, que es como se ve en DoorLoop.
Sin hover: estas tarjetas no son enlaces y no llevan a ningún lado.
Marcarlas al pasar el cursor prometería un clic que no existe. */
.incluye { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .incluye { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.incluye__it {
min-width: 0;
padding: 24px;
border: 1px solid var(--rule);
border-radius: 12px;
background: var(--card);
box-shadow: 0 0 5px 1px rgb(47 30 18 / 0.04);
}
.incluye__it .ico {
width: 48px; height: 48px; border-radius: 12px;
border: 1px solid var(--rule-strong);
background: var(--paper-2);
color: var(--ink-2);
}
.incluye__it .ico svg { width: 24px; height: 24px; }
.incluye__t { margin-top: 16px; font-weight: 700; font-size: 1rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.incluye__d { margin-top: 8px; font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); }
/* ── EL EFECTO ───────────────────────────────────────────────────── */
/* La franja de cuatro cifras de DoorLoop («The DoorLoop Effect»). Vive vacía
hasta que haya números con fuente: la fuente se muestra dentro de la
tarjeta, chica, y por eso es un campo obligatorio del dato y no una nota
al pie opcional. DoorLoop resuelve las cuatro fuentes con UN pie común
(«Based on DoorLoop user surveys»); acá cada cifra viaja con la suya,
porque un pie común deja a las cuatro sin respaldo propio.
LA FORMA: dos columnas —la tesis a la izquierda con el botón de la demo,
el mosaico de 2×2 a la derecha—. Antes eran cuatro columnas iguales al pie
de un título centrado, que es un marcador de estadísticas y no una
sección: el argumento y los números quedaban uno encima del otro en vez de
uno frente al otro.
EL ENTINTADO: las cuatro tarjetas suben de tinta, de la más clara a la
losa. Es el gesto de DoorLoop —tres azules y un navy— traído al papel de
CONSO: el mismo color de siempre, más denso cada vez. Se escribe con
`color-mix` sobre --ink y --paper y no con cuatro colores fijos, así el
tema oscuro lo resuelve solo: de noche --ink es claro y --paper oscuro, y
la escalera se invierte sin una sola regla aparte. */
.efecto-caja { display: grid; gap: clamp(32px, 4.5vw, 56px); align-items: center; }
@media (min-width: 980px) { .efecto-caja { grid-template-columns: 0.84fr 1.16fr; } }
.efecto-caja > * { min-width: 0; }
.efecto { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* Dos columnas desde 520px: acá la tarjeta ya no lleva la fuente en tres
renglones sueltos sobre el papel sino dentro de su propio bloque de color,
así que a 240px de ancho sigue leyéndose como una cifra y no como un
párrafo partido. */
@media (min-width: 520px) { .efecto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Filas iguales. Sin esto la fila de arriba crece porque «2 días → 15 min»
ocupa dos renglones y la de abajo se queda corta: el mosaico deja de ser un
cuadrado y se ve como cuatro tarjetas sueltas de alturas distintas. Con
`1fr` las cuatro miden lo que mide la más alta y el bloque cierra parejo —
que es justamente lo que sostiene la escalera de entintado. */
@media (min-width: 520px) { .efecto { grid-auto-rows: 1fr; } }
.efecto__it {
min-width: 0;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 178px; padding: 24px 22px 20px;
border-radius: 16px;
background: var(--efecto-fondo);
color: var(--efecto-fg, var(--ink));
}
/* Los aros decorativos que DoorLoop pone detrás de cada cifra se sacaron
(2026-08-10, decisión del dueño): la cifra es el argumento y el fondo
entintado ya distingue a la tarjeta — el dibujo competía con el número. */
/* El primer escalón es --paper y no --card: --card es la superficie de las
tarjetas del sitio y en tema oscuro es MÁS clara que --paper, con lo que la
escalera arrancaba por encima del segundo escalón y se veía torcida. Con
--paper la progresión sube en la misma dirección en los dos temas. */
.efecto__it:nth-child(1) {
--efecto-fondo: var(--paper);
}
.efecto__it:nth-child(2) {
--efecto-fondo: color-mix(in oklab, var(--ink) 6%, var(--paper));
}
.efecto__it:nth-child(3) {
--efecto-fondo: color-mix(in oklab, var(--ink) 14%, var(--paper));
}
/* La cuarta es la losa, como el navy de DoorLoop: el escalón que cierra la
escalera y donde el texto se da vuelta. */
.efecto__it:nth-child(4) {
--efecto-fondo: var(--tinta);
--efecto-fg: var(--tinta-fg);
}
/* De noche la escalera no se puede terminar en la losa: --tinta es casi negro
y --paper también es oscuro, así que la cuarta tarjeta dejaría de ser el
escalón MÁS marcado para volverse otro tono oscuro entre tres oscuros. La
escalera sigue subiendo en la misma dirección —cada vez más tinta sobre el
papel— y la cuarta es la que más tiene. Es la misma idea, no un color nuevo. */
html[data-tema='oscuro'] .efecto__it:nth-child(4) {
--efecto-fondo: color-mix(in oklab, var(--ink) 26%, var(--paper));
--efecto-fg: var(--ink);
}
html[data-tema='oscuro'] .efecto__it:nth-child(4) .efecto__fuente { color: var(--ink-2); }
/* line-height 1.1 y no 1: con la cifra «2 días → 15 min» el antes→después
puede partirse en dos renglones, y a interlineado 1 el acento de «días»
toca la línea de abajo. */
.efecto__cifra { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
/* Cada lado de la flecha, entero. Ver `cifraHtml` en site.js. */
.efecto__nb { white-space: nowrap; }
/* El pie del mosaico: alcance de las cuatro cifras, no su fuente —esa vive
dentro de cada tarjeta—. Va fuera de la grilla para no entrar como quinta
celda y romper el cuadrado de 2×2. */
.efecto__lado { min-width: 0; }
.efecto__pie { margin-top: 14px; font-size: 0.76rem; line-height: 1.55; color: var(--ink-2); }
.efecto__rotulo { margin-top: 12px; font-weight: 600; font-size: 0.95rem; line-height: 1.4; }
/* --ink-2 y no --ink-3: sobre la tercera tarjeta —la más entintada de las
claras— el gris más tenue baja a 3,4:1 y deja de leerse. Con éste, 4,7:1
sobre ese mismo fondo. En la losa el registro lo da --tinta-fg atenuado. */
.efecto__fuente { margin-top: 12px; font-size: 0.76rem; line-height: 1.5; color: var(--ink-2); }
.efecto__it:nth-child(4) .efecto__fuente { color: color-mix(in oklab, var(--tinta-fg) 72%, transparent); }
/* ══════════════════════════════════════════════════════════════════════
LA PORTADA — la tesis al lado de la liquidación que se arma sola
Dos columnas, la izquierda un poco más ancha que la derecha: el texto es
lo que hay que leer y el documento lo que hay que mirar. Debajo de 1000px
se apilan y el documento pasa abajo, que es el único orden que deja el H1
arriba de todo en un teléfono.
══════════════════════════════════════════════════════════════════════ */
.portada__in { display: grid; gap: clamp(36px, 5vw, 52px); align-items: center; }
@media (min-width: 1000px) {
.portada__in { grid-template-columns: 1.05fr 0.95fr; gap: 44px; }
}
.portada__tesis { min-width: 0; }
/* La prueba se apoya en el borde izquierdo de la columna, no centrada: acá
la tesis está alineada a la izquierda y no en el eje de la página. */
.portada__tesis .prueba { max-width: none; }
/* ── LA LIQUIDACIÓN QUE SE ARMA SOLA ─────────────────────────────────
Es la única pieza del sitio que cuenta una secuencia en el tiempo, y la
cuenta porque el argumento ES una secuencia: llega la factura, la IA la
lee, entran los rubros, el total se recalcula, y al final queda una sola
acción humana. Un documento quieto dice «mirá, una liquidación»; éste
dice «mirá quién la hizo y quién la firma».
El documento está completo en el HTML, con su total final. La clase
`liq--anim` la pone el JS y es la que apaga los pasos: sin JS, sin
`prefers-reduced-motion` y para cualquier buscador, lo que hay es el
documento entero — no un «Total del período $ 0».
─────────────────────────────────────────────────────────────────────── */
.liq { position: relative; margin: 0; min-width: 0; }
/* El mensaje entrante se apoya sobre el canto del documento y sale un poco
por la izquierda: es lo que llega DE AFUERA y dispara todo lo demás. */
.liq__wa {
position: relative; z-index: 2;
width: min(260px, 78%); margin: 0 0 -12px clamp(-20px, -2vw, 0px);
padding: 12px 14px;
border-radius: 16px 16px 16px 4px;
background: var(--card); border: 1px solid var(--rule);
box-shadow: var(--shadow-raised);
rotate: -2deg;
}
.liq__wa-de { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.liq__wa-txt { margin-top: 4px; font-size: 0.82rem; line-height: 1.45; }
.liq__chip {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 9px; padding: 3px 9px; border-radius: 999px;
background: var(--firma-soft); color: var(--firma-fuerte);
font-size: 0.68rem; font-weight: 600;
}
.liq__chip svg { width: 10px; height: 10px; flex: 0 0 auto; }
.liq__doc {
position: relative;
border: 1px solid var(--rule-strong); border-radius: 18px;
background: var(--card);
box-shadow: var(--edge-light), var(--shadow-raised);
}
.liq__cab {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
padding: 22px 22px 14px; border-bottom: 1px solid var(--rule);
}
.liq__cab-r { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.liq__cab-e { margin-top: 4px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }
.liq__cab-uf { font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.liq__cuerpo { padding: 8px 22px 18px; }
.liq__fila {
display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
padding: 9px 0; border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.liq__n { font-size: 0.68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.liq__r { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.84rem; }
.liq__r-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liq__ia {
flex: 0 0 auto; padding: 1px 5px; border-radius: 5px;
background: var(--firma-soft); color: var(--firma-fuerte);
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
}
.liq__m { font-size: 0.84rem; font-weight: 500; }
.liq__total {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
margin-top: 12px; padding-top: 12px;
border-top: 2px solid color-mix(in oklab, var(--ink) 78%, transparent);
}
.liq__total-r { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.liq__total-m { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.liq__pie {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 15px 22px;
border-top: 1px solid var(--rule);
background: var(--paper-2);
border-radius: 0 0 17px 17px;
}
.liq__pie-t[hidden] { display: none; }
.liq__pie-t { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-2); }
.liq__pie-t--ok { color: var(--firma-fuerte); font-weight: 600; }
.liq__pie-t svg { width: 11px; height: 11px; flex: 0 0 auto; }
.liq__btn {
flex: 0 0 auto;
padding: 0.55rem 1.05rem; border-radius: 10px;
background: var(--firma-fuerte); color: var(--firma-fg);
font-size: 0.8rem; font-weight: 700;
}
/* Una vez aprobada deja de ser un botón: pasa a ser el sello de lo que ya
se hizo, en el mismo dorado pero sin peso de llamada a la acción. */
.liq__btn[data-liq-hecho] { background: var(--firma-soft); color: var(--firma-fuerte); }
/* ── los pasos ───────────────────────────────────────────────────── */
/* Sólo existen mientras el JS está manejando la secuencia. */
.liq--anim [data-liq-paso] { opacity: 0; transform: translateY(7px); }
.liq--anim [data-liq-paso][data-liq-on] {
opacity: 1; transform: none;
transition: opacity 420ms cubic-bezier(0.33, 0.9, 0.4, 1), transform 420ms cubic-bezier(0.33, 0.9, 0.4, 1);
}
/* El cursor titilante del total mientras los rubros todavía están entrando:
dice que la cifra no terminó de calcularse. */
.liq--anim .liq__total-m[data-liq-contando]::after {
content: '▍'; margin-left: 2px; color: var(--firma);
animation: liq-cursor 1s steps(1) infinite;
}
@keyframes liq-cursor { 50% { opacity: 0; } }
/* El botón late hasta que se lo aprieta: es la única acción de la escena. */
.liq--anim .liq__btn:not([data-liq-hecho]) { animation: liq-latido 2s ease-in-out infinite; }
@keyframes liq-latido {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--firma) 45%, transparent); }
50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--firma) 0%, transparent); }
}
/* ══════════════════════════════════════════════════════════════════════
EL BENTO DE LA PLATAFORMA
Cuatro tarjetas, 1+2 arriba y 2+1 abajo. Es la única grilla del sitio con
anchos distintos, y acá el ancho SÍ dice algo: las dos anchas muestran
cosas que pasan a lo largo del tiempo —la cartera entera, cuatro portales
conectados— y las dos angostas, un objeto —una bandeja de archivos, un
mes—. Una grilla pareja obligaría a apretar el tablero de cartera en un
tercio de fila y a estirar un calendario a dos.
Cada tarjeta es demo arriba (224 px, alto fijo: las cuatro tienen que
alinearse) y texto abajo. La demo se difumina contra el texto en las dos
que tienen contenido que se corta al salir de cuadro; las otras dos
terminan solas y una máscara les comería el pie de la tarjeta flotante.
══════════════════════════════════════════════════════════════════════ */
.bento { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 880px) {
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento__it--ancha { grid-column: span 2; }
}
.bento__it {
position: relative; display: flex; flex-direction: column; min-width: 0;
overflow: hidden; text-decoration: none; color: var(--ink);
border: 1px solid var(--rule);
border-radius: 18px;
background: var(--card);
box-shadow: var(--edge-light), var(--shadow-rest);
transition: border-color var(--dur) var(--ease);
}
.bento__it:hover { border-color: var(--firma); }
.bento__it:hover .ico,
.bento__it:focus-visible .ico { background: var(--firma-soft); color: var(--firma); border-color: color-mix(in oklab, var(--firma) 32%, transparent); }
.bento__it:hover .h4,
.bento__it:focus-visible .h4 { color: var(--firma-fuerte); }
.bento__demo { position: relative; display: block; height: 224px; flex: 0 0 auto; overflow: hidden; }
/* El velo va sólo donde el contenido se corta al salir de cuadro. */
.bento__demo--vela { mask-image: linear-gradient(to top, transparent 3%, #000 42%); }
/* El carril del enlace vive siempre: 2,75rem de aire abajo y el texto
apoyado 1,125rem dentro de él. En reposo el resultado es el de antes —el
texto a 26px del borde—, y al subir esos 18px el carril queda libre sin
que nada se pise. Reservarlo en vez de robarle espacio a la demo es lo que
hace que el gesto también funcione con `prefers-reduced-motion`, donde el
texto no viaja y el enlace igual tiene dónde entrar.
El alto del carril va en rem y no en px —a diferencia del resto del
espaciado del sitio— porque de él depende que el enlace no se monte sobre
el párrafo: con el texto al 150 % del panel de accesibilidad, un carril de
44px fijos se queda corto justo cuando más falta hace que se lea. */
.bento__txt { display: grid; gap: 12px; padding: 4px 26px 2.75rem; transform: translateY(1.125rem); }
.bento__txt .h4 { font-size: 1.12rem; transition: color var(--dur) var(--ease); }
.bento__txt .small { max-width: 52ch; }
/* ── EL GESTO AL PASAR EL MOUSE ──────────────────────────────────────
La mecánica del BentoCard de magicui, con nuestros elementos: el fondo
se acerca, el ícono se achica desde su borde izquierdo, el bloque de
texto sube y por debajo entra el enlace que estaba escondido.
Es una excepción explícita a «sin movimiento» (2026-08-02), pedida por
el dueño el 2026-08-07: no es movimiento ambiente —nada se mueve solo—,
es la respuesta de una tarjeta al cursor, el mismo terreno donde el
sitio ya aceptaba el cruce de color. Por eso el recorrido es corto y
todo vuelve a su lugar al salir.
El texto sube 18px y no los 40 de magicui: nuestro lienzo mide 224px de
alto fijo y el contenido de dos de las cuatro demos —los cables y el
calendario— llega casi al borde de abajo. Con 40px el título se le
montaba encima. Con 18 el carril del enlace queda libre y el texto
entra en el aire que las cuatro demos ya tenían al pie.
El enlace es decorativo (`aria-hidden`): la tarjeta entera ya es un
enlace, y anunciarlo dos veces no agrega un destino, agrega ruido. */
.bento__demo,
.bento__txt,
.bento__it .ico { transition: transform 300ms cubic-bezier(0.33, 0.9, 0.4, 1); }
/* El ícono ya traía su propia transición de color desde `.ico`; sumarle la
del transform sin repetir aquélla la borraría. */
.bento__it .ico {
transform-origin: left center;
transition: transform 300ms cubic-bezier(0.33, 0.9, 0.4, 1),
background-color var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.bento__cta {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: center;
padding: 0 26px 1.25rem;
font-size: 0.9rem; font-weight: 600; color: var(--enlace);
opacity: 0; transform: translateY(1.4rem);
transition: opacity 300ms var(--ease), transform 300ms cubic-bezier(0.33, 0.9, 0.4, 1);
pointer-events: none;
}
.bento__cta .arw { margin-left: 0.35rem; }
.bento__it:hover .bento__demo,
.bento__it:focus-visible .bento__demo { transform: scale(1.04); }
.bento__it:hover .ico,
.bento__it:focus-visible .ico { transform: scale(0.8); }
.bento__it:hover .bento__txt,
.bento__it:focus-visible .bento__txt { transform: translateY(0); }
.bento__it:hover .bento__cta,
.bento__it:focus-visible .bento__cta { opacity: 1; transform: translateY(0); }
/* El velo que magicui pinta encima de toda la tarjeta al pasar el mouse.
Va en un pseudo-elemento y no en el fondo de la tarjeta porque tiene que
quedar por encima de la demo, que es opaca. */
.bento__it::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: transparent;
transition: background-color 300ms var(--ease);
}
.bento__it:hover::after,
.bento__it:focus-visible::after { background: rgb(47 30 18 / 0.03); }
html[data-tema='oscuro'] .bento__it:hover::after,
html[data-tema='oscuro'] .bento__it:focus-visible::after { background: rgb(255 253 247 / 0.04); }
/* ── demo 1 · la bandeja de documentos ───────────────────────────── */
/* Dos pistas que corren en sentidos opuestos: una sola se lee como una cinta
transportadora, dos cruzadas se leen como una bandeja que no para. */
.marq { position: absolute; left: 0; top: 26px; display: flex; }
.marq--baja { top: 118px; }
.marq__pista { display: flex; animation: marq 30s linear infinite; }
.marq__pista--rev { animation-duration: 40s; animation-direction: reverse; }
.marq__fila { display: flex; gap: 12px; padding-right: 12px; }
@keyframes marq { to { transform: translateX(-50%); } }
.doc {
display: grid; gap: 8px; width: 152px; flex: 0 0 auto;
padding: 12px 13px; border-radius: 12px;
background: var(--paper); border: 1px solid var(--rule);
box-shadow: var(--shadow-rest);
}
.doc__t { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc__ico { flex: 0 0 auto; display: inline-flex; color: var(--firma); }
.doc__ico svg { width: 13px; height: 13px; }
.doc__m { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
/* ── demo 2 · el tablero de la cartera ───────────────────────────── */
.feed { position: absolute; inset: 16px 26px 0; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 12%); }
.feed__pista { animation: feed 24s linear infinite; }
.feed__col { display: grid; gap: 10px; padding-bottom: 10px; }
@keyframes feed { to { transform: translateY(-50%); } }
.ev {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-radius: 12px;
background: var(--paper); border: 1px solid var(--rule);
box-shadow: var(--shadow-rest);
}
.ev__tag {
flex: 0 0 auto; padding: 2px 7px; border-radius: 6px;
background: var(--firma-soft); color: var(--firma-fuerte);
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ev__t { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev__t b { color: var(--ink); font-weight: 600; }
.ev__h { flex: 0 0 auto; font-size: 0.7rem; color: var(--ink-3); }
/* ── demo 3 · los cuatro accesos ─────────────────────────────────── */
/* Un cable por puerta y un pulso que lo recorre. El pulso es un guión que
viaja por el trazo (`stroke-dashoffset` sobre `pathLength: 1`), así que no
hace falta medir la curva ni animar nada con JS. */
.haz { position: absolute; inset: 0; display: grid; place-items: center; }
.haz > svg { position: absolute; width: 300px; height: 220px; }
.haz__base { stroke: var(--rule-strong); stroke-width: 1.2; }
.haz__pulso {
stroke: var(--firma); stroke-width: 1.8; stroke-linecap: round;
stroke-dasharray: 0.16 0.84; stroke-dashoffset: 1;
animation: haz 3.2s linear infinite;
}
@keyframes haz { to { stroke-dashoffset: 0; } }
.haz__marca {
position: absolute; left: calc(50% - 150px + 8px); top: calc(50% - 110px + 92px);
display: inline-flex; align-items: center; justify-content: center;
width: 84px; height: 36px; border-radius: 11px;
border: 1px solid var(--firma); background: var(--card);
color: var(--firma-fuerte); font-weight: 700; letter-spacing: -0.01em;
}
.puerta {
position: absolute; left: calc(50% - 150px + 180px);
display: inline-flex; align-items: center; gap: 7px;
height: 30px; padding: 0 12px 0 9px; border-radius: 999px;
border: 1px solid var(--rule); background: var(--card);
box-shadow: var(--shadow-rest);
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-2); white-space: nowrap;
}
.puerta__ico { display: inline-flex; color: var(--ink-3); }
.puerta__ico svg { width: 14px; height: 14px; }
/* ── demo 4 · el mes con la reserva ──────────────────────────────── */
.cal { position: absolute; inset: 0; }
.cal__mes { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
/* La altura de celda y el `top` de la grilla están calculados para que las
cinco filas de julio terminen ARRIBA de la tarjeta del cargo: 34 + 15 de
encabezado + 5 × 22 = 159, y el cargo empieza en 168. Si se toca uno de
los tres números, la tarjeta se come el 30 y el 31. */
.cal__grilla {
position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
width: 224px; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
}
.cal__s { font-size: 0.62rem; line-height: 15px; color: var(--ink-3); }
.cal__d { display: grid; place-items: center; height: 22px; border-radius: 7px; font-size: 0.7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cal__d--res { background: var(--firma-soft); color: var(--firma-fuerte); font-weight: 700; box-shadow: inset 0 0 0 1px var(--firma); }
.cal__cargo {
position: absolute; right: 16px; bottom: 10px;
display: grid; gap: 3px;
padding: 9px 13px; border-radius: 11px;
background: var(--card); border: 1px solid var(--rule);
box-shadow: var(--edge-light), var(--shadow-raised);
}
.cal__cargo-t { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--firma-fuerte); }
.cal__cargo-m { font-size: 0.74rem; font-weight: 600; }
/* ── LA FRANJA DE IA ─────────────────────────────────────────────── */
/* Canon DoorLoop: cada página lleva su franja del AI Assistant — mismo
dibujo en todo el sitio, contenido distinto en cada página: qué hace la
IA en ESA área. El fondo es el violeta del copiloto en profundidad
(--ia-fondo): donde DoorLoop pone su azul, CONSO pone el color real de
su IA. No es la noche (--noche sigue siendo una sola franja, la del
WhatsApp de las 02:14): es otra hora y otro color. La aurora son dos
resplandores violetas fijos detrás del contenido; fijos de verdad —
sin movimiento, como todo el sitio.
La ley del color adentro: el violeta claro --ia-luz marca lo que hizo
o dice la IA (la chispa, los pasos, la cita); el dorado --firma
aparece únicamente en el botón que aprueba — porque eso sigue
significando el dorado. El panel del copiloto es ilustración:
aria-hidden, nada recibe foco. */
.ia { position: relative; overflow: hidden; background: var(--ia-fondo); color: var(--ia-fg); }
.ia::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(58% 74% at 82% 16%, rgb(164 123 199 / 0.2), transparent 70%),
radial-gradient(44% 62% at 6% 90%, rgb(139 93 175 / 0.14), transparent 72%);
}
.ia > .wrap { position: relative; }
.ia .h2, .ia .h3 { color: var(--ia-fg); }
.ia .lead, .ia .body, .ia .small { color: var(--ia-fg2); }
/* La pastilla del asistente (el «AI Assistant» de DoorLoop). */
.ia__pill {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid color-mix(in oklab, var(--ia-luz) 42%, transparent);
border-radius: 999px; padding: 6px 14px;
font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
color: var(--ia-luz);
background: color-mix(in oklab, var(--ia-luz) 10%, transparent);
}
.ia__chispa { display: inline-flex; color: var(--ia-luz); flex: none; }
.ia__chispa svg { width: 15px; height: 15px; }
/* El enlace de continuidad, en la luz del copiloto. */
.link--ia { color: var(--ia-luz); border-color: var(--ia-rule); }
.link--ia:hover { color: var(--ia-fg); border-color: var(--ia-luz); }
/* El panel del copiloto: la conversación que esta página protagoniza. */
.ia__panel {
position: relative;
margin: 0 auto; width: 100%; max-width: 460px;
background: color-mix(in oklab, var(--ia-carta) 94%, transparent);
border: 1px solid color-mix(in oklab, var(--ia-luz) 26%, transparent);
border-radius: 16px;
padding: 18px 18px 16px;
display: grid; gap: 12px;
box-shadow:
0 30px 70px rgb(12 6 22 / 0.4),
0 0 46px rgb(164 123 199 / 0.12);
}
.ia__panel--ancha { max-width: 540px; }
/* Lo que escribís vos: burbuja a la derecha, sin adornos. */
.ia__vos {
justify-self: end; max-width: 88%;
background: color-mix(in oklab, var(--ia-fg) 10%, transparent);
border-radius: 12px 12px 4px 12px;
padding: 9px 13px;
font-size: 0.86rem; line-height: 1.5; color: var(--ia-fg);
}
.ia__vos small { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--ia-fg2); margin-top: 4px; text-align: right; }
/* Lo que contesta el copiloto: siempre marcado con la chispa. */
.ia__resp { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.ia__resp > .ia__chispa { margin-top: 3px; }
.ia__resp > .ia__chispa svg { width: 13px; height: 13px; }
.ia__cuerpo { display: grid; gap: 10px; min-width: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ia-fg); }
/* Fila de datos: rótulo a la izquierda, cifra tabular a la derecha. */
.ia__filas { display: grid; }
.ia__filas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; font-size: 0.82rem; color: var(--ia-fg2); }
.ia__filas > div + div { border-top: 1px dashed var(--ia-rule); }
.ia__filas b { color: var(--ia-fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Campos leídos de un documento: lo que escribió la máquina va en mono,
y el borde punteado es el idioma del borrador — todavía no lo firmaste. */
.ia__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ia__campos > div { min-width: 0; border: 1px dashed var(--ia-rule); border-radius: 8px; padding: 7px 10px; }
.ia__campos i { display: block; font-style: normal; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ia-fg2); }
.ia__campos b { display: block; font-family: var(--mono); font-size: 0.76rem; font-weight: 500; color: var(--ia-fg); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Los pasos del razonamiento: cómo llegó a la respuesta. */
.ia__pasos { display: grid; }
.ia__paso { position: relative; padding: 0 0 12px 22px; font-size: 0.82rem; line-height: 1.5; color: var(--ia-fg2); }
.ia__paso::before { content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--ia-luz); }
.ia__paso::after { content: ''; position: absolute; left: 4px; top: 18px; bottom: 2px; width: 1px; background: var(--ia-rule); }
.ia__paso:last-child { padding-bottom: 0; }
.ia__paso:last-child::after { display: none; }
.ia__paso b { color: var(--ia-fg); font-weight: 600; }
/* La cita del documento: de dónde salió la respuesta, con lo hallado marcado. */
.ia__cita { border-left: 2px solid var(--ia-luz); padding: 2px 0 2px 12px; font-size: 0.84rem; line-height: 1.55; color: var(--ia-fg); }
.ia__cita mark { background: color-mix(in oklab, var(--ia-luz) 26%, transparent); color: var(--ia-fg); border-radius: 3px; padding: 0 2px; }
/* Barras comparativas: forma, no cifras — la cifra va al lado. */
.ia__barras { display: grid; gap: 8px; }
.ia__barras > div { display: grid; grid-template-columns: 46px 1fr 84px; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--ia-fg2); }
.ia__barras i { display: block; height: 10px; border-radius: 3px; background: color-mix(in oklab, var(--ia-fg) 26%, transparent); }
.ia__barras .hoy i { background: var(--ia-luz); }
.ia__barras b { text-align: right; color: var(--ia-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Lista de verificación: lo que revisó, y lo que te señala a vos. */
.ia__checks { display: grid; gap: 7px; }
.ia__checks li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.82rem; line-height: 1.5; color: var(--ia-fg2); }
.ia__checks .si { color: var(--ia-luz); font-weight: 700; flex: none; }
.ia__checks .ojo { color: var(--ia-fg); font-weight: 700; flex: none; }
.ia__checks b { color: var(--ia-fg); font-weight: 600; }
/* El pie del panel: la traza de máquina en mono, o la acción que espera. */
.ia__meta { font-family: var(--mono); font-size: 0.68rem; line-height: 1.55; color: var(--ia-fg2); border-top: 1px solid var(--ia-rule); padding-top: 10px; }
.ia__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-top: 1px solid var(--ia-rule); padding-top: 12px; }
.ia__accion .btn { pointer-events: none; }
.ia__accion .nota { font-size: 0.74rem; color: var(--ia-fg2); }
/* Botón neutro del panel: para cuando la acción no es una firma. */
.ia__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ia-rule); border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--ia-fg); background: transparent; }
/* ── movimiento reducido ─────────────────────────────────────────── */
/* El sitio tiene tres gestos con movimiento: la línea del menú, la flecha
y el despliegue de una pregunta. Para quien pidió menos movimiento en su
sistema, los tres pasan a ser un cambio de estado sin recorrido — no
desaparecen, que es lo que importa: la línea sigue marcando dónde está
el cursor y la respuesta sigue abriéndose. */
@media (prefers-reduced-motion: reduce) {
.nav__t::after,
.nav__btn .caret,
.mega__link--ico > span:last-child::after,
.faq__ico,
.faq__cuerpo,
.redes a,
.tarjeta__foto img,
.ftr__col a, .ftr__pass a, .ftr__legal a {
transition-duration: 0s;
}
.nav__btn:hover .caret { transform: none; }
.redes a:hover { transform: none; }
a.tarjeta:hover .tarjeta__foto img,
a.tarjeta:focus-visible .tarjeta__foto img { transform: none; }
/* La tarjeta de nota pierde el recorrido —no se levanta ni le crece la
portada— y conserva lo que informa: la sombra que la despega y el título
en color de enlace siguen diciendo «esto se puede abrir». */
a.nota, a.notafila, a.nota .nota__banner, a.notafila .nota__banner { transition-duration: 0s; }
a.nota:hover, a.nota:focus-visible,
a.notafila:hover, a.notafila:focus-visible { transform: none; }
a.nota:hover .nota__banner, a.nota:focus-visible .nota__banner,
a.notafila:hover .nota__banner, a.notafila:focus-visible .nota__banner { transform: none; }
/* El gesto de la tarjeta pierde el recorrido, no el enlace: el texto se
queda arriba —en el lugar que ya ocupa cuando el gesto termina— y el
«Ver…» aparece en su carril sin viajar. Que el destino se anuncie al
pasar el mouse es información, y eso se conserva. */
.bento__demo, .bento__txt, .bento__it .ico,
.bento__cta, .tarjeta__pie, .tarjeta__cta { transition-duration: 0s; }
.bento__it:hover .bento__demo, .bento__it:focus-visible .bento__demo,
.bento__it:hover .ico, .bento__it:focus-visible .ico { transform: none; }
.bento__txt, .tarjeta__pie, .bento__cta, .tarjeta__cta { transform: none; }
/* Las demos del bento se detienen enteras. No se esconden: quietas siguen
mostrando una bandeja de documentos, un tablero de eventos y cuatro
cables — que es lo que la tarjeta viene a decir. */
.marq__pista,
.feed__pista,
.haz__pulso { animation: none; }
/* El aro del botón de WhatsApp se apaga entero. El botón no pierde nada:
verde, fijo en la esquina y con su nombre al lado, ya se ve sin latir. */
.wafab::after { animation: none; }
/* La liquidación del hero ni siquiera arranca: el JS no le pone
`liq--anim` si el sistema pidió menos movimiento, y sin esa clase el
documento ya está entero. Estas dos líneas son el cinturón por si
alguien cambia la preferencia con la página abierta. */
.liq--anim [data-liq-paso] { opacity: 1; transform: none; }
.liq--anim .liq__btn { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════
EL ENLACE ROSA DEL AI COPILOT
Todo enlace de navegación que lleva a /producto/copiloto-ia/ va en rosa
(canon DoorLoop: su «AI» es el único destino de color en el menú). Se
selecciona por el href y no por una clase: un enlace nuevo a la página
de la IA sale rosa solo, sin acordarse de nada. Las tarjetas enteras
(.card, .mas__it, el bento) quedan afuera a propósito: pintar una
tarjeta completa de rosa sería un cartel, no un enlace.
══════════════════════════════════════════════════════════════════════ */
.mega__link[href^='/producto/copiloto-ia/'],
.drawer__body a[href^='/producto/copiloto-ia/'],
.busca__it[href^='/producto/copiloto-ia/'],
.link[href^='/producto/copiloto-ia/'] { color: var(--ia-enlace); }
.mega__link[href^='/producto/copiloto-ia/']:hover,
.mega__link[href^='/producto/copiloto-ia/']:focus-visible,
.drawer__body a[href^='/producto/copiloto-ia/']:hover,
.link[href^='/producto/copiloto-ia/']:hover,
.link[href^='/producto/copiloto-ia/']:focus-visible { color: var(--ia-enlace-hover); }
/* Sobre fondos oscuros el rosa sube al registro claro: la franja violeta
de la IA y el pie, que es de tinta en los dos temas. */
.section.ia a[href^='/producto/copiloto-ia/'] {
color: var(--ia-enlace-claro);
border-color: color-mix(in oklab, var(--ia-enlace-claro) 40%, transparent);
}
.section.ia a[href^='/producto/copiloto-ia/']:hover,
.section.ia a[href^='/producto/copiloto-ia/']:focus-visible {
color: var(--ia-enlace-claro-hover);
border-color: var(--ia-enlace-claro);
}
.ftr a[href^='/producto/copiloto-ia/'] { color: var(--ia-enlace-claro); }
.ftr a[href^='/producto/copiloto-ia/']:hover,
.ftr a[href^='/producto/copiloto-ia/']:focus-visible { color: var(--ia-enlace-claro-hover); }
/* La pastilla «Nueva» que acompaña al enlace del pie. Vive sobre la tinta,
así que usa el registro claro en los dos temas. */
.chip--ia {
border-color: color-mix(in oklab, var(--ia-enlace-claro) 55%, transparent);
color: var(--ia-enlace-claro);
background: color-mix(in oklab, var(--ia-enlace-claro) 12%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════
LA TABLA COMPARATIVA (/comparar/)
La misma tabla de funcionalidades que publica la landing desplegada
(comparison-table.tsx), traída al lenguaje del wireframe: la columna
CONSO se enciende con el dorado tenue y las demás quedan en tinta. En
pantallas angostas la caja scrollea; la página no. ══════════════════ */
.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp table { width: 100%; min-width: 680px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 13px 14px; text-align: center; }
.cmp thead th {
font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
border-bottom: 2px solid var(--rule-strong);
}
.cmp thead th:first-child, .cmp tbody th { text-align: left; }
.cmp tbody th {
font-weight: 500; font-size: 0.92rem; color: var(--ink);
}
.cmp tbody th, .cmp tbody td { border-top: 1px solid var(--rule); }
.cmp tbody tr:first-child th, .cmp tbody tr:first-child td { border-top: 0; }
.cmp .cmp--conso { background: var(--firma-soft); }
.cmp thead .cmp--conso { color: var(--firma-fuerte); }
.cmp__si svg, .cmp__no svg { display: inline-block; vertical-align: -3px; }
.cmp__si { color: var(--firma-fuerte); }
.cmp__no { color: var(--ink-3); }
.cmp__nd { color: var(--ink-3); }
.cmp__txt { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }
/* ── la comparativa en el teléfono ────────────────────────────────────
Seis columnas y 313px. La caja ya scrollaba, pero scrollar a ciegas no
sirve: apenas se corría un dedo se perdía de vista de qué fila se estaba
leyendo, y quedaba una pantalla de tildes y cruces sin nombre al lado.
Dos cosas lo arreglan sin tocar el marcado:
· la primera columna se ancla al borde izquierdo, así el nombre de la
funcionalidad viaja con la fila —es la columna que da sentido a las
otras cinco—;
· un renglón fijo al pie avisa que hay tabla a la derecha. Sin él, lo
único que decía que se podía deslizar era una columna cortada al
medio, que se lee como un defecto y no como una invitación.
El ancho mínimo baja de 680 a 560: con menos aire lateral entran las
mismas seis columnas y hay menos que recorrer. */
@media (max-width: 720px) {
/* `separate` y no `collapse`: con los bordes colapsados el navegador
reparte cada filete entre dos celdas y las celdas dejan de poder
anclarse —la primera columna quedaba corrida y la de al lado se le
metía por debajo—. Los filetes de esta tabla son `border-top` de cada
celda, así que separados se dibujan igual; sólo hay que apagar el
espacio entre celdas, que `separate` trae en 2px. */
.cmp table { min-width: 560px; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 11px 10px; }
/* El aire lateral pasa de la caja a las celdas. La caja es la que
scrollea, y una celda anclada con `left: 0` se detiene en el borde de
su contenido, no en el de su relleno: con los 28px puestos en la caja,
la columna fija quedaba clavada 28px adentro y la de al lado se veía
por el hueco que dejaba a la izquierda. El aire vertical se queda. */
.cmp { padding-inline: 0 !important; }
.cmp thead th:first-child,
.cmp tbody th { padding-left: 18px; }
.cmp thead th:last-child,
.cmp tbody tr > *:last-child { padding-right: 18px; }
.cmp thead th:first-child,
.cmp tbody th {
position: sticky; left: 0; z-index: 1;
background: var(--card);
/* Un filete a la derecha, no una sombra: dice «esto está fijo» sin
ensuciar el fondo cuando la tabla está sin correr. */
box-shadow: 1px 0 0 var(--rule);
}
/* La cabecera de la primera columna se pisa con la fila de títulos: los
dos son sticky y hay que decidir cuál queda arriba. */
.cmp thead th:first-child { z-index: 2; }
.cmp::after {
content: 'Deslizá la tabla para ver las demás columnas →';
position: sticky; left: 0;
display: block; padding: 12px 18px 0;
font-size: 0.78rem; color: var(--ink-3);
}
}
/* ══════════════════════════════════════════════════════════════════════
/ai-info/ — la referencia oficial, copiada de producción. Dos piezas
que el resto del sitio no usa: la ficha de datos (dt/dd) y la lista
numerada de «Cómo funciona», donde el orden sí es información.
══════════════════════════════════════════════════════════════════════ */
.infoficha { display: grid; margin: 0; border-block: 1px solid var(--rule); }
.infoficha > div { display: grid; gap: 4px 24px; padding: 12px 0; }
.infoficha > div + div { border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .infoficha > div { grid-template-columns: 190px 1fr; } }
.infoficha dt {
font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
padding-top: 3px;
}
.infoficha dd { margin: 0; font-size: 0.93rem; color: var(--ink-2); line-height: 1.55; }
.lista--num { counter-reset: paso; list-style: none; margin: 0; }
.lista--num li::before {
counter-increment: paso; content: counter(paso, decimal-leading-zero);
font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
color: var(--firma-fuerte); margin-top: 3px;
}
/* ══════════════════════════════════════════════════════════════════════
EL BLOG (/blog/) — la anatomía del blog de DoorLoop, en el idioma de
CONSO: héroe con suscripción + nota destacada, grilla de tarjetas con
portada dibujada, categorías con píldoras, fila de notas + promo del
centro de ayuda y la franja de recursos.
Las portadas no son imágenes: son un lienzo pastel con el rótulo de la
nota. Reutilizan las clases .vista--* —que solo fijan --vista-lienzo—
así el tema oscuro ya está resuelto sin duplicar nada.
══════════════════════════════════════════════════════════════════════ */
/* Con .card delante a propósito: `a.card` fija display:block y le gana a
una clase sola. */
.card.nota, .nota { display: flex; flex-direction: column; gap: 8px; }
.nota__portada {
display: flex; flex-direction: column; justify-content: space-between;
aspect-ratio: 16 / 9; border-radius: 12px; padding: 14px 16px;
background: var(--vista-lienzo, var(--paper-2));
border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
margin-bottom: 6px;
}
.nota__portada b { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); }
.nota__portada b i { font-style: normal; color: var(--firma); }
.nota__rotulo {
font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 700;
letter-spacing: -0.02em; line-height: 1.18; max-width: 14ch; color: var(--ink);
}
/* Las portadas ilustradas (banners SVG estilo DoorLoop, ola 9). Llegan por
![]()
, así que sus colores son fijos: el tema oscuro no los reescribe,
igual que las fotos.
El banner va DENTRO de un marco y no suelto en la tarjeta: el recorte es
lo que le da al zoom del hover un borde contra el que crecer. Sin marco, la
imagen agrandada se sale de sus propias esquinas redondeadas y se monta
sobre el papel de la tarjeta. El radio y el borde —lo que antes tenía el
propio ![]()
— viven ahora en el marco, que es lo que no se mueve. */
.nota__marco {
display: block; overflow: hidden;
border-radius: 12px;
border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
margin-bottom: 6px;
}
.nota__banner {
/* height:auto es imprescindible: sin él, el atributo height="500" del img
gana y object-fit recorta el banner como un zoom. */
display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
}
/* ── EL GESTO DE LA TARJETA DE NOTA (canon DoorLoop, /blog) ──────────
Es el mismo gesto que DoorLoop le puso a sus tarjetas de nota, con sus
mismos tiempos: la tarjeta se levanta 3px con una sombra larga (0,3s), la
portada crece un 5 % dentro de su marco (0,4s) y el título vira al color
de enlace (0,3s). Tres cosas a la vez, ninguna de ellas un movimiento de
la página: la tarjeta responde en su lugar.
Es una excepción declarada a «sin movimiento en todo el sitio», como ya lo
son el riel de perfiles y el mosaico: acá una tarjeta ENTERA es un enlace,
y sin el gesto no hay nada que anuncie que lo es hasta que el cursor cae
justo sobre el título.
Va sobre `.nota` a secas —no sobre `.card.nota`— para que valga igual en
la portada y en el blog, que es donde el pedido decía «en todos lados». */
a.nota, a.notafila { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
a.nota .nota__banner, a.notafila .nota__banner { transition: transform 0.4s ease; }
a.nota .h4, a.notafila .h4 { transition: color 0.3s ease; }
/* Gana a `a.card:hover`, que está más arriba con la misma especificidad: la
tarjeta de nota no se enmarca en dorado. El dorado es la firma; una nota
del blog no se firma. */
a.nota:hover, a.nota:focus-visible,
a.notafila:hover, a.notafila:focus-visible {
transform: translateY(-3px);
border-color: var(--rule-strong);
box-shadow: 0 12px 30px rgb(44 26 16 / 0.12);
}
a.nota:hover .h4, a.nota:focus-visible .h4,
a.notafila:hover .h4, a.notafila:focus-visible .h4 { color: var(--enlace); }
a.nota:hover .nota__banner, a.nota:focus-visible .nota__banner,
a.notafila:hover .nota__banner, a.notafila:focus-visible .nota__banner { transform: scale(1.05); }
/* De noche una sombra marrón al 12 % no existe: el peso lo hace la sombra
profunda del tema, igual que en el resto de las superficies oscuras. */
html[data-tema='oscuro'] a.nota:hover, html[data-tema='oscuro'] a.nota:focus-visible,
html[data-tema='oscuro'] a.notafila:hover, html[data-tema='oscuro'] a.notafila:focus-visible { box-shadow: var(--shadow-raised); }
/* El mismo banner dentro del héroe de la nota. */
.bandera {
display: block; width: 100%; max-width: 640px; height: auto;
border-radius: 14px;
border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.nota__cat { font-size: 0.78rem; font-weight: 600; color: var(--enlace); }
a.nota:hover .nota__cat { text-decoration: underline; }
/* La nota en fila: miniatura + título, como los «Product Updates». */
.card.notafila, .notafila { display: flex; align-items: center; gap: 16px; }
.notafila .nota__portada { width: 132px; aspect-ratio: 16 / 10; flex: none; margin: 0; padding: 9px 11px; border-radius: 9px; }
.notafila .nota__marco { width: 132px; flex: none; margin: 0; border-radius: 9px; }
.notafila .nota__portada .nota__rotulo { font-size: 0.68rem; max-width: none; }
.notafila .nota__portada b { font-size: 0.54rem; }
/* Las píldoras de categoría: mismo trato que .vista__pill--activa —la
elegida se entinta— pero como botones de verdad. */
.pildoras { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pildora {
border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink-2);
border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 0.9rem;
font-weight: 600; cursor: pointer;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pildora:hover { border-color: var(--ink-3); color: var(--ink); }
.pildora[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* El boletín del héroe: campo + botón en una sola línea que se parte en
pantallas angostas. */
.boletin { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 480px; }
.boletin input {
flex: 1; min-width: 220px; border: 1px solid var(--rule-strong); background: var(--card);
color: var(--ink); border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 0.95rem;
}
.boletin input::placeholder { color: var(--ink-3); }
.boletin input:focus { outline: 2px solid var(--firma); outline-offset: 1px; border-color: var(--firma); }
/* El colage de la franja de recursos: cuatro mini-portadas enlazadas. */
.colage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.colage a {
display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
border-radius: 12px; padding: 12px 14px; text-decoration: none;
background: var(--vista-lienzo, var(--paper-2));
border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.colage a:hover { transform: translateY(-2px); box-shadow: var(--shadow-rest); }
.colage b { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); }
.colage b i { font-style: normal; color: var(--firma); }
.colage span { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
/* ══════════════════════════════════════════════════════════════════════
/modelos/ — vitrina de los nueve PDF que emite CONSO. Las vistas previas
son capturas reales (site/assets/muestras/), no dibujos: `.muestra`
enmarca la miniatura y enlaza al PDF; `.muestra-marcada` + `.marcador`
ponen un círculo numerado en un punto (%) de la imagen, atado a un ítem
de `.desglose__lista` con el mismo número — el desglose ampliado de la
liquidación, página por página.
══════════════════════════════════════════════════════════════════════ */
.muestra {
display: block; border-radius: 12px; overflow: hidden; background: var(--card);
border: 1px solid var(--rule-strong); box-shadow: var(--shadow-rest);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.muestra img { display: block; width: 100%; height: auto; }
.muestra:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.muestra-marcada {
margin: 0; border-radius: 12px; overflow: hidden;
background: var(--card); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-rest);
}
/* Posicionar los `.marcador` (top/left en %) sobre la IMAGEN sola: el
contenedor con position:relative tiene que medir lo mismo que la imagen,
no imagen+figcaption, o el % se calcula contra un alto que no es el de
la página escaneada y los círculos caen corridos hacia abajo. */
.muestra-marcada__img { position: relative; }
.muestra-marcada__img img { display: block; width: 100%; height: auto; }
.muestra-marcada figcaption {
padding: 7px 10px; text-align: center; font-size: 0.72rem; color: var(--ink-3);
background: var(--paper-2); border-top: 1px solid var(--rule);
}
.n-badge {
flex: none; width: 26px; height: 26px; border-radius: 999px;
background: var(--firma); color: var(--firma-fg);
display: grid; place-items: center;
font-family: var(--mono); font-size: 0.76rem; font-weight: 700;
}
.marcador { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--card); }
.desglose__lista { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.desglose__lista li { display: flex; gap: 12px; align-items: flex-start; }
.desglose__lista .n-badge { margin-top: 1px; }
.desglose__lista i { font-style: normal; color: var(--ink-3); }
/* ══════════════════════════════════════════════════════════════════════
EL LISTADO DE SUBPROCESADORES (/subprocesadores/)
Anexo de la Política de Privacidad: nueve proveedores por cuatro
atributos. Es la única tabla del sitio con texto corrido en todas las
celdas —la comparativa de `/comparar/` lleva tildes y cruces—, así que
no reusa `.cmp`: ahí todo está centrado, y una columna de prosa
centrada no se puede leer de un barrido. Misma mecánica de fondo, eso
sí: la caja scrollea y la página no. ═══════════════════════════════ */
.tsub { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 22px; }
.tsub table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.tsub th, .tsub td { padding: 13px 14px; vertical-align: top; }
.tsub thead th {
font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
border-bottom: 2px solid var(--rule-strong); white-space: nowrap;
}
.tsub tbody th { font-weight: 600; font-size: 0.95rem; color: var(--ink); white-space: nowrap; }
.tsub tbody td { font-size: 0.92rem; color: var(--ink-2); }
.tsub tbody th, .tsub tbody td { border-top: 1px solid var(--rule); }
.tsub tbody tr:first-child th, .tsub tbody tr:first-child td { border-top: 0; }
/* El país no va en mono aunque sea un dato y no prosa: la ley del mono de
este sitio (ver la cabecera del archivo) lo reserva para texto que
escribió la máquina, y un rótulo en mono hace ver la página como una
terminal. Sólo se lo protege de partirse en dos renglones. */
.tsub__pais { white-space: nowrap; }
/* ── el listado en el teléfono ────────────────────────────────────────
Mismo remedio que la comparativa de `/comparar/`, por el mismo motivo:
con cuatro columnas en 390px se scrollea a ciegas y a la tercera fila ya
no se sabe de qué proveedor se está leyendo. La columna del nombre se
ancla al borde y un renglón al pie avisa que hay tabla a la derecha.
`separate` en lugar de `collapse` porque con los bordes colapsados el
navegador reparte cada filete entre dos celdas y la celda anclada deja
de poder quedarse quieta; los filetes de esta tabla son `border-top` de
cada celda, así que separados se dibujan igual. */
@media (max-width: 720px) {
.tsub table { min-width: 620px; border-collapse: separate; border-spacing: 0; }
.tsub th, .tsub td { padding: 11px 10px; }
.tsub thead th:first-child,
.tsub tbody th {
position: sticky; left: 0; z-index: 1;
/* La tabla apoya sobre el fondo de la página, no sobre una tarjeta. */
background: var(--paper);
box-shadow: 1px 0 0 var(--rule);
}
/* Las dos celdas sticky de la esquina se pisan: gana la de la cabecera. */
.tsub thead th:first-child { z-index: 2; }
.tsub::after {
content: 'Deslizá la tabla para ver el resto de las columnas →';
position: sticky; left: 0;
display: block; padding-top: 12px;
font-size: 0.78rem; color: var(--ink-3);
}
}