@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');

.bgdir{
  background-image: url('/img/dir/vb2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.banneri{
  background-image: url('/img/welcome/PORTADAWEBFEBRERO.png'); 
  background-size: cover;
  background-repeat: no-repeat;
  height: 30rem;
  text-align: center;

  a{
    background-color: #284d84;
    color: #ffffff;
  }
}

.link{
    text-decoration: none;
    color: inherit;
    padding: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;  
    position: relative;
    border: none;
    background-color: transparent;
  }
  
  .link:after{
    content: "";
    width: 0;
    height: 4px;
    background-color: coral;
    position: absolute;
    bottom: 0;
    right: 50%;
    transition: all .5s;
    will-change: width;
  }
  
  .link:hover:after{
    width: 100%;
    right: 0;
  }

  /* toast */
  .toast-body{
    background-image: url('/img/riñon/r1.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  /*  */

.centrado{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  animation-duration: 3s;
  animation-name: slidein;
}

.contenedor{
  position: relative;
  display: inline-block;
  text-align: center;
}

.containers{
  position: relative;
  display: inline-block;
  text-align: center;
}

/* sombra de los texto */
.sombrapngAzul{
  filter: drop-shadow(0 2px 7px rgba(40, 77, 132, 0.7));
}
.sombrapngAmarilla{
  filter: drop-shadow(0 2px 7px rgba(255, 252, 73, 0.7));
}

.sombrapngCoral{
  filter: drop-shadow(0 2px 7px rgba(255, 127, 80, 0.7));
}
.sombraCoral {
  text-shadow:
    1px 1px 2px black,
    0 0 1em coral,
    0 0 0.2em coral;
}

.sombraBlanca {
  text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: white;
}

.sombraNegra {
  text-shadow:
    1px 1px 2px black,
    0 0 1em black,
    0 0 0.2em black;
  color: white;
}

.sombraAzul {
  text-shadow:
    1px 1px 2px darkblue,
    0 0 1em darkblue,
    0 0 0.2em darkblue;
  color: white;
}

/* Hover */
.containerH {
  position: relative;
  width: 1160px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  perspective: 500px;
  margin: auto;
}
.containerH .box {
  position: relative;
  width: 275px;
  height: 275px;
  background: #000;
  transition: 0.5s;
  transform-style: preserve-3d;
  overflow: hidden;
  margin-right: 15px;
  margin-top: 45px;
}
.containerH:hover .box {
  transform: rotateY(25deg);
}
.containerH .box:hover ~ .box {
  transform: rotateY(-25deg);
}
.containerH .box:hover {
  transform: rotateY(0deg) scale(1.25);
  z-index: 1;
  box-shadow: 0 25px 40px rgba(0,0,0,0.5);
}
.containerH .box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.containerH .box .imgBx:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,#f00,#000);
  z-index: 1;
  opacity: 0;
  transition: 0.5s;
  mix-blend-mode: multiply;
}
.containerH .box:hover .imgBx:before {
  opacity: 1;
}
.containerH .box .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.containerH .box .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  padding: 20px;
  align-items: flex-end;
  box-sizing: border-box;
}
.containerH .box .content h2 {
  color: #fff;
  transition: 0.5s;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 20px;
  transform: translateY(200px);
  transition-delay: 0.3s;
}
.containerH .box:hover .content h2 {
  transform: translateY(0px);
}
.containerH .box .content p {
  color: #fff;
  transition: 0.5s;
  font-size: 14px;
  transform: translateY(200px);
  transition-delay: 0.4s;
}
.containerH .box:hover .content p {
  transform: translateY(0px);
}

/* Efectos hover inicio */

.containeri {
  width: 100%;
  max-width: 1200px;
  border-radius: 4px;
  margin: 0 auto;
  padding: 40px 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}

.wrapper {
  width: 33.3%;
  height: 100%;
  padding: 10px;
}

.name {
  position: relative;
  font-size: 16px;
  display: inline-block;
  
  &:after {
    content: '';
    position: absolute;
    width: calc(100% + 10px);
    height: 1px;
    background-color: #000;
    bottom: -4px;
    left: 0;
  }
}

.box {
  position: relative;
  max-height: 300px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
  0 1.4px 1.7px rgba(0, 0, 0, 0.017),
  0 3.3px 4px rgba(0, 0, 0, 0.024),
  0 6.3px 7.5px rgba(0, 0, 0, 0.03),
  0 11.2px 13.4px rgba(0, 0, 0, 0.036),
  0 20.9px 25.1px rgba(0, 0, 0, 0.043),
  0 50px 60px rgba(0, 0, 0, 0.06);
  
  
  .hide { opacity: 0; }
  
  .frame {
    position: absolute;
    border: 1px solid #fff;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  h2, p {
    position: absolute;
    color: #fff;
    z-index: 2;
    width: 100%;
    transition: opacity 0.2s, transform 0.3s;
  }
  
  h2 {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 0;
    letter-spacing: 1px;
  }
  
  p {
    bottom: 0;
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  &:hover {
    transition: all .3s ease-in-out;
  }
  
  &:hover:before {
    transition: all .3s ease-in-out;
  }
  
  img {
    position:relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all .3s ease-in-out;
    
    &:hover {
      transition: all .3s ease-in-out;
    }
    
    &:after {
      content: '';
      position: absolute;
      background-color: rgba(0,0,0,.6);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }
    
    &:hover {
      transition: all .3s ease-in-out;
    }
  }
}

.zoom-in{
  h2 {
    top: 50%;
    transform: translatey(-50%);
    text-align: center;
    margin: 0;
  }
  
  p {
    text-align: center;
    top: calc(50% + 40px);
    transition: all .3s ease;
    transform: scale(1.8);
    opacity: 0;
  }
  
  &:hover {
   img {
    transform: scale(1.1);
    filter: grayscale(100%);
   } 
    
    p {
      transform: scale(1);
      transition: all .3s ease;
      opacity: 1;
    }
  }
}

.w-content {
  .frame {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: transparent;
  }
  
  h2 {
    margin-top: 0;
    top: 50%;
    transform: translatey(-50%);
    text-align: center;
    letter-spacing: 1px;
  }
  
  p { transform: translate3d(0, -10px, 0); }
  
  &:hover {
    .frame {
      border-color: #fff;
      transition: color .3s ease-in-out, all .3s ease-in-out;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
    }
    
    opacity: .8;
  }
}

.postcard {
  h2 {
    top: 50%;
    text-align: left;
    transform: translate3d(50px, 20px, 0);
  }
  
  p {
    transform: translate3d(40px, 60px, 0);
    font-size: 24px;
    letter-spacing: 1px; 
  }
  
  &:hover {
    h2 { transform: translate3d(20px, 20px, 0); }
    p { opacity: 1; }
    
    img {
      filter: opacity(0.7);
      transform: translate3d(-30px, 0, 0);
    }
  }
}

.blury-card {  
  .frame {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    opacity: 0;
    transition: all .3s ease-in-out
  }
  
  h2 , p {
    text-align: center;
    top: 50%;
    transform: translatey(-50%);
    margin: 0;
    z-index: 3;
  }
  
  p { 
    transform: translatey(30px);
    letter-spacing: 3px;
  }
  
  span {
    font-size: 24px;
  }
  
  &:before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #008E6B;
    z-index: 1;
    left: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
  }
  
  img {  z-index: 2; }
  
  &:hover {
    .frame {
      width: calc(100% - 120px);
      height: calc(100% - 120px);
      opacity: 1;
    }
    
    img { opacity: .7; }
    
    &:before {
      opacity: 1;
      transition: all .3s ease-in-out;
    }
  }
}

.vintage {
  h2 { 
    top: 20%;
    transform: translate3d(0, 60px, 0);
    text-align: center;
  }
  
  p {
    opacity: 0;
    bottom: 0;
    transform: translate3d(0, -10px, 0);
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
  }
  
  &:before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    z-index: 2;
    bottom: -100%;
    left: 0;
  }
  
  &:hover:before {
    bottom: 0;
  }
  
  &:hover {
    h2 {
      bottom: 40px;
      transform: translate3d(0, 20px, 0);
    }
    
    p {
      opacity: 1;
      transform: translate3d(0, -30px, 0);
    }
  }
}

.zoom-out {
  .frame {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
  
  h2 { 
    font-size: 20px; 
    font-weight: 300; 
    margin-left: 10px;
    letter-spacing: 1px;
  }
  span { font-size: 24px; font-weight: 500; }
  
  p {
    max-width: 120px;
    text-align: right;
    margin: 10px;
    right: 0;
  }
  
  img { transform: scale(1.1); }
  &:hover img { 
    transform: scale(1);
    filter: contrast(70%);
  }
}

@media screen and (max-width: 880px) {
  .wrapper { 
    width: 50%;
  }
}

@media screen and (max-width: 520px) {
  .wrapper {
    width: 100%;
  }
}


/* bolsa */

/* ----- Variables ----- */
$color-primary: #4c4c4c;
$color-secondary: #a6a6a6;
$color-highlight: #ff3f40;

h3 {
	font-size: 0.7em;
	letter-spacing: 1.2px;
	color: $color-secondary;
}

img {
			max-width: 100%;
			filter: drop-shadow(1px 1px 3px $color-secondary);
		}

/* ----- Product Section ----- */
.product {
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	margin: auto;
	padding: 2.5em 0;
	background-color: white;
	border-radius: 5px;
}

/* ----- Photo Section ----- */
.product__photo {
	position: relative;
}

.photo-container {
	position: absolute;
	left: -2.5em;
	display: grid;
	grid-template-rows: 1fr;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
}

.photo-main {
	border-radius: 6px 6px 0 0;
	background-color: #9be010;
	background: radial-gradient(rgb(252, 175, 147), coral);

	.controls {
		display: flex;
		justify-content: space-between;
		padding: 0.8em;
		color: #fff;

		i {
			cursor: pointer;
		}
	}

	img {
		position: absolute;
		left: -3.5em;
		top: 1em;
		filter: saturate(150%) contrast(120%) hue-rotate(10deg)
			drop-shadow(1px 20px 10px rgba(0, 0, 0, 0.3));
	}
}

.photo-album {
	padding: 0.7em 1em;
	border-radius: 0 0 6px 6px;
	background-color: #fff;

	ul {
		display: flex;
		justify-content: space-around;
	}

	li {
		float: left;
		width: 55px;
		height: 55px;
		padding: 7px;
		border: 1px solid $color-secondary;
		border-radius: 3px;
	}
}

/* ----- Informations Section ----- */
.product__info {
	padding: 0.8em 0;
}

.title {
	h1 {
		margin-bottom: 0.1em;
		color: $color-primary;
		font-size: 1.5em;
		font-weight: 900;
	}

	span {
		font-size: 0.7em;
		color: $color-secondary;
	}
}

.price {
	margin: 1.5em 0;
	color: $color-highlight;
	font-size: 1.2em;

	span {
		padding-left: 0.15em;
		font-size: 2.9em;
	}
}

.variant {
	overflow: auto;

	h3 {
		margin-bottom: 1.1em;
	}

	li {
		float: left;
		width: 35px;
		height: 35px;
		padding: 3px;
		border: 1px solid transparent;
		border-radius: 3px;
		cursor: pointer;

		&:first-child,
		&:hover {
			border: 1px solid $color-secondary;
		}
	}

	li:not(:first-child) {
		margin-left: 0.1em;
	}
}

.description {
	clear: left;
	margin: 2em 0;

	h3 {
		margin-bottom: 1em;
	}

	ul {
		font-size: 0.8em;
		list-style: disc;
		margin-left: 1em;
	}

	li {
		text-indent: -0.6em;
		margin-bottom: 0.5em;
	}
}

.buy--btn {
	padding: 1.5em 3.1em;
	border: none;
	border-radius: 7px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 1.3px;
	color: #fff;
	background-color: coral;
	box-shadow: 2px 2px 25px -7px $color-primary;
	cursor: pointer;

	&:active {
		transform: scale(0.97);
	}
}

/* Directorio */

.containerdir {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  overflow: hidden;
  transform: skew(5deg);

  .card {
    flex: 1;
    transition: all 1s ease-in-out;
    height: 75vmin;
    position: relative;
    .card__head {
      color: black;
      background: coral;
      padding: 0.5em;
      transform: rotate(-90deg);
      transform-origin: 0% 0%;
      transition: all 0.5s ease-in-out;
      min-width: 100%;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 1em;
      white-space: nowrap;
    }

    &:hover {
      flex-grow: 10;
      img {
        filter: grayscale(0);
      }
      .card__head {
        text-align: center;
        top: calc(100% - 2em);
        color: white;
        background: rgba(0, 0, 0, 0.5);
        font-size: 2em;
        transform: rotate(0deg) skew(-5deg);
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 1s ease-in-out;
      filter: grayscale(100%);
    }
    &:not(:nth-child(5)) {
      margin-right: 1em;
    }
  }
}

/* Responsividad de bolsa */
/* .ocultar-div{
  display:none;
} */

@media screen and (max-width: 600px) {
  .ocultar-div{
      display:none;
  }
  .mostrar-div {
    display: block;
  }
}

.containerForm{
	max-width: 1230px;
	width: 100%;
}

h1{
	font-weight: 700;
	font-size: 45px;
	font-family: 'Roboto', sans-serif;
}

.header{
	margin-bottom: 80px;
}
#description{
	font-size: 24px;
}

.form-wrap{
	background: rgba(255,255,255,1);
	width: 100%;
	max-width: 850px;
	padding: 50px;
	margin: 0 auto;
	position: relative;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
}
.form-wrap:before{
	content: "";
	width: 90%;
	height: calc(100% + 60px);
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
	top: -30px;
	background: coral;
	z-index: -1;
	opacity: 0.8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
}
.form-group{
	margin-bottom: 25px;
}
.form-group > label{
	display: block;
	font-size: 18px;	
	color: #000;
}
.custom-control-label{
	color: #000;
	font-size: 16px;
}
.form-control{
	height: 50px;
	background: #ecf0f4;
	border-color: transparent;
	padding: 0 15px;
	font-size: 16px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.form-control:focus{
	border-color: #00bcd9;
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}
textarea.form-control{
	height: 160px;
	padding-top: 15px;
	resize: none;
}

.btn{
	padding: .657rem .75rem;
	font-size: 18px;
	letter-spacing: 0.050em;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: #00bcd9;
  border-color: #00bcd9;
}

.btn-primary:hover {
  color: #00bcd9;
  background-color: #ffffff;
  border-color: #00bcd9;
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}

.btn-primary:focus, .btn-primary.focus {
  color: #00bcd9;
  background-color: #ffffff;
  border-color: #00bcd9;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #00bcd9;
  background-color: #ffffff;
  border-color: #00bcd9;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}

/* Modal que carga cuando entras a la pagina */

.sombrapng{
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.7));
}

/* Sombra con contorno de color sync */

figure {
  position: relative;
  padding: 0;
  width: 500px;
  max-width: 90vw;
  margin: 25px auto;
}

figure::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-size: 100% 100%;
  filter: blur(15px) saturate(2);
}

.imgs {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* imagenes para seccion de cunas */
.nubes{
  position: absolute;
  
  z-index: -1;
}

@media screen and (max-width: 600px) {
  .oculto{
      display:none;
  }
}

/* seccion de cama */

.camas{
  background:linear-gradient(to top, transparent, #ffffff9c), url("/img/maternidad/noche.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed;
  background-blend-mode: multiply; */
}

.figures {
  position: relative;
  padding: 0;
  width: 500px;
  max-width: 90vw;
  margin: 25px auto;
}

.figures::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-size: 100% 100%;
  filter: blur(15px) saturate(2);
}

/* banner servicios */

.bservisios{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/banners/torre.webp");
  background-size: contain;
  
  background-repeat: no-repeat;
}

/*  */

.movie_card{
  position: relative;
  display: block;
  width: 600px;
  height: 350px;
  margin: 80px auto; 
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.4s;
  box-shadow: 0px 0px 120px -25px rgba(0,0,0, 0.5);
  &:hover{
    transform: scale(1.02);
    box-shadow: 0px 0px 80px -25px rgba(0,0,0, 0.5);
    transition: all 0.4s;
  }
  .info_section{
    position: relative;
    width: 100%;
    height: 100%;
	  background-blend-mode: multiply;
    z-index: 2;
    border-radius: 10px;
    .movie_header{
      position: relative;
      padding: 25px;
      height: 40%;
      h1{
        color: black;
        font-weight: 400;
      }
      h4{
        color: #555;
        font-weight: 400;
      }
      .minutes{
        display: inline-block;
        margin-top: 15px;
        color: #555;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.05);
      }
      .type{
        display: inline-block;
        color: #284d84;
        margin-left: 10px;
      }
      .locandina{
        position: relative;
        float: left;
        margin-right: 20px;
        height: 120px;
        box-shadow: 0 0 20px -10px rgba(0,0,0,0.5);
      }
    }
    .movie_desc{
      padding: 25px;
      height: 50%;
      .text{
        color: #545454;
      }
    }
    .movie_social{
      height: 10%;
      padding-left: 15px;
      padding-bottom: 20px;
      ul{
        list-style: none;
        padding: 0;
        li{
          display: inline-block;
          color: rgba(0,0,0,0.3);
          transition: color 0.3s;
          transition-delay: 0.15s;
          margin: 0 10px;
          &:hover{
            transition: color 0.3s;
            color: rgba(0,0,0,0.7);
          }
          i{
            font-size: 19px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .blur_back{
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%; right: 0;
    background-size: cover;
    border-radius: 11px;
  }
}

@media screen and (min-width: 768px) {
  .movie_header{
    width: 65%;
  }
  
  .movie_desc{
    width: 50%;
  }
  
  .info_section{
    background: linear-gradient(to right, #e5e6e6 50%, transparent 100%);
  }
  
  .blur_back{
    width: 80%;
    background-position: -100% 10% !important;  
  }
}

@media screen and (max-width: 768px) {
  .movie_card{
    width: 95%;
    margin: 70px auto; 
    min-height: 350px;
    height: auto;
  }
  
  .blur_back{
    width: 100%;
    background-position: 50% 50% !important;  
  }
  
  .movie_header{
    width: 100%;
    margin-top: 85px;
  }
  
  .movie_desc{
    width: 100%;
  }
  
  .info_section{
    background: linear-gradient(to top, #e5e6e6 50%, transparent 100%);
    display: inline-grid;
  }

}

.ave_back{
    background: url("/img/empresariales/checkup.webp");
    width: 50%;
}

.asd{
  background: url("/img/empresariales/convenios.webp");
  width: 50%;
}


.bannerdir{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/dir/banner.jpg");
  /* background:url("/img/dir/banner.jpg");  */
  background-repeat: no-repeat; 
  background-size: cover;
  background-attachment: fixed;
}

/* Riñon */
.bannerriñon{
  background:url("/img/riñon/riñon.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.riñonban{
  background-image: url('/img/riñon/banner1.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.cartasriñon{
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #284d84;
  height: 5rem;
  color: #fff;
  text-decoration: underline;
  p{
    padding: 1.6rem;
  }
}

.textoriñonbanner{
  padding: 3rem;
}

.colriñon1{
  color: #fff;
  p{
    font-size: 4rem;
  }
}

.colriñon2{
  color: #fff;
}

/* ----------------- */

/* Boton de whatsapp */
.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  left: 20px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:1190;
}

.whatsapp-icon {
  margin-top:13px;
}

/*  */
.briñon{
  background-color: #545454;
}

.carou{
  position: relative;
  padding: 0;
  width: 500px;
  max-width: 90vw;
  margin: 25px auto; 
}

.bannerx{
  background-image: url("/img/riñon/camilla.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

.bri{
  width: 100%;
  border-radius: 10%;
}

/*  */
.ab1{
  width: 45rem;
}

.pines{
  position: absolute;
  top: 12rem;
  left: 37rem;
  width: 45rem;
}

.pines .texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
}

.pines:hover .texto {
  opacity: 1;
}

.boton {
  display: inline-block;
  background-color: transparent; /* Fondo transparente */
  border: none; /* Sin borde */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  outline: none; /* Quita el borde al hacer clic */
}

.boton img {
  display: block;
  width: 100%; /* Ajusta la imagen al tamaño del botón */
  height: auto; /* Mantiene la proporción de la imagen */
}

.bannertorre{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/torre/banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  height: 33rem;
  clip-path: polygon(0% 0%,100% 0%,69% 100%,0% 100%);
}

.textobanner{
  color: #284d84;
  
}

.textotorre{
  color: #284d84;
  text-align: center;
  margin: 5rem;
  margin-top: 4rem;
}

.hrduo{
  height: 1rem;
  background-image: linear-gradient(-60deg, coral 50%, #284d84 50%);
}

@media screen and (min-width: 1200px) {
  .hrmol{
    display: none;
  }
}

.formbolsa {
  display: none; /* Mostrar el formulario por defecto */
  padding: 2rem;
}

.mostrar{
  display: none;
}

@media screen and (max-width: 460px) {
  .pines{
    left: 0;
    top: 15rem;
  }
  .riñonban{
    background-image: url('/img/riñon/bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .textoriñonbanner{
    padding: 2.5rem;
  }
  .bannertorre{
    --opacidad-negro: 0.4;
    background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/torre/banner.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    width: auto;
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
  }

  .formbolsa{
    display: block;
  }

  .mostrar{
    display: block;
  }

  .riñonban{
    background-image: url('/img/riñon/banner1.png');
    background-repeat: no-repeat;
    background-size: cover;
    p{
      font-size: medium;
    }
  }

  /* imagen fija */
  .car{
    position: fixed !important;
    bottom: 0;
    left: 14%;
    z-index: 2;
  }

  .riñon{
    background-image: url("/img/riñon/r1.webp");
    background-repeat: no-repeat;
    background-size: cover;

    padding: 6px 0px;
    border-radius: 15px;
    font-size: 18px;
    text-align: center;
  }

  .btn-close{
    position: absolute;
    right: 15px;
  }

  /* Animacion */
  .cajaR {
    animation-duration: 2s;
    animation-name: slideinr;
  }

  @keyframes slideinr {
    from {
      bottom: 100%;
      width: 300%;
    }

    to {
      bottom: 0;
      width: 100%;
    }
  }
    
  .brenal2{
    --opacidad-negro: 0.7;
    background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/riñon/pasillo2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
    .r1{
        text-align: justify;
        margin: 0 auto;
    }
    .hr3{
        padding: 2rem;
    }
    a{
        text-decoration: none;
        color: #ffffff;
    }
  }

}

/* efecto scroll */
.bannerñon {
	margin-left: calc(50% - 50vw);
	/* width: 100vw; height: 62.5vmin; */
	min-height: 15em;
	background: var(--img) 50%/ cover;
	background-attachment: fixed;
	background-blend-mode: multiply;
  --img: url('/img/riñon/camilla.webp');
}

.bannermaternidad2{
  background-color: var(--bs-primary-bg-subtle); 
  background:linear-gradient(to bottom, transparent, #ffffff), url('/img/maternidad/fondo.jpg');
  background-repeat: no-repeat; 
  background-size: cover;
  /* background-attachment: fixed;
  background-blend-mode: multiply; */
}

.infopaciente{
  background-color: var(--bs-primary-bg-subtle); 
  --opacidad-negro: 0.5;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/banners/infp.webp");
  /* background-image:url('/img/banners/infp.webp');  */
  background-repeat: no-repeat; 
  background-size: cover;
}

.emp{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/banners/torre.webp");
  background-repeat: no-repeat; 
  background-size: contain;
  background-attachment: fixed;
}

.emp2{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/banners/torre.jpg");
  background-repeat: no-repeat; 
  background-size: contain;  
}

/* .bannertorre2{
  background-image: url('/img/torre/torre2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  height: 33rem;

  color: #fff;
  font-size: 4rem;
} */

.bannertorregeneral{
  width: 99%;
}

.bannerhemo{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/hemo/btemp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

  .hemocont{
    color: #fff;
    text-align: center;
    padding: 5rem;
  }

  .content2{
    text-align: center;
    padding: 1rem;
    color: #284d84;
  }

  .tablaprecios{
    background: #8e9eab;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #eef2f3, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #eef2f3, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 2rem;
    border-radius: 20px;
  }

  .bannerhemo2{
    --opacidad-negro: 0.4;
    background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/hemo/ca.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 3rem;
    text-align: center;
    color: #fff;
  }

  .contentb3{
    color: #284d84;
  }

.dir1{
  background-image: url('/img/dir/recursos/1.webp');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.formdoctor{
  padding: 1rem;
}

/* Screening */
.bannerimgscreening{
  background-image: url('/img/screening/b2.png');
  background-size: contain;
  background-repeat: no-repeat;

  height: 23rem;

  p{
    padding: 2rem;
  }
}

/* Modales para las cartas de Riñon */
.modal-carta{
  background-color: coral;
  opacity: 0.2;
}

/* Banner de Transplante renal */
  
.brenal2{
  --opacidad-negro: 0.7;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/riñon/pasillo2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #ffffff;
  .r1{
      text-align: justify;
  }
  .hr3{
      padding: 2rem;
  }
  a{
      text-decoration: none;
      color: #ffffff;
  }
}

.banner168{
  background-color: #25d366;
  opacity: 0.3;
  resize: initial;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: padding-box;
  background-position-x: 169pt;
}

/* Carousel empresarial */
@mixin white-gradient {
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 24))}
}

.sliderempresarial {
	background: white;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
	height: 100px;
	margin: auto;
	overflow:hidden;
	width: 560px;
	
	&::before,
	&::after {
		@include white-gradient;
		content: "";
		height: 100px;
		width: 200px;
		z-index: 2;
	}
	
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll 40s linear infinite;
		display: flex;
		width: calc(250px * 24);
	}
	
	.slide {
		height: 100px;
		width: 250px;
    margin-right: 1rem;
	}
}

.bt{
  --opacidad-negro: 0.4;
  background-image: linear-gradient(rgba(56, 74, 211, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/img/torre/banner.webp");
}