@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 {
	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) var(--contentPadX) 0;
	position: absolute;
	z-index: 90;
	width: 100%;
	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;
}
.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;
}
/* ===== RIGHT COLUMN (imagen entera bottom-right) ===== */
.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: #f3d5d7;
} /* rosa */
#campus .char-right {
	background: #f1f1f1;
} /* gris claro */
#te-interesa .char-right {
	background: linear-gradient(125deg, #fff 50%, #e20717 50%);
} /* diagonal */
.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;
}
.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;
}
.unit-img img {
    width: 100%;
    height: auto;
    display: block;
}
#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;
}
.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-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;
}
.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-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: min(520px, 70%);
	aspect-ratio: 1 / 1;
	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%;
}
.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;
}

.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);
	}
}

@media (max-width: 700px){
	.unit-model-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

@media (max-width: 480px){
	.unit-model-grid{
		grid-template-columns: 1fr;
	}
}
/* MOBILE */
@media (max-width: 860px) {
	.topbar {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		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 {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.alt-grid {
		grid-template-columns: 1fr;
	}
	.nav-arrows {
		right: 18px;
		bottom: 18px;
	}
	.arrow-btn {
		width: 52px;
		height: 52px;
	}
	.subtitle .subtitle-logo {
	    width: 250px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.section {
		transition: none;
		transform: none;
	}
	.modal, .modal-overlay.is-open .modal {
		transition: none;
		transform: none;
	}
	.modal-overlay {
		transition: none;
	}
}