/* Efectos dinámicos con tema óptico. Todo respeta prefers-reduced-motion. */
@property --pupila { syntax: '<length>'; inherits: false; initial-value: 0px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Intro: carta de agudeza ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--blanco);
  display: grid; place-items: center; cursor: pointer;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--pupila), #000 calc(var(--pupila) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--pupila), #000 calc(var(--pupila) + 1px));
}
.intro.abrir { animation: pupila .85s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes pupila { to { --pupila: 150vmax; } }
body.con-intro { overflow: hidden; }
.intro__carta { text-align: center; font-weight: 700; color: var(--negro); line-height: 1.15; }
.intro__fila, .intro__logo {
  filter: blur(14px); opacity: 0;
  animation: enfocar .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--t) * 180ms + 120ms);
}
.intro__fila { letter-spacing: 0.32em; margin-right: -0.32em; }
.intro__fila:nth-child(1) { font-size: 92px; }
.intro__fila:nth-child(2) { font-size: 58px; }
.intro__fila:nth-child(3) { font-size: 38px; }
.intro__fila:nth-child(4) { font-size: 24px; }
.intro__logo { font-size: 21px; letter-spacing: -0.02em; margin-top: 28px; }
@keyframes enfocar { 60% { opacity: 1; } to { filter: blur(0); opacity: 1; } }
.intro__dato, .intro__saltar {
  position: absolute; bottom: 32px; font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--piedra);
}
.intro__dato { left: 50%; transform: translateX(-50%); }
.intro__dato b { color: var(--negro); font-weight: 500; }
.intro__saltar { right: 24px; }

/* ---------- Transición iris entre vistas ---------- */
:root { --vx: 50vw; --vy: 50vh; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: iris .62s cubic-bezier(.7,0,.2,1); }
@keyframes iris {
  from { clip-path: circle(0 at var(--vx) var(--vy)); }
  to { clip-path: circle(150vmax at var(--vx) var(--vy)); }
}

/* Foto del héroe: flota y se inclina hacia el cursor */
.heroe__foto img { animation: flotar 6s ease-in-out infinite; }
@keyframes flotar { 50% { translate: 0 -10px; } }

/* ---------- Cinta ---------- */
.cinta { overflow: hidden; border-bottom: 1px solid var(--linea); background: var(--blanco); }
.cinta__pista { display: flex; width: max-content; will-change: transform; }
.cinta__pista span {
  display: inline-flex; align-items: center; gap: 22px; padding: 15px 11px;
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hierro); white-space: nowrap;
}
.cinta__pista span b { font-weight: 500; color: var(--negro); }
.cinta__pista span::after { content: ''; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--negro); }

/* ---------- Enfoque al hacer scroll ---------- */
.enfoque { filter: blur(10px); opacity: 0; transform: translateY(18px) scale(.985); }
.enfoque.enfocado {
  filter: blur(0); opacity: 1; transform: none;
  transition: filter .9s cubic-bezier(.2,.7,.2,1), opacity .7s, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Simulador de micas ---------- */
.sim-marco { border-radius: var(--r-grande); position: relative; }
.sim {
  position: relative; overflow: hidden; border-radius: inherit; aspect-ratio: 2 / 1;
  background: var(--blanco); container-type: size; user-select: none;
  --x: 0px; --y: 0px; --w: 50%;
}
.sim__carta {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.2cqh; color: var(--negro); font-weight: 700; text-align: center;
}
.sim__carta div { display: flex; align-items: baseline; gap: 2.2cqw; letter-spacing: 0.55em; margin-right: -0.55em; line-height: 1; }
.sim__carta small { font: 400 max(9px, 1.7cqh)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; color: var(--piedra); width: 7cqw; text-align: right; }
.sim__carta div:nth-child(1) { font-size: 19cqh; }
.sim__carta div:nth-child(2) { font-size: 13cqh; }
.sim__carta div:nth-child(3) { font-size: 9.5cqh; }
.sim__carta div:nth-child(4) { font-size: 7cqh; }
.sim__carta div:nth-child(5) { font-size: 5.3cqh; }
.sim__carta div:nth-child(6) { font-size: 4cqh; }
.sim__carta div:nth-child(7) { font-size: 3.1cqh; }
.sim__borroso { filter: url(#simBorroso); }
.sim__nitido {
  background: var(--blanco);
  -webkit-mask: url(img/mica-mascara.png) var(--x) var(--y) / var(--w) var(--w) no-repeat;
          mask: url(img/mica-mascara.png) var(--x) var(--y) / var(--w) var(--w) no-repeat;
}
.sim__lentes {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--w);
  mix-blend-mode: multiply; cursor: grab; touch-action: none; z-index: 2;
  transition: scale .3s cubic-bezier(.2,.7,.2,1);
  border-radius: 40%;
}
.sim__lentes:focus-visible { outline-offset: -20%; }
.sim.arrastrando .sim__lentes { cursor: grabbing; scale: 1.02; }
.sim:not(.usado) .sim__lentes { animation: invitar 2.8s ease-in-out infinite; }
@keyframes invitar { 0%, 100% { translate: 0 0; } 30% { translate: -14px 0; } 60% { translate: 14px 0; } }
.sim__ayuda {
  position: absolute; z-index: 3; font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: pre; right: 20px; top: 18px; color: var(--piedra);
}
.sim__controles { display: flex; justify-content: flex-end; margin-top: 20px; }

/* ---------- Botones magnéticos, vuelo y rebote de bolsa ---------- */
.pill.magnetico { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, box-shadow .2s; }
.vuelo { position: fixed; z-index: 80; pointer-events: none; object-fit: contain; mix-blend-mode: multiply; }
.bolsa.rebote { animation: rebote .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes rebote { 40% { transform: scale(1.25); } }

/* ---------- Banner de promoción: entrada, latido de los números, anillo y destello ---------- */
.promo { position: relative; overflow: hidden; animation: promoEntra .6s cubic-bezier(.2,.9,.3,1.1) both; }
.promo__dato b { animation: promoSalta .7s cubic-bezier(.3,1.7,.5,1) .35s both, promoLatido 2.4s ease-in-out 1.2s infinite; }
.promo__dato + .promo__dato b { animation-delay: .5s, 2.4s; }
.promo__cond b { animation: promoAnillo 1.8s ease-out 1s infinite; }
.promo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  animation: promoDestello 3.6s ease-in-out 1s infinite;
}
.promo:hover, .promo:hover::after, .promo:hover b { animation-play-state: paused; }
@keyframes promoEntra { from { transform: translateY(-100%); } }
@keyframes promoSalta { from { transform: scale(.3); opacity: 0; } }
@keyframes promoLatido { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.2); } 24% { transform: scale(1.04); } 32% { transform: scale(1.12); } }
@keyframes promoAnillo { from { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } to { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
@keyframes promoDestello { to { transform: translateX(100%); } 50% { transform: translateX(100%); } }

@media (max-width: 720px) {
  .intro__fila:nth-child(1) { font-size: 72px; }
  .sim { aspect-ratio: 4 / 5; }
  .sim__carta div:nth-child(1) { font-size: 12cqh; }
  .sim__carta div:nth-child(2) { font-size: 8cqh; }
  .sim__carta div:nth-child(3) { font-size: 6cqh; }
  .sim__carta div:nth-child(4) { font-size: 4.6cqh; }
  .sim__carta div:nth-child(5) { font-size: 3.5cqh; }
  .sim__carta div:nth-child(6) { font-size: 2.7cqh; }
  .sim__carta div:nth-child(7) { font-size: 2.1cqh; }
  .sim__ayuda { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .enfoque { filter: none; opacity: 1; transform: none; }
  .heroe__foto img, .sim:not(.usado) .sim__lentes { animation: none; }
  .promo, .promo::after, .promo__dato b, .promo__dato + .promo__dato b, .promo__cond b { animation: none; }
  ::view-transition-new(root) { animation: none; }
}

.sim-marco:hover .marco__trazo rect { stroke-dasharray: 101 0; opacity: 1; transition-delay: 0s; }