html { position: relative; margin: 0; padding: 0; height: 100%; }
body { margin: 0; padding: 0; text-align: start; height: 100%; }
#imPageExtContainer { min-height: 100%; }
#imPageIntContainer { position: relative;}
#imPage { position: relative; width: 100%; }
#imHeaderBg { position: absolute; inset-inline-start: 0px; top: 0; width: 100%; }
#imContent { position: relative; overflow-x: clip; }
#imFooterBg { position: absolute; inset-inline-start: 0px; bottom: 0; width: 100%; }
#imStickyBarContainer { visibility: hidden; position: fixed; overflow: hidden; }
#imPageToTop { position: fixed; bottom: 30px; inset-inline-end: 30px; z-index: 100500; display: none; opacity: 0.75 }
#imPageToTop:hover { opacity: 1; cursor: pointer; }
@media (min-width: 1200.0px) {
#imPageExtContainer { background-image: none; background-color: rgba(248, 250, 251, 1); z-index: 0; position: relative; }
#imPage { padding-top: 0px; padding-bottom: 0px; min-width: 1200px; }
#imHeaderBg { height: 80px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imHeader { background-image: none; background-color: rgba(0, 61, 92, 1); }
#imHeaderObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 80px; width:1200px; }
#imContent { align-self: start; padding: 0px 0 0px 0; }
#imContentGraphics { min-height: 520px; background-image: none; background-color: rgba(248, 250, 251, 1); }
#imFooterBg { z-index: -1; height: 150px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imFooter { background-image: none; background-color: transparent; }
#imFooterObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 150px; width:1200px; }
#imSideBar { background-image: none; background-color: transparent; overflow: visible; zoom: 1; z-index: 200; }
#imSideBarObjects { position: relative; height: 520px; }
#imStickyBarContainer { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; z-index: 10301; }
#imStickyBarGraphics { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; background-image: none; background-color: transparent; position: absolute; }
#imStickyBar { position: relative; top: 0; inset-inline-start: 0px; margin: auto; width: 1200px }
#imStickyBarObjects { position: relative; height: 56px; }
}
@media (max-width: 1199.9px) and (min-width: 720.0px) {
#imPageExtContainer { background-image: none; background-color: rgba(248, 250, 251, 1); z-index: 0; position: relative; }
#imPage { padding-top: 0px; padding-bottom: 0px; min-width: 720px; }
#imHeaderBg { height: 60px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imHeader { background-image: none; background-color: transparent; }
#imHeaderObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 60px; width:720px; }
#imContent { align-self: start; padding: 0px 0 0px 0; }
#imContentGraphics { min-height: 520px; background-image: none; background-color: rgba(248, 250, 251, 1); }
#imFooterBg { z-index: -1; height: 150px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imFooter { background-image: none; background-color: transparent; }
#imFooterObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 150px; width:720px; }
#imSideBar { background-image: none; background-color: transparent; overflow: visible; zoom: 1; z-index: 200; }
#imSideBarObjects { position: relative; height: 520px; }
#imStickyBarContainer { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; z-index: 10301; }
#imStickyBarGraphics { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; background-image: none; background-color: transparent; position: absolute; }
#imStickyBar { position: relative; top: 0; inset-inline-start: 0px; margin: auto; width: 720px }
#imStickyBarObjects { position: relative; height: 56px; }
}
@media (max-width: 719.9px) and (min-width: 480.0px) {
#imPageExtContainer { background-image: none; background-color: rgba(248, 250, 251, 1); z-index: 0; position: relative; }
#imPage { padding-top: 0px; padding-bottom: 0px; min-width: 480px; }
#imHeaderBg { height: 60px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imHeader { background-image: none; background-color: transparent; }
#imHeaderObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 60px; width:480px; }
#imContent { align-self: start; padding: 0px 0 0px 0; }
#imContentGraphics { min-height: 520px; background-image: none; background-color: rgba(248, 250, 251, 1); }
#imFooterBg { z-index: -1; height: 150px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imFooter { background-image: none; background-color: transparent; }
#imFooterObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 150px; width:480px; }
#imSideBar { background-image: none; background-color: transparent; overflow: visible; zoom: 1; z-index: 200; }
#imSideBarObjects { position: relative; height: 520px; }
#imStickyBarContainer { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; z-index: 10301; }
#imStickyBarGraphics { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; background-image: none; background-color: transparent; position: absolute; }
#imStickyBar { position: relative; top: 0; inset-inline-start: 0px; margin: auto; width: 480px }
#imStickyBarObjects { position: relative; height: 56px; }
}
@media (max-width: 479.9px) {
#imPageExtContainer { background-image: none; background-color: rgba(248, 250, 251, 1); z-index: 0; position: relative; }
#imPage { padding-top: 0px; padding-bottom: 0px; }
#imHeaderBg { height: 60px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imHeader { background-image: none; background-color: transparent; }
#imHeaderObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 60px; width:320px; }
#imContent { align-self: start; padding: 0px 0 0px 0; }
#imContentGraphics { min-height: 520px; background-image: none; background-color: rgba(248, 250, 251, 1); }
#imFooterBg { z-index: -1; height: 150px; background-image: none; background-color: rgba(0, 61, 92, 1); }
#imFooter { background-image: none; background-color: transparent; }
#imFooterObjects { margin-inline-start: auto; margin-inline-end: auto; position: relative; height: 150px; width:320px; }
#imSideBar { background-image: none; background-color: transparent; overflow: visible; zoom: 1; z-index: 200; }
#imSideBarObjects { position: relative; height: 520px; }
#imStickyBarContainer { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; z-index: 10301; }
#imStickyBarGraphics { top: 0; inset-inline-start: 0px; inset-inline-end: 0px; margin: auto; width: 100%; height: 56px; box-sizing: border-box; background-image: none; background-color: transparent; position: absolute; }
#imStickyBar { position: relative; top: 0; inset-inline-start: 0px; margin: auto; width: 320px }
#imStickyBarObjects { position: relative; height: 56px; }
}
/* ==========================================
CUSTOM MENU STYLES - Edificio las Tres Carabelas
Mejoras UX/UI para el sistema de menú:
- Integración con la paleta de colores corporativa
- Jerarquía visual clara entre niveles de menú
- Feedback interactivo y moderno
- Transiciones suaves y profesionales
Paleta de colores del sitio:
- Header/Nav: rgba(0, 61, 92, 1) - Azul oscuro corporativo
- Footer: rgba(17, 85, 204, 1) - Azul vibrante
- Fondo: rgba(248, 250, 251, 1) - Gris claro
- Acento hover: rgba(17, 85, 204, 1) con variaciones de opacidad
========================================== */
/* ==========================================
ESTILOS GLOBALES DEL MENÚ
========================================== */
/* Mejorar la transición general del menú */
[id*="MenuObject"] {
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* Contenedor principal del menú con sombra sutil */
[id*="MenuObject_"][id*="_container"] {
box-shadow: 0 2px 4px rgba(0, 61, 92, 0.08);
}
/* ==========================================
NIVEL 1 - MENÚ PRINCIPAL (Desktop)
========================================== */
/* Items del menú principal - Fondo coherente con header */
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
background-color: rgba(0, 61, 92, 1) !important;
background-image: none !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
position: relative;
overflow: visible;
}
/* Texto del menú principal */
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper button {
color: rgba(255, 255, 255, 1) !important;
font-weight: 500 !important;
transition: all 0.25s ease;
}
/* Estado HOVER del menú principal - Usar el azul vibrante del footer */
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper {
background-color: rgba(17, 85, 204, 1) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(17, 85, 204, 0.3);
}
/* Texto en hover */
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper button,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper button {
color: rgba(255, 255, 255, 1) !important;
text-decoration: none !important;
font-weight: 600 !important;
}
/* Estado CURRENT (página actual) */
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper {
background-color: rgba(17, 85, 204, 1) !important;
border-bottom: 3px solid rgba(255, 255, 255, 0.8) !important;
}
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper button {
color: rgba(255, 255, 255, 1) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* Indicador visual para items con submenú */
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel > .label-wrapper::after {
content: '▾';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
transition: transform 0.3s ease;
}
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper::after {
transform: translateY(-50%) rotate(180deg);
color: rgba(255, 255, 255, 1);
}
/* ==========================================
NIVEL 2 - PRIMER NIVEL DE SUBMENÚ
========================================== */
/* Contenedor de submenús nivel 2 */
[id*="MenuObject"] ul ul {
background-color: rgba(17, 85, 204, 0.95) !important;
border: none !important;
border-radius: 4px !important;
box-shadow: 0 6px 20px rgba(0, 61, 92, 0.25);
padding: 8px 0;
margin-top: 4px;
backdrop-filter: blur(8px);
}
/* Items del submenú nivel 2 */
[id*="MenuObject"] ul ul li > .label-wrapper {
background-color: transparent !important;
border: none !important;
border-left: 3px solid transparent !important;
padding-left: 15px !important;
transition: all 0.25s ease;
}
/* Texto del submenú nivel 2 */
[id*="MenuObject"] ul ul .label,
[id*="MenuObject"] ul ul button {
color: rgba(255, 255, 255, 0.95) !important;
font-weight: 400 !important;
font-size: 11pt !important;
}
/* Hover en submenú nivel 2 */
[id*="MenuObject"] ul ul li:hover > .label-wrapper {
background-color: rgba(255, 255, 255, 0.15) !important;
border-left-color: rgba(255, 255, 255, 0.9) !important;
padding-left: 20px !important;
}
[id*="MenuObject"] ul ul li:hover > .label-wrapper .label,
[id*="MenuObject"] ul ul li:hover > .label-wrapper button {
color: rgba(255, 255, 255, 1) !important;
font-weight: 500 !important;
}
/* Items activos en submenú nivel 2 */
[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper {
background-color: rgba(255, 255, 255, 0.2) !important;
border-left-color: rgba(255, 255, 255, 1) !important;
}
[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper .label,
[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper button {
color: rgba(255, 255, 255, 1) !important;
font-weight: 600 !important;
}
/* ==========================================
NIVEL 3 - SEGUNDO NIVEL DE SUBMENÚ
========================================== */
/* Contenedor de submenús nivel 3 */
[id*="MenuObject"] ul ul ul {
background-color: rgba(17, 85, 204, 0.85) !important;
margin-left: -8px;
margin-top: 2px;
}
/* Items del submenú nivel 3 */
[id*="MenuObject"] ul ul ul li > .label-wrapper {
padding-left: 25px !important;
border-left-width: 2px !important;
}
[id*="MenuObject"] ul ul ul .label,
[id*="MenuObject"] ul ul ul button {
font-size: 10pt !important;
font-weight: 400 !important;
}
/* Hover en submenú nivel 3 */
[id*="MenuObject"] ul ul ul li:hover > .label-wrapper {
padding-left: 30px !important;
background-color: rgba(255, 255, 255, 0.18) !important;
}
/* ==========================================
NIVEL 4+ - NIVELES ADICIONALES
========================================== */
[id*="MenuObject"] ul ul ul ul {
background-color: rgba(17, 85, 204, 0.75) !important;
}
[id*="MenuObject"] ul ul ul ul li > .label-wrapper {
padding-left: 35px !important;
}
[id*="MenuObject"] ul ul ul ul .label,
[id*="MenuObject"] ul ul ul ul button {
font-size: 9pt !important;
}
/* ==========================================
SEPARADORES DEL MENÚ
========================================== */
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper {
background-color: rgba(0, 61, 92, 0.7) !important;
cursor: default;
border-radius: 4px !important;
}
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper button {
color: rgba(255, 255, 255, 0.6) !important;
font-weight: 300 !important;
font-style: italic;
}
[id*="MenuObject"] ul ul .imMnMnSeparator > .label-wrapper {
background-color: rgba(255, 255, 255, 0.1) !important;
border-left: none !important;
margin: 4px 0;
padding: 2px 0;
}
[id*="MenuObject"] ul ul .imMnMnSeparator .label,
[id*="MenuObject"] ul ul .imMnMnSeparator button {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 9pt !important;
font-weight: 300 !important;
}
/* ==========================================
MENÚ MÓVIL (Hamburger)
========================================== */
/* Botón hamburguesa */
[id*="MenuObject"] .hamburger-button {
background-color: rgba(0, 61, 92, 1) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s ease;
}
[id*="MenuObject"] .hamburger-button:hover {
background-color: rgba(17, 85, 204, 1) !important;
transform: scale(1.05);
}
[id*="MenuObject"] .hamburger-bar {
background-color: rgba(255, 255, 255, 1) !important;
transition: all 0.3s ease;
}
/* Menú móvil desplegado */
[id*="MenuObject-menu-opened"] {
background-color: rgba(0, 61, 92, 0.98) !important;
backdrop-filter: blur(10px);
}
[id*="MenuObject-menu-opened"] [id*="_container-menu-opened"] > ul {
background-color: rgba(0, 61, 92, 1) !important;
}
/* Botón de cierre del menú móvil */
[id*="MenuObject-menu-opened"] .hamburger-menu-close-button {
color: rgba(255, 255, 255, 1) !important;
background-color: rgba(17, 85, 204, 1);
transition: background-color 0.3s ease;
}
[id*="MenuObject-menu-opened"] .hamburger-menu-close-button:hover {
background-color: rgba(17, 85, 204, 0.8);
}
/* Items en el menú móvil - Todos los niveles */
[id*="MenuObject-menu-opened"] ul li .label-wrapper {
background-color: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-left: 3px solid transparent !important;
transition: all 0.25s ease;
}
[id*="MenuObject-menu-opened"] ul li:hover .label-wrapper {
background-color: rgba(17, 85, 204, 0.5) !important;
border-left-color: rgba(255, 255, 255, 0.8) !important;
}
/* Jerarquía visual en menú móvil mediante indentación */
[id*="MenuObject-menu-opened"] ul ul li .label-wrapper {
padding-left: 30px !important;
}
[id*="MenuObject-menu-opened"] ul ul ul li .label-wrapper {
padding-left: 50px !important;
}
[id*="MenuObject-menu-opened"] ul ul ul ul li .label-wrapper {
padding-left: 70px !important;
}
/* Fondo del menú móvil */
[id*="MenuObject-menu-opened"] .hamburger-menu-background {
background-color: rgba(0, 61, 92, 0.95) !important;
}
/* ==========================================
ACCESIBILIDAD Y FOCUS
========================================== */
/* Mejorar el indicador de foco para teclado */
[id*="MenuObject"] .label-wrapper:has(:focus-visible) {
outline: 3px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(17, 85, 204, 0.3);
}
[id*="MenuObject"] button:focus-visible {
outline: none;
}
/* ==========================================
ANIMACIONES Y TRANSICIONES
========================================== */
/* Animación de aparición de submenús */
[id*="MenuObject"] ul ul {
animation: slideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animación de hover en items */
[id*="MenuObject"] li .label-wrapper {
position: relative;
}
[id*="MenuObject"] li .label-wrapper::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: rgba(255, 255, 255, 0.8);
transition: width 0.3s ease;
}
[id*="MenuObject"] li:hover .label-wrapper::before {
width: 100%;
}
/* ==========================================
RESPONSIVE - AJUSTES POR BREAKPOINT
========================================== */
/* Desktop (> 1200px) */
@media (min-width: 1200.0px) {
[id*="MenuObject_"][id*="_container"] > ul > li {
margin-inline-start: 3px;
}
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
border-radius: 6px !important;
}
}
/* Tablet (720px - 1200px) */
@media (max-width: 1199.9px) and (min-width: 720.0px) {
[id*="MenuObject_"][id*="_container"] > ul > li {
margin-inline-start: 2px;
}
[id*="MenuObject"] ul ul {
min-width: 200px;
}
}
/* Mobile (< 720px) */
@media (max-width: 719.9px) {
/* En móvil, asegurar que todos los niveles sean claramente visibles */
[id*="MenuObject-menu-opened"] ul li .label {
font-size: 13pt !important;
}
[id*="MenuObject-menu-opened"] ul ul li .label {
font-size: 12pt !important;
}
[id*="MenuObject-menu-opened"] ul ul ul li .label {
font-size: 11pt !important;
}
}
/* ==========================================
REFINAMIENTOS FINALES
========================================== */
/* Asegurar que los enlaces no tengan el estilo por defecto */
[id*="MenuObject"] a.label {
text-decoration: none !important;
}
/* Mejorar el contraste en modo alto contraste */
@media (prefers-contrast: high) {
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[id*="MenuObject"] ul ul {
border: 2px solid rgba(255, 255, 255, 0.5) !important;
}
}
/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
[id*="MenuObject"],
[id*="MenuObject"] * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================
TEMA OSCURO (Opcional - para futuro)
========================================== */
@media (prefers-color-scheme: dark) {
/* El sitio ya usa colores oscuros, pero se puede refinar si es necesario */
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
background-color: rgba(0, 61, 92, 1) !important;
}
[id*="MenuObject"] ul ul {
background-color: rgba(17, 85, 204, 0.98) !important;
}
}
/* ==========================================
FOOTER LOGO ENHANCEMENT - Edificio las Tres Carabelas
SOLUCIÓN IMPLEMENTADA:
El logo institucional se mimetizaba con el fondo azul vibrante del footer.
Se cambió el color de fondo del footer de:
rgba(17, 85, 204, 1) - Azul vibrante
A:
rgba(0, 61, 92, 1) - Azul oscuro corporativo (mismo del header)
Resultado: El logo ahora tiene contraste natural sin necesidad de
efectos CSS adicionales. La paleta corporativa sigue siendo coherente
usando el azul oscuro en header y footer.
5 OPCIONES INTENTADAS (Desactivadas - Ya no necesarias):
1. Fondo blanco con sombra
2. Sombra pronunciada sin fondo
3. Filtro de brillo
4. Glassmorphism moderno
5. Borde blanco elegante
========================================== */
/* ==========================================
OPCIÓN 1: FONDO BLANCO CON SOMBRA (RECOMENDADO)
Profesional, limpio y con excelente contraste
========================================== */
/*
#imFooter_imObjectImage_09 img {
background-color: rgba(255, 255, 255, 1) !important;
padding: 12px 16px !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
transition: all 0.3s ease !important;
}
#imFooter_imObjectImage_09 img:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}
*/
/* ==========================================
OPCIÓN 2: SOMBRA PRONUNCIADA SIN FONDO
Destaca el logo sin agregar fondo, más minimalista
========================================== */
/*
#imFooter_imObjectImage_09 img {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4))
drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) !important;
transition: filter 0.3s ease !important;
}
#imFooter_imObjectImage_09 img:hover {
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 16px rgba(255, 255, 255, 0.8)) !important;
}
*/
/* ==========================================
OPCIÓN 3: FILTRO DE BRILLO
Ilumina el logo para crear contraste con el fondo azul
========================================== */
/*
#imFooter_imObjectImage_09 img {
filter: brightness(1.3) contrast(1.2) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
background-color: rgba(255, 255, 255, 0.15) !important;
padding: 10px !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
}
#imFooter_imObjectImage_09 img:hover {
filter: brightness(1.4) contrast(1.25) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)) !important;
background-color: rgba(255, 255, 255, 0.25) !important;
}
*/
/* ==========================================
OPCIÓN 4: GLASSMORPHISM MODERNO
Fondo semi-transparente con blur, efecto vidrio esmerilado
========================================== */
/*
#imFooter_imObjectImage_09 {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 10px !important;
padding: 14px 18px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
#imFooter_imObjectImage_09:hover {
background: rgba(255, 255, 255, 0.25) !important;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
#imFooter_imObjectImage_09 img {
position: relative;
z-index: 1;
}
*/
/* ==========================================
OPCIÓN 5: BORDE BLANCO ELEGANTE
Marco blanco que separa el logo del fondo
NOTA: Desactivado - Ya no es necesario porque se cambió el color
del footer de rgba(17, 85, 204, 1) a rgba(0, 61, 92, 1) para
coincidir con el header. El logo ahora tiene contraste natural.
========================================== */
/*
#imFooter_imObjectImage_09 img {
border: 3px solid rgba(255, 255, 255, 0.9) !important;
padding: 10px 14px !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
transition: all 0.3s ease !important;
}
#imFooter_imObjectImage_09 img:hover {
border-color: rgba(255, 255, 255, 1) !important;
background-color: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
*/
/* ==========================================
AJUSTES RESPONSIVE PARA EL LOGO DEL FOOTER
Ajustes de padding, borde y sombra
NOTA: Desactivados - Ya no son necesarios
========================================== */
/*
/* Tablet - Borde y padding medios */
/*
@media (max-width: 1199.9px) and (min-width: 720.0px) {
#imFooter_imObjectImage_09 img {
border: 2px solid rgba(255, 255, 255, 0.9) !important;
padding: 8px 12px !important;
border-radius: 7px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#imFooter_imObjectImage_09 img:hover {
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
}
*/
/*
/* Mobile - Borde más fino */
/*
@media (max-width: 719.9px) {
#imFooter_imObjectImage_09 img {
border: 2px solid rgba(255, 255, 255, 0.85) !important;
padding: 6px 10px !important;
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
#imFooter_imObjectImage_09 img:hover {
transform: scale(1.03);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}
}
*/
/*
/* Móvil pequeño - Borde mínimo */
/*
@media (max-width: 479.9px) {
#imFooter_imObjectImage_09 img {
border: 2px solid rgba(255, 255, 255, 0.8) !important;
padding: 5px 8px !important;
border-radius: 5px !important;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12) !important;
}
#imFooter_imObjectImage_09 img:hover {
transform: scale(1.02);
}
}
*/