@import url("../made-by-chileans/css/tokens.css");

/* ========================================
   Contacto Page Styles
   Usa tokens y clases del sistema MbC
   ======================================== */

/* Hero Banner */
.contacto-hero {
  background-color: var(--blue-700);
  padding: var(--spacing-desktop-6xl) 0 var(--spacing-desktop-3xl);
  margin-top: 65px;
}

.contacto-hero__content {
  padding: var(--spacing-desktop-2xl) var(--spacing-desktop-6xl);
}

.contacto-hero__content h1 {
  color: var(--neutral-100);
  font-family: var(--font-family-bold);
  font-weight: var(--font-bold);
  font-size: var(--font-desktop-size-h1);
  line-height: var(--font-desktop-lineheight-h1);
  margin-bottom: var(--spacing-desktop-s);
}

.contacto-hero__content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-body);
  line-height: var(--font-lineheight-body);
  margin-bottom: 0;
}

@media (max-width: 1366px) {
  .contacto-hero {
    padding: var(--spacing-laptop-6xl) 0 var(--spacing-laptop-3xl);
  }
  .contacto-hero__content {
    padding: var(--spacing-laptop-2xl) var(--spacing-laptop-4xl);
  }
  .contacto-hero__content h1 {
    font-size: var(--font-laptop-size-h1);
    line-height: var(--font-laptop-lineheight-h1);
  }
}

@media (max-width: 768px) {
  .contacto-hero {
    padding: var(--spacing-tablet-5xl) 0 var(--spacing-tablet-2xl);
  }
  .contacto-hero__content {
    padding: var(--spacing-tablet-xl) var(--spacing-tablet-2xl);
  }
  .contacto-hero__content h1 {
    font-size: var(--font-tablet-size-h1);
    line-height: var(--font-tablet-lineheight-h1);
  }
}

@media (max-width: 390px) {
  .contacto-hero {
    padding: var(--spacing-mobile-5xl) 0 var(--spacing-mobile-2xl);
  }
  .contacto-hero__content {
    padding: var(--spacing-mobile-xl);
  }
  .contacto-hero__content h1 {
    font-size: var(--font-mobile-size-h1);
    line-height: var(--font-mobile-lineheight-h1);
  }
}

/* Contacto Section */
.contacto-section > div > div.row > div.inner-enviarNoticia {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.contacto-section > div > div.row > div.inner-enviarNoticia > div:not(.gracias-container) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* Sidebar */
.contacto-side,
.contacto-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* Contact info icons */
.contacto-section img.btn-icon-right {
  margin-right: 1rem;
}

/* Form */
.contacto-form label {
  font-size: var(--font-size-dates);
}

.contacto-form a {
  font-size: var(--font-size-dates);
  font-weight: var(--font-bold);
  text-decoration: none;
  color: var(--black);
}

.contacto-form a:hover {
  text-decoration: underline;
}

.contacto-form textarea {
  min-height: 200px;
  resize: vertical;
}

.contacto-form .form-control::placeholder {
  color: #7a8794;
}

.envia-contacto,
.envia-contacto > div.inner-enviarContacto {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* Legal checkbox */
.contacto-form .legal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* Validation errors */
.contacto-form label.error {
  color: var(--red-500);
  font-size: 12px;
  font-weight: var(--font-regular);
  margin-top: var(--spacing-desktop-xs);
  background: none !important;
  border: none !important;
}

.contacto-form .form-control.error,
.contacto-form .mbc-field.error {
  background: var(--red-50) !important;
  border: 1px solid var(--red-500) !important;
}

/* Gracias container */
.contacto-section .gracias-container {
  text-align: center;
  display: none;
}

.contacto-section .gracias-container .btn-default {
  display: inline-block;
  width: auto;
}

.contacto-section .gracias-container .check {
  margin-bottom: var(--spacing-desktop-2xl);
}

@media (max-width: 1366px) {
  .contacto-section .gracias-container .check {
    margin-bottom: var(--spacing-laptop-2xl);
  }
}

@media (max-width: 768px) {
  .contacto-section .gracias-container .check {
    margin-bottom: var(--spacing-tablet-2xl);
  }
}

@media (max-width: 390px) {
  .contacto-section .gracias-container .check {
    margin-bottom: var(--spacing-mobile-2xl);
  }
}