@charset "UTF-8";
/* CSS Document */ :root {
	--text: #121212;
	--muted: #6a6a6a;
	--line: #efefef;
	--contentPadX: clamp(28px, 4vw, 64px);
	--contentPadY: clamp(22px, 3vw, 42px);
	--menu-gap: clamp(16px, 2vw, 38px);
	--ease-spring: cubic-bezier(.16, 1.1, .22, 1);
	--shadow-modal: 0 18px 44px rgba(0, 0, 0, .18);
	--shadow-soft: 0 10px 26px rgba(0, 0, 0, .12);
	--radius: 10px;
}
* {
	box-sizing: border-box;
}
html, body {
	height: 100%;
}
body {
	margin: 0;
	color: var(--text);
	font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto;
	background: #fff;
}
.page {
	--char-bg: #f3d5d7;
	--campus-bg: #f1f1f1;
	--te-interesa-bg: linear-gradient(125deg, #fff 50%, #e20717 50%);
	min-height: 100svh;
	min-width: 325px;
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #fff;
}
/* Header */
.topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: var(--contentPadY) 0 0;
	position: absolute;
	z-index: 90;
	width: min(calc(100% - (var(--contentPadX) * 2)), calc(1200px + (var(--contentPadX) * 2)));
	left: 50%;
	transform: translateX(-50%);
	background: transparent;
	top: 0;
}
.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	padding-top: 2px;
	flex: 0 0 auto;
}
.brand img {
	height: 28px;
	width: auto;
	display: block;
}
.menu {
	display: flex;
	align-items: center;
	gap: var(--menu-gap);
	margin-top: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
	flex: 1 1 auto;
}
.menu a {
	text-decoration: none;
	color: var(--text);
	font-size: 16px;
	font-weight: 500;
	padding: 6px 2px 10px;
	border-bottom: 2px solid transparent;
	outline: none;
	white-space: nowrap;
}
.menu a:hover {
	border-bottom-color: rgba(18, 18, 18, .35);
}
.menu a.is-active {
	border-bottom-color: #2a2a2a;
}
.menu .cta {
	margin-left: 12px;
	padding: 12px 18px;
	border-radius: 8px;
	background: #151515;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 0;
	white-space: nowrap;
}
/* STACK con scroll normal */
.stack {
	position: relative;
	min-height: calc(100svh - 112px);
	height: auto;
	margin: 0;
}
/* Sections sin padding; la activa pasa a relative para generar altura */
.section {
	position: absolute;
	inset: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(14px);
	transition: opacity 240ms ease, transform 520ms var(--ease-spring);
	z-index: 0;
}
.section.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	z-index: 2;
}
/* Hero base */
.hero {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 0;
	align-items: stretch;
	min-height: 100svh;
	height: auto;
}
/* Padding SOLO en hero-left */
.hero-left {
	padding: 150px var(--contentPadX) var(--contentPadY);
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.hero-left-inner {
	width: 100%;
	max-width: 600px;
}
.title {
	margin: 0 0 14px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: clamp(48px, 5.6vw, 82px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-weight: 800;
}
.subtitle {
	margin: 0 0 28px;
	font-size: clamp(18px, 2.1vw, 28px);
	line-height: 1.25;
	color: var(--muted);
	font-weight: 500;
	max-width: 72ch;
}
.subtitle .subtitle-logo {
    width: 300px;
    height: auto;
    margin: 10px 0;
}
.hero-right {
	position: relative;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
/* Material icon helper */
.mi {
	font-family: "Material Icons";
	font-weight: normal;
	font-style: normal;
	font-size: 22px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	transform: translateY(1px);
}
/* ===== La Colección ===== */
.collection-bg {
	background: radial-gradient(900px 480px at 78% 38%, rgba(0, 0, 0, .06), transparent 55%), radial-gradient(700px 380px at 60% 72%, rgba(0, 0, 0, .035), transparent 62%), #fff;
}
.links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
	padding-top: 14px;
	max-width: 560px;
}
.action-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	font-size: 16px;
	color: #1b1b1b;
	text-decoration: none;
	font-weight: 700;
	width: fit-content;
	outline: none;
	min-width: 325px;
}
.action-link:hover {
	opacity: .86;
}
.action-link.external-link {
    min-width: auto;
}
.action-link-mwa {
    min-width: auto;
}
.books {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.books img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
    padding: 150px 100px 0 50px;
}
/* Flechas fijas */
.nav-arrows {
	position: fixed;
	right: 52px;
	bottom: 42px;
	display: flex;
	gap: 18px;
	z-index: 95;
	display: none; /*desactivem fletxes de navegació per si es necessiten més endavant */
}
.arrow-btn {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 0;
	background: #e9e9e9;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
	user-select: none;
	padding: 0;
}
.arrow-btn:active {
	transform: translateY(1px);
}
.arrow-btn .material-icons {
	font-size: 22px;
	color: #1b1b1b;
	opacity: .92;
}
.char-right {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	background: transparent; /* default */
}
#caracteristicas .char-right {
	background: var(--char-bg);
}
#campus .char-right {
	background: var(--campus-bg);
}
#te-interesa .char-right {
	background: var(--te-interesa-bg);
}
.char-right img.right-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain; /* se ve completa */
	object-position: right bottom; /* alineada abajo derecha */
	padding: 0 0 0 25px;
}
/* ===== Características ===== */
.char-list {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 600px;
}
.char-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.chip-label {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .2px;
}
.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}
.chip.pill {
	border-radius: 999px;
	padding: 0 10px;
}
/* INLINE blocks */
.char-inline {
	display: none;
	background: #f3f3f3;
	border-top: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 -10px 22px rgba(0, 0, 0, .10);
	padding: 26px 0 40px;
	position: relative;
	z-index: 20;
}
.char-inline.is-open {
	display: block;
}
.ci-inner {
	padding: 0 var(--contentPadX);
	max-width: 1460px;
	margin: 0 auto;
}
.ci-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}
.ci-title {
	margin: 0;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 30px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.ci-close {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 10px;
	line-height: 1;
}
.ci-close .material-icons {
	font-size: 34px;
	color: #111;
	opacity: .9;
}
.ci-close:hover {
	background: rgba(0, 0, 0, .06);
}
.ci-text {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.55;
	color: #1f1f1f;
}
.ci-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-top: 18px;
}
.ci-col h4 {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: .3px;
	text-transform: uppercase;
	font-weight: 800;
	color: #111;
}
.ci-col .row {
	font-size: 13px;
	line-height: 1.45;
	margin: 3px 0;
	color: #111;
}
.ci-cta {
	display: block;
	width: fit-content;
	margin: 30px auto 0;
	border: 0;
	border-radius: 6px;
	padding: 12px 18px;
	background: #e31b1b;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(227, 27, 27, .25);
}
/* ===== Unidades ===== */
.units-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 54px;
	margin-top: 18px;
}
.units-grid.units-grid-3c {
	grid-template-columns: 1fr 1fr 1fr;
}
.units-grid.units-grid-4c {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.unit-block h4 {
	margin: 0 0 8px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 20px;
	letter-spacing: -0.01em;
	font-weight: 800;
	color: #111;
}
.unit-block p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #1f1f1f;
	max-width: 72ch;
}
.unit-img {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.unit-img img {
    width: 100%;
    height: auto;
    display: block;
}
#charInlineUnidades .unit-img {
	cursor: zoom-in;
}
#charInlineUnidades .unit-img::after {
	content: "open_in_full";
	position: absolute;
	right: 12px;
	top: 12px;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-family: "Material Icons";
	font-size: 26px;
	line-height: 1;
	color: #111;
	background: rgba(255, 255, 255, .88);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
	pointer-events: none;
}
#charInlineUnidades .unit-img:hover::after,
#charInlineUnidades .unit-img:focus-within::after {
	opacity: 1;
	transform: translateY(0);
	background: rgba(255, 255, 255, .96);
}
.img-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.img-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 180ms ease, visibility 0s linear 0s;
}
.img-lightbox-inner {
	position: absolute;
	inset: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.img-lightbox-content {
	position: relative;
	max-width: min(96vw, 1600px);
	width: fit-content;
	max-height: calc(100vh - 48px);
	padding: 64px 20px 20px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-modal);
	border: 1px solid rgba(0,0,0,.06);
	overflow: auto;
}
.img-lightbox-image {
	display: block;
	max-width: min(calc(96vw - 40px), 1560px);
	max-height: calc(100vh - 152px);
	width: auto;
	height: auto;
	margin: 0 auto;
	box-shadow: none;
	background: transparent;
	border-radius: 6px;
}
.img-lightbox-close {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #111;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.img-lightbox-close .material-icons {
	font-size: 34px;
	line-height: 1;
	display: block;
}
.img-lightbox-close:hover {
	background: rgba(0, 0, 0, .06);
}
#teInlineLecturas .unit-img img {
    padding-right: 50%;
}
.unit-media {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.unit-media iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.unit-cita {}
.unit-cita-text, p.unit-cita-text {
    font-weight: 300;
    font-size: 16px;
}
.unit-cita-autor, p.unit-cita-autor {
    margin-top: -10px;
}
.units-section-title {
	margin-top: 36px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 30px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111;
}
.units-title {
	margin: 10px 0 15px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 24px;
	font-weight: 800;
	color: #111;
}
.units-subtitle {
	margin: 10px 0 10px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 20px;
	font-weight: 800;
	color: #111;
}
.alt-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 34px;
	margin-top: 16px;
	align-items: start;
}
.alt-grid.alt-grid-2eq{
	grid-template-columns: 1fr 1fr;
}

.alt-grid.alt-grid-2eq .unit-block{
	min-width: 0;
}
.alt-grid.alt-grid-2eq .unit-block .unit-img{
	width: 100%;
}

.alt-grid.alt-grid-2eq .unit-block .unit-img img{
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}
.checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
	line-height: 1.55;
	color: #1f1f1f;
}
.checklist li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.checklist .tick {
	margin-top: 2px;
	font-family: "Material Icons";
	font-size: 18px;
	line-height: 1;
	color: #111;
	opacity: .9;
}
.plain-block h4 {
	margin: 18px 0 8px;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 24px;
	font-weight: 800;
	color: #111;
	letter-spacing: -0.01em;
}
.plain-block p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #1f1f1f;
	max-width: 120ch;
}
/* =========================
       MODAL (La colección)
    ========================== */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease-out, visibility 0s linear 180ms;
	z-index: 9999;
}
.modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 180ms ease-out, visibility 0s linear 0s;
}
.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40px);
  width: 80vw;
  max-width: 1200px;
  max-height: 80vh;

  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);

  opacity: 0;
  will-change: transform, opacity;
}
.modal.modal--narrow{
	width: 60vw;
	max-width: 800px;
}
.modal.modal--unit-model{
	width: 80vw;
	max-width: 1200px;
}
.modal.modal--unit-model.modal--cols-1{
	width: 38vw;
	max-width: 480px;
}
.modal.modal--unit-model.modal--cols-2{
	width: 60vw;
	max-width: 800px;
}
.modal.modal--unit-model.modal--cols-3{
	width: 72vw;
	max-width: 980px;
}
.modal.modal--unit-model.modal--cols-4{
	width: 80vw;
	max-width: 1200px;
}
.modal.modal--unit-model.modal--cols-5{
	width: 88vw;
	max-width: 1380px;
}
.modal.modal--unit-model.modal--cols-6{
	width: 92vw;
	max-width: 1560px;
}
.modal-overlay.is-open .modal{
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: transform 420ms var(--ease-spring), opacity 220ms ease-out;
}
.modal-scroll {
	max-height: inherit;
	overflow: auto;
}
.modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: clamp(26px, 3vw, 38px) clamp(26px, 3vw, 42px) 14px;
	gap: 18px;
}
.modal-title {
	margin: 0;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111;
}
.modal-close {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 6px 10px;
	margin-top: 2px;
	border-radius: 10px;
	line-height: 1;
}
.modal-close .material-icons {
	font-size: 38px;
	color: #111;
	opacity: .9;
}
.modal-close:hover {
	background: rgba(0, 0, 0, .06);
}
.modal-body {
	padding: 16px clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px);
}
.video-shell {
	border-radius: 6px;
	background: #fff;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.video-stage {
	border-radius: 4px;
	padding: 16px;
	background: #efefef;
}
.video-stageInner {
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.video-embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .20);
	background: #000;
	position: relative;
}
.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-responsive {
	width: 100%;
	height: auto;
	max-width: 100%;
}
.video-cover {
	position: relative;
	cursor: pointer;
	background: #000;
}

.video-cover img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.video-cover-play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.video-cover-play .material-icons {
	font-size: 38px;
}

.video-cover-play:hover {
	background: rgba(0, 0, 0, .8);
}
.pf-list {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: #222;
}
.pf-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pf-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(18, 18, 18, .06);
	margin-top: 1px;
}
.pf-icon .material-icons {
	font-size: 18px;
	color: #151515;
	opacity: .9;
}
.unit-model-modal{
	width: 100%;
}

.unit-model-lead{
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.4;
	color: #1f1f1f;
	font-weight: 600;
}

.unit-model-grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	align-items: start;
}
.modal--unit-model.modal--cols-1 .unit-model-grid{
	grid-template-columns: repeat(1, 1fr);
}
.modal--narrow .unit-model-grid{
	grid-template-columns: repeat(2, 1fr);
}
.modal--unit-model.modal--cols-2 .unit-model-grid{
	grid-template-columns: repeat(2, 1fr);
}
.modal--unit-model.modal--cols-3 .unit-model-grid{
	grid-template-columns: repeat(3, 1fr);
}
.modal--unit-model.modal--cols-4 .unit-model-grid{
	grid-template-columns: repeat(4, 1fr);
}
.modal--unit-model.modal--cols-5 .unit-model-grid{
	grid-template-columns: repeat(5, 1fr);
}
.modal--unit-model.modal--cols-6 .unit-model-grid{
	grid-template-columns: repeat(6, 1fr);
}
.unit-model-card{
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: #111;
}

.unit-model-card img{
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	box-shadow: 0 10px 22px rgba(0,0,0,.12);
	border-radius: 4px;
}

.unit-model-name{
	font-size: 14px;
	line-height: 1.35;
	font-weight: 700;
	text-align: center;
}

.unit-model-card:hover .unit-model-name{
	text-decoration: underline;
}

@media (max-width: 1100px){
	.unit-model-grid{
		grid-template-columns: repeat(3, 1fr);
	}
	.modal.modal--unit-model,
	.modal.modal--narrow{
		left: 50%;
		right: auto;
		width: calc(100vw - 80px) !important;
		max-width: none !important;
	}
	.modal.modal--unit-model .unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.modal.modal--narrow .unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.modal.modal--unit-model.modal--cols-1 .unit-model-grid{
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 700px){
	.unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.modal.modal--unit-model,
	.modal.modal--narrow{
		left: 50%;
		right: auto;
		width: calc(100vw - 80px) !important;
		max-width: none !important;
	}
	.modal.modal--unit-model .unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.modal.modal--narrow .unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.modal.modal--unit-model.modal--cols-1 .unit-model-grid{
		grid-template-columns: repeat(1, 1fr);
	}
	#charInlineUnidades .unit-img {
		cursor: default;
	}
	#charInlineUnidades .unit-img::after {
		display: none;
	}
	.img-lightbox-inner {
		inset: 12px;
	}
	.img-lightbox-content {
		width: 100%;
		padding: 52px 12px 12px;
	}
	.img-lightbox-image {
		max-width: calc(100vw - 48px);
		max-height: calc(100vh - 108px);
	}
	.img-lightbox-close {
		top: 8px;
		right: 8px;
		left: auto;
		width: 42px;
		height: 42px;
	}
}

/* MOBILE */
@media (max-width: 860px) {
	.topbar {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: auto;
		left: auto;
		transform: none;
		padding-left: var(--contentPadX);
		padding-right: var(--contentPadX);
		padding-bottom: 6px;
	}
	.brand {
		padding-top: 0;
	}
	.brand img {
		height: 26px;
	}
	.menu {
		width: 100%;
		justify-content: flex-start;
		gap: 0px;
		margin-top: 0;
	}
	.menu a {
		font-size: 14px;
		padding-bottom: 5px;
		margin: 0 10px 5px 0;
	}
	.menu .cta {
		margin: 0;
		padding: 5px 10px;
	}
	.books img {
		padding-top: 10px
	}
	.hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.hero-right {
		height: 46vh;
	}
	.hero-left {
		padding: 30px;
		justify-content: flex-start;
	}
	.hero-left-inner {
		max-width: none;
	}
	.ci-grid {
		grid-template-columns: 1fr;
	}
	.units-grid, .units-grid.units-grid-3c, .units-grid.units-grid-4c {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.alt-grid ,	.alt-grid.alt-grid-2eq{
		grid-template-columns: 1fr;
	}
	.nav-arrows {
		right: 18px;
		bottom: 18px;
	}
	.arrow-btn {
		width: 52px;
		height: 52px;
	}
	.subtitle .subtitle-logo {
	    width: 250px;
	}
	.modal.modal--narrow{
		width: 80vw;
		max-width: 1200px;
	}
	.modal.modal--unit-model,
	.modal.modal--narrow{
		left: 50%;
		right: auto;
		width: calc(100vw - 80px) !important;
		max-width: none !important;
	}
	.modal.modal--unit-model .modal-head,
	.modal.modal--narrow .modal-head{
		padding: 16px 14px 10px;
	}
	.modal.modal--unit-model .modal-body,
	.modal.modal--narrow .modal-body{
		padding: 10px 14px 14px;
	}
	.modal.modal--unit-model .modal-title,
	.modal.modal--narrow .modal-title{
		font-size: clamp(24px, 8vw, 38px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.section {
		transition: none;
		transform: none;
	}
	.modal, .modal-overlay.is-open .modal {
		transition: none;
		transform: none;
	}
	.modal-overlay {
		transition: none;
	}
}

/* ===== Index ===== */
.catalog-index {
	min-height: 100svh;
	background:
		radial-gradient(900px 480px at 88% 12%, rgba(0, 0, 0, .045), transparent 55%),
		radial-gradient(820px 420px at 12% 88%, rgba(227, 27, 27, .06), transparent 58%),
		#fff;
}
.catalog-index .topbar {
	position: relative;
	width: min(calc(100% - (var(--contentPadX) * 2)), 1460px);
	left: auto;
	transform: none;
	margin: 0 auto;
	padding-bottom: 18px;
}
.catalog-index-main {
	padding: 0 var(--contentPadX) 48px;
}
.catalog-index-shell {
	max-width: 1460px;
	margin: 0 auto;
}
.catalog-index-intro {
	max-width: 760px;
	padding: 48px 0 28px;
}
.catalog-index-intro .title {
	font-size: clamp(42px, 5vw, 74px);
	margin-bottom: 16px;
}
.catalog-index-intro .subtitle {
	max-width: 46ch;
	margin-bottom: 0;
}
.catalog-index-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.catalog-index-group + .catalog-index-group {
	margin-top: 44px;
}
.catalog-index-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.catalog-index-group-title {
	margin: 0;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.catalog-index-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.catalog-index-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 18px;
	text-decoration: none;
	color: #111;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.catalog-index-card--pending {
	opacity: .92;
}
.catalog-index-card:hover {
	background: rgba(0, 0, 0, .04);
	border-color: rgba(0, 0, 0, .12);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}
.catalog-index-card-status {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.catalog-index-card--active .catalog-index-card-status {
	background: rgba(16, 142, 84, .1);
	color: #0f7247;
}
.catalog-index-card--pending .catalog-index-card-status {
	background: rgba(0, 0, 0, .06);
	color: #555;
}
.catalog-index-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	min-height: 280px;
	border-radius: 12px;
	background: transparent;
	overflow: hidden;
}
.catalog-index-card-media img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	object-fit: contain;
}
.catalog-index-card-media--placeholder {
	border: 1px dashed rgba(0, 0, 0, .12);
}
.catalog-index-card-media-label {
	display: block;
	max-width: 14ch;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-align: center;
	color: rgba(17, 17, 17, .72);
}
.catalog-index-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.catalog-index-card-title {
	margin: 0;
	font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.catalog-index-card-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: transparent;
	transition: background 180ms ease;
}
.catalog-index-card:hover .catalog-index-card-icon {
	background: rgba(255, 255, 255, .75);
}
.catalog-index-card-icon .material-icons {
	font-size: 30px;
	color: #111;
	opacity: .92;
}
.catalog-index-card-copy {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #444;
}

@media (max-width: 980px) {
	.catalog-index-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.catalog-index-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.catalog-index .topbar {
		width: 100%;
	}
	.catalog-index-main {
		padding-bottom: 36px;
	}
	.catalog-index-group + .catalog-index-group {
		margin-top: 34px;
	}
	.catalog-index-intro {
		padding: 20px 0 22px;
	}
	.catalog-index-card {
		padding: 14px;
	}
	.catalog-index-card-media {
		min-height: 220px;
		padding: 14px;
	}
	.catalog-index-card-head {
		align-items: flex-start;
	}
	.catalog-index-card-icon {
		width: 42px;
		height: 42px;
	}
	.catalog-index-card-icon .material-icons {
		font-size: 26px;
	}
}