/* Pantalla «Elige tu mundo». Vive sola: no comparte una sola regla con el campus de adultos. */
:root{--wbg:#05060f;--wtx:#e8ecff;--wmu:#9aa3d0;--wbd:rgba(120,140,255,.25);--wa1:#22e5ff;--wa2:#ff2bd6;--wk1:#4d7cff;--wk2:#9b5cff;color-scheme:dark}
*{box-sizing:border-box}
.wch{margin:0;min-height:100dvh;background:radial-gradient(900px 520px at 12% -12%,#1a1f6b55,transparent),radial-gradient(760px 520px at 100% 0,#7a2bff22,transparent),var(--wbg);color:var(--wtx);font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;display:grid;place-items:center;padding:24px 16px}
.wwrap{width:100%;max-width:940px;animation:wfade .5s both}
@keyframes wfade{from{opacity:0;transform:translateY(10px)}}

.whead{text-align:center;margin:0 0 30px}
.wlogo{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;border:2px solid var(--wbd);font-weight:800;font-size:1rem;letter-spacing:.02em;background:#0b0d22;margin-bottom:14px}
.whead h1{margin:0 0 8px;font-size:clamp(1.4rem,4.4vw,2.1rem);font-weight:800;letter-spacing:.01em;line-height:1.15}
.wg{background:linear-gradient(90deg,var(--wa1),var(--wa2));-webkit-background-clip:text;background-clip:text;color:transparent}
.whead p{margin:0;color:var(--wmu);font-size:1.02rem}

.wcards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.wcard{position:relative;overflow:hidden;border:1px solid var(--wbd);border-radius:22px;padding:24px 22px 22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s,opacity .3s}
.wcard::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .3s}
.wcard:hover{transform:translateY(-4px)}
.wa:hover{border-color:var(--wa1);box-shadow:0 18px 50px rgba(34,229,255,.18)}
.wk:hover{border-color:var(--wk2);box-shadow:0 18px 50px rgba(155,92,255,.22)}
.wart{height:96px;display:grid;place-items:center;margin-bottom:6px}
.wart svg{width:150px;height:auto}
.wtag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wmu);border:1px solid var(--wbd);border-radius:99px;padding:3px 12px}
.wcard h2{margin:12px 0 8px;font-size:1.55rem;font-weight:800;letter-spacing:.04em}
.wa h2{background:linear-gradient(90deg,var(--wa1),var(--wa2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wk h2{background:linear-gradient(90deg,var(--wk1),var(--wk2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wcard p{margin:0 0 20px;color:var(--wmu);font-size:.95rem;min-height:3em}
.wbtn{width:100%;font:inherit;font-weight:700;font-size:.92rem;letter-spacing:.03em;cursor:pointer;border:0;border-radius:14px;padding:15px 18px;min-height:52px;color:#fff;transition:transform .2s,filter .2s}
.wa .wbtn{background:linear-gradient(90deg,#3b5bff,#8b3dff,#ff2bd6)}
.wk .wbtn{background:linear-gradient(90deg,var(--wk1),var(--wk2))}
.wbtn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.wbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wbtn:disabled{opacity:.7;cursor:wait;transform:none}

/* Transición al elegir: la tarjeta escogida crece y la otra se apaga. */
.wcard.go{transform:scale(1.03);border-color:#fff}
.wcard.go::after{opacity:1;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.14),transparent 70%)}
.wcard.dim{opacity:.35;transform:scale(.97)}

.werr{min-height:1.4em;margin:16px 0 0;text-align:center;color:#ff8da3;font-size:.9rem}
.wfoot{margin:6px 0 0;text-align:center;color:var(--wmu);font-size:.85rem}

@media (max-width:600px){
  .wcard{padding:20px 18px 18px;border-radius:18px}
  .wart{height:74px}.wart svg{width:118px}
  .wcard p{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .wwrap,.wcard,.wbtn{animation:none;transition:none}
  .wcard:hover,.wcard.go{transform:none}
}

/* ===== Entrada pública (puerta del campus) ===== */
/* Comparte identidad y tarjetas con «Elige tu mundo»; solo añade barra, titular y pie. */
.went{place-items:start center;padding:18px 16px 34px}
.went .wwrap{max-width:1000px}

.wskip{position:absolute;left:-9999px;top:0;background:#0b0d22;color:var(--wtx);padding:10px 16px;border-radius:0 0 10px 0;z-index:5}
.wskip:focus{left:0}

.wbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 30px}
.wbrand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.01em}
.wbrand i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--wbd);background:#0b0d22;font-style:normal;font-size:.78rem;font-weight:800}
.wnav{display:flex;gap:10px;align-items:center}
.wln,.wpri{font:inherit;font-weight:700;font-size:.88rem;text-decoration:none;border-radius:12px;padding:11px 18px;min-height:44px;display:inline-grid;place-items:center;transition:transform .2s,filter .2s,border-color .2s}
.wln{color:var(--wtx);border:1px solid var(--wbd)}
.wln:hover{border-color:var(--wa1);transform:translateY(-1px)}
.wpri{color:#fff;border:0;background:linear-gradient(90deg,#3b5bff,#8b3dff,#ff2bd6)}
.wpri:hover{transform:translateY(-1px);filter:brightness(1.08)}
.wln:focus-visible,.wpri:focus-visible,.wskip:focus-visible,.wfeet a:focus-visible{outline:3px solid #fff;outline-offset:3px}

.wehead{margin:0 0 26px}
.weyebrow{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wmu)}
.wehead h1{font-size:clamp(1.5rem,5vw,2.5rem)}
.wpick{margin:0 0 14px;text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wmu)}

/* Las tarjetas de la entrada llevan h3 (debajo del h1 del titular), no h2. */
.wcard h3{margin:12px 0 8px;font-size:1.5rem;font-weight:800;letter-spacing:.04em}
.wa h3{background:linear-gradient(90deg,var(--wa1),var(--wa2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wk h3{background:linear-gradient(90deg,var(--wk1),var(--wk2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* El botón de la entrada es un enlace de verdad: funciona sin JavaScript. */
a.wbtn{display:grid;place-items:center;text-decoration:none}

.wnote{margin:14px 0 0;text-align:center;color:var(--wmu);font-size:.86rem}

.wfeat{margin:30px 0 0}
.wfeat ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.wfeat li{display:flex;align-items:center;gap:10px;border:1px solid var(--wbd);border-radius:14px;padding:13px 15px;color:var(--wmu);font-size:.9rem;background:rgba(255,255,255,.03)}
.wfeat svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--wa1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.wfeet{margin:28px 0 0;text-align:center;color:var(--wmu);font-size:.88rem}
.wfeet p{margin:0 0 6px}
.wfeet a{color:var(--wtx);text-decoration:none;border-bottom:1px solid var(--wbd);border-radius:2px}
.wfeet a:hover{border-color:var(--wa1)}
.wlegal{font-size:.82rem}

/* Animación de entrada: escalonada y breve. Solo opacidad, para no pisar el hover de las tarjetas.
   Se declara DENTRO de «no-preference», no al revés: así, si alguien pide reducir movimiento,
   no hay nada que anular (una anulación con menos especificidad que :nth-child perdería, y las
   tarjetas se quedarían escondidas). Sin la consulta, se ve todo desde el primer momento. */
@keyframes wsoft{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .went .wbar{animation:wsoft .45s both}
  .went .wehead{animation:wsoft .45s .07s both}
  .went .wcards>.wcard:nth-child(1){animation:wsoft .5s .14s both}
  .went .wcards>.wcard:nth-child(2){animation:wsoft .5s .22s both}
  .went .wfeat,.went .wfeet{animation:wsoft .5s .3s both}
}

@media (max-width:600px){
  .wbar{margin-bottom:22px}
  .wnav{width:100%}
  .wln,.wpri{flex:1}
  .wfeat li{padding:11px 13px}
}
@media (prefers-reduced-motion:reduce){
  /* Las animaciones de entrada ya no hace falta anularlas: solo existen en «no-preference». */
  .wln,.wpri{transition:none}
  .wln:hover,.wpri:hover{transform:none}
}