/*
Theme Name: ELYON — Colegio Virtual
Theme URI: https://elyon.edu
Description: Tema hijo de Astra v4.1 — Claro, vibrante y moderno.
Author: ELYON Dev
Template: astra
Version: 4.1.0
Text Domain: elyon-child
*/
/* NOTE: Fuentes cargadas via wp_enqueue_style en inc/core.php */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@400;900&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=Poppins:wght@500;600;700;800&display=swap');
/* ============================================================
DESIGN TOKENS — ELYON LIGHT v4.1
============================================================ */
:root {
/* ── Nueva paleta ELYON Kids ─────────────────────────────
#1F4578 azul navy principal
#4787a9 azul cielo secundario
#79e0dc teal / acento verde-agua
#ebcc4b amarillo dorado
#e9e0bd crema / fondos cálidos
─────────────────────────────────────────────────────── */
--el-bg: #f5f3ec; /* crema muy clara */
--el-bg-2: #e9e0bd; /* crema */
--el-surface: #FFFFFF;
--el-border: rgba(31,69,120,.1);
--el-border-lt: rgba(31,69,120,.06);
--el-indigo: #1F4578; /* azul navy */
--el-indigo-lt: #4787a9; /* azul cielo */
--el-indigo-dk: #0d2340; /* azul muy oscuro */
--el-indigo-g: rgba(31,69,120,.18);
--el-emerald: #79e0dc; /* teal */
--el-emerald-lt:#a8ece9; /* teal claro */
--el-emerald-g: rgba(121,224,220,.18);
--el-gold: #ebcc4b; /* amarillo dorado */
--el-gold-lt: #f2da75; /* amarillo claro */
--el-gold-pale: #fdf7db; /* amarillo muy pálido */
--el-navy: #1F4578; /* alias navy */
--el-navy-2: #4787a9; /* alias cielo */
--el-text: #1a2e45;
--el-text-2: #2e4a6a;
--el-muted: #4a6580;
--el-faint: #7a98b0;
--el-success: #79e0dc;
--el-success-bg:#edfafa;
--el-warning: #c9a800;
--el-warn-bg: #fdf7db;
--el-danger: #DC2626;
--el-danger-bg: #FEE2E2;
--el-display: 'Londrina Solid', 'Nunito Sans', sans-serif;
--el-body: 'Nunito Sans', 'Poppins', sans-serif;
--el-r-xs:6px; --el-r-sm:10px; --el-r:16px; --el-r-lg:24px; --el-r-xl:36px; --el-r-full:999px;
--el-sh-xs:0 1px 3px rgba(0,0,0,.06);
--el-sh-sm:0 2px 8px rgba(0,0,0,.08);
--el-sh: 0 4px 24px rgba(0,0,0,.1);
--el-sh-md:0 8px 40px rgba(0,0,0,.12);
--el-sh-lg:0 20px 60px rgba(0,0,0,.14);
--el-sh-ind:0 4px 20px rgba(31,69,120,.28);
--el-sh-em: 0 4px 20px rgba(121,224,220,.25);
--el-ease: cubic-bezier(.25,.46,.45,.94);
--el-spring:cubic-bezier(.34,1.56,.64,1);
--el-out: cubic-bezier(.16,1,.3,1);
/* Gray scale from original */
--el-gray-100: #E8EDF5;
--el-gray-300: #C5CDD8;
--el-gray-500: #7A8899;
--el-gray-700: #3C4757;
--el-t:220ms; --el-t-lg:400ms;
}
/* ── BASE ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: auto; } /* JS maneja el scroll suave con easing personalizado */
body { font-family:var(--el-body); background:var(--el-bg); color:var(--el-text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--el-display); line-height:1.12; }
.ast-container { max-width:1320px !important; }
/* ── ANIMATIONS ── */
@keyframes el-fade-up { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes el-fade-in { from{opacity:0} to{opacity:1} }
@keyframes el-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes el-pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.5)} 50%{box-shadow:0 0 0 7px rgba(5,150,105,0)} }
@keyframes el-gradient { 0%{background-position:0% center} 100%{background-position:200% center} }
@keyframes el-sweep { 0%{left:-60%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:120%;opacity:0} }
@keyframes aurora-spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes badge-float-1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes badge-float-2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes badge-float-3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes title-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.animate-up { animation:el-fade-up var(--el-t-lg) var(--el-out) both; }
.animate-float { animation:el-float 6s ease-in-out infinite; }
/* ── HEADER ── */
#masthead, .site-header, .ast-primary-header-bar {
background:#FFFFFF !important;
border-bottom:1px solid rgba(26,39,68,.1) !important;
box-shadow:0 2px 16px rgba(26,39,68,.06) !important;
position:sticky !important; top:0 !important; z-index:1000 !important;
}
/* Logo ELYON con color animado */
.ast-site-title-wrap a, .site-title a {
font-family:var(--el-display) !important;
font-size:1.35rem !important; font-weight:700 !important;
letter-spacing:.08em !important;
background:linear-gradient(135deg,#1A2744 0%,#A8884A 50%,#1A2744 100%) !important;
background-size:200% 200% !important;
-webkit-background-clip:text !important;
-webkit-text-fill-color:transparent !important;
background-clip:text !important;
animation:title-gradient 5s ease infinite !important;
text-decoration:none !important;
}
/* Nav items */
.ast-primary-header-bar .main-navigation li:not(.elyon-nav-cpv-btn) > a,
#site-navigation li:not(.elyon-nav-cpv-btn) > a {
font-family:var(--el-body) !important; font-weight:600 !important;
font-size:.74rem !important; color:#5A6480 !important;
letter-spacing:.1em !important; text-transform:uppercase !important;
padding:8px 13px !important; border-radius:var(--el-r-sm) !important;
transition:color var(--el-t), background var(--el-t) !important;
line-height:1 !important; box-shadow:none !important;
background:transparent !important;
}
#site-navigation li:not(.elyon-nav-cpv-btn) > a:hover,
.main-navigation li:not(.elyon-nav-cpv-btn) > a:hover {
color:#1A2744 !important;
background:#EEF0F5 !important;
}
/* ── FOOTER ── */
.site-footer, #colophon { background:var(--el-navy) !important; border-top:1px solid rgba(255,255,255,.06) !important; }
.site-footer a { color:#A5B4FC !important; }
.site-footer a:hover { color:#fff !important; }
/* ── BUTTONS ── */
.elyon-btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--el-r-full);font-family:var(--el-body);font-weight:600;font-size:.88rem;border:none;cursor:pointer;text-decoration:none;transition:transform var(--el-t) var(--el-spring),box-shadow var(--el-t);white-space:nowrap; }
.elyon-btn:hover { transform:translateY(-2px); }
.elyon-btn-primary { background:linear-gradient(135deg,var(--el-indigo-lt),var(--el-indigo));color:#fff;box-shadow:var(--el-sh-ind); }
.elyon-btn-primary:hover { box-shadow:0 8px 28px rgba(26,39,68,.35);color:#fff; }
.elyon-btn-gold { background:linear-gradient(135deg,var(--el-gold-lt),var(--el-gold));color:#fff;box-shadow:0 4px 16px rgba(217,119,6,.25); }
.elyon-btn-outline { background:transparent;border:1.5px solid var(--el-indigo);color:var(--el-indigo); }
.elyon-btn-outline:hover { background:var(--el-indigo);color:#fff;box-shadow:var(--el-sh-ind); }
.elyon-btn-sm { padding:8px 18px;font-size:.8rem; }
.elyon-btn-lg { padding:15px 38px;font-size:.95rem;font-weight:700; }
/* ── UTILITIES ── */
.elyon-label { display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--el-indigo);margin-bottom:12px; }
.elyon-label::before { content:'';width:24px;height:2px;background:linear-gradient(90deg,var(--el-emerald-lt),var(--el-indigo));border-radius:2px;display:inline-block; }
.elyon-divider { width:48px;height:3px;border-radius:3px;margin:14px 0 22px;background:linear-gradient(90deg,var(--el-indigo),var(--el-emerald-lt)); }
.elyon-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:var(--el-r-full);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.badge-success { background:var(--el-success-bg);color:var(--el-success); }
.badge-warning { background:var(--el-warn-bg);color:var(--el-warning); }
.badge-danger { background:var(--el-danger-bg);color:var(--el-danger); }
.badge-info { background:var(--el-bg-2);color:var(--el-indigo); }
.elyon-section-header { text-align:center;margin-bottom:60px; }
.elyon-section-header h2 { font-size:clamp(1.9rem,3.5vw,2.9rem);margin-bottom:14px; }
.elyon-section-header p { color:var(--el-muted);max-width:520px;margin:0 auto;font-size:1.05rem;line-height:1.7; }
.elyon-progress { height:6px;background:var(--el-bg-2);border-radius:var(--el-r-full);overflow:hidden; }
.elyon-progress-fill { height:100%;border-radius:var(--el-r-full);background:linear-gradient(90deg,var(--el-indigo),var(--el-emerald-lt));transition:width .8s var(--el-out); }
/* ── HERO ── */
.elyon-hero {
min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;
background:linear-gradient(135deg,#1A2744 0%,#243560 35%,#0F1A30 65%,#1A2744 100%);
}
.elyon-hero-bg {
position:absolute;inset:0;
background:radial-gradient(ellipse 70% 60% at 10% 30%,rgba(255,255,255,.12) 0%,transparent 55%),
radial-gradient(ellipse 50% 50% at 90% 70%,rgba(16,185,129,.2) 0%,transparent 50%),
radial-gradient(ellipse 40% 40% at 50% 10%,rgba(255,255,255,.06) 0%,transparent 45%);
}
.elyon-hero-bg::before {
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:52px 52px;
mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 20%,transparent 80%);
}
.elyon-hero-inner {
position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:130px 5vw 110px;
display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;
}
.elyon-hero-pill { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);color:#fff;padding:8px 18px;border-radius:var(--el-r-full);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:28px; }
.elyon-hero-pill-dot { width:6px;height:6px;border-radius:50%;background:#C4A362;animation:el-pulse-dot 2s infinite; }
.elyon-hero h1 { font-family:var(--el-display);font-size:clamp(2.6rem,5.5vw,4.8rem);font-weight:700;color:#fff;line-height:1.06;letter-spacing:.02em;margin-bottom:24px; }
.elyon-hero h1 em { font-style:normal;background:linear-gradient(135deg,#FCD34D,#F59E0B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.elyon-hero-desc { font-size:1.1rem;color:rgba(255,255,255,.75);line-height:1.75;max-width:490px;margin-bottom:40px; }
.elyon-hero-btns { display:flex;gap:12px;flex-wrap:wrap; }
.elyon-hero-stats { display:flex;gap:0;margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.15); }
.elyon-hero-stat { flex:1;padding-right:24px;border-right:1px solid rgba(255,255,255,.1);margin-right:24px; }
.elyon-hero-stat:last-child { border-right:none;margin-right:0;padding-right:0; }
.elyon-hero-stat-num { font-family:var(--el-display);font-size:2rem;font-weight:700;color:#FCD34D;display:block;line-height:1;margin-bottom:4px; }
.elyon-hero-stat-label { font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em; }
/* Hero visual — imagen con efectos */
.elyon-hero-visual { display:flex;justify-content:center;align-items:center;position:relative; }
.elyon-hero-img-wrap { position:relative;width:420px;height:480px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.elyon-hero-img-glow { position:absolute;inset:-40px;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(255,255,255,.18) 0%,transparent 70%);filter:blur(40px);border-radius:50%; }
.elyon-hero-img-ring { position:absolute;border-radius:50%;border:1px solid;animation:aurora-spin-slow linear infinite; }
.elyon-hero-img-ring-1 { width:460px;height:460px;border-color:rgba(255,255,255,.25);animation-duration:20s; }
.elyon-hero-img-ring-2 { width:390px;height:390px;border-color:rgba(255,255,255,.15);animation-duration:14s;animation-direction:reverse;border-style:dashed; }
.elyon-hero-img-ring-3 { width:320px;height:320px;border-color:rgba(255,255,255,.1);animation-duration:25s;border-style:dotted; }
.elyon-hero-img-frame { position:relative;z-index:2;width:340px;height:400px;border-radius:36px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.4),0 32px 80px rgba(0,0,0,.3);animation:el-float 7s ease-in-out infinite; }
.elyon-hero-img-frame img { width:100%;height:100%;object-fit:cover;display:block; }
.elyon-hero-img-frame::before { content:'';position:absolute;top:-50%;left:-60%;width:60%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-20deg);animation:el-sweep 5s ease-in-out infinite;z-index:3;pointer-events:none; }
.elyon-hero-img-frame::after { content:'';position:absolute;inset:0;border-radius:36px;padding:1.5px;background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(52,211,153,.6),rgba(252,211,77,.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:4; }
.elyon-hero-float-badge { position:absolute;z-index:5;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.12);white-space:nowrap; }
.elyon-hero-float-badge strong { display:block;font-family:var(--el-display);font-size:.95rem;color:var(--el-indigo);line-height:1;font-weight:700; }
.elyon-hero-float-badge span { font-size:.68rem;color:var(--el-muted);text-transform:uppercase;letter-spacing:.08em; }
.elyon-hero-float-badge .badge-ico { font-size:22px; }
.elyon-hero-float-badge-1 { top:40px;right:-20px;border-color:rgba(67,56,202,.2);animation:badge-float-1 4s ease-in-out infinite; }
.elyon-hero-float-badge-2 { bottom:80px;left:-20px;border-color:rgba(168,136,74,.2);animation:badge-float-2 5s ease-in-out infinite; }
.elyon-hero-float-badge-2 strong { color:var(--el-emerald); }
.elyon-hero-float-badge-3 { bottom:-10px;right:30px;border-color:rgba(217,119,6,.2);animation:badge-float-3 6s ease-in-out infinite; }
.elyon-hero-float-badge-3 strong { color:var(--el-gold); }
/* ── SECTIONS ── */
.elyon-sobre { padding:120px 5vw;background:var(--el-surface);position:relative;overflow:hidden; }
.elyon-sobre::before { content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,39,68,.04) 0%,transparent 70%);top:-150px;right:-150px;pointer-events:none; }
.elyon-cursos-section { padding:120px 5vw;background:var(--el-bg); }
.elyon-cita { padding:120px 5vw;background:linear-gradient(135deg,#1A2744 0%,#243560 50%,#A8884A 100%);position:relative;overflow:hidden; }
.elyon-cita::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px; }
.elyon-testimonios { padding:120px 5vw;background:var(--el-surface); }
.elyon-docentes { padding:120px 5vw;background:var(--el-bg); }
.elyon-contacto { padding:120px 5vw;background:var(--el-surface); }
.elyon-blog-section { padding:120px 5vw;background:var(--el-bg); }
/* ── PAGE HERO ── */
.elyon-page-hero { background:linear-gradient(135deg,#1A2744 0%,#243560 100%);padding:90px 5vw 100px;text-align:center;position:relative;overflow:hidden; }
.elyon-page-hero::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px; }
.elyon-page-hero::after { content:'';position:absolute;bottom:-1px;left:0;right:0;height:60px;background:var(--el-bg);clip-path:ellipse(55% 100% at 50% 100%); }
.elyon-page-hero h1 { position:relative;z-index:1;color:#fff;font-size:clamp(2rem,4.5vw,3.2rem); }
.elyon-page-hero p { position:relative;z-index:1;color:rgba(255,255,255,.7);font-size:1.05rem;margin-top:12px; }
/* ── LOGIN ── */
.elyon-aula-section { background:var(--el-bg); }
.elyon-login-section { min-height:80vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;background:linear-gradient(135deg,#1A2744 0%,#243560 50%,#A8884A 100%);position:relative;overflow:hidden; }
.elyon-login-section::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px; }
.elyon-login-card { position:relative;z-index:1;background:rgba(255,255,255,.15);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(255,255,255,.3);border-radius:var(--el-r-xl);padding:52px 48px;width:100%;max-width:460px;box-shadow:0 32px 80px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);text-align:center; }
.elyon-login-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#FCD34D,#fff,#C4A362);border-radius:var(--el-r-xl) var(--el-r-xl) 0 0; }
.elyon-login-icon { font-size:56px;display:block;margin-bottom:12px;animation:el-float 5s ease-in-out infinite; }
.elyon-login-card h2 { color:#fff;font-size:1.6rem;margin-bottom:6px; }
.elyon-login-card .sub { color:rgba(255,255,255,.7);margin-bottom:36px;font-size:.9rem; }
.elyon-login-field { margin-bottom:18px;text-align:left; }
.elyon-login-field label { display:block;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.7);margin-bottom:8px; }
.elyon-login-field input { width:100%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:var(--el-r-sm);padding:14px 18px;color:#fff;font-family:var(--el-body);font-size:.94rem;outline:none;transition:border-color var(--el-t),background var(--el-t); }
.elyon-login-field input:focus { border-color:#fff;background:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.elyon-login-field input::placeholder { color:rgba(255,255,255,.4); }
.elyon-login-forgot a { font-size:.78rem;color:#FCD34D; }
.elyon-login-error { background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.3);color:#FCA5A5;border-radius:var(--el-r-sm);padding:12px 16px;font-size:.84rem;margin-bottom:18px;text-align:left; }
.elyon-login-register { margin-top:24px;font-size:.82rem;color:rgba(255,255,255,.55); }
.elyon-login-register a { color:#FCD34D;font-weight:700; }
/* ── DASHBOARD ── */
.elyon-dash-wrap { min-height:80vh;background:var(--el-bg); }
.elyon-dash-topbar { background:linear-gradient(135deg,#1A2744 0%,#243560 100%);padding:40px 5vw 90px;position:relative;overflow:hidden; }
.elyon-dash-topbar::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px; }
.elyon-dash-topbar::after { content:'';position:absolute;bottom:-1px;left:0;right:0;height:70px;background:var(--el-bg);clip-path:ellipse(55% 100% at 50% 100%); }
.elyon-dash-user { position:relative;z-index:1;max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:20px; }
.elyon-dash-avatar { width:84px;height:84px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);object-fit:cover;box-shadow:0 4px 20px rgba(0,0,0,.15),0 0 0 4px rgba(255,255,255,.15);flex-shrink:0; }
.elyon-dash-name { color:#fff;font-size:1.5rem;margin-bottom:4px;font-family:var(--el-display); }
.elyon-dash-email { color:rgba(255,255,255,.65);font-size:.84rem; }
.elyon-dash-rank-pill { margin-left:auto;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#FCD34D;padding:8px 20px;border-radius:var(--el-r-full);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap; }
.elyon-dash-body { max-width:1320px;margin:-50px auto 0;padding:0 5vw 80px;position:relative; }
/* Widgets */
.elyon-widgets { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px; }
.elyon-widget { background:var(--el-surface);border-radius:var(--el-r);padding:22px;box-shadow:var(--el-sh-xs);border:1px solid var(--el-border-lt);position:relative;overflow:hidden;transition:transform var(--el-t),box-shadow var(--el-t); }
.elyon-widget::before { content:'';position:absolute;top:0;left:0;right:0;height:3px; }
.elyon-widget:nth-child(1)::before { background:linear-gradient(90deg,var(--el-indigo-lt),var(--el-indigo)); }
.elyon-widget:nth-child(2)::before { background:linear-gradient(90deg,var(--el-emerald-lt),var(--el-emerald)); }
.elyon-widget:nth-child(3)::before { background:linear-gradient(90deg,var(--el-gold-lt),var(--el-gold)); }
.elyon-widget:nth-child(4)::before { background:linear-gradient(90deg,#C084FC,#9333EA); }
.elyon-widget:hover { transform:translateY(-2px);box-shadow:var(--el-sh); }
.elyon-widget-ico { font-size:24px;margin-bottom:10px; }
.elyon-widget-num { font-family:var(--el-display);font-size:1.85rem;color:var(--el-text);line-height:1;margin-bottom:4px;font-weight:700; }
.elyon-widget-lbl { font-size:.68rem;color:var(--el-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600; }
/* Tabs */
.elyon-tabs-nav { display:flex;gap:4px;background:var(--el-surface);padding:6px;border-radius:var(--el-r);box-shadow:var(--el-sh-xs);margin-bottom:20px;flex-wrap:wrap;border:1px solid var(--el-border-lt); }
.elyon-tab-btn { flex:1;min-width:120px;padding:10px 15px;background:transparent;border:none;border-radius:var(--el-r-sm);font-family:var(--el-body);font-size:.82rem;font-weight:600;color:var(--el-muted);cursor:pointer;transition:all var(--el-t);display:flex;align-items:center;justify-content:center;gap:7px; }
.elyon-tab-btn:hover { background:var(--el-bg);color:var(--el-text); }
.elyon-tab-btn.active { background:linear-gradient(135deg,var(--el-indigo-lt),var(--el-indigo));color:#fff;box-shadow:var(--el-sh-ind); }
.elyon-tab-pane { display:none; }
.elyon-tab-pane.active { display:block;animation:el-fade-in .2s ease; }
/* Table */
.elyon-table-card { background:var(--el-surface);border-radius:var(--el-r);overflow:hidden;box-shadow:var(--el-sh-xs);border:1px solid var(--el-border-lt); }
.elyon-table-card-head { background:linear-gradient(135deg,var(--el-indigo),var(--el-indigo-dk));padding:18px 22px;display:flex;align-items:center;justify-content:space-between; }
.elyon-table-card-head h3 { color:#fff;font-size:.93rem;margin:0;font-family:var(--el-display); }
table.elyon-table { width:100%;border-collapse:collapse;font-size:.86rem; }
table.elyon-table thead th { background:var(--el-bg);padding:10px 18px;text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--el-muted);border-bottom:1px solid var(--el-border-lt);font-family:var(--el-body);font-weight:700; }
table.elyon-table tbody td { padding:13px 18px;border-bottom:1px solid var(--el-border-lt);vertical-align:middle; }
table.elyon-table tbody tr:last-child td { border-bottom:none; }
table.elyon-table tbody tr:hover { background:var(--el-bg); }
/* Familia selector */
.elyon-familia-selector { background:var(--el-surface);border-radius:var(--el-r);padding:16px 20px;margin-bottom:18px;box-shadow:var(--el-sh-xs);border:1px solid var(--el-border-lt);display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.elyon-familia-selector label { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--el-muted);white-space:nowrap; }
.elyon-miembro-tabs { display:flex;gap:8px;flex-wrap:wrap;flex:1; }
.elyon-miembro-btn { display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--el-r-full);border:1.5px solid var(--el-border-lt);background:var(--el-bg);cursor:pointer;font-family:var(--el-body);font-size:.82rem;font-weight:600;color:var(--el-muted);transition:all var(--el-t); }
.elyon-miembro-btn:hover { border-color:var(--el-indigo);color:var(--el-indigo);background:var(--el-bg-2); }
.elyon-miembro-btn.active { background:linear-gradient(135deg,var(--el-indigo-lt),var(--el-indigo));border-color:transparent;color:#fff;box-shadow:var(--el-sh-ind); }
.elyon-miembro-btn .avatar-mini { width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.elyon-miembro-pane { display:none; }
.elyon-miembro-pane.active { display:block;animation:el-fade-in .2s ease; }
/* Hijo info card */
.elyon-hijo-info-card { background:linear-gradient(135deg,#1A2744,#243560);border-radius:var(--el-r);padding:20px 22px;margin-bottom:18px;display:flex;align-items:center;gap:16px;box-shadow:var(--el-sh-ind);border:1px solid rgba(67,56,202,.3);position:relative;overflow:hidden; }
.elyon-hijo-info-card::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }
.elyon-hijo-avatar-lg { position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0; }
.elyon-hijo-nombre { position:relative;z-index:1;color:#fff;font-size:1.12rem;margin-bottom:4px;font-family:var(--el-display);font-weight:600; }
.elyon-hijo-meta { position:relative;z-index:1;color:rgba(255,255,255,.65);font-size:.78rem; }
.elyon-hijo-grado { position:relative;z-index:1;margin-left:auto;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#FCD34D;padding:6px 16px;border-radius:var(--el-r-full);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; }
/* Aptitudes */
.elyon-aptitudes-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-top:14px; }
.elyon-aptitud { background:var(--el-bg);border:1px solid var(--el-border-lt);border-radius:var(--el-r);padding:18px;text-align:center;transition:transform var(--el-t),box-shadow var(--el-t),border-color var(--el-t); }
.elyon-aptitud:hover { transform:translateY(-3px);box-shadow:var(--el-sh-md);border-color:var(--el-emerald-lt); }
.elyon-aptitud-ico { font-size:32px;margin-bottom:10px; }
.elyon-aptitud-nombre { font-family:var(--el-display);font-size:.82rem;color:var(--el-text);margin-bottom:4px;font-weight:600; }
.elyon-aptitud-pts { font-family:var(--el-display);font-size:1.35rem;color:var(--el-indigo);font-weight:700; }
/* Matrícula */
.elyon-matricula-wrap { display:flex;flex-direction:column;gap:16px; }
.elyon-contabilidad { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.elyon-conta-card { border-radius:var(--el-r);padding:16px 18px;display:flex;align-items:center;gap:12px;border:1px solid; }
.elyon-conta-card.pagado { background:var(--el-success-bg);border-color:#D4AE52; }
.elyon-conta-card.pendiente { background:var(--el-warn-bg);border-color:#FDE68A; }
.elyon-conta-card.cancelado { background:var(--el-danger-bg);border-color:#FCA5A5; }
.elyon-conta-ico { font-size:26px; }
.elyon-conta-num { font-family:var(--el-display);font-size:1.35rem;font-weight:700;line-height:1;margin-bottom:3px; }
.elyon-conta-lbl { font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;opacity:.65; }
/* Transferencia */
.elyon-transfer-box { background:var(--el-gold-pale);border:1px solid #FDE68A;border-radius:var(--el-r);padding:22px;margin-top:18px; }
.elyon-transfer-box h4 { font-family:var(--el-display);color:var(--el-text);margin-bottom:14px;display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:600; }
.elyon-transfer-row { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:.85rem; }
.elyon-transfer-row:last-of-type { border-bottom:none; }
/* Cursos grid */
.elyon-cursos-grid { max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.elyon-curso-card { background:var(--el-surface);border-radius:var(--el-r-lg);border:1px solid var(--el-border-lt);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--el-sh-xs);transition:transform var(--el-t) var(--el-out),box-shadow var(--el-t),border-color var(--el-t); }
.elyon-curso-card:hover { transform:translateY(-7px);box-shadow:var(--el-sh-lg);border-color:rgba(67,56,202,.2); }
.elyon-curso-thumb { position:relative;height:210px;overflow:hidden;background:linear-gradient(145deg,var(--el-bg-2),var(--el-bg)); }
.elyon-curso-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.elyon-curso-card:hover .elyon-curso-thumb img { transform:scale(1.06); }
.elyon-curso-cat { position:absolute;top:12px;left:12px;background:linear-gradient(135deg,var(--el-indigo-lt),var(--el-indigo));color:#fff;font-size:.62rem;font-weight:800;padding:4px 12px;border-radius:var(--el-r-full);text-transform:uppercase;letter-spacing:.1em; }
.elyon-curso-body { padding:22px;flex:1;display:flex;flex-direction:column; }
.elyon-curso-title { font-family:var(--el-display);font-size:.98rem;color:var(--el-text);margin-bottom:8px;line-height:1.3;font-weight:600; }
.elyon-curso-excerpt { font-size:.84rem;color:var(--el-muted);flex:1;margin-bottom:18px;line-height:1.65; }
.elyon-curso-footer { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--el-border-lt);padding-top:16px; }
.elyon-curso-price { font-family:var(--el-display);font-size:1.2rem;color:var(--el-indigo);font-weight:700; }
/* Form glass */
.elyon-form-glass { background:rgba(255,255,255,.12);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.25);border-radius:var(--el-r-xl);padding:48px 52px;box-shadow:0 32px 80px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.15); }
.elyon-form-group { display:flex;flex-direction:column;gap:7px;margin-bottom:18px; }
.elyon-form-group label { font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.7); }
.elyon-form-group input,.elyon-form-group textarea,.elyon-form-group select { background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:var(--el-r-sm);padding:13px 16px;color:#fff;font-family:var(--el-body);font-size:.94rem;width:100%;outline:none;transition:border-color var(--el-t),background var(--el-t); }
.elyon-form-group input:focus,.elyon-form-group textarea:focus { border-color:#fff;background:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.elyon-form-group input::placeholder,.elyon-form-group textarea::placeholder { color:rgba(255,255,255,.4); }
.elyon-form-group textarea { resize:vertical;min-height:110px; }
/* Footer logo */
.elyon-footer-logo-wrap { display:block;width:160px;height:56px;margin-bottom:18px;overflow:hidden; }
.elyon-footer-logo-wrap img { width:100% !important;height:100% !important;max-width:160px !important;max-height:56px !important;object-fit:contain !important;object-position:left center !important;display:block !important; }
/* Alertas */
.elyon-alerta-ok { background:#DCFCE7;border-left:3px solid #22C55E;padding:11px 15px;border-radius:0 6px 6px 0;font-size:.86rem;color:#15803D;margin-bottom:14px; }
.elyon-alerta-info { background:#DBEAFE;border-left:3px solid #3B82F6;padding:11px 15px;border-radius:0 6px 6px 0;font-size:.86rem;color:#1D4ED8;margin-bottom:14px; }
/* Panel tabs finanzas/docentes */
.elyon-fin-tabs { display:flex;gap:4px;background:#fff;padding:6px;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);border:1px solid rgba(79,70,229,.1);flex-wrap:wrap; }
.elyon-fin-tab { flex:1;min-width:140px;padding:11px 16px;background:transparent;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:600;color:#6B7280;cursor:pointer;text-decoration:none;text-align:center;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px; }
.elyon-fin-tab:hover { background:#F5F7FF;color:#374151; }
.elyon-fin-tab.active { background:linear-gradient(135deg,#243560,#1A2744);color:#fff;box-shadow:0 4px 14px rgba(26,39,68,.25); }
/* ── RESPONSIVE ── */
@media(max-width:1024px) {
.elyon-hero-inner { grid-template-columns:1fr; }
.elyon-hero-visual { display:none; }
.elyon-cursos-grid { grid-template-columns:repeat(2,1fr); }
.elyon-widgets { grid-template-columns:repeat(2,1fr); }
.elyon-contabilidad { grid-template-columns:1fr; }
}
@media(max-width:768px) {
.elyon-form-glass { padding:28px 22px; }
.elyon-login-card { padding:36px 24px; }
.elyon-dash-rank-pill { display:none; }
.elyon-hijo-grado { display:none; }
.elyon-cursos-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
.elyon-widgets { grid-template-columns:1fr 1fr; }
.elyon-hero h1 { font-size:2.2rem; }
.elyon-hero-btns { flex-direction:column; }
}
/* ================================================================
HEADERS UNIFICADOS — ELYON y CPV idénticos
================================================================ */
.ast-header-account,.ast-header-account-wrap,.ast-header-account-link,
.astra-addon-cart-wrap,.ast-site-header-cart,.ast-site-header-cart-data,
.ast-login-logout-wrap,.ast-woocommerce-cart-menu,.ast-masthead-custom-menu-items,
[class*="ast-account"],[class*="header-account"] { display:none !important; }
#masthead,.site-header,.ast-primary-header-bar { background:#fff !important;box-shadow:0 1px 12px rgba(13,20,33,.06) !important;border-bottom:1px solid rgba(26,39,68,.1) !important; }
#site-navigation .menu-item:not(.elyon-nav-cpv-btn) > a,
.main-navigation .menu-item:not(.elyon-nav-cpv-btn) > a {
font-family:Inter,system-ui,sans-serif !important;font-size:.74rem !important;font-weight:600 !important;
letter-spacing:.1em !important;text-transform:uppercase !important;color:#5A6480 !important;
padding:8px 13px !important;border-radius:6px !important;line-height:1 !important;
transition:color .2s,background .2s !important;box-shadow:none !important;background:transparent !important;
}
#site-navigation .menu-item:not(.elyon-nav-cpv-btn) > a:hover,
.main-navigation .menu-item:not(.elyon-nav-cpv-btn) > a:hover { color:#1A2744 !important;background:#EEF0F5 !important; }
#site-navigation li.elyon-nav-cpv-btn > a,
#site-navigation li.elyon-nav-cpv-btn > a:link,
#site-navigation li.elyon-nav-cpv-btn > a:visited,
a.elyon-cpv-nav-link {
background:#1A2744 !important;color:#ffffff !important;padding:10px 22px !important;
border-radius:4px !important;font-weight:700 !important;
box-shadow:0 4px 14px rgba(26,39,68,.28) !important;margin-left:6px !important;
}
#site-navigation li.elyon-nav-cpv-btn > a:hover,a.elyon-cpv-nav-link:hover {
background:#243058 !important;color:#ffffff !important;box-shadow:0 6px 20px rgba(26,39,68,.38) !important;transform:translateY(-1px) !important;
}
/* ── SECTION STYLES FROM ORIGINAL ── */
line-height: 1;
}
.elyon-hero-stat-label {
font-size: .75rem;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 4px;
display: block;
}
/* ============================================================
SECTION: SOBRE NOSOTROS
============================================================ */
.elyon-sobre {
padding: 110px 5vw;
background: var(--el-white);
}
.elyon-sobre-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 5fr 6fr;
gap: 80px;
align-items: center;
}
.elyon-sobre-media { position: relative; }
.elyon-sobre-media img {
width: 100%;
border-radius: var(--el-radius-lg);
box-shadow: var(--el-shadow-lg);
display: block;
}
.elyon-sobre-media-placeholder {
aspect-ratio: 4/3;
background: linear-gradient(145deg, var(--el-blue), var(--el-navy));
border-radius: var(--el-radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: 100px;
}
/* Accent border */
.elyon-sobre-media::after {
content: '';
position: absolute;
inset: -16px -16px 16px 16px;
border: 2px solid var(--el-gold);
border-radius: var(--el-radius-lg);
z-index: -1;
opacity: .4;
}
/* Floating badge on image */
.elyon-sobre-badge {
position: absolute;
bottom: -20px;
right: -20px;
background: linear-gradient(135deg, var(--el-gold), #8B5E10);
color: #fff;
padding: 18px 24px;
border-radius: var(--el-radius);
box-shadow: var(--el-shadow-gold);
text-align: center;
}
.elyon-sobre-badge strong {
font-family: var(--el-font-display);
font-size: 1.8rem;
display: block;
line-height: 1;
}
.elyon-sobre-badge span {
font-size: .75rem;
opacity: .85;
text-transform: uppercase;
letter-spacing: .1em;
}
.elyon-sobre h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 18px; }
.elyon-sobre-text { color: var(--el-gray-700); margin-bottom: 16px; font-size: 1.02rem; }
.elyon-pilares { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.elyon-pilar {
display: flex; gap: 16px; align-items: flex-start;
}
.elyon-pilar-icon {
width: 46px; height: 46px; min-width: 46px;
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
border-radius: var(--el-radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(26,86,219,.25);
}
.elyon-pilar-title {
font-family: var(--el-font-display);
font-size: .95rem;
color: var(--el-navy);
margin-bottom: 3px;
display: block;
}
.elyon-pilar-desc { font-size: .85rem; color: var(--el-gray-500); }
/* ============================================================
SECTION: AGENDA CITA
============================================================ */
.elyon-cita {
padding: 110px 5vw;
background:
radial-gradient(ellipse 60% 70% at 80% 50%, rgba(26,86,219,.18), transparent),
linear-gradient(145deg, var(--el-navy-mid), var(--el-navy));
position: relative;
overflow: hidden;
}
.elyon-cita::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 48px 48px;
}
.elyon-cita-inner {
position: relative;
max-width: 780px;
margin: 0 auto;
}
.elyon-cita-header { text-align: center; margin-bottom: 48px; }
.elyon-cita-header h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.elyon-cita-header p { color: rgba(255,255,255,.6); font-size: 1.05rem; margin-top: 12px; }
.elyon-form-glass {
background: rgba(255,255,255,.055);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--el-radius-lg);
padding: 44px 48px;
box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.elyon-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.elyon-form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.elyon-form-group label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.55);
}
.elyon-form-group input,
.elyon-form-group textarea,
.elyon-form-group select {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--el-radius-sm);
padding: 13px 16px;
color: #fff;
font-family: var(--el-font-body);
font-size: .95rem;
width: 100%;
outline: none;
transition: border .2s, background .2s;
-webkit-appearance: none;
}
.elyon-form-group input:focus,
.elyon-form-group textarea:focus,
.elyon-form-group select:focus {
border-color: var(--el-gold);
background: rgba(255,255,255,.1);
}
.elyon-form-group input::placeholder,
.elyon-form-group textarea::placeholder { color: rgba(255,255,255,.28); }
.elyon-form-group textarea { resize: vertical; min-height: 110px; }
.elyon-form-group select option { background: #1a2744; color: #fff; }
.elyon-form-submit { text-align: center; margin-top: 8px; }
.elyon-form-submit .elyon-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
/* ============================================================
SECTION: CURSOS GRID
============================================================ */
.elyon-cursos-section {
padding: 110px 5vw;
background: var(--el-off-white);
}
.elyon-section-header {
text-align: center;
margin-bottom: 64px;
}
.elyon-section-header h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.elyon-section-header p {
color: var(--el-gray-500);
max-width: 520px;
margin: 12px auto 0;
font-size: 1.02rem;
}
.elyon-cursos-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.elyon-curso-card {
background: #fff;
border-radius: var(--el-radius);
overflow: hidden;
box-shadow: var(--el-shadow-xs);
display: flex; flex-direction: column;
transition: transform .28s var(--el-ease), box-shadow .28s;
border: 1px solid var(--el-gray-100);
}
.elyon-curso-card:hover {
transform: translateY(-7px);
box-shadow: var(--el-shadow-lg);
}
.elyon-curso-thumb {
position: relative;
height: 210px;
overflow: hidden;
background: linear-gradient(145deg, var(--el-blue), var(--el-navy));
}
.elyon-curso-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .45s var(--el-ease);
}
.elyon-curso-card:hover .elyon-curso-thumb img { transform: scale(1.07); }
.elyon-curso-thumb-empty {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 72px;
opacity: .7;
}
.elyon-curso-cat {
position: absolute; top: 14px; left: 14px;
background: var(--el-gold);
color: var(--el-navy);
font-size: .68rem; font-weight: 800;
padding: 4px 12px; border-radius: 999px;
text-transform: uppercase; letter-spacing: .1em;
}
.elyon-curso-body {
padding: 24px;
flex: 1; display: flex; flex-direction: column;
}
.elyon-curso-meta {
display: flex; gap: 12px;
margin-bottom: 12px;
font-size: .76rem;
color: var(--el-gray-500);
}
.elyon-curso-title {
font-family: var(--el-font-display);
font-size: 1.05rem;
color: var(--el-navy);
margin-bottom: 10px;
line-height: 1.3;
}
.elyon-curso-excerpt {
font-size: .86rem;
color: var(--el-gray-500);
flex: 1;
margin-bottom: 20px;
line-height: 1.65;
}
.elyon-curso-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--el-gray-100);
padding-top: 18px;
gap: 12px;
}
.elyon-curso-price {
font-family: var(--el-font-display);
font-size: 1.25rem;
color: var(--el-royal);
font-weight: 700;
}
.elyon-curso-price.free { color: var(--el-success); }
/* ============================================================
SECTION: DOCENTES
============================================================ */
.elyon-docentes {
padding: 110px 5vw;
background: var(--el-white);
}
.elyon-docentes-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 28px;
}
.elyon-docente-card {
text-align: center;
padding: 36px 24px;
border-radius: var(--el-radius);
border: 1px solid var(--el-gray-100);
background: #fff;
box-shadow: var(--el-shadow-xs);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.elyon-docente-card:hover {
transform: translateY(-5px);
box-shadow: var(--el-shadow-md);
border-color: var(--el-gold);
}
.elyon-docente-avatar {
width: 90px; height: 90px;
border-radius: 50%;
margin: 0 auto 18px;
border: 3px solid var(--el-gold);
object-fit: cover;
display: block;
box-shadow: 0 4px 16px rgba(200,149,42,.25);
}
.elyon-docente-avatar-placeholder {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, var(--el-blue), var(--el-navy));
margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
font-size: 36px;
border: 3px solid var(--el-gold);
}
.elyon-docente-name {
font-family: var(--el-font-display);
font-size: 1rem;
color: var(--el-navy);
margin-bottom: 4px;
}
.elyon-docente-area {
font-size: .8rem;
color: var(--el-royal);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 10px;
}
.elyon-docente-bio {
font-size: .83rem;
color: var(--el-gray-500);
line-height: 1.65;
}
/* ============================================================
SECTION: TESTIMONIOS
============================================================ */
.elyon-testimonios {
padding: 110px 5vw;
background:
radial-gradient(ellipse 50% 80% at 10% 50%, rgba(200,149,42,.07), transparent),
var(--el-off-white);
}
.elyon-testimonios-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.elyon-testimonio {
background: #fff;
border-radius: var(--el-radius);
padding: 32px;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
position: relative;
transition: transform .25s, box-shadow .25s;
}
.elyon-testimonio:hover {
transform: translateY(-4px);
box-shadow: var(--el-shadow-md);
}
.elyon-testimonio::before {
content: '"';
position: absolute; top: 20px; right: 24px;
font-family: var(--el-font-display);
font-size: 5rem;
color: var(--el-gold);
opacity: .15;
line-height: 1;
}
.elyon-testimonio-text {
font-size: .92rem;
color: var(--el-gray-700);
line-height: 1.75;
margin-bottom: 22px;
font-style: italic;
}
.elyon-testimonio-author {
display: flex; align-items: center; gap: 12px;
}
.elyon-testimonio-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
display: flex; align-items: center; justify-content: center;
font-size: 18px; color: #fff;
font-weight: 700;
flex-shrink: 0;
}
.elyon-testimonio-name {
font-family: var(--el-font-display);
font-size: .88rem;
color: var(--el-navy);
display: block;
}
.elyon-testimonio-role {
font-size: .76rem;
color: var(--el-gray-500);
}
.elyon-stars { color: var(--el-gold); font-size: .85rem; margin-bottom: 14px; }
/* ============================================================
SECTION: AULA VIRTUAL (DASHBOARD)
============================================================ */
.elyon-aula-section { background: var(--el-off-white); }
/* Login */
.elyon-login-section {
min-height: 80vh;
display: flex; align-items: center; justify-content: center;
padding: 60px 20px;
background:
radial-gradient(ellipse 70% 60% at 60% 40%, rgba(26,86,219,.18), transparent),
linear-gradient(160deg, var(--el-navy) 0%, var(--el-navy-mid) 60%, #1a2d55 100%);
}
.elyon-login-card {
background: rgba(255,255,255,.055);
backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--el-radius-xl);
padding: 56px 52px;
width: 100%;
max-width: 460px;
box-shadow: 0 32px 80px rgba(0,0,0,.45);
text-align: center;
}
.elyon-login-icon {
font-size: 60px;
display: block;
margin-bottom: 12px;
animation: elyon-float 4s ease-in-out infinite;
}
.elyon-login-card h2 { color: #fff; font-size: 1.7rem; margin-bottom: 6px; }
.elyon-login-card .sub { color: rgba(255,255,255,.5); margin-bottom: 36px; font-size: .9rem; }
.elyon-login-field { margin-bottom: 18px; text-align: left; }
.elyon-login-field label {
display: block;
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em;
color: rgba(255,255,255,.5);
margin-bottom: 7px;
}
.elyon-login-field input {
width: 100%;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--el-radius-sm);
padding: 14px 18px;
color: #fff;
font-family: var(--el-font-body);
font-size: .95rem;
outline: none;
transition: border .2s, background .2s;
}
.elyon-login-field input:focus {
border-color: var(--el-gold);
background: rgba(255,255,255,.1);
}
.elyon-login-field input::placeholder { color: rgba(255,255,255,.25); }
.elyon-login-forgot { text-align: right; margin-top: -10px; margin-bottom: 20px; }
.elyon-login-forgot a { font-size: .78rem; color: var(--el-gold-lt); text-decoration: none; }
.elyon-login-error {
background: rgba(185,28,28,.15);
border: 1px solid rgba(185,28,28,.35);
color: #fca5a5;
border-radius: var(--el-radius-sm);
padding: 12px 16px;
font-size: .85rem;
margin-bottom: 18px;
text-align: left;
}
.elyon-login-register {
margin-top: 26px;
font-size: .84rem;
color: rgba(255,255,255,.4);
}
.elyon-login-register a { color: var(--el-gold-lt); text-decoration: none; font-weight: 700; }
/* Dashboard */
.elyon-dash-wrap { min-height: 80vh; background: var(--el-off-white); }
.elyon-dash-topbar {
background: linear-gradient(135deg, var(--el-navy), var(--el-blue));
padding: 40px 5vw 90px;
position: relative;
overflow: hidden;
}
.elyon-dash-topbar::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 40px 40px;
}
.elyon-dash-topbar::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0;
height: 70px;
background: var(--el-off-white);
clip-path: ellipse(55% 100% at 50% 100%);
}
.elyon-dash-user {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: flex; align-items: center; gap: 24px;
}
.elyon-dash-avatar {
width: 86px; height: 86px;
border-radius: 50%;
border: 3px solid var(--el-gold);
object-fit: cover;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
flex-shrink: 0;
}
.elyon-dash-name { color: #fff; font-size: 1.55rem; margin-bottom: 4px; }
.elyon-dash-email { color: rgba(255,255,255,.55); font-size: .85rem; }
.elyon-dash-rank-pill {
margin-left: auto;
background: rgba(200,149,42,.14);
border: 1px solid rgba(200,149,42,.4);
color: var(--el-gold-lt);
padding: 9px 22px; border-radius: 999px;
font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
white-space: nowrap;
}
.elyon-dash-body {
max-width: 1280px;
margin: -50px auto 0;
padding: 0 5vw 80px;
position: relative;
}
.elyon-widgets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 26px;
}
.elyon-widget {
background: #fff;
border-radius: var(--el-radius);
padding: 22px 24px;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
}
.elyon-widget-ico { font-size: 26px; margin-bottom: 10px; }
.elyon-widget-num {
font-family: var(--el-font-display);
font-size: 1.9rem;
color: var(--el-navy);
line-height: 1;
margin-bottom: 4px;
}
.elyon-widget-lbl {
font-size: .72rem;
color: var(--el-gray-500);
text-transform: uppercase;
letter-spacing: .1em;
}
/* Tabs */
.elyon-tabs-nav {
display: flex; gap: 6px;
background: #fff;
padding: 8px;
border-radius: var(--el-radius);
box-shadow: var(--el-shadow-xs);
margin-bottom: 22px;
flex-wrap: wrap;
border: 1px solid var(--el-gray-100);
}
.elyon-tab-btn {
flex: 1; min-width: 130px;
padding: 12px 18px;
background: transparent;
border: none; border-radius: var(--el-radius-sm);
font-family: var(--el-font-body);
font-size: .88rem; font-weight: 700;
color: var(--el-gray-500);
cursor: pointer;
transition: all .2s;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.elyon-tab-btn:hover { background: var(--el-gray-100); color: var(--el-navy); }
.elyon-tab-btn.active {
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
color: #fff;
box-shadow: 0 4px 14px rgba(26,86,219,.3);
}
.elyon-tab-pane { display: none; }
.elyon-tab-pane.active { display: block; animation: elyon-fade-in .25s ease; }
/* Table */
.elyon-table-card {
background: #fff;
border-radius: var(--el-radius);
overflow: hidden;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
}
.elyon-table-card-head {
background: linear-gradient(135deg, var(--el-navy), var(--el-blue));
padding: 20px 26px;
display: flex; align-items: center; justify-content: space-between;
}
.elyon-table-card-head h3 { color: #fff; font-size: 1rem; margin: 0; }
table.elyon-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.elyon-table thead th {
background: #f8fafc;
padding: 12px 22px;
text-align: left;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--el-gray-500);
border-bottom: 1px solid var(--el-gray-100);
font-family: var(--el-font-body);
font-weight: 700;
}
table.elyon-table tbody td {
padding: 15px 22px;
border-bottom: 1px solid var(--el-gray-100);
vertical-align: middle;
}
table.elyon-table tbody tr:last-child td { border-bottom: none; }
table.elyon-table tbody tr:hover { background: #f8fafc; }
/* Transferencia */
.elyon-transfer-box {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border: 1px solid #fde68a;
border-radius: var(--el-radius);
padding: 28px;
margin-top: 22px;
}
.elyon-transfer-box h4 {
font-family: var(--el-font-display);
color: var(--el-navy);
margin-bottom: 18px;
display: flex; align-items: center; gap: 8px;
font-size: 1rem;
}
.elyon-transfer-row {
display: flex; justify-content: space-between;
padding: 9px 0;
border-bottom: 1px solid rgba(0,0,0,.05);
font-size: .88rem;
}
.elyon-transfer-row:last-of-type { border-bottom: none; }
.elyon-transfer-row .lbl { color: var(--el-gray-500); }
.elyon-transfer-row strong { color: var(--el-navy); }
/* Aptitudes */
.elyon-aptitudes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 16px;
margin-top: 18px;
}
.elyon-aptitud {
background: var(--el-off-white);
border: 1px solid var(--el-gray-100);
border-radius: var(--el-radius);
padding: 22px;
text-align: center;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.elyon-aptitud:hover {
transform: translateY(-3px);
box-shadow: var(--el-shadow);
border-color: var(--el-gold);
}
.elyon-aptitud-ico { font-size: 34px; margin-bottom: 10px; }
.elyon-aptitud-nombre { font-family: var(--el-font-display); font-size: .88rem; color: var(--el-navy); margin-bottom: 4px; }
.elyon-aptitud-pts { font-family: var(--el-font-display); font-size: 1.4rem; color: var(--el-royal); }
.elyon-aptitud-lbl { font-size: .68rem; color: var(--el-gray-500); text-transform: uppercase; letter-spacing: .1em; }
/* ============================================================
BLOG / NOTICIAS
============================================================ */
.elyon-blog-section { padding: 80px 5vw; background: var(--el-white); }
.elyon-blog-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
}
.elyon-blog-card {
background: #fff; border-radius: var(--el-radius);
overflow: hidden;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
display: flex; flex-direction: column;
transition: transform .25s, box-shadow .25s;
}
.elyon-blog-card:hover { transform: translateY(-5px); box-shadow: var(--el-shadow-md); }
.elyon-blog-thumb { height: 200px; overflow: hidden; background: linear-gradient(145deg,var(--el-blue),var(--el-navy)); }
.elyon-blog-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.elyon-blog-card:hover .elyon-blog-thumb img { transform:scale(1.05); }
.elyon-blog-body { padding: 26px; flex:1; display:flex; flex-direction:column; }
.elyon-blog-date { font-size:.72rem; color:var(--el-gray-500); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.elyon-blog-title { font-family:var(--el-font-display); font-size:1rem; color:var(--el-navy); margin-bottom:10px; line-height:1.3; }
.elyon-blog-excerpt { font-size:.85rem; color:var(--el-gray-500); flex:1; margin-bottom:18px; line-height:1.65; }
.elyon-blog-link { font-size:.82rem; font-weight:700; color:var(--el-royal); text-decoration:none; }
.elyon-blog-link:hover { color:var(--el-gold); }
/* ============================================================
CONTACTO
============================================================ */
.elyon-contacto { padding: 110px 5vw; background: var(--el-off-white); }
.elyon-contacto-inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;
}
.elyon-contacto-info h2 { font-size: clamp(1.6rem,3vw,2.4rem); margin-bottom: 16px; }
.elyon-contacto-info p { color: var(--el-gray-500); margin-bottom: 32px; line-height: 1.75; }
.elyon-contacto-items { display: flex; flex-direction: column; gap: 20px; }
.elyon-contacto-item {
display: flex; gap: 16px; align-items: flex-start;
}
.elyon-contacto-item-icon {
width: 46px; height: 46px; min-width: 46px;
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
border-radius: var(--el-radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.elyon-contacto-item strong { display: block; color: var(--el-navy); font-size: .9rem; margin-bottom: 2px; }
.elyon-contacto-item span { font-size: .85rem; color: var(--el-gray-500); }
.elyon-contacto-form-wrap {
background: #fff;
border-radius: var(--el-radius-lg);
padding: 44px 40px;
box-shadow: var(--el-shadow);
border: 1px solid var(--el-gray-100);
}
.elyon-contacto-form-wrap h3 {
font-family: var(--el-font-display);
font-size: 1.4rem; margin-bottom: 28px; color: var(--el-navy);
}
.elyon-contacto-form .elyon-form-group input,
.elyon-contacto-form .elyon-form-group textarea,
.elyon-contacto-form .elyon-form-group select {
background: var(--el-off-white);
border: 1px solid var(--el-gray-100);
color: var(--el-text);
}
.elyon-contacto-form .elyon-form-group input:focus,
.elyon-contacto-form .elyon-form-group textarea:focus {
border-color: var(--el-royal);
background: #fff;
}
.elyon-contacto-form .elyon-form-group label { color: var(--el-gray-700); }
.elyon-contacto-form .elyon-form-group input::placeholder,
.elyon-contacto-form .elyon-form-group textarea::placeholder { color: var(--el-gray-300); }
/* ============================================================
PAGE HERO (inner pages)
============================================================ */
.elyon-page-hero {
background: linear-gradient(135deg, var(--el-navy), var(--el-blue));
padding: 80px 5vw 90px;
text-align: center;
position: relative;
overflow: hidden;
}
.elyon-page-hero::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0;
height: 50px;
background: var(--el-white);
clip-path: ellipse(55% 100% at 50% 100%);
}
.elyon-page-hero h1 { color: #fff; font-size: clamp(2rem,4vw,3rem); }
.elyon-page-hero p { color: rgba(255,255,255,.6); margin-top: 12px; font-size: 1.05rem; }
.elyon-breadcrumb { color: rgba(255,255,255,.4); font-size: .82rem; margin-bottom: 14px; }
.elyon-breadcrumb a { color: var(--el-gold-lt); text-decoration: none; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.elyon-hero-inner { grid-template-columns: 1fr; }
.elyon-hero-visual { display: none; }
.elyon-sobre-inner { grid-template-columns: 1fr; gap: 48px; }
/* ── COMPLETE ORIGINAL SECTIONS ── */
.elyon-pilar-desc { font-size: .85rem; color: var(--el-gray-500); }
/* ============================================================
SECTION: AGENDA CITA
============================================================ */
.elyon-cita {
padding: 110px 5vw;
background:
radial-gradient(ellipse 60% 70% at 80% 50%, rgba(26,86,219,.18), transparent),
linear-gradient(145deg, var(--el-navy-mid), var(--el-navy));
position: relative;
overflow: hidden;
}
.elyon-cita::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 48px 48px;
}
.elyon-cita-inner {
position: relative;
max-width: 780px;
margin: 0 auto;
}
.elyon-cita-header { text-align: center; margin-bottom: 48px; }
.elyon-cita-header h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.elyon-cita-header p { color: rgba(255,255,255,.6); font-size: 1.05rem; margin-top: 12px; }
.elyon-form-glass {
background: rgba(255,255,255,.055);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--el-radius-lg);
padding: 44px 48px;
box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.elyon-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.elyon-form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.elyon-form-group label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.55);
}
.elyon-form-group input,
.elyon-form-group textarea,
.elyon-form-group select {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--el-radius-sm);
padding: 13px 16px;
color: #fff;
font-family: var(--el-font-body);
font-size: .95rem;
width: 100%;
outline: none;
transition: border .2s, background .2s;
-webkit-appearance: none;
}
.elyon-form-group input:focus,
.elyon-form-group textarea:focus,
.elyon-form-group select:focus {
border-color: var(--el-gold);
background: rgba(255,255,255,.1);
}
.elyon-form-group input::placeholder,
.elyon-form-group textarea::placeholder { color: rgba(255,255,255,.28); }
.elyon-form-group textarea { resize: vertical; min-height: 110px; }
.elyon-form-group select option { background: #1a2744; color: #fff; }
.elyon-form-submit { text-align: center; margin-top: 8px; }
.elyon-form-submit .elyon-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
/* ============================================================
SECTION: CURSOS GRID
============================================================ */
.elyon-cursos-section {
padding: 110px 5vw;
background: var(--el-off-white);
}
.elyon-section-header {
text-align: center;
margin-bottom: 64px;
}
.elyon-section-header h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.elyon-section-header p {
color: var(--el-gray-500);
max-width: 520px;
margin: 12px auto 0;
font-size: 1.02rem;
}
.elyon-cursos-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.elyon-curso-card {
background: #fff;
border-radius: var(--el-radius);
overflow: hidden;
box-shadow: var(--el-shadow-xs);
display: flex; flex-direction: column;
transition: transform .28s var(--el-ease), box-shadow .28s;
border: 1px solid var(--el-gray-100);
}
.elyon-curso-card:hover {
transform: translateY(-7px);
box-shadow: var(--el-shadow-lg);
}
.elyon-curso-thumb {
position: relative;
height: 210px;
overflow: hidden;
background: linear-gradient(145deg, var(--el-blue), var(--el-navy));
}
.elyon-curso-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .45s var(--el-ease);
}
.elyon-curso-card:hover .elyon-curso-thumb img { transform: scale(1.07); }
.elyon-curso-thumb-empty {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 72px;
opacity: .7;
}
.elyon-curso-cat {
position: absolute; top: 14px; left: 14px;
background: var(--el-gold);
color: var(--el-navy);
font-size: .68rem; font-weight: 800;
padding: 4px 12px; border-radius: 999px;
text-transform: uppercase; letter-spacing: .1em;
}
.elyon-curso-body {
padding: 24px;
flex: 1; display: flex; flex-direction: column;
}
.elyon-curso-meta {
display: flex; gap: 12px;
margin-bottom: 12px;
font-size: .76rem;
color: var(--el-gray-500);
}
.elyon-curso-title {
font-family: var(--el-font-display);
font-size: 1.05rem;
color: var(--el-navy);
margin-bottom: 10px;
line-height: 1.3;
}
.elyon-curso-excerpt {
font-size: .86rem;
color: var(--el-gray-500);
flex: 1;
margin-bottom: 20px;
line-height: 1.65;
}
.elyon-curso-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--el-gray-100);
padding-top: 18px;
gap: 12px;
}
.elyon-curso-price {
font-family: var(--el-font-display);
font-size: 1.25rem;
color: var(--el-royal);
font-weight: 700;
}
.elyon-curso-price.free { color: var(--el-success); }
/* ============================================================
SECTION: DOCENTES
============================================================ */
.elyon-docentes {
padding: 110px 5vw;
background: var(--el-white);
}
.elyon-docentes-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 28px;
}
.elyon-docente-card {
text-align: center;
padding: 36px 24px;
border-radius: var(--el-radius);
border: 1px solid var(--el-gray-100);
background: #fff;
box-shadow: var(--el-shadow-xs);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.elyon-docente-card:hover {
transform: translateY(-5px);
box-shadow: var(--el-shadow-md);
border-color: var(--el-gold);
}
.elyon-docente-avatar {
width: 90px; height: 90px;
border-radius: 50%;
margin: 0 auto 18px;
border: 3px solid var(--el-gold);
object-fit: cover;
display: block;
box-shadow: 0 4px 16px rgba(200,149,42,.25);
}
.elyon-docente-avatar-placeholder {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, var(--el-blue), var(--el-navy));
margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
font-size: 36px;
border: 3px solid var(--el-gold);
}
.elyon-docente-name {
font-family: var(--el-font-display);
font-size: 1rem;
color: var(--el-navy);
margin-bottom: 4px;
}
.elyon-docente-area {
font-size: .8rem;
color: var(--el-royal);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 10px;
}
.elyon-docente-bio {
font-size: .83rem;
color: var(--el-gray-500);
line-height: 1.65;
}
/* ============================================================
SECTION: TESTIMONIOS
============================================================ */
.elyon-testimonios {
padding: 110px 5vw;
background:
radial-gradient(ellipse 50% 80% at 10% 50%, rgba(200,149,42,.07), transparent),
var(--el-off-white);
}
.elyon-testimonios-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.elyon-testimonio {
background: #fff;
border-radius: var(--el-radius);
padding: 32px;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
position: relative;
transition: transform .25s, box-shadow .25s;
}
.elyon-testimonio:hover {
transform: translateY(-4px);
box-shadow: var(--el-shadow-md);
}
.elyon-testimonio::before {
content: '"';
position: absolute; top: 20px; right: 24px;
font-family: var(--el-font-display);
font-size: 5rem;
color: var(--el-gold);
opacity: .15;
line-height: 1;
}
.elyon-testimonio-text {
font-size: .92rem;
color: var(--el-gray-700);
line-height: 1.75;
margin-bottom: 22px;
font-style: italic;
}
.elyon-testimonio-author {
display: flex; align-items: center; gap: 12px;
}
.elyon-testimonio-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
display: flex; align-items: center; justify-content: center;
font-size: 18px; color: #fff;
font-weight: 700;
flex-shrink: 0;
}
.elyon-testimonio-name {
font-family: var(--el-font-display);
font-size: .88rem;
color: var(--el-navy);
display: block;
}
.elyon-testimonio-role {
font-size: .76rem;
color: var(--el-gray-500);
}
.elyon-stars { color: var(--el-gold); font-size: .85rem; margin-bottom: 14px; }
/* ============================================================
SECTION: AULA VIRTUAL (DASHBOARD)
============================================================ */
.elyon-aula-section { background: var(--el-off-white); }
/* Login */
.elyon-login-section {
min-height: 80vh;
display: flex; align-items: center; justify-content: center;
padding: 60px 20px;
background:
radial-gradient(ellipse 70% 60% at 60% 40%, rgba(26,86,219,.18), transparent),
linear-gradient(160deg, var(--el-navy) 0%, var(--el-navy-mid) 60%, #1a2d55 100%);
}
.elyon-login-card {
background: rgba(255,255,255,.055);
backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--el-radius-xl);
padding: 56px 52px;
width: 100%;
max-width: 460px;
box-shadow: 0 32px 80px rgba(0,0,0,.45);
text-align: center;
}
.elyon-login-icon {
font-size: 60px;
display: block;
margin-bottom: 12px;
animation: elyon-float 4s ease-in-out infinite;
}
.elyon-login-card h2 { color: #fff; font-size: 1.7rem; margin-bottom: 6px; }
.elyon-login-card .sub { color: rgba(255,255,255,.5); margin-bottom: 36px; font-size: .9rem; }
.elyon-login-field { margin-bottom: 18px; text-align: left; }
.elyon-login-field label {
display: block;
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em;
color: rgba(255,255,255,.5);
margin-bottom: 7px;
}
.elyon-login-field input {
width: 100%;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--el-radius-sm);
padding: 14px 18px;
color: #fff;
font-family: var(--el-font-body);
font-size: .95rem;
outline: none;
transition: border .2s, background .2s;
}
.elyon-login-field input:focus {
border-color: var(--el-gold);
background: rgba(255,255,255,.1);
}
.elyon-login-field input::placeholder { color: rgba(255,255,255,.25); }
.elyon-login-forgot { text-align: right; margin-top: -10px; margin-bottom: 20px; }
.elyon-login-forgot a { font-size: .78rem; color: var(--el-gold-lt); text-decoration: none; }
.elyon-login-error {
background: rgba(185,28,28,.15);
border: 1px solid rgba(185,28,28,.35);
color: #fca5a5;
border-radius: var(--el-radius-sm);
padding: 12px 16px;
font-size: .85rem;
margin-bottom: 18px;
text-align: left;
}
.elyon-login-register {
margin-top: 26px;
font-size: .84rem;
color: rgba(255,255,255,.4);
}
.elyon-login-register a { color: var(--el-gold-lt); text-decoration: none; font-weight: 700; }
/* Dashboard */
.elyon-dash-wrap { min-height: 80vh; background: var(--el-off-white); }
.elyon-dash-topbar {
background: linear-gradient(135deg, var(--el-navy), var(--el-blue));
padding: 40px 5vw 90px;
position: relative;
overflow: hidden;
}
.elyon-dash-topbar::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 40px 40px;
}
.elyon-dash-topbar::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0;
height: 70px;
background: var(--el-off-white);
clip-path: ellipse(55% 100% at 50% 100%);
}
.elyon-dash-user {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: flex; align-items: center; gap: 24px;
}
.elyon-dash-avatar {
width: 86px; height: 86px;
border-radius: 50%;
border: 3px solid var(--el-gold);
object-fit: cover;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
flex-shrink: 0;
}
.elyon-dash-name { color: #fff; font-size: 1.55rem; margin-bottom: 4px; }
.elyon-dash-email { color: rgba(255,255,255,.55); font-size: .85rem; }
.elyon-dash-rank-pill {
margin-left: auto;
background: rgba(200,149,42,.14);
border: 1px solid rgba(200,149,42,.4);
color: var(--el-gold-lt);
padding: 9px 22px; border-radius: 999px;
font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
white-space: nowrap;
}
.elyon-dash-body {
max-width: 1280px;
margin: -50px auto 0;
padding: 0 5vw 80px;
position: relative;
}
.elyon-widgets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 26px;
}
.elyon-widget {
background: #fff;
border-radius: var(--el-radius);
padding: 22px 24px;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
}
.elyon-widget-ico { font-size: 26px; margin-bottom: 10px; }
.elyon-widget-num {
font-family: var(--el-font-display);
font-size: 1.9rem;
color: var(--el-navy);
line-height: 1;
margin-bottom: 4px;
}
.elyon-widget-lbl {
font-size: .72rem;
color: var(--el-gray-500);
text-transform: uppercase;
letter-spacing: .1em;
}
/* Tabs */
.elyon-tabs-nav {
display: flex; gap: 6px;
background: #fff;
padding: 8px;
border-radius: var(--el-radius);
box-shadow: var(--el-shadow-xs);
margin-bottom: 22px;
flex-wrap: wrap;
border: 1px solid var(--el-gray-100);
}
.elyon-tab-btn {
flex: 1; min-width: 130px;
padding: 12px 18px;
background: transparent;
border: none; border-radius: var(--el-radius-sm);
font-family: var(--el-font-body);
font-size: .88rem; font-weight: 700;
color: var(--el-gray-500);
cursor: pointer;
transition: all .2s;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.elyon-tab-btn:hover { background: var(--el-gray-100); color: var(--el-navy); }
.elyon-tab-btn.active {
background: linear-gradient(135deg, var(--el-royal), var(--el-blue));
color: #fff;
box-shadow: 0 4px 14px rgba(26,86,219,.3);
}
.elyon-tab-pane { display: none; }
.elyon-tab-pane.active { display: block; animation: elyon-fade-in .25s ease; }
/* Table */
.elyon-table-card {
background: #fff;
border-radius: var(--el-radius);
overflow: hidden;
box-shadow: var(--el-shadow-xs);
border: 1px solid var(--el-gray-100);
}
.elyon-table-card-head {
background: linear-gradient(135deg, var(--el-navy), var(--el-blue));
padding: 20px 26px;
display: flex; align-items: center; justify-content: space-between;
}
.elyon-table-card-head h3 { color: #fff; font-size: 1rem; margin: 0; }
table.elyon-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.elyon-table thead th {
background: #f8fafc;
padding: 12px 22px;
text-align: left;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--el-gray-500);
border-bottom: 1px solid var(--el-gray-100);
font-family: var(--el-font-body);
font-weight: 700;
}
table.elyon-table tbody td {
padding: 15px 22px;
border-bottom: 1px solid var(--el-gray-100);
vertical-align: middle;
}
table.elyon-table tbody tr:last-child td { border-bottom: none; }
table.elyon-table tbody tr:hover { background: #f8fafc; }
/* Transferencia */
.elyon-transfer-box {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border: 1px solid #fde68a;
border-radius: var(--el-radius);
padding: 28px;
/* ================================================================
TESTIMONIOS REDISEÑO — Más divertidos y dinámicos
================================================================ */
.elyon-testimonios { padding:120px 5vw; background:var(--el-bg); overflow:hidden; position:relative; }
.elyon-testimonios::before {
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 60% 50% at 20% 50%, rgba(26,39,68,.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 80% 50%, rgba(5,150,105,.05) 0%, transparent 60%);
pointer-events:none;
}
.elyon-testimonios-grid {
max-width:1320px; margin:0 auto;
display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.elyon-testimonio {
background:var(--el-surface);
border-radius:20px;
padding:28px;
border:1px solid var(--el-border-lt);
box-shadow:var(--el-sh-xs);
position:relative; overflow:hidden;
transition:transform .3s var(--el-out), box-shadow .3s, border-color .3s;
}
.elyon-testimonio::after {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(26,39,68,.04), transparent 60%);
opacity:0; transition:opacity .3s;
}
.elyon-testimonio:hover { transform:translateY(-6px) rotate(0.5deg); box-shadow:var(--el-sh-lg); border-color:rgba(26,39,68,.25); }
.elyon-testimonio:hover::after { opacity:1; }
/* Colorful top border per card */
.elyon-testimonio:nth-child(1) { border-top:3px solid #1A2744; }
.elyon-testimonio:nth-child(2) { border-top:3px solid #A8884A; }
.elyon-testimonio:nth-child(3) { border-top:3px solid #C4A362; }
.elyon-testimonio:nth-child(4) { border-top:3px solid #4A6FA5; }
.elyon-testimonio:nth-child(5) { border-top:3px solid #2C5282; }
.elyon-testimonio:nth-child(6) { border-top:3px solid #8B7355; }
/* Big quote mark */
.elyon-testimonio::before {
content:'"'; position:absolute; top:12px; right:18px;
font-family:var(--el-display); font-size:5rem; font-weight:900;
color:var(--el-indigo); opacity:.07; line-height:1;
}
.elyon-stars { font-size:.9rem; margin-bottom:14px; letter-spacing:2px;
background:linear-gradient(135deg,#C4A362,#A8884A);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.elyon-testimonio-text { font-size:.92rem; color:var(--el-muted); line-height:1.75; margin-bottom:20px; font-style:italic; }
.elyon-testimonio-author { display:flex; align-items:center; gap:12px; }
.elyon-testimonio-avatar {
width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:16px; color:#fff; flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}
/* Colorful avatars */
.elyon-testimonio:nth-child(1) .elyon-testimonio-avatar { background:linear-gradient(135deg,#243560,#1A2744); }
.elyon-testimonio:nth-child(2) .elyon-testimonio-avatar { background:linear-gradient(135deg,#C4A362,#A8884A); }
.elyon-testimonio:nth-child(3) .elyon-testimonio-avatar { background:linear-gradient(135deg,#F59E0B,#D97706); }
.elyon-testimonio:nth-child(4) .elyon-testimonio-avatar { background:linear-gradient(135deg,#EC4899,#DB2777); }
.elyon-testimonio:nth-child(5) .elyon-testimonio-avatar { background:linear-gradient(135deg,#8B5CF6,#7C3AED); }
.elyon-testimonio:nth-child(6) .elyon-testimonio-avatar { background:linear-gradient(135deg,#06B6D4,#0891B2); }
.elyon-testimonio-name { font-family:var(--el-display); font-size:.9rem; font-weight:700; color:var(--el-text); display:block; }
.elyon-testimonio-role { font-size:.75rem; color:var(--el-muted); }
/* ================================================================
SCROLL ANIMATIONS — Más movimiento en toda la página
================================================================ */
@keyframes slide-up { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-left { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes slide-right{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes zoom-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes pop-in { from{opacity:0;transform:scale(.8) rotate(-3deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes bounce-in { 0%{opacity:0;transform:translateY(60px)} 60%{transform:translateY(-10px)} 80%{transform:translateY(5px)} 100%{opacity:1;transform:translateY(0)} }
/* Clases de animación al hacer scroll — aplicadas via JS */
.anim-hidden { opacity:0; }
.anim-slide-up { animation:slide-up .7s var(--el-out) forwards; }
.anim-slide-left { animation:slide-left .7s var(--el-out) forwards; }
.anim-slide-right { animation:slide-right .7s var(--el-out) forwards; }
.anim-zoom-in { animation:zoom-in .6s var(--el-out) forwards; }
.anim-pop-in { animation:pop-in .5s var(--el-out) forwards; }
.anim-bounce-in { animation:bounce-in .8s var(--el-out) forwards; }
/* Delays */
.anim-d1 { animation-delay:.1s; }
.anim-d2 { animation-delay:.2s; }
.anim-d3 { animation-delay:.3s; }
.anim-d4 { animation-delay:.4s; }
.anim-d5 { animation-delay:.5s; }
/* Shimmer en botones principales */
.elyon-btn-primary::after, .elyon-btn-gold::after {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
background-size:200% 100%;
animation:shimmer 3s ease-in-out infinite;
border-radius:inherit; pointer-events:none;
}
.elyon-btn { position:relative; overflow:hidden; }
/* Hover más expresivo en curso cards */
.elyon-curso-card { cursor:pointer; }
.elyon-curso-card:hover { transform:translateY(-10px) scale(1.02); }
/* Widget counter animation */
.elyon-widget-num { transition:color .3s; }
.elyon-widget:hover .elyon-widget-num { color:var(--el-indigo); }
/* Pulsing indicator en hero pill */
.elyon-hero-pill { animation:el-fade-up .8s var(--el-out); }
/* Floating background shapes */
.elyon-hero::after {
content:''; position:absolute; width:600px; height:600px; border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,.15) 0%,transparent 70%);
bottom:-200px; right:-100px; pointer-events:none; z-index:1;
animation:el-float 8s ease-in-out infinite;
}
/* Barra de progreso animada en habilidades */
.elyon-progress-fill { animation:progress-grow 1.5s var(--el-out) forwards; }
@keyframes progress-grow { from{width:0} }
/* Ripple en botones al click */
@keyframes ripple { to{transform:scale(4);opacity:0;} }
.elyon-btn:active::before {
content:''; position:absolute; width:40px; height:40px;
background:rgba(255,255,255,.3); border-radius:50%;
top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
animation:ripple .6s ease-out;
}
/* Gradient border animado en login card */
@keyframes border-flow {
0% { background-position:0% 50%; }
50% { background-position:100% 50%; }
100%{ background-position:0% 50%; }
}
.elyon-login-card::after {
content:''; position:absolute; inset:-2px;
background:linear-gradient(270deg,#1A2744,#C4A362,#F59E0B,#EC4899,#1A2744);
background-size:400% 400%;
border-radius:calc(var(--el-r-xl) + 2px);
z-index:-1;
animation:border-flow 4s ease infinite;
opacity:.6;
}
/* ================================================================
FIXES DEFINITIVOS — Overrides de prioridad máxima
================================================================ */
/* Forzar fondo oscuro en sección cita (evita duplicados) */
section.elyon-cita,
.elyon-cita {
background: linear-gradient(135deg, #1A2744 0%, #243560 50%, #1A2744 100%) !important;
position: relative !important;
overflow: hidden !important;
}
/* Form glass con fondo visible */
.elyon-cita .elyon-form-glass {
background: rgba(255,255,255,.12) !important;
backdrop-filter: blur(24px) saturate(1.5) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
border: 1px solid rgba(255,255,255,.25) !important;
border-radius: 24px !important;
padding: 48px 52px !important;
box-shadow: 0 32px 80px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
/* Labels e inputs BLANCOS en cita (fondo oscuro) */
.elyon-cita .elyon-form-group label {
color: rgba(255,255,255,.75) !important;
font-size: .67rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .15em !important;
}
.elyon-cita .elyon-form-group input,
.elyon-cita .elyon-form-group textarea,
.elyon-cita .elyon-form-group select {
background: rgba(255,255,255,.15) !important;
border: 1px solid rgba(255,255,255,.25) !important;
color: #fff !important;
border-radius: 10px !important;
padding: 13px 16px !important;
font-size: .94rem !important;
width: 100% !important;
transition: border-color .2s, background .2s !important;
}
.elyon-cita .elyon-form-group input:focus,
.elyon-cita .elyon-form-group textarea:focus,
.elyon-cita .elyon-form-group select:focus {
border-color: #fff !important;
background: rgba(255,255,255,.2) !important;
box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important;
outline: none !important;
}
.elyon-cita .elyon-form-group input::placeholder,
.elyon-cita .elyon-form-group textarea::placeholder {
color: rgba(255,255,255,.38) !important;
}
.elyon-cita .elyon-form-group select option {
background: #243560 !important;
color: #fff !important;
}
/* Header de la cita */
.elyon-cita-header h2 { color: #fff !important; }
.elyon-cita-header p { color: rgba(255,255,255,.7) !important; }
/* ================================================================
ANIMACIONES EXTRA — Micro-interacciones con el usuario
================================================================ */
/* Cursor personalizado en elementos interactivos */
.elyon-curso-card, .elyon-testimonio, .elyon-pilar { cursor:default; }
/* Efecto tilt 3D en curso cards */
.elyon-curso-card {
transform-style: preserve-3d;
transition: transform .4s var(--el-out), box-shadow .4s !important;
will-change: transform;
}
/* Glow de color en hover de pilares */
.elyon-pilar:hover {
box-shadow: 0 20px 60px rgba(26,39,68,.15), 0 0 0 1px rgba(26,39,68,.1) !important;
}
/* Botones con efecto de escala y glow */
.elyon-btn-primary:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 12px 40px rgba(26,39,68,.4) !important;
}
.elyon-btn-gold:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 12px 40px rgba(217,119,6,.4) !important;
}
/* Línea de progreso animada bajo el logo */
@keyframes progress-line {
0% { width: 0%; opacity: 1; }
70% { width: 100%; opacity: 1; }
100% { width: 100%; opacity: 0; }
}
.ast-site-title-wrap a::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, var(--el-indigo), var(--el-emerald-lt));
animation: progress-line 3s ease-in-out infinite;
border-radius: 2px;
margin-top: 2px;
}
/* Efecto focus visible en inputs (accesibilidad + estética) */
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--el-indigo) !important;
outline-offset: 2px !important;
}
/* Transición suave al hacer hover en nav links */
.main-navigation .menu-item > a::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, var(--el-indigo), var(--el-emerald-lt));
transform: scaleX(0);
transition: transform .3s var(--el-out);
transform-origin: left;
border-radius: 2px;
margin-top: 2px;
}
.main-navigation .menu-item > a:hover::after { transform: scaleX(1); }
/* Floating dots decoration en hero */
@keyframes float-dot {
0%,100% { transform: translateY(0) rotate(0deg); opacity:.4; }
50% { transform: translateY(-20px) rotate(180deg); opacity:.8; }
}
.elyon-hero-bg::after {
content: '';
position: absolute;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(252,211,77,.2) 0%, transparent 70%);
top: 20%; left: 5%;
border-radius: 50%;
animation: float-dot 6s ease-in-out infinite;
pointer-events: none;
}
/* Gradiente animado en sección CTA/cita */
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.elyon-cita {
background-size: 200% 200% !important;
animation: gradient-shift 8s ease infinite !important;
}
/* Hover lift en testimonios más expresivo */
.elyon-testimonio:hover {
transform: translateY(-8px) rotate(0.5deg) scale(1.02) !important;
z-index: 2;
}
/* Input label float (efecto moderno) */
.elyon-cita .elyon-form-group {
position: relative;
}
/* Success state en form submit */
@keyframes success-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,.4); }
50% { box-shadow: 0 0 0 12px rgba(5,150,105,0); }
}
.elyon-btn-gold.success {
background: linear-gradient(135deg, #C4A362, #A8884A) !important;
animation: success-pulse 1.5s ease-in-out 3;
}
/* ================================================================
FIX — Page Hero texto visible + fondo forzado
================================================================ */
/* Forzar fondo en hero de páginas interiores */
.elyon-page-hero,
section.elyon-page-hero {
background: linear-gradient(135deg, #1A2744 0%, #243560 50%, #0F1A30 100%) !important;
padding: 90px 5vw 100px !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
.elyon-page-hero::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important;
background-size: 48px 48px !important;
z-index: 0 !important;
}
/* Onda inferior blanca */
.elyon-page-hero::after {
content: '' !important;
position: absolute !important;
bottom: -1px !important; left: 0 !important; right: 0 !important;
height: 60px !important;
background: var(--el-bg, #F7F8FA) !important;
clip-path: ellipse(55% 100% at 50% 100%) !important;
z-index: 1 !important;
}
.elyon-page-hero h1,
.elyon-page-hero h2 {
position: relative !important;
z-index: 2 !important;
color: #ffffff !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
margin-bottom: 12px !important;
}
.elyon-page-hero p,
.elyon-page-hero .elyon-breadcrumb {
position: relative !important;
z-index: 2 !important;
color: rgba(255,255,255,.75) !important;
font-size: 1.05rem !important;
}
/* Breadcrumb links */
.elyon-page-hero a,
.elyon-breadcrumb a {
color: #C4A362 !important;
}
/* Label dentro del hero */
.elyon-page-hero .elyon-label {
position: relative !important;
z-index: 2 !important;
color: #C4A362 !important;
justify-content: center !important;
}
.elyon-page-hero .elyon-label::before {
background: #C4A362 !important;
}
/* ── CPV button — igual al botón ELYON → de la página CPV ── */
/* El no debe estirarse al alto del header */
#site-navigation li.elyon-nav-cpv-btn,
.main-navigation li.elyon-nav-cpv-btn {
display: flex !important;
align-items: center !important;
align-self: center !important;
height: auto !important;
margin-left: 8px !important;
}
#site-navigation li.elyon-nav-cpv-btn > a,
#site-navigation li.elyon-nav-cpv-btn > a:link,
#site-navigation li.elyon-nav-cpv-btn > a:visited,
.main-navigation li.elyon-nav-cpv-btn > a,
.main-navigation li.elyon-nav-cpv-btn > a:link,
.main-navigation li.elyon-nav-cpv-btn > a:visited {
display: inline-flex !important;
align-items: center !important;
align-self: center !important;
background: #1A2744 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
padding: 9px 22px !important;
border-radius: 4px !important;
font-family: Inter, sans-serif !important;
font-weight: 700 !important;
font-size: .74rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: 0 4px 14px rgba(26,39,68,.3) !important;
height: auto !important;
line-height: 1.2 !important;
}
#site-navigation li.elyon-nav-cpv-btn > a:hover,
.main-navigation li.elyon-nav-cpv-btn > a:hover {
background: #243058 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow: 0 6px 20px rgba(26,39,68,.4) !important;
transform: translateY(-1px) !important;
}
/* ================================================================
ANIMACIONES MÁS LENTAS Y FLUIDAS
================================================================ */
/* Scroll suave manejado por JS (assets/js/main.js) — evitar doble animación */
/* html { scroll-behavior: smooth; } */
/* Animaciones de entrada más lentas */
.anim-slide-up { animation-duration: 1s !important; }
.anim-slide-left { animation-duration: 1s !important; }
.anim-slide-right { animation-duration: 1s !important; }
.anim-zoom-in { animation-duration: .9s !important; }
.anim-pop-in { animation-duration: .85s !important; }
.anim-bounce-in { animation-duration: 1.1s !important; }
/* Delays más amplios para stagger más visible */
.anim-d1 { animation-delay: .15s !important; }
.anim-d2 { animation-delay: .3s !important; }
.anim-d3 { animation-delay: .45s !important; }
.anim-d4 { animation-delay: .6s !important; }
.anim-d5 { animation-delay: .75s !important; }
/* Todas las transiciones de cards más lentas */
.elyon-curso-card,
.elyon-testimonio,
.elyon-pilar,
.elyon-widget,
.elyon-blog-card,
.elyon-docente-card {
transition-duration: .4s !important;
}
/* Animaciones del hero más suaves */
.elyon-hero-float-badge { animation-duration: 6s !important; }
.elyon-hero-img-frame { animation-duration: 9s !important; }
.elyon-hero-img-ring-1 { animation-duration: 28s !important; }
.elyon-hero-img-ring-2 { animation-duration: 20s !important; }
.elyon-hero-img-ring-3 { animation-duration: 35s !important; }
.elyon-hero-img-frame::before { animation-duration: 7s !important; }
/* Transición header hide/show más suave */
#masthead, .site-header, .ast-primary-header-bar {
transition: transform .5s cubic-bezier(.25,.46,.45,.94),
box-shadow .4s ease !important;
}
/* Botones — transición más suave */
.elyon-btn {
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
box-shadow .35s ease,
background .3s ease !important;
}
/* Hover en tarjetas — más lento */
.elyon-curso-card:hover { transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s !important; }
.elyon-testimonio:hover { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s !important; }
/* Smooth scroll offset para header fijo */
:target { scroll-margin-top: 100px; }
#cursos, #docentes, #testimonios, #cita, #sobre, #contacto {
scroll-margin-top: 90px;
}
/* ================================================================
LANDING PAGE — Secciones épicas con divisores y efectos
================================================================ */
/* Divisores SVG de ola entre secciones */
.elyon-wave-divider { line-height:0; overflow:hidden; }
.elyon-wave-divider svg { display:block; width:100%; }
/* Sobre Nosotros — fondo con patrón sutil */
.elyon-sobre {
background: #ffffff !important;
position: relative !important;
}
.elyon-sobre::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(168,136,74,.04) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
/* Cursos — fondo navy muy suave con patrón */
.elyon-cursos-section {
background: #F0F2F8 !important;
position: relative !important;
overflow: hidden !important;
}
.elyon-cursos-section::before {
content: '';
position: absolute; top: -200px; right: -200px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(168,136,74,.07) 0%, transparent 65%);
pointer-events: none;
}
/* Cards de cursos más dramáticas */
.elyon-curso-card {
border: 1px solid rgba(26,39,68,.08) !important;
background: #fff !important;
}
.elyon-curso-card:hover {
border-color: rgba(168,136,74,.3) !important;
box-shadow: 0 20px 60px rgba(26,39,68,.14), 0 0 0 1px rgba(168,136,74,.2) !important;
}
/* Testimonios — fondo dorado muy suave */
.elyon-testimonios {
background: linear-gradient(180deg, #F7F8FA 0%, #F4F0E8 100%) !important;
}
/* Pilares con borde inferior dorado */
.elyon-pilar {
border-bottom: 3px solid transparent !important;
transition: border-color .4s, transform .4s, box-shadow .4s !important;
}
.elyon-pilar:hover {
border-bottom-color: #C4A362 !important;
}
/* Sección docentes — destacar más */
#docentes {
position: relative;
}
#docentes::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, #F7F8FA 0%, #EEF0F5 100%);
z-index: 0;
}
#docentes > * { position: relative; z-index: 1; }
/* Efecto hover en testimonio más llamativo */
.elyon-testimonio {
transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s, background .3s !important;
}
/* Números del hero counter en dorado */
.elyon-hero-stat-num,
[style*="color:#C4A362"] {
font-family: 'Playfair Display', Georgia, serif;
}
/* Animación de entrada del hero más dramática */
@keyframes hero-reveal {
0% { opacity:0; transform:translateY(40px) scale(.97); filter:blur(4px); }
100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
#inicio h1 { animation: hero-reveal 1s .1s both; }
#inicio > div > div > div:first-child > p { animation: hero-reveal 1s .25s both; }
#inicio > div > div > div:first-child > div:nth-child(4) { animation: hero-reveal 1s .4s both; }
/* Cursor personalizado en el hero */
#inicio { cursor: crosshair; }
#inicio a, #inicio button { cursor: pointer; }
/* ================================================================
SECCIONES ANIMADAS — Movimiento en toda la landing
================================================================ */
/* Sobre Nosotros — imagen con parallax y glow */
.elyon-sobre-media {
position: relative;
}
.elyon-sobre-media::before {
content: '';
position: absolute; inset: -20px;
background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(196,163,98,.08) 0%, transparent 70%);
border-radius: 50%;
animation: el-float 8s ease-in-out infinite;
pointer-events: none;
}
.elyon-sobre-media img,
.elyon-sobre-media-placeholder {
transition: transform .6s var(--el-out) !important;
}
.elyon-sobre-media:hover img,
.elyon-sobre-media:hover .elyon-sobre-media-placeholder {
transform: scale(1.03) translateY(-4px) !important;
}
/* Pilares — entrada escalonada + hover 3D */
.elyon-pilar {
transform-origin: center bottom;
transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s, border-color .4s !important;
}
.elyon-pilar:hover {
transform: translateY(-10px) scale(1.03) !important;
box-shadow: 0 24px 60px rgba(26,39,68,.14), 0 0 0 1px rgba(196,163,98,.2) !important;
}
.elyon-pilar-icon {
transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important;
}
.elyon-pilar:hover .elyon-pilar-icon {
transform: scale(1.2) rotate(-5deg) !important;
}
/* Curso card — hover más dramático */
.elyon-curso-card:hover .elyon-curso-cat {
transform: scale(1.05) !important;
}
/* Testimonios — spotlight cursor ya definido, agregar shimmer en card */
.elyon-testimonio::before {
animation: shimmer-quote 6s ease-in-out infinite !important;
}
@keyframes shimmer-quote {
0%,100% { opacity:.07; }
50% { opacity:.14; }
}
/* Badge de años — pulso dorado */
.elyon-sobre-badge {
animation: badge-float-1 6s ease-in-out infinite !important;
}
/* Número del badge animado */
.elyon-sobre-badge strong {
display: inline-block;
animation: title-gradient 4s ease infinite !important;
background: linear-gradient(135deg,#C4A362,#FFF0A0,#A8884A) !important;
background-size: 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Cita — Card glass pulse sutil */
.elyon-cita-inner > div:last-child {
animation: card-breathe 5s ease-in-out infinite !important;
}
@keyframes card-breathe {
0%,100% { box-shadow: 0 32px 80px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15); }
50% { box-shadow: 0 40px 100px rgba(0,0,0,.28), 0 0 60px rgba(196,163,98,.12), inset 0 1px 0 rgba(255,255,255,.2); }
}
/* Scrollbar del carrusel docentes — más visible con glow */
#elyon-doc-track::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,#A8884A,#C4A362) !important;
box-shadow: 0 0 6px rgba(196,163,98,.4) !important;
}
/* Línea separadora animada entre secciones */
.elyon-sobre::after,
.elyon-cursos-section::after {
content: '';
position: absolute;
bottom: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196,163,98,.3), transparent);
animation: shimmer 4s ease-in-out infinite;
}
/* ================================================================
PANEL DASHBOARD — Colores explícitos (no heredar de landing)
================================================================ */
/* Forzar texto oscuro en todos los paneles ELYON */
.elyon-dash-wrap,
.elyon-dash-body,
.elyon-widget,
.elyon-tabla-card,
.elyon-fin-tab,
.elyon-tab-btn,
.elyon-tabs-nav,
.elyon-familia-selector,
.elyon-miembro-pane,
.elyon-miembro-pane *,
.elyon-widget *,
[class*="elyon-panel"],
[class*="elyon-tab"],
[class*="elyon-table"] {
-webkit-text-fill-color: unset !important;
}
.elyon-widget { color: #111827 !important; }
.elyon-widget-num { color: #1A2744 !important; }
.elyon-widget-lbl { color: #6B7280 !important; }
.elyon-tab-btn { color: #6B7280 !important; }
.elyon-tab-btn.active { color: #ffffff !important; }
/* Miembro tabs */
.elyon-miembro-btn { color: #5A6480 !important; }
.elyon-miembro-btn.active { color: #ffffff !important; }
/* Tables */
table.elyon-table tbody td { color: #374151 !important; }
table.elyon-table thead th { color: #9CA3AF !important; }
/* Familia selector */
.elyon-familia-selector label { color: #374151 !important; }
/* Dashboard topbar textos */
.elyon-dash-name { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.elyon-dash-email { color: rgba(255,255,255,.7) !important; }
.elyon-dash-rank-pill { color: #FCD34D !important; }
/* Hijo info card */
.elyon-hijo-nombre { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.elyon-hijo-meta { color: rgba(255,255,255,.65) !important; }
/* Alertas */
.elyon-alerta-ok { color: #15803D !important; }
.elyon-alerta-info { color: #1D4ED8 !important; }
/* Paneles finanzas/docentes */
.elyon-fin-tab { color: #6B7280 !important; }
.elyon-fin-tab.active { color: #ffffff !important; }
/* ============================================================
OPTIMIZACIONES v2.0 — Hover classes (reemplazan onmouseover inline)
============================================================ */
/* Tarjetas de docentes */
.elyon-docente-card {
transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.elyon-docente-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 48px rgba(26,39,68,.14), 0 0 0 1px rgba(168,136,74,.25);
}
/* Botón CPV en menú */
.elyon-cpv-nav-link {
display: inline-flex;
align-items: center;
align-self: center;
gap: 6px;
background: #1A2744;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
padding: 9px 22px;
border-radius: 4px;
font-family: Inter, sans-serif;
font-size: .74rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(26,39,68,.3);
transition: background .2s, box-shadow .2s, transform .2s;
}
.elyon-cpv-nav-link:hover {
background: #243058;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(26,39,68,.4);
}
/* Social links en footer */
.elyon-footer-social a {
transition: background .2s, border-color .2s, transform .2s;
}
.elyon-footer-social a:hover {
background: var(--el-royal, #1A56DB);
border-color: var(--el-royal, #1A56DB);
transform: translateY(-2px);
color: #fff;
}
/* Carrusel docentes — scroll behavior */
#elyon-doc-track {
scrollbar-width: thin;
scrollbar-color: rgba(168,136,74,.6) rgba(26,39,68,.06);
}
#elyon-doc-track::-webkit-scrollbar { height: 4px; }
#elyon-doc-track::-webkit-scrollbar-track { background: rgba(26,39,68,.06); border-radius: 4px; }
#elyon-doc-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg,#A8884A,#C4A362); border-radius: 4px; }
/* Respetar preferencia de animación reducida */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
#elyon-hero-canvas,
#elyon-sobre-canvas {
display: none !important;
}
}
/* ============================================================
FIX: Normalizar TODOS los del nav principal
incluyendo items del menú WP (Noticias, Aula Virtual)
============================================================ */
#site-navigation ul li:not(.elyon-nav-cpv-btn),
.main-navigation ul li:not(.elyon-nav-cpv-btn),
.ast-primary-header-bar .main-navigation ul li:not(.elyon-nav-cpv-btn) {
height: auto !important;
line-height: normal !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
align-items: center !important;
}
/* Reset cualquier pseudo-elemento de Astra en nav items normales */
#site-navigation ul li:not(.elyon-nav-cpv-btn)::before,
#site-navigation ul li:not(.elyon-nav-cpv-btn)::after,
.main-navigation ul li:not(.elyon-nav-cpv-btn)::before,
.main-navigation ul li:not(.elyon-nav-cpv-btn)::after {
display: none !important;
}
/* El dentro de cada ya tiene sus estilos correctos,
pero aseguramos que no hereden altura rara del */
#site-navigation ul li:not(.elyon-nav-cpv-btn) > a,
.main-navigation ul li:not(.elyon-nav-cpv-btn) > a {
height: auto !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
/* ============================================================
FOOTER — con !important para sobrescribir Astra completamente
============================================================ */
/* Contenedor principal del footer */
footer#colophon.elyon-footer-wrap,
.site-footer.elyon-footer-wrap {
background: #1A2744 !important;
color: rgba(255,255,255,.6) !important;
padding: 0 !important;
border-top: 1px solid rgba(200,149,42,.15) !important;
width: 100% !important;
max-width: 100% !important;
}
/* Grid principal */
.elyon-footer-wrap .elyon-footer-main {
max-width: 1280px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 72px 5vw 48px !important;
display: grid !important;
grid-template-columns: 2fr 1fr 1fr 1fr !important;
gap: 48px !important;
box-sizing: border-box !important;
}
/* Logo */
.elyon-footer-wrap .elyon-footer-logo {
font-family: 'Cinzel', serif !important;
font-size: 1.5rem !important;
color: #fff !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
.elyon-footer-wrap .elyon-footer-logo span { color: #F0C060 !important; }
/* Descripción */
.elyon-footer-wrap .elyon-footer-desc {
font-size: .85rem !important;
line-height: 1.75 !important;
color: rgba(255,255,255,.5) !important;
margin-bottom: 24px !important;
max-width: 280px !important;
}
/* Social */
.elyon-footer-wrap .elyon-footer-social {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.elyon-footer-wrap .elyon-footer-social a {
width: 38px !important;
height: 38px !important;
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
text-decoration: none !important;
color: rgba(255,255,255,.7) !important;
transition: background .2s, border-color .2s, transform .2s !important;
}
.elyon-footer-wrap .elyon-footer-social a:hover {
background: #1A56DB !important;
border-color: #1A56DB !important;
transform: translateY(-2px) !important;
color: #fff !important;
}
/* Columnas */
.elyon-footer-wrap .elyon-footer-col h4 {
font-family: 'Cinzel', serif !important;
color: #fff !important;
font-size: .88rem !important;
letter-spacing: .08em !important;
margin: 0 0 18px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(200,149,42,.2) !important;
}
.elyon-footer-wrap .elyon-footer-col ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.elyon-footer-wrap .elyon-footer-col ul li {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
list-style: none !important;
}
.elyon-footer-wrap .elyon-footer-col ul li::before,
.elyon-footer-wrap .elyon-footer-col ul li::after { display: none !important; }
.elyon-footer-wrap .elyon-footer-col ul li a {
font-size: .85rem !important;
color: rgba(255,255,255,.5) !important;
text-decoration: none !important;
transition: color .2s, padding-left .2s !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.elyon-footer-wrap .elyon-footer-col ul li a:hover {
color: #F0C060 !important;
padding-left: 4px !important;
background: transparent !important;
}
/* Widgets en footer */
.elyon-footer-widget-title {
font-family: 'Cinzel', serif !important;
color: #fff !important;
font-size: .88rem !important;
letter-spacing: .08em !important;
margin-bottom: 18px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(200,149,42,.2) !important;
}
.elyon-footer-widget { color: rgba(255,255,255,.5); font-size: .85rem; }
.elyon-footer-widget a { color: #F0C060 !important; }
/* Barra inferior */
.elyon-footer-wrap .elyon-footer-bottom {
border-top: 1px solid rgba(255,255,255,.07) !important;
padding: 20px 5vw !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
max-width: 1280px !important;
width: 100% !important;
margin: 0 auto !important;
flex-wrap: wrap !important;
gap: 12px !important;
box-sizing: border-box !important;
}
.elyon-footer-wrap .elyon-footer-copy {
font-size: .78rem !important;
color: rgba(255,255,255,.35) !important;
margin: 0 !important;
}
.elyon-footer-wrap .elyon-footer-copy a { color: #F0C060 !important; text-decoration: none !important; }
.elyon-footer-wrap .elyon-footer-links {
display: flex !important;
gap: 18px !important;
}
.elyon-footer-wrap .elyon-footer-links a {
font-size: .78rem !important;
color: rgba(255,255,255,.35) !important;
text-decoration: none !important;
transition: color .2s !important;
}
.elyon-footer-wrap .elyon-footer-links a:hover { color: rgba(255,255,255,.7) !important; }
@media (max-width: 1024px) {
.elyon-footer-wrap .elyon-footer-main { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}
@media (max-width: 640px) {
.elyon-footer-wrap .elyon-footer-main { grid-template-columns: 1fr !important; gap: 28px !important; padding: 48px 5vw 32px !important; }
.elyon-footer-wrap .elyon-footer-bottom { flex-direction: column !important; text-align: center !important; }
}