body {
  background-color: #0600a0;
}

.contacto-principal {
  --contacto-margen: 40px;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding: 120px var(--contacto-margen) 44px;
  background-color: #0600a0;
  color: #F9FF3E;
}

.contacto-dato {
  --ancho-texto: 9.92;
  margin: 0;
  width: calc(100% + var(--contacto-margen) * 2);
  margin-inline: calc(-1 * var(--contacto-margen));
  font-family: 'Helvena-Medium';
  /* Ajuste al ancho de pantalla segun las medidas de Helvena-Medium. */
  font-size: calc(100vw / var(--ancho-texto));
  font-weight: normal;
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.contacto-dato.contacto-telefono {
  --ancho-texto: 7.2;
}

@supports (container-type: inline-size) {
  .contacto-principal {
    container-type: inline-size;
  }

  .contacto-dato {
    font-size: calc((100cqw + var(--contacto-margen) * 2) / var(--ancho-texto));
  }
}

.contacto-dato a {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  cursor: inherit;
}

.contacto-dato a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

@media screen and (max-width: 768px) {
  .contacto-principal {
    --contacto-margen: 20px;
    padding: 80px var(--contacto-margen) 40px;
  }

}