/* ==========================================================================
   Natalia Jiménez — Página de contacto
   Se carga solo en la plantilla "Contacto" (ver inc/contacto.php).
   Hereda la paleta y las tipografías de nj-style.css.
   ========================================================================== */

/* Astra le pone padding y max-width a #content en todas las páginas menos
   el home. Acá la foto del encabezado va de borde a borde, así que se lo
   sacamos igual que en el home y el ancho lo maneja cada sección con su
   propio max-width. */
body.nj-contacto .ast-container,
body.nj-contacto #content,
body.nj-contacto #primary,
body.nj-contacto .entry-content {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Astra imprime el título de la página arriba de todo; acá el título vive
   dentro del encabezado con foto, así que el suyo sobra. */
body.nj-contacto .entry-header,
body.nj-contacto .ast-single-entry-banner {
	display: none;
}

/* ---------------------------------- Encabezado con foto ---------------------------------- */

.nj-contacto-hero {
	position: relative;
	min-height: 62svh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	background-color: var(--nj-ink);
}

.nj-contacto-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* El velo oscuro no es decoración: el texto blanco tiene que leerse
	   sobre cualquier foto que Natalia suba, incluida una clara. */
	filter: brightness(0.62);
	transform: scale(1.06);
	animation: nj-contacto-zoom 9s ease-out forwards;
}

@keyframes nj-contacto-zoom {
	to {
		transform: scale(1);
	}
}

.nj-contacto-hero__inner {
	position: relative;
	max-width: 720px;
	padding: 0 32px 112px;
	text-align: center;
	color: #fff;
}

.nj-contacto-hero__eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 20px;
	opacity: 0.85;
}

body.nj-theme .nj-contacto-hero__inner h1 {
	font-family: var(--nj-font-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.1;
	margin: 0 0 20px;
	color: #fff;
}

.nj-contacto-hero__inner p {
	font-size: 16px;
	line-height: 1.8;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
}

/* ---------------------------------- Canales directos ---------------------------------- */

/* Van arriba del formulario y montados sobre la foto: la visitante que ya
   decidió no debería tener que scrollear un formulario para encontrar el
   WhatsApp. */
/* El fondo del contenedor es lo que se ve como línea entre tarjetas (gap de
   1px sobre var(--nj-line)), así que no lleva padding lateral: el margen con
   el borde de la pantalla lo da el max-width, alineado con la grilla de abajo. */
.nj-canales {
	position: relative;
	z-index: 2;
	max-width: 1056px;
	width: calc(100% - 64px);
	margin: -64px auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--nj-line);
	border: 1px solid var(--nj-line);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.nj-canales.is-visible {
	opacity: 1;
	transform: translateY(0);
}

body.nj-theme .nj-canal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 34px 20px;
	background: var(--nj-ivory);
	color: var(--nj-ink);
	text-decoration: none;
	text-align: center;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.nj-theme .nj-canal:hover {
	background: var(--nj-ink);
	color: var(--nj-ivory);
}

.nj-canal svg {
	color: var(--nj-bronze);
	transition: color 0.25s ease;
	margin-bottom: 4px;
}

body.nj-theme .nj-canal:hover svg {
	color: var(--nj-bronze-soft);
}

.nj-canal__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.nj-canal__valor {
	font-size: 13px;
	opacity: 0.6;
	word-break: break-word;
}

/* ---------------------------------- Grilla formulario + info ---------------------------------- */

.nj-contacto-grid {
	max-width: 1120px;
	margin: 0 auto;
	padding: 96px 32px 140px;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 80px;
	align-items: start;
}

.nj-contacto-form,
.nj-contacto-info {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.nj-contacto-form.is-visible,
.nj-contacto-info.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nj-contacto-form__eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--nj-bronze);
	margin-bottom: 14px;
}

body.nj-theme .nj-contacto-form h2 {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 500;
	margin: 0 0 14px;
}

.nj-contacto-form__bajada {
	color: var(--nj-ink-soft);
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 40px;
	max-width: 46ch;
}

/* ---------------------------------- Formulario ---------------------------------- */

.nj-form__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.nj-form__campo {
	display: flex;
	flex-direction: column;
	margin: 0 0 30px;
}

.nj-form__campo label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color: var(--nj-ink-soft);
	margin-bottom: 10px;
}

.nj-form__opcional {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	opacity: 0.65;
}

/* Campos con una sola línea abajo en vez de una caja con borde y fondo:
   es el mismo recurso que usan los CTA del sitio (texto + línea fina) y
   evita que el formulario parezca pegado de otro theme. */
body.nj-contacto .nj-form__campo input,
body.nj-contacto .nj-form__campo select,
body.nj-contacto .nj-form__campo textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--nj-line);
	border-radius: 0;
	box-shadow: none;
	padding: 10px 0;
	font-family: var(--nj-font-body);
	font-size: 15px;
	color: var(--nj-ink);
	transition: border-color 0.25s ease;
}

body.nj-contacto .nj-form__campo textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.7;
}

body.nj-contacto .nj-form__campo input:focus,
body.nj-contacto .nj-form__campo select:focus,
body.nj-contacto .nj-form__campo textarea:focus {
	outline: none;
	border-bottom-color: var(--nj-bronze);
}

body.nj-contacto .nj-form__campo textarea::placeholder {
	color: rgba(28, 24, 16, 0.35);
}

/* El select nativo trae flecha y fondo propios en cada navegador; se
   apagan y se dibuja una flecha igual en todos. */
body.nj-contacto .nj-form__campo select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b08d57' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	padding-right: 24px;
	cursor: pointer;
}

.nj-form__campo.tiene-error input,
.nj-form__campo.tiene-error select,
.nj-form__campo.tiene-error textarea {
	border-bottom-color: #a4362f;
}

.nj-form__error {
	color: #a4362f;
	font-size: 12.5px;
	margin-top: 8px;
}

/* La trampa para robots. No usa display:none: hay bots que ignoran los
   campos ocultos justamente por eso. Se saca de la vista sin ocultarla a
   los ojos del que solo lee el HTML. */
.nj-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nj-form__pie {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 8px;
}

body.nj-contacto .nj-form__enviar {
	display: inline-block;
	padding: 15px 38px;
	background: var(--nj-ink);
	color: var(--nj-ivory);
	border: none;
	border-radius: 0;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.nj-contacto .nj-form__enviar:hover,
body.nj-contacto .nj-form__enviar:focus {
	background: var(--nj-bronze);
	color: var(--nj-ivory);
}

.nj-form__nota {
	flex: 1 1 240px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--nj-ink-soft);
}

/* ---------------------------------- Avisos (enviado / error) ---------------------------------- */

.nj-aviso {
	border: 1px solid var(--nj-line);
	border-left: 2px solid var(--nj-bronze);
	padding: 32px 34px;
	background: rgba(255, 255, 255, 0.55);
}

body.nj-theme .nj-aviso h2 {
	font-size: clamp(24px, 2.6vw, 30px);
	margin: 0 0 12px;
}

.nj-aviso p {
	margin: 0 0 20px;
	color: var(--nj-ink-soft);
	line-height: 1.75;
	font-size: 15px;
}

.nj-aviso--error {
	border-left-color: #a4362f;
	padding: 18px 22px;
	margin-bottom: 32px;
}

.nj-aviso--error p {
	margin: 0;
	color: #a4362f;
	font-size: 14px;
}

/* ---------------------------------- Columna de información ---------------------------------- */

.nj-info-bloque {
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--nj-line);
}

.nj-info-bloque:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

body.nj-theme .nj-info-bloque h2 {
	font-size: 13px;
	font-family: var(--nj-font-body);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	color: var(--nj-bronze);
	margin: 0 0 22px;
}

body.nj-theme .nj-info-bloque h3 {
	font-family: var(--nj-font-body);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color: var(--nj-ink-soft);
	margin: 28px 0 10px;
}

.nj-info-dato {
	font-family: var(--nj-font-display);
	font-size: 21px;
	line-height: 1.5;
	margin: 0 0 6px;
}

.nj-info-nota,
.nj-info-bloque p {
	color: var(--nj-ink-soft);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 14px;
}

body.nj-theme .nj-info-link {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--nj-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nj-bronze);
	padding-bottom: 5px;
	transition: color 0.2s ease;
}

body.nj-theme .nj-info-link:hover {
	color: var(--nj-bronze);
}

.nj-info-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nj-info-lista li {
	font-size: 14.5px;
	color: var(--nj-ink-soft);
	padding: 7px 0;
	border-bottom: 1px dashed var(--nj-line);
}

.nj-info-lista li:last-child {
	border-bottom: none;
}

/* Pasos numerados: el número lo dibuja el CSS (counter) para que el HTML
   siga siendo una <ol> limpia y el número tenga la display del sitio. */
.nj-pasos {
	list-style: none;
	counter-reset: nj-paso;
	margin: 0;
	padding: 0;
}

.nj-pasos li {
	position: relative;
	counter-increment: nj-paso;
	padding-left: 46px;
	margin-bottom: 26px;
}

.nj-pasos li:last-child {
	margin-bottom: 0;
}

.nj-pasos li::before {
	content: counter(nj-paso);
	position: absolute;
	left: 0;
	top: -2px;
	font-family: var(--nj-font-display);
	font-size: 26px;
	color: var(--nj-bronze-soft);
	line-height: 1;
}

body.nj-theme .nj-pasos h3 {
	font-family: var(--nj-font-display);
	font-size: 19px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--nj-ink);
	margin: 0 0 6px;
}

.nj-pasos p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--nj-ink-soft);
}

.nj-info-bloque--tienda .nj-cta-secundario {
	margin-top: 4px;
}

/* ---------------------------------- Celular / tablet ---------------------------------- */

@media (max-width: 980px) {
	.nj-contacto-grid {
		grid-template-columns: 1fr;
		gap: 64px;
		padding: 72px 24px 110px;
	}
}

@media (max-width: 640px) {
	.nj-contacto-hero {
		min-height: 54svh;
	}

	.nj-contacto-hero__inner {
		padding: 0 24px 84px;
	}

	/* Sin la superposición sobre la foto: en pantallas angostas las
	   tarjetas quedan una debajo de la otra y montarlas tapa el texto
	   del encabezado. */
	.nj-canales {
		width: calc(100% - 48px);
		margin-top: 0;
		grid-template-columns: 1fr 1fr;
	}

	body.nj-theme .nj-canal {
		padding: 24px 14px;
	}

	.nj-form__fila {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nj-form__pie {
		gap: 18px;
	}

	body.nj-contacto .nj-form__enviar {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------- Accesibilidad ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nj-canales,
	.nj-contacto-form,
	.nj-contacto-info {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nj-contacto-hero__bg {
		animation: none;
		transform: none;
	}
}