/* Redblok · diseño nuevo (v2). Se activa con <html data-ui="2">; el diseño antiguo sigue intacto sin este atributo. */
html[data-ui="2"] {
  --paper: #f5f6fa; --paper-2: #eceef5; --paper-3: #dde0ec; --card: #ffffff;
  --ink: #0e1120; --ink-2: #4a5169; --ink-3: #7b8299;
  --forge: #e8283a; --forge-2: #ff4658; --on-forge: #fff;
  --line: rgba(14, 17, 32, .11); --line-2: rgba(14, 17, 32, .2);
  --bw: 1px; --r: 16px; --shadow-c: transparent;
  --sh-1: 0 1px 2px rgba(14, 17, 32, .06), 0 4px 12px -4px rgba(14, 17, 32, .08);
  --sh-2: 0 2px 4px rgba(14, 17, 32, .05), 0 12px 28px -10px rgba(14, 17, 32, .16);
  --sh-3: 0 4px 8px rgba(14, 17, 32, .06), 0 24px 48px -14px rgba(14, 17, 32, .24);
  --glow: 0 10px 28px -8px rgba(232, 40, 58, .55);
}
html[data-ui="2"][data-theme='dark'] {
  --paper: #090a10; --paper-2: #10121b; --paper-3: #1b1e2c; --card: #11131d;
  --ink: #f3f4fa; --ink-2: #a4acc2; --ink-3: #6f7791;
  --forge: #ff3b4e; --forge-2: #ff5d6c;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -4px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px -10px rgba(0, 0, 0, .65);
  --sh-3: 0 4px 8px rgba(0, 0, 0, .45), 0 28px 56px -14px rgba(0, 0, 0, .75);
  --glow: 0 10px 30px -8px rgba(255, 59, 78, .6);
}
@media (prefers-color-scheme: dark) {
  html[data-ui="2"]:not([data-theme='light']) {
    --paper: #090a10; --paper-2: #10121b; --paper-3: #1b1e2c; --card: #11131d;
    --ink: #f3f4fa; --ink-2: #a4acc2; --ink-3: #6f7791;
    --forge: #ff3b4e; --forge-2: #ff5d6c;
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -4px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px -10px rgba(0, 0, 0, .65);
    --sh-3: 0 4px 8px rgba(0, 0, 0, .45), 0 28px 56px -14px rgba(0, 0, 0, .75);
    --glow: 0 10px 30px -8px rgba(255, 59, 78, .6);
  }
}

/* base */
html[data-ui="2"] body { background-color: var(--paper); background-image: radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--forge) 9%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 30%, color-mix(in srgb, #5865f2 7%, transparent), transparent 60%); font-size: 16.5px; }
html[data-ui="2"] h1, html[data-ui="2"] h2, html[data-ui="2"] h3 { letter-spacing: -0.035em; }
html[data-ui="2"] ::selection { background: color-mix(in srgb, var(--forge) 70%, transparent); color: #fff; }
html[data-ui="2"] code { border-radius: 6px; border: 1px solid var(--line); background: var(--paper-2); }
html[data-ui="2"] .wrap { width: min(1240px, 100% - 40px); }
html[data-ui="2"] * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* etiquetas pixel de Redblok */
html[data-ui="2"] .px-label { padding: 6px 12px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--forge) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--forge) 10%, transparent); font-size: 13.5px; letter-spacing: .08em; }
html[data-ui="2"] .px-label::before { width: 7px; height: 7px; box-shadow: none; background: var(--forge); }
html[data-ui="2"] .px-badge { border-radius: 6px; }

/* botones */
html[data-ui="2"] .btn { padding: 12px 20px; border-radius: 12px; font-weight: 650; background: var(--card); transition: transform .18s ease, box-shadow .18s ease, background-color .18s, border-color .18s, filter .18s; }
html[data-ui="2"] .btn:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--sh-3); }
html[data-ui="2"] .btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
html[data-ui="2"] .btn--forge { background: linear-gradient(135deg, var(--forge-2), var(--forge) 60%, #d11f31); color: #fff; border-color: transparent; box-shadow: var(--glow); }
html[data-ui="2"] .btn--forge:hover { filter: brightness(1.08); border-color: transparent; box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--forge) 75%, transparent); }
html[data-ui="2"] .btn--discord { background: #5865f2; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(88, 101, 242, .7); }
html[data-ui="2"] .btn--ghost { background: transparent; box-shadow: none; }
html[data-ui="2"] .btn--sm { padding: 9px 14px; border-radius: 10px; }
html[data-ui="2"] .btn--lg { padding: 15px 26px; border-radius: 14px; }
html[data-ui="2"] .chip, html[data-ui="2"] .badge { border-radius: 999px; background: var(--card); }
html[data-ui="2"] .chip.is-on { background: var(--ink); color: var(--paper); border-color: transparent; }

/* anuncio y cabecera */
html[data-ui="2"] .announce { background: linear-gradient(90deg, #12040a, #2a0a12 50%, #12040a); color: #fff; font-size: 13.5px; padding: 8px 16px; }
html[data-ui="2"] .top { background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
html[data-ui="2"] .top-in { height: 68px; }
html[data-ui="2"] .top-nav a { border-radius: 10px; padding: 8px 13px; font-weight: 600; transition: background .15s, color .15s; }
html[data-ui="2"] .top-nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
html[data-ui="2"] .top-nav a.is-on { background: color-mix(in srgb, var(--forge) 12%, transparent); box-shadow: none; color: var(--ink); }
html[data-ui="2"] .nav-dot { box-shadow: none; border-radius: 50%; width: 7px; height: 7px; }
html[data-ui="2"] .menu-pop { border-radius: 14px; background: var(--card); box-shadow: var(--sh-3); padding: 8px; }
html[data-ui="2"] .menu-pop a, html[data-ui="2"] .menu-pop button { border-radius: 8px; }
html[data-ui="2"] .icon-btn { border-radius: 10px; }

/* portada */
html[data-ui="2"] .hero { border-bottom: 1px solid var(--line); }
html[data-ui="2"] .hero-in { padding: 88px 0 104px; }
html[data-ui="2"] .hero h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.045em; }
html[data-ui="2"] .hero h1 .hl { background: linear-gradient(100deg, #ff6b78, #ff3b4e 45%, #ff9a5a); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; box-shadow: none; }
html[data-ui="2"] .hero .lede { font-size: 19px; color: var(--ink-2); max-width: 52ch; }
html[data-ui="2"] .hero-stats li { border-radius: 14px; background: color-mix(in srgb, var(--card) 80%, transparent); }
html[data-ui="2"] .hero-new { border-radius: 999px; box-shadow: var(--sh-1); background: color-mix(in srgb, var(--card) 85%, transparent); }
html[data-ui="2"] .scene-tag { border-radius: 8px; background: color-mix(in srgb, var(--card) 92%, transparent); }

/* secciones y tarjetas */
html[data-ui="2"] .block { padding: 96px 0; }
html[data-ui="2"] .block-h h2 { font-size: clamp(32px, 4.2vw, 52px); }
html[data-ui="2"] .cat, html[data-ui="2"] .rcard, html[data-ui="2"] .tcard, html[data-ui="2"] .hs-card, html[data-ui="2"] .hp-card, html[data-ui="2"] .sp-step, html[data-ui="2"] .sp-card {
  border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, #fff 3%), var(--card));
}
html[data-ui="2"] .cat::before { height: 3px; border-radius: 3px 3px 0 0; opacity: .9; }
html[data-ui="2"] .cat:hover, html[data-ui="2"] .rcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat, var(--forge)) 55%, var(--line-2)); }
html[data-ui="2"] .rcard { overflow: hidden; }
html[data-ui="2"] .rcard-cover { border-bottom: 1px solid var(--line); }
html[data-ui="2"] .rcard-foot { border-top: 1px dashed var(--line-2); }
html[data-ui="2"] .cat-hero { background: radial-gradient(900px 400px at 85% 0%, color-mix(in srgb, var(--cat, var(--forge)) 22%, transparent), transparent 65%), var(--paper); border-bottom: 1px solid var(--line); }
html[data-ui="2"] .cat-hero::after { opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }

/* formularios */
html[data-ui="2"] .field input, html[data-ui="2"] .field select, html[data-ui="2"] .field textarea, html[data-ui="2"] .sp-in { border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-2); }
html[data-ui="2"] .field input:focus, html[data-ui="2"] .field select:focus, html[data-ui="2"] .field textarea:focus { border-color: var(--forge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--forge) 22%, transparent); outline: none; }

/* partners y hosting */
html[data-ui="2"] .pchip { border-radius: 14px; }
html[data-ui="2"] .hs-card { background: linear-gradient(135deg, color-mix(in srgb, #5865f2 16%, var(--card)), var(--card) 55%, color-mix(in srgb, var(--forge) 12%, var(--card))); }
html[data-ui="2"] .hs-rack { border-radius: 18px; box-shadow: var(--sh-2); }

/* pie: oscuro siempre, con la línea de píxeles de Redblok */
html[data-ui="2"] .grass-edge { display: none; }
html[data-ui="2"] .foot { margin-top: 60px; position: relative; }
html[data-ui="2"] .foot::before { content: ''; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--forge) 0 14px, transparent 14px 20px); opacity: .85; }
html[data-ui="2"] .foot-dirt { background: radial-gradient(900px 300px at 80% 0%, rgba(255, 59, 78, .14), transparent 70%), #07080d; border-top: 0; }
html[data-ui="2"] .foot-col a { transition: color .15s, transform .15s; }
html[data-ui="2"] .foot-col a:hover { color: #fff; transform: translateX(3px); }

/* selector del diseño (solo equipo y entorno local) */
.ui-switch { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(12, 14, 22, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #cfd4e6; font: 600 12.5px/1 var(--f-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.ui-switch span { padding: 0 8px 0 10px; opacity: .75; }
.ui-switch a { padding: 8px 12px; border-radius: 999px; color: inherit; text-decoration: none; }
.ui-switch a.is-on { background: #ff3b4e; color: #fff; }