/* dejuego.com · Aprende IA — paleta propia: azul noche, violeta y turquesa con brillos */
:root{
  --noche:#0b1033; --noche-2:#141a4d; --violeta:#7c3aed; --violeta-2:#5b21b6; --lila:#c4b5fd;
  --turq:#14b8a6; --turq-2:#0d9488; --turq-c:#5eead4; --cian:#22d3ee; --rosa-ia:#f472b6; --oro:#fde047;
  --ia-sombra:0 8px 0 rgba(11,16,51,.28),0 22px 40px -20px rgba(11,16,51,.75);
}
body{background:
  radial-gradient(1200px 500px at 85% -10%,rgba(34,211,238,.35),transparent 60%),
  radial-gradient(900px 600px at -10% 20%,rgba(124,58,237,.55),transparent 60%),
  linear-gradient(180deg,#0b1033 0,#1e1b6b 420px,#3b1d8f 900px,#0f766e 1700px,#0b1033 2600px);
  background-color:#0b1033;color:var(--tinta)}
.ia-cielo{position:absolute;inset:0 0 auto 0;height:720px;overflow:hidden;pointer-events:none;z-index:0}
.ia-cielo i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:iaBrilla 3.5s ease-in-out infinite}
@keyframes iaBrilla{50%{opacity:.15;transform:scale(.5)}}
.ia-main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:4px max(12px,env(safe-area-inset-left)) 40px}

/* encabezado */
.ia-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t r" "p r";gap:6px 18px;align-items:center;padding:8px 2px 4px}
.ia-hero > div:first-child{display:contents}.ia-hero h1{grid-area:t;align-self:end}.ia-hero p{grid-area:p;align-self:start}.ia-hero .robot{grid-area:r}
.ia-hero h1{font-size:clamp(1.45rem,7vw,3.4rem);color:#fff;text-shadow:0 4px 0 rgba(91,33,182,.6),0 0 24px rgba(94,234,212,.35)}
.ia-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--turq-c),var(--cian),var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent}
.ia-hero p{color:#e0e7ff;font-weight:800;font-size:clamp(1rem,2.6vw,1.25rem);margin-top:6px;max-width:560px}
.ia-hero .robot{width:clamp(58px,20vw,190px);animation:iaFlota 4s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(34,211,238,.35))}
@keyframes iaFlota{50%{transform:translateY(-10px) rotate(2deg)}}

/* edades */
.ia-edades{display:flex;align-items:center;gap:8px;margin:14px 0 8px;flex-wrap:wrap}
.ia-edades > span{color:#c7d2fe;font-weight:900;font-size:.95rem}
.ia-edades .grupo-ed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);width:min(100%,440px)}
.ia-edad{min-width:0;min-height:48px;padding:5px 4px;border-radius:999px;font-family:var(--titulo);font-weight:800;font-size:clamp(.85rem,3.4vw,1.1rem);line-height:1.1;color:#fff;white-space:nowrap;transition:transform .12s}
.ia-edad small{display:block;font-family:var(--texto);font-size:clamp(.6rem,2.4vw,.72rem);font-weight:800;opacity:.85;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.ia-edad[aria-pressed="true"]{background:linear-gradient(180deg,#5eead4,#14b8a6);color:#042f2e;box-shadow:0 4px 0 #0f766e,0 0 18px rgba(94,234,212,.5)}
.ia-edad:active{transform:translateY(3px)}

/* chips de secciones (deslizables) */
.ia-chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 14px;margin:0 -2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ia-chip{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 8px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--violeta-2);font-family:var(--titulo);font-weight:800;font-size:1rem;white-space:nowrap;box-shadow:0 5px 0 rgba(11,16,51,.35);transition:transform .12s}
.ia-chip .ic{width:30px;height:30px}
.ia-chip .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#ede9fe;font-size:.85rem}
.ia-chip.hecha .num{background:#ccfbf1;color:#0f766e}
.ia-chip[aria-selected="true"]{background:linear-gradient(180deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 5px 0 #4c1d95,0 0 22px rgba(167,139,250,.6)}
.ia-chip[aria-selected="true"] .num{background:rgba(255,255,255,.25);color:#fff}
.ia-chip:active{transform:translateY(3px)}

/* sección y tarjetas */
.ia-sec{animation:iaEntra .35s ease}
@keyframes iaEntra{from{opacity:0;transform:translateY(10px)}}
.ia-sec > h2{color:#fff;font-size:clamp(1.5rem,5.5vw,2.3rem);display:flex;align-items:center;gap:10px;margin:4px 0 12px;text-shadow:0 3px 0 rgba(11,16,51,.5)}
.ia-sec > h2 .ic{width:clamp(34px,9vw,46px);height:clamp(34px,9vw,46px);flex:0 0 auto}
.ia-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.ia-card{position:relative;background:#fff;border-radius:26px;padding:clamp(14px,4vw,22px);box-shadow:var(--ia-sombra);min-width:0;margin-bottom:16px}
.ia-card.ancha{grid-column:1/-1}
.ia-card h3{font-size:clamp(1.2rem,4.6vw,1.6rem);color:var(--violeta-2);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ia-card p{font-weight:700;font-size:clamp(1rem,3.6vw,1.1rem);line-height:1.45;color:#27304a}
.ia-card p + p{margin-top:8px}
.ia-card b.t{color:var(--turq-2)}
.ia-oir{width:40px;height:40px;border-radius:50%;background:#ecfeff;box-shadow:0 3px 0 #a5f3fc;display:inline-grid;place-items:center;flex:0 0 auto;margin-left:auto}
.ia-oir .ic{width:24px;height:24px}
.ia-tag{display:inline-block;font-family:var(--texto);font-size:.75rem;font-weight:900;padding:3px 9px;border-radius:999px;background:#ccfbf1;color:#115e59;vertical-align:middle}
.ia-lienzo{margin-top:12px;border-radius:20px;background:linear-gradient(180deg,#eef2ff,#ecfeff);padding:clamp(8px,3vw,14px);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(99,102,241,.12)}
.ia-lienzo.noche{background:radial-gradient(circle at 30% 0,#312e81,#0b1033 70%);color:#e0e7ff}

/* botones propios */
.ia-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 18px;border-radius:999px;font-family:var(--titulo);font-weight:800;font-size:1.05rem;background:linear-gradient(180deg,#2dd4bf,#14b8a6);color:#042f2e;box-shadow:0 5px 0 #0f766e;transition:transform .12s,box-shadow .12s;max-width:100%}
.ia-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0f766e}
.ia-btn.vio{background:linear-gradient(180deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 5px 0 #4c1d95}
.ia-btn.blanco{background:#fff;color:var(--violeta-2);box-shadow:0 5px 0 #c7d2fe}
.ia-btn:disabled{opacity:.45;pointer-events:none}
.ia-fila{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.ia-msg{margin-top:10px;padding:10px 12px;border-radius:16px;font-weight:800;background:#f5f3ff;color:#4c1d95;min-height:1em}
.ia-msg:empty{display:none}
.ia-msg.bien{background:#dcfce7;color:#166534}.ia-msg.mal{background:#ffe4e6;color:#9f1239}

/* ¡Pruébalo! */
.ia-prueba{background:linear-gradient(160deg,#f5f3ff,#ecfeff);border-radius:22px;padding:clamp(12px,3.5vw,18px);margin-top:4px}
.ia-prueba > h3{color:var(--violeta-2)}
.ia-prueba .marcador{font-weight:900;color:#0f766e;margin:-2px 0 8px}
.ia-preg{background:#fff;border-radius:18px;padding:12px;box-shadow:0 4px 0 #ddd6fe;margin-top:10px}
.ia-preg .p{font-weight:900;font-size:clamp(1rem,3.8vw,1.12rem);line-height:1.35;color:#1e1b4b}
.ia-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin-top:8px}
.ia-op{min-height:48px;padding:8px 12px;border-radius:16px;background:#f8fafc;box-shadow:0 4px 0 #cbd5e1;font-weight:800;font-size:1rem;text-align:left;line-height:1.25;transition:transform .1s}
.ia-op:active{transform:translateY(3px)}
.ia-op.bien{background:#bbf7d0;box-shadow:0 4px 0 #22c55e;color:#14532d}
.ia-op.mal{background:#fecdd3;box-shadow:0 4px 0 #f43f5e;color:#881337;animation:iaNo .4s}
.ia-preg.lista .ia-op:not(.bien){opacity:.5;pointer-events:none}
.ia-preg .por{margin-top:8px;font-weight:800;font-size:.98rem;padding:8px 10px;border-radius:12px}
.ia-preg .por:empty{display:none}
.ia-preg .por.bien{background:#dcfce7;color:#166534}.ia-preg .por.mal{background:#fff1f2;color:#9f1239}
@keyframes iaNo{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ia-final-prueba{margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(90deg,#5eead4,#a78bfa);color:#1e1b4b;font-family:var(--titulo);font-weight:800;font-size:1.2rem;text-align:center}

/* para papás */
.ia-papas{display:flex;gap:10px;align-items:flex-start;background:#fffbeb;border-radius:20px;padding:12px 14px;box-shadow:0 5px 0 #fde68a;margin-top:4px}
.ia-papas .ic{width:36px;height:36px;flex:0 0 auto}
.ia-papas b{display:block;font-family:var(--titulo);font-size:1.05rem;line-height:1.2;color:#92400e}
.ia-papas p{font-weight:700;color:#78350f;font-size:.98rem;line-height:1.4}

/* juega para practicar */
.ia-practica{margin-top:26px;background:linear-gradient(135deg,#1e1b4b,#4c1d95 60%,#0f766e);border-radius:30px;padding:clamp(16px,4vw,26px);box-shadow:0 0 0 2px rgba(94,234,212,.35),var(--ia-sombra);color:#fff}
.ia-practica h2{font-size:clamp(1.5rem,5vw,2.1rem);display:flex;align-items:center;gap:10px}
.ia-practica h2 .ic{width:40px;height:40px}
.ia-practica > p{font-weight:800;color:#ddd6fe;margin:4px 0 12px}
.ia-juegos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ia-juego{display:block;text-decoration:none;background:#fff;color:var(--tinta);border-radius:22px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .15s}
.ia-juego:hover{transform:translateY(-3px)}
.ia-juego img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#ccfbf1}
.ia-juego div{padding:10px 14px 12px}
.ia-juego b{font-family:var(--titulo);font-size:1.2rem;display:block}
.ia-juego small{font-weight:800;color:var(--tinta-2)}

/* utilidades de dibujo */
.ia-svg{width:100%;height:auto;display:block}
.ia-pulsa{animation:iaPulsa 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes iaPulsa{50%{transform:scale(1.18);opacity:.6}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

@media (max-width:520px){.ia-edades{display:grid;gap:4px}.ia-edades .grupo-ed{width:100%}}
@media (max-width:480px){.ia-hero{grid-template-areas:"t r" "p p"}}
@media (min-width:901px){.ia-chips{flex-wrap:wrap;overflow:visible}}