@font-face {
  font-family: 'm-black';
  src: url(./tools/fonts/static/Montserrat-Black.ttf);
}

@font-face {
  font-family: 'm-black-italic';
  src: url(./tools/fonts/static/Montserrat-BlackItalic.ttf);
}

@font-face {
  font-family: 'm-bold';
  src: url(./tools/fonts/static/Montserrat-Bold.ttf);
}

@font-face {
  font-family: 'm-bold-italic';
  src: url(./tools/fonts/static/Montserrat-BoldItalic.ttf);
}

@font-face {
  font-family: 'm-extra-bold';
  src: url(./tools/fonts/static/Montserrat-ExtraBold.ttf);
}

@font-face {
  font-family: 'm-extra-bold-italic';
  src: url(./tools/fonts/static/Montserrat-ExtraBoldItalic.ttf);
}

@font-face {
  font-family: 'm-extra-light';
  src: url(./tools/fonts/static/Montserrat-ExtraLight.ttf);
}

@font-face {
  font-family: 'm-extra-light-italic';
  src: url(./tools/fonts/static/Montserrat-ExtraLightItalic.ttf);
}

@font-face {
  font-family: 'm-italic';
  src: url(./tools/fonts/static/Montserrat-Italic.ttf);
}

@font-face {
  font-family: 'm-light';
  src: url(./tools/fonts/static/Montserrat-Light.ttf);
}

@font-face {
  font-family: 'm-light-italic';
  src: url(./tools/fonts/static/Montserrat-LightItalic.ttf);
}

@font-face {
  font-family: 'm-medium';
  src: url(./tools/fonts/static/Montserrat-Medium.ttf);
}

@keyframes zoom {
  0% {
    transform: scale(1);
    /* Tamaño inicial */
  }

  100% {
    transform: scale(1.2);
    /* Tamaño al que se agranda */
  }
}

@keyframes zoom1 {
  0% {
    transform: scale(1);
    /* Tamaño inicial */
  }

  100% {
    transform: scale(1.5);
    /* Tamaño al que se agranda */
  }
}


@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}



:root {
  font-family: m-medium;
  --celeste: #ADCED7;
  --negro: #1c1c1c;
  --turquesa: #007F88;
  --rosa: #FF809D;
  --rojo: #ff1f2c;
  --azul: #2B7FBB;
  --blancoTransparente: rgba(255, 255, 255, 0.782);

}

/* Estilos para la barra de desplazamiento */
::-webkit-scrollbar {
  position: absolute;
  width: 7px;
  /* Ancho de la barra de desplazamiento */
  background-color: rgb(255, 255, 255);
  /* Color turquesa con 50% de transparencia */
  z-index: 9999;
}

::-webkit-scrollbar-thumb {
  background-color: var(--rosa);
  /* Color turquesa más oscuro */
  border-radius: 10px;
  /* Borde redondeado */
}


html {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  width: 100vw;
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Estilos del loader */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  /* Fondo semi-transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Asegura que el loader esté sobre todos los demás elementos */
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  /* Animación de rotación */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: url(./tools/media/auxiliar/clouds_photo.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

* {
  cursor: default;
}

a * {
  cursor: pointer;
}



/*INICIO CON FONDO DE NUBES*/

.header {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: all 0.5s ease;
  overflow: hidden;

}

#chevron-down {
  font-size: 2rem;
  margin-top: 3.5rem;
  color: var(--rosa);
  padding: 0.3rem 0.6rem;
  border-radius: 100rem;
  transition: all .5s ease-in-out;
}

#chevron-down:hover {
  background-color: var(--rosa);
  color: white
}

.video {
  animation: zoom1 20s infinite alternate;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0px;

}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.696), rgba(255, 255, 255, 0.138));
}

#header-content {
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  width: 80vw;
}


.imagotipoContainer {
  position: absolute;
  top: 0px;
  width: 40vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

#imagen1 {
  background: url("./tools/media/logos/logopacifico.png");
  height: 10rem;
  width: 50vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

}


.imagotipoContainer h2 {
  margin: 0px;
  padding: 0px;
  color: var(--azul);
  font-family: m-extra-light;
  font-size: 2.5rem;
  text-align: center;
}

.imagotipoContainer h1 {
  margin: 0px;
  padding: 0px;
  color: var(--azul);
  font-family: m-extra-bold;
  font-size: 3.8rem;
  letter-spacing: -1px;
}



/*Botones inicio*/

.buttons-home {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
}

a {
  color: var(--azul);
  cursor: pointer;
  outline: none;
  border: none;
  text-decoration: none;
}

.seventh {
  transition: all .5s ease-in-out;
  margin: 0rem 2rem;
  padding: 16px;
  border-bottom: 3px solid white;
  text-align: center;
}

.seventh:hover {
  font-size: 17px;
  background-color: var(--blancoTransparente);
}




/* NAVBAR SCROLL */

.main_h {
  position: fixed;
  z-index: 9;
  width: 100vw;
  background: none;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s move;
  opacity: 0;
  top: -100px;
  height: 9rem;
}

.turno-ya {
  background-color: var(--celeste);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: 100vw;
  margin: 0px;
  height: 2rem;
  transition: all .5s ease-in-out;
  font-size: 13px;
}

.turno-ya a {
  color: white;
  margin: 0px 1rem;
  transition: all .5s ease-in-out;
}

.turno-ya>a,
.turno-ya>div {
  width: 100%;
}

.turno-ya div {
  text-align: end;
}

.turno-ya:hover {
  background-color: var(--azul);
}

.turno-ya a:hover {
  text-decoration: underline;
}

#turno-mobile {
  height: 100%;
  width: 100vw;
  background-color: var(--azul);
  color: white;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

#turno-mobile a {
  color: white;
}

#turno-mobile h2 {
  margin: 0px;
}


#t-m-t {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1rem;
  width: 100vw;
  justify-content: center;
  gap: 1.5rem;
}

#t-m-t a {
  background-color: var(--rosa);
  width: 9rem;
  text-align: center;
  height: 2.5rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 50rem;
  font-size: 13px;
}

#t-m-1 {
  font-size: 13px;
  margin: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

#t-m-1 a {
  margin: 0.5rem;
}

#t-m-2 {
  font-size: 25px;
}

#t-m-2 a {
  margin: 0.5rem;
  transition: all .5 ease-in-out;
}

#t-m-2 a:hover {
  scale: 1.1;
}



.sticky {
  background-color: rgba(255, 255, 255, 0.818);
  opacity: 1;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.142);
}


.row {
  display: flex;
  flex-direction: column;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

/*logo navbar*/

#logo-container {
  display: flex;
  flex-direction: row;
  width: auto;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  transition: all .5s ease-in-out;
}

#logo-container:hover {
  filter: blur(2px);
}

#logo-navbar {
  background: url(./tools/media/logos/logopacifico.png);
  width: 10rem;
  height: 5rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px;
}

#logo-container div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

#logo-container div h1 {
  font-size: 1.8rem;
  margin: 0px;
  font-family: m-extra-bold;
}

#logo-container div h2 {
  font-size: 1.1rem;
  margin: 0px;
  font-family: m-extra-light;
}

/*botones navbar*/

nav {
  display: flex;
  width: 100%;
  justify-content: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px;
  margin: 0.5rem;

}

nav ul a {
  color: rgba(116, 116, 116, 0.803);
  text-transform: uppercase;
  padding: 0rem 0.5rem;
  transition: all .2s ease;

}

nav ul li {
  text-align: center;
}


nav ul a:hover {
  color: var(--rosa);
}

.nav-active {
  color: var(--azul);
}


/*mobile toggle (pantalla chica) */

.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 1rem;
  top: 3.5rem;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}


section {
  width: 100vw;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}


/*CARRUSEL*/

#container-slider {
  position: relative;
  display: block;
  height: 80vh;
}

#slider {
  position: relative;
  display: block;
  height: 80vh;
  padding: 0px;
  margin: 0px;
}

hr {
  height: 0px;
  margin: 0px;
  display: none;
}

.s-l {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute !important;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  z-index: -1;
  opacity: 0;
}


.content_slider {
  color: var(--azul);
  text-shadow: 0px 0px 20px rgba(107, 107, 107, 0.474);
  height: 100%;
  padding: 0px;
}

.content_slider div {
  width: 90%;

  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.content_slider h1 {
  font-family: m-bold;
  font-size: 3rem;
  text-transform: uppercase;
  margin: 0px;
}

.content_slider h2 {
  margin: 0px;
}

.content_slider p {
  margin: 0.5rem;
  font-family: m-medium;
  line-height: 1.5rem;
  font-size: 1.3rem;
  text-align: center;
}

.content_slider div div {
  margin: 0px;
  padding: 0px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.content_slider div div p {
  text-align: left;
  font-family: m-medium;
  font-size: 1.3rem;
  line-height: 1.5rem;
}

#a-f p {
  font-size: 1.1rem;
  text-align: left;
}


.s-l .content_slider {
  background: rgba(255, 255, 255, 0.719);
}

.content_slider {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnSlider {
  padding: 10px 20px;
  font-size: 18px;
  background-color: var(--rosa);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.btnSlider:hover {
  scale: 1.05
}

.listslider {
  position: absolute;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0px;
  bottom: 1rem;
  list-style: none;
  z-index: 2;
}

.listslider li {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: pointer;
  margin: 0 5px;
}

.listslider li a {
  background: #CCC;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.item-select-slid {
  background: white !important;
}



/* SECCION CARDS */

.seccion-cards {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.card {
  cursor: context-menu;
  width: 20%;
  min-width: 15rem;
  padding: 1rem;
  height: 27rem;
  text-align: center;
  margin: 1rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.801);
  border-radius: 1rem;
  color: var(--azul);
  opacity: 0;
  transition: opacity 1s, transform 1s;
  /* Transiciones suaves */
  transform: translateY(100px);
  /* Iniciar debajo */
}

.card.aparecer {
  opacity: 1;
  /* Hacer visible */
  transform: translateY(-2rem);
  /* Aparecer desde abajo */
}

.card img {
  width: 50%;
  height: auto;
}

.card h2 {
  margin-top: 1rem;
  font-size: 1.3rem;
  font-family: m-bold;
}

.card p {
  margin-top: 0.5rem;
  font-size: 1rem;
  text-align: left;
  line-height: 1.5rem;
}


/* STAFF */

#staff {
  background-color: var(--blancoTransparente);
  opacity: 0;
  transition: opacity 2s ease;
  margin-bottom: 3rem;
}

#staff.aparecer {
  opacity: 1;
}

#staff>h1 {
  font-family: m-black;
  font-size: 2rem;
  color: var(--celeste);
  margin-top: 3rem;
  text-align: left;
  width: 90%;
  margin-bottom: 0rem;
}

#staff>p {
  color: var(--azul);
  font-size: 1.2rem;
  line-height: 2rem;
  width: 90%;
}


#staff-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
  justify-content: space-evenly;
  width: 95%;
  height: fit-content;
  margin-bottom: 3rem;

}

.staff-card {
  height: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 2rem;
  width: 12rem;
  border-bottom: 3px solid var(--celeste);
}

#staff1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  margin: 1rem 0rem;
}

#staff1 .f-carnet {
  min-height: 15rem;
  min-width: 15rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin-bottom: 1rem;
}

#staff1 .f-carnet img {
  height: 15rem;

}

#staff1 div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 1rem;
}

#staff1 div:nth-child(2) h3 {
  margin: 1rem 0rem;
  font-size: 2rem;
  text-align: left;
}

#staff1 div:nth-child(2) p {
  text-align: left;
  margin: 1rem 0rem;
}

#staff1>div p:nth-child(2) {
  color: var(--rosa);
  font-family: m-bold;
  margin: 0rem;
}



.staff-card h3 {
  margin: 0.5rem;
  text-align: center;
  color: var(--azul);
  font-family: m-black;
}

.staff-card p {
  margin: 0.5rem;
  text-align: center;
  color: var(--azul);
}

.staff-card>p:nth-child(3) {
  color: var(--rosa);
  font-family: m-bold;
  margin: 0rem;
}

.f-carnet {
  min-height: 12rem;
  min-width: 12rem;
  overflow: hidden;
  border-radius: 500rem;
  border: 3px solid var(--celeste);
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.f-carnet img {
  height: 12rem;
  transition: all 1s ease-in-out;
}

.f-carnet img:hover {
  scale: 1.2;
}




/* TRATAMIENTOS GALLERY */

/* cards videos */

#tratamientos>h1 {
  padding: 2rem 5%;
  color: var(--celeste);
  font-family: m-black;
  font-size: 2rem;
  background-color: var(--blancoTransparente);
  width: 90%;
  margin: 0px;
}

#videos-t {
  width: 100%;
  margin-bottom: 3rem;
  background-color: var(--blancoTransparente);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.card-container-v {
  width: 95%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.card-v {
  margin: 5px;
  margin-bottom: 2rem;
  text-align: center;
  width: 15rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-v h3 {
  width: auto;
  font-family: m-light;
  color: var(--azul);
  margin-bottom: 0rem;
}

.card-v div {
  height: 60vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.card-v div video {
  width: 100%;
}

.card-v video::-webkit-media-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

.card-v video:hover::-webkit-media-controls {
  opacity: 1;
}

/* galeria */

#galeria {
  margin-bottom: 3rem;
}

#galeria>h1 {
  font-family: m-black;
  font-size: 2rem;
  color: var(--celeste);
  margin-bottom: 0.5rem;
  width: 90%;
}

.caja-principal {
  display: flex;
  border-radius: 1rem;
}

.alguito1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--blancoTransparente);
  border-radius: 0.5rem 0rem 0rem 0.5rem;
  width: 20vw;
}


.opcion-radio {
  display: none;

}

.alguito1 label {
  padding: 0.5rem 1rem;
  font-family: m-bold;
  color: var(--azul);
  filter: none;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

.alguito1 label:hover {
  transform: translateX(30px);
  color: var(--celeste);
  /* Transición suave */
}

input[type="radio"]:checked+label {
  color: var(--celeste);
}



.alguito2 {
  border: 3px solid white;
  position: relative;
  min-width: 70vw;
  border-radius: 0rem 0.5rem 0.5rem 0rem;
}

/* overlay ver galeria */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  /* Color blanco con transparencia */
  backdrop-filter: blur(5px);
  /* Añadir un efecto de desenfoque */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sobre-gallery {
  text-align: center;
}

#ver-galeria {
  padding: 10px 20px;
  font-size: 18px;
  background-color: var(--azul);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(104, 104, 104, 0.445);
  transition: all .5s ease-in-out;
}

#ver-galeria:hover {
  background-color: var(--celeste);
}

.contenido {
  display: none;
  width: 70vw;
  height: 70vh;
  margin: 10px;
  margin-right: 0px;

  transition: opacity 0.7s ease;

}


.relleno {
  display: flex;
  flex-direction: column;
  height: 70vh;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  overflow-y: scroll;
  overflow-x: hidden;
}

.t-descripcion {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.relleno h1 {
  font-family: m-black;
  color: var(--rosa);
  margin: 0.5rem;
  text-align: left;
  width: 90%;
}

#contenido1 {
  display: flex;
}

/* GALERÍA */

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.grid-item img:hover {
  transform: scale(1.05);
}

.modal {
  display: none;
  position: fixed;
  z-index: 11;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: auto;
}

.modal-content {
  margin: auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 80%;
  height: 100%;
}

.modal-content img {
  height: 90vh;
}


.close {
  color: white;
  font-size: 3rem;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}



/*SECCION CONSULTORIOS*/
#consultorios {
  display: flex;
  background-color: var(--blancoTransparente);
}

#consultorios>h1 {
  font-family: m-black;
  font-size: 2rem;
  color: var(--celeste);
  text-align: left;
  width: 90%;
  margin: 0px;
  margin-top: 3rem;
}

#consultorios>p {
  font-size: 1.2rem;
  line-height: 2rem;
  color: var(--azul);
  width: 90%;
}


#consultorios>p>a {
  color: var(--rosa);
  transition: all .5 ease-in-out;
}

#consultorios>p>a:hover {
  text-decoration: underline;
}

#consultorios a {
  color: white;
  transition: all .3s ease-in-out;
}

#consultorios a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.t-con {
  display: flex;
  width: 100% !important;
  justify-content: center;
}

.t-con a {
  background-color: var(--blancoTransparente);
  padding: 0.5rem 1rem;
  color: var(--azul) !important;
  border-radius: 50px;
  font-family: m-bold;
  transition: all .3s ease-in-out;
}

.t-con a:hover {
  background-color: var(--azul);
  color: white !important;
}



#cons-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100vw;
  height: 70vh;
}

#cons-container>div {
  width: 50vw;
  height: 80vh;
  font-family: m-bold;
}

#consul1 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

#consul1 img {
  position: absolute;
  width: 50vw;
  filter: brightness(50%);
}

#consul1 div,
#consul2 div,
#consulH div {
  color: white;
  z-index: 1;
}

#consul2 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

#consul2 img {
  position: absolute;
  width: 50vw;
  transition: all 5s ease-in-out;
}



#consul2 img:hover,
#consul1 img:hover,
#consulH img:hover {
  animation: zoom 20s infinite alternate;
}


#consulH {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100vw;
  height: 40vh;
  object-fit: cover;
}

#consulH h2 {
  font-size: 1.1rem;
  font-family: m-light;
}

#consulH img {
  position: absolute;
  width: 100vw;
  filter: brightness(50%);

}




/* FORM CONTACTO */

.form-container {
  width: 90%;
  margin: 1rem;
  padding: 1.5rem;

}

.wrapper1 {
  box-shadow: -2px 3px 10px rgba(56, 56, 56, 0.311);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: var(--blancoTransparente);
}

.wrapper1 p {
  margin: 0px;
}


.logo1 {
  text-align: center;
  margin-bottom: 1rem;
}

.info-empresa {
  padding: 1rem;
  color: var(--azul);
  font-family: m-bold;
  width: 90%;
}



.contacto {
  padding: 0rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 90%;
  margin: 0px;
}

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  width: 100%;

  label {
    display: block;
    color: var(--rosa);
    filter: none;
    width: 80%;
  }

  .formulario input:active {
    border-color: var(--celeste);
  }

  button,
  input,
  textarea {
    width: 80%;
    padding: 1rem;
    border: 1px solid var(--azul);
    border-radius: 5px;
  }


  textarea {
    resize: none;
    padding: 1rem;
    height: 5rem;
    width: 100%;
  }
}

.formulario div {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}


.boton-enviar {
  background-color: var(--azul);
  color: white;
  border: 0px !important;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: m-bold;
  cursor: pointer;
  width: 10rem !important;
  height: 3rem;
  margin: 1rem;

  &:focus,
  &:hover {
    background-color: var(--celeste);
    color: #fff;
    outline: 0;
    transition: background-color 2s ease-out;
  }
}




/*WHATSAPP FLOTANTE*/

#chevron-up {
  position: fixed;
  bottom: 2rem;
  right: 20px;
  background-color: var(--blancoTransparente);
  color: var(--rosa);
  border-radius: 50px;
  display: none;
  z-index: 100;
  transition: all 0.5s ease-in-out;
}

#chevron-up i {
  margin: 0.6rem 0.6rem;
  font-size: 30px;
}

#chevron-up:hover {
  color: white;
  background-color: var(--rosa);
}

.whatsapp {
  position: fixed;
  bottom: 6rem;
  right: 20px;
  color: white;
  background-color: #25d365eb;
  border-radius: 50px;
  text-align: center;
  font-size: 25px;
  z-index: 100;
  transition: all 0.5s ease-in-out;
  display: none;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border: 1.5px solid #25d366;
}

.whatsapp p {
  font-size: 16px;
  margin: 0px;
}

.whatsapp-icon {
  margin: 0rem 0.8rem 0rem 0rem;
}

.whatsapp:hover {
  background-color: #25d366;
  scale: 1.1;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.511);
}






/*FOOTER*/

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--azul);
  color: white;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}


.cont-footer {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

.cont-footer>div {
  display: flex;
  flex-direction: column;
}

.cont-footer a {
  color: var(--blancoTransparente);
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  transition: all .5s ease-in-out;
}

.cont-footer a:hover {
  color: white;
  scale: 1.02;
}

.cont-footer a i {
  padding: 0.5rem;
  margin: 0.5rem;
}

.cont-footer>div:first-child {
  width: 25%;
}

#mapa {
  height: 30vh;
  margin: 1rem;
}

.cont-footer>div:nth-child(2) {
  width: 40%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  padding: 1rem;
}

.cont-footer div:nth-child(2)>div>p {
  display: flex;
  flex-direction: row;
  margin: 0px;
}



.cont-footer>div:last-child {
  width: 23%;
  display: flex;
  flex-direction: row;
  font-size: 2rem;
}

.cont-footer>div:last-child i {
  color: var(--blancoTransparente);
  transition: all .5s ease-in-out;
}

.cont-footer>div:last-child i:hover {
  color: white;
  scale: 1.1;
}


/* Copyright */

.copy {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: m-light;
  margin: 0px;
  font-weight: lighter;
  color: white;
  text-align: center;
  background-color: var(--negro);
  width: 100vw;
  height: 2rem;
  font-size: 10px;
}




/* CARRITO  */

#shopping h1 {
  font-family: m-black;
  font-size: 2rem;
  color: var(--celeste);
  text-align: left;
  width: 90%;
  margin-bottom: 0rem;
}

.cart-icon {
  position: absolute;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: fit-content;
  top: 3rem;
  right: 3rem;
  padding: 1rem;
  border-radius: 10rem;
  transition: all .5s ease-in-out;
}

.cart-icon:hover {
  background-color: #adced7b5;

}

.cart-icon:hover .cart-count {
  background-color: var(--rosa);
}


.cart-icon img {
  width: 30px;
  height: 30px;
}

.cart-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: var(--rosa);
  color: #fff;
  border-radius: 50%;
  padding: 3px 7px;
  font-size: 12px;
  transition: all .5s ease-in-out;
}

.cart-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  width: 300px;
  max-width: 100%;
  height: 100%;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.213);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.cart-dropdown.cart-active {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--celeste);
  background-color: var(--negro);
  color: white;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  transition: all .2s;
  padding: 0px 5px;
  border-radius: 10rem;
}

.close-btn:hover {
  color: var(--rojo);
  background-color: white;
}

.eliminar-producto {
  color: var(--rojo);
}

#cart-items {
  padding: 20px;
  overflow: hidden;
  max-height: calc(100% - 160px);
}

.cart-item {
  margin: 0px;
  padding: 1rem 0rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#cart-total {
  padding: 20px;
  border-top: 1px solid var(--celeste);
}

#cart-buttons {
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--celeste);
  justify-content: center;
  align-items: center;
}

#cart-buttons button {
  background-color: var(--azul);
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 50px;
  border: none;
  font-family: m-bold;
  transition: all .3s ease-in-out;
}

#cart-buttons button:hover {
  background-color: var(--celeste);
  color: white !important;
}

#cart-buttons a {
  font-size: small;
  padding: 1rem;
  color: var(--rojo);
}

#cart-buttons button#empty-cart-btn {
  display: none;
}



/* Estilos de la sección de la tienda */
#shopping {
  width: 100vw;
  overflow: hidden;
  transition: height 0.5s ease;
}

/* Contenedor de los productos */
.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

/* Estilos de los productos */
#prod-list-pag {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}



.product {
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  height: 60vh;
  transition: all 0.5s;
  color: var(--azul);
  background-color: var(--blancoTransparente);
  overflow: hidden;
  min-width: 15rem;
  cursor: pointer;
  overflow-x: hidden;
}

.product>div {
  height: 35vh;
  width: 30vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-width: 20rem;
  cursor: pointer;
}

.product p {
  margin: 5px;
}

.product:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.product:hover img {
  scale: 1.1;
}

.product p:first-of-type {
  font-family: m-bold;
  font-size: 1.2rem;
}

.product p:last-of-type {
  color: var(--negro);
  font-size: small;
  font-family: m-italic;
}

.product button i {
  margin-left: 0.5rem;
}

.product button {
  background-color: var(--azul);
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 50px;
  border: none;
  font-family: m-bold;
  transition: all .3s ease-in-out;
  margin-bottom: 2rem;
  cursor: pointer;
}

.product button:hover {
  background-color: var(--celeste);
}



/* Imagen dentro de la producto */
.product img {
  width: 100%;
  height: auto;
  transition: all .5s ease-in-out;
  cursor: pointer;
}


/* Botón de toggle */
.ver-mas-prod{
  width: 100vw;
  margin: 0px;
  margin-bottom: 4rem;
  padding: 0px;
  height: auto;
  background-color: var(--blancoTransparente);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#toggle-products-btn, 
#btn-prod-pag {
  background-color: var(--rosa);
  padding: 1rem 2rem;
  color: white;
  border-radius: 8px;
  border: none;
  font-family: m-bold;
  transition: all .3s ease-in-out;
  margin: 2rem;
}

#toggle-products-btn:hover,
#btn-prod-pag:hover {
  background-color: rgb(255, 93, 120);
}


.product-details {
  padding: 20px;
  text-align: center;
}

/* PAGINA PRODUCTO */

.product-page {
  height: 80vh;
  margin-top: 20vh;
  width: 100vw;

}

.product-details {
  width: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  
}

.image-container {
  width: 30vw;
  height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.image-container img {
  transition: transform 0.5s ease;
  height: 100%;
  object-fit: cover;
}

.image-container:hover img {
  transform: scale(1.2);
  /* Ajusta el valor del zoom según tus necesidades */
}

.image-container:hover img {
  transform: scale(1.2);
  cursor: zoom-in;
}

.image-container:hover {
  cursor: move;
}

.image-container:hover img {
  cursor: zoom-in;
}

.details-container {
  width: 50vw;
  text-align: left;
  background-color: var(--blancoTransparente);
  padding: 3rem;
}

.details-container h3 {
  font-family: m-bold;
  font-size: 2rem;
  color: var(--azul);
}

.details-precio {
  font-family: m-bold;
  font-size: 1.5rem;
  margin-bottom: 0px;
  padding-bottom: 0px;
  color: var(--azul);
}

.precio-de-lista {
  font-family: m-italic;
  margin-top: 0px;
}

.details-buttons button {
  background-color: var(--azul);
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 50px;
  border: none;
  font-family: m-bold;
  transition: all .3s ease-in-out;
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  cursor: pointer;
}

.details-buttons button:hover {
  background-color: var(--celeste);
}

.details-buttons {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.details-buttons button i {
  font-size: 1.2rem;
  margin-left: 0.5rem;
}

.whatsapp-button1 {
  color: green !important;
  background-color: var(--blancoTransparente) !important;
  border: 1px solid green !important;
}

.whatsapp-button1 i {
  color: green;
  transition: all .3s ease-in-out;
}

.whatsapp-button1:hover {
  background-color: green !important;
  color: white !important;
}


.whatsapp-button1:hover i{
  color: white !important;
}


/* PAGINAS STATUS COMPRA */

.status-compra{
  color: var(--azul);
  background-color: var(--blancoTransparente);
  width: 60vw;
  margin: 2rem;
  padding: 2rem;
  border-radius: 1rem;
  height: 60vh;
  justify-content: space-evenly;
  text-align: center;
  box-shadow: -3px 3px 16px rgba(135, 135, 135, 0.517);
}

.status-compra h1{
  margin: 0.5rem;
  font-size: 2rem;
}

.status-compra h3{
  margin: 1rem;
  margin-top: 0rem;
  font-size: 1.3rem;
}

.status-compra svg{
  fill: var(--rosa);
  margin: 1rem;
}

.status-compra div{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 3rem;
}

.status-compra> div> a{
  color: white;
  padding: 0.5rem 1rem;
  background-color: var(--rosa);
  border-radius: 8px;
  margin: 0.5rem;
}
/*PANTALLA CHICA*/

@media only screen and (max-width: 1330px){
  .cart-icon {
    position: absolute;
    top: 3rem;
    right: 3rem;
    padding: 1rem;
  }
}

@media only screen and (max-width: 1150px) {


  /* NAVBAR */

  /* .main_h{
  height: 8rem;
} */

  .turno-ya a,
  .turno-ya div {
    width: fit-content;
  }

  nav ul li {
    font-size: 0.7rem;
  }

  /* SLIDER */

  .content_slider h1 {

    font-size: 2rem;
  }

  .content_slider h2 {
    font-size: 1.2rem;
  }


  .content_slider p {
    margin: 0.5rem;
    line-height: 1.3rem;
    font-size: 0.9rem;
  }

  .content_slider div div {
    width: 80%;
  }

  .content_slider div div p,
  #a-f p {
    font-size: 0.9rem;
    line-height: 1.3rem;
  }

  /* CARRITO */

  .cart-icon {
    position: absolute;
    top: 3rem;
    right: 5rem;
    padding: 1rem;
  }

  

  /* CARDS */

  .seccion-cards {
    margin-bottom: 1rem;
  }

  .card {
    min-width: 15vw;
    height: 23rem;
    margin: 0rem;
  }

  .card img {
    width: 40%;
  }

  .card h2 {
    font-size: 1.2rem;
  }

  .card p {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }

  /* GALERÍA */

  .alguito1 {
    min-width: 30vw;
  }

  .alguito2 {
    min-width: 60vw;
  }

  .contenido {
    max-width: 60vw;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }


  /* CONSUL */

  #consultorios h1 {
    margin-top: 1.2rem;

  }

  #consultorios p {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  #cons-container {
    height: auto;
  }

  #consulH div {
    width: 80%;
    text-align: center;
  }





  /* FOOTER */

  footer {
    font-size: 0.8rem;
  }

  .cont-footer {
    justify-content: center;
  }

  .cont-footer>div:last-child {
    flex-direction: column;
    width: fit-content;
  }

  .cont-footer>div:nth-child(1) {
    width: 40%;
  }

  #mapa {
    height: 25vh;
  }


  /* STAFF */


  #staff>h1 {
    font-family: m-black;
    font-size: 2rem;
    margin-top: 2rem;
    text-align: left;
    width: 90%;
    margin-bottom: 0rem;
  }

  #staff>p {
    font-size: 1rem;
    line-height: 1.5rem;
  }


  #staff-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    margin-bottom: 2rem;
  }


  #staff1 {
    flex-direction: row;
    justify-content: center;
  }

  #staff1 .f-carnet {
    min-height: 13rem;
    min-width: 13rem;
    margin-bottom: 1rem;
    display: flex;
  }

  #staff1 .f-carnet img {
    height: 13rem;
  }

  #staff1 div:nth-child(2) {
    display: flex;
    align-items: flex-start;
    margin-left: 1rem;
  }

  #staff1 div:nth-child(2) h3 {
    margin: 0.5rem 0rem;
    font-size: 1.6rem;
    text-align: left;
  }

  #staff1 div:nth-child(2) p {
    text-align: left;
    margin: 0.5rem 0rem;
  }

  #staff1>div p:nth-child(2) {
    margin: 0rem;
  }

  .staff-card {
    margin: 0.5rem;
    height: 45vh;
  }


  .staff-card h3 {
    margin: 0.5rem;
  }

  .staff-card p {
    margin: 0.5rem;
    font-size: 0.8rem;
  }

  .staff-card>p:nth-child(3) {
    margin: 0rem;
  }

  .f-carnet {
    min-height: 10rem;
    min-width: 10rem;
  }

  .f-carnet img {
    height: 10rem;
  }


  /* VIDEOS T Y S */

  .card-v {
    margin-bottom: 0.5rem;
    width: 9rem;
  }

  .card-v h3 {
    width: auto;
    font-size: 0.8rem;
    margin-bottom: 0rem;
  }

  .card-v div {
    height: 40vh;
    width: 100%;
  }


}

@media screen and (max-width: 896px) {
  .card {
    width: 40vw;
    height: 15rem;
    margin-top: 1rem;
  }

  .card img {
    width: 20%;
  }

  .staff-card {
    margin: 0.5rem;
    height: 45vh;
    width: 35vw;
    margin-bottom: 2rem;
  }



  #chevron-up i {
    margin: 0.5rem 0.5rem;
    font-size: 25px;
  }

  .whatsapp {
    font-size: 25px;
  }

  /* .whatsapp-icon{
  margin: 0.5rem 0.5rem;
} */

.product-page{
  font-size: 12px;
}

.product-page h3{
  font-size: 25px !important;
}

.details-precio{
  font-size: 25px;
}

}

@media screen and (max-width: 830px) {
  .main_h {
    height: fit-content;
  }
}

@media screen and (max-width: 718px) {
  .turno-ya a {
    font-size: 10px;
  }
}


@media screen and (max-width: 700px) {

  ::-webkit-scrollbar {
    width: 5px;
  }

  .turno-ya {
    display: none;
  }

  #logo-container {
    margin-top: 2rem;
    margin-left: 2rem;
  }

  .row {
    flex-direction: column;
    width: 100vw;
    background-color: white;
    align-items: flex-start;
  }

  .main_h {
    height: 8rem;
  }

  #turno-mobile {
    display: flex;
  }

  nav {
    width: 100%;
  }

  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }

  .mobile-toggle {
    display: block;
    right: 3rem;
  }

  /* SLIDER */

  #a-f p {
    font-size: 0.7;
    margin-bottom: 0rem;
  }

  /* CARRITO */


  
  /* producto */

  .product {
    height: 45vh;
    min-width: 15rem;
  }

  .product>div{
    height: 22vh;
    min-width: 18rem;
  }

  .image-container{
    width: 60vw;
  }

  .cart-icon {
    position: absolute;
    top: 2.2rem;
    right: 6.5rem;
    padding: 1rem;
  }

  .product-page {
    height: auto;
    margin-top: 25vh;
  }
  
  .product-details {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    
  }
  
  .image-container {
    width: 40vw;
    height: 40vh;
    overflow: hidden;
    margin-bottom: 1rem;
  }
    
  .details-container {
    width: 80%;
    text-align: left;
    background-color: var(--blancoTransparente);
    padding: 1rem 3rem;
  }
  
  .details-container h3 {
    font-family: m-bold;
    font-size: 2rem;
    color: var(--azul);
  }
  
  .details-precio {
    font-family: m-bold;
    font-size: 1.5rem;
    margin-bottom: 0px;
    padding-bottom: 0px;
    color: var(--azul);
  }
  
  .precio-de-lista {
    font-family: m-italic;
    margin-top: 0px;
  }
  
  .details-buttons button {
    background-color: var(--azul);
    padding: 0.5rem 1rem;
    color: white;
    border-radius: 50px;
    border: none;
    font-family: m-bold;
    transition: all .3s ease-in-out;
    margin: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    cursor: pointer;
  }

  
  .details-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
  }


  


  /* CARDS */

  .card {
    width: 40vw;
    height: 17rem;

  }

  .card img {
    width: 20%;
  }


  /* STAFF */

  #staff>h1 {
    font-size: 2rem;
    margin-top: 2rem;
    width: 90%;
    margin-bottom: 0rem;
  }

  #staff>p {
    font-size: 1rem;
    line-height: 1.5rem;
  }


  #staff-container {
    margin-bottom: 2rem;
  }


  #staff1 {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2rem;
  }

  #staff1 .f-carnet {
    min-height: 12rem;
    min-width: 12rem;
    margin-bottom: 1rem;
    display: flex;
  }

  #staff1 .f-carnet img {
    height: 12rem;
  }


  .staff-card h3 {
    margin: 0.5rem;
  }

  .staff-card>p:nth-child(3) {
    margin: 0rem;
  }

  .f-carnet {
    min-height: 10rem;
    min-width: 10rem;
  }

  .f-carnet img {
    height: 10rem;
  }

  /* GALERÍA */

  .alguito1 {
    min-width: 30vw;
  }

  .contenido {
    max-width: 60vw;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CONSULTORIOS */
  #cons-container>div {
    width: 100vw;
    height: 40vh;
    font-family: m-bold;
  }

  #consul1 img,
  #consul2 img {
    width: 100%;
    height: auto;


  }

  /* footer */
  .cont-footer>div:nth-child(2) div,
  .cont-footer>div:nth-child(2) div a,
  .cont-footer>div:nth-child(2) div a p {
    width: 100%;
    overflow-wrap: break-word;
  }


}

@media screen and (max-width: 630px) {

  #imagen,
  .imagotipoContainer {
    animation: none;
  }

  #header-content {
    padding: 20px;
    text-align: center;
    width: 90vw;
  }


  #imagen1 {
    height: 8rem;
    width: 70vw;
  }



  .imagotipoContainer h2 {
    font-size: 2rem;
    text-align: center;
  }

  .imagotipoContainer h1 {
    font-size: 3.2rem;
    letter-spacing: -1px;
  }

  .buttons-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  a {
    color: var(--azul);
    cursor: pointer;
    outline: none;
    border: none;
    text-decoration: none;
  }

  .seventh {
    transition: all .5s ease-in-out;
    margin: 1rem 0rem;
    padding: 16px;
    border-bottom: 3px solid white;
    text-align: center;
  }


  /* NAVBAR */

  #logo-container{
    margin: 0rem;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
  }

  #logo-navbar {
    width: 7rem;
    height: 3.5rem;
  }

  #logo-container {
    width: 50vw;
  }

  #logo-container div h1 {
    font-size: 1.4rem;
    margin: 0px;
  }

  #logo-container div h2 {
    font-size: 0.9rem;
    margin: 0px;
  }



  /* CONTACTO */

  .contacto {
    padding: 1rem;
  }

  .boton-enviar {
    margin: 0px;
  }

  .formulario div {
    justify-content: flex-end;
  }

  #a-f p {
    font-size: 0.7rem;
    line-height: 1rem;
  }

  .card {
    width: 80vw;
    height: fit-content;

  }

  .card img {
    width: 20%;
  }

  #staff1 {
    width: 80vw;
  }

  .modal-content img {
    height: auto;
    width: 80vw;
  }
}

@media screen and (max-width: 490px) {

  #logo-container{
    margin: 0rem;
    margin-top: 0rem;
  }

  .card {
    width: 70vw;
    height: fit-content;

  }

  .card img {
    width: 15%;
  }

  .card h2 {
    margin: 0.3rem;
  }

  section>h1 {
    font-size: 1.5rem !important;
  }

  section>p {
    font-size: 0.8rem !important;
  }

  .main_h {
    height: 7rem;
  }




  .mobile-toggle {
    right: 3rem;
  }

  
  .card-v {
    margin-bottom: 0.5rem;
    width: 7rem;
  }

  .card-v h3 {
    width: auto;
    font-size: 0.6rem;
    margin-bottom: 0rem;
  }

  .card-v div {
    height: 30vh;
    width: 100%;
  }

  .staff-card {
    width: 60vw;
    height: fit-content;
  }

  .alguito1 label {
    font-size: 0.8rem;
  }

  #consulH img {

    width: auto;


  }

  /* productos */

  .details-buttons{
    flex-direction: column;
  }

  .details-buttons button{
    margin: 0.5rem;
  }


  .form-container {
    margin: 2rem 0rem;
    padding: 0.5rem;
  }


  .boton-enviar {
    width: 8rem !important;
  }

  .relleno h1 {
    font-size: 1.2rem;
  }

  .cont-footer a i {
    margin: 0px;
  }


}

@media screen and (max-width: 376px) {
  .mobile-toggle span {
    width: 20px;
    height: 3px;
    margin-bottom: 3px;
    font-size: auto;
  }

  #logo-navbar {
    width: 7rem;
    height: 4rem;
  }

  #logo-container div h1 {
    font-size: 1.3rem;
    margin: 0px;
  }

  #logo-container div h2 {
    font-size: 0.8rem;
    margin: 0px;
  }

  .card-container-v {
    width: 100%;
  }

  .card-v {
    margin-bottom: 0.5rem;

  }

  .card-v h3 {
    width: auto;
    font-size: 0.6rem;
    margin-bottom: 0rem;
  }

  .card-v div {
    height: 25vh;

  }

  .alguito1 label {
    font-size: 0.65rem;
  }

  .formulario {
    display: flex;
    flex-direction: column;
  }

  textarea {
    width: 80% !important;
  }

  .formulario div {
    justify-content: center;
  }

  .cont-footer {
    flex-direction: column-reverse;
  }

  .cont-footer>div:nth-child(2) {
    width: fit-content;
    padding: 0rem 1rem;
  }

  .cont-footer>div:last-child {
    flex-direction: row;
  }

  .cont-footer>div:nth-child(1) {
    width: 80%;
  }

  #staff1 {
    flex-direction: column;
    align-items: center;
  }

  #staff1 div:nth-child(2) {
    align-items: center;
  }

  #staff1 div:nth-child(2) p {
    text-align: center;
  }
}