*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    * { scrollbar-width: none; -ms-overflow-style: none; -webkit-tap-highlight-color: transparent; }
    *::-webkit-scrollbar { width: 0; height: 0; }
    button, a, [role="button"], .btn, label, summary { -webkit-tap-highlight-color: transparent; }
    button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }

    :root {
      --bg: #0a0a0a;
      --bg2: #141414;
      --card: #1a1a1a;
      --card-h: #222;
      --ex-bg: #111;
      --text: #f0f0f0;
      --text2: #999;
      --text3: #666;
      --border: #2a2a2a;
      --red: #ff4444;
      --green: #6b9b96;
      --r: 12px; --rs: 8px;
      --shadow: none;
      --header-h: 58px;    /* altura del .header sticky superior — usado para offsets */

      /* ===== Glass Presets — Dark Mode (Solid = default) ===== */
      /* Presets: solid | balanced | airy — cambiar con setGlassPreset('nombre') en consola */
      --glass-blur: 32px;
      --glass-saturate: 1.9;
      --glass-radius: 16px;
      --glass-border: rgba(255,255,255,0.10);
      --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
      --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 45%, transparent 55%, rgba(255,255,255,0.05) 100%);
      /* Opacities por categoria — Solid */
      --glass-bg: rgba(30,30,30,0.50);
      --glass-card: rgba(26,26,26,0.55);
      --glass-header: rgba(10,10,10,0.85);
      --glass-dropdown: rgba(30,30,30,0.88);
      --glass-modal: rgba(30,30,30,0.60);
      --glass-editor: rgba(20,20,20,0.82);
      --glass-overlay: rgba(0,0,0,0.65);
      --glass-panel: rgba(30,30,30,0.50);
      /* Material thickening — thin (boton) vs thick (modal abierto) */
      --glass-thin-bg: rgba(255,255,255,0.03);
      --glass-thick-bg: rgba(255,255,255,0.14);
      --glass-thin-blur: 6px;
      --glass-thick-blur: 22px;
    }

    [data-theme="light"] {
      --bg: #ede9e3;
      --bg2: #e2ded8;
      --card: #f7f5f2;
      --card-h: #f0ede8;
      --ex-bg: #f3f0ec;
      --text: #2a2a2a;
      --text2: #5a5a5a;
      --text3: #8a8a8a;
      --border: #cdc8c1;
      --shadow: 0 2px 8px rgba(0,0,0,0.1);

      /* ===== Glass Presets — Light Mode (Solid = default) ===== */
      /* Presets: solid | balanced | airy — cambiar con setGlassPreset('nombre') en consola */
      --glass-blur: 28px;
      --glass-saturate: 1.8;
      --glass-radius: 16px;
      --glass-border: rgba(0,0,0,0.08);
      --glass-shadow: 0 4px 20px rgba(80,60,140,0.10);
      --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 45%, transparent 55%, rgba(255,255,255,0.15) 100%);
      /* Opacities por categoria — Solid */
      --glass-bg: rgba(255,255,255,0.58);
      --glass-card: rgba(255,255,255,0.50);
      --glass-header: rgba(240,236,231,0.90);
      --glass-dropdown: rgba(255,255,255,0.88);
      --glass-modal: rgba(255,255,255,0.65);
      --glass-editor: rgba(240,236,231,0.68);
      --glass-overlay: rgba(255,255,255,0.35);
      --glass-panel: rgba(255,255,255,0.58);
      /* Material thickening */
      --glass-thin-bg: rgba(255,255,255,0.18);
      --glass-thick-bg: rgba(255,255,255,0.62);
      --glass-thin-blur: 4px;
      --glass-thick-blur: 18px;
    }

    html { scroll-behavior: auto; }

    /* Previene zoom en double-tap en iOS (iOS 10+ ignora user-scalable=no) */
    button, a, label, [role="button"],
    .herr-feature-card, .herr-section-header, .herr-section-icon,
    .herr-timer-hero-top, .herr-tool-card,
    .rpe-pill, .timer-preset-btn, .timer-start-btn, .orm-calc-btn,
    .rpe-tab-btn, .rpe-step-nav-btn, .nav-item, .view-tab {
      touch-action: manipulation;
    }

    body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      min-height: 100dvh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Aurora gradient blobs — contenido visual detras del glass */
    .aurora-bg {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      overflow: hidden;
    }
    .aurora-bg::before, .aurora-bg::after {
      content: ''; position: absolute; border-radius: 50%;
      filter: blur(80px);
      animation: auroraFloat 20s ease-in-out infinite alternate;
    }
    .aurora-bg::before {
      width: 500px; height: 500px;
      top: -10%; left: -10%;
      background: radial-gradient(circle, rgba(251,113,133,0.35) 0%, rgba(244,63,94,0.15) 50%, transparent 70%);
    }
    .aurora-bg::after {
      width: 400px; height: 400px;
      bottom: 10%; right: -5%;
      background: radial-gradient(circle, rgba(139,92,246,0.30) 0%, rgba(124,58,237,0.12) 50%, transparent 70%);
      animation-delay: -10s;
    }
    .aurora-blob-3 {
      position: absolute; border-radius: 50%;
      width: 350px; height: 350px;
      top: 40%; left: 30%;
      background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, rgba(245,158,11,0.10) 50%, transparent 70%);
      filter: blur(80px);
      animation: auroraFloat 25s ease-in-out infinite alternate-reverse;
    }
    @keyframes auroraFloat {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -20px) scale(1.05); }
      66% { transform: translate(-20px, 15px) scale(0.95); }
      100% { transform: translate(10px, -10px) scale(1.02); }
    }
    @media (prefers-reduced-motion: reduce) {
      .aurora-bg::before, .aurora-bg::after, .aurora-blob-3 { animation: none; }
    }
    body.no-scroll .aurora-bg::before,
    body.no-scroll .aurora-bg::after,
    body.no-scroll .aurora-blob-3 { animation-play-state: paused; }