@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
:root{
  --header-height: 4.5rem;
  --purple-color: hsl(304, 74%, 26%);
  --purple-color-principal: hsl(307, 81%, 23%);
  --purple-color-medio: hsl(318, 70%, 33%);
  --pink-color: hsl(310, 42%, 56%);
  --pink-color-strong: hsl(322, 59%, 51%);
  --pink-color-low: hsl(309, 53%, 69%);
  --white-color: hsl(0, 0%, 100%);
  --norma-font-size: .938rem;
  --font-regular: 300;
  --font-semibold: 500;
  --z-tooltip: 10;
  --z-fixed: 100;
  --font-family-general: "Poppins", sans-serif;
  --font-family-encabezado: sans-serif;
}
@media screen and (min-width: 1024px){
  :root{
    --normal-font-size: 1rem;
  }
}
body::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
body::-webkit-scrollbar-track {
    background: rgb(61, 43, 77);
    height: 1px;
}  
body::-webkit-scrollbar-thumb {
    background-color: var(--pink-color-strong);
    border-radius: 20px;
    border: 1px solid var(--pink-color-strong);
}

h2{
  font-family: var(--font-family-encabezado);
}
p,
a,
ul{
  font-family: var(--font-family-general);
}
p{
  font-size: 18px;
}
a{
  font-size: 18px;
}
h3{
  font-size: 22px;
}

/* header */
ul{
  list-style-type: none;
}
a{
  text-decoration: none;
}
.container{
  max-width: 1200px;
  margin-inline: 1.5rem;
}
.header{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white-color);
  box-shadow: 0px 2px 26px var(--pink-color-low);
  z-index: var(--z-fixed);
  transition: 1s;
}
.nav{
  height: var(--header-height);
}
.nav_list .principal{
  color: var(--purple-color-principal);
}
.nav_data{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav_logo{
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
}
.nav_logo img{
  width: 180px;
}
.nav_burger,
.nav_close{
  color: var(--purple-color);
}
.nav_toggle{
  position: relative;
  width: 32px;
  height: 32px;
}
.nav_burger,
.nav_close{
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.5rem;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}
.nav_close{
  opacity: 0;
}
@media screen and (max-width: 1118px){
  .nav_menu{
    position: absolute;
    left: 0;
    top: 2.3rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .nav_menu::-webkit-scrollbar{
    width: 0;
  }
  .nav_list{
    background-color: var(--white-color);
    padding-top: 1rem;
  }
}

.nav_link{
  color: var(--pink-color);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s;
}
.nav_link:hover{
  background-color: var(--pink-color);
  color: var(--white-color);
}
.show-menu{
  opacity: 1;
  top: 4.5rem;
  pointer-events: initial;
}
.show-icon .nav_burger{
  opacity: 0;
  transform: rotate(90deg);
}
.show-icon .nav_close{
  opacity: 1;
  transform: rotate(90deg);
}

/* inicio */

.inicio{
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--pink-color-strong);
  margin-top: 1rem;
  animation: inicio 2s ease;
}
.inicio .foto{
  display: flex;
  width: 100%;
}
.inicio .foto img{
  width: 100%;
  
}
.nosotros {
  background-color: var(--pink-color-strong);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
  gap: 1.5rem;
  color: var(--white-color);
}
.nosotros h2{
  font-weight: var(--font-semibold);
}
.nosotros p{
  text-align: justify;
}
.elegirnos{
  background-color: var(--pink-color-strong);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
  color: var(--white-color);
}
.nosotros ul{
  padding: 1.25rem;
}
.nosotros ul li{
  margin: .50rem 0;
  list-style-type: decimal;
  text-align: justify;
}

/* Quienes somos */

.somos{
  background-image: url(./img/fondo\ nosotros\ consultaalgineco.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.somos h2{
  color: var(--pink-color-strong);
  margin: 1rem;
  text-align: center;
}
.somos-imagen{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.somos p{
  color: var(--pink-color-strong);
}
.imagen-somos{
  width: 100%;
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.imagen-somos img{
  width: 100%;
  object-fit: cover;
}
.container-somos{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-self: center;
  width: 100%;
  height: 100%;
  gap: 2rem;
}
button {
  padding: 10px 20px;
  border: none;
  background: var(--pink-color);
  color: white;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background: var(--pink-color-strong);
}

/* Overlay (fondo oscuro) */
.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* oculto por defecto */
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Contenedor modal */
.modal{
  background: var(--pink-color-strong);
  border-radius: 10px;
  max-width: 1000px;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  animation: fadeIn 0.3s ease;
  overflow: scroll;
  scrollbar-color: var(--pink-color-low) var(--pink-color-strong);
  overflow-x: hidden;
  color: var(--white-color);
}

.modal h1{
  font-weight: var(--font-regular);
  margin: 1rem 0;
}

/* Botón de cierre (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 3rem;
  color: var(--white-color);
  cursor: pointer;
}

    /* Animación */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
   /* Responsive */
@media (max-width: 600px) {
   .modal {
      max-width: 100%;
      border-radius: 8px;
    }
}

/* carrusel de imagenes */

.slide{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    margin-top: 30px;
}
.slider-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 50vh;
    max-width: 1600px;
    margin: 1rem;
}
.card-list{
    margin: auto;
}
.card-list .card-item{
    color: #fff;
    user-select: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    backdrop-filter: blur(30px);
}
.card-list .card-item .user-image{
    width: 100%;
    object-fit: cover;
    height: 200px;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 4px;
}
.slider-wrapper .swiper-pagination-bullet {
    background: #fff;
    height: 15px;
    width: 15px;
}
.slider-wrapper .swiper-slide-button {
    color: var(--purple-color);
    margin-top: -20px;
    transition: 0.2s ease;
}
.slider-wrapper .swiper-slide-button:hover{
    color: var(--pink-color-strong);
}

/* carrusel imagenes vph */

.slide-vph{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    margin-top: 30px;
}
.slider-wrapper-vph{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 50vh;
    max-width: 1600px;
    margin: 1rem;
}
.card-list-vph{
    margin: auto;
}
.card-list-vph .card-item-vph{
    user-select: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.card-list-vph .card-item-vph .user-image-vph{
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 1.5rem;
}
.slider-wrapper-vph .swiper-pagination-bullet {
    background: #fff;
    height: 15px;
    width: 15px;
}
.slider-wrapper-vph .swiper-slide-button {
    color: var(--purple-color);
    margin-top: -20px;
    transition: 0.2s ease;
}
.slider-wrapper-vph .swiper-slide-button:hover{
    color: var(--pink-color-strong);
}

/* Carrusel tratamiento */

.slide-tratamiento{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    margin-top: 30px;
}
.slider-wrapper-tratamiento{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 50vh;
    max-width: 1600px;
    margin: 1rem;
}
.card-list-tratamiento{
    margin: auto;
}
.card-list-tratamiento .card-item-tratamiento{
    user-select: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.card-list-tratamiento .card-item-tratamiento h3{
  color: var(--pink-color-strong);
}
.card-list-tratamiento .card-item-tratamiento .user-image-tratamiento{
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 1.5rem;
}
.slider-wrapper-tratamiento .swiper-pagination-bullet {
    background: #fff;
    height: 15px;
    width: 15px;
}
.slider-wrapper-tratamiento .swiper-slide-button {
    color: var(--purple-color);
    margin-top: -20px;
    transition: 0.2s ease;
}
.slider-wrapper-tratamiento .swiper-slide-button:hover{
    color: var(--pink-color-strong);
}


/* Sección VPH */

/* inicio */

.vph-container{
  width: 100%;
  padding: 1.5rem 1.2rem;
  animation: vph1 2s ease;
}
.vph-container .titulo{
  width: 100%;
  color: var(--white-color);
  background-color: var(--pink-color-strong);
  border-radius: 10px;
}
.vph-container .titulo h2{
  color: var(--white-color);
  padding: 2rem;
  margin: 1rem 0;
}
.vph-detalles{
  background-image: url(./img/fondo\ vph.png);
  background-position: center;
  background-size: cover;
  width: 100%;
  padding: 1rem;
  color: var(--pink-color);
  text-align: justify;
}
.vph-detalles p{
  margin: 1rem 0;
}
.vph-detalles ul{
  list-style-type: disc;
  text-align: start;
  width: 90%;
  margin-left: 3rem;
}
.vph-detalles ul li{
  margin: .3rem 0;
}
.img-vph{
  width: 100%;
  padding: 1.5rem 1.2rem;
}
.img-vph .titulo{
  margin: 1.5rem 0;
}
.img-vph .titulo h1{
  color: var(--pink-color-strong);
}
.img-container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.img-container .img{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  justify-content: center;
  align-items: center;
}
.img-container .img img{
  width: 100%;
  max-width: 400px;
  object-fit: cover;
  border-radius: 10px;
}
.img-container .img h3{
  color: var(--purple-color);
  text-align: center;
}
.historia{
  display: flex;
  margin: auto;
}
.historia img{
  width: 100%;
  margin: auto;
  justify-content: center;
  align-items: center;
}
.img-container .titulo h1{
  color: var(--pink-color-strong);
}
.prevencion{
  width: 100%;
  height: 270px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: .5rem 0;
  text-align: center;
}
.prevencion h3{
  color: var(--pink-color);
}
.imagen-prevencion{
  width: 100%;
  max-width: 300px;
}
.prevencion img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.manifestacion{
  width: 100%;
  height: 300px;
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  margin: .5rem 0;
  object-fit: cover;
}
.manifestacion  img{
  width: 100%;
  object-fit: cover;
}

/* cancer de mmama */

.cancer_mama_container{
  padding: 1.5rem 1.2rem;
  margin: auto;
  width: 100%;
  animation: cancermama 2s ease-out;
}
.cancer_mama_container .titulo-mama{
  margin: 2rem;
  background-color: var(--pink-color-strong);
  color: var(--white-color);
  border-radius: 10px;
  display: flex;
  /* animation: cancermama 2s ease-out; */
  width: 90%;
}
.cancer_mama_container .titulo-mama h2{
  color: var(--white-color);
  padding: 2rem;
  width: 100%;
}
.cancer_mama_container .detalles{
  background-image: url(./img/fondo\ cancer\ de\ mama.png);
  background-position: center;
  background-size: contain;
  width: 100%;
  animation: cancermama2 2s ease;
}
.cancer_mama_container .detalles .detalles-intro{
  width: 100%;
  color: var(--pink-color);
}
.cancer_mama_container .detalles .detalles-intro p{
  margin: .5rem;

}
.cancer_mama_container .detalles .detalles-intro ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer_mama_container .detalles .detalles-intro ul li{
  margin: .5rem 0;
}
.cancer_mama_container .detalles .factores-riesgo{
  width: 100%;
  padding: 1rem;
}
.cancer_mama_container .detalles .factores-riesgo .titulo-factores{
  margin: 1rem;
  color: var(--pink-color-strong);
}
.cancer_mama_container .detalles .factores-riesgo .detalles-factores{
  width: 100%;
  color: var(--pink-color);
}
.cancer_mama_container .detalles .factores-riesgo .detalles-factores p{
  margin: 1rem 0;
}
.cancer_mama_container .detalles .factores-riesgo .detalles-factores ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer_mama_container .detalles .factores-riesgo .detalles-factores ul li{
  margin: .5rem 0;
}
.cancer_mama_container .detalles .prevencion-container{
  width: 100%;
  padding: 1rem;
}
.cancer_mama_container .detalles .prevencion-container .titulo-prevencion{
  margin: 1rem;
  color: var(--pink-color-strong);
}
.cancer_mama_container .detalles .prevencion-container .prev{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
  color: var(--pink-color);
}
.cancer_mama_container .detalles .prevencion-container .prev li{
  margin: .5rem 0;
}
.cancer_mama_container .detalles .mastografia-ultrasonido{
  width: 100%;
  color: var(--pink-color);
}
.cancer_mama_container .detalles .mastografia-ultrasonido .detalles-mastografia{
  width: 100%;
  margin: 1rem 0;
}
.cancer_mama_container .detalles .mastografia-ultrasonido .detalles-mastografia .titulo-mastografia{
  margin: 1rem;
  color: var(--pink-color-strong);
}
.cancer_mama_container .detalles .etapas-cancer{
  width: 100%;
  color: var(--pink-color);
  padding: 1rem;
}
.cancer_mama_container .detalles .etapas-cancer .titulo-etapas{
  margin: 1rem;
  color: var(--pink-color-strong);
}
.cancer_mama_container .detalles .etapas-cancer p{
  margin: 1rem 0;
}
.cancer_mama_container .detalles .etapas-cancer ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer_mama_container .detalles .etapas-cancer ul li{
  margin: .5rem 0;
}
.cancer_mama_container .detalles .tratamientos{
  width: 100%;
  padding: 1rem;
  color: var(--pink-color);
}
.cancer_mama_container .detalles .tratamientos .titulo{
  background-color: transparent;
}
.cancer_mama_container .detalles .tratamientos .titulo h3{
  background-color: #fff;
  color: var(--pink-color-strong);
}
.cancer_mama_container .detalles .tratamientos .cirugia{
  margin: 1rem 0;
}
.cancer_mama_container .detalles .tratamientos .cirugia .detalles-cirugia p{
  margin: .5rem 0;
}
.cancer_mama_container .detalles .tratamientos .terapia{
  margin: 1rem 0;
}
.cancer_mama_container .detalles .tratamientos .terapia .detalles-terapias p{
  margin: .5rem 0;
}
.cancer_mama_container .img-cancer-mama{
  width: 95%;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}
.cancer_mama_container .img-cancer-mama .imagenes-mama{
  width: 100%;
  max-width: 350px;
  margin: 1rem;
}
.cancer_mama_container .img-cancer-mama .imagenes-mama img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.cancer_mama_container .img-cancer-mama .imagenes-mama p{
  color: var(--pink-color-strong);
}
.cancer_mama_container .tipos-cancer{
  width: 100%;
}
.cancer_mama_container .tipos-cancer h1{
  color: var(--pink-color-strong);
  margin: 1rem 0;
}
.cancer_mama_container .tipos-cancer .imagenes-mama{
  width: 90%;
  margin: .5rem;
  margin: auto;
}
.cancer_mama_container .tipos-cancer .imagenes-mama img{
  width: 100%;
  object-fit: cover;
}
.cancer_mama_container .diagnostico-cancer{
  width: 100%;
  padding: 1.5rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
}
.cancer_mama_container .diagnostico-cancer .titulo-diagnostico{
  width: 100%;
  color: var(--pink-color-strong);
}
.cancer_mama_container .diagnostico-cancer .imagenes-diagnostico-container{
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}
.cancer_mama_container .diagnostico-cancer .imagenes-diagnostico-container .imagenes-mama{
  width: 100%;
  max-width: 350px;
  margin: 1rem;
}
.cancer_mama_container .diagnostico-cancer .imagenes-diagnostico-container .imagenes-mama img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}
.cancer_mama_container .diagnostico-cancer .imagenes-diagnostico-container .imagenes-mama p{
  color: var(--pink-color-strong);
  text-align: center;
}
.cancer_mama_container .titulo-manejo{
  width: 100%;
  padding: 1rem;
  color: var(--pink-color-strong);
}
.cancer_mama_container .imagenes-manejo{
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}
.cancer_mama_container .imagenes-manejo .imagenes-mama{
  width: 100%;
  max-width: 280px;
  margin: .5rem;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.cancer_mama_container .imagenes-manejo .imagenes-mama img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.cancer_mama_container .imagenes-manejo .imagenes-mama p{
  text-align: center;
  color: var(--pink-color);
}
.img4{
  width: 100%;
  max-width: 1200px;
  justify-content: center;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.img4 .imagen1{
  width: 100%;
}
.img4 .imagen2{
  width: 100%;
  max-width: 900px;
}

/* otros cánceres ginecológicos */

.otros{
  width: 100%;
  padding: 1.5rem 1.2rem;
}
.otros .otros-container{
  background-image: url(./img/fondo\ otros\ canceeres.png);
  background-position: center;
  background-size: contain;
  width: 100%;
  padding: 1rem;
  animation: otrotitulo 2s ease-in-out;
}
.otros .otros-container h1{
  color: var(--white-color);
  width: 100%;
  margin: 1rem 0;
  padding: 2rem;
  border-radius: 10px;
  background-color: var(--pink-color-strong);
  animation: otrotitulo 2s ease-in-out;
}
.otros .otros-container .canceres{
  width: 100%;
}
.otros .otros-container .canceres .titulo{
  width: 100%;
  color: var(--pink-color-strong);
  margin: .5rem 0;
}
.otros .otros-container .canceres .descripcion{
  width: 100%;
  padding: .5rem;
  color: var(--pink-color);
}
.otros .otros-container .canceres .descripcion p{
  margin: 1rem 0;
}
.otros .otros-container .canceres .factores-riesgo{
  width: 100%;
  margin: .5rem;
}
.otros .otros-container .canceres .factores-riesgo .titulo{
  width: 100%;
}
.otros .otros-container .canceres .factores-riesgo .descripcion-factores{
  width: 100%;
  color: var(--pink-color);
}
.otros .otros-container .canceres .factores-riesgo .descripcion-factores p{
  margin: 1rem 0;
}
.otros .otros-container .canceres .factores-riesgo .descripcion-factores ul{
  width: 90%;
  list-style-type: disc;
  margin-left: 2rem;
}
.otros .otros-container .canceres .factores-riesgo .descripcion-factores ul li{
  margin: .5rem 0;
}
.otros .otros-container .canceres .factores-riesgo .cuadro-clinico{
  width: 100%;
}
.otros .otros-container .canceres .factores-riesgo .cuadro-clinico .titulo-cuadro{
  width: 100%;
  color: var(--pink-color);
  margin: 2rem 0 1rem 0;
}
.otros .otros-container .canceres .factores-riesgo .cuadro-clinico .detalles-cuadro{
  color: var(--pink-color);
}
.otros .otros-container .canceres .factores-riesgo .cuadro-clinico .detalles-cuadro p{
  margin: 1rem 0;
}
.otros .otros-container .canceres .factores-riesgo .cuadro-clinico .detalles-cuadro ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cuadro-clinico .detalles-cuadro .imagenes-cuadro{
  width: 100%;
  padding: .5rem;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
  align-items: center;
}
.cuadro-clinico .detalles-cuadro .imagenes-cuadro .imagenes{
  width: 100%;
  max-width: 400px;
  margin: 1.5rem;
  text-align: center;
}
.cuadro-clinico .detalles-cuadro .imagenes-cuadro .imagenes img{
  width: 100%;
  border-radius: 10px;
}
.cancer-endometrio{
  width: 100%;
  color: var(--pink-color);
}
.cancer-endometrio .titulo-cancer-endometrio{
  width: 100%;
  color: var(--pink-color-strong);
}
.cancer-endometrio .descripcion-cancer-endometrio p{
  margin: 1rem 0;
}
.cancer-endometrio .cuadro-clinico .titulo-cuadro{
  width: 100%;
  color: var(--pink-color);
}
.cancer-endometrio .cuadro-clinico .titulo-cuadro h3{
  margin: .5rem 0;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro p{
  margin: .5rem 0;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro ul li{
  margin: .5rem 0;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro .imagenes-cancer{
  width: 100%;
  padding: .5rem;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
  align-items: center;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro .imagenes-cancer .img-detalles{
  width: 100%;
  max-width: 400px;
  object-fit: cover;
  text-align: center;
  margin: 1rem;
}
.cancer-endometrio .cuadro-clinico .descripcion-cuadro .imagenes-cancer .img-detalles img{
  width: 100%;
  height: 350px;
  border-radius: 10px;
  object-fit: cover;
}
.cancer-vulva{
  width: 100%;
  color: var(--pink-color);
}
.cancer-vulva .titulo-cancer-vulva{
  width: 100%;
  color: var(--pink-color-strong);
  margin: 1rem 0;
}
.cancer-vulva .cuadro-clinico-vulva{
  width: 100%;
}
.cancer-vulva .cuadro-clinico-vulva .titulo h3{
  color: var(--pink-color);
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro{
  width: 100%;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro p{
  margin: .5rem 0;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro ul li{
  margin: .5rem 0;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro .imagenes-vulva{
  width: 100%;
  padding: .5rem;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
  align-items: center;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro .imagenes-vulva .imagenes-detalles{
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin: 1rem;
}
.cancer-vulva .cuadro-clinico-vulva .detalles-cuadro .imagenes-vulva .imagenes-detalles img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.cancer-vagina{
  width: 100%;
  color: var(--pink-color);
}
.cancer-vagina .titulo-cancer-vagina{
  width: 100%;
  color: var(--pink-color-strong);
  margin: 1rem 0;
}
.cancer-vagina .cuadro-clinico-vagina{
  width: 100%;
}
.cancer-vagina .cuadro-clinico-vagina .titulo h3{
  color: var(--pink-color);
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro{
  width: 100%;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro p{
  margin: .5rem 0;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro ul li{
  margin: .5rem 0;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro .imagenes-vagina{
  width: 100%;
  padding: .5rem;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
  align-items: center;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro .imagenes-vagina .imagenes-detalles{
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin: 1rem;
}
.cancer-vagina .cuadro-clinico-vagina .detalles-cuadro .imagenes-vagina .imagenes-detalles img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Obtetricia Perinatal */

.obstetricia{
  width: 100%;
  padding: 1.5rem 1.2rem;
  animation: obstetriciatitulo 2s ease;
}
.obstetricia p, .obtetricia li{
  color: var(--pink-color);
  margin: .5rem 0;
}
.obstetricia h3{
  color: var(--pink-color-strong);
  margin: .5rem 0;
}
.obstetricia h1{
  color: var(--white-color);
  background-color: var(--pink-color-strong);
  padding: 2rem;
  border-radius: 10px;
  margin: 1rem 0;
  animation: obstetriciatitulo 2s ease;
  width: 100%;
}

/* Overlay (fondo oscuro) */
.modal-overlayObstetricia {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* oculto por defecto */
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Contenedor modal */
.modalObstetricia {
  background: var(--pink-color-strong);
  border-radius: 10px;
  max-width: 1000px;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  animation: fadeIn 0.3s ease;
  overflow: scroll;
  scrollbar-color: var(--pink-color-low) var(--pink-color-strong);
  overflow-x: hidden;
  color: var(--white-color);
}
.modalObstetricia h2{
  font-weight: var(--font-regular);
  margin: 1rem 0;
  color: var(--white-color);
}
.modalObstetricia p,
.modalObstetricia h3{
  color: var(--white-color);
}
.modalObstetricia h3{
  margin: 1rem 0;
}
.modalObstetricia ul{
  list-style-type: disc;
  color: var(--white-color);
}
.modalObstetricia ul li{
  margin-left: 2rem;
}

/* Botón de cierre (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 3rem;
  color: var(--white-color);
  cursor: pointer;
}

    /* Animación */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
   /* Responsive */
@media (max-width: 600px) {
   .modalObstetricia {
      max-width: 100%;
      border-radius: 8px;
    }
}

.obstetricia .imagenes-detalles{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.obstetricia .imagenes-detalles .tarjetas-obstetricia{
  width: 100%;
  /* max-width: 260px; */
  display: flex;
  flex-wrap: wrap;
  margin: 2rem;
  position: relative;
}
.embarazo{
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: .5rem;
  border-radius: 10px;
  transition: 1s;
}
.embarazo img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.embarazo h2{
  font-weight: var(--font-regular);
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
  color: var(--pink-color-strong);
  transition: .5s;
  margin-top: .5rem;
}
.embarazo:hover{
  background-color: var(--pink-color-low);
}
.embarazo:hover h2{
  color: var(--white-color);
}

.obstetricia .imagenes-detalles .tarjetas-obstetricia .imagen h2{
  text-align: center;
  color: var(--pink-color-strong);
  font-size: 20px;
}
.obstetricia .imagenes-detalles .tarjetas-obstetricia .imagen img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.tarjetas-obstetricia .imagen .descripcion{
  display: none;
  position: absolute;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  background-color: var(--white-color);
  top: 0;
  left: 0;
  padding: 1.5rem 1.2rem;
  border: 2px solid var(--pink-color-strong);
  border-radius: 10px;
}
.tarjetas-obstetricia .imagen:hover .descripcion{
  display: block;
}
.tarjetas-obstetricia .imagen .descripcion ul{
  width: 90%;
  margin-left: 2rem;
  list-style-type: disc;
  color: var(--pink-color);
}

/* Atención Ginecológica*/

.atencion{
  width: 100%;
  padding: 1.5rem;
  justify-content: center;
  animation: atencionginecologica 2s ease;
}
.atencion .atencion-container{
  width: 100%;
  padding: 1rem;
  color: var(--pink-color);
}
.atencion .atencion-container .titulo-container h1{
  width: 100%;
  background-color: var(--pink-color-strong);
  color: var(--white-color);
  padding: 2rem;
  border-radius: 10px;
}
.atencion .atencion-container .imagen .descripcion-tarjeta h1{
  color: var(--pink-color-strong);
  border-radius: 10px;
  width: 100%;  
}
.atencion-container .descripcion-atencion{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}

.modalAtencion {
  background: var(--pink-color-strong);
  border-radius: 10px;
  max-width: 1000px;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  animation: fadeIn 0.3s ease;
  overflow: scroll;
  scrollbar-color: var(--pink-color-low) var(--pink-color-strong);
  overflow-x: hidden;
  color: var(--white-color);
}
.modalAtencion h2{
  font-weight: var(--font-regular);
  margin: 1rem 0;
  color: var(--white-color);
}
.modalAtencion p,
.modalAtencion h3,
.modalAtencion li{
  color: var(--white-color);
  margin: .5rem 0;
}
.modalAtencion h3,
.modalAtencion h1{
  margin: 1rem 0;
}
.modalAtencion ul{
  color: var(--white-color);
  margin-left: 2rem;
  list-style-type: disc;
}

/* Botón de cierre (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 3rem;
  color: var(--white-color);
  cursor: pointer;
}

    /* Animación */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
   /* Responsive */
@media (max-width: 600px) {
   .modalObstetricia {
      max-width: 100%;
      border-radius: 8px;
    }
}

.atencion-container .descripcion-atencion .tarjeta{
  width: 100%;
  /* max-width: 260px; */
  display: flex;
  flex-wrap: wrap;
  margin: 2rem;
  position: relative;
}
.atencion-container .descripcion-atencion .tarjeta .imagen{
  width: 100%;
  max-width: 350px;
  margin: .5rem;
  margin: auto;
  cursor: pointer;
}
.atencion-container .descripcion-atencion .tarjeta .imagen h2{
  text-align: center;
}
.atencion-container .descripcion-atencion .tarjeta .imagen img{
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.descripcion-atencion .tarjeta .imagen .descripcion-tarjeta{
  display: none;
  position: absolute;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  background-color: var(--white-color);
  top: 0;
  left: 0;
  padding: 1.5rem 1.2rem;
  border: 2px solid var(--pink-color-strong);
  border-radius: 10px;
}
.descripcion-atencion .tarjeta .imagen:hover .descripcion-tarjeta{
  display: block;
}

/* contacto */

.contacto{
  background-image: url(./img/fondo\ contacto.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  /* height: 120vh; */
  display: flex;
}
main{
  width: 100%;
  max-width: 400px;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* margin: auto; */
}
form h1{
  color: var(--pink-color-strong);
  margin: 2rem 0;
}
.formulario{
  background-color: #ffffff31;
  /* max-width: 400px; */
  width: 100%;
  display: flex;
  /* margin: auto; */
  flex-direction: column;
}
.formulario form .inputs{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 3rem;
}
.formulario form .inputs .input{
  width: 100%;
  display: flex;
}
.formulario form .inputs .input input{
  width: 100%;
  display: flex;
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: center;
  margin: 1rem;
  height: 50px;
  border-radius: 10px;
  border-bottom: 2px solid var(--pink-color-strong);
  outline: none;
}
.formulario form .textarea{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 4rem;
}
.formulario form .textarea textarea{
  width: 100%;
  display: flex;
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: center;
  margin: -5rem 0 0 0;
  height: 100px;
  border-radius: 10px;
  border-bottom: 2px solid var(--pink-color-strong);
  outline: none;
}
.formulario form .btn-enviar{
  display: flex;
  margin: .5rem auto 2rem auto;
  justify-content: center;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  border: 1px solid var(--pink-color);
  background-color: var(--white-color);
  color: var(--pink-color-strong);
  font-size: 18px;
  padding: .5rem 1rem;
}


/* footer */

footer{
  /* display: flex; */
  flex-wrap: wrap;
  width: 100%;
  background: linear-gradient(160deg, var(--purple-color), var(--purple-color-medio));
  padding: 1.5rem;
}
footer .footer-container{
  width: 100%;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1rem 0;
}
.footer-container .logo{
  margin: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 300px;
}
.footer-container .logo img{
  width: 200px;
}
.footer-container .aviso{
  margin: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 300px;
}
.footer-container .aviso a{
  color: var(--white-color);
  text-decoration: none;
  font-size: 20px;
}
.footer-container .aviso a:hover{
  color: var(--pink-color-strong);
}
.footer-container .redes{
  margin: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 300px;
}
.footer-container .redes a{
  color: var(--white-color);
  text-decoration: none;
  font-size: 32px;
  margin: 0 1rem;
}
.footer-container .redes a:hover{
  color: var(--pink-color-strong);
}
.footer-container .copy{
  margin: auto;
  /* width: 100%; */
  justify-content: center;
  align-items: center;
  text-align: center;
}
footer .copy a{
  color: var(--white-color);
  text-decoration: none;
  font-size: 20px;
}

/* botón contacto */
.boton-contacto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: fixed;
    width: 50px;
    right: -5px;
    bottom: 50px;
    color: var(--white-color);
    background-color: var(--pink-color-strong);
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    z-index: 15;
    transition: 1s;
}
.boton-contacto h3{
    font-weight: 400;
    border-radius: 20px;
    font-size: 1.75rem;
    padding: 1rem;
    display: flex;
    gap: 20px;
}
.boton-contacto .botones{
    width: 160px;
    /* position: relative; */
    padding: .5rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.boton-contacto a{
    color: var(--white);
    font-size: 2rem;
    
}
.boton-contacto a:hover{
    color: var(--purple-color);
}
@keyframes inicio {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes inicio2 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes inicio3 {
  0%{
    margin-left: -100%;
  }
  100%{
    margin-left: 0;
  }
}
@keyframes vph1 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes vph2 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes vph3 {
  0%{
    margin-right: -100%;
  }
  100%{
    margin-right: 0;
  }
}
@keyframes vph4 {
  0%{
    margin-left: -100%;
  }
  100%{
    margin-left: 0;
  }
}
@keyframes cancermama {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes cancermama2 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes cancermamaimagen {
  0%{
    margin-right: -100%;
  }
  100%{
    margin-right: 0;
  }
}
@keyframes tiposcancermama {
  0%{
    margin-left: -100%;
  }
  100%{
    margin-left: 0%;
  }
}
@keyframes diagnosticocancer {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes manejocancer {
  0%{
    margin-left: -100%;
  }
  100%{
    margin-left: 0%;
  }
}
@keyframes otrotitulo {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes otrosimagenes {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes endometrio {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes vulva {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes cancervagina {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes obstetriciatitulo {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes atencionginecologica {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@media screen and (max-width: 340px){
  .container{
    margin-inline: 1rem;
  }
  .nav_link{
    padding-inline: 1rem;
  }
}
@media screen and (min-width: 1118px){
  .container{
    margin-inline: auto;
    gap: 2rem;
  }
  .nav{
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
  }
  .nav_toggle{
    display: none;
  }
  .nav_list{
    height: 100%;
    display: flex;
    column-gap: 1.5rem;
  }
  .nav_link{
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
  }
  .nav_link:hover{
    background-color: transparent;
    color: var(--purple-color);
  }
  .inicio{
    display: flex;
    flex-direction: row;
    padding: 3rem;
    gap: 1rem;
    justify-content: center;
  }
  .inicio .foto{
    display: flex;
    width: 1200px;
    justify-content: center;
  }
  .inicio .foto img{
    width: 100%;
    margin: 0;
    border-radius: 20px;
    border: none;
    box-shadow: 0 1rem 3rem var(--pink-color-strong);
  }
  .inicio .nosotros{
    justify-content: center;
    border-radius: 20px;
    border: none;
    max-width: 900px;
    box-shadow: 0 1rem 3rem var(--pink-color-strong);
  }
  .somos{
    display: flex;
    flex-wrap: wrap;
  }
  .somos-imagen{
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  .container-somos{
    display: flex;
    flex-wrap: wrap;
  }
  .historia img{
    width: 70%;
    max-width: 80%;
  }
  .obstetricia .imagenes-detalles .tarjetas-obstetricia{
    max-width: 250px;
  }
  .tarjetas-obstetricia .imagen .descripcion{
    width: 1200px;
  }
  .tarjetas-obstetricia .imagen .diagnostico{
    left: -300px;
  }
  .tarjetas-obstetricia .imagen .ultrasonografia{
    left: -650px;
  }
  .tarjetas-obstetricia .imagen .pruebas{
    left: -950px;
  }
  .tarjetas-obstetricia .imagen .atencion{
    left: -200px;
  }
  .tarjetas-obstetricia .imagen .cesareas{
    left: -450px;
    top: -100px;
  }
  .tarjetas-obstetricia .imagen .metodos{
    left: -800px;
    top: -200px;
  }
  .atencion-container .descripcion-atencion .tarjeta{
    max-width: 250px;
  }
  .descripcion-atencion .tarjeta .imagen .descripcion-tarjeta{
    width: 1200px; 
  }
  .descripcion-atencion .tarjeta .imagen .biopsia{
    left: -300px;
  }
  .descripcion-atencion .tarjeta .imagen .histeroscopia{
    left: -650px;
  }
  .descripcion-atencion .tarjeta .imagen .legrado{
    left: -950px;
  }
  .descripcion-atencion .tarjeta .imagen .histerectomia-abdominal{
    width: 1200px;
    top: -100px;
  }
  .descripcion-atencion .tarjeta .imagen .histerectomia{
    left: -300px;
    top: -30px;
  }
  .descripcion-atencion .tarjeta .imagen .rejuvenecimiento{
    left: -650px;
    top: -100px;
  }
  .descripcion-atencion .tarjeta .imagen .manejo{
    left: -950px;
    top: -100px;
  }
  .formulario{
    width: 50%;
    justify-content: center;
    align-items: center;
  }
}