/* About us (DESKTOP - ABOUT US - COMPANY, 484:4506) y Our team (DESKTOP - ABOUT US -
   OUR TEAM, 484:4946), medidas de Figma a 1440 px. Hero, tiles y certificaciones
   estan en sections.css. */

/* Check en circulo: linea de tiempo y numeros. */
.cw-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 37px; height: 37px;
  border-radius: 50%;
  background: var(--cw-navy);
  color: var(--cw-beige);
}
.cw-check .cw-icon { width: 16px; height: 11px; }

/* Las secciones con foto a sangre de un lado alinean el texto con el contenedor. */
.cw-story,
.cw-facts,
.cw-ateam { --cw-edge: max(var(--cw-margin), calc((100% - var(--cw-container)) / 2)); }

/* ----------------------------------------------------------------- story */

.cw-story {
  display: grid;
  grid-template-columns: calc(50% + 12px) 1fr;
  column-gap: 103px;
  align-items: start;
  padding: 44px 0 41px;
  background-color: #f4f4f3;
}
.cw-story__media { border-radius: 0 var(--cw-radius-card) var(--cw-radius-card) 0; overflow: hidden; line-height: 0; }
.cw-story__media img { width: 100%; height: 592px; object-fit: cover; }
.cw-story__body { max-width: 476px; padding: 30px var(--cw-edge) 0 0; box-sizing: content-box; }
.cw-story .cw-heading { margin-top: 22px !important; }
.cw-timeline { margin-top: 40px !important; }
.cw-timeline__item { position: relative; display: grid; grid-template-columns: 68px 1fr; align-items: start; }
.cw-timeline__item + .cw-timeline__item { margin-top: 30px; }
/* La linea que une los checks, por detras. */
.cw-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px; top: 40px; bottom: -27px;
  width: 1px;
  background: rgb(113 134 154 / 0.5);
}
.cw-timeline__text { max-width: 408px; padding-top: 6px; font-size: 0.875rem; line-height: 20px; font-weight: 300; color: var(--cw-navy); }
.cw-timeline__text strong { display: block; font-size: 1rem; line-height: 24px; font-weight: 900; text-transform: uppercase; color: var(--cw-cement); }

/* ------------------------------------------------------------ difference */

.cw-difference {
  position: relative;
  isolation: isolate;
  padding: 51px 0 59px;
  background: var(--cw-cement);
  color: var(--cw-beige);
  text-align: center;
}
/* La foto y el velo ocupan los primeros 504 px: las tiles quedan mitad sobre
   la foto y mitad sobre el CEMENTO. (En Figma el velo media 420 y dejaba una
   franja de foto sin oscurecer debajo.) */
.cw-difference__media { position: absolute; inset: 0 0 auto; z-index: -2; height: 504px; line-height: 0; }
.cw-difference__media img { width: 100%; height: 100%; object-fit: cover; }
.cw-difference::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 504px; background: rgb(24 33 42 / 0.5); }
.cw-difference__title { max-width: 501px; margin: 22px auto 0 !important; }
.cw-difference__text { max-width: 470px; margin: 12px auto 0 !important; font-size: 1rem; line-height: 1.25; }
/* En Figma el texto termina con un renglon vacio: las tiles quedan 20 px mas abajo. */
.cw-difference__tiles { display: flex; justify-content: center; gap: 40px; margin-top: 63px !important; text-align: left; }
.cw-difference__cta { margin-top: 44px !important; }

/* ------------------------------------------------------------- numeros */

.cw-facts {
  display: grid;
  grid-template-columns: 543px 1fr;
  column-gap: 69px;
  align-items: start;
  padding: 42px 0 45px var(--cw-edge);
}
.cw-facts__row {
  display: grid;
  grid-template-columns: 58px 228px 1fr;
  align-items: start;
  height: 116.75px;
  padding: 40px 0 0 20px;
  border-top: 1px solid rgb(113 134 154 / 0.25);
}
.cw-facts__row:last-child { border-bottom: 1px solid rgb(113 134 154 / 0.25); }
.cw-facts__value {
  margin-top: -6px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.5rem;
  line-height: 46px;
  font-weight: 700;
  color: var(--cw-cement);
}
.cw-facts__label { margin: -1px 0 0; font-size: 1rem; line-height: 19.4px; color: var(--cw-bordo); }
.cw-facts__media { border-radius: var(--cw-radius-card) 0 0 var(--cw-radius-card); overflow: hidden; line-height: 0; }
.cw-facts__media img { width: 100%; height: 471px; object-fit: cover; }

/* ------------------------------------------------------------ believe */

.cw-believe { padding: 57px 0 63px; background-color: #011a2e; color: var(--cw-beige); text-align: center; }
.cw-believe__title { max-width: 421px; margin: 13px auto 0 !important; }
.cw-believe__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 384px));
  justify-content: center;
  gap: 20px 22px;
  margin-top: 31px !important;
  text-align: left;
}
.cw-believe__item {
  display: flex;
  gap: 24px;
  min-height: 110px;
  padding: 27px 20px 20px 26px;
  border-radius: 14.9px;
  box-shadow: inset 0 0 0 1px rgb(229 228 226 / 0.2);
}
.cw-believe__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 45px; height: 45px;
  border-radius: 6.4px;
  background: rgb(229 228 226 / 0.3);
  color: rgb(229 228 226 / 0.6);
}
.cw-believe__icon .cw-icon { width: 29px; height: 24px; }
.cw-believe__name { margin-top: -5px !important; font-size: 0.875rem; line-height: 20px; font-weight: 900; text-transform: uppercase; color: var(--cw-cement); }
.cw-believe__text { max-width: 256px; margin-top: 7px !important; font-size: 0.875rem; line-height: 17px; font-weight: 300; }

/* Certificaciones es el pattern de la home. Alli la tapan 31 px de la seccion
   anterior; aca va entera (708). */
.cw-believe + .cw-certs { padding-top: 48px; }

/* ------------------------------------------------- about: acceso al equipo */

.cw-ateam {
  display: grid;
  grid-template-columns: 1fr calc(50% + 45px);
  column-gap: 29px;
  align-items: start;
  padding: 34px 0;
}
.cw-ateam__body { padding: 38px 0 0 var(--cw-edge); }
.cw-ateam .cw-heading { margin-top: 22px !important; }
.cw-ateam .cw-text { max-width: 525px; margin-top: 17px !important; }
.cw-ateam .cw-text strong { font-weight: 700; }
.cw-ateam .cw-btn { margin-top: 47px; }
.cw-ateam__media { border-radius: var(--cw-radius-card) 0 0 var(--cw-radius-card); overflow: hidden; line-height: 0; }
.cw-ateam__media img { width: 100%; height: 378px; object-fit: cover; }

/* ------------------------------------------------------- our team: grilla */

.cw-members { padding: 48px 0 31px; }
.cw-members__title { max-width: 337px; margin-top: 22px !important; }
.cw-members__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 26.67px; margin-top: 31px !important; }
.cw-member {
  position: relative;
  isolation: isolate;
  aspect-ratio: 280 / 340;
  border-radius: var(--cw-radius-card);
  overflow: hidden;
  background: var(--cw-navy);
  color: #fff;
  text-align: center;
}
.cw-member img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s ease; }
/* En el diseno las fotos van en blanco y negro; al pasar el mouse toman color. */
.cw-member:hover img { filter: none; }
/* En Figma el velo es AZUL OSCURO del 10 al 30% segun la foto. Se usa uno solo,
   un poco mas denso abajo para que el nombre se lea sobre cualquier foto. */
.cw-member::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(24 33 42 / 0.12) 55%, rgb(24 33 42 / 0.5)); }
.cw-member--no-photo { background: linear-gradient(180deg, var(--cw-silver), var(--cw-cement)); }
.cw-member__name,
.cw-member__role { position: absolute; left: 12px; right: 12px; }
.cw-member__name { bottom: 49px; font-size: 1rem; line-height: 18px; font-weight: 900; }
.cw-member__role { bottom: 29px; font-size: 0.875rem; line-height: 16px; font-weight: 300; }

/* --------------------------------------------------- our team: en accion */

.cw-action { padding: 47px 0 33px; background: #ededed; text-align: center; }
.cw-action__title { max-width: 501px; margin: 22px auto 0 !important; }
.cw-action__text { max-width: 411px; margin: 16px auto 0 !important; }
.cw-action .cw-mosaic { margin-top: 34px; text-align: left; }
.cw-action__cta { margin-top: 41px !important; }

/* ------------------------------------------- tablets y mobile (sin diseno) */

@media (max-width: 1199px) {
  .cw-story { grid-template-columns: 1fr; row-gap: 40px; }
  .cw-story__media { margin-right: var(--cw-margin); }
  .cw-story__media img { height: auto; aspect-ratio: 732 / 592; }
  .cw-story__body { max-width: none; padding: 0 var(--cw-margin); }
  .cw-facts { grid-template-columns: 1fr; row-gap: 40px; padding-right: 0; }
  .cw-facts__list { margin-right: var(--cw-margin); }
  .cw-facts__media img { height: auto; aspect-ratio: 735 / 471; }
  .cw-ateam { grid-template-columns: 1fr; row-gap: 40px; }
  .cw-ateam__body { padding: 0 var(--cw-margin); }
  .cw-ateam__media { margin-left: var(--cw-margin); }
  .cw-ateam__media img { height: auto; aspect-ratio: 792 / 378; }
  .cw-members__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 781px) {
  .cw-difference__tiles { flex-wrap: wrap; gap: 12px; }
  .cw-facts__row { grid-template-columns: 50px 1fr 1fr; height: auto; padding: 24px 0 24px 0; }
  .cw-facts__value { font-size: 2rem; line-height: 38px; }
  .cw-believe__grid { grid-template-columns: 1fr; }
  .cw-members__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cw-member__name { bottom: 40px; font-size: 0.875rem; }
  .cw-member__role { bottom: 20px; font-size: 0.75rem; }
}

/* Mobile: el texto de "Our difference" baja de los 504 px del velo de desktop;
   el velo cubre toda la seccion para que se lea sobre la foto. */
@media (max-width: 781px) {
  .cw-difference::before { height: auto; inset: 0; background: rgb(24 33 42 / 0.6); }
}