/* =========================================================
   OPPORTUNITY DEVELOPMENT & EXPANSION SUPPORT
   ---------------------------------------------------------
   Esta sección no tiene encabezado superior.
   El nombre funciona como SUBTÍTULO.
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.expansion-block{
  padding:100px 0 105px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.expansion-inner{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  padding-left:60px;
  padding-right:60px;
}


/* =========================================================
   SUBTÍTULO
   OPPORTUNITY DEVELOPMENT & EXPANSION SUPPORT
   ========================================================= */

.expansion-title{
  max-width:1000px;

  margin:0 0 30px;

  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  line-height:1.3;
  font-weight:500;

  letter-spacing:-0.2px;

  color:#0b2239;
}


/* =========================================================
   INTRO
   ========================================================= */

.expansion-intro{
  max-width:900px;

  margin:0 0 30px;

  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.75;

  color:#3a4b5c;
}


/* =========================================================
   LISTADO
   ========================================================= */

.expansion-list{
  width:100%;
  max-width:1040px;

  margin:0;
  padding:0;

  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));

  column-gap:72px;
  row-gap:0;

  list-style:none;
}


.expansion-list li{
  display:flex;
  align-items:center;

  gap:18px;

  min-height:74px;

  border-bottom:1px solid rgba(11,34,57,.11);

  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.5;

  color:#0b2239;
}


/* =========================================================
   MARCADOR
   ========================================================= */

.expansion-marker{
  position:relative;

  width:22px;
  height:1px;

  flex:0 0 22px;

  background:#7b9ab6;
}


.expansion-marker::after{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#7b9ab6;

  transform:translateY(-50%);
}


/* =========================================================
   CIERRE
   ========================================================= */

.expansion-closing{
  max-width:760px;

  margin:48px 0 0;

  font-family:'Cormorant Garamond', serif;
  font-size:27px;
  line-height:1.35;
  font-weight:500;

  color:#0b2239;
}


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

@media (min-width:1600px){

  .expansion-inner{
    max-width:1180px;
  }

}


/* =========================================================
   TABLET LANDSCAPE
   <= 1024px
   ========================================================= */

@media (max-width:1024px){

  .expansion-block{
    padding:80px 0 85px;
  }


  .expansion-inner{
    max-width:900px;
  }


  .expansion-title{
    font-size:28px;
    line-height:1.3;
  }


  .expansion-list{
    column-gap:42px;
  }

}


/* =========================================================
   TABLET
   <= 900px
   ========================================================= */

@media (max-width:900px){

  .expansion-inner{
    max-width:650px;

    padding-left:30px;
    padding-right:30px;
  }


  .expansion-title{
    max-width:620px;

    margin-bottom:26px;

    font-size:27px;
    line-height:1.3;
  }


  .expansion-intro{
    margin-bottom:28px;
  }


  .expansion-list{
    grid-template-columns:1fr;
  }


  .expansion-list li{
    min-height:66px;
  }


  .expansion-closing{
    margin-top:38px;

    font-size:25px;
  }

}


/* =========================================================
   MOBILE
   <= 600px
   ========================================================= */

@media (max-width:600px){

  .expansion-block{
    padding:65px 0 70px;
  }


  .expansion-inner{
    width:100%;
    max-width:none;

    padding-left:20px;
    padding-right:20px;
  }


  .expansion-title{
    max-width:100%;

    margin-bottom:24px;

    font-size:24px;
    line-height:1.3;

    letter-spacing:-0.15px;
  }


  .expansion-intro{
    margin-bottom:24px;

    font-size:15px;
  }


  .expansion-list{
    width:100%;
    max-width:none;
  }


  .expansion-list li{
    min-height:62px;

    gap:14px;

    font-size:14px;
  }


  .expansion-marker{
    width:18px;
    flex-basis:18px;
  }


  .expansion-closing{
    margin-top:34px;

    font-size:23px;
    line-height:1.4;
  }

}