/* ============================================================
   TECLEA · Portada y acceso modernos
   ============================================================ */

/* ───────── Escena 3D ───────── */
.h3d { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1.15; margin-inline: auto; perspective: 1400px; }
.h3d__halo { position: absolute; inset: 8% 4%; border-radius: 50%; filter: blur(60px); opacity: .75;
  background: conic-gradient(from var(--ang), var(--violeta-500), #22D3EE, #A3E635, #FF6B5B, var(--violeta-500)); }
.h3d__plano { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.h3d__kb { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 28px; transform: rotateX(58deg) rotateZ(-22deg) translateY(2%);
  transform-style: preserve-3d; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 30px 40px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter: blur(6px); }
.h3d__fila { display: flex; gap: 8px; justify-content: center; }
.h3d__fila--1 { margin-left: 22px; } .h3d__fila--2 { margin-left: 46px; }
.h3d__k { display: grid; place-items: center; width: clamp(22px, 4vw, 40px); aspect-ratio: 1; border-radius: 22%;
  font: 700 clamp(.7rem, 1.7vw, 1.05rem) var(--fuente-titulo); color: #1D1A3A; transform: translateZ(12px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--dedo, var(--violeta-400)) 55%, #fff), var(--dedo, var(--violeta-400)));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--dedo, var(--violeta-400)) 55%, #000), 0 14px 18px rgba(0,0,0,.3); transition: transform .12s, box-shadow .12s, filter .12s; }
.h3d__k--espacio { width: clamp(120px, 22vw, 220px); aspect-ratio: auto; height: clamp(22px, 4vw, 40px); border-radius: 14px; }
.h3d__k--on { transform: translateZ(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--dedo, var(--violeta-400)) 55%, #000), 0 0 26px var(--dedo, var(--violeta-400)); filter: brightness(1.25); }
.h3d__card { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: .7rem .9rem; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 18px 40px rgba(0,0,0,.28); animation: flotar 6s ease-in-out infinite; }
.h3d__card small { font-size: .7rem; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.h3d__card strong { font: 700 1.7rem/1 var(--fuente-titulo); } .h3d__card em { font-size: .8rem; font-style: normal; opacity: .8; }
.h3d__card--ppm { left: 0; top: 10%; animation-delay: -1s; }
.h3d__card--pre { right: 2%; top: 4%; align-items: center; animation-delay: -3s; color: #fff; }
.h3d__card--pre .anillo { color: #fff; } .h3d__card--pre b { font: 700 .95rem var(--fuente-titulo); }
.h3d__card--racha { right: 0; bottom: 14%; flex-direction: row; align-items: center; gap: .5rem; animation-delay: -2s; }
.h3d__card--racha .icono { color: #FF8A5B; } .h3d__card--racha strong { font-size: 1.4rem; }
.h3d__medalla { position: absolute; left: 9%; bottom: 8%; animation: flotar 7s ease-in-out infinite; animation-delay: -4s; }
.h3d--compacto { max-width: 420px; } .h3d--compacto .h3d__kb { transform: rotateX(58deg) rotateZ(-22deg) scale(.82); }
.h3d--compacto .h3d__card--ppm, .h3d--compacto .h3d__card--racha { display: none; }

/* ───────── Portada ───────── */
.landing { display: flex; flex-direction: column; gap: clamp(3rem, 8vw, 6rem); }
.l-hero { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); margin-top: .5rem; border-radius: 36px; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(34,211,238,.35), transparent 60%),
    radial-gradient(50% 70% at 5% 100%, rgba(163,230,53,.22), transparent 60%),
    radial-gradient(70% 90% at 50% 120%, rgba(255,107,91,.3), transparent 60%),
    linear-gradient(135deg, #1A1260, #0B0820 70%); box-shadow: 0 30px 80px rgba(20, 10, 80, .35); }
.l-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(80% 90% at 60% 40%, #000, transparent); mask-image: radial-gradient(80% 90% at 60% 40%, #000, transparent); }
.l-hero--foto { background-size: cover; background-position: center; }
.l-hero--foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,8,40,.92), rgba(10,8,40,.55) 60%, rgba(10,8,40,.25)); }
@media (min-width: 960px) { .l-hero { grid-template-columns: 1.05fr .95fr; min-height: 560px; } }
.l-hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.l-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 99px; font-size: .82rem; font-weight: 700;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #E6E1FF; }
.l-pill i { width: .5rem; height: .5rem; border-radius: 50%; background: #A3E635; box-shadow: 0 0 10px #A3E635; }
.l-hero h1 { margin: 0; font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.l-hero h1 span { background: linear-gradient(100deg, #67E8F9, #A3E635 55%, #FFD04A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-hero p { margin: 0; max-width: 34rem; font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: #CFC8F5; }
.l-hero .btn--suave { --b: rgba(255,255,255,.12); --bt: #fff; border: 1px solid rgba(255,255,255,.25); --bs: transparent; }
.l-cifras { display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; margin-top: .5rem; }
.l-cifras div { display: flex; flex-direction: column; } .l-cifras strong { font: 700 1.7rem var(--fuente-titulo); } .l-cifras span { font-size: .8rem; color: #B7AEEA; font-weight: 600; }
.l-hero__visual { min-width: 0; }

.l-sec__cab { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.l-sec__cab h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -.015em; }
.l-sec__cab p { color: var(--texto-suave); margin: 0; }

.bento { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento__a { grid-column: span 3; } .bento__b { grid-column: span 3; } .bento__c, .bento__d, .bento__e { grid-column: span 2; } .bento__f { grid-column: span 6; } }
.bento__t { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; border-radius: 24px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); overflow: hidden; }
.bento__t h3 { margin: 0; font-size: 1.2rem; } .bento__t p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.bento__ic { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--c1, var(--violeta-400)), var(--c2, var(--violeta-700))); box-shadow: 0 8px 18px -6px var(--c2, var(--violeta-700)); }
.bento__vis { margin-top: auto; padding-top: .8rem; }
.bento__f { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; background: linear-gradient(120deg, var(--superficie), color-mix(in srgb, var(--primario) 10%, var(--superficie))); }

.linea { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset: m; }
.m-tile { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; border-radius: 20px; background: var(--superficie); border: 1px solid var(--borde); overflow: hidden; }
.m-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.m-tile__n { font: 700 2rem/1 var(--fuente-mono); color: color-mix(in srgb, var(--g1) 70%, var(--texto)); }
.m-tile strong { font: 600 1.05rem/1.2 var(--fuente-titulo); } .m-tile span { font-size: .82rem; color: var(--texto-suave); }
.m-tile__teclas { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .3rem; }
.m-tile__teclas kbd { min-width: 1.5rem; padding: .1rem .3rem; text-align: center; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borde); font: 600 .72rem var(--fuente-mono); }

/* ───────── Acceso (login) ───────── */
.login { display: grid; min-height: calc(100dvh - 7.5rem); gap: 0; border-radius: 32px; overflow: hidden; box-shadow: var(--sombra-3); background: var(--superficie); }
@media (min-width: 900px) { .login { grid-template-columns: 1.05fr .95fr; } }
.login__visual { overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff; isolation: isolate;
  background: radial-gradient(60% 70% at 90% 0%, rgba(34,211,238,.4), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(255,107,91,.35), transparent 60%), linear-gradient(145deg, #1D1470, #0B0820); }
.login__visual::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px; }
.login__visual .logo__texto { color: #fff; }
.login__visual h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); margin: 0; letter-spacing: -.01em; }
.login__visual p { color: #CFC8F5; margin: .5rem 0 0; }
.login__escena { display: none; }
@media (min-width: 900px) { .login__escena { display: block; } }
.login__lista { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem; font-weight: 700; color: #DDD7FA; }
.login__lista li { display: flex; align-items: center; gap: .4rem; } .login__lista .icono { color: #A3E635; }
.login__panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--superficie); }
.login__panel h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin: 0; letter-spacing: -.01em; }
.login__sub { margin: 0; color: var(--texto-suave); }
.login__form { max-width: 26rem; width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.demo-det { border: 1px dashed var(--borde); border-radius: var(--r-md); padding: .7rem .9rem; font-size: .9rem; }
.demo-det summary { cursor: pointer; font-weight: 800; color: var(--texto); }
.demo-det > div { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.puntos { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; }
.puntos i { aspect-ratio: 1; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borde); }
.puntos i.on { background: linear-gradient(135deg, var(--violeta-400), #22D3EE); border-color: transparent; box-shadow: 0 0 10px rgba(138,112,250,.5); }