/* Estilos propios del sitio (separados de la plantilla HTML5UP).
   Cargado después de main-v1.css para que los overrides tengan prioridad. */

#topnav {
	position: sticky; top: 0; z-index: 1000;
	display: flex; justify-content: center; align-items: center; gap: 1.5em;
	padding: 0.7em 1em;
	background: rgba(31,42,50,0.92);
	backdrop-filter: blur(6px);
	font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase;
	min-height: 46px; box-sizing: border-box;
}
#navLinks { display: flex; align-items: center; gap: 1.5em; }
#topnav a { color: #fff; text-decoration: none; border-bottom: 2px solid transparent; opacity: 0.85; white-space: nowrap; line-height: 1; }
#topnav a:hover { opacity: 1; border-bottom-color: #27ae60; }
#navToggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6em; line-height: 1; cursor: pointer; padding: 0.1em 0.3em; }
#topnav a.nav-cta { color: #27ae60; font-weight: 700; }
.wa-cta {
	display: inline-flex; align-items: center; gap: 0.5em;
	background: #0B7A3E; color: #fff !important;
	padding: 0.7em 1.3em; border-radius: 50px;
	font-weight: 700; text-decoration: none; font-size: 0.9em;
	line-height: 1; white-space: nowrap;
	box-shadow: 0 4px 12px rgba(11,122,62,0.3);
	transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wa-cta:hover, .wa-cta:focus-visible { background: #095F30; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(9,95,48,0.5); }
.wa-cta i { font-size: 1.2em; }
.mail-cta { display: inline-flex; align-items: center; gap: 0.5em; background: #5a4a86; color: #fff !important; padding: 0.7em 1.3em; border-radius: 50px; font-weight: 700; text-decoration: none; white-space: nowrap; line-height: 1; font-size: 0.9em; box-shadow: 0 4px 12px rgba(90,74,134,0.3); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.mail-cta:hover, .mail-cta:focus-visible { background: #47396b; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(71,57,107,0.5); }
.mail-cta i { font-size: 1.2em; }
#three .row { display: flex; flex-wrap: wrap; gap: 1.2em; justify-content: center; align-items: center; }
#three .row > div { width: auto; max-width: none; flex: 0 0 auto; padding-left: 0; }
#three .row p { margin: 0; }
.cursos-grid { display: flex; flex-wrap: wrap; gap: 1.5em; }
.curso-online-card { flex: 1 1 300px; display: flex; flex-direction: column; text-align: left; background: #f5f8fb; border: 1px solid #dde7f0; border-radius: 14px; padding: 1.8em; }
.curso-online-card .co-icon { font-size: 2em; color: #1f6aa5; margin-bottom: 0.5em; }
.curso-online-card h3 { margin: 0 0 0.5em; }
.curso-online-card p { flex: 1 1 auto; color: #555; font-size: 0.95em; margin: 0 0 1.2em; }
.co-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em; background: #1f6aa5; color: #fff !important; padding: 0.75em 1.5em; border-radius: 50px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(31,106,165,0.3); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.co-cta:hover, .co-cta:focus-visible { background: #17537f; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23,83,127,0.5); }
.co-cta i { font-size: 0.9em; }
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 58px; height: 58px; border-radius: 50%; background: #0B7A3E; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8em; box-shadow: 0 4px 14px rgba(0,0,0,0.28); text-decoration: none; transition: opacity 0.25s, transform 0.25s, background 0.2s, visibility 0.25s; }
.wa-fab:hover, .wa-fab:focus-visible { background: #095F30; color: #fff; transform: translateY(-2px); }
.wa-fab.hidden { opacity: 0; visibility: hidden; transform: scale(0.7); pointer-events: none; }
@media (max-width: 736px) { .wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 1.7em; } }
.contact-methods { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; justify-content: center; margin-top: 1em; }
.contact-methods a { text-decoration: none; }
#conoceme-extra { display: none; }
#conoceme-extra.is-open { display: contents; }
.vermas-wrap { text-align: center; margin-top: 1.5em; }
html { scroll-behavior: smooth; }
#main section, #header { scroll-margin-top: 70px; }
@media (max-width: 736px) {
	#topnav { justify-content: flex-end; gap: 0; padding: 0.5em 1em; }
	#navToggle { display: block; }
	#navLinks {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: rgba(31,42,50,0.98); padding: 0.3em 0;
		box-shadow: 0 8px 16px rgba(0,0,0,0.25);
	}
	#navLinks.open { display: flex; }
	#navLinks a { padding: 0.95em 1.4em; opacity: 1; border-bottom: 2px solid transparent; border-top: 1px solid rgba(255,255,255,0.07); }
	#navLinks a:hover { background: rgba(255,255,255,0.06); border-bottom-color: transparent; }
}
#main > section#curso { border-top: 0; margin-top: 0; padding-top: 0; }
#topnav a.nav-course { color: #8e7cc3; font-weight: 700; }
#topnav a.nav-course:hover { border-bottom-color: #8e7cc3; }
.curso-card { display: flex; flex-wrap: wrap; gap: 2em; align-items: center; text-align: left; background: #f4f1fa; border: 1px solid #e5def5; border-radius: 14px; padding: 2em; }
.curso-card .curso-img { flex: 0 0 230px; max-width: 230px; }
.curso-card .curso-img img { width: 100%; border-radius: 10px; display: block; box-shadow: 0 6px 18px rgba(74,58,110,0.18); }
.curso-card .curso-body { flex: 1 1 320px; }
.curso-badge { display: inline-flex; align-items: center; gap: 0.5em; color: #8e7cc3; font-size: 0.7em; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.8em; }
.curso-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8e7cc3; display: inline-block; }
.curso-body ul { list-style: none; padding: 0; margin: 1em 0; }
.curso-body ul li { padding: 0.35em 0 0.35em 1.7em; position: relative; }
.curso-body ul li::before { content: "\2713"; position: absolute; left: 0; color: #27ae60; font-weight: 700; }
.curso-detalles { font-size: 0.88em; color: #666; margin: 0.6em 0 1.3em; }
.curso-cta { display: inline-flex; align-items: center; gap: 0.5em; background: #0B7A3E; color: #fff !important; padding: 0.85em 1.7em; border-radius: 50px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(11,122,62,0.3); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.curso-cta:hover, .curso-cta:focus-visible { background: #095F30; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(9,95,48,0.5); }
.curso-cta i { font-size: 1.2em; }
@media (max-width: 736px) { .curso-card { padding: 1.3em; justify-content: center; } .curso-card .curso-img { flex-basis: 100%; max-width: 260px; margin: 0 auto; } }
.masonry { column-count: 4; column-gap: 12px; }
.masonry .m-item { display: block; break-inside: avoid; margin: 0 0 12px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; }
.masonry .m-item img { width: 100%; height: auto; display: block; opacity: 0; transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease; }
.masonry .m-item img.loaded { opacity: 1; }
.masonry .m-item:hover img { transform: scale(1.05); filter: brightness(0.9); }
.masonry .m-item.is-loading { background: #ece9f3; min-height: 120px; }
.masonry .m-item.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.masonry .m-item.gal-hidden { display: none; }
.gal-more { text-align: center; margin-top: 1.5em; }
@media (max-width: 980px) { .masonry { column-count: 3; } }
@media (max-width: 640px) { .masonry { column-count: 2; column-gap: 8px; } .masonry .m-item { margin-bottom: 8px; } }