/* =========================================================
   CONTACTO
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.contacto-hero {
  padding: 120px 20px 80px;

  background: linear-gradient(
    180deg,
    var(--color-sky),
    var(--color-sky),
    rgba(255, 255, 255, 0.85)
  );

  text-align: center;
}

.contacto-hero h1 {
  color: var(--color-primary);

  font-size: clamp(
    2.3rem,
    4vw,
    3rem
  );
}

.contacto-hero p {
  max-width: 650px;

  margin: 0 auto;

  color: var(--text-secondary);

  font-size: 1.1rem;
  line-height: 1.7;
}


/* =========================================================
   SECCIÓN PRINCIPAL
   ========================================================= */

.contacto-section {
  background: var(--color-white);
}

.contacto-grid {
  display: grid;

  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  );

  gap: 50px;

  align-items: start;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.contacto-form {
  padding: 35px;

  background: var(--color-beige);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}

.contacto-form h2 {
  margin-bottom: 25px;

  color: var(--color-primary);
}

.contacto-form form {
  display: flex;
  flex-direction: column;

  gap: 15px;
}

.contacto-form input,
.contacto-form textarea,
.contacto-form select {
  width: 100%;

  padding: 12px 15px;

  border: 1px solid #ddd;
  border-radius: 10px;

  background: var(--color-white);

  font: inherit;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.contacto-form input:focus,
.contacto-form textarea:focus,
.contacto-form select:focus {
  outline: none;

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px
    rgba(62, 95, 20, 0.18);
}

.contacto-form textarea {
  min-height: 150px;

  resize: vertical;
}


/* =========================================================
   INFORMACIÓN DE CONTACTO
   ========================================================= */

.contacto-info h2 {
  margin-bottom: 20px;

  color: var(--color-primary);
}

.contacto-info p {
  margin-bottom: 25px;

  color: var(--text-secondary);

  line-height: 1.7;
}

.contacto-item {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  font-weight: 500;
}

.contacto-item i {
  width: 22px;

  color: var(--color-primary);

  text-align: center;
}


/* =========================================================
   FRASE FINAL
   ========================================================= */

.contacto-quote {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );

  color: var(--color-white);
}

.contacto-quote h2 {
  max-width: 700px;

  margin: 0 auto;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contacto-form input,
  .contacto-form textarea,
  .contacto-form select {
    transition: none !important;
  }
}