/* Tablas comparativas en el celular (Sensorial Park). En computador no cambia nada. */
.sp-comp-tabs { display: none; }

@media (max-width: 700px) {
	.sp-comp-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; background: #F7F3FD; border-radius: 100px; }
	.sp-comp-tabs button { flex: 1 1 0; min-width: 0; border: 0; border-radius: 100px; padding: 10px 6px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.15; background: transparent; color: #4E1A8C; cursor: pointer; transition: background-color .2s, color .2s; }
	.sp-comp-tabs button[aria-pressed="true"] { background: var(--sp-color, #7B2FD1); color: #fff; box-shadow: 0 6px 16px rgba(78, 26, 140, .18); }
	.sp-comp-tabs button:focus-visible { outline: 3px solid #7B2FD1; outline-offset: 2px; }

	table.sp-comp { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
	table.sp-comp thead { display: none; }
	table.sp-comp .sp-comp-oculta { display: none !important; }
	table.sp-comp th, table.sp-comp td { padding: 13px 14px !important; }
	table.sp-comp tr > *:first-child { position: static !important; width: 52% !important; }
	table.sp-comp td:not(:first-child) { word-break: keep-all; overflow-wrap: normal; }
	table.sp-comp tbody tr:first-child td:not(:first-child) { font-size: 24px !important; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-comp-tabs button { transition: none; }
}