/* Contenedor general */
.contact-section {

  padding: 4rem 0;
}

/* Título */
.contact-section h2 {
  color: #ffffff;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

/* Grid de columnas */
.contact-section .row.g-4 {
  align-items: start;
}

/* PANEL LATERAL */
.contact-info {
  display: grid;
  gap: 1.3rem;
}

.contact-info > div {
  background: var(--color-primario);
  padding: 4.0rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  
}

.contact-info i {
  font-size: 1.75rem;
  color: var(--color-secundario);
}

.contact-info div {
  color: #ffffff;
  font-size: 0.95rem;
}

/* FORMULARIO (Contact Form 7) */
.wpcf7-form {
  background: var(--color-primario);
  padding: 2rem;
  border-radius: 0.75rem;
}

/* Campos de texto y email y subject */
.wpcf7-form-control {
  width: 100%;
  background: var(--color-fondo);
  border: none;
  border-radius: 0.5rem;
  color: #ffffff;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Área de texto */
.wpcf7-form-control.wpcf7-textarea {
  min-height: 100px;
  color: var(--color-texto);
  resize: vertical;
}

/* Placeholder */
.wpcf7-form-control::placeholder {
  color: #888888;
}

/* Focus */
.wpcf7-form-control:focus {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
}

.wpcf7-submit {
  background-color: var(--color-secundario) !important;
  color: #ffffff !important;
  display: inline-block;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s ease;
  margin-top: 0.5rem;
}


.wpcf7-submit:hover {
  background: #0056b3 !important;/* Color de fondo al pasar el mouse */
  color: #ffffff!important;
}

a{
  text-decoration: none;
}

/* Estilo base para evitar herencias */
.no-hover a {
  color: inherit;            /* Usa el color del texto del padre */
  text-decoration: none;     /* Quita el subrayado */
  pointer-events: auto;      /* Asegura que el link sea clickeable */
}

/* Opcional: Anula hover si lo hubiera */
.no-hover a:hover {
  color: inherit;
  text-decoration: none;
}
.contact-info a {
  color: #fff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}