/**** Section Hero ****/
.hero {
  width: 100vw;
  height: fit-content;
  display: flex;
  align-items: flex-end;
  background-image: url("../../img/hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container-hero {
  max-width: 1040px;
  width: 90%;
  margin: 0 auto;
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.text-hero-button {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.text-hero h2,
.text-hero p {
  color: var(--on-background);
  text-shadow: 10px 2px 10px rgba(0, 0, 0, 0.5);
}

.text-hero-button {
  flex: 1 0 330px;
}

.coach-hero {
  flex: 1 0 305px;
  max-width: 370px;
  /* height: 100%; */
  /* display: flex; */
  /* object-fit: cover; */
  /* align-self: flex-end; */
}

.coach-hero picture,
.coach-hero img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

/**** Section Acerca de Nosotros ****/
.nosotros-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.nosotros-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  gap: 16px;
}

.nosotros-text-parafo {
  column-count: 2;
}

.nosotros-tarjetas-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
  /* align-self: stretch; */
  gap: 16px;
}

.nosotros-tarjeta {
  flex: 0 0 290px;
  display: flex;
  padding: 30px 24px;
  /* min-width: 290px;
  max-width: 290px; */
  justify-content: center;
  align-items: center;
  /* align-self: stretch; */
  gap: 8px;
  border-radius: 12px;
  background: var(--overlay-background, #02102a);
}

.nosotros-tarjeta p {
  color: var(--accent-color);
}

/**** Section Ofrecemos ****/
.ofrecemos-container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0 100px;
  align-items: center;
  /* justify-content: space-between; */
  gap: 36px;
}

.ofrecemos-vector-vertical {
  /* Dimensiones fijas para el contenedor del SVG */
  width: 100px; /* Ajusta este valor */
  height: 500px; /* Ajusta este valor */
  /* Opcional: Centra la imagen dentro del contenedor si es más pequeña */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ofrecemos-vector-vertical img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mantiene la proporción */
}

.ofrecemos-vector-horizontal {
  display: none;
}

.ofrecemos-items-container {
  flex-grow: 1;
  display: flex;
  /* width: 100%; */
  flex-direction: column;
  gap: 24px;
}

.item-container {
  display: flex;
  align-items: center;
  min-width: 300px;
  max-width: 490px;
  align-self: flex-end;
  gap: 24px;
}

.item-container {
  background-image: linear-gradient(
    to right,
    #010610 44%,
    #73814a 78%,
    #3a442d 100%
  );
  /* Hacer que el fondo se repita solo horizontalmente (como una línea) */
  background-repeat: repeat-x;
  /* Posicionar el fondo en la parte inferior del elemento */
  background-position: bottom;
  /* Ajustar el tamaño del "borde" (fondo) a 1px de alto y 100% del ancho */
  background-size: 100% 1px;
  /* Asegurar que el fondo no se sobreponga al contenido */
  background-origin: border-box;
  /* Opcional: padding-box o content-box dependiendo de dónde quieras el borde visualmente */
}

.ofrecemos-items-container > div:first-child,
.ofrecemos-items-container > div:nth-child(3) {
  align-self: flex-start;
}

.ofrecemos-items-container > div:nth-child(4) {
  background-image: none;
}

.item-vector {
  width: 64px;
}

.item-texts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/**** Section Testimonios ****/
.floating-wrapper-testimonios {
  margin-top: -80px; /* Ajusta según el solapamiento deseado */
  margin-bottom: -80px; /* Opcional, si quieres que la siguiente esté más cerca */
}

/**** Section Agendar ****/
.agendar-container {
  padding: 150px 0 50px;
}

.agendar-container-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.agendar-text {
  display: inline-flex;
  flex-direction: column;
}

.agendar-container-inner > a {
  min-width: 200px;
}

/* **********************media queries****************** */
/* ===== MOBILE / TABLET (≤ 706 px) ===== */
@media (max-width: 795px) {
  .agendar-text h2,
  .agendar-text p {
    text-align: center;
  }
}

@media (max-width: 706px) {
  .container-hero {
    justify-content: center;
  }

  .coach-hero {
    flex: 1 0 280px;
    /* max-width: 265px; */
  }

  .nosotros-text-parafo {
    column-count: 1;
    text-align: center;
  }

  .ofrecemos-container {
    justify-content: center;
  }
  .ofrecemos-vector-vertical {
    display: none;
  }
  .ofrecemos-vector-horizontal {
    display: flex;
    min-width: 300px;
    align-items: center;
    justify-content: center;
  }
  .ofrecemos-vector-horizontal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 530px) {
  .hero {
    /* height: calc(100vh - 40px); */
    background-image: url("../../img/hero-movil.jpg");
    scroll-behavior: smooth;
  }
  .container-hero {
    justify-content: flex-end;
    /* align-content: space-between; */
  }
  .coach-hero {
    margin-top: -50px;
    max-width: 265px;
  }
}