/* ========================================================= E-FLY MENTOR — MOTION V4 Visual language: E-Fly Academy ========================================================= */ /* ========================================================= 1. APAGAR VISUALMENTE LOS SISTEMAS VIEJOS ========================================================= */ html.reveal-enabled [data-reveal], html.efly-motion-on [data-efly-reveal], html.efly-motion-v3-ready [data-motion-v3], html.academy-motion-ready .academy-reveal, html.efly-academy-motion-ready [data-academy-motion], html.efly-motion-final-ready [data-efly-motion-final], .motion-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* ========================================================= 2. REVEAL BASE — ACADEMY 24px / 680ms / easing suave ========================================================= */ html.efly-motion-v4-ready [data-efly-v4] { opacity: 0 !important; transform: translate3d(0, 24px, 0) !important; transition: opacity 680ms cubic-bezier(.22, 1, .36, 1), transform 680ms cubic-bezier(.22, 1, .36, 1) !important; transition-delay: var(--efly-v4-delay, 0ms) !important; will-change: opacity, transform; } /* ========================================================= 3. CARDS — COMO REVEAL SCALE DE ACADEMY ========================================================= */ html.efly-motion-v4-ready [data-efly-v4="card"] { transform: translate3d(0, 18px, 0) scale(.975) !important; } /* ========================================================= 4. MOCKUPS / IMÁGENES ========================================================= */ html.efly-motion-v4-ready [data-efly-v4="visual"] { transform: translate3d(0, 18px, 0) scale(.985) !important; } /* ========================================================= 5. ESTADO VISIBLE ========================================================= */ html.efly-motion-v4-ready [data-efly-v4].efly-v4-visible { opacity: 1 !important; transform: translate3d(0,0,0) scale(1) !important; } /* ========================================================= 6. HOVER DE CARDS — TESTIMONIOS ACADEMY ========================================================= */ .audience-card, .app-part, .step, .price-card, .bento-card, .school-offer, .diagnostic-score-card, .feature-card, .faq-grid details, [class*="tool-card"], [class*="route-card"] { transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease !important; } @media (hover:hover) and (pointer:fine) { .audience-card:hover, .step:hover, .price-card:hover, .bento-card:hover, .school-offer:hover, .diagnostic-score-card:hover, .feature-card:hover, .faq-grid details:hover, [class*="tool-card"]:hover, [class*="route-card"]:hover { transform: translateY(-6px) !important; border-color: color-mix( in srgb, #FFD21F 72%, #DCE5F2 ) !important; box-shadow: 0 18px 42px rgba(7,30,85,.13) !important; } } /* ========================================================= 7. HERRAMIENTAS MENTOR ========================================================= */ @media (hover:hover) and (pointer:fine) { .app-part:hover { transform: translateY(-6px) !important; border-color: #FFD21F !important; background: #FFD21F !important; box-shadow: 0 18px 42px rgba(7,30,85,.13) !important; } .app-part:hover h3, .app-part:hover p, .app-part:hover span, .app-part:hover a, .app-part:hover .text-link, .app-part:hover .app-part-kicker { color: #071E55 !important; } } /* ========================================================= 8. ICONOS — COMO FOTO DE TESTIMONIOS ========================================================= */ .audience-card svg, .app-part svg, .step svg, .bento-card svg, .feature-card svg, [class*="tool-card"] svg { transition: transform 260ms ease !important; } @media (hover:hover) and (pointer:fine) { .audience-card:hover svg, .app-part:hover svg, .step:hover svg, .bento-card:hover svg, .feature-card:hover svg, [class*="tool-card"]:hover svg { transform: scale(1.08) !important; } } /* ========================================================= 9. NO HACER SALTAR BLOQUES GRANDES ========================================================= */ .pilot-club-card, .pilot-club-card:hover, .ai-conversation-card, .ai-conversation-card:hover, .newsletter-card, .newsletter-card:hover { transform: none !important; } /* ========================================================= 10. BOTONES ========================================================= */ .button, button { transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; } @media (hover:hover) and (pointer:fine) { .button:hover, button:hover { transform: translateY(-2px); } } /* ========================================================= 11. REDES FOOTER ========================================================= */ .site-footer .social-link { transition: transform 260ms ease, border-color 260ms ease, background-color 260ms ease, color 260ms ease !important; } /* ========================================================= 12. SI EL SISTEMA OPERATIVO PIDE REDUCIR MOVIMIENTO NO lo apagamos por completo. Solo lo hacemos más pequeño. ========================================================= */ html.efly-motion-v4-reduced [data-efly-v4] { transform: translate3d(0, 10px, 0) !important; transition-duration: 420ms !important; } html.efly-motion-v4-reduced [data-efly-v4="card"] { transform: translate3d(0, 8px, 0) scale(.99) !important; } html.efly-motion-v4-reduced [data-efly-v4].efly-v4-visible { opacity: 1 !important; transform: none !important; } /* ========================================================= 13. MÓVIL ========================================================= */ @media (max-width:720px) { html.efly-motion-v4-ready [data-efly-v4] { transform: translate3d(0,18px,0) !important; transition-duration: 620ms !important; } html.efly-motion-v4-ready [data-efly-v4="card"] { transform: translate3d(0,14px,0) scale(.985) !important; } html.efly-motion-v4-ready [data-efly-v4].efly-v4-visible { transform: none !important; } } /* ===== EFLY ACADEMY YELLOW CARD HOVER START ===== */ /* ========================================================= BLOQUES CLAROS DE E-FLY MENTOR Hover: - fondo amarillo - texto azul profundo - borde amarillo - elevación 6px - sombra elegante ========================================================= */ .audience-card, .app-part, .step, .bento-card, .feature-card, .school-offer:not(.school-offer-dark), [class*="tool-card"], [class*="route-card"] { transition: transform 260ms ease, background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, color 260ms ease !important; } /* ========================================================= HOVER DESKTOP ========================================================= */ @media (hover:hover) and (pointer:fine) { .audience-card:hover, .app-part:hover, .step:hover, .bento-card:hover, .feature-card:hover, .school-offer:not(.school-offer-dark):hover, [class*="tool-card"]:hover, [class*="route-card"]:hover { background: #FFD21F !important; border-color: #FFD21F !important; transform: translateY(-6px) !important; box-shadow: 0 18px 42px rgba(7,30,85,.14) !important; color: #071E55 !important; } /* ======================================================= TÍTULOS ======================================================= */ .audience-card:hover h2, .audience-card:hover h3, .app-part:hover h2, .app-part:hover h3, .step:hover h2, .step:hover h3, .bento-card:hover h2, .bento-card:hover h3, .feature-card:hover h2, .feature-card:hover h3, .school-offer:not(.school-offer-dark):hover h2, .school-offer:not(.school-offer-dark):hover h3, [class*="tool-card"]:hover h2, [class*="tool-card"]:hover h3, [class*="route-card"]:hover h2, [class*="route-card"]:hover h3 { color: #071E55 !important; } /* ======================================================= PÁRRAFOS ======================================================= */ .audience-card:hover p, .app-part:hover p, .step:hover p, .bento-card:hover p, .feature-card:hover p, .school-offer:not(.school-offer-dark):hover p, [class*="tool-card"]:hover p, [class*="route-card"]:hover p { color: #071E55 !important; } /* ======================================================= KICKERS / EYEBROWS / LABELS ======================================================= */ .audience-card:hover .eyebrow, .audience-card:hover .card-kicker, .app-part:hover .eyebrow, .app-part:hover .app-part-kicker, .step:hover .eyebrow, .bento-card:hover .eyebrow, .feature-card:hover .eyebrow, .school-offer:not(.school-offer-dark):hover .eyebrow, [class*="tool-card"]:hover .eyebrow, [class*="route-card"]:hover .eyebrow { color: #123C8C !important; } /* ======================================================= LINKS ======================================================= */ .audience-card:hover a, .app-part:hover a, .step:hover a, .bento-card:hover a, .feature-card:hover a, .school-offer:not(.school-offer-dark):hover a, [class*="tool-card"]:hover a, [class*="route-card"]:hover a { color: #071E55 !important; } /* ======================================================= ICONOS ======================================================= */ .audience-card:hover svg, .app-part:hover svg, .step:hover svg, .bento-card:hover svg, .feature-card:hover svg, .school-offer:not(.school-offer-dark):hover svg, [class*="tool-card"]:hover svg, [class*="route-card"]:hover svg { color: #071E55 !important; transform: scale(1.08) !important; } /* ======================================================= CAJITA DEL ICONO / NÚMERO Como en Academy: sobre amarillo mantiene una pequeña superficie clara. ======================================================= */ .audience-card:hover [class*="icon"], .app-part:hover [class*="icon"], .step:hover [class*="icon"], .bento-card:hover [class*="icon"], .feature-card:hover [class*="icon"], [class*="tool-card"]:hover [class*="icon"], [class*="route-card"]:hover [class*="icon"], .audience-card:hover [class*="number"], .app-part:hover [class*="number"], .step:hover [class*="number"], .bento-card:hover [class*="number"], .feature-card:hover [class*="number"] { background: rgba(255,255,255,.76) !important; border-color: rgba(255,255,255,.75) !important; color: #071E55 !important; } } /* ========================================================= NO TOCAR LOS BLOQUES GRANDES / OSCUROS ========================================================= */ .pilot-club-card:hover, .ai-conversation-card:hover, .newsletter-card:hover, .school-offer-dark:hover { background: unset; } /* ===== EFLY ACADEMY YELLOW CARD HOVER END ===== */ /* ===== MENTOR PREMIUM CARD MOTION START ===== */ /* bloques objetivo */ .audience-card, .app-part, .step, .bento-card, .feature-card, .school-offer:not(.school-offer-dark), [class*="tool-card"], [class*="route-card"] { position: relative; overflow: hidden; transform-origin: center center; transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, background-color 320ms ease; will-change: transform, box-shadow, opacity; } /* animación de ingreso al hacer scroll */ .reveal-card { opacity: 0; transform: translateY(34px) scale(.975); transition: opacity 720ms cubic-bezier(.22,1,.36,1), transform 720ms cubic-bezier(.22,1,.36,1); } .reveal-card.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* stagger visual suave */ .reveal-delay-1 { transition-delay: .04s; } .reveal-delay-2 { transition-delay: .08s; } .reveal-delay-3 { transition-delay: .12s; } .reveal-delay-4 { transition-delay: .16s; } .reveal-delay-5 { transition-delay: .20s; } .reveal-delay-6 { transition-delay: .24s; } /* hover refinado tipo “sale hacia adelante” */ @media (hover:hover) and (pointer:fine) { .audience-card:hover, .app-part:hover, .step:hover, .bento-card:hover, .feature-card:hover, .school-offer:not(.school-offer-dark):hover, [class*="tool-card"]:hover, [class*="route-card"]:hover { transform: translateY(-10px) scale(1.025); box-shadow: 0 22px 46px rgba(7,30,85,.14); z-index: 3; } /* el título se levanta y gana presencia */ .audience-card h2, .audience-card h3, .app-part h2, .app-part h3, .step h2, .step h3, .bento-card h2, .bento-card h3, .feature-card h2, .feature-card h3, .school-offer:not(.school-offer-dark) h2, .school-offer:not(.school-offer-dark) h3, [class*="tool-card"] h2, [class*="tool-card"] h3, [class*="route-card"] h2, [class*="route-card"] h3 { transition: transform 320ms cubic-bezier(.2,.8,.2,1), letter-spacing 320ms ease, color 320ms ease; will-change: transform; } .audience-card:hover h2, .audience-card:hover h3, .app-part:hover h2, .app-part:hover h3, .step:hover h2, .step:hover h3, .bento-card:hover h2, .bento-card:hover h3, .feature-card:hover h2, .feature-card:hover h3, .school-offer:not(.school-offer-dark):hover h2, .school-offer:not(.school-offer-dark):hover h3, [class*="tool-card"]:hover h2, [class*="tool-card"]:hover h3, [class*="route-card"]:hover h2, [class*="route-card"]:hover h3 { transform: translateY(-2px) scale(1.035); letter-spacing: -.01em; } /* párrafos un poco más vivos */ .audience-card p, .app-part p, .step p, .bento-card p, .feature-card p, .school-offer:not(.school-offer-dark) p, [class*="tool-card"] p, [class*="route-card"] p { transition: transform 320ms ease, opacity 320ms ease; } .audience-card:hover p, .app-part:hover p, .step:hover p, .bento-card:hover p, .feature-card:hover p, .school-offer:not(.school-offer-dark):hover p, [class*="tool-card"]:hover p, [class*="route-card"]:hover p { transform: translateY(-1px); } /* íconos/badges */ .audience-card [class*="icon"], .app-part [class*="icon"], .step [class*="icon"], .bento-card [class*="icon"], .feature-card [class*="icon"], .school-offer:not(.school-offer-dark) [class*="icon"], [class*="tool-card"] [class*="icon"], [class*="route-card"] [class*="icon"] { transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease, background-color 320ms ease; } .audience-card:hover [class*="icon"], .app-part:hover [class*="icon"], .step:hover [class*="icon"], .bento-card:hover [class*="icon"], .feature-card:hover [class*="icon"], .school-offer:not(.school-offer-dark):hover [class*="icon"], [class*="tool-card"]:hover [class*="icon"], [class*="route-card"]:hover [class*="icon"] { transform: scale(1.08) translateY(-1px); } } /* accesibilidad */ @media (prefers-reduced-motion: reduce) { .reveal-card, .reveal-card.is-visible, .audience-card, .app-part, .step, .bento-card, .feature-card, .school-offer, [class*="tool-card"], [class*="route-card"] { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ===== MENTOR PREMIUM CARD MOTION END ===== */ /* ===== EFLY STEP HOVER CLEAN START ===== */ /* ========================================================= CÓMO FUNCIONA Estos elementos NO son cards tradicionales. No usar fondo amarillo. ========================================================= */ .step { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; transform-origin: center center; transition: transform 300ms cubic-bezier(.22,1,.36,1) !important; } /* ========================================================= CORREGIR EL NÚMERO Evita la franja blanca/amarilla horizontal. ========================================================= */ .step .step__number, .step [class*="step__number"] { width: auto !important; max-width: max-content !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; color: #123C8C !important; transition: color 260ms ease, transform 260ms cubic-bezier(.22,1,.36,1) !important; } /* ========================================================= QUITAR EL AMARILLO GENÉRICO ANTERIOR ========================================================= */ @media (hover:hover) and (pointer:fine) { .step:hover { background: transparent !important; border: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; /* Sobresale, pero muy sutil. */ transform: translateY(-5px) scale(1.015) !important; z-index: 3; } /* ------------------------------------------------------- NÚMERO ------------------------------------------------------- */ .step:hover .step__number, .step:hover [class*="step__number"] { width: auto !important; max-width: max-content !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #123C8C !important; box-shadow: none !important; transform: translateY(-2px) scale(1.08) !important; } /* ------------------------------------------------------- TÍTULO ------------------------------------------------------- */ .step h2, .step h3 { transition: transform 300ms cubic-bezier(.22,1,.36,1), color 260ms ease !important; } .step:hover h2, .step:hover h3 { color: #123C8C !important; transform: translateY(-2px) !important; letter-spacing: inherit !important; } /* ------------------------------------------------------- TEXTO ------------------------------------------------------- */ .step:hover p { color: #4B5563 !important; transform: none !important; } /* ------------------------------------------------------- LA LÍNEA QUE CONECTA LOS PASOS NO DEBE MOVERSE NI ENGORDAR. ------------------------------------------------------- */ .step:not(:last-child)::after { height: 1px !important; background: rgba(18,60,140,.16) !important; transform: none !important; transition: background-color 260ms ease !important; } .step:not(:last-child):hover::after { background: rgba(18,60,140,.30) !important; } } /* ========================================================= ENTRADA AL HACER SCROLL Aquí sí mantenemos la animación. Mucho más sobria que el hover anterior. ========================================================= */ .step.reveal-card { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); transition: opacity 680ms cubic-bezier(.22,1,.36,1), transform 680ms cubic-bezier(.22,1,.36,1) !important; } .step.reveal-card.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); } /* ========================================================= MÓVIL ========================================================= */ @media (max-width:720px) { .step:hover { transform: none !important; } } /* ===== EFLY STEP HOVER CLEAN END ===== */ /* ===== EFLY STEPS ACADEMY V2 START ===== */ /* ========================================================= STEP BASE IMPORTANTE: - no escalamos textos - no hacemos crecer fuentes - no ponemos fondo amarillo completo ========================================================= */ .how-section .step { position: relative !important; z-index: 1; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none; transition: transform 260ms ease !important; } /* ========================================================= TARJETA QUE APARECE DETRÁS No modifica el layout. ========================================================= */ .how-section .step::before { position: absolute; z-index: -1; top: -14px; right: -16px; bottom: -20px; left: -16px; border: 1px solid rgba(18,60,140,.14); border-radius: 18px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(7,30,85,.00); opacity: 0; transform: translateY(5px); transition: opacity 260ms ease, transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; content: ""; } /* ========================================================= NÚMERO ========================================================= */ .how-section .step .step__number { position: relative !important; z-index: 3; display: inline-flex !important; width: auto !important; min-width: 30px; max-width: max-content !important; height: 30px; align-items: center; justify-content: center; margin-bottom: 1.25rem !important; padding: 0 .5rem !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: #123C8C !important; box-shadow: none !important; transform: none !important; transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease !important; } /* ========================================================= TEXTO NADA DE SCALE. NADA DE FONT-SIZE. ========================================================= */ .how-section .step h2, .how-section .step h3, .how-section .step p { transform: none !important; transition: color 260ms ease !important; } .how-section .step h2, .how-section .step h3 { color: #071E55 !important; } .how-section .step p { color: #4B5563 !important; } /* ========================================================= LÍNEA ENTRE PASOS ========================================================= */ .how-section .step:not(:last-child)::after { z-index: 0 !important; height: 1px !important; background: rgba(18,60,140,.14) !important; transition: opacity 260ms ease, background-color 260ms ease !important; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .how-section .step:hover { z-index: 5; background: transparent !important; border: 0 !important; box-shadow: none !important; /* Solo movemos el BLOQUE. No su tipografía. */ transform: translateY(-6px) !important; } /* aparece la superficie */ .how-section .step:hover::before { opacity: 1; transform: translateY(0); border-color: rgba(255,210,31,.72); box-shadow: 0 18px 42px rgba(7,30,85,.11); } /* número amarillo */ .how-section .step:hover .step__number { background: #FFD21F !important; border-color: #FFD21F !important; color: #071E55 !important; transform: none !important; } /* título NO aumenta */ .how-section .step:hover h2, .how-section .step:hover h3 { color: #123C8C !important; transform: none !important; font-size: inherit; letter-spacing: inherit !important; } .how-section .step:hover p { color: #4B5563 !important; transform: none !important; } /* La línea se suaviza cuando la tarjeta está levantada. */ .how-section .step:not(:last-child):hover::after { opacity: .35; } } /* ========================================================= ENTRADA AL HACER SCROLL MISMA FILOSOFÍA ACADEMY 24px 680ms sin zoom ========================================================= */ .how-section .step.reveal-card { opacity: 0; transform: translate3d( 0, 24px, 0 ); transition: opacity 680ms cubic-bezier(.22,1,.36,1), transform 680ms cubic-bezier(.22,1,.36,1) !important; } .how-section .step.reveal-card.is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* Una vez visible, hover vuelve a funcionar. */ @media (hover:hover) and (pointer:fine) { .how-section .step.reveal-card.is-visible:hover { transform: translateY(-6px) !important; } } /* ========================================================= MÓVIL Sin hover. Solo entrada sutil. ========================================================= */ @media (max-width:720px) { .how-section .step::before { display: none; } .how-section .step.reveal-card { transform: translate3d( 0, 18px, 0 ); } .how-section .step.reveal-card.is-visible { transform: none; } } /* ===== EFLY STEPS ACADEMY V2 END ===== */ /* ===== MENTOR FOOTER COMPACT START ===== */ /* ========================================================= FOOTER GENERAL ========================================================= */ .site-footer, .site-footer.academy-footer-clone { padding: 52px 0 22px !important; min-height: 0 !important; } /* ========================================================= GRID PRINCIPAL ========================================================= */ .site-footer .footer-grid { padding-bottom: 28px !important; margin-bottom: 0 !important; gap: 2rem !important; } /* ========================================================= LOGO / MARCA ========================================================= */ .site-footer .footer-brand { margin-bottom: 0 !important; padding-bottom: 0 !important; } .site-footer .footer-tagline { margin-bottom: 16px !important; } /* ========================================================= COLUMNAS ========================================================= */ .site-footer .footer-column { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ========================================================= LEGAL ========================================================= */ .site-footer .footer-bottom { padding-top: 18px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ========================================================= VOLVER ARRIBA — ESTILO E-FLY ACADEMY ========================================================= */ .mentor-back-to-top-wrap { display: flex !important; width: 100% !important; justify-content: center !important; align-items: center !important; margin: 16px auto 0 !important; padding: 0 !important; } button.mentor-back-to-top { display: inline-flex !important; width: max-content !important; min-height: 40px !important; align-items: center !important; justify-content: center !important; gap: .55rem !important; margin: 0 auto !important; padding: .35rem .42rem .35rem .85rem !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 999px !important; background: rgba(255,255,255,.035) !important; color: #FFFFFF !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; position: relative !important; transform: none !important; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease !important; } .mentor-back-to-top__label { display: inline-block !important; color: #FFFFFF !important; } .mentor-back-to-top__icon { display: grid !important; width: 28px !important; height: 28px !important; flex: 0 0 28px !important; place-items: center !important; border-radius: 999px !important; background: #FFD21F !important; color: #071E55 !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1 !important; } @media (hover:hover) and (pointer:fine) { button.mentor-back-to-top:hover { transform: translateY(-2px) !important; border-color: rgba(255,210,31,.75) !important; background: rgba(255,255,255,.07) !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width:650px) { .site-footer, .site-footer.academy-footer-clone { padding: 44px 0 18px !important; } .site-footer .footer-grid { padding-bottom: 22px !important; } .mentor-back-to-top-wrap { margin-top: 14px !important; } button.mentor-back-to-top { min-height: 42px !important; font-size: .74rem !important; } } /* ===== MENTOR FOOTER COMPACT END ===== */ /* ===== EFLY FOOTER FINAL COMPACT START ===== */ /* ========================================================= FOOTER GENERAL ========================================================= */ .site-footer, .site-footer.academy-footer-clone { height: auto !important; min-height: 0 !important; padding: 46px 0 16px !important; } /* ========================================================= GRID SUPERIOR ========================================================= */ .site-footer .footer-grid, .site-footer.academy-footer-clone .footer-grid { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 18px !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: start !important; } /* ========================================================= COLUMNAS ========================================================= */ .site-footer .footer-brand, .site-footer .footer-column, .site-footer .footer-contact { min-height: 0 !important; height: auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ========================================================= LOGO / TAGLINE ========================================================= */ .site-footer .footer-logo { margin-bottom: 10px !important; } .site-footer .footer-tagline { margin: 8px 0 14px !important; } /* ========================================================= REDES ========================================================= */ .site-footer .social-links { margin-top: 12px !important; margin-bottom: 0 !important; } /* ========================================================= LEGAL ========================================================= */ .site-footer .footer-bottom { display: grid !important; grid-template-columns: 1fr !important; width: min(calc(100% - 2rem), 1180px) !important; gap: 0 !important; margin: 0 auto !important; padding: 15px 0 0 !important; border-top: 1px solid rgba(255,255,255,.12) !important; } .site-footer .footer-bottom > span { display: block !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= DEJAR SOLO EL BOTÓN ORIGINAL ========================================================= */ .site-footer .mentor-back-to-top-wrap, .site-footer .mentor-back-to-top, .site-footer .back-to-top-wrap, .site-footer button.back-to-top, .site-footer button.back-to-top--real { display: none !important; } /* ========================================================= BOTÓN ORIGINAL DE ACADEMY ========================================================= */ .site-footer button.footer-back-to-top { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; float: none !important; display: inline-flex !important; width: max-content !important; min-height: 40px !important; align-items: center !important; justify-content: center !important; justify-self: center !important; gap: .55rem !important; margin: 14px auto 0 !important; padding: .35rem .42rem .35rem .85rem !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 999px !important; background: rgba(255,255,255,.035) !important; color: #FFFFFF !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease !important; } /* texto */ .site-footer button.footer-back-to-top > span { display: inline-block !important; color: #FFFFFF !important; } /* círculo amarillo */ .site-footer button.footer-back-to-top > strong { display: grid !important; width: 28px !important; height: 28px !important; flex: 0 0 28px !important; place-items: center !important; border-radius: 999px !important; background: #FFD21F !important; color: #071E55 !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1 !important; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .site-footer button.footer-back-to-top:hover { transform: translateY(-2px) !important; border-color: rgba(255,210,31,.75) !important; background: rgba(255,255,255,.07) !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width:650px) { .site-footer, .site-footer.academy-footer-clone { padding: 38px 0 14px !important; } .site-footer .footer-grid { padding-bottom: 14px !important; } .site-footer .footer-bottom { padding-top: 14px !important; } .site-footer button.footer-back-to-top { margin-top: 12px !important; } } /* ===== EFLY FOOTER FINAL COMPACT END ===== */