/* =====================================================================
   MAGIA DIGITAL — Página "link en la bio" (/links)
   ---------------------------------------------------------------------
   No redefine la identidad visual: usa los mismos tokens, sombras,
   radios y curvas de transición que style.css (hoja base de la raíz).
   Contenido:
     1. Estructura mobile-first
     2. Elementos vivos (blob flotante, chispas)
     3. Cabecera (avatar con anillo pulsante, sticker, nombre)
      4. Botones enlazantes (elevación + chip, flecha y onda del CTA)
      4b. Opción de códigos QR (desplegable con dos pestañas)
      5. Footer mínimo
     6. Animaciones (keyframes)
     7. Responsive fino, reduced motion e impresión
   ===================================================================== */

/* ---------- 1. ESTRUCTURA MOBILE-FIRST ----------------------------- */
.lp {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* La crema del logotipo como papel de fondo: las tarjetas blancas
     flotan encima y la página se siente de la misma marca. */
  background: var(--crema);
}

.lp__main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.25rem, 1.6rem + 3vw, 4rem) 0;
  overflow: hidden;
  isolation: isolate;
}

.lp__wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  /* Sin esto, la medida intrínseca (min-width:auto en un flex item) manda y
     la columna nunca baja de su ancho mínimo: en móvil el contenido se salía
     por la derecha y quedaba cortado. min-width:0 deja que baje al viewport. */
  min-width: 0;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, .9rem + 1.6vw, 2rem);
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
  text-align: center;
}

/* ---------- 2. ELEMENTOS VIVOS -------------------------------------- */

/* Mismo blob turquesa del hero, con deriva lenta (da sensación de calma) */
.lp__blob {
  width: min(90vw, 420px);
  right: -18%;
  top: -6%;
  opacity: .9;
  animation: lpFloat 16s ease-in-out infinite;
}

/* Chispas: misma estrella del sprite del sitio. Dos turquesas y un
   fucsia (los dos acentos que ya usa el sitio para detalles) */
.sparkle {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  animation: lpTwinkle 2.8s ease-in-out infinite;
}
.sparkle--1 { width: 34px; top: 7%;  left: 9%;  color: var(--acento); }
.sparkle--2 { width: 22px; top: 20%; right: 11%; color: var(--brillo); animation-delay: .9s; }
.sparkle--3 { width: 26px; bottom: 15%; left: 7%; color: var(--acento); animation-delay: 1.7s; }

/* ---------- 3. CABECERA -------------------------------------------- */
.lp__head { display: grid; justify-items: center; gap: .35rem; }

/* Barra superior: atrás (izq.) + compartir (der.). Ocupa todo el ancho
   de la columna y mantiene el ritmo vertical del resto (.lp__wrap gap). */
.lp__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Botón superior con texto: mismo diseño anterior de .lp__icon-btn —
   borde 2px, radio SM, sombra dura y hover turquesa con elevación. */
.lp__icon-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;
  padding: .6rem .85rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--negro);
  background: var(--blanco);
  color: var(--negro);
  box-shadow: var(--sombra-dura);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    background-color var(--transicion),
    color var(--transicion);
}
.lp__icon-btn svg { width: 20px; height: 20px; flex: none; }
.lp__icon-btn:hover {
  background: var(--acento);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--negro);
}
.lp__icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--negro);
}
.lp__icon-btn:focus-visible {
  background: var(--acento);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--negro);
}
/* Estado de éxito al copiar el enlace (se activa vía .is-ok desde JS) */
.lp__icon-btn.is-ok {
  background: var(--acento);
  color: var(--negro);
}

/* Aviso flotante "Enlace copiado": pastilla índigo con borde turquesa,
   misma tipografía y radios del sitio. El texto lo pone el JS. */
.lp__toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: min(92vw, 420px);
  transform: translate(-50%, 12px);
  background: var(--negro);
  color: var(--blanco);
  border: 2px solid var(--negro);
  border-top: 4px solid var(--acento);
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-md);
  padding: .6rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}
.lp__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Etiqueta sticker: inclinación de la marca con balanceo muy sutil */
.sticker--lp {
  transform-origin: 50% 90%;
  margin-bottom: .9rem;
  animation: lpWobble 5s ease-in-out infinite;
}

/* Avatar: el icono de la marca (cuadro índigo con el pincel mágico)
   recortado en círculo, con "ping" de marca que se repite cada 2.8 s
   para no cansar la vista. El padding interior mantiene el arte
   separado del borde del círculo y el centrado es óptico. */
.lp__avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--indigo);
  border: 2px solid var(--negro);
  margin: 0 auto .9rem;
  transition: transform var(--transicion);
  animation: lpRing 2.8s ease-out infinite, lpIn .5s cubic-bezier(.2, .7, .3, 1) both;
}
.lp__avatar:hover { transform: scale(1.05) rotate(-2deg); }

.lp__name {
  font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.3rem);
  letter-spacing: -.03em;
  margin-bottom: .35rem;
}

/* Marcador turquesa: misma técnica de .hl--marker del sitio (7.9:1) */
.lp__tag {
  font-size: var(--fs-lead);
  color: var(--gris-medio);
  max-width: 40ch;
  margin: 0;
}
/* Palabra destacada: mini-sticker de marca (fondo turquesa, borde negro,
   sombra dura e inclinación) en lugar del marcador amarillo del <mark>.
   Poppins 800 la hace llamativa; negro sobre turquesa = 7.9:1 (AA). */
.lp__tag .hl--marker {
  display: inline-block;
  font-family: var(--font-titulo);
  font-weight: 800;
  color: var(--negro);
  background: var(--acento);
  border: 2px solid var(--negro);
  border-radius: .4rem;
  padding: .02em .45em;
  box-shadow: 3px 3px 0 var(--negro);
  transform: rotate(-2deg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.lp__tag:hover .hl--marker {
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 4px 4px 0 var(--negro);
}

/* ---------- 4. BOTONES --------------------------------------------- */
.lp__links { display: grid; gap: .85rem; }

/* Cada nivel es un contenedor flex/grid: sin min-width:0 su medida
   intrínseca (el texto en una sola línea de los <small>) empuja la columna
   más allá del viewport y el borde derecho se recortaba. */
.lp__wrap > *,
.lp__links > *,
.lp-cta > *,
.lp-qr > * { min-width: 0; }

/* Envoltorio del CTA: permite que la insignia "Más rápido" flote
   sobre el botón y que el conjunto se eleve junto con él */
.lp-cta { position: relative; }
.lp-cta .lp-btn { z-index: 1; }

.lp-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .9rem 1rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--negro);
  background: var(--blanco);
  color: var(--negro);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--sombra-dura);
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    background-color var(--transicion),
    color var(--transicion);
}

/* Elevación: la misma sombra dura de la marca, pero creciendo y
   levantándose un poco más que un botón normal del sitio */
.lp-btn:hover {
  transform: translate(-2px, -4px) scale(1.015);
  box-shadow: 8px 8px 0 var(--negro);
}
/* Al mantener pulsado se hunde (mismo gesto que .btn--primary) */
.lp-btn:active {
  transform: translate(3px, 2px) scale(.99);
  box-shadow: 1px 1px 0 var(--negro);
}
/* Teclado: mismo efecto de elevación que el hover */
.lp-btn:focus-visible {
  transform: translate(-2px, -3px);
  box-shadow: 7px 7px 0 var(--negro);
}

/* Chip del ícono: gris -> turquesa y giro leve al hacer hover */
.lp-btn__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gris-claro);
  color: var(--negro);
  transition: background-color var(--transicion), transform var(--transicion);
}
.lp-btn__ico svg { width: 22px; height: 22px; transition: transform var(--transicion); }
.lp-btn:hover .lp-btn__ico { background: var(--acento); transform: scale(1.08); }
.lp-btn:hover .lp-btn__ico svg { transform: rotate(-8deg); }
.lp-btn:active .lp-btn__ico { transform: scale(.94); }

/* Texto: desplazamiento mínimo que acompaña a la flecha */
.lp-btn__txt { display: block; min-width: 0; }
.lp-btn__txt strong {
  display: block;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  transition: transform var(--transicion);
}
.lp-btn__txt small {
  display: block;
  font-size: .82rem;
  color: var(--gris-medio);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transicion);
}
.lp-btn:hover .lp-btn__txt strong { transform: translateX(3px); }
.lp-btn:hover .lp-btn__txt small { color: var(--negro-70); }

/* Correo: son dos direcciones largas. Se permite el salto de línea para que
   no se trunquen con "…" (en pantallas angostas) ni empujen el ancho mínimo
   de la columna fuera del viewport. */
.lp-btn--mail .lp-btn__txt small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
/* En pantallas angostas la flecha (invisible hasta el hover) solo robaba
   ancho al texto: se oculta para que cada correo quepa en su propia línea
   y no se parta a la mitad de la dirección. */
@media (max-width: 479px) {
  .lp-btn--mail .lp-btn__arrow { display: none; }
}

/* Flecha que entra deslizándose desde la izquierda al hacer hover */
.lp-btn__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.lp-btn:hover .lp-btn__arrow,
.lp-btn:focus-visible .lp-btn__arrow { opacity: 1; transform: none; }

/* CTA principal de WhatsApp: mismo turquesa que .btn--primary */
.lp-btn--cta {
  background: var(--acento);
  padding: 1.05rem 1rem;
}
.lp-btn--cta .lp-btn__ico { background: rgba(255, 255, 255, .55); }
.lp-btn--cta:hover .lp-btn__ico { background: var(--blanco); }
.lp-btn--cta .lp-btn__txt small { color: var(--negro-70); }

/* Destello (sheen) que cruza el CTA de forma continua, como un
   brillo sobre el turquesa. Solo decorativo: pointer-events none. */
.lp-btn__wave {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.lp-btn__wave::after {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: lpSheen 3.8s ease-in-out infinite;
}

/* Sitio web principal: segundo destino propio de la marca. Tiene su propio
   color de énfasis (índigo con texto claro, 15:1) y su propio efecto: una
   cinta de marca (cian -> magenta -> violeta) que fluye por la base del
   botón, en lugar del destello blanco que barre el CTA de WhatsApp. */
.lp-btn--web {
  background: var(--indigo);
  color: var(--blanco);
  overflow: hidden;
}
.lp-btn--web .lp-btn__ico { background: rgba(255, 255, 255, .16); color: var(--blanco); }
.lp-btn--web .lp-btn__txt small { color: rgba(255, 255, 255, .82); }
/* Al interactuar sube a violeta de marca (texto blanco: 5.3:1) y la cinta
   se ensancha; el chip pasa a turquesa por la regla genérica de hover. */
.lp-btn--web:hover,
.lp-btn--web:focus-visible { background: var(--violeta); }
.lp-btn--web:hover .lp-btn__txt small,
.lp-btn--web:focus-visible .lp-btn__txt small { color: var(--blanco); }
.lp-btn--web:active { background: var(--indigo); }
.lp-btn--web:active .lp-btn__ribbon { height: 12px; }

/* Cinta de marca animada en la base del botón */
.lp-btn__ribbon {
  position: absolute;
  inset: auto 0 0 0;
  height: 7px;
  background: var(--cinta);
  background-size: 220% auto;
  pointer-events: none;
  transition: height var(--transicion);
  animation: lpRibbon 5.5s linear infinite;
}
.lp-btn--web:hover .lp-btn__ribbon,
.lp-btn--web:focus-visible .lp-btn__ribbon { height: 12px; }

/* Insignia rotada "Más rápido": mismo lenguaje que .sticker--tag.
   Flota y late suave; con el hover del CTA hace un pequeño "pop" */
.lp-btn__badge {
  position: absolute;
  top: -12px;
  right: 12px;
  z-index: 2;
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--r-pill);
  padding: .22rem .65rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, .25);
  animation: lpBob 4s ease-in-out infinite;
  transition: background-color var(--transicion), color var(--transicion);
}
.lp-cta:hover .lp-btn__badge {
  background: var(--blanco);
  color: var(--negro);
  box-shadow: 3px 3px 0 var(--negro);
  animation: lpPop .45s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 4b. OPCIONES DE CÓDIGOS QR ----------------------------- */
/* Desplegable al final de la lista: el botón (.lp-btn) abre un panel
   con dos pestañas (QR a la página de enlaces y QR al sitio principal),
   cada una con su propio botón de descarga PNG. Mismo lenguaje visual:
   borde 2px, radio SM, sombra dura y turquesa como acento. */
.lp-qr { display: grid; gap: .6rem; }

/* El lanzador es un <button>: se anulan los estilos por defecto para
   que luzca idéntico a los demás .lp-btn de la lista */
button.lp-btn {
  appearance: none;
  font-family: var(--font-cuerpo);
  text-align: left;
  cursor: pointer;
}

/* Flecha del desplegable: siempre visible y gira 90° al abrirse.
   Gana a las reglas de hover/touch gracias a la especificidad extra */
.lp-btn--qr .lp-btn__arrow,
.lp-btn--qr:hover .lp-btn__arrow,
.lp-btn--qr:focus-visible .lp-btn__arrow {
  opacity: 1;
  transform: none;
  transition: transform var(--transicion);
}
.lp-qr.is-open .lp-btn--qr .lp-btn__arrow,
.lp-qr.is-open .lp-btn--qr:hover .lp-btn__arrow,
.lp-qr.is-open .lp-btn--qr:focus-visible .lp-btn__arrow {
  transform: rotate(90deg);
}

/* Panel: mismo marco que los botones, con el interior en gris claro
   para separar el área del QR del fondo blanco de la página */
.lp-qr__panel {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--negro);
  background: var(--gris-claro);
  box-shadow: var(--sombra-dura);
  text-align: center;
  animation: lpIn .4s cubic-bezier(.2, .7, .3, 1) both;
}

/* Pestañas: píldora segmentada; la activa se eleva en turquesa */
.lp-qr__tabs {
  display: flex;
  gap: .35rem;
  padding: .3rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--negro);
  background: var(--blanco);
}
.lp-qr__tab {
  flex: 1;
  min-height: 40px;
  padding: .45rem .6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--negro-70);
  font-family: var(--font-titulo);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--transicion),
    color var(--transicion),
    box-shadow var(--transicion);
}
.lp-qr__tab:hover { background: var(--gris-claro); color: var(--negro); }
.lp-qr__tab.is-on {
  background: var(--acento);
  color: var(--negro);
  box-shadow: 2px 2px 0 var(--negro);
}
.lp-qr__tab:focus-visible { outline-offset: 2px; }

/* Vista del QR: marco blanco con sombra dura, como las tarjetas */
.lp-qr__view { display: grid; justify-items: center; gap: .7rem; }
.lp-qr__frame {
  display: grid;
  place-items: center;
  padding: .65rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--negro);
  background: var(--blanco);
  box-shadow: var(--sombra-dura);
}
/* Los píxeles del QR se ven nítidos, sin suavizado */
.lp-qr__frame svg {
  width: clamp(158px, 44vw, 204px);
  height: auto;
  image-rendering: pixelated;
}
.lp-qr__cap {
  margin: 0;
  font-size: .82rem;
  color: var(--gris-medio);
  max-width: 34ch;
}

/* ---------- 5. FOOTER MÍNIMO --------------------------------------- */
/* Misma estética que el footer del sitio: cinta de marca + índigo */
.lp__foot {
  background: var(--negro);
  color: rgba(255, 255, 255, .74);
  border-top: 4px solid var(--acento);
  padding: 1.1rem 1.25rem;
  text-align: center;
  font-size: .84rem;
}
.lp__foot p { margin: 0; }
.lp__foot strong {
  font-family: var(--font-titulo);
  font-weight: 700;
  color: var(--blanco);
  transition: color var(--transicion);
}
.lp__foot:hover strong { color: var(--acento); }

/* Foco turquesa sobre fondos oscuros (consistente con el sitio) */
.lp__foot :focus-visible { outline-color: var(--acento); }

/* ---------- 6. ANIMACIONES DE ENTRADA ------------------------------ */
/* Aparecen en cascada al cargar (respeta prefers-reduced-motion) */
.lp__topbar,
.lp__head,
.lp__links > *,
.lp__foot { animation: lpIn .5s cubic-bezier(.2, .7, .3, 1) both; }
.lp__topbar { animation-delay: 0s; }
.lp__head { animation-delay: .05s; }
.lp__links > *:nth-child(1) { animation-delay: .14s; }
.lp__links > *:nth-child(2) { animation-delay: .20s; }
.lp__links > *:nth-child(3) { animation-delay: .26s; }
.lp__links > *:nth-child(4) { animation-delay: .32s; }
.lp__links > *:nth-child(5) { animation-delay: .38s; }
.lp__links > *:nth-child(6) { animation-delay: .44s; }
.lp__links > *:nth-child(7) { animation-delay: .50s; }
.lp__links > *:nth-child(8) { animation-delay: .56s; }
.lp__links > *:nth-child(9) { animation-delay: .62s; }
.lp__foot { animation-delay: .68s; }

/* ---------- 7. KEYFRAMES -------------------------------------------- */
@keyframes lpIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* Deriva lenta del blob (sin fill: vuelve a su posición base) */
@keyframes lpFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 16px) rotate(4deg); }
}
/* Chispas: aparecen, crecen y se desvanecen */
@keyframes lpTwinkle {
  0%, 100% { opacity: .15; transform: scale(.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(12deg); }
}
/* Balanceo del sticker */
@keyframes lpWobble {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(-.5deg); }
}
/* Anillo "ping" del avatar (turquesa de marca) */
@keyframes lpRing {
  0% { box-shadow: var(--sombra-dura), 0 0 0 0 rgba(32, 183, 218, .6); }
  60%, 100% { box-shadow: var(--sombra-dura), 0 0 0 16px rgba(32, 183, 218, 0); }
}
/* Insignia flotando */
@keyframes lpBob {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-3px); }
}
/* Pop de la insignia al hacer hover en el CTA */
@keyframes lpPop {
  0% { transform: rotate(3deg) scale(1); }
  45% { transform: rotate(-3deg) scale(1.18); }
  100% { transform: rotate(3deg) scale(1); }
}
/* Destello que cruza el CTA */
@keyframes lpSheen {
  0% { left: -55%; }
  55%, 100% { left: 115%; }
}
/* Cinta de marca que fluye por la base del botón del sitio web */
@keyframes lpRibbon {
  0% { background-position: 110% center; }
  60%, 100% { background-position: -110% center; }
}

/* ---------- 8. RESPONSIVE ------------------------------------------ */

/* Pantallas medianas: el texto secundario ya no necesita truncarse */
@media (min-width: 480px) {
  .lp-btn { padding: 1rem 1.15rem; }
  .lp-btn__txt small { white-space: normal; }
}

/* Escritorio: se mantiene la columna centrada (los accesos suelen
   abrirse desde el móvil), solo crece el avatar */
@media (min-width: 768px) {
  .lp__avatar { width: 112px; height: 112px; padding: 7px; }
  .sparkle--1 { width: 44px; }
  .sparkle--2 { width: 28px; }
  .sparkle--3 { width: 32px; }
}

/* Dispositivos táctiles: la elevación vive en el momento de tocar */
@media (hover: none) {
  .lp-btn:hover { transform: none; box-shadow: var(--sombra-dura); }
  .lp-btn:hover .lp-btn__arrow { opacity: 0; transform: translateX(-10px); }
  .lp-btn:active { transform: translateY(-3px) scale(1.01); box-shadow: 7px 7px 0 var(--negro); }
  .lp__icon-btn:hover { transform: none; box-shadow: var(--sombra-dura); background: var(--blanco); }
  .lp__icon-btn:active { transform: translate(-1px, -2px); box-shadow: 5px 5px 0 var(--negro); background: var(--acento); }
  /* La flecha del desplegable QR sigue visible y gira al abrirse */
  .lp-btn--qr .lp-btn__arrow,
  .lp-btn--qr:hover .lp-btn__arrow { opacity: 1; transform: none; }
  .lp-qr.is-open .lp-btn--qr .lp-btn__arrow,
  .lp-qr.is-open .lp-btn--qr:hover .lp-btn__arrow { transform: rotate(90deg); }
}

/* Accesibilidad: sin movimiento — se apagan todos los loops */
@media (prefers-reduced-motion: reduce) {
  .lp__blob,
  .sparkle,
  .sticker--lp,
  .lp__avatar,
  .lp-btn__badge,
  .lp-btn__ribbon,
  .lp-btn__wave::after { animation: none !important; }
  .lp__avatar { box-shadow: var(--sombra-dura); }
}

/* Impresión: sin decoración */
@media print {
  .lp__blob, .sparkle, .lp-btn__wave, .lp-btn__ribbon, .lp-btn__arrow, .lp-btn__badge, .lp__topbar, .lp__toast { display: none !important; }
}

/* ---------- 9. CRÉDITO BYGROW · shimmer premium --------------------
   Degradado de marca animado + entrada suave al aparecer en pantalla.
   Sin JS: la entrada usa scroll-driven animation (mejora progresiva);
   si el navegador no la soporta, el crédito se ve estático con shimmer. */
.bygrow {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--acento) 25%, #ffffff 50%, var(--acento) 75%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bygrow-shine 4.5s ease-in-out infinite;
}
@keyframes bygrow-shine {
  0% { background-position: 110% center; }
  60%, 100% { background-position: -110% center; }
}
@keyframes bygrow-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .bygrow-credit {
    animation: bygrow-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bygrow, .bygrow-credit { animation: none; }
}