/* El Circuito — base: tokens, marco tipo teléfono, botones "flotador", tipografía. Todo bajo .ec */
.ec {
  --coral: #FF5A5F; --yellow: #FFC93C; --blue: #3D5AFE; --lime: #9BE564; --pink: #FF9FCB; --lilac: #B388FF;
  --water: #2EC4B6; --deep: #1A9E9A; --foam: #FFFFFF; --sky: #7FD8FF; --sky2: #E8FBFF; --sand: #FFE1A8;
  --ink: #1B1F3B; --ink2: #4A5078; --card: #FFFFFF;
  --f-title: "Titan One", "Arial Black", system-ui, sans-serif;
  --f-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  -webkit-text-size-adjust: 100%;
  height: 100%;
  background: var(--deep);
}
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec [hidden] { display: none !important; }
.ec body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 42%, #5ED6CB 42.2%, var(--water) 60%, var(--deep) 100%);
  -webkit-tap-highlight-color: transparent;
}
.ec button, .ec input, .ec textarea { font: inherit; color: inherit; }
.ec :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; }

/* Lago decorativo alrededor del marco (desktop) */
.lake { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.lake i { position: absolute; left: -10%; right: -10%; height: 30px; border-top: 3px solid rgba(255, 255, 255, .45); border-radius: 50%; animation: lake-wave 7s ease-in-out infinite; }
.lake i:nth-child(1) { top: 52%; }
.lake i:nth-child(2) { top: 66%; animation-delay: -2s; opacity: .7; }
.lake i:nth-child(3) { top: 82%; animation-delay: -4s; opacity: .5; }
@keyframes lake-wave { 50% { transform: translateX(3%) scaleY(1.3); } }

/* App: pantalla fija tipo teléfono */
.app {
  position: fixed; inset: 0; margin: 0 auto; width: 100%; max-width: 430px; height: 100dvh;
  overflow: hidden; isolation: isolate; background: var(--sky);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (min-width: 600px) {
  .app { top: 50%; bottom: auto; transform: translateY(-50%); height: min(100dvh - 40px, 900px); border-radius: 34px; border: 4px solid var(--ink); box-shadow: 0 16px 0 rgba(27, 31, 59, .35), 0 30px 80px rgba(10, 40, 60, .35); }
}
.world, .fg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.world { z-index: 0; touch-action: manipulation; cursor: pointer; }
.ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ui > * { pointer-events: auto; }
/* El corredor siempre por encima de la interfaz… salvo con hojas completas y visores */
.fg { z-index: 60; pointer-events: none; }
.app.is-cover .fg { z-index: 5; }
.noscript { position: absolute; inset: auto 16px 40%; z-index: 99; padding: 16px; border-radius: 20px; background: #fff; text-align: center; }

/* ---------- Botón "flotador" ---------- */
.fl {
  --face: var(--yellow); --ink-c: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 22px 12px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--face); color: var(--ink-c);
  font: 400 19px/1 var(--f-title); letter-spacing: .02em; text-decoration: none; text-align: center;
  box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate; /* el reflejo (z-index -1) queda sobre el fondo pero detrás del texto */
}
.fl::before { /* reflejo superior: delgado, tenue y siempre detrás del texto */
  content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; top: 3px; height: 26%; max-height: 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none;
}
.fl > * { position: relative; }
.fl:active, .fl.is-press { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.fl[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--ink); }
.fl-coral { --face: var(--coral); --ink-c: #fff; }
.fl-blue { --face: var(--blue); --ink-c: #fff; }
.fl-lime { --face: var(--lime); }
.fl-white { --face: #fff; }
.fl-water { --face: var(--water); --ink-c: #fff; }
.fl-lg { min-height: 64px; font-size: 24px; padding: 12px 26px 14px; }
.fl-sm { min-height: 44px; font-size: 16px; padding: 8px 16px 10px; box-shadow: 0 4px 0 var(--ink); }
.fl-block { width: 100%; }
.ec .fl { color: var(--ink-c); } /* ".ec button { color: inherit }" tapaba el color del texto del botón */
.fl-coral, .fl-blue, .fl-water { text-shadow: 0 2px 0 rgba(27, 31, 59, .35); }
.fl-round { width: 46px; height: 46px; min-height: 46px; padding: 0; box-shadow: 0 4px 0 var(--ink); }
.fl-round::before { left: 22%; right: 22%; top: 4px; height: 28%; }
.fl svg { flex: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.title-font { font-family: var(--f-title); font-weight: 400; }
.rm .ec *, .rm *, .rm *::before, .rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }