/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · LA BANDEJA DE COTIZACIONES (2026-09-25, maqueta aprobada por Luis)
   ───────────────────────────────────────────────────────────────────────────
   Todo lo de la bandeja vive acá y en aria-bandeja.js, con el prefijo `bj-`, para que
   ninguna clase choque con las de la consola (`menu`, `chip`, `estado`, `hoja`, `fila`…).

   LOS COLORES VAN EN VARIABLES y cada tema sólo cambia unas pocas (al final del archivo). Son
   tres desde el 2026-09-27 (Luis): oscuro, con el suelo de tinta; teal, con el suelo del teal de
   la barra de menú (#046477) —el que fue el claro entre el 25 y el 27—; y claro, con suelo de
   papel crema, al que las dos fotos llegan fundiéndose como la arena. Este archivo no pasa por
   el generador del tema claro (5 herramientas/generar-tema-claro.py lo excluye): sus temas se
   escriben acá, a mano.

   Dentro del libro de marca: tinta, deep, teal, salvia y crema, más blanco; ocre y rojo sólo
   de relleno; ni negrita; lo presionado en deep. El vidrio de la barra de abajo y de sus
   círculos es el mismo de los botones de la barra de arriba sobre la foto.
   ═══════════════════════════════════════════════════════════════════════════ */

#home{
  --bj-suelo:#1A2633; --bj-suelo-rgb:26,38,51; --bj-hoja:#222E3A;
  --bj-crema:#EADFCE; --bj-crema70:rgba(234,223,206,.72); --bj-crema55:rgba(234,223,206,.66);
  --bj-filete:rgba(234,223,206,.12); --bj-filete2:rgba(234,223,206,.22);
  --bj-deep:#005565; --bj-teal:#006D82; --bj-salvia:#7D9B5B; --bj-ocre:#8A6A2F; --bj-rojo:#B3261E;
  --bj-vidrio:rgba(20,29,39,.58); --bj-vidrio-filete:rgba(255,255,255,.30);
  --bj-vidrio-hover:rgba(0,85,101,.85); --bj-vidrio-filete-hover:rgba(255,255,255,.55);
  --bj-barra:var(--alto-barra,66px);
  /* la letra fuerte y el tinte de los filetes y velos del suelo: blanco y crema sobre tinta y teal; en el claro, tinta */
  --bj-fuerte:#FFFFFF; --bj-tinte-rgb:234,223,206;
  /* los acentos teal translúcidos: sobre el suelo teal del claro no se verían, y allá pasan a crema */
  --bj-camino:rgba(234,223,206,.12); --bj-hecho:var(--bj-crema70); --bj-llego:rgba(0,109,130,.45);
  --bj-halo:rgba(0,109,130,.28); --bj-realce:rgba(0,109,130,.16);
  background-color:var(--bj-suelo); color:var(--bj-crema);
}
#home [hidden]{ display:none !important; }
#home .bj-ico{ width:16px; height:16px; flex:none; display:inline-block; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#home .bj b, #home .bj strong{ font-weight:400; }

/* la estrella de ARIA: la de Terranova, blanca sobre el disco deep, la misma cara que tiene en el chat */
#home .bj-av{ flex:none; display:inline-grid; place-items:center; width:var(--av,30px); height:var(--av,30px); border-radius:50%; background-color:var(--bj-deep); color:#FFFFFF; }
#home .bj-av svg{ width:58%; height:58%; display:block; }
/* la de la pregunta es un botón: abre la guía de lo que ARIA entiende; tocada o abierta, pasa al teal */
#home button.bj-av{ border:0; padding:0; margin:0; cursor:pointer; transition:background-color .2s; }
#home button.bj-av:hover, #home button.bj-av[aria-expanded="true"]{ background-color:#006D82; }
#home button.bj-av:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }

/* ═════ LA PORTADA: a la izquierda el día en tres cifras; a la derecha, ARIA te habla ═════
   Ocupa la pantalla entera y lleva adentro las tarjetas de hoy, que terminan ENCIMA de la barra
   de abajo: al cargar todo va sobre la foto y nada queda tapado. Por eso tarjetas, globo y barra
   son vidrio con colores fijos y en el tema claro no cambian (Luis 2026-09-25); el suelo sólo
   aparece en el último filo, donde la foto se funde con él. Usa la misma retícula de tres
   columnas que las tarjetas: el saludo y las cifras ocupan las dos primeras y ARIA la tercera. */
#home .bj-portada{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
  min-height:max(520px, 100vh); min-height:max(520px, 100svh); background-color:#141D27; }
/* detrás de la foto, siempre tinta: la foto entra desvaneciéndose, y sobre el suelo del tema (el
   crema del claro, en el celular) se veía lavada un instante al cargar (Luis, 2026-09-27) */
#home .bj-fotos{ position:absolute; inset:0; z-index:-3; background-color:#141D27; }
#home .bj-foto{ position:absolute; inset:0; background-size:cover; background-position:center 45%; opacity:0; transition:opacity .9s cubic-bezier(.22,.9,.24,1); }
#home .bj-foto.activa{ opacity:1; }
#home .bj-portada::after{ content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.08) calc((100% - var(--bj-extra)) * .26),
    rgba(26,38,51,.05) calc((100% - var(--bj-extra)) * .44), rgba(26,38,51,.5) calc((100% - var(--bj-extra)) * .72),
    rgba(26,38,51,.72) calc(100% - var(--bj-extra)), var(--bj-suelo) calc(100% - 6px)); }
#home .bj-portada__in{ flex:1; width:100%; max-width:1280px; margin:0 auto; padding:calc(var(--bj-barra) + 36px) 32px 40px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:12px; align-items:end; }
#home .bj-lugar{ position:absolute; right:32px; top:calc(var(--bj-barra) + 22px); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.75); transition:opacity .26s linear; }
#home .bj-envol{ max-width:1280px; margin:0 auto; padding:0 32px; }
/* debajo de las tarjetas, el alto de la barra de abajo y su aire */
#home .bj-portada__hoy{ width:100%; padding-bottom:calc(98px + env(safe-area-inset-bottom,0px)); }
#home .bj-dia{ position:relative; grid-column:1/3; min-width:0; }
/* Sobre una foto clara (neblina, cielo, arena) el blanco se lavaba (Luis, 2026-09-25): detrás del
   saludo va una sombra de tinta, ancha y difusa, que en las fotos oscuras casi no se nota. */
#home .bj-dia::before{ content:""; position:absolute; z-index:-1; inset:-30% -14% -34% -10%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(13,20,28,.62), rgba(13,20,28,.4) 55%, rgba(13,20,28,0)); }
#home .bj-fecha{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.75); }
#home .bj-saludo{ margin:12px 0 0; font:300 clamp(42px,4.6vw,66px)/1 var(--glare); color:#FFFFFF; letter-spacing:-.02em; text-shadow:0 2px 24px rgba(13,23,32,.7); }
/* las tres cifras en una sola línea, bajo un filete: la cifra en la letra de títulos y su nombre al lado, en voz baja */
#home .bj-libro{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 28px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.4); }
#home .bj-libro div{ display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
#home .bj-libro b{ font:300 26px/1 var(--glare); color:#FFFFFF; font-variant-numeric:tabular-nums; text-shadow:0 2px 16px rgba(13,23,32,.7); }
#home .bj-libro span{ font-size:12.5px; color:#FFFFFF; text-shadow:0 1px 10px rgba(13,23,32,.8); }

/* ARIA te habla: su estrella y un globo de chat en vidrio; la acción, cuál de cuántas y las flechas van adentro, abajo */
#home .bj-idea{ grid-column:3; display:flex; align-items:flex-start; gap:12px; min-width:0; --av:34px; }
#home .bj-idea__globo{ flex:1; min-width:0; padding:16px 16px 12px 18px; border-radius:4px 18px 18px 18px; }
#home .bj-idea p{ margin:0; min-height:70px; font:300 15px/1.55 var(--sans); color:var(--bj-crema); }
#home .bj-idea p b{ color:#FFFFFF; }
#home .bj-idea__pie{ display:flex; align-items:center; gap:8px; margin-top:12px; }
#home .bj-idea__accion{ all:unset; cursor:pointer; padding:7px 15px; border-radius:99px; background-color:var(--bj-deep); color:#FFFFFF; font-size:12.5px; white-space:nowrap; }
#home .bj-idea__accion:hover{ background-color:var(--bj-teal); }
#home .bj-idea__accion:focus-visible{ outline:2px solid #FFFFFF; }
#home .bj-idea__n{ margin-left:auto; font-size:11.5px; color:var(--bj-crema55); font-variant-numeric:tabular-nums; white-space:nowrap; }
#home .bj-idea__nav{ display:flex; gap:4px; }
#home .bj-idea__nav button{ all:unset; cursor:pointer; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--bj-crema); border:1px solid rgba(var(--bj-tinte-rgb),.26); transition:border-color .2s, color .2s; }
#home .bj-idea__nav button:hover{ border-color:var(--bj-crema); color:#FFFFFF; }
#home .bj-idea__nav .bj-ico{ width:13px; height:13px; }
/* En un globo angosto (una pantalla de 1000 a 1200 px, o la de una laptop con el escalado de
   Windows) la acción, la cuenta y las flechas no caben en un renglón y la flecha se salía del
   globo (Luis, 2026-09-25): la acción va sola arriba, y la cuenta y las flechas debajo. */
#home .bj-idea__globo{ container-type:inline-size; }
@container (max-width:250px){
  #home .bj-idea__pie{ display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:10px; }
  #home .bj-idea__accion{ grid-column:1 / -1; justify-self:start; }
  #home .bj-idea__n{ margin-left:0; }
}
/* mientras «escribe»: los tres puntos del chat */
#home .bj-escribe{ display:inline-flex; gap:5px; padding:8px 0; }
#home .bj-escribe i{ width:6px; height:6px; border-radius:50%; background-color:var(--bj-crema); animation:bj-escribe 1.1s ease-in-out infinite; }
#home .bj-escribe i:nth-child(2){ animation-delay:.15s; } #home .bj-escribe i:nth-child(3){ animation-delay:.3s; }
@keyframes bj-escribe{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } }
#home .bj-pal{ display:inline-block; animation:bj-aparece .55s cubic-bezier(.22,.9,.24,1) both; }
@keyframes bj-aparece{ from{ opacity:0; filter:blur(5px); transform:translateY(3px); } }

/* ═════ LO DE HOY: tres tarjetas chicas pero completas; nada se corta con puntos suspensivos ═════
   A la izquierda, qué viaje, con quién y qué toca hoy; a la derecha, tras el filete punteado del
   talón, el monto y la pluma para redactar. Son del mismo vidrio que el globo de ARIA. */
#home .bj-pases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#home .bj-pase, #home .bj-idea__globo{ background-color:rgba(26,38,51,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(1.15); -webkit-backdrop-filter:blur(22px) saturate(1.15); }
#home .bj-pase{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; min-width:0; padding:14px 12px 14px 18px; border-radius:14px; cursor:pointer;
  transition:border-color .3s, opacity .3s; }
@media (hover:hover){
  #home .bj-pases:hover .bj-pase{ opacity:.55; }
  #home .bj-pases .bj-pase:hover{ opacity:1; border-color:rgba(255,255,255,.45); }
}
#home .bj-pase__cuerpo{ min-width:0; padding-left:15px; }
#home .bj-pase__tit{ position:relative; font:300 16px/1.3 var(--glare); color:var(--bj-fuerte); }
#home .bj-pase__tit::before{ content:""; position:absolute; left:-15px; top:.5em; width:6px; height:6px; border-radius:50%; background-color:var(--bj-ocre); }
#home .bj-pase__cli{ margin-top:4px; font-size:12px; color:var(--bj-crema70); }
#home .bj-pase__acc{ margin-top:8px; font-size:12px; line-height:1.4; color:var(--bj-crema); }
#home .bj-pase__acc em{ font-style:normal; color:var(--bj-crema55); }
#home .bj-pase__lado{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px; padding-left:14px; border-left:1px dashed rgba(var(--bj-tinte-rgb),.22); }
#home .bj-pase__monto{ text-align:right; font:300 17px/1 var(--glare); color:var(--bj-fuerte); font-variant-numeric:tabular-nums; white-space:nowrap; }
#home .bj-pase__monto small{ display:block; margin-top:5px; font:400 10.5px/1.2 var(--sans); color:var(--bj-crema55); }
#home .bj-pluma{ all:unset; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#FFFFFF;
  background-color:var(--bj-vidrio); border:1px solid var(--bj-vidrio-filete); transition:background-color .2s, border-color .2s; }
#home .bj-pluma:hover{ background-color:var(--bj-vidrio-hover); border-color:var(--bj-vidrio-filete-hover); }
#home .bj-pluma:focus-visible{ outline:2px solid #FFFFFF; }
#home .bj-pluma .bj-ico{ width:15px; height:15px; }

/* ═════ LA LISTA: va enseguida de lo de hoy, pero arriba del todo no se ve: aparece apenas se
   baja y se esconde al volver, para que la vista inicial quede limpia ═════ */
#home .bj-principal{ padding-bottom:40px; transition:opacity .5s cubic-bezier(.22,.9,.24,1), transform .5s cubic-bezier(.22,.9,.24,1); }
#home .bj-principal.bj-oculta{ opacity:0; transform:translateY(14px); pointer-events:none; }
#home .bj-grupo{ margin-top:30px; }
#home .bj-grupo__cab{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding:0 4px 10px; border-bottom:1px solid var(--bj-filete); }
#home .bj-grupo__cab h2{ margin:0; font:400 18px/1 var(--glare); color:var(--bj-crema); }
#home .bj-grupo__cab > span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bj-crema55); }
#home .bj-quitar{ all:unset; cursor:pointer; margin-left:auto; font-size:12px; color:var(--bj-crema); border-bottom:1px solid rgba(var(--bj-tinte-rgb),.45); line-height:1.3; }
#home .bj-quitar:hover{ color:var(--bj-fuerte); border-color:var(--bj-fuerte); }
/* Notas de crédito: no son de ninguna cotización, así que van en la cabecera de la lista */
#home .bj-nc{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--bj-crema70); }
#home .bj-quitar[hidden] + .bj-nc{ margin-left:auto; }
#home .bj-nc:hover{ color:var(--bj-fuerte); }
#home .bj-nc .bj-ico{ width:14px; height:14px; }
#home .bj-filas{ list-style:none; margin:0; padding:0; }
/* lo que ARIA entendió, sobre las filas */
#home .bj-grupo > .bj-entendio{ align-items:center; margin:14px 0 4px; padding:0 4px; --av:22px; }
#home .bj-entendio__rot{ margin-right:4px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-crema55); }
#home span.bj-chip{ cursor:default; animation:none; }
@media (hover:hover){ #home .bj-filas:hover .bj-fila{ opacity:.5; } }
#home .bj-filas .bj-fila:hover, #home .bj-filas .bj-fila:focus-within{ opacity:1; }
#home .bj-fila{ display:grid; grid-template-columns:minmax(0,1fr) 250px 150px 96px; gap:26px; align-items:start; padding:20px 4px 18px;
  border-bottom:1px solid var(--bj-filete); cursor:pointer; transition:opacity .25s, background-color .25s; }
#home .bj-fila:hover{ background:linear-gradient(90deg, rgba(var(--bj-tinte-rgb),.05), rgba(var(--bj-tinte-rgb),0)); }
#home .bj-fila__tit{ font:400 20px/1.25 var(--glare); color:var(--bj-fuerte); }
#home .bj-fila__meta{ margin-top:6px; font-size:12.5px; color:var(--bj-crema70); display:flex; gap:8px; flex-wrap:wrap; }
#home .bj-fila__meta .bj-cod{ letter-spacing:.14em; color:var(--bj-crema); }
#home .bj-fila__meta i{ font-style:normal; color:var(--bj-crema55); }
#home .bj-toca{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--bj-crema70); flex-wrap:wrap; }
#home .bj-toca::before{ content:""; width:6px; height:6px; border-radius:50%; background-color:var(--bj-ocre); flex:none; }
#home .bj-toca em{ font-style:normal; color:var(--bj-crema55); }
#home .bj-toca button{ all:unset; cursor:pointer; color:var(--bj-crema); border-bottom:1px solid rgba(var(--bj-tinte-rgb),.45); line-height:1.2; }
#home .bj-toca button:focus-visible{ outline:2px solid var(--bj-crema); }
#home .bj-prox{ margin-top:10px; font-size:12px; color:var(--bj-crema55); }
#home .bj-estado{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.04em; white-space:nowrap; margin-top:3px; color:var(--bj-crema); }
#home .bj-estado::before{ content:""; box-sizing:border-box; width:8px; height:8px; border-radius:50%; background-color:var(--c,transparent); border:1.5px solid var(--b,var(--c)); }
#home .bj-e-abierta{ --b:var(--bj-crema); }
#home .bj-e-propuesta_enviada{ --c:var(--bj-teal); }
#home .bj-e-seguimiento{ --c:var(--bj-ocre); }
#home .bj-e-aceptada, #home .bj-e-reservada, #home .bj-e-reconfirmada, #home .bj-e-operada, #home .bj-e-facturada{ --c:var(--bj-salvia); }   /* salvia = hecho: el sí y lo que sigue */
#home .bj-e-perdida{ --c:var(--bj-rojo); }
#home .bj-e-cancelada{ --b:var(--bj-rojo); }   /* aro rojo: se concretó y se cayó (la perdida es el punto lleno) */
#home .bj-camino{ margin-top:9px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
#home .bj-camino i{ height:3px; border-radius:2px; background-color:var(--bj-camino); }
#home .bj-camino i.hecho{ background-color:var(--bj-hecho); }
#home .bj-camino i.aqui{ background-color:var(--bj-teal); }
#home .bj-camino i.llego{ background-color:var(--bj-llego); }
#home .bj-camino-rot{ margin-top:6px; font-size:11.5px; color:var(--bj-crema55); }
#home .bj-camino-rot b{ color:var(--bj-crema70); }
#home .bj-fila__total{ text-align:right; font:400 22px/1 var(--glare); font-variant-numeric:tabular-nums; color:var(--bj-fuerte); padding-top:2px; }
#home .bj-fila__total small{ display:block; margin-top:6px; font:400 12px/1.2 var(--sans); color:var(--bj-crema55); }
#home .bj-fila__cuando{ text-align:right; font-size:12px; color:var(--bj-crema55); white-space:nowrap; padding-top:4px; }
#home .bj-fila__acc{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; opacity:0; transition:opacity .2s; }
#home .bj-fila:hover .bj-fila__acc, #home .bj-fila:focus-within .bj-fila__acc{ opacity:1; }
#home .bj-circ{ all:unset; position:relative; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#FFFFFF;
  background-color:rgba(13,23,32,.62); border:1px solid rgba(var(--bj-tinte-rgb),.34); }
#home .bj-circ:hover{ border-color:var(--bj-crema); }
#home .bj-circ .bj-ico{ width:13px; height:13px; }
#home .bj-mas{ all:unset; cursor:pointer; display:block; margin:22px auto 0; padding:9px 18px; border-radius:99px; font-size:12.5px; color:var(--bj-crema); border:1px solid var(--bj-filete2); }
#home .bj-mas:hover{ border-color:var(--bj-crema); color:var(--bj-fuerte); }
#home .bj-vacio{ padding:40px; text-align:center; color:var(--bj-crema55); }

/* ═════ EL MUELLE: la pregunta en pastilla y los filtros en círculos, idénticos a los de la barra de arriba ═════ */
#home{ --bj-sobre:84px; --bj-ancho:min(760px, calc(100vw - 32px)); }
#home .bj-piso{ position:fixed; left:0; right:0; bottom:0; height:150px; z-index:43; pointer-events:none; transition:opacity .4s;
  background:linear-gradient(180deg, rgba(var(--bj-suelo-rgb),0), rgba(var(--bj-suelo-rgb),.8) 58%, rgba(var(--bj-suelo-rgb),.96)); }
#home .bj-piso.bj-fuera{ opacity:0; }
#home .bj-muelle{ position:fixed; z-index:45; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:var(--bj-ancho); display:flex; align-items:center; gap:8px; }
#home .bj-pregunta{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; height:48px; padding:0 16px 0 8px; border-radius:99px; cursor:text; --av:32px; }
/* El campo va desnudo dentro de la pastilla: lleva `bg-transparent border-0`, que es la salida
   que la regla general de campos de aria-lujo.css ya prevé (si no, le pone su fondo y su filete
   y dentro de la pastilla se ve una caja dentro de otra, Luis 2026-09-25). El anillo de foco de
   esa regla no tiene salida y se apaga acá: el foco lo dice la pastilla con su borde. Lleva el id
   del campo porque el anillo del tema claro generado pesa más (Luis lo vio al escribir). */
#home .bj-pregunta input{ flex:1; min-width:0; background:none; border:0; outline:0; box-shadow:none; padding:0; font:400 14px/1.2 var(--sans); color:#FFFFFF; }
html.aria-lujo #home .bj-pregunta input#bjBusca:focus, html.aria-lujo #home .bj-pregunta input#bjBusca:focus-visible{ outline:0 !important; box-shadow:none !important; }
/* el ejemplo va en blanco en los dos temas: el claro generado pone tinta en todos los campos */
html.aria-lujo #home .bj-pregunta input::placeholder{ color:rgba(255,255,255,.62) !important; }
#home .bj-m-grupo{ display:flex; align-items:center; gap:8px; }
#home .bj-m-bt{ all:unset; box-sizing:border-box; position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; cursor:pointer; }
#home .bj-m-bt span{ display:none; }
#home .bj-m-movil{ display:none; }
/* el mismo vidrio, el mismo filete y el mismo acento que los círculos de arriba: al tocarlo se enciende */
#home .bj-pregunta, #home .bj-m-bt{ background-color:var(--bj-vidrio); border:1px solid var(--bj-vidrio-filete); color:#FFFFFF;
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); transition:background-color .2s, border-color .2s; }
#home .bj-m-bt:hover{ background-color:var(--bj-vidrio-hover); border-color:var(--bj-vidrio-filete-hover); }
#home .bj-m-bt.on{ background-color:var(--bj-deep); border-color:var(--bj-deep); }
#home .bj-m-bt:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
#home .bj-pregunta:focus-within{ border-color:var(--bj-vidrio-filete-hover); }

/* LA GUÍA: al tocar la estrella, todo lo que ARIA entiende, con ejemplos que se tocan */
#home .bj-guia{ position:fixed; left:50%; bottom:calc(var(--bj-sobre) + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:46; width:var(--bj-ancho);
  max-height:min(60vh,520px); overflow:auto; padding:16px 12px 12px; border-radius:22px; background-color:rgba(22,33,44,.93); border:1px solid rgba(var(--bj-tinte-rgb),.16);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 40px 90px -30px rgba(3,7,11,.95); animation:bj-sube .35s cubic-bezier(.22,.9,.24,1); }
@keyframes bj-sube{ from{ opacity:0; transform:translate(-50%,12px); } }
#home .bj-guia__cab{ display:flex; align-items:flex-start; gap:12px; padding:2px 4px 14px; --av:34px; }
#home .bj-guia__cab h4{ margin:3px 0 0; font:400 20px/1.2 var(--glare); color:var(--bj-fuerte); }
#home .bj-guia__cab p{ margin:5px 0 0; max-width:56ch; font-size:13px; line-height:1.5; color:var(--bj-crema70); }
#home .bj-guia__cab .bj-circ{ flex:none; margin-left:auto; }
#home .bj-guia__temas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; padding:16px 4px 4px; border-top:1px solid var(--bj-filete); }
#home .bj-guia__temas h5{ margin:0 0 8px; font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-crema55); }
#home .bj-entendio{ display:flex; flex-wrap:wrap; gap:6px 8px; }
@media (max-width:640px){ #home .bj-guia__temas{ grid-template-columns:minmax(0,1fr); } #home .bj-guia__cab h4{ font-size:18px; } }
#home .bj-chip{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:99px; font-size:12.5px; color:#FFFFFF;
  background-color:var(--bj-deep); animation:bj-aparece .4s both; }
#home .bj-chip small{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); }
#home .bj-chip--ej{ background-color:rgba(var(--bj-tinte-rgb),.05); box-shadow:inset 0 0 0 1px var(--bj-filete2); color:var(--bj-crema); }
#home .bj-chip--ej:hover, #home .bj-chip--ej:focus-visible{ background-color:rgba(var(--bj-tinte-rgb),.1); color:var(--bj-fuerte); }

/* los dos paneles que suben desde el muelle: adónde viajan y las próximas salidas */
#home .bj-hoja{ position:fixed; left:50%; bottom:calc(var(--bj-sobre) + env(safe-area-inset-bottom,0px)); z-index:44; width:min(1120px, calc(100vw - 32px)); max-height:min(68vh,640px); overflow:auto;
  transform:translate(-50%,18px) scale(.985); opacity:0; visibility:hidden; transition:transform .45s cubic-bezier(.22,.9,.24,1), opacity .35s, visibility 0s .45s;
  padding:26px 30px 28px; border-radius:24px; background-color:rgba(var(--bj-suelo-rgb),.92); border:1px solid rgba(var(--bj-tinte-rgb),.2);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 40px 90px -30px rgba(4,8,12,.95); }
#home .bj-hoja.abierta{ transform:translate(-50%,0) scale(1); opacity:1; visibility:visible; transition:transform .45s cubic-bezier(.22,.9,.24,1), opacity .35s; }
#home .bj-hoja__cab{ position:relative; display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap; padding-right:52px; }
#home .bj-hoja__cab h3{ margin:0; font:400 28px/1.1 var(--glare); color:var(--bj-fuerte); }
#home .bj-hoja__cab p{ margin:0; color:var(--bj-crema70); font-size:13px; }
#home .bj-hoja__cab p b{ color:var(--bj-fuerte); }
#home .bj-hoja__cab .bj-circ{ position:absolute; top:0; right:0; width:34px; height:34px; }
#home .bj-mapa-sec{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:36px; align-items:center; margin-top:14px; }
/* el mapa se acerca por dentro de su caja: el dedo lo mueve a él y no a la página */
#home .bj-mapa{ position:relative; overflow:hidden; touch-action:none; }
#home .bj-mapa > svg{ transform-origin:0 0; }
#home .bj-mapa--cerca{ cursor:grab; }
#home .bj-mapa--cerca:active{ cursor:grabbing; }
#home .bj-mapa__zoom{ position:absolute; right:8px; bottom:8px; display:flex; flex-direction:column; gap:6px; }
#home .bj-mapa__zoom .bj-circ{ width:34px; height:34px; }
#home .bj-mapa > svg{ display:block; width:auto; max-width:100%; height:auto; max-height:min(54vh,500px); margin:0 auto; overflow:visible; }
#home .bj-prov{ fill:rgba(var(--bj-tinte-rgb),.035); stroke:rgba(var(--bj-tinte-rgb),.28); stroke-width:.9; }
#home .bj-punto{ cursor:pointer; }
#home .bj-punto circle.halo{ fill:var(--bj-halo); }
#home .bj-punto circle.nucleo{ fill:var(--bj-teal); stroke:var(--bj-suelo); stroke-width:1.5; }
#home .bj-punto circle.vacio{ fill:rgba(var(--bj-tinte-rgb),.35); }
#home .bj-punto.hoy circle.nucleo{ fill:var(--bj-ocre); }
#home .bj-punto.hoy circle.pulso{ fill:none; stroke:var(--bj-ocre); stroke-width:1.2; animation:bj-pulso 2.6s ease-out infinite; }
@keyframes bj-pulso{ from{ r:8; opacity:.9; } to{ r:26; opacity:0; } }
#home .bj-punto text{ font:400 11.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; fill:var(--bj-crema70); }
#home .bj-punto:hover text, #home .bj-punto.on text, #home .bj-punto.resalta text{ fill:var(--bj-fuerte); }
#home .bj-punto.on circle.nucleo, #home .bj-punto.resalta circle.nucleo{ fill:var(--bj-fuerte); }
#home .bj-punto.apagado{ opacity:.28; }
#home .bj-destinos{ max-height:min(54vh,500px); overflow:auto; scrollbar-width:thin; }
#home .bj-destinos ul{ list-style:none; margin:0; padding:0; }
#home .bj-destinos li button{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:baseline;
  padding:9px 4px; border-bottom:1px solid var(--bj-filete); color:var(--bj-crema70); }
#home .bj-destinos li button:hover, #home .bj-destinos li button.on{ color:var(--bj-fuerte); }
#home .bj-destinos li button:focus-visible{ outline:2px solid var(--bj-crema); }
#home .bj-destinos li button.on{ box-shadow:inset 2px 0 0 var(--bj-teal); padding-left:10px; }
#home .bj-destinos li b{ font:400 16px/1 var(--glare); color:var(--bj-fuerte); font-variant-numeric:tabular-nums; }
#home .bj-destinos li small{ font-size:12px; color:var(--bj-crema55); font-variant-numeric:tabular-nums; min-width:74px; text-align:right; }
/* el río se desliza de lado; el borde derecho se desvanece para decir que sigue */
#home .bj-rio-scroll{ margin-top:26px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
#home .bj-rio{ position:relative; height:190px; border-top:1px solid var(--bj-filete); }
#home .bj-rio__meses{ position:absolute; inset:0; display:flex; }
#home .bj-rio__mes{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; border-left:1px solid var(--bj-filete); padding:12px 12px 0; position:relative;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
#home .bj-rio__mes:first-child{ border-left:0; }
#home .bj-rio__mes span{ font:400 22px/1 var(--glare); color:var(--bj-crema55); text-transform:capitalize; white-space:nowrap; transition:color .2s; }
/* el año de enero, chico junto al mes: el nombre no se parte en dos renglones */
#home .bj-rio__mes span em{ font-style:normal; font-size:.6em; letter-spacing:.06em; }
#home .bj-rio__mes small{ display:block; margin-top:5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bj-crema55); }
#home .bj-rio__mes:hover span, #home .bj-rio__mes.on span{ color:var(--bj-fuerte); }
#home .bj-rio__mes.on{ background:linear-gradient(180deg, var(--bj-realce), transparent); }
#home .bj-rio__mes:focus-visible{ outline:2px solid var(--bj-crema); outline-offset:-2px; }
#home .bj-rio__linea{ position:absolute; left:0; right:0; top:128px; height:1px; background:linear-gradient(90deg, var(--bj-teal), rgba(var(--bj-tinte-rgb),.18)); }
#home .bj-rio__hoy{ position:absolute; left:0; top:110px; bottom:10px; width:1px; background-color:var(--bj-crema70); }
#home .bj-rio__hoy span{ position:absolute; bottom:0; left:6px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-crema70); white-space:nowrap; }
#home .bj-viaje{ all:unset; position:absolute; transform:translate(-50%,-50%); border-radius:50%; cursor:pointer; border:2px solid var(--bj-suelo); box-shadow:0 0 0 1px rgba(var(--bj-tinte-rgb),.25); transition:transform .25s; }
#home .bj-viaje:hover{ transform:translate(-50%,-50%) scale(1.35); z-index:3; }
#home .bj-viaje:focus-visible{ outline:2px solid var(--bj-crema); }
#home .bj-viaje.fuera{ opacity:.22; }
#home .bj-globo{ position:absolute; z-index:10; pointer-events:none; width:250px; padding:12px 14px; border-radius:12px; background-color:var(--bj-hoja); border:1px solid var(--bj-filete2);
  box-shadow:0 20px 44px -16px rgba(6,10,15,.9); transform:translate(-50%,calc(-100% - 16px)); }
#home .bj-globo b{ display:block; font:400 16px/1.2 var(--glare); color:var(--bj-fuerte); }
#home .bj-globo span{ display:block; margin-top:4px; font-size:12px; color:var(--bj-crema70); }

/* el menú de estado, vendedor y orden */
#home .bj-menu{ overflow:auto; position:fixed; z-index:70; min-width:230px; padding:6px; background-color:var(--bj-hoja); border:1px solid var(--bj-filete2); border-radius:14px; box-shadow:0 26px 60px -16px rgba(8,13,19,.9); }
#home .bj-menu h4{ display:flex; align-items:center; gap:8px; margin:6px 10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-crema55); }
#home .bj-menu h4 .bj-ico{ width:14px; height:14px; }
/* los estados, del mismo tamaño que «Todas» y «Para hoy» */
#home .bj-menu .bj-estado{ font-size:inherit; letter-spacing:0; }
/* EN EL CELULAR, estado, vendedor y orden van en el mismo menú: cada uno en su bloque, con aire
   entre ellos y su ícono, para que se entienda de un vistazo qué es qué; en una sola columna,
   con renglones bajos para que quepan los tres sin desplazarse (Luis, 2026-09-25). Sólo en una
   pantalla muy baja se desplaza por dentro. */
#home .bj-menu--todo{ min-width:250px; padding:6px; }
#home .bj-menu--todo .bj-menu__sec{ padding:0 2px 4px; border-radius:12px; background-color:rgba(var(--bj-tinte-rgb),.05); }
#home .bj-menu--todo .bj-menu__sec + .bj-menu__sec{ margin-top:6px; }
#home .bj-menu--todo h4{ margin:8px 10px 3px; font-size:10px; color:var(--bj-crema70); }
#home .bj-menu--todo button:not(.bj-menu__limpiar){ padding:5px 10px; font-size:13px; line-height:17px; }
#home .bj-menu--todo .bj-ini{ width:18px; height:18px; font-size:8.5px; }
#home .bj-menu h4 .bj-menu__limpiar{ display:inline; width:auto; margin-left:auto; padding:0; border-radius:0; font-size:12px; letter-spacing:.02em; text-transform:none;
  color:var(--bj-crema); border-bottom:1px solid rgba(var(--bj-tinte-rgb),.45); line-height:1.3; }
#home .bj-menu h4 .bj-menu__limpiar:hover{ background:none; color:var(--bj-fuerte); border-color:var(--bj-fuerte); }
#home .bj-menu h4 .bj-menu__limpiar[disabled]{ opacity:.4; cursor:default; }
#home .bj-menu button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:9px; color:var(--bj-crema70); }
#home .bj-menu button:hover, #home .bj-menu button:focus-visible{ background-color:rgba(var(--bj-tinte-rgb),.06); color:var(--bj-fuerte); }
#home .bj-menu button.on{ color:var(--bj-fuerte); }
#home .bj-menu button.on::after{ content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background-color:var(--bj-teal); }
#home .bj-menu small{ margin-left:auto; color:var(--bj-crema55); font-variant-numeric:tabular-nums; }
#home .bj-menu button.on small{ margin-left:0; }
#home .bj-ini{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; background-color:var(--bj-deep); color:#FFFFFF; }

@media (hover:none){ #home .bj-fila__acc{ opacity:1; } }
@media (max-width:980px){
  #home .bj-fila{ grid-template-columns:minmax(0,1fr) 140px; gap:12px 18px; }
  #home .bj-fila__estado{ grid-column:1/-1; grid-row:2; }
  #home .bj-fila__total{ grid-column:2; grid-row:1; }
  #home .bj-fila__cuando{ display:none; }
  /* COMO UN CHAT (Luis, 2026-09-25: «estilo WhatsApp»): el primer vistazo es una pantalla
     entera; abajo del todo la pregunta, justo encima ARIA te habla y encima el saludo con sus
     cifras. Las tarjetas de hoy quedan debajo de esa pantalla, sobre el suelo, y
     aparecen al bajar; después, la lista. */
  #home .bj-portada__in{ grid-template-columns:minmax(0,1fr); align-content:end; row-gap:28px;
    min-height:100vh; min-height:100svh; padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
  #home .bj-portada__hoy{ padding-bottom:48px; }
  /* La foto y su velo miden la primera pantalla, no la portada entera: si cubrieran también las
     tarjetas la foto se agrandaría y se recortaría de más. Debajo, las tarjetas ya no van sobre la
     foto sino sobre el suelo, así que siguen al tema como la lista (Luis, 2026-09-25: «en modo
     móvil esto no cambia a modo claro»). */
  #home .bj-fotos, #home .bj-portada::after{ bottom:auto; height:100vh; height:100svh; }
  #home .bj-dia, #home .bj-idea{ grid-column:1/-1; }
  /* el saludo es el título: sube un poco y deja aire antes de lo que dice ARIA; el globo, angosto como en un chat */
  #home .bj-idea{ max-width:500px; margin-top:clamp(0px, 11svh, 110px); }
  /* las tres cifras en tres columnas parejas: la cifra y, debajo, su nombre */
  #home .bj-libro{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; }
  #home .bj-libro div{ flex-direction:column; align-items:flex-start; gap:6px; white-space:normal; }
  /* lo de hoy, apilado: un solo bloque con las tres, una debajo de la otra y separadas por un filete */
  #home .bj-pases{ display:block; border-radius:14px; overflow:hidden; background-color:var(--bj-hoja); border:1px solid rgba(var(--bj-tinte-rgb),.16); }
  #home .bj-pase{ border:0; border-radius:0; background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
  #home .bj-pase + .bj-pase{ border-top:1px solid var(--bj-filete); }
  /* EL MAPA EN LA TABLETA Y EL CELULAR, sin desplazarse dentro del panel (Luis, 2026-09-25): el
     mapa toma el alto que queda y los destinos van debajo en una grilla, con «Todo el país»
     primero y a todo lo ancho. El monto de cada destino sólo va en escritorio. */
  #home .bj-mapa-sec{ grid-template-columns:1fr; gap:14px; margin-top:10px; }
  #home .bj-destinos{ max-height:none; overflow:visible; }
  #home .bj-destinos ul{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); column-gap:14px; }
  #home .bj-destinos li:first-child{ grid-column:1 / -1; }
  #home .bj-destinos li button{ grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:7px 4px; font-size:13.5px; }
  #home .bj-destinos li small{ display:none; }
  #home .bj-m-escritorio, #home .bj-m-grupo .bj-m-bt span{ display:none; }
  #home .bj-m-movil{ display:inline-flex; }
}
@media (max-width:640px){
  #home .bj-portada__in, #home .bj-envol{ padding-left:16px; padding-right:16px; }
  #home .bj-portada__in{ padding-top:calc(var(--bj-barra) + 36px); padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); row-gap:22px; }
  #home .bj-fecha{ letter-spacing:.2em; }
  #home .bj-saludo{ margin-top:10px; font-size:clamp(24px,8.6vw,40px); }
  #home .bj-libro{ gap:0 14px; margin-top:18px; padding-top:14px; }
  #home .bj-libro div{ gap:5px; }
  #home .bj-libro b{ font-size:22px; }
  #home .bj-libro span{ font-size:11px; line-height:1.3; }
  /* ARIA en el teléfono, como en un chat: su estrella a la izquierda y el globo a su lado, sin llegar al otro borde */
  #home .bj-idea{ gap:10px; --av:30px; max-width:min(500px, 94%); }
  #home .bj-idea__globo{ padding:14px 14px 12px 16px; }
  #home .bj-idea p{ font-size:14px; min-height:66px; }
  #home .bj-fila{ grid-template-columns:minmax(0,1fr); padding:18px 2px 16px; }
  #home .bj-fila__tit{ font-size:18px; }
  #home .bj-fila__total{ grid-column:1; grid-row:auto; text-align:left; display:flex; align-items:baseline; gap:10px; }
  #home .bj-fila__total small{ margin-top:0; }
  #home{ --bj-ancho:calc(100vw - 24px); --bj-sobre:72px; }
  #home .bj-muelle{ left:12px; right:12px; width:auto; transform:none; bottom:calc(12px + env(safe-area-inset-bottom,0px)); gap:6px; }
  #home .bj-m-grupo{ gap:6px; }
  #home .bj-pregunta{ height:46px; padding:0 12px 0 8px; }
  #home .bj-m-bt{ width:46px; height:46px; }
  #home .bj-pregunta input{ font-size:16px; }
  #home .bj-piso{ height:120px; }
  #home .bj-hoja{ left:0; right:0; bottom:0; width:auto; max-height:86vh; transform:translateY(40px); border-radius:24px 24px 0 0;
    padding:14px 18px calc(24px + env(safe-area-inset-bottom,0px)); z-index:47; overscroll-behavior:contain; }
  #home .bj-hoja.abierta{ transform:none; }
  #home .bj-hoja::before{ content:""; display:block; width:40px; height:4px; border-radius:2px; background-color:rgba(var(--bj-tinte-rgb),.28); margin:0 auto 16px; }
  #home .bj-hoja__cab h3{ font-size:24px; }
  /* el mapa de borde a borde del panel */
  #home .bj-mapa{ margin:0 -18px; }
  #home .bj-destinos ul{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #home .bj-rio-scroll{ margin:22px -18px 0; padding:0 18px; }
  #home .bj-rio__mes span{ font-size:15px; }
  #home .bj-rio__mes small{ display:none; }
}
/* LAS TARJETAS EN TRES RENGLONES: título y monto; cliente; lo que toca y la pluma. En el teléfono,
   donde van a todo lo ancho, y también entre 981 y 1199 px: ahí van tres en fila y, con el talón
   al costado, al texto le quedaban 170 px y cada tarjeta se estiraba en ocho renglones (Luis,
   2026-09-25). */
@media (max-width:640px), (min-width:981px) and (max-width:1199px){
  #home .bj-pase{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t m" "c c" "a p"; align-items:center; column-gap:12px; row-gap:3px; padding:13px 12px 13px 14px; }
  #home .bj-pase__cuerpo, #home .bj-pase__lado{ display:contents; }
  #home .bj-pase__tit{ grid-area:t; padding-left:15px; font-size:15px; }
  #home .bj-pase__tit::before{ left:0; }
  #home .bj-pase__cli{ grid-area:c; padding-left:15px; margin-top:0; }
  #home .bj-pase__acc{ grid-area:a; padding-left:15px; margin-top:5px; }
  #home .bj-pase__monto{ grid-area:m; }
  #home .bj-pase__monto small{ display:none; }
  #home .bj-pase .bj-pluma{ grid-area:p; width:32px; height:32px; }
}

/* Y en ese mismo rango, el saludo cede ancho al globo de ARIA: con un tercio le quedaban 254 px y
   el mensaje se veía cuadrado (Luis, 2026-09-25). Los bordes siguen alineados con la primera y la
   última tarjeta; las cifras, en tres columnas con su nombre debajo, para caber en lo que queda. */
@media (min-width:981px) and (max-width:1199px){
  #home .bj-portada__in{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  #home .bj-dia{ grid-column:1; }
  #home .bj-idea{ grid-column:2; }
  #home .bj-libro{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; }
  #home .bj-libro div{ flex-direction:column; align-items:flex-start; gap:6px; white-space:normal; }
}

/* ═════ LA BARRA DE ARRIBA CON LA BANDEJA (Luis, 2026-09-25) ═════
   El logo a la izquierda; a la derecha los cinco círculos y, al final, la pastilla del usuario.
   Igual en escritorio, en la tableta y en el celular, para que no haya brinco al cambiar de
   ancho. Si no caben en un renglón, el usuario queda arriba y los círculos bajan juntos y a la
   derecha, debajo de él. Igual adentro de una cotización (2026-09-28): el encabezado de las
   fases arranca debajo de la barra y ya no comparte renglón con ella. */
html.aria-lujo header.cab-marca .cab-marca__acc{ margin-left:auto; }
html.aria-lujo header.cab-marca #ses-pastilla{ order:1; }
@media (max-width:1023px){
  html.aria-lujo header.cab-marca .cab-marca__fila{ grid-template-columns:auto minmax(0,1fr) repeat(5,38px) minmax(0,max-content) !important; }
  /* el logo grande, el mismo de escritorio, mientras quepa junto al usuario (Luis, 2026-09-25) */
  html.aria-lujo header.cab-marca img.logo-marca{ grid-column:1; height:56px !important; }
  html.aria-lujo header.cab-marca #ses-pastilla{ grid-column:8; min-width:0; max-width:100%; }
  html.aria-lujo header.cab-marca .cab-marca__acc > :not(#ses-pastilla){ grid-row:1; }
  html.aria-lujo header.cab-marca #btnBandeja{ grid-column:3; }
  html.aria-lujo header.cab-marca #btnNew{ grid-column:4; }
  html.aria-lujo header.cab-marca #btnMapaEco{ grid-column:5; }
  html.aria-lujo header.cab-marca .cab-idioma--uno{ grid-column:6; }
  html.aria-lujo header.cab-marca #pz-tema-btn{ grid-column:7; }
  html.aria-lujo header.cab-marca .ses__yo{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:719px){
  html.aria-lujo header.cab-marca .cab-marca__fila{ grid-template-columns:minmax(0,1fr) repeat(5,38px) !important; }
  html.aria-lujo header.cab-marca img.logo-marca{ grid-column:1 / -1; grid-row:1; justify-self:start; }
  html.aria-lujo header.cab-marca #ses-pastilla{ grid-column:1 / -1; grid-row:1; justify-self:end; max-width:calc(100% - 280px); }
  html.aria-lujo header.cab-marca .cab-marca__acc > :not(#ses-pastilla){ grid-row:2; }
  html.aria-lujo header.cab-marca #btnBandeja{ grid-column:2; }
  html.aria-lujo header.cab-marca #btnNew{ grid-column:3; }
  html.aria-lujo header.cab-marca #btnMapaEco{ grid-column:4; }
  html.aria-lujo header.cab-marca .cab-idioma--uno{ grid-column:5; }
  html.aria-lujo header.cab-marca #pz-tema-btn{ grid-column:6; }
}
/* Con la barra en dos renglones, el nombre de la foto sube a la barra: debajo del logo, a la
   izquierda de los círculos y centrado con ellos. Se queda ahí mientras la barra va sobre la
   foto y se va cuando la barra se vuelve sólida. */
@media (max-width:719px){
  #home .bj-lugar{ position:fixed; z-index:41; left:16px; right:auto; top:calc(var(--bj-barra) - 31px); transform:translateY(-50%);
    max-width:calc(100% - 262px); font-size:10px; letter-spacing:.16em; line-height:1.35; }
  html:not(:has(header.cab-marca.cab-sobre-foto)) #home .bj-lugar{ visibility:hidden; }
}
/* Más angosto, junto a los círculos ya no le queda lugar y se partía en tres renglones encima de
   ellos (Luis, 2026-09-25): baja un renglón, debajo de la barra, en uno solo y a todo lo ancho. */
@media (max-width:479px){
  #home .bj-lugar{ top:calc(var(--bj-barra) + 2px); transform:none; right:16px; max-width:none;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* LAS PANTALLAS MÁS CHICAS (hasta 400 px, y el panel del navegador baja hasta 280) */
@media (max-width:400px){
  /* las cifras toman el ancho que piden, sin partir el monto, y se reparten el renglón */
  #home .bj-libro{ grid-template-columns:repeat(3,auto); justify-content:space-between; gap:0 10px; }
  #home .bj-libro b{ white-space:nowrap; }
  /* ARIA a todo lo ancho, con la estrella un poco más chica */
  #home .bj-idea{ max-width:none; gap:8px; --av:26px; }
  #home .bj-idea__globo{ padding:12px 12px 10px 14px; }
}
@media (max-width:360px){
  /* la pregunta necesita el lugar: la estrella de la pastilla se retira y los círculos se achican */
  #home .bj-muelle{ gap:4px; }
  #home .bj-m-grupo{ gap:4px; }
  #home .bj-m-bt{ width:40px; height:40px; }
  #home .bj-pregunta{ height:40px; padding:0 10px 0 6px; gap:8px; --av:28px; }
  html.aria-lujo #home .bj-pregunta input::placeholder{ font-size:13px; }
}
/* EL LOGO EN CUATRO TAMAÑOS (Luis, 2026-09-25): el grande de escritorio mientras quepa junto al
   usuario; cada vez que el que va chocaría con la pastilla, baja un escalón —40, 30 y 22 px—. */
@media (max-width:479px){
  html.aria-lujo header.cab-marca img.logo-marca{ height:40px !important; }
  html.aria-lujo header.cab-marca #ses-pastilla{ max-width:calc(100% - 203px); }
}
@media (max-width:403px){
  html.aria-lujo header.cab-marca img.logo-marca{ height:30px !important; }
  html.aria-lujo header.cab-marca #ses-pastilla{ max-width:calc(100% - 155px); }
}
@media (max-width:363px){
  html.aria-lujo header.cab-marca img.logo-marca{ height:22px !important; }
  html.aria-lujo header.cab-marca #ses-pastilla{ max-width:calc(100% - 116px); }
}

@media (prefers-reduced-motion:reduce){
  #home .bj *, #home .bj-portada *{ transition:none !important; animation:none !important; }
}

/* ═════ EL TEMA TEAL: el suelo es el teal de la barra de menú (#046477) ═════
   Misma lógica del oscuro: suelo y barra del mismo color. Lo que va sobre la foto no cambia; lo
   que cambia son el suelo y lo que se apoya en él.
   · Las hojas (las tarjetas de hoy en el celular, los menús, los avisos) van en deep: un teal un
     paso más claro dejaba la letra por debajo del contraste legible.
   · El teal es un fondo medio: la crema con transparencia —los textos secundarios— bajaba a 3:1.
     Sobre él los secundarios son blanco con menos transparencia, que da 4,6:1 o más.
   · Sobre el teal, el acento teal no se vería: pasa a crema. En el caminito de las fases, lo hecho
     queda a media luz para que la fase actual (en crema) se distinga. */
html[data-tema="teal"] #home{
  --bj-suelo:#046477; --bj-suelo-rgb:4,100,119; --bj-hoja:#005565; --bj-teal:#EADFCE;
  --bj-crema70:rgba(255,255,255,.86); --bj-crema55:rgba(255,255,255,.76);
  --bj-camino:rgba(255,255,255,.14); --bj-hecho:rgba(255,255,255,.5); --bj-llego:rgba(234,223,206,.3);
  --bj-halo:rgba(234,223,206,.2); --bj-realce:rgba(234,223,206,.12);
}
/* lo que va sobre la foto conserva los valores del oscuro: el saludo y ARIA, y en escritorio las tarjetas */
html[data-tema="teal"] #home .bj-portada__in{ --bj-teal:#006D82; --bj-crema70:rgba(234,223,206,.72); --bj-crema55:rgba(234,223,206,.66); }
@media (min-width:981px){
  html[data-tema="teal"] #home .bj-portada__hoy{ --bj-teal:#006D82; --bj-crema70:rgba(234,223,206,.72); --bj-crema55:rgba(234,223,206,.66); }
}

/* ═════ EL TEMA CLARO: suelo de papel crema, y las fotos llegan a él como la arena ═════
   Luis, 2026-09-27: «le hace falta el color crema… la imagen de playa de arriba como la imagen de
   playa de abajo se puede hacer un degradado con ese blanco, como en la arena».
   · El suelo es el papel #F6F3ED del resto de ARIA en claro; las hojas, blancas; la letra, tinta
     (la fuerte entera, la secundaria al 74 y al 66 %, que sobre el papel da 4,5:1 o más).
   · La portada: en la primera pantalla se ve como en el oscuro; debajo, fuera de la vista
     inicial, su sombra se funde con el crema (ver «El fundido de la portada», al final). El cierre
     de abajo hace lo contrario (aria-tema-claro-ajustes.css §5): arranca en el crema y se vuelve mar.
   · El acento teal sí se lee sobre papel: queda el de la marca. Lo presionado, en deep.
   · La barra de abajo (la pregunta y los círculos) es el mismo vidrio en los tres temas: no
     cambia (Luis, 2026-09-27). Lo que va sobre la foto conserva el oscuro. */
html[data-tema="claro"] #home{
  --bj-suelo:#F6F3ED; --bj-suelo-rgb:246,243,237; --bj-hoja:#FFFFFF;
  --bj-crema:#1A2633; --bj-crema70:rgba(26,38,51,.74); --bj-crema55:rgba(26,38,51,.66);
  --bj-filete:rgba(26,38,51,.10); --bj-filete2:rgba(26,38,51,.18);
  --bj-fuerte:#1A2633; --bj-tinte-rgb:26,38,51;
  --bj-camino:rgba(26,38,51,.10); --bj-hecho:rgba(26,38,51,.42); --bj-llego:rgba(0,109,130,.34);
  --bj-halo:rgba(0,109,130,.18); --bj-realce:rgba(0,109,130,.08);
}
/* lo que va sobre la foto conserva los valores del oscuro: el saludo y ARIA, y en escritorio las tarjetas */
html[data-tema="claro"] #home .bj-portada__in{
  --bj-crema:#EADFCE; --bj-crema70:rgba(234,223,206,.72); --bj-crema55:rgba(234,223,206,.66);
  --bj-filete:rgba(234,223,206,.12); --bj-filete2:rgba(234,223,206,.22);
  --bj-fuerte:#FFFFFF; --bj-tinte-rgb:234,223,206; --bj-hoja:#222E3A;
}
@media (min-width:981px){
  html[data-tema="claro"] #home .bj-portada__hoy{
    --bj-crema:#EADFCE; --bj-crema70:rgba(234,223,206,.72); --bj-crema55:rgba(234,223,206,.66);
    --bj-filete:rgba(234,223,206,.12); --bj-filete2:rgba(234,223,206,.22);
    --bj-fuerte:#FFFFFF; --bj-tinte-rgb:234,223,206; --bj-hoja:#222E3A;
  }
}
/* lo que se apoya en el papel y en el oscuro era vidrio de tinta: los círculos de cada fila y de
   los paneles, la guía de ARIA, y las sombras de los paneles, que sobre papel van suaves */
html[data-tema="claro"] #home .bj-circ{ background-color:#FFFFFF; color:#1A2633; border-color:rgba(26,38,51,.18); }
/* en el celular las tarjetas de hoy van sobre el suelo, en hojas blancas: la pluma de vidrio se veía
   gris, y pasa al deep de lo que se toca (en escritorio van sobre la foto y conservan el vidrio) */
@media (max-width:980px){
  html[data-tema="claro"] #home .bj-pluma{ background-color:#005565; border-color:#005565; }
  html[data-tema="claro"] #home .bj-pluma:hover{ background-color:#006D82; border-color:#006D82; }
}
html[data-tema="claro"] #home .bj-circ:hover{ border-color:#1A2633; }
html[data-tema="claro"] #home .bj-guia{ background-color:rgba(255,255,255,.96); border-color:rgba(26,38,51,.1); box-shadow:0 40px 90px -30px rgba(26,38,51,.35); }
html[data-tema="claro"] #home .bj-hoja{ box-shadow:0 40px 90px -30px rgba(26,38,51,.35); }
html[data-tema="claro"] #home .bj-menu, html[data-tema="claro"] #home .bj-globo{ box-shadow:0 26px 60px -16px rgba(26,38,51,.3); }

/* ═════ EL FUNDIDO DE LA PORTADA: DEBAJO DE LA PRIMERA PANTALLA ═════
   Luis, 2026-09-27: el degradado de abajo, en teal y en crema, «no tiene que verse del todo en la
   pantalla inicial: tiene que estar más abajo, sin alterar la estructura de esa sombra». En el
   oscuro se pierde, porque va a la tinta; hacia el teal o el crema se ve como una franja.
   Así que debajo de la primera pantalla la portada sigue un tramo (--bj-extra) y la sombra se
   funde con el suelo ahí: al entrar la pantalla es la del oscuro, y el suelo aparece recién al
   bajar. En ese tramo NO hay foto (la foto mide la primera pantalla, como siempre; se probaron un
   reflejo y una bruma y no): es sólo la sombra, sobre la tinta del fondo de la portada.
   EL TRAMO ES EL MISMO EN LOS TRES TEMAS: cambiar de tema sólo cambia la sombra, nunca las medidas
   (Luis: «el cambio de tema no tiene que mover los componentes»). Las tarjetas de hoy y la barra
   de abajo no se mueven: el tramo se suma debajo de ellas.
   (El velo llega al suelo 6 px antes de su final, y el fondo de la portada cambia de la tinta al
   suelo en esos mismos 6 px: con la altura en fracciones de píxel, el último renglón dejaba ver
   la tinta, una raya sobre el suelo claro.) */
#home{ --bj-extra:clamp(150px, 26vh, 280px); }
/* la foto se desvanece en sus últimos 90 px en la tinta del fondo: si se cortara en seco, dejaría
   un filo recto contra el tramo de la sombra. Es la franja que la sombra ya oscurece al 72 %. */
#home .bj-fotos{ -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
                         mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%); }
#home .bj-portada{ min-height:calc(max(520px, 100vh) + var(--bj-extra)); min-height:calc(max(520px, 100svh) + var(--bj-extra));
  background:linear-gradient(180deg, #141D27 calc(100% - 6px), var(--bj-suelo) 0); }
@media (min-width:981px){
  #home .bj-fotos{ bottom:var(--bj-extra); }
  #home .bj-portada__hoy{ padding-bottom:calc(98px + var(--bj-extra) + env(safe-area-inset-bottom,0px)); }
}
/* en el celular la foto mide la primera pantalla y las tarjetas van debajo, sobre el suelo: la
   sombra sigue el mismo tramo y se funde detrás de ellas */
@media (max-width:980px){
  #home .bj-portada::after{ height:calc(100vh + var(--bj-extra)); height:calc(100svh + var(--bj-extra)); }
  #home .bj-portada{ background:linear-gradient(180deg, #141D27 calc(100vh + var(--bj-extra) - 6px), var(--bj-suelo) 0);
                     background:linear-gradient(180deg, #141D27 calc(100svh + var(--bj-extra) - 6px), var(--bj-suelo) 0); }
  /* el saludo y ARIA miden la primera pantalla y no crecen: si llenaran el tramo, bajarían con él
     y el mensaje de ARIA quedaría detrás de la barra de abajo (Luis lo vio, 2026-09-27) */
  #home .bj-portada__in{ flex:none; }
}
/* La sombra en teal y en claro: en la primera pantalla, la del oscuro; en el tramo, al suelo. */
html[data-tema="teal"] #home .bj-portada::after{
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.08) calc((100% - var(--bj-extra)) * .26),
    rgba(26,38,51,.05) calc((100% - var(--bj-extra)) * .44), rgba(26,38,51,.5) calc((100% - var(--bj-extra)) * .72),
    rgba(26,38,51,.72) calc(100% - var(--bj-extra)), rgba(4,100,119,.62) calc(100% - var(--bj-extra) * .72),
    rgba(4,100,119,.86) calc(100% - var(--bj-extra) * .42), rgba(4,100,119,.97) calc(100% - var(--bj-extra) * .16), #046477 calc(100% - 6px)); }
html[data-tema="claro"] #home .bj-portada::after{
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.08) calc((100% - var(--bj-extra)) * .26),
    rgba(26,38,51,.05) calc((100% - var(--bj-extra)) * .44), rgba(26,38,51,.5) calc((100% - var(--bj-extra)) * .72),
    rgba(26,38,51,.72) calc(100% - var(--bj-extra)), rgba(246,243,237,.32) calc(100% - var(--bj-extra) * .7),
    rgba(246,243,237,.66) calc(100% - var(--bj-extra) * .42), rgba(246,243,237,.92) calc(100% - var(--bj-extra) * .16), #F6F3ED calc(100% - 6px)); }