/* ═══════════════════════════════════════════════════════════════════
   Mosaico · hoja de estilos
   Referencia visual: la mesa de luz de una imprenta. El fondo es la
   mesa, las hojas son papel de verdad, y el rosa queda reservado
   exclusivamente para lo que se corta y se pega.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tipografías (autohospedadas: la app funciona sin conexión) ───── */
@font-face{font-family:'Plex Sans';src:url('../fuentes/plex-sans-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fuentes/plex-sans-500.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('../fuentes/plex-cond-600.woff2')format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('../fuentes/plex-cond-700.woff2')format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fuentes/plex-mono-500.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fuentes/plex-mono-600.woff2')format('woff2');font-weight:600;font-display:swap}

:root{
  --papel:#ffffff;
  --mesa:#e9ecf0;
  --mesa-alta:#f7f8fa;
  --tinta:#10151b;
  --tinta-media:#5c6773;
  --tinta-suave:#98a3b0;
  --linea:#d4dae1;
  --linea-fuerte:#b9c2cc;
  --cian:#0a7fbe;
  --cian-tenue:#e2f0f9;
  --magenta:#c8005f;
  --magenta-tenue:rgba(200,0,95,.10);
  --magenta-marca:rgba(200,0,95,.28);

  --sombra-papel:0 1px 2px rgba(16,21,27,.10), 0 6px 20px -8px rgba(16,21,27,.22);
  --radio:10px;
  --gap:1.25rem;

  --fuente-texto:'Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --fuente-titular:'Plex Cond','Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --fuente-dato:'Plex Mono',ui-monospace,'Cascadia Code',monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --mesa:#151a20;
    --mesa-alta:#1d242c;
    --tinta:#e9eef3;
    --tinta-media:#9aa6b3;
    --tinta-suave:#6d7986;
    --linea:#2b333c;
    --linea-fuerte:#3c464f;
    --cian:#45b4ea;
    --cian-tenue:#12303f;
    --magenta:#ff5ba3;
    --magenta-tenue:rgba(255,91,163,.12);
    --magenta-marca:rgba(255,91,163,.32);
    --sombra-papel:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -8px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}

/* Varios contenedores se declaran flex o grid más abajo, y eso le gana al
   display:none que trae [hidden] del navegador. Sin esta línea, ocultar algo
   con el atributo hidden no oculta nada. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 0 6.5rem;
  background:var(--mesa);
  color:var(--tinta);
  font:400 16px/1.55 var(--fuente-texto);
  -webkit-font-smoothing:antialiased;
}

/* Todo número medible va en mono: el ojo encuentra las medidas al vuelo. */
.dato{font-family:var(--fuente-dato);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

kbd{
  font:500 .8em/1 var(--fuente-dato);
  background:var(--mesa-alta);border:1px solid var(--linea);border-bottom-width:2px;
  border-radius:4px;padding:.2em .4em;color:var(--tinta-media);
}

:focus-visible{outline:2px solid var(--cian);outline-offset:2px;border-radius:4px}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cabecera{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--linea);
  background:var(--mesa);
}
.marca{display:flex;align-items:center;gap:.55rem}
.marca__glifo{width:20px;height:20px;fill:none;stroke:var(--cian);stroke-width:2.2}
.marca__nombre{
  margin:0;font:700 1.35rem/1 var(--fuente-titular);
  letter-spacing:-.015em;text-transform:uppercase;
}
.marca__nota{margin:0;color:var(--tinta-suave);font-size:.875rem}

/* ── Rótulos de sección ───────────────────────────────────────────── */
.rotulo{
  margin:0;font:600 .72rem/1 var(--fuente-titular);
  text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-media);
}

/* ── Estado vacío ─────────────────────────────────────────────────── */
.etapa-carga{padding:2rem 1.25rem}

.soltar{
  position:relative;overflow:hidden;
  display:grid;place-items:center;min-height:58vh;
  background:var(--papel);border:2px dashed var(--linea-fuerte);border-radius:var(--radio);
  box-shadow:var(--sombra-papel);
  transition:border-color .18s,background-color .18s;
}
.soltar.encima{border-color:var(--cian);background:var(--cian-tenue)}

/* La grilla fantasma del fondo anticipa lo que hace la app. */
.soltar__grilla{
  position:absolute;inset:12%;
  display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);
  gap:6px;opacity:.5;pointer-events:none;
}
.soltar__grilla i{border:1px solid var(--linea)}
@media (min-width:640px){
  .soltar__grilla{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
}

.soltar__centro{position:relative;text-align:center;padding:1.5rem;max-width:22rem}
.soltar__titulo{
  margin:0 0 .35rem;font:700 clamp(1.5rem,5vw,2rem)/1.1 var(--fuente-titular);
  letter-spacing:-.02em;color:var(--tinta);
}
.soltar__ayuda{margin:0 0 1.25rem;color:var(--tinta-media);font-size:.9rem}
.soltar__formatos{
  margin:.85rem 0 0;font:500 .72rem/1 var(--fuente-dato);
  letter-spacing:.1em;color:var(--tinta-suave);
}

.aviso-error{
  margin:1rem 0 0;padding:.7rem .9rem;border-radius:8px;
  background:var(--magenta-tenue);color:var(--magenta);
  border-left:3px solid var(--magenta);font-size:.9rem;
}

/* ── Taller ───────────────────────────────────────────────────────── */
.taller{display:flex;flex-direction:column;gap:var(--gap);padding:1.25rem}

/* ── Lienzo: la vista previa ──────────────────────────────────────── */
.lienzo{display:flex;flex-direction:column;gap:.85rem}
.lienzo__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* A 390 px los cuatro controles no entran junto al rótulo y quedan escalonados:
   el rótulo se lleva su renglón y las acciones el siguiente. */
@media (max-width:600px){
  .lienzo__barra{flex-direction:column;align-items:stretch;gap:.65rem}
  .lienzo__acciones{justify-content:flex-start}
  .segmentos--vista{flex:1 1 auto}
}

.mesa{
  display:grid;place-items:center;
  padding:1.5rem 1rem;border-radius:var(--radio);
  background:
    linear-gradient(var(--linea) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--linea) 1px,transparent 1px) 0 0/22px 22px,
    var(--mesa-alta);
  border:1px solid var(--linea);
  min-height:9rem;
}

.mosaico{
  position:relative;width:100%;max-width:min(100%,30rem);
  background:var(--papel);box-shadow:var(--sombra-papel);
  /* Con el zoom por encima del 100 % el arte desborda el pliego. Recortarlo
     acá es lo que hace que la previa muestre exactamente lo que se imprime. */
  overflow:hidden;
}
@media (min-width:900px){.mosaico{max-width:100%}}

.mosaico__arte{position:absolute;display:block;image-rendering:auto}
.mosaico__capa{position:absolute;inset:0}

/* Cada hoja del previo es una hoja de papel: mismo borde, mismo número. */
.hoja-previa{
  position:absolute;
  border-top:1px solid var(--magenta);
  border-left:1px solid var(--magenta);
  box-shadow:inset 0 0 0 1px rgba(16,21,27,.06);
}
.hoja-previa[data-col="0"]{border-left-color:var(--linea-fuerte);border-left-style:solid}
.hoja-previa[data-fila="0"]{border-top-color:var(--linea-fuerte)}
.hoja-previa--vacia{background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(120,130,140,.13) 5px,rgba(120,130,140,.13) 6px)}

.hoja-previa__id{
  position:absolute;top:2px;left:3px;
  font:600 9px/1 var(--fuente-dato);letter-spacing:.02em;
  color:var(--tinta-media);background:rgba(255,255,255,.82);
  padding:1px 3px;border-radius:2px;
}

/* La zona de pegado se marca con un rayado y sus bordes, no con un tinte
   plano: un relleno sólido encima del logo se lee como si tapara algo, y lo
   que hace en realidad es señalar la franja que sale repetida en dos hojas. */
.solape{
  position:absolute;pointer-events:none;
  background:repeating-linear-gradient(45deg,
    transparent 0 5px, var(--magenta-marca) 5px 6px);
}
.solape--vertical{border-left:1px dashed var(--magenta);border-right:1px dashed var(--magenta)}
.solape--horizontal{border-top:1px dashed var(--magenta);border-bottom:1px dashed var(--magenta)}

/* Guías apagadas: el logo solo, para juzgar el resultado sin ruido encima. */
.mosaico--limpio .mosaico__capa{display:none}

.lienzo__acciones{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.boton--fantasma.activo{border-color:var(--cian);color:var(--cian);background:var(--cian-tenue)}
.segmentos--vista{padding:2px;gap:2px}
.segmentos--vista .segmento{min-height:32px;padding:.3rem .7rem;font-size:.78rem;white-space:nowrap}

/* ── Despiece: las hojas separadas, como salen de la impresora ────────
   El modo «armado» dibuja las guías ENCIMA del logo entero, y eso se
   presta a leerlo como si tapara algo. Acá cada hoja es una pieza aparte
   con su propio recorte: se ve que la franja del borde está repetida en
   la hoja de al lado, que es lo que el solape realmente hace. */
/* La separación tiene que ser generosa: con poco hueco el despiece se lee
   como una tira continua y no se entiende que son piezas independientes. */
.despiece{display:grid;gap:18px;width:100%;max-width:min(100%,30rem)}
@media (min-width:900px){.despiece{max-width:100%;gap:34px}}

.despiece__hoja{
  position:relative;overflow:hidden;background:var(--papel);
  box-shadow:var(--sombra-papel);outline:1px solid var(--linea-fuerte);
}
.despiece__hoja img{position:absolute;display:block}

.despiece__hoja--vacia{opacity:.45}
.despiece__hoja--vacia::after{
  content:'no se imprime';position:absolute;inset:auto 0 45% 0;text-align:center;
  font:500 9px/1 var(--fuente-texto);color:var(--tinta-media);
}

/* La franja compartida, marcada igual en las dos hojas que la comparten. */
.despiece__banda{
  position:absolute;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 5px,var(--magenta-marca) 5px 6px);
}
.despiece__banda--h{left:0;right:0;top:auto;bottom:auto}
.despiece__banda--der{right:0;border-left:1px dashed var(--magenta)}
.despiece__banda--izq{left:0;border-right:1px dashed var(--magenta)}
.despiece__banda--abajo{bottom:0;border-top:1px dashed var(--magenta)}
.despiece__banda--arriba{top:0;border-bottom:1px dashed var(--magenta)}

.despiece__id{
  position:absolute;top:3px;left:4px;z-index:2;
  font:600 10px/1 var(--fuente-dato);color:var(--tinta-media);
  background:rgba(255,255,255,.85);padding:2px 4px;border-radius:3px;
}
.despiece--limpio .despiece__banda,.despiece--limpio .despiece__id{display:none}

.nota--despiece{
  padding:.7rem .85rem;border-radius:8px;
  background:var(--mesa-alta);border:1px solid var(--linea);
}

/* En pantallas angostas tres columnas dejan la nitidez cortada a la mitad:
   baja a dos y la tercera ocupa su propia fila. */
.resumen{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;
  background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden;
}
.resumen__dato:last-child{grid-column:1/-1}
@media (min-width:540px){
  .resumen{grid-template-columns:repeat(3,1fr)}
  .resumen__dato:last-child{grid-column:auto}
}
.resumen__dato{background:var(--mesa-alta);padding:.6rem .75rem}
.resumen dt{
  font:600 .62rem/1 var(--fuente-titular);text-transform:uppercase;
  letter-spacing:.11em;color:var(--tinta-suave);margin-bottom:.25rem;
}
.resumen dd{margin:0;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.leyenda{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0;
  font-size:.78rem;color:var(--tinta-suave);
}
.muestra{width:15px;height:9px;display:inline-block;border-radius:2px;margin-left:.5rem}
.muestra--corte{border-top:2px solid var(--magenta);height:2px;border-radius:0}
.muestra--solape{background:var(--magenta-tenue);border:1px solid var(--magenta)}
.leyenda .muestra:first-child{margin-left:0}

/* ── Panel de controles ───────────────────────────────────────────── */
.panel{display:flex;flex-direction:column;gap:1rem}

.grupo,.avanzado,.instrucciones{
  margin:0;padding:1rem 1.1rem 1.15rem;
  background:var(--mesa-alta);border:1px solid var(--linea);border-radius:var(--radio);
}
.grupo{display:flex;flex-direction:column;gap:1rem}
.grupo legend{padding:0 0 .15rem}

.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label,.campo__titulo{font-size:.875rem;font-weight:500;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.campo--dupla{flex-direction:row;gap:.75rem}
.campo__doble{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}

.control{
  width:100%;font:400 .95rem/1.2 var(--fuente-texto);color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:8px;
  padding:.6rem .7rem;min-height:44px;
}
select.control{
  appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235c6773' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:11px;
}
.control--medida{display:flex;align-items:center;gap:.3rem;padding-block:0}
.control--medida input{
  flex:1;min-width:0;border:0;background:none;color:inherit;padding:.6rem 0;
  font:500 .95rem/1 var(--fuente-dato);
}
.control--medida i{font:500 .78rem/1 var(--fuente-dato);color:var(--tinta-suave);font-style:normal}
.control--medida input::-webkit-outer-spin-button,
.control--medida input::-webkit-inner-spin-button{appearance:none;margin:0}

/* Steppers: el objetivo táctil manda en móvil. */
.paso{display:flex;align-items:stretch;background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:8px;overflow:hidden}
.paso__boton{
  flex:0 0 44px;min-height:44px;border:0;background:none;cursor:pointer;
  font:500 1.35rem/1 var(--fuente-texto);color:var(--cian);
  transition:background-color .15s;
}
.paso__boton:hover{background:var(--cian-tenue)}
.paso__boton:active{background:var(--cian-tenue);transform:scale(.94)}
.paso__valor{
  flex:1;min-width:0;width:100%;text-align:center;border:0;
  border-inline:1px solid var(--linea);background:none;color:inherit;
  font-size:1rem;padding:.5rem 0;
}
.paso__valor::-webkit-outer-spin-button,.paso__valor::-webkit-inner-spin-button{appearance:none;margin:0}

.segmentos{display:flex;background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:8px;padding:3px;gap:3px}
.segmento{
  flex:1;min-height:38px;padding:.4rem .3rem;border:0;border-radius:6px;cursor:pointer;
  background:none;color:var(--tinta-media);
  font:500 .82rem/1.2 var(--fuente-texto);
  transition:background-color .15s,color .15s;
}
.segmento:hover{color:var(--tinta)}
.segmento.activo{background:var(--cian);color:#fff}

.deslizador{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:pointer;margin:0;
}
.deslizador::-webkit-slider-runnable-track{height:4px;background:var(--linea-fuerte);border-radius:2px}
.deslizador::-moz-range-track{height:4px;background:var(--linea-fuerte);border-radius:2px}
.deslizador::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:var(--cian);border:3px solid var(--papel);box-shadow:0 1px 4px rgba(16,21,27,.3);
}
.deslizador::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--cian);border:3px solid var(--papel);box-shadow:0 1px 4px rgba(16,21,27,.3);
}

.casilla{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-size:.875rem;line-height:1.4}
.casilla input{
  flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--cian);cursor:pointer;
}

.nota{margin:0;font-size:.8rem;line-height:1.45;color:var(--tinta-suave)}
.nota--alerta{
  padding:.6rem .75rem;border-radius:6px;
  background:var(--magenta-tenue);color:var(--magenta);border-left:3px solid var(--magenta);
}

.avanzado summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem}
.avanzado summary::-webkit-details-marker{display:none}
.avanzado summary::before{
  content:'';width:0;height:0;border:5px solid transparent;border-left-color:var(--tinta-suave);
  transition:transform .15s;transform-origin:2px 50%;
}
.avanzado[open] summary::before{transform:rotate(90deg)}
.avanzado[open] summary{margin-bottom:1rem}
.avanzado .campo{margin-bottom:1rem}

.instrucciones{display:flex;flex-direction:column;gap:.85rem}

/* Esquema del solape: dos hojas contiguas con la franja que comparten. La
   duda «¿el solape me come parte del logo?» aparece sola mirando la previa,
   y un dibujo la contesta mejor que un párrafo. */
.esquema{margin:0;display:flex;flex-direction:column;gap:.6rem}
.esquema svg{width:100%;height:auto;display:block}
.esquema__id{font:600 11px var(--fuente-dato);fill:var(--tinta-suave);text-anchor:middle}
.esquema__nota{font:500 9px var(--fuente-texto);fill:var(--tinta-media);text-anchor:middle}
.esquema figcaption{font-size:.8rem;line-height:1.45;color:var(--tinta-suave)}
.pasos{margin:0;padding-left:1.35rem;display:flex;flex-direction:column;gap:.7rem;font-size:.875rem;line-height:1.5}
.pasos strong{font-weight:500}
.pasos em{color:var(--tinta-media);font-style:normal;background:var(--mesa);padding:0 .25em;border-radius:3px}

/* ── Botones ──────────────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.25rem;border:1px solid transparent;border-radius:8px;
  font:500 .95rem/1 var(--fuente-texto);cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.boton--primario{background:var(--cian);color:#fff}
.boton--primario:hover{background:color-mix(in srgb,var(--cian) 85%,#000)}
.boton--fantasma{background:none;border-color:var(--linea-fuerte);color:var(--tinta-media)}
.boton--fantasma:hover{border-color:var(--cian);color:var(--cian)}
.boton--chico{min-height:36px;padding:.4rem .75rem;font-size:.82rem}
.avanzado .boton{width:100%}

/* ── Barra de acción: fija en móvil, integrada en escritorio ──────── */
.acciones{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;gap:1rem;
  padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--mesa) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--linea);
}
.acciones__resumen{margin:0;flex:1;min-width:0;font-size:.9rem;color:var(--tinta-media);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acciones .boton{flex:0 0 auto;padding-inline:1.6rem}

/* ── Escritorio: dos columnas, la previa manda ────────────────────── */
@media (min-width:900px){
  body{padding-bottom:0}
  .cabecera{padding-inline:2rem}
  .etapa-carga{padding:3rem 2rem;max-width:60rem;margin:0 auto}

  .taller{
    display:grid;grid-template-columns:minmax(0,1fr) 23rem;
    align-items:start;gap:2rem;padding:1.75rem 2rem 3rem;max-width:92rem;margin:0 auto;
  }
  .lienzo{position:sticky;top:1.75rem}
  .mesa{padding:2rem;min-height:58vh}

  /* La acción principal deja de flotar y encabeza la columna de controles:
     se ve sin desplazarse y ya no tapa nada. */
  .acciones{
    position:static;order:-1;
    flex-direction:column-reverse;align-items:stretch;gap:.55rem;
    padding:0;background:none;backdrop-filter:none;border:0;
  }
  .acciones .boton{width:100%;min-height:54px;font-size:1rem}
  .acciones__resumen{text-align:center;font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════════
   IMPRESIÓN
   El navegador imprime únicamente #impresion. Cada .hoja mide
   exactamente la hoja física y el arte va posicionado en milímetros,
   así que el resultado no depende del zoom ni de la pantalla.
   ═══════════════════════════════════════════════════════════════════ */
#impresion{display:none}

@media print{
  html,body{margin:0;padding:0;background:#fff}
  .cabecera,.tablero,.acciones{display:none !important}

  #impresion{
    display:block;
    /* Sin esto Chrome descarta las líneas de corte al imprimir. */
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  .hoja{
    position:relative;overflow:hidden;background:#fff;
    break-after:page;page-break-after:always;break-inside:avoid;
  }
  .hoja:last-child{break-after:auto;page-break-after:auto}

  .hoja__area{position:absolute;overflow:hidden}
  .hoja__arte{position:absolute;display:block}

  /* Guías de corte: viven sobre el borde del arte, no fuera, porque
     fuera está el margen que la impresora no alcanza. */
  .corte{position:absolute;background:#c8005f}
  .corte--sup{height:.25mm;left:0;right:0;top:0}
  .corte--izq{width:.25mm;top:0;bottom:0;left:0}
  .angulo{position:absolute;background:#c8005f}

  .hoja__id{
    position:absolute;font:600 3.2mm/1 'Plex Mono',monospace;color:#c8005f;
  }

  /* Hoja de prueba */
  .prueba{position:absolute;font:500 3.6mm/1.4 'Plex Sans',sans-serif;color:#10151b}
  .prueba__regla{position:absolute;border:.3mm solid #0a7fbe}
  .prueba__marca{position:absolute;background:#0a7fbe}
  .prueba__titulo{font:700 6mm/1.2 'Plex Cond',sans-serif}
  .prueba__dato{font-family:'Plex Mono',monospace}
}