/* ==========================================================================
   «Esta herramienta es gratis: sígueme» (29-sep-2026, petición de Erwan)
   Lo cargan la calculadora y el generador de QR con assets/js/seguir.js.
   Mismo aspecto que la bienvenida del texturizador (texturizador.css, .tx-dialogo
   y .tx-red), que tiene la suya propia. No bloquea nada: las normas de YouTube
   no dejan condicionar el acceso a suscribirse.
   ========================================================================== */
.e3d-seguir {
  width: min(460px, calc(100vw - 32px));
  padding: 26px 26px 22px;
  color: var(--ink);
  background: #141a21;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.e3d-seguir::backdrop { background: rgba(6, 9, 12, .72); backdrop-filter: blur(4px); }
.e3d-seguir[open] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; animation: e3d-seguir-aparece .25s var(--ease-out-fuerte); }
@keyframes e3d-seguir-aparece { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.e3d-seguir__cerrar { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 22px; line-height: 1; color: var(--ink-muted); border-radius: 50%; }
.e3d-seguir__cerrar:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.e3d-seguir__eti {
  justify-self: start;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgba(87, 177, 132, .16); box-shadow: inset 0 0 0 1px rgba(147, 216, 182, .35);
  color: var(--green-ink); font-size: 12.5px; font-weight: 600;
}
.e3d-seguir h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; padding-right: 30px; }
.e3d-seguir__texto { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: -6px; }
.e3d-seguir__redes { display: grid; gap: 8px; }
.e3d-red {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.e3d-red svg { width: 28px; height: 28px; flex: none; }
.e3d-red span { display: grid; gap: 1px; text-align: left; }
.e3d-red strong { font-size: 15.5px; font-weight: 600; }
.e3d-red small { font-size: 12.5px; opacity: .85; }
.e3d-red:hover { background: rgba(255, 255, 255, .09); }
.e3d-red:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.e3d-red--youtube { color: #fff; background: #e62117; border-color: transparent; box-shadow: 0 8px 22px rgba(230, 33, 23, .28); }
.e3d-red--youtube:hover { transform: translateY(-1px); background: #f4271c; box-shadow: 0 12px 28px rgba(230, 33, 23, .38); }
.e3d-red--instagram svg { color: #e1306c; }
.e3d-red--tiktok svg { color: #25f4ee; filter: drop-shadow(1.5px 1px 0 #fe2c55); }
.e3d-seguir__pie { display: grid; gap: 8px; justify-items: center; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.e3d-seguir__pie .btn { width: 100%; margin-top: 12px; white-space: normal; }
.e3d-seguir__ya { font-size: 13px; font-weight: 600; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Aviso pequeño tras generar el PDF o descargar el QR (no tapa nada, se cierra solo) */
.e3d-aviso-seguir {
  position: fixed; left: 50%; bottom: 20px; z-index: 900;
  display: flex; align-items: center; gap: 14px;
  width: min(560px, calc(100vw - 24px));
  padding: 12px 12px 12px 18px;
  color: var(--ink); background: #141a21;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 0);
  animation: e3d-aviso-sube .3s var(--ease-out-fuerte);
}
.e3d-aviso-seguir[hidden] { display: none; }
@keyframes e3d-aviso-sube { from { opacity: 0; transform: translate(-50%, 12px); } }
.e3d-aviso-seguir p { flex: 1; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.e3d-aviso-seguir p strong { color: var(--ink); font-weight: 600; }
.e3d-aviso-seguir__redes { display: flex; gap: 6px; flex: none; }
.e3d-aviso-seguir__redes a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.e3d-aviso-seguir__redes a:hover { background: rgba(255, 255, 255, .12); }
.e3d-aviso-seguir__redes a.e3d-red--youtube { background: #e62117; border-color: transparent; }
.e3d-aviso-seguir__redes svg { width: 20px; height: 20px; }
.e3d-aviso-seguir__cerrar { flex: none; width: 30px; height: 30px; font-size: 20px; line-height: 1; color: var(--ink-muted); border-radius: 50%; }
.e3d-aviso-seguir__cerrar:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
@media (max-width: 520px) {
  .e3d-aviso-seguir { flex-wrap: wrap; bottom: 12px; }
  .e3d-aviso-seguir p { flex: 1 1 calc(100% - 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .e3d-seguir[open], .e3d-aviso-seguir { animation: none; }
}
/* En móvil el aviso caería encima de los botones flotantes de YouTube e Instagram: se apartan mientras sale */
@media (max-width: 760px) {
  body.con-aviso-seguir .float-social { opacity: 0; visibility: hidden; }
}