/* =====================================================================
   Lemnis · sitio público

   POR QUÉ ESTO SE REHIZO
   La primera versión era negra de arriba abajo, con un solo color de
   acento, etiquetas en mono mayúsculas por todas partes y tarjetas con
   borde de un píxel. Está bien construida y es exactamente el aspecto
   por defecto de una página generada por IA: quien ve veinte al mes las
   reconoce a la primera, y una web que parece automática dice de tu
   producto que también lo es.

   Y había un problema de fondo: la referencia son Kommo y HubSpot, y las
   dos tienen la web en CLARO. Copiar su estructura sobre un lienzo negro
   era quedarse a medias.

   CÓMO ESTÁ RESUELTO: BANDAS.
   La página alterna. Portada, precios y cierre en claro; las dos
   secciones que enseñan el producto, en oscuro. Cada banda declara sus
   propios tokens y todo lo de dentro se pinta con ellos, así que el
   mismo componente —una tarjeta, un botón, una tabla— funciona en las
   dos sin una sola regla duplicada.

   El beneficio de verdad no es el ritmo visual: es que LA APLICACIÓN ES
   OSCURA. Sobre una banda clara, una captura oscura del producto salta a
   la vista. Es el truco que usan los dos y por eso sus capturas se ven
   como producto y no como decoración.

   EL NARANJA SIGUE SIENDO ESCASO. El manual dice menos del 5% y aquí se
   respeta en las dos bandas.
   ===================================================================== */
:root{
  --xenon:#FF7A2F; --indigo:#2B3A8C; --indigo-lift:#4356BE; --salvia:#7FA893;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* Se mide contra la PANTALLA, no contra un número fijo: en un monitor
     grande un tope en píxeles dejaba dos franjas de nada a los lados. */
  --ancho:min(94vw, 108rem);
}

/* ---------- las dos bandas ----------
 *
 * SE FUERON LAS BANDAS OSCURAS.
 *
 * Tenían sentido cuando las tarjetas también eran oscuras. Al pasar las
 * sesenta y ocho a tonos pastel, una banda negra dejó de ser una banda y
 * pasó a ser una tira negra con cajas de colores flotando encima: dos
 * ideas distintas peleándose en la misma sección.
 *
 * Kommo y HubSpot son claras de arriba abajo, y no por falta de valentía:
 * cuando el contenido es color —capturas, fotos, tarjetas— el fondo tiene
 * que callarse.
 *
 * La alternancia se queda, porque separar secciones sigue haciendo falta.
 * Solo que ahora es blanco contra un lavanda muy pálido, que es el mismo
 * gesto con una décima parte del ruido.
 *
 * La clase se llamaba `.oscuro` y ahora sería un nombre que miente, así
 * que pasa a `.alterna` en las nueve páginas. Un nombre de color en el
 * CSS es una trampa: describe cómo se ve hoy, no qué hace.
 *
 * Un solo juego de nombres. Nada de aquí para abajo vuelve a mencionar
 * un color: todo se pinta con `--tinta`, `--borde`, `--fondo-2`. */
.claro{
  --fondo:#FFFFFF; --fondo-2:#F7F6FB; --fondo-3:#EFEDF6;
  --tinta:#0B0D12; --tinta-dim:#4C525F; --tinta-mute:#5F6577;
  --borde:#DDE1EA; --borde-soft:#EAEDF3;
  /* NO SUBIR ESTE NARANJA.
     El #C2551C que habia aqui solo llegaba a 4,5:1 sobre blanco puro, y
     falla en los otros cinco fondos claros del sitio: banda alterna 4,17,
     pie 3,73, tarjeta crema 4,10, cielo 3,88, menta 3,92. Se ve mas vivo y
     no se lee. El #A94A14 pasa en los seis, y es ademas el mismo acento
     que usa la aplicacion. */
  --acento-texto:#A94A14;
  --sombra:0 1px 2px rgba(11,13,18,.05), 0 12px 32px -14px rgba(11,13,18,.18);
  background:var(--fondo); color:var(--tinta);
}
.alterna{
  --fondo:#F5F4FA; --fondo-2:#FFFFFF; --fondo-3:#EDEBF5;
  --tinta:#0B0D12; --tinta-dim:#4C525F; --tinta-mute:#5F6577;
  --borde:#DFDCEA; --borde-soft:#EBE8F3;
  --acento-texto:#A94A14;
  --sombra:0 1px 2px rgba(11,13,18,.05), 0 12px 32px -14px rgba(11,13,18,.16);
  background:var(--fondo); color:var(--tinta);
}

*{box-sizing:border-box}
/* La cabecera es pegajosa: sin esto, saltar a un ancla o recargar a media
   pagina deja el titular escondido detras de ella. */
html{scroll-padding-top:5.5rem}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:#F2F3F7; color:#0B0D12;
  font-family:var(--sans); font-weight:500; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

.saltar{position:absolute;left:1rem;top:-3rem;background:var(--xenon);color:#140A03;
  padding:.5rem .9rem;border-radius:6px;font-weight:700;z-index:60;transition:top .15s}
.saltar:focus{top:.75rem}
:focus-visible{outline:2px solid var(--xenon);outline-offset:3px}

/* La etiqueta de encima de cada título. ANTES ESTABA EN TODAS PARTES y
   era media firma del aspecto genérico. Ahora se usa con cuentagotas:
   solo cuando dice algo que el título no dice. */
/* LA ETIQUETA DE SECCIÓN DEJA DE SER LA FIRMA DE UNA IA.
 *
 * Iba en monoespaciada, MAYÚSCULAS y con las letras separadas .16em,
 * encima de cada sección de cada página. Esa combinación exacta es hoy la
 * marca de agua del diseño generado: aparece en el noventa por ciento de
 * las páginas que salen de una IA, y quien mira muchas la reconoce sin
 * saber que la reconoce.
 *
 * El mismo patrón se quitó del interior de la aplicación esta mañana por
 * el mismo motivo. Dejarlo aquí era arreglar la mitad.
 *
 * Ahora es lo que dice ser: una palabra pequeña que nombra la sección.
 * En el color del acento, que además le da un trabajo — separar visualmente
 * el rótulo del titular que viene debajo. */
.etiqueta{font-size:.84rem;font-weight:700;letter-spacing:-.01em;
  color:var(--acento-texto);margin:0 0 .7rem}

/* En el pie siguen siendo encabezados de columna y ahí sí conviene que se
   apaguen: compiten con los enlaces, que son lo que se pulsa. */
.pie .etiqueta{color:var(--tinta-mute);font-size:.8rem}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(242,243,247,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid #DDE1EA}
.franja{max-width:var(--ancho);margin:0 auto;padding:.9rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem}
@media(min-width:820px){.franja{padding-left:2.5rem;padding-right:2.5rem}}
.marca{display:flex;align-items:center;gap:.55rem;font-weight:900;
  letter-spacing:-.045em;font-size:1.2rem;text-decoration:none;flex-shrink:0;
  color:#0B0D12}
.menu{display:none;gap:1.5rem;margin-left:auto;font-size:.95rem}
.menu a{color:#4C525F;text-decoration:none}
.menu a:hover,.menu a.activo{color:#0B0D12}
@media(min-width:820px){.menu{display:flex}}

.acciones-cab{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
@media(min-width:820px){.acciones-cab{margin-left:0}}
.entrar{color:#4C525F;text-decoration:none;font-size:.95rem;
  font-weight:600;white-space:nowrap}
.entrar:hover{color:#0B0D12}

/* Píldora y no rectángulo redondeado. Es la forma que usan hoy Kommo y
   HubSpot, y sobre todo: distingue el botón de una tarjeta o un campo de
   un vistazo, sin tener que leerlo. */
.boton{display:inline-block;background:var(--xenon);color:#140A03;font-weight:700;
  text-decoration:none;padding:.78rem 1.5rem;border-radius:99px;font-size:.95rem;
  white-space:nowrap;margin-left:auto}
@media(min-width:820px){.boton{margin-left:0}}
.boton:hover{filter:brightness(1.06)}
.boton-fantasma{background:transparent;color:var(--tinta);
  border:1px solid var(--borde);font-weight:600}
.boton-fantasma:hover{border-color:var(--tinta-mute);filter:none}
/* En la cabecera la banda no aplica: es clara siempre. */
.cabecera .boton-fantasma{color:#0B0D12;border-color:#DDE1EA}

/* ---------- estructura ----------
   `.banda` pinta de borde a borde y `.seccion` centra el contenido. Sin
   las dos capas, el fondo de color acabaría en el ancho del texto. */
.banda{width:100%}
.seccion{max-width:var(--ancho);margin:0 auto;padding:5.5rem 1.25rem}
@media(min-width:820px){.seccion{padding-left:2.5rem;padding-right:2.5rem}}
h1,h2,h3{font-weight:900;letter-spacing:-.035em;line-height:1.04;margin:0;
  text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.8rem)}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
p{margin:0}
/* La medida corta no se toca aunque el lienzo sea ancho: una línea de
   cien caracteres no se lee, se salta — el ojo pierde el renglón al
   volver a la izquierda. */
.plomo{color:var(--tinta-dim);font-size:1.12rem;max-width:36rem;margin-top:1.2rem}

/* ---------- portada ---------- */
.portada{padding-top:4.5rem;padding-bottom:4.5rem}
@media(min-width:960px){
  .portada-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:3.5rem;align-items:center}
  .portada-rejilla h1{font-size:clamp(2.4rem,3.4vw,3.6rem)}
}
.canales{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.canal{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-dim);
  border:1px solid var(--borde);border-radius:99px;padding:.32rem .75rem;
  background:var(--fondo-2)}
.canal b{width:6px;height:6px;border-radius:50%;background:var(--salvia)}
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}
.bajo-boton{font-size:.88rem;color:var(--tinta-mute);margin-top:1rem}
.portada-visor{margin-top:3rem}
@media(min-width:960px){.portada-visor{margin-top:0}}

/* ---------- el argumento del precio ---------- */
.duelo{background:var(--fondo-2);border:1px solid var(--borde);
  border-radius:14px;padding:2.2rem 1.8rem;margin-top:4rem;box-shadow:var(--sombra)}
@media(min-width:760px){.duelo{padding:2.8rem 2.6rem}}
.duelo-rejilla{display:grid;gap:1.1rem;margin-top:1.8rem}
@media(min-width:640px){.duelo-rejilla{grid-template-columns:1fr 1fr}}
.duelo-caja{border:1px solid var(--borde);border-radius:11px;padding:1.4rem 1.5rem;
  background:var(--fondo)}
.duelo-caja.nuestra{border-color:rgba(255,122,47,.5);background:rgba(255,122,47,.06)}
.duelo-caja .etiqueta{margin-bottom:.6rem}
.cifra{font-family:var(--mono);font-size:2.3rem;font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1}
.duelo-caja.nuestra .cifra{color:var(--acento-texto)}
.cifra small{font-size:.9rem;font-weight:500;color:var(--tinta-mute);letter-spacing:0}
.duelo-caja p{font-size:.94rem;color:var(--tinta-dim);margin-top:.7rem}
.letra-chica{font-size:.82rem;color:var(--tinta-mute);margin-top:1.5rem;max-width:46rem}

/* ---------- bloques ---------- */
.rejilla{display:grid;gap:1.1rem;margin-top:2.8rem}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Con el lienzo ancho, dos columnas dejan tarjetas de medio metro. */
@media(min-width:1200px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tarjeta{background:var(--fondo-2);border:1px solid var(--borde);
  border-radius:12px;padding:1.7rem}
.tarjeta h3{margin-bottom:.6rem}
.tarjeta p{color:var(--tinta-dim);font-size:.96rem}
.tarjeta .num{font-family:var(--mono);font-size:.72rem;color:var(--acento-texto);
  letter-spacing:.14em;display:block;margin-bottom:1rem}

/* ---------- pasos numerados ----------
 *
 * NUMERAR ALGO ES AFIRMAR QUE HAY UN ORDEN. Las tarjetas de «qué hace»
 * llevan 01, 02, 03 y ahí el número es decorativo — las cuatro cosas
 * pasan a la vez. Aquí no: conectar el número va antes que recibir
 * mensajes, y recibir va antes que contestar. Por eso esto es un `<ol>`
 * de verdad y no cuatro tarjetas con un número pintado encima.
 *
 * Se pinta con los tokens de la banda, así que la misma lista funciona
 * sobre papel y sobre negro sin duplicar una sola regla. */
.pasos{list-style:none;margin:2.8rem 0 0;padding:0;
  display:grid;gap:0;max-width:52rem}
.pasos li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1.2rem;padding:1.4rem 0;border-top:1px solid var(--borde-soft)}
.pasos li:first-child{border-top:0;padding-top:0}
.paso-n{width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  font-family:var(--mono);font-size:.9rem;font-weight:700;
  color:var(--acento-texto);border:1px solid var(--borde);
  background:var(--fondo-2)}
.pasos h3{margin-bottom:.35rem}
.pasos p{color:var(--tinta-dim);font-size:.96rem;margin:0;max-width:60ch}

/* ---------- precios ---------- */
.planes{display:grid;gap:1.1rem;margin-top:2.8rem;align-items:start}
@media(min-width:860px){.planes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{background:var(--fondo-2);border:1px solid var(--borde);
  border-radius:12px;padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.plan.destacado{border-color:rgba(255,122,47,.55);box-shadow:var(--sombra)}
.plan-precio{font-family:var(--mono);font-size:2.2rem;font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan.destacado .plan-precio{color:var(--acento-texto)}
.plan-precio small{font-size:.85rem;font-weight:500;color:var(--tinta-mute);letter-spacing:0}
/* EL PRECIO EN SOLES ES UN PRECIO, NO UNA CONVERSIÓN.
   Poner «≈ S/ 299 al cambio de hoy» obliga a mantener un tipo de cambio en
   una página estática, y el día que se mueva la web miente. Son dos listas
   fijas, que es lo que hace Kommo: eliges moneda y ese es tu precio. */
.plan-soles{font-size:.88rem;color:var(--tinta-mute);margin:.35rem 0 0;
  font-variant-numeric:tabular-nums}
.plan-soles b{color:var(--tinta-dim);font-weight:700}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  font-size:.94rem;color:var(--tinta-dim)}
.plan li{display:flex;gap:.6rem}
.plan li::before{content:'·';color:var(--acento-texto);font-weight:700}
.plan .boton{margin-left:0;text-align:center}
.cinta{font-size:.8rem;font-weight:700;color:var(--acento-texto)}

/* ---------- cierre ---------- */
.cierre{text-align:center;padding-top:6rem;padding-bottom:7rem}
.cierre .plomo{margin-left:auto;margin-right:auto}
.cierre .acciones{justify-content:center}

/* ---------- pie ---------- */
/* EL PIE NECESITA SER EL SUELO.
   Con las bandas oscuras fuera, el pie heredaba el mismo lavanda claro que
   la seccion de encima y la pagina terminaba sin terminar: no se sabia si
   habias llegado al final o faltaba scroll. Se le da el tono mas oscuro de
   la escala clara -- suficiente para cerrar, lejos del negro que acabamos
   de quitar. */
.pie{--fondo:#E9E7F2; --fondo-2:#F5F4FA; --borde:#D6D2E4; --borde-soft:#E1DDEE;
  --acento-texto:#A94A14;
  background:var(--fondo); border-top:1px solid #D6D2E4}
.pie-cols{max-width:var(--ancho);margin:0 auto;padding:3.5rem 1.25rem 2rem;
  display:grid;gap:2.2rem}
@media(min-width:820px){.pie-cols{padding-left:2.5rem;padding-right:2.5rem}}
@media(min-width:700px){.pie-cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.pie-cols a{display:block;color:var(--tinta-dim);text-decoration:none;
  font-size:.94rem;margin-bottom:.45rem}
.pie-cols a:hover{color:var(--tinta)}
.pie-cols .marca{margin-bottom:.9rem;color:var(--tinta)}
.pie-nota{color:var(--tinta-mute);font-size:.9rem}
.pie-fin{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem 2.5rem;
  color:var(--tinta-mute);font-size:.84rem}
@media(min-width:820px){.pie-fin{padding-left:2.5rem;padding-right:2.5rem}}

/* =====================================================================
   EL VISOR — el producto, calcado.

   ERA NEGRO, Y LA APLICACIÓN DEJÓ DE SERLO.

   El CRM se pasó a claro el 24 de agosto, y esta maqueta se quedó con la
   paleta vieja. Eso no es un desajuste estético: es una web que enseña un
   producto que ya no existe. Alguien que ve la portada y luego entra a
   probar encuentra otra cosa, y lo primero que piensa es que la web está
   abandonada.

   Los valores de aquí abajo son EXACTAMENTE los de apps/web/app/globals.css
   —lienzo, tinta, línea, las burbujas, el naranja del contador— copiados a
   mano y a propósito: son dos aplicaciones distintas y no comparten hoja
   de estilos. Si algún día cambia la paleta del CRM, este bloque hay que
   tocarlo también. Está escrito aquí para que quien lo lea lo sepa.

   POR QUÉ SIGUE SIN SER UNA FOTO. Dos kilobytes en vez de dos megas,
   nítido en cualquier pantalla, se reordena solo en un móvil, y el texto
   de dentro es texto de verdad: se busca, se traduce y lo lee un lector
   de pantalla. Una captura envejece en silencio; esto se nota cuando se
   queda viejo, que es lo que acaba de pasar.

   Declara sus propios tokens en vez de heredar los de la banda porque es
   una ventana a otro sitio, no un componente de la página: tiene que
   verse igual sobre papel y sobre negro.
   ===================================================================== */
.visor{
  --fondo-2:#FFFFFF; --fondo-3:#EDEBE7; --tinta:#15171C; --tinta-dim:#4A4F58;
  --tinta-mute:#5F646E; --borde:#D8D4CD; --borde-soft:#E8E4DE;
  border:1px solid #D8D4CD; border-radius:14px; overflow:hidden;
  background:#F5F4F1; color:var(--tinta);
  box-shadow:0 2px 4px rgba(11,13,18,.06), 0 32px 64px -24px rgba(11,13,18,.28);
}
.visor-barra{display:flex; align-items:center; gap:.6rem;
  padding:.7rem .95rem; border-bottom:1px solid var(--borde); background:#FFFFFF}
.visor-barra .punto{width:7px;height:7px;border-radius:50%;background:#D8D4CD}
/* Sin mayúsculas ni tracking: en la aplicación de verdad este rótulo es
   una frase normal desde que se quitó la tipografía de máquina. */
.visor-ruta{font-size:.72rem; font-weight:600; color:var(--tinta-mute); margin-left:.2rem}
.visor-sinleer{margin-left:auto; font-size:.7rem;
  background:#FF7A2F; color:#1A0C03; font-weight:700;
  border-radius:99px; padding:.1rem .45rem; font-variant-numeric:tabular-nums}

.visor-cuerpo{display:grid; grid-template-columns:minmax(0,1fr); background:#F5F4F1}
@media(min-width:520px){.visor-cuerpo{grid-template-columns:minmax(0,42%) minmax(0,58%)}}
.visor-lista{list-style:none; margin:0; padding:0; background:#FFFFFF;
  border-right:1px solid var(--borde)}
.visor-hilo{display:flex; gap:.65rem; padding:.8rem .9rem;
  border-bottom:1px solid var(--borde-soft)}
/* El hilo abierto lleva la barra naranja a la izquierda, igual que en la
   aplicación: un fondo solo no basta para saber cuál estás mirando. */
.visor-hilo.activo{background:#FBEFE7; box-shadow:inset 3px 0 0 #A94A14}
/* Las iniciales van con el color en la LETRA y el fondo muy rebajado, no
   con relleno entero: cinco círculos saturados en una lista serían un
   semáforo. Es la misma regla que apps/web/app/(app)/inicial.tsx. */
.visor-ini{flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.62rem; font-weight:700;
  color:#3D4FB0; background:#3D4FB022; border:1px solid #3D4FB066}
.visor-ini.b{color:#26593F; background:#26593F22; border-color:#26593F66}
.visor-ini.c{color:#8C4A44; background:#8C4A4422; border-color:#8C4A4466}
.visor-hilo > div{min-width:0; flex:1}
.visor-nom{font-size:.82rem; font-weight:700; color:var(--tinta);
  display:flex; justify-content:space-between; gap:.5rem; margin:0}
.visor-nom em{font-style:normal; font-size:.68rem;
  color:var(--tinta-mute); flex-shrink:0; font-variant-numeric:tabular-nums}
.visor-prev{font-size:.78rem; color:var(--tinta-dim); margin:.14rem 0 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.visor-canal{display:inline-block; margin-top:.36rem; font-size:.68rem;
  color:var(--tinta-dim); border:1px solid var(--borde); border-radius:4px;
  padding:.1em .4em; background:#FFFFFF}

.visor-chat{padding:.95rem; display:flex; flex-direction:column; gap:.5rem;
  background:#FFFFFF}
.visor-msg{max-width:82%; font-size:.8rem; line-height:1.45; padding:.5rem .7rem;
  border-radius:9px}
.visor-msg.entra{background:#EDEBE7; color:var(--tinta-dim);
  border:1px solid var(--borde); align-self:flex-start}
/* La saliente en índigo suave con borde, como en la bandeja. En la
   aplicación NO es verde: el verde ahí significa «ganado». */
.visor-msg.sale{background:#E4E9F8; color:var(--tinta);
  border:1px solid #B9C2E8; align-self:flex-end}
.visor-caja{margin-top:auto; display:flex; align-items:center; gap:.5rem;
  padding:.7rem .95rem; border-top:1px solid var(--borde-soft); background:#FFFFFF;
  color:var(--tinta-mute); font-size:.78rem}
.visor-caja b{margin-left:auto; font-size:.72rem;
  background:#FF7A2F; color:#1A0C03; border-radius:6px; padding:.25rem .6rem}

/* ---------- páginas legales ----------
   Texto largo para leer, no para escanear. Medida corta a propósito: una
   política de privacidad a todo el ancho de un monitor no la lee nadie,
   y «no la lee nadie» es justo lo que no puede pasar con esto. */
.legal{max-width:42rem}
.legal h1{font-size:clamp(2rem,4vw,2.8rem)}
.legal h2{font-size:1.3rem;margin:2.8rem 0 .9rem}
.legal h3{font-size:1.02rem;margin:1.7rem 0 .5rem;color:var(--tinta)}
.legal p,.legal li{color:var(--tinta-dim);font-size:1.02rem}
.legal p{margin:0 0 1.1rem}
.legal ul{margin:0 0 1.3rem;padding-left:1.15rem;display:grid;gap:.55rem}
.legal li::marker{color:var(--acento-texto)}
.legal strong{color:var(--tinta);font-weight:700}
.legal a{color:var(--acento-texto)}
.legal .fecha{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-mute);margin:1rem 0 2.2rem}
/* El recuadro de lo que hay que leer sí o sí: quién responde de qué. Es
   la parte que la gente se salta y la que decide a quién reclamar. */
.legal .aviso{border:1px solid var(--borde);border-left:2px solid var(--xenon);
  background:var(--fondo-2);border-radius:0 10px 10px 0;padding:1.3rem 1.5rem;
  margin:1.8rem 0;box-shadow:var(--sombra)}
.legal .aviso p:last-child{margin-bottom:0}
/* Quién toca los datos y para qué: lo primero que pregunta un cliente
   con abogado, y lo primero que mira Meta. */
.legal table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
.legal th{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-mute);font-weight:500;
  padding:0 .8rem .6rem 0;border-bottom:1px solid var(--borde)}
.legal td{padding:.75rem .8rem .75rem 0;border-bottom:1px solid var(--borde-soft);
  color:var(--tinta-dim);vertical-align:top}
.legal td:first-child{color:var(--tinta);white-space:nowrap}


/* =====================================================================
   FOTOGRAFÍA, BENTO Y LA BURBUJA
   Añadido el 24 de agosto de 2026, después de mirar por dentro cómo se
   presentan Kommo y HubSpot.

   Lo que tenían y aquí no había: personas, el producto en grande, y una
   forma de escribirles sin salir de la página. Lo que NO se copia: el
   muro de logos y los «299.000 clientes». Eso es credibilidad acumulada
   y con un cliente no se puede fingir sin que se note.
   ===================================================================== */

/* ---------- portada con foto ----------
 *
 * EL VELO ES 0,62 Y NO ES UN NÚMERO A OJO.
 *
 * Texto blanco sobre una foto solo se lee si el velo tapa lo suficiente
 * en la PEOR zona de la imagen, que es la más clara. Sobre un blanco puro:
 *   0,45 → 3,11:1   no llega
 *   0,55 → 4,29:1   no llega
 *   0,60 → 5,10:1   justo
 *   0,62 → 5,45:1   con margen  ← este
 * Sobre una zona de tono medio da 11:1, así que la foto sigue viéndose.
 *
 * Va como `background-image` y no como `<img>` porque es decoración: lo
 * que hay que leer es el titular. Un lector de pantalla no debe anunciar
 * «mujer en cafetería» antes de la promesa del producto.
 */
.portada-foto{position:relative;isolation:isolate;
  min-height:clamp(28rem,58vh,42rem);display:grid;align-items:center;
  background-size:cover;background-position:center 35%;
  color:#FFFFFF}
/* Arranca en .64 y no en .55: medido sobre la zona MÁS CLARA posible de
   una foto, .55 deja el texto blanco en 4,29:1 — por debajo del mínimo.
   A .64 sube a 5,7:1 y la foto se sigue viendo perfectamente. */
.portada-foto::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,18,.64) 0%,rgba(11,13,18,.74) 100%)}
/* El relleno de abajo es generoso a propósito: la burbuja de WhatsApp
   está fija en esa esquina y con menos espacio tapaba el último dato de
   la franja de confianza. */
.portada-foto .seccion{padding-top:4rem;padding-bottom:5.5rem;text-align:center}
.portada-foto h1{max-width:20ch;margin:0 auto;text-wrap:balance}
.portada-foto .plomo{max-width:54ch;margin:1.2rem auto 0;color:rgba(255,255,255,.94)}
/* En durazno NO. Sobre la zona clara de una foto, el #FFB98A da 3,28:1
   incluso con el velo puesto — es un rótulo bonito e ilegible. Sobre
   fotografía el acento se abandona y se usa blanco: aquí el color no
   tiene nada que señalar, y lo que tiene que hacer es leerse. */
.portada-foto .etiqueta{color:#FFFFFF;opacity:.9}
.portada-foto .acciones{justify-content:center}
.portada-foto .boton-fantasma{color:#fff;border-color:rgba(255,255,255,.5)}
.portada-foto .boton-fantasma:hover{border-color:#fff}

/* ---------- prueba honesta ----------
 *
 * Donde HubSpot pone eBay y Reddit. Aquí van hechos comprobables; el día
 * que haya clientes que dejen poner su logo, este bloque se sustituye.
 *
 * LA PRIMERA VERSIÓN SE VEÍA MAL Y ERA CULPA DE TRES COSAS: cuatro
 * elementos apretados en una fila a 0,88 rem, el carácter ✓ suelto en
 * medio del texto —que cada tipografía dibuja a su manera y casi siempre
 * mal— y `flex-wrap` partiendo la fila por donde tocara.
 *
 * Ahora son tres, el tic es un pseudo-elemento con su propio tamaño y
 * color, y van separados por un punto medio en vez de por aire. Tres y no
 * cuatro: una fila de cuatro cosas se lee como una lista que hay que
 * repasar; tres se leen de un vistazo. */
.prueba{display:flex;gap:.4rem 1.8rem;justify-content:center;flex-wrap:wrap;
  align-items:center;margin-top:2.8rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.22)}
/* Texto normal, NO `inline-flex`.
   Con inline-flex, cada nodo de dentro se vuelve un elemento flexible y
   el `gap` se cuela ENTRE la negrita y lo que sigue: «Sin permanencia ,
   te vas» con un espacio antes de la coma. El tic se separa con su
   propio margen, que es lo que hacía falta desde el principio. */
.prueba span{font-size:.95rem;color:rgba(255,255,255,.9);letter-spacing:-.005em}
.prueba span::before{content:'✓';font-size:.82rem;font-weight:700;
  color:#7CD9A0;margin-right:.45rem}
.prueba b{color:#fff;font-weight:700}
.banda.claro .prueba{border-top-color:var(--borde-soft)}
.banda.claro .prueba span{color:var(--tinta-dim)}
.banda.claro .prueba span::before{color:#2F7D5B}
.banda.claro .prueba b{color:var(--tinta)}

/* ---------- bento ----------
 *
 * Cada tarjeta en su propio tono, y no todas del mismo tamaño. Eso es lo
 * que rompe la sensación de plantilla: una rejilla de cuatro cajas
 * blancas idénticas se lee como un formulario relleno, aunque el texto
 * de dentro sea bueno.
 *
 * Los tonos son suaves a propósito. Cinco colores saturados competirían
 * con el naranja, que aquí es lo único que señala «pulsa esto».
 */
.bento{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr);margin-top:2.8rem}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bento .ancha{grid-column:span 2}
}
.bento-caja{border-radius:22px;padding:2rem;overflow:hidden;position:relative;
  display:flex;flex-direction:column;color:var(--tinta);
  border:1px solid var(--borde-soft)}
/* El alto mínimo SOLO donde hay rejilla. Apiladas en una columna, un
   `min-height` fijo deja media pantalla vacía debajo de tres líneas de
   texto — en el móvil eso es scroll a cambio de nada. */
@media(min-width:900px){.bento-caja{min-height:15rem}}
.bento-caja h3{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 .6rem;color:var(--tinta)}
.bento-caja p{color:var(--tinta-dim);font-size:.97rem;margin:0;max-width:44ch}
/* DENTRO DE UNA TARJETA DE PRODUCTO VA EL PRODUCTO, NO UNA FOTO.
 *
 * Aqui habia un retrato de un tendero al lado de un texto sobre la bandeja
 * de mensajes. Una foto de una persona no ilustra una bandeja: la decora.
 * Y ademas medía setecientos pixeles de alto, estiraba la fila entera y
 * dejaba la tarjeta de al lado con medio metro vacio.
 *
 * Las fotos se quedan donde dicen algo — la portada y «para quien es» —
 * y aqui entra una replica de la pantalla real, que es lo que hacen Kommo
 * y HubSpot en este mismo sitio.
 */
.bento-caja .pantalla{margin:auto -2rem -2rem 1rem;border-radius:12px 0 0 0;
  overflow:hidden;border:1px solid #D8D4CD;border-right:0;border-bottom:0;
  background:#F5F4F1;box-shadow:-14px -14px 40px -18px rgba(21,23,28,.22)}
/* Tope de alto. Sin el, una tarjeta con contenido alto arrastra a todas
   las de su fila y el bento se convierte en un acordeón. */
.bento-caja .pantalla{max-height:19rem}

/* La replica: mismos colores que apps/web/app/globals.css. */
.pz-barra{display:flex;gap:.4rem;align-items:center;padding:.5rem .75rem;
  background:#fff;border-bottom:1px solid #D8D4CD;font-size:.7rem;
  font-weight:600;color:#5F646E}
.pz-punto{width:6px;height:6px;border-radius:50%;background:#D8D4CD}
.pz-lista{background:#fff}
.pz-fila{display:flex;gap:.55rem;padding:.55rem .75rem;border-bottom:1px solid #E8E4DE}
.pz-fila.act{background:#FBEFE7;box-shadow:inset 3px 0 0 #A94A14}
.pz-ini{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-size:.56rem;font-weight:700;flex-shrink:0;
  color:#3D4FB0;background:#3D4FB022;border:1px solid #3D4FB066}
.pz-ini.v{color:#26593F;background:#26593F22;border-color:#26593F66}
.pz-ini.r{color:#8C4A44;background:#8C4A4422;border-color:#8C4A4466}
.pz-n{font-size:.73rem;font-weight:700;color:#15171C;margin:0}
.pz-p{font-size:.69rem;color:#4A4F58;margin:.1rem 0 0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pz-col{display:flex;gap:.5rem;padding:.75rem;background:#F5F4F1}
.pz-columna{flex:1;min-width:0;background:#fff;border:1px solid #D8D4CD;
  border-radius:8px;border-top:2px solid #8E9AD6;padding:.55rem}
.pz-columna.b{border-top-color:#E2701F}
.pz-cab{font-size:.68rem;font-weight:700;margin:0 0 .4rem;display:flex;
  justify-content:space-between;gap:.4rem}
.pz-cab b{color:#A94A14;font-variant-numeric:tabular-nums}
.pz-tarj{background:#fff;border:1px solid #D8D4CD;border-radius:6px;padding:.45rem;
  margin-bottom:.35rem;box-shadow:0 1px 2px rgba(21,23,28,.06)}
.pz-tt{font-size:.66rem;font-weight:600;margin:0 0 .18rem;color:#15171C}
.pz-tv{font-size:.7rem;font-weight:700;margin:0;font-variant-numeric:tabular-nums;color:#15171C}
.pz-tf{display:flex;justify-content:space-between;align-items:center;margin-top:.35rem;
  font-size:.6rem;color:#5F646E;gap:.3rem}
.pz-dias{background:#FBF0DE;color:#7A4B0E;border:1px solid #E8CFA4;
  border-radius:99px;padding:.05em .35em;font-weight:700;white-space:nowrap}
/* Los cinco tonos del bento se van por lo mismo. Las clases se quedan
   apuntando al mismo color en vez de borrarse del HTML: si algún día vuelve
   a hacer falta distinguir una tarjeta, el gancho ya está puesto. */
.t-lavanda, .t-menta, .t-crema, .t-rubor, .t-cielo{background:var(--fondo-2)}

/* ---------- la burbuja ----------
 *
 * Kommo y HubSpot ponen un chat genérico. Aquí va WhatsApp, que es el
 * canal que este producto vende: escribir por ahí no describe el
 * producto, lo DEMUESTRA.
 *
 * El verde es el de WhatsApp y la letra encima va oscura, no blanca:
 * blanco sobre #25D366 da 2,2:1 y no se lee.
 */
.wasap{position:fixed;right:1.3rem;bottom:1.3rem;z-index:60;
  display:inline-flex;align-items:center;gap:.55rem;
  background:#25D366;color:#0A2E17;font-weight:700;font-size:.92rem;
  padding:.8rem 1.2rem;border-radius:99px;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5)}
.wasap:hover{filter:brightness(1.06)}
.wasap svg{flex-shrink:0}
/* En un teléfono se queda solo el icono: un botón con texto ahí tapa
   media pantalla y estorba justo cuando se está leyendo. */
@media(max-width:560px){
  .wasap{padding:.9rem;gap:0}
  .wasap span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}


/* =====================================================================
   UN SOLO TONO DE TARJETA

   Aquí hubo una rotación de cinco pasteles —lavanda, menta, crema, cielo,
   rubor— copiada del bento de Kommo. En su web funciona; en la nuestra
   quedó una tienda de caramelos.

   El motivo es que copié la superficie sin el motivo. Cinco colores que no
   significan nada compiten con el único que sí significa algo: el naranja
   que dice «pulsa aquí». Cuando todo está coloreado, el acento deja de
   acentuar.

   Ahora la tarjeta usa `--fondo-2`, que ya alterna solo: blanca sobre la
   banda lavanda, lavanda pálido sobre la banda blanca. Un tono, contraste
   siempre, y el color libre para hacer su trabajo.
   ===================================================================== */
.rejilla .tarjeta{border-radius:20px}
.planes .plan{border-radius:20px}


/* ---------- banda con foto de fondo ----------
 *
 * Para «para quién es». Aquí la foto SÍ dice algo: es la cara de quien
 * compra esto, y la sección va justo de eso. Es distinto de meterla en
 * «quiénes somos», que daría a entender que esa persona es del equipo —
 * mentir con una imagen es igual de mentira.
 *
 * Velo al 0,74: sobre esta foto hay zonas muy claras (la vitrina del
 * fondo) y el texto blanco necesita margen. Medido, no estimado.
 */
.banda-foto{position:relative;isolation:isolate;color:#fff;
  background-size:cover;background-position:center 40%}
.banda-foto::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,18,.78) 0%,rgba(11,13,18,.72) 100%)}
.banda-foto h2{color:#fff}
.banda-foto .plomo{color:rgba(255,255,255,.94)}
.banda-foto .etiqueta{color:#fff;opacity:.9}
/* Las tarjetas de dentro NO se tiñen de pastel: sobre una foto ya hay
   demasiada información compitiendo. Van en blanco translúcido. */
/* Sobre la foto, la tarjeta ya no puede heredar la tinta de su banda —
   que ahi es blanca— o quedaria blanco sobre blanco. Se fija oscura. */
.banda-foto .rejilla .tarjeta{background:rgba(255,255,255,.96);
  backdrop-filter:blur(2px);color:#15171C}
.banda-foto .rejilla .tarjeta h3{color:#15171C}
.banda-foto .rejilla .tarjeta p{color:#4C525F}


/* =====================================================================
   TABLA COMPARATIVA DE PLANES

   Faltaba, y era lo que más se notaba: la página de precios tenía tres
   tarjetas con cuatro líneas cada una y debajo el aire. Quien llega a
   /precios ya decidió que quiere un CRM y está comparando; esa persona
   no busca una frase que diga «todos los planes traen lo mismo», busca
   la lista para verificarlo ella misma.

   Kommo y HubSpot tienen las dos esta tabla y las dos la ponen justo
   debajo de las tarjetas. No es casualidad: la tarjeta vende, la tabla
   convence, y son dos trabajos distintos.

   AQUÍ LA TABLA JUEGA A NUESTRO FAVOR. Cuando un CRM cobra por silla, su
   tabla es un campo de minas de casillas vacías: cada fila sin marcar es
   una función que hay que pagar aparte. La nuestra sale casi entera
   marcada en las tres columnas, y eso —visto de un vistazo, sin leer— es
   exactamente el argumento.

   Se desplaza sola en horizontal en pantallas estrechas, dentro de su
   propia caja: una tabla de cuatro columnas no cabe en un teléfono y lo
   que nunca puede pasar es que empuje el ancho de la página entera.
   ===================================================================== */
.tabla-caja{margin-top:2.8rem;overflow-x:auto;
  border:1px solid var(--borde);border-radius:20px;background:var(--fondo-2)}
.tabla{width:100%;min-width:44rem;border-collapse:collapse;font-size:.95rem}

.tabla th,.tabla td{text-align:left;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--borde-soft)}
.tabla tr:last-child td{border-bottom:0}

/* Aquí puse la cabecera pegajosa y no servía para nada: `sticky` se ancla
   al primer contenedor que hace scroll, y ese es `.tabla-caja`, que solo
   se desplaza en horizontal. Se quedaba clavada donde estaba. Fuera. */
.tabla thead th{background:var(--fondo-2);
  border-bottom:1px solid var(--borde);padding-top:1.2rem;padding-bottom:1.2rem}
.tabla thead .nom{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;
  color:var(--tinta);display:block}
.tabla thead .cif{font-family:var(--mono);font-size:.88rem;font-weight:600;
  color:var(--tinta-mute);display:block;margin-top:.2rem}
.tabla thead .destacada .nom{color:var(--acento-texto)}

/* Primera columna: es el nombre de la fila, no un dato. */
.tabla tbody th{font-weight:600;color:var(--tinta)}

/* El reparto de anchos SOLO en la tabla de funciones. Ahí la primera
   columna lleva frases de cincuenta caracteres y las otras tres, un check:
   al 34% se partían en dos líneas media docena de filas y la tabla quedaba
   dentada. En la tabla de la cuenta pasa lo contrario —la fila se llama «6
   personas» y la celda dice «US$ 89 / mes · Equipo»— así que ahí se deja
   que el navegador reparta, que en ese caso acierta. */
.tabla-larga tbody th{width:46%}
.tabla-larga thead th + th{width:18%}
.tabla td{color:var(--tinta-dim);font-variant-numeric:tabular-nums}

/* Las filas de grupo. Sin ellas son cuarenta filas seguidas y nadie
   distingue «lo que cambia» de «lo que viene siempre». */
.tabla .grupo th{background:var(--fondo-3);color:var(--tinta);
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
  padding-top:.7rem;padding-bottom:.7rem}
.tabla .grupo td{background:var(--fondo-3)}

/* El check. En el acento porque es lo único de la tabla que se lee de un
   vistazo, y de un vistazo es como se lee esta tabla. */
.tabla .si{color:var(--acento-texto);font-weight:800}
.tabla .no{color:var(--tinta-mute);opacity:.55}
/* Un lector de pantalla no ve un palito verde: lee lo que hay en el DOM. */
.tabla .si::after{content:'✓'}
.tabla .no::after{content:'—'}
.tabla .oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* La columna del plan que más se contrata, teñida de punta a punta.
   Es el mismo gesto que el borde naranja de su tarjeta, continuado. */
.tabla .destacada{background:rgba(255,122,47,.05)}

.tabla-nota{font-size:.82rem;color:var(--tinta-mute);margin-top:1rem;max-width:46rem}