/**
 * SemiConecta — Ficha de socio (v0.44.0).
 *
 * Cabecera oscura con el logo recortado sobre fondo claro (los logos
 * corporativos casi nunca funcionan sobre negro), cuerpo a dos columnas con
 * lateral pegajosa, y colapso limpio a una columna en tablet.
 */

/* ---------------------------------------------------------------
 * Cabecera
 * ------------------------------------------------------------ */
.lst-hero {
	position: relative;
	background: var(--ink-strong);
	color: var(--white);
	padding: 28px 0 46px;
	overflow: hidden;
}
.lst-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at 70% 0%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 20%, transparent 75%);
	pointer-events: none;
}
.lst-hero-inner { position: relative; }

.lst-breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--gray-400);
	margin-bottom: 26px;
}
.lst-breadcrumb a { color: var(--gray-300); text-decoration: none; }
.lst-breadcrumb a:hover { color: var(--yellow); }

.lst-hero-main { display: flex; gap: 26px; align-items: flex-start; }

.lst-hero-logo {
	flex: 0 0 auto;
	width: 116px; height: 116px;
	background: var(--white);
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	overflow: hidden;
	box-shadow: var(--shadow-panel);
}
.lst-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.lst-hero-logo--empty { background: var(--yellow); }
.lst-hero-logo--empty span {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 800;
	color: var(--ink);
}

.lst-hero-copy { min-width: 0; flex: 1; }

/*
 * OJO: el color hay que declararlo en el propio h1.
 *
 * `.lst-hero { color: var(--white) }` solo define un color HEREDADO, y la
 * herencia siempre pierde contra una regla puesta directamente sobre el
 * elemento. Como base.css trae `h1, h2, h3, h4 { color: var(--ink) }`, el
 * título salía negro sobre fondo negro. Lo mismo vale para cualquier h2/h3
 * que se meta dentro de la cabecera.
 */
.lst-hero h1,
.lst-hero h2,
.lst-hero h3,
.lst-title {
	color: var(--white);
}

.lst-title {
	margin: 8px 0 0;
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.lst-verified { color: var(--yellow); display: inline-flex; flex: 0 0 auto; }

.lst-hero-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.lst-facts {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}
.lst-facts li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--gray-300);
}
.lst-facts svg { color: var(--yellow); flex: 0 0 auto; }

.lst-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button--ghost-light {
	background: transparent;
	color: var(--white);
	border: 1px solid rgba(255,255,255,.35);
}
.button--ghost-light:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------------------------------------------------------------
 * Cuerpo
 * ------------------------------------------------------------ */
.lst-body { padding-top: 46px; }

.lst-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 42px;
	align-items: start;
}

.lst-main { min-width: 0; }

.lst-block { margin-bottom: 40px; }
.lst-block:last-child { margin-bottom: 0; }

.lst-h2 {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 6px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--yellow);
	display: inline-block;
}
.lst-h3 {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	margin: 22px 0 8px;
	color: var(--gray-700);
}
.lst-block-note {
	margin: 10px 0 16px;
	font-size: 14px;
	color: var(--gray-600);
	max-width: 62ch;
}
.lst-empty {
	padding: 26px;
	background: var(--gray-50);
	border: 1px dashed var(--gray-300);
	border-radius: var(--radius-sm);
	color: var(--gray-600);
	margin: 0 0 36px;
}

/* La sección "qué busca" lleva fondo propio: es la que genera contacto,
   y conviene que destaque sin gritar. */
.lst-block--seek {
	background: var(--gray-50);
	border-left: 4px solid var(--yellow);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 22px 26px;
}
.lst-block--seek .lst-h2 { border-bottom-color: var(--ink-strong); }

/* Listas de términos */
.lst-taglist {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lst-taglist a {
	display: inline-block;
	background: var(--white);
	border: 1px solid var(--gray-300);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lst-taglist a:hover {
	background: var(--ink-strong);
	border-color: var(--ink-strong);
	color: var(--white);
}
.lst-taglist--accent a { background: var(--yellow-soft); border-color: var(--yellow-dark); }
.lst-taglist--accent a:hover { background: var(--ink-strong); border-color: var(--ink-strong); }
.lst-taglist--sm a { font-size: 12px; padding: 4px 11px; }

.lst-address {
	margin: 14px 0 16px;
	font-size: 15px;
	color: var(--gray-700);
}
.lst-map {
	height: 380px;
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-200);
	overflow: hidden;
	background: var(--gray-100);
}
.lst-map-links { margin: 10px 0 0; font-size: 13px; }
.lst-map-links a { color: var(--gray-600); }

/* Pin del mapa en amarillo corporativo */
.sc-pin span {
	display: block;
	width: 100%; height: 100%;
	background: var(--yellow);
	border: 3px solid var(--ink-strong);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------
 * Lateral
 * ------------------------------------------------------------ */
.lst-aside {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lst-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 20px;
}
.lst-card-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--gray-600);
	margin: 0 0 12px;
}
.lst-card--contact { border-top: 3px solid var(--yellow); }

.lst-person { margin: 0 0 14px; font-size: 14px; line-height: 1.4; }
.lst-person strong { display: block; color: var(--ink); }
.lst-person span { color: var(--gray-600); font-size: 13px; }

.lst-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lst-contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.lst-contact-list svg { color: var(--gray-500); flex: 0 0 auto; margin-top: 2px; }
.lst-contact-list a {
	color: var(--ink-soft);
	text-decoration: none;
	word-break: break-word;
	border-bottom: 1px solid var(--gray-300);
}
.lst-contact-list a:hover { color: var(--ink); border-bottom-color: var(--yellow); }

.lst-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--gray-100);
}
.lst-socials a {
	font-size: 12px;
	font-weight: 600;
	padding: 5px 11px;
	border: 1px solid var(--gray-300);
	border-radius: 999px;
	color: var(--gray-700);
	text-decoration: none;
}
.lst-socials a:hover { background: var(--ink-strong); color: var(--white); border-color: var(--ink-strong); }

.lst-card--cta { background: var(--gray-50); }
.lst-card--cta p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--gray-600); }

.lst-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-600);
	text-decoration: none;
	padding: 4px 0;
}
.lst-back:hover { color: var(--ink); }
.lst-back svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.lst-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
}

@media (max-width: 900px) {
	/* La lateral sube: desde el móvil lo que se busca es el contacto. */
	.lst-grid { grid-template-columns: 1fr; gap: 34px; }
	.lst-aside { position: static; order: -1; }
	.lst-map { height: 300px; }
}

@media (max-width: 640px) {
	.lst-hero { padding: 20px 0 34px; }
	.lst-hero-main { flex-direction: column; gap: 18px; }
	.lst-hero-logo { width: 84px; height: 84px; }
	.lst-hero-logo--empty span { font-size: 30px; }
	.lst-breadcrumb { margin-bottom: 18px; }
	.lst-facts { gap: 6px 16px; }
	.lst-hero-actions { gap: 8px; }
	.lst-hero-actions .button { flex: 1 1 100%; text-align: center; }
	.lst-block--seek { padding: 18px; }
	.lst-map { height: 240px; }
	.lst-body { padding-top: 30px; }
}

/* ---------------------------------------------------------------
 * Refuerzos de contraste sobre la cabecera oscura
 *
 * Todo lo que se pinta encima de .lst-hero necesita color explícito: las
 * reglas globales de base.css y components.css apuntan a texto oscuro
 * porque asumen fondo claro.
 * ------------------------------------------------------------ */
.lst-hero .eyebrow,
.lst-hero .eyebrow--light {
	color: var(--yellow);
}

.lst-hero a:not(.button) {
	color: var(--gray-300);
}
.lst-hero a:not(.button):hover {
	color: var(--yellow);
}

/* El botón fantasma hereda `color: inherit`, que sobre negro se quedaba
   en un gris ilegible. */
.lst-hero .button--ghost {
	color: var(--white);
	border-color: rgba(255, 255, 255, .45);
}
.lst-hero .button--ghost:hover {
	background: rgba(255, 255, 255, .1);
	border-color: var(--white);
	color: var(--yellow);
}

/* Los chips de etiqueta traen sus colores por variable inline y funcionan
   igual sobre fondo oscuro, pero el borde necesita algo más de presencia. */
.lst-hero-chips .sc-chip {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Foco visible sobre fondo oscuro: el outline por defecto del navegador
   desaparece contra el negro. */
.lst-hero a:focus-visible,
.lst-hero button:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}


/* Aviso cuando los datos de contacto están reservados a registrados. */
.lst-contact-locked {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--gray-50);
	border-left: 3px solid var(--yellow);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-600);
}
.lst-contact-locked a { color: var(--ink); font-weight: 600; }