/* ==========================================================================
   Shop at New Horizons — estilos base
   ========================================================================== */

:root {
	/* Marca */
	--nh-blue: #0054A6;
	--nh-blue-dark: #00438A;
	--nh-orange: #F26822;
	--nh-orange-dark: #D9571A;
	--nh-teal: #00AEEF;

	/* Neutros y estados */
	--nh-ink: #0F1E33;
	--nh-muted: #5B6878;
	--nh-line: #E2E8F0;
	--nh-mist: #F3F5F8;
	--nh-sky: #E6F2FC;
	--nh-peach: #FFEDE3;
	--nh-green: #1B8A5A;
	--nh-green-soft: #E7F5EE;
	--nh-warn: #B6440F;
	--nh-white: #FFFFFF;

	/* Tipografía */
	--nh-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--nh-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Forma */
	--nh-radius-sm: 10px;
	--nh-radius: 14px;
	--nh-radius-lg: 22px;
	--nh-radius-xl: 30px;
	--nh-pill: 999px;
	--nh-shadow: 0 30px 60px -24px rgba(15, 30, 51, .25);
	--nh-gutter: clamp(16px, 5.5vw, 80px);
	--nh-max: 1440px;

}

/* --- Base ---------------------------------------------------------------- */

body {
	font-family: var(--nh-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--nh-ink);
	background: var(--nh-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.nh-display {
	font-family: var(--nh-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--nh-ink);
	text-wrap: balance;
}
h1 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; }
h2 { font-size: clamp(26px, 2.6vw, 36px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); }

a { color: var(--nh-blue); text-underline-offset: 3px; }
a:hover { color: var(--nh-blue-dark); }

:focus-visible {
	outline: 2px solid var(--nh-orange);
	outline-offset: 2px;
}

::selection { background: var(--nh-sky); color: var(--nh-ink); }

/* --- Botones (WordPress y WooCommerce) ----------------------------------- */

button,
.button,
input[type="submit"],
.wp-element-button {
	font-family: var(--nh-font-body);
	font-weight: 700;
	border-radius: var(--nh-pill);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

a.nh-btn,
button.nh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1.5px solid transparent;
	border-radius: var(--nh-pill);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
a.nh-btn--orange, button.nh-btn--orange { background: var(--nh-orange); color: #fff; }
a.nh-btn--orange:hover, button.nh-btn--orange:hover { background: var(--nh-orange-dark); color: #fff; }
a.nh-btn--blue, button.nh-btn--blue { background: var(--nh-blue); color: #fff; }
a.nh-btn--blue:hover, button.nh-btn--blue:hover { background: var(--nh-blue-dark); color: #fff; }
a.nh-btn--ink, button.nh-btn--ink { background: var(--nh-ink); color: #fff; }
a.nh-btn--outline, button.nh-btn--outline { background: transparent; border-color: var(--nh-ink); color: var(--nh-ink); }
a.nh-btn--outline-light, button.nh-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }

/* --- Formularios --------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	font-family: var(--nh-font-body);
	font-size: 15px;
	color: var(--nh-ink);
	background: var(--nh-white);
	border: 1.5px solid var(--nh-line);
	border-radius: var(--nh-radius);
	padding: 12px 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--nh-blue);
	box-shadow: 0 0 0 3px rgba(0, 84, 166, .12);
}

/* --- Piezas reutilizables ------------------------------------------------ */

.nh-topbar {
	background: var(--nh-ink);
	color: #C9D4E3;
	font-size: 13px;
}
.nh-topbar strong { color: #fff; }

.nh-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--nh-pill);
	background: var(--nh-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.nh-badge--sale { background: var(--nh-orange); }

.nh-lang {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--nh-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}
.nh-lang--es { background: var(--nh-peach); color: var(--nh-warn); }
.nh-lang--en { background: var(--nh-sky); color: var(--nh-blue); }
.nh-lang--bi { background: var(--nh-green-soft); color: var(--nh-green); }

.nh-icon { flex: none; vertical-align: middle; }

.nh-hours { display: grid; gap: 4px; font-size: 14px; }
.nh-hours strong { color: var(--nh-ink); }

.nh-branches { display: grid; gap: 12px; }
.nh-branch {
	display: grid;
	gap: 3px;
	padding: 16px 18px;
	background: var(--nh-white);
	border-radius: 20px;
}
.nh-branch strong { font-family: var(--nh-font-display); font-size: 18px; }
.nh-branch span { color: var(--nh-muted); font-size: 14px; }
.nh-branch a { font-weight: 700; font-size: 14px; }

/* Tarjetas de color de la portada */
.nh-panel { border-radius: var(--nh-radius-xl); overflow: hidden; }
.nh-panel--blue { background: var(--nh-blue); color: #fff; }
.nh-panel--blue h1, .nh-panel--blue h2, .nh-panel--blue h3 { color: #fff; }
.nh-panel--sky { background: var(--nh-sky); }
.nh-panel--orange { background: var(--nh-orange); color: #fff; }
.nh-panel--orange h1, .nh-panel--orange h2, .nh-panel--orange h3 { color: #fff; }
.nh-panel--mist { background: var(--nh-mist); }

/* Botones de grado de la lista escolar */
.nh-grades { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-grades a, .nh-grades span {
	padding: 8px 15px;
	border-radius: var(--nh-pill);
	background: rgba(255,255,255,.12);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.nh-grades .is-active, .nh-grades a:hover { background: #fff; color: var(--nh-blue); }

/* --- Movimiento reducido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}