/* VARIABLES > COLORES BASE
	======================================================================================================================
	Definición de la paleta de colores base para el proyecto                                                            */

:root {
  --font-base-size: 15px;
  --dark-pink: #f570a9;
  --medium-pink: #efafbd;
  --light-pink: #fbe3f9;
  --dark-orange: #ea5721;
  --light-orange: #f18930;
  --light-beige: #f4eede;
  --red-pink: #c53a63;
  --purple: #926886;
  --color-primary: #f6b589;
  --color-primary-light: #f6b589;
  --color-secondary: #aeaf9e;
  --color-dark-gray: #444444;
  --color-black: #000000;
  --color-white: #ffffff;
  --container-width: 85rem;
  --turquesa: #87d3c2;
}

/*
========================================================================================================================
BASE
========================================================================================================================
Definimos los elementos HTML comunes y los elementos estructurales de la página                                       */

/* ---------------------------------------------------- */
/* 1. POOPINS REGULAR (400) */
/* ---------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  src: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/fonts/Poppins-Regular.ttf")
    format("truetype");
}

/* ---------------------------------------------------- */
/* 2. POOPINS SEMIBOLD (600) */
/* ---------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  src: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/fonts/Poppins-SemiBold.ttf")
    format("truetype");
}

/* ---------------------------------------------------- */
/* 3. POOPINS BOLD (700) */
/* ---------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  font-style: normal;
  src: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/fonts/Poppins-Bold.ttf")
    format("truetype");
}

/* ---------------------------------------------------- */
/* 3. Momo Trust Display (400) */
/* ---------------------------------------------------- */
@font-face {
  font-family: "Momo Trust Display";
  font-weight: 400;
  font-style: normal;
  src: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/fonts/MomoTrustDisplay-Regular.ttf")
    format("truetype");
}

html {
  scroll-behavior: smooth;
}

html,
body {
  font-size: var(--font-base-size);
  font-family: "Lato", sans-serif;
}

h1 {
  font-size: 8rem;
  line-height: 1.1;
  font-family: Lato;
  font-weight: 900;
  margin-bottom: 0;
  color: #565756;
  font-family: "Momo Trust Display", sans-serif;
}
h2 {
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 800;
  color: #565756;
}
h3 {
  font-size: 2rem;
  line-height: 1.1;
}
p {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #515151;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

li {
  font-family: "Poppins", sans-serif;
}

.black {
  font-weight: 700;
}

/* RESPONSIVE TIPOGRAFÍAS!!! */
@media (min-width: 800px) and (max-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 1025px) {
  h1 {
    font-size: 3.6rem;
  }
  h2 {
    font-size: 3rem;
  }
  h3 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 769px) {
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.3rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  p {
    font-size: var(--15px);
    line-height: 1.3;
    padding-left: var(--10px);
    padding-right: var(--10px);
    margin-bottom: 0;
    color: #515151;
  }

  li {
    font-size: var(--15px);
    line-height: 1.3;
  }
}

.c-white {
  color: #ffffff;
}
.c-dark-pink {
  color: #f570a9;
}
.c-medium-pink {
  color: #e4a8cc;
}
.c-light-pink {
  color: #fbe3f9;
}
.c-dark-orange {
  color: #ea5721;
}
.c-light-orange {
  color: #f18930;
}
.c-light-beige {
  color: #f4eede;
}

.bg-dark-pink {
  background: #f570a9;
}
.bg-medium-pink {
  background: #e4a8cc;
}
.bg-light-pink {
  background: #fbe3f9;
}
.bg-dark-orange {
  background: #ea5721;
}
.bg-light-orange {
  background: #f18930;
}
.bg-light-beige {
  background: #f4eede;
}

.d-none {
  display: none;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.img-fit {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.container {
  max-width: var(--container-width) !important;
}

@media (min-width: 1921px) {
  /* .container {
    max-width: 110rem !important;
  } */
}

a.button {
  text-decoration: none;
}

@media (max-width: 768px) {
  .d-none {
    display: block;
  }

  .d-none-xs {
    display: none;
  }
}

/*
========================================================================================================================
SECCIONES
========================================================================================================================
Definimos las clases que se van a servir en todo el contenido principal de la landing (MOBILE FIRST)                  */

#landing {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

hr.blue-hr {
  box-sizing: content-box;
  height: 0;
  border: 0;
  width: var(--20px);
  border-bottom: 3px solid var(--turquesa);
  margin-top: var(--12px);
  margin-bottom: var(--12px);
}

hr.pink-hr {
  box-sizing: content-box;
  height: 0;
  border: 0;
  width: var(--20px);
  border-bottom: 3px solid #fdb2ab;
  margin-top: var(--12px);
  margin-bottom: var(--12px);
}

.p-10 {
  padding-top: var(--10px);
}

.p-0 {
  padding: 0;
}

@media (min-width: 769px) {
  hr.blue-hr {
    width: var(--30px);
    border-bottom: var(--4px) solid var(--turquesa);
  }

  hr.pink-hr {
    width: var(--30px);
    border-bottom: var(--4px) solid #fdb2ab;
  }
}

/*
========================================================================================================================
HEADER LOGO
========================================================================================================================
*/

header {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_logo_xs.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

header img {
  width: 200px;
  height: auto;
  padding: var(--30px) 0 var(--10px) 0;
}

@media (min-width: 769px) {
  header {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_logo.png");
  }

  header img {
    width: 350px;
    padding: var(--20px) 0 var(--20px) 0;
  }
}

/*
========================================================================================================================
HERO - ENDOMETRIOSIS
========================================================================================================================
*/

.hero-h1 {
  margin-top: var(--12px);
}

.silueta {
  display: grid;
  grid-template-rows: repeat(2, auto);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border: var(--3px) solid #515151;
  border-radius: var(--25px);
  background-color: #e8e8e8;
}

.silueta img {
  width: 70%;
  justify-self: center;
}

.silueta picture {
  text-align: center;
}

.silueta .sintomas {
  padding: var(--30px) var(--20px) var(--40px) var(--20px);
  border-top: var(--3px) solid #515151;
}

.silueta .sintomas h3 {
  font-size: 1.1rem;
  line-height: 1.2;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.silueta .sintomas .lista-blanca {
  list-style: none;
  padding-top: var(--15px);
  padding-left: 0;
}

.silueta .sintomas .lista-blanca li {
  font-weight: 400;
}

.silueta .sintomas .lista-blanca li {
  position: relative;
  padding-left: var(--20px);
  margin-bottom: var(--10px);
  font-size: var(--14px);
}

.silueta .sintomas .lista-blanca li::before {
  content: "•";
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  font-size: 1em;
}

@media (min-width: 769px) {
  .hero-h1 {
    margin-bottom: var(--40px);
  }

  #hero h2 {
    font-size: var(--30px);
  }

  .silueta {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1.8fr;
    gap: var(--50px);
  }

  .silueta img {
    width: 100%;
    height: auto;
    justify-self: start;
    object-fit: contain;
  }

  .silueta .sintomas {
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--60px);
  }

  .silueta .sintomas h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: var(--40px);
  }

  .silueta .sintomas .lista-blanca li {
    position: relative;
    margin-bottom: var(--15px);
    font-size: var(--22px);
    padding-left: var(--30px);
  }

  .silueta .sintomas .lista-blanca li::before {
    top: -8px;
    font-size: 1.5em;
  }
}

/*
========================================================================================================================
OTROS SÍNTOMAS
========================================================================================================================
*/

.wrapper-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.wrapper-tarjetas .tarjeta-turquesa {
  padding: var(--30px) var(--20px);
  border: 3px solid var(--turquesa);
  border-radius: var(--25px);
}

.wrapper-tarjetas .tarjeta-turquesa:first-child {
  margin-top: 1rem;
}

.wrapper-tarjetas .tarjeta-turquesa .title-tarjeta {
  border-bottom: var(--3px) solid var(--turquesa);
}

.wrapper-tarjetas .tarjeta-turquesa .title-tarjeta p {
  font-size: var(--16px);
  margin-bottom: var(--18px);
}

.wrapper-tarjetas .tarjeta-turquesa ul {
  padding-left: var(--20px);
  margin-top: var(--18px);
}

.wrapper-tarjetas .tarjeta-turquesa ul li {
  margin-bottom: var(--10px);
}

@media (min-width: 769px) {
  #otros-sintomas h2 {
    font-size: var(--30px);
  }

  .wrapper-tarjetas {
    padding-top: var(--20px);
    flex-direction: row;
    gap: 1.5rem;
    margin-bottom: var(--40px);
  }

  .wrapper-tarjetas > div {
    width: 100%;
    flex: 1;
  }

  .wrapper-tarjetas .tarjeta-turquesa:first-child {
    margin-top: 0rem;
  }

  .wrapper-tarjetas .tarjeta-turquesa {
    padding: var(--40px);
  }

  .wrapper-tarjetas .tarjeta-turquesa .title-tarjeta p {
    font-size: var(--22px);
    margin-bottom: var(--18px);
  }
}

/*
========================================================================================================================
CORCHETES
========================================================================================================================
*/
#corchetes {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/corchetes_separados_xs.png");
  background-repeat: no-repeat;
  background-size: 90% 80%;
  background-position: center;
  position: relative;
  display: inline-block;
  padding: var(--40px) var(--60px);
}

#corchetes h2 {
  font-size: var(--20px);
  padding: var(--50px) var(--1px);
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 70%;
}

#corchetes img {
  width: 100%;
}

@media (min-width: 769px) {
  #corchetes {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/corchetes_separados.png");
    width: 70%;
    background-size: unset;
  }

  #corchetes img {
    width: 50%;
  }

  #corchetes h2 {
    font-size: var(--40px);
    width: 90%;
  }
}

@media (min-width: 1400px) {
  #corchetes h2 {
    font-size: var(--40px);
    width: 70%;
  }

  #corchetes {
    width: 90%;
  }
}

/*
========================================================================================================================
FORMULARIO
========================================================================================================================
*/
#landing-form-container {
  padding: var(--space) calc(var(--space) * 2);
  overflow: hidden;
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_formulario.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 120dvh;
}

.container-form {
  background: transparent;
}

.container-form h2 {
  font-weight: 400;
  color: #936886;
}

.reservar-plaza {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: #515151;
}

.reservar {
  font-weight: 400;
  font-size: var(--22px);
  letter-spacing: 3px;
  padding-top: 25px;
  padding-bottom: var(--10px);
}

.form-group input,
.form-group select {
  border-radius: 10px;
  width: 450px;
}

#landing input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-right: 5px !important;
  width: 16px;
  height: 16px;
  border: 1px solid #515151;
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

#landing input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #515151;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#landing-form form {
  margin-top: 0;
}

#landing .small-legal {
  width: 400px;
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #515151;
}

#landing-form input[type="text"],
#landing-form input[type="email"] {
  width: 400px !important;
  padding: 20px !important;
  padding-left: 15px !important;
  margin-bottom: 5px;
  border: 2px solid #fff !important;
  border-radius: 10px;
  font-family: Lato;
  font-size: 16px;
  letter-spacing: 0.1rem;
  color: #515151;
}

#landing-form input[type="text"]:focus,
#landing-form input[type="email"]:focus,
#landing-form select:focus {
  outline: none;
}

::placeholder {
  font-family: Lato;
  letter-spacing: 0.1rem;
  color: #515151;
}

#landing-form span.error {
  color: red;
  display: block;
  margin-top: -10px;
  margin-bottom: 15px;
}

#boton-formulario {
  background-color: white;
  color: black;
  font-size: var(--25px);
  font-weight: 400;
  border-radius: var(--10px);
  letter-spacing: 2px;
  padding: var(--10px) var(--30px);
  margin-top: var(--10px);
}

/* #privacy-policy {
  position: relative;
  top: 20px;
  left: 0;
} */

#politica-privacidad {
  margin-top: -90px;
}

.cond_legal {
  margin-top: var(--40px);
}

#align-center {
  align-content: center;
}

#landing-form > div {
  padding-top: 0;
}

#privacy-policy p {
  margin-top: 0px;
  font-size: var(--16px);
  font-weight: 400;
  color: #515151;
}

#privacy-policy p a {
  font-weight: 700;
  color: #515151;
}

.recaptcha-wrapper {
  transform: scale(1);
  transform-origin: 0 0;
}

@media (max-width: 768px) {
  #landing-form-container {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_formulario_fans_xs.png");
    padding: var(--30px);
    min-height: 90dvh;
  }

  .container-form {
    margin-top: -50px;
  }

  .container-form h2 {
    margin-top: 50px;
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 0;
  }

  .reservar-plaza {
    margin-top: var(--60px);
    margin-bottom: var(--30px);
    font-size: var(--25px);
  }

  .small-legal {
    font-size: 2.5vw !important;
    width: 100% !important;
    max-width: 100%;
    word-wrap: break-word;
    padding-left: 10px;
  }

  .reservar {
    padding-top: 0;
    padding-bottom: var(--10px);
  }

  #privacy-policy p {
    font-size: 0.8rem !important;
  }

  #boton-formulario {
    margin-bottom: 20rem;
  }

  #landing-form {
    padding: 10px;
  }

  #landing-form input[type="text"],
  #landing-form input[type="email"] {
    height: 50px !important;
    margin-bottom: 5px;
    font-size: 14px;
  }

  #landing-form select {
    height: 50px !important;
    width: 100%;
    font-size: 14px;
    margin-bottom: 5px;
    padding: 10px !important;
  }

  #landing .small-legal {
    font-size: 14px;
    line-height: 1.4;
  }

  #landing-form > div {
    padding: 0 !important;
  }

  #boton-formulario {
    font-size: var(--18px);
  }

  .recaptcha-wrapper {
    transform: scale(0.95);
  }
}

#privacy-policy p {
  margin-top: 10px;
  font-weight: 400;
  color: #515151;
}

#privacy-policy p a {
  font-weight: 700;
  color: #515151;
}

.white-btn {
  width: 180px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  cursor: pointer;
  background-color: white;
  color: black;
  padding: 12px;
  border-radius: 10px;
}

.black-btn {
  width: 180px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0px;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 12px;
  border-radius: 10px;
}

.black-btn2 {
  display: block;
  margin: 0 auto;
  max-width: 250px !important;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  text-align: center;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 12px;
  border-radius: 10px;
}

@media (min-width: 1921px) {
  #landing-form-container {
    min-height: 90dvh;
    background-size: 80%;
  }
}

/*
========================================================================================================================
TITLE NÚMEROS
========================================================================================================================
*/

#title-numeros.container {
  padding: 0;
}

#title-numeros p {
  padding-top: var(--15px);
}

@media (min-width: 769px) {
  #title-numeros h2 {
    font-size: var(--30px);
  }
}

/*
========================================================================================================================
TARJETAS NUMERADAS
========================================================================================================================
*/
#tarjetas-numeradas {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_abstracto1_xs.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: var(--50px);
}

#tarjetas-numeradas .wrapper-tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--20px);
}

#tarjetas-numeradas .wrapper-tarjetas div {
  width: 100%;
  min-height: 150px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--20px);
  background-color: white;
  border: 3px solid var(--turquesa);
  border-radius: var(--25px);
  padding: var(--20px);
}

#tarjetas-numeradas .wrapper-tarjetas div span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  font-size: var(--38px);
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  border-radius: 50%;
  background-color: #ffb3ab;
  color: #494949;
}

#tarjetas-numeradas .wrapper-tarjetas div p {
  padding: 0;
}

@media (min-width: 769px) {
  #tarjetas-numeradas {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_abstracto1.png");
    background-size: contain;
    padding-top: var(--10px);
  }

  #tarjetas-numeradas .wrapper-tarjetas {
    display: grid;
    grid-template-areas:
      "uno tres"
      "dos cuatro";
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--50px);
    row-gap: var(--20px);
  }

  #tarjetas-numeradas .wrapper-tarjetas div:nth-child(1) {
    grid-area: uno;
  }

  #tarjetas-numeradas .wrapper-tarjetas div:nth-child(2) {
    grid-area: dos;
  }

  #tarjetas-numeradas .wrapper-tarjetas div:nth-child(3) {
    grid-area: tres;
  }

  #tarjetas-numeradas .wrapper-tarjetas div:nth-child(4) {
    grid-area: cuatro;
  }

  #tarjetas-numeradas .wrapper-tarjetas div p {
    margin-bottom: 0;
  }

  #tarjetas-numeradas .wrapper-tarjetas div span {
    width: 65px;
    height: 65px;
    font-size: var(--45px);
  }
}

/*
========================================================================================================================
IMAGEN CLÍNICA
========================================================================================================================
*/

#imagen-clinica img {
  margin-bottom: var(--30px);
}

#imagen-clinica .container p {
  margin-top: var(--20px);
}

@media (min-width: 769px) {
  #imagen-clinica img {
    margin-bottom: var(--80px);
  }

  #imagen-clinica h2 {
    font-size: var(--30px);
  }
}

/*
========================================================================================================================
CORCHETES2
========================================================================================================================
*/
#corchetes2 {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/corchetes_separados_xs.png");
  background-repeat: no-repeat;
  background-size: 90% 70%;
  background-position: center;
  position: relative;
  display: inline-block;
  padding: var(--40px) 0px;
}

#corchetes2 h2 {
  font-size: var(--20px);
  padding: var(--50px) var(--1px);
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 70%;
}

#corchetes2 img {
  width: 80%;
}

@media (min-width: 769px) {
  #corchetes2 {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/corchetes_separados.png");
    width: 70%;
    background-size: unset;
  }

  #corchetes2 img {
    width: 50%;
  }

  #corchetes2 h2 {
    font-size: var(--30px);
    width: 90%;
  }
}

@media (min-width: 1921px) {
  #corchetes2 {
    width: 90%;
  }

  #corchetes2 h2 {
    font-size: var(--40px);
    width: 70%;
  }
}

/*
========================================================================================================================
DOCTORES
========================================================================================================================
*/
#doctores {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_doctores_xs.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 40dvh;
}

#doctores .wrapper-doctores {
  display: flex;
  flex-direction: column;
  gap: var(--20px);
  padding: var(--30px) 0;
}

#doctores .wrapper-doctores .imagenes-doctores {
  display: flex;
  flex-direction: column;
  gap: var(--20px);
}

#doctores .wrapper-doctores .contenido-doctores {
  background-color: white;
  border-radius: var(--25px);
  padding: var(--40px) var(--30px);
}

#doctores .wrapper-doctores .contenido-doctores p {
  padding: 0;
  margin-top: var(--20px);
  text-align: center;
}

@media (min-width: 769px) {
  #doctores {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_doctores.jpg");
  }
  #doctores .wrapper-doctores {
    padding: var(--50px) 0 var(--50px) 0;
  }
  #doctores .wrapper-doctores .imagenes-doctores {
    display: flex;
    flex-direction: row;
    gap: var(--20px);
  }

  #doctores .wrapper-doctores .contenido-doctores h2 {
    font-size: var(--30px);
  }
}

/*
========================================================================================================================
TARJETAS NUMERADAS2
========================================================================================================================
*/
#tarjetas-numeradas2 {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_abstracto2_xs.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#tarjetas-numeradas2 .wrapper-tarjetas2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--20px);
  margin-bottom: var(--20px);
}

#tarjetas-numeradas2 .wrapper-tarjetas2 div {
  width: 100%;
  min-height: 150px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--20px);
  background-color: white;
  border: 3px solid var(--turquesa);
  border-radius: var(--25px);
  padding: var(--20px);
}

#tarjetas-numeradas2 .wrapper-tarjetas2 div span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  font-size: var(--38px);
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  border-radius: 50%;
  background-color: #ffb3ab;
  color: #494949;
}

#tarjetas-numeradas2 .wrapper-tarjetas2 div p {
  padding: 0;
}

#tarjetas-numeradas2 .wrapper-tarjetas2 div p strong {
  display: inline-block;
  margin-bottom: var(--10px);
}

#tarjetas-numeradas2 #not-bold {
  font-weight: 400;
}

@media (min-width: 769px) {
  #tarjetas-numeradas2 {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_abstracto2.png");
    background-size: contain;
    padding-top: var(--10px);
    padding-bottom: var(--40px);
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 {
    display: grid;
    grid-template-areas:
      "uno tres"
      "dos cuatro";
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--50px);
    row-gap: var(--20px);
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div {
    min-height: 200px;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div:nth-child(1) {
    grid-area: uno;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div:nth-child(2) {
    grid-area: dos;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div:nth-child(3) {
    grid-area: tres;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div:nth-child(4) {
    grid-area: cuatro;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div p {
    margin-bottom: 0;
  }

  #tarjetas-numeradas2 .wrapper-tarjetas2 div span {
    width: 65px;
    height: 65px;
    font-size: var(--45px);
  }
}

/*
========================================================================================================================
ENFOQUE-BENEFICIOS
========================================================================================================================
*/
#enfoque-beneficios {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_doctores_xs.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#enfoque-beneficios .wrapper-enfoque-beneficios {
  display: flex;
  flex-direction: column;
  gap: var(--20px);
  padding: var(--50px) 0;
}

#enfoque-beneficios .wrapper-enfoque-beneficios .wrapper-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--20px);
}

#enfoque-beneficios .wrapper-enfoque-beneficios .contenido-enfoque-beneficios {
  background-color: white;
  border-radius: var(--25px);
  padding: var(--40px) var(--30px);
}

#enfoque-beneficios
  .wrapper-enfoque-beneficios
  .contenido-enfoque-beneficios
  p {
  padding: 0;
  margin-top: var(--20px);
  font-size: 0.9rem;
}

#enfoque-beneficios
  .wrapper-enfoque-beneficios
  .contenido-enfoque-beneficios
  h2 {
  font-size: 1.2rem;
}

@media (min-width: 769px) {
  #enfoque-beneficios {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_doctores.jpg");
  }
  #enfoque-beneficios .wrapper-enfoque-beneficios {
    gap: var(--25px);
  }

  #enfoque-beneficios .wrapper-enfoque-beneficios .wrapper-contenido {
    flex-direction: row;
    gap: var(--20px);
  }

  #enfoque-beneficios .wrapper-enfoque-beneficios .wrapper-contenido > div {
    flex: 1;
  }

  #enfoque-beneficios
    .wrapper-enfoque-beneficios
    .contenido-enfoque-beneficios
    h2 {
    font-size: 1.8rem;
  }

  #enfoque-beneficios
    .wrapper-enfoque-beneficios
    .contenido-enfoque-beneficios
    p {
    padding: 0;
    margin-top: var(--20px);
    font-size: 1.1rem;
  }
}

/*
========================================================================================================================
PREGUNTAS-FRECUENTES
========================================================================================================================
*/

#preguntas-frecuentes .contenedor-faqs {
  gap: var(--20px);
}

#preguntas-frecuentes .contenedor-faqs .faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--15px);
}

#preguntas-frecuentes .contenedor-faqs .caja-respuesta {
  display: none;
}

#preguntas-frecuentes .contenedor-faqs .caja-respuesta.active {
  display: block;
}

#preguntas-frecuentes .contenedor-faqs .caja-pregunta {
  cursor: pointer;
}

#preguntas-frecuentes .contenedor-faqs {
  display: flex;
  flex-direction: column;
  padding-top: var(--20px);
}

#preguntas-frecuentes .contenedor-faqs .caja-pregunta {
  width: 100%;
  padding: var(--14px);
  border-radius: 0 var(--20px) var(--20px) var(--20px);
  background-color: #fcdedb;
  position: relative;
}

#preguntas-frecuentes .contenedor-faqs .caja-pregunta::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0px;
  width: 20px;
  height: 20px;
  background-color: #fcdedb;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#preguntas-frecuentes .contenedor-faqs .caja-pregunta p {
  font-size: var(--16px);
  font-weight: 600;
  margin-bottom: 0;
  font-style: oblique;
}

#preguntas-frecuentes .contenedor-faqs .caja-respuesta {
  width: 100%;
  padding: var(--20px);
  border-radius: var(--20px) 0 var(--20px) var(--20px);
  background-color: #bce9e0;
  position: relative;
}

#preguntas-frecuentes .contenedor-faqs .caja-respuesta::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #bce9e0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#preguntas-frecuentes .contenedor-faqs .caja-respuesta p {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  #preguntas-frecuentes.container {
    max-width: none;
    width: var(--container-width) !important;
  }

  #preguntas-frecuentes h2 {
    font-size: var(--30px);
  }

  #preguntas-frecuentes .contenedor-faqs {
    margin-left: auto;
    margin-right: auto;
  }

  #preguntas-frecuentes .contenedor-faqs .caja-pregunta {
    width: fit-content;
    max-width: 80%;
  }

  #preguntas-frecuentes .contenedor-faqs .caja-respuesta {
    width: fit-content;
    max-width: 85%;
    margin-left: auto;
  }

  #preguntas-frecuentes .contenedor-faqs .caja-pregunta p {
    font-size: var(--19px);
    font-weight: 600;
    margin-bottom: 0;
    font-style: oblique;
  }

  #preguntas-frecuentes .contenedor-faqs .caja-respuesta p {
    font-size: var(--18px);
    margin-bottom: 0;
  }
}

/*
========================================================================================================================
SOSPECHAS-ENDOMETRIOSIS
========================================================================================================================
*/

#sospechas-endometriosis .container {
  padding-left: calc(var(--space) * 1.5);
  padding-right: calc(var(--space) * 1.5);
}

#sospechas-endometriosis {
  background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_banner_footer_xs.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: var(--30px) 0;
}

#sospechas-endometriosis hr.blue-hr {
  border-color: white;
}

#sospechas-endometriosis div.text-center {
  margin-top: var(--40px);
}
#sospechas-endometriosis div.text-center p {
  margin-top: var(--30px);
}

#sospechas-endometriosis div.text-center #boton-formulario {
  background-color: #080806;
  color: white;
  font-size: var(--16px);
  text-decoration: none;
}

@media (min-width: 769px) {
  #sospechas-endometriosis {
    background-image: url("https://www.fansofhealth.com/ka/apps/fansofhealth_assets/landings/fans_of_health/fondo_banner_footer.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: var(--30px) 0;
  }

  #sospechas-endometriosis h2 {
    font-size: var(--30px);
  }
}

/* --- 7. FOOTER --- */
.footer {
  background-color: var(--color-white);
  text-align: center;
}

.social-links a {
  margin: 0 10px;
  display: inline-block;
}

.social-links img {
  width: 40px; /* Adjust size for social icons */
  height: 40px;
}

.bar-end {
  display: block;
  width: 100%;
  height: 80px;
  background-color: var(--color-dark-gray) !important;
  margin-top: 30px;
}

.bar-end p {
  color: white;
  text-align: left;
  padding-top: 20px;
  padding-left: 30px;
  font-size: 15px;
}

.bar-end a {
  color: white;
  text-decoration: none;
}

/* VERSIÓN MÓVIL */
@media (max-width: 1200px) {
  .content-grid {
    max-width: 23rem !important;
  }

  .small-disclaimer {
    font-size: 0.8rem;
    line-height: 20px;
  }

  #privacy-policy {
    position: relative;
    top: 20px;
    left: 0;
  }

  #privacy-policy p {
    font-size: 0.65rem !important;
  }

  .small-legal {
    font-size: 2.2vw !important;
  }

  #boton-formulario {
    margin-bottom: 2rem;
  }

  .br-none-xs {
    display: none;
  }
}