/* =========================================================
   EFECTO HOLOGRÁFICO (iridiscente) — solo en secciones oscuras.
   El reflejo cambia con el scroll: holograma.js escribe --holo-p
   (de 0 a 1) en cada elemento con [data-holo].
   ========================================================= */

:root{
  --holo-1: #F4B6D6;  /* rosa */
  --holo-2: #A9EBD3;  /* menta */
  --holo-3: #C8BFFA;  /* lavanda */
  --holo-4: #FFE9A3;  /* amarillo */
  --holo-5: #9FE3EC;  /* aguamarina */
  --holo-sombra: 0 10px 22px rgba(0,0,0,.35);
}

/* Texto iridiscente (cifras destacadas) */
.holo-texto{
  background-image:linear-gradient(115deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-5), var(--holo-2), var(--holo-1));
  background-size:300% 100%;
  background-position:calc((var(--holo-p, .5) + var(--holo-desfase, 0)) * 100%) 50%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Pegatina ondulada con texto circular */
.pegatina{
  position:absolute; z-index:2; width:clamp(104px, 11vw, 140px); aspect-ratio:1;
  color:var(--ink); pointer-events:none;
  /* Además del reflejo, la pegatina gira unos grados según el scroll */
  transform:rotate(calc(var(--peg-giro, 8deg) + (var(--holo-p, .5) - .5) * 28deg));
  filter:drop-shadow(var(--holo-sombra));
}
.pegatina svg{ display:block; width:100%; height:100%; }
.pegatina__texto{ font-family:var(--f-head); font-weight:800; font-size:14px; letter-spacing:.05em; }