/* ==========================================================
   Contacto – Premium B2B (Definitivo)
   Archivo: /assets/css/pages/contacto.css
   ========================================================== */

.section-contacto{
  padding: 4rem 0;
  background: radial-gradient(900px 380px at 80% 0%, rgba(14,165,233,.06), transparent 60%), #fff;
}

.contacto-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: start;
}

/* Columna info */
.contacto-copy h1{
  margin: .35rem 0 .85rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.contacto-lead{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin-bottom: 1.75rem;
}

.contacto-datos{
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: .75rem;
}

.contacto-datos li{
  color: var(--text);
  font-size: .95rem;
}

.contacto-link{
  color: var(--brand);
  text-decoration: none;
}
.contacto-link:hover{
  text-decoration: underline;
}

.contacto-nota{
  color: var(--muted);
  font-size: .9rem;
  margin-top: .25rem;
}

/* Form */
.contacto-form-wrap{
  padding: 2rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(2,6,23,.12);
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.15rem;
}

.form-group label{
  font-weight: 650;
  font-size: .9rem;
}

.form-group input,
.form-group textarea{
  padding: .65rem .75rem;
  border-radius: .65rem;
  border: 1px solid #e2e8f0;
  font-family: inherit;
  font-size: .95rem;
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--brand);
}

.form-actions{ margin-top: 1.25rem; }

/* ===========================================
   Ubicación (sección independiente full-width)
   =========================================== */

.contacto-location{
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid #e2e8f0;
}

.contacto-location__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contacto-location__media img{
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 22px 60px rgba(2,6,23,.12);
  display: block;
}

.contacto-location__map{
  margin-top: 1rem;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
}

.contacto-location__map iframe{
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

.contacto-location__actions{
  margin-top: 1rem;
}

/* Responsive */
@media (max-width: 980px){
  .contacto-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contacto-location__grid{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   MINI AJUSTE PREMIUM – Contacto
   Refuerzo visual columna izquierda
   ========================================================== */

/* Dar más presencia a la columna de información */
.contacto-copy{
  padding-right: 1rem;
}

/* Convertir datos de contacto en tarjeta institucional */
.contacto-datos{
  padding: 1.25rem 1.35rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* Acento de marca muy sutil (verde institucional) */
.contacto-datos{
  border-left: 3px solid rgba(153, 204, 51, .25);
}


/* ==========================================================
   CONTACTO – Refinado Premium B2B (override final)
   Archivo: /assets/css/pages/contacto.css
   ========================================================== */

:root{
  --cz-blue: var(--brand-blue, #023A5F);
  --cz-green: var(--brand-green, #99CC33);
  --cz-border: rgba(226,232,240,.92);
  --cz-shadow: 0 22px 60px rgba(2,6,23,.12);
}

/* 1) Fondo general: atmósfera corporativa (muy sutil) */
.section-contacto{
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(2,58,95,.08), transparent 60%),
    radial-gradient(900px 380px at 88% 0%, rgba(153,204,51,.06), transparent 55%),
    #fff !important;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

/* 2) Columna izquierda: texto + datos con presencia editorial */
.contacto-copy h1{
  color: var(--cz-blue);
  letter-spacing: -0.02em;
}

.contacto-lead{
  color: rgba(2,58,95,.72) !important;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* Tarjeta de datos (más institucional) */
.contacto-datos{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(2,58,95,.10) !important;
  box-shadow: 0 18px 45px rgba(2,6,23,.06);
  border-radius: 1.1rem;
  position: relative;
  overflow: hidden;
}

/* Filete verde (firma premium, no invasiva) */
.contacto-datos::before{
  content:"";
  position:absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: .95rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(153,204,51,0),
    rgba(153,204,51,.55),
    rgba(153,204,51,0)
  );
  pointer-events:none;
  opacity: .95;
}

.contacto-datos li{
  color: rgba(2,58,95,.85);
}

/* Links de contacto (más “enterprise”) */
.contacto-link{
  color: var(--cz-blue) !important;
  text-decoration: none !important;
  font-weight: 650;
}
.contacto-link:hover{
  text-decoration: underline !important;
}

/* 3) Formulario: tarjeta premium + inputs con focus elegante */
.contacto-form-wrap{
  border: 1px solid var(--cz-border) !important;
  border-radius: 1.35rem !important;
  box-shadow: var(--cz-shadow) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
}

.form-group label{
  color: rgba(2,58,95,.85);
  font-weight: 700;
}

.form-group input,
.form-group textarea{
  border-radius: .75rem !important;
  border: 1px solid rgba(2,58,95,.12) !important;
  background: rgba(255,255,255,.96);
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Focus accesible + premium */
.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: rgba(2,58,95,.35) !important;
  box-shadow: 0 0 0 4px rgba(2,58,95,.10);
}

/* Botón enviar: azul sólido (contacto = confianza) */
.contacto-form-wrap .btn--primary,
.contacto-form-wrap button.btn--primary{
  background: var(--cz-blue) !important;
  border-color: var(--cz-blue) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(2,6,23,.14);
}
.contacto-form-wrap .btn--primary:hover,
.contacto-form-wrap button.btn--primary:hover{
  background: color-mix(in srgb, var(--cz-blue) 88%, #000 12%) !important;
  box-shadow: 0 24px 60px rgba(2,6,23,.18);
  transform: translateY(-1px);
}

/* 4) Sección Ubicación: más institucional, con aire y separación */
.contacto-location{
  margin-top: 5rem !important;
  padding-top: 3.75rem !important;
  border-top: 1px solid rgba(2,58,95,.10) !important;
}

/* Imagen ubicación: un poco más premium */
.contacto-location__media img,
.contacto-location__media img{
  border-radius: 1.35rem !important;
  box-shadow: var(--cz-shadow) !important;
  border: 1px solid rgba(2,58,95,.10) !important;
}

/* Mapa: borde y sombra uniformes */
.contacto-location__map,
.contacto-location__map{
  border-radius: 1.35rem !important;
  border: 1px solid rgba(2,58,95,.10) !important;
  box-shadow: 0 18px 45px rgba(2,6,23,.10) !important;
}

/* Botón “Ver en Google Maps”: verde outline (acento) */
.contacto-location__actions .btn--secondary{
  color: var(--cz-green) !important;
  border-color: rgba(153,204,51,.55) !important;
  background: rgba(255,255,255,.94) !important;
}
.contacto-location__actions .btn--secondary:hover{
  background: rgba(153,204,51,.10) !important;
  border-color: rgba(153,204,51,.75) !important;
}

/* 5) Responsive: más aire y orden en móvil */
@media (max-width: 980px){
  .section-contacto{
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .contacto-copy{
    padding-right: 0 !important;
  }

  .contacto-form-wrap{
    padding: 1.6rem !important;
  }

  .contacto-location__map iframe{
    height: 320px !important;
  }
}

@media (max-width: 520px){
  .contacto-form-wrap{
    padding: 1.35rem !important;
  }

  .contacto-form-wrap .btn,
  .contacto-location__actions .btn{
    width: 100%;
    justify-content: center;
  }
}