/* =========================================================================
   Carlos Velázquez — hoja de estilos principal
   Paleta formal: tinta marfil, azul noche y bronce mate. Sin degradados.
   ========================================================================= */

:root {
	--color-ivory: #f7f4ee;
	--color-ivory-deep: #efe9dd;
	--color-paper: #fffdf9;
	--color-ink: #1c2029;
	--color-ink-soft: #4a4f5a;
	--color-ink-faint: #7a7f8a;
	--color-navy: #0f2036;
	--color-navy-deep: #0a1626;
	--color-navy-mid: #16304d;
	--color-gold: #a3824c;
	--color-gold-soft: #c8a86c;
	--color-gold-dim: #8a6d3d;
	--color-border: #ddd4bf;
	--color-border-dark: #2a3d55;
	--color-white: #ffffff;

	--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;

	--container: 1180px;
	--radius: 2px;
	--shadow-soft: 0 18px 40px -24px rgba(15, 32, 54, 0.35);
	--shadow-card: 0 10px 28px -18px rgba(15, 32, 54, 0.28);
}

/* -------------------------------------------------------------------------
   Reset básico
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-ivory);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--color-navy);
	line-height: 1.25;
	margin: 0 0 0.6em;
}
p { margin: 0 0 1.1em; }
button { font-family: inherit; }

.wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--color-navy);
	color: var(--color-white);
	padding: 12px 20px;
	z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------------------
   Encabezados de sección reutilizables
   ------------------------------------------------------------------------- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-gold-dim);
	margin-bottom: 14px;
}
.section-heading {
	max-width: 720px;
	margin-bottom: 48px;
}
.section-heading h2 {
	font-size: clamp(28px, 3.4vw, 38px);
}
.section-heading p {
	color: var(--color-ink-soft);
	font-size: 18px;
	margin-bottom: 0;
}
.rule {
	width: 64px;
	height: 2px;
	background: var(--color-gold);
	border: 0;
	margin: 18px 0 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--navy {
	background: var(--color-navy);
	color: rgba(247, 244, 238, 0.88);
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--color-white); }
.section--alt { background: var(--color-ivory-deep); }
.section--paper { background: var(--color-paper); }

/* -------------------------------------------------------------------------
   Encabezado / navegación
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(247, 244, 238, 0.96);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: saturate(140%) blur(6px);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 84px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-gold);
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-size: 17px;
	letter-spacing: 0.04em;
}
.brand__name {
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--color-navy);
	letter-spacing: 0.01em;
}
.brand--footer .brand__mark { border-color: var(--color-gold-soft); color: var(--color-white); }
.brand--footer .brand__name { color: var(--color-white); }

.nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 1px solid var(--color-border);
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	width: 20px;
	margin: 0 auto;
	background: var(--color-navy);
}

.site-nav {
	position: fixed;
	inset: 84px 0 0 0;
	background: var(--color-ivory);
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	overflow-y: auto;
	border-top: 1px solid var(--color-border);
}
.site-nav.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}
.site-nav ul {
	display: flex;
	flex-direction: column;
	padding: 8px 24px 32px;
}
.site-nav a {
	display: block;
	padding: 16px 4px;
	border-bottom: 1px solid var(--color-border);
	font-size: 17px;
	color: var(--color-ink);
	letter-spacing: 0.01em;
}
.site-nav a.is-active { color: var(--color-gold-dim); font-weight: 600; }

@media (min-width: 940px) {
	.nav-toggle { display: none; }
	.site-nav {
		position: static;
		inset: auto;
		background: transparent;
		opacity: 1;
		visibility: visible;
		transform: none;
		border-top: 0;
		overflow: visible;
	}
	.site-nav ul {
		flex-direction: row;
		padding: 0;
		gap: 30px;
	}
	.site-nav a {
		padding: 6px 0;
		border-bottom: 0;
		font-size: 14.5px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		position: relative;
	}
	.site-nav a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: -6px;
		height: 2px;
		background: var(--color-gold);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s ease;
	}
	.site-nav a:hover::after,
	.site-nav a.is-active::after { transform: scaleX(1); }
	.site-nav a.is-active { color: var(--color-navy); }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
	background: var(--color-navy);
	color: rgba(247, 244, 238, 0.92);
	position: relative;
	border-bottom: 1px solid var(--color-border-dark);
}
.hero__inner {
	padding: 96px 0 104px;
	display: grid;
	gap: 48px;
}
.hero__eyebrow {
	color: var(--color-gold-soft);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.hero h1 {
	color: var(--color-white);
	font-size: clamp(34px, 5.4vw, 58px);
	max-width: 16ch;
	margin-bottom: 22px;
}
.hero p.lede {
	font-size: 19px;
	color: rgba(247, 244, 238, 0.78);
	max-width: 56ch;
	margin-bottom: 34px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__figure {
	justify-self: center;
	width: 100%;
	max-width: 320px;
}
.hero__portrait {
	border: 1px solid var(--color-border-dark);
	padding: 10px;
}
.hero__portrait img { width: 100%; }

@media (min-width: 860px) {
	.hero__inner {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: center;
		padding: 128px 0 132px;
	}
	.hero__figure { justify-self: end; }
}

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
	background: var(--color-gold);
	color: var(--color-navy-deep);
	border-color: var(--color-gold);
}
.btn--primary:hover { background: var(--color-gold-soft); border-color: var(--color-gold-soft); }
.btn--ghost {
	background: transparent;
	color: inherit;
	border-color: rgba(247, 244, 238, 0.4);
}
.btn--ghost:hover { border-color: var(--color-gold-soft); color: var(--color-gold-soft); }
.btn--outline {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-navy);
}
.btn--outline:hover { background: var(--color-navy); color: var(--color-white); }

/* -------------------------------------------------------------------------
   Tarjetas de servicio / pilares
   ------------------------------------------------------------------------- */
.pillars {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pillar-card {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	padding: 34px 30px;
	box-shadow: var(--shadow-card);
}
.pillar-card__index {
	font-family: var(--font-serif);
	font-size: 14px;
	color: var(--color-gold-dim);
	letter-spacing: 0.08em;
	margin-bottom: 14px;
	display: block;
}
.pillar-card h3 { font-size: 21px; margin-bottom: 12px; }
.pillar-card p { color: var(--color-ink-soft); margin-bottom: 0; font-size: 15.5px; }

/* -------------------------------------------------------------------------
   Listas con marca (check dorado) — reemplaza los íconos check.png originales
   ------------------------------------------------------------------------- */
.check-list li {
	position: relative;
	padding: 9px 0 9px 30px;
	border-bottom: 1px dashed var(--color-border);
	color: var(--color-ink-soft);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--color-gold);
	transform: rotate(45deg);
}
.check-list--columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	column-gap: 40px;
}

/* -------------------------------------------------------------------------
   Contenido de página interior
   ------------------------------------------------------------------------- */
.page-header {
	background: var(--color-navy);
	color: rgba(247, 244, 238, 0.9);
	padding: 64px 0 56px;
	border-bottom: 1px solid var(--color-border-dark);
}
.page-header .eyebrow { color: var(--color-gold-soft); }
.page-header h1 { color: var(--color-white); font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.page-header p { color: rgba(247, 244, 238, 0.72); font-size: 17px; max-width: 62ch; margin-bottom: 0; }
.breadcrumb {
	font-size: 13px;
	letter-spacing: 0.05em;
	color: rgba(247, 244, 238, 0.55);
	margin-bottom: 18px;
}
.breadcrumb a { color: rgba(247, 244, 238, 0.75); }
.breadcrumb a:hover { color: var(--color-gold-soft); }

.prose {
	max-width: 760px;
}
.prose h2 { font-size: 26px; margin-top: 0.2em; }
.prose p { color: var(--color-ink-soft); font-size: 17px; }
.prose strong { color: var(--color-ink); }

.content-grid {
	display: grid;
	gap: 56px;
}
@media (min-width: 860px) {
	.content-grid--sidebar { grid-template-columns: 2fr 1fr; }
}

.bio-figure {
	border: 1px solid var(--color-border);
	padding: 10px;
	background: var(--color-paper);
	max-width: 280px;
}

.panel {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	padding: 30px 32px;
}
.panel h3 { font-size: 18px; margin-bottom: 8px; }
.panel + .panel { margin-top: 20px; }

/* -------------------------------------------------------------------------
   Carrusel de citas (fondo negro, coherente con las imágenes originales)
   ------------------------------------------------------------------------- */
.quote-carousel {
	background: #000;
	padding: 0;
	overflow: hidden;
}
.quote-carousel__viewport {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	aspect-ratio: 1300 / 802;
}
.quote-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}
.quote-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.quote-carousel__slide img { width: 100%; height: 100%; object-fit: contain; }

.quote-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 22px 0 40px;
	background: #000;
}
.quote-carousel__arrow {
	background: transparent;
	border: 1px solid rgba(247, 244, 238, 0.35);
	color: var(--color-ivory);
	width: 40px;
	height: 40px;
	cursor: pointer;
	font-size: 16px;
}
.quote-carousel__arrow:hover { border-color: var(--color-gold-soft); color: var(--color-gold-soft); }
.quote-carousel__dots { display: flex; gap: 8px; }
.quote-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(247, 244, 238, 0.3);
	border: 0;
	cursor: pointer;
	padding: 0;
}
.quote-carousel__dot.is-active { background: var(--color-gold-soft); }

/* -------------------------------------------------------------------------
   Publicaciones (acordeón)
   ------------------------------------------------------------------------- */
.publication {
	border: 1px solid var(--color-border);
	background: var(--color-paper);
	margin-bottom: 24px;
}
.publication__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 28px;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}
.publication__title { flex: 1; }
.publication__title h3 { font-size: 20px; margin-bottom: 6px; }
.publication__meta { font-size: 13.5px; color: var(--color-ink-faint); letter-spacing: 0.02em; }
.publication__icon {
	flex-shrink: 0;
	width: 30px; height: 30px;
	border: 1px solid var(--color-gold);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-gold-dim);
	transition: transform 0.25s ease;
}
.publication[data-open="true"] .publication__icon { transform: rotate(45deg); }
.publication__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.publication[data-open="true"] .publication__body { grid-template-rows: 1fr; }
.publication__body-inner { overflow: hidden; }
.publication__content { padding: 0 28px 28px; border-top: 1px solid var(--color-border); padding-top: 22px; }
.publication__abstract { font-style: italic; color: var(--color-ink-soft); }
.publication__cite { color: var(--color-ink-soft); font-size: 15px; }
.publication__downloads a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-navy);
	font-weight: 600;
	font-size: 14.5px;
	padding: 6px 0;
}
.publication__downloads a:hover { color: var(--color-gold-dim); }
.publication__downloads a::before {
	content: "";
	width: 6px; height: 6px;
	border: 1.5px solid var(--color-gold);
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Galería de portfolio
   ------------------------------------------------------------------------- */
.gallery {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gallery-card {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.gallery-card__frame {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-ivory-deep);
}
.gallery-card__frame img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.gallery-card:hover .gallery-card__frame img { transform: scale(1.05); }
.gallery-card__body { padding: 20px 22px 24px; }
.gallery-card__body h3 { font-size: 17.5px; margin-bottom: 8px; }
.gallery-card__body p { color: var(--color-ink-soft); font-size: 14.5px; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Blog
   ------------------------------------------------------------------------- */
.blog-grid {
	display: grid;
	gap: 34px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blog-card {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
}
.blog-card__frame {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--color-ivory-deep);
	border-bottom: 1px solid var(--color-border);
	flex: none;
}
.blog-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Respaldo para navegadores sin aspect-ratio: el marco conserva la proporción 16/10 */
@supports not (aspect-ratio: 16 / 10) {
	.blog-card__frame { height: 0; padding-bottom: 62.5%; }
}
.blog-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-card__link { align-self: flex-start; margin-top: auto; }
.blog-more { margin-top: 48px; }
.blog-card__date { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-dim); font-weight: 600; }
.blog-card__body h3 { font-size: 19px; margin: 10px 0 10px; }
.blog-card__body p { color: var(--color-ink-soft); font-size: 15px; margin-bottom: 14px; }
.blog-card__link { font-weight: 600; font-size: 14px; color: var(--color-navy); letter-spacing: 0.03em; }
.blog-card__link:hover { color: var(--color-gold-dim); }

.article-header { text-align: left; }
.article-figure { margin: 0 0 32px; border: 1px solid var(--color-border); background: var(--color-paper); padding: 8px; }
.article-body p { color: var(--color-ink-soft); font-size: 17.5px; }
.article-body strong { color: var(--color-ink); }
.article-meta { font-size: 13.5px; color: var(--color-ink-faint); letter-spacing: 0.03em; margin-bottom: 8px; }
.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-border);
	background: var(--color-navy-deep);
	margin: 0 0 28px;
}
.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.article-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Contacto
   ------------------------------------------------------------------------- */
.contact-grid {
	display: grid;
	gap: 40px;
}
@media (min-width: 860px) {
	.contact-grid { grid-template-columns: 1fr 1.2fr; }
}
.contact-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-border);
}
.contact-list li:first-child { padding-top: 0; }
.contact-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border: 1px solid var(--color-gold);
	color: var(--color-gold-dim);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif);
	font-size: 15px;
}
.contact-list a:hover { color: var(--color-gold-dim); }
.map-frame {
	border: 1px solid var(--color-border);
	overflow: hidden;
	min-height: 320px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* -------------------------------------------------------------------------
   Cita destacada / principios
   ------------------------------------------------------------------------- */
.principles {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.principle blockquote {
	margin: 0;
	padding-left: 22px;
	border-left: 2px solid var(--color-gold);
}
.principle p { color: rgba(247, 244, 238, 0.82); font-size: 15.5px; margin-bottom: 0; }
.principle cite { display: block; margin-top: 14px; font-style: normal; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-soft); }

/* -------------------------------------------------------------------------
   Pie de página
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-navy-deep); color: rgba(247, 244, 238, 0.72); }
.site-footer__inner {
	display: grid;
	gap: 40px;
	padding: 64px 0 44px;
	grid-template-columns: 1.4fr 1fr 1fr;
}
.site-footer__col h2 {
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.site-footer__col p { font-size: 14.5px; }
.site-footer__col ul li { padding: 6px 0; font-size: 14.5px; }
.site-footer__col ul a:hover { color: var(--color-gold-soft); }
.site-footer__base {
	border-top: 1px solid var(--color-border-dark);
	padding: 20px 0;
}
.site-footer__base p { margin: 0; font-size: 13px; color: rgba(247, 244, 238, 0.5); }
.site-footer__base a { color: rgba(247, 244, 238, 0.72); }
.site-footer__base a:hover { color: var(--color-gold-soft); }

@media (max-width: 700px) {
	.site-footer__inner { grid-template-columns: 1fr; padding: 48px 0 32px; }
}

.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px; height: 46px;
	background: var(--color-navy);
	color: var(--color-white);
	border: 1px solid var(--color-gold);
	cursor: pointer;
	font-size: 17px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 400;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-gold); color: var(--color-navy-deep); border-color: var(--color-gold); }

/* -------------------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.divider {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 0;
}
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
	section { padding: 64px 0; }
	.section--tight { padding: 48px 0; }
}