@font-face {
	font-family: "CLOUD";
	src: local("CLOUD");
	font-display: swap;
}

:root {
	--banner-bg: #113D23;
	--text-color: #434444;
	--main-bg: #a88753;
	--anchor-offset: 68px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img,
video,
iframe {
	max-width: 100%;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "CLOUD", "Segoe UI", Arial, sans-serif;
	color: var(--text-color);
	background: #ffffff;
	line-height: 1.5;
	min-height: 100vh;
}

h1,
h2,
h3,
p,
a {
	font-family: "CLOUD", "Segoe UI", Arial, sans-serif;
}

.banner {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--banner-bg);
	width: 100%;
}

.banner__content {
	max-width: 1200px;
	margin: 0 auto;
	min-height: 50px;
	padding: 6px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.banner__logo {
	width: 66px;
	max-width: 28vw;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.banner__nav {
	display: flex;
	flex-wrap: nowrap;
	flex: 1;
	justify-content: center;
	gap: clamp(14px, 2.8vw, 44px);
	align-items: center;
}

.banner__nav a {
	text-decoration: none;
	color: #fdfdfd;
	font-size: 0.9rem;
	font-weight: 600;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.banner__nav a:hover,
.banner__nav a:focus-visible {
	opacity: 0.75;
	outline: none;
}

.banner__instagram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #EFEFEF;
}

.banner__instagram svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

section {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 56px) 20px;
}

#main {
	background: var(--main-bg);
	max-width: 100%;
	padding: 0;
	min-height: calc(100svh - var(--anchor-offset) + 80px);
}

#acerca {
	background: #EFEFEF;
	max-width: 100%;
	scroll-margin-top: var(--anchor-offset);
}

#acerca > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#cursos {
	background: #EFEFEF;
	max-width: 100%;
	scroll-margin-top: var(--anchor-offset);
}

#aula-virtual,
#contacto {
	scroll-margin-top: var(--anchor-offset);
}

#aula-virtual {
	background: #f5f2ea;
	max-width: 100%;
}

#aula-virtual > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#cursos > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.cursos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-top: 16px;
}

.cursos__item {
	display: block;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	transition: opacity 0.2s ease;
}

.cursos__item:hover,
.cursos__item:focus-visible {
	opacity: 0.85;
	outline: none;
}

.cursos__item img {
	display: block;
	width: 100%;
	height: auto;
}

.main__container {
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

.main__video {
	width: 100%;
	height: auto;
	max-height: min(calc(100svh - 80px), 900px);
	border-radius: 0;
	display: block;
	background: var(--main-bg);
	object-fit: contain;
}

.section-title {
	font-size: clamp(1.2rem, 1.6vw, 1.7rem);
	margin-bottom: 10px;
	color: var(--text-color);
}

#acerca article h3 {
	font-size: clamp(1.2rem, 1.6vw, 1.75rem);
	margin-bottom: 14px;
}

#acerca .section-title {
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	margin-bottom: 16px;
}

#acerca p {
	font-size: clamp(1.02rem, 1.15vw, 1.12rem);
	line-height: 1.68;
}

#acerca article + article {
	margin-top: 26px;
}

.fundadoras {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.fundadoras__texto {
	flex: 1;
}

.fundadoras__texto p + p {
	margin-top: 16px;
}

.fundadoras__foto {
	width: min(34vw, 320px);
	min-width: 220px;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.academia {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
	align-items: stretch;
	gap: 28px;
}

.academia__texto {
	width: 100%;
}

.academia__texto p + p {
	margin-top: 16px;
}

.academia__isologotipo {
	width: min(100%, 340px);
	max-width: 340px;
	height: 100%;
	object-fit: contain;
	object-position: top;
	margin-top: 6px;
	justify-self: center;
	flex-shrink: 0;
}

.aula-login {
	max-width: 560px;
	margin-top: 18px;
	padding: 22px;
	width: 100%;
	background: #ffffff;
	border: 1px solid #d8d3c5;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(17, 61, 35, 0.08);
}

.aula-login__intro {
	margin-bottom: 16px;
}

.aula-login__form {
	display: grid;
	gap: 10px;
}

.aula-login__form label {
	font-weight: 600;
	font-size: 0.95rem;
}

.aula-login__form input {
	padding: 10px 12px;
	border: 1px solid #b6b6b6;
	border-radius: 8px;
	font-size: 0.96rem;
	font-family: inherit;
}

.aula-login__password-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
}

.aula-login__password-row input {
	width: 100%;
}

.aula-login__password-toggle {
	padding: 10px 14px;
	border: 1px solid #113d23;
	border-radius: 8px;
	background: #ffffff;
	color: #113d23;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.aula-login__password-toggle:hover,
.aula-login__password-toggle:focus-visible {
	opacity: 0.88;
	outline: none;
}

.aula-login__form input:focus {
	outline: 2px solid #113d23;
	outline-offset: 1px;
	border-color: #113d23;
}

.aula-login__form button {
	margin-top: 4px;
	padding: 11px 14px;
	border: none;
	border-radius: 8px;
	background: #113d23;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.aula-login__form button:hover,
.aula-login__form button:focus-visible {
	opacity: 0.88;
	outline: none;
}

.aula-login__message {
	min-height: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: 2px;
	color: #1c6b3d;
}

.aula-login__message.is-error {
	color: #ab2222;
}

.aula-login__help {
	margin-top: 12px;
	font-size: 0.88rem;
	color: #5d5e5e;
}

.aula-login__help a {
	color: #113d23;
	font-weight: 600;
}

.aula-page {
	background: #f3efe5;
}

.aula-panel {
	max-width: 1120px;
	margin: 32px auto;
	padding: 28px;
	background: #ffffff;
	border-radius: 18px;
	border: 1px solid #ddd7c8;
	box-shadow: 0 18px 40px rgba(17, 61, 35, 0.1);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.aula-panel > h1,
.aula-panel > .aula-subtitle,
.aula-panel > .cursos__grid,
.aula-panel > .aula-panel__actions {
	grid-column: 1 / -1;
}

.aula-panel h1 {
	margin-bottom: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.aula-panel p {
	margin-bottom: 14px;
}

.aula-panel__list {
	padding-left: 20px;
	margin-bottom: 20px;
}

.aula-panel__list li + li {
	margin-top: 8px;
}

.aula-panel__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 4px;
}

.aula-subtitle {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.08rem;
}

.aula-course-card {
	border: none;
	cursor: pointer;
	padding: 0;
	text-align: left;
	width: 50%;
	justify-self: center;
}

.aula-course-card img {
	height: auto;
}

.aula-course-card__title {
	display: block;
	padding: 10px 12px;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #113d23;
	border-top: 1px solid #ece7da;
	background: #fcfbf7;
}

.aula-materials,
.aula-viewer {
	margin-top: 0;
	padding-top: 14px;
	border-top: 1px solid #e1ddd3;
	min-width: 0;
}

#aula-materials-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.aula-material-card {
	padding: 12px;
	border: 1px solid #dbd6c9;
	border-radius: 10px;
	background: #faf8f2;
}

.aula-material-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.aula-material-card__download {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #113d23;
	border-radius: 8px;
	background: #ffffff;
	color: #113d23;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	cursor: pointer;
}

.aula-material-card__download:hover,
.aula-material-card__download:focus-visible {
	opacity: 0.85;
	outline: none;
}

.aula-tree {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

.aula-tree--root {
	padding: 2px 0 0;
}

.aula-tree--depth-0 {
	gap: 12px;
}

.aula-tree--depth-1 {
	padding-left: 12px;
}

.aula-tree--depth-2 {
	padding-left: 22px;
}

.aula-tree--depth-3 {
	padding-left: 32px;
}

.aula-tree--root {
	margin-top: 8px;
}

.aula-folder {
	border: 1px solid #dbd6c9;
	border-radius: 10px;
	background: #f4f1ea;
	padding: 4px 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.aula-folder--depth-0 {
	background: linear-gradient(180deg, #f7f4ee 0%, #f1ecdf 100%);
	border-color: #cfc6b2;
	box-shadow: 0 2px 8px rgba(17, 61, 35, 0.05);
}

.aula-folder--depth-1 {
	background: #fbf8f2;
	border-color: #d6cfbf;
}

.aula-folder--depth-2 {
	background: #fcfaf6;
	border-color: #e0d8c9;
}

.aula-folder--depth-3 {
	background: #fefdfb;
	border-color: #e7dfd1;
}

.aula-folder__name {
	font-weight: 600;
	font-size: 0.97rem;
	padding: 10px 14px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	user-select: none;
}

.aula-folder--depth-0 > .aula-folder__name {
	font-size: 1rem;
	font-weight: 700;
	color: #113d23;
}

.aula-folder--depth-1 > .aula-folder__name {
	font-size: 0.98rem;
}

.aula-folder--depth-2 > .aula-folder__name,
.aula-folder--depth-3 > .aula-folder__name {
	font-size: 0.95rem;
	font-weight: 600;
	color: #385340;
}

.aula-folder__name::before {
	content: "▶";
	font-size: 0.7rem;
	transition: transform 0.2s;
	display: inline-block;
}

details.aula-folder[open] > .aula-folder__name::before {
	transform: rotate(90deg);
}

.aula-folder > .aula-tree {
	padding: 8px 14px 10px;
	border-top: 1px solid #e1ddd3;
	margin-top: 4px;
}

.aula-folder--depth-0 > .aula-tree {
	background: rgba(255, 255, 255, 0.45);
}

.aula-folder--depth-1 > .aula-tree {
	border-top-color: #e8e0d0;
}

.aula-folder--depth-2 > .aula-tree,
.aula-folder--depth-3 > .aula-tree {
	border-top-color: #eee7db;
}

.aula-folder__empty {
	font-size: 0.88rem;
	color: #888;
	padding: 4px 0;
	margin: 0;
}

.aula-vimeo-section {
	border: 1px solid #dbd6c9;
	border-radius: 10px;
	background: #f6f3ec;
	padding: 12px;
	margin-bottom: 10px;
}

.aula-vimeo-section__title {
	margin: 0 0 10px;
	font-size: 1rem;
	color: #113d23;
}

.aula-vimeo-section__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.aula-video-card {
	background: #fffef9;
}

.aula-material-card h4 {
	font-size: 0.96rem;
	margin-bottom: 4px;
	word-break: break-word;
}

.aula-material-card p {
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.aula-material-card__open {
	padding: 8px 12px;
	border: none;
	border-radius: 8px;
	background: #113d23;
	color: #ffffff;
	font-family: inherit;
	cursor: pointer;
}

.aula-viewer__media {
	width: 100%;
	max-height: 520px;
	background: #000000;
	border-radius: 8px;
}

.aula-viewer__pdf {
	width: 100%;
	height: min(70vh, 620px);
	border: 1px solid #ccc8bb;
	border-radius: 8px;
	background: #ffffff;
}

.aula-viewer__vimeo {
	width: 100%;
	height: min(70vh, 620px);
	border: 1px solid #ccc8bb;
	border-radius: 8px;
	background: #000000;
}

.course-page {
	background: #f3efe5;
	color: var(--text-color);
}

.course-page main {
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 36px) 16px;
	display: grid;
	gap: 20px;
	justify-items: start;
}

.course-page h1 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.course-page img {
	display: block;
	width: min(100%, 340px);
	height: auto;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 8px;
}

.course-page .volver {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 10px 16px;
	background: #113d23;
	color: #ffffff;
	text-decoration: none;
	border-radius: 8px;
	width: fit-content;
}

@media (max-width: 768px) {
	.aula-viewer__pdf,
	.aula-viewer__vimeo {
		height: 420px;
	}
}

.aula-panel__back {
	display: inline-block;
	padding: 10px 14px;
	background: #113d23;
	color: #ffffff;
	text-decoration: none;
	border-radius: 8px;
}

.aula-panel__logout {
	padding: 10px 14px;
	background: #ffffff;
	color: #113d23;
	border: 1px solid #113d23;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.aula-panel__back:hover,
.aula-panel__back:focus-visible,
.aula-panel__logout:hover,
.aula-panel__logout:focus-visible {
	opacity: 0.88;
	outline: none;
}

.contacto__info {
	display: grid;
	gap: 6px;
}

@media (min-width: 980px) {
	.aula-panel {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}

	.aula-panel > h1,
	.aula-panel > .aula-subtitle,
	.aula-panel > .cursos__grid,
	.aula-panel > .aula-panel__actions {
		grid-column: 1 / -1;
	}

	.aula-materials {
		grid-column: 1;
	}

	.aula-viewer {
		grid-column: 2;
	}

	#aula-materials-list,
	.aula-vimeo-section__list {
		grid-template-columns: 1fr;
	}
}

.admin-page {
	background: #f1eee6;
}

.admin-main {
	max-width: 1040px;
	margin: 0 auto;
	padding: 36px 18px;
}

.admin-panel {
	background: #ffffff;
	border: 1px solid #d8d3c5;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 10px 28px rgba(17, 61, 35, 0.08);
}

.admin-panel h1 {
	font-size: clamp(1.35rem, 2.3vw, 1.9rem);
	margin-bottom: 8px;
}

.admin-subtitle {
	margin-bottom: 18px;
}

.admin-auth,
.admin-create,
.admin-users {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #e4dfd2;
}

.admin-auth__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	margin-top: 8px;
}

.admin-form,
.admin-user-card {
	display: grid;
	gap: 8px;
}

.admin-form input,
.admin-form textarea,
.admin-auth input,
.admin-user-card input,
.admin-user-card textarea {
	padding: 10px 12px;
	border: 1px solid #bcbcbc;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95rem;
}

.admin-form button,
.admin-auth button,
.admin-users__header button,
.admin-user-actions button,
.admin-back {
	padding: 10px 14px;
	border-radius: 8px;
	border: none;
	background: #113d23;
	color: #ffffff;
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.admin-message {
	min-height: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1c6b3d;
}

.admin-message.is-error {
	color: #ab2222;
}

.admin-users__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.admin-users__list {
	display: grid;
	gap: 14px;
}

.admin-user-card {
	padding: 14px;
	border: 1px solid #dbd7cb;
	border-radius: 10px;
	background: #fcfbf7;
}

.admin-user-card h3 {
	margin-bottom: 6px;
	font-size: 1.05rem;
}

.admin-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.admin-course-checks {
	display: grid;
	gap: 6px;
	padding: 8px;
	border: 1px solid #d5d1c5;
	border-radius: 8px;
	background: #fcfbf7;
}

.admin-user-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.admin-user-delete {
	background: #8b1c1c;
}

.admin-back {
	margin-top: 18px;
}

.admin-form button:hover,
.admin-auth button:hover,
.admin-users__header button:hover,
.admin-user-actions button:hover,
.admin-back:hover,
.admin-form button:focus-visible,
.admin-auth button:focus-visible,
.admin-users__header button:focus-visible,
.admin-user-actions button:focus-visible,
.admin-back:focus-visible {
	opacity: 0.88;
	outline: none;
}

@media (max-width: 768px) {
	.banner__content {
		gap: 14px;
		padding: 5px 12px;
	}

	.banner__logo {
		width: 58px;
	}

	.banner__nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 14px;
	}

	.banner__nav a {
		font-size: 0.82rem;
	}

	.main__video {
		max-height: calc(100svh - 105px);
	}

	section {
		padding: 24px 14px;
	}

	#main {
		padding: 0;
	}

	.fundadoras {
		flex-direction: column;
	}

	.academia {
		display: block;
	}

	.academia__texto,
	.academia__isologotipo {
		width: 100%;
		height: auto;
		margin-top: 0;
	}

	.fundadoras__foto {
		width: 100%;
		max-width: 420px;
		min-width: 0;
	}

	.aula-login {
		padding: 18px;
	}

	.aula-login__password-row {
		grid-template-columns: 1fr;
	}

	.aula-login__password-toggle {
		width: 100%;
	}

	.aula-panel {
		margin: 16px 10px;
		padding: 18px 14px;
		border-radius: 14px;
		gap: 14px;
	}

	.aula-panel__actions {
		flex-direction: column;
	}

	.aula-panel__back,
	.aula-panel__logout {
		width: 100%;
		text-align: center;
	}

	.admin-main {
		padding: 18px 10px;
	}

	.admin-panel {
		padding: 16px;
	}

	.admin-auth__row {
		grid-template-columns: 1fr;
	}

	.admin-users__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.cursos__grid {
		grid-template-columns: 1fr;
	}

	#aula-materials-list,
	.aula-vimeo-section__list,
	.cursos__grid {
		grid-template-columns: 1fr;
	}

	.aula-viewer__pdf,
	.aula-viewer__vimeo {
		height: 320px;
	}

	.course-page main {
		padding: 20px 14px;
	}

	.course-page img {
		width: 100%;
		max-width: 320px;
	}

	.course-page .volver {
		width: 100%;
	}
}