/* ============================================================================
   GESTOS — los recursos graficos del pack de rediseno.

   Lo que le da personalidad a la direccion de arte, mas alla del color:
     · una palabra subrayada o resaltada con rotulador
     · notas a mano, ligeramente giradas, como pegadas encima
     · azulejos de icono redondeados en los tres acentos
     · numeros de paso en circulo
     · la maqueta de movil con la pantalla real dentro

   TODO ES CSS Y SVG. Ni una imagen, ni una tipografia mas: el trazo de
   rotulador es un degradado y la nota a mano es una caja girada. Un PNG de
   subrayado se ve borroso al ampliar y no se adapta al ancho de la palabra.
   ========================================================================= */

/* ── Rotulador ──────────────────────────────────────────────────────────── */

/* Resaltado: la palabra sobre una mancha de color, como en «más tranquila». */
.rotulador {
  background: linear-gradient(104deg,
    transparent .3em, var(--no-lima) .3em, var(--no-lima) calc(100% - .25em), transparent calc(100% - .25em));
  padding: 0 .28em .06em;
  /* El borde irregular: dos radios distintos arriba y abajo. */
  border-radius: .35em .6em .4em .5em / .9em .5em .9em .4em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  color: var(--no-tinta-pauta);
}
.rotulador-rosa { background-image: linear-gradient(104deg,
  transparent .3em, var(--no-rosa-pauta) .3em, var(--no-rosa-pauta) calc(100% - .25em), transparent calc(100% - .25em)); }

/* Subrayado suelto, del ancho de la palabra, un poco torcido. */
.subrayado { position: relative; white-space: nowrap; }
.subrayado::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: -.22em;
  height: .2em; border-radius: 50%;
  background: var(--no-lima);
  transform: rotate(-1.2deg);
}

/* ── Nota a mano ────────────────────────────────────────────────────────── */
.nota {
  display: inline-block;
  background: var(--no-rosa-pauta); color: var(--no-tinta-pauta);
  padding: var(--no-e3) var(--no-e4);
  border-radius: var(--no-radio-s);
  font-weight: 600; line-height: 1.3;
  max-width: 15rem;
  transform: rotate(-2.4deg);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.nota-lima    { background: var(--no-lima); }
.nota-violeta { background: var(--no-violeta); color: #FFFFFF; }
.nota-derecha { transform: rotate(2.1deg); }

/* ── Azulejos de icono ──────────────────────────────────────────────────── */
.azulejo {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--no-violeta-suave); color: var(--no-violeta-texto);
}
.azulejo-lima    { background: var(--no-lima);       color: var(--no-tinta-pauta); }
.azulejo-rosa    { background: var(--no-rosa-pauta); color: var(--no-tinta-pauta); }
.azulejo-violeta { background: var(--no-violeta);    color: #FFFFFF; }
.azulejo svg { width: 26px; height: 26px; }

/* ── Numero de paso ─────────────────────────────────────────────────────── */
.numero-paso {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  font-weight: 700; font-size: 1.15rem; line-height: 1;
  background: var(--no-lima); color: var(--no-tinta-pauta);
}
.numero-violeta { background: var(--no-violeta); color: #FFFFFF; }
.numero-rosa    { background: var(--no-rosa-pauta); color: var(--no-tinta-pauta); }

/* ── Maqueta de movil ───────────────────────────────────────────────────────
   Marco de telefono con una captura REAL de la aplicacion dentro. Las del pack
   son ilustraciones; estas se hacen con `npm run capturas`, que abre la
   aplicacion de verdad y la fotografia. Una maqueta dibujada envejece el dia
   que cambia una pantalla, y ademas ensena algo que el producto no hace.    */
.movil {
  position: relative; margin: 0;
  width: 100%; max-width: 280px;
  aspect-ratio: 9 / 19.5;
  background: #0A0A0C;
  border-radius: 38px;
  padding: 9px;
  box-shadow: 0 0 0 2px #2A2A31, 0 26px 60px rgba(0,0,0,.45);
}
.movil img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; display: block; }
/* La isla del altavoz, que es lo que hace que se lea como un telefono. */
.movil::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 22px; border-radius: 999px; background: #0A0A0C; z-index: 1;
}