/* ============================================================
   TECLEA · Identidad visual POR GRADO
   data-estilo="ludico" (2.º–3.º) · "medio" (4.º–5.º) · "pro" (6.º)
   Se carga al final: sobrescribe tokens y componentes.
   ============================================================ */

/* ═══════════════ LÚDICO (2.º–3.º): cielo, nubes y pegatinas ═══════════════ */
[data-estilo="ludico"] {
  --contorno: var(--violeta-800);
  --borde-suave: rgba(76, 52, 190, .28); --sombra-color: rgba(43, 26, 122, .45);
  --realce: inset 0 1.5px 0 rgba(255, 255, 255, .7);
  --fuente-titulo: 'Fredoka', 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --fondo: #DDF3FF;
  --malla-1: #BDE7FF; --malla-2: #FFF1B8; --malla-3: #FFD9E3; --malla-4: #D3F7E5;
  --sombra-2: 0 10px 28px -10px var(--sombra-color);
  --sombra-3: 0 16px 34px -10px var(--sombra-color);
}
[data-estilo="ludico"][data-theme="dark"] {
  --contorno: #05031A;
  --borde-suave: rgba(190, 180, 255, .30); --sombra-color: rgba(5, 3, 26, .7);
  --realce: inset 0 1.5px 0 rgba(255, 255, 255, .16);
  --fondo: #1B1650;
  --superficie: #2A2370;
  --superficie-2: #382F8A;
  --vidrio: rgba(48, 40, 128, .8);
  --sombra-2: 0 10px 28px -10px var(--sombra-color);
  --sombra-3: 0 16px 34px -10px var(--sombra-color);
}
[data-estilo="ludico"] .card,
[data-estilo="ludico"] .topbar,
[data-estilo="ludico"] .sidebar,
[data-estilo="ludico"] .bottomnav {
  /* Borde fino y traslúcido + sombra suave con brillo superior (en vez de contorno negro grueso) */
  border: 1.5px solid var(--borde-suave);
  box-shadow: var(--realce), 0 10px 28px -10px var(--sombra-color);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-estilo="ludico"] .card--vidrio, [data-estilo="ludico"] .topbar,
[data-estilo="ludico"] .app[data-shell] .sidebar, [data-estilo="ludico"] .app[data-shell] .bottomnav { background: var(--superficie); }
[data-estilo="ludico"] .btn { border: 1.5px solid var(--borde-suave); box-shadow: var(--realce), 0 4px 0 var(--bs), 0 10px 18px -8px var(--sombra-color); font-size: 1.15rem; }
[data-estilo="ludico"] .btn:active { box-shadow: 0 1px 0 var(--bs); }
[data-estilo="ludico"] .btn--primary { border-color: rgba(255, 255, 255, .35); }
[data-estilo="ludico"] .btn--suave { --b: var(--superficie); }
[data-estilo="ludico"] .chip, [data-estilo="ludico"] .tile, [data-estilo="ludico"] .etiqueta { border: 1.5px solid var(--borde-suave); }
[data-estilo="ludico"] .chip { box-shadow: var(--realce), 0 4px 10px -4px var(--sombra-color); }
[data-estilo="ludico"] .nodo { border: 3px solid rgba(255, 255, 255, .55); box-shadow: var(--realce), 0 8px 18px -6px var(--sombra-color); }
[data-estilo="ludico"] .nodo--bloqueado { box-shadow: 0 6px 12px -6px var(--sombra-color); }
[data-estilo="ludico"] .nav-item[aria-current="page"] { box-shadow: var(--realce), 0 4px 12px -4px var(--sombra-color); border: 1.5px solid var(--borde-suave); }
[data-estilo="ludico"] .card--hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.35) 0 7%, transparent 7.5%),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.25) 0 10%, transparent 10.5%),
    linear-gradient(135deg, var(--violeta-400), #FF6B8B);
}
[data-estilo="ludico"] h1, [data-estilo="ludico"] h2 { letter-spacing: .01em; }
[data-estilo="ludico"] .vista { --ancho-max: 1100px; }
[data-estilo="ludico"] .tile__num { font-size: 2.6rem; }

/* Fondo: cielo + nubes + colinas */
[data-estilo="ludico"] .fondo__malla {
  inset: 0; animation: none;
  background: linear-gradient(180deg, #7CCBFF 0%, #BDE9FF 45%, #E9F8FF 100%);
}
[data-estilo="ludico"][data-theme="dark"] .fondo__malla {
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent), radial-gradient(2px 2px at 85% 55%, #FFE17A, transparent),
    radial-gradient(1.5px 1.5px at 10% 75%, #fff, transparent),
    linear-gradient(180deg, #1B1650 0%, #3A2A8F 70%, #5A3AA8 100%);
}
[data-estilo="ludico"] .blob { display: none; }
[data-estilo="ludico"] .fondo::after {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -14vh; height: 34vh;
  background:
    radial-gradient(60% 100% at 20% 100%, #5FD38D 0 98%, transparent 100%),
    radial-gradient(55% 90% at 80% 100%, #3FBF78 0 98%, transparent 100%);
  opacity: .9;
}
[data-estilo="ludico"][data-theme="dark"] .fondo::after { filter: brightness(.35) saturate(.8); }
.nube { display: none; position: absolute; top: var(--y); left: -20%; width: var(--w); height: calc(var(--w) * .4);
  background: #fff; border-radius: 999px; opacity: .92; filter: blur(.3px);
  animation: nube-pasa var(--d) linear infinite; animation-delay: var(--delay); }
.nube::before, .nube::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.nube::before { width: 48%; height: 150%; left: 14%; top: -62%; }
.nube::after { width: 38%; height: 120%; right: 14%; top: -42%; }
[data-estilo="ludico"] .nube { display: block; }
[data-estilo="ludico"][data-theme="dark"] .nube { opacity: .12; }
@keyframes nube-pasa { from { transform: translateX(0); } to { transform: translateX(150vw); } }

/* ═══════════════ PRO (5.º–6.º): panel de control, cian y lima ═══════════════ */
[data-estilo="pro"] {
  --fuente-titulo: 'Space Grotesk', 'Lexend', system-ui, sans-serif;
  --violeta-50: #EEF2FF;  --violeta-100: #E0E7FF; --violeta-200: #C7D2FE; --violeta-300: #A5B4FC;
  --violeta-400: #6C8DFF; --violeta-500: #4F6BFF; --violeta-600: #3B50E6; --violeta-700: #2B3BB8; --violeta-900: #121A5C;
  --menta-300: #67E8F9; --menta-400: #22D3EE; --menta-500: #06B6D4; --menta-700: #0E7490;
  --sol-300: #D9F99D; --sol-400: #A3E635; --sol-500: #84CC16;
  --coral-400: #FF7A93; --coral-500: #FF5C7A;
  --fondo: #EAEFFA; --superficie: #FFFFFF; --superficie-2: #EEF2FF;
  --malla-1: #DDE5FF; --malla-2: #D7F5FF; --malla-3: #EEE9FF; --malla-4: #E3FBE8;
  --borde: rgba(40, 60, 160, .16);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
  --sombra-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(30, 50, 140, .10);
  --sombra-3: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 44px rgba(30, 50, 140, .16);
  --alto-boton: 2.75rem;
  --interletra: .005em;
}
[data-estilo="pro"][data-theme="dark"] {
  --fondo: #090E1F; --superficie: #121A33; --superficie-2: #1A2447;
  --vidrio: rgba(18, 26, 51, .78); --vidrio-borde: rgba(120, 150, 255, .16);
  --borde: rgba(130, 160, 255, .18);
  --texto: #EAF0FF; --texto-suave: #A7B3D9;
  --primario: #6C8DFF; --primario-hover: #86A2FF; --primario-tinta: #060B1E;
  --foco: #A3E635; --enlace: #8FB0FF;
  --malla-1: #14224F; --malla-2: #0B3A52; --malla-3: #1F1850; --malla-4: #0A3A33;
  --blob-1: #3B50E6; --blob-2: #0E7490; --blob-3: #4D7C0F;
  --blob-opacidad: .26;
  --sombra-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0, 0, 0, .45);
  --sombra-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px rgba(0, 0, 0, .55);
}
[data-estilo="pro"] .btn { border-radius: var(--r-md); box-shadow: 0 2px 0 var(--bs), 0 8px 18px -8px color-mix(in srgb, var(--bs) 80%, transparent); font-size: .98rem; letter-spacing: .01em; }
[data-estilo="pro"] .btn:hover { transform: translateY(-1px); }
[data-estilo="pro"] .btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--bs); }
[data-estilo="pro"] .btn--primary { --bs: #1F2D9E; }
[data-estilo="pro"] .btn--sun { --bt: #1A2E05; --bs: #4D7C0F; }
[data-estilo="pro"] .chip { border-radius: var(--r-md); font-family: var(--fuente-mono); font-size: .9rem; border: 1px solid var(--borde); box-shadow: none; }
[data-estilo="pro"] .topbar { border-radius: var(--r-lg); padding-block: .4rem; }
[data-estilo="pro"] .sidebar { border-radius: var(--r-xl); }
[data-estilo="pro"] .nav-item { border-radius: var(--r-md); position: relative; }
[data-estilo="pro"] .nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--primario) 22%, transparent); color: var(--texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primario) 60%, transparent);
}
[data-estilo="pro"] .nav-item[aria-current="page"]::before {
  content: ''; position: absolute; left: -.6rem; top: 22%; bottom: 22%; width: 4px; border-radius: 4px; background: var(--sol-400);
  box-shadow: 0 0 12px var(--sol-400);
}
[data-estilo="pro"] .card { border-radius: var(--r-lg); }
[data-estilo="pro"] .card--hero {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(60% 120% at 100% 0%, rgba(34, 211, 238, .45), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(163, 230, 53, .22), transparent 60%),
    linear-gradient(135deg, #1B2A8F, #0B1240);
}
[data-estilo="pro"] .etiqueta { border-radius: 8px; font-family: var(--fuente-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
[data-estilo="pro"] .tecla-deco, [data-estilo="pro"] .opcion-avatar { border-radius: 14px; }
[data-estilo="pro"] .tab, [data-estilo="pro"] .segmentado, [data-estilo="pro"] .tabs, [data-estilo="pro"] .segmentado label { border-radius: var(--r-md); }

/* Fondo: cuadrícula técnica con resplandor */
[data-estilo="pro"] .fondo::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--primario) 10%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--primario) 10%, transparent) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 85%); mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 85%);
}
[data-estilo="pro"] .blob { filter: blur(40px); }

/* ═══════════════ MEDIO (4.º): aventura suave (base) con más color ═══════════════ */
[data-estilo="medio"] .card--hero {
  background:
    radial-gradient(40% 60% at 85% 10%, rgba(255, 208, 74, .5), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(61, 219, 176, .4), transparent 60%),
    linear-gradient(135deg, var(--violeta-500), #8F3FE0);
}

/* Anillos de progreso (SVG) */
.anillo { position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: none; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo__pista { fill: none; stroke: color-mix(in srgb, currentColor 16%, transparent); }
.anillo__valor { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--suave); }
.anillo__centro { position: relative; display: grid; place-items: center; text-align: center; line-height: 1.05; }

@media (max-width: 899.98px) {
  [data-estilo="pro"] .nav-item[aria-current="page"]::before { display: none; }
}


/* ============================================================
   LÚDICO (2.º–3.º) — MUY infantil y divertido: letra grande y redonda, botones gordos que se menean,
   globos y estrellas que flotan, tarjetas de colores de caramelo. Se nota en modo claro y oscuro.
   ============================================================ */
html[data-estilo="ludico"] { font-size: 112.5%; }
[data-estilo="ludico"] {
  --fuente-texto: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --r-md: 26px; --r-lg: 34px; --r-xl: 42px; --alto-boton: 3.5rem;
}
[data-estilo="ludico"] body { font-weight: 500; }
[data-estilo="ludico"] h1::after { content: ' ✨'; font-size: .8em; }
[data-estilo="ludico"] .card { border-radius: 34px; }
[data-estilo="ludico"] .btn { border-radius: 999px; padding-inline: 2rem; font-weight: 700; letter-spacing: .01em; background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%); }
[data-estilo="ludico"] .btn:hover { animation: lud-meneo .55s ease; }
[data-estilo="ludico"] .btn--lg.btn--primary:not(:disabled) { animation: lud-pulso 2.4s ease-in-out infinite; }
[data-estilo="ludico"] .btn--sm { min-height: 2.9rem; }
@keyframes lud-meneo { 20% { transform: translateY(-3px) rotate(-3deg) scale(1.05); } 60% { transform: translateY(-3px) rotate(3deg) scale(1.05); } }
@keyframes lud-pulso { 50% { transform: scale(1.045); } }
/* Tarjetas de colores de caramelo (en claro y oscuro) */
[data-estilo="ludico"] .tiles .tile:nth-child(1) { background: color-mix(in srgb, #FFC93C 38%, var(--superficie)); }
[data-estilo="ludico"] .tiles .tile:nth-child(2) { background: color-mix(in srgb, #3DDBB0 34%, var(--superficie)); }
[data-estilo="ludico"] .tiles .tile:nth-child(3) { background: color-mix(in srgb, #FF7AA2 34%, var(--superficie)); }
[data-estilo="ludico"] .tiles .tile:nth-child(4) { background: color-mix(in srgb, #8A70FA 34%, var(--superficie)); }
[data-estilo="ludico"] .tile { border-radius: 30px; }
[data-estilo="ludico"] .tile:hover { transform: translateY(-6px) rotate(-1.5deg); }
[data-estilo="ludico"] .nav-item .icono { transition: transform .25s var(--resorte); }
[data-estilo="ludico"] .nav-item:hover .icono, [data-estilo="ludico"] .nav-item[aria-current="page"] .icono { transform: scale(1.25) rotate(-8deg); }
[data-estilo="ludico"] .nav-item { font-size: .8rem; font-weight: 700; }
[data-estilo="ludico"] .chip { font-size: 1.05rem; font-weight: 700; }
[data-estilo="ludico"] .kv__k { font-size: calc(var(--k) * .4); }
/* Globos, estrellas y arcoíris que flotan en el fondo */
[data-estilo="ludico"] .blob { display: block; position: absolute; width: auto; height: auto; min-width: 0; background: none; filter: none; opacity: 1; border-radius: 0; font-size: 3.4rem; line-height: 1; animation: lud-flota 7s ease-in-out infinite; }
[data-estilo="ludico"] .blob--1 { top: auto; bottom: 22%; left: 3%; right: auto; } [data-estilo="ludico"] .blob--1::before { content: '🎈'; }
[data-estilo="ludico"] .blob--2 { top: 14%; bottom: auto; right: 4%; left: auto; animation-delay: -2.5s; } [data-estilo="ludico"] .blob--2::before { content: '⭐'; }
[data-estilo="ludico"] .blob--3 { top: 56%; left: auto; right: 7%; animation-delay: -4.5s; font-size: 3rem; } [data-estilo="ludico"] .blob--3::before { content: '🌈'; }
@keyframes lud-flota { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(6deg); } }
/* Noche de caramelo (modo oscuro): colorida y alegre, no la misma noche violeta de los grandes */
[data-estilo="ludico"][data-theme="dark"] .fondo__malla {
  background:
    radial-gradient(2.5px 2.5px at 12% 22%, #FFE17A, transparent), radial-gradient(2.5px 2.5px at 68% 16%, #fff, transparent), radial-gradient(3px 3px at 88% 40%, #FF9EC6, transparent),
    radial-gradient(2px 2px at 30% 52%, #fff, transparent), radial-gradient(3px 3px at 52% 34%, #7BE8CC, transparent),
    linear-gradient(180deg, #2A1B7F 0%, #6B2FA8 52%, #D0509A 100%);
}
[data-estilo="ludico"][data-theme="dark"] .nube { opacity: .25; }
@media (prefers-reduced-motion: reduce) { [data-estilo="ludico"] .blob, [data-estilo="ludico"] .btn { animation: none !important; } }
@media (max-width: 700px) { [data-estilo="ludico"] .blob { font-size: 2.2rem; opacity: .75; } }

/* ============================================================
   PRO (6.º) — serio y moderno: vidrio con borde de luz, cuadrícula fina, auroras, números en monoespaciada,
   botones planos con brillo. Se siente como un panel de control de verdad.
   ============================================================ */
[data-estilo="pro"] {
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --luz-borde: linear-gradient(135deg, color-mix(in srgb, var(--primario) 70%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--coral-500) 55%, transparent));
}
[data-estilo="pro"] .card, [data-estilo="pro"] .tile, [data-estilo="pro"] .topbar, [data-estilo="pro"] .sidebar {
  border: 1px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--superficie) 86%, transparent), color-mix(in srgb, var(--superficie) 86%, transparent)) padding-box, var(--luz-borde) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 32px -16px rgba(0, 0, 0, .45);
}
[data-estilo="pro"] .card--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 38%, #070B1A), #070B1A 70%) padding-box, var(--luz-borde) border-box; color: #EAF0FF; }
[data-estilo="pro"] .card--hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
[data-estilo="pro"] .btn { border-radius: 12px; font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: .01em; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 0 0 transparent, 0 6px 18px -8px color-mix(in srgb, var(--primario) 70%, transparent); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 60%); }
[data-estilo="pro"] .btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px -2px color-mix(in srgb, var(--primario) 70%, transparent); }
[data-estilo="pro"] .btn--suave { border-color: var(--borde); background-image: none; }
[data-estilo="pro"] .tile__num, [data-estilo="pro"] .anillo__centro b, [data-estilo="pro"] .chip b, [data-estilo="pro"] .chip { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
[data-estilo="pro"] h1 { font-weight: 600; letter-spacing: -.02em; }
[data-estilo="pro"] h1::before { content: ''; display: inline-block; width: .32em; height: .9em; margin-right: .35em; vertical-align: -.08em; border-radius: 2px; background: linear-gradient(var(--primario), var(--coral-500)); box-shadow: 0 0 14px color-mix(in srgb, var(--primario) 70%, transparent); }
[data-estilo="pro"] .nav-item[aria-current="page"] { background: color-mix(in srgb, var(--primario) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primario) 45%, transparent), 0 0 20px -6px color-mix(in srgb, var(--primario) 70%, transparent); }
[data-estilo="pro"] .tile { border-radius: 14px; }
[data-estilo="pro"] .tile__tit { font-family: var(--fuente-mono); font-size: .7rem; letter-spacing: .08em; }
[data-estilo="pro"] .kv__teclado { background: linear-gradient(180deg, #0C1226, #090E1F); border-color: rgba(130, 160, 255, .22); transform: none; }
[data-estilo="pro"] .kv__k { background: linear-gradient(180deg, #1B2547, #131B38); color: #CFE0FF; border: 1px solid color-mix(in srgb, var(--dedo) 55%, transparent); box-shadow: 0 0 10px -4px var(--dedo), inset 0 1px 0 rgba(255, 255, 255, .08); text-shadow: none; font-family: var(--fuente-mono); }
[data-estilo="pro"] .kv__k--sig { background: color-mix(in srgb, var(--dedo) 80%, #fff 10%) !important; color: #05081A !important; box-shadow: 0 0 22px var(--dedo), 0 0 0 2px #fff !important; }
[data-estilo="pro"] .fondo__malla { background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--primario) 30%, transparent), transparent 70%), radial-gradient(50% 45% at 90% 100%, color-mix(in srgb, var(--coral-500) 20%, transparent), transparent 70%), var(--fondo); animation: none; }
[data-estilo="pro"]:not([data-theme="dark"]) .card, [data-estilo="pro"]:not([data-theme="dark"]) .tile, [data-estilo="pro"]:not([data-theme="dark"]) .topbar, [data-estilo="pro"]:not([data-theme="dark"]) .sidebar { background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)) padding-box, var(--luz-borde) border-box; box-shadow: 0 10px 28px -16px rgba(20, 30, 90, .3); }
/* Tarjetas de caramelo en modo oscuro: más color y texto claro (si no, se ven turbias) */
[data-estilo="ludico"][data-theme="dark"] .tiles .tile:nth-child(1) { background: color-mix(in srgb, #FFC93C 52%, #2A1B7F); }
[data-estilo="ludico"][data-theme="dark"] .tiles .tile:nth-child(2) { background: color-mix(in srgb, #3DDBB0 48%, #2A1B7F); }
[data-estilo="ludico"][data-theme="dark"] .tiles .tile:nth-child(3) { background: color-mix(in srgb, #FF7AA2 52%, #2A1B7F); }
[data-estilo="ludico"][data-theme="dark"] .tiles .tile:nth-child(4) { background: color-mix(in srgb, #8A70FA 60%, #2A1B7F); }
[data-estilo="ludico"][data-theme="dark"] .inicio--ludico .tile, [data-estilo="ludico"][data-theme="dark"] .inicio--ludico .tile .tile__tit, [data-estilo="ludico"][data-theme="dark"] .inicio--ludico .tile .suave, [data-estilo="ludico"][data-theme="dark"] .inicio--ludico .tile small { color: #fff !important; }
[data-estilo="pro"]:not([data-theme="dark"]) .card--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 55%, #0B1230), #0B1230 75%) padding-box, var(--luz-borde) border-box; box-shadow: 0 18px 40px -18px rgba(20, 30, 90, .55); }