:root {
	--bg: #f4efe7;
	--bg-soft: #fbf8f3;
	--surface: rgba(255, 255, 255, 0.88);
	--surface-strong: #ffffff;
	--surface-muted: #f3ece4;
	--text: #25415f;
	--text-soft: #6d7f91;
	--heading: #183554;
	--line: rgba(16, 39, 67, 0.12);
	--accent: #c36f3c;
	--accent-strong: #9b5126;
	--accent-soft: rgba(195, 111, 60, 0.12);
	--shadow-lg: 0 26px 60px rgba(20, 40, 63, 0.12);
	--shadow-md: 0 14px 34px rgba(20, 40, 63, 0.08);
	--radius-xl: 30px;
	--radius-lg: 24px;
	--radius-md: 18px;
	--radius-sm: 12px;
}

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(195, 111, 60, 0.15), transparent 32%),
		radial-gradient(circle at top right, rgba(16, 39, 67, 0.12), transparent 28%),
		linear-gradient(180deg, #f8f4ee 0%, #f1ebe2 48%, #ede5da 100%);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

.site-backdrop {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%),
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.6), transparent 24%);
	opacity: 0.7;
}

.site-header {
	padding: 20px 0 14px;
}

.site-header-row,
.footer-row {
	align-items: center;
}

.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 6px 0;
	text-decoration: none;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: linear-gradient(145deg, #17324f, #274e77);
	box-shadow: var(--shadow-md);
	color: #fff;
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.brand-copy {
	display: flex;
	flex-direction: column;
}

.brand-eyebrow,
.contact-label,
.hero-kicker {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}

.brand-title {
	font-family: 'Inter', sans-serif;
	font-size: 38px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.045em;
	color: var(--heading);
}

.redes-sociales {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	font-size: 14px;
	color: var(--text-soft);
}

.contact-label {
	margin-right: 8px;
	white-space: nowrap;
	opacity: 0.9;
}

.redes-sociales a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.66);
	border: 1px solid rgba(23, 50, 79, 0.08);
	box-shadow: 0 10px 20px rgba(20, 40, 63, 0.08);
	font-size: 20px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.redes-sociales a:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 28px rgba(20, 40, 63, 0.14);
}

.fa-facebook-square,
.fa-linkedin,
.fa-youtube-square {
	color: var(--heading);
}

#informacion {
	padding: 6px 0 42px;
}

#informacion .container {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: 42px 48px;
}

#informacion h1,
#informacion h2,
#informacion h4,
.modal-title {
	font-family: 'Inter', sans-serif;
	color: var(--heading);
}

#informacion h1 {
	margin-bottom: 14px;
	font-size: 46px;
	line-height: 1.02;
	font-weight: 300;
	letter-spacing: -0.04em;
}

#informacion h2 {
	font-size: 38px;
	line-height: 1.05;
	font-weight: 400;
	letter-spacing: -0.04em;
}

#informacion h4 {
	margin-top: 0;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: -0.03em;
}

#informacion p,
#informacion li,
#informacion label,
#informacion input,
#informacion select,
#informacion button {
	position: relative;
	z-index: 1;
	color: var(--text);
}

#informacion p,
#informacion li {
	font-weight: 400;
	line-height: 1.72;
}

#informacion hr {
	margin: 20px 0 24px;
	border-color: var(--line);
}

.hero-copy {
	max-width: 860px;
	margin-bottom: 18px;
}

.access-card,
.card,
.modal-content {
	border: 1px solid rgba(16, 39, 67, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.access-card,
.card.bg-light {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(251, 248, 243, 0.96));
}

.card-header,
.modal-header,
.modal-footer {
	background: transparent;
	border-color: var(--line);
}

.card-header {
	padding: 20px 24px 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--heading);
}

.card-body {
	padding: 0 24px 24px;
}

.registro {
	display: none;
}

.registro label {
	text-align: right;
	font-weight: 700;
	color: var(--heading);
}

.form-control,
.input-group > .form-control,
select.form-control {
	min-height: 52px;
	border: 1px solid rgba(23, 50, 79, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: none;
	color: var(--text);
}

.form-control:focus,
select.form-control:focus {
	border-color: rgba(195, 111, 60, 0.55);
	box-shadow: 0 0 0 4px rgba(195, 111, 60, 0.12);
}

.input-group > .form-control:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group-append .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
	transform: translateY(-1px);
}

.btn-primary,
.btn-secondary,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
	background: linear-gradient(135deg, var(--accent), var(--accent-strong));
	border-color: transparent;
	box-shadow: 0 16px 28px rgba(155, 81, 38, 0.22);
	color: #fff;
}

.btn-outline-primary,
.btn-outline-secondary {
	background: rgba(255, 255, 255, 0.84);
	border-color: rgba(16, 39, 67, 0.14);
	color: var(--heading);
}

.loading {
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-weight: 700;
}

.catalog-grid {
	margin-top: 12px;
}

.libro {
	margin-bottom: 30px;
}

.libros .modal img,
.libro img {
	width: 100%;
}

.libro > img {
	border-top-left-radius: 26px;
	border-top-right-radius: 26px;
	aspect-ratio: 0.78;
	object-fit: cover;
	box-shadow: 0 18px 28px rgba(20, 40, 63, 0.08);
}

.libro > div {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 238, 229, 0.98));
	padding: 16px 18px;
	border-left: 1px solid rgba(16, 39, 67, 0.08);
	border-right: 1px solid rgba(16, 39, 67, 0.08);
}

.libro > div:last-child {
	border-bottom: 1px solid rgba(16, 39, 67, 0.08);
	border-bottom-left-radius: 26px;
	border-bottom-right-radius: 26px;
	padding-top: 0;
	padding-bottom: 18px;
}

.libro h6 {
	min-height: 84px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 800;
	color: var(--heading);
}

.libro.h300 img {
	height: auto;
}

.cuadernillos a,
.libros .modal a {
	color: var(--heading);
}

.cuadernillos a:hover,
.libros .modal a:hover {
	color: var(--accent);
	text-decoration: none;
}

.cuadernillos li,
.libros .modal li {
	list-style: none;
	margin-bottom: 8px;
}

.cuadernillos ul,
.libros .modal ul {
	padding: 0;
}

.libros .modal a .fa-download {
	color: var(--accent);
	margin-right: 8px;
}

.modal-dialog.modal-lg {
	max-width: 980px;
}

.modal {
	position: fixed;
	z-index: 1060;
}

.modal-content {
	background: linear-gradient(180deg, #fffdf9, #f6efe5);
}

.modal-header,
.modal-footer {
	padding: 20px 24px;
}

.modal-title {
	font-size: 32px;
	line-height: 1.06;
	font-weight: 400;
	letter-spacing: -0.04em;
}

.modal-body {
	padding: 24px;
}

.modal-body p strong {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--heading);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.close {
	font-size: 30px;
	color: var(--heading);
	text-shadow: none;
	opacity: 1;
}

.modal-backdrop.show {
	opacity: 0.68;
	z-index: 1040;
}

footer.site-footer {
	padding: 0 0 34px;
	font-size: 12px;
	color: var(--text-soft);
}

footer.site-footer .container {
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 24px;
	box-shadow: var(--shadow-md);
	padding: 22px 28px;
}

footer .copyright p {
	margin: 0;
	text-align: right;
}

footer a {
	color: var(--heading);
	font-weight: 700;
}

footer a:hover {
	color: var(--accent);
	text-decoration: none;
}

@media (max-width: 992px) {
	.site-header,
	#informacion {
		padding-left: 0;
		padding-right: 0;
	}

	#informacion .container,
	footer.site-footer .container {
		padding-left: 28px;
		padding-right: 28px;
	}

	.brand-title {
		font-size: 34px;
	}

	#informacion h1 {
		font-size: 44px;
	}

	.libro h6 {
		min-height: 96px;
	}
}

@media (max-width: 768px) {
	.site-header {
		padding-top: 18px;
	}

	.site-header-row,
	.footer-row {
		text-align: center;
	}

	.brand-link {
		justify-content: center;
	}

	.brand-title {
		font-size: 30px;
	}

	.redes-sociales {
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 12px;
	}

	#informacion .container,
	footer.site-footer .container {
		padding: 24px 20px;
		border-radius: 22px;
	}

	#informacion h1 {
		font-size: 38px;
	}

	#informacion h2 {
		font-size: 34px;
	}

	#informacion h4 {
		font-size: 24px;
	}

	.registro label,
	footer .copyright p {
		text-align: left;
	}

	.input-group {
		display: block;
	}

	.input-group > .form-control {
		width: 100%;
		border-radius: 14px !important;
		margin-bottom: 10px;
	}

	.input-group-append {
		display: block;
	}

	.input-group-append .btn {
		width: 100%;
		border-radius: 999px !important;
	}

	.libro h6 {
		min-height: 0;
	}
}