/*
 * Los Altillos — Sobre el Sitio
 * Archivo: assets/sobre-nosotros.css
 * Prefijo: lasn-
 * Depende de: assets/main.css
 * ============================================================ */

/* ── PAGE WRAPPER ──────────────────────────────────────────── */
.lasn-page {
	max-width: 860px;
	margin: 0 auto;
	padding: 3.5rem 2rem 5rem;
}

/* ── HERO ──────────────────────────────────────────────────── */
.lasn-hero {
	margin-bottom: 3.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--color-border);
}

.lasn-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--color-accent);
	margin-bottom: 1rem;
}
.lasn-hero__eyebrow svg {
	width: 12px;
	height: 12px;
	stroke: var(--color-accent);
	flex-shrink: 0;
}

.lasn-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	color: var(--color-text);
	margin-bottom: 1.25rem;
}
.lasn-hero__title span { color: var(--color-accent); }

.lasn-hero__lead {
	font-size: 1.125rem;
	color: var(--color-text-muted);
	line-height: 1.75;
	max-width: 640px;
	margin-bottom: 2rem;
}

.lasn-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}
.lasn-hero__meta-item {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .8125rem;
	color: var(--color-text-subtle);
}
.lasn-hero__meta-item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.lasn-hero__meta-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-border);
}

/* ── SECTIONS ──────────────────────────────────────────────── */
.lasn-section { margin-bottom: 3.5rem; }

.lasn-s-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--color-text);
	margin-bottom: .875rem;
	position: relative;
	padding-left: 1rem;
}
.lasn-s-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 3px;
	background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-light, #ff4d57));
	border-radius: 2px;
}

.lasn-s-body {
	font-size: 1rem;
	color: var(--color-text-muted);
	line-height: 1.75;
	margin-bottom: 1rem;
}

.lasn-inline-link {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: none;
}
.lasn-inline-link:hover { text-decoration: underline; }

/* ── DIVIDER ───────────────────────────────────────────────── */
.lasn-divider {
	height: 1px;
	background: var(--color-border);
	margin: 0 0 3.5rem;
}

/* ── TRUST GRID ────────────────────────────────────────────── */
.lasn-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--color-border);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	margin-top: 1.75rem;
}
.lasn-trust-item {
	background: var(--color-bg);
	padding: 1.375rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.lasn-trust-item__val {
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--color-text);
	line-height: 1;
}
.lasn-trust-item__val span { color: var(--color-accent); }
.lasn-trust-item__label {
	font-size: .8125rem;
	color: var(--color-text-subtle);
	line-height: 1.45;
}

/* ── PILLARS GRID ──────────────────────────────────────────── */
.lasn-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	margin-top: 1.75rem;
}
.lasn-pillar {
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 1.25rem;
	background: var(--color-bg);
	position: relative;
	overflow: hidden;
}
.lasn-pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light, #ff4d57));
}
.lasn-pillar__icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .75rem;
}
.lasn-pillar__icon svg {
	width: 17px;
	height: 17px;
	stroke: var(--color-accent);
}
.lasn-pillar__title {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: .3rem;
}
.lasn-pillar__desc {
	font-size: .8125rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* ── POLICY BOX ────────────────────────────────────────────── */
.lasn-policy-box {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 1.75rem;
	margin-top: 1.75rem;
}
.lasn-policy-box__title {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.lasn-policy-box__title svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-accent);
	flex-shrink: 0;
}
.lasn-policy-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .625rem;
}
.lasn-policy-list li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .875rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}
.lasn-policy-list li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
	margin-top: .45rem;
}

/* ── TEAM ──────────────────────────────────────────────────── */
.lasn-team {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

/* Person card */
.lasn-person-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.75rem;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-bg);
	box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.lasn-person-card__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid var(--color-border);
	background: var(--color-bg-secondary);
}
.lasn-person-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lasn-person-card__avatar--initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--color-accent);
	background: var(--color-bg-secondary);
	letter-spacing: -.02em;
}
.lasn-person-card__body { flex: 1; min-width: 0; }
.lasn-person-card__role {
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--color-accent);
	margin-bottom: .25rem;
}
.lasn-person-card__name {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: .125rem;
	letter-spacing: -.01em;
}
.lasn-person-card__spec {
	font-size: .875rem;
	color: var(--color-text-subtle);
	margin-bottom: .875rem;
}
.lasn-person-card__bio {
	font-size: .875rem;
	color: var(--color-text-muted);
	line-height: 1.65;
	margin-bottom: 1rem;
}
.lasn-person-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}
.lasn-person-card__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--color-text-subtle);
	text-decoration: none;
	padding: .3rem .75rem;
	border: 1px solid var(--color-border);
	border-radius: 100px;
	background: var(--color-bg-secondary);
	transition: border-color .15s, color .15s;
}
.lasn-person-card__link:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.lasn-person-card__link svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* Agency card — dark background */
.lasn-agency-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--color-bg-dark, #0f1923);
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.07);
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
.lasn-agency-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-accent-light, #ff4d57) 70%, transparent);
}
.lasn-agency-card__logo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255,255,255,.05);
	border: 2px solid rgba(255,255,255,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	padding: 10px;
}
.lasn-agency-card__logo svg { width: 100%; height: 100%; display: block; }
.lasn-agency-card__body { flex: 1; min-width: 0; }
.lasn-agency-card__role {
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(255,255,255,.35);
	margin-bottom: .25rem;
}
.lasn-agency-card__name {
	font-size: 1.1875rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: .125rem;
	letter-spacing: -.01em;
}
.lasn-agency-card__spec {
	font-size: .875rem;
	color: rgba(255,255,255,.45);
	margin-bottom: .875rem;
}
.lasn-agency-card__bio {
	font-size: .875rem;
	color: rgba(255,255,255,.55);
	line-height: 1.65;
	margin-bottom: 1rem;
}
.lasn-agency-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}
.lasn-agency-card__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 600;
	color: rgba(255,255,255,.5);
	text-decoration: none;
	padding: .3rem .75rem;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 100px;
	background: rgba(255,255,255,.05);
	transition: border-color .15s, color .15s;
}
.lasn-agency-card__link:hover {
	border-color: var(--color-accent-light, #ff4d57);
	color: var(--color-accent-light, #ff4d57);
}
.lasn-agency-card__link svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* ── SOURCES ───────────────────────────────────────────────── */
.lasn-sources {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	margin-top: 1.25rem;
}
.lasn-source {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .875rem 1.125rem;
	border: 1px solid var(--color-border);
	border-radius: 9px;
	background: var(--color-bg);
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: .875rem;
	transition: border-color .15s, background .15s;
}
.lasn-source:hover {
	border-color: var(--color-accent);
	background: var(--color-bg-secondary);
	color: var(--color-text);
}
.lasn-source__icon {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.lasn-source__icon svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-text-subtle);
}
.lasn-source__body { flex: 1; min-width: 0; }
.lasn-source__name {
	font-weight: 600;
	color: var(--color-text);
	font-size: .875rem;
}
.lasn-source__desc {
	font-size: .75rem;
	color: var(--color-text-subtle);
}
.lasn-source__arrow {
	color: var(--color-text-subtle);
	transition: color .15s, transform .15s;
	flex-shrink: 0;
}
.lasn-source:hover .lasn-source__arrow {
	color: var(--color-accent);
	transform: translateX(3px);
}
.lasn-source__arrow svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
}

/* ── CTAs ──────────────────────────────────────────────────── */
.lasn-cta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 1.75rem;
}
.lasn-cta-card {
	border-radius: 12px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .875rem;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
}
.lasn-cta-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent) 40%, var(--color-accent-light, #ff4d57) 60%, transparent);
}
.lasn-cta-card--dark {
	background: var(--color-bg-dark, #0f1923);
	border-color: rgba(255,255,255,.08);
}
.lasn-cta-card--light {
	background: var(--color-bg-secondary);
	border-color: var(--color-border);
}
.lasn-cta-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.lasn-cta-card--dark .lasn-cta-card__icon {
	background: rgba(199,8,29,.15);
	border: 1px solid rgba(199,8,29,.3);
}
.lasn-cta-card--light .lasn-cta-card__icon {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.lasn-cta-card__icon svg {
	width: 18px;
	height: 18px;
}
.lasn-cta-card--dark .lasn-cta-card__icon svg { stroke: var(--color-accent-light, #ff4d57); }
.lasn-cta-card--light .lasn-cta-card__icon svg { stroke: var(--color-accent); }

.lasn-cta-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.lasn-cta-card--dark .lasn-cta-card__title  { color: #fff; }
.lasn-cta-card--light .lasn-cta-card__title { color: var(--color-text); }

.lasn-cta-card__desc {
	font-size: .875rem;
	line-height: 1.65;
	flex: 1;
}
.lasn-cta-card--dark .lasn-cta-card__desc  { color: rgba(255,255,255,.5); }
.lasn-cta-card--light .lasn-cta-card__desc { color: var(--color-text-muted); }

.lasn-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .65rem 1.25rem;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	align-self: flex-start;
	transition: background .15s, border-color .15s;
	background: var(--color-accent);
	color: #fff;
	border: 1px solid var(--color-accent);
}
.lasn-cta-btn:hover {
	background: var(--color-accent-light, #ff4d57);
	border-color: var(--color-accent-light, #ff4d57);
}
.lasn-cta-card--light .lasn-cta-btn {
	background: var(--color-bg);
	color: var(--color-accent);
	border: 1.5px solid var(--color-border);
}
.lasn-cta-card--light .lasn-cta-btn:hover { border-color: var(--color-accent); }
.lasn-cta-btn svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 640px) {
	.lasn-page { padding: 2rem 1.25rem 4rem; }
	.lasn-cta-grid { grid-template-columns: 1fr; }
	.lasn-trust-grid { grid-template-columns: 1fr 1fr; }
	.lasn-person-card,
	.lasn-agency-card {
		flex-direction: column;
		align-items: flex-start;
	}
	.lasn-hero__title { font-size: 1.75rem; }
}
@media (max-width: 400px) {
	.lasn-trust-grid { grid-template-columns: 1fr; }
}