/* =========================================================
   contacto.css — estilos exclusivos de contacto.html
   ========================================================= */

/* ---------- Layout de dos columnas asimétricas ---------- */

.contact-split-section {
  padding: 64px 0 96px;
  background: var(--color-white);
}

.contact-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* ---------- Tarjeta de información de contacto ----------
   Misma familia visual que .contact-form-card (radio, padding, sombra
   suave) para que ambas tarjetas se vean como un par coherente — el
   fondo gris muy claro es lo único que las distingue a simple vista. */

.contact-editorial {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 32px rgba(4, 32, 76, 0.08);
}

.contact-editorial h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 520px;
}

.contact-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 40px;
  max-width: 460px;
}

.contact-data-list {
  display: grid;
  gap: 18px;
}

.contact-data-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* .icon es un <span> — sin display:flex acá, el width/height de abajo
   no tenía ningún efecto (un inline no-reemplazado los ignora) y cada
   logo terminaba renderizando a su tamaño natural sin restricción, muy
   distinto entre sí según la escala de su propio viewBox: de ahí el
   desajuste "unos gigantes, otros diminutos". Con el flex centrado acá,
   28x28 es la columna fija que alinea todos los textos de al lado,
   sin importar el tamaño real que tome cada ícono adentro. */
.contact-data-item .icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Compensación óptica por morfología: cada logo llena su propio
   viewBox de forma muy distinta (Gmail es una franja horizontal dentro
   de un viewBox cuadrado; el pin de ubicación es angosto y muy alto;
   WhatsApp/Instagram son prácticamente cuadrados y ya equilibrados),
   así que un mismo width/height para los cuatro no da un peso visual
   parejo aunque el .icon que los envuelve sí mida siempre lo mismo. */
.icon-gmail svg {
  width: 20px;
  height: auto;
}

.icon-location svg {
  height: 20px;
  width: auto;
}

.icon-whatsapp svg,
.icon-instagram svg {
  width: 21px;
  height: 21px;
}

.contact-data-item a {
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
}

.contact-data-item a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---------- Formulario (tarjeta flotante) ---------- */

.contact-form-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 45px rgba(4, 32, 76, 0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: var(--font-primary);
  font-size: 15px;
  background: var(--color-surface);
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  background: var(--color-white);
}

.form-actions {
  margin-top: 6px;
}

.form-error {
  margin-top: 14px;
  font-size: 13.5px;
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c2bd;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* ---------- Confirmación de envío ---------- */

.contact-success {
  text-align: center;
  padding: 48px 24px;
}

.contact-success .success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  color: var(--color-whatsapp-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact-success .success-icon svg {
  width: 32px;
  height: 32px;
}

.contact-success h3 {
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 8px;
}

.contact-success p {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0;
}

@media (max-width: 960px) {
  .contact-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 720px) {
  .contact-split-section {
    padding: 40px 0 64px;
  }

  .contact-editorial,
  .contact-form-card {
    padding: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Dos teléfonos (gerente comercial / asesor de ventas) apilados en el mismo ítem. */
.contact-phones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}