@charset "UTF-8";

:root {
  --bs-primary: #0d1726;
  --bs-secondary: #6c757d;
  --bs-success: #008e42;
  --bs-info: #b4d8f3;
  --bs-warning: #ffc107;
  --bs-danger: #c7493d;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

body {
  background-color: var(--bs-light);
  font-family: 'Roboto', sans-serif;
  transition: all 0.5s;
}

/* Degradado */
.primera {
  background-image: linear-gradient(
    to bottom,
    #0d1726,
    #012c3f,
    #004252,
    #005a5d,
    #00715e,
    #00826b,
    #009378,
    #00a585,
    #21b4ae,
    #55c1cf,
    #87cce5,
    #b4d8f3
  );
}

#navbar {
  z-index: 3;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Animaciones */
.heartbeat {
  -webkit-animation: heartbeat 7s ease-in-out infinite both;
  animation: heartbeat 7s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* X-Small devices (landscape phones, 575px and down) */
@media screen and (max-width: 575px) {
  .logo-principal {
    width: 100%;
    height: auto;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
  .logo-principal {
    width: 100%;
    height: auto;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .logo-principal {
    width: 100%;
    height: auto;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .logo-principal {
    width: 75%;
    height: auto;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .logo-principal {
    width: 50%;
    height: auto;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
  .logo-principal {
    width: 50%;
    height: auto;
  }
}

/* NavBar */
.nav-item:hover {
  background-color: var(--bs-success);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
  border-radius: 5px;
}

.nav-link-social {
  border: 1px solid transparent;
}

.nav-link-social:hover {
  border: 1px solid var(--bs-warning);
  border-radius: 5px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
}

.link-facebook {
  color: #1873eb;
}

.link-messenger {
  color: #0084ff;
}

.link-whatsapp {
  color: #43c554;
}

.link-instagram {
  color: #e1306c;
}

.link-email {
  color: #de2125;
}

#servicios {
  background-color: white;
}

#contacto {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

#footer {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

#footer .row {
  padding-left: 10%;
  padding-right: 10%;
}

#footer a:hover{
  border-bottom: 1px solid var(--bs-light);
}

.link-light {
  text-decoration: none !important;
}

.list-planes {
  list-style: none;
}

.list-planes {
  list-style-image: url('../img/comprobar.png');
}

.header_card{
  height: 25px;
  width: 25px;
}

.contact-link-social{
  text-decoration: none;
}

.contact-link-social:hover{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
  color: var(--bs-primary);
}

img,
video {
  aspect-ratio: attr(width) / attr(height);
}