@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');


:root {
  --nos-fuente: 'Outfit', sans-serif;
  --nos-fondo: #FFFFFF;
  --nos-crema: #FAF8F6;
  --nos-marino: #101B2D;

  --nos-texto: #4A5263;
  --nos-rosa: #E2549E;

  --nos-rosa-suave: #F9DDEB;

  --nos-celeste: #1AB0F8;

  --nos-linea: #E8E4E0;
}

.nos-pagina,
.nos-pagina * {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.nos-pagina {
  background: var(--nos-fondo);
  color: var(--nos-marino);
  font-family: var(--nos-fuente);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased
}

.nos-contenedor {
  width: min(1160px, 100% - 40px);
  margin-inline: auto
}


.nos-sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nos-marino);
  background: var(--nos-fondo);
  border: 1px solid var(--nos-linea);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -12px rgba(16, 27, 45, .25)
}

.nos-sobretitulo::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nos-rosa);
  box-shadow: 0 0 0 3px var(--nos-rosa-suave)
}


.nos-titulo {
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--nos-marino)
}

.nos-titulo em,
.nos-portada__titulo em,
.nos-cierre__titulo em {
  font-style: normal;
  color: var(--nos-rosa);
  background: linear-gradient(transparent 72%, var(--nos-rosa-suave) 72%, var(--nos-rosa-suave) 92%, transparent 92%)
}

.nos-parrafo {
  font-size: 17px;
  color: var(--nos-texto);
  max-width: 560px
}

.nos-parrafo+.nos-parrafo {
  margin-top: 20px
}

.nos-parrafo strong {
  font-weight: 600;
  color: var(--nos-marino)
}

.nos-numero {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--nos-celeste);
  color: var(--nos-celeste);
  font-weight: 700;
  font-size: 15px;
  font-style: normal
}

.nos-portada {
  padding: 110px 0 90px;
  background: var(--nos-crema)
}

.nos-portada .nos-sobretitulo {
  margin-bottom: 30px
}

.nos-portada__titulo {
  font-weight: 700;
  font-size: clamp(44px, 6.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  max-width: 980px
}

.nos-portada__pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
  align-items: end
}

.nos-portada__pie .nos-parrafo {
  font-size: 18.5px
}

.nos-portada__datos {
  display: flex;
  justify-content: flex-end;
  gap: 16px
}

.nos-dato {
  background: var(--nos-fondo);
  border: 1px solid var(--nos-linea);
  border-radius: 22px;
  padding: 18px 24px;
  min-width: 160px
}

.nos-dato strong {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.5px
}

.nos-dato span {
  font-size: 14px;
  color: var(--nos-texto)
}

/* ---------- 2. Quiénes somos ---------- */
.nos-bloque {
  padding: 110px 0;
  border-bottom: 1px solid var(--nos-linea)
}

.nos-bloque__rejilla {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px
}

.nos-bloque__cabecera .nos-sobretitulo {
  margin-bottom: 24px
}

.nos-catalogo {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--nos-linea)
}

.nos-catalogo__etiqueta {
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nos-texto);
  margin-bottom: 14px;
  font-weight: 600
}

.nos-catalogo__lista {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -.5px;
  color: var(--nos-marino);
  overflow-wrap: anywhere
}

.nos-catalogo__lista span {
  color: var(--nos-celeste);
  margin: 0 10px
}

/* ---------- 3. Propósito ---------- */
.nos-proposito {
  padding: 120px 0;
  text-align: center;
  background: var(--nos-crema)
}

.nos-proposito .nos-sobretitulo {
  margin-bottom: 36px
}

.nos-cita {
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  letter-spacing: -1px;
  max-width: 920px;
  margin: 0 auto;
  color: var(--nos-marino)
}

.nos-cita b {
  font-weight: 700;
  color: var(--nos-rosa);
  background: linear-gradient(transparent 72%, var(--nos-rosa-suave) 72%, var(--nos-rosa-suave) 92%, transparent 92%)
}

.nos-proposito .nos-parrafo {
  margin: 36px auto 0;
  max-width: 680px
}


.nos-rumbo {
  padding: 110px 0;
  border-bottom: 1px solid var(--nos-linea)
}

.nos-rumbo__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

.nos-rumbo__item {
  padding: 8px 56px 8px 0
}

.nos-rumbo__item+.nos-rumbo__item {
  padding: 8px 0 8px 56px;
  border-left: 1px solid var(--nos-linea)
}

.nos-rumbo__item .nos-numero {
  margin-bottom: 22px
}

.nos-rumbo__item .nos-titulo {
  margin-bottom: 20px
}

/* ---------- 5. Valores ---------- */
.nos-valores {
  padding: 110px 0
}

.nos-valores__cabecera {
  margin-bottom: 56px
}

.nos-valores__cabecera .nos-sobretitulo {
  margin-bottom: 22px
}

.nos-valores__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--nos-marino)
}

.nos-valor {
  padding: 36px 28px 8px 0
}

.nos-valor+.nos-valor {
  padding-left: 28px;
  border-left: 1px solid var(--nos-linea)
}

.nos-valor .nos-numero {
  width: auto;
  height: auto;
  border: none;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--nos-rosa)
}

.nos-valor__titulo {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.8px;
  margin: 12px 0
}

.nos-valor__texto {
  font-size: 15.5px;
  color: var(--nos-texto)
}


.nos-cierre {
  background: var(--nos-marino);
  color: #FFFFFF;
  padding: 110px 0;
  text-align: center
}

.nos-cierre .nos-sobretitulo {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: #FFFFFF;
  margin-bottom: 30px;
  box-shadow: none
}

.nos-cierre__titulo {
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  max-width: 860px;
  margin: 0 auto 40px
}

.nos-cierre__titulo em {
  background: linear-gradient(transparent 72%, rgba(226, 84, 158, .35) 72%, rgba(226, 84, 158, .35) 92%, transparent 92%)
}

.nos-cierre__acciones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

.nos-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nos-fuente);
  font-size: 16px;
  font-weight: 600;
  color: var(--nos-marino);
  background: #FFFFFF;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1.5px solid #FFFFFF;
  transition: transform .2s, background .2s, color .2s
}

.nos-boton:hover {
  transform: translateY(-2px)
}

.nos-boton--contorno {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55)
}

.nos-boton--contorno:hover {
  background: #FFFFFF;
  color: var(--nos-marino)
}

/* ---------- Responsive ---------- */
@media (max-width:960px) {
  .nos-portada {
    padding: 80px 0 64px
  }

  .nos-portada__pie,
  .nos-bloque__rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px
  }

  .nos-portada__datos {
    justify-content: flex-start
  }

  .nos-rumbo__rejilla {
    grid-template-columns: minmax(0, 1fr)
  }

  .nos-rumbo__item,
  .nos-rumbo__item+.nos-rumbo__item {
    padding: 0;
    border-left: none
  }

  .nos-rumbo__item+.nos-rumbo__item {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--nos-linea)
  }

  .nos-valores__rejilla {
    grid-template-columns: 1fr 1fr
  }

  .nos-valor:nth-child(3) {
    padding-left: 0;
    border-left: none
  }

  .nos-valor:nth-child(n+3) {
    border-top: 1px solid var(--nos-linea);
    margin-top: 28px
  }
}

@media (max-width:560px) {

  .nos-bloque,
  .nos-proposito,
  .nos-rumbo,
  .nos-valores,
  .nos-cierre {
    padding: 72px 0
  }

  .nos-portada__titulo {
    letter-spacing: -1.5px
  }

  .nos-portada__datos {
    flex-wrap: wrap
  }

  .nos-dato {
    min-width: 0;
    flex: 1
  }

  .nos-valores__rejilla {
    grid-template-columns: 1fr
  }

  .nos-valor,
  .nos-valor+.nos-valor {
    padding: 28px 0 8px;
    border-left: none;
    margin-top: 0
  }

  .nos-valor+.nos-valor {
    border-top: 1px solid var(--nos-linea)
  }

  .nos-catalogo__lista {
    font-size: 19px
  }
}