.contacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--hueco);
  container-type: inline-size;
  --sangria: max(var(--lado), calc((100cqw - var(--contenedor)) / 2));
}

.contacto__lado {
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
}

.contacto__cabeza {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: calc(var(--v) + var(--alto-muesca)) var(--lado) 3rem var(--sangria);
}

.contacto__titulos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.contacto__titulos .titulo-1 {
  margin-left: -.067em;
  font-size: var(--texto-titular);
  line-height: 1;
}

.contacto__base {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
}

.contacto__ciudad {
  font-size: var(--texto-titulo-4);
  line-height: 1.2;
}

.contacto__datos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contacto__enlaces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
}

.contacto__enlace {
  padding-block: .5rem;
  margin-block: -.25rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .1875rem;
  transition: opacity .3s var(--curva-ease-in-out);
}

@media (hover: hover) {
  .contacto__enlace:hover {
    opacity: .6;
  }
}

.contacto__canales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hueco);
}

.canal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.125rem;
  grid-template-rows: auto auto;
  align-content: space-between;
  gap: 1.5rem .75rem;
  min-height: 7rem;
  padding: 1.25rem;
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--texto-interfaz);
  line-height: 1.05rem;
  transition: background-color var(--duracion-muelle-hover) var(--muelle-hover);
  --icono-tamano: 1.125rem;
  --duracion-icono: var(--duracion-muelle-hover);
  --curva-icono: var(--muelle-hover);
}

.canal__nombre {
  grid-column: 1;
  grid-row: 1;
  color: var(--color-texto-secundario);
}

.canal .icono-rodillo {
  grid-column: 2;
  grid-row: 1;
}

.canal__valor {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--texto-titulo-5);
  line-height: 1.3;
}

@media (hover: hover) {
  .canal:hover {
    background: var(--color-superficie-hover);
  }
}

.contacto__cuerpo {
  padding: calc(var(--v) + var(--alto-muesca)) var(--sangria) var(--v) var(--lado);
}

@media (max-width: 1199.98px) {
  .contacto {
    grid-template-columns: minmax(0, 1fr);
  }

  .contacto__cabeza {
    padding-right: var(--sangria);
  }

  .contacto__cuerpo {
    padding: var(--v) var(--sangria);
  }
}

@media (max-width: 809.98px) {
  .contacto__cabeza {
    gap: 3rem;
  }
}

.contacto__cuerpo:has(.envio--hecho) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1200px) {
  .contacto {
    align-items: start;
  }

  .contacto__lado {
    position: sticky;
    top: var(--marco);
    height: calc(100svh - var(--marco) * 2);
  }

  .contacto__cabeza {
    min-height: 0;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .contacto__cuerpo {
    min-height: calc(100svh - var(--marco) * 2);
    padding-top: calc(var(--alto-muesca) + 1.5rem);
    padding-bottom: 2rem;
  }

  .contacto__cuerpo .paso {
    gap: 1rem;
  }

  .contacto__cuerpo textarea.campo__entrada {
    height: 5.5rem;
  }
}

@media (max-width: 399.98px) {
  .contacto__canales {
    grid-template-columns: minmax(0, 1fr);
  }
}