/* =========================================================
   KEOTEACH — MOVIMIENTO E INICIO
   Animaciones de toda la web (se carga después del resto de CSS).
   Todo se desactiva con «reducir movimiento» del sistema.
========================================================= */

:root {
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Fondo vivo ---------- */

.ambient { animation: kxDrift 22s ease-in-out infinite alternate; }
.ambient-two { animation-duration: 28s; animation-direction: alternate-reverse; }
.ambient-three { animation-duration: 34s; }

@keyframes kxDrift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.15); }
    100% { transform: translate(-40px, 70px) scale(.95); }
}

/* ---------- Cambio de página ---------- */

.page { animation: pageIn .6s var(--ease-out) both; }

@keyframes pageIn {
    from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Barra de progreso al bajar ---------- */

.kx-progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--primary), var(--cyan), var(--pink));
    transform-origin: left center; transform: scaleX(0);
    box-shadow: 0 0 12px rgba(118, 103, 255, .6);
}

/* ---------- Menú lateral: entrada al cargar ---------- */

.main-nav .nav-item { animation: kxNavIn .6s var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 40ms + .15s); }

@keyframes kxNavIn { from { opacity: 0; transform: translateX(-22px); } }

/* ---------- Inclinación 3D e imán ---------- */

.kx-tilting { transition: transform .12s linear, border-color .25s ease, box-shadow .35s ease !important; will-change: transform; }
.kx-magnet { transition: transform .18s ease-out !important; }

/* ---------- Chispas al pulsar ---------- */

.kx-spark { position: fixed; z-index: 700; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }

/* ---------- Partículas de la portada ---------- */

.kx-stars { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.kx-stars.on { opacity: 1; }
.hero-card > .hero-copy, .hero-card > .hero-visual { position: relative; z-index: 1; }

/* ---------- Robot vivo ---------- */

.robot-eye { translate: var(--ex, 0) var(--ey, 0); transition: translate .12s ease-out; }
.hero-robot { cursor: pointer; }
.hero-robot.kx-jump { animation: kxJump .7s var(--ease-spring); }

@keyframes kxJump {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-22px) scale(1.06, .94) rotate(-4deg); }
    55% { transform: translateY(0) scale(.96, 1.05); }
    75% { transform: translateY(-6px) rotate(3deg); }
    100% { transform: translateY(0) scale(1); }
}

.kx-say {
    position: absolute; left: 50%; top: 2%; z-index: 3; max-width: 230px; padding: 10px 14px;
    border: 1px solid rgba(118, 103, 255, .45); border-radius: 16px 16px 16px 4px;
    background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    font-size: 13px; font-weight: 600; line-height: 1.4; pointer-events: none;
    animation: kxSay 4.2s var(--ease-out) forwards;
}

@keyframes kxSay {
    0% { opacity: 0; transform: translate(-10%, 14px) scale(.7); }
    10% { opacity: 1; transform: translate(-10%, 0) scale(1.04); }
    14% { transform: translate(-10%, 0) scale(1); }
    85% { opacity: 1; transform: translate(-10%, 0); }
    100% { opacity: 0; transform: translate(-10%, -10px); }
}

#page-home .hero-card h2 { animation: kxHeadline 1.1s var(--ease-out) .1s both !important; }

@keyframes kxHeadline {
    from { opacity: 0; letter-spacing: .02em; filter: blur(10px); transform: translateY(18px); }
    to { opacity: 1; letter-spacing: -.04em; filter: none; transform: none; }
}

.page-heading.kx-swap { animation: kxTitle .4s var(--ease-out); }

@keyframes kxTitle {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Aparición escalonada (keo-motion.js) ---------- */

.kx-reveal { opacity: 0; }

.kx-reveal.kx-in { animation: kxUp .75s var(--ease-out) var(--kx-delay, 0ms) both; transform-origin: 50% 0; }

@keyframes kxUp {
    from { opacity: 0; transform: perspective(900px) rotateX(16deg) translateY(34px) scale(.96); filter: blur(3px); }
    60% { filter: none; }
    to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Menú lateral ---------- */

.nav-item { position: relative; }

.nav-item::before {
    content: ""; position: absolute; left: -13px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 4px 4px 0; background: linear-gradient(var(--primary-2), var(--cyan));
    transform: scaleY(0); transition: transform .3s var(--ease-spring);
}
.nav-item.active::before { transform: scaleY(1); }
.nav-item i { transition: color var(--transition), transform .3s var(--ease-spring); }
.nav-item:hover i { transform: scale(1.18) rotate(-6deg); }

.sidebar { transition: transform .35s var(--ease-out); }
.brand-logo { transition: transform .4s var(--ease-spring); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }

/* ---------- Botones ---------- */

.btn:active:not(:disabled), .icon-btn:active, .nav-item:active, .home-tile:active, .feature-card:active { transform: scale(.97); }

.btn-primary { position: relative; overflow: hidden; isolation: isolate; }

.btn-primary::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
}
.btn-primary:hover:not(:disabled)::before { transform: translateX(120%); transition: transform .7s var(--ease-out); }

.icon-btn i { transition: transform .35s var(--ease-spring); }
.icon-btn:hover i { transform: scale(1.12); }
#themeButton:hover i { transform: rotate(40deg) scale(1.1); }

.kx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: .18; transform: scale(0);
    animation: kxRipple .6s var(--ease-out) forwards;
}

@keyframes kxRipple { to { transform: scale(1); opacity: 0; } }

/* ---------- Tarjetas y paneles ---------- */

.feature-card, .benefit-card, .stat-card, .setting-card, .help-card {
    transition: transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s ease;
}

.feature-card:hover, .benefit-card:hover {
    transform: translateY(-5px);
    border-color: rgba(118, 103, 255, .45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25), 0 0 0 1px rgba(118, 103, 255, .12), 0 10px 40px rgba(118, 103, 255, .12);
}

.feature-icon, .benefit-card > i { transition: transform .45s var(--ease-spring); }
.feature-card:hover .feature-icon, .benefit-card:hover > i { transform: scale(1.12) rotate(-8deg); }
.feature-link i { transition: transform .3s var(--ease-spring); }
.feature-card:hover .feature-link i { transform: translateX(4px); }

.compare-table tbody tr:not(.compare-group) { transition: background .2s ease; }
.compare-table tbody tr:not(.compare-group):hover { background: rgba(118, 103, 255, .06); }

input, textarea, select { transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(118, 103, 255, .14); }

/* ---------- Ventanas y avisos ---------- */

@keyframes modalIn {
    from { opacity: 0; transform: translateY(18px) scale(.95); }
    to { opacity: 1; transform: none; }
}

.modal-window { animation: modalIn .38s var(--ease-spring) both; }
.modal-overlay { animation: kxFade .3s ease both; }

@keyframes kxFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px) scale(.96); }
    to { opacity: 1; transform: none; }
}

.toast { animation: toastIn .45s var(--ease-spring) both, toastOut .3s ease 4s forwards; }

/* =========================================================
   INICIO
========================================================= */

/* Portada: entrada en cascada cada vez que se abre Inicio */

#page-home .hero-copy > * { animation: kxUp .7s var(--ease-out) both; }
#page-home .hero-copy > :nth-child(1) { animation-delay: .05s; }
#page-home .hero-copy > :nth-child(2) { animation-delay: .12s; }
#page-home .hero-copy > :nth-child(3) { animation-delay: .2s; }
#page-home .hero-copy > :nth-child(4) { animation-delay: .28s; }
#page-home .hero-copy > :nth-child(5) { animation-delay: .36s; }

#page-home .hero-visual { animation: kxZoom .9s var(--ease-out) .15s both; }

@keyframes kxZoom {
    from { opacity: 0; transform: scale(.85); }
    to { opacity: 1; transform: none; }
}

.hero-card h2 span {
    background: linear-gradient(90deg, var(--primary-2), var(--cyan), var(--pink), var(--primary-2));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: kxShine 8s linear infinite;
}

@keyframes kxShine { to { background-position: 300% 0; } }

.eyebrow-dot { position: relative; }
.eyebrow-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green);
    animation: kxPing 2s var(--ease-out) infinite;
}

@keyframes kxPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }

/* Robot: parpadeo, antena y halo */

.robot-eye { animation: kxBlink 4.5s infinite; transform-origin: center; }
.robot-eye + .robot-eye { animation-delay: .04s; }

@keyframes kxBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.robot-antenna::after { animation: kxGlow 1.8s ease-in-out infinite; }

@keyframes kxGlow {
    0%, 100% { box-shadow: 0 0 8px var(--cyan); opacity: .8; }
    50% { box-shadow: 0 0 20px var(--cyan), 0 0 34px var(--cyan); opacity: 1; }
}

.robot-screen { animation: kxScreen 3s ease-in-out infinite; }
@keyframes kxScreen { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 14px rgba(67, 217, 255, .35); } }

.hero-core { position: relative; }
.hero-core::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid rgba(118, 103, 255, .35);
    animation: kxHalo 3.2s var(--ease-out) infinite;
}

@keyframes kxHalo { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }

.hero-bubble { transition: border-color .25s ease; }
.hero-bubble:hover { border-color: var(--primary-2); }

/* Contadores pequeños dentro de la portada */

.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.hero-stat {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
    border: 1px solid var(--border); border-radius: 100px;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    color: var(--text-muted); font-size: 12px;
    transition: border-color .25s ease, transform .3s var(--ease-spring);
}
.hero-stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.hero-stat i { color: var(--primary-2); font-size: 12px; }
.hero-stat strong { color: var(--text); font-family: var(--font-display); font-size: 14px; }

/* Accesos principales */

.home-start { margin-top: 34px; }

.home-tiles {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}

.home-tile {
    --tile: var(--primary);
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px; padding: 18px;
    border: 1px solid var(--border); border-radius: 18px;
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    color: var(--text); text-align: left;
    transition: transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s ease;
}

.home-tile::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 20%) var(--my, 50%), color-mix(in srgb, var(--tile) 22%, transparent), transparent 55%);
    opacity: 0; transition: opacity .35s ease;
}

.home-tile:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tile) 55%, var(--border));
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22), 0 8px 30px color-mix(in srgb, var(--tile) 18%, transparent);
}
.home-tile:hover::before { opacity: 1; }

.home-tile-icon {
    position: relative; width: 48px; height: 48px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 14px;
    background: color-mix(in srgb, var(--tile) 14%, transparent);
    color: var(--tile); font-size: 19px;
    transition: transform .45s var(--ease-spring);
}
.home-tile:hover .home-tile-icon { transform: scale(1.1) rotate(-8deg); }

.home-tile-text { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-tile-text strong { font-family: var(--font-display); font-size: 16px; }
.home-tile-text small { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }

.home-tile-arrow {
    position: relative; margin-left: auto; color: var(--text-muted); font-size: 13px;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .25s ease, transform .3s var(--ease-spring), color .25s ease;
}
.home-tile:hover .home-tile-arrow { opacity: 1; transform: none; color: var(--tile); }

#page-home .plan-banner { margin-top: 18px; }

@media (max-width: 1100px) {
    .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .hero-card { min-height: 0; }
    .hero-visual { min-height: 210px; }
}

@media (max-width: 560px) {
    .home-tiles { grid-template-columns: 1fr; gap: 9px; }
    .home-tile { padding: 14px; }
    .home-tile-icon { width: 42px; height: 42px; font-size: 17px; }
    .home-tile-arrow { opacity: .6; transform: none; }
    .hero-stats { gap: 6px; }
    .hero-visual { min-height: 190px; margin-top: 6px; }
    .hero-visual > * { scale: .78; }
    .hero-stat { padding: 6px 10px; }
}

/* ---------- Impresión y movimiento reducido ---------- */

@media print {
    .kx-reveal { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .kx-reveal { opacity: 1 !important; }
    .kx-stars, .kx-say, .kx-spark, .kx-progress { display: none !important; }
    .main-nav .nav-item, #page-home .hero-card h2 { animation: none !important; }
    .ambient, .hero-card h2 span, .robot-eye, .robot-antenna::after, .hero-core::after, .eyebrow-dot::after, .robot-screen { animation: none !important; }
    .kx-ripple { display: none; }
}