/* ==========================================
   SANTILLER TRUSS - CONTACTO
   Estilos exclusivos de contacto.html
   Depende de: tokens.css, main.css, components.css
   ========================================== */

/* ------------------------------------------
   NAV / DRAWER — variantes de la página
   ------------------------------------------ */
.nav-link-cta {
  font-weight: 700;
  color: var(--accent-primary);
}

.drawer-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* !important necesario: components.css:154 declara
   `.mobile-drawer-service-links a { color: ... !important }`. */
.mobile-drawer-service-links .drawer-link-cta {
  color: var(--accent-primary) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------
   SECCIÓN HERO + FORMULARIO
   Objetivo: que el formulario completo, incluido
   el botón de envío, entre en el primer viewport.
   El ritmo vertical usa unidades vh para que se
   comprima solo en pantallas bajas.
   ------------------------------------------ */
.contact-hero {
  padding-top: calc(var(--nav-height) + clamp(12px, 2.5vh, 36px));
  padding-bottom: clamp(32px, 6vh, 80px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.contact-shell {
  max-width: 960px;
}

.contact-head {
  text-align: center;
  margin-bottom: clamp(16px, 2.6vh, 32px);
}

.contact-title {
  font-size: clamp(26px, 3.4vw, 44px);
  margin-bottom: clamp(6px, 1vh, 12px);
}

.contact-intro {
  color: var(--text-muted);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  max-width: 520px;
  margin: 0 auto;
}

.contact-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 3vh, 34px);
}

/* El card-glass base se levanta en hover. En un formulario
   de esta superficie el movimiento molesta al tipear. */
.contact-card:hover {
  transform: none;
}

/* ------------------------------------------
   GRILLA DEL FORMULARIO
   Dos columnas para los campos cortos: quita dos
   filas completas respecto del apilado vertical.
   ------------------------------------------ */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.contact-form .form-group {
  margin-bottom: clamp(10px, 1.6vh, 18px);
}

.contact-form .form-group label {
  margin-bottom: clamp(4px, 0.7vh, 8px);
}

.contact-form .form-control {
  padding: clamp(10px, 1.4vh, 14px) 16px;
}

.contact-form textarea.form-control {
  resize: vertical;
  min-height: clamp(58px, 9vh, 84px);
}

/* Campos que ocupan el ancho completo de la grilla */
.form-group--full,
.form-submit {
  grid-column: 1 / -1;
}

.form-submit {
  width: 100%;
  border-radius: var(--radius-sm);
  font-size: 15px;
  padding: clamp(12px, 1.9vh, 17px);
}

.form-submit svg {
  margin-right: 8px;
}

/* Una sola columna cuando no hay ancho para dos */
@media (max-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 18px;
  }

  .contact-form .form-group {
    margin-bottom: 10px;
  }
}

/* Viewports bajos (laptops 1366x768, teléfonos en vertical):
   el intro cuesta una fila completa y el formulario manda.
   Para recuperarlo, borrar este bloque. */
@media (max-height: 820px) {
  .contact-intro {
    display: none;
  }
}

/* El botón flotante de WhatsApp es redundante en esta página
   (todo el formulario desemboca en WhatsApp) y, al entrar el
   formulario en el primer viewport, queda encima del botón de
   envío interceptando sus clicks. Para recuperarlo, borrar esto. */
.floating-wsp-btn {
  display: none;
}

/* ------------------------------------------
   UTILIDADES
   ------------------------------------------ */
.form-error {
  color: #FF5555;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
}

/* Estado inicial oculto. El JS lo sobreescribe con style.display inline. */
.is-hidden {
  display: none;
}

/* ------------------------------------------
   FOOTER
   ------------------------------------------ */
.footer-logo {
  height: 54px;
}

.footer-contact-line {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.footer-btn-compact {
  padding: 10px 20px;
  font-size: 12px;
}

.footer-tagline {
  opacity: 0.75;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

.footer-credit {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-credit-name {
  color: var(--accent-primary);
  font-weight: 700;
}