/* ============================================================
   TokenizaUY — lo propio del sitio estático de la plataforma

   Va DESPUÉS de sistema.css, que trae los tokens, la base, el
   encabezado .top.claro, los botones, chips, campos, avisos, la barra
   de avance, el acordeón, los hitos y el pie .pie-plataforma. Acá
   queda solo lo que las cinco páginas de la landing no comparten con
   las páginas del servidor: las franjas de borde a borde, la portada
   con el edificio, las tarjetas de proyecto que arma app.js, las
   piezas de cada página y el asistente de /empresas.

   Reglas: solo los tokens del sistema (nada de colores sueltos salvo
   la paleta de noche de la home, definida una vez en la sección 18),
   un solo color de acción (--accion) y las cifras con dígitos
   tabulares.

   Índice
     1. Franjas y cabeceras de sección
     2. Portada de la home (franja de noche con el edificio)
     3. Cabecera de las subpáginas
     4. Video
     5. Tarjeta de proyecto
     6. Clases de activo
     7. Tarjetas de la landing: dúo, rasgos, pasos, sí / no
     8. Cifras y sellos
     9. Leyes y tabla de responsabilidades
    10. Para empresas: modelo, roles, tarifas
    11. El asistente y su vista previa
    12. Pedido de demo
    13. Cierre de página
    14. Pie
    15. Movimiento reducido
    16. Tres pasos de la home
    17. Club de Miembros (#sumate)
    18. Home de noche: la home entera en la paleta oscura del diseño
   ============================================================ */

/* ---------- 1. Franjas y cabeceras de sección ---------- */

/* Una franja va de borde a borde y lleva su .contenedor adentro; se
   alternan blanco y gris 50 para que cada sección se lea como un
   bloque sin necesidad de líneas. */
.franja { padding: 56px 0; }
.franja.gris { background: var(--gris-50); }
@media (min-width: 760px) { .franja { padding: 80px 0; } }

.franja .seccion-cab { max-width: 760px; gap: 10px; margin-bottom: 28px; }
.franja .seccion-cab h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; }
.franja .seccion-cab p { font-size: 1.0625rem; line-height: 1.6; color: var(--texto); }
/* El rótulo de arriba del título es un chip, como en el diseño, y no
   un texto en mayúsculas de color: el color de acción queda para lo
   que se toca. */
.seccion-cab > .chip { justify-self: start; }
.franja p, .cabecera-l p { max-width: 68ch; }
/* Lo que la página esconde con el atributo hidden se queda escondido
   aunque su clase le dé un display (un .recuadro es grid). */
[hidden] { display: none !important; }

/* Título a la izquierda y contenido a la derecha en escritorio; el
   título acompaña mientras se lee. */
.lado { display: grid; gap: 4px; }
@media (min-width: 1000px) {
  .lado { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .lado > .seccion-cab { position: sticky; top: 24px; margin: 0; }
}

/* Un enlace de texto que lleva a otra página: tinta subrayada, con la
   flecha del sistema al final. */
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.enlace-flecha svg { width: 18px; height: 18px; flex: none; }

/* Grillas de tarjetas: una columna en el teléfono, dos o tres al
   ensanchar. */
.grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .grilla.de-2, .grilla.de-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .grilla.de-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grilla > .tarjeta { display: grid; align-content: start; gap: 10px; padding: 22px; }
.grilla > .tarjeta h3 { font-size: 1.0625rem; }
.grilla > .tarjeta p { margin: 0; font-size: .9375rem; }

/* El cuadradito del ícono de una tarjeta, el mismo de «datos con ícono». */
.ico-caja { width: 40px; height: 40px; border-radius: 12px; background: var(--gris-100); color: var(--tinta); display: grid; place-items: center; }
.ico-caja svg { width: 20px; height: 20px; }
.tarjeta.gris .ico-caja { background: var(--blanco); box-shadow: var(--sombra-1); }

/* ---------- 2. Portada de la home ---------- */

/* La portada del diseño: dos columnas desde 960 px (el texto y la
   tarjeta de ejemplo), sobre la noche de toda la home (sección 18). */
.portada-l { position: relative; display: flex; align-items: center; min-height: 92vh; min-height: 92svh; padding: 64px 0 56px; color: var(--noche-texto, #E6ECF4); overflow: hidden; }
@media (min-width: 760px) { .portada-l { padding: 88px 0 80px; } }
/* El edificio animado, detrás de todo; el velo oscurece la izquierda
   para que el texto siempre se lea y deja ver el edificio a la derecha. */
.portada-l .lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-l .velo { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 19, 34, .96) 0%, rgba(10, 19, 34, .86) 42%, rgba(10, 19, 34, .3) 68%, rgba(10, 19, 34, .05) 100%); }
.portada-l .portada-in { position: relative; }
.portada-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.portada-in > * { min-width: 0; }
@media (min-width: 960px) { .portada-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } }
.portada-texto { display: grid; gap: 20px; justify-items: start; }
.chip.noche { background: transparent; color: var(--menta, #34D3A5); border: 1px solid var(--menta, #34D3A5); min-height: 22px; padding: 2px 8px; font: 600 .6875rem/1.2 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; }
.portada-l h1 { max-width: 760px; color: #FFFFFF; font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); line-height: 1.06; letter-spacing: -.03em; }
.portada-l h1 em { font-style: normal; color: var(--menta, #6EE7C8); }
.portada-l .bajada { margin: 0; max-width: 560px; font-size: 1.125rem; line-height: 1.6; color: #C3CFDF; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* La letra chica del botón principal: sin costo, sin compromiso. */
.portada-l .acciones-pie { margin: -8px 0 0; font-size: .875rem; color: #AFBCCE; }
/* El botón secundario sobre la noche: contorno menta, sin relleno. */
.btn-noche { background: transparent; color: #FFFFFF; border-color: var(--menta, #34D3A5); }
.btn-noche:hover { background: rgba(52, 211, 165, .12); color: #FFFFFF; }
.portada-l :focus-visible { outline-color: var(--menta, #8EC5FF); }

/* La palabra con definición: subrayado punteado y la definición en un
   globo al pasar o al enfocar con el teclado. */
.defin { position: relative; cursor: help; text-decoration: underline dotted 2px #7C8BA3; text-underline-offset: 5px; }
.defin:hover::after, .defin:focus::after { content: attr(data-definicion); position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: min(430px, 82vw); padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); box-shadow: var(--sombra-card); color: var(--texto); font: 400 .875rem/1.55 var(--f-texto); letter-spacing: 0; }

/* Las tres cifras de la plataforma, al día con /api/vitrina: una fila
   sobre una línea, la cifra en letra de máquina y el rótulo debajo. Si
   no entran, la tercera baja de renglón entera: nunca se parte un número. */
.cifras-vivas { width: 100%; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--noche-borde, #1E2D47); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px 20px; }
.cifras-vivas > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* En el teléfono el monto, que es el ancho, va solo en su renglón. */
.cifras-vivas > div:nth-child(2) { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .cifras-vivas { display: flex; flex-wrap: wrap; gap: 16px 36px; }
  .cifras-vivas > div:nth-child(2) { grid-column: auto; }
}
.cifras-vivas dt { order: 2; font-size: .8125rem; color: #AFBCCE; }
.cifras-vivas dd { order: 1; margin: 0; }
.cifras-vivas .cifra { font: 600 clamp(1.125rem, .9rem + 1vw, 1.5rem)/1.2 var(--f-codigo); color: #FFFFFF; letter-spacing: -.01em; }
.cifras-pie { margin: 0; font-size: .8125rem; color: #7D8AA3; }

/* La tarjeta de ejemplo del panel: un recuadro de la noche con una
   fila de inversión y seis barras que crecen. Dice que es un ejemplo. */
.panel-ejemplo, .ficha-ejemplo { width: 100%; max-width: 440px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; border: 1px solid var(--noche-borde, #1E2D47); border-radius: var(--r-grande); background: var(--noche-card, #101C33); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
/* Sobre el edificio, la tarjeta se entreve: un poco de transparencia y desenfoque. */
.panel-ejemplo { background: rgba(16, 28, 51, .82); border-color: rgba(42, 59, 87, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 960px) { .panel-ejemplo { justify-self: end; } }
.pe-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pe-cab > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1rem/1.3 var(--f-titulo); color: #FFFFFF; }
.pe-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #16233A; color: var(--menta, #34D3A5); }
.pe-ico svg { width: 18px; height: 18px; }
.eyebrow { margin: 0; font: 500 .75rem/1.4 var(--f-codigo); letter-spacing: .12em; text-transform: uppercase; color: var(--menta, #34D3A5); }
.eyebrow.chico { font-size: .6875rem; color: #7D8AA3; }
.pe-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--noche-borde, #1E2D47); border-radius: var(--r); background: #0D182A; }
.pe-fila b { display: block; color: #FFFFFF; font: 600 .9375rem/1.3 var(--f-texto); }
.pe-fila span { display: block; margin-top: 2px; font-size: .8125rem; color: #AFBCCE; }
.pe-fila strong { font: 600 1rem/1.2 var(--f-codigo); color: #FFFFFF; white-space: nowrap; }
.pe-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 76px; }
.pe-barras.ocho { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pe-barras i { display: block; height: 30%; border-radius: 6px 6px 2px 2px; background: #1E2D47; }
.pe-barras i:nth-child(1) { height: 22%; } .pe-barras i:nth-child(2) { height: 32%; } .pe-barras i:nth-child(3) { height: 42%; }
.pe-barras i:nth-child(4) { height: 54%; } .pe-barras i:nth-child(5) { height: 66%; } .pe-barras i:nth-child(6) { height: 78%; }
.pe-barras i:nth-child(7) { height: 88%; } .pe-barras i:nth-child(8), .pe-barras i.menta { height: 100%; }
.pe-barras i.menta { background: var(--menta, #34D3A5); }
.pe-nota { margin: 0; font-size: .8125rem; line-height: 1.45; color: #7D8AA3; }

/* ---------- 3. Cabecera de las subpáginas ---------- */

.cabecera-l { padding: 40px 0 44px; border-bottom: 1px solid var(--linea); }
.cabecera-l .contenedor { display: grid; gap: 16px; justify-items: start; }
.cabecera-l h1 { max-width: 900px; }
.cabecera-l h1 em { font-style: normal; color: var(--sec); }
/* Un rótulo largo envuelve en vez de salirse del teléfono. */
.cabecera-l .chip { white-space: normal; line-height: 1.3; padding-top: 5px; padding-bottom: 5px; }
.cabecera-l .bajada { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--texto); }
@media (min-width: 760px) { .cabecera-l { padding: 64px 0 60px; } }

/* La de /empresas lleva el logo de la plataforma al costado. */
.cabecera-l .dos { display: grid; gap: 24px; align-items: center; width: 100%; }
.cabecera-l .dos > div:not(.visual) { display: grid; gap: 16px; justify-items: start; }
.cabecera-l .contenedor > p, .cabecera-l .dos p { margin: 0; }
.cabecera-l .visual { display: none; }
@media (min-width: 900px) {
  .cabecera-l .dos { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; }
  .cabecera-l .visual { display: grid; place-items: center; min-height: 240px; border-radius: var(--r-grande); background: var(--gris-50); }
  .cabecera-l .visual img { width: min(220px, 60%); }
}

/* ---------- 4. Video ---------- */

.video-marco { max-width: 960px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-grande); background: var(--tinta); box-shadow: var(--sombra-card); }
.video-marco video { width: 100%; height: 100%; object-fit: contain; background: var(--tinta); }
.video-pie { margin: 18px 0 0; color: var(--texto); }

/* ---------- 5. Tarjeta de proyecto ----------
   La tarjeta es la del sistema (sistema.css, «Tarjeta de proyecto»): la
   misma del marketplace y de la home de cada empresa. La arma app.js con
   /api/vitrina; el respaldo escrito a mano en index.html usa el mismo
   marcado. Acá solo va la grilla y la invitación a emitir. */

.proyectos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 700px) { .proyectos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .proyectos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proy.libre .proy-portada { background: var(--gris-50); border-bottom: 1.5px dashed var(--linea-fuerte); }
.ver-todos { margin: 28px 0 0; }

/* ---------- 6. Clases de activo ---------- */

.clases-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.clase-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea); border-radius: var(--r-pill); background: var(--blanco); color: var(--tinta); font: 600 .9375rem/1.2 var(--f-texto); text-decoration: none; }
.clase-tag:hover { background: var(--gris-50); border-color: var(--linea-fuerte); color: var(--tinta); }

/* ---------- 7. Tarjetas de la landing ---------- */

/* Listas con tilde o con cruz: el ícono va por CSS para que el texto
   quede limpio para un lector de pantalla. */
.lista-ok, .lista-no { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lista-ok li, .lista-no li { position: relative; padding: 10px 0 10px 34px; border-top: 1px solid var(--linea); font-size: .9375rem; }
.lista-ok li:first-child, .lista-no li:first-child { border-top: 0; padding-top: 2px; }
.lista-ok li::before, .lista-no li::before { content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-50) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157046' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lista-ok li:first-child::before, .lista-no li:first-child::before { top: 3px; }
.lista-no li::before { background-color: var(--error-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.lista-ok b, .lista-no b { color: var(--tinta); }

/* ¿Invertir o emitir? */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo .tarjeta { display: grid; align-content: start; gap: 16px; padding: 24px; }
.duo .tarjeta > .chip { justify-self: start; }
.duo h3 { font-size: 1.375rem; }
.duo .btn { justify-self: start; }
.duo .codigo { font-size: .875em; }
@media (max-width: 520px) { .duo .btn { justify-self: stretch; white-space: normal; text-align: center; line-height: 1.2; } }

/* Los cuatro pasos de «cómo funciona», numerados. */
.pasos-l { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos-l > li { counter-increment: paso; }
.pasos-l h2 { font-size: 1.125rem; line-height: 1.3; }
.pasos-l > li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); color: #FFFFFF; font: 800 1rem/1 var(--f-titulo); }
.friccion { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: var(--r); background: var(--gris-50); color: var(--texto); font-size: .875rem; line-height: 1.5; }
.friccion svg { width: 18px; height: 18px; margin-top: 1px; color: var(--sec); }

/* La cadena de la estructura: los hitos del sistema, en una tarjeta. */
.hitos.cadena { padding: 22px 20px; }
.hitos.cadena .m { font-size: .75rem; font-variant-numeric: tabular-nums; }
.hitos.cadena p { color: var(--texto); }

/* Sí / no del token */
.sino { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 860px) { .sino { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sino .tarjeta { display: grid; align-content: start; gap: 14px; padding: 24px; }
.sino h3 { font-size: 1.125rem; }

/* ---------- 8. Cifras y sellos ---------- */

.cifras-l { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px) { .cifras-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cifras-l { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifras-l > div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px; border-radius: var(--r-card); background: var(--blanco); border: 1px solid var(--linea); }
/* En el teléfono cada cifra es un renglón: la cifra a la izquierda y lo
   que cuenta a la derecha; en dos columnas una cifra grande se partía. */
@media (max-width: 699px) {
  .cifras-l > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; }
}
.cifras-l dt { order: 2; font-size: .875rem; line-height: 1.4; color: var(--sec); }
.cifras-l dd { order: 1; margin: 0; }
.cifras-l .cifra-xl { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }
/* Las de la cabecera de /empresas son palabras, no montos: Plus Jakarta. */
.cifras-l .cifra-pal { font: 800 1.375rem/1.15 var(--f-titulo); color: var(--tinta); letter-spacing: -.02em; }

.sellos-l { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
@media (min-width: 700px) { .sellos-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sellos-l { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sello-l { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-card); background: var(--blanco); border: 1px solid var(--linea); }
.sello-l b { display: block; color: var(--tinta); font-weight: 700; line-height: 1.3; }
.sello-l span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--sec); }
.nota-marco { margin: 20px 0 0; font-size: .9375rem; }

/* Preguntas en acordeón (el <details> del sistema: anda sin JavaScript). */
.acordeones { max-width: 860px; }
.acordeon summary { padding-top: 12px; padding-bottom: 12px; line-height: 1.35; }
.acordeon .cuerpo p { margin: 0; }
.mas-preguntas { margin: 20px 0 0; }
.faq .indice { margin-top: -24px; }
@media (min-width: 760px) { .faq .indice { margin-top: -40px; } }
.grupo-faq { display: grid; padding-top: 36px; scroll-margin-top: 72px; }
.grupo-faq h2 { margin-bottom: 14px; font-size: 1.375rem; }
.grupo-faq .acordeon { max-width: 860px; }

/* ---------- 9. Leyes y tabla de responsabilidades ---------- */

.leyes { margin: 0; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); overflow: hidden; }
.leyes > div { display: grid; gap: 6px; padding: 16px 18px; border-top: 1px solid var(--linea); }
.leyes > div:first-child { border-top: 0; }
.leyes dt { font: 700 1rem/1.3 var(--f-titulo); color: var(--tinta); }
.leyes dd { margin: 0; font-size: .9375rem; color: var(--texto); }
@media (min-width: 760px) { .leyes > div { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 18px 22px; } }

/* La tabla de quién responde por qué: en escritorio, tabla; en el
   teléfono cada fila es una tarjeta, porque deslizar a los costados
   tres columnas de texto largo no se lee. */
.tabla-envol .tabla.tabla-l { min-width: 0; }
.tabla-l td { line-height: 1.5; }
.tabla-l tbody th { padding: 12px 14px; border-top: 1px solid var(--linea); border-bottom: 0; background: none; color: var(--tinta); font: 700 .9375rem/1.4 var(--f-texto); white-space: normal; vertical-align: top; }
.tabla-l tbody tr:first-child th { border-top: 0; }
@media (max-width: 759px) {
  .tabla-envol:has(.tabla-l) { border: 0; background: transparent; overflow: visible; }
  .tabla-l, .tabla-l tbody, .tabla-l tr, .tabla-l th, .tabla-l td { display: block; width: 100%; }
  .tabla-l thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla-l tr { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); }
  .tabla-l td { padding: 8px 0 0; border: 0; }
  .tabla-l tbody th { padding: 0 0 2px; border: 0; font: 700 1.0625rem/1.3 var(--f-titulo); }
  .tabla-l td[data-th]::before { content: attr(data-th); display: block; font-size: .75rem; font-weight: 600; color: var(--sec); }
}

/* ---------- 10. Para empresas ---------- */

ol.grilla { list-style: none; margin: 0; padding: 0; }
.numerada > .num-caja { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gris-100); color: var(--tinta); font: 800 1rem/1 var(--f-titulo); }
.rol .chip { justify-self: start; }
.tarifa-precio { font: 800 clamp(1.625rem, 1.4rem + .8vw, 2rem)/1.1 var(--f-titulo); color: var(--tinta); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.recuadro.nota { margin-top: 20px; }
.recuadro p { max-width: none; }

/* ---------- 11. El asistente y su vista previa ---------- */

.wizard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 980px) { .wizard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
.wizard-form { display: grid; gap: 18px; padding: 20px; }
@media (min-width: 760px) { .wizard-form { padding: 24px; } }

/* Los seis pasos son píldoras que envuelven; el actual va en tinta y
   los ya hechos con el verde de «cumplido». */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-step { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 1px solid var(--linea); border-radius: var(--r-pill); background: var(--gris-50); color: var(--texto); font: 600 .875rem/1 var(--f-texto); cursor: pointer; }
.wiz-step b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blanco); color: var(--tinta); font-size: .75rem; font-variant-numeric: tabular-nums; }
.wiz-step:hover { border-color: var(--linea-fuerte); }
.wiz-step.is-active { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.wiz-step.is-done { background: var(--ok-50); border-color: transparent; color: var(--ok); }

.wiz-pane { display: grid; gap: 16px; }
.wiz-pane h3 { font-size: 1.125rem; }
.wiz-pane p { margin: 0; }
/* Sin JavaScript los seis pasos se ven uno debajo del otro (el
   asistente se lee igual); con él, de a uno. */
html.js .wiz-pane:not(.is-active) { display: none; }
html.js .wiz-pane.is-active { animation: aparece .25s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html:not(.js) .wiz-pane + .wiz-pane { padding-top: 16px; border-top: 1px solid var(--linea); }
html:not(.js) .solo-js { display: none; }
.wiz-pane .opcion b { display: inline; }
html:not(.js) #wCustomBox[hidden] { display: block !important; }
.wiz-hint { font-size: .875rem; line-height: 1.5; color: var(--sec); }
.wiz-ok { font-size: .875rem; font-weight: 600; color: var(--ok); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: 0 0 0 1px var(--linea-fuerte); cursor: pointer; }
.swatch.is-active { box-shadow: 0 0 0 3px var(--tinta); }

/* El subdominio: el campo y el sufijo fijo en una sola caja, con el
   mismo borde y foco que .entrada. */
.sub-input { display: flex; align-items: center; min-height: 52px; border: 1.5px solid var(--borde-campo); border-radius: var(--r); background: var(--blanco); overflow: hidden; }
.sub-input:focus-within { border-color: var(--foco); box-shadow: 0 0 0 4px rgba(43, 107, 181, .18); }
.sub-input input { flex: 1; min-width: 0; min-height: 49px; padding: 0 0 0 14px; border: 0; outline: 0; background: transparent; color: var(--tinta); font: 400 1rem var(--f-texto); }
.sub-input span { padding: 0 14px 0 2px; color: var(--sec); white-space: nowrap; }
@media (max-width: 759px) { .sub-input input { font-size: max(16px, 1em); } }

.wiz-list { list-style: none; margin: 0; padding: 0; display: grid; }
.wiz-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linea); font-size: .9375rem; }
.wiz-list li:first-child { border-top: 0; padding-top: 0; }
.wiz-list li > svg { width: 20px; height: 20px; margin-top: 1px; color: var(--tinta); }
.wiz-list.tildes li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--ok-50) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157046' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.wiz-list b { color: var(--tinta); }

.wiz-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--linea); margin-top: 4px; }
.wiz-nav .btn { margin-top: 14px; }

/* La vista previa del sitio de la empresa. Los colores que elige la
   persona llegan como variables (--pv-*) que empresas.js calcula con la
   misma regla de contraste que cssMarca: el texto encima del primario
   y del botón siempre se lee, como en el sitio de verdad. */
.wizard-preview { display: grid; gap: 10px; margin: 0; }
@media (min-width: 980px) { .wizard-preview { position: sticky; top: 20px; } }
.browser { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); box-shadow: var(--sombra-card); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--gris-100); border-bottom: 1px solid var(--linea); }
.browser-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-fuerte); flex: none; }
.browser-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--blanco); color: var(--texto); font: 500 .8125rem/1.2 var(--f-texto); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser-url svg { width: 14px; height: 14px; flex: none; color: var(--ok); }
.browser-url span { overflow: hidden; text-overflow: ellipsis; }

.browser-body { --pv-primario: #16294a; --pv-sobre-primario: #FFFFFF; --pv-accion: #0b7a5f; --pv-sobre-accion: #FFFFFF; }
.pv-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pv-primario); color: var(--pv-sobre-primario); }
.pv-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--pv-sobre-primario); color: var(--pv-primario); font: 800 .9375rem/1 var(--f-titulo); }
.pv-brand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .875rem/1.2 var(--f-texto); }
.pv-login { padding: 5px 12px; border: 1px solid currentColor; border-radius: 8px; font: 600 .75rem/1.2 var(--f-texto); }
.pv-hero { display: grid; gap: 8px; justify-items: start; padding: 22px 16px 24px; background: var(--pv-primario); color: var(--pv-sobre-primario); }
.pv-hero h4, .pv-hero p { margin: 0; }
.pv-hero h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: inherit; font-size: 1.375rem; line-height: 1.15; overflow-wrap: anywhere; }
.pv-hero p { margin: 0; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.pv-cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 0 16px; border-radius: 10px; background: var(--pv-accion); color: var(--pv-sobre-accion); font: 600 .875rem/1 var(--f-texto); }
.pv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.pv-card { display: grid; gap: 2px; padding: 12px; border-radius: var(--r); background: var(--gris-50); }
.pv-card b { font-size: .8125rem; color: var(--tinta); }
.pv-card span { font-size: .75rem; color: var(--sec); }
.pv-legal { margin: 0 14px 14px; padding: 10px 12px; border-radius: var(--r); background: var(--gris-50); color: var(--texto); font-size: .75rem; line-height: 1.45; }
.pv-legal em { display: block; margin-top: 3px; font-style: normal; color: var(--sec); }
.pv-note { margin: 0; text-align: center; }

/* ---------- 12. Pedido de demo ---------- */

.pedido { display: grid; gap: 24px; padding: 22px; }
@media (min-width: 760px) { .pedido { padding: 32px; } }
.pedido .seccion-cab { margin: 0; }
.solicitud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .solicitud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.solicitud .ancho, .solicitud .acciones, .solicitud .msg { grid-column: 1 / -1; }
.solicitud .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.solicitud .alt { font-size: .9375rem; color: var(--sec); }
/* El mensaje del envío: vacío no ocupa lugar; el de error, en rojo. */
.solicitud .msg { margin: 0; }
.solicitud .msg:not(:empty) { padding: 12px 14px; border-radius: var(--r); background: var(--gris-50); color: var(--texto); font-size: .9375rem; }
.solicitud .msg.ok { background: var(--ok-50); color: #0F4F31; }
.solicitud .msg.err { background: var(--error-50); color: #8A1A12; }
/* El campo trampa: un humano no lo ve ni lo toca; un robot que rellena
   todo lo completa y con eso se descarta. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 13. Cierre de página ---------- */

.cierre-l { display: grid; gap: 14px; justify-items: center; padding: 32px 22px; border-radius: var(--r-grande); background: var(--gris-50); text-align: center; }
.franja.gris .cierre-l { background: var(--blanco); border: 1px solid var(--linea); }
.cierre-l h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.cierre-l p { margin: 0; max-width: 620px; }
@media (min-width: 760px) { .cierre-l { padding: 48px 32px; } }

/* ---------- 14. Pie ---------- */

/* La última franja ya deja aire: el pie va pegado a ella. */
.pie-plataforma { margin-top: 0; }

/* Las columnas del pie están en sistema.css: las comparte layoutPlataforma. */
.pie-plataforma .legal p:last-child { margin-bottom: 0; }

/* ---------- 15. Movimiento reducido ---------- */

@media (max-width: 979px) {
  /* En angosto el edificio tiene su propia franja al pie de la portada,
     debajo de la tarjeta y entero: el lienzo mide solo esa franja (el
     script lo encuadra ahí) y el velo solo funde su borde de arriba. */
  .portada-l { align-items: flex-start; padding-bottom: 480px; }
  .portada-l .lienzo, .portada-l .velo { top: auto; height: 480px; }
  .portada-l .velo { background: linear-gradient(180deg, rgba(10, 19, 34, 1) 0%, rgba(10, 19, 34, .55) 18%, rgba(10, 19, 34, 0) 40%); }
  html:not(.js) .portada-l { padding-bottom: 56px; }
}
/* Sin JavaScript no hay edificio: la franja se ajusta al texto. */
html:not(.js) .portada-l { min-height: 0; padding-bottom: 56px; }
html:not(.js) .portada-l .lienzo, html:not(.js) .portada-l .velo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .barra > i { transition: none; }
}

/* ---------- 16. Tres pasos de la home ----------
   Tres renglones y nada más: el número, la acción y una frase. */
.empezar-l { list-style: none; counter-reset: empezar; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .empezar-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.empezar-l li { counter-increment: empezar; display: grid; gap: 4px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); }
.empezar-l li::before { content: counter(empezar, decimal-leading-zero); font: 800 1.5rem/1 var(--f-titulo); color: var(--accion-texto, var(--accion)); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.empezar-l b { font: 700 1.125rem/1.3 var(--f-titulo); color: var(--tinta); }
.empezar-l span { color: var(--texto); }
.empezar-acciones { margin: 20px 0 0; }

/* ---------- 17. Club de Miembros (#sumate) ----------
   Los tres niveles en corto y el mismo formulario de /club. Los campos
   son los del sistema (.campo, .entrada, .opcion); acá va solo la
   grilla: una columna en el teléfono, dos desde 640 px. */
.niveles { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .niveles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.nivel { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--r-card); background: var(--blanco); }
.nivel > .chip { justify-self: start; }
.nivel b { font: 700 1.125rem/1.3 var(--f-titulo); color: var(--tinta); }
.nivel p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--texto); }
.nivel.destacado { border-color: var(--tinta); box-shadow: var(--sombra-1); }

.club-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 860px; padding: 22px; }
@media (min-width: 640px) { .club-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }
@media (min-width: 760px) { .club-form { padding: 28px; } }
.club-form .ancho { grid-column: 1 / -1; }
.club-form select.entrada { cursor: pointer; }
.club-form .opcion { font-size: .9375rem; line-height: 1.45; color: var(--texto); }
.club-form .opcion a { color: var(--tinta); font-weight: 600; }
.club-form .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.club-form .alt { font-size: .9375rem; color: var(--sec); }
.club-form .alt a { color: var(--tinta); font-weight: 600; }
/* El mensaje del envío: vacío no ocupa lugar; el de error, en rojo. */
.club-form .msg { margin: 0; }
.club-form .msg:empty { display: none; }
.club-form .msg:not(:empty) { padding: 12px 14px; border-radius: var(--r); background: var(--gris-50); color: var(--texto); font-size: .9375rem; }
.club-form .msg.ok { background: var(--ok-50); color: #0F4F31; }
.club-form .msg.err { background: var(--error-50); color: #8A1A12; }
/* El campo trampa (name="web") se esconde con .hp, como en /empresas. */
@media (max-width: 520px) { .club-form .btn { width: 100%; } }

/* La única línea de riesgo del sitio, en el pie de la home. */
.pie-plataforma .legal .riesgo { font-weight: 600; }

/* ---------- 18. Home de noche ----------
   La home entera va en la paleta oscura del diseño de la familia; las
   otras cuatro páginas siguen claras. El encabezado y el pie son el
   HTML de layoutPlataforma (la prueba lo exige byte a byte), así que el
   oscuro entra por CSS desde <body class="home-noche">: se redefinen los
   tokens que los componentes del sistema ya usan (tinta, fondo, líneas,
   acción) y se pisan los pocos colores que están escritos a mano. */
body.home-noche {
  --noche: #0A1322; --noche-2: #0D182A; --noche-card: #101C33; --noche-borde: #1E2D47; --noche-borde-2: #2A3B57;
  --noche-texto: #E6ECF4; --menta: #34D3A5; --menta-2: #5EE2BC;
  --tinta: var(--noche-texto); --texto: #AFBCCE; --sec: #8B98B0; --decor: #5B6B84;
  --blanco: var(--noche-card); --gris-50: var(--noche-2); --gris-100: #16233A; --gris-200: #1E2D47;
  --linea: var(--noche-borde); --linea-fuerte: var(--noche-borde-2); --borde-campo: var(--noche-borde-2);
  --accion: var(--menta); --accion-hover: var(--menta-2); --sobre-accion: #0B1220; --accion-texto: var(--menta); --accion-borde: transparent;
  --foco: var(--menta); --s-colocacion: var(--menta);
  --ok-50: rgba(52, 211, 165, .14); --ok: var(--menta); --aviso-50: rgba(246, 193, 79, .16); --aviso: #F6C14F;
  --info-50: rgba(80, 136, 212, .18); --info: #8EC5FF; --error-50: rgba(239, 100, 90, .18); --error: #FF8A80;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-card: 0 18px 40px rgba(0, 0, 0, .35);
  background: var(--noche); color: var(--noche-texto);
}
/* El encabezado de la plataforma, en la noche. */
body.home-noche .top.claro { --primario: var(--noche); --sobre-primario: var(--noche-texto); --primario-velo: #16233A; --primario-velo-fuerte: #1E2D47; background: var(--noche); color: var(--noche-texto); border-bottom-color: var(--noche-borde); }
body.home-noche .top.claro .marca b { color: #FFFFFF; }
body.home-noche .top.claro .marca small { color: #AFBCCE; }
body.home-noche .top.claro nav a.btn-primario { color: var(--sobre-accion); }
body.home-noche .menu-btn { background: #16233A; }
/* Franjas: la noche y la noche un poco más clara, alternadas. */
body.home-noche .franja.gris { background: var(--noche-2); }
body.home-noche .franja .seccion-cab h2, body.home-noche .cierre-l h2 { color: #FFFFFF; }
body.home-noche .franja .seccion-cab { gap: 8px; }
body.home-noche .franja .seccion-cab .eyebrow { margin-bottom: 4px; }
body.home-noche .enlace-flecha { color: var(--menta); }
body.home-noche .enlace-flecha:hover { color: var(--menta-2); }
/* Lo que el sistema pinta en blanco a mano. */
body.home-noche .tarjeta, body.home-noche .opcion { background: var(--noche-card); }
body.home-noche .entrada { background: var(--noche-2); color: #FFFFFF; }
body.home-noche .entrada::placeholder { color: #6B7A94; }
body.home-noche .entrada:focus { border-color: var(--menta); box-shadow: 0 0 0 4px rgba(52, 211, 165, .18); }
body.home-noche .opcion input { accent-color: var(--menta); }
body.home-noche .opcion:has(input:checked) { border-color: var(--menta); }
body.home-noche .chip { background: #16233A; color: #C9D3E3; }
body.home-noche .chip.oscuro { background: var(--menta); color: #0B1220; }
body.home-noche .club-form .msg.ok { background: var(--ok-50); color: var(--menta); }
body.home-noche .club-form .msg.err { background: var(--error-50); color: #FFB4AD; }
body.home-noche .club-form .msg:not(:empty) { background: var(--noche-2); color: var(--noche-texto); }
body.home-noche .ico-caja { background: #16233A; color: var(--menta); }
/* Tres pasos como tarjetas numeradas; la del medio, destacada. */
body.home-noche .empezar-l li { padding: 24px; gap: 8px; }
body.home-noche .empezar-l li::before { font: 500 1.0625rem/1 var(--f-codigo); color: var(--menta); letter-spacing: .04em; }
body.home-noche .empezar-l b { color: #FFFFFF; }
body.home-noche .empezar-l li:nth-child(2) { border-color: var(--menta); }
/* Las tarjetas de proyecto que arma app.js (el DOM es el del sistema). */
body.home-noche .proy { background: var(--noche-card); border-color: var(--noche-borde); }
body.home-noche .proy:hover { border-color: var(--noche-borde-2); }
body.home-noche .proy-portada { background: #16233A; }
body.home-noche .proy-portada .icono svg { color: #FFFFFF; }
body.home-noche .proy h3 a, body.home-noche .proy-datos dd, body.home-noche .proy-meta .pozo-linea { color: #FFFFFF; }
body.home-noche .proy-empresa { font-family: var(--f-codigo); font-weight: 500; letter-spacing: .02em; max-width: 100%; }
body.home-noche .proy-datos dd { font-family: var(--f-codigo); font-weight: 600; }
body.home-noche .proy-empresa .ini { background: #1E2D47; color: #FFFFFF; }
body.home-noche .barra { background: #1E2D47; }
body.home-noche .proy.libre { background: transparent; border-style: dashed; border-color: var(--noche-borde-2); }
body.home-noche .proy.libre .proy-portada { background: transparent; border-bottom-color: var(--noche-borde-2); }
/* El Club: el Premium se destaca con la menta. */
body.home-noche .nivel.destacado { border-color: var(--menta); box-shadow: none; }
body.home-noche .nivel b { color: #FFFFFF; }
/* Gráficas y métricas: la lista y la ficha de ejemplo. */
.metricas-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.metricas-in > * { min-width: 0; }
@media (min-width: 960px) { .metricas-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } .metricas-in .ficha-ejemplo { justify-self: end; max-width: 480px; } }
.metricas-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.metricas-l li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.metricas-l b { display: block; color: #FFFFFF; font: 700 1rem/1.3 var(--f-titulo); }
.metricas-l span { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.5; color: #AFBCCE; }
.fe-datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fe-datos > div { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--noche-borde); border-radius: var(--r); background: #0D182A; }
.fe-datos dt { font-size: .75rem; color: #AFBCCE; }
/* La cifra se achica en el teléfono antes que cortarse: nunca se parte un número. */
.fe-datos dd { margin: 0; font: 600 clamp(.8125rem, 3.6vw, 1rem)/1.2 var(--f-codigo); color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-sim { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--noche-borde); border-radius: var(--r); background: #0D182A; font-size: .9375rem; color: #AFBCCE; }
.fe-sim strong { font: 600 .9375rem/1.2 var(--f-codigo); color: #FFFFFF; white-space: nowrap; }
.fe-sim strong::before { content: "→ "; color: var(--menta); }
/* El video, al centro. */
.contenedor.centrado { display: grid; justify-items: center; }
.franja .seccion-cab.centrada { margin-left: auto; margin-right: auto; justify-items: center; text-align: center; }
body.home-noche .video-marco { width: 100%; max-width: 860px; border: 1px solid var(--noche-borde); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
/* Marco legal: la línea de la ley en letra de máquina, entre el título y la frase. */
body.home-noche .sello-l { padding: 20px; gap: 14px; }
body.home-noche .sello-l > div { display: grid; }
body.home-noche .sello-l > div > b { order: 0; color: #FFFFFF; }
body.home-noche .sello-l > div > small { order: 1; display: block; margin: 4px 0 8px; font: 500 .75rem/1.4 var(--f-codigo); color: var(--menta); letter-spacing: .02em; }
body.home-noche .sello-l > div > span { order: 2; }
/* Para empresas: una caja con borde, el texto a la izquierda y el botón a la derecha. */
.cierre-l.empresas-l { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; padding: 28px 24px; background: var(--noche-card); border: 1px solid var(--noche-borde); }
.cierre-l.empresas-l > * { min-width: 0; max-width: 100%; }
.cierre-l.empresas-l > div { display: grid; gap: 8px; }
.cierre-l.empresas-l h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.cierre-l.empresas-l p { color: #AFBCCE; }
@media (min-width: 860px) { .cierre-l.empresas-l { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 36px 32px; } }
/* El pie, en la noche. */
body.home-noche .pie-plataforma { background: var(--noche); border-top-color: var(--noche-borde); color: #AFBCCE; }
body.home-noche .pie-plataforma a { color: #C9D3E3; }
body.home-noche .pie-plataforma a:hover { color: #FFFFFF; }
body.home-noche .pie-cols h2 { color: #FFFFFF; }
body.home-noche .pie-cols { border-bottom-color: var(--noche-borde); }
body.home-noche .pie-plataforma .legal { background: transparent; border-color: var(--noche-borde); color: #8B98B0; }
body.home-noche .pie-plataforma .legal .riesgo { color: #E6ECF4; }