/* =================================
   EXPERIENCIA INTERNACIONAL
================================= */

.section-experienciaInternacional {
  padding: 4rem 1.4rem;
  scroll-margin-top: 60px;
}


/* =================================
   CONTENEDOR PRINCIPAL
================================= */

.container-experienciaInternacional {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =================================
   TEXTOS
================================= */

.container-texto-experienciaInternacional {
  width: 100%;
}

.section-experienciaInternacional h5 {
  margin-bottom: 1rem;

  color: var(--color7);

  font-size: var(--fs-h4);
  text-align: center;
}

.section-experienciaInternacional h1 {
  color: var(--color4);

  margin: 1.5rem 0;

  text-align: center;
}

/* Permite que en mobile el título se acomode
   según el ancho disponible */

.section-experienciaInternacional h1 span {
  display: inline;
}

.section-experienciaInternacional p {
  font-size: var(--fs-body);
  color: var(--color7);

  line-height: 1.6;
  text-align: center;
}


/* =================================
   DESTACADOS
================================= */

.destacados-experienciaInternacional {
  width: fit-content;
  max-width: 100%;

  margin: 1.5rem auto;
  padding: 0.55rem 0.8rem;

  background-color: #eeeeee;
  color: var(--color7);

  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.2;

  text-align: center;
}

/* Puntos rojos */

.destacados-experienciaInternacional i {
  color: var(--color4);
  font-style: normal;
}


/* =================================
   DESCRIPCIÓN
================================= */

.descripcion-experienciaInternacional {
  margin-top: 1.5rem;
}


/* =================================
   IMÁGENES
================================= */

.container-img-experienciaInternacional {
  width: 100%;

  margin: 2.5rem 0 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.container-img-experienciaInternacional img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;
  object-fit: cover;

  border-radius: 8px;
}


/* =================================
   BOTÓN
================================= */

.button-experienciaInternacional {
  width: 100%;

  text-align: center;
}

.btn-experienciaInternacional {
  display: inline-block;

  margin-top: 2rem;
  padding: 0.9em 2em;

  background-color: var(--color4);
  color: var(--color3);

  font-size: var(--fs-button);
  font-weight: bold;

  border-radius: 8px;

  text-decoration: none;
}

.btn-experienciaInternacional:hover {
  background-color: var(--color6);
}


/* =================================
   TABLET
================================= */

@media (min-width: 768px) {

  .container-texto-experienciaInternacional {
    max-width: 650px;
  }

  .container-img-experienciaInternacional {
    max-width: 650px;

    margin: 3rem auto 0;
  }

  /* Desde tablet forzamos las dos líneas
     definidas en el HTML */

  .section-experienciaInternacional h1 span {
    display: block;
  }
}


/* =================================
   DESKTOP
================================= */

@media (min-width: 1024px) {

  .section-experienciaInternacional {
    padding: 5rem 2rem;
  }

  .container-experienciaInternacional {
    flex-direction: row;

    align-items: center;
    justify-content: space-between;

    gap: 4rem;
  }


  /* ---------- COLUMNA TEXTO ---------- */

  .container-texto-experienciaInternacional {
    width: 48%;
    max-width: 520px;
  }

  .section-experienciaInternacional h5,
  .section-experienciaInternacional h1,
  .section-experienciaInternacional p {
    text-align: left;
  }


  /* ---------- DESTACADOS ---------- */

  .destacados-experienciaInternacional {
    margin: 1.5rem 0;
  }


  /* ---------- IMÁGENES ---------- */

  .container-img-experienciaInternacional {
    width: 46%;
    max-width: none;

    margin: 0;
  }

  .container-img-experienciaInternacional img {
    width: 100%;

    aspect-ratio: 16 / 9;
  }


  /* ---------- BOTÓN ---------- */

  .button-experienciaInternacional {
    text-align: left;
  }
}