/* ====================================================================================
   CONTACTO estilo CUBIA CARTA
   ==================================================================================== */

.contacto-wrapper {
  min-height: calc(100svh - var(--nav-h) - 90px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
}
@media (max-width: 991.98px) {
  .contacto-wrapper {
    min-height: calc(100svh - var(--nav-h-sm) - 90px);
  }
}

/* Panel principal */
.contacto-panel {
  background: linear-gradient(to bottom, #ffffff, var(--bg));
  padding: 3rem 2rem;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  width: min(1200px, 100%);
}

/* Título principal con líneas tipo carta */
.contacto-titulo {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--cobrizo);
  text-transform: uppercase;
  letter-spacing: .12em;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: .8rem;
}
.contacto-titulo::before,
.contacto-titulo::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: var(--cobrizo);
  border-radius: 2px;
  opacity: .85;
}

/* Subtítulo */
.contacto-sub {
  text-align: center;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gris);
  margin-bottom: 2.8rem;
}

/* Caja interna clara estilo carta */
.contacto-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  height: 100%;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Titulares dentro de cajas */
.box-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cobrizo);
  margin-bottom: 1.2rem;
}

/* FORMULARIO — estilo carta */
.contacto-box .form-label {
  color: var(--titular);
  font-weight: 600;
}

.contacto-box .form-control {
  border: 1px solid rgba(0,0,0,0.12);
  background: #faf7f2;
  border-radius: 10px;
  padding: .65rem .9rem;
}
.contacto-box .form-control:focus {
  border-color: var(--cobrizo);
  box-shadow: 0 0 0 .2rem rgba(196,106,43,.25);
}

/* MAPA */
.mapa {
  width: 100%;
  height: 350px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
@media (min-width: 992px) {
  .mapa { height: 420px; }
}

/* INFO DE CONTACTO */
.contacto-info {
  background: #faf7f2;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}

.contacto-info .info-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--gris);
  margin-bottom: .6rem;
}
.contacto-info .info-item:last-child {
  margin-bottom: 0;
}

.contacto-info i {
  font-size: 1.1rem;
  color: var(--cobrizo);
}

.contacto-info a {
  color: var(--cobrizo);
  text-decoration: none;
  font-weight: 600;
}
.contacto-info a:hover {
  text-decoration: underline;
}

/* Grid consistente */
.contacto-grid {
  margin-top: 1rem;
}

/* Animación */
.fade-up {
  opacity: 0;
  transform: translateY(10px);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s ease;
}
