/* ============================================================================
   VIANNA'S — css/viannas-contact.css
   Clases de la página de CONTACTO portadas de loestudio.css (secciones 22-23),
   mapeadas a la paleta Vianna's:
     --areia → var(--v-creme)   --sage → var(--v-taupe)
     --atlantico/--carvao → var(--v-navy)   --paper → #fff
     --line → rgba(16,36,80,.12)   --font-display → var(--font-disp)
   Iconos: el tema carga Font Awesome 5 (all.min.css 5.15.4), no FA6.
============================================================================ */

/* --- Form: envolver floats del template nativo (evita colapso de altura) --- */
.contact-loe + form,
form#contactForm { display: flow-root; clear: both; }

/* --- Mapa a todo el ancho --- */
.contact-loe { width: 100%; }
.contact-loe .contact-map-full { width: 100%; }
.contact-loe .contact-map-full iframe,
.contact-loe .contact-map-full #contact-map,
.contact-loe .contact-map-full > div {
  width: 100% !important;
  min-height: 380px;
  border: 1px solid rgba(16, 36, 80, 0.12);
  filter: grayscale(35%) sepia(8%);
}

/* --- 4 tarjetas de información --- */
.contact-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 36, 80, 0.12);
  padding: 26px 22px;
  height: 100%;
  font-size: 14.5px;
  color: var(--v-navy);
}
.contact-card::before {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: var(--v-taupe);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.contact-card-address::before { content: "\f3c5"; }  /* map-marker-alt */
.contact-card-email::before   { content: "\f0e0"; }  /* envelope */
.contact-card-phone::before   { content: "\f095"; }  /* phone */
.contact-card-hours::before   { content: "\f017"; }  /* clock */

.contact-card > * { position: relative; z-index: 1; }
.contact-card .eyebrow { margin-bottom: 10px; }
.contact-card address { margin-bottom: 0; font-style: normal; }
.contact-card a { color: var(--v-navy); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-loe a:not(.btn) { color: var(--v-navy); }
.contact-loe a:not(.btn):hover { color: var(--v-slate); }

/* --- Captcha: código bien visible + ayuda debajo --- */
.contact-captcha .captcha-code {
  display: inline-block;
  background: var(--v-navy);
  color: var(--v-creme);
  padding: 10px 16px;
  margin-bottom: 8px;
}
.contact-captcha .captcha-code img { display: block; }
.contact-captcha .captcha-help {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(16, 36, 80, 0.6);
  margin-top: 6px;
}

/* --- Alertas del sistema (sección 23) --- */
.alert-loe,
.alert {
  position: relative;
  border: 1px solid rgba(16, 36, 80, 0.12);
  border-left: 4px solid var(--v-taupe);
  border-radius: 0;
  background: var(--v-creme);
  color: var(--v-navy);
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.alert-loe-info, .alert-info {
  border-left-color: var(--v-navy);
  background: rgba(16, 36, 80, 0.07);
  color: var(--v-navy);
}
.alert-loe-success, .alert-success {
  border-left-color: var(--v-slate);
  background: rgba(59, 80, 125, 0.12);
  color: #22375c;
}
.alert-loe-warning, .alert-warning {
  border-left-color: #b98a2e;
  background: rgba(185, 138, 46, 0.12);
  color: #7a5a1c;
}
.alert-loe-danger, .alert-danger, .alert-error {
  border-left-color: #a53f3f;
  background: rgba(165, 63, 63, 0.10);
  color: #7c2f2f;
}