/* bh2026-contacto.css — página de contacto (Claudia, 19-oct-2026, encargo I). Solo page_name contact.
   Mismo lenguaje que el login nuevo (bh2026-login.css): tarjetas blancas, títulos verdes, campos grandes, botón verde ancho.
   Variables de bh2026.css. Texto blanco solo sobre --bh-g-ink (#4a842c, AA). */
.bh21-contacto { max-width: 1120px; margin: 0 auto; padding: 0 0 40px; color: var(--bh-text); }
.bh21-contacto .bh21-h1.page-heading { font-size: 40px; line-height: 1.1; font-weight: 700; color: #12301a; text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; margin: 6px 0 22px; text-align: left; }
.bh21-atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.bh21-atajos li { margin: 0; padding: 0; display: flex; }
.bh21-atajo { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; min-height: 84px; padding: 16px 20px; box-sizing: border-box; background: #fff; border: 1px solid #e3ebdc; border-left: 4px solid var(--bh-g); border-radius: 14px; box-shadow: 0 2px 10px rgba(31, 90, 46, .07); text-decoration: none; }
.bh21-atajo b { font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--bh-g-d); }
.bh21-atajo span { font-size: 14.5px; line-height: 1.3; color: var(--bh-muted); }
.bh21-atajo:hover, .bh21-atajo:focus-visible { border-color: var(--bh-g-ink); box-shadow: 0 4px 16px rgba(31, 90, 46, .14); text-decoration: none; }
.bh21-atajo:focus-visible, .bh21-btn:focus-visible, .bh21-contacto a:focus-visible { outline: 3px solid var(--bh-g-d); outline-offset: 2px; }
.bh21-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
.bh21-card { background: #fff; border: 1px solid #e3ebdc; border-radius: 16px; box-shadow: 0 2px 10px rgba(31, 90, 46, .07); padding: 28px 30px 30px; min-width: 0; }
.bh21-card-t { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--bh-g-d); text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; margin: 0 0 18px; }
.bh21-form fieldset { border: 0; margin: 0; padding: 0; }
.bh21-field { margin: 0 0 16px; }
.bh21-field label { display: block; margin: 0 0 6px; font-size: 15.5px !important; font-weight: 600 !important; color: var(--bh-text); }
.bh21-field label.unvisible { display: none; }
.bh21-opc { font-weight: 400; color: var(--bh-muted); font-size: 14px; }
.bh21-input { display: block; width: 100%; height: 52px; padding: 0 16px; box-sizing: border-box; border: 1px solid #cdd6c4; border-radius: 10px; background: #fff; color: var(--bh-text); font-size: 17px; box-shadow: none; }
.bh21-input[readonly] { background: #f6f8f3; }
.bh21-select { appearance: auto; -webkit-appearance: menulist; padding-right: 10px; }
.bh21-area { height: auto; min-height: 170px; padding: 14px 16px; line-height: 1.45; resize: vertical; }
.bh21-input:focus { border-color: var(--bh-g-ink); box-shadow: 0 0 0 3px rgba(106, 163, 67, .25); outline: 0; }
.bh21-file { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px dashed #b9c9ab; border-radius: 10px; background: var(--bh-bg); font-size: 15px; color: var(--bh-text); }
.bh21-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--bh-muted); }
.bh21-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 8px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--bh-g-ink); color: #fff; font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: .2px; cursor: pointer; text-decoration: none; }
.bh21-btn:hover, .bh21-btn:focus-visible { background: var(--bh-g-hov); color: #fff; text-decoration: none; }
.bh21-btn span { color: inherit; }
.bh21-btn-auto { width: auto; display: inline-flex; }
/* casilla de privacidad que añade el módulo deluxelopd JUSTO DESPUÉS del botón (no se toca el módulo) */
.bh21-form #lopdParentCheck { margin: 16px 0 6px; padding: 0; }
.bh21-form #lopdParentCheck label { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 15.5px; font-weight: 400; line-height: 1.4; color: var(--bh-text); cursor: pointer; }
.bh21-form #lopdParentCheck input[type="checkbox"] { -webkit-appearance: checkbox !important; appearance: auto !important; opacity: 1 !important; position: static !important; flex: 0 0 auto; width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; accent-color: var(--bh-g-ink); }
.bh21-form #lopdParentCheck a { color: var(--bh-g-hov); text-decoration: underline; }
.bh21-form #lopdParentCheck .reg-red { color: #c8102e; font-style: normal; }
.bh21-form #lopdParentCheck br { display: none; }
.bh21-form .lopd-check-error { display: block; margin: 6px 0 0 30px; font-size: 14.5px; color: #a3141b; }
.bh21-form .min-text-contact { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--bh-muted); }
.bh21-err { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #e8b4b4; border-left: 4px solid #c8102e; border-radius: 8px; background: #fdf1f1; color: #7a1a1a; font-size: 15.5px; line-height: 1.4; }
.bh21-err p { margin: 0 0 4px; font-weight: 700; }
.bh21-err ul { margin: 0; padding: 0 0 0 18px; }
.bh21-ok, .bh21-aviso { max-width: 640px; border-left: 4px solid var(--bh-g-ink); }
.bh21-ok-t { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--bh-g-d); }
.bh21-ok p, .bh21-aviso p { font-size: 17px; line-height: 1.45; }
.bh21-card-info { background: var(--bh-bg); border-color: var(--bh-line); }
.bh21-line { margin: 0 0 16px; font-size: 16.5px; line-height: 1.45; }
.bh21-line b { color: var(--bh-g-d); }
.bh21-tel { display: inline-block; font-size: 24px; font-weight: 700; color: var(--bh-g-d); text-decoration: none; }
.bh21-tel:hover { text-decoration: underline; }
.bh21-nota { margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--bh-line); border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--bh-text); }
.bh21-nota a { color: var(--bh-g-hov); text-decoration: underline; font-weight: 600; }
@media (max-width: 991px) {
  .bh21-cols { grid-template-columns: 1fr; gap: 20px; }
  .bh21-atajos { grid-template-columns: 1fr; gap: 12px; }
  .bh21-atajo { min-height: 0; }
  .bh21-contacto .bh21-h1.page-heading { font-size: 30px; margin-bottom: 16px; }
  .bh21-card { padding: 22px 18px 24px; border-radius: 14px; }
  .bh21-card-t { font-size: 23px; }
}
@media (max-width: 479px) {
  .bh21-input { font-size: 16px; } /* 16 px: iOS no hace zoom al enfocar */
}