/* CSS agrupado por "componentes" extraído de index.html Mueve estilos que están inline en el para mantener el HTML más limpio. Este archivo puede ampliarse para agrupar más estilos por componente. */ /* Nota: Font Awesome se referencia localmente desde assets/css/font-awesome.min.css en los HTML. Evitamos @import aquí para no duplicar descargas ni depender de CDN desde este archivo. */ /* Redes flotantes (botones sociales) */ .redes-flotantes { position: fixed; right: 8px; top: 75%; z-index: 20; } .redes-flotantes img { float: right; clear: right; margin: 5px; transform: scale(.8); transition: all .2s ease-in-out; } .redes-flotantes img:hover { transform: scale(1.1) rotate(6deg); } /* Panel de contacto fijo (side / full view on mobile) */ .contact-content { background-color: #fff; position: fixed; top: 0; right: 0; width: 28%; height: 100%; padding: 20px; border-radius: 0 10px 10px 0; text-align: center; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2); z-index: 9999; } @media (max-width: 767px) { .contact-content { width: 100%; height: 100%; } } #closeContact { margin-top: 10px; } /* Botón flotante inferior derecho */ .float-button { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .float-button a { display: block; width: 60px; height: 60px; background-color: #25d366; border-radius: 50%; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); text-align: center; line-height: 60px; position: relative; transition: background-color .3s, transform .3s; } .float-button a .notification-image { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .float-button a:hover { background-color: #04f15b; transform: scale(1.1); } /* Responsive iframe sizing helper */ @media (max-width: 767px) { .embed-responsive-16by9 iframe { height: 170px; } } @media (min-width: 768px) and (max-width: 991px) { .embed-responsive-16by9 iframe { height: 300px; } } /* Social icons small adjustments */ .social-icons .btn { margin-right: 10px; border-radius: 50px; } /* Modal tweaks */ .modal-footer .btn { padding: 10px 30px; font-size: 18px; } .modal-header { background-image: linear-gradient(to right, #007BFF, #00C6FF); } .modal-title { font-weight: bold; } .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); } /* Mobile social icons: hide text, show icon size */ @media (max-width: 768px) { .social-icons a { font-size: 0; } .social-icons a i { font-size: 20px; line-height: 1; } } /* Placeholder for imagery used across modules (keeps original class available) */ .img-placeholder { background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999; } /* Small helpers for module cards (se pueden extender aquí) */ .modules-grid .module-card { transition: transform .25s ease, box-shadow .25s ease; } /* Carousel / module card overrides que estaban inline */ .modules-carousel .owl-nav { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); pointer-events: none; } .modules-carousel .owl-nav button { position: absolute; width: 50px; height: 50px; background: #042a98 !important; color: #fff !important; border-radius: 50%; font-size: 20px; line-height: 50px; text-align: center; pointer-events: all; transition: all .3s ease; box-shadow: 0 4px 15px rgba(4, 42, 152, 0.3); } .modules-carousel .owl-dots { text-align: center; margin-top: 20px; } .module-card { border-radius: 8px; overflow: hidden; background: #fff; } .module-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .module-img img { width: 100%; height: auto; display: block; } .module-overlay { transition: all .3s ease; } .module-content { padding: 18px; } /* Responsive minor adjustments */ @media (max-width: 991px) { .module-content { padding: 14px; } } /* Fin de components.css */ /* Additional styles moved from index.html inline blocks */ /* img-placeholder used inside modules grid */ .img-placeholder { height: 180px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; color: #9aa7b2; font-size: 36px; } @media (max-width:767px) { .img-placeholder { height: 140px; } } /* Featured modules responsive images & modal */ .rs-featured-modules .carousel-inner img { width: 100%; height: auto; max-height: 420px; object-fit: cover; display: block; } @media (max-width: 991px) { .rs-featured-modules .carousel-inner img { max-height: 320px; } } @media (max-width: 767px) { .rs-featured-modules .carousel-inner img { max-height: 240px; object-fit: cover; } } #moduleModalImage { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; } .featured-thumbs .thumb { transition: box-shadow .2s ease, transform .12s ease, opacity .12s ease; cursor: pointer; opacity: .85; border-radius: 4px; border: 2px solid transparent; } .featured-thumbs .thumb:hover { transform: translateY(-3px); opacity: 1; } .featured-thumbs .thumb.active-thumb { box-shadow: 0 6px 18px rgba(4, 42, 152, .25); border-color: #042a98; opacity: 1; } /* Modules carousel and module card styles (kept centralized) */ .modules-carousel .owl-nav { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); pointer-events: none; } .modules-carousel .owl-nav button { position: absolute; width: 50px; height: 50px; background: #042a98 !important; color: #fff !important; border-radius: 50%; font-size: 20px; line-height: 50px; text-align: center; pointer-events: all; transition: all .3s ease; box-shadow: 0 4px 15px rgba(4, 42, 152, 0.3); } .modules-carousel .owl-nav button:hover { background: #0642c9 !important; transform: scale(1.1); } .modules-carousel .owl-nav .owl-prev { left: -25px; } .modules-carousel .owl-nav .owl-next { right: -25px; } .modules-carousel .owl-dots { text-align: center; margin-top: 30px; } .modules-carousel .owl-dot { width: 12px; height: 12px; background: #ddd; border-radius: 50%; display: inline-block; margin: 0 5px; transition: all .3s ease; } .modules-carousel .owl-dot.active { background: #042a98; width: 30px; border-radius: 6px; } /* Module Card Styles (centralized duplicate safe) */ .module-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); transition: all .4s ease; height: 100%; display: flex; flex-direction: column; } .module-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(4, 42, 152, 0.2); } /* =================== Estilos específicos para telemedición =================== */ :root { --edsuite-primary: #106eea; } /* Asegura que los iconos de Font Awesome sean visibles y con tamaño apropiado */ .feature-list i, .btn-contact i { color: var(--edsuite-primary); font-size: 20px; width: 30px; display: inline-block; text-align: center; line-height: 1; margin-right: 10px; } /* Mejora la alineación y lectura de la lista de características */ .feature-list { margin: 0; padding: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; } /* Asegura imágenes responsivas y con buen aspecto */ .feature-img-wrapper img { max-width: 100%; height: auto; display: block; border-radius: 6px; } /* Botón de contacto: pequeño ajuste para el icono */ .btn-contact i { margin-right: 8px; } /* Fallback visual si Font Awesome no carga: muestra un punto visual */ .feature-list i:empty::before { content: '\25CF'; /* círculo */ color: var(--edsuite-primary); font-size: 12px; display: inline-block; width: 30px; text-align: center; } /* Aumenta contraste en textos justificados para mejor legibilidad */ .text-justify { text-align: justify; } /* Fin estilos telemedición */ .module-img { position: relative; overflow: hidden; height: 220px; } .module-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .module-card:hover .module-img img { transform: scale(1.1); } .module-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(4, 42, 152, 0.9), rgba(0, 172, 193, 0.8)); opacity: 0; transition: opacity .4s ease; display: flex; align-items: center; justify-content: center; } .module-card:hover .module-overlay { opacity: 1; } .module-icon { font-size: 60px; color: #fff; transform: scale(0.5); transition: transform .4s ease; } .module-card:hover .module-icon { transform: scale(1); } .module-content { padding: 25px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; } .module-title { color: #042a98; font-size: 22px; font-weight: 700; margin-bottom: 12px; transition: color .3s ease; } .module-card:hover .module-title { color: #00acc1; } .module-desc { color: #666; font-size: 15px; line-height: 1.6; margin: 0; } @media (max-width: 991px) { .modules-carousel .owl-nav .owl-prev { left: 0; } .modules-carousel .owl-nav .owl-next { right: 0; } } @media (max-width: 767px) { .module-img { height: 180px; } .module-title { font-size: 20px; } .module-desc { font-size: 14px; } } /* Social icons and contact methods (from feria modal) */ .social-icons { display: flex; gap: .5rem; margin-top: .5rem; } .social-icons .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 16px; transition: transform .15s; } .social-icons .social-icon:hover { transform: scale(1.08); } .social-icons .social-icon.facebook { background: #3b5998; } .social-icons .social-icon.instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); } .social-icons .social-icon.tiktok { background: #000; } .social-icons .social-icon.linkedin { background: #0077b5; } .contact-methods { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .contact-item { display: flex; align-items: center; gap: .75rem; } .contact-item .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 18px; transition: all .2s; } .contact-item .contact-icon:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .contact-item .contact-icon.whatsapp { background: #25D366; } .contact-item .contact-icon.email { background: #00acc1; } .contact-item .contact-text { font-size: 15px; font-weight: 500; color: #333; margin: 0; } .contact-item .contact-text a { color: #00acc1; text-decoration: none; } .module-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(4, 42, 152, 0.2); } .module-img { position: relative; overflow: hidden; height: 220px; } .module-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .module-card:hover .module-img img { transform: scale(1.1); } .module-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(4, 42, 152, 0.9), rgba(0, 172, 193, 0.8)); opacity: 0; transition: opacity .4s ease; display: flex; align-items: center; justify-content: center; } .module-card:hover .module-overlay { opacity: 1; } .module-icon { font-size: 60px; color: #fff; transform: scale(0.5); transition: transform .4s ease; } .module-card:hover .module-icon { transform: scale(1); } .module-content { padding: 25px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; } .module-title { color: #042a98; font-size: 22px; font-weight: 700; margin-bottom: 12px; transition: color .3s ease; } .module-card:hover .module-title { color: #00acc1; } .module-desc { color: #666; font-size: 15px; line-height: 1.6; margin: 0; } @media (max-width: 991px) { .modules-carousel .owl-nav .owl-prev { left: 0; } .modules-carousel .owl-nav .owl-next { right: 0; } } @media (max-width: 767px) { .module-img { height: 180px; } .module-title { font-size: 20px; } .module-desc { font-size: 14px; } } /* Social icons and contact methods (from feria modal) */ .social-icons { display: flex; gap: .5rem; margin-top: .5rem; } .social-icons .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 16px; transition: transform .15s; } .social-icons .social-icon:hover { transform: scale(1.08); } .social-icons .social-icon.facebook { background: #3b5998; } .social-icons .social-icon.instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); } .social-icons .social-icon.tiktok { background: #000; } .social-icons .social-icon.linkedin { background: #0077b5; } .contact-methods { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .contact-item { display: flex; align-items: center; gap: .75rem; } .contact-item .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 18px; transition: all .2s; } .contact-item .contact-icon:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .contact-item .contact-icon.whatsapp { background: #25D366; } .contact-item .contact-icon.email { background: #00acc1; } .contact-item .contact-text { font-size: 15px; font-weight: 500; color: #333; margin: 0; } .contact-item .contact-text a { color: #00acc1; text-decoration: none; } .contact-item .contact-text a:hover { text-decoration: underline; } /* --- Estilos para Header Pegajoso (Sticky) --- */ /* Aplicar sticky al contenedor principal del header */ .full-width-header { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; z-index: 1000; /* Asegura que flote sobre todo el contenido */ background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 100%; transition: all 0.3s ease; } /* Asegurar que el header interno también tenga fondo blanco */ #rs-header { background-color: #ffffff; } /* Mantener el menu-sticky para compatibilidad */ .menu-sticky { background-color: #ffffff; width: 100%; }