/* Tipografia ampliada exclusivamente para los dos bloques iniciales de contacto. */
.page-hero .section-label span,
#contacto .section-label span {
  font-size: clamp(0.9375rem, 0.9vw, 1rem);
}

.page-hero-title {
  font-size: clamp(2.53125rem, 5.5vw, 4.125rem);
}

.page-hero-desc {
  font-size: clamp(1.125rem, 1.25vw, 1.25rem);
}

.page-hero .trust-badge {
  font-size: clamp(1rem, 0.98vw, 1.03125rem);
}

#contacto .contacto-left h2 {
  font-size: clamp(2.28125rem, 3.5vw, 3.1875rem);
}

#contacto .contacto-desc {
  font-size: clamp(1.0625rem, 1.18vw, 1.1875rem);
}

#contacto .ci-label {
  font-size: clamp(0.9375rem, 0.87vw, 0.96875rem);
}

#contacto .ci-value {
  font-size: clamp(1.0625rem, 1.08vw, 1.09375rem);
}

#contacto .soc-btn {
  font-size: clamp(1.125rem, 1.15vw, 1.15625rem);
}

#contacto .canales-title {
  font-size: clamp(1.8125rem, 2.1vw, 1.9375rem);
}

#contacto .canales-subtitle {
  font-size: clamp(1.0625rem, 1.05vw, 1.0625rem);
}

#contacto .canal-name {
  font-size: clamp(1.09375rem, 1.12vw, 1.125rem);
}

#contacto .canal-detail {
  font-size: clamp(1.03125rem, 0.98vw, 1.03125rem);
}

#contacto .canales-note {
  font-size: clamp(1.03125rem, 1.05vw, 1.0625rem);
}

@media (max-width: 600px) {
  .page-hero-title {
    font-size: clamp(2.1875rem, 9vw, 2.875rem);
  }

  #contacto .contacto-left h2 {
    font-size: clamp(1.9375rem, 8.75vw, 2.1875rem);
  }
}

/* ── Foto de la columna "Hablemos" (clave cn-hablemos-foto) ──
   Cierra el hueco que dejaba la columna izquierda frente a los canales
   directos. La imagen es administrable desde el panel; el zoom que aplica
   image-manager.js va sobre el <img>, por eso el realce del hover vive en la
   figura y no se pisan entre sí. */
#contacto .contacto-visual {
  position: relative;
  margin: 40px 0 0;
  overflow: hidden;
  border: 1px solid rgba(171, 100, 35, .18);
  border-radius: var(--rxl);
  background: var(--cream2);
  box-shadow: 0 16px 40px rgba(65, 36, 4, .12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

#contacto .contacto-visual:hover {
  transform: translateY(-4px);
  border-color: rgba(171, 100, 35, .34);
  box-shadow: 0 24px 54px rgba(65, 36, 4, .18);
}

#contacto .contacto-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* Sin imagen publicada ni por defecto no se deja un marco vacío. */
#contacto .contacto-visual img:not([src]) { display: none; }

@media (max-width: 900px) {
  #contacto .contacto-visual { margin-top: 32px; }
  #contacto .contacto-visual img { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
  #contacto .contacto-visual { margin-top: 28px; border-radius: var(--rl); }
  #contacto .contacto-visual img { aspect-ratio: 4 / 3; }
}