/* ====================================================
   MAR ARANGO — Subpágina de presentación
   Mobile-first. Canvas: sin header/footer del tema.
   Comparte tokens con la landing Expat Reset.
   ==================================================== */

:root {
	--mar-dark:    #252627;
	--mar-cream:   #ECE6D0;
	--mar-brown:   #4A261F;
	--mar-brown-2: #6B4237;
	--mar-gold:    #D1CD5A;
	--mar-blue:    #B1DAEE;
	--mar-white:   #FFFFFF;
	--mar-line:    rgba(74, 38, 31, .14);
	--mar-ff:      'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mar-radius:  14px;
}

body.mar-page-body {
	margin: 0;
	padding: 0;
	font-family: var(--mar-ff);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mar-brown);
	background: var(--mar-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.mar-page-body *,
body.mar-page-body *::before,
body.mar-page-body *::after { box-sizing: border-box; }
body.mar-page-body img { max-width: 100%; height: auto; display: block; }
/* Ojo: este reset tiene más especificidad que una regla de clase suelta.
   Toda regla que fije un color propio sobre un <a> debe ir prefijada con
   `body.mar-page-body` para superarlo. */
body.mar-page-body a { color: inherit; text-decoration: none; }
body.mar-page-body p { margin: 0 0 1em; }
body.mar-page-body h1,
body.mar-page-body h2,
body.mar-page-body h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; }

.mar-container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Ningún hijo de grid debe forzar scroll horizontal */
.mar-hero__grid > *,
.mar-edu__grid > *,
.mar-talks__grid > * { min-width: 0; }

/* ── Accesibilidad ─────────────────────────────── */
body.mar-page-body .mar-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .7rem 1.1rem;
	background: var(--mar-brown);
	color: var(--mar-white);
}
body.mar-page-body .mar-skip:focus { left: 0; }

body.mar-page-body a:focus-visible,
body.mar-page-body button:focus-visible {
	outline: 3px solid var(--mar-brown);
	outline-offset: 3px;
}

/* ── Barra superior ────────────────────────────── */
.mar-topbar {
	background: var(--mar-cream);
	border-bottom: 1px solid var(--mar-line);
}
.mar-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
}
.mar-topbar__back,
.mar-topbar__lang {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.mar-topbar__lang {
	padding: .35rem .9rem;
	border: 1px solid var(--mar-brown);
	border-radius: 999px;
}
body.mar-page-body .mar-topbar__back:hover,
body.mar-page-body .mar-topbar__lang:hover { color: var(--mar-brown-2); }

/* ── Botones ───────────────────────────────────── */
.mar-btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: .03em;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}
body.mar-page-body .mar-btn--solid {
	background: var(--mar-brown);
	color: var(--mar-white);
}
body.mar-page-body .mar-btn--solid:hover { background: var(--mar-brown-2); }
body.mar-page-body .mar-btn--ghost {
	border: 1px solid var(--mar-brown);
	color: var(--mar-brown);
	padding: .6rem 1.2rem;
	font-size: .85rem;
}
body.mar-page-body .mar-btn--ghost:hover {
	background: var(--mar-brown);
	color: var(--mar-white);
}

/* ── Tipografía de sección ─────────────────────── */
.mar-kicker {
	margin: 0 0 .4rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mar-brown-2);
}
.mar-h2 {
	font-size: clamp(1.5rem, 4.2vw, 2.1rem);
	margin-bottom: .8rem;
}
.mar-h2--center { text-align: center; }
.mar-lede {
	font-size: 1.02rem;
	color: var(--mar-brown-2);
	max-width: 62ch;
}
.mar-lede--center { margin-left: auto; margin-right: auto; text-align: center; }

section { padding: 3.2rem 0; }

/* ── Portada ───────────────────────────────────── */
.mar-hero {
	background: var(--mar-cream);
	padding: 2.4rem 0 3rem;
}
.mar-hero__grid {
	display: grid;
	gap: 1.8rem;
	justify-items: center;
	text-align: center;
}
.mar-hero__media {
	width: min(88vw, 320px);
	border-radius: var(--mar-radius);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(74, 38, 31, .18);
}
.mar-hero__name {
	font-size: clamp(2rem, 7.2vw, 3.4rem);
	line-height: 1.08;
	margin-bottom: .3em;
}
.mar-hero__rule {
	display: block;
	width: 64px;
	height: 3px;
	margin: 0 auto 1.1rem;
	background: var(--mar-gold);
	border-radius: 2px;
}
.mar-hero__role {
	font-size: 1.12rem;
	color: var(--mar-brown-2);
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: 1.8em;
}

/* ── Banner ────────────────────────────────────── */
.mar-banner {
	background: var(--mar-brown);
	color: var(--mar-cream);
	padding: 1.6rem 0;
}
.mar-banner__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 2.2rem;
	text-align: center;
}
.mar-banner__word {
	font-weight: 800;
	font-size: clamp(.95rem, 3.4vw, 1.35rem);
	letter-spacing: .16em;
}

/* ── Qué hago ──────────────────────────────────── */
.mar-do__grid {
	display: grid;
	gap: 1.1rem;
	margin-top: 1.8rem;
}
.mar-card {
	position: relative;
	padding: 1.5rem 1.4rem 1.4rem;
	background: var(--mar-white);
	border: 1px solid var(--mar-line);
	border-left: 4px solid var(--mar-gold);
	border-radius: 0 var(--mar-radius) var(--mar-radius) 0;
	box-shadow: 0 6px 18px rgba(74, 38, 31, .06);
}
.mar-card__num {
	display: block;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--mar-gold);
	margin-bottom: .3rem;
}
.mar-card__title { font-size: 1.08rem; }
.mar-card__text {
	margin: 0;
	font-size: .95rem;
	color: var(--mar-brown-2);
}

/* ── Formación ─────────────────────────────────── */
.mar-edu { background: var(--mar-cream); }
.mar-edu__grid {
	display: grid;
	gap: 1.8rem;
}
.mar-edu__media {
	width: min(80vw, 320px);
	margin-inline: auto;
	border-radius: var(--mar-radius);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(74, 38, 31, .14);
}
.mar-edu__list { margin: 1.4rem 0 0; }
.mar-edu__list dt {
	font-weight: 700;
	margin-top: 1.1rem;
}
.mar-edu__list dd {
	margin: .2rem 0 0;
	color: var(--mar-brown-2);
	font-size: .95rem;
}

/* ── Premios ───────────────────────────────────── */
.mar-awards__list {
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
	max-width: 72ch;
}
.mar-awards__list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .8rem;
	color: var(--mar-brown-2);
}
.mar-awards__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--mar-gold);
}

/* ── Conferencias ──────────────────────────────── */
.mar-talks { background: var(--mar-cream); }
.mar-talks__grid {
	display: grid;
	gap: 1.8rem;
}
.mar-talks__media {
	border-radius: var(--mar-radius);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(74, 38, 31, .14);
}
/* Mismo listado con viñeta dorada que los premios, para que las dos secciones
   de lista se lean igual. */
.mar-talks__list {
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}
.mar-talks__list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .8rem;
	color: var(--mar-brown-2);
}
.mar-talks__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--mar-gold);
}

/* ── Contacto ──────────────────────────────────── */
.mar-contact__grid {
	display: grid;
	gap: 1.1rem;
	margin-top: 2rem;
}
.mar-contact__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.5rem 1.4rem;
	border: 1px solid var(--mar-line);
	border-radius: var(--mar-radius);
	background: var(--mar-white);
}
.mar-contact__label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mar-brown-2);
	margin-bottom: .5rem;
}
.mar-contact__value {
	font-size: 1rem;
	margin-bottom: 1rem;
}
/* Empuja la acción al pie de la tarjeta: todas las de una fila alinean el
   botón a la misma altura aunque el texto ocupe distinto. */
.mar-contact__card > .mar-btn { margin-top: auto; }
body.mar-page-body .mar-contact__value a:hover { text-decoration: underline; }

/* ── Pie ───────────────────────────────────────── */
.mar-footer {
	background: var(--mar-dark);
	color: var(--mar-cream);
	padding: 2rem 0;
}
.mar-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.mar-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}
body.mar-page-body .mar-social a:hover,
body.mar-page-body .mar-footer__legal:hover { color: var(--mar-gold); }
.mar-footer__legal {
	font-size: .82rem;
	opacity: .8;
}

/* ── Tablet ────────────────────────────────────── */
@media (min-width: 640px) {
	section { padding: 4rem 0; }

	.mar-do__grid,
	.mar-contact__grid { grid-template-columns: repeat(2, 1fr); }
	.mar-contact__card--wide { grid-column: 1 / -1; }
}

/* ── Escritorio ────────────────────────────────── */
@media (min-width: 900px) {
	.mar-hero { padding: 3.5rem 0 4rem; }
	.mar-hero__grid {
		/* Columnas acotadas y centradas: antes el texto se estiraba hasta el
		   ancho del contenedor y dejaba un hueco muerto a la derecha. */
		grid-template-columns: 440px minmax(0, 520px);
		justify-content: center;
		align-items: center;
		gap: 3.5rem;
		justify-items: stretch;
		text-align: left;
	}
	.mar-hero__media { width: 100%; }
	.mar-hero__rule { margin-left: 0; }
	.mar-hero__role { margin-inline: 0; }

	.mar-edu__grid {
		grid-template-columns: 400px 1fr;
		align-items: center;
		gap: 3rem;
	}
	.mar-edu__media { width: 100%; }

	.mar-talks__grid {
		grid-template-columns: minmax(0, 1fr) 460px;
		align-items: center;
		gap: 3rem;
	}
}

/* ── Impresión ─────────────────────────────────── */
@media print {
	.mar-topbar, .mar-skip, .mar-btn { display: none !important; }
	body.mar-page-body { color: #000; background: #fff; }
	section { padding: 1rem 0; }
}