:root {
  --bg: #efefef;
  --ink: #171717;
  --blue-900: #03266f;
  --blue-500: #2b82b7;
  --blue-200: #b8d7eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #d7d7d7;
  color: var(--ink);
  font-family: "Roboto Condensed", sans-serif;
}

.site {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  background: var(--bg);
}

.slide {
  min-height: 768px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8;
}

.brand {
  font-family: "Oswald", sans-serif;
  font-size: 52px;
  letter-spacing: 0.04em;
  color: #6faed0;
  margin: 0;
}

.cover {
  display: grid;
  grid-template-columns: 52% 48%;
}

.split { z-index: 2; }

.split--left {
  padding: 42px 58px;
}

.split--right { padding: 0; }

.split--right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover--inicio h1 {
  margin: 120px 0 26px;
  font-family: "Oswald", sans-serif;
  font-size: 78px;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.lead {
  margin: 0;
  font-family: "Merriweather", serif;
  font-size: 19px;
  line-height: 1.65;
}

.site-link {
  margin: 132px 0 0;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.x-shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(70deg, transparent 44%, var(--blue-900) 44% 53%, transparent 53%),
    linear-gradient(-70deg, transparent 46%, var(--blue-200) 46% 56%, transparent 56%);
}

.three-points,
.base {
  display: grid;
  grid-template-columns: 49% 17% 34%;
}

.left-panel {
  padding: 42px 56px;
}

.left-panel h2,
.text-side h2,
.servicio h2,
.compromiso h2,
.cover--cierre h2 {
  margin: 120px 0 18px;
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 58px;
  line-height: 1.05;
}

.left-panel h2::after,
.text-side h2::after,
.servicio h2::after,
.base .left-panel h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 18px;
  background: #13457e;
}

.left-panel p,
.text-side p,
.servicio p,
.right-panel p,
.compromiso p,
.cards p {
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
}

.center-ribbon {
  background: var(--blue-900);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 74%, 38% 66%, 0 55%, 38% 44%, 0 33%);
}

.right-panel {
  padding: 70px 30px 35px;
}

.right-panel article {
  margin-bottom: 42px;
  overflow: hidden;
}

.right-panel img {
  float: left;
  width: 126px;
  height: 126px;
  margin: 0 18px 14px 0;
  object-fit: cover;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.right-panel h3,
.text-side h3,
.cards h3 {
  margin: 0 0 8px;
  font-family: "Oswald", sans-serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.right-panel p,
.text-side p { font-size: 18px; }

.respaldo {
  display: grid;
  grid-template-columns: 67% 33%;
}

.respaldo-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-images {
  padding: 58px 58px 16px;
  display: grid;
  grid-template-columns: 1.1fr 0.95fr;
  gap: 14px;
}

.grid-images img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.grid-images img:first-child { grid-column: 1; height: 220px; }
.grid-images img:nth-child(2) { grid-column: 2; margin-top: 102px; }
.grid-images img:nth-child(3) { grid-column: 2; }
.grid-images img:nth-child(4) { grid-column: 2; }

.respaldo-caption {
  padding: 0 58px 42px;
}

.respaldo-caption h2 {
  margin: 0;
  font-family: "Merriweather", serif;
  font-size: 64px;
}

.respaldo-caption h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 14px;
  background: #13457e;
}

.respaldo-caption .brand {
  margin-top: 16px;
}

.text-side {
  padding: 78px 34px 40px 10px;
}

.text-side h3 { font-size: 20px; }

.text-side article { margin-bottom: 24px; }

.servicio .bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 54%;
  height: 100%;
  object-fit: cover;
}

.servicio .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, var(--bg) 0 61%, rgba(255, 255, 255, 0.2) 61%);
  z-index: 1;
}

.servicio .content {
  position: relative;
  z-index: 2;
  width: 70%;
  padding: 42px 58px;
}

.servicio h2 { margin-top: 48px; }

.cards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cards article {
  background: rgba(255, 255, 255, 0.7);
  min-height: 230px;
  padding: 26px;
}

.cards h3 { font-size: 44px; }

.cards p { font-size: 19px; }

.base .left-panel p strong { font-weight: 700; }

.compromiso {
  display: grid;
  grid-template-columns: 41% 59%;
}

.compromiso .left-panel {
  padding: 42px 58px;
}

.compromiso .right-panel {
  position: relative;
  padding: 0;
}

.compromiso .right-panel > img {
  width: 58%;
  height: 100%;
  object-fit: cover;
}

.compromiso ul {
  position: absolute;
  right: 20px;
  top: 86px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 53%;
}

.compromiso li {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 14px 16px 14px 56px;
  position: relative;
}

.compromiso li i {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d57d2e;
  color: #fff;
  font-style: normal;
  display: grid;
  place-items: center;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  box-shadow: 0 0 0 5px rgba(213, 125, 46, 0.25);
}

.compromiso span {
  display: block;
  font-size: 19px;
}

.compromiso strong {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  font-family: "Oswald", sans-serif;
}

.cover--cierre h2 {
  margin-top: 118px;
  color: #084879;
  font-size: 70px;
}

.cover--cierre h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 16px;
  background: #13457e;
}

.cover--cierre h3 {
  margin: 0;
  font-family: "Merriweather", serif;
  font-size: 48px;
  line-height: 1.08;
}

.cover--cierre .site-link { margin-top: 120px; }

@media (max-width: 900px) {
  .slide { min-height: auto; }
  .cover,
  .three-points,
  .base,
  .respaldo,
  .compromiso { display: block; }
  .x-shape,
  .center-ribbon,
  .servicio .overlay { display: none; }
  .split--left,
  .left-panel,
  .servicio .content,
  .compromiso .left-panel,
  .text-side,
  .right-panel { padding: 22px; width: 100%; }
  .brand { font-size: 42px; }
  .cover--inicio h1,
  .left-panel h2,
  .servicio h2,
  .compromiso h2,
  .cover--cierre h2 { font-size: 52px; margin-top: 24px; }
  .cover--cierre h3,
  .right-panel h3,
  .cards h3 { font-size: 33px; }
  .left-panel p,
  .servicio p,
  .compromiso p,
  .cards p,
  .right-panel p,
  .text-side p { font-size: 20px; }
  .site-link { margin-top: 40px; }
  .servicio .bg,
  .compromiso .right-panel > img { position: static; width: 100%; height: auto; }
  .compromiso ul { position: static; width: 100%; padding: 14px; }
  .cards { grid-template-columns: 1fr; }
  .grid-images { padding: 22px; grid-template-columns: 1fr; }
  .grid-images img,
  .grid-images img:first-child,
  .grid-images img:nth-child(2) { height: auto; margin: 0; grid-column: auto; }
  .respaldo-caption { padding: 0 22px 22px; }
  .text-side h2 { margin-top: 18px; }
  .compromiso li { padding-left: 54px; }
  .compromiso li i { left: 8px; width: 34px; height: 34px; font-size: 14px; }
}