/* Contact (DESKTOP - CONTACT, 490:7168), medidas de Figma a 1440 px. El
   formulario y los datos de contacto son los de base.css. */

/* ------------------------------------------------- start here + formulario */

/* Primer bloque de la pagina (fila del 26/10): la foto arranca arriba de todo,
   por detras del header, y el formulario queda 44 px debajo de la barra. */
.cw-cstart {
  position: relative;
  isolation: isolate;
  color: var(--cw-beige);
  background: var(--cw-navy);
  overflow: hidden;
}
.cw-cstart__media,
.cw-cstart__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cw-cstart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(24 33 42 / 0.8); }
.cw-cstart__inner {
  display: grid;
  grid-template-columns: 1fr 486px;
  gap: 24px;
  min-height: 754px;
  padding: calc(var(--cw-header-h) + 44px) 102px 60px 0;
}
.cw-cstart__intro { align-self: end; }
.cw-cstart__title { margin-top: 22px !important; }
.cw-cstart__text { max-width: 306px; margin-top: 12px !important; font-size: 1rem; line-height: 1.25; font-weight: 300; color: var(--cw-mist); }

/* Sobre la foto oscura el boton Send va en AZUL OSCURO, no en CEMENTO. */
.cw-form--dark .cw-btn--ghost { color: var(--cw-navy); box-shadow: inset 0 0 0 0.5px var(--cw-navy); }
.cw-form--dark .cw-btn--ghost:hover { background: rgb(24 33 42 / 0.08); }

/* --------------------------------------------------- need help right now? */

/* Textura + velo CEMENTO. Figma dice 52%; se usa el 25% que igualo el render en
   la banda "Questions?" de la home, que es la misma textura con el mismo velo. */
.cw-help {
  position: relative;
  isolation: isolate;
  background-color: #768ea0;
  color: var(--cw-beige);
}
.cw-help::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(113 134 154 / 0.25); }
.cw-help__inner {
  display: grid;
  grid-template-columns: 306px 382px 1fr;
  align-items: center;
  min-height: 159px;
}
.cw-help__title { font-size: var(--cw-fs-band); line-height: 1.125; font-weight: 900; }
.cw-help__lead { font-size: var(--cw-fs-lead); line-height: 20px; font-weight: 300; }
.cw-help__lead strong { font-weight: 700; }
.cw-help__text { margin-top: 8px !important; font-size: 1rem; line-height: 1.25; font-weight: 300; }
.cw-help .cw-btn { justify-self: end; }

/* ------------------------------------------------- one team, ready to help */

.cw-contact--reach { padding: 52px 0 55px; }
.cw-contact--reach .cw-contact__inner { width: min(100% - 2 * var(--cw-margin), 792px); grid-template-columns: 511px 1fr; gap: 0; }
.cw-contact--reach .cw-contact__intro .cw-text { max-width: 308px; }
.cw-contact--reach .cw-contact__info { gap: 22px; margin-top: 0 !important; }
.cw-contact--reach .cw-social { margin-top: 37px; }

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

@media (max-width: 1199px) {
  .cw-cstart__inner { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: calc(var(--cw-header-h) + 48px) 0 64px; }
  .cw-cstart__intro { align-self: start; margin-bottom: 0; }
  .cw-cstart .cw-form { max-width: 520px; }
  .cw-help__inner { grid-template-columns: 1fr; gap: 16px; justify-items: start; padding-block: 40px; }
  .cw-help .cw-btn { justify-self: start; margin-top: 8px; }
  .cw-contact--reach .cw-contact__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 781px) {
  .cw-help .cw-btn { white-space: normal; height: auto; min-height: 40px; padding-block: 10px; }
}

/* Mobile: la banda se alarga y la textura estirada queda mas clara; el velo
   sube para que el texto beige se lea. */
@media (max-width: 781px) {
  .cw-help::before { background: rgb(24 33 42 / 0.55); }
}