:root{
  --t-blue:#2e5e8c;
  --t-bg:#eef3f7;
  --t-text:#555;
  --t-title:"Cardo", serif;
  --t-font:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.trat1-page{ width:100%; overflow-x:hidden; }

/* HERO */
.trat1-hero{
  position:relative;
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  top: 47px;
}
.trat1-hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.trat1-hero__overlay{
  position:absolute; inset:0;
  background: rgba(46,94,140,.35);
}
.trat1-hero__inner{ position:relative; z-index:1; }
.trat1-hero__title{
  margin:0;
  font-family:var(--t-title);
  font-weight:700;
  font-size:64px;
  color:#fff;
  text-align:center;
}

/* CONTENIDO */
.trat1-content{
  background: var(--t-bg);
  padding: 90px 20px 110px;
}
.trat1-wrap{
  max-width: 980px;
  margin: 0 auto;
  text-align:justify;
}
.trat1-title{
  margin: 0 0 44px;
  font-family: var(--t-title);
  font-weight:400;
  font-size:64px;
  color: var(--t-blue);
}
.trat1-text{
  margin: 0 auto 56px;
  max-width: 880px;
  font-family: var(--t-font);
  font-weight:300;
  font-size:34px;
  line-height:1.55;
  color: var(--t-text);
}

/* BOTÓN */
.trat1-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 70px;
  border-radius: 999px;
  border: 1px solid var(--t-blue);
  color: var(--t-blue);
  text-decoration:none;
  font-family: var(--t-font);
  font-weight:400;
  font-size:16px;
  background: transparent;
  transition: .15s ease;
  margin-left: 35%;
}
.trat1-btn:hover{
  background: rgba(46,94,140,.08);
}

/* =========================
   MOBILE (<=700px)
   Container max 700 + tamaños móviles
   ========================= */
@media (max-width: 700px){

  .trat1-hero{
    top: 0;
    height: 268px;
  }

  .trat1-hero__title{
    font-size: 36px;
    padding: 0 16px;
  }

  .trat1-content{
    padding: 28px 16px 44px;
  }

  .trat1-wrap{
    max-width: 700px;
    text-align: left;
  }

  .trat1-title{
    font-size: 34px;
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .trat1-text{
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: none;
  }

  .trat1-btn{
    margin-left: 0;
    width: 100%;
    height: 44px;
    padding: 0 18px;
  }
}