/* ============================================================
   polish.css — Capa de pulido visual
   Micro-interacciones, transiciones y detalles estéticos.
   No altera ninguna funcionalidad: solo refina lo existente.
   Todo va dentro de @media screen para no afectar al PDF/print.
   ============================================================ */

@media screen {

  /* ── Fundamentos ── */
  html { scroll-behavior: smooth; }

  ::selection {
    background: rgba(232,255,71,0.85);
    color: #0a0a0a;
  }

  /* Scrollbar personalizada */
  html { scrollbar-width: thin; scrollbar-color: #2e2e2e var(--bg); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 8px;
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }

  /* Anillo de foco coherente con la marca (solo teclado) */
  :where(button, a, input, textarea, [role="button"], .option-card):focus-visible {
    outline: 2px solid rgba(232,255,71,0.7);
    outline-offset: 2px;
  }

  /* ── Hero ── */
  /* Respiración lenta del glow central */
  #hero::after { animation: heroBreath 9s ease-in-out infinite alternate; }
  @keyframes heroBreath {
    from { opacity: 0.75; transform: translate(-50%,-50%) scale(0.94); }
    to   { opacity: 1;    transform: translate(-50%,-50%) scale(1.06); }
  }

  /* Brillo sutil permanente en el acento del logo */
  h1.logo span { text-shadow: 0 0 48px rgba(232,255,71,0.28); }

  /* ── Botones primarios: barrido de luz al pasar el ratón ── */
  .btn-start, .btn-next, .nav-cta, .email-btn-save, .wb-btn-primary, .btn-print {
    position: relative;
    overflow: hidden;
  }
  .btn-start::after, .btn-next::after, .nav-cta::after,
  .email-btn-save::after, .wb-btn-primary::after, .btn-print::after {
    content: '';
    position: absolute;
    top: 0; left: -140%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-22deg);
    transition: left 0.6s ease;
    pointer-events: none;
  }
  .btn-start:hover::after, .btn-next:not(:disabled):hover::after, .nav-cta:hover::after,
  .email-btn-save:hover::after, .wb-btn-primary:hover::after, .btn-print:not(:disabled):hover::after {
    left: 170%;
  }
  .btn-start:active, .btn-next:not(:disabled):active, .nav-cta:active,
  .email-btn-save:active, .wb-btn-primary:active { transform: translateY(0) scale(0.98); }

  /* ── Quiz ── */
  /* Entrada suave de cada pregunta al avanzar/retroceder */
  .question-block.active { animation: fadeUp 0.45s cubic-bezier(0.22,1,0.36,1) both; }

  /* Pop del check al seleccionar una opción */
  .option-card.selected .option-check { animation: checkPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes checkPop {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  .option-card { transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.25s; }
  .option-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
  .option-card:active { transform: scale(0.99); }
  .option-card .option-icon-img { transition: transform 0.25s ease, filter 0.25s ease; }
  .option-card:hover .option-icon-img,
  .option-card.selected .option-icon-img { transform: scale(1.08); filter: brightness(1.05); }

  /* Slider: pulso al agarrar el thumb */
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(232,255,71,0.5);
  }

  /* ── Resultados ── */
  /* Entrada escalonada de la cabecera al mostrarse */
  #results-wrapper .results-badge  { animation: fadeUp 0.5s ease 0.05s both; }
  #results-wrapper .results-title  { animation: fadeUp 0.5s ease 0.12s both; }
  #results-wrapper .results-sub    { animation: fadeUp 0.5s ease 0.2s  both; }
  #results-wrapper .profile-grid   { animation: fadeUp 0.5s ease 0.28s both; }

  .profile-card { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
  .profile-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232,255,71,0.3);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  }

  /* Entrada escalonada de las tarjetas de ejercicio al renderizarse */
  #routine-days .exercise-card { animation: fadeUp 0.45s ease both; }
  #routine-days .exercise-card:nth-child(1) { animation-delay: 0.04s; }
  #routine-days .exercise-card:nth-child(2) { animation-delay: 0.08s; }
  #routine-days .exercise-card:nth-child(3) { animation-delay: 0.12s; }
  #routine-days .exercise-card:nth-child(4) { animation-delay: 0.16s; }
  #routine-days .exercise-card:nth-child(5) { animation-delay: 0.2s; }
  #routine-days .exercise-card:nth-child(6) { animation-delay: 0.24s; }
  #routine-days .exercise-card:nth-child(7) { animation-delay: 0.28s; }
  #routine-days .exercise-card:nth-child(n+8) { animation-delay: 0.32s; }

  .exercise-card { transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.25s; }
  .exercise-card:hover { transform: translateX(3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
  .ex-thumb img, .ex-thumb svg { transition: transform 0.3s ease; }
  .exercise-card:hover .ex-thumb img,
  .exercise-card:hover .ex-thumb svg { transform: scale(1.1); }

  /* ── Modales ── */
  .modal-overlay.open, .email-modal-overlay.open { animation: overlayFade 0.25s ease both; }
  @keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
  .email-modal-overlay.open .email-modal-box {
    animation: modalIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  /* ── Landing: secciones y tarjetas ── */
  .feat-iw { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
  .feat-card:hover .feat-iw { transform: scale(1.1) rotate(-4deg); }

  .hiw-num { transition: color 0.3s ease; }
  .hiw-step:hover .hiw-num { color: rgba(232,255,71,0.4); }

  .footer-soc { transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.25s; }
  .footer-soc:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(232,255,71,0.12); }

  .footer-link { transition: color 0.15s, transform 0.15s; }
  .footer-link:hover { transform: translateX(2px); }

  /* ── Reveal al hacer scroll (clases añadidas por js/polish.js) ── */
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
                transform 0.7s cubic-bezier(0.22,1,0.36,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Accesibilidad: respetar la preferencia de menos movimiento ── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
  }

} /* /@media screen */