639 lines
12 KiB
HTML
639 lines
12 KiB
HTML
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Montserrat, sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
:root {
|
|
--color-dark-blue: rgb(10, 29, 59)
|
|
/*--color-dark-blue: rgb(34, 43, 89);*/
|
|
}
|
|
|
|
.justificado {
|
|
text-align: justify;
|
|
}
|
|
.norma-box{
|
|
height: 200px;
|
|
}
|
|
|
|
.text-subnormal{
|
|
font-size: .825rem;
|
|
}
|
|
.card-footer{
|
|
background: none !important;
|
|
border-top: none !important;
|
|
|
|
}
|
|
|
|
|
|
a .none-link, a none-link:hover{
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.swiper-button-next, .swiper-button-prev{
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
border: none !important;
|
|
border-radius : none !important;
|
|
}
|
|
|
|
/* Ajustes para el carrusel */
|
|
.norma-box {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.norma-box:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.carousel-control-prev,
|
|
.carousel-control-next {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
opacity: 1;
|
|
background: none;
|
|
}
|
|
|
|
.carousel-control-prev {
|
|
left: -25px;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
right: -25px;
|
|
}
|
|
|
|
.carousel-control-prev-icon,
|
|
.carousel-control-next-icon {
|
|
background-size: 60%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.carousel-control-prev {
|
|
left: 0;
|
|
}
|
|
.carousel-control-next {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.orange-item {
|
|
background-color: rgb(255, 102, 0) ;
|
|
color: black;
|
|
}
|
|
|
|
.orange-item:hover {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
.punto-cuadrado{
|
|
background-color: rgb(17, 134, 204) ; width: 5px; height: 5px;display: inline-block;
|
|
}
|
|
.punto-cuadrado-naranja{
|
|
background-color: rgb(255, 158, 23) ; width: 5px; height: 5px;display: inline-block;
|
|
}
|
|
.text-blue-soft{
|
|
color: rgb(17, 134, 204);
|
|
}
|
|
|
|
.text-blue-dark{
|
|
color: rgb(0, 8, 120);
|
|
}
|
|
|
|
.bg-color-blue-dark {
|
|
background-color: var(--color-dark-blue) !important;
|
|
}
|
|
.bg-color-blue-sky {
|
|
background-color: rgb(239, 248, 255) !important;
|
|
}
|
|
.bg-color-blue-sky-medium {
|
|
background-color: rgb(194, 227, 252) !important;
|
|
}
|
|
.bg-color-blue-soft{
|
|
background-color: rgb(31, 144, 255) !important;
|
|
}
|
|
.bg-color-blue-medium{
|
|
background-color: rgb(14, 85, 187) !important;
|
|
}
|
|
|
|
.btn.bg-color-blue-medium:hover{
|
|
background-color: rgb(14, 85, 187) !important;
|
|
}
|
|
|
|
.btn-close {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3e%3c/svg%3e") !important;
|
|
opacity: 1 !important; /* Asegúrate de que el fondo sea visible */
|
|
}
|
|
.som-nom {
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.som-nom:hover {
|
|
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4); /* sombra azul suave */
|
|
border-color: #0d6efd; /* azul Bootstrap */
|
|
background-color: rgb(14, 85, 187);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: var(--color-dark-blue) !important;
|
|
height: 0;
|
|
opacity: 0;
|
|
transition: opacity .3s ease, top .3s ease, box-shadow .3s ease;
|
|
position: fixed;
|
|
width: 100%;
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.navbar.active {
|
|
opacity: 1;
|
|
height: 80px;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
top: 80px;
|
|
}
|
|
|
|
.hero video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-logo {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 10px;
|
|
max-height: 60px;
|
|
z-index: 1;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
|
|
.menu-item {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#nuestros-servicios .card-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#nuestros-servicios .card {
|
|
background-color: rgb(242, 249, 255);
|
|
}
|
|
|
|
.whatsapp {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
/* Ajusta el valor según sea necesario para que esté por encima de otros elementos */
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.whatsapp:hover{
|
|
|
|
background-color: limegreen;
|
|
}
|
|
|
|
.whatsapp img {
|
|
width: 40px
|
|
}
|
|
|
|
|
|
|
|
.carousel-container {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.carousel-track {
|
|
display: flex;
|
|
transition: transform 0.4s ease-in-out;
|
|
width: max-content;
|
|
}
|
|
|
|
.carousel-item {
|
|
flex: 0 0 auto;
|
|
min-width: calc(100% / 6);
|
|
max-width: calc(100% / 6);
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.carousel-item {
|
|
min-width: 25%;
|
|
max-width: 25%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.carousel-item {
|
|
min-width: 50%;
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Estilos para los efectos hover en las tarjetas */
|
|
|
|
/* Transición suave para todos los elementos */
|
|
#nuestros-servicios .card, #nuestros-servicios .card img, #nuestros-servicios .card-body {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Efecto de sombreado y cambio de color de fondo al pasar el ratón sobre la tarjeta */
|
|
#nuestros-servicios .card:hover {
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-5px);
|
|
border-color: #0d6efd;
|
|
background-color: #dbe8ff; /* Color de fondo cuando se hace hover */
|
|
}
|
|
|
|
/* Efecto fade-out para la imagen al hover */
|
|
#nuestros-servicios .card:hover img {
|
|
opacity: 0.7;
|
|
filter: brightness(90%);
|
|
}
|
|
|
|
/* Opcional: Mejorar la apariencia del enlace "Leer más" al hacer hover */
|
|
#nuestros-servicios .card:hover .link-offset-2 {
|
|
color: #0d6efd;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
|
|
.carousel-item img {
|
|
width: 200px;
|
|
height: auto;
|
|
margin: auto;
|
|
}
|
|
|
|
.carousel-container {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.carousel-item {
|
|
flex: 0 0 auto;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
@media (max-width:576px) {
|
|
.carousel-item {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.swiper-container {
|
|
width: 100%;
|
|
padding: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-slide {
|
|
width: 20%;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: box-shadow .3s ease;
|
|
}
|
|
|
|
.sombra {
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.item {
|
|
border: 1px solid #ccc;
|
|
border-radius: 10px;
|
|
transition: box-shadow .3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item:hover {
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.item .background-img {
|
|
width: 100%;
|
|
height: 0;
|
|
padding-top: 133.33%;
|
|
background-size: cover;
|
|
}
|
|
|
|
.item .content {
|
|
padding: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item .content h4 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0 5px 5px 5px;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.item .content .add-symbol {
|
|
color: #00f;
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-size: cover;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
background-image: url(assets/img/circulo-gris.svg);
|
|
}
|
|
|
|
.swiper-button-next {
|
|
background-image: url(assets/img/circulo-gris-derecha.svg);
|
|
}
|
|
|
|
.marca-img {
|
|
max-height: 30px;
|
|
}
|
|
|
|
.footer {
|
|
background-color:var(--color-dark-blue);
|
|
|
|
}
|
|
|
|
.logo-footer {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
#menu-desktop {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
background-color: #00f;
|
|
}
|
|
|
|
.nav-ajuste {
|
|
padding: 22px;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: #fff;
|
|
height: 0;
|
|
opacity: 0;
|
|
transition: opacity .3s ease, top .3s ease, box-shadow .3s ease;
|
|
position: fixed;
|
|
width: 100%;
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, .2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.navbar.active {
|
|
opacity: 1;
|
|
height: 80px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.navbar .navbar-toggler {
|
|
border: none;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.logo-menu-desktop {
|
|
margin-top: 23px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.menu-desktop-item {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.logo-menu-size {
|
|
height: 50px;
|
|
}
|
|
|
|
|
|
|
|
.footer-logo {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.texto-little {
|
|
font-size: .725rem;
|
|
}
|
|
|
|
.texto-footer-title {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.texto-footer-normal {
|
|
color: #ccc;
|
|
}
|
|
|
|
.texto-sombra {
|
|
text-shadow: 2px 2px 2px #000;
|
|
}
|
|
|
|
.texto-bread {
|
|
font-size: .725rem;
|
|
}
|
|
|
|
.lineabajo {
|
|
position: relative;
|
|
}
|
|
|
|
.lineabajo::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background-color: #00f;
|
|
animation: growLine 2s forwards;
|
|
}
|
|
|
|
.divcontacto {
|
|
background-color: rgb(14, 85, 187) ;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.divInfo {
|
|
background-color: rgb(34, 43, 89);
|
|
}
|
|
|
|
|
|
|
|
|
|
.fijosticky {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
display: none;
|
|
/* Inicialmente oculto */
|
|
z-index: 999;
|
|
/* Asegura que esté por encima de otros elementos */
|
|
}
|
|
|
|
|
|
.contacto-btn-stick, .contacto-btn {
|
|
background-color: rgb(255, 102, 0);
|
|
color: white;
|
|
}
|
|
|
|
|
|
.contacto-btn-stick:hover, contacto-btn:hover {
|
|
background-color: rgb(0, 0, 0);
|
|
color: white;
|
|
}
|
|
|
|
.text-nom{
|
|
font-size: .825rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
.fade-in {
|
|
animation: fadeIn 2s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
.fade-in-zoom {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (min-width:768px) {
|
|
.col-derecha-espacio {
|
|
padding: 32px !important;
|
|
}
|
|
|
|
#imagenFirts {
|
|
position: sticky;
|
|
overflow: hidden;
|
|
height: 140vh;
|
|
top: 0;
|
|
}
|
|
|
|
.col-derecha-texto {
|
|
font-size: 1.025rem;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media (min-width:992px) {
|
|
.col-derecha-espacio {
|
|
padding: 100px 120px !important;
|
|
}
|
|
|
|
.col-derecha-texto {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
|
|
@keyframes growLine {
|
|
from {
|
|
width: 0;
|
|
}
|
|
|
|
to {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
|
|
.menu-links, .menu-links a{
|
|
/*color: rgb(55, 65, 97) !important;*/
|
|
color: rgb(255, 255, 255) !important;
|
|
text-decoration:none ;
|
|
}
|
|
|
|
.menu-links .withline a:hover{
|
|
text-decoration:underline !important;
|
|
}
|
|
|
|
|
|
.menu-links .sinline a:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
a:hover .tlink{ text-decoration-line: underline;text-decoration-color: #1e90ff;text-underline-position: under;text-underline-offset: 1px;text-decoration-thickness: 4px;}
|
|
|
|
|
|
|
|
/* En pantallas pequeñas, centrado abajo */
|
|
@media (max-width: 768px) {
|
|
.hero-logo {
|
|
top: auto;
|
|
bottom: 10px;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
</style> |