/*
||----------------------------------------------------------
|| SECCIÓN CONTACTO (CONTACTO)
||----------------------------------------------------------
*/
.contenedor-contacto {
  /* Conversión de 20px 40px a 1.25em 4em */
  padding: 1.5em 9em;
  /* La línea de borde (1px) se suele dejar en px o en rem si es muy pequeña */
  border-top: 1px solid var(--color-separador);
}

.contenedor-contacto h2 {
  font-size: 1.8em;
  color: var(--color-texto-contenido);
  /* Conversión de 15px a ~0.94em */
  margin-bottom: 0.94em;
  /* El borde (2px) se suele dejar en px por su delgadez o usar 0.125rem */
  border-bottom: 2px solid var(--color-texto-enlace);
  display: inline-block;
  /* Conversión de 5px a ~0.31em */
  padding-bottom: 0.31em;
}

.contacto p {
  /* Restablecer o mejorar la fuente */
  font-size: 1.5em; /* Tamaño de un título */
  font-weight: bold; /* Hacerlo más grueso */
  color: var(--color-texto-contenido); /* Usar el color principal */

  /* Quitar el centrado del texto si vamos a usar inline-block */
  text-align: left;
  line-height: 1.2; /* Ajustar el espaciado entre líneas */

  /* Conversión de 15px a ~0.94em */
  margin-bottom: 0.94em;
  margin-top: 0;

  /* 2. Crear el efecto de la línea/separador inferior */
  border-bottom: 2px solid var(--color-texto-enlace);
  padding-bottom: 0.31em;

  /* 3. Hacer que el borde y el fondo solo abarquen el texto */
  display: inline-block;
}

.contacto {
  text-align: center;
}

/* Media Query para Contacto */
@media screen and (max-width: 768px) {
  .contenedor-contacto {
    padding: 20px;
  }
}