/**
 * SemiConecta Core — estilos base y tokens corporativos (§7).
 * Mobile-first. Define las variables que reutiliza el resto de hojas.
 */

:root {
	/* Colores corporativos (§7). */
	--sc-amarillo:     #FFD500; /* botones, CTA, iconos, acentos */
	--sc-negro:        #000000; /* texto principal */
	--sc-azul-marino:  #1A1F71; /* secciones grandes / hero */
	--sc-blanco:       #FFFFFF; /* fondos */
	--sc-gris-fondo:   #F9F9F9; /* fondo alternativo */
	--sc-gris-texto:   #333333; /* texto secundario / UI */
	--sc-gris-texto-2: #444444;
	--sc-gris-borde:   #E2E2E2;

	/* Tipografía (§7). */
	--sc-font-titulo: "IBM Plex Sans", system-ui, sans-serif;
	--sc-font-cuerpo: "Inter", system-ui, sans-serif;

	/* Escala y radios. */
	--sc-radius: 10px;
	--sc-gap: 1rem;
	--sc-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
}

/* Contenedores del plugin: heredan tipografía corporativa sin afectar al tema. */
.sc-search,
.sc-search * {
	font-family: var( --sc-font-cuerpo );
	box-sizing: border-box;
}

.sc-search h1,
.sc-search h2,
.sc-search h3,
.sc-search .sc-card__title {
	font-family: var( --sc-font-titulo );
	color: var( --sc-negro );
}

/* Botones corporativos reutilizables. */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border: 2px solid transparent;
	border-radius: var( --sc-radius );
	font-family: var( --sc-font-titulo );
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* CTA principal: amarillo sobre negro. */
.sc-btn--primary {
	background: var( --sc-amarillo );
	color: var( --sc-negro );
}
.sc-btn--primary:hover {
	background: #e6c000;
}

/* Outline (sobre fondo oscuro). */
.sc-btn--outline {
	background: transparent;
	color: var( --sc-blanco );
	border-color: var( --sc-blanco );
}
.sc-btn--outline:hover {
	background: var( --sc-blanco );
	color: var( --sc-azul-marino );
}

/* Ghost (sobre fondo claro). */
.sc-btn--ghost {
	background: var( --sc-blanco );
	color: var( --sc-gris-texto );
	border-color: var( --sc-gris-borde );
}
.sc-btn--ghost:hover {
	border-color: var( --sc-negro );
	color: var( --sc-negro );
}

/* Accesibilidad: ocultar visualmente manteniendo lectores de pantalla. */
.sc-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
}