/* Consejos al abrir (va con js/tips.js) — lenguaje v4: Noche plata, oro solo en lo que se toca. */
.tp{
  --tp-bg:#0C1020; --tp-ink:#ECEEF3; --tp-mut:#868B99; --tp-line:rgba(236,238,243,.12);
  --tp-gold:#C9A84C; --tp-gold-soft:#E6D3A0;
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1230;
  max-width:420px; margin:0 auto; box-sizing:border-box;
  display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center;
  padding:14px 40px 14px 14px; border-radius:18px;
  background:color-mix(in srgb, var(--tp-bg) 94%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--tp-line); box-shadow:0 18px 50px rgba(0,0,0,.55);
  color:var(--tp-ink); font:400 14px/1.45 "Inter",system-ui,sans-serif;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
}
.tp.on{ opacity:1; transform:none; pointer-events:auto; }
@media (min-width:900px){ .tp{ left:24px; right:auto; width:420px; margin:0; } }

.tp-eti{ margin:0 0 3px; font:500 10px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--tp-gold); }
.tp-tit{ margin:0 0 4px; font:400 21px/1.1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em; color:var(--tp-ink); }
.tp-txt{ margin:0; color:#B9BDC8; font-size:13.5px; }
.tp-txt b{ color:var(--tp-ink); font-weight:600; }
.tp-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:11px; }
.tp-si{ padding:9px 15px; border:0; border-radius:99px; background:var(--tp-gold-soft); color:#0B0D14; font:600 13px/1 "Inter",system-ui,sans-serif; cursor:pointer; }
.tp-si:hover{ background:#F0E2BA; }
.tp-no{ padding:6px 0; border:0; background:none; color:var(--tp-mut); font:400 12px/1 "Inter",system-ui,sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(134,139,153,.4); }
.tp-x{ position:absolute; top:8px; right:8px; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--tp-mut); cursor:pointer; }
.tp-x:hover{ background:rgba(255,255,255,.06); color:var(--tp-ink); }
.tp-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.tp :is(button):focus-visible{ outline:2px solid var(--tp-gold); outline-offset:2px; }

/* ── Escenario de la animación (96×96, bucle de 2,4 s) ── */
.tp-demo{ position:relative; width:96px; height:96px; border-radius:14px; overflow:hidden; background:#06080F; border:1px solid var(--tp-line); }
.tp-demo *{ box-sizing:border-box; }
.tp-lineas{ position:absolute; left:14px; right:14px; top:22px; display:grid; gap:9px; }
.tp-lineas i{ display:block; height:5px; border-radius:3px; background:rgba(236,238,243,.16); }
.tp-lineas i:nth-child(2){ width:82%; } .tp-lineas i:nth-child(3){ width:64%; } .tp-lineas i:nth-child(4){ width:74%; }
.tp-dedo{ position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(230,211,160,.85); box-shadow:0 0 0 0 rgba(230,211,160,.5); left:58px; top:24px; animation:tp-toque 2.4s ease-in-out infinite; }

/* escuchar: play + ondas */
.tp-play{ position:absolute; left:14px; top:34px; width:28px; height:28px; border-radius:50%; background:var(--tp-gold-soft); animation:tp-late 2.4s ease-in-out infinite; }
.tp-play::after{ content:""; position:absolute; left:11px; top:8px; border-left:9px solid #0B0D14; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.tp-ondas{ position:absolute; left:50px; right:12px; top:30px; height:36px; display:flex; align-items:center; gap:3px; }
.tp-ondas i{ flex:1; height:30%; border-radius:2px; background:var(--tp-gold); animation:tp-onda 1.2s ease-in-out infinite; }
.tp-ondas i:nth-child(2){ animation-delay:-.2s } .tp-ondas i:nth-child(3){ animation-delay:-.5s } .tp-ondas i:nth-child(4){ animation-delay:-.1s }
.tp-ondas i:nth-child(5){ animation-delay:-.7s } .tp-ondas i:nth-child(6){ animation-delay:-.35s } .tp-ondas i:nth-child(7){ animation-delay:-.9s }

/* compartir: se marca una línea y sale la tarjeta */
.tp-marca{ animation:tp-marca 2.4s ease-in-out infinite; }
[data-tip="compartir"] .tp-dedo{ top:30px; }
.tp-tarjeta{ position:absolute; left:16px; right:16px; bottom:10px; height:30px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,#1A1F33,#0C1020); border:1px solid rgba(201,168,76,.5); font:400 12px/1 "Instrument Serif",Georgia,serif; color:var(--tp-gold-soft); animation:tp-tarjeta 2.4s ease-in-out infinite; }
.tp-tarjeta b{ font-weight:400; }

/* buscar: se escribe y suben resultados */
.tp-caja{ position:absolute; left:10px; right:10px; top:12px; height:22px; border-radius:99px; border:1px solid var(--tp-line); padding:0 9px; display:flex; align-items:center; }
.tp-escribe{ display:inline-block; overflow:hidden; white-space:nowrap; border-right:1px solid var(--tp-gold); font:500 10px/1 "Inter",system-ui,sans-serif; color:var(--tp-ink); width:0; animation:tp-escribe 2.4s steps(8,end) infinite; }
.tp-sube{ top:46px; }
.tp-sube i{ opacity:0; animation:tp-sube 2.4s ease-out infinite; }
.tp-sube i:nth-child(1){ background:rgba(201,168,76,.7); }
.tp-sube i:nth-child(2){ animation-delay:.08s } .tp-sube i:nth-child(3){ animation-delay:.16s }

/* hermanos: un nodo abre tres ramas */
.tp-nodo{ position:absolute; left:20px; top:58px; width:10px; height:10px; border-radius:50%; background:var(--tp-gold); box-shadow:0 0 12px rgba(201,168,76,.7); }
.tp-rama{ position:absolute; left:25px; top:63px; }
.tp-rama i{ position:absolute; left:0; top:0; height:1.5px; width:0; background:linear-gradient(90deg,var(--tp-gold),rgba(201,168,76,.15)); transform-origin:0 50%; animation:tp-rama 2.4s ease-out infinite; }
.tp-rama i::after{ content:""; position:absolute; right:-3px; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--tp-gold-soft); }
.tp-rama i:nth-child(1){ transform:rotate(-38deg); } .tp-rama i:nth-child(2){ transform:rotate(-8deg); animation-delay:.1s } .tp-rama i:nth-child(3){ transform:rotate(22deg); animation-delay:.2s }

/* enfoque: cielo + minutos */
.tp-cielo i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; animation:tp-brilla 2.4s ease-in-out infinite; }
.tp-cielo i:nth-child(1){ left:14px; top:16px } .tp-cielo i:nth-child(2){ left:70px; top:12px; animation-delay:.5s } .tp-cielo i:nth-child(3){ left:80px; top:70px; animation-delay:1s }
.tp-cielo i:nth-child(4){ left:22px; top:76px; animation-delay:1.4s } .tp-cielo i:nth-child(5){ left:48px; top:20px; animation-delay:.8s }
.tp-reloj{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.tp-reloj b{ font:400 34px/1 "Instrument Serif",Georgia,serif; color:var(--tp-gold-soft); animation:tp-late 2.4s ease-in-out infinite; }
.tp-reloj span{ font:500 8px/1.6 "Geist Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--tp-mut); }

/* leer: la página se desliza */
.tp-pagina{ position:absolute; inset:10px 12px; border-radius:6px; background:#0E1220; animation:tp-pasa 2.4s ease-in-out infinite; }
.tp-pagina .tp-lineas{ left:10px; right:10px; top:12px; gap:7px; }
.tp-desliza{ top:60px; left:62px; animation:tp-desliza 2.4s ease-in-out infinite; }

/* velocidad: se elige una */
.tp-vel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 14px; }
.tp-vel span{ display:block; padding:4px 0; border-radius:99px; border:1px solid var(--tp-line); text-align:center; font:500 10px/1 "Geist Mono",ui-monospace,monospace; color:var(--tp-mut); animation:tp-elige 2.4s steps(1,end) infinite; }
.tp-vel span:nth-child(1){ animation-delay:-1.6s } .tp-vel span:nth-child(2){ animation-delay:-.8s }

/* devocionales: libro que se abre */
.tp-libro{ position:absolute; left:50%; top:50%; width:56px; height:40px; margin:-20px 0 0 -28px; perspective:200px; }
.tp-libro i{ position:absolute; top:0; width:28px; height:40px; background:#121729; border:1px solid rgba(201,168,76,.45); }
.tp-libro i:nth-child(1){ left:0; border-radius:4px 0 0 4px; transform-origin:100% 50%; animation:tp-abre 2.4s ease-in-out infinite; }
.tp-libro i:nth-child(2){ right:0; border-radius:0 4px 4px 0; background:repeating-linear-gradient(#121729 0 6px, rgba(236,238,243,.14) 6px 7px); }

@keyframes tp-toque{ 0%,15%{ transform:scale(1.4); opacity:0 } 30%{ transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(230,211,160,.5) } 45%{ box-shadow:0 0 0 10px rgba(230,211,160,0) } 60%,100%{ opacity:0 } }
@keyframes tp-late{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
@keyframes tp-onda{ 0%,100%{ height:22% } 50%{ height:95% } }
@keyframes tp-marca{ 0%,30%{ background:rgba(236,238,243,.16) } 38%,100%{ background:var(--tp-gold) } }
@keyframes tp-tarjeta{ 0%,45%{ opacity:0; transform:translateY(14px) scale(.9) } 58%,90%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes tp-escribe{ 0%{ width:0 } 45%,100%{ width:46px } }
@keyframes tp-sube{ 0%,50%{ opacity:0; transform:translateY(8px) } 65%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes tp-rama{ 0%,25%{ width:0 } 60%,90%{ width:52px } 100%{ width:52px; opacity:0 } }
@keyframes tp-brilla{ 0%,100%{ opacity:.15 } 50%{ opacity:.9 } }
@keyframes tp-pasa{ 0%,35%{ transform:none; opacity:1 } 60%{ transform:translateX(-90%); opacity:0 } 61%{ transform:translateX(60%); opacity:0 } 85%,100%{ transform:none; opacity:1 } }
@keyframes tp-desliza{ 0%,15%{ opacity:0; transform:none } 25%{ opacity:1 } 55%{ opacity:1; transform:translateX(-40px) } 65%,100%{ opacity:0; transform:translateX(-40px) } }
@keyframes tp-elige{ 0%{ color:var(--tp-mut); border-color:var(--tp-line); background:none } 33.3%{ color:#0B0D14; border-color:var(--tp-gold-soft); background:var(--tp-gold-soft) } 66.6%,100%{ color:var(--tp-mut); border-color:var(--tp-line); background:none } }
@keyframes tp-abre{ 0%,20%{ transform:rotateY(0) } 55%,85%{ transform:rotateY(-160deg) } 100%{ transform:rotateY(0) } }

@media (max-width:360px){ .tp{ grid-template-columns:72px 1fr; } .tp-demo{ width:72px; height:72px; transform-origin:0 0; } .tp-demo > *{ zoom:.75; } }
@media (prefers-reduced-motion:reduce){ .tp, .tp *{ animation:none !important; transition:none !important; } }

/* ── Consejos del lector ── */
.tp-ico{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-.15em; fill:none; stroke:var(--tp-gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tp-ico-h{ stroke-width:1.3; }
.tp-ico-h circle{ fill:var(--tp-gold); stroke:none; }
/* compartir: la barra con Copiar / Compartir que sale abajo */
.tp-barrita{ position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:4px; animation:tp-tarjeta 2.4s ease-in-out infinite; }
.tp-barrita span{ flex:1; padding:5px 0; border-radius:99px; border:1px solid var(--tp-line); background:#121729; text-align:center; font:600 8.5px/1 "Inter",system-ui,sans-serif; color:var(--tp-ink); }
.tp-barrita .tp-oro{ background:var(--tp-gold-soft); border-color:var(--tp-gold-soft); color:#0B0D14; }
/* guardar: el marcador se rellena al tocarlo */
.tp-marcador{ position:absolute; left:62px; top:58px; width:14px; height:18px; background:transparent; border:1.6px solid var(--tp-gold); border-bottom:0; clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); animation:tp-guarda 2.4s ease-in-out infinite; }
.tp-dedo-bm{ left:60px; top:58px; }
@keyframes tp-guarda{ 0%,32%{ background:transparent } 40%,90%{ background:var(--tp-gold) } 100%{ background:transparent } }

/* Aro dorado sobre el botón de verdad («Enséñamelo») */
.tp-aro{ position:fixed; z-index:1235; pointer-events:none; border-radius:14px; border:2px solid #E6D3A0; box-shadow:0 0 0 4px rgba(201,168,76,.18), 0 0 26px rgba(201,168,76,.55); opacity:0; transition:opacity .2s; }
.tp-aro.on{ opacity:1; animation:tp-aro 1.1s ease-in-out 3; }
@keyframes tp-aro{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
@media (prefers-reduced-motion:reduce){ .tp-aro{ animation:none !important; } }