:root {
  /* Colores */
  --dark-primary-color: #303f9f;
  --ligh-primary-color: #dadada;
  --primary-color: #3f51b5;
  --text-icons: #ffffff;
  --accent-color: #448aff;
  --primary-text: #212121;
  --secondary-text: #757575;
  --modal-text-color: #000000;
  --divider-color: #bdbdbd;
  --ligth-transp: #f8f9fae7;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
}

/* cuando el header/nav es fijo se pone el valor de ese height acá, así cada sección se ve correctamente al usar el nav */
section {
  scroll-margin-top: 110px;
}

/* ------- MENU ------- */

.resaltado {
  background: var(--dark-primary-color);
}

.bg-navbar {
  background: var(--ligth-transp);
}

.navbar-brand img {
  width: 200px;
  height: 60px;
}

#menu li > a {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-text);
}

#menu li > a:hover {
  color: var(--dark-primary-color);
}

.vacio-bajo-header {
  height: 120px;
}

/* ------- <SLIDER DE IMAGENES ------- */

.carousel-inner {
  max-height: 750px;
  width: 100%;
  margin: auto;
}

.wap {
  position: fixed;
  z-index: 100;
  margin-left: 80vw;
  margin-top: 80vh;
}

#iconos i {
  font-size: 26px;
  padding: 0 8px;
  color: #f3f3f3;
}
/* ------- </SLIDER DE IMAGENES ------- */

/* ------- <INTRO ------- */
#intro {
  width: 90%;
}

/* ------- </INTRO ------- */

/* ------- <ESPECIALIDADES ------- */
#especialidades {
  text-align: center;
}

.Typewriter__wrapper {
  font-size: clamp(1.25rem, 0.625rem + 3.125vw, 1.75rem);
}

/* CAMBIOS 2.0.0 */
.accordion {
  width: 90vw;
  margin: 0 auto;
}

/* CAMBIOS 2.0.0 */
.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: var(--ligh-primary-color);
}

.accordion1 .accordion-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none; /* Elimina el borde inferior */
}

.accordion2 .accordion-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.mail-small {
  font-size: clamp(0.75rem, 0.023rem + 3.636vw, 1rem);
}

/* ------- </ESPECIALIDADES ------- */

/* ------- <OBRAS SOCIALES ------- */

.ob-soc h3 {
  animation: aparecer linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
}

.slider-os {
  --slide-width: 200px;
  --slides-count: 13;

  width: 90vw;
  height: auto;
  margin: 50px auto;
  overflow: hidden;
}

.slider-os .slide-track {
  display: flex;
  width: calc(var(--slide-width) * var(--slides-count) * 2);
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
}

.slider-os .slide {
  width: var(--slide-width);
  flex-shrink: 0;
}

.slider-os .slide img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
}

.slider-os .slide img:hover {
  filter: grayscale(0%);
}

/* ------- </OBRAS SOCIALES ------- */

/* ------- <ATENDEMOS POR IOMA ------- */

#ioma ul {
  text-align: left;
  font-size: 18px;
  margin: 0 0 0 20px;
}
/* ------- <ATENDEMOS POR IOMA ------- */

/* ------- <UBICACIÓN ------- */
.ubicaciones {
  height: 100%;
  position: relative;
}
.bg-ubicacion {
  position: relative;
}

.bg-ubicacion img {
  z-index: 1;
  opacity: 0.5;
  display: none;
}

.bg-img-1 {
  position: absolute;
  top: 35px;
  left: 50px;
  animation:
    icono1 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-3 {
  position: absolute;
  top: 118px;
  left: 245px;
  animation: hexacruz2 6s ease-in-out infinite;
}
.bg-img-4 {
  position: absolute;
  top: 245px;
  left: 223px;
  animation:
    icono2 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-5 {
  position: absolute;
  top: 280px;
  left: 70px;
  animation:
    icono3 linear both,
    hexacruz3 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-6 {
  position: absolute;
  top: 440px;
  left: 110px;
  animation:
    icono1 linear both,
    hexacruz2 6s ease-in-out infinite;
  animation-timeline: view();
}

.bg-img-8 {
  position: absolute;
  top: 645px;
  left: 230px;
  animation:
    icono2 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-9 {
  position: absolute;
  top: 690px;
  left: 95px;
  animation: hexacruz3 6s ease-in-out infinite;
}
.bg-img-10 {
  position: absolute;
  top: 85px;
  left: 1580px;
  animation:
    icono1 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-11 {
  position: absolute;
  top: 115px;
  left: 1700px;
  animation:
    icono2 linear both,
    hexacruz3 6s ease-in-out infinite;
  animation-timeline: view();
}

.bg-img-13 {
  position: absolute;
  top: 295px;
  left: 1805px;
  animation:
    icono3 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-14 {
  position: absolute;
  top: 300px;
  left: 1617px;
  animation:
    icono1 linear both,
    hexacruz3 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-15 {
  position: absolute;
  top: 435px;
  left: 1770px;
  animation:
    icono3 linear both,
    hexacruz2 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-16 {
  position: absolute;
  top: 440px;
  left: 1580px;
  animation: hexacruz 6s ease-in-out infinite;
}
.bg-img-17 {
  position: absolute;
  top: 620px;
  left: 1652px;

  width: 65px;
  animation:
    icono2 linear both,
    hexacruz3 6s ease-in-out infinite;
  animation-timeline: view();
}

.mapa {
  width: 90vw;
  height: 348px;

  animation: opacity linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

/* ------- </UBICACIÓN ------- */

/* ------- <VIDEO NOSOTROS ------- */

.video-nosotros {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
  position: relative;
}

.video-youT {
  position: absolute;
  top: 50px;
  width: 100vw;
  aspect-ratio: 16 / 9;
}

.nosotros {
  height: 100%;
  position: relative;
}
.bg-nosotros {
  position: relative;
}

.bg-nosotros img {
  z-index: 1;
  opacity: 0.5;
  display: none;
}

.bg-img-1-b {
  position: absolute;
  top: 0px;
  left: 30px;
  animation:
    icono3 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-3-b {
  position: absolute;
  top: 118px;
  left: 230px;
  animation: hexacruz2 6s ease-in-out infinite;
}
.bg-img-4-b {
  position: absolute;
  top: 225px;
  left: 215px;
  animation:
    icono3 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-5-b {
  position: absolute;
  top: 268px;
  left: 57px;
  animation: hexacruz2 6s ease-in-out infinite;
}
.bg-img-6-b {
  position: absolute;
  top: 380px;
  left: 125px;
  animation: hexacruz3 6s ease-in-out infinite;
}

.bg-img-8-b {
  position: absolute;
  top: 585px;
  left: 210px;
  animation: hexacruz 6s ease-in-out infinite;
}
.bg-img-9-b {
  position: absolute;
  top: 600px;
  left: 70px;
  animation:
    icono2 linear both,
    hexacruz2 6s ease-in-out infinite;
  animation-timeline: view();
}

.bg-img-11-b {
  position: absolute;
  top: 20px;
  left: 1615px;
  animation:
    icono1 linear both,
    hexacruz 6s ease-in-out infinite;
  animation-timeline: view();
}

.bg-img-13-b {
  position: absolute;
  top: 230px;
  left: 1790px;
  animation: hexacruz2 6s ease-in-out infinite;
}
.bg-img-14-b {
  position: absolute;
  top: 260px;
  left: 1587px;
  animation:
    icono3 linear both,
    hexacruz3 6s ease-in-out infinite;
  animation-timeline: view();
}
.bg-img-15-b {
  position: absolute;
  top: 395px;
  left: 1750px;
  animation: hexacruz 6s ease-in-out infinite;
}
.bg-img-16-b {
  position: absolute;
  top: 420px;
  left: 1580px;
  animation: hexacruz2 6s ease-in-out infinite;
}
.bg-img-17-b {
  position: absolute;
  top: 620px;
  left: 1690px;
  width: 75px;
  animation:
    icono3 linear both,
    hexacruz2 6s ease-in-out infinite;
  animation-timeline: view();
}

/* ------- </VIDEO NOSOTROS ------- */

/* ------- <RRHH ------- */
#rrhh {
  position: relative;
  font-size: 20px;
  background: url(../assets/images/rrhh.jpg) no-repeat 50% 50%;
  background-size: cover;
  height: 500px;
  margin-top: 55px;
}

.text-rrhh {
  animation: aparecer linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}

.bg-rrhh {
  position: absolute;
  bottom: 30px;
  background: #ffffffa9;
}

.bg-rrhh a {
  text-decoration: none;
}
.bg-rrhh span {
  font-size: clamp(
    0.938rem,
    0.271rem + 3.333vw,
    1rem
  ); /*min 15px max 16px - min 320px max 350px*/
}
/* ------- </RRHH ------- */

/* ------- <FOOTER ------- */

footer {
  background: var(--dark-primary-color);
  color: var(--text-icons);
  position: relative;
}

.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 0;
  max-width: 90%;
}

.diseño-web {
  position: absolute;
  bottom: 5px;
  right: 10px;
  text-decoration: none;
  color: #ffffff;
}

.devgep {
  text-decoration: none;
  color: #ffffff;
}

.devgep:hover {
  color: #8da5cc;
}

/* ------- </FOOTER ------- */

/* ------- <MODAL ------- */
/* CAMBIOS 2.0.0 */
/* Se eliminaron los modal */

/* CAMBIOS 2.0.0 */
.doble-listas {
  display: flex;
  flex-direction: column; /* Por defecto en móviles, listas apiladas */
}

.doble-listas ul {
  width: 100%; /* Cada lista ocupa todo el ancho */
  padding-left: 15px; /* Asegura alineación uniforme */
  margin-top: 10px;
  margin-bottom: 0;
}

.doble-listas li {
  font-size: 15px;
  text-align: left; /* Asegura que el texto esté alineado a la izquierda */
  list-style-position: inside; /* Opcional: Asegura que el marcador también esté alineado con el texto */
}
.sin-listado {
  list-style-type: none;
}

.simple-listas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.simple-listas ul {
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 15px;
}

.simple-listas li {
  font-size: 15px;
  text-align: left; /* Asegura que el texto esté alineado a la izquierda */
  list-style-position: inside; /* Opcional: Asegura que el marcador también esté alineado con el texto */
}

/* CAMBIOS 2.0.0 */
.btn-wap-modal {
  background: var(--dark-primary-color);
  border-radius: 6px;
  color: #ffffff;
  width: 200px;
  height: 38px;
  line-height: 37px;
  padding: 0 13px;
  text-decoration: none;
}
.btn-wap-modal:hover {
  background: var(--primary-color);
}
/* ------- </MODAL ------- */

/* ------- <ANIMACIONES ------- */
@keyframes reveal {
  from {
    opacity: 0.5;
    translate: 0 20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(
      calc(var(--slide-width) * var(--slides-count) * -1)
    );
    transform: translateX(calc(var(--slide-width) * var(--slides-count) * -1));
  }
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes izquierda {
  from {
    opacity: 0;
    translate: -200px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes derecha {
  from {
    opacity: 0;
    translate: 200px 0px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hexacruz {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.1;
  }
}

@keyframes hexacruz2 {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes hexacruz3 {
  0% {
    opacity: 0.3;
  }
  30% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes icono1 {
  from {
    translate: 0 -20px;
    opacity: 0.2;
  }
  to {
    translate: 0 70px;
    opacity: 0.8;
  }
}

@keyframes icono2 {
  from {
    translate: 0 -20px;
    opacity: 0.3;
  }
  to {
    translate: 10px 50px;
    opacity: 0.9;
  }
}

@keyframes icono3 {
  from {
    translate: 0px -10px;
    opacity: 0.1;
  }
  to {
    translate: 20px 80px;
    opacity: 0.6;
  }
}

/* ------- </ANIMACIONES ------- */

/*-----------------------------------------------------------
  MEDIA QUERIES | Mobile First            
-------------------------------------------------------------*/
/* PANTALLA SMALL ms ≥576px | BOOTSTRAP sm */
@media (min-width: 576px) {
  .wap {
    margin-left: 85vw;
  }
  .mapa {
    /*width: 767px;*/
    height: 600px;
  }
  .navbar-brand img {
    width: 265px;
    height: 80px;
  }

  .Typewriter__wrapper {
    font-size: 28px;
  }

  /* ------- <RRHH ------- */
  #rrhh {
    font-size: 25px;
  }
  #rrhh span {
    font-size: 23px;
  }
  /* ------- </RRHH ------- */

  /* ------- <VIDEO NOSOTROS ------- */
  .video-nosotros {
    height: 60vh;
  }
  .video-youT {
    top: 70px;
  }
  /* ------- </VIDEO NOSOTROS ------- */

  /*<MODAL>*/
  /* CAMBIOS 2.0.0 */
  .doble-listas {
    flex-direction: row; /* Alinea las listas una al lado de la otra */
    flex-wrap: wrap;
  }

  .doble-listas ul {
    width: 50%; /* Ocupan la mitad del contenedor */
  }

  .doble-listas ul:first-child {
    padding-left: 15px;
  }

  .doble-listas ul:last-child {
    padding-left: 5px;
  }
  /*</MODAL>*/
}

/* PANTALLA MEDIUM md ≥768px | BOOTSTRAP md */
@media (min-width: 768px) {
  .wap {
    margin-left: 90vw;
  }

  #intro {
    width: 50%;
  }

  .slider-os {
    --slide-width: 350px;
  }

  /* ------- <ESPECIALIDADES ------- */

  /* CAMBIOS 2.0.0 */
  .accordion {
    width: 47vw;
    margin: 0 auto;
  }

  .accordion1 .accordion-item:last-child {
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    border-bottom: 1px solid #dee2e6;
  }

  .accordion2 .accordion-item:first-child {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
    border-top: 1px solid #dee2e6; /* Restaura el borde si era necesario */
  }

  

  /* ------- <RRHH ------- */
  #rrhh {
    font-size: 28px;
  }
  #rrhh span {
    font-size: 28px;
  }
  /* ------- </RRHH ------- */

  /* ------- <VIDEO NOSOTROS ------- */
  .video-nosotros {
    height: 70vh;
  }
  .video-youT {
    /*max-height: 80%;*/
    max-width: 90vw;
    display: inline;
  }
  /* ------- </VIDEO NOSOTROS ------- */
}

/* PANTALLA LARGE lg ≥992px | BOOTSTRAP lg (se usa en 1024px en este caso)*/
@media (min-width: 1024px) {
  /* ------- <ESPECIALIDADES ------- */

  .clinica-medica,
  .obstetricia,
  .ginecologia,
  .ecografias,
  .pediatria,
  .dermatologia {
    animation: izquierda linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 20%;
  }

  .cardiologia,
  .traumatologia,
  .endocrinologia,
  .nutricion,
  .urologia,
  .otros-estudios {
    animation: derecha linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 20%;
  }
  /* ------- </ESPECIALIDADES ------- */



  /* ------- <UBICACIÓN ------- */
  .bg-ubicacion img {
    display: inline;
  }
  .mapa-gral {
    position: absolute;
  }

  .mapa {
    /*max-width: 90vw;*/
    height: 600px;
  }
  /* ------- </UBICACIÓN ------- */

  /* ------- <VIDEO NOSOTROS ------- */
  .video-nosotros {
    height: 90vh;
    position: absolute;
    top: -20px;
  }

  .video-youT {
    max-width: 90vw;
  }
  .bg-nosotros img {
    display: inline;
  }
  /* ------- </VIDEO NOSOTROS ------- */
}

/* PANTALLA EXTRA LARGE xl ≥1200px | BOOTSTRAP xl */
@media (min-width: 1200px) {
  .wap {
    margin-left: 92vw;
    width: 60px;
  }

  .mapa {
    max-width: 1200px;
  }
  #intro h1 {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }

  #intro p {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }

  /* ------- <ESPECIALIDADES ------- */
  /* CAMBIOS 2.0.0 */
  .gral_accordion {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .accordion {
    max-width: 600px;
    margin: 0;
  }
  /* .accordion1 {
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  .accordion-item {
    width: 100%;
  } */
  /* ------- </ESPECIALIDADES ------- */

  /* ------- <VIDEO NOSOTROS ------- */
  .video-youT {
    max-width: 1200px;
  }
  /* ------- </VIDEO NOSOTROS ------- */
}

/* PANTALLA EXTRA EXTRA LARGE xxl ≥1400px | BOOTSTRAP xxl */
@media (min-width: 1400px) {
  .carousel-inner {
    max-height: 750px;
    width: 100%;
    margin: auto;
  }
}

/* PANTALLA  ≥1690px (si es necesario) */
@media (min-width: 1690px) {
}