/* ============================================================================
   MOSAICO — la retícula de bloques de color de la pauta.

   La pauta NO es una hoja blanca con cosas dentro: es una reticula de PANELES
   de color sobre el negro, separados por canales del propio lienzo. Cada panel
   es de un color plano y muy redondeado, y dentro lleva tarjetas blancas,
   capsulas negras y discos negros.

   El primer intento fue una sola hoja blanca. Se leia bien y era la pauta a
   medias: faltaba justo lo que la hace reconocible, que es el color.

   REGLA DEL LIMA: vive aqui, en el sitio publico. En la aplicacion un amarillo
   ya significa «puede contener». Ver la cabecera de `tokens.css`.
   ========================================================================= */

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--no-e4);
}

.panel {
  border-radius: var(--no-radio-hoja);
  padding: clamp(var(--no-e5), 3.2vw, var(--no-e7));
  /* Todos los paneles ocupan el ancho completo por defecto; cada uno declara
     el suyo mas abajo. En movil nadie se parte. */
  grid-column: 1 / -1;
  min-width: 0;
}

.panel-claro   { background: var(--no-fondo);      color: var(--no-tinta-pauta); }
.panel-hueso   { background: var(--no-superficie); color: var(--no-tinta-pauta); }
.panel-violeta { background: var(--no-violeta);    color: #FFFFFF; }
.panel-lima    { background: var(--no-lima);       color: var(--no-tinta-pauta); }
.panel-rosa    { background: var(--no-rosa-pauta); color: var(--no-tinta-pauta); }
.panel-negro   { background: var(--no-lienzo-2);   color: #FFFFFF; }

/* Los titulares y el texto heredan del panel, no del documento. */
.panel h1, .panel h2, .panel h3, .panel strong { color: inherit; }
.panel-violeta a, .panel-negro a { color: #FFFFFF; }
.panel-lima a, .panel-rosa a, .panel-claro a, .panel-hueso a { color: var(--no-tinta-pauta); }

/* A partir de tableta, la reticula se reparte como en el original. */
@media (min-width: 820px) {
  .panel-1-3 { grid-column: span 2; }
  .panel-1-2 { grid-column: span 3; }
  .panel-2-3 { grid-column: span 4; }
  .panel-todo { grid-column: 1 / -1; }
}

/* ── Bloques de dato, como los «+859 Registered Users» del original ───────── */
.cifras {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--no-e3);
  list-style: none; padding: 0; margin: 0;
}
.cifra {
  background: rgba(255,255,255,.14);
  border-radius: var(--no-radio-s);
  padding: var(--no-e4);
  margin: 0;
}
/* Sobre un panel claro, el bloque se invierte: relleno violeta y letra blanca. */
.panel-claro .cifra, .panel-lima .cifra, .panel-rosa .cifra {
  background: var(--no-violeta); color: #FFFFFF;
}
.cifra-eti {
  display: block; font-size: var(--no-t-xs); font-weight: 600;
  line-height: 1.25; opacity: .88; margin: 0 0 var(--no-e2);
}
.cifra-dato {
  display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}

/* ── Lista de capsulas, como los «Benefits» del original ─────────────────── */
.capsulas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--no-e2); }
.capsulas > li { margin: 0; }
.capsulas a, .capsulas > li > span {
  display: flex; align-items: center; min-height: var(--no-toque-min);
  background: var(--no-tinta-pauta); color: #FFFFFF !important;
  border-radius: var(--no-radio-pill); padding: var(--no-e2) var(--no-e5);
  text-decoration: none; font-weight: 500;
}
.capsulas a:hover { background: var(--no-violeta); }

/* ── Boton de icono redondo: el `+`, el corazon y las flechas ─────────────── */
.disco {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--no-tinta-pauta); color: #FFFFFF;
  border: 0; text-decoration: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
}
.disco:hover { background: var(--no-violeta); }
/* Sobre un panel oscuro se invierte, igual que en el original. */
.panel-violeta .disco, .panel-negro .disco { background: #FFFFFF; color: var(--no-violeta); }

/* Cabecera de panel: titulo a la izquierda y disco a la derecha. */
.panel-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--no-e4); margin: 0 0 var(--no-e5);
}
.panel-cabecera > :first-child { margin: 0; }

/* ── Tarjeta blanca DENTRO de un panel de color, como el «Special offer» ─── */
.panel-interior {
  background: var(--no-fondo); color: var(--no-tinta-pauta);
  border-radius: var(--no-radio); padding: var(--no-e5);
  margin: 0 0 var(--no-e5);
}
.panel-interior a { color: var(--no-violeta-texto); }

/* Cada panel mide lo que mide su contenido. Sin esto, la reticula estiraba el
   panel mas bajo hasta la altura del mas alto y el lima se quedaba con medio
   panel vacio debajo de las tarjetas. En el original los bloques tampoco miden
   todos lo mismo: es un mosaico, no una tabla. */
.mosaico { align-items: start; }

/* Una tarjeta que ES un enlace entero no se subraya: el subrayado en cuatro
   lineas de titular y entradilla se come la tarjeta. */
a.tarjeta, a.tarjeta:hover { text-decoration: none; }
a.tarjeta .tarjeta-titulo { text-decoration: underline; text-underline-offset: 3px; }
a.tarjeta:hover { transform: translateY(-2px); }
a.tarjeta { transition: transform var(--no-transicion); }

/* El titular de exposición acentúa una palabra con `<em>` en magenta de marca.
   Sobre un panel violeta eso da 1.01:1: la frase acentuada desaparecía. Sobre
   panel de color, el acento lo pone el LIMA, que contrasta con los tres. */
.panel-violeta .display em, .panel-negro .display em { color: var(--no-lima); }
.panel-lima .display em, .panel-rosa .display em { color: var(--no-violeta-texto); }

/* El texto secundario DENTRO de un panel oscuro.

   `.hero-sub`, `.entradilla` y `.panel-nota` llevan `--no-tinta-media`, que es
   gris oscuro: pensado para leerse sobre blanco. Sobre el violeta o el carbón
   se hunden. Aquí se invierten de una vez para todos los paneles oscuros, en
   lugar de ir arreglándolo sección por sección según se vayan viendo. */
.panel-negro .hero-sub, .panel-negro .entradilla, .panel-negro .panel-nota,
.panel-negro p { color: var(--text-on-dark-2); }
.panel-violeta .hero-sub, .panel-violeta .entradilla, .panel-violeta .panel-nota,
.panel-violeta p { color: var(--text-on-purple); }
.panel-violeta strong, .panel-negro strong { color: #FFFFFF; }
/* Los pies de foto y notas dentro de paneles CLAROS no se tocan. */