@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap"); /* fuente de las cartas */

/* ================= SECCIÓN NOSOTROS (seccion 4) ================= */

#sec4 .circle-bg {
  position: absolute;                                /* Se coloca detrás del contenido */
  top: 50%; left: 50%;                               /* Lo posicionamos en el centro */
  width: 88vw; height: 76vh;
  max-width: 100%; max-height: 100%;
  background: #7ED957;
  border-radius: 30%;
  transform: translate(-50%, -50%);                  /* empieza escondido */
  z-index: 0;                                        /* Debajo del contenido */
}

#sec4 .nosotros__contenido {
  position: relative;                                /* Para permitir z-index */
  z-index: 2;                                        /* encima del círculo */
  margin: 0 auto;
  text-align: center;
  color: #fff;
  max-width: 75%;
  max-height: 80%;
  padding: 5%;
  box-sizing: border-box;                            /* Incluye el padding dentro del tamaño */

  display: flex;                                     /* Centra verticalmente el texto interno */
  flex-direction: column;                            /* Elementos en columna */
  justify-content: center;
  align-items: center;

  overflow: hidden;                                  /* Evita desbordes del texto en el circulo */
}

#sec4 .nosotros__contenido h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);             /* Tamaño flexible según pantalla. Minimo 1.5, maximo 2.5, preferiblemente 5 */
  margin-bottom: 1rem;
  line-height: 1.2;
}

#sec4 .nosotros__contenido p {
  font-size: clamp(0.9rem, 3.5vw, 1.2rem);
  line-height: 1.5;
  margin: 0 auto 1.5rem auto;
  max-width: 70ch;                                   /* Limita el ancho a 70 caracteres */
}

.btn-next {
  position: absolute;                                /* Lo fija en la esquina inferior-derecha (gracias a bottom y right) */
  bottom: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 999px;                              /* Crea un círculo perfecto independientemente del tamaño */
  border: 2px solid currentColor;                    /* Hace que el borde use el mismo color del texto */
  color: #fff;
  display: inline-flex;                              /* Centra perfectamente el símbolo “↓” */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  z-index: 3;                                        /* Arriba del contenido (2) y del círculo (0) */
}

.btn-next:hover { 
  background: #fff; 
  color: #000; 
  transform: translateY(-3px);                       /* Lo levanta al hacer hover */
}

/* En tactil */
@media (pointer: coarse) {
  #sec4 .circle-bg {
    /* valores "visual fallback" para cuando JS no corre inmediatamente */
    width: 92vw;
    height: 86vh;
  }
}

#sec4 .btn-sec4 {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  z-index: 3;                                        /* encima del círculo */
  position: relative;
  transition: background 0.3s, transform 0.2s;

  will-change: transform;                            /* will-change + translateZ(0): Activa GPU → evita glitch en hover */
  transform: translateZ(0);
}

#sec4 .btn-sec4:hover {
  background: rgba(255, 255, 255, 0.25);           /* Cambia a fondo semitransparente */
  transform: translateY(-2px);
}

@media (max-width: 1024px){
  #sec4 .nosotros__contenido h1 {
    font-size: clamp(2.7rem, 4.7vw, 4.3rem);
    margin-bottom: 25px;
  }

  #sec4 .nosotros__contenido p {
    font-size: clamp(1rem, 3vw, 2.5rem);
    line-height: 1.5;
    text-align: justify;
  }
  #sec4 .btn-sec4 {
    padding: 0.5rem 1rem;
    font-size: clamp(1rem, 3vw, 2.5rem);
    }
}

@media (max-width: 740px) {
  #sec4 .nosotros__contenido {
    max-width: 85%;
    max-height: 75%;
    padding: 1rem;
  }
  #sec4 .nosotros__contenido h1 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin-bottom: 25px;
  }
}

@media (max-width: 400px) {
  #sec4 .nosotros__contenido {
    max-height: 70%;
  }

  #sec4 .nosotros__contenido h1 {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
  }

  #sec4 .nosotros__contenido p {
    font-size: clamp(0.9rem, 2.9vw, 2.4rem);
  }
  #sec4 .btn-sec4 {
    padding: 0.5rem 1rem;
    font-size: clamp(0.9rem, 2.9vw, 2.4rem);
    }
}

@media (max-width: 375px) {
  #sec4 .nosotros__contenido {
    max-height: 70%;
  }

  #sec4 .nosotros__contenido h1 {
    font-size: clamp(1.2rem, 3.2vw, 2.7rem);
  }

  #sec4 .nosotros__contenido p {
    font-size: clamp(0.8rem, 2.8vw, 2.3rem);
  }
  #sec4 .btn-sec4 {
    padding: 0.5rem 1rem;
    font-size: clamp(0.8rem, 2.8vw, 2.3rem);
    }
}

@media (max-width: 344px) {
  #sec4 .nosotros__contenido h1 {
    font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  }

  #sec4 .nosotros__contenido p {
    font-size: clamp(0.9rem, 2.9vw, 2.4rem);
  }
  #sec4 .btn-sec4 {
    padding: 0.5rem 1rem;
    font-size: clamp(0.9rem, 2.9vw, 2.4rem);
    }
}