/* Efectos compartidos (ver fx.js). Todo se apaga con prefers-reduced-motion. */

/* Barra de progreso */
.fx-progress {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--fx-accent, #15d100); transform-origin: left; transform: scaleX(0); pointer-events: none;
}
.mode-estratega { --fx-accent: #3d86ff; }

/* Cursor propio */
.fx-cursor-on, .fx-cursor-on a, .fx-cursor-on button, .fx-cursor-on summary, .fx-cursor-on video { cursor: none; }
.fx-cursor-dot, .fx-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%;
  mix-blend-mode: difference;
}
.fx-cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.fx-cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff;
  display: grid; place-items: center; transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s;
}
.fx-cursor-ring span {
  font: 700 11px/1 "aether", Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s;
}
.fx-cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.fx-cursor-ring.has-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #fff; mix-blend-mode: normal; }
.fx-cursor-ring.has-label span { opacity: 1; }
.fx-cursor-ring.has-emoji { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.fx-cursor-ring.has-emoji span { display: grid; justify-items: center; gap: 5px; }
.fx-cursor-ring.has-emoji span::before { content: attr(data-emoji); font-size: 34px; line-height: 1; letter-spacing: 0; }
.fx-cursor-emoji .fx-cursor-dot { opacity: 0; }
.fx-cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.fx-cursor-out .fx-cursor-dot, .fx-cursor-out .fx-cursor-ring { opacity: 0; }
@media (hover: none), (pointer: coarse) { .fx-cursor-dot, .fx-cursor-ring { display: none; } }
/* Con una ventana abierta fx.js saca .fx-cursor-on y vuelve el cursor del sistema */
:root:not(.fx-cursor-on) .fx-cursor-dot, :root:not(.fx-cursor-on) .fx-cursor-ring { opacity: 0; }
dialog :is(a, button) { cursor: pointer; }

/* Botones magnéticos: vuelven suave a su lugar */
.pill, .btn, .door__go, .topbar__cta, .btn-black, .crosslink, [data-magnet] { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

/* Tilt 3D con brillo */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; position: relative;
}
[data-tilt].is-tilting { transition: transform .08s linear; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 45%);
}
[data-tilt].is-tilting::after { opacity: 1; }

/* Portada: el corte entre los dos Tomás sigue al mouse */
.chooser.is-fluid .door { flex: none; transition: none; }
.chooser.is-fluid .door--influencer { width: var(--split, 50%); }
.chooser.is-fluid .door--estratega { width: calc(100% - var(--split, 50%)); }
.chooser.is-fluid .door:hover, .chooser.is-fluid .door:focus-visible { flex-grow: 0; }
.door__title { display: block; }
.door__title .word { display: inline-block; white-space: nowrap; }
.door__title .ch { display: inline-block; animation: fx-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 35ms + 150ms); }
@keyframes fx-rise { from { transform: translateY(70%) rotate(8deg); opacity: 0; } }
.chooser__divider {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--split, 50%); width: 0; pointer-events: none;
  border-left: 2px solid rgba(255, 255, 255, .7);
}
.chooser__divider::after {
  content: "↔"; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #000; font: 700 20px/1 Helvetica, sans-serif;
}
@media (max-width: 900px) { .chooser__divider { display: none; } }

/* Banda gigante de texto */
.fx-band { overflow: hidden; padding-block: clamp(14px, 2vw, 24px); background: var(--fx-band-bg, #15d100); color: #000; border-block: 2px solid #000; }
.fx-band--outline { background: #000; color: transparent; -webkit-text-stroke: 1.5px #fff; }
.fx-band--blue { background: #0057e1; color: #fff; }
.fx-band__track {
  display: flex; width: max-content; white-space: nowrap; will-change: transform;
  font: 700 clamp(44px, 9vw, 130px)/1 "Techna Sans", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: -.01em;
}
.fx-band__track span { padding-right: .5em; }
.fx-band__track i { font-style: normal; display: inline-block; padding-right: .5em; }
.fx-band + .fx-band { margin-top: -2px; }
.mode-influencer .fx-band { padding-block: clamp(8px, 1vw, 12px); }
.mode-influencer .fx-band__track { font-size: clamp(26px, 4.4vw, 60px); }

/* Pared de stickers */
.sticker-wall {
  position: relative; height: clamp(420px, 52vw, 620px); margin-top: 28px; overflow: hidden; touch-action: pan-y;
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .14) 1px, transparent 0) 0 0 / 22px 22px,
    #f3f2f0;
  border-radius: 24px;
}
.sticker {
  position: absolute; top: 0; left: 0; width: clamp(110px, 13vw, 170px);
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)) rotate(var(--r, 0deg));
  transition: transform .6s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s;
  background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, .08), 0 8px 18px rgba(0, 0, 0, .1);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.sticker img { width: 100%; height: auto; aspect-ratio: 227 / 126; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.sticker.is-dragging { transition: none; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); cursor: grabbing; }
.sticker-wall__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 999;
  background: rgba(255, 255, 255, .92); padding: 6px 6px 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  display: flex; gap: 10px; align-items: center; pointer-events: none;
  font-size: 14px; color: #595959; white-space: nowrap;
}
.sticker-wall__hint button { pointer-events: auto; }
.btn-ghost {
  border: 1.5px solid #000; background: #fff; color: #000; border-radius: 999px; padding: 8px 14px;
  font: 700 12px/1 "aether", Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.btn-ghost:hover { background: #000; color: #fff; }

@media (max-width: 560px) {
  .sticker-wall { height: 640px; }
  .sticker { width: 92px; padding: 5px; border-radius: 12px; }
}

/* Recortes de prensa torcidos que se enderezan */
.press__grid .card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.press__grid .card:nth-child(4n+1) { transform: rotate(-1.6deg); }
.press__grid .card:nth-child(4n+2) { transform: rotate(1.2deg); }
.press__grid .card:nth-child(4n+3) { transform: rotate(.8deg); }
.press__grid .card:nth-child(4n+4) { transform: rotate(-1deg); }
.press__grid .card:hover { transform: rotate(0) scale(1.03); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); z-index: 1; }

/* Foco de luz y grilla tipo plano en el hero del estratega */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx, 70%) var(--my, 20%), rgba(61, 134, 255, .45), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 48px 48px;
}

/* Hero influencer: título que respira en verde al pasar */
.hero h1 .hl, .hero h1 { transition: letter-spacing .4s ease; }
.hero h1:hover { letter-spacing: .01em; }

.fx-reduced .fx-band__track { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .door__title .ch { animation: none; }
  .sticker, [data-tilt], .press__grid .card { transition: none; }
}