/* styles.css */ /* Seleccionamos el elemento */ h1 { color: #0d3b66; /text-align: center; margin-bottom: 20px; font-size: 50px; } h2 { color: #0d3b66; /text-align: center; } h3 { color: rgb(66, 78, 116); text-align: center; margin-bottom: 20px; font-size: 35px; } /* Seleccionamos el elemento

(los párrafos) */ p { font-family: verdana, sans-serif; /* Usamos una fuente de respaldo */ font-size: 20px; text-align: center; } /* ---------------------------------------------------- */ /* CLASE ESPECÍFICA: SOLO PARA DIMENSIONES DE UNA IMAGEN */ /* ---------------------------------------------------- */ .mini { width: 200px; max-width: 100%; height: auto; } .pequena { width: 400px; height: 300px; } .mediana { width: 600px; height: 400px; } .grande { width: 800px; height: 600px; } /* ---------------------------------------------------- */ /* CONTENEDOR PARA CENTRAR IMÁGENES */ /* ---------------------------------------------------- */ .contenedor-img { display: flex; justify-content: center; margin: 20px 0; } .contenedor-img img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } html, body { height: 100%; margin: 0; padding: 0; } .wrapper { min-height: 100vh; /* Fuerza al menos el 100% de la altura del viewport */ display: flex; flex-direction: column; } .content { flex-grow: 1; /* Esto hace que el contenido ocupe todo el espacio extra */ } .card:hover .imagen-secundaria { opacity: 1 !important; transition: opacity 0.5s ease; } .card:hover .imagen-principal { opacity: 0 !important; transition: opacity 0.5s ease; } .imagen-secundaria { opacity: 0; transition: opacity 0.5s ease; } .text-dark-blue { color: #0d2f4f !important; } body { background-color: #2a4360 !important; background-image: linear-gradient(to bottom, #e6eaef 0%, #d2d8df 100%); } /* BARRA DE MENÚ – AZUL OSCURO EN TODAS LAS PÁGINAS */ .navbar { background-color: #20354d !important; } /* para que el texto quede más brillante y bonito */ .navbar .nav-link { color: #e0e1dd !important; } .navbar .nav-link:hover { color: #ffffff !important; } /* El ícono del carrito y el badge */ .navbar .bi-cart-fill { color: #e0e1dd; } .navbar .badge { background-color: #d62828 !important; /* rojo fuerte para que resalte */ } /* Espacio para que el contenido no quede tapado por el menú fijo */ body { padding-top: 210px; /* Ajusta este valor si el menú tapa el título */ } /* Transición suave */ .transition-header { transition: transform 0.3s ease-in-out; } /* Clase para esconder el menú hacia arriba */ .header-hidden { transform: translateY(-100%); } /* Ajuste para móvil: menos padding porque el menú es más alto */ @media (max-width: 991px) { body { padding-top: 260px; } }