/*
	MOFcore — clean full-width layout, deck-focused.
	Deck palette: #00B1E6, #006E6E, #009F9F, #333, #fff, #f0f0f0
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #333;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
body.is-preload { opacity: 0; }
body.is-preload * { transition: none !important; }

img { max-width: 100%; height: auto; display: block; }
a { color: #00B1E6; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #0090b8; }

/* ----- Top bar ----- */
.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 4rem;
	padding: 0.75rem 1.5rem;
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #f0f0f0;
}
.topbar-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: 1.15rem;
	color: #333;
}
.topbar-logo:hover { color: #00B1E6; }
.topbar-logo img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 50%;
	transition: opacity 0.2s ease;
}
.topbar-logo:hover img { opacity: 0.85; }
.topbar-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.topbar-nav a {
	color: #444;
	font-weight: 500;
}
.topbar-nav a:hover { color: #00B1E6; }
.topbar-toggle {
	display: none;
	border: 0;
	background: #f0f0f0;
	color: #333;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 8px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	transition: background 0.2s ease, color 0.2s ease;
}
.topbar-toggle:hover { background: #00B1E6; color: #fff; }
.topbar-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.topbar-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #f0f0f0;
	color: #006E6E;
}
.icon-link:hover { background: #00B1E6; color: #fff; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.25rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
	background: #00B1E6;
	color: #fff;
	border-color: #00B1E6;
}
.btn-primary:hover {
	background: #0090b8;
	border-color: #0090b8;
	color: #fff;
}
.btn-outline {
	background: transparent;
	color: #00B1E6;
	border-color: #00B1E6;
}
.btn-outline:hover { background: #00B1E6; color: #fff; }
.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }

/* ----- Hero ----- */
.hero {
	position: relative;
	min-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: 4rem;
	padding: 2rem 1.5rem 4rem;
	overflow: hidden;
}
.hero-bg {
	position: absolute;
	inset: 0;
}
/* Recorte por laterales: se mantiene la parte superior de la imagen */
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* Hero with pitch front: solo imagen */
.hero-pitch-front {
	justify-content: flex-end;
	padding-bottom: 3rem;
}

/* ----- Sections ----- */
.section {
	padding: 4rem 1.5rem;
}
.container-narrow {
	max-width: 42rem;
	margin: 0 auto;
}
.section-about {
	background: #fafafa;
}
.section-about .lead {
	font-size: 1.125rem;
	color: #444;
	margin-bottom: 1rem;
}
.section-about p { margin: 0 0 1rem; color: #555; }
.section-about .btn-outline { margin-top: 0.5rem; }

/* ----- Deck (main focus) ----- */
.section-deck {
	padding: 3rem 1.5rem 5rem;
	background: #fff;
}
.deck-intro {
	text-align: center;
	max-width: 28rem;
	margin: 0 auto 3rem;
}
.deck-intro h2 {
	margin: 0 0 0.35rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #333;
}
.deck-intro p { margin: 0; color: #666; }
.deck-slides {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	max-width: 56rem;
	margin: 0 auto;
}
.deck-slide {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid #eee;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.5s ease, box-shadow 0.25s ease;
}
.deck-slide.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.deck-slide:hover {
	box-shadow: 0 12px 40px rgba(0,110,110,0.12), 0 2px 8px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.deck-slide img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

/* ----- Contact ----- */
.section-contact {
	background: #f0f5f7;
}
.section-contact h2 {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #333;
}
.section-contact p { margin: 0 0 1rem; color: #555; }
.contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem !important;
}
.contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #00B1E6;
	font-weight: 500;
}
.contact-links a:hover { color: #0090b8; }
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 28rem;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: #00B1E6;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; }

/* ----- Footer ----- */
.site-footer {
	padding: 1.5rem 1.5rem;
	background: #333;
	color: rgba(255,255,255,0.7);
	font-size: 0.875rem;
	text-align: center;
}
.site-footer a { color: rgba(255,255,255,0.9); }
.site-footer a:hover { color: #00B1E6; }
.site-footer p { margin: 0; }

/* ----- Responsive: mobile menu ----- */
@media (max-width: 768px) {
	.hero { min-height: 75vh; margin-top: 4rem; padding: 2rem 1rem 3rem; }
	.form-row { grid-template-columns: 1fr; }
	.deck-slides { gap: 2rem; }

	.topbar { flex-wrap: wrap; padding: 0.6rem 1rem; gap: 0; }
	.topbar-toggle {
		display: flex;
		margin-left: auto;
	}
	.topbar-menu {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem 0 0.5rem;
		border-top: 1px solid #eee;
		margin-top: 0.5rem;
	}
	.topbar.is-open .topbar-menu {
		display: flex;
	}
	.topbar-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.topbar-nav a {
		display: block;
		padding: 0.65rem 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.topbar-actions {
		flex-wrap: wrap;
		padding-top: 0.75rem;
		gap: 0.75rem;
	}
}

@media (max-width: 480px) {
	.topbar-logo img { width: 2rem; height: 2rem; }
	.topbar-logo span { font-size: 1rem; }
	.section { padding: 3rem 1rem; }
}