/* ============================================================= HOME FX — Capa de animación y estética futurista (solo Home) ------------------------------------------------------------- Diseño y movimiento, sin lógica. Se carga vía $page_styles en paginas/index.php (antes de cards.css). Reutiliza la paleta: azul #2A7FC1 · verde #57AB52 · rosa #EBD3DE · oscuro #0c1c30 Filosofía: animaciones suaves, livianas y con acento futurista. - Reveals al hacer scroll (IntersectionObserver añade .is-in) - Parallax del hero (scroll) + contadores animados - Respeta prefers-reduced-motion (todo se desactiva) ============================================================= */ :root { --fx-azul: #2A7FC1; --fx-verde: #57AB52; --fx-cian: #34d6c8; --fx-oscuro: #0c1c30; --fx-grad: linear-gradient(90deg, var(--fx-azul), var(--fx-cian) 55%, var(--fx-verde)); --fx-ease: cubic-bezier(.22, .61, .36, 1); --fx-dur: .8s; } /* ------------------------------------------------------------- 1. SISTEMA DE REVEAL Los elementos con .fx parten ocultos y aparecen al entrar al viewport. Solo se ocultan cuando el JS marca , de modo que si el JS falla, el contenido SIEMPRE queda visible. ------------------------------------------------------------- */ .fx-ready .fx { opacity: 0; will-change: opacity, transform; transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease); transition-delay: calc(var(--fx-i, 0) * 90ms); } .fx-ready .fx-up { transform: translateY(38px); } .fx-ready .fx-down { transform: translateY(-38px); } .fx-ready .fx-left { transform: translateX(-46px); } .fx-ready .fx-right { transform: translateX(46px); } .fx-ready .fx-zoom { transform: scale(.9); } .fx-ready .fx-blur { filter: blur(12px); transform: translateY(24px); } .fx-ready .fx.is-in { opacity: 1; transform: none; filter: none; } /* ------------------------------------------------------------- 2. BARRA DE PROGRESO DE SCROLL (toque futurista, 0 peso visual) ------------------------------------------------------------- */ .fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--fx-grad); box-shadow: 0 0 12px rgba(52, 214, 200, .55); z-index: 99999; pointer-events: none; } /* ------------------------------------------------------------- 3. HERO — minimalista, FONDO BLANCO con red de partículas ------------------------------------------------------------- */ /* Se oculta la franja celeste SOLO en la Home: el hero queda limpio. */ .logo-contact { display: none; } /* Fondo blanco limpio (se anula la imagen de fondo del banner) */ .top_header_banner { background: #ffffff; } #home.home_bg { position: relative; overflow: hidden; background: #ffffff; } /* Toque mínimo de profundidad: un brillo de marca muy tenue arriba-derecha */ #home.home_bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(38% 50% at 78% 28%, rgba(52, 214, 200, .08), transparent 70%), radial-gradient(40% 50% at 88% 70%, rgba(87, 171, 82, .07), transparent 70%); pointer-events: none; } /* Lienzo de la red de partículas (lo crea el JS) */ .fx-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* El contenido (texto, botones) va por encima de las partículas */ #home.home_bg .container { position: relative; z-index: 2; } /* Sin imagen en el hero: el resplandor/aura no se usa en este diseño */ .home_me_img::before { display: none; } /* ---- Texto del hero en oscuro para leerse sobre el blanco ---- */ #home .home_content h1 { color: #0e2d4a; } #home .home_content p { color: #51637a; } /* Acento de gradiente en una palabra clave del título (si trae ) */ #home .home_content h1 span { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Botón secundario "Institución": borde y texto oscuros sobre blanco */ #home .btn_hero_outline { color: #0e2d4a; border-color: rgba(14, 45, 74, .25); } #home .btn_hero_outline:hover { background: var(--fx-verde); border-color: var(--fx-verde); color: #fff; } /* Botón principal: gradiente azul→cian + brillo deslizante (futurista) */ #home .btn_hero_fill { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--fx-azul), var(--fx-cian)); border-color: transparent; box-shadow: 0 10px 26px rgba(52, 214, 200, .30); } #home .btn_hero_fill:hover { background: linear-gradient(135deg, var(--fx-verde), var(--fx-cian)); box-shadow: 0 14px 34px rgba(87, 171, 82, .42); } .btn_hero_fill::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: none; } .btn_hero_fill:hover::after { animation: fx-sheen .9s var(--fx-ease); } @keyframes fx-sheen { to { left: 130%; } } /* ------------------------------------------------------------- 4. CONTADORES — "momento video": barrido + número animado ------------------------------------------------------------- */ .single-counter { position: relative; overflow: hidden; } /* Línea-acento superior que se "dibuja" al entrar */ .single-counter::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: var(--fx-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--fx-ease); } .single-counter.is-in::before { transform: scaleX(1); } .counter-num { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ------------------------------------------------------------- 5. TÍTULOS DE SECCIÓN — pretítulo con pill de gradiente ------------------------------------------------------------- */ .section-title h4 { display: inline-block; position: relative; padding-left: 30px; } .section-title h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; background: var(--fx-grad); transform: translateY(-50%); } /* ------------------------------------------------------------- 6. TARJETAS — brillo de realce al pasar el cursor (futurista) Se usa un pseudo-elemento para NO chocar con cards.css (que se carga después y define el box-shadow del hover). ------------------------------------------------------------- */ .docente-card, .noticia-card, .nivel-card { position: relative; } .docente-card::after, .noticia-card::after, .nivel-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--fx-ease); box-shadow: 0 0 0 1px rgba(52, 214, 200, .35) inset, 0 0 28px rgba(52, 214, 200, .22); } .docente-card:hover::after, .noticia-card:hover::after, .nivel-card:hover::after { opacity: 1; } /* ------------------------------------------------------------- 7. NEWSLETTER — borde superior con gradiente animado ------------------------------------------------------------- */ .newsletter_banner { position: relative; overflow: hidden; } .newsletter_banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--fx-grad); background-size: 200% 100%; animation: fx-flow 6s linear infinite; z-index: 2; } @keyframes fx-flow { to { background-position: 200% 0; } } /* ------------------------------------------------------------- 9. SECCIÓN "CAMINOS" — partículas dispersas que se AGRUPAN formando una figura al pasar el cursor sobre cada tarjeta. ------------------------------------------------------------- */ .fx-paths { background: #ffffff; } /* A todo el ancho: sin gutters ni márgenes laterales */ .fx-paths .container-fluid { padding-left: 0; padding-right: 0; } .fx-paths .row { align-items: stretch; margin-left: 0; margin-right: 0; } .fx-paths .row > [class*="col-"] { padding-left: 0; padding-right: 0; } .fx-morph { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; padding: 44px 26px; border-radius: 22px; overflow: hidden; transition: background .4s var(--fx-ease); } .fx-morph:hover { background: rgba(42, 127, 193, .03); } .fx-morph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .fx-morph-content { position: relative; z-index: 1; text-align: center; max-width: 430px; } .fx-morph-badge { display: inline-block; padding: 5px 16px; margin-bottom: 16px; border-radius: 100px; background: #f1f6fb; border: 1px solid #e4edf6; color: #51637a; font-size: 13px; font-weight: 600; } .fx-morph-content h3 { margin: 0 0 12px; color: #0e2d4a; font-weight: 700; font-size: 30px; line-height: 1.2; } .fx-morph-content p { margin: 0 0 26px; color: #51637a; font-size: 16px; line-height: 1.65; } .fx-morph-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 32px; border-radius: 100px; font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--fx-azul), var(--fx-cian)); box-shadow: 0 8px 22px rgba(52, 214, 200, .28); transition: transform .3s var(--fx-ease), box-shadow .3s ease, filter .3s ease; } .fx-morph-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px rgba(52, 214, 200, .42); } .fx-morph-btn i { transition: transform .3s var(--fx-ease); } .fx-morph-btn:hover i { transform: translateX(3px); } .fx-morph-hint { display: block; margin-top: 16px; color: #9aa9bb; font-size: 12.5px; letter-spacing: .3px; } @media (max-width: 991px) { .fx-morph { min-height: 320px; } .fx-morph-content h3 { font-size: 26px; } } /* ------------------------------------------------------------- 10. MASCOTA — el león flota constantemente (nunca estático) ------------------------------------------------------------- */ .fx-mascot { position: relative; overflow: hidden; background: radial-gradient(55% 75% at 22% 55%, rgba(52, 214, 200, .08), transparent 70%), radial-gradient(45% 60% at 80% 40%, rgba(87, 171, 82, .06), transparent 70%), #ffffff; } .fx-mascot-img { position: relative; text-align: center; } .fx-mascot-leon { max-width: 100%; max-height: 470px; width: auto; height: auto; display: inline-block; filter: drop-shadow(0 26px 30px rgba(12, 28, 48, .25)); animation: mascot-float 4.6s ease-in-out infinite; will-change: transform; } /* Versión en partículas (canvas): sin sombra de imagen, conserva el flote. El tamaño lo fija el JS, así que se libera el tope de altura. */ .fx-mascot-canvas { filter: none; max-height: none; max-width: 100%; cursor: pointer; } @keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-22px) rotate(1.4deg); } } /* Sombra en el piso que "respira" con el salto del león */ .fx-mascot-img::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: 44%; height: 24px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(12, 28, 48, .20), transparent 70%); filter: blur(3px); z-index: 0; animation: mascot-shadow 4.6s ease-in-out infinite; } @keyframes mascot-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .75; } 50% { transform: translateX(-50%) scale(.78); opacity: .45; } } .fx-mascot-content { padding-left: 10px; } .fx-mascot-content h4 { display: inline-block; position: relative; padding-left: 30px; color: var(--fx-verde); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-size: 14px; margin-bottom: 10px; } .fx-mascot-content h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; background: var(--fx-grad); transform: translateY(-50%); } .fx-mascot-content h2 { color: #0e2d4a; font-weight: 700; font-size: 38px; line-height: 1.15; margin-bottom: 16px; } .fx-mascot-content h2 span { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .fx-mascot-content p { color: #51637a; font-size: 16.5px; line-height: 1.7; margin-bottom: 26px; max-width: 560px; } /* Card de DETALLES (lista de valores con ícono) */ .fx-mascot-feats { display: grid; gap: 12px; margin: 4px 0 30px; max-width: 560px; } .fx-mascot-feat { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #ffffff; border: 1px solid #eaf1f8; border-radius: 14px; box-shadow: 0 8px 22px rgba(12, 28, 48, .05); transition: transform .28s var(--fx-ease), box-shadow .28s ease; } .fx-mascot-feat:hover { transform: translateX(5px); box-shadow: 0 12px 28px rgba(12, 28, 48, .1); } .fx-mascot-feat-ico { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--fx-azul), var(--fx-cian)); box-shadow: 0 6px 14px rgba(52, 214, 200, .3); } .fx-mascot-feat-tx h5 { margin: 0 0 2px; color: #0e2d4a; font-weight: 700; font-size: 15.5px; } .fx-mascot-feat-tx p { margin: 0; color: #5b6b7f; font-size: 14px; line-height: 1.5; max-width: none; } /* Área de texto EXTRA (editable, opcional) */ .fx-mascot-extra { margin-top: 24px; padding: 16px 22px; max-width: 560px; border-left: 3px solid var(--fx-verde); background: rgba(42, 127, 193, .045); border-radius: 0 12px 12px 0; } .fx-mascot-extra h5 { margin: 0 0 6px; color: #0e2d4a; font-weight: 700; font-size: 16px; } .fx-mascot-extra p { margin: 0; font-size: 15px; line-height: 1.6; max-width: none; } @media (max-width: 767px) { .fx-mascot-content { padding-left: 0; text-align: center; margin-top: 20px; } .fx-mascot-content h2 { font-size: 30px; } .fx-mascot-content h4::before { display: none; } .fx-mascot-content h4 { padding-left: 0; } } /* ------------------------------------------------------------- 8. ACCESIBILIDAD — apagar todo movimiento si el usuario lo pide ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fx-ready .fx { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .home_me_img::before, .fx-float, .newsletter_banner::before, .btn_hero_fill:hover::after, .fx-mascot-leon, .fx-mascot-img::after { animation: none !important; } .fx-progress { display: none; } }