/* Interfaz de Olza Platform, copiada de la skill olza-imagenes-producto y acotada a .demoapp,
   para que .tarjeta, .boton o .chip no choquen con las clases de la web.
   No se edita a mano: se regenera con scratchpad/aislar-css.pl si cambia la interfaz. */
/* =====================================================================
   Olza · piezas para imágenes explicativas de Olza Platform
   (skill olza-imagenes-producto)

   Copia del estilo limpio de Olza Master (ADR 0050): lienzo gris clarito,
   tarjetas blancas de 22 px, barra superior en píldora, una sola tarjeta
   héroe en burdeos, botones y pastillas en píldora, gráficos en SVG.

   CSS puro, sin librerías. Dos capas:
   1. El LIENZO de la imagen (diapositiva o red social): .lienzo, .titulo,
      .bloque, .nota, .globo, .flujo, .caja… a escala de diapositiva.
   2. La PANTALLA del producto (dentro de .navegador o .movil): .barra,
      .pildoras, .tarjeta, .heroe, .pastilla, .boton, .tabla… a los
      píxeles reales de Master. La pantalla se amplía con `zoom`.

   Tamaños: una clase en <body>.
     f-16x9  1920 × 1080  diapositiva (por defecto)
     f-1x1   1080 × 1080  red social cuadrada
     f-4x5   1080 × 1350  red social vertical
   Tema: claro por defecto. `oscuro` en <body> lo fuerza. `tema-sistema`
   en <body> sigue al sistema (para entregar el HTML como página).

   Regla de oro: en las plantillas no se escribe ningún color. Siempre un
   token (var(--…)): así el modo oscuro sale solo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fuente. Plus Jakarta Sans (OFL) en copia local: funciona sin red.
   Si la copia no está (por ejemplo, el HTML pegado en otra página), entra
   la de Google Fonts que enlaza cada plantilla y, si tampoco, la del
   sistema.
   --------------------------------------------------------------------- */



/* ---------------------------------------------------------------------
   2. Tokens. Cada token es un PAPEL, no un color (como en Master).
   --------------------------------------------------------------------- */
.demoapp {
  /* La paleta de cinco colores y sus derivados */
  --fondo: #f1f0ee; /* el lienzo gris clarito: lo de debajo de todo */
  --blanco: #ffffff; /* la superficie: tarjetas, barra, marcos */
  --tinta: #1c1b19; /* titulares y texto fuerte */
  --grafito: #3a3a3a; /* texto */
  --arena: #efe9de; /* fondo neutro de una pieza (icono, pastilla de cuenta) */
  --lienzo: #f4f3f1; /* lo hundido: carril de las píldoras, botón suave */
  --linea: #e8e5e0; /* filetes y bordes */
  --borde-tarjeta: rgba(28, 27, 25, 0.05); /* el filete casi invisible de la tarjeta */
  --burdeos: #6b2e2e; /* acento como texto, filete, icono, barra destacada */
  --burdeos-macizo: #6b2e2e; /* relleno en burdeos: botón principal, héroe, número de nota */
  --burdeos-suave: #f4eae8; /* fondo de lo encendido */
  --sobre-macizo: #ffffff; /* texto sobre burdeos-macizo */
  --neutro-texto: #6b6b6b; /* texto secundario (AA sobre blanco y sobre fondo) */
  --gris-calido: #6e6862; /* flechas y filetes con intención */
  --gris-claro: #9a948b; /* solo decoración */
  --trazo: #cfcac1; /* filetes discontinuos y puntos de adorno (zona, «Sin Olza», marco del navegador) */

  /* Semáforo: macizo (puntos, barras), fondo de la pastilla y su texto */
  --cumple: #2f9e5f;
  --cumple-fondo: #e6f4ec;
  --cumple-texto: #1f7a45;
  --parcial: #e3a21c;
  --parcial-fondo: #fdf1db;
  --parcial-texto: #8a6114;
  --nocumple: #c9453c;
  --nocumple-fondo: #fbe6e4;
  --nocumple-texto: #9e2f28;
  --neutro: #cfcac1;
  --neutro-fondo: #efedea;

  /* Sombras: tinta casi transparente, nunca gris */
  --sombra-tarjeta: 0 1px 2px rgba(28, 27, 25, 0.04), 0 10px 30px rgba(28, 27, 25, 0.05);
  --sombra-alzada: 0 1px 2px rgba(28, 27, 25, 0.05), 0 16px 40px rgba(28, 27, 25, 0.08);
  --sombra-flotante: 0 1px 2px rgba(28, 27, 25, 0.05), 0 30px 70px -28px rgba(28, 27, 25, 0.35);
  --sombra-pildora: 0 1px 3px rgba(28, 27, 25, 0.08);

  /* Marca: en claro, anillo burdeos y palabra en tinta; en oscuro, todo blanco */
  --marca-anillo: #6b2e2e;
  --marca-palabra: #1c1b19;
  /* El cuerpo del teléfono */
  --marco-movil: #1c1b19;

  --fuente: "Olza Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;

  /* Formato 16:9 por defecto (diapositiva 1920 × 1080) */
  --ancho: 1920px;
  --alto: 1080px;
  --mx: 112px; /* margen lateral */
  --my: 88px; /* margen arriba y abajo */
  --hueco: 56px; /* entre bloques grandes */
  --t-ante: 20px; /* antetítulo */
  --t-titulo: 68px; /* título */
  --t-entradilla: 30px;
  --t-texto: 26px; /* texto de un bloque */
  --t-nota: 22px; /* texto pequeño: notas, pie */
  --t-pie: 17px;
  --r-bloque: 30px; /* esquina de una tarjeta a escala de diapositiva */
  --zoom: 1; /* ampliación de la pantalla del producto */
}


/* Modo oscuro forzado. Los mismos tokens, otro valor. */
.demoapp .oscuro {
  --fondo: #121110;
  --blanco: #1c1b19;
  --tinta: #f4f1ec;
  --grafito: #d7d3cc;
  --arena: #2a2622;
  --lienzo: #262422;
  --linea: #2d2b28;
  --borde-tarjeta: rgba(255, 255, 255, 0.04);
  --burdeos: #e3a39a;
  --burdeos-macizo: #7e3636;
  --burdeos-suave: #2f2120;
  --sobre-macizo: #ffffff;
  --neutro-texto: #a8a39c;
  --gris-calido: #8f8a83;
  --gris-claro: #6e6a64;
  --trazo: #4a4641;
  --cumple-fondo: #163222;
  --cumple-texto: #86d7a8;
  --parcial-fondo: #3a2c11;
  --parcial-texto: #f0c66e;
  --nocumple-fondo: #3b1b18;
  --nocumple-texto: #f29a90;
  --neutro-fondo: #2a2826;
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
  --sombra-alzada: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.35);
  --sombra-flotante: 0 30px 70px -28px rgba(0, 0, 0, 0.5);
  --sombra-pildora: 0 1px 3px rgba(0, 0, 0, 0.4);
  --marca-anillo: #ffffff;
  --marca-palabra: #ffffff;
  --marco-movil: #3a3733;
  color-scheme: dark;
}


/* Sigue al sistema solo si se pide con `tema-sistema` (las imágenes salen
   siempre igual; esto es para entregar la plantilla como página). */


/* ---------------------------------------------------------------------
   3. Formatos. Solo cambian medidas; los colores no.
   --------------------------------------------------------------------- */
.demoapp .f-1x1 {
  --ancho: 1080px;
  --alto: 1080px;
  --mx: 72px;
  --my: 72px;
  --hueco: 40px;
  --t-ante: 18px;
  --t-titulo: 56px;
  --t-entradilla: 26px;
  --t-texto: 24px;
  --t-nota: 21px;
  --t-pie: 16px;
  --r-bloque: 28px;
}

.demoapp .f-4x5 {
  --ancho: 1080px;
  --alto: 1350px;
  --mx: 72px;
  --my: 80px;
  --hueco: 48px;
  --t-ante: 18px;
  --t-titulo: 60px;
  --t-entradilla: 27px;
  --t-texto: 25px;
  --t-nota: 21px;
  --t-pie: 16px;
  --r-bloque: 28px;
}


/* Lo que solo sale en un formato. `solo-ancho`: solo en 16:9.
   `solo-alto`: solo en 1:1 y 4:5. `solo-1x1`, `solo-4x5`, `no-1x1`… */
.demoapp .f-1x1 .solo-ancho, .demoapp .f-4x5 .solo-ancho, .demoapp:not(.f-1x1):not(.f-4x5) .solo-alto, .demoapp:not(.f-1x1) .solo-1x1, .demoapp:not(.f-4x5) .solo-4x5, .demoapp .f-1x1 .no-1x1, .demoapp .f-4x5 .no-4x5, .demoapp:not(.f-1x1):not(.f-4x5) .no-16x9 {
  display: none !important;
}


/* ---------------------------------------------------------------------
   4. Base
   --------------------------------------------------------------------- */
.demoapp *, .demoapp *::before, .demoapp *::after {
  box-sizing: border-box;
}

.demoapp, .demoapp {
  margin: 0;
  padding: 0;
}

.demoapp {
  background: var(--fondo);
  color: var(--grafito);
  font-family: var(--fuente);
  font-size: var(--t-texto);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0;
}

.demoapp h1, .demoapp h2, .demoapp h3, .demoapp h4, .demoapp p, .demoapp ol, .demoapp ul, .demoapp figure {
  margin: 0;
}

.demoapp ol, .demoapp ul {
  padding: 0;
  list-style: none;
}

.demoapp h1, .demoapp h2, .demoapp h3, .demoapp h4 {
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.demoapp svg {
  display: block;
}

.demoapp svg text {
  font-family: var(--fuente);
}

.demoapp .num-tab {
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------
   5. El lienzo de la imagen
   --------------------------------------------------------------------- */
.demoapp .lienzo {
  position: relative;
  width: var(--ancho);
  height: var(--alto);
  padding: var(--my) var(--mx);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  background: var(--fondo);
}

/* La cabecera del lienzo: antetítulo, título y entradilla */
.demoapp .cabecera {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1280px;
}

.demoapp .antetitulo {
  font-size: var(--t-ante);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--burdeos);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.demoapp .titulo {
  font-size: var(--t-titulo);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--tinta);
}

/* La segunda parte del título, más suave («Hola, Elena» de Master) */
.demoapp .titulo .suave, .demoapp .saludo h1 span {
  font-weight: 400;
  color: var(--neutro-texto);
}

.demoapp .entradilla {
  font-size: var(--t-entradilla);
  line-height: 1.4;
  color: var(--grafito);
  max-width: 34em;
  text-wrap: pretty;
}

.demoapp .entradilla b, .demoapp .nota b {
  color: var(--tinta);
  font-weight: 600;
}

/* Lo que ocupa el resto del lienzo */
.demoapp .cuerpo {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Abajo: la firma de Olza y la nota de datos ficticios */
.demoapp .pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: var(--t-pie);
  color: var(--neutro-texto);
  margin-top: auto;
}

.demoapp .pie .marca-olza {
  height: 30px;
}

.demoapp .f-1x1 .pie .marca-olza, .demoapp .f-4x5 .pie .marca-olza {
  height: 26px;
}


/* Composición a dos columnas: texto y visual. En 16:9, lado a lado; en
   1:1 y 4:5, uno encima de otro. `invertida`: el visual a la izquierda. */
.demoapp .dos-columnas {
  display: grid;
  grid-template-columns: var(--col-texto, 560px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  flex: 1;
  min-height: 0;
}

.demoapp .dos-columnas.invertida {
  grid-template-columns: minmax(0, 1fr) var(--col-texto, 520px);
}

.demoapp .dos-columnas.invertida > .columna-texto {
  order: 2;
}

.demoapp .f-1x1 .dos-columnas, .demoapp .f-4x5 .dos-columnas {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--hueco);
  align-items: start;
}

.demoapp .f-1x1 .dos-columnas.invertida > .columna-texto, .demoapp .f-4x5 .dos-columnas.invertida > .columna-texto {
  order: 0;
}

.demoapp .columna-texto {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.demoapp .columna-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------------------
   6. Piezas a escala de diapositiva
   --------------------------------------------------------------------- */
/* Un bloque: la tarjeta blanca grande */
.demoapp .bloque {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--r-bloque);
  box-shadow: var(--sombra-tarjeta);
  padding: 40px;
  min-width: 0;
}

.demoapp .bloque h3 {
  font-size: calc(var(--t-texto) * 1.25);
  line-height: 1.2;
}

.demoapp .bloque p {
  font-size: var(--t-texto);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Dentro de un bloque, una fila con filete (como la `pieza` de Master) */
.demoapp .fila-bloque {
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 20px 24px;
}


/* El icono redondo de una caja o un paso */
.demoapp .icono-redondo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--burdeos-suave);
  color: var(--burdeos);
}

.demoapp .icono-redondo svg {
  width: 30px;
  height: 30px;
}

.demoapp .icono-redondo.neutro {
  background: var(--lienzo);
  color: var(--tinta);
}

.demoapp .icono-redondo.macizo {
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
}


/* Notas numeradas (la leyenda de las anotaciones) */
.demoapp .notas {
  display: flex;
  flex-direction: column;
  gap: 28px;
  counter-reset: nota;
}

.demoapp .nota {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  font-size: var(--t-nota);
  line-height: 1.4;
  color: var(--grafito);
}

.demoapp .nota b {
  display: block;
  font-size: var(--t-texto);
  line-height: 1.25;
  margin-bottom: 4px;
}

.demoapp .numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.demoapp .f-1x1 .nota, .demoapp .f-4x5 .nota {
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
}

.demoapp .f-1x1 .numero, .demoapp .f-4x5 .numero {
  width: 44px;
  height: 44px;
  font-size: 19px;
}


/* El globo: una nota que flota sobre la imagen (número + texto corto).
   Se coloca con style="top:…; left:…" dentro de un contenedor relativo. */
.demoapp .globo {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  padding: 14px 24px 14px 14px;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 999px;
  box-shadow: var(--sombra-flotante), 0 0 0 1px var(--linea);
  font-size: var(--t-nota);
  line-height: 1.3;
  font-weight: 500;
  color: var(--tinta);
}

.demoapp .globo .numero {
  width: 44px;
  height: 44px;
  font-size: 19px;
}

.demoapp .globo.largo {
  border-radius: 26px;
  align-items: flex-start;
}


/* El pin: el número encima de la cosa que se explica. Va DENTRO de la
   pantalla del producto, como hijo de la tarjeta que señala (que tiene
   position: relative), así sigue a su tarjeta en cualquier formato. */
.demoapp .pin {
  position: absolute;
  z-index: 6;
  top: -14px;
  left: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--blanco), 0 6px 18px rgba(28, 27, 25, 0.25);
  font-variant-numeric: tabular-nums;
}

.demoapp .pin.dcha {
  left: auto;
  right: -14px;
}

.demoapp .pin.abajo {
  top: auto;
  bottom: -14px;
}

.demoapp .pin.centro-v {
  top: 50%;
  margin-top: -17px;
}

/* Colgando debajo de lo que señala (una píldora de la barra, un botón) */
.demoapp .pin.debajo {
  top: calc(100% - 4px);
  left: 50%;
  margin-left: -17px;
}

/* Un pin dentro de la barra no se recorta */
.demoapp .pildoras:has(.pin), .demoapp .barra .medio:has(.pin) {
  overflow: visible;
}

/* El recuadro fino alrededor de lo que se señala */
.demoapp .senal {
  outline: 2.5px solid var(--burdeos);
  outline-offset: 5px;
  border-radius: inherit;
}


/* Flecha fina: un SVG en línea. Ver las plantillas flujo y arquitectura. */
.demoapp .flecha-fina {
  color: var(--gris-calido);
  flex: none;
}

.demoapp .flecha-fina path, .demoapp .flecha-fina line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* El rótulo pequeño de una flecha o una zona */
.demoapp .rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--neutro-texto);
  font-size: var(--t-pie);
  font-weight: 600;
  white-space: nowrap;
}

.demoapp .rotulo.blanco {
  background: var(--blanco);
  box-shadow: var(--sombra-pildora);
}


/* ---------------------------------------------------------------------
   7. Marcos: navegador y teléfono
   --------------------------------------------------------------------- */
.demoapp .navegador {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 22px;
  box-shadow: var(--sombra-flotante), 0 0 0 1px var(--linea);
  overflow: visible;
  flex: none;
}

.demoapp .navegador-barra {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--linea);
}

.demoapp .navegador-barra .puntos {
  display: flex;
  gap: 8px;
  flex: none;
}

.demoapp .navegador-barra .puntos i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--trazo);
}

.demoapp .navegador-barra .direccion {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  height: 32px;
  border-radius: 999px;
  background: var(--lienzo);
  color: var(--neutro-texto);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demoapp .navegador-barra .hueco {
  width: 52px;
  flex: none;
}

/* La ventana: recorta la pantalla del producto */
.demoapp .navegador-ventana {
  overflow: hidden;
  border-radius: 0 0 21px 21px;
}


.demoapp .movil {
  position: relative;
  flex: none;
  padding: 14px;
  border-radius: 66px;
  background: var(--marco-movil);
  box-shadow: var(--sombra-flotante), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.demoapp .movil-ventana {
  position: relative;
  overflow: hidden;
  border-radius: 52px;
}

/* La isla de la cámara */
.demoapp .movil-ventana::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 14px;
  left: 50%;
  width: 126px;
  height: 36px;
  margin-left: -63px;
  border-radius: 20px;
  background: #0b0b0a;
}


/* ---------------------------------------------------------------------
   8. La pantalla del producto (píxeles reales de Master)
   Ancho y alto con --pw y --ph; se amplía con --zoom.
   --------------------------------------------------------------------- */
.demoapp .pantalla {
  position: relative;
  width: var(--pw, 1200px);
  height: var(--ph, 760px);
  zoom: var(--zoom);
  overflow: hidden;
  background: var(--fondo);
  color: var(--grafito);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demoapp .pantalla.movil-pantalla {
  width: var(--pw, 390px);
  height: var(--ph, 844px);
  padding: 58px 14px 16px;
  gap: 16px;
}

/* La barra de estado del teléfono */
.demoapp .estado-movil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

.demoapp .estado-movil .iconos {
  display: flex;
  gap: 6px;
  align-items: center;
}


/* La barra superior en píldora */
.demoapp .barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 18px;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 999px;
  box-shadow: var(--sombra-tarjeta);
  min-width: 0;
  flex: none;
}

.demoapp .barra .marca-olza {
  height: 25px;
}

.demoapp .barra .medio {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.demoapp .barra .derecha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* En el teléfono, la barra va en dos filas */
.demoapp .barra.dos-filas {
  flex-wrap: wrap;
  border-radius: 26px;
  padding: 10px 12px 10px 16px;
  row-gap: 10px;
}

.demoapp .barra.dos-filas .medio {
  order: 3;
  flex-basis: 100%;
  justify-content: flex-start;
}

.demoapp .barra.dos-filas .derecha {
  margin-left: auto;
}


/* La marca de Olza en línea (ver el SVG en las plantillas) */
.demoapp .marca-olza {
  display: block;
  height: 28px;
  width: auto;
  flex: none;
}

.demoapp .marca-olza .anillo, .demoapp .isotipo .anillo {
  fill: none;
  stroke: var(--marca-anillo);
  stroke-linecap: round;
}

.demoapp .marca-olza .punto, .demoapp .isotipo .punto {
  fill: var(--marca-anillo);
}

.demoapp .marca-olza .palabra {
  fill: var(--marca-palabra);
}

.demoapp .isotipo {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
}


/* La navegación en píldoras, con su cifra y el punto urgente */
.demoapp .pildoras {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--lienzo);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.demoapp .pildoras > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutro-texto);
  flex: none;
}

.demoapp .pildoras > .activa {
  background: var(--blanco);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: var(--sombra-pildora);
}

.demoapp .insignia {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  height: 18px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--linea);
  color: var(--grafito);
}

.demoapp .insignia.urgente {
  background: var(--nocumple-fondo);
  color: var(--nocumple-texto);
}

.demoapp .insignia.atencion {
  background: var(--parcial-fondo);
  color: var(--parcial-texto);
}

.demoapp .punto-urgente {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nocumple-texto);
  flex: none;
}


/* El carril lateral de la consola, plegado a iconos */
.demoapp .con-carril {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 22px;
}

.demoapp .carril {
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 22px;
  box-shadow: var(--sombra-tarjeta);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--neutro-texto);
}

.demoapp .carril span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.demoapp .carril span.activa {
  background: var(--burdeos-suave);
  color: var(--burdeos);
}

.demoapp .carril hr {
  width: 28px;
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 4px 0;
}


/* Botones */
.demoapp .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--tinta);
  background: transparent;
  flex: none;
}

.demoapp .boton.primario {
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
}

.demoapp .boton.secundario {
  border-color: var(--linea);
}

.demoapp .boton.suave {
  background: var(--lienzo);
}

.demoapp .boton.claro {
  background: var(--sobre-macizo);
  color: #6b2e2e; /* la única excepción: blanco sobre burdeos en los dos temas */
}

.demoapp .boton.chico {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}

.demoapp .boton-icono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--linea);
  color: var(--tinta);
  flex: none;
}

.demoapp .boton-icono.chico {
  width: 30px;
  height: 30px;
}

.demoapp .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  font-size: 13px;
  font-weight: 600;
  flex: none;
}

.demoapp .fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}


/* El saludo sobre el fondo */
.demoapp .saludo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 0;
  flex: none;
}

.demoapp .saludo h1 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.demoapp .saludo p {
  font-size: 14px;
  color: var(--grafito);
  margin-top: 2px;
}

.demoapp .saludo p b {
  color: var(--burdeos);
  font-weight: 700;
}

.demoapp .chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.demoapp .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--sombra-tarjeta);
  border: 1px solid var(--borde-tarjeta);
}

.demoapp .chip.solido {
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  border-color: transparent;
}


/* Rejilla de 12 columnas */
.demoapp .rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  min-height: 0;
}

.demoapp .c2 { grid-column: span 2; }

.demoapp .c3 { grid-column: span 3; }

.demoapp .c4 { grid-column: span 4; }

.demoapp .c5 { grid-column: span 5; }

.demoapp .c6 { grid-column: span 6; }

.demoapp .c7 { grid-column: span 7; }

.demoapp .c8 { grid-column: span 8; }

.demoapp .c9 { grid-column: span 9; }

.demoapp .c12 { grid-column: span 12; }

.demoapp .columna {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}


/* La tarjeta: blanca, 22 px, filete y sombra que casi no se ven */
.demoapp .tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 22px;
  box-shadow: var(--sombra-tarjeta);
  padding: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Una fila dentro de una tarjeta (y tarjeta dentro de tarjeta) */
.demoapp .pieza, .demoapp .tarjeta .tarjeta {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: none;
}

.demoapp .cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.demoapp .cab h3 {
  font-size: 15px;
  line-height: 1.3;
}

.demoapp .sub {
  font-size: 12.5px;
  color: var(--neutro-texto);
  margin-top: 2px;
  line-height: 1.4;
}

.demoapp .etiqueta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutro-texto);
}

.demoapp .cifra {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1;
}

.demoapp .enlace {
  color: var(--burdeos);
  font-weight: 600;
  font-size: 13px;
}

.demoapp .texto-suave {
  color: var(--neutro-texto);
}


/* La tarjeta héroe: burdeos macizo, una por pantalla, solo en el inicio
   del cliente. El círculo translúcido es decoración. */
.demoapp .heroe {
  position: relative;
  background-color: var(--burdeos-macizo);
  background-image: radial-gradient(circle 128px at calc(100% - 34px) 22px, rgba(255, 255, 255, 0.08) 99.4%, transparent 100%);
  color: var(--sobre-macizo);
  border-radius: 22px;
  box-shadow: var(--sombra-tarjeta);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.demoapp .heroe .etiqueta {
  color: rgba(255, 255, 255, 0.74);
}

.demoapp .heroe .cifra {
  color: var(--sobre-macizo);
  font-size: 56px;
}

.demoapp .heroe .detalle {
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

.demoapp .desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demoapp .desglose span {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

.demoapp .heroe .urgente {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.demoapp .heroe .urgente small {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.demoapp .heroe .urgente b {
  font-weight: 600;
}


/* Pastillas en píldora. Las de estado llevan su punto. */
.demoapp .pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--arena);
  color: var(--tinta);
}

.demoapp .pastilla.cumple::before, .demoapp .pastilla.parcial::before, .demoapp .pastilla.nocumple::before, .demoapp .pastilla.neutra::before, .demoapp .pastilla.acento::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.demoapp .pastilla.cumple {
  background: var(--cumple-fondo);
  color: var(--cumple-texto);
}

.demoapp .pastilla.parcial {
  background: var(--parcial-fondo);
  color: var(--parcial-texto);
}

.demoapp .pastilla.nocumple {
  background: var(--nocumple-fondo);
  color: var(--nocumple-texto);
}

.demoapp .pastilla.neutra {
  background: var(--neutro-fondo);
  color: var(--neutro-texto);
}

.demoapp .pastilla.acento {
  background: var(--burdeos-suave);
  color: var(--burdeos);
}


/* Tabla y lista limpias */
.demoapp .tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.demoapp .tabla th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--neutro-texto);
  padding: 0 10px 10px;
  white-space: nowrap;
}

.demoapp .tabla td {
  padding: 11px 10px;
  border-top: 1px solid var(--linea);
  vertical-align: middle;
}

.demoapp .tabla td.dcha, .demoapp .tabla th.dcha {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* La primera columna se lleva el sitio que sobra y corta con «…» */
.demoapp .tabla td:first-child {
  width: 100%;
  max-width: 0;
}

.demoapp .cosa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.demoapp .cosa b {
  display: block;
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demoapp .cosa small {
  display: block;
  color: var(--neutro-texto);
  font-size: 12px;
}

.demoapp .cosa > div {
  min-width: 0;
}

.demoapp .cosa-icono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--burdeos-suave);
  color: var(--burdeos);
}

.demoapp .cosa-icono.neutro {
  background: var(--lienzo);
  color: var(--tinta);
}

.demoapp .lista {
  display: grid;
  gap: 10px;
}

.demoapp .fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demoapp .fila > div {
  min-width: 0;
}

.demoapp .fila b {
  color: var(--tinta);
  font-weight: 600;
}

.demoapp .fila p {
  color: var(--neutro-texto);
  font-size: 13px;
}


/* Las tres preguntas de cada alerta de la bandeja */
.demoapp .preguntas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}

.demoapp .preguntas .etiqueta {
  display: block;
  margin-bottom: 3px;
}

.demoapp .preguntas p {
  color: var(--tinta);
  font-size: 13.5px;
}


/* Chips de filtro o de dato */
.demoapp .chip-dato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: 12.5px;
  color: var(--grafito);
  background: var(--blanco);
}


/* Interruptor de dos posiciones («Semanas | Meses») */
.demoapp .conmutador {
  display: inline-flex;
  background: var(--lienzo);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
}

.demoapp .conmutador span {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--neutro-texto);
}

.demoapp .conmutador span.activa {
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  font-weight: 600;
}


/* Barra de progreso fina (cumplimiento) */
.demoapp .progreso {
  height: 8px;
  border-radius: 999px;
  background: var(--lienzo);
  overflow: hidden;
}

.demoapp .progreso i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--burdeos);
}


/* ---------------------------------------------------------------------
   9. Gráficos en SVG (sin librerías). Ver pantalla-portal.html.
   --------------------------------------------------------------------- */
.demoapp .grafico {
  width: 100%;
  height: auto;
  overflow: visible;
}

.demoapp .grafico .guia {
  stroke: var(--linea);
  stroke-dasharray: 3 4;
}

.demoapp .grafico .eje {
  fill: var(--neutro-texto);
  font-size: 11px;
}

.demoapp .grafico .rayas-fondo {
  fill: var(--burdeos-suave);
}

.demoapp .grafico .rayas-trazo {
  fill: var(--burdeos);
  opacity: 0.55;
}

.demoapp .grafico .destacada {
  fill: var(--burdeos);
}

.demoapp .grafico .punto-blanco {
  fill: var(--blanco);
}

.demoapp .grafico .burbuja {
  fill: var(--burdeos);
}

.demoapp .grafico .burbuja-texto {
  fill: var(--blanco);
  font-size: 11px;
  font-weight: 600;
}

.demoapp .grafico .area-alto {
  stop-color: var(--burdeos);
  stop-opacity: 0.22;
}

.demoapp .grafico .area-bajo {
  stop-color: var(--burdeos);
  stop-opacity: 0;
}

.demoapp .grafico .curva {
  fill: none;
  stroke: var(--burdeos);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demoapp .grafico .curva-punto {
  fill: var(--blanco);
  stroke: var(--burdeos);
  stroke-width: 2.4;
}


/* ---------------------------------------------------------------------
   10. Plantillas a escala de diapositiva
   --------------------------------------------------------------------- */

/* Flujo: pasos en tarjetas con flechas finas. Horizontal en 16:9 y
   vertical en 1:1 y 4:5. */
.demoapp .flujo {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.demoapp .paso {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
}

.demoapp .paso-num {
  font-size: var(--t-pie);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutro-texto);
}

.demoapp .paso h3 {
  font-size: calc(var(--t-texto) * 1.2);
  line-height: 1.2;
}

.demoapp .paso p {
  font-size: var(--t-nota);
  line-height: 1.45;
  color: var(--grafito);
}

.demoapp .paso .muestra {
  margin-top: auto;
  font-size: 15px;
}

.demoapp .paso.destacado {
  box-shadow: var(--sombra-alzada), 0 0 0 2px var(--burdeos);
}

.demoapp .conector {
  flex: none;
  width: 64px;
  display: grid;
  place-items: center;
}

.demoapp .conector .flecha-fina {
  width: 52px;
  height: 20px;
}

.demoapp .f-1x1 .flujo, .demoapp .f-4x5 .flujo {
  flex-direction: column;
}

.demoapp .f-1x1 .conector, .demoapp .f-4x5 .conector {
  width: auto;
  height: 40px;
}

.demoapp .f-1x1 .conector .flecha-fina, .demoapp .f-4x5 .conector .flecha-fina {
  transform: rotate(90deg);
  width: 36px;
}

.demoapp .f-1x1 .paso, .demoapp .f-4x5 .paso {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
}

.demoapp .f-1x1 .paso .muestra, .demoapp .f-4x5 .paso .muestra {
  margin: 0 0 0 auto;
}

.demoapp .paso-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}


/* Arquitectura: personas arriba, Master en el centro, motores abajo */
.demoapp .arq {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto 1fr auto;
  column-gap: 32px;
}

.demoapp .caja {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 26px;
  box-shadow: var(--sombra-tarjeta);
  padding: 26px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
}

.demoapp .caja h3 {
  font-size: var(--t-texto);
  line-height: 1.2;
}

.demoapp .caja p {
  font-size: var(--t-nota);
  line-height: 1.4;
  color: var(--grafito);
  margin-top: 6px;
}

.demoapp .caja.master {
  border: 2px solid var(--burdeos);
  box-shadow: var(--sombra-alzada);
  padding: 34px 40px;
  align-items: center;
}

.demoapp .caja.master h3 {
  font-size: calc(var(--t-texto) * 1.4);
}

.demoapp .caja-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.demoapp .caja-lista span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lienzo);
  color: var(--tinta);
  font-size: var(--t-pie);
  font-weight: 600;
}

.demoapp .enlace-v {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
}

.demoapp .enlace-v::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2.5px solid var(--gris-calido);
  transform: translateX(-50%);
}

/* El rótulo va al lado de la línea, no encima: la flecha se lee entera */
.demoapp .enlace-v .rotulo {
  position: absolute;
  z-index: 1;
  left: calc(50% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 0;
  white-space: normal;
  width: max-content;
  max-width: calc(50% - 18px);
  line-height: 1.3;
}

.demoapp .enlace-v .punta {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-right: 2.5px solid var(--gris-calido);
  border-bottom: 2.5px solid var(--gris-calido);
}

.demoapp .enlace-v .punta.abajo {
  bottom: 2px;
  transform: rotate(45deg);
}

.demoapp .enlace-v .punta.arriba {
  top: 2px;
  transform: rotate(-135deg);
}

.demoapp .zona {
  position: relative;
  border: 2px dashed var(--trazo);
  border-radius: 40px;
  padding: 44px 36px 36px;
}

.demoapp .zona > .rotulo {
  position: absolute;
  top: -20px;
  left: 36px;
}


/* Antes y después. Las dos columnas comparten filas (subgrid): cada punto
   de «Sin Olza» queda a la altura de su pareja de «Con Olza». --filas es
   el número de puntos de cada lado. */
.demoapp .antes-despues {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  grid-template-rows: auto repeat(var(--filas, 5), minmax(min-content, 1fr));
}

.demoapp .lado {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.demoapp .lado.antes {
  grid-column: 1;
  background: transparent;
  border: 2px dashed var(--trazo);
  box-shadow: none;
}

.demoapp .lado.despues {
  grid-column: 3;
}

.demoapp .lado-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
}

.demoapp .lado-cab h3 {
  font-size: calc(var(--t-texto) * 1.3);
}

.demoapp .lado .puntos-lista {
  display: contents;
}

.demoapp .puntos-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demoapp .puntos-lista li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  align-content: center;
  padding: 14px 0;
  text-wrap: pretty;
  font-size: var(--t-texto);
  line-height: 1.35;
  color: var(--tinta);
}

.demoapp .lado .puntos-lista li {
  border-top: 1px solid var(--linea);
}

.demoapp .antes .puntos-lista li {
  color: var(--grafito);
  border-top: 1px dashed var(--trazo);
}

.demoapp .marca-punto {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--burdeos-suave);
  color: var(--burdeos);
  margin-top: -3px;
}

.demoapp .antes .marca-punto {
  background: var(--neutro-fondo);
  color: var(--neutro-texto);
}

.demoapp .marca-punto svg {
  width: 20px;
  height: 20px;
}

.demoapp .medio-flecha {
  grid-column: 2;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
}

.demoapp .medio-flecha span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--burdeos-macizo);
  color: var(--sobre-macizo);
  box-shadow: var(--sombra-alzada);
}

.demoapp .f-1x1 .antes-despues, .demoapp .f-4x5 .antes-despues {
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
}

.demoapp .f-1x1 .medio-flecha span, .demoapp .f-4x5 .medio-flecha span {
  width: 46px;
  height: 46px;
}


/* Cifra grande, estilo héroe (a escala de diapositiva) */
.demoapp .heroe-grande {
  position: relative;
  background-color: var(--burdeos-macizo);
  background-image: radial-gradient(circle 300px at calc(100% - 70px) 40px, rgba(255, 255, 255, 0.08) 99.6%, transparent 100%);
  color: var(--sobre-macizo);
  border-radius: 40px;
  box-shadow: var(--sombra-alzada);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.demoapp .heroe-grande .etiqueta-grande {
  font-size: var(--t-ante);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

.demoapp .heroe-grande .numero-grande {
  font-size: 300px;
  line-height: 0.82;
  font-weight: 600;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.demoapp .heroe-grande .numero-grande small {
  font-size: 0.4em;
  letter-spacing: -0.02em;
  margin-left: 0.08em;
}

.demoapp .heroe-grande .que-es {
  font-size: calc(var(--t-texto) * 1.15);
  line-height: 1.35;
  font-weight: 600;
  max-width: 22em;
}

.demoapp .heroe-grande .desglose {
  gap: 10px;
}

.demoapp .heroe-grande .desglose span {
  font-size: var(--t-nota);
  padding: 8px 18px;
}

.demoapp .heroe-grande .pie-heroe {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: var(--t-nota);
}

.demoapp .heroe-grande .pie-heroe small {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--t-pie);
}

.demoapp .heroe-grande .boton {
  height: 56px;
  padding: 0 28px;
  font-size: 20px;
}

.demoapp .f-1x1 .heroe-grande .numero-grande, .demoapp .f-4x5 .heroe-grande .numero-grande {
  font-size: 240px;
}

.demoapp .f-1x1 .heroe-grande, .demoapp .f-4x5 .heroe-grande {
  padding: 44px 48px;
  border-radius: 34px;
}


/* La cifra pequeña de apoyo (en bloque blanco) */
.demoapp .dato {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demoapp .dato .cifra {
  font-size: 72px;
}

.demoapp .dato .cifra small {
  font-size: 0.5em;
  margin-left: 4px;
}

.demoapp .dato p {
  font-size: var(--t-nota);
  color: var(--grafito);
}


/* Comparativa */
.demoapp .tabla-comparativa {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-nota);
}

.demoapp .tabla-comparativa th, .demoapp .tabla-comparativa td {
  padding: 20px 24px;
  text-align: left;
  vertical-align: middle;
}

.demoapp .tabla-comparativa thead th {
  font-size: var(--t-pie);
  font-weight: 600;
  color: var(--neutro-texto);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 8px;
  padding-bottom: 18px;
}

.demoapp .tabla-comparativa tbody th {
  font-weight: 600;
  color: var(--tinta);
  font-size: var(--t-texto);
  line-height: 1.3;
}

.demoapp .tabla-comparativa tbody tr > * {
  border-top: 1px solid var(--linea);
}

.demoapp .tabla-comparativa .d {
  background: var(--burdeos-suave);
}

.demoapp .tabla-comparativa thead .d {
  color: var(--burdeos);
  border-radius: 20px 20px 0 0;
  padding-top: 20px;
}

.demoapp .tabla-comparativa tbody tr:last-child .d {
  border-radius: 0 0 20px 20px;
}

.demoapp .tabla-comparativa td .pastilla {
  font-size: calc(var(--t-nota) * 0.9);
  padding: 4px 14px;
  gap: 8px;
}

.demoapp .tabla-comparativa td .pastilla::before {
  width: 8px;
  height: 8px;
}

.demoapp .tabla-comparativa .cabecera-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--burdeos);
}

.demoapp .tabla-comparativa .cabecera-marca .isotipo {
  width: 26px;
  height: 26px;
}


/* Portada de sección */
.demoapp .portada {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.demoapp .portada .titulo {
  font-size: calc(var(--t-titulo) * 1.45);
  line-height: 1.02;
}

.demoapp .numero-seccion {
  font-size: var(--t-ante);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--burdeos);
}

.demoapp .anillo-grande {
  position: absolute;
  pointer-events: none;
}

.demoapp .anillo-grande {
  opacity: 0.13;
}

.demoapp .anillo-grande .anillo {
  fill: none;
  stroke: var(--burdeos);
  stroke-linecap: round;
}

.demoapp .anillo-grande .punto {
  fill: var(--burdeos);
}

.demoapp .pila {
  position: relative;
  height: 100%;
  min-height: 0;
}

.demoapp .pila > * {
  position: absolute;
}

.demoapp .f-1x1 .portada, .demoapp .f-4x5 .portada {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--hueco);
  align-items: start;
}

.demoapp .f-1x1 .portada .titulo {
  font-size: calc(var(--t-titulo) * 1.3);
}