/* /contacto/ (brief §10). Base: sección .contact de la referencia (lcs-ref.css, solo lectura).
   Aquí solo los ajustes de la página: h1 con la tipografía de .section-title (lcs.css pone estilos a .lcs-body h1),
   datos de contacto en la .contact-note, errores por campo, consentimiento, mensajes y mapa.
   Contraste AA (anotado): bajada #5d7888 → #4f6a7b y antetítulo #008d9a → #00727d sobre el fondo #f4f9fb. */

.lcs-contacto { padding-top: 34px; }
.lcs-contacto .lcs-breadcrumb { margin-bottom: 40px; }
.lcs-contacto .eyebrow { color: #00727d; }

/* h1 = .section-title de la referencia (mayúsculas como la maqueta; el texto del CMS va en frase normal) */
.lcs-body .lcs-contacto__titulo {
  font-family: inherit;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.13;
  letter-spacing: -.04em;
  font-weight: 850;
  color: var(--navy, #062b40);
  text-transform: uppercase;
  text-wrap: balance;
}
.lcs-body .contact-copy .lcs-contacto__bajada { color: #4f6a7b; font-size: 16px; max-width: 560px; }

/* Datos de contacto en la nota de la referencia */
.lcs-contacto__nota { margin-top: 34px; }
.lcs-body .lcs-contacto__nota-titulo { margin: 0 0 12px; font-family: inherit; font-size: 11px; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; color: var(--ink, #0a3249); }
.lcs-contacto__datos { display: grid; gap: 12px; margin: 0; }
.lcs-contacto__dato { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.lcs-contacto__dato dt { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--ink, #0a3249); }
.lcs-contacto__dato dd { margin: 0; overflow-wrap: anywhere; }
.lcs-contacto__datos .bi { flex: none; font-size: 15px; line-height: 1; color: #00756e; }
.lcs-body .lcs-contacto__datos a { color: #0457b0; font-weight: 700; }
@media (max-width: 420px) {
  .lcs-contacto__dato { grid-template-columns: 1fr; }
  .lcs-contacto__dato dd { padding-left: 23px; }
}

/* Formulario */
.lcs-body .lcs-contacto__ayuda { margin: 0; font-size: 12px; color: #5c6f7a; }
.lcs-contacto__ayuda--inicio { margin-bottom: 16px !important; }
.lcs-contacto__req { color: #b42318; }
.lcs-contacto__opcional { font-weight: 600; color: #5c6f7a; }
.contact-form .field label { color: var(--ink, #0a3249); }
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder { color: #6f8694; opacity: 1; }
.contact-form .field select:focus-visible { outline: 3px solid #25bcd1; outline-offset: 4px; }
.contact-form .field textarea { min-height: 140px; }
.lcs-contacto__pie-campo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.lcs-contacto__contador { text-align: right; margin-left: auto !important; }
.lcs-contacto__contador.is-fuera { color: #b42318; font-weight: 700; }

/* Error por campo (lo marca lcs-contacto.js con .is-error + aria-invalid) */
.lcs-body .lcs-contacto__error { margin: 0; font-size: 12px; font-weight: 700; color: #b42318; }
.lcs-contacto__error:empty { display: none; }
.contact-form .field.is-error input,
.contact-form .field.is-error select,
.contact-form .field.is-error textarea { border-color: #b42318; background: #fff8f7; box-shadow: 0 0 0 1px #b42318; }

/* Consentimiento */
.lcs-contacto__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5; cursor: pointer; }
.lcs-contacto__check input { flex: none; width: 20px !important; height: 20px; min-height: 0 !important; margin: 1px 0 0; padding: 0 !important; accent-color: #00756e; cursor: pointer; }
.lcs-contacto__check input:focus-visible { outline: 3px solid #25bcd1; outline-offset: 3px; }
.lcs-body .lcs-contacto__check a { color: #0457b0; font-weight: 700; text-decoration: underline; }
.field.is-error .lcs-contacto__check input { outline: 2px solid #b42318; outline-offset: 2px; }

/* Honeypot: fuera de la vista y de la tabulación */
.lcs-contacto__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Botón: en el móvil de la referencia ocupa su ancho natural; aquí todo el ancho en pantallas chicas */
.contact-form button[type="submit"] { text-transform: uppercase; }
.contact-form button[type="submit"][disabled] { opacity: .7; cursor: progress; transform: none; }
@media (max-width: 420px) { .contact-form button[type="submit"] { width: 100%; } }

/* Mensajes (aria-live): .form-message de la referencia, visible cuando el JS quita [hidden] */
.contact-form .lcs-contacto__estado:not([hidden]) { display: flex; gap: 10px; align-items: flex-start; }
.contact-form .lcs-contacto__estado[hidden] { display: none; }
.lcs-contacto__estado .bi { flex: none; margin-top: 2px; }
.lcs-contacto__estado:focus { outline: none; }
.lcs-contacto__estado:focus-visible { outline: 3px solid #25bcd1; outline-offset: 3px; }
.lcs-contacto__estado--cargando { color: #4f6a7b !important; background: #f4f9fb !important; border-color: #dcebf0 !important; }
.lcs-contacto__estado--error { color: #8a1c1c !important; background: #fdeeee !important; border-color: #f0b4b4 !important; }

/* Mapa (solo con dirección confirmada) */
.lcs-contacto__mapa { padding: 70px 0; background: #fff; }
.lcs-contacto__mapa-marco { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 28rem; width: 100%; border-radius: var(--radius, 18px); background: #f4f9fb; }
.lcs-contacto__mapa-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 575.98px) { .lcs-contacto__mapa-marco { aspect-ratio: 4 / 3; } }
.lcs-contacto__mapa-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.lcs-contacto__mapa-aviso p { max-width: 36rem; margin: 0; color: #4f6a7b; }

/* 44 px de alto táctil en móvil y tablet */
@media (max-width: 991.98px), (pointer: coarse) {
  .lcs-contacto__datos a, .lcs-contacto__mapa-aviso a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}