/* ============================================================================
   Los widgets nuevos del Inicio (tren A2, plan «Inicio: mas widgets y botones»): Agenda y clientes, Ventas y mensajes, Fotografia.
   Lienzo aprobado: tableros 10 a 12 de «Inicio: widgets en tres tamanos».
   Solo tokens de cuarto-oscuro.css (--pag, --piedra, --tinta, --medio, --apagado, --e-*, --t-*, --r-*...): ningun color, sombra, tamano de letra ni duracion escritos a mano
   (paridad-cuarto-oscuro). Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas ni rayas. Color solo si significa algo (--urge para lo vencido o atrasado).
   Nada se anima con teclado ni en lo que se usa cien veces al dia; prefers-reduced-motion = fundidos.

   Se carga despues de cuarto-oscuro.css. Una TARJETA hereda el ancho de su COLUMNA, no el de la ventana (con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280):
   el acomodo de adentro se decide por el ancho de la tarjeta (container query sobre .wi-cont, el envoltorio que cada widget pone dentro de su cuerpo), nunca por @media.
   NO se declara container-type en .widget: seria un cambio de TODAS las tarjetas del CRM, no de las nuevas.
   Una seccion por familia (los widgets de cada una se agregan bajo su ancla): prefijos wa- (agenda), wv- (ventas), wf- (foto).
   ============================================================================ */
.wi-cont{ container-type:inline-size; min-width:0; }

/* ---- A2 · Agenda y clientes ---- */
/* Piezas que comparten los widgets de la familia: una etiqueta chica, un numero grande, un enlace de texto, un titulo de grupo. */
.wa-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wa-num{ display:block; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wa-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wa-link:hover{ color:var(--tinta); }
.wa-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wa-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-quien{ display:block; min-width:0; color:inherit; text-decoration:none; }
/* Una fila de cita: hora, quien y que se hace con ella (o su estado). Sin rayas ni cajas. */
.wa-fila{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:var(--e-3); min-height:56px; }
.wa-hora{ font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; }
.wa-der{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--e-3); }
.wa-acc{ display:flex; align-items:center; gap:var(--e-2); }
.wa-estado{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
/* citas_hoy */
.wa-chico .wa-num{ margin:var(--e-1) 0 var(--e-1); }
.wa-barra{ height:4px; margin:var(--e-3) 0 var(--e-2); border-radius:var(--r-pildora); background:var(--piedra-on); position:relative; overflow:hidden; }
.wa-barra i{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:var(--tinta); }
.wa-mediano .wa-filas{ margin-top:var(--e-2); }
.wa-mediano .wa-link{ margin-top:var(--e-2); }
.wa-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-4) var(--e-5); margin:var(--e-3) 0 var(--e-5); }
.wa-kpis .wa-eti{ display:block; margin-bottom:var(--e-1); }
.wa-dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-6); }
.wa-col{ min-width:0; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. */
@container (max-width:560px){
  .wa-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
  .wa-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@container (max-width:420px){
  .wa-fila{ grid-template-columns:44px minmax(0,1fr); row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wa-der{ grid-column:2; justify-content:flex-start; }
  .wa-acc{ width:100%; }
  .wa-acc .btn{ flex:1; min-height:44px; }
}
/* por_confirmar: una solicitud es quien, cuando vence y que se hace con ella. Lo que vence en menos de un dia va en color (--urge). */
.wa-cuenta{ display:flex; align-items:baseline; gap:var(--e-2); margin:var(--e-2) 0 var(--e-1); }
.wa-res{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--e-3); min-height:56px; }
.wa-res-sola{ grid-template-columns:minmax(0,1fr) auto; }
.wa-urge{ color:var(--urge); font-weight:600; }
.wa-acc .wa-link{ display:inline-flex; align-items:center; }
.wa-dos-res{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.wa-col .wa-grupo:not(:first-child){ margin-top:var(--e-5); }
@container (max-width:560px){
  .wa-dos-res{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:420px){
  .wa-res{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wa-res > .wa-der{ grid-column:1 / -1; justify-content:flex-start; }
  .wa-res .wa-acc{ width:100%; justify-content:space-between; }
  .wa-res .wa-acc .btn{ flex:none; margin-left:auto; min-height:44px; }
}

/* por_volver: la lista usa las filas de por_confirmar (.wa-res) y el grande una tabla. Angosta, la tabla se apila: nombre y hace cuanto arriba, el servicio debajo y los botones al final. */
.wa-tabla{ margin-top:var(--e-2); }
.wa-tr{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) calc(var(--e-7) * 3); align-items:center; gap:var(--e-4); min-height:48px; font-size:var(--t-texto); color:var(--tinta); }
.wa-tr > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-tr > .wa-c-acc{ overflow:visible; display:flex; justify-content:flex-end; }
.wa-c-nom{ font-weight:500; }
.wa-c-srv, .wa-c-fecha{ color:var(--medio); }
.wa-th{ min-height:32px; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
@container (max-width:560px){
  .wa-th{ display:none; }
  .wa-tr{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--e-1); padding:var(--e-2) 0; }
  .wa-tr .wa-c-nom{ grid-column:1; grid-row:1; }
  .wa-tr .wa-c-hace{ grid-column:2; grid-row:1; color:var(--medio); }
  .wa-tr .wa-c-srv{ grid-column:1 / -1; grid-row:2; }
  .wa-tr .wa-c-fecha{ display:none; }
  .wa-tr .wa-c-acc{ grid-column:1 / -1; grid-row:3; }
  .wa-tr .wa-c-acc .wa-acc{ width:100%; justify-content:space-between; }
  .wa-tr .wa-c-acc .btn{ flex:none; margin-left:auto; min-height:44px; }
}

/* faltas: las 8 semanas en barras. La altura de cada barra es un porcentaje de la semana con mas faltas (la ultima, los ultimos 7 dias, en la tinta); el area mide tres veces --e-7. */
.wa-barras{ display:flex; align-items:stretch; gap:var(--e-2); height:calc(var(--e-7) * 3); margin:var(--e-2) 0 var(--e-3); }
.wa-bar{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:var(--e-1); font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
.wa-bcol{ flex:1; width:100%; display:flex; align-items:flex-end; min-height:0; }
.wa-bi{ display:block; width:100%; min-height:var(--e-1); border-radius:var(--r); background:var(--piedra-on); }
.wa-bi.wa-hoy{ background:var(--tinta); }
.wa-dos-fal{ margin-top:var(--e-4); }

/* ---- A2 · Ventas y mensajes ---- */
/* Piezas que comparten los cuatro widgets: una etiqueta chica, una cifra grande, una fila (quien + estado), un enlace de texto y un titulo de columna. Sin cajas ni rayas; el color solo dice «urge». */
.wv-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wv-chico .wv-eti{ margin-top:var(--e-1); }
.wv-chico .wv-eti + .wv-fila{ margin-top:var(--e-3); }
.wv-num{ font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wv-cifra{ display:flex; align-items:baseline; gap:var(--e-3); margin:var(--e-1) 0 var(--e-2); }
.wv-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wv-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-nom b{ font-weight:600; }
.wv-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-quien{ display:block; min-width:0; flex:1 1 auto; color:inherit; text-decoration:none; }
.wv-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:56px; }
.wv-fila-chica{ min-height:32px; }
/* Una fila de una sola linea sin boton (el nombre es la liga y el estado va al lado): mas baja que una con boton, pero con el alto de un toque. */
.wv-fila-compacta{ min-height:44px; }
/* Por que un cambio ya no se puede deshacer: debajo del nombre y en los renglones que haga falta (a la derecha le quitaba el ancho al nombre). */
.wv-motivo{ display:block; margin-top:2px; font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wv-der{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--e-3); flex:none; }
.wv-est{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; font-variant-numeric:tabular-nums; }
.wv-urge{ color:var(--urge); font-weight:600; }
.wv-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wv-link:hover{ color:var(--tinta); }
.wv-des .wv-nom{ color:var(--medio); text-decoration:line-through; }
.wv-mediano .wv-filas{ margin-top:var(--e-2); }
.wv-mediano .wv-link{ margin-top:var(--e-2); }
.wv-grande .wv-link{ margin-top:var(--e-3); }
.wv-col{ min-width:0; }
.wv-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
.wv-dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-6); margin-top:var(--e-3); }
/* embudo: una barra por etapa (4 px = contenido: la pista y el relleno no son pildoras, no se tocan). */
.wv-emb-dos{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--e-6); margin-top:var(--e-3); }
.wv-barras{ margin-top:var(--e-3); }
.wv-emb-dos .wv-barras{ margin-top:0; }
.wv-barra-fila{ display:flex; align-items:center; gap:var(--e-3); min-height:36px; }
.wv-etapa{ flex:none; width:104px; font-size:var(--t-texto); color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-pista{ position:relative; flex:1 1 auto; height:20px; border-radius:4px; background:var(--piedra-on); }
.wv-pista i{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--tinta); }
.wv-val{ flex:none; width:32px; text-align:right; font-size:var(--t-texto); font-variant-numeric:tabular-nums; color:var(--tinta); }
/* formularios: lo que cuenta cada formulario (texto, no pildoras) y la tabla del grande. */
.wv-chips{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-5); margin:var(--e-3) 0 var(--e-2); }
.wv-chip{ font-size:var(--t-meta); color:var(--medio); }
.wv-tabla{ margin-top:var(--e-3); }
.wv-tabla-fila{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) auto; align-items:center; gap:var(--e-4); min-height:48px; font-size:var(--t-texto); }
.wv-tabla-cab{ min-height:32px; font-size:var(--t-meta); }
.wv-celda{ min-width:0; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.wv-celda-extra, .wv-tabla-cab .wv-celda{ color:var(--medio); }
.wv-celda-der{ display:flex; justify-content:flex-end; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. */
@container (max-width:720px){
  .wv-cols{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:560px){
  .wv-emb-dos, .wv-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
  .wv-tabla-fila{ grid-template-columns:minmax(0,1fr) auto; }
  .wv-celda-extra, .wv-tabla-cab .wv-celda-der{ display:none; }
}
@container (max-width:420px){
  .wv-etapa{ width:84px; }
  .wv-fila:not(.wv-fila-chica){ flex-wrap:wrap; row-gap:var(--e-2); padding:var(--e-2) 0; }
  .wv-fila:not(.wv-fila-chica) .wv-quien{ flex-basis:100%; }
  .wv-fila:not(.wv-fila-chica) .wv-der{ flex:1 1 100%; justify-content:space-between; }
  .wv-der .btn{ min-height:44px; }
}

/* ---- A2 · Fotografia ---- */
/* Piezas que comparten los cuatro widgets de la familia: una etiqueta chica, un numero grande, un enlace de texto, el nombre y el subtitulo de una fila, lo urgente. */
.wf-eti{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.wf-num{ display:block; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wf-link{ display:inline-block; min-height:32px; padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wf-link:hover{ color:var(--tinta); }
.wf-grupo{ margin:0 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.wf-nom{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-sub{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Las claves se guardan en caso natural («falta 2.º fotografo»): la primera letra la sube el CSS, no el texto. */
.wf-sub::first-letter{ text-transform:uppercase; }
.wf-quien{ display:block; min-width:0; color:inherit; text-decoration:none; }
.wf-urge{ color:var(--urge); font-weight:600; }
.wf-m{ color:var(--medio); }
/* Una fila: quien y, a la derecha, lo que pasa con ella. Sin cajas ni rayas. Es un enlace entero a la boda o a la galeria. */
.wf-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--e-3); min-height:56px; color:inherit; text-decoration:none; }
.wf-fila.wf-con-dia{ grid-template-columns:44px minmax(0,1fr) auto; }
.wf-cifra{ display:flex; align-items:baseline; gap:var(--e-2); padding:var(--e-2) 0 var(--e-1); }
.wf-mediano .wf-filas, .wf-grande .wf-tabla{ margin-top:var(--e-2); }
.wf-mediano .wf-link, .wf-grande .wf-link{ margin-top:var(--e-2); }
/* equipo_faltante: el bloque de la fecha (dia grande, mes chico) y el «falta ...» de la derecha. */
.wf-dia{ text-align:center; }
.wf-dia b{ display:block; font-size:var(--t-titulo); line-height:1; font-weight:500; color:var(--tinta); font-variant-numeric:tabular-nums; }
.wf-dia span{ display:block; margin-top:2px; font-size:var(--t-meta); line-height:1.3; color:var(--medio); text-transform:uppercase; }
.wf-falta{ font-size:var(--t-meta); white-space:nowrap; text-align:right; }
/* La tabla del grande: una fila por boda, una columna por lugar del equipo (--wf-cols lo decide el numero de lugares). */
.wf-tabla{ --wf-cols:.7fr 1.5fr 1.5fr 1.4fr 1.4fr; }
.wf-tabla-3{ --wf-cols:.7fr 1.4fr 1.4fr 1.2fr 1.2fr 1.2fr; }
.wf-tr{ display:grid; grid-template-columns:var(--wf-cols); gap:var(--e-4); align-items:center; min-height:44px; color:inherit; text-decoration:none; font-size:var(--t-texto); }
.wf-th{ min-height:32px; font-size:var(--t-meta); color:var(--apagado); }
.wf-th > span::first-letter{ text-transform:uppercase; }
.wf-cel{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-fecha{ color:var(--medio); font-variant-numeric:tabular-nums; }
/* galerias_actividad: el numero de la derecha de una fila y las columnas del grande (tres listas y las mas vistas). */
.wf-cuenta{ font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.wf-cuenta.wf-urge{ color:var(--urge); font-weight:600; }   /* con la clase sola ganaba .wf-cuenta, que viene despues: lo urgente no se veia urgente */
.wf-cols{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
.wf-col{ min-width:0; }
/* produccion: una linea de cifra del chico, los cuatro puntos de pasos de una fila y las dos columnas del grande (video y album). */
.wf-linea{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:32px; font-size:var(--t-texto); color:var(--tinta); }
.wf-pasos{ display:inline-flex; gap:var(--e-1); flex:none; }
.wf-pasos i{ display:block; width:8px; height:8px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--medio); }
.wf-pasos i.on{ background:var(--tinta); box-shadow:none; }
.wf-dos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-3); }
/* pared: un cuadro de foto (llena su caja, pastilla de vistas abajo a la izquierda), la pared de 3 columnas, el mosaico del grande (la primera foto ocupa 2 x 2) y la fotito de «la mas descargada». */
.wf-foto{ position:relative; display:block; min-width:0; background:var(--piedra-on); border-radius:var(--r); overflow:hidden; color:inherit; text-decoration:none; }
.wf-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wf-foto b{ position:absolute; left:var(--e-2); bottom:var(--e-2); padding:2px var(--e-2); border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font-size:var(--t-meta); font-weight:500; line-height:1.4; font-variant-numeric:tabular-nums; }
.wf-foto-chico{ aspect-ratio:16 / 10; margin-top:var(--e-3); }
.wf-pie{ padding-top:var(--e-3); }
.wf-pared{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e-2); margin-top:var(--e-3); }
.wf-pared .wf-foto{ aspect-ratio:1; }
/* El mosaico: la mas vista ocupa 2 x 2 y cuatro chicas llenan el rectangulo de al lado (5 fotos, sin huecos). La grande lleva su PROPIO aspect-ratio (cuadrada = dos chicas y un hueco): la imagen va en
   position:absolute y no da altura, asi que sin el la caja se colapsaba a una raya cuando no habia chicas al lado (una sola foto) o cuando la tarjeta es angosta. Solo se vio en un navegador. */
.wf-mosaico{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.wf-mosaico .wf-foto:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }
.wf-pared-n{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.wf-pared-grande{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--e-6); align-items:start; }
.wf-pared-grande.wf-sin-lado{ grid-template-columns:minmax(0,1fr); }
.wf-pared-grande .wf-pared{ margin-top:var(--e-3); }
.wf-pared-grande .wf-col{ padding-top:var(--e-3); }
.wf-pared-grande .wf-grupo:not(:first-child){ margin-top:var(--e-5); }
.wf-fila.wf-con-mini{ grid-template-columns:48px minmax(0,1fr); }
.wf-mini{ position:relative; display:block; width:48px; height:48px; background:var(--piedra-on); border-radius:var(--r); overflow:hidden; }
.wf-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
/* La tarjeta, no la ventana, decide el acomodo: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. Angosta, la tabla se APILA: la fecha al lado del nombre y cada lugar con su etiqueta. */
@container (max-width:700px){
  .wf-pared-grande{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:900px){
  .wf-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-5) var(--e-6); }
}
@container (max-width:560px){
  .wf-th{ display:none; }
  .wf-tr:not(.wf-th){ grid-template-columns:56px minmax(0,1fr); column-gap:var(--e-3); row-gap:2px; padding:var(--e-2) 0; align-items:baseline; }
  .wf-tr:not(.wf-th) .wf-cel:not(.wf-fecha){ grid-column:2; }
  .wf-tr .wf-cel[data-et]::before{ content:attr(data-et) ": "; color:var(--medio); font-weight:400; }
  .wf-cols, .wf-dos{ grid-template-columns:minmax(0,1fr); gap:var(--e-4); }
}
@container (max-width:420px){
  .wf-pared{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* Angosto el mosaico son 2 columnas: la grande ocupa todo el ancho, en una sola fila y apaisada. */
  .wf-mosaico .wf-foto:first-child{ grid-row:auto; aspect-ratio:16 / 10; }
}