/* Fuentes del propio sitio (OFL). */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/caveat-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens y base.
   Los cuatro colores de marca (--brand-*) los escribe el tema desde los colores globales de Elementor
   (Sitio › Colores globales); de ahí salen los tonos de apoyo. Claro por defecto; oscuro cuando la alumna lo elige
   en Tutor (data-tutor-theme="dark") o cuando sigue al teléfono (system) y el teléfono está en oscuro. */

:root {
	--c-primary: var(--brand-primary, #4a4a4a);
	--c-secondary: var(--brand-secondary, #6a6a6a);
	--c-accent: var(--brand-accent, #9a9a9a);
	--c-primary-deep: color-mix(in oklch, var(--c-primary) 55%, #000);
	--c-primary-ink: color-mix(in oklch, var(--c-primary) 72%, #000);
	--c-primary-soft: color-mix(in oklch, var(--c-primary) 24%, #fff);
	--c-secondary-deep: color-mix(in oklch, var(--c-secondary) 78%, #000);
	--c-secondary-soft: color-mix(in oklch, var(--c-secondary) 18%, #fff);

	--text: var(--brand-text, #1c1c1c);
	--bg: color-mix(in oklch, var(--c-primary) 9%, #fff);
	--card: #fff;
	--raise: color-mix(in oklch, var(--c-primary) 6%, #fff);
	--chip: color-mix(in srgb, var(--text) 6%, transparent);
	--muted: color-mix(in oklch, var(--text) 68%, #fff);
	--line: color-mix(in srgb, var(--text) 9%, transparent);
	--card-sh: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent), 0 14px 30px -24px color-mix(in srgb, var(--text) 35%, transparent);

	--font-display: var(--brand-font-display, system-ui), system-ui, sans-serif;
	--font-body: var(--brand-font-body, system-ui), system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Instrument Serif", Georgia, serif;
	--font-hand: "Caveat", "Segoe Script", cursive;

	/* Escala tipográfica contenida: nada de títulos gigantes. */
	--fs-xs: 0.8125rem;
	--fs-s: 0.9375rem;
	--fs-m: 1.0625rem;
	--fs-l: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--fs-xl: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);

	/* Radios distintos según el tamaño de la pieza. */
	--r-xl: 28px;
	--r-lg: 22px;
	--r-md: 16px;
	--r-sm: 12px;
	--r-pill: 999px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gutter: clamp(16px, 4vw, 40px);

	color-scheme: light;
}

/* Los tonos profundos conservan la saturación del color de marca (mezclar con negro los apaga):
   turquesa #3BBEC4 da #0E6B71 y coral #F48387 da #D9474F, como en la maqueta. */
@supports (color: oklch(from red l c h)) {
	:root {
		--c-primary-deep: oklch(from var(--c-primary) calc(l - 0.27) calc(c * 0.78) h);
		--c-secondary-deep: oklch(from var(--c-secondary) calc(l - 0.12) calc(c * 1.3) h);
	}
}

:root[data-tutor-theme="dark"] {
	--bg: color-mix(in oklch, var(--c-primary) 14%, #050708);
	--card: color-mix(in oklch, var(--c-primary) 22%, #0b0e0f);
	--raise: rgb(255 255 255 / 6%);
	--chip: rgb(255 255 255 / 7%);
	--text: color-mix(in oklch, var(--c-primary) 6%, #fff);
	--muted: color-mix(in oklch, var(--c-primary) 18%, #a9b0b1);
	--line: rgb(255 255 255 / 8%);
	--c-primary-soft: color-mix(in oklch, var(--c-primary) 34%, #0b0e0f);
	--c-secondary-soft: color-mix(in oklch, var(--c-secondary) 30%, #0b0e0f);
	--c-primary-ink: color-mix(in oklch, var(--c-primary) 78%, #fff);
	--card-sh: 0 14px 30px -22px rgb(0 0 0 / 60%);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root[data-tutor-theme="system"] {
		--bg: color-mix(in oklch, var(--c-primary) 14%, #050708);
		--card: color-mix(in oklch, var(--c-primary) 22%, #0b0e0f);
		--raise: rgb(255 255 255 / 6%);
		--chip: rgb(255 255 255 / 7%);
		--text: color-mix(in oklch, var(--c-primary) 6%, #fff);
		--muted: color-mix(in oklch, var(--c-primary) 18%, #a9b0b1);
		--line: rgb(255 255 255 / 8%);
		--c-primary-soft: color-mix(in oklch, var(--c-primary) 34%, #0b0e0f);
		--c-secondary-soft: color-mix(in oklch, var(--c-secondary) 30%, #0b0e0f);
		--c-primary-ink: color-mix(in oklch, var(--c-primary) 78%, #fff);
		--card-sh: 0 14px 30px -22px rgb(0 0 0 / 60%);

		color-scheme: dark;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-m);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--c-primary-ink);
}

:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.screen-reader-text,
.saltar:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.saltar:focus {
	position: fixed;
	z-index: 100;
	top: 12px;
	left: 12px;
	padding: 10px 16px;
	border-radius: var(--r-pill);
	background: var(--card);
}

/* Cabecera y pie del sitio (las páginas públicas; el panel usa la barra lateral de Tutor). */

.cabecera {
	position: sticky;
	z-index: 20;
	top: 0;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(16px) saturate(160%);
}

.cabecera__in,
.pie__in {
	display: flex;
	gap: 24px;
	align-items: center;
	width: min(100% - 2 * var(--gutter), 1200px);
	margin-inline: auto;
}

.cabecera__in {
	min-height: 68px;
}

.cabecera__menu {
	margin-inline-start: auto;
}

.cabecera__menu ul {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabecera__menu a {
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 42px;
}

.sitio-nombre {
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
}

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: var(--r-pill);
	background: var(--c-primary-deep);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.boton:hover {
	background: var(--text);
}

.boton:active {
	transform: scale(0.97);
}

.boton--chico {
	min-height: 38px;
	margin-inline-start: auto;
	padding-inline: 18px;
	font-size: var(--fs-s);
}

.cabecera__menu + .boton--chico {
	margin-inline-start: 0;
}

.pie {
	margin-top: 64px;
	padding-block: 28px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-s);
}

.pie__in {
	justify-content: space-between;
}

.pie ul {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagina {
	width: min(100% - 2 * var(--gutter), 760px);
	margin: 48px auto 0;
}

.pagina__titulo {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Movimiento (sitio y app) ---------- */

/* Transición suave entre páginas del mismo sitio (navegadores que la soportan; los demás cambian normal). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 180ms var(--ease) both salir-pagina;
}

::view-transition-new(root) {
	animation: 320ms var(--ease) both entrar-pagina;
}

@keyframes salir-pagina {
	to { opacity: 0; transform: translateY(-6px); }
}

@keyframes entrar-pagina {
	from { opacity: 0; transform: translateY(10px); }
}

/* La barra lateral y la de pestañas no se mueven al cambiar de página: así se siente una app. */
.side,
.tabbar {
	view-transition-name: var(--vt-nombre, none);
}

.side { --vt-nombre: barra-lateral; }
.tabbar { --vt-nombre: barra-pestanas; }

::view-transition-group(barra-lateral),
::view-transition-group(barra-pestanas) {
	animation-duration: 0s;
}

/* Aparición al entrar en pantalla (assets/js/movimiento.js). Sin JS, todo se ve normal. */
.js-mov [data-visto="0"] {
	opacity: 0;
	transform: translateY(12px) scale(0.985);
}

.js-mov [data-visto="1"] {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.55s var(--ease) calc(var(--i, 0) * 55ms),
		transform 0.7s var(--ease) calc(var(--i, 0) * 55ms);
}

/* Barra de carga fina arriba, solo si la página siguiente tarda. */
.carga-pagina {
	position: fixed;
	z-index: 9999;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	pointer-events: none;
}

.carga-pagina.on {
	opacity: 1;
	animation: cargando 2.4s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

@keyframes cargando {
	0% { transform: scaleX(0); }
	60% { transform: scaleX(0.7); }
	100% { transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.js-mov [data-visto] {
		opacity: 1 !important;
		transform: none !important;
	}
}