/* Custom CSS */

:root {
  --main-color: white;
  --main-background:black;
}

.fondo {
  background-color: var(--main-background);
}

.noborder {
  border:none;
}

.ocultar {
  display: none;
}

.active{
	color: var(--main-color) !important;
}

.draw-border {
  position:relative;
  padding:10px 20px;
  font-size:22px;
  border-top-right-radius:10px;
  border-bottom-left-radius:10px;
  transition:all 1s;
  cursor:pointer;
  &:after,&:before{
    content:" ";
    width:10px;
    height:10px;
    position:absolute;
    border:0px solid #fff;
    transition:all 1s;
    }
  &:after{
    top:0px;
    left:0px;
    border-top:5px solid  var(--main-background);
    border-left:5px solid var(--main-background);
  }
  &:before{
    bottom:0px;
    right:0px;
    border-bottom:5px solid  var(--main-background);
    border-right:5px solid var(--main-background);
  }
  &:hover {
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
    &:before,&:after {
      width:100%;
      height:100%;
    }
  }
}


li a {
    position: relative;
    display: block;
    margin: 20px 0;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--main-color);
    transition: .5s;
    z-index: 1;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-top: 2px solid var(--main-color);
      border-bottom: 2px solid var(--main-color);
      transform: scaleY(2);
      opacity: 0;
      transition: .3s;
    }
    &:after {
      content: '';
      position: absolute;
      top: 2px;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--main-color);
      transform: scale(0);
      opacity: 0;
      transition: .3s;
      z-index: -1;
    }
    &:hover {
      color: var(--main-background) !important;
      &:before {
        transform: scaleY(1);
        opacity: 1;
      }
      &:after {
        transform: scaleY(1);
        opacity: 1;
      }
    }
  }

.image-container {
  width: 100%; /* Ancho del contenedor */
  height: 300px; /* Alto del contenedor */
  overflow: hidden; /* Oculta cualquier contenido que exceda las dimensiones del contenedor */
  position: relative; /* Asegura que la imagen interna se posicione correctamente */
}

/* Estilos para la imagen */
.image-zoom {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: 100%; /* La imagen ocupará todo el alto del contenedor */
  object-fit: cover; /* Ajusta el tamaño y recorta la imagen para que encaje en el contenedor */
  transition: transform 0.9s ease; /* Transición suave al aplicar el zoom */
}

.separar {
  margin-top: 120px;
  margin-bottom: 30px;
}

.letras-contenido {
  font-size: 1.5rem;
  font-weight: 300;
}

.letras-contenido2 {
  font-size: 1rem;
  font-weight: 300;
}

a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: .5s;
}

a:hover, a:focus {
  color: #f1f1f1;
  background-size: 100% 1px;
}


.whatsapp{
  background-repeat: no-repeat;
  font-size: 20px;
  color: #f1f1f1 !important;
  background-color: #343A40;
  padding: 2px 8px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 469;
}

.whatsapp:hover{
  color: #343A40 !important;
  background-color: #fff;
  box-shadow: 0px 1px 8px #312f2f;
}

.rrss{
  /* background-repeat: no-repeat; */
  font-size: 14px;
  color: #f1f1f1 !important;
  padding: 2px 6px;
  margin: 2px;
  cursor: pointer;
}