/* Páginas normales y 404 (spec §6.11 y §6.13) */
.nm-page { max-width: var(--nm-container); margin: 0 auto; padding: var(--nm-gutter); }
.nm-page-title { font-family: var(--nm-font-display); font-weight: 800; text-transform: uppercase; font-size: var(--nm-fs-34); color: var(--nm-navy); margin: 0 0 24px; }
.nm-page-content { max-width: 70ch; }
.nm-page-content h2 { font-family: var(--nm-font-display); font-size: var(--nm-fs-24); color: var(--nm-navy); margin: 32px 0 12px; }
.nm-page-content h3 { font-family: var(--nm-font-display); font-size: var(--nm-fs-18); color: var(--nm-navy); margin: 24px 0 8px; }
.nm-page-content p { margin: 0 0 16px; }
.nm-page-content ul, .nm-page-content ol { margin: 0 0 16px 20px; }
/* Íconos SVG heredados del contenido antiguo (Elementor/Woodmart): no traen tamaño y, sin esto,
   se dibujan a todo el ancho de la columna. 48px es un tamaño de ícono; el contenido real
   (iframe del mapa, fotos) no se toca. */
.nm-page-content svg { display: inline-block; width: 48px; height: 48px; max-width: 48px; vertical-align: middle; }
.nm-page-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--nm-radius); }

.nm-404 { max-width: var(--nm-container); margin: 0 auto; padding: 48px var(--nm-gutter); text-align: center; }
.nm-404-title { font-family: var(--nm-font-display); font-weight: 800; text-transform: uppercase; font-size: var(--nm-fs-34); color: var(--nm-navy); margin: 0 0 12px; }
.nm-404-text { color: var(--nm-muted); max-width: 60ch; margin: 0 auto 32px; }
.nm-404 .nm-search { max-width: 520px; margin: 0 auto 48px; }

/* Las tarjetas de licencias son las mismas de la portada (home/tiles.php): el
   text-align: center del 404 no debe filtrarse a ellas (títulos y pills quedan
   centrados en vez de a la izquierda como en la portada), y su .nm-wrap no debe
   sumar un padding-inline extra al de .nm-404 (las tarjetas quedan más angostas
   que en la portada y "Fútbol chileno" pasa a dos líneas, desalineando las 4). */
.nm-404 .nm-home-tiles { text-align: start; }
.nm-404 .nm-home-tiles .nm-wrap { padding-inline: 0; }

@media (max-width: 820px) {
	.nm-page, .nm-404 { padding: 16px; }
	.nm-page-title, .nm-404-title { font-size: var(--nm-fs-24); }
}

/* Contacto (spec §6.10) */
.nm-contacto { max-width: var(--nm-container); margin: 0 auto; padding: var(--nm-gutter); }
.nm-contacto-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: calc(var(--nm-gutter) * 2); align-items: start; }
.nm-contacto-subtitulo { font-family: var(--nm-font-display); font-size: var(--nm-fs-18); color: var(--nm-navy); margin: 0 0 16px; }
.nm-contacto-datos { background: var(--nm-soft); border-radius: var(--nm-radius); padding: var(--nm-gutter); display: grid; gap: 12px; }
.nm-contacto-whatsapp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nm-green-dark); font-weight: 700; text-decoration: none; }
.nm-contacto-email { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nm-navy); }
.nm-contacto-direccion { display: flex; align-items: center; gap: 8px; margin: 0; }
.nm-contacto-horario { margin: 0; color: var(--nm-muted); font-size: var(--nm-fs-14); }

@media (max-width: 820px) {
	.nm-contacto { padding: 16px; }
	.nm-contacto-grid { grid-template-columns: 1fr; gap: var(--nm-gutter); }
}

/* Formulario de contacto */
.nm-contacto-formulario { display: grid; gap: 16px; }
.nm-campo { display: grid; gap: 6px; margin: 0; }
.nm-campo label { font-size: var(--nm-fs-14); font-weight: 600; }
.nm-campo input, .nm-campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); font: inherit; }
.nm-campo input:focus-visible, .nm-campo textarea:focus-visible { outline: 2px solid var(--nm-navy); outline-offset: 1px; }
.nm-campo--check label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
/* `.nm-campo input { width: 100% }` también estiraba la casilla: ocupaba media fila y empujaba el texto. */
.nm-campo--check input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--nm-navy); }
/* El campo trampa tiene que quedar realmente oculto para una persona real, no solo fuera de la
   pantalla: si alguien lo completa (por ejemplo, el autocompletado del navegador, o un lector de
   pantalla que igual lo anuncia), el formulario responde éxito y el mensaje se descarta en
   silencio (ver inc/contact-form.php), así que esa persona nunca sabría que su mensaje no llegó.
   left:-9999px por sí solo no alcanza: el input sigue teniendo tamaño y visibility: visible, así
   que el autocompletado puede rellenarlo igual y sigue en el árbol de accesibilidad. Por eso se
   suma visibility: hidden, que lo saca de ambos. */
.nm-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }
.nm-contacto-aviso { padding: 12px 16px; border-radius: var(--nm-radius); margin: 0 0 16px; }
.nm-contacto-aviso--exito { background: var(--nm-soft); color: var(--nm-navy); border-left: 4px solid var(--nm-green); }
.nm-contacto-aviso--error { background: var(--nm-soft); color: var(--nm-ink); border-left: 4px solid var(--nm-red); }