/* ══════════════════════════════════════════════════════════════════════════
   ICONOS — el sistema de stickers, ahora vectorial
   ══════════════════════════════════════════════════════════════════════════
   POR QUÉ (1-sep-2026, el dueño: "los emojis de los cuadros se ven mal, no
   tienen render nada, se ven como sticker mal pegados"):

   Había DOS vocabularios peleando en el mismo hueco:
     · 6 stickers eran PNG/WebP de 180px con la baldosa (fondo crema, borde
       negro y sombra) INCRUSTADA en los píxeles, mostrados a 46px. El borde
       y la sombra eran imagen, no CSS: proporciones distintas entre sí,
       bordes blandos y ninguna forma de alinearlos con el sistema.
     · Otros dos eran emoji del sistema crudos (🧩, 👥) dentro de la caja CSS.
   Resultado: el mismo rol con dos aspectos, y ninguno nítido.

   AHORA: el dibujo es SVG vectorial en data-URI (0 peticiones, nítido a
   cualquier densidad) y la baldosa la dibuja el CSS con los tokens reales.
   Mismo aspecto aprobado — azul #2440ff con contorno negro — pero limpio.
   Se van 6 peticiones de imagen del camino crítico.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --ico-corazon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 20.6S3.6 15.2 3.6 9.5a4.7 4.7 0 0 1 8.4-2.9 4.7 4.7 0 0 1 8.4 2.9c0 5.7-8.4 11.1-8.4 11.1Z'/%3E%3C/svg%3E");
  --ico-estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m12 3 2.7 5.7 6.2.8-4.5 4.3 1.1 6.2-5.5-3-5.5 3 1.1-6.2L3.1 9.5l6.2-.8Z'/%3E%3C/svg%3E");
  --ico-cohete:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2.8c3 2.4 4.6 5.6 4.6 9l-1.7 3.5H9.1L7.4 11.8c0-3.4 1.6-6.6 4.6-9Z'/%3E%3Cpath d='M9.1 15.3 6.2 17.2l.7-4.3M14.9 15.3l2.9 1.9-.7-4.3'/%3E%3Cpath d='M10.6 17.6c0 1.4.6 2.6 1.4 3.6.8-1 1.4-2.2 1.4-3.6Z'/%3E%3Ccircle cx='12' cy='9.6' r='1.7' fill='%23fff'/%3E%3C/svg%3E");
  --ico-saludo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7.6 12.2V6.4a1.3 1.3 0 0 1 2.6 0v4.4m0-4.4V5a1.3 1.3 0 0 1 2.6 0v5.4m0-5V5.6a1.3 1.3 0 1 1 2.6 0v4.8'/%3E%3Cpath d='M15.4 8.6a1.3 1.3 0 0 1 2.6 0v5.2c0 3.6-2.4 6.4-5.6 6.4s-5.6-2.4-5.6-5.6v-2.4'/%3E%3C/svg%3E");
  --ico-candado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 10.4V7.8a4 4 0 0 1 8 0v2.6' fill='none'/%3E%3Crect x='5' y='10.4' width='14' height='9.4' rx='2.4'/%3E%3Ccircle cx='12' cy='15.1' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
  --ico-carrito:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.8 4.2h2.4l2.5 9.9h9.4l2.1-7.2H7.4Z'/%3E%3Ccircle cx='9.4' cy='18.4' r='1.8'/%3E%3Ccircle cx='16.6' cy='18.4' r='1.8'/%3E%3C/svg%3E");
  --ico-puzzle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 5h4.8a2.2 2.2 0 0 1 4.4 0H19v4.8a2.2 2.2 0 0 0 0 4.4V19h-4.8a2.2 2.2 0 0 1-4.4 0H5v-4.8a2.2 2.2 0 0 1 0-4.4Z'/%3E%3C/svg%3E");
  --ico-personas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440ff' stroke='%2309090e' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8.4' r='3'/%3E%3Cpath d='M3.4 19.6c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6Z'/%3E%3Ccircle cx='16.8' cy='9.6' r='2.2'/%3E%3Cpath d='M14.6 14.6c3.2 0 5.9 2.1 5.9 5h-4'/%3E%3C/svg%3E");
}

/* La baldosa vuelve a ser CSS: base.css ya la define en .sticker.
   El dibujo entra como fondo del <i>, centrado y a escala. */
.sticker > .ico{
  display:block; width:60%; height:60%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.sticker--corazon  > .ico{ background-image:var(--ico-corazon) }
.sticker--estrella > .ico{ background-image:var(--ico-estrella) }
.sticker--cohete   > .ico{ background-image:var(--ico-cohete) }
.sticker--saludo   > .ico{ background-image:var(--ico-saludo) }
.sticker--candado  > .ico{ background-image:var(--ico-candado) }
.sticker--carrito  > .ico{ background-image:var(--ico-carrito) }
.sticker--puzzle   > .ico{ background-image:var(--ico-puzzle) }
.sticker--personas > .ico{ background-image:var(--ico-personas) }

/* Sobre la baldosa azul (.sticker--azul) el dibujo azul desaparecería:
   ahí se invierte a crema, que es como se veía en el PNG original. */
.sticker--azul > .ico{ filter:brightness(0) invert(1) }

/* base.css apagaba la baldosa cuando dentro había un <img> (la traía el PNG).
   Ya no hay imágenes: se restituye la baldosa para TODOS por igual. */
.sticker:has(.ico){
  background:#f4efe6; border:2px solid #09090e; box-shadow:var(--sombra-dura);
  width:54px; height:54px; border-radius:16px;
}
.sticker--azul:has(.ico){ background:var(--azul) }

/* Emoji sueltos en el texto (FAQ, listas, chips): la familia de emoji ya
   entró en --f-text/--f-display; aquí sólo se les da su propia caja para que
   no hereden el interlineado del texto ni queden descentrados. */
.emo{
  font-family:var(--f-emoji);
  font-style:normal; line-height:1;
  display:inline-block; vertical-align:-.14em;
  font-size:1.06em;
}