/* Contador de la portada: sólo números reales de FraMar.Soft (ventas registradas y comercios).
   Visor como el del total de Nueva venta: fondo oscuro y cifras celestes en los dos temas.
   Sólo se carga cuando hay números para mostrar (desde el mínimo de Facturación). */
.visor-portada{
  --visor:#141312;--visor-2:#23211E;--visor-tinta:#F3F0EB;--visor-suave:#C9C2B8;--visor-cifra:#5FD0F0;
  --visor-linea:rgba(235,226,212,.16);--visor-vivo:#6BDB9B;
  position:relative;isolation:isolate;width:min(100%,560px);display:grid;gap:12px;padding:16px 20px 18px;
  border-radius:20px;color:var(--visor-tinta);box-shadow:0 34px 60px -36px rgba(0,0,0,.8)}
.visor-portada::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:1px solid var(--visor-linea);
  background:radial-gradient(120% 130% at 0% 0%,rgba(95,208,240,.15),transparent 55%),linear-gradient(180deg,var(--visor-2),var(--visor));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.visor-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--visor-suave)}
.visor-vivo{display:inline-flex;align-items:center;gap:7px;color:var(--visor-vivo)}
.visor-vivo i{width:8px;height:8px;border-radius:50%;background:var(--visor-vivo);animation:visor-latido 2.2s ease-out infinite}
@keyframes visor-latido{0%{box-shadow:0 0 0 0 rgba(107,219,155,.55)}70%{box-shadow:0 0 0 9px rgba(107,219,155,0)}100%{box-shadow:0 0 0 0 rgba(107,219,155,0)}}
.visor-ventas,.visor-comercios{margin:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 16px;min-width:0}
.visor-cifra{--escala:1;display:block;font-stretch:125%;font-weight:800;font-size:calc(clamp(52px,12vw,80px) * var(--escala));
  line-height:1;letter-spacing:-.01em;color:var(--visor-cifra);font-variant-numeric:tabular-nums;white-space:nowrap;
  filter:drop-shadow(0 0 20px rgba(95,208,240,.28))}
/* Cuantas más cifras, más chica la letra: nunca se corta ni se sale del visor. */
.visor-cifra[data-cifras="7"]{--escala:.88}
.visor-cifra[data-cifras="9"]{--escala:.7}
.visor-cifra[data-cifras="10"],.visor-cifra[data-cifras="11"]{--escala:.6}
.visor-cifra[data-cifras="13"],.visor-cifra[data-cifras="14"],.visor-cifra[data-cifras="15"]{--escala:.48}
.visor-rotulo{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;font-size:clamp(16px,1.5vw,19px);font-weight:700;
  line-height:1.25;color:var(--visor-tinta);min-width:0}
.visor-rotulo small{font-size:14px;font-weight:500;color:var(--visor-suave)}
.visor-sube{color:var(--visor-vivo);font-weight:700}
.visor-comercios{padding-top:12px;border-top:1px dashed var(--visor-linea)}
.visor-cifra-chica{display:block;font-stretch:125%;font-weight:780;font-size:clamp(30px,3.3vw,40px);line-height:1;
  color:var(--visor-tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.visor-portada .sube{animation:visor-sube 1s var(--curva)}
@keyframes visor-sube{0%{text-shadow:0 0 0 rgba(107,219,155,0)}30%{text-shadow:0 0 26px rgba(107,219,155,.7)}100%{text-shadow:0 0 0 rgba(107,219,155,0)}}
.nota-portada [data-contador-numero]{color:var(--texto);font-variant-numeric:tabular-nums}
html[data-tema="claro"] .visor-portada{box-shadow:0 30px 56px -34px rgba(60,46,30,.55)}
/* Pantallas anchas: el visor va a la derecha y «Probar gratis 7 días» queda donde está hoy. */
@media (min-width:1000px){
  .portada-contenido.con-visor{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);column-gap:44px;row-gap:24px;
    align-items:end;justify-items:start}
  .portada-contenido.con-visor>*{grid-column:1}
  .portada-contenido.con-visor>.visor-portada{grid-column:2;grid-row:2 / span 4;align-self:end;width:100%;padding:20px 24px 22px}
  .portada-contenido.con-visor .titulo-xl{font-size:clamp(44px,6.6vw,96px)}
  .portada-contenido.con-visor .visor-cifra{font-size:calc(clamp(56px,5.4vw,78px) * var(--escala))}
}
@media (prefers-reduced-motion:reduce){.visor-vivo i,.visor-portada .sube{animation:none}}
html[data-liviano] .visor-vivo i,html[data-liviano] .visor-portada .sube{animation:none}
@media (forced-colors:active){.visor-portada{border:1px solid CanvasText}.visor-cifra{filter:none}}